/* =============================================================================
   Aixly — blueprint.css  ·  the blueprint design (v1)
   -----------------------------------------------------------------------------
   The look Brent designed the brand around: drafting paper. His family's
   hosiery mills drew their patterns on lined blueprint paper (06-25 call), and
   the app itself sits on the same grid. This version uses the product's own
   screens only, framed like figures on a drawing sheet, with no photographs.

   Provenance of every token:
     type     IBM Plex Sans + Mono   the platform's own faces; Mono only for
                                     numbers and small reference labels
     paper    #eef2f7 + 40px grid    the app's background, Brent's drafting sheet
     navy     #15223e                brand ink, the app's sidebar
     blue     #1e57bd                brand blue, the app's primary action
     frames   1px rule + corner ticks  registration marks on a drawing
     radius   2px                    the app's square corners
     width    1200px                 one content width on every page
   ============================================================================= */

@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --white:#f7f9fc; --paper:#eef2f7; --steel-50:#e7ecf3; --steel-100:#e1e7f0; --steel-200:#d5dce7; --steel-300:#b9c4d4;
  --steel-500:#55617a; --steel-700:#33405a;
  --navy-950:#0b1427; --navy-900:#0f1b33; --navy-800:#15223e;
  --blue-700:#163f8c; --blue-600:#1e57bd; --blue-100:#e3ebfa;
  --tape-400:#f2c233; --red-700:#a5281a;

  --bg:var(--paper); --bg-alt:var(--steel-50); --panel:var(--white); --bg-dark:var(--navy-900);
  --text:var(--steel-700); --heading:var(--navy-800); --muted:var(--steel-500);
  --text-inv:#e6ebf5; --muted-inv:#aab5cb;
  --rule:var(--steel-200); --rule-strong:var(--steel-300); --rule-inv:rgba(230,235,245,.16);
  --accent:var(--blue-600); --accent-hover:var(--blue-700); --accent-soft:var(--blue-100);
  --mark:var(--tape-400); --danger:var(--red-700);

  --display:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --grid:rgba(30,87,189,.06);
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --radius:4px;
  --control-min:44px;
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-6:48px;
  --layout-gap:clamp(24px,4vw,48px);
  --max:1200px;
  --gutter:clamp(20px,4vw,40px);
  --section-y:clamp(48px,6vw,80px);
  --nav-h:68px;
  --shadow:0 1px 2px rgba(15,27,51,.06),0 24px 48px -24px rgba(15,27,51,.32);
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:40px 40px;color:var(--text);font-family:var(--sans);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:#fff}
a{color:inherit}
img{max-width:100%;display:block;height:auto}
svg,video{max-width:100%}
.wrap > *,[class*="grid"] > *,[class*="inner"] > *{min-width:0}
h1,h2,h3,p,dd,a{overflow-wrap:anywhere}
picture{display:block}
h1,h2,h3{color:var(--heading);font-family:var(--display);font-weight:600;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(40px,5vw,68px);line-height:1.04}
h2{font-size:clamp(30px,3.2vw,46px);line-height:1.1}
h3{font-size:21px;line-height:1.25;letter-spacing:-.01em}
p{text-wrap:pretty}
ul,ol{list-style:none}
button{font:inherit;color:inherit}
[hidden]{display:none !important}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#fff;padding:12px 18px;font-weight:600}
.skip:focus{left:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.text-link{display:inline-block;margin-top:22px;font-weight:600;color:var(--accent);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.text-link:hover{color:var(--accent-hover)}

/* Screens get one consistent frame. */
.frame{position:relative}
.frame picture{position:relative;padding:0;background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.frame img{width:100%;background:var(--panel)}
.frame figcaption{margin-top:12px;font-family:var(--mono);font-size:13px;color:var(--muted)}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:var(--radius);
  border:1px solid transparent;font-size:17px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-sm{min-height:var(--control-min);padding:0 16px;font-size:15px}

/* ── Nav ───────────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:rgba(238,242,247,.95);backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--rule);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav.tucked{transform:translateY(-100%)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:24px}
.brand{display:inline-flex;color:var(--heading)}
.logo{height:32px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links > a:not(.btn),.nav-menu-btn{font-size:15px;font-weight:500;text-decoration:none;color:var(--heading);background:none;border:none;cursor:pointer;padding:6px 0}
.nav-links > a:not(.btn):hover,.nav-menu-btn:hover{color:var(--accent)}
.nav-links > a[aria-current=page]{color:var(--accent)}
.nav-links a.btn{color:#fff}
.nav-menu-btn::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.nav-menu-btn[aria-expanded=true]::after{transform:translateY(1px) rotate(-135deg)}
.nav-signin{padding-left:26px;border-left:1px solid var(--rule-strong)}
.nav-platform{position:static}
.nav-inner{position:relative}
.platform-menu{position:absolute;top:calc(100% + 16px);right:0;width:min(720px,calc(100vw - 2 * var(--gutter)));background:var(--panel);border:1px solid var(--rule);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
.platform-menu ul{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px}
.platform-menu a{display:block;padding:12px 14px;border-radius:var(--radius);text-decoration:none}
.platform-menu a:hover,.platform-menu a[aria-current=page]{background:var(--bg-alt)}
.pm-name{display:block;font-weight:600;color:var(--heading);font-size:16px}
.pm-desc{display:block;font-size:14px;color:var(--muted);line-height:1.4;margin-top:2px}
.nav-toggle{display:none;background:none;border:1px solid var(--rule-strong);border-radius:var(--radius);width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;color:var(--heading)}
.nav-toggle span{width:18px;height:2px;background:currentColor;position:relative;display:block}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}

/* ── Home: hero ────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden}
.hero.has-photo{min-height:min(calc(100svh - var(--nav-h)),820px);display:flex;align-items:flex-end;background:var(--navy-950)}
.hero-photo{position:absolute;inset:0}
.hero-photo picture,.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,20,39,.9) 0%,rgba(11,20,39,.72) 38%,rgba(11,20,39,.2) 72%),linear-gradient(0deg,rgba(11,20,39,.5),rgba(11,20,39,0) 40%)}
.hero-grid{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.hero-shot{padding:clamp(40px,6vw,88px) 0}
.hero-copy{max-width:600px;padding:clamp(56px,7vw,104px) 0}
.hero.has-photo h1{color:#fff}
.hero-sub{margin-top:22px;font-size:clamp(18px,1.5vw,21px);max-width:34em}
.hero.has-photo .hero-sub{color:var(--text-inv)}
.hero-form{margin-top:32px}
.hf-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.hf-row .btn{grid-column:1 / -1;justify-self:start}
.hf-field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:var(--heading)}
.hero.has-photo .hf-field label{color:#fff}
.hf-field input{width:100%;min-height:50px;padding:0 14px;border-radius:var(--radius);border:1px solid var(--rule-strong);background:#fff;color:var(--heading);font:inherit;font-size:17px}
.hf-field input::placeholder{color:var(--muted)}
.hf-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(30,87,189,.25)}
.hf-field input.err{border-color:var(--danger);background:#fdf3f2}
.hf-note{margin-top:12px;font-size:15px;color:var(--muted)}
.hero.has-photo .hf-note,.hero.has-photo .hero-confirm{color:var(--text-inv)}
.confirm{margin-top:10px;font-weight:600;min-height:1.4em}
.load{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.l1{animation-delay:.05s}.l2{animation-delay:.2s}.l3{animation-delay:.35s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ── Home: problem ─────────────────────────────────────────────────────────── */
.problem{padding:var(--section-y) 0}
.problem-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,72px);align-items:center}
.problem-text p{margin-top:18px}
.problem-photo img{border-radius:var(--radius);box-shadow:var(--shadow)}
.problem-answer{font-family:var(--display);font-weight:500;padding:28px 0 28px 28px;border-left:3px solid var(--accent);font-size:clamp(24px,2.4vw,34px);line-height:1.25;color:var(--heading)}

/* ── Home: the work order, step by step (pinned on wide screens) ──────────── */
.flow{background:var(--panel);position:relative;border:0}
.flow-stage{padding:var(--section-y) 0}
.flow-list{margin-top:36px}
.flow-step{position:relative;display:grid;grid-template-columns:44px 1fr;gap:4px 18px;padding-bottom:34px}
.flow-step:not(:last-child)::before{content:"";position:absolute;left:21px;top:46px;bottom:4px;width:2px;background:var(--rule-strong)}
.flow-step h3{margin-top:8px}
.flow-step p{margin-top:6px;font-size:17px}
.flow-more{display:inline-block;margin-top:8px;font-size:15px;font-weight:600;color:var(--accent);text-decoration:none;background:none;border:0;cursor:pointer}
.flow-more:hover{text-decoration:underline}
.flow-shot-inline{grid-column:2;margin-top:16px}
.flow-visual{display:none}
.flow.pinned{height:calc(var(--steps, 6) * 70vh + 100vh)}
.flow.pinned .flow-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding:0}
.flow.pinned .flow-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;width:100%}
.flow.pinned .flow-list{margin-top:26px}
.flow.pinned .flow-step{padding-bottom:18px;cursor:pointer}
.flow.pinned .flow-shot-inline{display:none}
.flow.pinned .flow-body{opacity:.35;transition:opacity .35s}
.flow.pinned .flow-step p,.flow.pinned .flow-more{max-height:0;overflow:hidden;opacity:0;margin-top:0;transition:max-height .45s,opacity .35s,margin-top .35s}
.flow.pinned .flow-step.on .flow-body{opacity:1}
.flow.pinned .flow-step.on p{max-height:9em;opacity:1;margin-top:6px}
.flow.pinned .flow-step.on .flow-more{max-height:2em;opacity:1;margin-top:8px}
.flow.pinned .flow-visual{display:block;position:relative;aspect-ratio:16/11}
.flow-visual .flow-shot{position:absolute;inset:0;display:flex;align-items:center;opacity:0;transform:translateY(14px);transition:opacity .45s,transform .6s cubic-bezier(.2,.7,.2,1)}
.flow-visual .flow-shot.on{opacity:1;transform:none}
.flow-visual .flow-shot picture{width:100%}

/* ── Home: setup ───────────────────────────────────────────────────────────── */
.setup{padding:var(--section-y) 0}
.setup-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:center}
.setup-text p{margin-top:18px}
.setup-list{margin-top:18px;counter-reset:need}
.setup-list li{counter-increment:need;position:relative;padding:10px 0 10px 40px;border-top:1px solid var(--rule);font-weight:600;color:var(--heading)}
.setup-list li:last-child{border-bottom:1px solid var(--rule)}
.setup-list li::before{content:counter(need);font-family:var(--mono);position:absolute;left:0;top:10px;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:14px;display:flex;align-items:center;justify-content:center}

/* ── Home: the platform index ──────────────────────────────────────────────── */
.platform{padding:var(--section-y) 0;background:var(--panel);border:0}
.platform-list{margin-top:32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px}
.platform-list a{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:18px 0;border-top:1px solid var(--rule-strong);text-decoration:none}
.pl-name{font-family:var(--display);font-weight:600;font-size:20px;color:var(--heading)}
.pl-desc{grid-column:1;font-size:16px;color:var(--muted)}
.pl-go{grid-row:1 / span 2;grid-column:2;align-self:center;color:var(--accent);font-size:20px;transition:transform .2s}
.platform-list a:hover .pl-name{color:var(--accent)}
.platform-list a:hover .pl-go{transform:translateX(4px)}

/* ── Home: fit ─────────────────────────────────────────────────────────────── */
.fit{padding:var(--section-y) 0;position:relative}
.fit:not(.has-photo) .fit-inner{border-left:3px solid var(--accent);padding-left:clamp(20px,3vw,40px)}
.fit.has-photo{background:var(--navy-950);min-height:70vh;display:flex;align-items:center;overflow:hidden}
.fit-photo{position:absolute;inset:0}
.fit-photo picture,.fit-photo img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.fit-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,20,39,.94) 0%,rgba(11,20,39,.82) 45%,rgba(11,20,39,.3) 100%)}
.fit-inner{position:relative;width:100%}
.fit-inner > *{max-width:640px}
.fit-inner p{margin-top:18px}
.fit.has-photo h2{color:#fff}
.fit.has-photo p{color:var(--text-inv)}

/* ── FAQ ───────────────────────────────────────────────────────────────────── */
.faq{padding:var(--section-y) 0}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--layout-gap);align-items:start}
.faq-list details{border-bottom:1px solid var(--rule-strong)}
.faq-list details:first-child{border-top:1px solid var(--rule-strong)}
.faq-list{padding:0}
.faq-list details:first-child{border-top:none}
.faq-list details:last-child{border-bottom:none}
.faq-list summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;font-weight:600;font-size:18px;color:var(--heading)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;
  background:linear-gradient(var(--accent),var(--accent)) center/14px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) center/2px 14px no-repeat;transition:transform .2s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{padding:0 44px 22px 0;font-size:17px}

/* ── Closing ask ───────────────────────────────────────────────────────────── */
.cta{background-color:var(--bg-dark);background-image:linear-gradient(rgba(157,186,242,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(157,186,242,.07) 1px,transparent 1px);background-size:40px 40px;color:var(--text-inv);padding:var(--section-y) 0}
.cta-inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--layout-gap);align-items:end}
.cta h2{color:#fff}
.capture{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}
.capture input[type=email]{flex:1;min-width:240px;min-height:52px;padding:0 14px;border-radius:var(--radius);border:1px solid rgba(230,235,245,.35);background:rgba(255,255,255,.07);color:#fff;font:inherit;font-size:17px}
.capture input[type=email]::placeholder{color:var(--muted-inv)}
.capture input[type=email]:focus{outline:none;border-color:#9dbaf2}
.capture input[type=email].err{border-color:#ff9f95}
.capture .btn{min-height:52px}
.cta .confirm{color:#fff}
.cap-note{font-size:15px;color:var(--muted-inv)}

/* ── Feature pages ─────────────────────────────────────────────────────────── */
.pg-hero{padding-top:clamp(40px,6vw,80px)}
.crumbs{font-family:var(--mono);font-size:13px;color:var(--muted)}
.crumbs a{color:var(--accent);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.pg-hero h1{margin-top:14px;max-width:16em}
.pg-lede{margin-top:20px;font-size:clamp(18px,1.5vw,21px);max-width:38em}
.pg-photo{margin-top:clamp(36px,5vw,64px);height:clamp(280px,42vw,560px);position:relative;overflow:hidden}
.pg-photo picture,.pg-photo img{width:100%;height:100%;object-fit:cover}
.pg-shot{margin-top:clamp(36px,5vw,56px)}
.pg-shot.over-photo{position:relative;margin-top:calc(-1 * clamp(120px,14vw,220px))}
.pg-sec{padding:clamp(48px,6vw,88px) 0 0}
.pg-next{margin-top:var(--section-y)}
.pg-sec-inner{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--layout-gap);align-items:start}
.pg-sec-text{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--layout-gap);align-items:start}
.pg-sec-text h2{font-size:clamp(24px,2.2vw,32px)}
.pg-sec-body > * + *{margin-top:16px}
.pg-sec-shot{grid-column:2;margin-top:12px}
.points div{display:grid;grid-template-columns:minmax(0,148px) minmax(0,1fr);gap:4px 24px;padding:14px 0;border-top:1px solid var(--rule)}
.points div:last-child{border-bottom:1px solid var(--rule)}
.points dt{font-weight:600;color:var(--heading)}
.points div{padding-left:4px}
.pg-next{background:var(--panel);border-top:1px solid var(--rule-strong)}
.pg-next a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 24px;align-items:baseline;padding:34px 0;text-decoration:none}
.pg-next-name{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.4vw,34px);color:var(--heading)}
.pg-next-desc{color:var(--muted);font-size:16px}
.pg-next a:hover .pg-next-name{color:var(--accent)}

/* ── Footer ────────────────────────────────────────────────────────────────── */
body > footer{background:var(--navy-950);color:var(--muted-inv)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:32px;padding-bottom:32px}
.foot-brand{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.foot-brand a{color:#fff;display:inline-flex}
.foot-brand .logo{height:26px}
.foot-tag{font-size:14px}
.foot-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.foot-links{display:flex;gap:20px}
.foot-links button{background:none;border:none;cursor:pointer;color:var(--text-inv);font-size:14px;padding:4px 0}
.foot-links button:hover{color:#fff}
.meta{font-size:13px}

/* ── Legal dialogs (display only inside [open]; see CLAUDE.md) ─────────────── */
.modal{border:1px solid var(--rule-strong);border-radius:var(--radius);background:#fff;color:var(--text);max-width:760px;width:calc(100% - 32px);max-height:84vh;padding:0;overflow:hidden;margin:auto}
.modal[open]{display:flex;flex-direction:column}
.modal::backdrop{background:rgba(15,27,51,.6)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--rule);flex:0 0 auto}
.modal-head h2{font-size:21px}
.modal-close{background:none;border:1px solid var(--rule-strong);border-radius:var(--radius);width:var(--control-min);height:var(--control-min);flex:none;cursor:pointer}
.modal-body{padding:8px 24px 26px;overflow-y:auto}
.modal-body h3{font-size:15px;margin:20px 0 7px;font-family:var(--sans)}
.modal-body p{font-size:15px;margin-bottom:10px}
.modal-body .eff{color:var(--muted);font-size:13px}

.notfound{padding:var(--section-y) 0;min-height:60vh}
.notfound p{margin-top:18px;max-width:34em}
.notfound .hero-cta{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:28px}
.notfound .btn-quiet{color:var(--accent);font-weight:600}

/* The blueprint answer inks in on scroll */
/* ── Scroll ink (JS adds .ink-on; without it the text is fully inked) ─────── */
.ink-on .ink-w{color:rgba(21,34,62,.18);transition:color .25s}
.ink-on .ink-w.lit{color:var(--heading)}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .nav-links{gap:18px}
  .nav-signin{padding-left:18px}
}
@media (max-width:960px){
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--rule);padding:8px var(--gutter) 22px;max-height:calc(100vh - var(--nav-h));overflow:auto}
  .nav-links.open > a,.nav-links.open .nav-menu-btn{padding:12px 0;font-size:17px;text-align:left;width:100%}
  .nav-links.open .nav-signin{padding-left:0;border-left:none}
  .nav-links.open .btn{margin-top:12px}
  .nav-toggle{display:inline-flex}
  .platform-menu{position:static;width:auto;border:none;box-shadow:none;padding:0 0 8px}
  .platform-menu ul{grid-template-columns:1fr}
  .platform-menu a{padding:10px 0}

  .problem-grid,.setup-grid,.faq-grid,.cta-inner,.hero-grid{grid-template-columns:1fr}
  .hero-grid{gap:0}
  .hero-shot{padding-top:0}
  .platform-list{grid-template-columns:1fr}
  .pg-sec-inner,.pg-sec-text{grid-template-columns:1fr}
  .pg-sec-shot{grid-column:1}
  .pg-next a{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:17px}
  .hf-row{grid-template-columns:1fr}
  .hf-row .btn{justify-self:stretch}
  .points div{grid-template-columns:1fr}
  .capture input[type=email]{min-width:0;width:100%}
  .capture .btn{width:100%}
  .foot{flex-direction:column;align-items:flex-start}
  .foot-right{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}
@media print{.nav{position:static}}

/* ── Section boundaries ────────────────────────────────────────────────────────
   On one continuous grid, neighbouring sections read as one block with a hole
   in it. Every home section is its own band, alternating between the drafting
   grid and the plain panel, with a ruled edge where they meet. */
.home > section{border-top:none}
.home > .hero{border-top:none}
.home > .problem,.home > .setup,.home > .fit,.home > .cta{background-color:var(--panel);background-image:none}
.home > .flow,.home > .platform,.home > .faq{background-color:transparent;border-bottom:none}
.home > .cta{background-color:var(--bg-dark);background-image:linear-gradient(rgba(157,186,242,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(157,186,242,.07) 1px,transparent 1px)}
.hero-copy{padding:clamp(48px,6vw,88px) 0}
.hero-shot{padding:clamp(32px,5vw,72px) 0}
.problem-grid,.setup-grid{align-items:center}
.fit{padding:var(--section-y) 0}
.fit:not(.has-photo) .fit-inner{border-left:none;padding-left:var(--gutter)}
.fit:not(.has-photo) .fit-inner > *{max-width:760px;border-left:3px solid var(--accent);padding-left:clamp(20px,3vw,32px);margin:0}
.fit:not(.has-photo) .fit-inner > p{padding-top:16px}

/* Feature pages: each section is ruled off from the one before it. */
.pg-sec + .pg-sec .pg-sec-text{border-top:1px solid var(--rule);padding-top:var(--space-4)}
.pg-sec{padding-top:var(--section-y)}
.pg-hero{border-bottom:0;padding-bottom:clamp(40px,5vw,64px);background-color:var(--panel);background-image:none}
.pg-shot.over-photo{margin-top:clamp(36px,5vw,56px)}

/* Direct demo requests use the existing capture form on both backgrounds. */
.demo-request label,.demo-request .confirm{flex-basis:100%}
.demo-request input[type=email]{min-width:0}
.pv-demo{padding-block:24px}
.pv-demo .capture input[type=email]{background:var(--bg);color:var(--text);border:1px solid var(--muted)}
.pv-demo .capture input[type=email]::placeholder{color:var(--muted)}
.pv-demo .capture input[type=email]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.customer-logo{display:block;max-width:100%;height:auto;margin-block:16px}

/* Launch: the recommendation is the entrance; the sample is the visual hook. */
.launch-hero{
  --heading:var(--text-inv); --text:var(--text-inv); --muted:var(--muted-inv);
  background-color:var(--bg-dark);color:var(--text);
  background-image:radial-gradient(ellipse at 75% 15%,rgba(30,87,189,.3),transparent 60%),linear-gradient(var(--rule-inv) 1px,transparent 1px),linear-gradient(90deg,var(--rule-inv) 1px,transparent 1px);
  background-size:auto,80px 80px,80px 80px;padding-bottom:var(--section-y);
}
.launch-hero .hero-grid{display:block}
.launch-hero .hero-copy{max-width:none;padding:clamp(40px,5vw,72px) 0 var(--space-4)}
.launch-hero h1{font-size:clamp(40px,6.2vw,80px);letter-spacing:-.045em;line-height:1.04;max-width:none}
.launch-hero h1 span{display:block}
.launch-hero h1 span + span{color:var(--mark)}
.launch-hero .hero-sub{max-width:none;margin-top:var(--space-3)}
.launch-hero .hero-form{margin-top:var(--space-3);max-width:960px}
.launch-hero .hf-row{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;align-items:end;gap:var(--space-2)}
.launch-hero .hf-row .btn{grid-column:auto;min-height:54px}
.launch-hero .hf-field{min-width:0}
.launch-hero .hf-field input{min-width:0;min-height:54px;color:var(--navy-800);background:var(--panel)}
.launch-hero .hf-field input::placeholder{color:var(--steel-500)}
.launch-hero .hf-field label{color:var(--text-inv)}
.launch-hero .hf-note{font-size:14px;margin-top:var(--space-1)}
.launch-hero :focus-visible{outline-color:var(--mark)}
.launch-hero .hero-confirm:empty{display:none}
.sample-heading{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-2)}
.sample-heading h2{font-size:20px;letter-spacing:-.01em}
.sample-heading p{font-size:14px;color:var(--muted)}
.sample-floor .mock{--heading:var(--m-ink);--muted:var(--m-text-2);box-shadow:0 24px 64px rgba(0,0,0,.3);border-radius:var(--radius)}
.sample-floor .mock-detail{--heading:var(--navy-800);--text:var(--steel-700);color:var(--text)}
.flow-stage.wrap{padding:var(--section-y) var(--gutter)}
.flow-hint{margin-top:var(--space-2);color:var(--muted)}
.flow-detail{border-bottom:1px solid var(--rule)}
.flow-detail summary{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) 0;cursor:pointer;list-style:none}
.flow-detail summary::-webkit-details-marker{display:none}
.flow-detail summary::after{content:'+';margin-left:auto;font-size:24px;color:var(--accent)}
.flow-detail[open] summary::after{content:'−'}
.flow-detail summary h3{flex:1;min-width:0}
.flow-detail-body{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--layout-gap);align-items:start;padding-bottom:var(--space-4)}
.flow-detail-body p{font-size:17px}
.foot-links button{min-height:var(--control-min)}
.btn{max-width:100%;text-align:center;padding-block:10px}
@media (max-width:960px){
  .launch-hero .hf-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .launch-hero .hf-row .btn{grid-column:1 / -1;justify-self:start}
  .sample-heading{flex-direction:column;gap:var(--space-1)}
  .flow-detail-body{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .launch-hero .hf-row{grid-template-columns:minmax(0,1fr);gap:12px}
  .launch-hero .hf-row .btn{justify-self:stretch}
  .launch-hero h1{font-size:clamp(36px,10.7vw,56px)}
  .launch-hero .hero-sub{font-size:17px}
  .flow-detail summary h3{font-size:19px}
}