/* ============================================================
   Tokens — warm monochrome system
   ============================================================ */
:root{
  --charcoal:#1F1D1A;        /* primary dark */
  --charcoal-2:#26231F;      /* raised dark surface */
  --charcoal-3:#33302A;      /* dark hairline surface */
  --bone:#F2F0EA;            /* primary light */
  --bone-2:#EAE7DF;          /* recessed light surface */
  --bone-3:#E1DDD3;          /* light hairline surface */
  --ink:#1F1D1A;
  --muted:#6F6A60;
  --muted-dark:#A8A399;      /* muted text on dark */
  --faint-dark:#7D786E;
  --line:rgba(31,29,26,.14);
  --line-strong:rgba(31,29,26,.26);
  --line-dark:rgba(242,240,234,.14);
  --ember:#A26B3E;           /* warm umber accent */
  --plum:#6E4A63;            /* muted plum accent */
  --jade:#5C7A6E;            /* muted jade accent */
  --ember-ink:#7C4E26;
  --ember-wash:rgba(162,107,62,.10);
  --plum-wash:rgba(110,74,99,.10);
  --jade-wash:rgba(92,122,110,.12);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.25,.1,.25,1);
  --r:8px;
  --r-lg:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:rgba(31,29,26,.9);color:var(--bone)}
:focus-visible{outline:2px solid var(--charcoal);outline-offset:3px}
.dark :focus-visible{outline-color:var(--bone)}
img{max-width:100%}
a{color:inherit}

.wrap{width:min(1240px,calc(100% - 48px));margin:0 auto}

h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:440;letter-spacing:-.02em}

/* small utility label — uppercase eyebrow */
.eyebrow{
  font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.eyebrow.e-plum,.eyebrow.e-ember,.eyebrow.e-jade{display:inline-flex;align-items:center;gap:12px}
.eyebrow.e-plum{color:var(--plum)}.eyebrow.e-ember{color:var(--ember-ink)}.eyebrow.e-jade{color:var(--jade)}
.eyebrow.e-plum::before,.eyebrow.e-ember::before,.eyebrow.e-jade::before{
  content:"";width:28px;height:1px;background:currentColor;opacity:.55;
}
.dark .eyebrow{color:var(--muted-dark)}

/* ============================================================
   Buttons — quiet, rectangular, slight radius
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 22px;border-radius:var(--r);
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.01em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-dark{background:var(--charcoal);color:var(--bone);border-color:var(--charcoal)}
.btn-dark:hover{background:#000}
.btn-light{background:var(--bone);color:var(--charcoal);border-color:var(--bone)}
.btn-light:hover{background:#fff;border-color:#fff}
.btn-ghost{background:transparent;color:var(--charcoal);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--charcoal)}
.dark .btn-ghost{color:var(--bone);border-color:var(--line-dark)}
.dark .btn-ghost:hover{border-color:var(--bone)}

/* text link with arrow */
.tlink{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:14px;font-weight:500;color:var(--ink);
  border-bottom:1px solid var(--line-strong);padding-bottom:3px;
  transition:border-color .25s var(--ease);
}
.tlink:hover{border-color:var(--ember)}
.tlink .arr{transition:transform .25s var(--ease)}
.tlink:hover .arr{transform:translateX(3px)}

/* ============================================================
   Reveal on scroll — quiet fade/rise
   ============================================================ */
.rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}

/* ============================================================
   Nav — fixed, transparent over hero, solid on scroll
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{background:rgba(242,240,234,.96);backdrop-filter:blur(10px);border-color:var(--line)}
.nav-inner{transition:padding .3s var(--ease)}
.nav.solid .nav-inner{padding:10px 0}
.nav.solid .nav-links a{color:rgba(31,29,26,.62)}
.nav.solid .nav-links a:hover{color:var(--ink)}
.nav.solid .nav-right .login{color:rgba(31,29,26,.62)}
.nav.solid .nav-right .login:hover{color:var(--ink)}
.nav.solid .btn-light{background:var(--charcoal);border-color:var(--charcoal);color:var(--bone)}
.nav.solid .btn-light:hover{background:#000;border-color:#000}
.nav.solid .nav-toggle{color:var(--ink)}
.brand-img.wm-dark{display:none}
.nav.solid .brand-img.wm-white{display:none}
.nav.solid .brand-img.wm-dark{display:block}
.nav.open .brand-img.wm-dark{display:none}
.nav.open .brand-img.wm-white{display:block}
.nav.open .nav-toggle{color:var(--bone)}
/* section-aware: dark styling when the bar is over a dark region */
.nav.solid.on-dark{background:rgba(31,29,26,.88);backdrop-filter:blur(12px);border-color:var(--line-dark)}
.nav.solid.on-dark .nav-links a{color:rgba(242,240,234,.72)}
.nav.solid.on-dark .nav-links a:hover{color:var(--bone)}
.nav.solid.on-dark .nav-right .login{color:rgba(242,240,234,.72)}
.nav.solid.on-dark .nav-right .login:hover{color:var(--bone)}
.nav.solid.on-dark .btn-light{background:var(--bone);border-color:var(--bone);color:var(--charcoal)}
.nav.solid.on-dark .btn-light:hover{background:#fff;border-color:#fff}
.nav.solid.on-dark .nav-toggle{color:var(--bone)}
.nav.solid.on-dark .brand-img.wm-dark{display:none}
.nav.solid.on-dark .brand-img.wm-white{display:block}
.nav-links a,.nav-right .login{transition:color .3s var(--ease)}
.nav-wrap{width:100%;padding:0 28px}
.nav-inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  padding:18px 0;color:var(--bone);
}
.brand{
  font-family:var(--serif);font-size:22px;letter-spacing:-.01em;color:var(--bone);
  text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;
}
.brand-img{display:block;height:28px;width:auto}
.foot-brand .brand-img{height:32px}
.nav-links{display:flex;gap:28px;justify-self:start}
.nav-links a{
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(242,240,234,.72);text-decoration:none;
  transition:color .2s;
}
.nav-links a:hover{color:var(--bone)}
.nav-right{justify-self:end;display:flex;align-items:center;gap:22px}
.nav-right .login{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,240,234,.72);text-decoration:none;transition:color .2s}
.nav-right .login:hover{color:var(--bone)}
.nav .btn{min-height:40px;padding:0 18px;font-size:13.5px}
.nav-toggle{display:none;background:none;border:0;color:var(--bone);font-size:24px;line-height:1;cursor:pointer;padding:4px}
.nav-mobile{display:none}

/* ============================================================
   Hero — full-viewport, cinematic dark
   ============================================================ */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
  background:var(--charcoal);color:var(--bone);overflow:hidden;
}
/* cinematic background: embedded image (video slot overrides if provided) */
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-media,.hero-image{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.hero-media{display:none;filter:saturate(.58) contrast(1.04) brightness(.71)}
.hero-media.on{display:block}
.hero-media.on ~ .hero-image{display:none}
.hero-image{
  animation:kenburns 44s var(--ease) infinite alternate;
  will-change:transform;
}
@keyframes kenburns{
  from{transform:scale(1.02) translate3d(-1%,0.5%,0)}
  to{transform:scale(1.14) translate3d(1.4%,-1.2%,0)}
}
@keyframes drift{
  from{transform:translate3d(-2.5%,-1.5%,0) scale(1)}
  to{transform:translate3d(2.5%,2%,0) scale(1.07)}
}
.hero-bg .veil{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 44%,transparent 46%,rgba(31,29,26,.66) 100%)}
.hero-bg .scrim{position:absolute;inset:0;background:radial-gradient(52% 54% at 30% 50%,rgba(31,29,26,.52),transparent 74%)}
.hero-bg .tint{position:absolute;inset:0;background:rgba(31,29,26,.07)}
.hero-bg .grain{
  position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner{position:relative;z-index:2;padding:140px 0 120px;width:min(1240px,calc(100% - 48px));margin:0 auto;text-align:left}
.hero-cn{
  display:flex;align-items:baseline;gap:16px;margin-bottom:22px;
  text-shadow:0 1px 14px rgba(23,21,18,.5);
}
.hero-cn .cn{
  font-family:var(--serif),"Songti SC","Noto Serif SC","SimSun",serif;
  font-size:clamp(26px,2.6vw,36px);line-height:1;color:var(--bone);letter-spacing:.06em;
}
.hero-cn .en{
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(242,240,234,.8);transform:translateY(-2px);
}
.hero-cn .rule{flex:1;max-width:180px;height:1px;background:rgba(242,240,234,.3);align-self:center}
.hero h1{
  font-size:clamp(40px,5.4vw,78px);line-height:1.06;letter-spacing:-.022em;
  font-weight:400;color:var(--bone);max-width:13.5em;
  text-shadow:0 2px 28px rgba(23,21,18,.55),0 1px 3px rgba(23,21,18,.35);
}
.hero .sub{
  margin:26px 0 0;max-width:730px;
  font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:rgba(242,240,234,.96);
  text-wrap:balance;
  text-shadow:0 1px 16px rgba(23,21,18,.5);
}
.hero-actions{
  margin-top:36px;
  display:flex;align-items:center;justify-content:flex-start;gap:18px 44px;flex-wrap:wrap;
}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-proof{
  display:flex;gap:12px 18px;flex-wrap:wrap;
  font-size:12.5px;letter-spacing:.02em;color:rgba(242,240,234,.78);
  text-shadow:0 1px 10px rgba(23,21,18,.5);
}
.hero-proof span{display:inline-flex;align-items:center;gap:9px}
.hero-proof i{width:6px;height:6px;transform:rotate(45deg)}
.hero-proof .p1 i{background:#C9A27A}
.hero-proof .p2 i{background:#9DBBAD}
.hero-proof .p3 i{background:#B58FA8}
.hero-inner > *{animation:heroRise 1.1s var(--ease) both}
.hero-inner > *:nth-child(2){animation-delay:.12s}
.hero-inner > *:nth-child(3){animation-delay:.24s}
.hero-inner > *:nth-child(4){animation-delay:.36s}
.hero-inner > *:nth-child(5){animation-delay:.48s}
@keyframes heroRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-scrollcue{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2;
  color:var(--faint-dark);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hero-scrollcue::after{
  content:"";width:1px;height:34px;background:linear-gradient(180deg,var(--faint-dark),transparent);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{0%,100%{opacity:.35;transform:scaleY(.7);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}

/* ============================================================
   Source marquee — the "logo strip" equivalent
   ============================================================ */
.marquee{
  background:var(--charcoal);color:var(--bone);
  border-top:1px solid var(--line-dark);padding:22px 0 26px;overflow:hidden;
}
.marquee .eyebrow{text-align:center;display:block;margin-bottom:16px}
.mq-clip{position:relative;overflow:hidden}
.mq-clip::before,.mq-clip::after{
  content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.mq-clip::before{left:0;background:linear-gradient(90deg,var(--charcoal),transparent)}
.mq-clip::after{right:0;background:linear-gradient(270deg,var(--charcoal),transparent)}
.mq-track{display:flex;width:max-content;animation:mq 46s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-item{
  display:inline-flex;align-items:baseline;gap:10px;padding:0 34px;white-space:nowrap;
}
.mq-item b{font-family:var(--serif);font-weight:400;font-size:21px;letter-spacing:0;color:rgba(242,240,234,.86)}
.mq-item.em b{color:#C9A27A}.mq-item.ja b{color:#9DBBAD}.mq-item.pl b{color:#B58FA8}
.mq-item span{font-size:12.5px;color:var(--faint-dark)}
.mq-foot{text-align:center;margin-top:32px}
.mq-foot .tlink{color:var(--bone);border-color:var(--line-dark)}
.mq-foot .tlink:hover{border-color:var(--bone)}

/* ============================================================
   Briefing showcase — the flagship product frame
   ============================================================ */
.showcase{
  position:relative;z-index:2;margin-bottom:-120px;
  margin-top:64px;max-width:920px;
  background:#FAF9F5;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 34px 80px -36px rgba(31,29,26,.30);
}
.sc-top{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:18px 28px;border-bottom:1px solid var(--line);
}
.sc-lead{
  background:linear-gradient(135deg,#3E2E3A 0%,#262028 100%);color:var(--bone);
  padding:30px 28px;
}
.sc-lead .chip{
  display:inline-flex;padding:6px 12px;border:1px solid rgba(242,240,234,.28);border-radius:100px;
  color:rgba(242,240,234,.8);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}
.sc-lead h3{color:var(--bone);margin-top:18px;font-size:clamp(21px,2vw,26px);line-height:1.22;letter-spacing:-.015em;max-width:24em}
.sc-lead p{margin:12px 0 0;color:rgba(242,240,234,.68);font-size:14px;line-height:1.6;max-width:52ch}
.sc-profile{
  display:flex;gap:6px 12px;flex-wrap:wrap;align-items:baseline;
  padding:14px 28px;border-bottom:1px solid var(--line);font-size:12.5px;
}
.sc-profile b{font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--plum);margin-right:6px}
.sc-profile span{color:var(--ink);font-weight:500}
.sc-profile span:not(:last-child)::after{content:"·";color:var(--muted);margin-left:12px}
.sc-body{display:grid;grid-template-columns:1.16fr .84fr}
.sc-dev{padding:24px 28px;border-right:1px solid var(--line)}
.m-label{display:block;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.dev-head{display:grid;grid-template-columns:34px 1fr;gap:12px;margin-top:14px;align-items:baseline}
.dev-num{font-family:var(--serif);font-size:22px;line-height:1;color:var(--ember)}
.dev-head h4{font-size:18px;line-height:1.28;letter-spacing:-.012em;font-weight:400;font-family:var(--serif)}
.sc-dev .sub{margin:12px 0 0;color:var(--muted);font-size:13.5px;line-height:1.55}
.why{margin-top:16px;border-left:2px solid var(--ember);background:var(--ember-wash);border-radius:0 var(--r) var(--r) 0;padding:12px 14px}
.why b{display:block;color:var(--ember-ink);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;margin-bottom:6px}
.why span{display:block;color:var(--ink);font-size:13.5px;line-height:1.55}
.sc-ask{padding:24px 28px;background:linear-gradient(180deg,var(--plum-wash),transparent)}
.sc-ask h4{font-family:var(--serif);font-size:19px;font-weight:400;letter-spacing:-.012em;margin-top:10px}
.ask-q{
  margin:12px 0 0;border:1px solid var(--line-strong);border-radius:var(--r);background:#fff;
  padding:11px 13px;font-size:13px;color:var(--ink);
}
.ask-returns{display:grid;gap:7px;margin-top:12px}
.ask-returns span{
  border:1px solid rgba(110,74,99,.3);border-radius:var(--r);background:rgba(255,255,255,.7);
  padding:9px 12px;font-size:12.5px;font-weight:500;color:var(--plum);
}
.sc-expert{
  display:flex;align-items:center;gap:14px;text-decoration:none;
  border-top:1px solid var(--line);background:var(--bone);padding:16px 28px;
  transition:background .25s var(--ease);
}
.sc-em{flex:1;min-width:0}
.sc-em b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.sc-em span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.sc-expert .arr{color:var(--plum);font-size:17px;transition:transform .25s var(--ease)}

/* ============================================================
   Accent system for mockup cards — serious but lively
   ============================================================ */
.card{position:relative}
.a-plum .card{border-top:5px solid var(--plum)}
.a-ember .card{border-top:5px solid var(--ember)}
.a-jade .card{border-top:5px solid var(--jade)}
.a-plum .card-state{color:var(--plum)} .a-plum .card-state::before{background:var(--plum);opacity:1}
.a-ember .card-state{color:var(--ember-ink)} .a-ember .card-state::before{background:var(--ember);opacity:1}
.a-jade .card-state{color:var(--jade)} .a-jade .card-state::before{background:var(--jade);opacity:1}
/* a sample marked as one: the rounded tag the agent and expert cards wear, in the light card's ink */
.card-tag{flex:0 0 auto;padding:3px 9px;border-radius:100px;border:1px solid rgba(31,29,26,.2);font-size:9.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

/* ============================================================
   Section scaffolding
   ============================================================ */
.section{padding:120px 0;border-bottom:1px solid var(--line)}
.section-head{max-width:760px}
.section-head h2{font-size:clamp(34px,4vw,54px);line-height:1.1;letter-spacing:-.022em;margin-top:18px}
.section-head p{margin:22px 0 0;font-size:17px;line-height:1.65;color:var(--muted);max-width:620px}

/* ============================================================
   Experience — quiet numbered rows + product cards
   ============================================================ */
#experience{padding-bottom:0;border-bottom:0}
.steps-band{
  position:relative;overflow:hidden;overflow:clip;background:var(--charcoal);
  padding:178px 0 104px;
  --band-glow:radial-gradient(30% 36% at 82% 16%,rgba(92,122,110,.14),transparent 70%),
              radial-gradient(28% 34% at 10% 86%,rgba(162,107,62,.12),transparent 70%),
              radial-gradient(26% 32% at 52% 55%,rgba(110,74,99,.11),transparent 70%);
}
.steps-band::before{
  content:"";position:absolute;inset:-40%;pointer-events:none;background:var(--band-glow);
}
.steps-band > *{position:relative;z-index:1}
/* Pinned: the band is a runway of scroll, and its stage holds still on screen
   while that scroll walks through the steps (the script decides where it fits).
   The glow moves onto the stage so it stays put too. */
.steps-band.is-scrolly{padding:0;height:calc(100vh + 4 * 62vh)}
.steps-band.is-scrolly::before{display:none}
.steps-band.is-scrolly > .steps-stage{position:sticky;top:0;height:100vh;height:100svh;
  display:flex;flex-direction:column;justify-content:center;overflow:clip}
.steps-band.is-scrolly > .steps-stage::before{
  content:"";position:absolute;inset:-40%;pointer-events:none;background:var(--band-glow);
}
/* Pinned, the column keeps a margin at either side that grows with the window (never under 56px),
   and on a larger screen its contents grow with it (--k, which the script sets from the window's
   height, the room that margin leaves and what fits), so the steps fill the screen rather than
   floating in it. Scaled rather than zoomed: every browser measures a scale the same way. */
.steps-band.is-scrolly > .steps-stage > .wrap{position:relative;width:min(1240px,calc(100% - 2 * max(56px,6vw)));
  transform:scale(var(--k,1));transform-origin:50% 50%}
.steps-band.is-scrolly .slider-foot{margin-top:36px}
/* In place of the glow behind the card and the band's coloured haze, the Briefings page's field of
   squares, as it is in the dark (script below): densest toward the top and right, thinning out over
   the step tabs. The words are lifted a step, with a shade of their own, to hold over it. */
.steps-field{display:none}
.steps-band.is-scrolly .steps-field{display:block;position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.steps-band.is-scrolly .mock-glow,.steps-band.is-scrolly > .steps-stage::before{display:none}
.steps-band.is-scrolly .slide h3{color:#fff;text-shadow:0 1px 14px rgba(20,16,23,.9),0 0 2px rgba(20,16,23,.6)}
.steps-band.is-scrolly .slide p{color:rgba(242,240,234,.88);text-shadow:0 1px 12px rgba(20,16,23,.95),0 0 2px rgba(20,16,23,.7)}
.steps-band.is-scrolly .step-kicker{text-shadow:0 1px 10px rgba(20,16,23,.9)}
.steps-band.is-scrolly .stp .fill{transform:scaleX(var(--p,0));animation:none}
.steps-band .steps{margin-top:0;position:relative}
.mock-glow{
  position:absolute;z-index:0;pointer-events:none;
  opacity:1;
  transition:opacity 1.8s var(--ease),
    top .6s var(--ease),left .6s var(--ease),
    width .6s var(--ease),height .6s var(--ease);
}
.mock-glow::before,.mock-glow::after{
  content:"";position:absolute;inset:-12%;
  background-repeat:no-repeat;
  filter:blur(30px);
  will-change:transform;
}
.mock-glow::before{background:var(--mistA);animation:driftA 19s ease-in-out infinite alternate}
.mock-glow::after{background:var(--mistB);animation:driftB 27s ease-in-out infinite alternate}
@keyframes driftA{
  from{transform:translate(-2%,-1.5%) scale(1)}
  to{transform:translate(2.2%,1.8%) scale(1.07)}
}
@keyframes driftB{
  from{transform:translate(1.8%,2%) scale(1.05)}
  to{transform:translate(-2.2%,-1.6%) scale(1)}
}
.mock-glow.dim{opacity:0;transition-duration:.25s,.6s,.6s,.6s,.6s;
}
.slides,.slider-foot{position:relative;z-index:1}

.steps-band .k-plum{color:#DCC2D3}
.steps-band .k-ember{color:#E4C9A8}
.steps-band .k-jade{color:#C4D8CD}
.steps-band .slide h3{color:var(--bone)}
.steps-band .slide p{color:rgba(242,240,234,.72)}
.steps-band .slider-foot{border-top-color:var(--line-dark)}
.steps-band .sarrow{border-color:var(--line-dark);color:var(--bone)}
.steps-band .sarrow:hover{border-color:var(--bone);background:rgba(242,240,234,.06)}
.steps-band .card{box-shadow:0 22px 44px -20px rgba(0,0,0,.5)}
.steps{margin-top:56px}
.slides{overflow:hidden;padding:64px 0;margin:-64px 0}
.slides-track{display:flex;align-items:stretch;transition:transform .65s var(--ease)}
.slide{
  flex:0 0 100%;min-width:100%;
  display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(320px,440px);gap:64px;
  padding-right:40px;
}
.slide-copy{max-width:560px}
.step-kicker{display:block;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.k-plum{color:var(--plum)}
.k-ember{color:var(--ember-ink)}
.k-jade{color:var(--jade)}
.slide h3{font-size:clamp(26px,2.6vw,36px);line-height:1.16;letter-spacing:-.02em;margin-top:14px;max-width:15em}
.slide p{margin:16px 0 0;font-size:16px;line-height:1.68;color:var(--muted);max-width:52ch}
.slider-foot{
  margin-top:48px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;align-items:flex-start;justify-content:space-between;gap:28px;
}
.stepper{display:flex;gap:34px;flex:1;max-width:720px}
.stp{
  appearance:none;background:none;border:0;padding:0 0 14px;cursor:pointer;
  position:relative;text-align:left;flex:1;min-width:0;
  display:flex;gap:9px;align-items:baseline;
  color:rgba(242,240,234,.5);
  transition:color .25s var(--ease);
}
.stp b{font-family:var(--serif);font-weight:400;font-size:13px}
.stp span{font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:.01em;white-space:nowrap}
.stp::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:1px;
  background:rgba(242,240,234,.14);
}
.stp.c1::after,.stp.c4::after{background:rgba(220,194,211,.22)}
.stp.c2::after{background:rgba(228,201,168,.22)}
.stp.c3::after{background:rgba(196,216,205,.24)}
.stp.c1 b,.stp.c4 b{color:#DCC2D3;opacity:.7}
.stp.c2 b{color:#E4C9A8;opacity:.7}
.stp.c3 b{color:#C4D8CD;opacity:.7}
.stp:hover b,.stp.active b,.stp.done b{opacity:1}
.stp .fill{
  position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:1px;z-index:1;
  background:currentColor;transform:scaleX(0);transform-origin:left;
}
.stp:hover{color:rgba(242,240,234,.85)}
.stp.active{color:var(--bone)}
.stp.c1 .fill,.stp.c4 .fill{background:#DCC2D3}
.stp.c2 .fill{background:#E4C9A8}
.stp.c3 .fill{background:#C4D8CD}
.stp.done .fill,.stp.active .fill{transform:scaleX(1)}
.stp.active.filling .fill{animation:segFill 6s linear forwards}
@keyframes segFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.steps-arrows{display:flex;gap:10px}
.sarrow{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line-strong);
  background:transparent;color:var(--ink);cursor:pointer;font-size:15px;line-height:1;
  display:grid;place-items:center;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.sarrow:hover{border-color:var(--charcoal);background:#FAF9F5}
.sarrow:active{transform:translateY(1px)}

/* product cards — bone surface, hairline borders, monochrome */
.card{
  background:#FAF9F5;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 24px 60px -30px rgba(31,29,26,.22);
  padding:22px;transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  overflow:hidden;
}
.slide:hover .card{transform:translateY(-4px);box-shadow:0 34px 70px -30px rgba(31,29,26,.3)}
.card-top{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line);
}
.card-title{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.card-state{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.card-state::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--charcoal);opacity:.55;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:.2}}

/* profile card */
.pgrp{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);align-items:start}
.pgrp:last-child{border-bottom:0}
.pgrp b{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:5px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{
  border:1px solid var(--line-strong);border-radius:6px;background:var(--bone);
  padding:5px 10px;font-size:12.5px;font-weight:500;color:var(--ink);
}
.tags span.risk{background:var(--ember-wash);border-color:rgba(162,107,62,.45);color:var(--ember-ink)}

/* briefing card */
.brief-headline{font-family:var(--serif);font-size:21px;line-height:1.25;letter-spacing:-.015em}
.brief-line{height:8px;border-radius:4px;background:var(--bone-3);margin-top:12px}
.brief-line.short{width:64%}
.brief-pills{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.brief-pills span{
  border:1px solid var(--line-strong);border-radius:100px;
  padding:6px 12px;font-size:12px;font-weight:500;color:var(--ink);
}
.brief-pills span:first-child{background:var(--plum);border-color:var(--plum);color:var(--bone)}
.brief-pills span:nth-child(2){background:var(--ember-wash);border-color:rgba(162,107,62,.4);color:var(--ember-ink)}

/* chat card */
.chat{display:grid;gap:10px}
.chat-row{display:flex;gap:9px;align-items:flex-start}
.chat-row.user{justify-content:flex-end}
.bubble{
  max-width:88%;border:1px solid var(--line);border-radius:10px;background:#fff;
  padding:12px 13px;font-size:13px;line-height:1.52;color:var(--ink);
}
.chat-row.user .bubble{background:#43303E;border-color:#43303E;color:var(--bone)}
.bubble b{display:block;font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.chat-avatar{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;margin-top:2px;
  background:var(--charcoal);color:var(--bone);display:grid;place-items:center;
  font-size:11px;font-weight:600;font-family:var(--serif);
}
.next-steps{display:grid;gap:6px;margin-top:12px}
.next-steps span{
  display:block;border:1px solid rgba(92,122,110,.32);border-left:2px solid var(--jade);border-radius:0 8px 8px 0;
  background:var(--jade-wash);padding:9px 11px;font-size:12.5px;line-height:1.45;color:var(--ink);
}
.next-steps strong{font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--jade);margin-right:7px}

/* expert card */
.exp-row{display:flex;align-items:center;gap:14px}
.avatar{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,#5A3D53,#3A2B36);color:var(--bone);
  font-family:var(--serif);font-size:15px;letter-spacing:.02em;
}
.exp-row b{display:block;font-size:15px;font-weight:600}
.exp-row div span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.exp-cta{
  margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:10px;
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--bone);
  padding:13px 15px;font-size:13.5px;font-weight:500;color:var(--ink);text-decoration:none;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.exp-cta .arr{color:var(--ember);transition:transform .25s var(--ease)}

/* ============================================================
   Experts — statement lead, credential strip, accented grid,
   dark industries band
   ============================================================ */
.experts-statement{
  margin:26px 0 0;max-width:30em;
  font-family:var(--serif);font-size:clamp(24px,2.5vw,34px);line-height:1.32;letter-spacing:-.015em;
  color:var(--ink);font-weight:400;
}
.experts-statement strong{font-weight:500}
.matrix-band{
  margin-top:48px;background:var(--charcoal);color:var(--bone);
  border-radius:var(--r-lg);padding:46px 48px;position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.85fr 1fr;gap:0 56px;align-items:start;
}
.matrix-band::before{
  content:"";position:absolute;inset:-40%;pointer-events:none;
  background:radial-gradient(30% 36% at 80% 20%,rgba(92,122,110,.18),transparent 70%),
             radial-gradient(28% 34% at 12% 86%,rgba(162,107,62,.14),transparent 70%),
             radial-gradient(26% 32% at 46% 50%,rgba(110,74,99,.12),transparent 70%);
}
.mb-col{position:relative;z-index:1}
.mb-col + .mb-col{border-left:1px solid var(--line-dark);padding-left:56px;align-self:stretch}
.matrix-band .eyebrow{display:inline-flex;align-items:center;gap:12px}
.matrix-band .eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.55}
.mb-domains .eyebrow{color:#B58FA8}
.mb-industries .eyebrow{color:#9DBBAD}
.mb-list{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
.mb-list.single{grid-template-columns:1fr}
.mb-item{
  display:flex;align-items:baseline;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line-dark);
  font-family:var(--serif);font-size:17.5px;line-height:1.3;letter-spacing:-.012em;color:rgba(242,240,234,.9);
  transition:padding-left .3s var(--ease),color .25s var(--ease);
}
.mb-item i{font-style:normal;font-family:var(--serif);font-size:12.5px;flex:0 0 auto}
.mb-item:nth-child(3n+1) i{color:#B58FA8}
.mb-item:nth-child(3n+2) i{color:#C9A27A}
.mb-item:nth-child(3n) i{color:#9DBBAD}
.mb-item:hover{padding-left:8px;color:#fff}
.mb-domains .mb-item:nth-last-child(-n+2){border-bottom:0}
.mb-industries .mb-item{justify-content:space-between;font-size:16.5px}
.mb-industries .mb-item::after{
  content:"\2192";font-family:var(--sans);font-size:13px;color:#9DBBAD;
  opacity:0;transition:opacity .25s var(--ease);
}
.mb-industries .mb-item:hover::after{opacity:1}
.mb-industries .mb-item:last-child{border-bottom:0}
.mb-foot{
  grid-column:1/-1;position:relative;z-index:1;
  margin-top:34px;padding-top:26px;border-top:1px solid var(--line-dark);
  display:block;
}
.mb-names{display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:space-between;width:100%;margin-top:14px}
.mb-foot b{
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#C9A27A;
  display:inline-flex;align-items:center;gap:12px;
}
.mb-foot b::before{content:"";width:28px;height:1px;background:currentColor;opacity:.55}
.mb-foot span{
  font-family:var(--serif);font-size:clamp(12.5px,1.32vw,16.5px);letter-spacing:-.012em;
  color:rgba(242,240,234,.9);display:inline-flex;align-items:center;white-space:nowrap;
}
.mb-foot span:not(:last-child)::after{
  content:"";width:4px;height:4px;transform:rotate(45deg);flex:0 0 auto;
  background:#C9A27A;opacity:.55;margin:0 clamp(8px,1.1vw,18px);
}

/* ============================================================
   Stats band — big serif numbers, hairline dividers
   ============================================================ */
.stats{padding:110px 0;border-bottom:1px solid var(--line)}
.stats h2{font-size:clamp(28px,3vw,42px);letter-spacing:-.02em;line-height:1.15;max-width:18em}
.stat-grid{
  margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);
}
.stat{padding:8px 32px 8px 24px;border-left:2px solid var(--line)}
.stat.s-plum{border-color:var(--plum)}.stat.s-ember{border-color:var(--ember)}.stat.s-jade{border-color:var(--jade)}
.stat b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(44px,4.4vw,64px);letter-spacing:-.03em;line-height:1}
.stat span{display:block;margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--muted);max-width:22ch}

/* ============================================================
   Packages — restrained pricing cards
   ============================================================ */
.pricing-grid{margin-top:72px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.price-card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r-lg);background:#FAF9F5;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.price-card:hover{transform:translateY(-4px);box-shadow:0 34px 70px -34px rgba(31,29,26,.28)}
.price-card.featured{border-color:#365F4F;position:relative;background:radial-gradient(130% 70% at 18% 0%,rgba(255,255,255,.10),transparent 55%),linear-gradient(180deg,#4A7D6C,#37604F)}
.price-card.premium{border-color:#3E1F37;position:relative;
  background:radial-gradient(130% 70% at 18% 0%,rgba(255,255,255,.08),transparent 55%),linear-gradient(180deg,#6E3560,#48203E)}
.price-card.premium .price-sub{color:#E4B8D4}
/* shared dark-card text treatment */
.price-card.featured,.price-card.premium{color:var(--bone)}
.price-card.featured .btn-ghost,.price-card.premium .btn-ghost{color:var(--bone);border-color:rgba(242,240,234,.42)}
.price-card.featured .btn-ghost:hover,.price-card.premium .btn-ghost:hover{border-color:var(--bone);background:rgba(242,240,234,.08)}
.price-card.featured:hover,.price-card.premium:hover{box-shadow:0 34px 70px -30px rgba(31,29,26,.5)}
.price-card.featured .pop-chip{background:var(--bone);color:var(--charcoal)}
.price-card.featured .eyebrow{color:rgba(248,248,244,.7)}
.price-card.premium .eyebrow{color:rgba(242,240,234,.55)}
.price-card.featured .price-top,.price-card.premium .price-top{border-bottom-color:rgba(242,240,234,.16)}
.price-card.featured .price-top p{color:rgba(248,248,244,.82)}
.price-card.premium .price-top p{color:rgba(242,240,234,.7)}
.price-card.featured .price-row,.price-card.premium .price-row{border-bottom-color:rgba(242,240,234,.16)}
.price-card.featured .price-row .desc{color:rgba(248,248,244,.8)}
.price-card.premium .price-row .desc{color:rgba(242,240,234,.66)}
.price-card.featured .price-amt small{color:rgba(248,248,244,.75)}
.price-card.premium .price-amt small{color:rgba(242,240,234,.6)}
.price-card.featured .features li{color:rgba(250,250,247,.96)}
.price-card.premium .features li{color:rgba(242,240,234,.9)}
.price-card.featured .features li::before,.price-card.premium .features li::before{color:rgba(242,240,234,.45)}
.price-top{padding:38px 34px 26px;border-bottom:1px solid var(--line);position:relative}
.pop-chip{
  position:absolute;top:22px;right:22px;
  background:var(--plum);color:var(--bone);border-radius:100px;
  padding:6px 13px;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.price-top .eyebrow{display:block}
.price-top h3{font-size:clamp(24px,1.9vw,29px);line-height:1.12;letter-spacing:-.018em;margin-top:14px;white-space:normal}
.price-sub{margin-top:9px;font-size:13.5px;font-weight:500;letter-spacing:.005em;color:var(--ember-ink)}
.price-card.featured .price-sub{color:#D8EEE2}
.price-top p{margin:14px 0 0;font-size:14.5px;line-height:1.62;color:var(--muted);max-width:44ch}
.price-row{
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
  padding:22px 34px;border-bottom:1px solid var(--line);
}
.price-row b{display:block;font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:-.015em}
.price-row .desc{display:block;margin-top:5px;font-size:13px;line-height:1.5;color:var(--muted);max-width:40ch}
.price-amt{text-align:right;font-family:var(--serif);font-size:30px;letter-spacing:-.02em;white-space:nowrap}
.price-amt small{display:block;font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.price-amt .pre{display:block;font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.price-card.premium .price-amt .pre{color:rgba(242,240,234,.6)}
.features{padding:26px 34px;flex:1}
.features ul{margin:0;padding:0;list-style:none;display:grid;gap:15px}
.features li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.features li::before{content:"—";position:absolute;left:0;top:0;color:var(--muted)}
.features li b{font-weight:600;letter-spacing:.005em}
.features li span{color:var(--muted)}
.feat-plus{margin:0 0 16px;font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink)}
.price-card.featured .features li span,.price-card.premium .features li span{color:rgba(246,246,242,.76)}
.price-card.featured .feat-plus,.price-card.premium .feat-plus{color:var(--bone)}
.price-cta{padding:0 34px 34px}
.price-cta .btn{width:100%}
.pricing-note{margin-top:26px;font-size:13.5px;line-height:1.6;color:var(--muted);max-width:72ch}
@media(min-width:901px){.price-top p{min-height:6.6em}
  /* align the first two rules across all three cards */
  .price-sub{display:block;min-height:2.45em}
  .price-row{min-height:152px}
}

/* Beyond the Core Plans — custom & advisory band */
.cband{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--charcoal);color:var(--bone);margin-top:24px}
.cband::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--plum),var(--ember));z-index:2}
.cb-head.compact{padding:24px 40px 20px}
.cb-cols{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-dark)}
.cb-col{padding:30px 40px 32px;display:flex;flex-direction:column}
.cb-col + .cb-col{border-left:1px solid var(--line-dark)}
.cband .lab{display:block;font-family:var(--serif);font-weight:440;font-size:22px;line-height:1.15;letter-spacing:-.014em;color:var(--acc)}
.cband .ent{--acc:#C9A27A}
.cband .adv{--acc:#B58FA8}
.cb-col p{margin:13px 0 0;font-size:14px;line-height:1.62;color:rgba(242,240,234,.74)}
.cb-col ul{margin:15px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.cb-col li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.5;color:rgba(242,240,234,.82)}
.cb-col li::before{content:"—";position:absolute;left:0;color:var(--muted-dark)}
.golink{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:14px;font-weight:500;text-decoration:none;color:var(--bone);align-self:flex-start;margin-top:auto;padding-top:22px}
.golink .arr{transition:transform .25s var(--ease)}
.golink:hover .arr{transform:translateX(4px)}
@media(max-width:900px),(max-width:960px) and (max-height:500px) and (pointer:coarse){.cb-cols{grid-template-columns:1fr}
  .cb-col + .cb-col{border-left:0;border-top:1px solid var(--line-dark)}
}

/* ============================================================
   Final CTA — dark, centered closing chord
   ============================================================ */
.final{
  background:var(--charcoal);color:var(--bone);
  padding:130px 0;position:relative;overflow:hidden;
}
.final-bg{position:absolute;inset:0;pointer-events:none}
.final-bg img{width:100%;height:100%;object-fit:cover;display:block}
.final-bg .fveil{
  position:absolute;inset:0;
  background:radial-gradient(135% 115% at 35% 50%,rgba(31,29,26,.46) 28%,rgba(31,29,26,.86) 100%);
}
.final-inner{
  position:relative;z-index:1;width:min(1240px,calc(100% - 48px));margin:0 auto;text-align:left;
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,400px);gap:120px;align-items:center;
}
.final-side p{margin:0}
.final-side .cta{margin-top:24px}
.final h2{font-size:clamp(24px,2.5vw,34px);line-height:1.3;letter-spacing:-.018em;color:var(--bone);max-width:24em;text-shadow:0 1px 20px rgba(23,21,18,.45)}
.final h2 strong{font-weight:500}
.final h2 .dim{color:rgba(242,240,234,.66)}
.final p{max-width:540px;font-size:16px;line-height:1.65;color:rgba(242,240,234,.78);text-shadow:0 1px 12px rgba(23,21,18,.45)}
.final .cta{display:flex;gap:14px;flex-wrap:wrap}

/* ============================================================
   Footer — dark, columnar
   ============================================================ */
footer{background:#131211;color:var(--bone);border-top:1px solid var(--line-dark);padding:80px 0 44px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:48px}
.foot-brand .brand{font-size:26px}
.foot-brand p{margin:16px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted-dark);max-width:30ch}
.foot-col h4{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint-dark);margin:0 0 18px}
.foot-col a{display:block;font-size:14px;color:var(--muted-dark);text-decoration:none;padding:6px 0;transition:color .2s}
.foot-col a:hover{color:var(--bone)}
.foot-bottom{
  margin-top:70px;padding-top:26px;border-top:1px solid var(--line-dark);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:var(--faint-dark);
}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1080px){
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:40px 0}
  
}
@media(max-width:900px),(max-width:960px) and (max-height:500px) and (pointer:coarse){.final-inner{grid-template-columns:1fr;gap:38px}
  .nav-links,.nav-right .login{display:none}
  .nav-inner{grid-template-columns:1fr auto 1fr}
  .nav-inner .brand{grid-column:2}
  .nav-toggle{display:block}
  .nav-mobile{
    flex-direction:column;gap:4px;padding:10px 0 22px;
  }
  .nav.open .nav-mobile{display:flex}
  .nav.open{background:rgba(31,29,26,.97);backdrop-filter:blur(14px);border-color:var(--line-dark)}
  .nav-mobile a{color:rgba(242,240,234,.85);text-decoration:none;font-size:16px;padding:10px 0;border-bottom:1px solid var(--line-dark)}
  .showcase{margin-bottom:-70px}
  .steps-band{padding:112px 0 72px}
  .slide{grid-template-columns:1fr;gap:30px}
  .slider-foot{margin-top:34px;flex-direction:column;align-items:stretch}
  .stepper{gap:20px;max-width:none}
  .stp span{white-space:normal}
  .steps-arrows{justify-content:flex-end}
  .sc-body{grid-template-columns:1fr}
  .sc-dev{border-right:0;border-bottom:1px solid var(--line)}
  .matrix-band{grid-template-columns:1fr;gap:36px 0;padding:40px 28px}
  .mb-col + .mb-col{border-left:0;padding-left:0;border-top:1px solid var(--line-dark);padding-top:34px}
  .pricing-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){.mb-list{grid-template-columns:1fr}
  .mb-domains .mb-item:nth-last-child(-n+2){border-bottom:1px solid var(--line-dark)}
  .mb-domains .mb-item:last-child{border-bottom:0}
  .mb-foot b{width:100%;margin-right:0;margin-bottom:4px}
  .mb-names{flex-wrap:wrap;justify-content:flex-start;gap:6px 0}
  .stat-grid{grid-template-columns:1fr;gap:36px}
  .stat{padding-left:20px}
  .price-row{grid-template-columns:1fr;gap:10px}
  .price-top h3{white-space:normal}
  .price-amt{text-align:left}
  .foot-grid{grid-template-columns:1fr}
  .section,.statement{padding:88px 0}
  .hero h1{font-size:clamp(34px,9.5vw,48px)}
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}
.hero-cred{margin:16px 0 0;font-size:13px;letter-spacing:.02em;color:rgba(242,240,234,.72)}
.expert-rail{position:relative;margin:40px 0 0;padding-left:36px}
.expert-rail::before{content:"";position:absolute;left:0;top:8px;bottom:0;width:1px;background:linear-gradient(180deg,var(--line-strong) 0%,rgba(31,29,26,.10) 100%)}
.rail-join{position:relative;margin:0 0 20px}
.rail-join span{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.rail-join::before{content:"";position:absolute;left:-36px;top:50%;width:24px;height:1px;background:var(--line-strong)}
.expert-rail .matrix-band{margin-top:0}
@media(max-width:640px){.expert-rail{padding-left:22px}.rail-join::before{left:-22px;width:14px}
}
.person .p-role{display:block;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ember-ink)}
.person h3{font-family:var(--serif);font-weight:440;font-size:20px;letter-spacing:-.01em;margin:9px 0 9px}
.person p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
.person.more{display:flex;align-items:center;background:transparent;border-style:dashed;border-color:var(--line-strong)}
.person.more p{font-size:13.5px;color:var(--muted);font-style:italic}

body{margin:0;background:var(--charcoal)}
/* the sections between the hero and the close sit on the paper the close does */
main{background:var(--bone)}
/* The hero is the full window wide, under the scrollbar where there is one:
   the platform's door has no scrollbar, and a hero centred on what is left
   beside one sits 7.5px left of it on Windows and on a Mac with a mouse. The
   body clips the few pixels that run under the scrollbar, so the page never
   scrolls sideways; the clip on html keeps the body's from passing to the
   window, where it would only hide them. */
html,body{overflow-x:clip}
.chero{position:relative;width:100vw;min-height:100vh;min-height:100svh;display:flex;justify-content:center;align-items:flex-start;
  text-align:center;overflow:hidden;isolation:isolate}
/* A 24px-wide blur of the same frame, inline: it costs 374 bytes, needs no
   network and decodes instantly, so the first painted frame is the
   photograph's own colours rather than flat dark while the full image
   decodes. The scrim and grain sit above it, so it is treated identically. */
.chero-bg{position:absolute;inset:0;z-index:0;
  background-image:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAANABgDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAUE/8QAIhAAAgEDBAIDAAAAAAAAAAAAAQIDAAQREiEiMRNBccHh/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAID/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQACMf/aAAwDAQACEQMRAD8AxWc6OUM/EHvfrv8AK0pPatMya+PjBHH5z9VFiDBuLkY2pGhaUSaiGKeqjtsaSq3dzAmfBh8EZYrgClSkDzyMrPtjPVKBHS8v/9k=");
  background-size:cover;background-position:50% 45%}
/* The photograph holds still. It drifted — a slow 44s zoom — but Sign in
   crosses to another site that draws the same photograph, and a picture that
   is moving cannot be handed over without a seam: the two sides would have to
   agree on the phase, and any disagreement reads as a jolt. Still, they are
   the same frame. */
.chero-img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 45%}
/* The shade over the photograph, deepest behind the words, in the brand's plum and multiplied in, so the
   sunset darkens without going grey; the words carry a closer, darker shadow for the lighter sky. */
.c-scrim{position:absolute;inset:0;mix-blend-mode:multiply;background:
  linear-gradient(180deg,rgba(52,30,60,.82) 0%,rgba(58,34,66,.6) 28%,rgba(70,44,78,.16) 52%,
                  rgba(70,44,78,.1) 62%,rgba(44,26,52,.52) 86%,rgba(30,18,36,.85) 100%)}
.c-grain{position:absolute;inset:0;opacity:.13;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>")}
.chero-nav{position:absolute;top:34px;left:0;right:0;display:flex;justify-content:center;z-index:4}
.chero-nav img{height:23.4px;opacity:.96}
.chero-in{position:relative;z-index:3;width:min(1300px,calc(100% - 56px));margin-top:19vh}
.chero h1{font-family:var(--serif);font-weight:400;letter-spacing:-.028em;line-height:1.06;
  font-size:clamp(34px,3.9vw,65px);color:#F7F5F0;margin:0;white-space:nowrap;
  text-shadow:0 2px 30px rgba(20,12,24,.55),0 1px 3px rgba(20,12,24,.4)}
/* Narrower than the line above it and a size quieter: the headline carries the
   claim, this explains it. Medium weight holds it over the city's lights, and
   the measure keeps it to two lines on a laptop or larger. */
.csub{margin:28px auto 0;width:min(72%,800px);font-weight:500;font-size:clamp(16px,1.42vw,20.5px);line-height:1.5;letter-spacing:-.003em;
  color:rgba(247,245,240,.95);text-shadow:0 1px 18px rgba(20,12,24,.7),0 1px 2px rgba(20,12,24,.45);text-wrap:balance}
.ccta{display:flex;justify-content:center;margin-top:38px}
/* the hero's Request a Demo: a firm line and semibold type, with a faint shade under the letters so
   they hold over the city's lights */
.chero .btn-ghost{color:#F7F5F0;border-width:1.25px;border-color:rgba(247,245,240,.85);padding:0 32px;font-weight:600;letter-spacing:.015em;
  text-shadow:0 1px 10px rgba(20,12,24,.55)}
.chero .btn-ghost:hover{background:#F7F5F0;border-color:#F7F5F0;color:#1F1D1A;text-shadow:none}
/* credential line, set in the serif like the institutional strip */
.chero-foot{position:absolute;left:0;right:0;bottom:40px;z-index:3;display:flex;justify-content:center;padding:0 26px}
.chero-foot p{margin:0;font-family:var(--serif);font-size:clamp(14.5px,1.22vw,18.5px);line-height:1.5;
  letter-spacing:-.005em;color:rgba(247,245,240,.78);text-shadow:0 1px 18px rgba(20,12,24,.7),0 1px 2px rgba(20,12,24,.45);
  max-width:60em;text-wrap:balance}
@media(max-width:720px){.chero h1{white-space:normal;font-size:clamp(29px,7.6vw,40px)}
  .csub{width:100%}.chero-in{margin-top:15vh}.chero-foot{bottom:26px}
}

/* the nav's right-hand side: one way in for people who have the platform, one
   for people asking who we are. Nothing here names a capability. */
.chero-nav{justify-content:center;height:23.4px}
/* every page keeps the scrollbar's room, so a page too short to scroll draws its header where the others do */
html{scrollbar-gutter:stable}
.chero-links{position:absolute;right:34px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:26px;font-family:var(--sans);font-size:13.5px}
.chero-links a{color:rgba(247,245,240,.78);text-decoration:none;transition:color .18s var(--ease)}
.chero-links a:hover{color:#F7F5F0}
/* Sign in: 14px medium type in a 38px pill, its outline firm enough to read as a button over the
   photograph. The platform's own pill (`.kg__signin`) was measured to the old 13px one, so the
   crossing shows a small step in size until it follows. */
.chero-links .signin{color:#F7F5F0;border:1px solid rgba(244,244,246,.6);border-radius:8px;
  padding:8px 18px;line-height:20px;transition:background-color .25s ease,border-color .25s ease,color .25s ease}
/* on hover an outlined button fills with its outline's colour and its type turns over */
.chero-links .signin:hover{background:#F7F5F0;border-color:#F7F5F0;color:#1F1D1A}

.kw-about{background:#F7F5F0;color:#1F1D1A;padding:118px 0 104px}
.kw-wrap{width:min(1100px,calc(100% - 56px));margin:0 auto}
.kw-eb{margin:0;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:#6E4A63}
/* the mission is the one large thing here: it answers what the section asks,
   and everything under it is detail. */
.kw-mission{margin:20px 0 0;font-family:var(--serif);font-weight:400;
  font-size:clamp(25px,2.5vw,40px);line-height:1.22;letter-spacing:-.022em;max-width:34ch}
.kw-cols{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:66px;padding-top:38px;
  border-top:1px solid rgba(31,29,26,.14)}
.kw-k{margin:0 0 10px;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#96918a}
.kw-body{margin:0;font-family:var(--serif);font-size:17.5px;line-height:1.55;letter-spacing:-.008em;
  color:#33302b;max-width:36em}
.kw-body a{color:#1F1D1A;text-decoration:none;border-bottom:1px solid rgba(31,29,26,.3)}
.kw-names{display:flex;flex-wrap:wrap;gap:6px 0;margin:20px 0 0;font-family:var(--serif);
  font-size:14px;color:#6F6A60}
.kw-names span:not(:last-child)::after{content:"";display:inline-block;width:4px;height:4px;
  transform:rotate(45deg);background:#A26B3E;opacity:.55;margin:0 13px;vertical-align:middle}

.kw-foot{background:#F7F5F0;border-top:1px solid rgba(31,29,26,.1);padding:26px 0 34px}
.kw-foot__row{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--sans);font-size:12px;color:#96918a}
.kw-foot__links{display:flex;gap:24px}
.kw-foot a{color:#6F6A60;text-decoration:none}
.kw-foot a:hover{color:#1F1D1A}

@media(max-width:820px),(max-width:960px) and (max-height:500px) and (pointer:coarse){.chero-links{right:22px;gap:16px;font-size:12.5px}
  .kw-about{padding:76px 0 68px}
  .kw-cols{grid-template-columns:1fr;gap:42px;margin-top:46px}
}

/* ── the seam: the photograph sinks as the section rises over it ───────── */
/* the wrapper carries the parallax. */
.chero-bg{inset:-8% 0}
.c-deep{position:absolute;inset:0;background:#100E14;opacity:0;z-index:2;pointer-events:none}

/* ── the section assembles as it arrives ───────────────────────────────── */
.rise{opacity:0;transform:translateY(22px);
  transition:opacity .72s cubic-bezier(.22,.61,.36,1),transform .72s cubic-bezier(.22,.61,.36,1)}
.rise.in{opacity:1;transform:none}
.kw-rule{height:1px;background:rgba(31,29,26,.14);margin:54px 0 34px}
.kw-rule.rise{transform:scaleX(.18);transform-origin:left}
.kw-rule.rise.in{transform:none;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
/* the rule replaces what the columns used to draw for themselves */
.kw-cols{margin-top:0;padding-top:0;border-top:0}

/* A page aimed at people on managed corporate machines: if the system asks for
   less motion, none of this happens and nothing is hidden waiting for it. */
@media(prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
}

.kw-more{margin:18px 0 0;font-family:var(--sans,Inter,sans-serif);font-size:13px}
.kw-more a{color:#6E4A63;text-decoration:none;border-bottom:1px solid rgba(110,74,99,.34);
  padding-bottom:2px;transition:border-color .18s ease}
.kw-more a:hover{border-bottom-color:#6E4A63}
.kw-more span{display:inline-block;transition:transform .22s cubic-bezier(.22,.61,.36,1)}
.kw-more a:hover span{transform:translateX(4px)}
.chero-img{transition:filter .5s cubic-bezier(.22,.61,.36,1)}
.chero-in,.chero-foot{transition:opacity .3s cubic-bezier(.22,.61,.36,1),
  transform .34s cubic-bezier(.22,.61,.36,1)}
/* the hero's entrance: the headline arrives word by word, with a held breath
   before the last, and the rest of the hero follows once it has landed. The
   photograph is there from the first frame. */
@keyframes hwIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes hwSoft{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.chero h1 .hw{display:inline-block;animation:hwIn .95s cubic-bezier(.22,.61,.36,1) calc(.25s + var(--i) * .16s) both}
.chero h1 .hw--last{animation-duration:1.3s;animation-delay:1.1s}
.chero .csub{animation:hwSoft 1s cubic-bezier(.22,.61,.36,1) 2.05s both}
.chero .ccta{animation:hwSoft 1s cubic-bezier(.22,.61,.36,1) 2.3s both}
.chero-foot p{animation:hwSoft 1.2s cubic-bezier(.22,.61,.36,1) 2.6s both}
@media(prefers-reduced-motion:reduce){.chero h1 .hw,.chero .csub,.chero .ccta,.chero-foot p{animation:none}}
/* It was an <a> and is now a <button>: the border and colour came across, the
   browser's own button background did not need resetting before and does now. */
.chero .signin{appearance:none;-webkit-appearance:none;background:transparent;
  font:inherit;font-size:14px;font-weight:500;line-height:20px;cursor:pointer}
@keyframes cs-in{from{opacity:0;transform:translateY(-5px)}}

/* ══ the closing screen ═══════════════════════════════════════════════════
   The mission section and the footer are one block that fills the screen, so
   the hero never leaves a sliver above them. The height that buys is not
   padding: the statement is set large and centred in it, and the band at the
   foot closes the page on the same dark note the hero opened with. */
.kw-close{min-height:100svh;display:flex;flex-direction:column}
/* the section centres its own block; the wrap keeps its width and auto margins,
   which a `flex:1` on it would have overridden */
.kw-about{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:70px 0 46px}
.kw-mission{font-size:clamp(28px,3.6vw,52px);line-height:1.16;letter-spacing:-.026em;
  max-width:44ch;margin-top:26px;text-wrap:balance}
.kw-rule{margin:64px 0 38px}
/* the sentence is an antithesis, so its two halves are marked as a pair: the
   eyebrow's plum against the bronze the affiliation diamonds use. Weight stays
   400 — only the hue moves, so the line keeps one texture and reads as one
   sentence. Both clear 6:1 on the cream. */
.kw-mx{font-weight:400}
.kw-mx--human{color:#6E4A63}
.kw-mx--ai{color:#8A5B33}
/* the address lives in the band now, so the row below the rule is one column
   and the leadership note keeps a readable measure */
.kw-cols{grid-template-columns:1fr}
.kw-body{max-width:34em}

/* ── the band ─────────────────────────────────────────────────────────────
   The page ends on how to reach us rather than on a copyright notice: the
   address is set large, with one line above it saying what writing gets you,
   and the notice is a caption beneath. */
.kw-foot{flex:0 0 auto;background:#141118;border-top:0;color:rgba(247,245,240,.62);
  padding:0 0 20px}
.kw-foot__band{display:block;padding:38px 0 0;text-align:center}
.kw-foot__ask{margin:0;font-family:var(--sans);font-size:10px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:rgba(247,245,240,.42)}
.kw-foot__say{display:inline-block;margin-top:11px;font-family:var(--serif);
  font-size:clamp(22px,2.4vw,31px);letter-spacing:-.02em;color:#F7F5F0;text-decoration:none;
  border-bottom:1px solid rgba(247,245,240,.28);padding-bottom:3px;
  transition:border-color .2s ease}
.kw-foot__say:hover{border-bottom-color:#F7F5F0}
.kw-foot__row{justify-content:center;margin-top:34px;padding-top:20px;
  border-top:1px solid rgba(247,245,240,.08);color:rgba(247,245,240,.34);font-size:11.5px}
.kw-foot a{color:rgba(247,245,240,.72)}
.kw-foot a:hover{color:#F7F5F0}

/* ── the hero says there is more below ────────────────────────────────────
   A small glass circle under the credential line, its arrow nodding down every
   few seconds; a click takes the reader to the mission. It arrives after the
   hero has settled, goes as soon as the page moves, and goes with everything
   else when the sign-in panel opens. */
.chero-foot{bottom:92px}
.chero-cue{position:absolute;left:50%;bottom:26px;z-index:3;width:44px;height:44px;margin-left:-22px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;color:#F7F5F0;
  border:1px solid rgba(247,245,240,.55);background:rgba(20,16,23,.28);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-tap-highlight-color:transparent;
  animation:cue-in 1s cubic-bezier(.22,.61,.36,1) 3s both;
  transition:opacity .45s cubic-bezier(.22,.61,.36,1),background .2s ease,border-color .2s ease}
.chero-cue:hover{background:rgba(247,245,240,.12);border-color:rgba(247,245,240,.8)}
.chero-cue:focus-visible{outline:2px solid #F7F5F0;outline-offset:3px}
.chero-cue svg{width:16px;height:16px;animation:cue-nod 2.6s ease-in-out 3.4s infinite}
@keyframes cue-in{from{opacity:0}}
@keyframes cue-nod{0%,55%,100%{transform:none}25%{transform:translateY(4px)}}
.chero.has-moved .chero-cue{opacity:0;pointer-events:none}

@media(max-width:820px),(max-width:960px) and (max-height:500px) and (pointer:coarse){.kw-about{padding:56px 0 40px}
  .kw-mission{max-width:100%}
  .kw-foot__band{padding:30px 0 0}
  .chero-foot{bottom:74px}
  .chero-cue{bottom:18px;width:40px;height:40px;margin-left:-20px}
}
@media(prefers-reduced-motion:reduce){.chero-cue,.chero-cue svg{animation:none}
}

/* Added: the headline leads at every width, and gives up its single line only
   where holding it would shrink it back into the subtext's size. */
@media(max-width:820px),(max-width:960px) and (max-height:500px) and (pointer:coarse){
  .chero h1{white-space:normal;font-size:clamp(32px,8vw,50px);max-width:15ch;
    margin-left:auto;margin-right:auto}
  .csub{width:88%;font-size:clamp(15.5px,3.5vw,18px)}
}

/* ── the request panel ────────────────────────────────────────────────────
   Request a Demo opens in place: the hero's house lights come up, the words
   fade back, and the panel resolves over the photograph. Lifted from the
   design mockup unchanged, minus everything that belonged to sign-in — that
   lives on the platform, and this page links to it.

   When wellspring is in production this panel posts to the platform's own
   request endpoint instead of `FORM_ENDPOINT` below, and the two become one
   form again. */
.c-house{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;
  background:rgba(12,10,16,.52);transition:opacity .42s cubic-bezier(.22,.61,.36,1)}
/* Leaving for the platform: the request panel's dimming, without its panel —
   the door arrives at exactly this, and opens its own. */
.chero.is-leaving .c-house{opacity:1}
.chero.is-leaving .chero-img{filter:saturate(.62) brightness(.78)}
.chero.is-leaving .chero-in,
.chero.is-leaving .chero-foot{opacity:0;transform:translateY(-24px);pointer-events:none}
.chero.is-leaving .chero-cue{opacity:0;pointer-events:none}
.chero.is-leaving.is-signin .signin{background:#F7F5F0;border-color:#F7F5F0;color:#1F1D1A}
.cd-ask{text-align:center}

/* ══ the landing page's own parts ═══════════════════════════════════════
   The slim bar: the hero carries its own nav, so the bar waits above the
   window until the hero has scrolled away. */
.kw-bar{position:fixed;top:0;left:0;right:0;z-index:60;height:56px;
  background:rgba(242,240,234,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);transform:translateY(-100%);
  transition:transform .35s var(--ease)}
.kw-bar.is-on{transform:none}
.kw-bar__in{width:min(1240px,calc(100% - 48px));height:100%;margin:0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.kw-bar__mark img{display:block;height:20px;width:auto}
.kw-bar__links{display:flex;gap:30px}
.kw-bar__links a,.kw-bar__signin{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:rgba(31,29,26,.62);transition:color .25s var(--ease)}
.kw-bar__links a:hover,.kw-bar__signin:hover{color:var(--ink)}
.kw-bar__end{justify-self:end;display:flex;align-items:center;gap:22px}
.kw-bar .kw-bar__ask{min-height:36px;padding:0 16px;font-size:13px}
@media(max-width:760px),(max-width:960px) and (max-height:500px) and (pointer:coarse){
  .kw-bar__in{grid-template-columns:1fr auto}
  .kw-bar__links{display:none}
}
@media(max-width:420px){.kw-bar__signin{display:none}}
/* the bar's height, kept clear above anything an in-page link lands on */
html{scroll-padding-top:56px}


/* Leadership: a few lines each beside a small portrait, and the full page a
   link away. */
.kw-lead .section-head strong{font-weight:500}
.kw-lead__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}
.kw-lead__p{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start}
.kw-lead__shot{display:block;width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:center 22%;
  background:var(--charcoal)}
.kw-lead__name{font-size:20px;line-height:1.2;letter-spacing:-.012em}
.kw-lead__role{margin:5px 0 0;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--plum)}
.kw-lead__cred{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.kw-lead .kw-more{margin-top:40px}
@media(max-width:900px),(max-width:960px) and (max-height:500px) and (pointer:coarse){.kw-lead__grid{grid-template-columns:1fr;gap:24px;max-width:520px}}



/* The experience's intro is the offer itself, and leadership's says who stands
   behind it, so both are set as statements, in the serif and at full ink,
   rather than as muted section ledes. */
#experience .section-head,#leadership .section-head{max-width:860px}
#experience .section-head p,#leadership .section-head p{max-width:36em;font-family:var(--serif);font-size:clamp(20px,1.9vw,24px);
  line-height:1.45;letter-spacing:-.008em;color:var(--ink)}

/* The mission opens the page now, straight under the hero, and the footer
   closes it alone: the section sizes to its statement, not to the screen. */
.kw-about{flex:none;padding:120px 0 112px;border-bottom:1px solid var(--line)}
@media(max-width:820px),(max-width:960px) and (max-height:500px) and (pointer:coarse){.kw-about{padding:76px 0 68px}}
/* and on the sections' column, so its left edge is theirs */
.kw-about .kw-wrap{width:min(1240px,calc(100% - 48px))}

/* The mission on its own ground: a deep aubergine with two soft fields of
   colour, plum on the left and bronze on the right, the same pair that marks
   the sentence's two halves, human expertise and artificial intelligence. */
.kw-about{position:relative;overflow:hidden;background:#17131A;color:var(--bone);border-bottom:0}
.kw-about::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 70% at 8% 18%,rgba(110,74,99,.55),transparent 72%),
    radial-gradient(42% 66% at 94% 88%,rgba(138,91,51,.42),transparent 72%)}
.kw-about::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.kw-about .kw-wrap{position:relative;z-index:1}
.kw-about .kw-mission{margin-top:0;color:#F4F1EA}
/* on a wide screen the statement breaks where its markup sets; a phone wraps it freely */
.kw-about .kw-mission{max-width:none}
@media(max-width:820px),(max-width:960px) and (max-height:500px) and (pointer:coarse){.kw-br{display:none}}
.kw-about .kw-mx--human{color:#D2AEC6}
.kw-about .kw-mx--ai{color:#DDB38C}

/* Coverage: requests typed out over the three axes, each lighting what it names. */
.cvG{position:relative;margin-top:56px;background:#17131A;color:var(--bone);border-radius:var(--r-lg);overflow:hidden}
.cvG::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(34% 40% at 0% 0%,rgba(110,74,99,.45),transparent 72%),
             radial-gradient(34% 40% at 50% 100%,rgba(92,122,110,.22),transparent 72%),
             radial-gradient(34% 40% at 100% 0%,rgba(138,91,51,.32),transparent 72%)}
.cvG > *{position:relative}
.cvG__ask{margin:34px 34px 0;padding:22px 30px 26px;border:1px solid rgba(242,240,234,.14);border-radius:14px;
  background:rgba(242,240,234,.035)}
/* the box is a package being commissioned: its label, and the team's status */
.cvG__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.cvG__eb{margin:0;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,240,234,.5)}
.cvG__status{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(242,240,234,.55);white-space:nowrap}
.cvG__status::before{content:"";width:7px;height:7px;border-radius:50%;background:#C9A27A;animation:cvGpulse 1.4s ease-in-out infinite}
.cvG__status.is-ready{color:#9DBBAD}
.cvG__status.is-ready::before{background:#9DBBAD;animation:none}
@keyframes cvGpulse{50%{opacity:.3}}
.cvG__line{margin:0;font-family:var(--serif);font-size:clamp(23px,2.6vw,34px);line-height:1.25;letter-spacing:-.018em;
  color:#F4F1EA;min-height:2.5em}
.cvG__typed .j{color:#E3C6D8}.cvG__typed .a{color:#BFD8CC}.cvG__typed .d{color:#E6C39F}
.cvG__caret{display:inline-block;width:2px;height:.95em;margin-left:3px;vertical-align:-.1em;background:#F4F1EA;
  animation:cvGblink 1s steps(1) infinite}
@keyframes cvGblink{50%{opacity:0}}
.cvG__cols{display:grid;grid-template-columns:repeat(3,1fr);margin-top:34px;border-top:1px solid var(--line-dark)}
.cvG__col{padding:34px 38px 30px}
.cvG__col + .cvG__col{border-left:1px solid var(--line-dark)}
.cvG__n{margin:0;font-family:var(--serif);font-size:14px}
.cvG__col--j .cvG__n{color:#B58FA8}.cvG__col--a .cvG__n{color:#9DBBAD}.cvG__col--d .cvG__n{color:#C9A27A}
.cvG__h{margin-top:8px;font-size:clamp(24px,2.2vw,30px);letter-spacing:-.018em;font-weight:400}
.cvG__list{list-style:none;margin:20px 0 0;padding:0}
.cvG__list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line-dark);
  font-family:var(--serif);font-size:16.5px;line-height:1.3;color:rgba(242,240,234,.5);transition:color .4s ease}
.cvG__list li::before{content:"";flex:0 0 auto;width:6px;height:6px;transform:rotate(45deg) scale(0);
  transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.cvG__col--j li::before{background:#B58FA8}.cvG__col--a li::before{background:#9DBBAD}.cvG__col--d li::before{background:#C9A27A}
.cvG__list li.is-on{color:#F4F1EA}
.cvG__list li.is-on::before{transform:rotate(45deg) scale(1)}
/* the lists run on past what is shown: a last row of three squares in the
   column's colour, fading out, in place of an end */
.cvG__col--j{--cc:181,143,168}.cvG__col--a{--cc:157,187,173}.cvG__col--d{--cc:201,162,122}
.cvG__list::after{content:"";display:block;height:38px;border-top:1px solid var(--line-dark);
  /* starting where the names do: past each row's 6px marker and its 10px gap */
  background:linear-gradient(rgba(var(--cc),.75),rgba(var(--cc),.75)) 16px 50%/5px 5px no-repeat,
             linear-gradient(rgba(var(--cc),.45),rgba(var(--cc),.45)) 26px 50%/5px 5px no-repeat,
             linear-gradient(rgba(var(--cc),.2),rgba(var(--cc),.2)) 36px 50%/5px 5px no-repeat}
/* one line under all three columns, in place of a note at the foot of each */
.cvG__foot{margin:0;padding:20px 38px 24px;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;
  align-items:baseline;justify-content:space-between;gap:8px 24px;font-family:var(--serif);font-size:16px;
  color:rgba(242,240,234,.62)}
.cvG__foot a{font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:.02em;color:#F4F1EA;
  text-decoration:none;border-bottom:1px solid rgba(242,240,234,.3);padding-bottom:2px;transition:border-color .2s ease}
.cvG__foot a:hover{border-bottom-color:#F4F1EA}
.cvG__foot a span{display:inline-block;transition:transform .22s cubic-bezier(.22,.61,.36,1)}
.cvG__foot a:hover span{transform:translateX(3px)}
@media(max-width:900px),(max-width:960px) and (max-height:500px) and (pointer:coarse){.cvG__foot{padding:18px 24px 22px}}
@media(max-width:900px),(max-width:960px) and (max-height:500px) and (pointer:coarse){.cvG__cols{grid-template-columns:1fr}
  .cvG__col + .cvG__col{border-left:0;border-top:1px solid var(--line-dark)}
  .cvG__ask{margin:24px 20px 0;padding:18px 20px 20px}
  .cvG__col{padding:28px 24px}}
@media(prefers-reduced-motion:reduce){.cvG__caret,.cvG__status::before{animation:none}}

/* the small uppercase label the coverage section's cards open with */
.cv-intro__k{margin:0;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--plum)}

/* The mission's two fields of colour drift, slowly, behind the statement. */
.kw-about::before{inset:-12%;animation:kwDrift 32s ease-in-out infinite alternate}
@keyframes kwDrift{
  0%{transform:translate3d(-3%,-2%,0) scale(1)}
  50%{transform:translate3d(2%,3%,0) scale(1.06)}
  100%{transform:translate3d(4%,-1%,0) scale(1.02)}
}
.kw-mission.is-lit-by-scroll .kw-w{transition:opacity .25s linear}
@media(prefers-reduced-motion:reduce){.kw-about::before{animation:none;inset:0}}

/* Coverage, around the panel: its intro statement, then what lies beyond the package,
   the agent and the expert that fit whichever package the panel shows. */
.cv-lede{margin-top:22px;max-width:860px}
.cv-lede__body{margin:0;font-family:var(--serif);font-size:clamp(20px,1.9vw,24px);line-height:1.45;
  letter-spacing:-.008em;color:var(--ink)}
/* below the panel: what lies beyond the package, joined to it by a line down */
.cv-more{position:relative;padding-top:64px}
.cv-more::before{content:"";position:absolute;left:50%;top:0;height:44px;width:1px;background:var(--line-strong)}
/* the step from the package to what lies beyond it, at the foot of the line down */
.cv-more__join{margin:0 0 32px;text-align:center;font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,2.8vw,38px);line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
/* the cards share rows, so the gap between them is columns only; rows set their own space */
.cv-more__cols{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.cv-more__col{position:relative;overflow:hidden;padding:34px 38px 30px;
  border-radius:var(--r-lg)}
.cv-more__col h4{margin-top:14px;font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.2vw,30px);line-height:1.18;
  letter-spacing:-.017em;color:var(--ink);max-width:17em}
.cv-more__lede{margin:20px 0 0;font-size:15px;line-height:1.6;color:var(--muted);max-width:34em}
@media(max-width:800px),(max-width:960px) and (max-height:500px) and (pointer:coarse){.cv-more__cols{grid-template-columns:1fr;row-gap:20px}.cv-more{padding-top:52px}.cv-more::before{height:34px}
  .cv-more__col{padding:28px 24px 24px}}


.cv-more__col--agents{background:#3F5C52}
.cv-more__col--experts{background:#7A5133}
.cv-more__col h4{color:#F6F2EA}
.cv-more__lede{color:rgba(246,242,234,.72)}
.cv-more__col--agents .cv-intro__k{color:#CFE3D9}
.cv-more__col--experts .cv-intro__k{color:#F1D3B3}


.lv{margin-top:42px;padding:18px 20px 18px;border-radius:12px;background:rgba(0,0,0,.18);border:1px solid rgba(246,242,234,.14);
  transition:opacity .28s ease,transform .28s ease;min-height:150px}
.lv.is-out{opacity:0;transform:translateY(4px)}
.lv__top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(246,242,234,.6)}
.lv__top em{font-style:normal;padding:3px 9px;border-radius:100px;border:1px solid rgba(246,242,234,.22);font-size:9.5px;
  color:rgba(246,242,234,.6);white-space:nowrap}
.lv--agent .lv__name{color:#CFE3D9}
.lv__io{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:12px;align-items:baseline;margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(246,242,234,.12)}
.lv__io b{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,242,234,.5)}
.lv__in{font-family:var(--serif);font-size:17px;color:rgba(246,242,234,.85)}
.lv__io--out .lv__out{font-family:var(--serif);font-size:clamp(19px,1.7vw,22px);line-height:1.3;color:#F6F2EA}
.lv--expert .lv__top em{color:#F1D3B3;border-color:rgba(241,211,179,.4)}
/* the same rule under the header as the agent box draws above its rows */
/* both boxes: a rule under the header, which the cards' shared rows keep level */
.cv-more__col .lv__top{padding-bottom:14px;border-bottom:1px solid rgba(246,242,234,.12)}
.lv__top em{text-align:center}
.lv__body .lv__io:first-child{margin-top:0;border-top:0}
/* the credential sits centred in the space under the header */
/* the credential sits centred in a body the script holds at a fixed height */
.lv--expert .lv__cred{display:flex;align-items:center;margin:0;padding:16px 0 6px}
.lv__cred{margin:14px 0 0;font-family:var(--serif);font-size:clamp(22px,2.1vw,28px);line-height:1.22;letter-spacing:-.015em;color:#F6F2EA}
@media(max-width:560px){.lv__io{grid-template-columns:1fr;gap:4px}}

/* the two cards share rows, so their example boxes start on one line and end on another */
.cv-more__cols{grid-template-rows:auto auto auto auto 1fr}
.cv-more__col{display:grid;grid-row:span 5;grid-template-rows:subgrid;align-content:start}
.cv-more__col > *{min-width:0}
/* and the boxes share theirs: the header row, then the body */
.cv-more__col .lv{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0;min-height:0}
@media(max-width:800px),(max-width:960px) and (max-height:500px) and (pointer:coarse){.cv-more__cols{grid-template-rows:none}
  .cv-more__col,.cv-more__col .lv{grid-row:auto;grid-template-rows:none}}

/* whatever room the fixed height leaves is shared above and below the rows */
.lv__body{display:flex;flex-direction:column;justify-content:center}

/* The site's pages, in the hero's nav beside Sign in: small spaced capitals, as in the slim bar.
   Sign in keeps its own pill, measured to the platform's door. */
.chero-links{gap:28px}
.chero-links a:not(.signin){font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1}
@media(max-width:760px),(max-width:960px) and (max-height:500px) and (pointer:coarse){.chero-links a:not(.signin){display:none}}

/* One header on every page: the hero spans the window's content width, not under the scrollbar,
   so the wordmark and the links sit where they do on the leadership and coverage pages; the page
   links take the same box as theirs, so their text sits on the same line. */
.chero{width:100%}
.chero-links a:not(.signin){padding:5px 0;border-bottom:1px solid transparent}

/* the slim bar's wordmark, on hover: a hairline drawn out from the centre beneath it */
.kw-bar__mark{position:relative;display:block;justify-self:start}
.kw-bar__mark::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--plum);
  transform:scaleX(0);transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.kw-bar.is-dark .kw-bar__mark::after{background:rgba(247,245,240,.8)}
.kw-bar__mark:hover::after,.kw-bar__mark:focus-visible::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.kw-bar__mark::after{transition:none}}
/* the hero's wordmark leads to the top, and draws the same hairline beneath it on hover, in white */
.chero-mark{position:relative;display:block}
.chero-mark::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:rgba(247,245,240,.8);
  transform:scaleX(0);transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.chero-mark:hover::after,.chero-mark:focus-visible::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.chero-mark::after{transition:none}}

/* ── the header past the top: the hero's header scrolls away with the page; a compact glass band, with the same
   items in the same places, shows only while the visitor scrolls up, and goes as soon as they read on ── */
.hb{position:fixed;top:0;left:0;right:0;height:64px;z-index:60;opacity:0;pointer-events:none;transform:translateY(-8px);
  transition:opacity .22s ease,transform .3s cubic-bezier(.22,.61,.36,1)}
.hb.is-on{opacity:1;pointer-events:auto;transform:none}
.hb::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(242,240,234,.74);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid rgba(31,29,26,.1);
  transition:background-color .3s ease,border-color .3s ease}
.hb.is-ondark::before{background:rgba(23,19,26,.62);border-bottom-color:rgba(242,240,234,.1)}
.hb-mark{position:absolute;left:50%;top:20px;transform:translateX(-50%);display:block}
.hb-mark img{display:block;height:23.4px;width:auto;transition:opacity .3s ease}
.hb-mark .wm-p{position:absolute;left:0;top:0}
.hb .wm-w{opacity:0}.hb.is-ondark .wm-w{opacity:.96}.hb.is-ondark .wm-p{opacity:0}
.hb-mark::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--plum);transform:scaleX(0);transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.hb.is-ondark .hb-mark::after{background:rgba(247,245,240,.8)}
.hb-mark:hover::after,.hb-mark:focus-visible::after{transform:scaleX(1)}
.hb-links{top:20px;transform:none;height:23.4px}
.hb .hb-links a:not(.signin){color:rgba(31,29,26,.62)}
.hb .hb-links a:not(.signin):hover{color:var(--ink)}
.hb .hb-links .signin{font-size:14px;font-weight:500;line-height:20px;color:var(--ink);border-color:rgba(31,29,26,.4)}
.hb .hb-links .signin:hover{background:#1F1D1A;border-color:#1F1D1A;color:#F7F5F0}
.hb.is-ondark .hb-links a:not(.signin){color:rgba(247,245,240,.78)}
.hb.is-ondark .hb-links a:not(.signin):hover{color:#F7F5F0}
.hb.is-ondark .hb-links .signin{color:#F7F5F0;border-color:rgba(244,244,246,.6)}
.hb.is-ondark .hb-links .signin:hover{background:#F7F5F0;border-color:#F7F5F0;color:#1F1D1A}
.hb-links a{transition:color .3s ease,border-color .3s ease,background-color .2s ease}
@media(prefers-reduced-motion:reduce){.hb{transition:none}}

/* on a narrow phone the pill keeps its type and gives up some side padding, clear of the wordmark */
@media(max-width:420px){.chero-links .signin{padding:7px 13px}}

/* ══ phones ═══════════════════════════════════════════════════════════════
   Everything below changes the page only on a phone: under 760px, or a touch screen on its side
   (the one definition is in site.css, and PHONE in site.js). */
.acc-h{display:none}
.acc-b,.acc-in{display:contents}
@media(max-width:760px),(max-width:960px) and (max-height:500px) and (pointer:coarse){

  /* the hero: a larger headline over a slightly smaller explanation */
  .chero h1{font-size:clamp(32px,9.4vw,40px);max-width:11em}
  .csub{font-size:15px;line-height:1.5}

  /* the four steps as an accordion in an inset panel: every step named, one open at a time,
     its paragraph and sample card shown whole */
  .steps-band{margin:0 10px;border-radius:18px;padding:96px 0 30px}
  .steps-band .wrap{width:100%}
  .steps-band .slider-foot,.mock-glow,.step-kicker{display:none}
  .slides{overflow:visible;padding:0 22px;margin:0}
  .slides-track{display:block;transform:none!important;transition:none}
  .slide{display:block;padding:0;border-top:1px solid rgba(242,240,234,.12)}
  .slide:last-child{border-bottom:1px solid rgba(242,240,234,.12)}
  .acc-h{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;padding:17px 0;cursor:pointer;
    font:500 16px/1.2 var(--sans);letter-spacing:-.005em;color:rgba(242,240,234,.82)}
  .acc-h b{font:400 14px/1 var(--serif);color:var(--tone)}
  .acc-h::after{content:"";margin-left:auto;width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:translateY(-3px) rotate(45deg);opacity:.6;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
  .acc-h:focus-visible{outline:2px solid rgba(242,240,234,.6);outline-offset:2px;border-radius:4px}
  .slide.is-open .acc-h{color:#F2F0EA}
  .slide.is-open .acc-h::after{transform:translateY(2px) rotate(-135deg)}
  .a-plum{--tone:#DCC2D3}.a-ember{--tone:#E4C9A8}.a-jade{--tone:#C4D8CD}
  /* a step's body eases open and shut: its row grows from nothing to its own height, and fades */
  .acc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.32,.72,0,1)}
  .acc-in{display:block;min-height:0;overflow:hidden;opacity:0;transform:translateY(-6px);transition:opacity .25s ease,transform .45s cubic-bezier(.32,.72,0,1)}
  .slide.is-open .acc-b{grid-template-rows:1fr}
  .slide.is-open .acc-in{opacity:1;transform:none;transition:opacity .35s ease .06s,transform .45s cubic-bezier(.32,.72,0,1)}
  /* the browser's own scroll anchoring would move the page as a step grows under the finger */
  html{overflow-anchor:none}
  /* a row answers the finger at once, before anything opens */
  .acc-h{-webkit-tap-highlight-color:transparent;transition:color .2s ease}
  .acc-h:active{color:#F2F0EA}
  .acc-h:active b{opacity:.75}
  .acc-in > .slide-copy{max-width:none}
  .acc-in > .card{margin-bottom:24px}
  @media(prefers-reduced-motion:reduce){.acc-b,.acc-in{transition:none}}
  .slide h3{margin:2px 0 10px;font-size:23px;line-height:1.16;letter-spacing:-.02em;max-width:none}
  .steps-band .slide h3{color:#fff}
  .slide p{margin:0 0 18px;font-size:14.5px;line-height:1.6;max-width:none}
  .steps-band .card{padding:16px;border-radius:14px;border-top-width:4px;box-shadow:none}
  .slide:hover .card{transform:none}

  /* the package's label has its row to itself: the typing shows it being built */
  .cvG__status{display:none}
  .cvG__head{margin-bottom:10px}
  /* and sets who the package is for on a line of its own, rather than wrapping wherever it falls */
  .cvG__dot{display:none}
  .cvG__for{display:block;margin-top:5px;color:rgba(242,240,234,.72)}

  /* coverage: the package being typed, then each list as one row of tags that swipes sideways */
  .cvG__ask{margin-bottom:20px}
  /* room held for the longest package, so the card doesn't grow and shrink as it types */
  .cvG__line{font-size:20px;min-height:6.25em}
  .cvG__cols{display:block;margin-top:0}
  .cvG__col{padding:18px 0 0}
  .cvG__col:last-child{padding-bottom:22px}
  .cvG__col + .cvG__col{border-top:0}
  .cvG__n{display:none}
  .cvG__h{margin:0;padding:0 20px;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--cc))}
  /* the row fades at whichever edge has more to show */
  .cvG__list{display:flex;flex-wrap:nowrap;gap:8px;margin:10px 0 0;padding:0 20px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 56px),transparent)}
  .cvG__list::-webkit-scrollbar{display:none}
  .cvG__list::after{display:none}
  .cvG__list li{flex:0 0 auto;gap:0;padding:6px 12px;border:1px solid rgba(242,240,234,.16);border-radius:100px;font-size:14.5px;white-space:nowrap;
    transition:color .4s ease,border-color .4s ease,background-color .4s ease}
  .cvG__list li::before{width:0;margin-right:0;transition:transform .35s cubic-bezier(.22,.61,.36,1),width .35s ease,margin .35s ease}
  .cvG__list li.is-on{border-color:rgba(var(--cc),.6);background:rgba(var(--cc),.1)}
  .cvG__list li.is-on::before{width:6px;margin-right:8px}

  /* text links get a tap area of about 44px, with no change to how they look */
  .cvG__foot a,.kw-more a{position:relative}
  .cvG__foot a::after,.kw-more a::after{content:"";position:absolute;inset:-12px -6px}
}

/* ── a phone on its side: the layout of a phone, in a screen too short for the hero's words, button and
   credential line to stand apart by height. There they follow one another down the hero, which grows
   to hold them; the arrow that points below is left out. ── */
@media(max-width:960px) and (max-height:500px) and (pointer:coarse){
  .chero{flex-direction:column;align-items:center;padding-bottom:30px}
  .chero-in{margin-top:84px}
  .chero-foot{position:relative;bottom:auto;margin-top:26px}
  .chero-cue{display:none}
}