/* Jeremy Anderson Tech — site stylesheet (Calibrated Signal). Maps 1:1 to theme.json tokens for the WordPress block theme. */
/* Metric-matched fallbacks: text keeps its line breaks while the web fonts load.
   Archivo metrics: ascent 878, descent 210 per 1000 units. The wide face stands in for the 108–125% heading widths. */
/* Self-hosted variable fonts, instanced and Latin-subset by design/tools/subset_fonts.py */
@font-face{font-family:"Archivo";src:url("../fonts/archivo-var.woff2") format("woff2");font-weight:400 700;font-stretch:100% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Martian Mono";src:url("../fonts/martian-mono-var.woff2") format("woff2");font-weight:400 500;font-stretch:87.5% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Roboto");size-adjust:98.4%;ascent-override:89.2%;descent-override:21.3%;line-gap-override:0%}
@font-face{font-family:"Archivo Wide Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Roboto");size-adjust:118%;ascent-override:74.4%;descent-override:17.8%;line-gap-override:0%}
@font-face{font-family:"Martian Mono Fallback";src:local("Menlo"),local("DejaVu Sans Mono"),local("Liberation Mono"),local("Courier New"),local("Roboto Mono");size-adjust:109.6%;ascent-override:91.2%;descent-override:18.2%;line-gap-override:0%}
:root{
  color-scheme: dark;
  --ink-950:#07090B; --ink-900:#0A0C0F; --ink-850:#10141A; --ink-800:#161B22; --ink-700:#222A34; --ink-600:#2E3845; --ink-500:#3D4855; --ink-450:#5A6675; --ink-400:#7D8996; --ink-300:#A3AFBC; --ink-100:#E6ECF2;
  --ch1:#3CE3F0; --ch2:#9A8CFF; --ch3:#FFC23D; --ch4:#5EF0A0; --danger:#FF5C7A;
  --bg:var(--ink-900); --panel:var(--ink-850); --raised:var(--ink-800); --line:var(--ink-700); --line-strong:var(--ink-600); --line-control:var(--ink-450);
  --fg:var(--ink-100); --fg-muted:var(--ink-300); --fg-subtle:var(--ink-400);
  --grid-major:rgba(159,180,200,.085); --grid-minor:rgba(159,180,200,.04);
  --f-display:"Archivo","Archivo Wide Fallback",Arial,sans-serif; --f-body:"Archivo","Archivo Fallback",Arial,sans-serif; --f-mono:"Martian Mono","Martian Mono Fallback",ui-monospace,Menlo,Consolas,monospace;
  /* Type roles: each role fixes size, weight, width, leading and tracking together (see DESIGN.md › Typography). */
  --t-display:clamp(3.25rem,1.6rem + 6vw,6rem); --t-page:clamp(2.5rem,1.5rem + 4vw,4.5rem); --t-section:clamp(1.875rem,1.3rem + 2vw,2.75rem);
  --t-title:clamp(1.375rem,1.2rem + .6vw,1.75rem); --t-item:1.125rem; --t-lede:clamp(1.125rem,1rem + .4vw,1.3125rem);
  --t-body:1.0625rem; --t-small:.9375rem; --t-label:.75rem; --t-label-long:.8125rem; --t-data:1.0625rem;
  --w-small:430; --measure:32em;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --r-tag:2px; --r-control:6px; --r-panel:12px;
  --ease-out:cubic-bezier(.16,1,.3,1); --t-fast:120ms; --t-base:200ms; --t-slow:320ms;
  --gutter:clamp(16px,4vw,48px); --max:1280px; --hdr:68px;
  /* layout modes: phone <640 · tablet <880 (menu button, stacked hero) · laptop 880+ (full nav) · short landscape max-height 540 */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--ink-500) var(--ink-950);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:0ms!important;animation-duration:0ms!important}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:var(--t-body)}
::selection{background:var(--ch1);color:var(--ink-900)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--ink-950)}::-webkit-scrollbar-thumb{background:var(--ink-600);border-radius:10px;border:2px solid var(--ink-950)}
:focus-visible{outline:2px solid var(--ch1);outline-offset:2px;border-radius:2px}
img,svg{max-width:100%}
a{color:var(--ch1);text-underline-offset:.22em;text-decoration-thickness:1px}
@media (hover:hover){a:hover{text-decoration-thickness:2px}}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:620;line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:var(--t-page);font-weight:640;font-stretch:125%;line-height:.95;letter-spacing:-.03em}
h2{font-size:var(--t-section);font-weight:620;font-stretch:118%;line-height:1.05;letter-spacing:-.02em}
h3{font-size:var(--t-title);font-weight:600;font-stretch:112%;line-height:1.15;letter-spacing:-.01em}
h4{font-size:var(--t-item);font-weight:600;font-stretch:108%;line-height:1.35;letter-spacing:0}
p{margin:0 0 var(--s4);max-width:var(--measure)}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin-inline:auto;padding-inline:max(var(--gutter), env(safe-area-inset-left,0px)) max(var(--gutter), env(safe-area-inset-right,0px))}
.lede{color:var(--fg-muted);max-width:58ch;font-size:var(--t-lede);line-height:1.5}
.muted{color:var(--fg-muted)}
.readout{font-family:var(--f-mono);font-stretch:90%;font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted);font-variant-numeric:tabular-nums}
.readout.long{text-transform:none;letter-spacing:.01em;font-size:var(--t-label-long)}
.mono{font-family:var(--f-mono);font-stretch:90%;font-variant-numeric:tabular-nums}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s4);top:-60px;z-index:100;background:var(--ch1);color:var(--ink-900);padding:10px 14px;border-radius:var(--r-control);font-weight:600;text-decoration:none}
.skip:focus{top:var(--s3)}

/* header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(10,12,15,.8);backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:var(--hdr)}
.brand{display:flex;align-items:center;min-height:44px;color:var(--fg);flex:none}
.brand svg{display:block;width:196px;height:auto}
.nav{display:flex;align-items:center;gap:var(--s2)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.nav a.nl{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-control);color:var(--fg-muted);text-decoration:none;font-size:var(--t-small);font-weight:500;transition:color var(--t-base) var(--ease-out),background var(--t-base) var(--ease-out)}
@media (hover:hover){.nav a.nl:hover{color:var(--fg);background:var(--ink-850)}}
.nav a.nl[aria-current="page"]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--ch1);border-radius:0}
.menu-btn{display:none;align-items:center;gap:8px;min-height:44px;padding:0 12px;background:transparent;border:1px solid var(--line-control);border-radius:var(--r-control);color:var(--fg);font:inherit;cursor:pointer;font-size:var(--t-small)}
.menu-btn svg{width:18px;height:18px}
@media (max-width:879px){
  .nav ul,.nav .btn{display:none}
  .menu-btn{display:inline-flex}
  .brand svg{width:168px}
  .nav.open{position:fixed;inset:var(--hdr) 0 auto 0;background:var(--ink-950);border-bottom:1px solid var(--line);padding:var(--s4) var(--gutter) var(--s6);flex-direction:column;align-items:stretch;max-height:calc(100dvh - var(--hdr));overflow:auto}
  .nav.open{padding-bottom:calc(var(--s6) + env(safe-area-inset-bottom,0px))}
  .nav.open ul{display:grid;gap:0}
  .nav.open ul a.nl{min-height:52px;font-size:var(--t-item);color:var(--fg);border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
  .nav.open .btn{display:inline-flex;margin-top:var(--s5)}
  .nav.open .menu-btn{position:fixed;top:calc((var(--hdr) - 44px)/2);right:max(var(--gutter), env(safe-area-inset-right,0px))}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border-radius:var(--r-control);font-family:var(--f-display);font-stretch:108%;font-weight:600;font-size:var(--t-small);text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:background var(--t-base) var(--ease-out),color var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ch1);color:var(--ink-900)}
@media (hover:hover){.btn-primary:hover{background:#7AEDF6}}
.btn-secondary{background:transparent;color:var(--fg);border-color:var(--line-control)}
@media (hover:hover){.btn-secondary:hover{border-color:var(--ch1);color:var(--ch1)}}
.btn-sm{min-height:44px;padding:0 16px;font-size:var(--t-small)}
.arrow{width:16px;height:16px;flex:none;transition:transform var(--t-base) var(--ease-out)}
@media (hover:hover){.btn:hover .arrow{transform:translateX(3px)}}
.btn[disabled]{background:var(--ink-800);color:var(--ink-400);border-color:var(--line);cursor:not-allowed}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;min-height:44px}
.link-arrow svg{width:16px;height:16px;transition:transform var(--t-base) var(--ease-out)}
@media (hover:hover){.link-arrow:hover svg{transform:translateX(3px)}}
@media (hover:hover){.link-arrow:hover{text-decoration:underline}}

/* graticule screens */
.graticule{background-image:linear-gradient(var(--grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),linear-gradient(var(--grid-minor) 1px,transparent 1px),linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px);background-size:10% 12.5%,10% 12.5%,2% 2.5%,2% 2.5%;background-position:-1px -1px}
.screen{position:relative;background-color:var(--ink-950);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden}
.screen-bar{position:relative;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:10px 14px;border-bottom:1px solid var(--line);background:rgba(16,20,26,.88)}

/* hero */
.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate}
.hero .graticule{position:absolute;inset:0;z-index:-2}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}
.hero .wrap{position:relative;min-height:clamp(560px,82svh,820px);display:grid;grid-template-rows:1fr auto;padding-block:clamp(48px,8vw,104px) 0}
.hero-copy{align-self:end;max-width:min(640px,52vw);padding-bottom:var(--s8)}
.hero h1{margin-bottom:var(--s5);font-size:var(--t-display);font-weight:640;font-stretch:125%;line-height:.92;letter-spacing:-.035em}
.hero .lede{color:var(--fg);opacity:.9;margin-bottom:var(--s6)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.hero .note{margin-top:var(--s4);text-wrap:balance}
.hero-state{position:absolute;top:var(--s5);right:var(--gutter);display:flex;gap:var(--s4);align-items:center}
.hero-state .dot{width:8px;height:8px;border-radius:50%;background:var(--ink-400);display:inline-block;margin-right:8px;vertical-align:1px;transition:background var(--t-slow) var(--ease-out)}
.hero-state[data-state="settled"] .dot{background:var(--ch4)}
.hero-state[data-state="lock"] .dot{background:var(--ch1)}
/* Narrow (< 880px): the trace owns a band above the headline; copy uses the full width. */
@media (max-width:879px){.hero .wrap{min-height:auto;padding-top:clamp(200px,38vw,320px)}.hero-copy{max-width:640px;padding-bottom:var(--s7)}.hero-state{left:max(var(--gutter), env(safe-area-inset-left,0px));right:auto}}
/* Short landscape (phones on their side, short windows): compact side-by-side, nothing taller than it needs to be. */
@media (max-height:540px) and (orientation:landscape){
  :root{--hdr:56px;--t-display:clamp(2.25rem,4vw + 4vh,4rem)}
  .hero .wrap{min-height:auto;padding-top:clamp(56px,14vh,72px)}
  .hero-copy{max-width:min(560px,54vw);padding-bottom:var(--s6)}
  .hero h1{margin-bottom:var(--s4);font-size:var(--t-display);font-weight:640;font-stretch:125%;line-height:.92;letter-spacing:-.035em}
  .hero .lede{margin-bottom:var(--s5);font-size:var(--t-body)}
  .hero-state{left:auto;right:max(var(--gutter), env(safe-area-inset-right,0px))}
  .page-head .wrap{padding-block:var(--s7) var(--s6)}
}

/* channel strip */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)}
.strip a{position:relative;display:grid;gap:4px;background:rgba(7,9,11,.9);padding:var(--s4) var(--s5) var(--s5);text-decoration:none;color:var(--fg);transition:background var(--t-base) var(--ease-out)}
.strip a::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow) var(--ease-out)}
@media (hover:hover){.strip a:hover{background:var(--ink-850)}}
@media (hover:hover){.strip a:hover::before,.strip a:focus-visible::before{transform:scaleX(1)}}
.strip .id{font-family:var(--f-mono);font-stretch:90%;font-size:var(--t-label);color:var(--c)}
.strip .v{font-family:var(--f-display);font-size:var(--t-item);font-weight:600;font-stretch:108%;line-height:1.35;letter-spacing:0}
.strip .p{font-family:var(--f-mono);font-stretch:90%;font-size:var(--t-label);color:var(--fg-muted)}
.hero .strip{margin-inline:calc(-1*var(--gutter));border-top:1px solid var(--line)}
@media (min-width:1376px){.hero .strip{margin-inline:0;border-left:1px solid var(--line);border-right:1px solid var(--line)}}
@media (max-width:640px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* sections */
.section{padding-block:clamp(72px,9vw,128px)}
.section + .section{border-top:1px solid var(--line)}
.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5) var(--s8);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.section-head p{margin:0}
@media (max-width:860px){.section-head{grid-template-columns:1fr}}
.alt{background:var(--ink-950)}

/* comparison */
.versus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5)}
@media (max-width:860px){.versus{grid-template-columns:1fr}}
.versus .screen{min-height:340px}
.versus canvas{position:absolute;inset:44px 0 0 0;width:100%;height:calc(100% - 44px)}
.versus .labels{position:absolute;inset:auto 0 0 0;padding:var(--s4) var(--s5) var(--s5);background:linear-gradient(transparent,rgba(7,9,11,.94) 30%)}
.versus h3{margin-bottom:6px}
.versus .labels p{margin:0;color:var(--fg-muted);font-size:var(--t-small);max-width:44ch}

/* channel rows */
.ch-rows{border-top:1px solid var(--line)}
.ch-row{display:grid;grid-template-columns:120px minmax(0,1.15fr) minmax(0,1fr) 180px;gap:var(--s5) var(--s6);padding:var(--s6) 0;border-bottom:1px solid var(--line);align-items:start;position:relative}
.ch-row .id{font-family:var(--f-mono);font-stretch:90%;font-size:var(--t-label);color:var(--c);padding-top:.45em;display:flex;align-items:center;gap:10px}
.ch-row .id i{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 16%,transparent)}
.ch-row .id-inline{display:none;font-family:var(--f-mono);font-stretch:90%;font-size:var(--t-label);color:var(--c);font-weight:500;letter-spacing:0;vertical-align:.35em;margin-right:6px}
@media (max-width:1000px){.ch-row .id-inline{display:inline}}
.ch-row h3{margin-bottom:var(--s3);font-size:var(--t-title);font-weight:600;font-stretch:112%;line-height:1.15;letter-spacing:-.01em}
.ch-row p{color:var(--fg-muted);margin:0;max-width:46ch}
.ch-row ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:var(--t-small)}
.ch-row li{display:flex;gap:10px;align-items:baseline}
.ch-row li::before{content:"";width:12px;height:1px;background:var(--line-strong);flex:none;transform:translateY(-4px)}
.ch-row .price{display:grid;gap:4px;justify-items:start}
.ch-row .price .amt{font-family:var(--f-mono);font-stretch:90%;font-size:var(--t-data)}
@media (max-width:1000px){.ch-row{grid-template-columns:1fr 1fr}.ch-row .id{display:none}.ch-row .price{grid-column:1/-1;grid-auto-flow:column;align-items:center;justify-content:start;gap:var(--s5)}}
@media (max-width:640px){.ch-row{grid-template-columns:1fr}.ch-row .price{grid-auto-flow:row;justify-items:start;gap:4px}}

/* tags */
.ch-tag{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-mono);font-stretch:90%;font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;color:var(--fg);border:1px solid var(--line-strong);border-radius:var(--r-tag);padding:3px 7px 3px 6px;white-space:nowrap;text-decoration:none}
.ch-tag i{width:8px;height:8px;border-radius:50%;background:var(--c,var(--ch1))}
.ch-tag b{font-weight:500;color:var(--c)}
.tag-list{display:flex;flex-wrap:wrap;gap:6px}

/* work */
.work-feature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s6);align-items:stretch}
@media (max-width:960px){.work-feature{grid-template-columns:1fr}}
.work-feature>.screen{display:flex;min-height:320px}.work-feature>.screen svg{display:block;width:100%;height:100%;flex:1}
.work-meta{display:flex;flex-direction:column;gap:var(--s4)}
.work-meta h3{font-size:var(--t-title);font-weight:600;font-stretch:112%;line-height:1.15;letter-spacing:-.01em}
.facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.facts li{display:grid;grid-template-columns:120px 1fr;gap:var(--s4);padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--t-small)}
.facts li span:first-child{font-family:var(--f-mono);font-stretch:90%;font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-subtle);padding-top:.3em}
@media (max-width:480px){.facts li{grid-template-columns:1fr;gap:2px}}
.work-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);margin-top:var(--s6)}
@media (max-width:760px){.work-pair{grid-template-columns:1fr}}
.work-card{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;background:var(--panel);text-decoration:none;color:var(--fg);transition:border-color var(--t-base) var(--ease-out)}
@media (hover:hover){.work-card:hover{border-color:var(--ch1)}}
.work-card .plate{aspect-ratio:16/9;border-bottom:1px solid var(--line);background-color:var(--ink-950)}
.work-card .plate svg{width:100%;height:100%;display:block}
.work-card .body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.work-card h3{font-size:var(--t-title);font-weight:600;font-stretch:112%;line-height:1.15;letter-spacing:-.01em}
.work-card p{margin:0;color:var(--fg-muted);font-size:var(--t-small)}
.work-card .more{margin-top:auto;display:flex;align-items:center;gap:8px;color:var(--ch1);font-weight:600;font-size:var(--t-small)}
.links-row{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5)}

/* prices */
.price-table{border-top:1px solid var(--line)}
.price-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.6fr) 140px 160px;gap:var(--s5);align-items:baseline;padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.price-row .name{font-family:var(--f-display);display:flex;flex-direction:column;gap:6px;align-items:flex-start;font-size:var(--t-item);font-weight:600;font-stretch:108%;line-height:1.35;letter-spacing:0}
.price-row .desc{color:var(--fg-muted);font-size:var(--t-small)}
.price-row .amt{font-family:var(--f-mono);font-stretch:90%;font-variant-numeric:tabular-nums;font-size:var(--t-data)}
.price-row .time{font-family:var(--f-mono);font-stretch:90%;font-size:var(--t-label);color:var(--fg-muted);text-transform:uppercase;letter-spacing:.04em}
.popular{white-space:nowrap;font-family:var(--f-mono);font-stretch:90%;font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-900);background:var(--ch4);border-radius:2px;padding:2px 6px;font-weight:500}
@media (max-width:860px){.price-row{grid-template-columns:1fr auto}.price-row .desc{grid-column:1/-1;order:3}.price-row .time{grid-column:1/-1;order:4}}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line);counter-reset:step}
.steps li{position:relative;padding:var(--s6) var(--s5) var(--s5) 0;border-right:1px solid var(--line);counter-increment:step}
.steps li:last-child{border-right:0}
.steps li+li{padding-left:var(--s5)}
.steps .n{display:block;margin-bottom:6px;font-family:var(--f-mono);font-stretch:90%;font-size:var(--t-label);color:var(--ch1)}
.steps .n::before{content:counter(step,decimal-leading-zero) " · "}
.steps h3{margin:var(--s3) 0 var(--s2);font-size:var(--t-item);font-weight:600;font-stretch:108%;line-height:1.35;letter-spacing:0}
.steps p{font-size:var(--t-small);color:var(--fg-muted);margin:0}
.steps .dt{display:block;margin-top:var(--s3)}
.steps li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--ch1);box-shadow:0 0 0 4px var(--bg)}
.steps li+li::before{left:var(--s5)}
@media (max-width:1000px){.steps{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--line);margin-left:4px}.steps li,.steps li+li{border-right:0;padding:0 0 var(--s6) var(--s5)}.steps li::before,.steps li+li::before{left:-4px;top:6px}}

/* founder */
.founder{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s8);align-items:center}
@media (max-width:900px){.founder{grid-template-columns:1fr;gap:var(--s6)}}
.portrait{aspect-ratio:4/5;border:1px solid var(--line);border-radius:var(--r-panel);display:grid;place-items:end start;padding:var(--s5);position:relative;overflow:hidden;background-color:var(--ink-950)}
.portrait .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--fg-subtle);padding:var(--s6);font-size:var(--t-small)}
.timeline{list-style:none;margin:var(--s5) 0 0;padding:0;border-top:1px solid var(--line)}
.timeline li{display:grid;grid-template-columns:120px 1fr;gap:var(--s4);padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--t-small)}
.timeline .y{font-family:var(--f-mono);font-stretch:90%;font-size:var(--t-label);color:var(--fg-muted);padding-top:.25em}
@media (max-width:480px){.timeline li{grid-template-columns:1fr;gap:2px}}

/* insights */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
@media (max-width:900px){.posts{grid-template-columns:1fr}}
.post{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5) 0;border-top:1px solid var(--line-strong);text-decoration:none;color:var(--fg)}
.post h3{transition:color var(--t-base) var(--ease-out);font-size:var(--t-item);font-weight:600;font-stretch:108%;line-height:1.35;letter-spacing:0}
@media (hover:hover){.post:hover h3{color:var(--ch1)}}
.post p{margin:0;color:var(--fg-muted);font-size:var(--t-small)}
.post .meta{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:var(--s2)}
.post-more{display:inline-flex;align-items:center;gap:6px;color:var(--ch1);font-weight:600;font-size:var(--t-small)}
.post-more svg{width:12px;height:12px;flex:none}

/* close / CTA */
.close{position:relative;overflow:hidden;isolation:isolate;border-top:1px solid var(--line)}
.close .graticule{position:absolute;inset:0;z-index:-1}
.close .wrap{padding-block:clamp(80px,10vw,144px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s8);align-items:end}
@media (max-width:900px){.close .wrap{grid-template-columns:1fr;gap:var(--s6)}}
.close h2{font-size:var(--t-page);font-weight:640;font-stretch:125%;line-height:.95;letter-spacing:-.03em}
.contact-lines{display:grid;gap:var(--s4)}
.copy-line{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.copy-line .mono{user-select:all;font-size:var(--t-data)}
.btn-copy{font-family:var(--f-mono);font-stretch:90%;font-size:var(--t-label);letter-spacing:.04em;text-transform:uppercase;color:var(--fg);background:var(--ink-800);border:1px solid var(--line-control);border-radius:var(--r-control);padding:6px 10px;cursor:pointer;min-height:36px}
@media (hover:hover){.btn-copy:hover{border-color:var(--ch1);color:var(--ch1)}}
.btn-copy[data-done]{color:var(--ink-900);background:var(--ch4);border-color:var(--ch4)}

/* footer */
.site-footer{border-top:1px solid var(--line);background:var(--ink-950);padding-block:var(--s8) calc(var(--s6) + env(safe-area-inset-bottom,0px))}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--s6)}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}}
.site-footer h2{font-family:var(--f-mono);font-stretch:90%;font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-subtle);font-weight:500;margin-bottom:var(--s3)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.site-footer ul a{color:var(--fg-muted);text-decoration:none;display:inline-flex;min-height:36px;align-items:center;font-size:var(--t-small)}
@media (hover:hover){.site-footer ul a:hover{color:var(--fg);text-decoration:underline}}
.foot-base{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line)}
.concept-note{color:var(--fg-subtle);font-size:var(--t-small)}

/* page heads (inner pages) */
.page-head{position:relative;border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate}
.page-head .graticule{position:absolute;inset:0;z-index:-1;mask-image:linear-gradient(90deg,transparent,#000 60%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 60%)}
.page-head .wrap{padding-block:clamp(56px,8vw,112px) clamp(48px,6vw,80px);display:grid;gap:var(--s5)}
.page-head h1{max-width:16ch;font-size:var(--t-page);font-weight:640;font-stretch:125%;line-height:.95;letter-spacing:-.03em}
@media (min-width:761px){.page-head h1,.page-head .lede{max-width:min(16ch,58%)}.page-head .lede{max-width:min(58ch,58%)}}
.crumbs{display:flex;align-items:center;gap:0 8px;flex-wrap:wrap;font-family:var(--f-mono);font-stretch:90%;font-size:var(--t-label);color:var(--fg-subtle);list-style:none;margin:0;padding:0}
.crumbs a{color:var(--fg-muted);text-decoration:none}@media (hover:hover){.crumbs a:hover{color:var(--ch1);text-decoration:underline}}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--ink-500)}
.page-head .head-trace{position:absolute;right:0;top:0;width:38%;height:100%;z-index:-1}
@media (max-width:760px){.page-head .head-trace{display:none}}

/* prose + layout helpers */
.prose{max-width:var(--measure)}
.prose h2{margin:var(--s8) 0 var(--s4);font-size:var(--t-section);font-weight:620;font-stretch:118%;line-height:1.05;letter-spacing:-.02em}
.prose h3{margin:var(--s6) 0 var(--s3)}
.prose ul{padding-left:1.15em;display:grid;gap:8px}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7)}
@media (max-width:860px){.two-col{grid-template-columns:1fr;gap:var(--s5)}}
.aside-col>*{min-width:0}
.aside-col{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s8);align-items:start}
@media (max-width:1000px){.aside-col{grid-template-columns:1fr}}
.sticky-card{position:sticky;top:calc(var(--hdr) + 24px);border:1px solid var(--line);border-radius:var(--r-panel);background:var(--panel);padding:var(--s5);display:grid;gap:var(--s4)}
.sticky-card .amt{font-family:var(--f-mono);font-stretch:90%;font-size:var(--t-title)}
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.check-list li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;font-size:var(--t-small)}
.check-list svg{width:16px;height:16px;margin-top:4px;color:var(--c,var(--ch1))}
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.svc-grid>section{padding:var(--s6) var(--s6) var(--s6) 0;border-bottom:1px solid var(--line);scroll-margin-top:96px}
.svc-grid>section:nth-child(even){padding-left:var(--s6);padding-right:0;border-left:1px solid var(--line)}
.svc-grid h3{margin-bottom:var(--s3);font-size:var(--t-title);font-weight:600;font-stretch:112%;line-height:1.15;letter-spacing:-.01em}
.svc-grid p{color:var(--fg-muted)}
.svc-grid .outcome{color:var(--fg);font-size:var(--t-body)}
@media (max-width:860px){.svc-grid{grid-template-columns:1fr}.svc-grid>section,.svc-grid>section:nth-child(even){padding:var(--s6) 0;border-left:0}}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--s4);align-items:center;padding:var(--s5) 0;font-family:var(--f-display);min-height:44px;font-size:var(--t-item);font-weight:600;font-stretch:108%;line-height:1.35;letter-spacing:0}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:18px;height:18px;flex:none;color:var(--fg-muted);transition:transform var(--t-base) var(--ease-out)}
.faq details[open] summary svg{transform:rotate(45deg);color:var(--ch1)}
.faq details p{color:var(--fg-muted);max-width:var(--measure);margin:0 0 var(--s5)}
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden}
.stat-strip>div{background:var(--panel);padding:var(--s4) var(--s5);display:grid;gap:4px}
.stat-strip .v{font-family:var(--f-display);font-size:var(--t-item);font-weight:600;font-stretch:108%;line-height:1.35;letter-spacing:0}
.diagram{display:block;width:100%;height:auto}

/* forms */
.form{display:grid;gap:var(--s5)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media (max-width:640px){.form-row{grid-template-columns:1fr}}
.field{display:grid;gap:6px;min-width:0}
.field label,.field legend{font-size:var(--t-small);font-weight:500;padding:0}
.field .hint{color:var(--fg-muted);font-size:var(--t-small)}
.input{min-height:48px;width:100%;background:var(--ink-950);color:var(--fg);border:1px solid var(--line-control);border-radius:var(--r-control);padding:11px 13px;font:inherit;caret-color:var(--ch1);transition:border-color var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out);font-size:var(--t-body)}
textarea.input{min-height:140px;resize:vertical}
.input::placeholder{color:var(--ink-400)}
@media (hover:hover){.input:hover{border-color:var(--ink-400)}}
.input:focus{outline:none;border-color:var(--ch1);box-shadow:0 0 0 3px rgba(60,227,240,.18)}
.field[data-err] .input{border-color:var(--danger)}
.field .msg{display:none;gap:6px;align-items:center;color:var(--danger);font-size:var(--t-small)}
.field[data-err] .msg{display:flex}
fieldset.field{border:0;margin:0;padding:0}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
@media (max-width:520px){.choices{grid-template-columns:1fr}}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.choice span{display:flex;gap:10px;align-items:center;min-height:52px;padding:10px 14px;border:1px solid var(--line-control);border-radius:var(--r-control);background:var(--ink-950);font-size:var(--t-small);transition:border-color var(--t-base) var(--ease-out),background var(--t-base) var(--ease-out)}
.choice span i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--c);flex:none;transition:background var(--t-base) var(--ease-out)}
.choice input:checked+span{border-color:var(--c);background:color-mix(in srgb,var(--c) 8%,var(--ink-950))}
.choice input:checked+span i{background:var(--c)}
.choice input:focus-visible+span{outline:2px solid var(--ch1);outline-offset:2px}
.form-status{border:1px solid var(--line-strong);border-radius:8px;padding:var(--s4);background:var(--ink-850);font-size:var(--t-small)}
.form-status[data-kind="ok"]{border-color:var(--ch4)}

.diagram-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.diagram-scroll>div{padding:var(--s4)}
@media (max-width:760px){.diagram-scroll>div{min-width:820px}.diagram-hint{display:block!important}}
@media (max-width:700px){.plate-lbl{display:none}}

/* form hardening */
.field-hint{display:flex;justify-content:space-between;gap:var(--s4);align-items:baseline}
.field-hint .count{flex:none;text-transform:none;letter-spacing:0}
.field-hint .count[data-over]{color:var(--danger)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status ul{margin:var(--s2) 0 0;padding-left:1.1em;display:grid;gap:4px}
.form-status a{color:var(--ch1)}
.btn[aria-busy="true"]{cursor:progress;opacity:.85}
.input,.field,.form-row>*{min-width:0}
.form-row{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.form-row{grid-template-columns:minmax(0,1fr)}}
/* long words never push the page wider */
h1,h2,h3,.lede,.statement{overflow-wrap:break-word;hyphens:manual}
@media (max-width:480px){.hero h1,.page-head h1,.close h2{overflow-wrap:anywhere}}
/* no-JS: show the navigation links instead of a menu button that cannot open */
html:not(.js) .menu-btn{display:none!important}
@media (max-width:879px){html:not(.js) .site-header .wrap{flex-wrap:wrap;padding-block:8px}html:not(.js) .nav ul{display:flex;flex-wrap:wrap}html:not(.js) .nav a.nl{min-height:40px;padding:0 10px}}
.price-row>*,.sticky-card>*,.ch-row>*,.facts li>*,.timeline li>*,.work-meta>*{min-width:0;overflow-wrap:anywhere}
@media (max-width:480px){.btn{white-space:normal;text-align:center;line-height:1.25;padding-block:10px}.link-arrow{white-space:normal}}
.mono,code,.copy-line .mono{overflow-wrap:anywhere}
.foot-grid>*,.section-head>*,.two-col>*,.founder>*,.files li>*,.deliv a>*,.pages>*{min-width:0}
.files a{flex-wrap:wrap}
.check-list li>*,.svc-grid>section>*,.rules li>*{min-width:0;overflow-wrap:anywhere}
.concept-note,.foot-base>*{overflow-wrap:anywhere;min-width:0}

/* ===== Adapt: input-aware sizing ===== */
@media (max-width:1000px){.sticky-card{position:static}}
a,button,summary,label,select{-webkit-tap-highlight-color:rgba(60,227,240,.16)}
/* Touch: every control reaches 44px; links in running text are exempt. */
@media (pointer:coarse){
  .site-footer ul a,.files a,.link-arrow,.crumbs a{min-height:44px;display:inline-flex;align-items:center}
  .site-footer ul{gap:0}
  .btn-copy{min-height:44px;padding-inline:14px}
  .btn-sm{min-height:48px}
  .foot-logo{min-height:48px}
  .spec-table a{display:inline-flex;align-items:center;min-height:44px}
  .crumbs li{display:flex;align-items:center}
}
.foot-logo{display:inline-flex;align-items:center;min-height:44px;color:var(--fg)}
/* Touch feedback replaces hover on devices that cannot hover. */
@media (hover:none){
  .strip a:active,.work-card:active,.post:active,.deliv a:active,.pg-group a:active,.readout-strip a:active{background:var(--ink-850)}
  .work-card:active,.deliv a:active{border-color:var(--ch1)}
  .btn-primary:active{background:#7AEDF6}
  .btn-secondary:active{border-color:var(--ch1);color:var(--ch1)}
}
/* Tables become label/value cards on phones. */
@media (max-width:639px){
  table.stack{min-width:0!important;border-top:1px solid var(--line)}
  table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.stack,table.stack tbody,table.stack tr{display:block;width:100%}
  table.stack tr{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
  table.stack td{display:grid;grid-template-columns:minmax(6.5rem,34%) minmax(0,1fr);gap:var(--s3);padding:4px 0!important;border:0!important;white-space:normal!important;text-align:left!important}
  table.stack td::before{content:attr(data-label);font-family:var(--f-mono);font-stretch:90%;font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-subtle);padding-top:.3em}
  table.stack td[data-label=""]{grid-template-columns:1fr}
  table.stack td[data-label=""]::before{display:none}
  table.stack td>*{justify-self:start;max-width:100%}
  .stack-wrap{overflow:visible!important}
}

/* ===== Typeset ===== */
.small{font-size:var(--t-small)}
.t-item{font-size:var(--t-item);font-weight:600;font-stretch:108%;line-height:1.35;letter-spacing:0}
.spec-table{font-size:var(--t-small)}
/* Small secondary text on near-black gets one notch more weight so it doesn't thin out. */
.versus .labels p,.ch-row ul,.facts li,.work-card p,.price-row .desc,.steps p,.timeline li,.post p,.concept-note,.check-list li,.field .hint,.field .msg,.form-status,.portrait .ph,.choice span{font-weight:var(--w-small)}
/* Mono never inherits heading weight or width */
.readout,.mono,.ch-tag,code,.id,.timeline .y,.amt,.ch-row .price,.price-row .amt,.price-row .time,.sticky-card .amt,.meta,.k,.strip .p,.ch-row .id-inline,.facts li span:first-child,.popular,.steps .n,.btn-copy,.site-footer h2,.crumbs,table.stack td::before{font-weight:400}
svg [font-family*="Martian"]{font-stretch:90%}
/* Below 400px: narrow the display width before any word would have to break */
@media (max-width:399px){
  :root{--t-display:clamp(2.5rem,12.5vw,3.25rem);--t-page:clamp(2.25rem,11.5vw,2.5rem)}
  .hero h1,.page-head h1,.close h2,.ov-hero h1{font-stretch:112%}
}