/* PAGEBOLT service pages: shared styles. Plain static pages, no runtime. */
:root{
  --ink:#111111;--ink-2:#161616;--ink-3:#1B1B1B;--ink-4:#262626;
  --line:#2E2E2E;--line-2:#3A3A3A;
  --cream:#F5F1E8;--white:#FFFFFF;--rule:#E6E0D4;--rule-2:#DDD7CA;
  --yellow:#F6F05A;--lilac:#D3BAD7;
  --muted:#BDBDBD;--muted-2:#A8A8A8;--muted-ink:#2A2A2A;--muted-ink-2:#6B665C;
  --display:'Archivo',sans-serif;--serif:'Instrument Serif',serif;--sans:'Switzer',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(0.22,1,0.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:6px}
.wrap{max-width:1560px;margin:0 auto;overflow:clip}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--yellow);color:var(--ink);font-family:var(--mono);font-size:12px}
.skip:focus{left:16px}

/* Type */
.display{margin:0;font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:0.86;letter-spacing:-0.005em;text-wrap:balance}
.display--xl{font-size:clamp(56px,8.4vw,150px);line-height:0.84}
.display--lg{font-size:clamp(48px,5.6vw,96px)}
.display--md{font-size:clamp(36px,3.4vw,56px);line-height:0.9}
.display--sm{font-size:clamp(28px,2.4vw,40px);line-height:0.92}
.it{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;font-stretch:100%;letter-spacing:-0.02em}
.it--lilac{color:var(--lilac)}
.it--yellow{color:var(--yellow)}
/* Headlines: a sentence marked .nl starts on its own line */
.nl{display:block}
.grad{background-image:linear-gradient(90deg,#F6F05A,#D3BAD7);-webkit-background-clip:text;background-clip:text;color:transparent}
.label{font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted-2)}
.label--ink{color:var(--muted-ink-2)}
.lead{margin:0;max-width:560px;font-size:19px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.mark{background:linear-gradient(transparent 58%,rgba(246,240,90,0.9) 58%);color:var(--ink);padding:0 2px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:54px;padding:0 26px;border-radius:999px;border:1px solid transparent;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;white-space:nowrap;transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn--yellow{background:var(--yellow);color:var(--ink)}
.btn--yellow:hover{background:var(--cream)}
.btn--ink{background:var(--ink);color:var(--cream)}
.btn--ink:hover{background:var(--yellow);color:var(--ink)}
.btn--line{border-color:var(--line-2);color:var(--cream)}
.btn--line:hover{border-color:var(--cream)}
.btn--line-ink{border-color:var(--ink);color:var(--ink)}
.btn--line-ink:hover{background:var(--ink);color:var(--cream)}
.btn--block{width:100%}
.btn--lg{height:58px;padding:0 28px}

/* Primary CTA: animated yellow highlight orbiting a lilac pill. */
@property --pb-cta-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes pb-cta-orbit{to{--pb-cta-angle:360deg}}
.pb-gradient-cta{--pb-cta-angle:0deg;display:inline-flex!important;align-items:center!important;justify-content:space-between!important;gap:16px;min-height:56px;height:auto!important;padding:5px 6px 5px 22px!important;border:2px solid transparent!important;border-radius:999px!important;background:linear-gradient(#111111,#111111) padding-box,conic-gradient(from var(--pb-cta-angle),#D3BAD7 0deg,#D3BAD7 210deg,#F6F05A 270deg,#D3BAD7 330deg,#D3BAD7 360deg) border-box!important;color:#F5F1E8!important;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;letter-spacing:0.04em;line-height:1.25;text-align:left;white-space:normal!important;cursor:pointer;animation:pb-cta-orbit 4s linear infinite;transition:transform .2s ease,box-shadow .2s ease}
.pb-gradient-cta:hover{color:#F5F1E8!important;transform:translateY(-2px);box-shadow:0 8px 28px rgba(211,186,215,.18)}
.pb-gradient-cta:focus-visible{outline:3px solid #F6F05A;outline-offset:4px}
.pb-gradient-cta__icon{display:grid!important;place-items:center;flex:none;width:40px;height:40px;border:2px solid transparent;border-radius:50%;background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,linear-gradient(135deg,#D3BAD7,#F6F05A) border-box}
.pb-gradient-cta__icon svg{display:block;width:20px;height:20px;fill:none;stroke:#111111;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pb-gradient-cta:disabled{cursor:not-allowed;opacity:.6;animation:none}
.nav .pb-gradient-cta{min-height:44px!important;padding:3px 4px 3px 14px!important;font-size:11px}
.nav .pb-gradient-cta__icon{width:32px;height:32px}
@media (max-width:760px){.pb-gradient-cta{gap:12px;padding-left:18px!important;font-size:11px;letter-spacing:.03em}.nav .pb-gradient-cta{gap:8px;padding-left:12px!important;font-size:10px}}
@media (prefers-reduced-motion:reduce){.pb-gradient-cta{animation:none;--pb-cta-angle:90deg}.pb-gradient-cta:hover{transform:none}}

/* Nav */
.nav{position:sticky;top:0;z-index:50;padding:16px 32px}
.nav__pill{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:10px 10px 10px 24px;border:1px solid var(--line);border-radius:999px;background:var(--ink-2)}
.nav__logo img{height:30px;width:auto}
.nav__right{display:flex;align-items:center;gap:28px}
.nav__link{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.08em;padding:10px 0;border-bottom:1px solid transparent;transition:border-color .2s}
.nav__link:hover{border-bottom-color:var(--cream)}
.nav .btn{height:46px;padding:0 22px}
.nav .short{display:none}

/* Breadcrumbs */
.crumbs{padding:28px 48px 0}
.crumbs ol{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted-2)}
.crumbs li+li::before{content:"/";margin-right:10px;color:var(--line-2)}
.crumbs a:hover{color:var(--yellow)}
.crumbs [aria-current]{color:var(--cream)}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:48px;padding:48px 48px 96px;align-items:end}
.hero__copy{display:flex;flex-direction:column;gap:28px}
.hero__eyebrow{margin:0;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:0.1em;text-transform:uppercase}
.hero__eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--yellow);flex:none}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.hero__aside{display:flex;flex-direction:column;gap:24px;padding:32px;border-radius:26px;background:var(--cream);color:var(--ink)}
.facts{display:flex;flex-direction:column}
.facts div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-top:1px solid var(--rule-2);font-size:15px}
.facts dt{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted-ink-2)}
.facts dd{margin:0;text-align:right;font-weight:600}
.big-price{display:flex;flex-direction:column;gap:4px}
.big-price small{font-size:14px;color:var(--muted-ink)}
.big-price strong{font-family:var(--display);font-stretch:62%;font-weight:800;font-size:clamp(56px,5.6vw,96px);line-height:0.85}
.big-price span{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted-ink)}

/* Sections */
.section{padding:120px 48px}
.section--tight{padding:80px 48px}
.panel{margin:0 24px;border-radius:32px;padding:96px 40px 40px;background:var(--cream);color:var(--ink)}
.panel--dark{background:var(--ink-3);color:var(--cream)}
.panel--pad{padding:96px 40px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;flex-wrap:wrap;margin-bottom:56px}
.sec-head>div{display:flex;flex-direction:column;gap:20px;max-width:980px}
.sec-head p{margin:0;max-width:420px;font-size:16px;line-height:1.55;color:var(--muted)}
.panel .sec-head p{color:var(--muted-ink)}
.panel--dark .sec-head p{color:var(--muted)}
.panel .sec-head{padding:0 8px}
/* Neighbouring blocks share one gap instead of stacking both paddings */
.hero+.section,.hero+.section--tight,.section+.section,.section+.section--tight,.section--tight+.section,.section--tight+.section--tight{padding-top:0}
.panel+.panel{margin-top:24px}

/* Long-form copy */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.split__side{grid-column:1 / span 4;position:sticky;top:120px;display:flex;flex-direction:column;gap:24px}
.split__main{grid-column:6 / span 7}
.split__side .display--lg{font-size:clamp(44px,4vw,70px);overflow-wrap:break-word}
.prose{font-size:18px;line-height:1.65;color:#D9D5CC;max-width:68ch}
.prose>*:first-child{margin-top:0}
.prose p{margin:0 0 1.1em;text-wrap:pretty}
.prose h3{margin:2em 0 0.6em;font-family:var(--sans);font-size:24px;font-weight:600;line-height:1.25;letter-spacing:-0.02em;color:var(--cream)}
.prose strong{color:var(--cream);font-weight:600}
.prose a{color:var(--cream);text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:3px;text-decoration-thickness:2px}
.prose a:hover{color:var(--yellow)}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.2em}
.prose li{margin:0 0 0.5em;padding-left:0.3em}
.prose li::marker{color:var(--yellow)}
.prose code{font-family:var(--mono);font-size:0.82em;padding:2px 7px;border-radius:6px;background:var(--ink-3);color:var(--cream);white-space:nowrap}
.panel .prose{color:var(--muted-ink)}
.panel .prose h3,.panel .prose strong,.panel .prose a{color:var(--ink)}
.note{margin:1.6em 0;padding:20px 24px;border-left:3px solid var(--yellow);border-radius:0 18px 18px 0;background:var(--ink-3);font-size:16px;line-height:1.55;color:var(--muted)}
.note strong{color:var(--cream)}

/* Cards */
.grid{display:grid;gap:12px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{display:flex;flex-direction:column;gap:20px;padding:32px;border-radius:26px;background:var(--white);color:var(--ink)}
.card--dark{background:var(--ink-3);color:var(--cream)}
.card--ink{background:var(--ink);color:var(--cream)}
.card--yellow{background:var(--yellow);color:var(--ink)}
.card__top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.card__num{font-family:var(--mono);font-size:11px;letter-spacing:0.1em}
.card h3{margin:0}
.card p{margin:0;font-size:16px;line-height:1.55;color:var(--muted-ink)}
.card--dark p,.card--ink p{color:var(--muted)}
.card--yellow p{color:var(--muted-ink)}
.card__foot{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:0.06em}
.rows{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.rows li{display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--rule);font-size:16px;line-height:1.45}
.rows li::before{content:"+";font-family:var(--mono);font-size:12px;color:var(--muted-ink-2);padding-top:3px;flex:none}
.card--dark .rows li,.card--ink .rows li{border-top-color:var(--line)}
.card--dark .rows li::before,.card--ink .rows li::before{color:var(--yellow)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.chips li{padding:7px 12px;border-radius:999px;background:var(--cream);font-size:13px;color:var(--ink)}
.card--dark .chips li,.card--ink .chips li{background:var(--ink-4);color:var(--cream)}

/* Steps / timeline */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #333;margin:0;padding:0;list-style:none}
.steps li{display:flex;flex-direction:column;gap:12px;padding:28px 24px 0;border-left:1px solid #333}
.steps li:first-child{padding-left:0;border-left:0}
.steps .when{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--yellow)}
.steps h3{margin:0;font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:34px;line-height:0.9}
.steps p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.steps .out{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:0.06em;color:var(--cream)}

/* Tables */
.table-wrap{overflow-x:auto;border-radius:22px;border:1px solid var(--line);-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:15px;min-width:620px}
.table caption{caption-side:bottom;padding:14px 20px;text-align:left;font-size:13px;color:var(--muted-2)}
.table th,.table td{padding:16px 20px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.table thead th{border-top:0;background:var(--ink-3);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted-2)}
.table tbody th{font-weight:600;color:var(--cream)}
.table td{color:var(--muted)}
.table .hl{background:rgba(246,240,90,0.06)}
.table .hl th{color:var(--yellow)}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:8px}
.faq details{border-radius:22px;background:var(--ink-3);transition:background-color .25s}
.faq details[open]{background:var(--ink-4)}
.faq summary{display:grid;grid-template-columns:1fr 44px;align-items:center;gap:16px;padding:20px 20px 20px 28px;cursor:pointer;list-style:none;font-size:21px;font-weight:500;letter-spacing:-0.02em;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--ink-4);font-size:20px;transition:background-color .25s,color .25s}
.faq details[open] summary::after{content:"−";background:var(--yellow);color:var(--ink)}
.faq details>div{padding:0 80px 26px 28px;font-size:17px;line-height:1.6;color:var(--muted)}
.faq details>div p{margin:0 0 0.8em}
.faq details>div p:last-child{margin:0}
.faq a{color:var(--cream);text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:3px}

/* Dot grid background (same 20px grid as the blueprint figures), fading downward.
   For dark backgrounds only. --dot sets the dot colour. */
.dots{position:relative;isolation:isolate}
.dots::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background-image:radial-gradient(circle,var(--dot,#232323) 1px,transparent 1.4px);background-size:20px 20px;background-position:-9px -9px;-webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 100%);mask-image:linear-gradient(to bottom,#000 45%,transparent 100%)}
.panel--dark.dots,.closer__side.dots{--dot:#2A2A2A}
/* Heroes: dots near the cursor brighten. assets/dots-glow.js sets --mx/--my and data-glow (desktop pointers only). */
.hero.dots::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background-image:radial-gradient(circle,rgba(245,241,232,0.75) 1.3px,transparent 1.7px);background-size:20px 20px;background-position:-9px -9px;opacity:0;transition:opacity .7s ease;-webkit-mask-image:radial-gradient(circle 170px at var(--mx,-999px) var(--my,-999px),#000 0%,rgba(0,0,0,.55) 35%,rgba(0,0,0,.18) 65%,transparent 100%);mask-image:radial-gradient(circle 170px at var(--mx,-999px) var(--my,-999px),#000 0%,rgba(0,0,0,.55) 35%,rgba(0,0,0,.18) 65%,transparent 100%)}
.hero.dots[data-glow]::after{opacity:1}

/* Blueprint figures: line drawing on a dot grid, numbered callouts, HTML legend */
.fig{margin:0;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);border:1px solid var(--line);border-radius:26px;overflow:hidden;background-color:#141414;background-image:linear-gradient(to bottom,transparent 45%,#141414 100%),radial-gradient(circle,#252525 1px,transparent 1.4px);background-size:auto,20px 20px;color:var(--cream)}
.fig__draw{display:flex;align-items:center;padding:28px}
.fig__draw svg{display:block;width:100%;height:auto;overflow:visible}
.fig__legend{display:flex;flex-direction:column;justify-content:space-between;border-left:1px solid var(--line);background:rgba(20,20,20,0.9)}
.fig__legend ol{display:flex;flex-direction:column;margin:0;padding:24px 32px 32px;list-style:none}
.fig__legend li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:20px;align-items:start;padding:22px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--muted)}
.fig__legend li b{display:grid;place-items:center;width:40px;height:40px;border:1.5px solid var(--cream);border-radius:50%;font-family:var(--mono);font-size:13px;font-weight:500;color:var(--cream)}
.fig__legend li.is-key b{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.fig__legend strong{display:block;margin:7px 0 4px;font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-0.01em;color:var(--cream)}
/* A rule that applies across the whole sequence, not one step: pulled into a yellow block at the foot of the legend */
.fig__rule{padding:28px 32px 32px;background:var(--yellow);color:var(--ink)}
.fig__rule-label{display:block;margin-bottom:18px;font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase}
.fig__rule ol{padding:0}
.fig__rule li{padding:16px 0;border-top:1px solid rgba(17,17,17,0.18);color:var(--ink)}
.fig__rule li:first-child{padding-top:0;border-top:0}
.fig__rule li b{border-color:var(--ink);color:var(--ink)}
.fig__rule li.is-key b{background:var(--ink);border-color:var(--ink);color:var(--yellow)}
.fig__rule strong{display:inline;margin:0;font-size:inherit;letter-spacing:0;color:var(--ink)}
.fig__rule li.is-key{font-size:21px;line-height:1.35;letter-spacing:-0.01em}
.fig__rule li span{padding-top:7px}
.bp-l{fill:none;stroke:var(--cream);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bp-a,.bp-l .bp-a{stroke:var(--yellow)}
.bp-g{stroke:#555}
.bp-d{stroke-dasharray:4 6}
.bp-dd{stroke-dasharray:2 5}
.bp-fill{fill:rgba(246,240,90,0.12)}
.bp-solid{fill:#141414}
.bp-hatch{fill:url(#bp-hatch)}
.bp-dot{fill:var(--yellow)}
.fig__draw text{stroke:none}
.bp-t{font-family:var(--mono);font-size:12px;letter-spacing:0.12em;fill:var(--muted-2)}
.bp-t.bp-c{fill:var(--cream)}
.bp-t.bp-y{fill:var(--yellow)}
.bp-v{font-family:var(--display);font-stretch:62%;font-weight:800;font-size:26px;fill:var(--cream)}
.bp-v.bp-y{fill:var(--yellow)}
.bp-mid{text-anchor:middle}
.bp-n circle{fill:#141414;stroke:var(--cream);stroke-width:1.5}
.bp-n text{font-family:var(--mono);font-size:11px;font-weight:500;fill:var(--cream);text-anchor:middle}
.bp-n.is-key circle{fill:var(--yellow);stroke:var(--yellow)}
.bp-n.is-key text{fill:var(--ink)}
/* Figure motion (driven by assets/motion.js: .in is added while the figure is on screen) */
@keyframes bp-march{to{stroke-dashoffset:-20}}
@keyframes bp-pulse{0%,100%{transform:scale(1)}18%{transform:scale(1.18)}46%{transform:scale(1)}}
.fig .bp-d{animation:bp-march 1.4s linear infinite;animation-play-state:paused}
.fig .bp-n.is-key circle{transform-box:fill-box;transform-origin:center;animation:bp-pulse 2.8s var(--ease) infinite;animation-play-state:paused}
@keyframes bp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.fig .bp-float{animation:bp-float 4s ease-in-out infinite;animation-play-state:paused}
.fig.in .bp-d,.fig.in .bp-n.is-key circle,.fig.in .bp-float{animation-play-state:running}
.bp-trav{fill:var(--cream)}
.bp-trav--key{fill:var(--yellow)}

/* Particle flows: dots travel left to right; some drop away, some get caught and turn yellow.
   Dots are generated by assets/motion.js from the data-flow type. */
.flow{margin:0;border:1px solid var(--line);border-radius:26px;overflow:hidden;background-color:#141414;background-image:linear-gradient(to bottom,transparent 45%,#141414 100%),radial-gradient(circle,#252525 1px,transparent 1.4px);background-size:auto,20px 20px}
.flow__stage{position:relative;height:clamp(260px,26vw,340px);overflow:hidden}
.flow__dot{position:absolute;top:var(--y);left:-2%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:rgba(245,241,232,0.75);opacity:0;animation:var(--anim) var(--dur) linear infinite;animation-delay:var(--del);animation-play-state:paused}
.flow.in .flow__dot{animation-play-state:running}
.flow__gate{position:absolute;top:48px;bottom:14px;left:var(--x);border-left:1.5px dashed rgba(245,241,232,0.22)}
.flow__gate--key{border-left-color:rgba(246,240,90,0.6)}
.flow__chip{position:absolute;top:var(--top,14px);left:var(--x);transform:translateX(-50%);padding:5px 11px;border:1px solid var(--line-2);border-radius:999px;background:#1E1E1E;font-family:var(--mono);font-size:10px;letter-spacing:0.1em;color:var(--muted-2);white-space:nowrap}
.flow__chip--key{border-color:var(--yellow);background:var(--yellow);color:var(--ink)}
.flow.in .flow__chip--key{animation:flow-chip 2.8s var(--ease) infinite}
@keyframes flow-chip{0%,100%{transform:translateX(-50%) scale(1)}18%{transform:translateX(-50%) scale(1.08)}46%{transform:translateX(-50%) scale(1)}}
.flow__label{position:absolute;top:14px;left:calc(var(--x) + 10px);padding:5px 9px;border:1px solid rgba(246,240,90,0.55);border-radius:999px;background:rgba(246,240,90,0.1);font-family:var(--mono);font-size:10px;letter-spacing:0.1em;color:var(--yellow);white-space:nowrap}
.flow__lane{position:absolute;left:20px;top:var(--top);font-family:var(--mono);font-size:10px;letter-spacing:0.1em;color:var(--muted-2)}
.flow__lane--key{color:var(--yellow)}
.flow__divider{position:absolute;left:0;right:0;top:var(--top);border-top:1px dashed var(--line)}
.flow__legend{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));border-top:1px solid var(--line);background:rgba(20,20,20,0.9)}
.flow__legend div{display:flex;flex-direction:column;gap:4px;padding:16px 20px;border-left:1px solid var(--line)}
.flow__legend div:first-child{border-left:0}
.flow__legend b{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--cream)}
.flow__legend b.is-key{color:var(--yellow)}
.flow__legend span{font-size:14px;line-height:1.45;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.fig .bp-d,.fig .bp-n.is-key circle,.fig .bp-float,.flow__dot,.flow.in .flow__chip--key{animation-play-state:paused!important}.flow.in .flow__chip--key{animation:none}}

.ico{width:36px;height:36px;color:var(--cream);flex:none}
.related .ico{margin-bottom:4px}

/* Closing CTA */
.closer{margin:0 24px 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.closer__main{display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:48px;border-radius:32px;background:var(--yellow);color:var(--ink)}
.closer__main p{margin:0;max-width:460px;font-size:17px;line-height:1.5;color:var(--muted-ink)}
.closer__side{display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:48px;border-radius:32px;background:var(--ink-3);border:1px solid var(--line)}
.closer__side p{margin:0;font-size:20px;line-height:1.45;text-wrap:pretty}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills span{padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);font-size:14px}
.closer__main .pills span{border-color:rgba(17,17,17,0.35)}

/* Related services */
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.related a{display:flex;flex-direction:column;gap:14px;min-height:220px;padding:28px;border-radius:26px;background:var(--ink-3);border:1px solid transparent;transition:border-color .25s,background-color .25s}
.related a:hover{border-color:var(--yellow);background:var(--ink-2)}
.related .label{color:var(--muted-2)}
.related p{margin:0;font-size:16px;line-height:1.5;color:var(--muted)}
.related .go{margin-top:auto;font-family:var(--mono);font-size:12px;letter-spacing:0.08em;color:var(--yellow)}


/* Calculators (CRO, Ads, Email heroes): same ink and lilac glow as the Instagram posts */
.calc{display:flex;flex-direction:column;gap:20px;padding:32px;border:1px solid var(--line);border-radius:26px;background-color:#141414;background-image:radial-gradient(600px 460px at 88% 6%,rgba(211,186,215,0.2),transparent 70%);color:var(--cream);color-scheme:dark}
.calc .label{font-family:var(--display);font-stretch:62%;font-weight:800;font-size:26px;line-height:0.95;letter-spacing:0;text-transform:uppercase;text-wrap:balance;color:var(--cream)}
.calc__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.calc label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--muted)}
.calc input,.calc select{width:100%;height:48px;padding:0 16px;border:1px solid var(--line-2);border-radius:999px;background:var(--ink-3);color:var(--cream);font-family:var(--sans);font-size:16px;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.calc input:focus,.calc select:focus{outline:2px solid var(--yellow);outline-offset:1px}
.calc__out{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:16px;padding-top:18px;border-top:1px dashed rgba(245,241,232,0.35)}
.calc__out div{display:flex;flex-direction:column;gap:6px}
.calc__out span{font-size:14px;color:var(--muted)}
.calc__out strong{align-self:flex-start;padding:0.04em 0;font-family:var(--display);font-stretch:62%;font-weight:800;font-size:clamp(48px,4.4vw,72px);line-height:0.85;background-image:linear-gradient(90deg,#F6F05A,#D3BAD7);-webkit-background-clip:text;background-clip:text;color:transparent}
.calc__out small{font-size:13px;color:var(--muted-2)}
.calc__note{margin:0;font-size:12px;line-height:1.5;color:var(--muted-2)}


@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn:hover{transform:none}}

/* Responsive */
@media (max-width:1100px){
  .hero{grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}
  .hero__aside{max-width:560px}
  .split__side{grid-column:1 / -1;position:static}
  .split__main{grid-column:1 / -1}
  .grid--4,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps li:nth-child(3){padding-left:0;border-left:0}
  .steps li:nth-child(n+3){margin-top:28px;border-top:1px solid #333}
  .grid--3,.related{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fig{grid-template-columns:minmax(0,1fr)}
  .fig__legend{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:760px){
  .nav{padding:12px 16px}
  .nav__pill{padding:8px 8px 8px 18px}
  .nav__logo img{height:24px}
  .nav__link{display:none}
  .nav .long{display:none}.nav .short{display:inline}
  .nav .btn{height:42px;padding:0 18px}
  .crumbs{padding:20px 20px 0}
  .hero{padding:32px 20px 64px;gap:32px}
  .calc{padding:24px}.calc__fields{grid-template-columns:minmax(0,1fr)}.calc__out{grid-auto-flow:row}
  .hero__aside{padding:24px}
  .lead{font-size:17px}
  .section{padding:80px 20px}
  .section--tight{padding:56px 20px}
  .panel{margin:0 10px;padding:64px 10px 10px;border-radius:26px}
  .panel+.panel{margin-top:10px}
  .panel--pad{padding:64px 20px}
  .panel .sec-head{padding:0 10px}
  .panel--pad .sec-head{padding:0}
  .sec-head{margin-bottom:36px}
  .grid--2,.grid--3,.grid--4,.related{grid-template-columns:minmax(0,1fr)}
  .card{padding:24px}
  .fig,.flow{border-radius:22px}
  .flow__stage{height:280px}
  .flow__label{left:calc(var(--x) + 6px);padding:4px 7px;font-size:9px;letter-spacing:0.06em}
  .flow__legend{grid-template-columns:minmax(0,1fr)}
  .flow__legend div{border-left:0;border-top:1px solid var(--line);padding:14px 16px}
  .flow__legend div:first-child{border-top:0}
  .fig__draw{padding:16px 10px}
  .fig__legend ol{padding:12px 20px 20px}
  .fig__legend li{grid-template-columns:36px minmax(0,1fr);gap:16px;padding:18px 0}
  .fig__legend li b{width:36px;height:36px;font-size:12px}
  .fig__legend strong{margin-top:5px;font-size:17px}
  .fig__rule{padding:24px 20px}
  .fig__rule ol{padding:0}
  .fig__rule li.is-key{font-size:18px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .steps li,.steps li:nth-child(3){padding:24px 0 0;border-left:0}
  .steps li+li{margin-top:24px;border-top:1px solid #333}
  .prose{font-size:17px}
  /* Stacked tables: each row becomes a card, labels come from data-label */
  .table--stack{min-width:0}
  .table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table--stack tbody,.table--stack tr,.table--stack th,.table--stack td{display:block}
  .table--stack tr{padding:6px 0 12px;border-top:1px solid var(--line)}
  .table--stack tbody tr:first-child{border-top:0}
  .table--stack th,.table--stack td{border-top:0;padding:8px 20px}
  .table--stack tbody th{padding-top:14px;font-size:18px}
  .table--stack td[data-label]{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,11fr);gap:12px}
  .table--stack td[data-label]::before{content:attr(data-label);font-family:var(--mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted-2);padding-top:3px}
  .table--stack .num{white-space:normal}
  .faq summary{font-size:18px;padding:16px 16px 16px 20px;grid-template-columns:1fr 40px}
  .faq summary::after{width:40px;height:40px}
  .faq details>div{padding:0 20px 22px;font-size:16px}
  .closer{margin:0 10px 10px;grid-template-columns:minmax(0,1fr)}
  .closer__main,.closer__side{padding:32px 24px;border-radius:26px}
  .btn{white-space:normal;text-align:center;height:auto;min-height:54px;padding:14px 24px}
}
/* Tabs (assets/tabs.js): one panel at a time; without JavaScript every panel shows in turn */
.tabs__list{display:flex;gap:8px;margin:0 0 20px;padding:2px;overflow-x:auto;scrollbar-width:none}
.tabs__list::-webkit-scrollbar{display:none}
.tabs__tab{flex:none;appearance:none;cursor:pointer;padding:11px 18px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--muted);font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;transition:color .2s,border-color .2s,background-color .2s}
.tabs__tab:hover{color:var(--cream);border-color:var(--cream)}
.tabs__tab[aria-selected="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.tabs__tab:focus-visible,.tabs__panel:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.tabs:not(.is-ready) .tabs__panel+.tabs__panel{margin-top:12px}
.tabs__panel{border-radius:26px}
.tabs__panel[hidden]{display:none!important}
.panel:not(.panel--dark) .tabs__tab{border-color:var(--rule-2);color:var(--muted-ink)}
.panel:not(.panel--dark) .tabs__tab:hover{border-color:var(--ink);color:var(--ink)}
.panel:not(.panel--dark) .tabs__tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
@media (max-width:760px){.tabs__list{margin:0 -10px 16px;padding:2px 10px}.tabs__tab{padding:10px 14px;font-size:11px}}