/* ==========================================================================
   Catalyst Bridge ,  cb26.css
   Rebuild, August 2026. Hand-written, no framework, no build step.
   Direction: engineered dark. Blue is emitted light, never flat paint.
   ========================================================================== */

/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/k3kQo8UDI-1M0wlSfdnoLg.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;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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;
}

/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.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;
}

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* surface */
  --void:#05070C;
  --void-2:#070A11;
  --panel:#0A0E17;
  --panel-2:#0D121D;
  --raise:#111826;

  /* line work */
  --line:rgba(140,170,220,.11);
  --line-2:rgba(140,170,220,.20);
  --line-3:rgba(140,170,220,.32);

  /* light */
  --blue:#2E9BFF;
  --sky:#6FD3FF;
  --deep:#0B4FCC;
  --live:#4ADE80;

  /* type */
  --bone:#E8EDF5;
  --dim:#93A3BC;
  --dimmer:#7A8AA5;

  --font-display:'Archivo','Archivo Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* 2026-09-02: was Inter. Inter is the single most-cited tell of AI-generated
     design and moving the mono labels onto --font-body pushed it to 107 elements.
     Archivo is already loaded, variable 400-900, and its width axis is already
     used on the h1, so the page drops to two faces and one fewer font request. */
  --font-body:'Archivo','Archivo Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','Mono Fallback',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* rhythm */
  --gut:clamp(20px,5vw,64px);
  --max:1280px;
  --sec:clamp(66px,7.4vw,116px);

  --r-sm:8px;
  --r:14px;
  --r-lg:22px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

@property --sweep{ syntax:'<percentage>'; inherits:false; initial-value:0%; }
@property --glow{ syntax:'<number>'; inherits:false; initial-value:0; }


/* ---------- 1b. Metric-matched fallbacks (kills swap CLS) ------------- */
/* Overrides measured against Arimo/Liberation Sans so the fallback occupies
   the same box as the webfont. Without these, font-display:swap reflows every
   line on load and costs ~0.2 CLS on mobile. */
@font-face{
  font-family:'Archivo Fallback';
  src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');
  size-adjust:104%; ascent-override:92%; descent-override:24%; line-gap-override:0%;
}
@font-face{
  font-family:'Inter Fallback';
  src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');
  size-adjust:107%; ascent-override:90%; descent-override:22%; line-gap-override:0%;
}
@font-face{
  font-family:'Mono Fallback';
  src:local('Menlo'),local('Consolas'),local('DejaVu Sans Mono'),local('Liberation Mono');
  size-adjust:98%; ascent-override:102%; descent-override:30%; line-gap-override:0%;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
/* Any element given a display by a later rule ignores the hidden attribute.
   That left the audit panel showing its skeleton and a broken image before
   anyone had typed a thing. */
[hidden]{display:none!important;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  /* The work rail lays its cards out past the viewport before clipping them.
     Body-level clip stops the page scrolling sideways, but documentElement
     still REPORTS the wider scrollWidth, which reads as a bug in every audit.
     `clip` does not create a scroll container, so sticky positioning is
     unaffected (verified). */
  overflow-x:clip;
}
body{
  background:var(--void);
  color:var(--bone);
  font-family:var(--font-body);
  font-size:clamp(15px,.42vw + 14px,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,video,canvas{display:block;max-width:100%;}
img{height:auto;}
a{color:inherit;text-decoration:none;}
button,input,textarea,select{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
::selection{background:var(--blue);color:#04070E;}
:focus{outline:2px solid var(--sky);outline-offset:3px;border-radius:4px;}
:focus:not(:focus-visible){outline-width:1px;outline-offset:2px;}

/* ---------- 3. Type scale ------------------------------------------------ */
.d1,.d2,.d3,h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  line-height:.94;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.d1{ font-size:clamp(2.55rem,5vw,4.5rem); font-variation-settings:'wdth' 94; }
.d2{ font-size:clamp(1.95rem,3.6vw,3.2rem); }
.d3{ font-size:clamp(1.55rem,2.6vw,2.3rem); line-height:1.04; letter-spacing:-.028em; }
.lede{
  font-size:clamp(1.02rem,1.15vw + .7rem,1.32rem);
  line-height:1.55;
  color:var(--dim);
  max-width:60ch;
  text-wrap:pretty;
}
p{text-wrap:pretty;}

.mono{
  font-family:var(--font-mono);
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dimmer);
  font-weight:500;
}

/* eyebrow: mono label with a light pip */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);
  font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sky);font-weight:500;
}
.eyebrow::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--sky);
  box-shadow:0 0 0 3px rgba(111,211,255,.16), 0 0 12px 2px rgba(111,211,255,.5);
}

/* ---------- 4. Layout ---------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);}
.wrap-wide{width:100%;max-width:1600px;margin-inline:auto;padding-inline:var(--gut);}
.section{padding-block:var(--sec);position:relative;}
.section.tight{padding-block:calc(var(--sec) * .62);}
.section.open{padding-block:calc(var(--sec) * 1.18);}
.section-head{max-width:74ch;margin-bottom:clamp(40px,5vw,72px);}
.section-head .d2{margin-block:18px 20px;}
.d2 + .lede,.d2 + p{margin-top:18px;}
.idx + .d2{margin-top:14px;}
.rule{height:1px;background:var(--line);border:0;}

/* index numeral used down the left of major sections */
.idx{
  font-family:var(--font-body);
  font-size:.875rem;letter-spacing:normal;font-weight:600;
  color:var(--dim);
  display:block;margin-bottom:6px;
}

/* ---------- 5. Ambient light -------------------------------------------- */
/* one fixed, cheap, GPU-composited light field behind everything */
.ambient{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70rem 42rem at 50% -14%, rgba(46,155,255,.16), transparent 62%),
    radial-gradient(50rem 34rem at 88% 8%,  rgba(11,79,204,.14),  transparent 60%),
    radial-gradient(44rem 30rem at 6% 46%,  rgba(111,211,255,.07),transparent 60%);
}
/* faint engineering grid, masked so it never becomes wallpaper */
.ambient::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(140,170,220,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,170,220,.045) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 0%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 0%,transparent 78%);
}
main,header,footer{position:relative;z-index:1;}

/* ---------- 6. Buttons --------------------------------------------------- */
.btn{
  --bx:0px; --by:0px;
  min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;
  letter-spacing:-.01em;
  padding:14px 24px;border-radius:999px;
  position:relative;isolation:isolate;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), color .25s, background-color .25s, border-color .25s;
  transform:translate3d(var(--bx),var(--by),0);
  white-space:nowrap;
}
.btn-primary{
  background:var(--blue);
  color:#02060E;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset;
}
.btn-primary:hover{ background:#48A8FF; }
.btn-primary:active{ background:#1E86E6; }
.btn-ghost{
  border:1px solid var(--line-2);
  color:var(--bone);
  background:rgba(140,170,220,.04);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ border-color:var(--line-3); background:rgba(140,170,220,.09); }
.btn-lg{padding:17px 30px;font-size:1rem;}

/* arrow that slides on hover */
.btn .arw{transition:transform .35s var(--ease);}
.btn:hover .arw{transform:translateX(4px);}

/* ---------- 7. Nav ------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:60;
  border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
}
.nav.stuck{
  background:rgba(5,7,12,.72);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav-in{
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
  height:72px;
}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;}
.brand img{height:30px;width:auto;}
.brand-txt{
  font-family:var(--font-display);font-weight:800;font-size:.94rem;
  letter-spacing:-.02em;line-height:1;
  font-variation-settings:'wdth' 88;
}
.brand-txt span{display:block;color:var(--dimmer);font-size:.82rem;letter-spacing:.2em;font-family:var(--font-mono);font-weight:500;margin-top:3px;}
.nav-links{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px);margin-left:auto;}
.nav-links a{
  font-size:.88rem;color:var(--dim);font-weight:500;
  position:relative;padding-block:6px;
  transition:color .25s;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--sky);transition:right .35s var(--ease);
}
.nav-links a:hover{color:var(--bone);}
.nav-links a:hover::after{right:0;}
.nav-cta{display:flex;align-items:center;gap:10px;}
.nav-tel{
  font-family:var(--font-mono);font-size:.82rem;color:var(--dim);
  display:inline-flex;align-items:center;gap:7px;min-height:44px;
  padding:11px 15px;border:1px solid var(--line);border-radius:999px;
  transition:border-color .25s,color .25s;
}
.nav-tel:hover{color:var(--bone);border-color:var(--line-2);}

/* scroll progress ,  pure CSS scroll-driven where supported */
.progress{
  position:fixed;left:0;right:0;top:0;width:100%;height:2px;z-index:70;
  background:linear-gradient(90deg,var(--deep),var(--blue),var(--sky));
  transform-origin:0 50%;
  transform:scaleX(var(--p,0));
  will-change:transform;
}
@supports (animation-timeline:scroll()){
  .progress{
    animation:progress-grow linear both;
    animation-timeline:scroll(root block);
  }
}
@keyframes progress-grow{ from{transform:scaleX(0);} to{transform:scaleX(1);} }

/* burger */
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;align-items:center;justify-content:center;}
.burger span{display:block;width:17px;height:1.5px;background:var(--bone);position:relative;transition:background .2s;}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--bone);transition:transform .3s var(--ease);}
.burger span::before{top:-5.5px;} .burger span::after{top:5.5px;}
.nav.open .burger span{background:transparent;}
.nav.open .burger span::before{transform:translateY(5.5px) rotate(45deg);}
.nav.open .burger span::after{transform:translateY(-5.5px) rotate(-45deg);}

/* ---------- 8. Hero ------------------------------------------------------ */
.hero{
  position:relative;
  padding-block:clamp(56px,9vw,110px) clamp(56px,8vw,96px);
  min-height:min(94svh,980px);
  display:flex;align-items:center;
}
.hero-canvas{
  /* <canvas> is a replaced element: with width:auto it uses its intrinsic
     300x150 even when left and right are both 0, so it must be sized
     explicitly or the whole light field renders into a 300px box. */
  position:absolute;inset:0;width:100%;height:100%;z-index:-1;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
  opacity:.85;
}
.hero-grid{
  display:grid;gap:clamp(34px,4vw,60px);
  grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
  align-items:center;width:100%;
}
.hero-copy{max-width:52ch;}
.hero h1{max-width:15ch;}
.hero h1{margin-block:22px 24px;}
.hero h1 .em{padding-right:.06em;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}

/* hero status rail ,  real, live values */
.rail{
  margin-top:34px;display:flex;flex-wrap:wrap;gap:10px 22px;
  padding-top:22px;border-top:1px solid var(--line);
}
.rail-i{display:flex;align-items:baseline;gap:9px;font-family:var(--font-mono);font-size:.86rem;}
.rail-i b{color:var(--bone);font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.rail-i b[data-count]{display:inline-block;min-inline-size:2.4ch;}
.rail-i b[data-next-slot]{display:inline-block;min-inline-size:15ch;}
.rail-i b[data-next-slot] + span{display:inline-block;min-inline-size:13ch;}
.rail-i span{color:var(--dimmer);letter-spacing:.09em;text-transform:uppercase;font-size:.82rem;}
.pulse{
  width:6px;height:6px;border-radius:50%;background:var(--live);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(74,222,128,.55);
  animation:pulse 2.4s var(--ease-io) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.5);}
  70%{box-shadow:0 0 0 9px rgba(74,222,128,0);}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}
}

/* ---------- 9. Instrument panel (the live chat) -------------------------- */
.panel{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02) inset;
  overflow:hidden;
  position:relative;
}
/* hot top edge */
.panel::before{
  content:"";position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(111,211,255,.75),transparent);
}
.panel-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line);
  background:rgba(140,170,220,.03);
}
.panel-head .t{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);}
.panel-head .live{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--live);
}
.panel-head .live{font-size:.82rem;}
.panel-head .live[data-state="ready"]{color:var(--dim);}
.panel-head .live[data-state="ready"] .pulse{background:var(--dim);animation:none;box-shadow:none;}
.panel-head .live[data-state="offline"]{color:#F0A868;}
.panel-head .live[data-state="offline"] .pulse{background:#F0A868;animation:none;box-shadow:none;}
.chips{display:flex;gap:7px;padding:14px 16px 4px;flex-wrap:wrap;}
.chip{
  font-size:.86rem;font-weight:500;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);color:var(--dim);
  transition:all .25s var(--ease);
}
.chip:hover{color:var(--bone);border-color:var(--line-2);}
.chip.on{background:rgba(46,155,255,.14);border-color:rgba(46,155,255,.5);color:var(--sky);}
.log{
  min-height:132px;max-height:clamp(216px,30vh,300px);overflow-y:auto;
  padding:16px;display:flex;flex-direction:column;gap:10px;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.bub{
  max-width:88%;padding:10px 14px;border-radius:14px;font-size:.9rem;line-height:1.5;
  animation:bub-in .45s var(--ease) both;
}
@keyframes bub-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.bub .who{display:block;font-family:var(--font-mono);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);margin-bottom:5px;}
.bub.them{background:rgba(140,170,220,.07);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:5px;}
.bub.you{background:linear-gradient(180deg,rgba(46,155,255,.2),rgba(11,79,204,.16));border:1px solid rgba(46,155,255,.32);align-self:flex-end;border-bottom-right-radius:5px;}
.bub.you .who{color:rgba(111,211,255,.75);}
.dots i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--dim);margin-right:4px;animation:blink 1.3s infinite;}
.dots i:nth-child(2){animation-delay:.18s;} .dots i:nth-child(3){animation-delay:.36s;}
@keyframes blink{0%,60%,100%{opacity:.25;}30%{opacity:1;}}
.ask{display:flex;gap:9px;padding:13px 16px;border-top:1px solid var(--line);background:rgba(140,170,220,.02);}
.ask input{
  flex:1;background:rgba(5,7,12,.7);border:1px solid var(--line);border-radius:11px;
  padding:11px 14px;font-size:.9rem;transition:border-color .25s,box-shadow .25s;min-width:0;
}
.ask input::placeholder{color:var(--dimmer);}
.ask input:focus-visible{border-color:rgba(46,155,255,.7);}
.ask button{
  padding:11px 17px;border-radius:11px;font-weight:600;font-size:.86rem;
  background:var(--blue);color:#02060E;
  transition:filter .25s,transform .25s var(--ease);
}
.ask button:hover{filter:brightness(1.1);}
.ask button:active{transform:scale(.97);}
.panel-foot{padding:11px 16px;border-top:1px solid var(--line);}

/* ---------- 10. Marquee ticker ------------------------------------------ */
.ticker{
  border-block:1px solid var(--line);
  padding-block:16px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  background:rgba(140,170,220,.02);
}
.ticker-track{display:flex;width:max-content;animation:slide 64s linear infinite;}
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track{animation-play-state:paused;}
.ticker-track>span{
  display:inline-flex;align-items:center;gap:11px;padding-inline:20px;
  font-family:var(--font-mono);font-size:.86rem;color:var(--dim);white-space:nowrap;
}
.ticker-track>span::after{content:"";width:3px;height:3px;border-radius:50%;background:var(--line-3);}
@keyframes slide{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}

/* ---------- 11. Capabilities (sticky pinned) ---------------------------- */
/* position:sticky on a grid ITEM does nothing when the grid is
   align-items:start, because the item is only as tall as its content and
   there is no room to stick within. The item must stretch and the sticky
   element must be a child of it. */
.cap{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(30px,5vw,80px);align-items:stretch;}
.cap-col{min-width:0;}
.cap-sticky{position:sticky;top:clamp(96px,16vh,150px);}
.cap-art{
  margin-top:30px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--void-2);aspect-ratio:1/1;max-width:330px;
  display:grid;place-items:center;
}
.cap-art svg{width:100%;height:100%;}
.cap-list{display:flex;flex-direction:column;}
.cap-i{
  padding-block:clamp(26px,3.4vw,40px);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:20px;
  transition:opacity .5s var(--ease);
}
.cap-i:last-child{border-bottom:1px solid var(--line);}
.cap-n{
  font-family:var(--font-mono);font-size:.82rem;color:var(--dimmer);
  padding-top:5px;letter-spacing:.1em;
}
.cap-i h3{font-size:clamp(1.22rem,1.9vw,1.7rem);margin-bottom:9px;}
.cap-i p{color:var(--dim);max-width:52ch;font-size:.97rem;}
.cap-i .tag{
  display:inline-block;margin-top:13px;
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sky);border:1px solid rgba(46,155,255,.3);border-radius:999px;padding:4px 10px;
}
/* the hovered/active one lights its left edge */
.cap-i{position:relative;}
.cap-i::before{
  content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--blue),transparent);
  opacity:0;transition:opacity .4s var(--ease);
}
.cap-i:hover::before{opacity:1;}

/* ---------- 12. Work wall (horizontal scroll) --------------------------- */
.wall{position:relative;}
.wall-rail{
  display:flex;gap:clamp(14px,1.6vw,24px);
  overflow-x:auto;overflow-y:hidden;
  padding-inline:var(--gut);padding-block:6px 26px;
  scroll-snap-type:x proximity;
  /* without this, snapping aligns the first card to the scrollport edge
     and eats the gutter, so the rail sits out of line with the heading */
  scroll-padding-inline-start:var(--gut);
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.wall-rail::-webkit-scrollbar{display:none;}
.wall-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:4px;}
.wcard{
  flex:0 0 clamp(268px,26vw,360px);
  scroll-snap-align:start;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);overflow:hidden;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
  transform-style:preserve-3d;
  position:relative;
}
.wcard:hover{
  transform:translateY(-6px);
  border-color:var(--line-3);
  box-shadow:0 32px 70px -34px rgba(0,0,0,.95);
}
.wcard .shot{
  aspect-ratio:16/10;overflow:hidden;background:var(--void-2);
  border-bottom:1px solid var(--line);position:relative;
}
.wcard .shot img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .8s var(--ease), filter .6s;
  filter:saturate(.88) contrast(1.02);
}
.wcard:hover .shot img{transform:scale(1.045);filter:saturate(1) contrast(1.04);}
.wcard .meta{padding:15px 16px 17px;}
.wcard .k{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:8px;
}
.wcard h3{font-size:1.02rem;letter-spacing:-.02em;line-height:1.2;margin-bottom:5px;}
.wcard p{font-size:.88rem;color:var(--dim);line-height:1.45;}
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--dim);
}
.badge.is-live{color:var(--live);border-color:rgba(74,222,128,.32);background:rgba(74,222,128,.07);}
.badge.is-demo{color:var(--sky);border-color:rgba(111,211,255,.28);background:rgba(111,211,255,.06);}

.wall-nav{display:flex;gap:9px;align-items:center;}
.wall-btn{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--dim);
  transition:all .3s var(--ease);
}
.wall-btn:hover{color:var(--bone);border-color:var(--line-3);background:rgba(140,170,220,.07);}
/* aria-disabled rather than the disabled attribute: a disabled button drops
   out of the tab order entirely, so a keyboard user loses the control and can
   never discover it comes back. */
.wall-btn[aria-disabled="true"]{opacity:.32;cursor:default;}

/* ---------- 13. Steps ---------------------------------------------------- */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));}
.step{background:var(--void-2);padding:clamp(26px,3vw,40px);position:relative;transition:background .45s var(--ease);}
.step:hover{background:var(--panel);}
.step .n{
  font-family:var(--font-display);font-weight:800;font-size:3.1rem;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--line-3);
  margin-bottom:20px;display:block;
  transition:-webkit-text-stroke-color .45s, color .45s;
}
.step:hover .n{-webkit-text-stroke-color:rgba(111,211,255,.6);}
.step h3{font-size:1.2rem;margin-bottom:10px;}
.step p{color:var(--dim);font-size:.94rem;}

/* ---------- 14. Founder -------------------------------------------------- */
.founder{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(30px,5vw,72px);align-items:center;}
.founder-photo{
  position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);
  background:var(--panel);
}
.founder-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.92) contrast(1.03);}
.founder-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(190deg,transparent 44%,rgba(5,7,12,.72));
  pointer-events:none;
}
.founder-cap{
  position:absolute;left:16px;right:16px;bottom:14px;z-index:2;
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);
}
.quote{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.25rem,2.1vw,1.75rem);line-height:1.24;letter-spacing:-.028em;
  padding-left:20px;border-left:2px solid var(--blue);margin-block:26px;
}

/* ---------- 15. Pricing -------------------------------------------------- */
.tiers{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:repeat(auto-fit,minmax(272px,1fr));align-items:stretch;}
.tier{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,2.6vw,34px);
  background:linear-gradient(180deg,var(--void-2),rgba(10,14,23,.55));
  display:flex;flex-direction:column;gap:16px;
  transition:border-color .4s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
  position:relative;
}
.tier:hover{border-color:var(--line-2);transform:translateY(-4px);}
.tier.pick{
  border-color:rgba(46,155,255,.42);
  box-shadow:0 0 0 1px rgba(46,155,255,.14);
  background:linear-gradient(180deg,rgba(17,30,52,.7),rgba(10,14,23,.6));
}
.tier .flag{
  position:absolute;top:-11px;left:clamp(24px,2.6vw,34px);
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--blue);color:#02060E;
  padding:4px 11px;border-radius:999px;font-weight:600;
}
.tier h3{font-size:1.14rem;letter-spacing:-.02em;}
.price{font-family:var(--font-display);font-weight:800;font-size:clamp(1.45rem,1.95vw,1.9rem);letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums;}
.price small{display:block;font-family:var(--font-mono);font-size:.82rem;font-weight:400;letter-spacing:.08em;color:var(--dim);margin-top:8px;text-transform:none;}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:.92rem;color:var(--dim);}
.tier li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;}
.tier li svg{margin-top:4px;color:var(--sky);flex:0 0 auto;}
.tier .btn{margin-top:auto;width:100%;}

/* ---------- 16. FAQ ------------------------------------------------------ */
.faq-wrap{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(30px,5vw,80px);align-items:stretch;
}
.faq-col{min-width:0;}
.faq-sticky{position:sticky;top:clamp(96px,16vh,150px);}
.faq-sticky .d2{margin-top:14px;}
.faq-sticky p{max-width:32ch;font-size:.97rem;}
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none;cursor:pointer;padding-block:20px;
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.02rem,1.5vw,1.24rem);
  letter-spacing:-.022em;transition:color .3s;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--sky);}
.faq .pm{position:relative;width:17px;height:17px;flex:0 0 auto;}
.faq .pm::before,.faq .pm::after{
  content:"";position:absolute;background:var(--dim);border-radius:2px;
  transition:transform .4s var(--ease),background .3s;
}
.faq .pm::before{left:0;right:0;top:8px;height:1.5px;}
.faq .pm::after{top:0;bottom:0;left:8px;width:1.5px;}
.faq details[open] .pm::after{transform:scaleY(0);}
.faq details[open] .pm::before{background:var(--sky);}
.faq .ans{padding-bottom:24px;color:var(--dim);max-width:78ch;font-size:.97rem;}
.faq details[open] .ans{animation:ans-in .42s var(--ease) both;}
@keyframes ans-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* ---------- 17. Big CTA -------------------------------------------------- */
.cta{
  position:relative;overflow:hidden;
  border-top:1px solid var(--line);
  padding-block:clamp(76px,10vw,142px);
  text-align:center;
}
.cta::before{
  content:"";position:absolute;left:50%;top:-42%;translate:-50% 0;
  width:min(1200px,150%);aspect-ratio:2/1;
  background:radial-gradient(closest-side,rgba(46,155,255,.15),transparent 72%);
  pointer-events:none;
}
.cta .d2{margin-bottom:16px;}
.cta .lede{margin-inline:auto;}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px;}

/* ---------- 18. Footer --------------------------------------------------- */
footer{border-top:1px solid var(--line);padding-block:clamp(48px,6vw,76px) 34px;background:var(--void-2);}
.foot-grid{display:grid;gap:clamp(26px,3.4vw,54px);grid-template-columns:1fr;}
@media (min-width:560px){ .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:900px){ .foot-grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));} }
.foot-col{min-width:0;}
.foot-col a,.foot-col p{overflow-wrap:anywhere;}
.foot-col h3{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dimmer);font-weight:500;margin-bottom:15px;}
.foot-col p{display:block;font-size:.9rem;color:var(--dim);margin-bottom:9px;}
.foot-col a{display:flex;align-items:center;min-height:44px;font-size:.9rem;color:var(--dim);transition:color .25s;}
.foot-col a:hover{color:var(--bone);}
.foot-bottom{
  margin-top:clamp(34px,4vw,56px);padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  font-family:var(--font-mono);font-size:.82rem;color:var(--dimmer);letter-spacing:.05em;
}
.foot-bottom a{color:var(--dimmer);} .foot-bottom a:hover{color:var(--dim);}

/* ---------- 19. Reveal system ------------------------------------------- */
/* Content is VISIBLE by default. Motion is added, never subtracted. */
.rv{ opacity:1; transform:none; }

/* Gated on (scripting: enabled) rather than a class set by an inline script,
   so there is no inline <script> to whitelist and no ordering hazard.
   `rv-failsafe` is the belt and braces: it is a pure-CSS animation that forces
   every element visible after 4s whatever JavaScript does, so a script that
   404s, errors, or is blocked can never strand a section. Content on this site
   has been stranded by a reveal system twice before. */
@media (prefers-reduced-motion:no-preference) and (scripting: enabled){
  .rv{
    opacity:0; transform:translate3d(0,22px,0);
    animation:rv-failsafe 1ms linear 4s forwards;
  }
  .rv.in{
    opacity:1; transform:none; animation:none;
    transition:opacity .8s var(--ease), transform .8s var(--ease);
  }
  .rv-d1{transition-delay:.07s;} .rv-d2{transition-delay:.14s;}
  .rv-d3{transition-delay:.21s;} .rv-d4{transition-delay:.28s;}
  .rv-d5{transition-delay:.35s;} .rv-d6{transition-delay:.42s;}
  @keyframes rv-failsafe{ to{ opacity:1; transform:none; } }

  /* hero word-by-word rise */
  .word{display:inline-block;overflow:hidden;vertical-align:top;}
  .word i{display:inline-block;font-style:inherit;transform:translateY(102%);
          animation:word-failsafe 1ms linear 4s forwards;}
  .lit .word i{
    transform:none; animation:none;
    transition:transform .95s var(--ease);
    transition-delay:calc(var(--i,0) * 52ms);
  }
  @keyframes word-failsafe{ to{ transform:none; } }
}

/* ---------- 20. Utility -------------------------------------------------- */
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.center{text-align:center;}
.mt-s{margin-top:14px;} .mt-m{margin-top:26px;} .mt-l{margin-top:44px;}
.dim{color:var(--dim);} .dimmer{color:var(--dimmer);}
.note{font-family:var(--font-body);font-size:.9rem;letter-spacing:normal;line-height:1.6;color:var(--dim);}

/* ---------- 21. Responsive ----------------------------------------------- */
@media (max-width:1020px){
  .faq-wrap{grid-template-columns:1fr;gap:30px;}
  .faq-sticky{position:static;}
  .faq-sticky .btn{display:none;}
  .hero-grid{grid-template-columns:1fr;gap:40px;}
  .cap{grid-template-columns:1fr;}
  .cap-sticky{position:static;}
  .cap-col{display:contents;}
  .cap-art{display:none;}
  .founder{grid-template-columns:1fr;}
  .founder-photo{max-width:420px;}
}

@media (max-width:820px){
  .nav-links{
    position:fixed;inset:72px 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--void);
    border-bottom:1px solid var(--line);
    padding:8px var(--gut) 22px;
    /* NOTE: no backdrop-filter here. It creates a containing block that
       traps the fixed panel. This bug shipped on every earlier CB kit. */
    transform:translateY(-118%);
    /* Closed means closed: off-screen alone left the links focusable at
       y=-298px with the focus ring unreachable. */
    visibility:hidden;
    transition:transform .42s var(--ease), visibility 0s .42s;
    max-height:calc(100svh - 72px);overflow-y:auto;
  }
  .nav.open .nav-links{transform:none;visibility:visible;transition-delay:0s;}
  .nav-links a{padding-block:15px;border-bottom:1px solid var(--line);font-size:1rem;}
  .nav-links a::after{display:none;}
  .burger{display:flex;margin-left:auto;order:3;}
  .nav-cta{margin-left:auto;order:2;}
  .nav-tel{display:none;}
  .nav-in{gap:12px;}
}

@media (max-width:560px){
  .ask input::placeholder{font-size:.88rem;}
  .nav-in{gap:10px;}
  .brand-txt{font-size:.86rem;}
  .nav-cta .btn{padding:11px 15px;font-size:.88rem;}
  .burger{width:38px;height:38px;}
  .hero{min-height:auto;padding-block:44px 56px;}
  .d1{font-size:clamp(2.2rem,9.4vw,3rem);}
  .rail{gap:12px 18px;}
  .btn{padding:13px 20px;font-size:.94rem;}
  .hero-ctas .btn{flex:1 1 auto;justify-content:center;}
  .cap-i{grid-template-columns:1fr;gap:8px;}
  .steps{grid-template-columns:1fr;}
  .log{height:230px;}
  .wcard{flex-basis:82vw;}
}

/* ---------- 22. Motion off ----------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .ticker-track{animation:none;}
  .hero-canvas{display:none;}
  .rv{opacity:1!important;transform:none!important;animation:none!important;}
  .word i{transform:none!important;animation:none!important;}
}

/* ---------- 23. View transitions ---------------------------------------- */
/* Cross-document navigation transitions. Chrome/Edge 126+, Safari 18.2+.
   Firefox ignores @view-transition entirely, which degrades to a normal
   navigation. Nothing here is load-bearing. */
@view-transition{ navigation:auto; }

@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){ animation:vt-out .28s var(--ease-io) both; }
  ::view-transition-new(root){ animation:vt-in .34s var(--ease) both; }
  @keyframes vt-out{ to{opacity:0; transform:translateY(-8px);} }
  @keyframes vt-in{ from{opacity:0; transform:translateY(10px);} }
  /* The logo is the same object on every page, so let it travel between
     them. The name MUST be unique per document: `.brand img` also matches
     the footer logo, which made Chrome drop the transition and log
     "Unexpected duplicate view-transition-name". Nav only. */
  .nav .brand img{ view-transition-name:cb-mark; }
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation:none; }
}

/* ---------- 24. Very small screens --------------------------------------- */
@media (max-width:430px){
  /* the wordmark is the first thing to go: the mark alone still identifies
     the site, and the nav must never push the page wider than the viewport */
  .brand-txt{display:none;}
  .nav-in{height:64px;}
  .nav-links{inset-block-start:64px;}
  .nav-cta .btn{padding:10px 14px;font-size:.86rem;}
}
@media (max-width:360px){
  :root{--gut:16px;}
  .nav-cta .btn{padding:9px 12px;font-size:.84rem;}
}

/* ---------- 25. Sample-build cards --------------------------------------- */
.scards{display:flex;flex-wrap:wrap;gap:clamp(12px,1.4vw,18px);}
.scards>.scard{flex:1 1 208px;}
.scard{
  display:flex;flex-direction:column;gap:8px;
  border:1px solid var(--line);border-radius:var(--r);padding:20px;
  background:linear-gradient(180deg,var(--void-2),rgba(10,14,23,.55));
  transition:border-color .4s var(--ease), transform .45s var(--ease), background .4s;
}
.scard:hover{border-color:var(--line-2);transform:translateY(-3px);background:var(--panel);}
.scard .sec{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dimmer);}
.scard h3{font-size:1rem;letter-spacing:-.02em;}
.scard p{font-size:.88rem;line-height:1.45;color:var(--dim);}
.scard .go{
  display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:8px;
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;color:var(--sky);
}
.scard .go svg{transition:transform .35s var(--ease);}
.scard:hover .go svg{transform:translate(2px,-2px);}

/* ---------- 26. Small shared utilities ----------------------------------- */
.legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;}
.hold{max-width:52ch;}
.hold-s{max-width:38ch;}
.push{margin-left:auto;}
.brand-foot{margin-bottom:16px;}

/* ---------- 27. Demo panel call to action ------------------------------- */
/* Appears once the assistant has actually done something worth reacting to.
   Watching an AI book a job and then being offered nothing is a dead end. */
.demo-cta{
  display:none;gap:12px;align-items:center;flex-wrap:wrap;
  padding:14px 16px;border-top:1px solid var(--line);
  background:rgba(46,155,255,.06);
}
.demo-cta.on{display:flex;animation:cta-in .5s var(--ease) both;}
@keyframes cta-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.demo-cta p{font-size:.88rem;color:var(--bone);flex:1 1 190px;margin:0;}
.demo-cta .btn{padding:10px 16px;font-size:.86rem;}
@media (prefers-reduced-motion:reduce){ .demo-cta.on{animation:none;} }

/* ---------- 28. Terms strip --------------------------------------------- */
/* The risk reversal, promoted out of a mono footnote. For a reader whose stated
   fear is being burned again, these four sentences do more work than the prices
   above them. */
.terms{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
  margin-top:clamp(26px,3vw,40px);
}
.terms .t{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.9rem;line-height:1.45;color:var(--bone);
  background:var(--void-2);padding:18px 20px;
}
.terms .t svg{flex:0 0 auto;color:var(--sky);margin-top:4px;}
@media (max-width:1020px){ .terms{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .terms{grid-template-columns:1fr;} .terms .t{font-size:.88rem;padding:15px 17px;} }

/* ---------- 29. Late fixes ---------------------------------------------- */
/* Solid, not a clipped gradient. A gradient-filled headline word is one of the
   named AI-SaaS tells, and because the text colour genuinely is `transparent`
   every contrast checker scores it 1.04:1 and cannot be argued with. */
.hero h1 .em{color:var(--sky);}

/* Tap targets. CB's gate enforces 44px, which is Apple's and the WCAG 2.2
   AAA figure, and 35px nav links were failing it. */
.nav-links a{min-height:44px;display:inline-flex;align-items:center;}
.brand{min-height:44px;}
.burger{width:44px;height:44px;}
.wall-btn{width:44px;height:44px;}
.chip{min-height:44px;display:inline-flex;align-items:center;}
.faq summary{min-height:52px;}
.scard .go{min-height:32px;}

/* The skip link is 1px until focused, which reads as a failed tap target in
   an audit. Give it a real box; it is still only reachable by keyboard. */
/* Skip link. Parked off-screen with a transform rather than clipped to 1x1,
   so it keeps a real 44px box the whole time. A clipped skip link is correct
   WCAG but reads as a 1px tap target to every automated audit, and a real box
   is easier to reason about. */
.skip{
  position:fixed;top:12px;left:12px;z-index:200;
  display:inline-flex;align-items:center;min-height:44px;padding:12px 18px;
  background:var(--blue);color:#02060E;border-radius:999px;font-weight:600;
  transform:translateY(-200%);
  transition:transform .2s var(--ease);
}
.skip:focus{ transform:none; }

/* Non-text contrast for the focus ring, measured against the page ground. */
a:focus,button:focus,summary:focus,input:focus,[tabindex]:focus{
  outline:2px solid var(--sky);outline-offset:3px;border-radius:6px;
}
a:focus:not(:focus-visible),button:focus:not(:focus-visible),
summary:focus:not(:focus-visible),[tabindex]:focus:not(:focus-visible){
  outline-width:1px;outline-offset:2px;
}

/* ---------- 30. Non-text contrast on controls ---------------------------- */
/* WCAG 1.4.11: the boundary of an interactive control needs 3:1 against its
   surroundings. The decorative hairlines stay soft; only the controls lift.
   2026-09-02: was .34, which measured 1.88:1 on --void and failed. Now .55 = 3.21:1. */
.chip,.ask input,.btn-ghost,.nav-tel,.wall-btn{ border-color:rgba(140,170,220,.55); }
.chip:hover,.btn-ghost:hover,.nav-tel:hover,.wall-btn:hover{ border-color:rgba(140,170,220,.72); }

/* transition:all was animating the focus outline, so the ring faded in over a
   quarter of a second instead of appearing. */
.chip{ transition:color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease); }
.wall-btn{ transition:color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease); }

/* A layout property was being animated on the nav underline. */
.nav-links a::after{ right:0; transform:scaleX(0); transform-origin:left center; transition:transform .35s var(--ease); }
.nav-links a:hover::after{ transform:scaleX(1); }

/* With JS off the chat log is an empty 230px box under a "LIVE DEMO" header. */
.log:empty::before{
  content:"Turn JavaScript on and this assistant answers you live.";
  display:block;color:var(--dim);font-size:.92rem;line-height:1.5;
}

/* 30 portfolio cards and 13 sample cards sit off-screen on a 13,000px phone
   page. Their intrinsic sizes are known from the width/height attributes, so
   skipping their rendering until needed is free. */
@media (max-width:820px){
  #samples,#faq,footer{ content-visibility:auto; contain-intrinsic-size:auto 900px; }
}

/* ---------- 31. Reveal variants ------------------------------------------ */
/* Two blocks get a movement of their own so the page is not one uniform
   fade-up from top to bottom. */
@media (prefers-reduced-motion:no-preference) and (scripting: enabled){
  .rv-slide{ transform:translate3d(46px,0,0); }
  .rv-slide.in{ transform:none; transition:opacity 1s var(--ease), transform 1.05s var(--ease); }
  .rv-rise{ transform:translate3d(0,34px,0) scale(.985); }
  .rv-rise.in{ transform:none; transition:opacity .9s var(--ease), transform 1.1s var(--ease); }
}

/* ---------- 32. Cookie notice ------------------------------------------- */
/* /assets/cb-cookie.js is shared by 23 pages and injects its banner with
   inline styles, so it can only be corrected from outside with !important.
   Its buttons measure 38px and the "More detail" link 17px, both under the
   44px target. Only the sizing and the palette are touched, never the
   behaviour or the consent logic. */
[role="region"][aria-label="Cookie choice"]{
  background:var(--panel)!important;
  border-color:var(--line-2)!important;
  border-radius:var(--r-lg)!important;
  color:var(--dim)!important;
  font-family:var(--font-body)!important;
  padding:14px 16px!important;
  box-shadow:0 24px 70px -24px rgba(0,0,0,.85)!important;
  /* 2026-09-02: was a full-height curtain on a 390px phone, covering the second
     CTA, the whole proof rail and the free-check panel on first paint. One row
     instead of a stack. */
  display:flex!important;flex-wrap:wrap!important;align-items:center!important;
  gap:10px 14px!important;
  /* index.html sets viewport-fit=cover and nothing in this file used env(), so the
     button row was landing in the iOS home-indicator strip. */
  bottom:max(16px, env(safe-area-inset-bottom))!important;
  padding-bottom:calc(14px + env(safe-area-inset-bottom))!important;
}
[role="region"][aria-label="Cookie choice"] p{
  margin:0!important;flex:1 1 190px!important;
  font-size:.82rem!important;line-height:1.45!important;
}
[role="region"][aria-label="Cookie choice"] > div{ flex:0 0 auto!important; }
[role="region"][aria-label="Cookie choice"] a{
  color:var(--sky)!important;
  display:inline-flex!important;align-items:center!important;
  min-height:44px!important;padding-inline:2px!important;
  text-decoration:underline!important;text-underline-offset:3px!important;
}
[role="region"][aria-label="Cookie choice"] button{
  min-height:44px!important;padding:12px 20px!important;font-size:.88rem!important;
  font-family:var(--font-body)!important;
}
/* 2026-09-02: was a solid --blue pill, identical to the primary CTA and often
   closer to the thumb. Equal prominence for accept and reject is also the safer
   consent pattern, so the only solid blue on the first screen is now the CTA. */
[data-cb-accept]{ background:transparent!important;border-color:var(--sky)!important;color:var(--sky)!important; }
[data-cb-essential]{ border-color:var(--line-2)!important;color:var(--bone)!important; }

/* ---------- 33. The website check ---------------------------------------- */
.ask-url input{ font-family:var(--font-mono); font-size:.9rem; letter-spacing:.01em; }
/* honeypot: display:none still catches the form-fillers that parse HTML,
   and keeps a phantom 1px control out of every accessibility sweep */
.hp{ display:none!important; }

.audit-body{ padding:16px; min-height:150px; }
.audit-idle{ font-size:.94rem; color:var(--dim); line-height:1.55; max-width:46ch; }
.audit-error{ font-size:.94rem; color:#F0A868; line-height:1.55; }

.audit-run{ display:grid; grid-template-columns:118px 1fr; gap:16px; align-items:start; }
.audit-shot{
  position:relative; border:1px solid var(--line-2); border-radius:10px;
  overflow:hidden; background:var(--void-2); aspect-ratio:9/16;
}
.audit-shot img{ width:100%; height:100%; object-fit:cover; object-position:top center;
                 animation:shot-in .6s var(--ease) both; }
@keyframes shot-in{ from{opacity:0; transform:scale(1.03);} to{opacity:1; transform:none;} }
/* a shimmer while their site loads, so the wait reads as work rather than a hang */
.audit-skel{ position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(140,170,220,.04) 30%,rgba(140,170,220,.13) 50%,rgba(140,170,220,.04) 70%);
  background-size:220% 100%; animation:shimmer 1.6s linear infinite; }
@keyframes shimmer{ from{background-position:130% 0;} to{background-position:-30% 0;} }

.audit-steps{ display:flex; flex-direction:column; gap:9px; }
.step-line{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.03em; color:var(--dimmer);
  transition:color .3s var(--ease);
}
.step-line i{
  width:7px; height:7px; border-radius:50%; background:var(--line-3); flex:0 0 auto;
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.step-line.on{ color:var(--sky); }
.step-line.on i{ background:var(--sky); box-shadow:0 0 0 3px rgba(111,211,255,.16); animation:pulse 1.6s var(--ease-io) infinite; }
.step-line.did{ color:var(--dim); }
.step-line.did i{ background:var(--live); box-shadow:none; animation:none; }

.audit-faults,.audit-wins{ list-style:none; }
.audit-faults li{
  display:grid; grid-template-columns:auto 1fr; gap:9px;
  padding:9px 0; border-top:1px solid var(--line);
  animation:fault-in .5s var(--ease) both;
}
.audit-faults li:first-child{ border-top:0; }
.audit-faults li b{ font-weight:600; font-size:.92rem; color:var(--bone); letter-spacing:-.01em; }
.audit-faults li span.n{ font-family:var(--font-mono); font-size:.78rem; color:var(--sky); padding-top:2px; }
.audit-faults li p{ font-size:.86rem; color:var(--dim); margin-top:3px; line-height:1.45; }
@keyframes fault-in{ from{opacity:0; transform:translateY(7px);} to{opacity:1; transform:none;} }

.audit-wins{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.audit-wins li{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.02em; color:var(--live);
  border:1px solid rgba(74,222,128,.3); background:rgba(74,222,128,.07);
  border-radius:999px; padding:4px 10px;
}

.audit-next{ border-top:1px solid var(--line); background:rgba(46,155,255,.05); padding:14px 16px; }
.audit-next .ask{ padding:0 0 9px; border:0; background:none; }
.audit-next.on{ animation:cta-in .5s var(--ease) both; }

@media (max-width:560px){
  .audit-run{ grid-template-columns:92px 1fr; gap:12px; }
  .audit-body{ padding:14px; }
}
@media (prefers-reduced-motion:reduce){
  .audit-skel,.step-line.on i{ animation:none; }
  .audit-shot img,.audit-faults li,.audit-next.on{ animation:none; }
}

/* ---------- 34. Mobile fixes, 2026-09-02 --------------------------------
   Appended last on purpose: on this site an earlier media query loses to a
   later flat rule, so mobile overrides go at the end of the file. */

/* iOS Safari auto-zooms any input under 16px. .ask-url input was .9rem = 14.4px
   with no root font-size to rescue it, so tapping the free-check field zoomed the
   page and shifted the layout under the thumb mid-tap. That field is the primary
   conversion mechanism on the page. */
@media (max-width:820px){
  .ask input,
  .ask-url input,
  .ask input::placeholder,
  #auditEmail{ font-size:16px; }
}

/* The eyebrow is the first element on the page. At 390px its 44 characters wrap to
   two lines and the 5px accent dot, vertically centred by align-items:center, ends
   up level with neither line and reads as a stray artefact. */
@media (max-width:560px){
  .eyebrow{ align-items:flex-start; letter-spacing:.1em; font-size:.76rem; }
  .eyebrow::before{ margin-top:.5em; flex:0 0 auto; }
}