/* Purpose: the whole site's styles — hand-written native CSS, no build step.
   Design: "Ember Classic" tokens · neumorphic base + liquid-glass cards (one light source, two materials). */

/* ---------- Fonts (self-hosted, weight floor 400) ---------- */
@font-face{font-family:Ranade;font-weight:400;font-display:swap;src:url(../fonts/ranade-400.woff2)}
@font-face{font-family:Ranade;font-weight:500;font-display:swap;src:url(../fonts/ranade-500.woff2)}
@font-face{font-family:Ranade;font-weight:700;font-display:swap;src:url(../fonts/ranade-700.woff2)}
@font-face{font-family:Rajdhani;font-weight:600;font-display:swap;src:url(../fonts/rajdhani-600.woff2)}
@font-face{font-family:Rajdhani;font-weight:700;font-display:swap;src:url(../fonts/rajdhani-700.woff2)}
@font-face{font-family:Gluten;font-weight:400 700;font-display:swap;src:url(../fonts/gluten-400-700.woff2)}
@font-face{font-family:Onest;font-weight:400 700;font-display:swap;src:url(../fonts/onest-400-700.woff2)}
@font-face{font-family:Geologica;font-weight:400 700;font-display:swap;src:url(../fonts/geologica-400-700.woff2)}
@font-face{font-family:"Young Serif";font-weight:400;font-display:swap;src:url(../fonts/young-serif-400.woff2)}

/* ---------- Tokens ---------- */
:root{
  color-scheme:light dark;
  --surface:light-dark(#EDEEF2,#1B1E25);
  --ink:light-dark(#1C1E24,#ECEEF3);
  --muted:light-dark(#464B58,#A9AFBD);
  --orange:light-dark(#C8500B,#FF7A29);      /* buttons / UI */
  --orange-text:light-dark(#A8420A,#FF8A3D);   /* small orange text: the lighter --orange is only 3.9:1 on the grey surface; this is 5.3:1 (AA) */
  --on-orange:light-dark(#fff,#1C1E24);      /* dark ink on dark-mode orange (white fails AA) */
  --deco:light-dark(#F0600E,#FF8A3D);        /* large / decorative only */
  --logo-orange:var(--orange);
  --hi:light-dark(#fff,#272C37);             /* neumorphic light edge */
  --lo:light-dark(#C3C6D2,#101217);          /* neumorphic dark edge */
  --raise:6px 6px 14px var(--lo),-6px -6px 14px var(--hi);
  --press:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi);
  --radius:1.75rem;
  --gutter:clamp(1rem,4vw,2rem);
  --wrap:72rem;
  --f-h1:Ranade,system-ui,sans-serif;
  --f-h2:Rajdhani,system-ui,sans-serif;
  --f-h3:Gluten,system-ui,sans-serif;
  --f-body:Onest,system-ui,sans-serif;
  --f-ui:Geologica,system-ui,sans-serif;
  --f-btn:"Young Serif",Georgia,serif;
}
html[data-theme=light]{color-scheme:light}
html[data-theme=dark]{color-scheme:dark}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:6rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font:400 1.0625rem/1.65 var(--f-body);overflow-x:clip}
img,svg{max-width:100%;display:block}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration-color:var(--orange);text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:.4rem}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--orange);color:var(--on-orange);padding:.6rem 1rem;border-radius:.6rem}
.skip:focus{top:1rem}
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.center{text-align:center}

h1,h2,h3,h4,h5,h6{margin:0;text-wrap:balance;line-height:1.1}
h1{font:700 clamp(2.15rem,1.2rem + 4.6vw,4.1rem)/1.05 var(--f-h1);letter-spacing:-.01em}
h2{font:700 clamp(1.9rem,1.3rem + 2.6vw,3rem)/1.08 var(--f-h2)}
h3{font:700 1.35rem/1.2 var(--f-h3)}
h4{font:600 1.2rem var(--f-h3)}h5{font:500 1.1rem var(--f-h3)}h6{font:400 1rem var(--f-h3)}
p{margin:0 0 1em;text-wrap:pretty}
.kicker{font:500 .8rem/1.3 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:3rem;padding:.7rem 1.6rem;text-align:center;border:0;border-radius:99px;
  background:var(--orange);color:var(--on-orange);font:400 1.05rem/1 var(--f-btn);text-decoration:none;cursor:pointer;
  box-shadow:var(--raise);transition:box-shadow .2s,transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{box-shadow:var(--press);transform:none}
.btn.ghost{background:var(--surface);color:var(--ink)}

/* ---------- Header ---------- */
@property --logo-h{syntax:"<length>";inherits:true;initial-value:88px}   /* px: rem isn't allowed in an initial-value */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 95%,transparent);
 box-shadow:0 8px 20px -10px var(--lo);
  --logo-h:2.5rem}
.bar{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:4.5rem}
.brand{display:block;line-height:0;border-radius:.6rem;text-decoration:none}
.brand svg{height:var(--logo-h);width:auto;aspect-ratio:400.576/96;overflow:visible}
.brand .vertical{display:none}

.controls{display:flex;gap:.25rem;padding:.3rem;border-radius:99px;box-shadow:var(--raise)}
.theme,.burger{display:grid;place-items:center;width:2.75rem;height:2.75rem;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer}
.theme:active,.burger:active{box-shadow:var(--press)}
.theme svg{grid-area:1/1;width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s,rotate .4s}
.theme .moon{fill:currentColor;stroke:none}
html[data-theme=light] .moon,html[data-theme=dark] .sun{opacity:0;rotate:-60deg}
.burger span,.burger span::before,.burger span::after{display:block;width:1.3rem;height:2px;border-radius:2px;background:currentColor;transition:transform .3s,opacity .3s}
.burger span{position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-.4rem}.burger span::after{top:.4rem}
.site-header:has(#menu:popover-open) .burger span{background:none}
.site-header:has(#menu:popover-open) .burger span::before{top:0;transform:rotate(45deg)}
.site-header:has(#menu:popover-open) .burger span::after{top:0;transform:rotate(-45deg)}

/* Mobile menu = native popover panel under the bar */
#menu{inset:4.5rem 0 auto 0;width:100%;max-height:calc(100dvh - 4.5rem);margin:0;padding:1rem var(--gutter) 1.5rem;overflow:auto;
  border:0;border-radius:0 0 var(--radius) var(--radius);background:var(--surface);color:var(--ink);box-shadow:0 20px 30px -12px var(--lo);
  font:500 1.05rem var(--f-ui);transition:opacity .25s,translate .25s,display .25s allow-discrete;opacity:0;translate:0 -.75rem}
#menu:popover-open{opacity:1;translate:0}
@starting-style{#menu:popover-open{opacity:0;translate:0 -.75rem}}
#menu a:not(.btn){display:block;padding:.85rem 1rem;border-radius:1rem;text-decoration:none}
#menu a:not(.btn):hover,#menu a[aria-current]{box-shadow:var(--press)}
#menu a[aria-current]{color:var(--ink);font-weight:700}
/* Mobile: the dropdown label is a plain, non-clickable heading (submenu is always expanded below it) */
#menu .sub-toggle{display:block;width:100%;padding:.85rem 1rem;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:default;pointer-events:none}
#menu .sub-toggle svg{display:none}
#menu ul ul{padding-inline-start:1rem;font-size:.95rem;font-weight:400}
/* Current page = pressed pill. Parent of the current sub-page = just bold (ancestor), so only one item looks "active".
   Current sub-item = soft orange tint + dot instead of a second heavy pressed pill. */
#menu [data-ancestor]{font-weight:700}
#menu ul ul a[aria-current]{display:flex!important;align-items:center;gap:.65rem;font-weight:700;box-shadow:none;background:color-mix(in srgb,var(--orange) 14%,transparent)}
#menu ul ul a[aria-current]::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--orange)}
.menu-cta{width:100%;margin-top:1rem}

/* Desktop: menu is always visible; the popover box disappears (display:contents) so the two nav groups
   become grid items either side of the centered logo. */
@media (min-width:64em){
  .site-header{--logo-h:2.5rem}
  .bar{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;padding-block:.25rem}
  .brand{grid-area:1/2}
  .brand .vertical{display:flex;flex-direction:column;align-items:center;gap:.35rem;line-height:1.1}
  .brand .vertical svg{height:2.1rem;width:2.1rem;aspect-ratio:1/1}
  .brand .brand-name{font:700 .72rem var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
  .brand .horizontal,.burger,.menu-cta{display:none}
  #menu,#menu:not(:popover-open){display:contents}
  #menu ul{display:flex;align-items:center;gap:.25rem}
  .nav-l{grid-area:1/1}
  .nav-r{grid-area:1/3;justify-self:end;padding-inline-end:4.5rem}
  .controls{position:absolute;right:0;top:50%;translate:0 -50%;padding:.25rem}
  #menu a:not(.btn){padding:.55rem 1rem;font-size:.95rem;white-space:nowrap}
  .has-sub{position:relative}
  .has-sub>ul{position:absolute;top:100%;left:0;z-index:5;display:block!important;min-width:21rem;padding:.5rem;border-radius:1.25rem;background:var(--surface);box-shadow:var(--raise);
    visibility:hidden;opacity:0;translate:0 .5rem;transition:.2s}
  .has-sub.open>ul{visibility:visible;opacity:1;translate:0}
  @media (hover:hover){.has-sub:hover>ul{visibility:visible;opacity:1;translate:0}}
  #menu .sub-toggle{display:inline-flex;align-items:center;gap:.4rem;width:auto;padding:.55rem 1rem;font-size:.95rem;cursor:pointer;pointer-events:auto;border-radius:1rem;transition:transform .25s var(--spring),box-shadow .2s}
  #menu .sub-toggle svg{display:block;width:.8rem;height:.8rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:rotate .3s var(--spring)}
  #menu .sub-toggle[aria-expanded=true] svg,.has-sub:hover .sub-toggle svg{rotate:180deg}
  #menu .sub-toggle:hover,#menu .sub-toggle[aria-expanded=true]{box-shadow:var(--press)}
  .has-sub>ul a{font-size:.9rem!important;white-space:normal!important}
}
@keyframes shrink{to{--logo-h:4.75rem}}

/* ---------- Sections ---------- */
.section{padding-block:clamp(3rem,8vw,6rem)}
.section>h2,.section .wrap>h2,h3.sect{margin-bottom:clamp(1.5rem,4vw,2.5rem)}
/* Section-level H3 (Gluten per the type system) sized up so it still reads as a section title */
h3.sect{font-size:clamp(1.9rem,1.3rem + 2.4vw,2.8rem);line-height:1.12}
.prose{max-width:46rem}
.prose h2,.prose h3{margin:1.6em 0 .5em}
.prose ul{list-style:disc;padding-inline-start:1.25rem;margin-bottom:1em}
.split{display:grid;gap:1.25rem 3rem;align-items:start}
.split>h2{margin:0}
@media (min-width:56em){.split{grid-template-columns:1fr 1.3fr}.split>h2{position:sticky;top:7rem}}
.pull{font:500 1.25rem/1.45 var(--f-body);padding-inline-start:1rem;border-inline-start:4px solid var(--deco)}
.lede{font-size:clamp(1.15rem,1rem + .8vw,1.45rem);line-height:1.5}

/* Aura accent: layered orange radial gradients drawn from the surface tokens, not preset colors */
.aura{position:relative;isolation:isolate;overflow:clip;contain:paint}
.aura::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40rem 26rem at 85% 0%,color-mix(in srgb,var(--deco) 30%,transparent),transparent 70%),
             radial-gradient(34rem 24rem at 0% 100%,color-mix(in srgb,var(--deco) 18%,transparent),transparent 70%)}
.alt{background:color-mix(in srgb,var(--ink) 3%,var(--surface))}

/* ---------- Cards: neumorphic shadow + glass material ---------- */
.card{padding:clamp(1.25rem,3vw,2rem);border-radius:var(--radius)}
.glass{background:color-mix(in srgb,var(--surface) 72%,transparent);backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:var(--raise),inset 0 1px 1px light-dark(#fff,#ffffff26),inset 0 0 0 1px light-dark(#ffffff80,#ffffff14)}
/* 6-column grid so any left-over card in the last row stretches to fill it (1 → 2 → 3 cards per row) */
.cards{display:grid;gap:1.5rem;grid-template-columns:repeat(6,1fr)}
.cards>li{grid-column:span 6}
@media (min-width:36em){
  .cards>li{grid-column:span 3}
  .cards>li:last-child:nth-child(odd){grid-column:span 6}
}
@media (min-width:56em){
  .cards>li,.cards>li:last-child:nth-child(odd){grid-column:span 2}
  .cards>li:last-child:nth-child(3n+1){grid-column:span 6}
  .cards>li:last-child:nth-child(3n+2),.cards>li:nth-last-child(2):nth-child(3n+1){grid-column:span 3}
}
.cards .card{display:flex;flex-direction:column;gap:.6rem}
.cards h3{font-size:1.4rem}
.cards p{margin:0;color:var(--muted)}
.num{font:700 3.2rem/1 var(--f-h2);color:var(--deco)}
.more{margin-top:auto;padding-top:.5rem;font:500 .95rem var(--f-ui)}
.cards h3 a{text-decoration:none}
.cards h3 a::after{content:"";position:absolute;inset:0}   /* whole card is one click target */
.cards .card{position:relative}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(2.5rem,7vw,5.5rem)}
.hero-grid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:56em){.hero-grid{grid-template-columns:1.35fr 1fr}}
.hero h1{margin:.6rem 0 1.25rem}
.proof{font-weight:500}
.cta-note{margin:.9rem 0 0;font:400 .9rem var(--f-ui);color:var(--muted)}
.actions+.cta-note{margin-top:-.75rem}
.actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.75rem}
.actions.center{justify-content:center}   /* flex row: text-align from .center alone does nothing to its children */
.stats{display:grid;gap:1.25rem}
.stats li{display:grid;gap:.15rem;padding-block:.75rem}
.stats li+li{border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.stats strong{font:700 clamp(2.6rem,6vw,3.6rem)/1 var(--f-h2);color:var(--deco)}
.stats em{justify-self:start;padding:.2rem .7rem;border-radius:99px;font:500 .75rem/1.4 var(--f-ui);letter-spacing:.04em;font-size:.85rem;font-style:normal;box-shadow:var(--press);color:var(--muted)}
.stats small{font:500 1rem var(--f-ui);color:var(--ink)}
.stats li>span{font:400 .95rem var(--f-ui);color:var(--muted)}
/* Growth-chart hero visual (entrepreneurs page) — same .stats numbers, led by an ascending bar chart instead of a plain list */
.growth-chart{display:flex;flex-direction:column;gap:1.5rem}
.growth-chart .stats{gap:0;display:flex;justify-content:space-between}
.growth-chart .stats li{border:0;padding-block:0}
.growth-chart .stats strong{font-size:clamp(1.6rem,3.5vw,2.2rem)}
.growth-bars{width:100%;height:auto}
.growth-bars .bar{fill:color-mix(in srgb,var(--orange) 28%,transparent)}
.growth-bars .bar-peak{fill:var(--orange)}
.growth-bars .trend{fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
/* Browser-window hero visual (website designer/developer page) */
.device-mock{padding:0;overflow:clip}
.device-chrome{display:flex;align-items:center;gap:.4rem;padding:.7rem 1rem;background:color-mix(in srgb,var(--ink) 6%,var(--surface));border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.device-chrome span{width:.5rem;height:.5rem;border-radius:50%;background:color-mix(in srgb,var(--ink) 20%,transparent);flex:none}
.device-chrome span.dot-accent{background:var(--orange)}
.device-url{margin-left:.5rem;padding:.2rem .7rem;border-radius:99px;background:var(--surface);box-shadow:var(--press);font:500 .72rem var(--f-ui);color:var(--muted)}
.device-mock .stats{padding:1.5rem}

/* ---------- Client marquee (CSS-only) ---------- */
.trust{padding-block:1.75rem 2.75rem;border-block:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.trust-label{margin:0 0 .9rem;text-align:center;font:500 .8rem var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.marquee{overflow:clip;contain:paint;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee ul{display:flex;gap:3rem;width:max-content;animation:scroll 90s linear infinite}
.marquee:hover ul{animation-play-state:paused}
.marquee li{white-space:nowrap;font:600 1.5rem/1 var(--f-h2);color:color-mix(in srgb,var(--ink) 80%,transparent)}
@keyframes scroll{to{translate:calc(-50% - 1.5rem)}}
@media (prefers-reduced-motion:reduce){
  .marquee{mask:none}
  .marquee ul{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:.75rem 2rem}
  .marquee li[aria-hidden]{display:none}
}

/* ---------- Process / paths ---------- */
.steps{counter-reset:s}
.cta-band{text-align:center}
.cta-band h3{max-width:26ch;margin-inline:auto}
.process-cta{margin-top:2.5rem}
.section .center+.cards,.steps+.center{margin-top:2.5rem}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:1rem;max-width:52rem;margin-inline:auto}
details{border-radius:1.25rem;box-shadow:var(--raise);background:var(--surface);transition:box-shadow .25s}
details[open]{box-shadow:var(--press)}
summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.4rem;font:500 1.1rem/1.3 var(--f-h3);cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;font:400 1.6rem/1 var(--f-ui);color:var(--orange);transition:rotate .25s}
details[open] summary::after{rotate:45deg}
details p{margin:0;padding:0 1.4rem 1.3rem;color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{margin-top:clamp(.5rem,1.5vw,1rem);padding-block:clamp(2rem,5vw,3.5rem) 1.5rem;border-radius:var(--radius) var(--radius) 0 0;
  border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);font-family:var(--f-ui)}
.foot-top{display:grid;gap:1.5rem;align-items:center}
.foot-id p{margin:.75rem 0 0;max-width:34rem;color:var(--muted);font:400 .95rem/1.55 var(--f-body)}
.foot-logo{display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;font:700 1.6rem/1 var(--f-h2);letter-spacing:.02em}
.foot-logo svg{width:3rem;height:3rem;overflow:visible}
.foot-logo .link{stroke:var(--ink);stroke-width:2;opacity:.6;fill:none;stroke-dasharray:4 3;animation:flow 3s linear infinite}
.foot-logo .hub{fill:var(--logo-orange);transform-origin:32px 20px;animation:pulse 2.8s ease-in-out infinite}
.foot-logo .node{fill:var(--surface);stroke:var(--ink);stroke-width:2.5}
@keyframes pulse{50%{scale:1.25}}
@keyframes flow{to{stroke-dashoffset:-14}}
.socials{display:flex;flex-wrap:wrap;gap:.75rem}
.socials a{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;box-shadow:var(--raise);transition:box-shadow .2s,color .2s}
.socials a:hover{color:var(--orange)}
.socials a:active{box-shadow:var(--press)}
.socials svg{width:1.2rem;height:1.2rem;fill:currentColor}
.foot-nav{display:grid;gap:.75rem;margin-block:2rem;padding-block:1.5rem;border-block:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.foot-nav ul{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.foot-nav a{display:inline-block;padding:.45rem 0;font-size:.95rem;text-decoration-color:transparent;transition:text-decoration-color .2s}
.foot-nav a:hover{text-decoration-color:var(--orange)}
.foot-nav ul+ul a{font-size:.85rem;color:var(--muted)}
.foot-bottom{display:grid;gap:.5rem;font-size:.85rem;color:var(--muted)}
.foot-bottom p{margin:0}
.foot-bottom a{color:var(--ink)}
.foot-build{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.stack-badges{font-size:.75rem}
.stack-badges a{display:inline-flex;align-items:center;padding:.4rem 1rem;border-radius:99px;box-shadow:var(--raise);color:var(--muted);text-decoration:none;font-weight:500;transition:box-shadow .2s,color .2s}
.stack-badges a:hover,.stack-badges a:focus-visible{box-shadow:var(--press);color:var(--orange)}
@media (min-width:56em){
  .foot-top{grid-template-columns:1fr auto;gap:2rem}
  .foot-bottom{grid-template-columns:1fr auto;align-items:center;gap:1.5rem}
}

/* Footer command palette (Ctrl/Cmd+K) */
.cmdk-trigger{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;padding:.55rem 1rem;border:0;border-radius:99px;background:var(--surface);color:var(--muted);box-shadow:var(--press);font:500 .85rem var(--f-ui);cursor:pointer;transition:color .2s,box-shadow .2s}
.cmdk-trigger:hover{color:var(--ink);box-shadow:var(--raise)}
.cmdk-trigger svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cmdk-trigger kbd,.cmdk-form kbd{padding:.15rem .45rem;border-radius:.4rem;background:color-mix(in srgb,var(--ink) 8%,transparent);font:600 .7rem var(--f-ui)}
.cmdk-trigger-keys{display:inline-flex;align-items:center;gap:.3rem}
.cmdk-trigger-or{color:var(--muted);font-size:.72rem}
/* Glass material (same mandatory treatment as .card.glass) + a soft orange rim light instead of a flat border */
.cmdk{padding:0;border:0;border-radius:var(--radius);background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(20px) saturate(1.5);color:var(--ink);
  box-shadow:0 2rem 4rem -1.5rem color-mix(in srgb,black 60%,transparent),inset 0 1px 1px light-dark(#fff,#ffffff26),inset 0 0 0 1px light-dark(#ffffff80,#ffffff14),0 0 0 1px color-mix(in srgb,var(--orange) 18%,transparent);
  width:min(34rem,90vw);max-height:70vh;overflow:hidden}
.cmdk::backdrop{background:color-mix(in srgb,black 55%,transparent);backdrop-filter:blur(3px)}
@media (prefers-reduced-motion:no-preference){
  .cmdk{transition:opacity .25s var(--ease-out),scale .25s var(--ease-out),display .25s allow-discrete;opacity:0;scale:.96}
  .cmdk[open]{opacity:1;scale:1}
  @starting-style{.cmdk[open]{opacity:0;scale:.96}}
  .cmdk::backdrop{transition:opacity .25s,display .25s allow-discrete;opacity:0}
  .cmdk[open]::backdrop{opacity:1}
  @starting-style{.cmdk[open]::backdrop{opacity:0}}
}
.cmdk-form{position:relative;display:flex;align-items:center;gap:.75rem;padding:1.1rem 1.25rem;border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.cmdk-form svg{width:1.1rem;height:1.1rem;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;transition:stroke .2s}
.cmdk-form:focus-within svg{stroke:var(--orange)}
.cmdk-input{flex:1;min-width:0;border:0;background:none;color:var(--ink);font:400 1.05rem var(--f-body)}
.cmdk-input:focus{outline:none}
.cmdk-input::placeholder{color:var(--muted)}
.cmdk-form kbd{color:var(--muted)}
/* An ignition line under the input — draws in on focus instead of a generic outline ring */
.cmdk-form::after{content:"";position:absolute;left:1.25rem;right:1.25rem;bottom:-1px;height:2px;border-radius:2px;background:var(--orange);scale:0 1;transform-origin:0 50%;transition:scale .3s var(--spring)}
.cmdk-form:focus-within::after{scale:1 1}
.cmdk-results{list-style:none;margin:0;padding:.5rem;max-height:50vh;overflow:auto}
.cmdk-results li{border-radius:.9rem}
.cmdk-results a{display:block;padding:.65rem .9rem;border-radius:inherit;color:var(--ink);text-decoration:none;font-size:.95rem;transition:background .15s}
.cmdk-results a small{display:block;color:var(--muted);font-size:.8rem}
.cmdk-results li[aria-selected="true"] a,.cmdk-results a:hover{background:color-mix(in srgb,var(--orange) 14%,transparent)}
.cmdk-results mark{background:none;color:var(--orange-text);font-weight:600}
.cmdk-empty{padding:1rem 1.25rem;color:var(--muted);font-size:.9rem}
.cmdk-hint{display:flex;align-items:center;gap:1rem;padding:.6rem 1.25rem;border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);color:var(--muted);font-size:.78rem}
.cmdk-count{margin-inline-end:auto;white-space:nowrap}
.cmdk-kbhints{display:flex;align-items:center;gap:1rem;white-space:nowrap}
.cmdk-hint span{display:inline-flex;align-items:center;gap:.3rem}
.cmdk-hint kbd{padding:.1rem .35rem;border-radius:.35rem;background:color-mix(in srgb,var(--ink) 8%,transparent);font:600 .72rem var(--f-ui)}
/* Arrow-key/Enter hints are meaningless without a physical keyboard — drop them below ~30em
   instead of letting 4 flex items word-wrap into a ragged column (the bug this fixes). */
@media (max-width:30em){
  .cmdk-hint .cmdk-kbhints{display:none}   /* beats ".cmdk-hint span" (0,1,1) — plain ".cmdk-kbhints" (0,1,0) didn't */
  .cmdk-count{margin-inline-end:0;width:100%;text-align:center}
}

/* ---------- Motion & micro-interactions ----------
   Rules: transform/opacity only (GPU-composited), hover effects only on real hover devices,
   everything wrapped so reduced-motion visitors get a still page. */
:root{interpolate-size:allow-keywords;--spring:linear(0,.42 9%,.92 21%,1.09 33%,.98 50%,1.01 67%,1);--ease-out:cubic-bezier(.2,.7,.2,1)}

@media (prefers-reduced-motion:no-preference){
  /* Page load: hero staggers in */
  .hero-copy>:not(h1){animation:rise .6s var(--ease-out) both}
  .hero-copy>:nth-child(2){animation-delay:.04s}.hero-copy>:nth-child(3){animation-delay:.1s}
  .hero-copy>:nth-child(4){animation-delay:.16s}.hero-copy>:nth-child(5){animation-delay:.22s}
  .hero-copy>:nth-child(6){animation-delay:.28s}.hero-copy>:nth-child(7){animation-delay:.34s}
  .stats{animation:rise .7s var(--ease-out) .15s both}   /* card appears with its first row, not as an empty box */
  .stats li{animation:rise .8s var(--ease-out) both}
  .stats li:nth-child(1){animation-delay:.25s}.stats li:nth-child(2){animation-delay:.4s}.stats li:nth-child(3){animation-delay:.55s}
  .trust{animation:rise .9s var(--ease-out) .5s both}

  /* Kicker: live-dot pulse */
  .kicker::before{content:"";display:inline-block;width:.55em;height:.55em;margin-inline-end:.7em;border-radius:50%;background:var(--deco);animation:beat 2s ease-in-out infinite}
  @keyframes beat{50%{scale:1.5;opacity:.45}}

  /* Aura glow drifts slowly (hero + closing band only) */
  .hero.aura::before,.cta-band::before{inset:-12%;animation:drift 22s ease-in-out infinite alternate}
  @keyframes drift{to{transform:translate3d(-4%,3%,0) scale(1.08)}}

  /* Card grids reveal one after another (each card gets a later slice of the scroll range) */
  @supports (animation-timeline:view()){
    .site-header::after{content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--orange);transform-origin:0 50%;scale:0 1;animation:progress linear both;animation-timeline:scroll(root)}
    @keyframes progress{to{scale:1 1}}
  }

  /* Buttons: shine sweep + arrow-friendly press */
  .btn{position:relative;overflow:hidden;isolation:isolate}
  .btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,#ffffff55 50%,transparent 65%);translate:-120% 0;transition:translate .7s var(--ease-out)}
  .btn:active{scale:.97}

  /* FAQ: smooth open/close (progressive enhancement: Chromium animates the height, others just snap) */
  details::details-content{block-size:0;overflow:clip;transition:block-size .35s var(--ease-out),content-visibility .35s allow-discrete}
  details[open]::details-content{block-size:auto}
  summary::after{transition:rotate .35s var(--spring)}
  details[open] summary::after{rotate:135deg}

  /* Theme toggle + burger */
  .theme svg{transition:opacity .3s,rotate .5s var(--spring)}
  .burger span,.burger span::before,.burger span::after{transition:transform .35s var(--spring),top .25s,opacity .3s}

}

@media (prefers-reduced-motion:no-preference) and (hover:hover){
  .btn:hover::after{translate:120% 0}
  .btn:hover{transform:translateY(-3px) scale(1.02)}
  .btn:active{transform:none}

  .cards .card:hover .num{transform:rotate(-8deg) scale(1.15)}
  .num{display:inline-block;transform-origin:left bottom;transition:transform .5s var(--spring)}
  .more span{display:inline-block;transition:transform .3s var(--ease-out)}
  .card:hover .more span{transform:translateX(.35rem)}

  #menu a:not(.btn){transition:transform .25s var(--spring),box-shadow .2s}
  @media (min-width:64em){#menu a:not(.btn):hover{transform:translateY(-2px)}}
  .theme:hover svg.sun{rotate:90deg}
  .theme:hover svg.moon{rotate:-20deg}
  .theme:hover,.burger:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}

  .socials a{transition:transform .35s var(--spring),box-shadow .2s,color .2s}
  .socials a:hover{transform:translateY(-5px) rotate(-6deg)}
  .foot-nav a{transition:transform .25s var(--ease-out),text-decoration-color .2s}
  .foot-nav a:hover{transform:translateX(3px)}
  .foot-logo:hover svg{rotate:-10deg;transition:rotate .5s var(--spring)}

  summary{transition:padding-inline-start .25s var(--ease-out)}
  summary:hover{padding-inline-start:1.8rem}
  .marquee li{transition:transform .3s var(--spring),color .2s}
  .marquee li:hover{transform:scale(1.12);color:var(--deco)}
}

/* ---------- WOW layer: split headlines, living network, 3D tilt + spotlight, magnetic CTA, progress line ---------- */
.w{display:inline-block;overflow:clip;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.w>span{display:inline-block;transform-origin:0 100%}
.net{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:calc(var(--net-on,0) * var(--net-max,1));transition:opacity 1.4s;mask-image:linear-gradient(90deg,#00000055 0%,#000 48%),linear-gradient(180deg,#000 70%,transparent);mask-composite:intersect}
@keyframes word-in{from{translate:0 115%;rotate:7deg;opacity:0}}

/* Spotlight: soft orange light follows the pointer inside every card (vars set by motion.js) */
.card{position:relative;overflow:clip}
.card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(20rem circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--deco) 30%,transparent),transparent 65%)}
.card>*{position:relative}

/* Process steps: a glowing line draws itself between the cards as you scroll */
.steps{position:relative;isolation:isolate}
@media (min-width:56em){
  .steps::before{content:"";position:absolute;z-index:-1;left:12%;right:12%;top:3.6rem;height:4px;border-radius:4px;
    background:linear-gradient(90deg,var(--deco),var(--orange));box-shadow:0 0 1.2rem var(--deco);transform-origin:0 50%}
  /* 4 steps (e.g. AI for Strategy's "How to Run" section) would otherwise wrap to a lone 4th card on
     its own row, leaving the line connecting only the first 3 — force one straight row of 4 instead. */
  .steps:has(>:nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
  .steps:has(>:nth-child(4):last-child)>li{grid-column:span 1}
}

@media (prefers-reduced-motion:no-preference){
  .hero h1 .w>span{animation:word-in .8s var(--spring) both;animation-delay:calc(var(--i)*40ms + 40ms)}   /* kept short: this is the LCP element */
  @supports (animation-timeline:view()){
    @media (min-width:56em){.steps::before{scale:0 1;animation:progress linear both;animation-timeline:view();animation-range:entry 25% cover 40%}}
  }
}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  .card{transition:transform .5s var(--spring),box-shadow .35s}
  .card.tilting{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
  .card:hover{scale:1.035;box-shadow:var(--raise),0 1.5rem 3rem -1rem color-mix(in srgb,var(--deco) 45%,transparent)}
  .card:hover::before{opacity:1}
  .card.tilting{transition:transform .08s linear,box-shadow .35s}
  .btn{translate:var(--tx,0) var(--ty,0);transition:translate .25s var(--ease-out),box-shadow .2s,transform .2s}
}
.burst{position:fixed;inset:0;z-index:300;width:100%;height:100%;pointer-events:none}

/* ---------- Motion: scroll-driven reveal (CSS only), skipped for reduced motion ---------- */
@media (prefers-reduced-motion:no-preference){
}
/* Theme wipe circle (see site.js): fixed, GPU-composited, ring in brand orange */
.wipe{position:fixed;z-index:200;border-radius:50%;background:var(--surface);pointer-events:none;will-change:transform,opacity;
  box-shadow:0 0 0 .4rem var(--deco),0 0 4rem 1rem color-mix(in srgb,var(--deco) 50%,transparent)}
html.swapping .glass,html.swapping .site-header{backdrop-filter:none!important}
html.swapping *,html.swapping *::before,html.swapping *::after{animation-play-state:paused!important;transition:none!important}
@keyframes rise{from{opacity:0;translate:0 2rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Emphasised brand/NLP terms in body text: heavier weight + full-strength ink (no underline/highlight — that reads as a link) */
p strong,li strong{color:var(--ink);font-weight:700}

/* Hero stat card is see-through so the living network (and its glowing hub) shows through the glass */
.stats.glass{background:color-mix(in srgb,var(--surface) 34%,transparent);backdrop-filter:blur(5px) saturate(1.6)}
/* Single-column layouts have copy over the whole hero: keep the aurora softer so text stays crisp */
@media (max-width:55.99em){.net{--net-max:.55}}
/* Over the orange aurora the neumorphic white highlight shadow reads as a milky halo — use a single soft
   coloured drop shadow instead, so the glass sits on the animation rather than glowing white around it. */
.stats.glass{box-shadow:0 1.4rem 3rem -1.2rem color-mix(in srgb,var(--ink) 45%,transparent),inset 0 1px 1px light-dark(#ffffffcc,#ffffff26),inset 0 0 0 1px light-dark(#ffffff80,#ffffff14)}

/* ---------- Buttons = neumorphism, in brand colour ----------
   Convex soft-UI: light edge top-left, dark edge bottom-right, surface subtly curved; pressed = concave (inset).
   Gradient only darkens away from the exact brand orange, so text contrast never drops below the AA-verified pair. */
.btn{background:linear-gradient(145deg,var(--orange),color-mix(in srgb,var(--orange) 86%,#000));
  box-shadow:7px 7px 16px var(--lo),-7px -7px 16px var(--hi),inset 1px 1px 1px #ffffff40,inset -1px -1px 2px #00000026;
  transition:box-shadow .25s,translate .25s var(--ease-out),scale .2s}
.btn::after{display:none}                                  /* no glossy shine — flat soft-UI */
.btn:hover{transform:none;box-shadow:9px 9px 20px var(--lo),-9px -9px 20px var(--hi),inset 1px 1px 1px #ffffff40,inset -1px -1px 2px #00000026}
.btn:active{scale:.985;background:linear-gradient(145deg,color-mix(in srgb,var(--orange) 86%,#000),var(--orange));
  box-shadow:inset 5px 5px 11px color-mix(in srgb,var(--orange) 55%,#000),inset -4px -4px 9px color-mix(in srgb,var(--orange) 80%,#fff)}
.btn.ghost{background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 90%,#fff),color-mix(in srgb,var(--surface) 94%,var(--lo)));color:var(--ink);
  box-shadow:7px 7px 16px var(--lo),-7px -7px 16px var(--hi),inset 1px 1px 1px color-mix(in srgb,var(--hi) 80%,transparent)}
.btn.ghost:hover{box-shadow:9px 9px 20px var(--lo),-9px -9px 20px var(--hi),inset 1px 1px 1px color-mix(in srgb,var(--hi) 80%,transparent)}
.btn.ghost:active{background:var(--surface);box-shadow:var(--press)}

/* ---------- Floating back-to-top (bottom-left, every screen size) ---------- */
.top-fab{position:fixed;left:max(1rem,env(safe-area-inset-left));bottom:max(1rem,env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;
  height:3.5rem;border-radius:99px;overflow:hidden;color:var(--ink);text-decoration:none;
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 90%,#fff),color-mix(in srgb,var(--surface) 94%,var(--lo)));box-shadow:var(--raise);
  opacity:0;visibility:hidden;pointer-events:none;translate:0 1.5rem;scale:.7;transform-origin:0 100%;
  transition:opacity .3s,translate .5s var(--spring),scale .5s var(--spring),box-shadow .25s,visibility 0s .3s}
.top-fab.show{opacity:1;visibility:visible;pointer-events:auto;translate:0;scale:1;transition-delay:0s}
.top-fab:active{box-shadow:var(--press)}
.top-fab .ico{position:relative;display:grid;place-items:center;flex:none;width:3.5rem;height:3.5rem}
.top-fab .ring{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg}
.top-fab circle{fill:none;stroke-width:3}
.top-fab .track{stroke:color-mix(in srgb,var(--ink) 12%,transparent)}
.top-fab .prog{stroke:var(--orange);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--deco) 70%,transparent))}
@supports (animation-timeline:scroll()){.top-fab .prog{animation:ring-fill linear both;animation-timeline:scroll(root)}}
@keyframes ring-fill{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.top-fab .mark{width:1.65rem;height:1.65rem;overflow:visible}
.top-fab .link{stroke:var(--ink);stroke-width:2;opacity:.6;fill:none}
.top-fab .hub{fill:var(--orange);stroke:none}
.top-fab .node{fill:var(--surface);stroke:var(--ink);stroke-width:2.5}
.top-fab .hub{transform-box:fill-box;transform-origin:center;transition:transform .45s var(--spring)}
.top-fab .lbl{max-width:0;padding-inline-end:0;opacity:0;white-space:nowrap;font:500 .95rem var(--f-ui);transition:max-width .45s var(--ease-out),opacity .25s,padding .45s var(--ease-out)}
.top-fab.go .hub{animation:launch .75s ease-in}
@keyframes launch{0%{transform:none}40%{transform:translateY(-1.4rem) scale(.5);opacity:0}41%{transform:translateY(1.4rem) scale(.5);opacity:0}100%{transform:none;opacity:1}}
@media (hover:hover){
  .top-fab:hover .lbl,.top-fab:focus-visible .lbl{max-width:9rem;opacity:1;padding-inline-end:1.4rem}
  .top-fab:hover .hub{transform:translateY(-3px) scale(1.25)}
}
@media (prefers-reduced-motion:reduce){.top-fab.go .hub{animation:none}}

/* Taps never trigger double-tap-to-zoom (a zoomed page looks like "lost responsiveness") */
a,button,summary,.top-fab{touch-action:manipulation}
/* While the back-to-top jump runs, park everything that repaints per frame so the scroll stays smooth on phones */
html.jumping .glass,html.jumping .site-header{backdrop-filter:none!important}
html.jumping *,html.jumping *::before,html.jumping *::after{animation-play-state:paused!important;transition:none!important}
html.jumping .top-fab,html.jumping .top-fab *{transition:revert!important}

/* Generic (Markdown) pages: breathing room under the page title */
.prose h1{margin-bottom:.6em}
.prose>h1+p{font-size:1.15rem}

/* ---------- Parallax: "The 3-Step Process" ----------
   Four depth layers move at different speeds while the section scrolls through the viewport:
   far (soft orange orbs, slow) → mid (big brand mark, drifts + turns) → near (small nodes, fast). Cards stay put for legibility. */
.plx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:clip}
.plx>*{position:absolute;display:block}
.plx .orb{border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--deco) 40%,transparent),transparent 68%)}
.plx .o1{width:min(34rem,90vw);aspect-ratio:1;left:-12%;top:4%}
.plx .o2{width:min(30rem,80vw);aspect-ratio:1;right:-10%;bottom:-2%}
.plx .mark{width:min(30rem,70vw);right:3%;top:12%;fill:none;stroke:var(--ink);stroke-width:1.4;opacity:.16}
.plx .mark circle{fill:var(--surface)}
.plx .mark .hub{fill:var(--deco);stroke:none;opacity:.9}
.plx .dot{width:1rem;aspect-ratio:1;border-radius:50%;background:var(--deco)}
.plx .d1{left:9%;top:22%}
.plx .d2{right:14%;top:58%;width:.7rem;opacity:.7}
.plx .d3{left:46%;bottom:12%;width:1.3rem;background:none;border:3px solid var(--deco);opacity:.6}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .plx>*{animation:plx linear both;animation-timeline:view();animation-range:cover}
    .plx .o1{--a:-9rem;--b:9rem}
    .plx .o2{--a:11rem;--b:-11rem}
    .plx .mark{animation-name:plx-turn}
    .plx .d1{--a:18rem;--b:-18rem}
    .plx .d2{--a:26rem;--b:-26rem}
    .plx .d3{--a:-14rem;--b:14rem}
    @keyframes plx{from{translate:0 var(--a)}to{translate:0 var(--b)}}
    @keyframes plx-turn{from{translate:0 7rem;rotate:-28deg}to{translate:0 -7rem;rotate:28deg}}
  }
}

/* Closing CTA band: two buttons centred, stacking full-width on phones */
.cta-actions{justify-content:center}
.cta-band .cta-note{margin-top:1rem}
@media (max-width:30em){.cta-actions .btn{width:100%}}

/* Without JavaScript the floating button can't auto-hide, so it simply stays visible */
html:not(.js) .top-fab{opacity:1;visibility:visible;pointer-events:auto;translate:0;scale:1}

/* Stat rows: number + descriptor sit on one line when they fit, otherwise the whole descriptor drops below (never splits a phrase) */
.stats strong{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .7rem}

/* ---------- Legal pages (privacy, cookies, disclaimer, terms) ---------- */
.legal-hero{padding-block:clamp(2rem,6vw,4rem) clamp(1.5rem,4vw,2.5rem)}
.legal-hero h1{font-size:clamp(2rem,1.2rem + 3.4vw,3.4rem);margin:.4rem 0 1rem;max-width:20ch}
.legal-hero .lede{max-width:46rem;color:var(--muted);margin-bottom:1.25rem}
.crumbs{margin-bottom:1.25rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.25rem .6rem;font:400 .85rem var(--f-ui);color:var(--muted)}
.crumbs li+li::before{content:"›";margin-inline-end:.6rem;opacity:.6}
.crumbs a{color:inherit}
.crumbs [aria-current]{color:var(--ink);font-weight:500}
.legal-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;font:400 .85rem var(--f-ui);color:var(--muted)}
.legal-meta li{display:flex;align-items:center;gap:.4rem}
.legal-meta li+li::before{content:"";width:.3rem;height:.3rem;border-radius:50%;background:var(--deco)}
.legal-body{display:grid;gap:1.5rem;padding-block:clamp(1.5rem,4vw,3rem) 1rem;align-items:start}
@media (min-width:64em){.legal-body{grid-template-columns:17rem minmax(0,1fr);gap:3rem}.toc{position:sticky;top:7rem}}
.toc{padding:1.1rem 1.25rem}
.toc summary{padding:0;font:700 1rem var(--f-h2);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.toc summary::after{content:none}
.toc details,.toc details[open]{box-shadow:none;background:none}
.toc ol{display:grid;gap:.1rem;margin-top:.75rem;font:400 .9rem/1.35 var(--f-ui);counter-reset:t}
.toc li{counter-increment:t}
.toc a{display:flex;gap:.6rem;padding:.35rem .5rem;border-radius:.6rem;text-decoration:none;color:var(--muted);transition:color .2s,background .2s}
.toc a::before{content:counter(t,decimal-leading-zero);flex:none;font-weight:500;color:var(--deco)}
.toc a:hover,.toc a.on{color:var(--ink);background:color-mix(in srgb,var(--orange) 10%,transparent)}
.toc a.on{font-weight:500}
.legal-prose{max-width:46rem}
.legal-prose p,.legal-prose li{color:color-mix(in srgb,var(--ink) 88%,var(--surface))}
.legal-intro{font-size:1.2rem;line-height:1.6;padding-inline-start:1rem;border-inline-start:4px solid var(--deco);margin-bottom:2rem}
.legal-prose h2{margin:2.6rem 0 .8rem;padding-top:1.4rem;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);scroll-margin-top:6.5rem}
.legal-prose h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.legal-prose code{padding:.1em .4em;border-radius:.4em;background:color-mix(in srgb,var(--ink) 8%,transparent);font:500 .9em ui-monospace,Menlo,Consolas,monospace}
@media print{
  .site-header,.site-footer,.top-fab,.toc,.net,.aura::before{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .legal-prose a{color:#000;text-decoration:underline}
  .legal-prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em}
  .legal-prose h2{break-after:avoid}
}

/* ---------- In-text links: always recognisable as links (not only on hover) ----------
   Ink text + a solid orange underline at rest. Orange text would fail contrast on the grey surface, so the colour
   cue lives in the underline; hover fills it with a soft orange tint. Applies to Markdown body text and FAQ answers. */
.prose a:not(.btn):not(.more),details p a,.legal-intro a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--orange);
  text-decoration-thickness:2px;text-underline-offset:.22em;border-radius:.2em;transition:background-color .2s,text-decoration-color .2s}
.prose a:not(.btn):not(.more):hover,details p a:hover,.legal-intro a:hover{background:color-mix(in srgb,var(--orange) 16%,transparent);text-decoration-color:var(--ink)}

/* Footer: the current page's link reads as pressed-in (neumorphic) with an orange dot */
.foot-nav a[aria-current]{display:inline-flex;align-items:center;gap:.5rem;padding-inline:.9rem;margin-inline:-.9rem;border-radius:99px;box-shadow:var(--press);color:var(--ink);font-weight:500;text-decoration:none}
.foot-nav a[aria-current]::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--orange)}

/* ---------- HTML sitemap ---------- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.legal-meta a{color:inherit;text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:.2em}
.sitemap-groups .card{gap:1rem}
.sitemap-groups h2{display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:1.6rem}
.sitemap-groups .count{display:grid;place-items:center;min-width:1.9rem;height:1.9rem;padding-inline:.5rem;border-radius:99px;box-shadow:var(--press);font:500 .8rem var(--f-ui);color:var(--muted)}
.sm-list{display:grid;gap:1rem}
.sm-list li{display:grid;gap:.15rem;align-items:start}
.sm-list a{justify-self:start;font:700 1.1rem/1.3 var(--f-h3);color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:.22em;border-radius:.2em}
.sm-list a:hover{background:color-mix(in srgb,var(--orange) 16%,transparent);text-decoration-color:var(--ink)}
.sm-list a[aria-current]{text-decoration:none;color:var(--ink)}
.sm-list p{margin:0;font-size:.95rem;line-height:1.5;color:var(--muted)}
.here{justify-self:start;padding:.1rem .6rem;border-radius:99px;box-shadow:var(--press);font:500 .75rem var(--f-ui);color:var(--muted)}
.sitemap-prose{max-width:min(90%,64rem);padding-top:0}
.sitemap-prose h2{margin:2.4rem 0 .7rem;font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)}
.sitemap-prose h2:first-child{margin-top:0}
.sitemap-split .pg-split{align-items:center}

/* ---------- Newsletter page ---------- */
.nl-hero{padding-block:clamp(1.75rem,5vw,3.5rem) clamp(2rem,5vw,4rem)}
.nl-grid{display:grid;gap:2rem;align-items:start}
@media (min-width:64em){.nl-grid{grid-template-columns:1.1fr 1fr;gap:3.5rem}}
.nl-copy h1{font-size:clamp(2.1rem,1.2rem + 3.6vw,3.6rem);margin:.5rem 0 1.1rem}
.nl-copy .lede{color:var(--muted);max-width:38rem}
.trust-count{display:flex;align-items:center;gap:1.1rem;padding:1.1rem 1.4rem;margin-top:1.5rem;max-width:34rem}
.nl-trust-num{margin:0;font:700 clamp(2.6rem,6vw,3.6rem)/1 var(--f-h2);color:var(--deco)}
.nl-trust-label{display:grid;gap:.1rem;margin:0}
.nl-trust-label strong{font:700 1.15rem var(--f-h3)}
.nl-trust-label span{font:400 .9rem var(--f-ui);color:var(--muted)}
.trust-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.trust-chips li{padding:.4rem .9rem;border-radius:99px;box-shadow:var(--press);font:500 .85rem var(--f-ui)}
.trust-chips li::before{content:"✓";margin-inline-end:.45rem;color:var(--orange);font-weight:700}
.nl-form{padding:clamp(1.25rem,3vw,2rem)}
@media (min-width:64em){.nl-form{position:sticky;top:6.5rem}}
.center-prose{margin-inline:auto;text-align:center;margin-top:2rem}
.whitelist{max-width:46rem;margin:2.5rem auto 0}
.whitelist h3{margin-bottom:.5rem}
.whitelist p{margin:0;color:var(--muted)}
.nl-privacy{max-width:42rem;margin:2rem auto 0;color:var(--muted)}

/* Topic vote widget */
@property --pct{syntax:"<percentage>";inherits:true;initial-value:0%}
.vote-form{max-width:36rem;margin:1.75rem auto 0;text-align:start}
.vote-form .input--hidden{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.vote-list{display:grid;gap:.7rem;list-style:none;padding:0;margin:0}
.vote-btn{display:block;width:100%;padding:.9rem 1.1rem;border:0;border-radius:1rem;background:var(--surface);color:var(--ink);box-shadow:var(--press);cursor:pointer;text-align:start}
.vote-btn:hover,.vote-btn:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.vote-btn[aria-pressed="true"]{outline:3px solid var(--orange);outline-offset:2px}
.vote-row{display:flex;justify-content:space-between;gap:1rem;font:500 .98rem var(--f-ui)}
.vote-pct{color:var(--muted);font-variant-numeric:tabular-nums}
.vote-bar{display:block;height:.4rem;margin-top:.55rem;border-radius:99px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:clip;transition:--pct .5s ease}
.vote-bar::after{content:"";display:block;height:100%;width:var(--pct);border-radius:inherit;background:var(--orange)}
.vote-note{margin:.9rem 0 0;color:var(--muted);font-size:.9rem;text-align:center}
.vote-reset{margin:.4rem 0 0;text-align:center}
.link-btn{border:0;background:none;padding:0;color:var(--muted);font:500 .85rem var(--f-ui);text-decoration:underline;cursor:pointer}
.link-btn:hover,.link-btn:focus-visible{color:var(--ink)}

/* Brevo form — fully restyled (Brevo's own stylesheet is not loaded: 59 KB we don't need) */
.brevo-title{font:700 1.7rem/1.15 var(--f-h2);margin-bottom:.4rem}
.brevo-sub{margin:0 0 1.25rem;color:var(--muted);font-size:.98rem}
.brevo .sib-form-block{margin-bottom:1rem}
.brevo .entry__label{display:block;margin-bottom:.4rem;font:500 .9rem var(--f-ui)}
.brevo .entry__label[data-required]::after{content:" *";color:var(--orange-text)}
.brevo .input{width:100%;min-height:3rem;padding:.7rem 1.1rem;border:0;border-radius:1rem;background:var(--surface);color:var(--ink);font:400 1rem var(--f-body);box-shadow:var(--press)}
.brevo .input::placeholder{color:color-mix(in srgb,var(--ink) 45%,transparent)}
.brevo .input:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.brevo .entry__error{display:none;margin-top:.4rem;padding:.4rem .7rem;border-radius:.6rem;border-inline-start:4px solid var(--orange);background:color-mix(in srgb,var(--orange) 12%,transparent);font:400 .85rem var(--f-ui)}
.brevo .entry__error:not(:empty){display:block}
.brevo .entry__choice label{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;font:400 .88rem/1.45 var(--f-ui);color:var(--muted)}
.brevo .input_replaced{position:absolute;opacity:0;width:1.4rem;height:1.4rem}
.brevo .checkbox{flex:none;display:grid;place-items:center;width:1.4rem;height:1.4rem;margin-top:.1rem;border-radius:.4rem;background:var(--surface);box-shadow:var(--press)}
.brevo .input_replaced:checked+.checkbox::after{content:"";width:.7rem;height:.4rem;margin-top:-.15rem;border:solid var(--orange);border-width:0 0 3px 3px;rotate:-45deg}
.brevo .input_replaced:focus-visible+.checkbox{outline:3px solid var(--orange);outline-offset:2px}
.brevo .sib-form-block__button{width:100%;margin-top:.25rem}
.brevo .sib-form-block__button svg{width:1.1rem;height:1.1rem;fill:currentColor;animation:spin 1s linear infinite}
.brevo .sib-hide-loader-icon{display:none}
.brevo .sib-form-block__button-disabled{opacity:.6;pointer-events:none}
@keyframes spin{to{rotate:360deg}}
.brevo-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1rem;margin:1rem 0 .6rem;font:500 .8rem var(--f-ui);color:var(--muted)}
.brevo-trust li::before{content:"✓";margin-inline-end:.35rem;color:var(--orange)}
.brevo-legal{margin:0;font:400 .75rem/1.5 var(--f-ui);color:var(--muted)}
.brevo-legal a{color:var(--ink)}
.brevo .input--hidden{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.brevo .g-recaptcha{display:none}
.grecaptcha-badge{visibility:hidden}   /* hidden is allowed because the reCAPTCHA notice is shown in .brevo-legal */
.brevo .sib-form-message-panel{display:none;margin-bottom:1rem;padding:.9rem 1.1rem;border-radius:1rem;border-inline-start:4px solid var(--orange);background:color-mix(in srgb,var(--orange) 12%,transparent);font:400 .95rem/1.5 var(--f-body)}
.brevo .sib-form-message-panel--active{display:block}
.brevo .sib-form-message-panel__text{display:flex;gap:.7rem;align-items:flex-start}
.brevo .sib-icon{flex:none;width:1.4rem;height:1.4rem;fill:none;stroke:var(--orange);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.brevo .sib-form-block__button svg{animation:none}}

/* Brand header inside the signup card */
.brevo-brand{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem;font:700 1.05rem var(--f-h2);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.brevo-brand svg{width:1.9rem;height:1.9rem}
.brevo-brand .l{stroke:var(--ink);stroke-width:2;opacity:.6;fill:none}
.brevo-brand .h{fill:var(--logo-orange)}
.brevo-brand .n{fill:var(--surface);stroke:var(--ink);stroke-width:2.5}

/* Notice inside the signup card: where the emails come from + confirm + spam folder */
.brevo-notice{display:flex;gap:.75rem;align-items:flex-start;margin:0 0 1rem;padding:.8rem 1rem;border-radius:1rem;border-inline-start:4px solid var(--orange);box-shadow:var(--press);background:color-mix(in srgb,var(--orange) 8%,transparent)}
.brevo-notice svg{flex:none;width:1.4rem;height:1.4rem;margin-top:.15rem;fill:none;stroke:var(--orange);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.brevo-notice p{margin:0;font:400 .88rem/1.5 var(--f-body);color:var(--muted)}
.brevo-notice strong,.brevo .sib-form-message-panel strong{color:var(--ink);font-weight:700}

/* Phones: lede → trust marker → the form (above the fold-ish) → reassurance chips. Desktop keeps copy left / form right. */
@media (max-width:63.99em){
  .nl-copy{display:contents}
  .nl-grid .trust-count{order:4;margin-top:.25rem}
  .nl-grid .nl-form{order:5}
  .nl-grid .trust-chips{order:6;margin-top:0}
}

/* Long unbreakable strings (the sender email) must never stretch a grid track or panel wider than the screen */
.nl-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:64em){.nl-grid{grid-template-columns:1.1fr 1fr}}
.brevo .sib-form-message-panel,.brevo-notice{overflow-wrap:anywhere}

/* ---------- Performance pass ----------
   Scroll-reveals are one-time (IntersectionObserver adds .in) instead of ~100 live scroll timelines.
   While the page is scrolling, expensive backdrop effects pause (html.scrolling) and return when it settles. */
html.scrolling .glass{backdrop-filter:none!important}
/* Touch devices: no backdrop blur at all. Blurring what is behind a card means re-blurring it on every scroll frame, which is the single most
   expensive thing a phone GPU does here; the card is already 90% opaque, so it still reads as frosted glass. Also means no pop when scrolling starts/stops. */
@media (hover:none),(pointer:coarse){
  .glass,.stats.glass{backdrop-filter:none;background:color-mix(in srgb,var(--surface) 90%,transparent)}
  .stats.glass{background:color-mix(in srgb,var(--surface) 50%,transparent)}
}
@media (prefers-reduced-motion:no-preference){
  html.js .reveal:not(.in){opacity:0;translate:0 2rem}
  html.js .reveal.in{animation:rise .7s var(--ease-out) both}
  html.js .cards>.reveal.in:nth-child(3n+2){animation-delay:.08s}
  html.js .cards>.reveal.in:nth-child(3n){animation-delay:.16s}
  html.js h2:has(.w):not(.in) .w>span,html.js h3.sect:not(.in) .w>span{opacity:0;translate:0 115%}
  html.js h2.in .w>span,html.js h3.sect.in .w>span{animation:word-in .7s var(--spring) both;animation-delay:calc(var(--i)*35ms)}
}

/* ---------- AI for Strategy archive + guides ---------- */
.archive-hero h1{max-width:24ch}
.archive-hero .actions{margin-top:1.5rem}
.filters{display:grid;gap:.6rem;margin:1.5rem 0 2rem}
.filter-label{margin:.4rem 0 0;font:500 .8rem var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.chip-row{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;min-height:2.5rem;padding:.4rem 1rem;border:0;border-radius:99px;background:var(--surface);color:var(--ink);box-shadow:var(--raise);font:500 .88rem var(--f-ui);cursor:pointer}
.chip span{padding:.05rem .45rem;border-radius:99px;box-shadow:var(--press);font-size:.75rem;color:var(--muted)}
button.chip:hover{box-shadow:7px 7px 14px var(--lo),-7px -7px 14px var(--hi)}
.chip.on{box-shadow:var(--press);color:var(--ink);font-weight:700}
.chip.on::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--orange)}
li.chip{cursor:default;box-shadow:var(--press);color:var(--muted)}

/* "A Client Base Spread Across N Countries" (service pages) */
.reach-globe{width:.85em;height:.85em;margin-right:.1em;fill:none;stroke:var(--orange);stroke-width:1.6;vertical-align:-.08em}
.reach .lede{max-width:46rem}
.reach-countries{margin-top:1.75rem}
.reach-industries{margin-top:.75rem}
.chip.country{border:2px solid color-mix(in srgb,var(--orange) 55%,transparent);background:color-mix(in srgb,var(--orange) 10%,var(--surface));color:var(--orange-text);font-weight:700}
.reach-industries .chip{min-height:2.1rem;padding:.3rem .85rem;font-size:.82rem}

/* Pricing (service pages' "Two Ways to Work With Me") */
.pricing .card{position:relative}
.pricing .card.featured{border:2px solid color-mix(in srgb,var(--orange) 45%,transparent)}
.pricing .tier-type{margin:0;font:600 .72rem var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.price-row{display:flex;align-items:baseline;gap:.4rem;margin:.2rem 0 0}
.price-amt{font:700 2.6rem/1 var(--f-h2);color:var(--ink)}
.price-note{color:var(--muted);font-size:.85rem}
.pricing .tagline{color:var(--muted);margin:.3rem 0 0}
.pricing-callout{margin:.85rem 0 0;padding:.75rem 1rem;border-radius:12px;background:color-mix(in srgb,var(--orange) 14%,var(--surface));border-left:3px solid var(--orange);font:600 .85rem/1.5 var(--f-ui);color:var(--ink)}
.fit-list{list-style:none;margin:.3rem 0 0;padding:0;display:grid;gap:.3rem;font-size:.85rem}
.fit-list.features li::before{content:"— "}
.fit-list.yes li::before{content:"✓ ";color:var(--orange);font-weight:700}
.fit-list.no li::before{content:"✕ ";color:var(--muted)}
.fit-h{margin:.9rem 0 0;font:600 .75rem var(--f-ui);text-transform:uppercase;letter-spacing:.04em}
.fit-h.good{color:var(--orange-text)}
.fit-h.bad{color:var(--muted)}
.pricing .actions{margin-top:auto;padding-top:.9rem}
.pricing-scope-note{margin-top:2rem;color:var(--orange-text);font-size:.85rem;max-width:42rem;margin-inline:auto}
.pricing-disclaimer{margin-top:.6rem;color:var(--muted);font-size:.85rem;font-style:italic;max-width:42rem;margin-inline:auto}
.pricing-neumorphic-note{margin:1.5rem auto 0;padding:1rem 1.5rem;border-radius:var(--radius);box-shadow:var(--raise);text-align:center;font:700 .9rem/1.5 var(--f-ui);color:var(--ink)}
.pricing-neumorphic-note em{font-style:italic}

/* "Same Page, Two Diagnoses" (service pages) — pure-CSS radio tabs, no JS */
.diagnosis .lede{max-width:40rem;margin-inline:auto}
.diag-tabs{margin-top:2rem}
.diag-switch{display:flex;justify-content:center;gap:.6rem;margin-bottom:1.5rem;flex-wrap:wrap}
.diag-switch label{cursor:pointer;padding:.65rem 1.4rem;border-radius:99px;box-shadow:var(--raise);font:600 .85rem var(--f-ui);color:var(--muted);transition:box-shadow .25s,color .25s}
.diag-tabs:has(#diag-agency:checked) .diag-switch label[for="diag-agency"],
.diag-tabs:has(#diag-mine:checked) .diag-switch label[for="diag-mine"]{box-shadow:var(--press);color:var(--orange-text)}
.diag-card{max-width:38rem;margin-inline:auto;display:flex;flex-direction:column;gap:1rem}
.diag-panel-mine{display:none}
.diag-tabs:has(#diag-mine:checked) .diag-panel-agency{display:none}
.diag-tabs:has(#diag-mine:checked) .diag-panel-mine{display:flex}
.diag-sample{font:600 1rem/1.4 var(--f-ui);padding:1rem 1.2rem;border-radius:16px;box-shadow:var(--press);background:color-mix(in srgb,var(--surface) 92%,var(--ink) 3%);margin:0}
.diag-meta{display:block;margin-top:.5rem;color:var(--muted);font-size:.85rem;font-weight:500}
.diag-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.9rem}
.diag-list.agency li{color:var(--muted)}
.diag-list.agency li::before{content:"✓ ";color:var(--orange);font-weight:700}
.diag-list.mine li{color:var(--ink)}
.diag-list.mine li::before{content:"→ ";color:var(--orange);font-weight:700}
.diag-verdict{margin:0;font-weight:700;color:var(--ink)}

/* "One Last Thing" PAS gut-check (service pages, after FAQ) — full-bleed section, text fills it instead of sitting boxed in the middle */
.provoke-wrap{width:calc(100% - 2*var(--gutter));margin-inline:auto}
.provoke-h{font:700 clamp(2rem,1.3rem + 3vw,3.6rem)/1.15 var(--f-h2);max-width:56rem;margin-inline:auto}
.provoke-prose{max-width:52rem;margin:2rem auto 0}
.provoke-prose p{font-size:clamp(1.05rem,.95rem + .4vw,1.2rem);line-height:1.65}
.provoke-prose p:not(:last-child){margin-bottom:1.1rem}
.provoke .actions{margin-top:2rem}
.domain{margin-top:2.5rem}
.domain-h{font:700 clamp(1.5rem,1.2rem + 1.2vw,2rem)/1.15 var(--f-h2)}
.domain-desc{max-width:42rem;margin:.4rem 0 1.25rem;color:var(--muted)}
.post-card h3{font-size:1.25rem}
.post-card h3 a{text-decoration:none}
.post-badges{display:flex;flex-wrap:wrap;gap:.4rem}
.badge{padding:.15rem .65rem;border-radius:99px;box-shadow:var(--press);font:500 .72rem var(--f-ui);letter-spacing:.04em;color:var(--muted)}
.badge.format{color:var(--ink);background:color-mix(in srgb,var(--orange) 12%,transparent)}
.post-meta{margin-top:auto!important;font:400 .8rem var(--f-ui);color:var(--muted)}
.empty-state{max-width:44rem;margin:1.5rem auto 0;text-align:center}
.empty-state p{color:var(--muted)}
.empty-state a{color:var(--ink)}
.coming-label{margin:1.25rem 0 .6rem!important;font:500 .8rem var(--f-ui);letter-spacing:.12em;text-transform:uppercase}
.empty-state .chip-row{justify-content:center}
.faq-list.in-prose{max-width:none;margin:1rem 0 0}
.author-box{margin-top:2.5rem;max-width:46rem;padding:clamp(1.25rem,3vw,2rem)}
.author-box p{margin:.4rem 0 0;color:var(--muted)}
.prose pre{margin:1.25rem 0;padding:1.1rem 1.25rem;overflow-x:auto;border-radius:1rem;background:var(--surface);box-shadow:var(--press);font:400 .88rem/1.6 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word}
.prose pre code{padding:0;background:none;font:inherit}
.legal-prose h3{margin:1.6rem 0 .5rem}
.legal-prose ul{margin:0 0 1.25em}
.legal-prose li{margin-bottom:.5rem}

/* Contact page: email + Telegram cards, location card, link cards */
.contact-cards{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));max-width:56rem;margin:2rem auto 0}
.contact-card{display:grid;align-content:start;gap:.6rem;padding:clamp(1.4rem,3vw,2.2rem)}
.contact-card h3{margin:0;font-size:clamp(1rem,.85rem + .9vw,1.35rem);overflow-wrap:anywhere}
.contact-card p{margin:0;color:var(--muted)}
.contact-card .actions{margin-top:.8rem}
.c-ico{width:3rem;height:3rem;fill:none;stroke:var(--deco);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.copy-status{min-height:1.2em;font:500 .85rem var(--f-ui);color:var(--orange-text)}
.place-card{display:flex;gap:1.5rem;align-items:center;max-width:46rem;margin:1.5rem auto 0;padding:clamp(1.25rem,3vw,2rem)}
.place-card .c-ico{flex:none;width:3.5rem;height:3.5rem}
.place-card p{margin:0 0 .6rem}
.place-address{margin:0 0 .6rem;font:600 1.05rem var(--f-ui);font-style:normal;color:var(--ink)}
.place-link a{font-weight:600}
.place-link span{display:block;margin-top:.3rem;font:400 .8rem var(--f-ui);color:var(--muted)}
.sect-lede{max-width:44rem;margin:.5rem auto 0;color:var(--muted)}
.link-card h3{overflow-wrap:anywhere}
.link-host{font:400 .85rem var(--f-ui);color:var(--muted)}
.contact-body{grid-template-columns:minmax(0,1fr)}
.contact-body .legal-prose{max-width:min(90%,64rem);margin-inline:auto}
.contact-body .pg-split{align-items:center}
.contact-body .pg-split .legal-prose{max-width:none;margin:0}
.inc-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
@media (max-width:40em){.place-card{flex-direction:column;align-items:flex-start}}

/* Archive hero: framework constellation (rings turn, chips float, hover/focus/tap opens a rich tooltip) */
.hero-grid{display:grid;gap:2rem 3rem;align-items:center}
.hero-grid .crumbs{grid-column:1/-1}
@media (min-width:64em){.hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.fw-orbit{position:relative;justify-self:center;width:min(100%,30rem);aspect-ratio:1/1.12}
.fw-ring{position:absolute;inset:14%;border:2px dashed color-mix(in srgb,var(--deco) 45%,transparent);border-radius:50%}
.fw-ring.r2{inset:30%;border-style:solid;border-color:color-mix(in srgb,var(--ink) 14%,transparent)}
.fw-ring::after{content:"";position:absolute;top:-.4rem;left:50%;width:.8rem;height:.8rem;margin-left:-.4rem;border-radius:50%;background:var(--deco);box-shadow:0 0 14px var(--deco)}
.fw-core{position:absolute;inset:50% auto auto 50%;display:grid;place-items:center;width:3.6rem;height:3.6rem;translate:-50% -50%;border-radius:50%;background:var(--surface);box-shadow:var(--raise),0 0 0 .5rem color-mix(in srgb,var(--deco) 16%,transparent);font:800 1.15rem var(--f-h2);color:var(--orange)}
.fw-list{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.fw{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;width:max-content;max-width:46%;z-index:1}
.fw-chip{display:block;width:100%;padding:.55rem .9rem;border:0;border-radius:99px;background:var(--surface);color:var(--ink);box-shadow:var(--raise);font:600 .82rem/1.25 var(--f-ui);text-align:center;text-decoration:none;cursor:pointer}
.fw-chip span{color:var(--orange-text)}
.fw-chip:hover,.fw-chip:focus-visible{box-shadow:var(--press);color:var(--ink)}
/* Hero orbit chips are ambient decoration, not controls (The Full Framework Map below is the one
   clickable/hoverable index) — pointer-events:none means they can't be hovered, focused or clicked
   at all, so the shared .fw-chip:hover "press" state above never fires on them. */
.fw-orbit .fw-chip{cursor:default;pointer-events:none}
.fw-tip{position:absolute;top:100%;width:min(17rem,78vw);padding-top:.55rem;visibility:hidden;opacity:0;translate:0 -.35rem;transition:opacity .2s,translate .2s,visibility .2s}
.fw-tip>*{position:relative}
.fw-tip::before{content:"";position:absolute;inset:.55rem 0 0;border-radius:1.1rem;background:var(--surface);box-shadow:var(--raise),0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent)}
.fw-tip p{margin:0;padding:0 1.1rem;font:400 .85rem/1.45 var(--f-body);color:var(--muted)}
.fw-tip .fw-tip-h{padding-top:1rem;font:700 1rem/1.25 var(--f-h2);color:var(--ink)}
.fw-tip p+p{margin-top:.5rem}
.fw-tip b{display:block;font:600 .7rem var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--orange-text)}
.fw-tip .fw-tip-s{padding-bottom:1rem;font:500 .75rem var(--f-ui);color:var(--ink)}
.fw-tip .fw-tip-s::before{content:"";display:inline-block;width:.5rem;height:.5rem;margin-right:.45rem;border-radius:50%;background:var(--deco)}
@media (max-width:30em){.fw-chip{padding:.5rem .65rem;font-size:.74rem}}

/* Vote leaderboard (AI for Strategy page) — read-only, reuses the newsletter vote widget's own
   .vote-row/.vote-label/.vote-pct/.vote-bar (same --pct fill-bar technique), just not clickable here. */
.leaderboard{list-style:none;margin:2rem auto 0;padding:0;max-width:36rem;display:grid;gap:.7rem}
.leaderboard li{padding:.9rem 1.1rem;border-radius:1rem;background:var(--surface);box-shadow:var(--press)}
.leaderboard li:first-child{outline:3px solid var(--orange);outline-offset:2px}

/* Full framework map (AI for Strategy page) — every CLUSTERS entry as a chip cloud, reusing the hero
   orbit's .fw-chip/.fw-tip (not .fw-orbit's absolute positioning: these just wrap in a flex row). */
/* .aura sections clip overflow + isolate their own stacking context (needed so the background gradient
   never bleeds into neighboring sections) — which also means an open tooltip from the bottom chip row
   has nowhere to extend into and gets clipped by this section's own edge. Extra block padding gives
   every tooltip room to render fully INSIDE this section's box, so it never needs to escape it. */
.fw-map-section{padding-block:calc(clamp(3rem,8vw,6rem) + 100px)}
.fwc-list{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem .7rem;list-style:none;margin:2rem auto 0;padding:0;max-width:64rem}
/* z-index:0 baseline (not the default auto) so every chip is its own stacking context, and the
   instant one opens, every OTHER one is explicitly pushed behind it (-1) rather than just left at a
   lower-but-still-positive 0 — a wide chip in the row below can be tall/wide enough that "0 vs 5"
   alone still lets a sliver of its text render past the open tooltip's exact edge; this closes that. */
.fwc{position:relative;z-index:0}
.fwc:hover,.fwc:focus-within{z-index:5}
.fwc-list:has(.fwc:hover) .fwc:not(:hover),
.fwc-list:has(.fwc:focus-within) .fwc:not(:focus-within){z-index:-1}
.fwc .fw-tip{left:50%;width:min(15rem,72vw);translate:-50% -.35rem;z-index:2}
.fwc:hover .fw-tip,.fwc:focus-within .fw-tip{visibility:visible;opacity:1;translate:-50% 0}
.fwc.featured .fw-chip{background:var(--orange);color:#fff;box-shadow:var(--raise),0 0 0 .25rem color-mix(in srgb,var(--orange) 25%,transparent)}
.fwc.featured .fw-chip:hover,.fwc.featured .fw-chip:focus-visible{box-shadow:var(--press)}
.fwc.featured .fw-chip span{color:inherit}
@media (prefers-reduced-motion:no-preference){
  .fw-ring.r1{animation:spin 70s linear infinite}
  .fw-ring.r2{animation:spin 48s linear infinite reverse}
  .fw-core{animation:core-pulse 3.2s ease-in-out infinite}
  .fw-chip{animation:rise .7s var(--ease-out) both calc(var(--n)*90ms),fw-float 7s ease-in-out infinite calc(var(--n)*-1.3s)}
  .fw-orbit:hover .fw-chip,.fw-orbit:focus-within .fw-chip,html.scrolling .fw-chip,html.scrolling .fw-ring,html.scrolling .fw-core{animation-play-state:paused}
  @keyframes fw-float{50%{transform:translateY(-.5rem)}}
  @keyframes core-pulse{50%{box-shadow:var(--raise),0 0 0 .95rem color-mix(in srgb,var(--deco) 8%,transparent)}}
}

/* Contact hero: 3D map card (MapLibre canvas fills the card; address overlay sits bottom-left) */
.map-card{position:relative;overflow:hidden;min-height:clamp(20rem,45vw,30rem);padding:0;isolation:isolate}
.map-canvas{position:absolute;inset:0;background:color-mix(in srgb,var(--deco) 8%,var(--surface))}
.map-card .maplibregl-canvas{outline:none}
.map-overlay{position:absolute;left:.9rem;bottom:2.4rem;z-index:2;max-width:min(18rem,calc(100% - 1.8rem));display:grid;gap:.15rem;padding:.75rem 1rem;border-radius:1rem;background:color-mix(in srgb,var(--surface) 95%,transparent);box-shadow:var(--raise);pointer-events:none}
.map-overlay .kicker{font-size:.7rem}
.map-addr{font:600 .95rem/1.3 var(--f-ui);font-style:normal;color:var(--ink)}
.map-osm{pointer-events:auto;justify-self:start;font:500 .8rem var(--f-ui)}
.map-fallback{display:none;position:absolute;inset:0;z-index:1;margin:0;padding:2rem;place-content:center;text-align:center;color:var(--muted)}
.map-fail .map-fallback{display:grid}
.map-fail .map-canvas{visibility:hidden}
.map-pin{display:block;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--deco);box-shadow:0 0 0 .25rem color-mix(in srgb,var(--deco) 35%,transparent),0 .25rem .8rem rgba(0,0,0,.35)}
@media (prefers-reduced-motion:no-preference){.map-pin{animation:map-ping 2.4s ease-out infinite}@keyframes map-ping{70%,100%{box-shadow:0 0 0 1.1rem transparent,0 .25rem .8rem rgba(0,0,0,.35)}}}
.maplibregl-ctrl-group{background:var(--surface)!important;box-shadow:var(--raise)!important}
.maplibregl-ctrl-attrib{font-size:.65rem;max-width:calc(100% - 1rem)}
.maplibregl-ctrl-attrib-inner{white-space:normal}
.maplibregl-ctrl-attrib{background:color-mix(in srgb,var(--surface) 82%,transparent);color:var(--muted)}
.maplibregl-ctrl-attrib a{color:var(--ink)}
:root[data-theme="dark"] .maplibregl-ctrl-icon,:root[data-theme="dark"] .maplibregl-ctrl-attrib-button{filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .maplibregl-ctrl-icon,:root:not([data-theme="light"]) .maplibregl-ctrl-attrib-button{filter:invert(1)}}

/* Contact: audience picker, clocks, QR card, scroll journey */
.aud-picker{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem;margin:1.5rem auto 0;padding:0;border:0;max-width:56rem}
.aud-picker legend{float:left;margin-right:.4rem;padding:0;font:500 .85rem var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.aud-picker .chip{position:relative;cursor:pointer}
.aud-picker input{position:absolute;opacity:0;inset:0;cursor:pointer}
.aud-picker .chip:has(input:checked){box-shadow:var(--press);font-weight:700}
.aud-picker .chip:has(input:checked)::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--orange)}
.aud-picker .chip:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:3px}
.aud-link{flex-basis:100%;text-align:center;font:500 .9rem var(--f-ui)}
.clocks{display:flex;gap:1.5rem;justify-content:space-between;margin:.4rem 0}
.clock{flex:1;margin:0;display:grid;justify-items:center;gap:.4rem}
.clock svg{width:min(100%,8rem);height:auto;overflow:visible}
.clock .face{fill:var(--surface);stroke:color-mix(in srgb,var(--ink) 16%,transparent);stroke-width:2;filter:drop-shadow(4px 4px 6px var(--lo)) drop-shadow(-4px -4px 6px var(--hi))}
.clock.night .face{fill:color-mix(in srgb,var(--ink) 10%,var(--surface))}
.clock .tick{stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.clock .hand{stroke:var(--ink);stroke-linecap:round}
.clock .h{stroke-width:4}.clock .m{stroke-width:3}.clock .s{stroke:var(--deco);stroke-width:1.5}
.clock .pivot{fill:var(--deco)}
.clock figcaption{display:grid;justify-items:center;font:500 .85rem var(--f-ui);color:var(--muted)}
.clock figcaption strong{font:700 .95rem var(--f-ui);color:var(--ink)}
.clock time{font:700 1.25rem var(--f-ui);font-variant-numeric:tabular-nums;color:var(--ink)}
.clock .c-day{font-weight:600;color:var(--ink)}
.clock .c-date{font-size:.8rem}
.clock-diff{font:600 .95rem var(--f-ui)!important;color:var(--ink)!important}
.clock-note{font-size:.85rem}
.take{display:flex;gap:1.1rem;align-items:center}
.take p{font-size:.92rem}
.qr{flex:none;width:9.25rem;height:9.25rem;padding:.7rem;border-radius:1rem;background:#fff;box-shadow:var(--raise)}
@media (max-width:30em){.take{flex-direction:column;align-items:flex-start}}

/* Contact journey: scroll-linked. JS sets --f (0..1 fill) on each step, .on / .done on steps, and moves the travelling dot. Without JS everything shows fully drawn. */
.journey{position:relative;max-width:44rem;margin:2rem auto}
.j-list{display:grid;gap:1.5rem;margin:0;padding:0;list-style:none}
.journey li{position:relative;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:1.1rem;align-items:start}
.journey li::before,.journey li::after{content:"";position:absolute;left:1.5rem;top:3rem;bottom:-1.5rem;width:4px;margin-left:-2px;border-radius:2px}
.journey li::before{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.journey li::after{background:linear-gradient(var(--deco),var(--orange));box-shadow:0 0 12px color-mix(in srgb,var(--deco) 55%,transparent);transform-origin:top;scale:1 var(--f,1);transition:scale .12s linear}
.journey li:last-child::before,.journey li:last-child::after{display:none}
.j-node{position:relative;display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--surface);box-shadow:var(--raise),0 0 0 4px color-mix(in srgb,var(--deco) 22%,transparent);font:800 1.15rem var(--f-h2);color:var(--orange);transition:background .35s,color .35s,box-shadow .35s,scale .45s var(--spring)}
.journey .card{padding:1.1rem 1.4rem;transition:opacity .4s,translate .45s var(--ease-out),box-shadow .4s}
.journey h3{margin:0 0 .3rem;font-size:1.15rem}
.journey p{margin:0;color:var(--muted)}
html.js .journey li:not(.on) .card{opacity:.45;translate:0 .6rem}
html.js .journey li:not(.on) .j-node{box-shadow:var(--press);color:var(--muted)}
.journey li.on .j-node{background:var(--orange);color:var(--on-orange);scale:1.12;box-shadow:var(--raise),0 0 0 5px color-mix(in srgb,var(--deco) 35%,transparent),0 0 22px color-mix(in srgb,var(--deco) 60%,transparent)}
.journey li.on .card{box-shadow:var(--raise),0 0 0 1px color-mix(in srgb,var(--deco) 40%,transparent)}
.journey li.done .j-node{scale:1}
.journey li.done .j-node{color:transparent}
.journey li.done .j-node::after{content:"\2713";position:absolute;inset:0;display:grid;place-items:center;font-size:1.3rem;color:var(--on-orange)}
.j-dot{position:absolute;left:1.5rem;top:0;width:1.25rem;height:1.25rem;margin:-.625rem 0 0 -.625rem;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,var(--deco) 55%);box-shadow:0 0 0 .35rem color-mix(in srgb,var(--deco) 30%,transparent),0 0 24px var(--deco);z-index:2;opacity:0;pointer-events:none;transition:opacity .3s}
.journey.live .j-dot{opacity:1}
@media (prefers-reduced-motion:no-preference){.journey.live .j-dot{animation:dot-pulse 1.8s ease-in-out infinite}@keyframes dot-pulse{50%{box-shadow:0 0 0 .7rem color-mix(in srgb,var(--deco) 8%,transparent),0 0 30px var(--deco)}}}
@media (prefers-reduced-motion:reduce){.journey *,.journey li::after{transition:none!important}}

/* 404: design showcase (canvas background + live code window) */
.nf{position:relative;isolation:isolate;display:grid;align-items:center;min-height:min(46rem,calc(100svh - 7rem));padding-block:clamp(2rem,5vw,4rem)}
.nf-canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.nf-grid{display:grid;gap:2.5rem 3rem;align-items:center}
@media (min-width:64em){.nf-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.nf h1{font-size:clamp(2.2rem,1.2rem + 3.4vw,3.9rem);line-height:1.04;margin:.4rem 0 1rem;max-width:14ch}
.nf .lede{max-width:34rem;color:var(--muted)}
.nf-asked{padding:.1rem .5rem;border-radius:.5rem;box-shadow:var(--press);font-size:.9em;overflow-wrap:anywhere}
.nf-suggest{max-width:30rem;margin:1.25rem 0;padding:1rem 1.25rem}
.nf-suggest ul{display:grid;gap:.45rem;margin:.4rem 0 0;padding:0;list-style:none}
.nf-suggest a{font-weight:700}
.nf-window{margin:0;overflow:hidden;border-radius:1.25rem;background:#15171d;color:#e7e9ee;box-shadow:var(--raise),0 24px 60px rgba(0,0,0,.3);font-family:ui-monospace,Menlo,Consolas,monospace}
.nf-bar{display:flex;align-items:center;gap:.4rem;padding:.7rem 1rem;background:#1d2027}
.nf-bar span{width:.7rem;height:.7rem;border-radius:50%;background:#3a3f4b}
.nf-bar span:first-child{background:#ff8a3d}
.nf-bar strong{margin-left:auto;font:500 .75rem var(--f-ui);color:#a9afbd}
.nf-prompt{margin:0;padding:.9rem 1.1rem .3rem;font-size:.85rem;min-height:2.4rem}
.nf-prompt b{color:#ff8a3d;font-weight:600}
.nf-caret{display:inline-block;width:.55ch;height:1.05em;margin-left:2px;background:#ff8a3d;vertical-align:-.18em}
.nf-code{margin:0;padding:.4rem 1.1rem 1rem;min-height:12.5rem;max-height:19rem;overflow-x:hidden;overflow-y:auto;font:400 .76rem/1.55 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2}
.nf-code code{font:inherit}
.nf-code i{font-style:normal}
.nf-code .c{color:#7d8494}.nf-code .k{color:#ff8a3d}.nf-code .n{color:#e8c39e}
.nf-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;padding:.7rem 1.1rem;background:#1d2027;font:400 .75rem var(--f-ui);color:#a9afbd}
.nf-status .btn{min-height:2.2rem;padding:.3rem 1rem;border:1px solid #3a3f4b;background:#262a33;box-shadow:none;color:#e7e9ee;font-size:.85rem}
.nf-status .btn:hover{border-color:#ff8a3d}
@media (prefers-reduced-motion:no-preference){.nf-caret{animation:nf-blink 1s steps(2) infinite}@keyframes nf-blink{50%{opacity:0}}}

/* ---------- Page images: infographic (4:5), share image (5:4), data chart (5:4) ---------- */
.pg-figs{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;align-items:start}
.pg-fig{margin:0;padding:clamp(.6rem,1.5vw,.9rem);display:grid;gap:.75rem;flex:1 1 24rem}
.pg-fig.tall{max-inline-size:34rem}
.pg-fig.wide{max-inline-size:44rem;flex-basis:32rem}
.pg-open{display:block;border-radius:calc(var(--radius) - .7rem)}
.pg-fig img{inline-size:100%;block-size:auto;border-radius:calc(var(--radius) - .7rem)}
.pg-fig figcaption{font:400 .95rem/1.5 var(--f-ui);color:var(--muted);padding-inline:.4rem;padding-bottom:.3rem}
.pg-save{color:var(--orange-text);font-weight:600;white-space:nowrap}
/* Two-column layout for a section that pairs text with a page image (left/right as written in the template) */
.pg-split{display:grid;gap:2.5rem 3rem;align-items:start}
@media (min-width:64em){
  .pg-split{grid-template-columns:1fr 1fr}
  .pg-sticky{position:sticky;top:7rem}
  .pg-split .pg-fig{max-inline-size:none}
}
.pg-col>h2{margin:0 0 1.25rem}
.pg-split .pg-fig{margin-inline:auto}
.pg-split .faq-list{max-width:none;margin:0}
/* A prose section beside a page image: full column width, no extra top margin on its first heading */
.pg-col.prose{max-width:none}
.pg-col.prose>h2:first-child{margin-top:0}
/* Newsletter: the whitelist note beside its image fills its column instead of centring at 46rem */
.nl-wl{margin-top:2.5rem}
.nl-wl .whitelist{max-width:none;margin:0}
/* A page image on TOP of, or at the BOTTOM of, a text section: centred, same size cap as the tall/wide cards */
.pg-top,.pg-bottom{display:grid;justify-items:center}
.pg-top{margin-bottom:2.5rem}
.pg-bottom{margin-top:2.5rem}
.pg-top .pg-fig,.pg-bottom .pg-fig{inline-size:min(100%,34rem)}
.pg-top .pg-fig.wide,.pg-bottom .pg-fig.wide{inline-size:min(100%,44rem)}
/* 404: the signpost image beside the "start somewhere real" cards (cards stack in one column beside it from 64em, 2x2 from 80em) */
.nf-split{align-items:center}
.nf-split .cards{margin:0}
@media (min-width:64em){.nf-split .cards{grid-template-columns:1fr}.nf-split .cards>li:nth-child(n){grid-column:auto}}
@media (min-width:80em){.nf-split .cards{grid-template-columns:repeat(2,1fr)}}