@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap');

/* ============================================================
   HSE DESIGN SYSTEM — style.css
   Hospo Systems Engine | Warm Editorial (Brand System v2.0)
   Cream + terracotta + forest green | Newsreader + Inter
   Class API preserved from v1.0 so pages restyle in place.
   Canonical reference: web/brand-guidelines.html
   ============================================================ */

/* 1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Primary — terracotta (the pulse) */
  --terracotta:      #C1440E;
  --terracotta-deep: #9E3408;
  --clay:            #E2724A;
  --terracotta-wash: #F7E4D7;

  /* Secondary — forest green (the structure) */
  --forest:          #224A3A;
  --forest-deep:     #1A3B2E;
  --forest-wash:     #E5EDE7;

  /* Neutrals (warm) */
  --paper:           #FEF7EE;
  --bone:            #FBEFE0;
  --sand:            #F3E4D0;
  --almond:          #EAD7BE;
  --line:            #DFCBAF;
  --taupe:           #C9B49A;
  --ink:             #2A2520;
  --ink-soft:        #4A433B;
  --muted:           #6F6453;

  /* Semantic (functional only) */
  --success:         #2F7A52;  --success-wash: #E4EEDF;
  --warning:         #8A5410;  --warning-wash: #F6E7CE;
  --danger:          #A12A1E;  --danger-wash:  #F6DED8;

  /* Type */
  --serif:           'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:            'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Spacing scale */
  --space-xs:        4px;
  --space-sm:        8px;
  --space-md:        16px;
  --space-lg:        24px;
  --space-xl:        40px;
  --space-2xl:       64px;
  --space-3xl:       96px;

  /* Radius + width */
  --r-sm:            2px;
  --r:               4px;
  --r-lg:            12px;
  --max-w:           1140px;
  --max-w-narrow:    720px;

  /* Borders */
  --border-mid:      1px solid var(--line);
  --border-light:    1px solid var(--line);
  --border-section:  2px solid var(--forest);

  /* Legacy aliases → v2.0 (keep v1.0 inline styles resolving on light) */
  --amber:           var(--terracotta);
  --onyx-deep:       var(--ink);
  --onyx-surface:    #ffffff;
  --onyx-mid:        var(--line);
  --onyx-light:      var(--taupe);
  --cream:           var(--ink);
  --mid-white:       var(--muted);
  --dim-white:       var(--muted);
  --green:           var(--success);
  --red:             var(--danger);
  --font-mono:       var(--sans);
  --font-body:       var(--sans);
}

/* 2. BASE RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv05';
}

a { color: var(--terracotta); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--terracotta-deep); }

img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* 3. TYPOGRAPHY SCALE
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
h4 { font-size: 1.15rem; font-weight: 600; }
h5 { font-size: 1rem; font-weight: 600; }
h6 { font-size: 0.875rem; font-weight: 600; }

em { font-style: italic; color: var(--forest); }

p { margin-bottom: var(--space-md); color: var(--ink); font-size: 1.0625rem; line-height: 1.7; }
p:last-child { margin-bottom: 0; }

.lead { font-size: 1.25rem; line-height: 1.6; color: var(--ink-soft); }

.meta { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; }

.label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest);
}
.label::before { content: ''; width: 8px; height: 8px; background: var(--forest); border-radius: 1px; flex: none; }

strong { font-weight: 600; color: var(--ink); }

/* 4. LAYOUT CONTAINERS
   ============================================================ */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-lg); }
.container--narrow { max-width: var(--max-w-narrow); margin: 0 auto; padding: 0 var(--space-lg); }

.section { padding: var(--space-3xl) 0; }
.section--sm { padding: var(--space-2xl) 0; }
.section--dark { background-color: var(--forest); color: var(--paper); }
.section--surface { background-color: var(--bone); }
.section--mid { background-color: var(--sand); }

/* Reversed treatment inside forest sections */
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark .section-title { color: var(--paper); }
.section--dark p, .section--dark .section-desc { color: var(--almond); }
.section--dark .section-label { color: var(--clay); }
.section--dark .section-label::before { background: var(--clay); }
.section--dark .form-label, .section--dark .form-note { color: var(--almond); }
.section--dark .btn--outline { color: var(--paper); border-color: var(--paper); }
.section--dark .btn--outline:hover { background: var(--paper); color: var(--forest); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
.flex-row { display: flex; align-items: center; gap: var(--space-md); }
.flex-col { display: flex; flex-direction: column; gap: var(--space-md); }

/* 5. NAVIGATION
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background-color: rgba(254, 247, 238, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: var(--space-md) 0;
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-lg); }
.nav__brand { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; color: var(--forest); letter-spacing: -0.01em; text-decoration: none; }
.nav__brand span { color: var(--terracotta); }
.nav__links { display: flex; gap: var(--space-xl); align-items: center; }
.nav__link { font-family: var(--sans); font-size: 0.85rem; font-weight: 500; letter-spacing: 0; color: var(--ink-soft); text-decoration: none; transition: color 0.15s ease; }
.nav__link:hover { color: var(--terracotta); }
.nav__link--cta { background-color: var(--terracotta); color: #fff; padding: 9px 18px; border-radius: var(--r); font-weight: 600; }
.nav__link--cta:hover { background-color: var(--terracotta-deep); color: #fff; }

/* 6. COMMAND STRIP (slim forest band)
   ============================================================ */
.command-strip {
  background-color: var(--forest); border: none;
  padding: 9px var(--space-xl);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
}
.command-strip__brand { font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); }
.command-strip__tag { font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--almond); }

/* 7. HERO
   ============================================================ */
.hero { background-color: var(--paper); padding: var(--space-3xl) 0; border-bottom: 1px solid var(--line); }
.hero__eyebrow {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--forest); margin-bottom: var(--space-lg);
  display: flex; align-items: center; gap: 9px;
}
.hero__eyebrow::before { content: ''; display: block; width: 8px; height: 8px; background-color: var(--forest); border-radius: 1px; flex-shrink: 0; }
.hero__headline {
  font-family: var(--serif); font-size: clamp(2.2rem, 5.5vw, 3.6rem); font-weight: 500;
  line-height: 1.06; letter-spacing: -0.02em; color: var(--ink); margin-bottom: var(--space-xl); max-width: 860px;
}
.hero__headline em { font-style: italic; color: var(--forest); }
.hero__sub { font-size: 1.2rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: var(--space-xl); max-width: 620px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.hero__proof-strip { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-2xl); }
.hero__proof-item { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); letter-spacing: 0.02em; }
.hero__proof-item strong { color: var(--forest); font-family: var(--serif); font-size: 1.9rem; display: block; font-weight: 600; line-height: 1; margin-bottom: 4px; font-feature-settings: 'tnum'; }

/* 8. SECTION HEADERS
   ============================================================ */
.section-header { padding: 0 0 var(--space-2xl); }
.section-label {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--forest); margin-bottom: var(--space-md);
  display: flex; align-items: center; gap: 9px;
}
.section-label::before { content: ''; width: 8px; height: 8px; background-color: var(--forest); border-radius: 1px; flex: none; }
.section-title { font-family: var(--serif); font-weight: 500; color: var(--ink); margin-bottom: var(--space-md); }
.section-desc { color: var(--ink-soft); max-width: 560px; line-height: 1.7; }

/* 9. CARDS
   ============================================================ */
.card { background-color: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); }
.card--featured { border-left: 3px solid var(--terracotta); }
.card--document { border-top: 2px solid var(--forest); }
.card__index { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--forest); letter-spacing: 0; text-transform: none; font-feature-settings: 'tnum'; }
.card__title { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.card__desc { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.65; flex: 1; }
.card__meta { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.03em; padding-top: var(--space-md); border-top: 1px solid var(--line); }
.card__tag { display: inline-block; font-family: var(--sans); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background-color: var(--forest); padding: 3px 10px; border-radius: 99px; margin-bottom: var(--space-sm); }

/* 10. PRICING BLOCK
   ============================================================ */
.price-block { background-color: #fff; border: 1px solid var(--line); border-top: 2px solid var(--forest); border-radius: var(--r); padding: var(--space-xl); text-align: center; }
.price-block--featured { border-color: var(--terracotta); border-top-color: var(--terracotta); box-shadow: 0 12px 32px rgba(34, 74, 58, 0.08); }
.price-tier { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest); margin-bottom: var(--space-sm); }
.price-amount { font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 600; color: var(--ink); line-height: 1; margin-bottom: var(--space-xs); font-feature-settings: 'tnum'; }
.price-amount sup { font-size: 0.4em; vertical-align: super; color: var(--muted); font-weight: 500; }
.price-cadence { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); margin-bottom: var(--space-xl); }
.price-includes { text-align: left; margin-bottom: var(--space-xl); }
.price-includes__item { display: flex; align-items: flex-start; gap: var(--space-sm); font-size: 0.95rem; color: var(--ink-soft); padding: var(--space-sm) 0; border-bottom: 1px solid var(--line); }
.price-includes__item::before { content: ''; width: 6px; height: 6px; background-color: var(--forest); border-radius: 1px; flex-shrink: 0; margin-top: 8px; }
.price-note { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.02em; margin-top: var(--space-lg); text-align: center; }

/* 11. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem; letter-spacing: 0; text-transform: none;
  cursor: pointer; border: 1.5px solid transparent; padding: 13px 22px; border-radius: var(--r);
  text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; line-height: 1;
}
.btn--primary { background-color: var(--terracotta); color: #fff; border-color: var(--terracotta); }
.btn--primary:hover { background-color: var(--terracotta-deep); border-color: var(--terracotta-deep); color: #fff; text-decoration: none; }
.btn--outline, .btn--secondary { background-color: transparent; color: var(--forest); border-color: var(--forest); }
.btn--outline:hover, .btn--secondary:hover { background-color: var(--forest); color: #fff; text-decoration: none; }
.btn--ghost { background-color: transparent; color: var(--terracotta); border-color: transparent; padding-left: 6px; padding-right: 6px; }
.btn--ghost:hover { color: var(--terracotta-deep); text-decoration: underline; }
.btn--large { font-size: 1.05rem; padding: 16px 30px; }
.btn--full { width: 100%; }
.btn--sm { font-size: 0.85rem; padding: 9px 16px; }

/* 12. FORMS
   ============================================================ */
.form-group { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.form-label { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--ink-soft); }
.form-input { background-color: #fff; border: 1px solid var(--line); color: var(--ink); font-family: var(--sans); font-size: 1rem; padding: 13px 16px; border-radius: var(--r); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; -webkit-appearance: none; }
.form-input:focus { border-color: var(--terracotta); box-shadow: 0 0 0 3px var(--terracotta-wash); }
.form-input::placeholder { color: var(--muted); }
.form-input--result { background-color: var(--forest-wash); border-color: var(--forest); color: var(--forest); font-weight: 600; font-size: 1.25rem; font-feature-settings: 'tnum'; cursor: default; }
.form-note { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; }

/* 13. STATUS INDICATORS
   ============================================================ */
.status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; padding: 5px 12px; border-radius: 99px; }
.status--green { background-color: var(--success-wash); color: var(--success); }
.status--amber { background-color: var(--warning-wash); color: var(--warning); }
.status--red { background-color: var(--danger-wash); color: var(--danger); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot--green { background-color: var(--success); }
.status-dot--amber { background-color: var(--warning); }
.status-dot--red { background-color: var(--danger); }

/* 14. CALLOUT BOXES
   ============================================================ */
.callout { border-left: 3px solid var(--line); background-color: #fff; border-radius: var(--r); padding: var(--space-lg) var(--space-xl); margin: var(--space-xl) 0; }
.callout--amber { border-left-color: var(--terracotta); background-color: var(--terracotta-wash); }
.callout--system { border-left-color: var(--forest); background-color: var(--forest-wash); }
.callout--warning { border-left-color: var(--warning); background-color: var(--warning-wash); }
.callout__label { font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terracotta); margin-bottom: var(--space-sm); }
.callout--system .callout__label { color: var(--forest); }
.callout--warning .callout__label { color: var(--warning); }
.callout__text { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.65; margin: 0; }
.callout__text strong { color: var(--ink); }

/* 15. FEATURE LIST
   ============================================================ */
.feature-list { display: flex; flex-direction: column; gap: 0; }
.feature-item { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-lg) 0; border-bottom: 1px solid var(--line); }
.feature-item:last-child { border-bottom: none; }
.feature-item__marker { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--forest); flex-shrink: 0; padding-top: 1px; min-width: 34px; font-feature-settings: 'tnum'; }
.feature-item__content { flex: 1; }
.feature-item__title { font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: var(--space-xs); }
.feature-item__desc { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* 16. PAIN POINTS
   ============================================================ */
.pain-list { display: flex; flex-direction: column; gap: var(--space-lg); }
.pain-item { display: flex; gap: var(--space-lg); align-items: flex-start; padding: var(--space-lg); background-color: #fff; border: 1px solid var(--line); border-left: 3px solid var(--danger); border-radius: var(--r); }
.pain-item__number { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; color: var(--danger); opacity: 0.75; flex-shrink: 0; line-height: 1; padding-top: 2px; font-feature-settings: 'tnum'; }
.pain-item__text { font-size: 1rem; color: var(--ink); line-height: 1.6; margin: 0; }

/* 17. TESTIMONIALS
   ============================================================ */
.testimonial { background-color: #fff; border: 1px solid var(--line); border-top: 2px solid var(--forest); border-radius: var(--r); padding: var(--space-xl); }
.testimonial--placeholder { border-style: dashed; opacity: 0.6; }
.testimonial__quote { font-family: var(--serif); font-size: 1.15rem; line-height: 1.55; color: var(--ink); margin-bottom: var(--space-lg); font-style: italic; }
.testimonial__attribution { font-family: var(--sans); font-weight: 600; font-size: 0.8rem; color: var(--forest); letter-spacing: 0.02em; }
.testimonial__venue { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); margin-top: var(--space-xs); }

/* 18. FAQ ACCORDION
   ============================================================ */
.faq-list { border-top: 2px solid var(--forest); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-lg) 0; cursor: pointer; font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--ink); background: none; border: none; width: 100%; text-align: left; list-style: none; user-select: none; transition: color 0.15s ease; }
.faq-question:hover { color: var(--forest); }
.faq-question::after { content: '+'; font-family: var(--sans); font-size: 1.35rem; font-weight: 400; color: var(--forest); flex-shrink: 0; transition: transform 0.2s ease; }
.faq-item.open .faq-question::after { transform: rotate(45deg); }
.faq-answer { display: none; padding: 0 0 var(--space-lg); font-size: 0.95rem; color: var(--ink-soft); line-height: 1.7; max-width: 680px; }
.faq-item.open .faq-answer { display: block; }

/* 19. FOOTER (forest band)
   ============================================================ */
.footer { background-color: var(--forest); border: none; padding: var(--space-2xl) 0; margin-top: auto; color: var(--paper); }
.footer__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-lg); display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2xl); }
.footer__brand { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; letter-spacing: -0.01em; text-transform: none; color: var(--paper); margin-bottom: var(--space-sm); }
.footer__brand span { color: var(--clay); }
.footer__tagline { font-size: 0.9rem; color: var(--almond); max-width: 300px; line-height: 1.5; }
.footer__links { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer__link { font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0; color: var(--almond); text-decoration: none; }
.footer__link:hover { color: #fff; }
.footer__bottom { max-width: var(--max-w); margin: var(--space-xl) auto 0; padding: var(--space-lg) var(--space-lg) 0; border-top: 1px solid rgba(255, 255, 255, 0.14); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md); }
.footer__legal { font-family: var(--sans); font-size: 0.72rem; color: var(--almond); letter-spacing: 0.02em; }

/* 20. UTILITY CLASSES
   ============================================================ */
.text-amber { color: var(--terracotta) !important; }
.text-cream { color: var(--ink) !important; }
.text-mid   { color: var(--ink-soft) !important; }
.text-dim   { color: var(--muted) !important; }
.text-green { color: var(--success) !important; }
.text-red   { color: var(--danger) !important; }
.text-forest { color: var(--forest) !important; }

.bg-deep    { background-color: var(--ink); }
.bg-surface { background-color: var(--bone); }
.bg-mid     { background-color: var(--sand); }
.bg-forest  { background-color: var(--forest); color: var(--paper); }

.mono { font-family: var(--sans); }
.caps { text-transform: uppercase; letter-spacing: 0.08em; }
.bold { font-weight: 600; }

.spacer-sm { height: var(--space-lg); }
.spacer    { height: var(--space-xl); }
.spacer-lg { height: var(--space-2xl); }
.spacer-xl { height: var(--space-3xl); }

.text-center { text-align: center; }
.text-right  { text-align: right; }

.divider { height: 1px; background-color: var(--line); border: none; margin: var(--space-xl) 0; }
.divider--amber { height: 2px; background-color: var(--terracotta); }
.divider--forest { height: 2px; background-color: var(--forest); }

/* The node rule — ownable divider: hairline interrupted by the terracotta square */
.node-rule { display: flex; align-items: center; margin: var(--space-xl) 0; }
.node-rule::before, .node-rule::after { content: ''; height: 1px; background: var(--line); flex: 1; }
.node-rule i { width: 9px; height: 9px; background: var(--forest); border-radius: 1px; margin: 0 14px; flex: none; }

.placeholder-block { background-color: var(--bone); border: 1px dashed var(--taupe); border-radius: var(--r); padding: var(--space-xl); text-align: center; font-family: var(--sans); font-size: 0.8rem; color: var(--muted); letter-spacing: 0.02em; }

/* The ledger leader — docket-style dotted line carrying a label to a figure, like a menu price line */
.ledger-leader { display: flex; align-items: baseline; gap: var(--space-sm); padding: 7px 0; }
.ledger-leader__label { font-family: var(--sans); font-size: 0.95rem; color: var(--ink-soft); white-space: nowrap; }
.ledger-leader__rule { flex: 1; min-width: 20px; border-bottom: 1px dotted var(--forest); margin-bottom: 5px; opacity: 0.55; }
.ledger-leader__value { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--forest); font-feature-settings: 'tnum'; white-space: nowrap; }
.ledger-leader--lg .ledger-leader__label { font-size: 1.0625rem; color: var(--ink); }
.ledger-leader--lg .ledger-leader__value { font-size: 1.5rem; }
.ledger-leader--total { border-top: 1px solid var(--forest); margin-top: var(--space-xs); padding-top: var(--space-md); }
.ledger-leader--total .ledger-leader__label, .ledger-leader--total .ledger-leader__value { font-weight: 600; color: var(--ink); }
.section--dark .ledger-leader__label { color: var(--almond); }
.section--dark .ledger-leader__rule { border-bottom-color: var(--clay); }
.section--dark .ledger-leader__value { color: var(--paper); }

/* 21. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .nav__links { display: none; }
  .hero { padding: var(--space-2xl) 0; }
  .hero__headline { font-size: 2rem; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { text-align: center; }
  .section { padding: var(--space-2xl) 0; }
  .command-strip { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
  .footer__inner { flex-direction: column; gap: var(--space-xl); }
  .price-block { text-align: left; }
}
@media (max-width: 480px) {
  .container { padding: 0 var(--space-md); }
  .btn--large { font-size: 0.95rem; padding: 14px 22px; }
}

/* 22. PRINT (A4)
   ============================================================ */
@media print {
  .nav, .command-strip { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding: 18px 0; }
  .footer { background: #fff; color: #000; border-top: 1px solid var(--line); }
  .footer__brand, .footer__tagline, .footer__link, .footer__legal { color: #000; }
  a { color: #000; text-decoration: none; }
}