/* My4wd — landing page styles.
   No framework, no build step, no @import (a second request before first paint).

   Direction (brand/tokens.css): "instrument cluster meets topographic chart. Ink and
   sand, hard numbers, soft depth." The page is a Decide surface, so one idea lands per
   section and a hero is legitimate here.

   The redesign is a MATERIAL and COMPOSITION change, not a recolour. The previous sheet
   gave every block the same treatment -- a rounded rectangle with an inner gradient and
   a soft shadow -- so a spec readout, a feature, a limitation and a FAQ row all looked
   like the same object, and hierarchy had to come from colour. Now there are two
   materials and they mean different things:

     INSTRUMENT  near-square, hairline border, flat surface, ruled rows. For measured
                 things: the pack readout, the offline steps, the plans, the form.
     SHEET       no box at all. A hairline rule above and space beneath. For prose that
                 is part of a longer argument: features, limitations, FAQ.

   Depth is a rule and a spacing step, not a blur. The contour field is the topographic
   chart the brand names -- drawn, not a gradient, and it never sits behind text. */

:root {
  /* ── ink scale ───────────────────────────────────────────────────────── */
  --ink-900: #06080B;
  --ink-800: #0B0F14;
  --ink-700: #121821;
  --ink-600: #1A2230;
  --ink-500: #26313F;
  --ink-400: #35434F;

  /* ── accent ──────────────────────────────────────────────────────────── */
  --sand:      #F5A524;
  --sand-soft: #FFD9A0;
  --ember:     #FF7A45;
  --mint:      #3FB950;
  --ice:       #58A6FF;
  --danger:    #F85149;

  /* ── surfaces and lines ──────────────────────────────────────────────── */
  --bg:        var(--ink-800);
  --surface:   var(--ink-700);
  --raised:    var(--ink-600);
  --line:      rgba(255,255,255,.075);
  --line-2:    rgba(255,255,255,.14);
  --line-warm: rgba(245,165,36,.28);

  /* ── type ────────────────────────────────────────────────────────────── */
  --text:   #EDF1F6;
  --text-2: #A9B5C3;
  --muted:  #7B8794;
  --ui:   "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-11: .6875rem;  --fs-12: .75rem;   --fs-13: .8125rem;
  --fs-15: .9375rem;  --fs-17: 1.0625rem; --fs-20: 1.25rem;
  --fs-24: 1.5rem;    --fs-32: 2rem;     --fs-44: 2.75rem;  --fs-60: 3.75rem;
  --tracking-tight: -.02em;  --tracking-wide: .06em;

  /* ── geometry ────────────────────────────────────────────────────────── */
  --r-xs: 8px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 22px; --sp-6: 30px; --sp-7: 44px; --sp-8: 64px; --sp-9: 96px;

  /* ── depth: three levels, plus a hairline top highlight ──────────────── */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 8px 24px rgba(0,0,0,.38);
  --sh-3: 0 20px 50px rgba(0,0,0,.5);
  --sh-glow: 0 0 0 1px rgba(245,165,36,.22), 0 12px 40px rgba(245,165,36,.14);
  --sheen: inset 0 1px 0 rgba(255,255,255,.06);

  /* ── motion ──────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: 120ms; --t-med: 220ms;
}

[data-theme="daylight"] {
  --bg: #EDEFF2; --surface: #FFFFFF; --raised: #F4F6F8;
  --text: #0B1016; --text-2: #38424E; --muted: #5D6875;
  --line: rgba(10,20,30,.10); --line-2: rgba(10,20,30,.22);
  --sand: #B26A00; --sand-soft: #8A5200; --ember: #C2410C;
  --mint: #1F7A34; --ice: #1B5FA8; --danger: #C0322B;
  --sh-1: 0 1px 2px rgba(10,20,30,.10);
  --sh-2: 0 6px 20px rgba(10,20,30,.12);
  --sh-3: 0 16px 40px rgba(10,20,30,.16);
  --sheen: inset 0 1px 0 rgba(255,255,255,.7);
}

/* ── site tokens ──────────────────────────────────────────────────────────
   Deliberately in a SECOND :root block. The brand block above is asserted to appear
   verbatim in this file (tools/site-test.cjs), so adding a property inside it would
   break that contract and quietly fork the shared palette. */
:root {
  /* Topographic contour field: concentric rings with a sinusoidal wobble, drawn as an
     inline SVG. 9.8 KB, one fewer request than an external file, and no third party. */
  --contour: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='520'%20height='460'%20viewBox='0%200%20520%20460'%20fill='none'%20stroke='%2523fff'%20stroke-opacity='.06'%20stroke-width='1'%3E%3Cpath%20d='M393%20165Q398%20167%20401%20171Q403%20174%20403%20178Q402%20182%20400%20184Q396%20187%20392%20188Q388%20191%20384%20191Q380%20193%20377%20193Q374%20195%20371%20196Q368%20198%20365%20198Q361%20199%20358%20199Q354%20199%20351%20198Q348%20199%20345%20198Q342%20198%20339%20197Q336%20198%20333%20197Q329%20198%20327%20196Q323%20196%20321%20194Q318%20193%20316%20191Q312%20191%20309%20189Q305%20189%20301%20187Q296%20186%20293%20183Q290%20181%20289%20178Q288%20174%20290%20171Q293%20167%20297%20165Q301%20162%20305%20161Q307%20158%20310%20157Q310%20155%20311%20153Q309%20150%20309%20147Q308%20144%20309%20141Q310%20138%20312%20136Q314%20133%20318%20132Q320%20130%20324%20129Q327%20127%20330%20127Q334%20125%20338%20125Q341%20123%20345%20124Q349%20124%20352%20126Q356%20126%20359%20128Q362%20129%20365%20131Q368%20132%20371%20134Q374%20135%20376%20138Q378%20140%20378%20143Q379%20146%20378%20149Q378%20151%20377%20154Q378%20156%20378%20158Q381%20158%20384%20161Q389%20161%20393%20165Z'/%3E%3Cpath%20d='M441%20162Q447%20167%20449%20174Q448%20181%20444%20186Q438%20192%20429%20194Q422%20199%20413%20199Q407%20204%20401%20204Q398%20209%20393%20212Q390%20217%20385%20220Q380%20224%20374%20225Q368%20228%20361%20227Q355%20228%20348%20225Q342%20226%20337%20224Q331%20226%20325%20224Q319%20226%20312%20225Q306%20227%20299%20225Q292%20225%20286%20222Q279%20222%20274%20218Q266%20217%20261%20212Q254%20211%20249%20205Q244%20201%20241%20195Q240%20189%20243%20183Q246%20175%20253%20171Q258%20164%20266%20162Q269%20157%20273%20155Q271%20151%20272%20147Q266%20143%20264%20136Q260%20131%20259%20123Q258%20117%20261%20112Q265%20106%20271%20104Q277%2099%20284%2099Q290%2095%20297%2095Q302%2090%20309%2090Q315%2085%20322%2084Q329%2081%20337%2083Q344%2082%20351%2086Q358%2087%20363%2092Q369%2095%20373%20100Q379%20103%20382%20108Q386%20111%20388%20116Q391%20120%20392%20125Q394%20129%20394%20133Q397%20136%20398%20140Q404%20141%20409%20145Q418%20146%20425%20152Q435%20154%20441%20162Z'/%3E%3Cpath%20d='M464%20159Q464%20167%20460%20173Q454%20182%20444%20185Q435%20192%20424%20192Q418%20198%20410%20199Q408%20205%20403%20208Q402%20215%20398%20220Q395%20227%20389%20231Q383%20237%20375%20237Q366%20240%20358%20237Q350%20238%20342%20234Q335%20237%20328%20235Q321%20240%20313%20240Q305%20246%20295%20245Q286%20249%20276%20247Q266%20248%20258%20243Q249%20241%20243%20234Q236%20230%20232%20223Q227%20217%20226%20209Q223%20202%20225%20195Q227%20186%20233%20180Q236%20172%20243%20168Q245%20162%20250%20159Q247%20155%20247%20150Q240%20146%20237%20138Q229%20132%20226%20123Q223%20115%20224%20107Q227%20100%20234%2096Q241%2090%20250%2089Q257%2084%20266%2084Q272%2079%20280%2077Q285%2070%20293%2067Q300%2061%20310%2059Q319%2056%20328%2059Q338%2060%20345%2066Q354%2070%20359%2078Q366%2082%20369%2090Q375%2093%20378%2099Q384%20101%20387%20106Q393%20108%20397%20113Q403%20115%20407%20120Q415%20121%20420%20126Q430%20127%20437%20134Q447%20137%20454%20145Q461%20150%20464%20159Z'/%3E%3Cpath%20d='M516%20155Q510%20168%20498%20175Q487%20187%20472%20190Q463%20199%20450%20201Q447%20210%20439%20215Q440%20224%20436%20233Q435%20244%20429%20252Q422%20262%20412%20266Q400%20271%20387%20269Q375%20272%20362%20268Q352%20272%20341%20270Q332%20279%20320%20281Q309%20293%20293%20297Q279%20308%20261%20308Q245%20312%20230%20306Q216%20302%20206%20291Q196%20282%20192%20269Q185%20258%20185%20245Q180%20235%20183%20223Q180%20213%20184%20203Q184%20193%20190%20185Q189%20177%20193%20169Q188%20163%20188%20155Q179%20150%20174%20139Q162%20132%20157%20119Q150%20108%20151%2096Q152%2085%20160%2077Q170%2067%20183%2064Q194%2056%20207%2055Q215%2047%20227%2044Q233%2033%20244%2028Q251%2016%20264%2010Q276%202%20291%203Q307%202%20320%2010Q334%2015%20343%2028Q355%2035%20361%2048Q370%2052%20376%2060Q386%2060%20395%2065Q407%2063%20418%2068Q432%2066%20443%2073Q457%2074%20467%2082Q480%2086%20489%2096Q501%20101%20508%20113Q517%20121%20519%20133Q521%20145%20516%20155Z'/%3E%3Cpath%20d='M501%20152Q494%20165%20482%20171Q474%20182%20462%20186Q457%20195%20449%20200Q449%20210%20443%20218Q444%20228%20439%20237Q435%20248%20426%20254Q416%20262%20404%20263Q392%20268%20379%20266Q368%20271%20356%20270Q348%20280%20336%20284Q327%20299%20311%20306Q298%20320%20279%20325Q262%20332%20244%20329Q227%20326%20215%20314Q203%20303%20199%20287Q191%20274%20192%20258Q186%20247%20187%20235Q181%20227%20180%20217Q173%20210%20172%20201Q165%20195%20164%20185Q157%20179%20156%20169Q147%20163%20145%20152Q135%20144%20132%20132Q124%20122%20124%20110Q123%2098%20129%2088Q136%2077%20148%2071Q158%2061%20172%2059Q181%2050%20193%2047Q199%2036%20210%2031Q216%2019%20228%2012Q238%202%20253%20-0Q268%20-4%20283%202Q300%205%20311%2018Q325%2025%20333%2038Q343%2041%20350%2050Q361%2046%20373%2049Q387%2040%20403%2042Q421%2035%20439%2039Q456%2038%20470%2046Q484%2051%20493%2062Q503%2071%20506%2084Q513%2094%20513%20107Q516%20118%20512%20130Q510%20143%20501%20152Z'/%3E%3Cpath%20d='M531%20149Q526%20163%20515%20172Q510%20185%20498%20193Q495%20205%20485%20213Q484%20225%20476%20235Q474%20248%20464%20257Q456%20268%20443%20274Q431%20283%20416%20284Q404%20294%20389%20294Q380%20307%20365%20312Q356%20330%20338%20340Q325%20359%20303%20367Q283%20380%20260%20379Q238%20378%20220%20365Q202%20352%20195%20330Q183%20313%20184%20292Q175%20278%20175%20262Q164%20257%20158%20245Q143%20244%20132%20233Q116%20230%20105%20218Q92%20211%2086%20198Q76%20188%2073%20174Q65%20163%2065%20149Q57%20136%2059%20122Q55%20108%2060%2094Q63%2079%2073%2068Q82%2054%2098%2048Q109%2035%20125%2030Q134%2018%20149%2013Q157%20-1%20172%20-7Q184%20-20%20201%20-23Q218%20-30%20236%20-26Q257%20-25%20273%20-12Q291%20-7%20303%208Q317%2010%20327%2019Q340%2012%20355%2013Q372%20-3%20395%20-6Q417%20-21%20445%20-21Q469%20-28%20492%20-19Q511%20-14%20524%202Q536%2015%20538%2033Q545%2048%20541%2065Q546%2080%20542%2095Q545%20109%20539%20123Q539%20137%20531%20149Z'/%3E%3Cpath%20d='M553%20146Q551%20162%20540%20173Q534%20188%20521%20197Q516%20211%20504%20219Q501%20233%20490%20243Q487%20257%20475%20267Q468%20281%20454%20288Q445%20301%20429%20307Q419%20321%20402%20328Q392%20345%20374%20354Q360%20373%20338%20381Q319%20395%20294%20395Q270%20397%20250%20385Q227%20373%20216%20351Q200%20333%20198%20309Q186%20295%20184%20277Q170%20275%20161%20264Q141%20269%20122%20261Q98%20264%2076%20254Q56%20250%2041%20235Q28%20224%2023%20207Q16%20192%2019%20176Q13%20161%2017%20146Q10%20131%2014%20115Q10%2099%2016%2083Q19%2066%2031%2053Q40%2037%2057%2029Q70%2014%2089%209Q103%20-4%20122%20-7Q136%20-19%20155%20-21Q173%20-29%20192%20-26Q212%20-30%20231%20-21Q250%20-20%20266%20-8Q281%20-9%20294%20-1Q307%20-11%20324%20-11Q340%20-31%20364%20-37Q387%20-59%20418%20-63Q445%20-75%20474%20-70Q498%20-66%20515%20-50Q530%20-34%20533%20-13Q540%206%20535%2027Q541%2043%20537%2061Q546%2073%20545%2089Q554%20102%20554%20117Q558%20132%20553%20146Z'/%3E%3Cpath%20d='M146%20330Q145%20333%20144%20335Q142%20338%20138%20339Q136%20342%20133%20342Q131%20344%20129%20345Q129%20347%20127%20348Q127%20351%20126%20353Q125%20356%20123%20357Q121%20359%20119%20359Q116%20360%20114%20359Q111%20359%20109%20358Q107%20359%20105%20359Q103%20361%20100%20361Q98%20363%2095%20364Q92%20365%2089%20364Q86%20364%2083%20362Q81%20361%2079%20358Q77%20356%2077%20353Q75%20351%2075%20348Q74%20346%2075%20343Q76%20340%2078%20338Q78%20335%2080%20333Q80%20332%2081%20330Q80%20329%2080%20327Q77%20325%2076%20322Q74%20320%2073%20316Q73%20313%2074%20311Q75%20308%2077%20307Q79%20305%2082%20305Q84%20303%2087%20303Q88%20300%2090%20300Q92%20297%2094%20296Q96%20293%2099%20293Q102%20292%20105%20293Q108%20294%20110%20296Q113%20298%20114%20301Q116%20303%20117%20305Q119%20306%20120%20308Q122%20309%20123%20310Q125%20311%20126%20312Q128%20313%20130%20315Q132%20315%20134%20317Q137%20318%20139%20320Q142%20322%20144%20325Q145%20327%20146%20330Z'/%3E%3Cpath%20d='M165%20327Q163%20332%20158%20335Q156%20340%20151%20341Q149%20345%20145%20347Q145%20351%20143%20354Q144%20359%20142%20363Q141%20367%20138%20371Q135%20374%20131%20375Q126%20377%20122%20376Q118%20378%20114%20377Q111%20380%20106%20381Q104%20387%2098%20390Q94%20396%2087%20398Q82%20402%2075%20401Q69%20401%2065%20397Q60%20392%2058%20386Q55%20381%2055%20374Q53%20369%2054%20364Q51%20360%2052%20355Q50%20352%2050%20348Q49%20344%2049%20341Q47%20337%2047%20334Q44%20331%2043%20327Q40%20324%2038%20319Q35%20314%2035%20309Q33%20304%2035%20299Q37%20295%2041%20292Q45%20288%2050%20287Q53%20283%2058%20282Q59%20278%2064%20276Q65%20270%2070%20267Q73%20263%2078%20261Q83%20259%2088%20260Q94%20262%2098%20267Q103%20270%20106%20276Q110%20278%20112%20282Q116%20282%20119%20284Q123%20281%20128%20282Q134%20280%20140%20281Q145%20281%20150%20284Q156%20285%20159%20290Q163%20293%20165%20298Q168%20302%20168%20307Q170%20312%20169%20317Q169%20323%20165%20327Z'/%3E%3Cpath%20d='M167%20324Q166%20329%20162%20333Q161%20338%20157%20342Q156%20347%20152%20350Q152%20355%20149%20359Q148%20364%20145%20368Q142%20372%20138%20375Q134%20378%20129%20379Q125%20383%20120%20384Q118%20389%20112%20392Q110%20399%20103%20404Q99%20411%2091%20414Q85%20418%2077%20418Q70%20416%2065%20411Q58%20404%2057%20396Q52%20389%2053%20380Q50%20375%2050%20369Q46%20367%2043%20363Q38%20363%2034%20359Q28%20357%2024%20353Q20%20350%2018%20344Q14%20340%2014%20334Q11%20329%2011%20324Q9%20318%2010%20312Q8%20307%2011%20301Q11%20295%2015%20290Q18%20285%2023%20282Q26%20277%2032%20275Q35%20270%2040%20267Q43%20262%2048%20260Q52%20255%2058%20254Q64%20252%2070%20254Q77%20255%2082%20259Q88%20262%2091%20267Q96%20267%2099%20270Q104%20267%20109%20266Q115%20260%20123%20258Q130%20252%20140%20252Q148%20250%20155%20253Q162%20257%20165%20263Q169%20269%20169%20276Q171%20283%20169%20290Q172%20296%20170%20302Q171%20307%20169%20313Q170%20319%20167%20324Z'/%3E%3Cpath%20d='M204%20320Q203%20329%20197%20336Q194%20344%20187%20349Q185%20357%20179%20362Q179%20369%20174%20375Q174%20384%20169%20390Q168%20399%20161%20405Q158%20413%20150%20418Q146%20426%20137%20431Q132%20439%20122%20444Q115%20451%20105%20453Q95%20456%2085%20453Q73%20450%2066%20441Q57%20432%2054%20420Q47%20411%2046%20400Q40%20397%2037%20390Q30%20392%2022%20389Q11%20393%20-0%20390Q-12%20391%20-22%20386Q-31%20381%20-36%20373Q-41%20365%20-40%20355Q-43%20346%20-40%20337Q-44%20329%20-42%20320Q-46%20312%20-44%20303Q-48%20294%20-45%20284Q-44%20275%20-38%20267Q-33%20258%20-24%20254Q-17%20246%20-8%20244Q-0%20238%209%20238Q17%20233%2026%20233Q34%20230%2042%20232Q50%20231%2058%20234Q65%20233%2072%20237Q78%20233%2085%20234Q90%20225%2099%20222Q107%20210%20120%20205Q131%20196%20145%20195Q156%20193%20167%20198Q176%20204%20180%20215Q186%20226%20184%20238Q188%20248%20185%20259Q189%20266%20189%20275Q195%20281%20197%20289Q203%20295%20204%20304Q206%20312%20204%20320Z'/%3E%3Cpath%20d='M202%20317Q200%20327%20192%20333Q191%20341%20185%20347Q188%20356%20186%20364Q191%20374%20189%20385Q192%20397%20188%20408Q186%20419%20177%20427Q171%20436%20160%20439Q150%20445%20139%20444Q128%20448%20117%20445Q106%20446%2096%20440Q85%20437%2078%20429Q68%20424%2063%20414Q55%20410%2051%20402Q45%20402%2039%20398Q30%20403%2020%20402Q9%20409%20-4%20407Q-16%20410%20-28%20404Q-38%20401%20-44%20392Q-49%20383%20-49%20372Q-52%20363%20-49%20353Q-54%20345%20-53%20335Q-61%20328%20-62%20317Q-70%20308%20-71%20297Q-73%20286%20-69%20276Q-64%20266%20-54%20260Q-44%20251%20-31%20250Q-21%20245%20-9%20246Q-0%20241%209%20242Q15%20237%2022%20235Q27%20229%2034%20227Q39%20220%2047%20217Q52%20210%2061%20207Q67%20198%2078%20194Q86%20185%2098%20183Q109%20176%20121%20177Q132%20177%20142%20184Q151%20191%20155%20203Q162%20213%20161%20226Q165%20235%20164%20246Q170%20251%20172%20259Q181%20262%20187%20270Q197%20274%20202%20283Q207%20290%20208%20299Q208%20309%20202%20317Z'/%3E%3C/svg%3E");
  --contour-fade: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  --rule: 1px solid var(--line);
  --rule-2: 1px solid var(--line-2);
}

/* ── base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--ui); font-size: var(--fs-15); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: var(--tracking-tight); line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(var(--fs-32), 5.2vw, var(--fs-60)); }
h2 { font-size: clamp(var(--fs-24), 3.4vw, var(--fs-44)); }
h3 { font-size: var(--fs-20); letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
a { color: var(--sand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
strong, b { font-weight: 700; }
img, svg { max-width: 100%; }

.wrap { width: min(1180px, 100% - 2 * var(--sp-5)); margin-inline: auto; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  padding: var(--sp-3) var(--sp-4); background: var(--sand); color: var(--ink-900);
  font-weight: 700; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

:where(a, button, summary, input):focus-visible {
  outline: 2px solid var(--sand); outline-offset: 2px; border-radius: var(--r-xs);
}

/* ── header ────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--rule);
}
.header-inner {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: 62px;
}
.lockup { display: flex; align-items: center; gap: var(--sp-3); }
.lockup svg { display: block; height: 30px; width: 30px; }
.lockup span { font-size: var(--fs-20); font-weight: 700; letter-spacing: var(--tracking-tight); }
.lockup b { color: var(--sand); }
.site-nav { display: flex; gap: var(--sp-5); margin-inline-start: auto; }
.site-nav a {
  font-family: var(--mono); font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-2);
}
.site-nav a:hover { color: var(--text); text-decoration: none; }
.header-cta { margin-inline-start: var(--sp-4); }

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 46px; padding: 0 var(--sp-5);
  border: 1px solid transparent; border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-15); font-weight: 700; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .62; cursor: progress; }
.btn-primary { background: var(--sand); color: var(--ink-900); }
.btn-primary:hover { background: var(--sand-soft); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--line-warm); background: rgba(245,165,36,.06); transform: translateY(-1px); }
.btn-sm { min-height: 38px; padding: 0 var(--sp-4); font-size: var(--fs-13); }
.btn-block { width: 100%; }

/* ── share row ───────────────────────────────────────────────────────────
   Plain links and buttons: no social SDK, no iframe, no pixel. Disclosure and
   wiring live in site.js; this only places them. */
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); }
.share-label {
  font-family: var(--mono); font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--muted);
}
.share-btn {
  font: inherit; font-size: var(--fs-13); color: var(--text-2); text-decoration: none;
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 7px 14px; min-height: 34px; cursor: pointer; white-space: nowrap;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.share-btn:hover { color: var(--text); border-color: var(--line-warm); text-decoration: none; }

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate;
  padding-block: clamp(var(--sp-7), 7vw, var(--sp-9)) var(--sp-8);
  border-bottom: var(--rule);
}
/* The contour field. Masked to fade out before it reaches the copy, so it is texture
   under the composition rather than noise behind the words. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--contour);
  background-repeat: no-repeat;
  background-position: 108% -12%;
  background-size: 760px auto;
  -webkit-mask-image: var(--contour-fade);
  mask-image: var(--contour-fade);
  opacity: .85;
  pointer-events: none;
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-8)); align-items: start;
}
.hero-copy { min-width: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-5); padding: 6px 13px 6px 10px;
  border: var(--rule-2); border-radius: var(--r-pill);
  font-family: var(--mono); font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-2);
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 0 3px rgba(63,185,80,.16);
}
.hero-lead {
  margin-top: var(--sp-5); max-width: 34em;
  font-size: clamp(var(--fs-15), 1.4vw, var(--fs-20)); line-height: 1.55; color: var(--text-2);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

.trust-row {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: var(--rule);
}
.trust-row li {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--mono); font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-2);
}
.trust-row li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sand); opacity: .85;
}

/* ── instrument panel ────────────────────────────────────────────────────
   The material for measured things. Flat, near-square, ruled. No gradient and no
   shadow: a readout does not float, it is part of the dash. */
.spec-card, .step, .delivery, .waitlist, .plan {
  padding: var(--sp-5);
  border: var(--rule); border-radius: var(--r-xs);
  background: var(--surface); box-shadow: none;
}
.spec-head { display: flex; align-items: center; gap: var(--sp-3); }
.chip {
  display: inline-block; padding: 4px 9px;
  border: 1px solid var(--line-warm); border-radius: var(--r-xs);
  background: rgba(245,165,36,.07);
  font-family: var(--mono); font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--sand);
}
.spec-title { font-size: var(--fs-15); font-weight: 700; letter-spacing: 0; color: var(--text-2); }
.spec-list {
  margin-top: var(--sp-5); display: grid; gap: 1px;
  background: var(--line); border-radius: var(--r-xs); overflow: hidden;
}
.spec-list > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); background: var(--surface);
}
.spec-list dt {
  font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--muted);
}
/* The figures are the point of this panel: hard numbers, tabular so they align. */
.spec-list dd {
  font-family: var(--mono); font-size: var(--fs-15); font-weight: 700; color: var(--text);
  text-align: right; font-variant-numeric: tabular-nums;
}
.spec-foot { margin-top: var(--sp-4); font-size: var(--fs-12); line-height: 1.6; color: var(--muted); }

/* ── section furniture ───────────────────────────────────────────────────
   A kicker reads as a chart-sheet header: a hairline running to the edge with the
   label on it. Cheaper than a box and it sets section rhythm without a card. */
.section { padding-block: clamp(var(--sp-7), 6vw, var(--sp-9)); scroll-margin-top: 78px; }
.section-alt { border-block: var(--rule); background: var(--ink-700); position: relative; isolation: isolate; }
.section-alt::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--contour);
  background-repeat: no-repeat; background-position: -8% 50%; background-size: 620px auto;
  opacity: .5; pointer-events: none;
}
.section-head { max-width: 46em; margin-bottom: clamp(var(--sp-6), 4vw, var(--sp-7)); }
.kicker {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  font-family: var(--mono); font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--sand);
}
.kicker::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.section-lead { margin-top: var(--sp-5); font-size: var(--fs-17); line-height: 1.6; color: var(--text-2); }

/* ── features: one leads, four follow ────────────────────────────────────
   Was five equal cards in a row, which is a feature-tile grid: nothing is prioritised
   and the eye has nowhere to land. Now the first tab is a real panel and the rest are
   sheet entries under it, so the section has a head and a body. */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); }
.card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding-top: var(--sp-5); border-top: var(--rule);
}
.card:first-child {
  grid-column: 1 / -1;
  padding: var(--sp-6); border: var(--rule); border-radius: var(--r-xs);
  background: var(--surface);
}
.card:first-child h3 { font-size: clamp(var(--fs-24), 2.6vw, var(--fs-32)); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.card-index {
  font-family: var(--mono); font-size: var(--fs-11); letter-spacing: var(--tracking-wide);
  color: var(--sand); font-variant-numeric: tabular-nums;
}
.card p { font-size: var(--fs-15); line-height: 1.62; color: var(--text-2); }
.card:first-child p { max-width: 68em; }
.card-note {
  margin-top: auto; padding-top: var(--sp-4); border-top: var(--rule);
  font-family: var(--mono); font-size: var(--fs-12); line-height: 1.55; color: var(--muted);
}

/* ── offline strip ─────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.step-num {
  display: block; margin-bottom: var(--sp-3);
  font-family: var(--mono); font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide); color: var(--sand); font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--fs-17); }
.step p { margin-top: var(--sp-3); font-size: var(--fs-15); line-height: 1.62; color: var(--text-2); }

.offline-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }
.col { padding: var(--sp-5); border: var(--rule); border-radius: var(--r-xs); background: var(--surface); }
.col h3 { font-size: var(--fs-15); letter-spacing: 0; }
.col-yes h3 { color: var(--mint); }
.col-no h3 { color: var(--ember); }
.col ul { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.col li { display: grid; grid-template-columns: 16px 1fr; gap: var(--sp-3); font-size: var(--fs-15); line-height: 1.5; color: var(--text-2); }
.col li::before { font-family: var(--mono); font-size: var(--fs-13); line-height: 1.5; }
.col-yes li::before { content: "\2713"; color: var(--mint); }
.col-no  li::before { content: "\2014"; color: var(--ember); }

/* ── pricing ─────────────────────────────────────────────────────────────
   Three plans, but only one is the answer. The featured plan takes the space and the
   type scale; the other two are deliberately secondary, because a row of three equal
   cards asks the visitor to do the prioritising. */
.plans { display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: var(--sp-4); align-items: start; }
.plan { display: flex; flex-direction: column; gap: var(--sp-4); }
.plan-featured { padding: var(--sp-6); border-color: var(--line-warm); box-shadow: var(--sh-glow); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.plan-name { font-size: var(--fs-17); font-weight: 700; letter-spacing: 0; }
.plan-featured .plan-name { font-size: var(--fs-24); }
.plan-badge {
  font-family: var(--mono); font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--sand);
}
.plan-price {
  font-family: var(--mono); font-size: var(--fs-32); font-weight: 700;
  letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; color: var(--text);
}
.plan-featured .plan-price { font-size: clamp(var(--fs-44), 4.4vw, var(--fs-60)); }
.plan-price span { font-size: var(--fs-13); font-weight: 400; color: var(--muted); letter-spacing: 0; }
.plan-meta { margin-top: calc(var(--sp-2) * -1); font-size: var(--fs-13); color: var(--muted); }
.plan-list { display: grid; gap: var(--sp-3); padding-top: var(--sp-4); border-top: var(--rule); }
.plan-list li { display: grid; grid-template-columns: 14px 1fr; gap: var(--sp-3); font-size: var(--fs-13); line-height: 1.55; color: var(--text-2); }
.plan-list li::before { content: "\2022"; font-family: var(--mono); color: var(--sand); line-height: 1.55; }
.plan-note { font-size: var(--fs-12); line-height: 1.55; color: var(--muted); }
.plan-cta { margin-top: auto; }
.plan-cta .btn { width: 100%; }

.delivery { margin-top: var(--sp-6); }
.delivery > h3 { font-size: var(--fs-20); }
.delivery > p { margin-top: var(--sp-3); font-size: var(--fs-15); color: var(--text-2); max-width: 60em; }
.delivery-list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4);
  margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: var(--rule);
}
.delivery-list li { display: grid; gap: var(--sp-2); font-size: var(--fs-13); line-height: 1.55; color: var(--text-2); }
.delivery-list b {
  font-family: var(--mono); font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--sand); font-weight: 400;
}
.delivery-list strong { display: block; font-size: var(--fs-15); }

/* ── notice ──────────────────────────────────────────────────────────────
   A top rule in the state colour rather than a left rail. The rail was decoration
   wearing the costume of structure; a rule over the message reads as a status header,
   and the state is already carried by data-state. */
.notice {
  display: block; margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5);
  border: var(--rule-2); border-top: 2px solid var(--sand); border-radius: var(--r-xs);
  background: var(--raised); font-size: var(--fs-15); line-height: 1.55; color: var(--text);
}
.notice:empty { display: none; }
.notice[data-state="ok"] { border-top-color: var(--mint); }
.notice[data-state="bad"] { border-top-color: var(--danger); }

.waitlist { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); padding: var(--sp-4); }
.waitlist-field { display: grid; gap: var(--sp-2); }
.waitlist-field label {
  font-family: var(--mono); font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--muted);
}
.waitlist input {
  width: 100%; min-height: 44px; padding: 11px 14px;
  border: var(--rule-2); border-radius: var(--r-xs);
  background: var(--ink-800); color: var(--text); font-family: var(--ui); font-size: var(--fs-15);
}
.waitlist input::placeholder { color: var(--ink-400); }
.waitlist input:focus-visible { border-color: var(--sand); outline: none; }
.waitlist .btn { align-self: end; }
.waitlist-fine { grid-column: 1 / -1; font-size: var(--fs-12); line-height: 1.6; color: var(--muted); }

.fineprint { margin-top: var(--sp-5); font-size: var(--fs-12); line-height: 1.6; color: var(--muted); max-width: 62em; }

/* ── limitations ─────────────────────────────────────────────────────────
   Sheet material, not cards. These are the honest caveats and they should read as
   continuous prose the page is not hiding, not as six more feature tiles. */
.limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); }
.limit { padding-top: var(--sp-5); border-top: var(--rule); }
.limit h3 { font-size: var(--fs-17); }
.limit p { margin-top: var(--sp-3); font-size: var(--fs-15); line-height: 1.62; color: var(--text-2); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 0; max-width: 62em; border-top: var(--rule); }
.faq details { border-bottom: var(--rule); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 56px; padding: var(--sp-4) 0; cursor: pointer; list-style: none;
  font-size: var(--fs-17); font-weight: 700; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-top: -3px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: 3px; border-color: var(--sand); }
.faq summary:hover { color: var(--sand); }
.faq-body { padding: 0 0 var(--sp-5); }
.faq-body p { font-size: var(--fs-15); line-height: 1.65; color: var(--text-2); }
.faq-body p + p { margin-top: var(--sp-3); }

/* ── footer ────────────────────────────────────────────────────────────── */
.site-footer { margin-top: var(--sp-8); border-top: var(--rule); background: var(--ink-900); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(var(--sp-6), 4vw, var(--sp-8)); padding-block: var(--sp-7); }
.footer-brand { min-width: 0; }
.footer-col { min-width: 0; }
.footer-lock { display: flex; align-items: center; gap: var(--sp-3); }
.footer-lock svg { display: block; height: 68px; width: 68px; }
.footer-lock span { font-size: var(--fs-24); font-weight: 700; letter-spacing: var(--tracking-tight); }
.footer-lock b { color: var(--sand); }
.footer-tagline { margin-top: var(--sp-4); max-width: 30em; font-size: var(--fs-13); line-height: 1.6; color: var(--muted); }
.footer-h {
  font-family: var(--mono); font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-2); font-weight: 400;
}
.footer-list { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.footer-list li { font-size: var(--fs-13); line-height: 1.6; color: var(--muted); }
.footer-list a { color: var(--text-2); }
.footer-legal { padding-bottom: var(--sp-7); }
.footer-legal-line {
  padding: var(--sp-4) var(--sp-5);
  border: var(--rule); border-top: 2px solid var(--sand); border-radius: var(--r-xs);
  background: var(--surface); font-size: var(--fs-15); line-height: 1.6; color: var(--text);
}
.footer-fine { margin-top: var(--sp-4); font-size: var(--fs-12); line-height: 1.65; color: var(--muted); max-width: 80em; }

/* ── motion: only what the OS allows ───────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .is-in { animation: rise var(--t-med) var(--ease) both; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
       transition-duration: .001ms !important; }
}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plan-featured { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .delivery-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero::before { background-position: 130% -10%; background-size: 600px auto; }
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .site-nav { display: none; }
  .header-inner { justify-content: space-between; }
  .header-cta { margin-inline-start: auto; }
}
@media (max-width: 680px) {
  .cards, .plans, .steps, .offline-cols, .limits, .delivery-list, .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .plan-featured { grid-column: auto; }
  .waitlist { grid-template-columns: minmax(0, 1fr); }
  .waitlist .btn { width: 100%; }
  .spec-list > div { flex-wrap: wrap; }
  .spec-list dd { text-align: left; }
}