/* =====================================================================
   FreshRateHub. One stylesheet, hand written, no framework.

   Look: a personal home value report. Data instrument, not a lander.
   Deep evergreen ink, mono figures, a real chart, restrained motion.
   Deliberately unlike the slate/azure + Inter sibling brand.

   Contrast audited against white and against --card in dark mode.
   --accent 5.35:1 on white, 7.7:1 on dark card. --text 12.9:1 / 12.7:1.
   --signal and --amber are graphic colors, never text on a light surface.

   Sections: tokens, base, layout, header, buttons, forms, hero, cards,
   stats, chart, steps, optin, article, footer, reveal, responsive.
   ===================================================================== */

/* --------------------------------------------------------- 1. tokens */
:root {
  --ink:         #0B221B;
  --ink-2:       #123026;
  --ink-3:       #1B3F32;

  --text:        #24352E;
  --muted:       #5B6E64;
  --faint:       #8A9A91;

  --line:        #DCE5E0;
  --line-2:      #EDF2EF;
  --wash:        #F4F8F5;
  --card:        #FFFFFF;

  --accent:      #0F7A52;
  --accent-dp:   #0A5C3D;
  --accent-tint: #E6F4ED;

  --signal:      #17B87C;   /* charts and on-dark accents ONLY */
  --amber:       #A9761B;   /* secondary series, timestamps */
  --danger:      #B3261E;   /* errors only, never brand */

  --r:      12px;
  --r-lg:   18px;
  --r-pill: 999px;

  --sh:    0 1px 2px rgba(11,34,27,.05), 0 4px 14px rgba(11,34,27,.05);
  --sh-lg: 0 2px 6px rgba(11,34,27,.06), 0 18px 44px rgba(11,34,27,.09);

  --ease: cubic-bezier(.2,.7,.2,1);
  --t:    .18s;

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text:        #DDE8E2;
    --muted:       #9AAFA5;
    --faint:       #7A8F85;

    --line:        #23392F;
    --line-2:      #1A2C24;
    --wash:        #0A1A15;
    --card:        #10261E;

    --accent:      #3FCB90;
    --accent-dp:   #63DCA9;
    --accent-tint: #14352A;

    --sh:    0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
    --sh-lg: 0 2px 6px rgba(0,0,0,.35), 0 18px 44px rgba(0,0,0,.4);
  }
}

/* ----------------------------------------------------------- 2. base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--wash);
  color: var(--text);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--text);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.02em;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.15rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent-dp); }

img, svg { max-width: 100%; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--ink); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--r) 0; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- 3. layout */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap--narrow { max-width: 760px; }

.sec { padding: clamp(48px, 6vw, 84px) 0; }
.sec--tight { padding: clamp(32px, 4vw, 56px) 0; }
.sec--dark { background: var(--ink); color: #E4EFE9; }
.sec--dark h1, .sec--dark h2, .sec--dark h3 { color: #fff; }
/* :not(.btn) matters. Without it this rule outranks .btn--on-dark on
   specificity and paints the button label the same green as its own fill. */
.sec--dark a:not(.btn) { color: var(--signal); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 14px; padding: 5px 12px;
  background: var(--accent-tint); color: var(--accent);
  border-radius: var(--r-pill);
  font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.sec--dark .eyebrow { background: rgba(23,184,124,.14); color: var(--signal); }
.eyebrow svg { width: 14px; height: 14px; }

.lede { font-size: 1.13rem; color: var(--muted); max-width: 62ch; }
.sec--dark .lede { color: #A9C4B7; }

.sec__head { max-width: 66ch; margin-bottom: clamp(28px, 3vw, 44px); }

/* --------------------------------------------------------- 4. header */
.head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--wash) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.head.is-stuck { border-bottom-color: var(--line); background: var(--wash); }

.head__in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 20px;
  height: 66px; display: flex; align-items: center; gap: 18px;
}

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--text); text-decoration: none; font-weight: 700;
  letter-spacing: -.02em; font-size: 1.06rem; white-space: nowrap;
}
.brand__mark { width: 27px; height: 23px; color: var(--accent); flex: none; }
.brand__name span { color: var(--accent); }
.brand:hover { color: var(--text); }

.nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }

.nav__link {
  display: block; padding: 8px 12px; border-radius: var(--r);
  color: var(--muted); text-decoration: none; font-size: .94rem; font-weight: 500;
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.nav__link:hover { color: var(--text); background: var(--line-2); }
.nav__link.is-on { color: var(--accent); }

.nav__cta { margin-left: 10px; }

.head__burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: var(--r);
  color: var(--text); cursor: pointer;
}
.head__burger svg { width: 22px; height: 22px; }
.head__burger .i-close { display: none; }
.head__burger[aria-expanded="true"] .i-open { display: none; }
.head__burger[aria-expanded="true"] .i-close { display: block; }

/* -------------------------------------------------------- 5. buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 13px 26px;
  background: var(--accent); color: #fff;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font: 600 1rem/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease),
              color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.btn:hover { background: var(--accent-dp); color: #fff; box-shadow: var(--sh); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; }

.btn--ghost { background: transparent; color: var(--accent); border-color: var(--line); }
.btn--ghost:hover { background: var(--accent-tint); color: var(--accent-dp); border-color: var(--accent); }

.btn--on-dark { background: var(--signal); color: #062018; }
.btn--on-dark:hover { background: #3FD79A; color: #062018; }

.btn--sm { min-height: 40px; padding: 9px 18px; font-size: .92rem; }
.btn--lg { min-height: 56px; padding: 16px 32px; font-size: 1.06rem; }
.btn--block { width: 100%; }

/* ---------------------------------------------------------- 6. forms */
.field { margin-bottom: 18px; }
.field__label {
  display: block; margin-bottom: 7px;
  font-size: .92rem; font-weight: 600; color: var(--text);
}
.field__hint { margin: 6px 0 0; font-size: .85rem; color: var(--muted); }

.input, .select {
  width: 100%; min-height: 52px; padding: 13px 15px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r);
  font: 400 1rem/1.4 var(--sans);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.input::placeholder { color: var(--faint); }
.input:focus, .select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.input[inputmode="numeric"], .input[type="tel"] { font-family: var(--mono); letter-spacing: .01em; }

.input--money { padding-left: 30px; }
.field__money { position: relative; }
.field__money::before {
  content: "$"; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font: 500 1rem/1 var(--mono); pointer-events: none;
}

.err { display: none; margin: 7px 0 0; color: var(--danger); font-size: .88rem; font-weight: 500; }
.err.is-on { display: block; }
.input.is-bad { border-color: var(--danger); }

/* ----------------------------------------------------------- 7. hero */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink);
  background-image:
    radial-gradient(70% 100% at 85% 0%, rgba(23,184,124,.16), transparent 62%),
    radial-gradient(50% 80% at 8% 100%, rgba(23,184,124,.09), transparent 60%);
  color: #E4EFE9;
  padding: clamp(52px, 7vw, 92px) 0 clamp(52px, 7vw, 88px);
}
.hero h1 { color: #fff; max-width: 15ch; }
.hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(34px, 4vw, 56px); align-items: center; }
.hero__lede { font-size: 1.16rem; color: #A9C4B7; max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero__note {
  display: flex; align-items: center; gap: 8px;
  margin-top: 20px; color: #7FA394; font-size: .9rem;
}
.hero__note svg { width: 16px; height: 16px; color: var(--signal); flex: none; }

/* the sample report panel riding in the hero */
.panel {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 28px);
  backdrop-filter: blur(6px);
}
.panel__top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.panel__addr { font: 500 .92rem/1.3 var(--sans); color: #C7DCD1; }
.panel__stamp {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase;
  color: #7FA394;
}
.panel__stamp svg { width: 13px; height: 13px; }

/* --------------------------------------------------------- 8. cards */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 30px);
}
.card--pad-sm { padding: 20px; }
.card--flat { box-shadow: none; }
.card--lift { box-shadow: var(--sh); }

.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.feat__ico {
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: 14px;
  background: var(--accent-tint); color: var(--accent);
  border-radius: var(--r);
}
.feat__ico svg { width: 21px; height: 21px; }
.feat h3 { font-size: 1.06rem; margin-bottom: .35em; }
.feat p { color: var(--muted); font-size: .96rem; margin: 0; }

.sec--dark .feat__ico { background: rgba(23,184,124,.13); color: var(--signal); }
.sec--dark .feat p { color: #A9C4B7; }

/* --------------------------------------------------------- 9. stats */
.stat__k {
  display: block; margin-bottom: 6px;
  font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
}
.stat__v {
  display: block;
  font: 600 clamp(1.65rem, 1.1rem + 2.2vw, 2.5rem)/1.05 var(--mono);
  letter-spacing: -.03em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat__sub { display: block; margin-top: 7px; font-size: .88rem; color: var(--muted); }

.panel .stat__k { color: #7FA394; }
.panel .stat__v { color: #fff; }
.panel .stat__sub { color: #A9C4B7; }

.delta {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font: 600 .82rem/1.35 var(--mono); font-variant-numeric: tabular-nums;
}
.delta--up   { background: rgba(23,184,124,.14);  color: var(--accent); }
.delta--down { background: rgba(169,118,27,.14);  color: var(--amber); }
.delta--flat { background: var(--line-2);         color: var(--muted); }
.panel .delta--up { color: var(--signal); }
.delta svg { width: 13px; height: 13px; }

/* --------------------------------------------------------- 10. chart */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart__grid  { stroke: var(--line); stroke-width: 1; }
.chart__line  { fill: none; stroke: var(--accent); stroke-width: 2.5;
                stroke-linecap: round; stroke-linejoin: round; }
.chart__area  { fill: url(#frFade); }
.chart__dot   { fill: var(--card); stroke: var(--accent); stroke-width: 2.5; }
.chart__lab   { font: 500 10px var(--mono); fill: var(--faint); letter-spacing: .04em; }

.panel .chart__grid { stroke: rgba(255,255,255,.09); }
.panel .chart__line { stroke: var(--signal); }
.panel .chart__dot  { fill: var(--ink); stroke: var(--signal); }
.panel .chart__lab  { fill: #6E9384; }

.chart__legend {
  display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px;
  font: 500 .82rem/1 var(--mono); color: var(--muted);
}
.chart__legend span { display: inline-flex; align-items: center; gap: 7px; }
.chart__legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }

/* data table that backs every chart, for screen readers and no-JS */
.chart__table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: .9rem; }
.chart__table th, .chart__table td {
  padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.chart__table th:first-child, .chart__table td:first-child { text-align: left; font-family: var(--sans); }
.chart__table th { font-weight: 600; color: var(--muted); font-size: .82rem; }

/* --------------------------------------------------------- 11. steps */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.steps li { counter-increment: s; position: relative; padding-left: 52px; margin: 0; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -2px;
  display: grid; place-items: center; width: 34px; height: 34px;
  background: var(--accent-tint); color: var(--accent);
  border-radius: var(--r-pill);
  font: 600 .95rem/1 var(--mono);
}
.steps h3 { font-size: 1.04rem; margin-bottom: .3em; }
.steps p { color: var(--muted); font-size: .96rem; margin: 0; }
.sec--dark .steps li::before { background: rgba(23,184,124,.13); color: var(--signal); }
.sec--dark .steps p { color: #A9C4B7; }

/* progress rail for the multi step report form */
.prog { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; }
.prog__bar { flex: 1; height: 5px; background: var(--line); border-radius: var(--r-pill); overflow: hidden; }
.prog__fill {
  display: block; height: 100%; width: 0; background: var(--accent);
  border-radius: var(--r-pill); transition: width .35s var(--ease);
}
.prog__txt { font: 500 .82rem/1 var(--mono); color: var(--muted); white-space: nowrap; }

/* Gated on html.js so that with JavaScript blocked every step is visible and
   the form is still one plain, submittable POST. */
html.js .step { display: none; }
html.js .step.is-on { display: block; animation: rise .28s var(--ease) both; }
.step + .step { margin-top: 30px; }
html.js .step + .step { margin-top: 0; }
.step__legend { margin: 0 0 18px; padding: 0; border: 0; }
.step__legend h2 { font-size: 1.28rem; margin-bottom: .3em; }
.step__legend p { color: var(--muted); font-size: .96rem; margin: 0; }
.step__nav { display: flex; gap: 10px; align-items: center; margin-top: 22px; }
.step__back {
  background: none; border: 0; padding: 10px 6px; cursor: pointer;
  color: var(--muted); font: 500 .93rem var(--sans);
}
.step__back:hover { color: var(--text); }
html:not(.js) .prog, html:not(.js) .step__nav .btn--next, html:not(.js) .step__back { display: none; }
html.js .step__submit-fallback { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .step.is-on { animation: none; } }

/* ---------------------------------------------------- 12. optin block */
/* The SMS consent control. Structure here is load bearing for carrier
   review: the checkbox ships unchecked, it is its own control, it is not
   bundled with terms acceptance, and it sits directly beside the phone
   field rather than under the submit button. Do not restructure. */
.optin {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(22px, 2.6vw, 30px);
}
/* The widget is a light card that can sit inside a .sec--dark band (home page).
   That band paints h2 white and links --signal, which on this card's white
   background are invisible and illegible respectively. Reset the island.
   The consent wording is the most-read text on the site during carrier
   review, so it has to be legible on every surface it appears on. */
.sec--dark .optin h2,
.sec--dark .optin h3           { color: var(--text); }
.sec--dark .optin a:not(.btn)  { color: var(--accent); }
.sec--dark .optin a:not(.btn):hover { color: var(--accent-dp); }

.optin__h { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.optin__h svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.optin__h h2, .optin__h h3 { margin: 0; font-size: 1.15rem; }
.optin__sub { color: var(--muted); font-size: .95rem; margin-bottom: 20px; }

.consent {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 16px 0 4px; padding: 15px;
  background: var(--wash); border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer;
}
.consent input[type="checkbox"] {
  flex: none; width: 20px; height: 20px; margin: 1px 0 0;
  accent-color: var(--accent); cursor: pointer;
}
.consent__txt { font-size: .875rem; line-height: 1.55; color: var(--text); }
.consent__txt a { font-weight: 500; }

.optional {
  display: inline-block; margin-left: 6px; padding: 2px 8px;
  background: var(--line-2); color: var(--muted); border-radius: var(--r-pill);
  font: 500 11px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  vertical-align: middle;
}

.note {
  display: flex; gap: 10px; padding: 14px 16px;
  background: var(--accent-tint); border-radius: var(--r);
  font-size: .9rem; color: var(--text);
}
.note svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 2px; }
.note--plain { background: var(--wash); border: 1px solid var(--line); }
.note--plain svg { color: var(--muted); }

.msg { margin-top: 16px; padding: 14px 16px; border-radius: var(--r); font-size: .93rem; display: none; }
.msg.is-on { display: block; }
.msg--ok  { background: var(--accent-tint); color: var(--accent-dp); }
.msg--bad { background: rgba(179,38,30,.09); color: var(--danger); }

/* ------------------------------------------------- 13. article, legal */
.article { max-width: 74ch; margin: 0 auto; padding: clamp(40px, 5vw, 72px) 0; }
.article h1 { margin-bottom: .3em; }
.article__meta {
  margin-bottom: 2.2em; padding-bottom: 1.4em; border-bottom: 1px solid var(--line);
  font: 500 .85rem/1.5 var(--mono); color: var(--muted);
}
.article h2 { margin-top: 1.9em; font-size: 1.42rem; }
.article h3 { margin-top: 1.5em; font-size: 1.1rem; }
.article p, .article li { color: var(--text); }
.article ul, .article ol { padding-left: 1.3em; }
.article li { margin-bottom: .6em; }
.article strong { font-weight: 600; }

.article__box {
  margin: 1.8em 0; padding: 20px 22px;
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--r);
}
.article__box p:last-child { margin-bottom: 0; }

.toc {
  margin: 0 0 2.4em; padding: 18px 22px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
}
.toc h2 { margin: 0 0 .6em; font-size: .8rem; font-family: var(--mono);
          letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.toc ul { margin: 0; padding-left: 1.1em; }
.toc li { margin-bottom: .3em; font-size: .94rem; }

/* article index cards */
.postlist { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.postlist li { margin: 0; }
.post {
  display: block; padding: 22px 24px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  text-decoration: none; color: var(--text);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.post:hover { border-color: var(--accent); box-shadow: var(--sh); color: var(--text); }
.post h3 { margin-bottom: .3em; font-size: 1.1rem; }
.post p { margin: 0; color: var(--muted); font-size: .95rem; }

/* --------------------------------------------------------- 14. footer */
.foot {
  background: var(--ink); color: #A9C4B7;
  padding: clamp(44px, 5vw, 68px) 0 32px; margin-top: auto;
  font-size: .93rem;
}
.foot__in { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 34px; }
.foot .brand { color: #fff; }
.foot .brand__mark { color: var(--signal); }
.foot .brand__name span { color: var(--signal); }
.foot__blurb { margin-top: 14px; color: #8CAEA0; max-width: 34ch; font-size: .9rem; }

.foot__h { margin-bottom: 14px; color: #fff; font-size: .78rem; font-family: var(--mono);
           letter-spacing: .09em; text-transform: uppercase; font-weight: 600; }
.foot__col ul { list-style: none; margin: 0; padding: 0; }
.foot__col li { margin-bottom: 9px; }
.foot a { color: #A9C4B7; text-decoration: none; }
.foot a:hover { color: var(--signal); text-decoration: underline; }

.foot__contact li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.55; }
.foot__ico { width: 16px; height: 16px; color: var(--signal); flex: none; margin-top: 4px; }

.foot__bottom { margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1); }
.foot__legalline { margin-bottom: 14px; color: #C7DCD1; font-weight: 500; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0 0 20px; padding: 0; }
.foot__legal li { margin: 0; }
.foot__legal a { text-decoration: underline; text-underline-offset: .2em; }
.foot__disc { margin-bottom: 14px; color: #7FA394; font-size: .8rem; line-height: 1.6; }
.foot__disc a { color: #8CAEA0; text-decoration: underline; }
.foot__copy { margin: 0; color: #6E9384; font-size: .8rem; }

/* --------------------------------------------------------- 15. reveal */
html.js .reveal { opacity: 0; transform: translateY(10px); }
html.js .reveal.in-view {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ----------------------------------------------------- 16. responsive */
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.02fr .98fr; }
}

@media (max-width: 860px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  .head__burger { display: inline-flex; }
  .nav {
    position: fixed; inset: 66px 0 auto; z-index: 39;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 14px 20px 22px;
    background: var(--wash); border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-lg);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { padding: 13px 12px; font-size: 1rem; }
  .nav__cta { margin: 10px 0 0; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .grid--4 { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
  .chart__table { font-size: .82rem; }
  .chart__table th, .chart__table td { padding: 8px 6px; }
}

@media print {
  .head, .foot__legal, .nav, .optin { display: none; }
  body { background: #fff; color: #000; }
  .sec--dark, .hero { background: #fff !important; color: #000; }
}