/* 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)}
.spacer{height:var(--space-6)}

/* 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)}
/* 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}
.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}
@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)}

/* overview cards (home) + generic card grid */
.grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.four{grid-template-columns:repeat(2,1fr)}
@media(max-width:720px){.grid,.grid.three,.grid.four{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:var(--space-5);display:block;color:inherit}
a.card:hover{border-color:var(--red-ink)}
.card .k{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);
  letter-spacing:-.01em;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.card .k .arw{color:var(--red-ink);font-weight:700}
.card p{color:var(--sec);font-size:var(--fs-small);line-height:1.5}
.assure .k{color:var(--ink)}

/* proof line, honest, no fabrication */
.proofline{margin-top:var(--space-6);color:var(--ter);font-size:var(--fs-small);
  font-family:var(--font-body);font-weight:600;letter-spacing:.01em;max-width:65ch}

/* offerings (work) */
.offer{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-6);align-items:center}
@media(max-width:820px){.offer{grid-template-columns:1fr;gap:var(--space-5)}}
.offer .txt h2{font-size:var(--fs-h2);max-width:16ch;margin-bottom:var(--space-4);scroll-margin-top:calc(58px + var(--space-4))}
.offer .txt .sub{color:var(--sec);font-size:var(--fs-body);line-height:1.55;max-width:65ch;margin-bottom:var(--space-4)}
.offer .txt .meta{font-size:var(--fs-small);line-height:1.5;margin-bottom:var(--space-2);max-width:65ch}
.offer .txt .meta b{font-family:var(--font-display);font-weight:700;color:var(--ink)}
.offer .hint{margin-top:var(--space-3);font-size:var(--fs-small);color:var(--ter);font-family:var(--font-body);font-weight:600}

/* mocks */
.mock{background:var(--canvas);border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 30px -22px rgba(0,0,0,.3)}
.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:.7rem;color:var(--ter);background:var(--canvas);
  border:1px solid var(--hair);border-radius:6px;padding:3px 12px}
.mbody{padding:16px}
.ms-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.ms-brand{font-family:var(--font-display);font-weight:700;font-size:.8rem}
.ms-brand span{color:var(--red-ink)}
.ms-menu{display:flex;gap:8px}.ms-menu i{width:22px;height:5px;border-radius:3px;background:var(--divider);display:block}
.ms-hero{font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1.15;margin-bottom:8px}
.ms-line{height:6px;border-radius:3px;background:var(--divider);margin-bottom:6px}
.ms-line.s{width:70%}
.ms-btn{display:inline-block;margin-top:12px;background:var(--red-mark);color:#fff;font-family:var(--font-display);
  font-weight:700;font-size:.72rem;padding:7px 14px;border-radius:100px}
.ms-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.ms-cards div{min-width:0;height:38px;border-radius:var(--r-inner);background:var(--panel);border:1px solid var(--hair)}
.md-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.tile{min-width:0;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-inner);padding:11px}
.tile .tl{display:block;font-size:.62rem;color:var(--ter);text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-body);font-weight:600}
.tile .tv{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(1.05rem,4.4vw,1.3rem);margin-top:3px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tile .tv.r{color:var(--red-ink)}
.tile .tu{font-size:.6rem;color:var(--ter);font-family:var(--font-body);font-weight:600}
@media(max-width:420px){.md-tiles{grid-template-columns:1fr 1fr}}
.md-chart{display:flex;align-items:flex-end;gap:7px;height:74px;padding:10px;background:var(--panel);
  border:1px solid var(--hair);border-radius:var(--r-inner)}
.md-chart b{flex:1;background:var(--red-mark);border-radius:4px 4px 0 0;height:100%;transform:scaleY(.12);transform-origin:bottom;opacity:.9;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){.md-chart b{transition:none}}
.auto-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--hair);font-size:.86rem}
.auto-row:last-child{border-bottom:0}
.auto-row .trig{font-weight:600;flex:1}
.auto-row .arr{color:var(--red-ink);font-family:var(--font-display);font-weight:700}
.auto-row .act{flex:1.2;color:var(--sec)}

/* 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)}
/* 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}}

/* pricing */
.subhead{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);margin:var(--space-6) 0 var(--space-3)}

/* 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 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,.asm-cap 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)}
.formnote .flink{color:var(--red-ink);text-decoration:underline;background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:inherit}
.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,.top-cta,.ghost,.nav a,.qa-q,.fcol a,.card{transition:background .16s,color .16s,border-color .16s,box-shadow .16s}
}

/* ============ v3 additions: signature interactions + animation layer. All complete/correct at rest. ============ */

/* ---- Home signature: "See it built for you" self-building showcase ---- */
.asm{margin-top:var(--space-6)}
.asm-grid{display:grid;grid-template-columns:1.15fr .85fr;grid-template-areas:"dash site" "dash auto";gap:var(--space-4)}
@media(max-width:720px){.asm-grid{grid-template-columns:1fr;grid-template-areas:"dash" "site" "auto"}}
.asm-dash{grid-area:dash}.asm-site{grid-area:site}.asm-auto{grid-area:auto}
.asm-grid .mock .mbody{padding:14px}
.asm-ey{font-family:var(--font-display);font-weight:700;font-size:.66rem;color:var(--ter);text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:10px;display:block}
.asm-auto .auto-row{padding:9px 0}
.asm-cap{margin-top:var(--space-5);color:var(--ter);font-size:var(--fs-small);max-width:62ch}
.asm-cap a{margin-left:4px}
.piece{min-width:0}

/* ---- Work signature: "Watch a system run" live pipeline ---- */
.live{margin-top:var(--space-6)}
.live-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin-bottom:var(--space-5)}
.live-stat{font-family:var(--font-body);font-weight:600;font-size:var(--fs-small);color:var(--sec)}
.live-stat b{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);color:var(--ink);margin-left:6px;font-variant-numeric:tabular-nums}
.live-chart{display:flex;align-items:flex-end;gap:5px;height:32px;flex:1;min-width:110px;max-width:200px}
.live-chart b{flex:1;min-width:0;background:var(--red-mark);border-radius:3px 3px 0 0;height:20%;opacity:.85}
@media(prefers-reduced-motion:no-preference){.live-chart b{transition:height .5s cubic-bezier(.2,.7,.3,1)}}
.live-ctl{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-left:auto}
.live-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
@media(max-width:640px){.live-cols{grid-template-columns:1fr}}
.live-col{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--space-3);min-width:0}
.live-col h3{font-family:var(--font-display);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ter);margin:0 0 var(--space-3);display:flex;justify-content:space-between;align-items:center}
.live-col h3 .ct{color:var(--ink);font-size:.8rem;font-variant-numeric:tabular-nums}
.live-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-2);min-height:52px}
.lead-card{background:var(--canvas);border:1px solid var(--hair);border-radius:var(--r-inner);padding:8px 10px;
  font-size:.82rem;font-weight:500;color:var(--ink)}
.lead-card .src{display:block;font-size:.66rem;color:var(--ter);font-weight:500;margin-top:2px}
/* won cards read as "done" by a faint red FULL fill, not a colored edge/border (no AI-tell accent). */
.lead-card.is-won{background:var(--red-soft);border-color:var(--hair)}
@supports not (background:color-mix(in srgb,red,blue)){.lead-card.is-won{background:var(--red-soft)}}
/* when a card lands in Won, the whole card pulses a touch stronger red, then settles to the faint fill */
.lead-card.wonflash{animation:wonflash .7s ease}
@keyframes wonflash{0%{background:color-mix(in srgb,var(--red-mark) 20%, var(--canvas))}100%{background:var(--red-soft)}}
@supports not (background:color-mix(in srgb,red,blue)){@keyframes wonflash{0%{background:#f6cdc7}100%{background:var(--red-soft)}}}
@media(prefers-reduced-motion:reduce){.lead-card.wonflash{animation:none}}
@media(prefers-reduced-motion:no-preference){.lead-card{transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .3s ease}}
.live-toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translate(-50%,150%);
  background:var(--ink);color:var(--canvas);font-family:var(--font-display);font-weight:700;font-size:var(--fs-small);
  padding:10px 18px;border-radius:100px;z-index:70;opacity:0;pointer-events:none;max-width:calc(100vw - 32px);
  box-shadow:0 16px 40px -16px rgba(0,0,0,.5)}
.live-toast.show{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:no-preference){.live-toast{transition:transform .32s cubic-bezier(.2,.7,.3,1),opacity .32s ease}}

/* ---- form busy: the LWH badge pulses as the branded "working" indicator instead of a generic spinner ---- */
.busy-badge{display:none;align-items:center;gap:10px;margin-top:var(--space-5);color:var(--sec);font-size:var(--fs-small);font-weight:600}
.busy-badge.show{display:flex}
.busy-badge .mk{width:26px;height:26px}
@media(prefers-reduced-motion:no-preference){.busy-badge.show .mk{animation:badgePulse 1s ease-in-out infinite}}
@keyframes badgePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.88);opacity:.7}}
.asm-chart{display:flex;align-items:flex-end;gap:6px;height:60px;margin-top:12px;padding:10px;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-inner)}
.asm-chart b{flex:1;min-width:0;background:var(--red-mark);border-radius:3px 3px 0 0;height:20%;opacity:.9}
@media(prefers-reduced-motion:no-preference){.asm-chart b{transition:height .6s cubic-bezier(.2,.7,.3,1)}}

/* ============ 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)}
.band.tall{padding-block:clamp(52px,7vw,84px)}

/* two-column text bands: kills the "headline hugging the left, empty right third" blank space */
.split-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--space-7);align-items:center}
@media(max-width:820px){.split-grid{grid-template-columns:1fr;gap:var(--space-6)}}
.split-grid .main{min-width:0}
.split-grid .main .lead:last-child,.split-grid .main .body:last-child{margin-bottom:0}
.aside{min-width:0}
.pullquote{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(1.35rem,2.6vw,1.9rem);
  line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.aside-price{background:var(--canvas);border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--space-6);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 30px -24px rgba(0,0,0,.25)}
.aside-price .big{font-family:var(--font-display);font-weight:700;font-size:clamp(2.6rem,6vw,3.5rem);
  letter-spacing:-.03em;line-height:1;color:var(--ink)}
.aside-price .big .u{font-size:var(--fs-body);color:var(--ter);font-weight:600;letter-spacing:0}
.aside-price .cap{margin-top:var(--space-3);color:var(--sec);font-size:var(--fs-small);line-height:1.5}
.aside-price ul{list-style:none;padding:0;margin:var(--space-4) 0 0;display:flex;flex-direction:column;gap:var(--space-2)}
.aside-price li{font-size:var(--fs-small);color:var(--sec);padding-left:20px;position:relative}
.aside-price li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;background:var(--red-mark)}

/* clickable cards get a stronger, moving affordance; static assurance cards stay flat */
@media(prefers-reduced-motion:no-preference){a.card{transition:border-color .16s,box-shadow .16s,transform .16s}}
a.card:hover,a.card:focus-visible{border-color:var(--red-ink);box-shadow:0 12px 26px -20px rgba(0,0,0,.35)}
a.card .k .arw{display:inline-block}
@media(prefers-reduced-motion:no-preference){a.card .k .arw{transition:transform .16s}}
a.card:hover .k .arw,a.card:focus-visible .k .arw{transform:translateX(3px)}
.card.assure{background:var(--panel);border-style:solid}

/* Website demo: type-in reveal + simulated click + confirmation */
.type-reveal{clip-path:inset(0 0 0 0)}
.type-reveal.pre{clip-path:inset(0 100% 0 0)}
@media(prefers-reduced-motion:no-preference){.type-reveal{transition:clip-path .7s steps(22,end)}}
.ms-fillrow{overflow:hidden}
.ms-line.pre,.ms-cards.pre>div{opacity:0}
.ms-cards>div{opacity:1}
@media(prefers-reduced-motion:no-preference){.ms-line,.ms-cards>div{transition:opacity .4s ease,transform .4s ease}}
.ms-btn.clickable{cursor:default}
.ms-btn.clicked{animation:clickpulse .5s ease}
@keyframes clickpulse{0%{transform:scale(1)}45%{transform:scale(.9)}100%{transform:scale(1)}}
.ms-confirm{display:inline-flex;align-items:center;gap:6px;margin-left:8px;vertical-align:middle;
  background:var(--red-soft);color:var(--red-ink);font-family:var(--font-display);font-weight:700;font-size:.7rem;
  padding:6px 11px;border-radius:100px;opacity:0;transform:translateY(3px)}
.ms-confirm.show{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){.ms-confirm{transition:opacity .3s,transform .3s}}
.ms-confirm .tick{width:14px;height:14px;border-radius:50%;background:var(--red-mark);color:#fff;display:inline-flex;
  align-items:center;justify-content:center;font-size:.55rem}

/* Dashboard demo: a tile "ticks" live so it reads as always-current, not a screenshot.
   Check-off cue is the WHOLE card briefly filling faint red, then fading (no red edge/border). */
.tile.flash,.hv-tile.flash{animation:tileflash .7s ease}
@keyframes tileflash{0%{background:var(--red-soft)}55%{background:var(--red-soft)}100%{background:var(--panel)}}
@media(prefers-reduced-motion:reduce){.tile.flash,.hv-tile.flash{animation:none}}

/* Automations demo: the active row lights, the arrow fires red, the action gets a check */
@media(prefers-reduced-motion:no-preference){.auto-row{transition:background .3s ease,border-color .3s ease}}
.auto-row.active{background:var(--panel);border-radius:var(--r-inner)}
/* check-off highlight: the WHOLE row briefly fills faint red (same shape as the gray active state,
   just red), then fades back. No red edge, glow, tag or border. Reduced-motion: no pulse. */
.auto-row.flash{animation:rowflash .65s ease}
@keyframes rowflash{0%{background:var(--red-soft)}55%{background:var(--red-soft)}100%{background:transparent}}
@media(prefers-reduced-motion:reduce){.auto-row.flash{animation:none}}
.auto-row .arr.fire{animation:arrfire .7s ease}
@keyframes arrfire{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.auto-row .check{margin-left:8px;width:18px;height:18px;flex:none;border-radius:50%;background:var(--red-mark);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:.62rem;opacity:0;transform:scale(.4)}
.auto-row.done .check{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){.auto-row .check{transition:opacity .3s,transform .3s}}
@media(prefers-reduced-motion:reduce){.auto-row .arr.fire{animation:none}}
.auto-row .act{display:flex;align-items:center;gap:4px}

/* ============ 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)}
  /* offering + generic cards: lift + a soft brand spotlight that follows the cursor */
  a.card{transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .18s,box-shadow .22s}
  a.card:hover{transform:translateY(-4px)}
  .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)}
}
/* cursor spotlight on cards: a faint brand glow at the pointer (--mx/--my set by JS). The layer is
   opacity-animated only, and it sits UNDER the card content so text contrast is untouched. */
.card,.live-col{position:relative;isolation:isolate}
.card::after,.live-col::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(213,60,45,.16), transparent 60%)}
@media(hover:hover) and (pointer:fine){.card:hover::after,.live-col:hover::after{opacity:1}}
@media(prefers-reduced-motion:reduce){.card::after,.live-col::after{display:none}}
/* 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,.asm-cap 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}}
/* the hero product mock: a compact always-current dashboard that quietly updates */
.hv-card{background:var(--canvas);border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 30px 60px -34px rgba(0,0,0,.4)}
.hv-head{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--panel);border-bottom:1px solid var(--hair)}
.hv-dot{width:9px;height:9px;border-radius:50%;background:var(--hair)}
.hv-title{margin-left:6px;font-family:var(--font-display);font-weight:700;font-size:.74rem;color:var(--sec)}
.hv-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight:600;font-size:.64rem;color:var(--ter);text-transform:uppercase;letter-spacing:.05em}
.hv-live .pulse{width:7px;height:7px;border-radius:50%;background:var(--red-mark)}
@media(prefers-reduced-motion:no-preference){.hv-live .pulse{animation:livepulse 2s ease-in-out infinite}}
@keyframes livepulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.hv-body{padding:16px}
.hv-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.hv-tile{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-inner);padding:11px;min-width:0}
.hv-tile .l{display:block;font-size:.58rem;color:var(--ter);text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-body);font-weight:600}
.hv-tile .v{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(1.1rem,3vw,1.4rem);margin-top:3px;font-variant-numeric:tabular-nums;line-height:1}
.hv-tile .v.r{color:var(--red-ink)}
.hv-chart{display:flex;align-items:flex-end;gap:6px;height:66px;padding:10px;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-inner)}
.hv-chart b{flex:1;min-width:0;background:var(--red-mark);border-radius:3px 3px 0 0;height:20%;opacity:.9;transform-origin:bottom}
@media(prefers-reduced-motion:no-preference){.hv-chart b{transition:height .7s cubic-bezier(.2,.7,.3,1)}}
.hv-rows{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.hv-row{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-inner);
  padding:8px 11px;font-size:.8rem;font-weight:500;color:var(--ink)}
.hv-row .rk{width:16px;height:16px;flex:none;border-radius:50%;background:var(--red-mark);color:#fff;display:inline-flex;
  align-items:center;justify-content:center;font-size:.56rem}
.hv-row .rt{flex:1;min-width:0}
.hv-row .rc{font-family:var(--font-display);font-weight:700;font-size:.64rem;color:var(--red-ink);background:var(--red-soft);
  padding:2px 8px;border-radius:100px;white-space:nowrap}

/* ---- 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{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{padding:2px 9px;border-radius:100px;background:var(--panel);border:1px solid var(--hair)}
.flow-step .who .tag.me{color:var(--red-ink);background:var(--red-soft);border-color:transparent}
/* split "what you do / what I do" mini-visual on how page */
.hands{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-2)}
@media(max-width:560px){.hands{grid-template-columns:1fr}}
.hand{background:color-mix(in srgb,var(--panel) 82%, transparent);border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--space-5)}
.hand h3{font-family:var(--font-display);font-size:var(--fs-h3);margin-bottom:var(--space-3)}
.hand.you h3{color:var(--sec)}.hand.me h3{color:var(--red-ink)}
.hand ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.hand li{font-size:var(--fs-small);color:var(--sec);padding-left:20px;position:relative;line-height:1.45}
.hand li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--hair)}
.hand.me li::before{background:var(--red-mark)}

/* ============ 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}}

/* KEY NUMBERS read as digital readouts: tabular, tech tracking. */
.tile .tv,.hv-tile .v,.live-stat b,.aside-price .big,.card .k{font-variant-numeric:tabular-nums}

/* MOCK "compile / render-in" sweep: a red scan line passes as a demo assembles itself. */
.mock,.hv-card{position:relative}
.mock .render-sweep{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;overflow:hidden;border-radius:inherit}
.mock .render-sweep::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-40%;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--red-mark) 30%,transparent),transparent)}
@supports not (background:color-mix(in srgb,red,blue)){.mock .render-sweep::after{background:linear-gradient(90deg,transparent,rgba(213,60,45,.28),transparent)}}
.mock.rendering .render-sweep{opacity:1}
@media(prefers-reduced-motion:no-preference){.mock.rendering .render-sweep::after{animation:renderSweep 1.05s cubic-bezier(.4,0,.2,1)}}
@keyframes renderSweep{from{left:-40%}to{left:110%}}
/* pieces settling onto the grid get a soft depth "landing" pulse as they land. No red edge/ring. */
.piece.snap{animation:pieceSnap .5s ease}
@media(prefers-reduced-motion:reduce){.piece.snap{animation:none}}
@keyframes pieceSnap{0%,100%{box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 30px -22px rgba(0,0,0,.3)}
  40%{box-shadow:0 2px 4px rgba(0,0,0,.06),0 20px 36px -20px rgba(0,0,0,.36)}}

/* 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}
}

/* ============ r2: scrolling website demo, live custom-systems chart, quote panel ============ */

/* ---- Websites demo: a real mock site inside the browser frame, auto-scrolling through sections ---- */
.webview{position:relative;height:250px;overflow:hidden;background:var(--canvas);border-radius:0 0 var(--r-card) var(--r-card)}
.webpage{position:absolute;left:0;right:0;top:0;will-change:transform}
.wsec{padding:15px 16px}
.wsec + .wsec{border-top:1px solid var(--divider)}
.wsec-hero{background:var(--panel)}
.ws-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
.ws-logo{font-family:var(--font-display);font-weight:700;font-size:.82rem}
.ws-logo span{color:var(--red-ink)}
.ws-menu{display:flex;gap:5px}
.ws-menu i{display:block;width:15px;height:3px;border-radius:2px;background:var(--divider)}
.ws-h{font-family:var(--font-display);font-weight:700;font-size:1.16rem;line-height:1.12;margin-bottom:6px}
.ws-sub{color:var(--sec);font-size:.78rem;line-height:1.42;margin-bottom:11px;max-width:34ch}
.ws-btn{display:inline-flex;align-items:center;gap:6px;background:var(--red-mark);color:#fff;font-family:var(--font-display);
  font-weight:700;font-size:.74rem;padding:8px 15px;border-radius:100px}
.ws-kicker{font-family:var(--font-display);font-weight:700;font-size:.61rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ter);margin-bottom:10px}
.ws-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ws-cards>div{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-inner);padding:11px 6px;text-align:center;
  font-family:var(--font-display);font-weight:700;font-size:.64rem;color:var(--ink);display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;min-width:0;line-height:1.3}
.ws-ic{font-size:1.05rem;color:var(--red-ink);line-height:1}
.ws-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ws-gal i{display:block;height:44px;border-radius:var(--r-inner);background:linear-gradient(135deg,var(--panel),var(--divider))}
.ws-gal i:nth-child(3n+1){background:linear-gradient(135deg,var(--divider),var(--panel))}
.ws-h2{font-family:var(--font-display);font-weight:700;font-size:1rem;margin-bottom:10px}
.wsec-cta{background:var(--panel);text-align:center}
.ws-conf{display:inline-flex;align-items:center;gap:6px;margin-left:8px;vertical-align:middle;background:var(--red-soft);
  color:var(--red-ink);font-family:var(--font-display);font-weight:700;font-size:.68rem;padding:5px 10px;border-radius:100px;
  opacity:0;transform:translateY(3px)}
.ws-conf.show{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){.ws-conf{transition:opacity .3s,transform .3s}}
.ws-conf .tick{width:13px;height:13px;border-radius:50%;background:var(--red-mark);color:#fff;display:inline-flex;
  align-items:center;justify-content:center;font-size:.52rem}
.wsec-foot{display:flex;justify-content:space-between;align-items:center;color:var(--ter);font-size:.66rem;
  font-family:var(--font-body);font-weight:600}
/* Websites demo: the Book now button gets a real press state as the cursor clicks it */
.ws-btn{transition:none}
@media(prefers-reduced-motion:no-preference){.ws-btn{transition:transform .14s ease,background .14s ease}}
.ws-btn.pressed{transform:scale(.93)}
.ws-btn.pressed{background:var(--red-deep)}
/* the three booking cards: empty (skeleton) until the booking lands, then they fill with the details */
.ws-books{display:flex;flex-direction:column;gap:8px}
.ws-book{position:relative;min-height:46px;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-inner);overflow:hidden}
.ws-book .bk-skel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:10px 12px;opacity:1}
.ws-book .bk-skel i{display:block;height:7px;border-radius:3px;background:var(--divider)}
.ws-book .bk-skel i:first-child{width:54%}
.ws-book .bk-skel i:last-child{width:32%}
.ws-book .bk-full{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:9px 12px;opacity:0}
.ws-book .bk-av{width:28px;height:28px;flex:none;border-radius:50%;background:var(--red-soft);color:var(--red-ink);
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:.62rem}
.ws-book .bk-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.ws-book .bk-name{font-family:var(--font-display);font-weight:700;font-size:.76rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-book .bk-time{font-size:.64rem;color:var(--ter);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-book .bk-conf{flex:none;display:inline-flex;align-items:center;gap:4px;font-family:var(--font-display);font-weight:700;font-size:.58rem;
  color:var(--red-ink);background:var(--red-soft);padding:3px 8px;border-radius:100px;white-space:nowrap}
.ws-book .bk-conf .tick{width:11px;height:11px;border-radius:50%;background:var(--red-mark);color:#fff;display:inline-flex;
  align-items:center;justify-content:center;font-size:.48rem}
.ws-book.filled .bk-skel{opacity:0}
.ws-book.filled .bk-full{opacity:1}
@media(prefers-reduced-motion:no-preference){.ws-book .bk-skel,.ws-book .bk-full{transition:opacity .38s ease}}
/* the fake cursor that drives the booking story (decorative, aria-hidden) */
.ws-cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:6;pointer-events:none;opacity:0;
  transform:translate(-30px,200px);filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));will-change:transform}
.ws-cursor svg{display:block;width:100%;height:100%}

/* ---- Custom-systems demo: the board and the trend graph live INSIDE one running "system" window,
   so the graph reads as a real panel of the system, not a bolt-on chart below it. ---- */
.sysframe{background:var(--canvas);border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 22px 48px -30px rgba(0,0,0,.34)}
.sys-chrome{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--hair)}
.sys-dots{display:flex;gap:6px}
.sys-dots i{width:9px;height:9px;border-radius:50%;background:var(--hair);display:block}
.sys-name{font-family:var(--font-display);font-weight:700;font-size:.8rem;color:var(--sec)}
.sys-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight:600;
  font-size:.64rem;color:var(--ter);text-transform:uppercase;letter-spacing:.05em}
.sys-live .pulse{width:7px;height:7px;border-radius:50%;background:var(--red-mark)}
@media(prefers-reduced-motion:no-preference){.sys-live .pulse{animation:livepulse 2s ease-in-out infinite}}
.sys-inner{padding:var(--space-4)}
.sys-panel-lbl{font-family:var(--font-display);font-weight:700;font-size:.66rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ter);margin-bottom:var(--space-3)}
/* inside the frame the columns sit on the panel surface so they read as one board within the app */
.sysframe .live-col{background:var(--panel)}
/* the trend graph is an embedded panel of the same window: a divider, not a separate floating card */
.sysframe .live-graph{margin-top:var(--space-4);padding-top:var(--space-4);border:0;border-top:1px solid var(--hair);
  border-radius:0;background:transparent}
.live-graph-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);margin-bottom:var(--space-3)}
.live-graph-head .lbl{font-family:var(--font-display);font-weight:700;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ter)}
.live-graph .live-chart{height:124px;flex:none;width:100%;max-width:none;gap:8px}
.live-graph .live-chart b{border-radius:4px 4px 0 0}
@media(max-width:560px){.live-graph .live-chart{height:100px;gap:6px}}
@media(max-width:560px){.live-graph .live-chart{height:92px;gap:6px}}
@media(max-width:360px){.ws-book .bk-time{white-space:normal}}

/* ---- Pricing: quote panel headline (no dollar amount) ---- */
.aside-price .price-lead{font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,2.8vw,1.9rem);
  letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.aside-price .btn{display:inline-block}