/* Synthesis skin for the inner pages (site.html / live SPA).
   Loaded after live-styles.css: retheme to the main page's format. */
:root {
  --paper: #F7F5F0;
  --white: #FFFFFF;
  --stone: #EFEDE6;
  --ink: #0F0E0D;
  --muted: #57534E;
  --line: #E5E2DA;
  --red: #C8102E;
  --red-deep: #A50D24;
  --red-wash: #FBF1F2;
  --serif: "Fraunces", Georgia, serif;
  --radius: 8px;
}
body { font-family: "Geist", ui-sans-serif, system-ui, sans-serif; background: var(--paper); color: var(--ink); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
h1 { letter-spacing: -.028em; }

/* nav: light, synthesis-style */
.nav, header.nav {
  background: rgba(247, 245, 240, .86);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.nav a { color: var(--ink); }
.nav .logo { font-family: "Switzer", ui-sans-serif, sans-serif; font-weight: 700; letter-spacing: -.035em; color: var(--ink); }
.nav-links > a, .nav-links .nav-drop > a {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #57534E;
}
.nav-links > a:hover, .nav-links .nav-drop > a:hover { color: var(--ink); }
.menu-btn { color: var(--ink); border-color: var(--line); }

/* mega panels pick up paper surfaces */
.mega { background: var(--white); border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(15, 14, 13, .12); }

/* buttons: synthesis geometry */
.btn, a.btn, button.btn { border-radius: 6px; }

/* cards & wells */
.card, .price-card, .device { background: var(--white); border-color: var(--line); }

/* footer: light */
footer, .footer { background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); }
footer a, .footer a { color: #57534E; }
footer a:hover, .footer a:hover { color: var(--ink); }

/* ————— typography parity with index.html (audit fixes) ————— */
:root { --sans: "Geist", ui-sans-serif, system-ui, sans-serif; }
body { line-height: 1.5; }
strong, b { font-weight: 600; }
.state-card .score i, .score i { font-style: normal; }

/* nav parity: logo 25px, links 11.5px, Sign in matches home */
.nav .logo { font-size: 25px; }
.nav-links > a, .nav-links .nav-drop > a { font-size: 11.5px; }
.nav-actions .login, .login {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px; font-weight: 400; text-transform: uppercase;
  letter-spacing: .12em; color: #57534E;
}
.nav-actions .login:hover, .login:hover { color: #0F0E0D; }

/* button parity */
.btn { font-family: var(--sans); font-size: 15px; letter-spacing: 0; }
.btn.small { font-size: 14px; }

/* heading scale parity (index clamps) */
.hero h1, .page-hero h1, .finder-intro h1, .contact-copy h1, .auth-card h1 { font-size: clamp(38px, 5.6vw, 66px); line-height: 1.04; }
.intro h2, .cta-strip h2, #finderMount h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.08; }
.feature-copy h3 { font-size: clamp(20px, 2.6vw, 26px); }


/* ————— SPA mega: match index.html synthesis mega ————————————————
   Append at END of site-skin.css. site-skin.css loads after
   live-styles.css, and every selector below meets or beats the
   live-styles.css specificity for the same property:
   - .nav-drop .mega (0,2,0) beats live .mega (0,1,0) and supersedes
     the earlier .mega rule at site-skin.css:37 (later + higher).
   - the :hover/:focus-within rule (0,3,0) is required because the
     base rule below sets transform, and live-styles' own
     .nav-drop:hover .mega (0,3,0) lives in the EARLIER file.
   - .mega .mega-tile.green/.blue/.cream (0,3,0) beat live's generic
     .green,.blue,.cream (0,1,0) and .mega-tile:hover (0,2,0).
   Hex values = index.html tokens: paper #FFFFFF, paper-2 #F7F5F0,
   ink #0F0E0D, ink-2 #1A1918, text-2 #57534E, text-3 #8A857E,
   line #E5E2DA, line-2 #141312, red #C8102E, red-wash #FBF1F2,
   red-line #F0DDE0. */

/* panel — white card, ink hairline, full 10px radius.
   Border shorthand restores the top edge live-styles removes
   (border-top:0); border-radius restores the squared top corners. */
.nav-drop .mega {
  width: 660px;
  max-width: calc(100vw - 48px);
  background: #FFFFFF;
  border: 1px solid #141312;
  border-radius: 10px;
  box-shadow: 0 30px 70px rgba(15, 14, 13, .14);
  padding: 16px;
  transform: translateX(-50%) translateY(6px);
  transition: opacity .18s cubic-bezier(.2, .6, .2, 1), transform .18s cubic-bezier(.2, .6, .2, 1);
}
.nav-drop:hover .mega,
.nav-drop:focus-within .mega {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* hover bridge over the gap between trigger and panel (index .mega::before) */
.nav-drop .mega::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

/* tiles — index .mtile: paper-2 well, 8px radius; green/blue = default */
.mega .mega-tiles { gap: 10px; }
.mega .mega-tile,
.mega .mega-tile.green,
.mega .mega-tile.blue {
  background: #F7F5F0;
  border: 1px solid #E5E2DA;
  border-radius: 8px;
  padding: 14px;
  transition: border-color .15s;
}
.mega .mega-tile:hover,
.mega .mega-tile.green:hover,
.mega .mega-tile.blue:hover { border-color: #0F0E0D; }
/* cream = index .mtile.red (red-wash) */
.mega .mega-tile.cream {
  background: #FBF1F2;
  border-color: #F0DDE0;
}
.mega .mega-tile.cream:hover { border-color: #C8102E; }

.mega .mega-tile strong {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 15.5px;
  letter-spacing: -.01em;
  line-height: 1.5;
  color: #0F0E0D;
}
.mega .mega-tile span {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: #57534E;
}

/* link columns — index .mega-cols */
.mega .mega-list {
  gap: 14px;
  margin-top: 16px; /* matches index panel's internal 16px gap */
}
.mega .mega-list p {
  margin: 2px 0 8px;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8A857E;
}
.mega .mega-list a {
  display: block;
  padding: 4.5px 0;
  border-bottom: 0; /* index links have no row separators */
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  color: #1A1918;
}
.mega .mega-list a:hover { color: #C8102E; }

/* index dropdown triggers have no caret */
.nav-links .nav-drop > a::after { display: none; }

/* ————— round-2 parity (adversarial verify findings) ————— */
/* mega internal layout: 210px tile rail LEFT + link columns RIGHT (index) */
.nav-drop .mega { display: grid; grid-template-columns: 210px 1fr; gap: 16px; }
.mega .mega-tiles { display: flex; flex-direction: column; gap: 10px; align-content: start; }
.mega .mega-list { margin-top: 0; }

/* weights: home nav links + eyebrows are 400, not 500 */
.nav-links > a, .nav-links .nav-drop > a { font-weight: 400; }
.eyebrow, .kicker { font-weight: 400; }

/* nav geometry: 72px bar, 1056px content, 30px link gap, no top pad */
.nav { height: 72px; padding: 0 max(32px, calc((100vw - 1056px) / 2)); }
.nav-links { gap: 30px; }

/* dark band heading matches home CTA scale */
.cta-strip h2 { font-size: clamp(30px, 4.4vw, 52px); }

/* hero h1 leading matches home exactly */
.hero h1, .page-hero h1, .finder-intro h1, .contact-copy h1, .auth-card h1 { line-height: 1.02; }

/* button behavior: ink hover, no lift (home) */
.btn:hover { transform: none; }
.btn.primary:hover, .btn.dark:hover, .btn.yellow:hover { background: #1A1918; }

/* big stat numerals: serif like home */
.stats-band strong { font-family: "Fraunces", Georgia, serif; font-weight: 400; }

/* footer typography: mono sitemap links like home's mono strip */
.foot-links a { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: #8A857E; }
.foot-links a:hover { color: #0F0E0D; }
.footer p { font-size: 13.5px; }
.footer .disclaimer { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .04em; }

/* ————— live finder (API-driven) ————— */
.lf-live { color: #C8102E; }
.lf-crs { display: flex; align-items: baseline; gap: 14px; margin: 18px 0 6px; }
.lf-crs strong { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 52px; color: #0F0E0D; }
.lf-crs span { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #57534E; }
.lf-paths { margin-top: 20px; border-top: 1px solid #E5E2DA; }
.lf-path { padding: 14px 0; border-bottom: 1px solid #E5E2DA; }
.lf-path a, .lf-path > span { font-family: "Fraunces", Georgia, serif; font-size: 19px; color: #0F0E0D; }
.lf-path a:hover { color: #C8102E; }
.lf-path em { font-style: normal; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #1F6B3A; }
.lf-path p { font-size: 13.5px; color: #57534E; margin-top: 5px; }
.lf-docs { margin-top: 20px; }
.lf-docs p { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px; text-transform: uppercase; letter-spacing: .14em; color: #8A857E; margin-bottom: 10px; }
.lf-docs span { display: inline-block; font-size: 13px; color: #1A1918; background: #F7F5F0; border: 1px solid #E5E2DA; border-radius: 999px; padding: 7px 14px; margin: 0 8px 8px 0; }
.lf-cta { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }