/* self-hosted type (SIL OFL). One latin variable-weight file per family, the same bytes Google Fonts served. */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/space-grotesk-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  /* color, DARK-ONLY. Dark is the single palette; there is no light mode. */
  --canvas:#0f0f0f; --panel:#181818; --ink:#f1f1f1; --sec:#aaaaaa; --ter:#8a8a8a;
  --hair:#2a2a2a; --divider:#242424;
  --field-line:#757575;  /* interactive-control boundary (inputs, menu button): clears 1.4.11 non-text on canvas */
  --red-mark:#d53c2d;   /* LWH BRAND RED, exact kit value. Every fill and graphic: the badge, buttons, chart bars, the focus ring, the h1 accent */
  --red-ink:#ff4438;    /* red TEXT under 24px only (eyebrows, inline links, errors, chips): the kit red fails 4.5:1 as small text on this canvas */
  --red-deep:#c0362a;   /* button hover and pressed state, a step deeper than the kit red */
  --red-soft:#241413;   /* red tint background for chips */
  /* type scale, nine named steps, weight ceiling 800 */
  --font-display:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --fs-display:clamp(2.5rem,6vw,4rem);
  --fs-h1:clamp(2rem,4.5vw,3rem);
  --fs-h2:clamp(1.6rem,3vw,2.15rem);
  --fs-h3:1.25rem;
  --fs-lead:clamp(1.14rem,2vw,1.3rem);
  --fs-body:1.0625rem;
  --fs-small:.9375rem;
  --fs-eyebrow:.8rem;
  --fs-micro:.75rem;
  /* spacing, 8px base + one 4px half-step */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:48px; --space-7:64px; --space-8:96px; --space-9:128px;
  /* the one container */
  --container:1080px;
  /* radius: inner = outer - padding (concentric) */
  --r-card:14px; --r-inner:8px; --r-input:10px;
  color-scheme:dark;
}

*{box-sizing:border-box}
/* the hidden attribute always hides, even where an author display rule (.form{display:grid}, for one) would
   otherwise beat the UA sheet. The until-found value is the one exception, so find-in-page can still open it. */
[hidden]:not([hidden="until-found" i]){display:none!important}
/* the Pause motion switch (footer button, stored as lwh-motion=off): the inline head script sets data-motion="off"
   on <html> before first paint, and this stops every CSS keyframe and transition the reduced-motion queries miss. */
:root[data-motion="off"] *,:root[data-motion="off"] *::before,:root[data-motion="off"] *::after{animation:none!important;transition:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--canvas);color:var(--ink);overflow-x:hidden;
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;letter-spacing:-.006em}
body.locked{overflow:hidden}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:700;
  line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
img,svg{display:block}
ul{margin:0}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
::selection{background:var(--red-mark);color:#fff}
:focus-visible{outline:2px solid var(--red-mark);outline-offset:3px;border-radius:3px}

/* ONE container, ONE left edge, everywhere */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:16px}
@media(min-width:560px){.container{padding-inline:24px}}
@media(min-width:960px){.container{padding-inline:40px}}

/* the section spine: one vertical rhythm token, identical on every page */
.band{padding-block:clamp(44px,6vw,76px);position:relative}
.band + .band{border-top:1px solid var(--divider)}
/* panel bands are translucent so the site-wide animated background drifts through them.
   color-mix keeps the exact --panel hue; the low alpha never changes any text contrast pair. */
.band.panel-bg{background:color-mix(in srgb, var(--panel) 78%, transparent)}
@supports not (background:color-mix(in srgb,red,blue)){.band.panel-bg{background:var(--panel)}}

.eyebrow{font-family:var(--font-display);font-weight:700;font-size:var(--fs-eyebrow);
  letter-spacing:.02em;color:var(--red-ink);margin-bottom:var(--space-4)}
.h1{font-size:var(--fs-h1);max-width:20ch;margin-bottom:var(--space-4)}
.h2{font-size:var(--fs-h2);max-width:20ch;margin-bottom:var(--space-4)}
.lead{font-size:var(--fs-lead);color:var(--sec);max-width:42ch;line-height:1.5;font-weight:400;
  margin-bottom:var(--space-6)}
.body{font-size:var(--fs-body);color:var(--sec);max-width:65ch;margin-bottom:var(--space-4)}
.body:last-child{margin-bottom:0}
.body b{color:var(--ink);font-weight:600}
.red{color:var(--red-ink)}
h1 .red{color:var(--red-mark)}

/* CTA */
.btn{display:inline-block;font-family:var(--font-display);font-weight:700;background:var(--red-mark);
  color:#fff;border:0;cursor:pointer;border-radius:100px;padding:var(--space-4) var(--space-5);font-size:var(--fs-body);
  line-height:1.1;text-align:center}
.btn:hover{background:var(--red-deep)}
.btn.sm{padding:var(--space-2) var(--space-4);font-size:var(--fs-small)}
.ghost{font-family:var(--font-body);font-weight:600;font-size:var(--fs-small);color:var(--sec)}
.ghost:hover{color:var(--ink)}
.cta-wrap{margin-top:var(--space-6);display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}

/* the mark: the real LWH interlocked badge, rebuilt from the kit's three white letter paths on a brand-red rounded square.
   Complete and correct at rest: the badge and all three letters render fully opaque with no motion. GSAP layers the
   assemble/hover/pulse ON TOP only when JS is on and reduced-motion is off. The red square is always exactly #d53c2d. */
.mk{width:24px;height:24px;flex:none;display:block;border-radius:6px}
.mk .sq{fill:#d53c2d}
.mk .ltr{fill:#fff;transform-box:fill-box;transform-origin:50% 50%}
.logo:active .mk{transform:scale(.94)}
@media(prefers-reduced-motion:no-preference){.logo .mk{transition:transform .18s cubic-bezier(.2,.7,.3,1)}}

/* skip link */
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:var(--canvas);
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-small);padding:var(--space-3) var(--space-4);border-radius:var(--r-inner);
  transition:top .16s ease}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 10px)}

/* top bar + nav */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--canvas);
  border-bottom:1px solid var(--divider)}
.bar .in{display:flex;align-items:center;justify-content:space-between;height:58px;gap:var(--space-4)}
.logo{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-body);letter-spacing:-.02em}
.nav{display:flex;align-items:center;gap:var(--space-1)}
.nav a{position:relative;font-family:var(--font-body);font-weight:600;font-size:var(--fs-small);color:var(--sec);
  padding:var(--space-2) var(--space-3);border-radius:var(--r-inner)}
.nav a:hover{color:var(--ink)}
/* animated underline: slides in on hover and stays under the current page. Reduced-motion: no transition,
   the underline still shows (scaleX(1) applies with or without the transition), so the current-page cue survives. */
.nav a::after{content:"";position:absolute;left:var(--space-3);right:var(--space-3);bottom:5px;height:2px;
  border-radius:2px;background:var(--red-ink);transform:scaleX(0);transform-origin:left center}
@media(prefers-reduced-motion:no-preference){.nav a::after{transition:transform .22s cubic-bezier(.2,.7,.3,1)}}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.top-cta{font-size:var(--fs-small);padding:var(--space-2) var(--space-4);white-space:nowrap}
.bar .top-cta{min-height:40px;display:inline-flex;align-items:center}
/* nav CTA is a red button with a white label; the extra specificity keeps the generic ".nav a" grey from winning */
.bar .top-cta,.bar a.top-cta{color:#fff;border-radius:100px}
/* the kit lockup: LWH bold ink, Systems medium grey */
.logo .wm b{font-weight:700}.logo .wm .sys{font-weight:500;color:var(--sec)}
/* global ambient particle canvas: a sparse, very low-contrast field of drifting dots behind ALL
   content, site-wide. aria-hidden, pointer-events none. Paused off-tab; one static frame under
   reduced-motion. Calmer on the FAQ route (class hook set by the router). */
.amb{position:fixed;inset:0;z-index:-1;pointer-events:none;width:100%;height:100%;display:block;image-rendering:pixelated}
/* reading pages (About, Get my price, Privacy, Terms): the field fades out over the hero's last 160px and stops there.
   js/app.js sets .amb-hero on <html> and keeps --amb-cut on the hero's bottom edge as the page scrolls. */
.amb-hero .amb{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--amb-cut,100vh) - 160px),transparent var(--amb-cut,100vh));
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--amb-cut,100vh) - 160px),transparent var(--amb-cut,100vh))}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:none;border:1px solid var(--field-line);border-radius:var(--r-input);cursor:pointer;color:var(--ink)}
.menu-btn .bars,.menu-btn .bars::before,.menu-btn .bars::after{
  content:"";display:block;width:18px;height:2px;border-radius:2px;background:currentColor;position:relative}
.menu-btn .bars::before{position:absolute;top:-6px}
.menu-btn .bars::after{position:absolute;top:6px}
/* hamburger morphs to an X when the sheet is open. Reduced-motion: it snaps (still a valid open/close cue). */
@media(prefers-reduced-motion:no-preference){
  .menu-btn .bars,.menu-btn .bars::before,.menu-btn .bars::after{transition:transform .22s ease,opacity .16s ease,background-color .16s ease}
}
.menu-btn[aria-expanded="true"] .bars{background:transparent}
.menu-btn[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}
.sheet{position:fixed;inset:calc(58px + env(safe-area-inset-top,0px)) 0 auto 0;z-index:55;background:var(--canvas);
  border-bottom:1px solid var(--divider);box-shadow:0 20px 40px -28px rgba(0,0,0,.4);
  display:none;padding:var(--space-4) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom,0px))}
.sheet.open{display:block}
.sheet a{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--fs-body);
  padding:var(--space-4) var(--space-2);border-bottom:1px solid var(--hair);color:var(--ink)}
.sheet a[aria-current="page"]{color:var(--red-ink)}
.sheet .btn{display:block;margin-top:var(--space-4);padding:var(--space-4);font-size:var(--fs-body)}
@media(prefers-reduced-motion:no-preference){.sheet.open{animation:drop .18s ease}}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:760px){.nav .lnk,.bar .top-cta{display:none}.menu-btn{display:inline-flex}}

/* the page system: exactly one visible at a time, complete at rest */
.page{display:none}
.page.is-active{display:block}
html.is-loading,html.is-loading a{cursor:progress}
@media(prefers-reduced-motion:no-preference){.page.is-active{animation:pagein .26s ease}}
@keyframes pagein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* hero band */
.hero{padding-top:clamp(40px,6.5vw,88px);padding-bottom:clamp(30px,4.5vw,54px)}
/* display size is the HOME hero only; every interior page h1 falls to --fs-h1 via .h1 (spec 2B/1D) */
#page-home .hero h1{font-size:clamp(2.4rem,4.1vw,3.3rem);max-width:none}   /* 2.4rem floor: at 390px the headline is three lines with no lone word (2.5rem left "nobody" alone) */
.hero .lead{margin-bottom:0}
.hero .cta-wrap{margin-top:var(--space-6)}


/* about prose */
.prose p{color:var(--ink);font-size:var(--fs-lead);line-height:1.62;max-width:65ch;margin-bottom:var(--space-4)}
.prose p.soft{color:var(--sec)}
.prose p b{font-weight:600}
.sign{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:700;font-size:var(--fs-body);margin-top:var(--space-2)}
.sign .mk{width:20px;height:20px}
.sign span{color:var(--ter);font-weight:500;font-size:var(--fs-small)}
.sign .sep{margin-left:calc(-1 * var(--space-2))}
/* narrow phones: the studio line drops under the name (indented past the 20px mark and its gap) instead of
   wrapping both halves into four short lines; the separating dot is hidden there since nothing sits before it */
@media(max-width:480px){.sign{flex-wrap:wrap}.sign>span:last-child{flex-basis:100%;padding-left:28px}.sign .sep{display:none}}

/* faq accordion, hairline */
.qas{border-top:1px solid var(--hair);max-width:68ch}
.qa{border-bottom:1px solid var(--hair)}
.qa-h{margin:0;font-weight:inherit}
.qa-q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);
  background:none;border:0;cursor:pointer;text-align:left;padding:var(--space-5) 0;color:var(--ink);min-height:44px}
.qa-q span.q{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);letter-spacing:-.01em;line-height:1.25}
.qa-ic{flex:none;width:24px;height:24px;position:relative;margin-top:2px}
.qa-ic::before,.qa-ic::after{content:"";position:absolute;left:4px;right:4px;top:11px;height:2px;border-radius:2px;
  background:var(--red-ink);transition:transform .2s ease}
.qa-ic::after{transform:rotate(90deg)}
.qa-q[aria-expanded="true"] .qa-ic::after{transform:rotate(0)}
@media(prefers-reduced-motion:reduce){.qa-ic::before,.qa-ic::after{transition:none}}
.qa-a{max-height:0;overflow:hidden;transition:max-height .26s ease}
@media(prefers-reduced-motion:reduce){.qa-a{transition:none}}
.qa-a p{color:var(--sec);font-size:var(--fs-body);max-width:68ch;padding-bottom:var(--space-5)}
.qa-a a{color:var(--red-ink);font-weight:600}

/* legal pages */
.legal h2{font-size:var(--fs-h3);font-family:var(--font-display);font-weight:700;margin:var(--space-6) 0 var(--space-3)}
.legal p{color:var(--sec);font-size:var(--fs-body);max-width:68ch;margin-bottom:var(--space-3)}
.legal p b{color:var(--ink);font-weight:600}
.legal ul{color:var(--sec);font-size:var(--fs-body);max-width:68ch;margin:0 0 var(--space-3);padding-left:1.2em}
.legal li{margin-bottom:var(--space-2)}
.legal a{color:var(--red-ink);font-weight:600}
/* inline links are underlined at rest, not colour-only (1.4.1) */
.legal a,.qa-a a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.legal .fine{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--hair);color:var(--ter);font-size:var(--fs-small)}

/* contact form */
.form{margin-top:var(--space-6);display:grid;gap:var(--space-4);max-width:560px}
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field label{font-family:var(--font-body);font-weight:600;font-size:var(--fs-small)}
.field label .opt{color:var(--ter);font-weight:500}
.field input,.field textarea{font-family:inherit;font-size:16px;color:var(--ink);
  background:var(--canvas);border:1px solid var(--field-line);border-radius:var(--r-input);padding:var(--space-3) var(--space-4);width:100%}
.field textarea{min-height:118px;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--ter)}
.field input:focus,.field textarea:focus{border-color:var(--red-mark);box-shadow:0 0 0 3px var(--red-soft)}
.field .err{color:var(--red-ink);font-size:var(--fs-small);display:none}
.field.bad .err{display:block}
.field.bad input,.field.bad textarea{border-color:var(--red-ink)}
.hp{position:absolute!important;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0}
.submit{justify-self:start;min-height:44px}
.submit[disabled]{opacity:.6;cursor:default}
.formnote{color:var(--ter);font-size:var(--fs-small)}

.result{display:none;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:var(--space-5);max-width:560px;margin-top:var(--space-6)}
.result.show{display:block}
.result h3{font-family:var(--font-display);font-size:var(--fs-h3);margin-bottom:var(--space-2)}
.result>p{color:var(--sec);font-size:var(--fs-body)}
.result .msg{background:var(--canvas);border:1px solid var(--hair);border-radius:var(--r-input);padding:var(--space-4);
  font-size:var(--fs-small);white-space:pre-wrap;color:var(--sec);margin:var(--space-4) 0;max-height:210px;overflow:auto;line-height:1.5}
.result .row2{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;margin-top:var(--space-2)}
.result .row2 a{font-family:var(--font-display);font-weight:700;color:var(--red-ink)}
.selectable{user-select:all}

/* footer */
footer{border-top:1px solid var(--divider);background:var(--panel);padding-block:var(--space-8) var(--space-6)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--space-5)}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr;gap:var(--space-5)}}
@media(max-width:440px){.fgrid{grid-template-columns:1fr}}
.fcol h3{font-family:var(--font-display);font-weight:700;font-size:var(--fs-eyebrow);letter-spacing:.06em;line-height:1.2;
  text-transform:uppercase;color:var(--ter);margin-bottom:var(--space-4)}
.fcol .logo{margin-bottom:var(--space-3)}
.fcol .tag{color:var(--ter);font-size:var(--fs-small);max-width:32ch;line-height:1.5}
.fcol ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.fcol a{color:var(--sec);font-size:var(--fs-small)}
.fcol a:hover{color:var(--red-ink)}
.fbot{margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:var(--ter);font-size:var(--fs-micro);letter-spacing:.02em}
.fbot .motion{background:none;border:1px solid var(--field-line);border-radius:100px;padding:6px 12px;cursor:pointer;font:inherit;font-weight:600;color:var(--sec);min-height:32px}
.fbot .motion:hover{color:var(--ink);border-color:var(--ink)}

@media(prefers-reduced-motion:no-preference){
  .btn,.btn2,.top-cta,.ghost,.nav a,.qa-q,.fcol a{transition:background .16s,color .16s,border-color .16s,box-shadow .16s}
}

/* ============ v4: density, splits, live demos ============
   The only decorative layer left is the pixel-field canvas (motion.js) plus one static panel wash below.
   The wash interpolates ONLY between --canvas and --panel (contrast-tested surfaces), so no text pair
   changes its AA pass. */
html{background:var(--canvas)}
/* Layer 0: the page wash. Two faint STATIC panel blooms behind all content. Kept static (no scroll
   reactivity): animating a gradient's colour-stop geometry is a paint, not a compositor transform, and
   this is a fixed full-viewport layer, so driving it every scroll frame forced a full-viewport repaint
   on low-end phones. The parallax was barely perceptible. The hairline layer below keeps its cheap
   transform parallax. */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(135% 80% at 50% -18%, var(--panel), transparent 56%),
    radial-gradient(115% 72% at 50% 122%, var(--panel), transparent 52%);}

/* band density: break the single-metronome rhythm */
.band.tight{padding-block:clamp(36px,5vw,56px)}



/* ============ v5: premium hover, hero visual, logo intro, branded loaders, richer how ============ */

/* ---- premium hover micro-motion (compositor-cheap: transform + shadow only) ---- */
@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  .btn{transition:transform .2s cubic-bezier(.2,.7,.3,1),background .16s,box-shadow .2s}
  .btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(213,60,45,.55)}
  .btn:active{transform:translateY(0)}
  .ghost{transition:transform .2s cubic-bezier(.2,.7,.3,1),color .16s}
  .ghost:hover{transform:translateX(2px)}
  .menu-btn{transition:transform .2s cubic-bezier(.2,.7,.3,1),color .16s,border-color .16s}
  .menu-btn:hover{transform:scale(1.06)}
  .fcol a{transition:color .16s,transform .18s}
  .fcol a:hover{transform:translateX(2px)}
  /* FAQ plus-button: the icon grows into a soft red disc on hover */
  .qa-q .qa-ic{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
  .qa-q:hover .qa-ic,.qa-q:focus-visible .qa-ic{transform:scale(1.16)}
  .qa-q .qa-ic::after,.qa-q .qa-ic::before{transition:transform .2s ease,background-color .2s ease}
  /* FAQ question text nudges toward the reader on hover, so the whole row reads as clickable */
  .qa-q span.q{transition:transform .2s cubic-bezier(.2,.7,.3,1),color .16s}
  .qa-q:hover span.q,.qa-q:focus-visible span.q{transform:translateX(3px)}
}
/* text links that previously only changed colour (or nothing) now underline on hover/focus, so every
   inline link has a clear response. Motion-free, so it holds under reduced-motion too. */
.legal a,.qa-a a,.result .row2 a{transition:color .16s}
.legal a:hover,.legal a:focus-visible,.qa-a a:hover,.qa-a a:focus-visible,.result .row2 a:hover,.result .row2 a:focus-visible{text-decoration:underline;text-underline-offset:2px}

/* ---- HERO two-column: words left, live product visual right (fills the old empty half) ---- */
#page-home .hero .hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--space-7);align-items:center}
@media(max-width:900px){#page-home .hero .hero-grid{grid-template-columns:1fr;gap:var(--space-6)}}
.hero-copy{min-width:0}
.hero-visual{min-width:0;position:relative}
@media(max-width:900px){.hero-visual{max-width:480px}}

/* ---- LOGO INTRO overlay: the mark assembles centre-screen on first load, then lifts away ---- */
.intro{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:var(--canvas);opacity:1;pointer-events:none}
.intro[hidden]{display:none}
.intro .intro-mk{width:96px;height:96px;display:block}
.intro .intro-mk .mk{width:96px;height:96px;border-radius:22px}
.intro .intro-word{margin-top:18px;font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;
  color:var(--ink);opacity:0}
.intro .intro-word .sys{font-weight:500;color:var(--sec)}
.intro-stage{display:flex;flex-direction:column;align-items:center}

/* ---- HOW IT WORKS: animated spine + step cards ---- */
.flow{position:relative;max-width:70ch;margin-top:var(--space-4)}
.flow-spine{position:absolute;left:17px;top:8px;bottom:8px;width:2px;background:var(--hair);overflow:hidden}
.flow-spine i{position:absolute;inset:0;background:linear-gradient(var(--red-mark),var(--red-ink));transform:scaleY(0);transform-origin:top;height:100%}
@media(prefers-reduced-motion:no-preference){.flow-spine i{transition:transform 1.1s cubic-bezier(.3,.6,.3,1)}}
.flow-spine.fill i{transform:scaleY(1)}
@media(prefers-reduced-motion:reduce){.flow-spine i{transform:scaleY(1)}}
.flow-step{position:relative;display:grid;grid-template-columns:36px 1fr;gap:var(--space-4);padding-block:var(--space-5)}
.flow-step + .flow-step{border-top:1px solid var(--divider)}
.flow-num{width:36px;height:36px;border-radius:50%;background:var(--canvas);border:2px solid var(--hair);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;
  font-size:1rem;color:var(--sec);z-index:1;transition:border-color .3s ease,color .3s ease,background .3s ease}
.flow-step.lit .flow-num{border-color:var(--red-mark);color:#fff;background:var(--red-mark)}
.flow-step h3{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;margin-bottom:var(--space-2)}
.flow-step p{color:var(--sec);font-size:var(--fs-body);max-width:60ch}
.flow-step .who-tag{margin-top:8px;display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-family:var(--font-display);
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ter)}
.flow-step .who-tag .tag{padding:2px 9px;border-radius:100px;background:var(--panel);border:1px solid var(--hair)}
.flow-step .who-tag .tag.me{color:var(--red-ink);background:var(--red-soft);border-color:transparent}

/* ============ v6: PIXEL-TECH IDENTITY (bold pass). Additive layers only. ============
   The signature is the site-wide animated PIXEL field (canvas #amb-canvas, rewritten in JS).
   These rules give the field room to be felt, add the digital/terminal accents, and protect AA. */

/* CRITICAL: body's own background is opaque and (per CSS paint order) would paint OVER a negative
   z-index canvas, which is exactly why the old animated background was invisible. Make the body
   transparent so html's --canvas is the base colour and the fixed pixel field shows through. */
body{background:transparent}

/* EYEBROWS: uppercase, tracked, with one small solid red square. Nothing blinks. */
.eyebrow{display:inline-flex;align-items:center;gap:9px;text-transform:uppercase;letter-spacing:.16em;
  font-size:var(--fs-micro)}
.eyebrow::before{content:"";width:8px;height:8px;flex:none;background:var(--red-mark);border-radius:1px}

/* HERO headline: a touch more confidence (tighter tracking, optical size), never screen-dominating. */
#page-home .hero h1{letter-spacing:-.03em}
.band.hero h1{letter-spacing:-.035em}
/* READABILITY: behind the CONTENT COLUMN of plain bands, a feathered scrim calms the live field so even
   the lowest-contrast grey text clears AA in both themes, while the field stays BOLD in the margins and
   at the feathered edges. Panel bands already sit on a translucent surface, so they are left alone.
   This is also the owner's ask: "behind dense text keep it calmer." */
.band:not(.panel-bg)>.container{position:relative}
/* horizontal inset stays 0 by default so the scrim never exceeds the container's own width
   (on phones + mid widths the container IS the viewport, so a negative side inset overflowed it
   by 44px and created a horizontal scroll). The margin bleed returns only past 1180px, where the
   1080 container has real gutters to absorb it. */
.band:not(.panel-bg)>.container::before{content:"";position:absolute;inset:-30px 0;z-index:-1;pointer-events:none;border-radius:26px;
  background:radial-gradient(112% 96% at 50% 48%,
    color-mix(in srgb,var(--canvas) 74%, transparent) 0%,
    color-mix(in srgb,var(--canvas) 42%, transparent) 56%,
    transparent 84%)}
@supports not (background:color-mix(in srgb,red,blue)){.band:not(.panel-bg)>.container::before{background:radial-gradient(112% 96% at 50% 48%, var(--canvas), transparent 84%);opacity:.7}}
@media(min-width:1180px){.band:not(.panel-bg)>.container::before{left:-44px;right:-44px}}


/* magnetic buttons: JS sets an inline transform; keep the compositor hint + snappy return. */
@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  .btn{will-change:transform}
  .btn.magnetic{transition:transform .28s cubic-bezier(.2,.7,.3,1),background .16s,box-shadow .2s}
}


/* TEXT SCRIM (2026-10-03). The red pixel field runs at full vibrancy again (alpha up to 0.72, js/motion.js), so
   the field is never dimmed for contrast. Instead, every text block that sits straight on the field (the bands
   without a panel) gets its own quiet near-black scrim: a 90 percent canvas fill on the text box, feathered out
   by a soft shadow, so the field still burns everywhere around and between the words. Measured over the
   brightest cell the field can paint (#d53c2d at 0.72 on #0f0f0f): #8a8a8a and #ff4438 small text clear 5.2:1,
   the kit red h1 accent clears 3.9:1 (large text). Panel bands already carry their 78 percent panel. */
:root{--scrim:rgba(15,15,15,.9)}

.band:not(.panel-bg) :is(.eyebrow,.h1,.lead,.body,.prose p,.legal p,.legal h2,.sign,.cta-wrap .ghost,.form,.scrim,.byline,.who-q,.dnote,.dfor){
  background:var(--scrim);box-shadow:0 0 22px 12px var(--scrim);border-radius:8px}
.band:not(.panel-bg) :is(.eyebrow,.sign,.cta-wrap .ghost,.scrim,.byline){width:fit-content}
/* panel bands: their small grey and red text measured 4.52 to 4.56:1 at the field's peak, legal but thin; the same
   scrim lifts it to 5.2:1 or better without thickening the panel */
.band.panel-bg :is(.eyebrow,.flow-step .who-tag){background:var(--scrim);box-shadow:0 0 18px 10px var(--scrim);border-radius:8px}
.band.panel-bg .eyebrow{width:fit-content}
/* the privacy page button: .legal a painted its label red on the red button (1.36:1); the label is white like every button */
.legal a.btn{color:#fff;text-decoration:none}

/* ============ pass 2 (2026-10-05): pricing tables, home order, phone link, tap targets ============ */
/* inline text links (the phone number, "what's included" links): styled like every other text link on the site */
.tlink{color:var(--red-ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;white-space:nowrap}
.tlink:hover,.tlink:focus-visible{color:var(--ink)}
.qa-a a{color:var(--red-ink);font-weight:600}
/* E3: every small link and switch is at least 24px tall (WCAG 2.2 target size) */
.fcol a,.ghost,.tlink,.qa-a a,.legal a{display:inline-flex;align-items:center;min-height:24px}
.fcol a{min-height:32px}
.fcol ul{gap:var(--space-1)}
/* the plain terms */
.terms{list-style:none;padding:0;margin:var(--space-5) 0 0;display:grid;gap:var(--space-3);max-width:72ch}
.terms li{position:relative;padding-left:22px;color:var(--sec);font-size:var(--fs-body);line-height:1.55}
.terms li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:50%;background:var(--red-mark)}
.terms li b{color:var(--ink);font-weight:600}

.band:not(.panel-bg) :is(.terms,.h2,.flow){background:var(--scrim);box-shadow:0 0 22px 12px var(--scrim);border-radius:8px}
.band:not(.panel-bg) :is(.h2){width:fit-content}
/* contact: reply method switch */
fieldset.field{border:0;padding:0;margin:0;min-width:0}
fieldset.field legend{font-family:var(--font-body);font-weight:600;font-size:var(--fs-small);padding:0;margin-bottom:var(--space-2)}
.seg{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.seg label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--field-line);border-radius:var(--r-input);cursor:pointer;font-weight:600;font-size:var(--fs-small);color:var(--ink);background:var(--canvas)}
.seg input{accent-color:var(--red-mark);width:18px;height:18px;margin:0}
.seg label:has(input:checked){border-color:var(--red-mark);box-shadow:0 0 0 3px var(--red-soft)}
.seg label:has(input:focus-visible){outline:2px solid var(--red-mark);outline-offset:2px}

/* ============ the Demos page (/demos, 2026-10-05): one card component for every demo, built from DEMO_SECTIONS in build.js ============ */
.djump{list-style:none;padding:0;margin:var(--space-5) 0 0;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}
.djump a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-display);font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--red-mark);text-decoration-thickness:2px;text-underline-offset:6px}
.djump a:hover{color:var(--red-ink)}
.dsec{scroll-margin-top:58px}
.dsec .h2{margin-bottom:var(--space-3)}
.dsec-lead{margin-bottom:var(--space-5)}
.dgrid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);align-items:stretch}
@media(max-width:900px){.dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.dgrid{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}}
.dcard{position:relative;display:flex;flex-direction:column;height:100%;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden}
.panel-bg .dcard{background:var(--canvas)}
.dcard-img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:top center;background:#1f1f1f;border-bottom:1px solid var(--hair)}
.dcard-body{display:flex;flex-direction:column;flex:1;gap:6px;padding:var(--space-4) var(--space-5) var(--space-5)}
.dcard-tag{align-self:flex-start;font-family:var(--font-display);font-weight:700;font-size:var(--fs-micro);letter-spacing:.02em;color:var(--red-ink);background:var(--red-soft);border-radius:100px;padding:3px 10px}
.dcard-t{font-size:var(--fs-h3);letter-spacing:-.01em;line-height:1.2;margin-top:2px}
.dcard-d{color:var(--sec);font-size:var(--fs-small);line-height:1.5}
.dcard-sub{color:var(--sec);font-family:var(--font-display);font-weight:600;font-size:var(--fs-micro);margin-top:-2px}
.dcard-note{color:var(--sec);font-size:var(--fs-micro);line-height:1.45;border-top:1px solid var(--hair);padding-top:8px;margin-top:4px}
.dnote{color:var(--sec);font-size:var(--fs-small);line-height:1.5;max-width:64ch;margin-top:var(--space-4)}
.dcard-go{margin-top:auto;padding-top:var(--space-3);display:inline-flex;align-items:center;gap:6px;min-height:44px;font-family:var(--font-display);font-weight:700;font-size:var(--fs-small);color:var(--ink)}
.dcard-go span[aria-hidden]{color:var(--red-ink)}
/* the whole card is the link's hit area; the image and text stay readable as themselves */
.dcard-go::after{content:"";position:absolute;inset:0;border-radius:inherit}
.dcard:hover,.dcard:focus-within{border-color:var(--red-ink)}
.dcard-go:focus-visible{outline:none}
.dcard:focus-within{outline:2px solid var(--red-mark);outline-offset:3px}
@media(prefers-reduced-motion:no-preference){.dcard{transition:border-color .16s,transform .16s}.dcard:hover{transform:translateY(-2px)}}

/* the soft gate on /demos: a small welcome, shown once, always skippable */
.dgate{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:0;border:1px solid var(--hair);border-radius:var(--r-card);background:var(--panel);color:var(--ink);box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.dgate::backdrop{background:rgba(8,8,8,.72)}
.dgate-in{display:grid;gap:var(--space-4);padding:var(--space-5)}
.dgate-top{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:700}
.dgate-top .mk{width:28px;height:28px}
.dgate-top .wm .sys{font-weight:500;color:var(--sec)}
.dgate h2{font-size:var(--fs-h3);letter-spacing:-.01em}
.dgate p{color:var(--sec);font-size:var(--fs-small);line-height:1.5}
.dgate-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-1)}
.dgate-skip{min-height:44px;padding:0 var(--space-4);background:transparent;border:1px solid var(--field-line);border-radius:100px;color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:var(--fs-small);cursor:pointer}
.dgate-skip:hover{border-color:var(--ink)}
.dgate .dgate-fine{font-size:var(--fs-micro);color:var(--ter)}
.dgate .dgate-fine a{color:var(--sec);text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:no-preference){.dgate[open]{animation:pagein .22s ease}}
.dthanks{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:70;max-width:calc(100vw - 32px);background:var(--panel);border:1px solid var(--hair);border-radius:100px;padding:10px 18px;font-size:var(--fs-small);color:var(--ink);box-shadow:0 16px 40px -20px rgba(0,0,0,.8)}


/* ============ 2026-10-06: the conversion rebuild (lawton-icm research/filed/2026-10-06-website-conversion) ============ */
/* the second button: an outline pill the same size as .btn, so a pair reads as two real choices */
.btn2{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:var(--fs-body);line-height:1.1;
  color:var(--ink);background:var(--canvas);border:1px solid var(--field-line);border-radius:100px;padding:calc(var(--space-4) - 1px) var(--space-5);cursor:pointer;min-height:48px;text-align:center}
.btn2:hover,.btn2:focus-visible{border-color:var(--ink)}
.btn{min-height:48px}
.cta-wrap .btn,.cta-wrap .btn2{display:inline-flex;align-items:center;justify-content:center}

/* header: desktop has the "Text 614-579-3044" link; phones get a 44px Text icon button beside the menu */
.nav .nav-sms{color:var(--ink)}
.sms-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--field-line);border-radius:var(--r-input);color:var(--ink)}
.sms-btn:hover{border-color:var(--ink)}
.nav .sms-btn::after{display:none}
@media(max-width:760px){.sms-btn{display:inline-flex}.nav{gap:var(--space-2)}}
.sheet .sheet-tel{border-bottom:0;margin-top:var(--space-2);color:var(--sec);font-family:var(--font-body);font-weight:600}

/* home hero */
.byline{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-5);color:var(--sec);font-size:var(--fs-body)}
.ph{display:block;border-radius:50%;object-fit:cover;flex:none;background:var(--panel)}
.ph-hero{width:64px;height:64px}
.shot{display:block;background:var(--canvas);border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;color:inherit;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 30px 60px -34px rgba(0,0,0,.6)}
.shot:hover,.shot:focus-visible{border-color:var(--red-ink)}
.shot img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:top center;background:#1f1f1f}
.shot-cap{display:flex;align-items:center;gap:6px;padding:12px 14px;font-family:var(--font-display);font-weight:700;font-size:var(--fs-small);color:var(--ink);border-top:1px solid var(--hair);background:var(--panel)}
.shot-cap span[aria-hidden]{color:var(--red-ink)}
.chrome{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--panel);border-bottom:1px solid var(--hair)}
.chrome i{width:9px;height:9px;border-radius:50%;background:var(--hair);display:block}
.chrome .u{margin-left:10px;font-size:.72rem;color:var(--sec);background:var(--canvas);border:1px solid var(--hair);border-radius:6px;padding:3px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#page-home .hero .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
@media(max-width:900px){#page-home .hero .hero-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){#page-home .hero .cta-wrap{display:grid;grid-template-columns:1fr;gap:var(--space-3);margin-top:var(--space-5)}
  #page-home .hero .cta-wrap .btn{min-height:56px}}
.more-link{margin-top:var(--space-5)}

/* home 1.3: pick your line of work. Two columns on a phone so all six show without a sideways swipe, 3 x 2 on a desktop. */
.cgrid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
@media(min-width:760px){.cgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}}
.ccard{position:relative;display:flex;flex-direction:column;background:var(--canvas);border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;min-width:0}
.ccard img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left;background:#1f1f1f;border-bottom:1px solid var(--hair)}
.ccard-b{display:flex;flex-direction:column;gap:4px;flex:1;padding:var(--space-3)}
@media(min-width:760px){.ccard-b{padding:var(--space-4) var(--space-5) var(--space-5)}}
.ccard h3{font-size:1.02rem;letter-spacing:-.01em;line-height:1.2}
@media(min-width:760px){.ccard h3{font-size:var(--fs-h3)}}
.ccard p{color:var(--sec);font-size:var(--fs-small);line-height:1.4}
.ccard-go{margin-top:auto;padding-top:var(--space-2);display:inline-flex;align-items:center;gap:4px;min-height:44px;font-family:var(--font-display);font-weight:700;font-size:var(--fs-small);color:var(--ink);line-height:1.25}
.ccard-go span[aria-hidden]{color:var(--red-ink)}
/* phones: every card link on one line (the two-column cards are about 147px wide at 390) */
@media(max-width:420px){.ccard-go{white-space:nowrap;letter-spacing:-.02em;gap:2px;font-size:.8rem}}
.ccard-go::after{content:"";position:absolute;inset:0;border-radius:inherit}
.ccard:hover,.ccard:focus-within{border-color:var(--red-ink)}
.ccard-go:focus-visible{outline:none}
.ccard:focus-within{outline:2px solid var(--red-mark);outline-offset:3px}

/* home 1.4: what I build, with starting prices. Dashboards across the full row with a screenshot, then three. */
.pgrid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
@media(min-width:900px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}.hcard-lead{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}}
.hcard{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;min-width:0}
.hcard img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:top left;background:#1f1f1f}
@media(min-width:900px){.hcard-lead img{order:2;border-left:1px solid var(--hair)}}
@media(max-width:899px){.hcard-lead img{border-bottom:1px solid var(--hair)}}
.hcard-b{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5)}
.hcard h3{font-size:var(--fs-h3);letter-spacing:-.01em}
.hcard-lead h3{font-size:var(--fs-h2)}
.hcard-what{color:var(--ink);font-size:var(--fs-body);line-height:1.5}
.hcard-who{color:var(--sec);font-size:var(--fs-small);line-height:1.5}
.hcard-who b{color:var(--ink);font-weight:600}
.hcard-price{font-family:var(--font-display);font-weight:700;font-size:var(--fs-body);color:var(--ink);line-height:1.35;margin-top:var(--space-1)}
.hcard-links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin-top:var(--space-1)}
.hcard-links .tlink,.pc-cta .tlink{min-height:44px}

/* home 1.5: the four steps, numbered, four columns on a desktop */
.hsteps{list-style:none;counter-reset:hs;padding:0;margin:var(--space-5) 0 0;display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr);max-width:none}
@media(min-width:960px){.hsteps{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5)}}
.hsteps li{counter-increment:hs;position:relative;padding-left:44px;color:var(--sec);font-size:var(--fs-body);line-height:1.5}
.hsteps li::before{content:counter(hs);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;background:var(--red-mark);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:.95rem}
@media(min-width:960px){.hsteps li{padding-left:0;padding-top:44px}}
.hsteps li b{color:var(--ink);font-weight:600}

/* home 1.7: who you'll work with. The photo shows only when assets/lawton.webp exists; without it the quotes stand alone. */
.who{display:flex;flex-direction:column;gap:var(--space-5);max-width:72ch}
@media(min-width:760px){.who{flex-direction:row;align-items:flex-start}}
.ph-home{width:96px;height:96px}
.who-txt{min-width:0}
.who-q{margin:0;padding:0 0 0 var(--space-4);border-left:2px solid var(--red-mark)}
.who-q p{color:var(--ink);font-size:var(--fs-lead);line-height:1.5;margin-bottom:var(--space-3)}
.who-q p:last-child{margin-bottom:0}

/* home 1.8: product chips that open the form with step 1 answered */
.chips-l{margin-top:var(--space-5);color:var(--sec);font-size:var(--fs-small);font-weight:600}
.chips{list-style:none;padding:0;margin:var(--space-3) 0 0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-4);border:1px solid var(--field-line);border-radius:100px;background:var(--canvas);
  color:var(--ink);font-weight:600;font-size:var(--fs-small)}
.chips a:hover,.chips a:focus-visible{border-color:var(--red-ink);color:var(--red-ink)}
.band.tight .chips + .cta-wrap{margin-top:var(--space-5)}

/* the sticky bar on phones (1.9): two 48px buttons over the safe area; shown by js/app.js, never wider than a phone */
.mbar{display:none}
@media(max-width:760px){
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:58;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);
    padding:var(--space-2) 16px calc(var(--space-2) + env(safe-area-inset-bottom,0px));background:rgba(15,15,15,.96);border-top:1px solid var(--divider)}
  .mbar .btn,.mbar .btn2{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--space-3);font-size:var(--fs-small)}
  footer{padding-bottom:calc(var(--space-6) + 72px + env(safe-area-inset-bottom,0px))}
}

/* demos: the career line, and one price line per card */
.dfor{margin-top:var(--space-4);font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:var(--fs-body)}
.dcard-price{color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:var(--fs-small);margin-top:2px}
.dgate-act .btn,.dgate-act .btn2{flex:1 1 0;min-height:48px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;padding-inline:var(--space-4)}

/* pricing 3.2: the four cards. Dashboards across the full row on a desktop, then three in a row. */
.pcards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
@media(min-width:960px){.pcards{grid-template-columns:repeat(3,minmax(0,1fr))}.pcard.pcard-lead{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-5);align-items:start}}
.pcard{background:var(--canvas);border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);min-width:0;scroll-margin-top:calc(58px + var(--space-4))}
.pc-top{display:flex;flex-direction:column;gap:var(--space-2)}
.pc-n{font-size:var(--fs-h3);letter-spacing:-.01em}
.pcard-lead .pc-n{font-size:var(--fs-h2)}
.pc-who{color:var(--sec);font-size:var(--fs-small);line-height:1.5}
.pc-price{font-family:var(--font-display);font-size:clamp(1.15rem,2.2vw,1.35rem);line-height:1.3;color:var(--sec);font-variant-numeric:tabular-nums}
.pc-price b{color:var(--ink);font-weight:700}
.pc-img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:top left;border:1px solid var(--hair);border-radius:var(--r-inner);margin-top:var(--space-3);background:#1f1f1f}
.pc-body{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.pc-lbl{font-family:var(--font-display);font-weight:700;font-size:var(--fs-small);color:var(--ink)}
.pc-inc{list-style:none;padding:0;margin:calc(-1 * var(--space-2)) 0 0;display:grid;gap:6px}
.pc-inc li{position:relative;padding-left:22px;color:var(--sec);font-size:var(--fs-small);line-height:1.45}
.pc-inc li::before{content:"";position:absolute;left:2px;top:.35em;width:10px;height:6px;border-left:2px solid var(--red-ink);border-bottom:2px solid var(--red-ink);transform:rotate(-45deg)}
.pc-ex{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-inner);padding:var(--space-3) var(--space-4);color:var(--sec);font-size:var(--fs-small);line-height:1.5}
.pc-ex b{color:var(--ink)}
.pc-ex-l{display:block;font-family:var(--font-display);font-weight:700;color:var(--ink);margin-bottom:2px}
.addons{border:1px solid var(--hair);border-radius:var(--r-inner)}
.addons summary{cursor:pointer;min-height:44px;display:flex;align-items:center;padding:0 var(--space-4);font-family:var(--font-display);font-weight:700;font-size:var(--fs-small);color:var(--ink);list-style:none}
.addons summary::-webkit-details-marker{display:none}
.addons summary::after{content:"+";margin-left:auto;color:var(--red-ink);font-size:1.2rem;line-height:1}
.addons[open] summary::after{content:"\2212"}
.addons ul{list-style:none;padding:0 var(--space-4) var(--space-3);margin:0;display:grid;gap:var(--space-2)}
.addons li{display:flex;justify-content:space-between;gap:var(--space-3);color:var(--sec);font-size:var(--fs-small);line-height:1.4;border-top:1px solid var(--hair);padding-top:var(--space-2)}
.addons li small{font-size:var(--fs-micro);color:var(--sec)}
.addons .ap{color:var(--ink);font-weight:600;white-space:nowrap;text-align:right}
.pc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5);margin-top:auto}
.pc-cta .btn{display:inline-flex;align-items:center;justify-content:center}
.djump + *{margin-top:0}

/* about: the photo (when it exists) beside a 65ch text column; on a phone it sits full width above the text at 4:5 */
.about-grid{display:flex;flex-direction:column;gap:var(--space-6)}
@media(min-width:900px){.about-grid{flex-direction:row-reverse;align-items:flex-start;justify-content:flex-end}}
.ph-about{margin:0;flex:none;width:100%}
.ph-about img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-card);background:var(--panel)}
@media(min-width:900px){.ph-about{width:320px;position:sticky;top:90px}}

/* the form (/get-a-quote): a two-way switch, three short steps for a price, one screen for a question */
.toggle{display:grid;grid-template-columns:1fr 1fr;padding:4px;gap:4px;background:var(--panel);border:1px solid var(--field-line);border-radius:100px;max-width:420px}
.toggle label{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:100px;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:var(--fs-small);color:var(--sec);text-align:center;padding:0 var(--space-3)}
.toggle input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.toggle label:has(input:checked){background:var(--red-mark);color:#fff}
.toggle label:has(input:focus-visible){outline:2px solid var(--red-mark);outline-offset:2px}
.qstepn{font-family:var(--font-display);font-weight:700;font-size:var(--fs-small);color:var(--sec);margin-top:var(--space-2)}
.qstep{display:grid;gap:var(--space-5)}
.qnav{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.qnav .btn,.qnav .btn2{min-width:120px}
.field legend .opt,.field label .opt{color:var(--sec);font-weight:500}
fieldset.field legend{font-size:var(--fs-body)}
.field label{font-size:var(--fs-body)}
#quote .seg label{min-height:44px;padding:0 14px;font-size:var(--fs-small)}
fieldset.field.bad .seg label{border-color:var(--red-ink)}
fieldset.field.bad .err,.field.bad .err{font-weight:600}
.field.bad input,.field.bad textarea{border-width:2px}
.result h3 + p{margin-top:var(--space-2)}
.result p + p{margin-top:var(--space-3)}
/* the step heading takes focus on Next/Back (not the first input), so the phone keyboard does not pop up on every step */
.qstepn:focus{outline:none}
.qstepn:focus-visible{outline:2px solid var(--red-mark);outline-offset:4px}
.qother{margin-top:var(--space-3);max-width:360px}
.result .retry{margin-top:var(--space-4)}
/* What you get: no prices (internal only, ruled 2026-10-06); what it is sits under the name, the not-included line under the cards */
.pc-what{color:var(--ink);font-size:var(--fs-body);line-height:1.45}
.pc-who b{color:var(--ink);font-weight:600}
.notinc{margin-top:var(--space-5);max-width:72ch;color:var(--sec);font-size:var(--fs-small);line-height:1.55}
.notinc b{color:var(--ink)}
/* the dashboard cards are named by style; the career they are shown for rides above the name */
.ccard-tag{align-self:flex-start;font-family:var(--font-display);font-weight:700;font-size:var(--fs-micro);letter-spacing:.02em;color:var(--red-ink);background:var(--red-soft);border-radius:100px;padding:3px 10px;margin-bottom:2px}
/* /demos: the career picker and the line a section shows when nothing fits that career */
.dpick-l{margin-top:var(--space-5)}
.chips a[aria-current]{border-color:var(--red-mark);background:var(--red-soft);color:var(--ink)}
.dnone{color:var(--sec);font-size:var(--fs-small);margin:calc(-1 * var(--space-2)) 0 var(--space-4)}
/* hero: the eyebrow fits one line on a phone; the subhead reads at full strength over the pixel field */
@media(max-width:600px){#page-home .hero .eyebrow{letter-spacing:.1em;font-size:11px}}
#page-home .hero .lead{color:var(--ink)}
.more-link .tlink{white-space:normal}

/* phone tap targets (V2 check 2026-10-06): every standalone link and button at least 44px tall on phones and touch
   screens. Inline links inside a sentence are left as they are. Desktop with a mouse keeps its tighter rhythm. */
@media (max-width:760px),(pointer:coarse){
  .logo{min-height:44px}
  .fcol ul{gap:0}
  .fcol a{min-height:44px;min-width:44px}
  .more-link .tlink,.cta-wrap .ghost{min-height:44px}
  .fbot .motion{min-height:44px}
}