/* ════════════════════════════════════════════════════════════════════
   FIDELITY HOME INSPECTION — "Bright Precision" design system
   ─────────────────────────────────────────────────────────────────────
   Direction: B's precision-diagnostic DATA treatment on A's bright,
   warm, light base. Single source of truth — every page links this
   file and styles itself from these tokens + component classes.

   Type roles (strict):
     · Space Grotesk — display / headings / UI labels
     · Inter         — body copy
     · JetBrains Mono — DATA ONLY: figures, prices, percentages,
                        readout labels. Never prose.

   Load with:
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/fidelity.css">
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* ── palette · bright base (Fidelity grey) ─────────────────────── */
  --paper:#F6F7F9;            /* cool light-grey page base           */
  --paper-2:#ECEFF3;          /* tinted band for alternating sections*/
  --card:#FFFFFF;             /* light card surface                  */
  --line:#DDE2E8;             /* hairline on light                   */
  --line-2:#C8D0D9;           /* stronger hairline on light          */

  /* ── palette · navy ink (on light) ─────────────────────────────── */
  --ink:#10243E;              /* navy headlines — 14.9:1 on paper    */
  --ink-2:#34465E;            /* body — 8.9:1                        */
  --ink-3:#5A6B80;            /* captions — 5.1:1 (AA)               */

  /* ── palette · Fidelity orange (highlights / CTA) ──────────────── */
  --accent:#C2410C;           /* burnt orange-700 — 4.8:1 on white   */
  --accent-strong:#9A3412;    /* hover / pressed                     */
  --accent-soft:#FDEAD9;      /* tint fill on light                  */
  --accent-line:#F3C39B;      /* tinted hairline                     */
  --accent-bright:#FB923C;    /* readout orange — dark surfaces ONLY */
  --accent-bright-dim:rgba(251,146,60,.16);

  /* ── palette · navy instrument panel (dark surfaces) ───────────── */
  --panel:#0D1B2E;            /* deep navy instrument panel          */
  --panel-2:#14263D;          /* raised card on panel                */
  --panel-glass:rgba(255,255,255,.05);
  --panel-line:rgba(255,255,255,.10);
  --panel-line-2:rgba(255,255,255,.18);
  --panel-ink:#F3F6FA;        /* headline on dark navy               */
  --panel-ink-2:#B9C5D4;      /* body on dark — 8.8:1                */
  --panel-ink-3:#8FA0B3;      /* captions on dark — 5.4:1            */

  /* ── signal colours ─────────────────────────────────────────────── */
  --risk:#A93C2C;             /* repair-cost rust-red — 5.2:1 white  */
  --risk-soft:rgba(169,60,44,.10);
  --good:#0E7A4F;             /* success green — 4.8:1 on white      */
  --good-soft:rgba(14,122,79,.10);

  /* ── type ───────────────────────────────────────────────────────── */
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* fluid scale — 390px → 1280px */
  --fs-hero:clamp(34px,3.8vw + 20px,56px);
  --fs-h2:clamp(26px,1.7vw + 19px,38px);
  --fs-h3:clamp(17px,.5vw + 15px,19px);
  --fs-lead:clamp(16px,.4vw + 14px,18px);
  --fs-body:16px;
  --fs-small:14px;
  --fs-caption:13px;
  --fs-data-xl:clamp(30px,1.5vw + 24px,40px);  /* hero figures, prices */
  --fs-data-lg:clamp(24px,1vw + 20px,30px);    /* stat values          */
  --fs-data:14px;                              /* inline data          */
  --fs-label:11px;                             /* readout labels       */

  /* ── 8pt spacing rhythm ─────────────────────────────────────────── */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s7:56px; --s8:64px; --s9:80px; --s10:96px;
  --sec-pad:clamp(var(--s7),8vw,var(--s9));

  /* ── shape + elevation ──────────────────────────────────────────── */
  --r-lg:16px; --r-md:12px; --r-sm:8px;
  --shadow:0 6px 24px rgba(19,28,38,.06);
  --shadow-lift:0 12px 36px rgba(19,28,38,.10);
  --glow:0 0 14px rgba(251,146,60,.45);

  /* ── blueprint grid texture (instrument surfaces) ───────────────── */
  --blueprint:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
              linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  --blueprint-size:56px 56px;
}

/* ════ base ═══════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink-2);font-family:var(--font-body);
  font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);font-weight:600;letter-spacing:-.015em;line-height:1.2}
.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* layout */
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
@media(min-width:760px){.wrap{padding:0 32px}}
.sec{padding:var(--sec-pad) 0}

/* section bands */
.band-tint{background:var(--paper-2)}
.band-card{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-dark{background:var(--panel);color:var(--panel-ink-2);
  background-image:var(--blueprint);background-size:var(--blueprint-size);background-position:center top}
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4{color:var(--panel-ink)}

/* ════ typography components ══════════════════════════════════════ */
.kicker{display:flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px}
.kicker::before{content:"";width:24px;height:1px;background:var(--accent);flex-shrink:0}
.kicker.center{justify-content:center}
.kicker.center::after{content:"";width:24px;height:1px;background:var(--accent);flex-shrink:0}
.band-dark .kicker{color:var(--accent-bright)}
.band-dark .kicker::before,.band-dark .kicker::after{background:var(--accent-bright)}
.sec h2{font-size:var(--fs-h2);margin-bottom:10px}
.sec .lead{font-size:var(--fs-lead);color:var(--ink-3);max-width:720px}
.band-dark .lead{color:var(--panel-ink-2)}

/* data label — the all-caps mono readout caption */
.data-label{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.band-dark .data-label,.readout .data-label{color:var(--panel-ink-3)}

/* ════ buttons ════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.01em;
  border:none;border-radius:var(--r-sm);cursor:pointer;text-decoration:none;text-align:center;
  padding:14px 28px;transition:background .15s,color .15s,border-color .15s,transform .15s}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.5;cursor:default}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-strong)}
.btn-line{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.btn-line:hover{background:var(--accent-soft)}
.btn-quiet{background:var(--accent-soft);color:var(--accent-strong)}
.btn-quiet:hover{background:var(--accent-line)}
/* on dark panels: bright cyan with near-black text (B's primary) */
.btn-bright{background:var(--accent-bright);color:#06262C}
.btn-bright:hover{filter:brightness(1.08)}
.btn-bright-line{background:transparent;color:var(--panel-ink);border:1.5px solid var(--panel-line-2)}
.btn-bright-line:hover{border-color:var(--accent-bright);color:var(--accent-bright)}

/* ════ cards + panels ═════════════════════════════════════════════ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:var(--s3)}
.hairline-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3)}

/* the instrument readout — near-black diagnostic card on any base */
.readout{background:var(--panel-2);border:1px solid var(--panel-line-2);border-radius:var(--r-md);
  color:var(--panel-ink-2);overflow:hidden;
  background-image:var(--blueprint);background-size:var(--blueprint-size)}
.readout h3,.readout h4{color:var(--panel-ink)}
.readout-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 18px;border-bottom:1px solid var(--panel-line);
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--panel-ink-3)}
.readout-head b{color:var(--accent-bright);font-weight:600}

/* ════ data readout cells (mono figures) ══════════════════════════ */
.ro-cell .v{font-family:var(--font-mono);font-weight:700;font-size:var(--fs-data-lg);
  color:var(--panel-ink);line-height:1.1}
.ro-cell .v.cy{color:var(--accent-bright)}

/* ════ segmented scan-readout bar (B's signature) ═════════════════ */
.seg-track{position:relative;height:8px;background:rgba(255,255,255,.09);overflow:hidden}
.seg-fill{height:100%;background:var(--accent-bright);box-shadow:var(--glow)}
.seg-track::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(90deg,var(--panel-2) 2px,transparent 2px);background-size:10% 100%}
/* light-surface variant */
.seg-track.on-light{background:#EAE7DE}
.seg-track.on-light::after{background-image:linear-gradient(90deg,var(--card) 2px,transparent 2px)}
.seg-track.on-light .seg-fill{background:var(--accent);box-shadow:none}
.seg-track.on-light .seg-fill.warm{background:var(--risk)}

/* ════ badges ═════════════════════════════════════════════════════ */
.badge{display:inline-block;font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:4px}
.badge-accent{color:var(--accent-strong);background:var(--accent-soft);border:1px solid var(--accent-line)}
.badge-risk{color:var(--risk);background:var(--risk-soft)}
.badge-bright{color:#06262C;background:var(--accent-bright)}
.badge-line{color:var(--panel-ink-3);border:1px solid var(--panel-line-2)}

/* ════ form fields ════════════════════════════════════════════════ */
.fld{display:flex;flex-direction:column}
.fld label{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.fld input,.fld select{padding:13px 14px;font-size:16px;font-family:var(--font-body);
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--card);
  color:var(--ink);outline:none;width:100%;appearance:none}
.fld input::placeholder{color:#9AA3AC}
.fld input:focus,.fld select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fld select{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" stroke="%235C6975" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg>');
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
/* dark-panel variant */
.band-dark .fld label{color:var(--panel-ink-3)}
.band-dark .fld input,.band-dark .fld select{background:rgba(0,0,0,.45);
  border-color:var(--panel-line-2);color:var(--panel-ink)}
.band-dark .fld input::placeholder{color:var(--panel-ink-3)}
.band-dark .fld input:focus,.band-dark .fld select:focus{border-color:var(--accent-bright);box-shadow:none}

/* ════ structural hairline grid (B's creds treatment) ═════════════ */
.hairgrid{display:grid;gap:1px;background:var(--panel-line);border:1px solid var(--panel-line)}
.hairgrid>*{background:var(--panel);padding:12px 14px}
.hairgrid.on-light{background:var(--line);border-color:var(--line)}
.hairgrid.on-light>*{background:var(--card)}