/* ============================================================================================
   home.css — every style for the two homepages (English and Spanish).

   WHY THIS FILE EXISTS (owner, 2026-10-11: "why the fuck we have inline css thats amateur")
   He was right, and it had already cost us. Both homepages carried ~38KB of <style> inline in the
   HTML, and the two blocks were 99% identical: 432 of 434 lines matched line for line. So the same
   header rules existed in THREE places at once -- inline in index.html, inline again in
   es/index.html, and a third copy in page.css -- and the mobile nav fix had to be written twice
   because of it.

   WHAT THIS BUYS
     - the CSS is now fetched once and cached across both homepages instead of re-sent inside two
       HTML documents on every visit
     - one place to change the header, the hero, the cards or the calculator
     - the HTML files drop from ~39KB of markup+style to markup only

   The 4 lines that genuinely differed between the two homepages were reconciled here: drawer links
   keep the safe-area padding, and .drawer-alt keeps its weight. Nothing renders differently.
   ============================================================================================ */

:root{
  --paper:#f6f1e5; --paper-2:#ece2cd; --paper-3:#e2d5b8;
  --ink:#211f19; --ink-2:#3a362c;
  --ink-70:color-mix(in srgb, #211f19 72%, transparent);
  /* Body/secondary text must clear WCAG AA (4.5:1). At 54% this token measured
     3.50:1 on paper, so it failed everywhere it was used. 68% measures ~5.5:1
     and still reads as subordinate. Dark mode's 55% already measured 5.38:1. */
  --ink-muted:color-mix(in srgb, #211f19 68%, transparent);
  --ink-35:color-mix(in srgb, #211f19 32%, transparent);
  --line:color-mix(in srgb, #211f19 13%, transparent);
  --line-2:color-mix(in srgb, #211f19 22%, transparent);
  --pine:#1e5c3f; --pine-700:#123d29; --pine-100:#e4efe6; --pine-200:#c7ddce;
  --gold:#c07d1f; --gold-100:#faedd3; --gold-ink:#7a4a0d;
  --card:#fffdf8;
  --shadow-sm:0 1px 2px color-mix(in srgb, #211f19 10%, transparent);
  --shadow-md:0 8px 24px -8px color-mix(in srgb, #211f19 28%, transparent);
  --shadow-lg:0 28px 60px -20px color-mix(in srgb, #211f19 38%, transparent);
  --font-display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --font-body:"Public Sans",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-pill:999px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#181510; --paper-2:#211c15; --paper-3:#2a2318;
    --ink:#f3ece0; --ink-2:#d9d0bd;
    --ink-70:color-mix(in srgb, #f3ece0 74%, transparent);
    --ink-muted:color-mix(in srgb, #f3ece0 55%, transparent);
    --ink-35:color-mix(in srgb, #f3ece0 32%, transparent);
    --line:color-mix(in srgb, #f3ece0 14%, transparent);
    --line-2:color-mix(in srgb, #f3ece0 26%, transparent);
    --pine:#4caf7d; --pine-700:#bfe8d2; --pine-100:#1c3327; --pine-200:#26432f;
    --gold:#e3a53f; --gold-100:#3a2c14;
    --card:#211c16;
    --shadow-md:0 8px 26px -8px color-mix(in srgb, #000 55%, transparent);
    --shadow-lg:0 30px 64px -20px color-mix(in srgb, #000 65%, transparent);
  }
}
:root[data-theme="dark"]{
  --paper:#181510; --paper-2:#211c15; --paper-3:#2a2318;
  --ink:#f3ece0; --ink-2:#d9d0bd;
  --ink-70:color-mix(in srgb, #f3ece0 74%, transparent);
  --ink-muted:color-mix(in srgb, #f3ece0 55%, transparent);
  --ink-35:color-mix(in srgb, #f3ece0 32%, transparent);
  --line:color-mix(in srgb, #f3ece0 14%, transparent);
  --line-2:color-mix(in srgb, #f3ece0 26%, transparent);
  --pine:#4caf7d; --pine-700:#bfe8d2; --pine-100:#1c3327; --pine-200:#26432f;
  --gold:#e3a53f; --gold-100:#3a2c14;
  --card:#211c16;
  --shadow-md:0 8px 26px -8px color-mix(in srgb, #000 55%, transparent);
  --shadow-lg:0 30px 64px -20px color-mix(in srgb, #000 65%, transparent);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;} }
body{
  margin:0;color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  background-color:var(--paper);
  background-image:radial-gradient(color-mix(in srgb, var(--ink) 10%, transparent) 1px, transparent 1px);
  background-size:26px 26px;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:color-mix(in srgb, var(--pine) 26%, transparent)}
:focus-visible{outline:2px solid var(--pine);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:0.96;letter-spacing:-0.01em;margin:0;text-wrap:balance;color:var(--ink)}
.tnum{font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--font-body);font-weight:800;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--pine);display:flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:16px;height:2px;background:var(--gold);display:inline-block}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
section{padding:110px 0;scroll-margin-top:88px}
@media (max-width:760px){ section{padding:72px 0} .wrap{padding:0 20px} .wrap.nav{padding:16px 20px} }

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ---- nav ---- */
header{position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--paper) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{width:32px;height:32px;flex:none}
.brand .lockup{display:flex;flex-direction:column;line-height:1}
.brand .l1{font-family:var(--font-display);font-weight:800;font-size:25px;letter-spacing:-0.01em;color:var(--ink)}
.brand .l2{font-family:var(--font-body);font-weight:700;font-size:10.5px;letter-spacing:0.15em;text-transform:uppercase;color:var(--pine);margin-top:3px}
@media (max-width:400px){ .brand .l1{font-size:21px} .brand .l2{font-size:9px;letter-spacing:.12em} }
.navlinks{display:flex;gap:30px;font-size:14.5px;font-weight:600}
.navlinks a{text-decoration:none;color:var(--ink-70);position:relative;padding:4px 0}
.navlinks a:hover{color:var(--ink)}
.navcta{display:flex;align-items:center;gap:18px}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.hamburger span{width:22px;height:2px;background:var(--ink);display:block}
@media (max-width:430px){ .cta-rest{display:none} .brand{flex:none} }
/* NAV DECLUTTER (owner, 2026-10-11: "the nav bar is too busy ... we need better design").
   The bar carried four things at once -- a two-line lockup, the ES switch, an Apply button and a
   hamburger -- inside roughly 350px. The rule that makes a mobile header readable is ONE action
   plus the menu, so ES and Log in move into the drawer and only Apply stays out. The lockup also
   drops its second line on phones: "PROJECT MANAGER" carries the brand, and "for contractors" is
   the first thing the hero paragraph says anyway. */
/* ---- mobile interaction polish (2026-10-11) ----------------------------------------------
   Four things the site was missing on a phone. All are cheap, none use a library, and all sit
   inside the existing prefers-reduced-motion guard near the top of this sheet, so a reader who has
   asked their system for less motion gets a static page.
     1. the hamburger MORPHS into an X while the menu is open, so the open state is unambiguous
     2. the drawer animates instead of snapping; max-height keeps it out of the layout when closed,
        which matters because display:none toggling leaves an invisible tap target behind on iOS
     3. the sticky header gains a soft edge once scrolled, so it separates from the content
     4. safe-area padding, or a notch and the home indicator sit on top of the Apply button      */
.hamburger span{transition:transform .25s cubic-bezier(.2,.7,.2,1),opacity .18s ease}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
header{transition:box-shadow .25s ease}
header.scrolled{box-shadow:0 10px 30px -18px color-mix(in srgb,#211f19 45%,transparent)}
.nav{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
@media (max-width:860px){
  .navlinks{display:none}
  .navcta .btn-ghost{display:none}
  .hamburger{display:flex}
  .navcta{gap:10px}
  .drawer-alt{border-top:1px solid var(--line);margin-top:8px;padding-top:16px!important;color:var(--pine)!important;font-weight:700}
  .drawer-alt + .drawer-alt{border-top:0;margin-top:0;padding-top:8px!important}
}
@media (max-width:520px){
  .nav{gap:10px;padding:12px 0}
  .brand .l2{display:none}
  .brand .l1{font-size:20px}
  .navcta .langswitch{display:none}
  .navcta .btn-primary{padding:9px 15px;font-size:13.5px}
  .hamburger{padding:4px}
}
.mobile-drawer{display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--line);background:var(--paper);max-height:0;overflow:hidden;opacity:0;transition:max-height .32s cubic-bezier(.2,.7,.2,1),opacity .22s ease}
.mobile-drawer.open{max-height:820px;opacity:1}
.mobile-drawer a{padding:15px 32px;padding-left:max(32px,env(safe-area-inset-left));text-decoration:none;color:var(--ink);font-weight:600;border-top:1px solid var(--line)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:700;font-size:14.5px;padding:14px 26px;text-decoration:none;cursor:pointer;border:1.5px solid transparent;border-radius:var(--r-pill);white-space:nowrap;transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn-primary{background:var(--pine);color:#fdfbf6;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--pine-700);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-sm{padding:9px 16px;font-size:13px}
.btn-link{background:none;border:0;color:var(--pine);font-weight:700;text-decoration:none;padding:0;position:relative;font-size:14.5px;cursor:pointer}
.btn-link::after{content:"\2192";margin-left:6px;transition:margin-left .15s ease;display:inline-block}
.btn-link:hover::after{margin-left:11px}

/* ---- hero ---- */
.hero{padding:76px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:50px;align-items:center}
@media (max-width:960px){ .hero-grid{grid-template-columns:1fr} }
.hero h1{font-size:clamp(42px,6vw,80px)}
.hero h1 .hl{position:relative;color:var(--pine);display:inline-block}
.hero h1 .hl svg{position:absolute;left:0;bottom:-14px;width:100%;height:14px}
.hero-sub{margin-top:26px;font-size:19px;color:var(--ink-70);max-width:48ch;font-weight:500}
.hero-two{margin:22px 0 0;font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.1vw,26px);line-height:1.12;text-transform:uppercase;letter-spacing:.01em;color:var(--ink);max-width:26ch}
.hero-two b{color:var(--pine)}
.hero-ctas{display:flex;align-items:center;gap:18px;margin-top:32px;flex-wrap:wrap}
.checks{display:flex;gap:22px;margin-top:22px;flex-wrap:wrap}
.checks span{font-size:13.5px;font-weight:600;color:var(--ink-muted);display:flex;align-items:center;gap:6px}
.checks svg{width:14px;height:14px;color:var(--pine)}
.badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:0.02em;padding:7px 13px;border-radius:var(--r-pill);background:var(--pine-100);color:var(--pine-700);border:1px solid var(--pine-200)}

/* ---- floating window mockup ---- */
.window{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);border:1px solid var(--line);overflow:hidden;transform:rotate(1.4deg)}
.window-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.window-bar .dot{width:9px;height:9px;border-radius:50%}
.window-bar .dot:nth-child(1){background:#e8685a}
.window-bar .dot:nth-child(2){background:#ecb24a}
.window-bar .dot:nth-child(3){background:#68b06e}
.window-bar .url{margin-left:10px;font-family:var(--font-mono);font-size:11.5px;color:var(--ink-muted);background:var(--paper);padding:4px 12px;border-radius:6px;flex:1;max-width:240px}
.window-body{padding:22px}
.wrow{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.wrow:last-child{border-bottom:0}
.wrow .name{font-weight:700}
.wrow .sub{font-size:11.5px;color:var(--ink-muted);font-weight:500}
.tag{font-family:var(--font-body);font-size:11px;font-weight:700;padding:4px 10px;border-radius:var(--r-pill)}
.tag.green{background:var(--pine-100);color:var(--pine-700)}
.tag.gold{background:var(--gold-100);color:var(--gold)}
.hero-float{position:relative}
.float-chip{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:12px 16px;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:8px;animation:bob 5s ease-in-out infinite}
.float-chip.a{top:-18px;right:8%;animation-delay:.2s}
.float-chip.b{bottom:14%;left:-30px;animation-delay:1.1s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.float-chip .dotpulse{width:8px;height:8px;border-radius:50%;background:var(--pine);position:relative}
.float-chip .dotpulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--pine);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.6);opacity:0}}

/* ---- marquee ---- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0;overflow:hidden}
.strip .lead{text-align:center;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-35);margin-bottom:22px}
.marquee{display:flex;width:max-content;gap:64px;animation:scroll 28s linear infinite}
.strip:hover .marquee{animation-play-state:paused}
.marquee span{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--ink-35);white-space:nowrap}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- section headers ---- */
.shead{max-width:640px;margin-bottom:52px}
.shead h2{font-size:clamp(30px,3.8vw,46px);margin-top:12px}
.shead p{margin-top:16px;font-size:17px;color:var(--ink-70)}
.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---- tabs (a look inside) ---- */
.tabbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:38px}
.tabbtn{font-family:var(--font-body);font-weight:700;font-size:14px;padding:11px 20px;border-radius:var(--r-pill);border:1.5px solid var(--line-2);background:transparent;color:var(--ink-muted);cursor:pointer;transition:all .15s ease}
.tabbtn:hover{border-color:var(--ink-35);color:var(--ink)}
.tabbtn.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tab-stage{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:center}
@media (max-width:900px){ .tab-stage{grid-template-columns:1fr} }
.tab-copy h3{font-size:26px}
.tab-copy p{margin-top:14px;color:var(--ink-70);font-size:15.5px}
.tab-copy ul{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.tab-copy li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-70)}
.tab-copy li svg{width:16px;height:16px;color:var(--pine);flex:none;margin-top:2px}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ---- ledger / calculator ---- */
.calc{display:grid;grid-template-columns:0.85fr 1.15fr;gap:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
@media (max-width:900px){ .calc{grid-template-columns:1fr} }
.calc-side{background:var(--ink);color:var(--paper);padding:44px 38px;display:flex;flex-direction:column;justify-content:center}
:root[data-theme="dark"] .calc-side, :root:not([data-theme="light"]) .calc-side{background:var(--paper-3)}
.calc-side .eyebrow{color:var(--gold)}
.calc-side .eyebrow::before{background:var(--gold)}
.calc-side h3{color:inherit;font-size:28px;margin-top:12px}
:root[data-theme="dark"] .calc-side h3, :root:not([data-theme="light"]) .calc-side h3{color:var(--ink)}
.calc-side p{color:color-mix(in srgb, var(--paper) 72%, transparent);font-size:14.5px;margin-top:12px}
:root[data-theme="dark"] .calc-side p, :root:not([data-theme="light"]) .calc-side p{color:var(--ink-70)}
.slider-wrap{margin-top:30px}
.slider-label{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:10px;color:color-mix(in srgb, var(--paper) 85%, transparent)}
:root[data-theme="dark"] .slider-label, :root:not([data-theme="light"]) .slider-label{color:var(--ink)}
.slider-label .val{color:var(--gold);font-family:var(--font-mono)}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:color-mix(in srgb, var(--paper) 30%, transparent);cursor:pointer}
:root[data-theme="dark"] input[type="range"], :root:not([data-theme="light"]) input[type="range"]{background:var(--line-2)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--gold);border:3px solid var(--ink);cursor:pointer}
:root[data-theme="dark"] input[type="range"]::-webkit-slider-thumb, :root:not([data-theme="light"]) input[type="range"]::-webkit-slider-thumb{border-color:var(--paper-3)}
input[type="range"]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--gold);border:3px solid var(--ink);cursor:pointer}
.calc-main{background:var(--card);padding:40px 40px}
.lrow{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);align-items:center}
.lrow.head{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-35);border-bottom:2px solid var(--line-2)}
.lrow .label{font-size:14.5px;font-weight:600}
.lrow .label small{display:block;font-weight:500;color:var(--ink-muted);font-size:12px;margin-top:2px}
.lrow .cost{font-family:var(--font-mono);font-weight:700;font-size:14.5px;text-align:right}
.lrow .out{color:var(--ink-35);text-decoration:line-through}
.lrow .zero{color:var(--pine)}
.lrow.total{border-bottom:0;border-top:2px solid var(--ink);margin-top:6px;padding-top:20px}
.lrow.total .label{font-family:var(--font-display);font-size:19px;font-weight:800}
.lrow.total .cost{font-size:22px;font-family:var(--font-display);font-weight:800}
.lrow.total .cost.rate{font-size:15px;font-family:var(--font-mono);font-weight:700}
.avoid-banner{margin-top:22px;background:var(--gold-100);border:1px solid color-mix(in srgb, var(--gold) 35%, transparent);border-radius:var(--r-md);padding:16px 18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.avoid-banner .k{font-size:13.5px;font-weight:700;color:var(--ink-70)}
.avoid-banner .v{font-family:var(--font-display);font-size:24px;font-weight:800;color:var(--gold)}

/* ---- compliance check panel ---- */
.checkgrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media (max-width:900px){ .checkgrid{grid-template-columns:1fr;gap:36px} }
.checklist{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);overflow:hidden}
.checklist-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.checklist-head .ttl{font-family:var(--font-display);font-weight:800;font-size:17px}
.checklist-head .meta{font-family:var(--font-mono);font-size:11px;color:var(--ink-muted)}
.crow{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;padding:15px 20px;border-bottom:1px solid var(--line)}
.crow:last-child{border-bottom:0}
.crow .mark{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;flex:none;margin-top:1px}
.crow .mark svg{width:11px;height:11px}
.crow.pass .mark{background:var(--pine-100);color:var(--pine-700)}
.crow.warn .mark{background:var(--gold-100);color:var(--gold)}
.crow .what{font-size:14px;font-weight:700;line-height:1.35}
.crow .why{font-size:12.5px;color:var(--ink-muted);margin-top:3px;line-height:1.45}
.crow .code{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--ink-35);white-space:nowrap;letter-spacing:-0.01em;padding-top:2px}
.codeline{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.codeline span{font-family:var(--font-mono);font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:var(--r-sm);background:var(--paper-2);border:1px solid var(--line);color:var(--ink-70)}

/* ---- feature grid ---- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){ .grid3{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .grid3{grid-template-columns:1fr} }
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.card .icon{width:42px;height:42px;border-radius:var(--r-sm);background:var(--pine-100);color:var(--pine);display:grid;place-items:center}
.card .icon svg{width:22px;height:22px}
.card h3{margin-top:18px;font-size:19px;font-weight:800}
.card p{margin-top:9px;color:var(--ink-70);font-size:14.5px}

/* ---- compare table ---- */
.compare-scroll{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-md)}
table.compare{width:100%;border-collapse:collapse;min-width:640px;background:var(--card)}
table.compare th,table.compare td{padding:16px 18px;text-align:center;border-bottom:1px solid var(--line);font-size:14px}
table.compare th{font-family:var(--font-body);font-weight:800;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);background:var(--paper-2)}
table.compare td:first-child,table.compare th:first-child{text-align:left;font-weight:600;color:var(--ink-70);min-width:280px}
table.compare th.us,table.compare td.us{background:var(--pine-100)}
table.compare th.us{color:var(--pine-700)}
table.compare tr:last-child td{border-bottom:0}
.yes-mark{color:var(--pine);font-weight:800}
.no-mark{color:var(--ink-35)}
.partial-mark{color:var(--gold);font-weight:700;font-size:12px}
.compare-note{margin-top:16px;font-size:13px;color:var(--ink-muted)}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:900px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .steps{grid-template-columns:1fr} }
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;position:relative}
.step .n{font-family:var(--font-display);font-size:15px;font-weight:800;color:var(--gold);letter-spacing:.04em}
.step h3{margin-top:14px;font-size:18px}
.step p{margin-top:8px;font-size:14px;color:var(--ink-70)}

/* ---- keep section ---- */
.keep{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media (max-width:900px){ .keep{grid-template-columns:1fr} }
.keep ul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.keep li{display:flex;gap:12px;font-size:15.5px;color:var(--ink-70)}
.keep li svg{width:18px;height:18px;color:var(--pine);flex:none;margin-top:2px}

/* ---- fit ---- */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:820px){ .fit{grid-template-columns:1fr} }
.fit-card{border-radius:var(--r-lg);padding:34px 30px;border:1px solid var(--line)}
.fit-card.yes{background:var(--pine-100);border-color:var(--pine-200)}
.fit-card.no{background:var(--card)}
.fit-card h3{font-size:19px;display:flex;align-items:center;gap:10px}
.fit-card ul{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.fit-card li{font-size:14.5px;display:flex;gap:10px}
.fit-card.yes li{color:var(--pine-700)}
.fit-card.no li{color:var(--ink-muted)}
.fit-card li svg{width:16px;height:16px;flex:none;margin-top:3px}

/* ---- faq accordion ---- */
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;background:none;border:0;padding:22px 0;text-align:left;font-family:var(--font-body);font-weight:700;font-size:16.5px;color:var(--ink);cursor:pointer}
.faq-q .plus{width:22px;height:22px;flex:none;position:relative}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--ink);top:50%;left:50%;transform:translate(-50%,-50%)}
.faq-q .plus::before{width:14px;height:2px}
.faq-q .plus::after{width:2px;height:14px;transition:transform .2s ease}
.faq-item.open .faq-q .plus::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0)}
.faq-a-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.faq-item.open .faq-a-wrap{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden}
.faq-a-inner p{margin:0 0 22px;color:var(--ink-70);font-size:15px;max-width:70ch}

/* ---- closing cta ---- */
.closing{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--ink);color:var(--paper);padding:64px 56px}
:root[data-theme="dark"] .closing, :root:not([data-theme="light"]) .closing{background:var(--paper-3)}
.closing::before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb, var(--paper) 12%, transparent) 1px, transparent 1px);background-size:22px 22px;opacity:.5}
.closing-row{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.closing h2{color:inherit;font-size:clamp(30px,4vw,48px)}
:root[data-theme="dark"] .closing h2, :root:not([data-theme="light"]) .closing h2{color:var(--ink)}
.closing p{color:color-mix(in srgb, var(--paper) 75%, transparent);font-size:16px;margin-top:12px;max-width:50ch}
:root[data-theme="dark"] .closing p, :root:not([data-theme="light"]) .closing p{color:var(--ink-70)}
.closing .btn-ghost{border-color:color-mix(in srgb, var(--paper) 40%, transparent);color:var(--paper)}
:root[data-theme="dark"] .closing .btn-ghost, :root:not([data-theme="light"]) .closing .btn-ghost{border-color:var(--line-2);color:var(--ink)}

/* ---- tried it already ---- */
.tried{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px}
@media (max-width:820px){ .tried{grid-template-columns:1fr} }
.tried-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.tried-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.tried-card h3{font-family:var(--font-display);font-size:19px;font-weight:800}
.tried-card .said{font-size:14.5px;color:var(--ink-70);margin-top:10px;line-height:1.55}
.tried-card .why{font-size:13.5px;color:var(--ink-muted);margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.tried-card .why b{color:var(--pine);font-weight:800}
.sourcenote{margin-top:22px;font-size:12.5px;color:var(--ink-35);max-width:75ch}
.sourcenote a{color:var(--ink-muted);text-decoration:underline;text-underline-offset:2px}

/* ---- who built it ---- */
.built{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);margin-top:36px}
@media (max-width:900px){ .built{grid-template-columns:1fr} }
.bcol{padding:32px 30px;background:var(--card);border-right:1px solid var(--line)}
.bcol:last-child{border-right:0}
@media (max-width:900px){ .bcol{border-right:0;border-bottom:1px solid var(--line)} .bcol:last-child{border-bottom:0} }
.bcol.them{background:var(--paper-2)}
.bcol.us{background:var(--pine-100)}
.bcol .who{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted)}
.bcol.us .who{color:var(--pine-700)}
:root[data-theme="dark"] .bcol.us .who, :root:not([data-theme="light"]) .bcol.us .who{color:var(--ink)}
.bcol h3{font-size:21px;margin-top:12px;line-height:1.1}
.bcol.us h3{color:var(--pine-700)}
:root[data-theme="dark"] .bcol.us h3, :root:not([data-theme="light"]) .bcol.us h3{color:var(--ink)}
.bcol p{margin-top:11px;font-size:14.5px;color:var(--ink-70);line-height:1.55}
.bcol.us p{color:var(--pine-700)}
:root[data-theme="dark"] .bcol.us p, :root:not([data-theme="light"]) .bcol.us p{color:var(--ink-70)}
.bcol .gap{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2);font-size:13px;font-weight:700;color:var(--ink-muted)}
.bcol.us .gap{color:var(--pine);border-top-color:var(--pine-200)}

/* ---- guarantee ---- */
.gtee{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:32px}
@media (max-width:720px){ .gtee{grid-template-columns:1fr} }
/* ALIGNMENT FIX (2026-10-11). These tiles used display:flex with a natural-width pill, so a short
   pill ("Weekly") and a long one ("Before the crew rolls") pushed the heading to a different x in
   every tile. The owner's words: "it does not look the same in each tile". A grid with a FIXED
   label column makes every heading start on the same axis, which is what makes a row of cards read
   as one set rather than five unrelated boxes. Below 640px the column collapses and the label
   sits above its text, because side-by-side at phone width leaves too little room for the copy. */
.grow{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px}
.grow .clock{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--pine);background:var(--pine-100);border:1px solid var(--pine-200);border-radius:var(--r-pill);padding:5px 11px;white-space:nowrap;justify-self:start;text-align:center;min-width:104px}
@media (max-width:640px){
  .grow{grid-template-columns:1fr;gap:10px;padding:20px 18px}
  .grow .clock{min-width:0}
}
.grow .g{font-size:14.5px;font-weight:700;line-height:1.4}
.grow .g small{display:block;font-weight:500;font-size:13px;color:var(--ink-muted);margin-top:5px;line-height:1.5}
.drawlink{margin:22px 0 0;font-size:14.5px;color:var(--ink-muted)}
.drawlink a{color:var(--pine-700);font-weight:700;text-underline-offset:3px}
.statline{background:var(--ink);color:var(--paper);border-radius:var(--r-lg);padding:30px 34px;margin-top:30px;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
:root[data-theme="dark"] .statline, :root:not([data-theme="light"]) .statline{background:var(--paper-3)}
.statline .big{font-family:var(--font-display);font-size:56px;font-weight:800;color:var(--gold-ink);line-height:0.9}
.statline p{margin:0;font-size:15px;color:color-mix(in srgb, var(--paper) 78%, transparent);max-width:60ch}
:root[data-theme="dark"] .statline p, :root:not([data-theme="light"]) .statline p{color:var(--ink-70)}
.statline p b{color:var(--paper)}
:root[data-theme="dark"] .statline p b, :root:not([data-theme="light"]) .statline p b{color:var(--ink)}
.statline cite{display:block;font-style:normal;font-size:12px;color:var(--ink-muted);margin-top:9px}
:root[data-theme="dark"] .statline cite, :root:not([data-theme="light"]) .statline cite{color:var(--ink-35)}

/* ---- what owners are saying ---- */
.voices{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
@media (max-width:820px){ .voices{grid-template-columns:1fr} }
.voice{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 26px;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.voice:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.voice .topic{display:block;font-family:var(--font-display);font-weight:800;font-size:19px;color:var(--ink);line-height:1.15}
.voice .gist{display:block;font-size:14px;color:var(--ink-70);margin-top:9px;line-height:1.5}
.voice .src{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--pine);margin-top:13px;display:flex;align-items:center;gap:6px}
.voice .src::after{content:"\2197";font-family:var(--font-body)}
.trap{background:var(--pine-100);border:1px solid var(--pine-200);border-radius:var(--r-lg);padding:30px 32px;margin-top:26px}
.trap h3{font-size:23px;color:var(--pine-700)}
.trap p{margin-top:11px;font-size:15.5px;color:var(--pine-700);max-width:68ch}
:root[data-theme="dark"] .trap h3, :root:not([data-theme="light"]) .trap h3,
:root[data-theme="dark"] .trap p, :root:not([data-theme="light"]) .trap p{color:var(--ink)}

/* ---- intake chat ---- */
.chatwrap{display:flex;flex-direction:column;min-height:430px}
.langpick{text-align:center;padding:34px 10px}
.langpick h3{font-size:24px}
.langpick p{margin-top:10px;color:var(--ink-70);font-size:15px}
.langbtns{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.chatlog{flex:1;overflow-y:auto;max-height:340px;display:flex;flex-direction:column;gap:12px;padding:4px 2px 8px}
.msg{max-width:82%;padding:13px 16px;border-radius:var(--r-md);font-size:14.5px;line-height:1.5;white-space:pre-wrap}
.msg.bot{background:var(--paper-2);color:var(--ink);border-bottom-left-radius:5px;align-self:flex-start}
.msg.you{background:var(--pine);color:#fdfbf6;border-bottom-right-radius:5px;align-self:flex-end}
:root[data-theme="dark"] .msg.you, :root:not([data-theme="light"]) .msg.you{color:var(--paper)}
.msg.typing{color:var(--ink-muted);font-style:italic}
.chatform{display:flex;gap:10px;margin-top:14px;align-items:flex-end}
.chatform textarea{flex:1;font-family:var(--font-body);font-size:15px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:11px 13px;resize:none;min-height:46px;max-height:120px}
.chatform textarea:focus-visible{outline:2px solid var(--pine);outline-offset:1px;border-color:var(--pine)}
.chatswitch{margin-top:14px;font-size:13px;color:var(--ink-muted);text-align:center}
.chatswitch button{background:none;border:0;color:var(--pine);font-weight:700;cursor:pointer;font-size:13px;text-decoration:underline;text-underline-offset:2px;padding:0}
.chatnote{font-size:12px;color:var(--ink-35);margin-top:10px;text-align:center}

/* ---- contact form ---- */
.bookgrid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
@media (max-width:900px){ .bookgrid{grid-template-columns:1fr} }
.book-side{background:var(--ink);color:var(--paper);padding:44px 38px;display:flex;flex-direction:column;justify-content:center}
:root[data-theme="dark"] .book-side, :root:not([data-theme="light"]) .book-side{background:var(--paper-3)}
.book-side .eyebrow{color:var(--gold-ink)}
.book-side .eyebrow::before{background:var(--gold)}
.book-side h2{color:inherit;font-size:32px;margin-top:12px}
:root[data-theme="dark"] .book-side h2, :root:not([data-theme="light"]) .book-side h2{color:var(--ink)}
.book-side p{color:color-mix(in srgb, var(--paper) 74%, transparent);font-size:15px;margin-top:14px}
:root[data-theme="dark"] .book-side p, :root:not([data-theme="light"]) .book-side p{color:var(--ink-70)}
.book-side ul{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.book-side li{display:flex;gap:10px;font-size:14px;color:color-mix(in srgb, var(--paper) 82%, transparent)}
:root[data-theme="dark"] .book-side li, :root:not([data-theme="light"]) .book-side li{color:var(--ink-70)}
.book-side li svg{width:15px;height:15px;color:var(--gold);flex:none;margin-top:3px}
.book-main{background:var(--card);padding:38px 40px}
@media (max-width:560px){ .book-main{padding:28px 22px} .book-side{padding:34px 24px} }
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){ .fields{grid-template-columns:1fr} }
.field{display:flex;flex-direction:column;gap:6px}
.field.wide{grid-column:1 / -1}
.field label{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.field label .req{color:var(--gold)}
.field input,.field select,.field textarea{font-family:var(--font-body);font-size:15px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:11px 13px;width:100%}
.field textarea{resize:vertical;min-height:88px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--pine);outline-offset:1px;border-color:var(--pine)}
.field .err{font-size:12.5px;font-weight:600;color:#b4402f}
:root[data-theme="dark"] .field .err, :root:not([data-theme="light"]) .field .err{color:#f0947f}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#b4402f}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.book-actions{display:flex;align-items:center;gap:16px;margin-top:24px;flex-wrap:wrap}
.book-note{font-size:12.5px;color:var(--ink-muted);margin-top:14px}
.form-msg{margin-top:16px;font-size:14px;font-weight:600;padding:13px 16px;border-radius:var(--r-sm);display:none}
.form-msg.on{display:block}
.form-msg.bad{color:#b4402f;background:color-mix(in srgb, #b4402f 8%, transparent);border:1px solid color-mix(in srgb, #b4402f 30%, transparent)}
:root[data-theme="dark"] .form-msg.bad, :root:not([data-theme="light"]) .form-msg.bad{color:#f0947f}
.thanks{display:none;text-align:center;padding:38px 20px}
.thanks.on{display:block}
.thanks h3{font-size:30px}
.thanks p{margin-top:12px;color:var(--ink-70);font-size:15.5px}
.thanks .tick{width:52px;height:52px;border-radius:50%;background:var(--pine-100);color:var(--pine-700);display:grid;place-items:center;margin:0 auto 18px}
.thanks .tick svg{width:26px;height:26px}

/* ---- footer ---- */
/* Rules this footer follows: short nav, contact, then a small legal row.
   Body copy is --ink-70 (6.1:1 on paper) because --ink-muted fails WCAG AA at these sizes. */
footer{padding:44px 0 36px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-70)}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px 40px}
.foot-nav{display:flex;gap:22px;flex-wrap:wrap}
.foot-nav a{display:inline-block;padding:6px 0;text-decoration:none;color:var(--ink-70)}
.foot-nav a:hover{color:var(--ink);text-decoration:underline}
.foot-contact{font-style:normal;display:flex;gap:20px;flex-wrap:wrap}
.foot-contact a{display:inline-block;padding:6px 0;color:var(--ink-70);text-decoration:underline;text-underline-offset:3px}
.foot-contact a:hover{color:var(--ink)}
.foot-bottom{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px 32px}
.foot-legal-links{display:flex;gap:20px;flex-wrap:wrap}
.foot-legal-links a{display:inline-block;padding:4px 0;color:var(--ink-70);text-decoration:none}
.foot-legal-links a:hover{color:var(--ink);text-decoration:underline}

/* language switcher — must stay visible on mobile, so it is not a .btn-ghost */
.langswitch{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--pine-700);border:1.5px solid var(--line-2);border-radius:var(--r-pill);
  padding:6px 10px;text-decoration:none;white-space:nowrap;flex:none}
.langswitch:hover{border-color:var(--pine);color:var(--pine)}