/* ==========================================================================
   LaunchNexus — shared stylesheet
   Tokens → base → layout → components → sections → responsive
   ========================================================================== */

:root{
  /* Colour */
  --ink:#0A0F1C;              /* deep navy, near-black — dark sections */
  --ink-2:#121A2E;            /* raised surface on dark */
  --ink-3:#1B2540;            /* hairlines on dark */
  --white:#FFFFFF;
  --mist:#F4F6FB;             /* light section background */
  --line:#E3E8F2;             /* hairlines on light */
  --text:#0A0F1C;
  --muted:#5C6880;            /* body text on light */
  --muted-dark:#96A3BD;       /* body text on dark */
  --blue:#3568EE;
  --violet:#6E4CF2;
  --accent:var(--blue);
  --grad:linear-gradient(120deg,#3568EE 0%,#6E4CF2 100%);
  --focus:#6E4CF2;

  /* Elevation — restrained */
  --sh-1:0 1px 2px rgba(10,15,28,.04), 0 8px 24px rgba(10,15,28,.06);
  --sh-2:0 2px 4px rgba(10,15,28,.05), 0 18px 48px rgba(10,15,28,.10);

  /* Shape & rhythm */
  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:28px;
  --pad:clamp(20px,5vw,40px);
  --sec:clamp(64px,9vw,124px);
  --max:1180px;
  --header-h:74px;

  /* Type */
  --f-display:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--text);
  font-family:var(--f-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;line-height:1.08;letter-spacing:-.028em;font-weight:800}
h1{font-size:clamp(38px,5.6vw,68px)}
h2{font-size:clamp(30px,4.2vw,50px)}
h3{font-size:clamp(19px,1.7vw,23px);letter-spacing:-.02em;font-weight:700;line-height:1.25}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:4px}
::selection{background:var(--violet);color:#fff}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding:var(--sec) 0}
.section--mist{background:var(--mist)}
.section--ink{background:var(--ink);color:var(--white)}
.section--ink h1,.section--ink h2,.section--ink h3{color:var(--white)}
.section--ink p{color:var(--muted-dark)}
.measure{max-width:60ch}
.center{text-align:center;margin-left:auto;margin-right:auto}

.eyebrow{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);font-weight:500;display:block;margin-bottom:18px;
}
.section--ink .eyebrow{color:#8FB0FF}
.lede{font-size:clamp(17px,1.55vw,19.5px);color:var(--muted);max-width:56ch}
.section--ink .lede{color:var(--muted-dark)}
.head{margin-bottom:clamp(36px,5vw,60px)}
.head .lede{margin-top:20px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:-.01em;
  padding:14px 26px;border-radius:99px;text-decoration:none;border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--grad);color:#fff;box-shadow:0 8px 22px rgba(53,104,238,.28)}
.btn--primary:hover{box-shadow:0 14px 32px rgba(53,104,238,.36)}
.btn--ghost{border-color:var(--line);background:var(--white);color:var(--text)}
.btn--ghost:hover{border-color:var(--text)}
.section--ink .btn--ghost{background:transparent;border-color:rgba(255,255,255,.24);color:#fff}
.section--ink .btn--ghost:hover{border-color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.link-arrow{
  font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--accent);
  text-decoration:none;display:inline-flex;align-items:center;gap:7px;
}
.link-arrow svg{transition:transform .2s ease}
.link-arrow.is-ext:hover svg{transform:translate(2px,-2px)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:800;background:var(--white);color:var(--text);
  font-family:var(--f-display);font-weight:700;font-size:15px;padding:12px 20px;border-radius:0 0 var(--r-sm) var(--r-sm);
  text-decoration:none;box-shadow:var(--sh-2);transition:top .18s ease;
}
.skip-link:focus{top:0}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:600;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:0 4px 20px rgba(10,15,28,.05)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--header-h)}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand img{height:34px;width:auto;display:block}
@media(max-width:480px){.brand img{height:29px}}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links{flex:0 1 auto;min-width:0}
.nav-links a{text-decoration:none;font-size:15px;font-weight:500;color:var(--muted);
  transition:color .18s;white-space:nowrap}
.nav-cta .btn{white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-cta .btn{padding:11px 20px;font-size:14px}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);background:var(--white);border-radius:12px;align-items:center;justify-content:center;cursor:pointer;flex:none}
.nav-toggle span{display:block;width:18px;height:1.8px;background:var(--text);position:relative;transition:background .2s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:1.8px;background:var(--text);transition:transform .25s ease}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* Mobile drawer */
.drawer{
  position:fixed;inset:var(--header-h) 0 0;background:var(--white);z-index:590;
  padding:28px var(--pad) calc(40px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px;
  transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility .25s;
  overflow-y:auto;
}
.drawer.is-open{opacity:1;visibility:visible;transform:none}
.drawer a{
  text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:26px;letter-spacing:-.03em;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.drawer .btn{margin-top:26px;justify-content:center}
/* Two stacked CTAs in the drawer: keep them a pair, not two blocks. */
.drawer .btn + .btn{margin-top:12px}

/* ---------- Cards ---------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);box-shadow:var(--sh-1);transition:transform .22s ease,box-shadow .22s ease}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.section--ink .card{background:var(--ink-2);border-color:var(--ink-3);box-shadow:none}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media(min-width:760px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr)}}

.icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:rgba(53,104,238,.09);color:var(--accent);margin-bottom:20px}
.section--ink .icon{background:rgba(110,76,242,.16);color:#A78BFF}
.icon svg{width:21px;height:21px}
.card p{color:var(--muted);font-size:16px;margin-top:10px}
.section--ink .card p,.section--ink .card .lede{color:var(--muted-dark)}
.taglist{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.02em;color:var(--muted);background:var(--mist);border:1px solid var(--line);padding:5px 10px;border-radius:99px}
.section--ink .tag{background:rgba(255,255,255,.05);border-color:var(--ink-3);color:var(--muted-dark)}

/* ---------- Hero ---------- */
/* `hidden` has to actually hide things.
 *
 * The attribute is only display:none in the browser's default stylesheet, so
 * any author rule setting display beats it. That is exactly what happened to
 * the cookie notice: .cookie-note sets display:flex, so `hidden` did nothing —
 * it would not dismiss, and it reappeared for people who had already dismissed
 * it, because the attribute the script was toggling had no effect at all.
 *
 * Global rather than per-component, because the next component with a display
 * rule and a hidden attribute would have the same bug and nobody would connect
 * the two. */
[hidden]{display:none!important}

.hero{position:relative;overflow:hidden;background:var(--white);padding:clamp(48px,7vw,84px) 0 clamp(60px,8vw,100px)}
.hero::before{
  content:"";position:absolute;top:-260px;right:-180px;width:720px;height:720px;border-radius:50%;
  background:radial-gradient(circle,rgba(110,76,242,.16),rgba(53,104,238,.06) 45%,transparent 70%);
  pointer-events:none;animation:drift 18s ease-in-out infinite;
}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,30px)}}
.hero-grid{display:grid;gap:clamp(40px,6vw,60px);align-items:center;position:relative;z-index:2}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.02fr .98fr}}
.pill{
  display:inline-flex;align-items:center;gap:9px;background:rgba(53,104,238,.07);
  border:1px solid rgba(53,104,238,.18);border-radius:99px;padding:7px 15px;
  font-size:12.5px;font-weight:600;color:var(--accent);margin-bottom:26px;
}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.5)}}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .lede{margin-top:26px}

/* ---------- Product mockups (CSS only) ---------- */
.stage{position:relative;min-height:400px}
.mock{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden}
.mock-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line);background:#FBFCFE}
.dot{width:8px;height:8px;border-radius:50%;background:#DDE3EF;flex:none}
.mock-bar .url{margin-left:8px;font-family:var(--f-mono);font-size:10px;color:#9AA6BD;letter-spacing:.02em}
.dash{display:grid;grid-template-columns:58px 1fr;min-height:250px}
.dash-side{background:#FAFBFE;border-right:1px solid var(--line);padding:14px 0;display:flex;flex-direction:column;align-items:center;gap:11px}
.dash-side i{width:24px;height:24px;border-radius:8px;background:#EBEFF8;display:block}
.dash-side i.on{background:var(--grad)}
.dash-main{padding:16px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
.kpi{background:#F7F9FD;border:1px solid var(--line);border-radius:11px;padding:10px}
.kpi b{display:block;font-family:var(--f-display);font-size:17px;letter-spacing:-.02em}
.kpi span{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:#96A3BD}
.chart{display:flex;align-items:flex-end;gap:6px;height:74px;padding:10px;background:#F7F9FD;border:1px solid var(--line);border-radius:11px;margin-bottom:12px}
.chart i{flex:1;border-radius:4px 4px 2px 2px;background:var(--grad);opacity:.85;transform-origin:bottom;animation:grow .9s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes grow{from{transform:scaleY(.15);opacity:.2}}
.rows{display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;gap:9px}
.row .av{width:20px;height:20px;border-radius:50%;background:#E8EDF7;flex:none}
.row .l1{height:7px;border-radius:4px;background:#E8EDF7;flex:1}
.row .l2{height:7px;width:38px;border-radius:4px;background:#EEF1F8;flex:none}
.row .st{font-family:var(--f-mono);font-size:8px;letter-spacing:.06em;padding:3px 7px;border-radius:99px;background:rgba(34,168,120,.12);color:#1C8A5F}
/* A second status tone. The portal mock shows a pipeline, and every row
   wearing the green "finished" pill would misrepresent what it does. */
.row .st--busy{background:rgba(53,104,238,.12);color:#2C55C4}

.phone{
  position:absolute;right:-6px;bottom:-18px;width:154px;background:var(--ink);border-radius:24px;
  padding:8px;box-shadow:0 24px 60px rgba(10,15,28,.28);border:1px solid var(--ink-3);
}
.phone-screen{background:var(--white);border-radius:18px;padding:14px 12px;min-height:220px}
.phone .notch{width:44px;height:4px;border-radius:99px;background:var(--ink-3);margin:0 auto 10px}
.phone h4{font-family:var(--f-display);font-size:13px;font-weight:800;letter-spacing:-.02em;margin-bottom:3px}
.phone .sub,.dash-main .sub{font-family:var(--f-mono);font-size:8px;color:#9AA6BD;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.mini{background:#F7F9FD;border:1px solid var(--line);border-radius:10px;padding:9px;margin-bottom:7px;display:flex;align-items:center;gap:8px}
.mini .b{width:6px;height:24px;border-radius:99px;background:var(--grad);flex:none}
.mini .t1{height:6px;width:70%;border-radius:4px;background:#E4EAF6;margin-bottom:5px}
.mini .t2{height:5px;width:44%;border-radius:4px;background:#EDF1F9}
.float{animation:float 7s ease-in-out infinite}
.float-2{animation:float 8.5s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.chip{
  position:absolute;left:-14px;top:34px;background:var(--white);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--sh-2);padding:12px 15px;display:flex;align-items:center;gap:11px;
}
.chip .ring{width:30px;height:30px;border-radius:50%;background:conic-gradient(var(--violet) 0turn .72turn,#EDF1F9 .72turn 1turn);display:grid;place-items:center}
.chip .ring::after{content:"";width:20px;height:20px;border-radius:50%;background:#fff}
.chip b{font-family:var(--f-display);font-size:14px;display:block;letter-spacing:-.02em}
.chip span{font-family:var(--f-mono);font-size:9px;color:#96A3BD;letter-spacing:.07em;text-transform:uppercase}
@media(max-width:600px){.chip{display:none}.phone{width:118px;right:-4px;bottom:-10px}.stage{min-height:320px}}

/* ---------- Before / after ---------- */
.split{display:grid;gap:18px;align-items:stretch}
@media(min-width:860px){.split{grid-template-columns:1fr 64px 1fr;gap:0}}
.scatter{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.scatter span{
  background:var(--white);border:1px solid var(--line);border-radius:11px;padding:11px 15px;
  font-size:14.5px;color:var(--muted);box-shadow:var(--sh-1);
}
.scatter span:nth-child(odd){transform:rotate(-1.2deg)}
.scatter span:nth-child(even){transform:rotate(1deg)}
.arrow{display:grid;place-items:center;color:#B9C4D8}
.arrow svg{width:26px;height:26px}
@media(max-width:859px){.arrow svg{transform:rotate(90deg)}}
.unified{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(22px,3vw,30px);box-shadow:var(--sh-2)}
.unified h3{color:#fff;margin-bottom:14px}
.unified ul{display:grid;gap:9px}
.unified li{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--muted-dark)}
.unified li svg{width:16px;height:16px;color:#9B85FF;flex:none}

/* ---------- Numbered steps ---------- */
.steps{counter-reset:step;display:grid;gap:0}
.step{counter-increment:step;display:grid;grid-template-columns:62px 1fr;gap:0 22px;padding:26px 0;border-top:1px solid var(--line);align-items:start}
.step:last-child{border-bottom:1px solid var(--line)}
.section--ink .step{border-color:var(--ink-3)}
.step::before{
  content:counter(step,decimal-leading-zero);font-family:var(--f-mono);font-size:12.5px;
  color:var(--accent);padding-top:5px;letter-spacing:.04em;
}
.section--ink .step::before{color:#8FB0FF}
.step p{color:var(--muted);font-size:16px;margin-top:8px;max-width:62ch}

/* ---------- Work ---------- */
.work-card{display:grid;gap:0;overflow:hidden;padding:0}
@media(min-width:900px){.work-card{grid-template-columns:1.05fr .95fr;align-items:stretch}}
.work-body{padding:clamp(26px,3.4vw,42px)}
.work-visual{background:linear-gradient(150deg,#F2F5FC,#E9EEFA);padding:clamp(24px,3vw,34px);display:grid;place-items:center;border-left:1px solid var(--line)}
@media(max-width:899px){.work-visual{border-left:0;border-top:1px solid var(--line)}}
.kind{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:block}
.work-body h3{font-size:clamp(22px,2.4vw,29px);font-weight:800}
.built{display:grid;gap:8px;margin-top:22px}
.built li{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--muted)}
.built svg{width:15px;height:15px;color:#1C8A5F;flex:none}

/* ---------- Sound familiar ---------- */
.familiar{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.familiar span{
  border:1px solid var(--ink-3);background:var(--ink-2);border-radius:99px;padding:13px 22px;
  font-size:15.5px;color:#C7D0E2;transition:border-color .2s,color .2s,transform .2s;
}
.familiar span:hover{border-color:var(--violet);color:#fff;transform:translateY(-2px)}

/* ---------- Comparison ---------- */
.compare{display:grid;gap:18px}
@media(min-width:820px){.compare{grid-template-columns:1fr 1fr;gap:20px}}
.compare h3{margin-bottom:18px}
.compare ul{display:grid;gap:12px}
.compare li{display:flex;gap:11px;font-size:15.5px;line-height:1.5}
.compare li svg{width:17px;height:17px;flex:none;margin-top:3px}
.col-off{background:var(--mist);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px)}
.col-off li{color:var(--muted)}.col-off svg{color:#AAB4C8}
.col-lnx{background:var(--ink);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);color:#fff}
.col-lnx h3{color:#fff}.col-lnx li{color:#C7D0E2}.col-lnx svg{color:#9B85FF}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--ink);color:#fff;text-align:center}
.cta-band::before{
  content:"";position:absolute;left:50%;top:-40%;width:900px;height:900px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(110,76,242,.22),transparent 62%);pointer-events:none;
}
.cta-band .wrap{position:relative;z-index:2}
.cta-band .btn-row{justify-content:center}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:var(--muted-dark);padding:clamp(52px,7vw,76px) 0 34px;border-top:1px solid var(--ink-3)}
.foot-grid{display:grid;gap:36px}
@media(min-width:820px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.site-footer .brand{margin-bottom:16px}
.site-footer .brand img{height:42px}
.foot-tagline{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:#7C88A3;margin:0 0 16px}
.site-footer .foot-h{font-family:var(--f-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;font-weight:700;margin-bottom:16px}
.site-footer ul{display:grid;gap:11px}
.site-footer a{color:var(--muted-dark);text-decoration:none;font-size:15px;transition:color .18s}
.site-footer a:hover{color:#fff}
.site-footer a .ext{width:11px;height:11px;margin-left:5px;opacity:.6;vertical-align:baseline}
.foot-note{margin-top:44px;padding-top:24px;border-top:1px solid var(--ink-3);display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;font-size:13px;color:#7C88A3}
.foot-note p{margin:0;font-size:13px}

/* ---------- Reveal ---------- */
.rise{opacity:0;transform:translateY(18px);transition:opacity .65s cubic-bezier(.2,.7,.3,1),transform .65s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1;transform:none}

/* Six links and two buttons stop fitting well before the drawer takes over,
   so the row tightens on the way down rather than wrapping. */
@media(max-width:1180px){
  .nav-links{gap:20px}
  .nav-links a{font-size:14.4px}
}
@media(max-width:1040px){
  .nav-links{gap:15px}
  .nav-links a{font-size:13.8px}
  .nav-cta .btn{padding-left:14px;padding-right:14px;font-size:14px}
}

/* Raised from 900px. At 900 the desktop nav technically fitted and looked
   cramped and uneven; the drawer is a better answer than a squeezed row. */
@media(max-width:980px){
  .nav-links{display:none}
  .nav-cta .btn{display:none}
  .nav-toggle{display:flex}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .rise{opacity:1;transform:none}
}

/* ==========================================================================
   Interior pages
   ========================================================================== */

/* Page hero */
.page-hero{background:var(--ink);color:#fff;padding:clamp(56px,7vw,96px) 0 clamp(52px,6.5vw,84px);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;right:-140px;top:-180px;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(110,76,242,.22),transparent 64%);pointer-events:none}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{color:#fff;max-width:17ch}
.page-hero .lede{color:var(--muted-dark);margin-top:24px}
.crumb{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#8FB0FF;margin-bottom:18px;display:block}
.crumb a{text-decoration:none;color:inherit;opacity:.75}
.crumb a:hover{opacity:1}

/* Module grid (CRM page) */
.modules{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media(min-width:640px){.modules{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.modules{grid-template-columns:repeat(3,1fr)}}
.module{background:var(--white);padding:clamp(22px,2.6vw,30px)}
.module h3{font-size:15px;font-family:var(--f-mono);font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin-bottom:11px}
.module p{color:var(--muted);font-size:15.5px;margin:0}

/* Flow chain */
.flow{display:grid;gap:12px;max-width:560px}
.flow-item{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px 22px;box-shadow:var(--sh-1);font-family:var(--f-display);font-weight:700;font-size:16.5px;letter-spacing:-.02em;position:relative}
.flow-item:not(:last-child)::after{
  content:"";position:absolute;left:50%;bottom:-12px;width:1px;height:12px;background:var(--line);
}
.flow-item.is-end{background:var(--ink);color:#fff;border-color:var(--ink)}
.flow-item span{display:block;font-family:var(--f-body);font-weight:400;font-size:14.5px;color:var(--muted);letter-spacing:0;margin-top:4px}
.flow-item.is-end span{color:var(--muted-dark)}

/* Stage rail (apps page) */
.rail{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.rail b{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;background:var(--white);border:1px solid var(--line);border-radius:99px;padding:10px 18px;color:var(--text)}
.rail svg{width:16px;height:16px;color:#B9C4D8;flex:none}

/* Case study */
.case{border-top:1px solid var(--line);padding-top:clamp(34px,4.5vw,54px);margin-top:clamp(34px,4.5vw,54px)}
.case:first-of-type{border-top:0;padding-top:0;margin-top:0}
.case-grid{display:grid;gap:clamp(26px,4vw,48px)}
@media(min-width:940px){.case-grid{grid-template-columns:1fr 1fr}}
.case .case-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);font-weight:500;margin:26px 0 10px}
.case p{color:var(--muted)}

/* Integrations */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span{background:var(--white);border:1px solid var(--line);border-radius:99px;padding:11px 20px;font-size:15px;color:var(--text);box-shadow:var(--sh-1)}

/* Form */
.form{background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(24px,3.4vw,42px);box-shadow:var(--sh-2)}
.field{margin-bottom:22px}
.field label,.legend{display:block;font-family:var(--f-display);font-weight:700;font-size:15px;margin-bottom:9px;letter-spacing:-.01em}
.field .hint{font-weight:400;font-family:var(--f-body);color:var(--muted);font-size:14px}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--f-body);font-size:16px;color:var(--text);background:#FBFCFE;
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;transition:border-color .18s,background .18s;
}
.field input:focus,.field textarea:focus,.field select:focus{background:#fff;border-color:var(--accent);outline:none;box-shadow:0 0 0 4px rgba(53,104,238,.12)}
.field textarea{min-height:118px;resize:vertical}
fieldset{border:0;padding:0;margin:0 0 22px}
.choices{display:grid;gap:10px}
@media(min-width:560px){.choices{grid-template-columns:1fr 1fr}}
.choice{display:flex;align-items:center;gap:11px;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;cursor:pointer;transition:border-color .18s,background .18s}
.choice:hover{border-color:#C3CEE4}
.choice input{width:18px;height:18px;flex:none;accent-color:var(--accent);margin:0}
.choice:has(input:checked){border-color:var(--accent);background:rgba(53,104,238,.05)}
.choice span{font-size:15.5px}
.two-up{display:grid;gap:22px}
@media(min-width:560px){.two-up{grid-template-columns:1fr 1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:14px;color:var(--muted);margin-top:18px}
.form-status{margin-top:18px;font-size:15px;padding:14px 16px;border-radius:var(--r-sm);display:none}
.form-status.is-error{display:block;background:#FDF0EF;border:1px solid #F3CFCB;color:#9B2C22}
.form-status.is-error a{color:#9B2C22;font-weight:600}
.form-status.is-busy{display:block;background:var(--mist);border:1px solid var(--line);color:var(--muted)}

/* Confirmation */
.confirm{text-align:center;max-width:52ch;margin:0 auto}
.confirm .tickmark{width:64px;height:64px;border-radius:50%;background:rgba(28,138,95,.1);color:#1C8A5F;display:grid;place-items:center;margin:0 auto 26px}
.confirm .tickmark svg{width:30px;height:30px}

/* Legal / prose pages */
.prose{max-width:74ch}
.prose h2{font-size:clamp(22px,2.4vw,28px);margin:44px 0 14px}
.prose h3{margin:28px 0 10px}
.prose ul{list-style:disc;padding-left:22px;margin:0 0 1.05em;display:grid;gap:7px}
.prose li{color:var(--muted)}
.prose p{color:var(--muted)}
.prose table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15.5px}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-family:var(--f-display);font-weight:700;font-size:14px}
.prose td{color:var(--muted)}
.draft-note{background:#FFF8E8;border:1px solid #F0DFB4;border-radius:var(--r);padding:18px 20px;font-size:15px;color:#6B5720;margin-bottom:32px}
.mock-title{font-family:var(--f-display);font-size:13px;font-weight:800;letter-spacing:-.02em;margin:0 0 3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Real product screenshots ---------- */
.shot{margin:0}
.shot img{
  width:100%;height:auto;display:block;border-radius:var(--r);
  border:1px solid var(--line);box-shadow:var(--sh-2);background:var(--white);
}
.shot figcaption{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--muted);
  text-align:center;margin-top:14px;line-height:1.5;
}
.work-visual .shot img{border-color:rgba(10,15,28,.08)}

/* ==========================================================================
   Motion & premium detail
   Everything here is switched off by the prefers-reduced-motion block, and
   the ambient loops are additionally paused off-screen and on hidden tabs.
   ========================================================================== */

/* --- Hero headline: words rise in sequence on load --- */
/* overflow:hidden is what lets each word slide up from nothing — but it also
   clips descenders (g, y, j). Pad the box and pull the same amount back off
   the margin, so there's room to draw without shifting the layout. */
.word-wrap{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.word-wrap > span{display:inline-block;transform:translateY(110%);animation:wordRise .85s cubic-bezier(.16,1,.3,1) forwards}
@keyframes wordRise{to{transform:translateY(0)}}

/* --- Staggered grid reveals --- */
.grid > .rise{transition-delay:calc(var(--i,0) * 70ms)}
.modules .module{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i,0) * 45ms)}
.modules.in .module{opacity:1;transform:none}

/* --- Card hover: a light sweep across the surface, not a glow --- */
.card--hover{position:relative;overflow:hidden}
.card--hover::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(120deg,transparent 30%,rgba(53,104,238,.06) 48%,rgba(110,76,242,.09) 56%,transparent 72%);
  transform:translateX(-40%);transition:opacity .35s ease;
}
.card--hover:hover::after{opacity:1;animation:sweep .9s cubic-bezier(.3,.6,.3,1)}
@keyframes sweep{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
.card--hover:hover .icon{transform:translateY(-2px) scale(1.04)}
.icon{transition:transform .3s cubic-bezier(.3,1.4,.5,1)}

/* --- Process: a line that fills as each step arrives --- */
.steps{position:relative}
.steps::before{
  content:"";position:absolute;left:19px;top:26px;bottom:26px;width:1.5px;
  background:linear-gradient(var(--accent),var(--violet));transform-origin:top;
  transform:scaleY(var(--fill,0));transition:transform 1.1s cubic-bezier(.4,0,.2,1);
}
@media(max-width:560px){.steps::before{display:none}}
.section--ink .steps::before{background:linear-gradient(#8FB0FF,#A78BFF)}
.step{opacity:.34;transition:opacity .55s ease}
.step.lit{opacity:1}
.step::before{transition:color .4s ease,transform .4s ease}
.step.lit::before{transform:scale(1.08)}

/* --- Problem section: scattered tools settle, unified card lifts in --- */
.scatter span{
  opacity:0;transform:translateY(8px) rotate(0deg);
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.3,1);
  transition-delay:calc(var(--i,0) * 55ms);
}
.split.in .scatter span{opacity:1}
.split.in .scatter span:nth-child(odd){transform:translateY(0) rotate(-1.2deg)}
.split.in .scatter span:nth-child(even){transform:translateY(0) rotate(1deg)}
.arrow svg{opacity:0;transform:translateX(-8px);transition:opacity .5s ease .45s,transform .5s ease .45s}
.split.in .arrow svg{opacity:1;transform:none}
@media(max-width:859px){.split.in .arrow svg{transform:rotate(90deg)}}
.unified{opacity:0;transform:translateY(14px);transition:opacity .6s ease .55s,transform .6s cubic-bezier(.2,.8,.3,1) .55s}
.split.in .unified{opacity:1;transform:none}

/* --- Hero mockup: ambient life --- */
.chart i{transition:height 1.1s cubic-bezier(.4,0,.2,1)}
.kpi b{font-variant-numeric:tabular-nums}
.row .st{transition:opacity .4s ease,transform .4s ease}
.row .st.pop{animation:pop .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes pop{0%{transform:scale(.7);opacity:.3}60%{transform:scale(1.09)}100%{transform:scale(1);opacity:1}}
.mock{transition:transform .5s cubic-bezier(.2,.8,.3,1),box-shadow .5s ease}
.stage:hover .mock{transform:translateY(-4px);box-shadow:0 8px 20px rgba(10,15,28,.06),0 32px 70px rgba(10,15,28,.14)}

/* --- Buttons: sheen on hover --- */
.btn--primary{position:relative;overflow:hidden}
.btn--primary::after{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);
}
.btn--primary:hover::after{animation:btnSheen .75s ease}
@keyframes btnSheen{to{left:130%}}

/* --- Nav: underline grows from the left --- */
.nav-links a{position:relative}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--text);font-weight:600}

/* --- Section edges: a faint gradient hairline instead of a flat border --- */
.section--ink{position:relative}
.section--ink::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(110,76,242,.5),transparent);
}

@media(prefers-reduced-motion:reduce){
  .word-wrap > span{transform:none;animation:none}
  .modules .module,.scatter span,.unified,.arrow svg{opacity:1;transform:none;transition:none}
  .step{opacity:1}
  .steps::before{transform:scaleY(1)}
  .card--hover::after,.btn--primary::after{display:none}
}

/* ==========================================================================
   Pricing
   ========================================================================== */
/* The one page where the design has one job: let someone understand the offer
   without reading it twice. So the numbers are large, the feature lists are
   quiet, and exactly one card is allowed to stand out. */

.plans{align-items:start}
.plan{position:relative;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3vw,34px);
  box-shadow:var(--sh-1);transition:transform .22s ease,box-shadow .22s ease}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}

/* The featured card earns its emphasis from a gradient edge and a lift rather
   than a different colour, so the trio still reads as one family. */
.plan--featured{border-color:transparent;box-shadow:var(--sh-2);
  background:linear-gradient(var(--white),var(--white)) padding-box,var(--grad) border-box;
  border:1.5px solid transparent}
@media(min-width:960px){.plan--featured{transform:translateY(-14px)}
  .plan--featured:hover{transform:translateY(-18px)}}

.plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--grad);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  padding:6px 15px;border-radius:99px;white-space:nowrap;box-shadow:var(--sh-1)}
.plan h3{font-size:22px;margin-bottom:8px}
.plan-who{font-size:14.5px;color:var(--muted);line-height:1.55;min-height:3.1em}

.plan-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;
  margin:20px 0 4px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.plan-price b{font-family:var(--f-display);font-size:30px;font-weight:800;
  color:var(--text);letter-spacing:-.02em;display:block;line-height:1.1}
.pp-once,.pp-month{font-size:13px;color:var(--muted)}
.pp-plus{font-size:19px;color:var(--muted);font-weight:300;align-self:center}

.plan-intro{font-size:14px;font-weight:700;color:var(--text);margin-top:20px}
.plan-list{margin-top:16px;flex:1}
.plan-list li{align-items:flex-start;font-size:14.7px;line-height:1.5}
.plan-list svg{margin-top:3px}
.plan-cta{margin-top:26px;width:100%;justify-content:center}

/* ---------- small print ---------- */
/* Prominent enough to be read, quiet enough not to compete with the prices.
   Terms hidden in a footnote are how a pricing page becomes an argument. */
.smallprint{margin-top:clamp(38px,5vw,58px);padding:clamp(22px,3vw,30px);
  background:var(--mist);border:1px solid var(--line);border-radius:var(--r)}
.smallprint h3{font-size:16px;margin-bottom:14px}
.smallprint ul{display:grid;gap:11px}
.smallprint li{font-size:14.6px;line-height:1.6;color:var(--muted);
  padding-left:17px;position:relative}
.smallprint li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  border-radius:50%;background:var(--line)}
.smallprint strong{color:var(--text);font-weight:650}
.smallprint--ink{background:var(--ink-2);border-color:var(--ink-3)}
.smallprint--ink p{font-size:14.8px;line-height:1.65;color:var(--muted-dark);margin:0}

/* ---------- price tables ---------- */
.ptable-title{font-size:17px;margin-bottom:16px}
.ptable-wrap{background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-1);
  /* auto, not hidden. The price column cannot wrap, so on a narrow phone a
     long row overflowed and `hidden` cut the price off — the one column on the
     page that must never be half-visible. It still clips to the radius. */
  overflow-x:auto}
.ptable{width:100%;border-collapse:collapse}
.ptable th,.ptable td{padding:15px 20px;text-align:left;font-size:15.2px;
  border-bottom:1px solid var(--line);vertical-align:baseline}
.ptable tr:last-child th,.ptable tr:last-child td{border-bottom:0}
.ptable th{font-weight:500;color:var(--text)}
.ptable td{text-align:right;white-space:nowrap;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums}
.ptable-note{display:block;font-size:12.8px;color:var(--muted);font-weight:400;margin-top:3px}
.ptable-foot{padding:15px 20px;background:var(--mist);border-top:1px solid var(--line);
  font-size:13.6px;line-height:1.6;color:var(--muted);margin:0}

/* ---------- add-on cards ---------- */
.addon{display:flex;flex-direction:column}
.addon .built{flex:1}
.addon-price{font-size:15px;color:var(--muted);margin:6px 0 18px}
.addon-price b{font-family:var(--f-display);font-size:25px;font-weight:800;
  color:var(--text);letter-spacing:-.02em}
.section--ink .addon-price,.section--ink .addon-price b{color:#fff}
.addon-note{font-size:13.8px;line-height:1.6;color:var(--muted);margin:20px 0 24px}
.care-card .built li{font-size:14.6px}

/* ---------- FAQ ---------- */
/* <details> rather than a script: it opens with JavaScript disabled, it is
   keyboard-operable for free, and the browser handles the semantics. */
.faqs{display:grid;gap:12px;max-width:78ch}
.faq{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .18s ease}
.faq[open]{border-color:rgba(53,104,238,.35)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 22px;cursor:pointer;font-weight:650;font-size:16px;color:var(--text);
  list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.faq summary i{width:11px;height:11px;flex:none;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s ease}
.faq[open] summary i{transform:rotate(-135deg) translate(-2px,-2px);border-color:var(--accent)}
.faq-body{padding:0 22px 21px}
.faq-body p{font-size:15.2px;line-height:1.68;color:var(--muted);max-width:68ch;margin:0}

/* ---------- package builder ---------- */
/* Two columns on desktop: choices on the left, the running total on the right
   and stuck to the viewport, so the number never scrolls out of sight while
   somebody is changing what makes it up. */
.plan-ask{display:block;text-align:center;margin-top:12px;font-size:13.4px;color:var(--muted)}
.plan-ask:hover{color:var(--accent)}

.builder{display:grid;gap:22px;align-items:start}
@media(min-width:900px){.builder{grid-template-columns:1.35fr .85fr;gap:28px}}
.builder-form{display:grid;gap:16px;border:0;margin:0;padding:0}
.bstep{border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  padding:20px 22px;margin:0}
.bstep legend{display:flex;align-items:center;gap:11px;font-weight:700;font-size:15.5px;
  padding:0 6px;margin-left:-6px}
.bnum{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;
  background:var(--grad);color:#fff;font-size:12px;font-weight:700;flex:none}

.bopts{display:grid;gap:10px;margin-top:14px}
@media(min-width:620px){.bopts{grid-template-columns:repeat(3,1fr)}
  .bopts--2{grid-template-columns:repeat(2,1fr)}}
.bopt{display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:13px 15px;font:inherit;transition:border-color .16s ease,background .16s ease}
.bopt b{font-size:15px;color:var(--text)}
.bopt span{font-size:12.8px;color:var(--muted)}
.bopt:hover{border-color:#C8D3EA}
.bopt[aria-pressed="true"]{border-color:var(--accent);background:rgba(53,104,238,.05)}
.bopt:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.bmail{display:flex;align-items:center;gap:14px;margin-top:14px}
.bstep-btn{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);
  background:var(--white);font-size:19px;line-height:1;color:var(--text);cursor:pointer;
  transition:border-color .16s ease}
.bstep-btn:hover{border-color:var(--accent);color:var(--accent)}
.bstep-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.bmail output{font-weight:650;font-size:15.5px;min-width:9.5ch}
.bhint{font-size:13px;color:var(--muted);margin-top:11px;line-height:1.55}

.bsummary{background:var(--ink);color:#fff;border-radius:var(--r-lg);
  padding:clamp(22px,3vw,28px);box-shadow:var(--sh-2)}
@media(min-width:900px){.bsummary{position:sticky;top:calc(var(--header-h) + 18px)}}
.bsummary h3{font-size:16px;color:#fff;margin-bottom:16px}
.blines{display:grid;gap:13px;margin-bottom:18px}
.blines li{display:flex;justify-content:space-between;gap:14px;font-size:14px;
  padding-bottom:13px;border-bottom:1px solid var(--ink-3)}
.blines li:last-child{border-bottom:0;padding-bottom:0}
.blines b{color:#fff;font-weight:650}
.blines i{font-style:normal;color:var(--muted-dark);font-size:12.6px;line-height:1.45}
.bamt{text-align:right;white-space:nowrap;color:#fff;font-variant-numeric:tabular-nums;font-size:13.4px}

.btotals{border-top:1px solid var(--ink-3);padding-top:16px;display:grid;gap:8px}
.btotal{display:flex;justify-content:space-between;align-items:baseline;color:#fff}
.btotal span{font-size:14px;color:var(--muted-dark)}
.btotal b{font-family:var(--f-display);font-size:26px;font-weight:800;letter-spacing:-.02em}
.btotal--sub b{font-size:17px;font-weight:700;color:var(--muted-dark)}
.bterm{font-size:12.6px;color:var(--muted-dark);line-height:1.55;margin:14px 0 0}
.bgo{width:100%;justify-content:center;margin-top:18px}
.bsecure{font-size:12.4px;color:var(--muted-dark);line-height:1.55;margin:14px 0 0;text-align:center}

/* ---------- pricing on small screens ---------- */
@media(max-width:560px){
  /* Tighter gutters so the numbers keep their room. */
  .ptable th,.ptable td{padding:13px 14px;font-size:14.6px}
  .ptable-foot{padding:13px 14px}
  /* Stacked, the build fee and the monthly fee read better one above the
     other than wrapped mid-line with a stray "+" hanging at the end. */
  .plan-price{flex-direction:column;align-items:flex-start;gap:4px}
  .pp-plus{display:none}
  .plan-who{min-height:0}
  /* The summary is the reason the section exists, so on a phone it sits at
     the top rather than under four fieldsets nobody has scrolled past yet. */
  .builder{display:flex;flex-direction:column}
  .bsummary{order:-1}
}

/* ---------- the two paths ---------- */
/* Not two buttons. A button says what happens when you press it; these have to
   say who they are for, which needs a second line. */
.fork{display:grid;gap:12px;margin-top:30px}
@media(min-width:560px){.fork{grid-template-columns:1fr 1fr;gap:14px}}
@media(min-width:900px){.fork--3{grid-template-columns:repeat(3,1fr)}}
.fork-q{font-size:14px;font-weight:700;color:var(--text);margin:28px 0 -14px;
  letter-spacing:-.01em}
.fork-icon{font-size:20px;line-height:1;margin-bottom:2px}
.fork-card{display:flex;flex-direction:column;gap:5px;text-decoration:none;
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r);
  padding:17px 19px;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.fork-card b{font-size:16px;color:var(--text);letter-spacing:-.01em}
.fork-card span{font-size:13.4px;line-height:1.55;color:var(--muted)}
.fork-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--sh-1)}
.fork-card:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- domain step ---------- */
.bdomain{margin-top:14px}
.bdomain-row{display:flex;gap:9px;flex-wrap:wrap}
.bdomain-row input{flex:1 1 12rem;min-width:0;font:inherit;font-size:15px;color:var(--text);
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:11px 13px}
.bdomain-row input:focus{outline:none;border-color:var(--accent)}
.bdomain-row .btn{margin-left:0;flex:none}

/* ---------- guided enquiry journeys ---------- */
/* Questions with tickable answers rather than a blank message box. Somebody
   who cannot name what they need can still say what is going wrong. */
.journey{display:grid;gap:16px;max-width:840px}
.chips-group{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.chip-opt{font:inherit;font-size:14.4px;cursor:pointer;background:var(--white);
  border:1.5px solid var(--line);border-radius:99px;padding:9px 16px;color:var(--text);
  transition:border-color .16s ease,background .16s ease}
.chip-opt:hover{border-color:#C8D3EA}
.chip-opt[aria-pressed="true"]{border-color:var(--accent);background:rgba(53,104,238,.07);
  font-weight:600}
.chip-opt:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.jhint{font-size:13px;color:var(--muted);margin:12px 0 0;line-height:1.55}
/* Two answers worth colouring, and only two. "We could not check" stays grey
   because it is not news about the domain, it is news about the registry. */
.jhint.is-ok{color:#1C6B43;font-weight:500}
.jhint.is-warn{color:#8A5312;font-weight:500}

/* An input with a button beside it. The button never shrinks and the input
   takes what is left, so a long name scrolls inside the box instead of
   squeezing "Check" down to an ellipsis. */
.jcheck{display:flex;gap:10px;align-items:stretch}
.jcheck input{flex:1 1 auto;min-width:0}
.jcheck .btn{flex:none;margin-left:0;white-space:nowrap}
@media(max-width:460px){
  /* Side by side, the input gets too narrow to read a domain in. */
  .jcheck{flex-direction:column;align-items:stretch}
  .jcheck .btn{align-self:flex-start}
}
.bfields{display:grid;gap:14px;margin-top:14px}
@media(min-width:620px){.bfields{grid-template-columns:1fr 1fr}}
.fld textarea{font:inherit;font-size:.95rem;color:var(--text);background:var(--white);
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;resize:vertical}
.fld textarea:focus{outline:none;border-color:var(--accent)}
.fld small{font-weight:400;color:var(--muted)}
.jfoot{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin-top:6px}
.jfoot .btn{margin-left:0}
.jnote{font-size:13.4px;color:var(--muted);margin:0;line-height:1.6;max-width:62ch}
.jnote.is-bad{color:var(--crit,#9B2C22);font-weight:500}

/* ---------- mailing list ---------- */
.mail-join{padding-bottom:38px;margin-bottom:38px;border-bottom:1px solid var(--ink-3);
  max-width:60ch}
.mail-join p{font-size:14.6px;line-height:1.6;margin:10px 0 16px}
.mail-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mail-form input[type=email]{flex:1 1 15rem;min-width:0;font:inherit;font-size:15px;
  color:#fff;background:var(--ink-2);border:1.5px solid var(--ink-3);
  border-radius:var(--r-sm);padding:11px 13px}
.mail-form input[type=email]::placeholder{color:var(--muted-dark)}
.mail-form input[type=email]:focus{outline:none;border-color:var(--accent)}
.mail-form .btn{flex:none;margin-left:0}
.mail-consent{flex:1 1 100%;display:flex;gap:9px;align-items:flex-start;
  font-size:13.2px;line-height:1.5;color:var(--muted-dark);cursor:pointer}
.mail-consent input{margin-top:2px;flex:none}
.mail-note{flex:1 1 100%;font-size:13.2px;margin:0;min-height:1.2em;color:var(--muted-dark)}
.mail-note.is-good{color:#7DD3A8}
.mail-note.is-bad{color:#F0A9A2}

/* ---------- cookie declaration ---------- */
/* Not a consent gate. There is nothing to consent to, so it states the
   position, links to the detail and goes away when dismissed. */
.cookie-note{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--ink);color:#fff;border:1px solid var(--ink-3);
  border-radius:var(--r);padding:14px 18px;box-shadow:var(--sh-2)}
@media(min-width:720px){.cookie-note{left:auto;max-width:560px}}
.cookie-note p{margin:0;font-size:13.4px;line-height:1.55;flex:1;color:var(--muted-dark)}
.cookie-note a{color:#fff;text-decoration:underline}
.cookie-note button{flex:none;font:inherit;font-size:13.4px;font-weight:600;cursor:pointer;
  background:var(--white);color:var(--ink);border:0;border-radius:99px;padding:8px 16px}
.cookie-note button:hover{opacity:.9}

/* ---------- hero door detail ---------- */
.fork-price{font-style:normal;font-family:var(--f-display);font-size:19px;font-weight:800;
  color:var(--text);letter-spacing:-.02em;margin-top:4px}
.fork-cta{color:var(--accent);font-weight:650;font-size:13.6px;margin-top:6px}
.fork-card:hover .fork-cta{text-decoration:underline}

/* ---------- trust markers ---------- */
/* Factual and checkable. No badges, no review widgets, nothing invented. */
.trust{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:26px;padding:0;list-style:none}
.trust li{position:relative;padding-left:19px;font-size:13.4px;color:var(--muted);line-height:1.5}
.trust li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:5px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg)}

/* ---------- systems capabilities ---------- */
.caps{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:640px){.caps{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.caps{grid-template-columns:repeat(3,1fr)}}
.cap{display:flex;flex-direction:column;gap:3px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:15px 17px}
.cap b{font-size:15px;color:var(--text)}
.cap span{font-size:13.4px;line-height:1.55;color:var(--muted)}
.combo-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 14px}
.chip-static{font-size:12.4px;font-weight:600;padding:5px 11px;border-radius:99px;
  background:rgba(53,104,238,.08);color:var(--accent)}
.section--ink .chip-static{background:rgba(143,176,255,.14);color:#8FB0FF}

/* ---------- title hover ---------- */
/* A gradient rule that grows out from the left under the title.
 *
 * Applied to titles that live inside something you can click — the three hero
 * doors, the service and work cards, the link rows. Headings that are not
 * links are deliberately left alone: animating them on hover tells somebody
 * there is something there to press, and there is not.
 *
 * The pseudo-element carries the animation rather than the text itself, so
 * nothing reflows and the line cannot nudge the layout as it grows. */
.fork-card b,
.card--hover h3,
.work-card h3,
.plan h3 {
  position: relative;
  display: inline-block;
}

.fork-card b::after,
.card--hover h3::after,
.work-card h3::after,
.plan h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s cubic-bezier(.2, .7, .3, 1);
}

.fork-card:hover b::after,
.fork-card:focus-visible b::after,
.card--hover:hover h3::after,
.work-card:hover h3::after,
.plan:hover h3::after {
  transform: scaleX(1);
}

/* On the dark sections the gradient is too dim against the ink background. */
.section--ink .card--hover h3::after { background: linear-gradient(90deg,#8FB0FF,#B69CFF) }

/* Somebody who has asked for less motion gets the colour change and none of
   the movement — the underline appears rather than sweeping. */
@media (prefers-reduced-motion: reduce) {
  .fork-card b::after,
  .card--hover h3::after,
  .work-card h3::after,
  .plan h3::after { transition: none }
}

/* ---------- journey form fields ---------- */
/* Two columns where the answers are short, one where they are not. The last
   .field in a step loses its bottom margin so the card does not end in a gap. */
.jfields{display:grid;gap:0 20px;grid-template-columns:1fr;margin-top:16px}
@media(min-width:620px){.jfields{grid-template-columns:1fr 1fr}}
.bstep .field:last-child{margin-bottom:0}
.bstep .field{margin-top:16px}
.bstep .jfields .field{margin-top:0}