@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Black.otf") format("opentype"); font-weight: 900; font-display: swap; }

/* ---------- BrandOS colour kit (Logo System §5) ---------- */
:root {
  --bg: #0F0F12;            /* Dark background */
  --bg-2: #15151A;
  --surface: #1A1A21;
  --surface-2: #202029;
  --line: rgba(196, 181, 253, 0.12);
  --line-strong: rgba(196, 181, 253, 0.24);

  --royal: #6D5CE7;         /* Royal Violet, core */
  --core: #7869F5;          /* Divider / gradient core */
  --violet: #8B7CF6;
  --lavender: #C4B5FD;      /* Gradient start (dark) */
  --blue: #5C9CFF;          /* Signal Blue, gradient end */

  --ink: #F4F4F7;           /* Light stock, used as text on dark */
  --ink-2: #D6D6DE;
  --muted: #B4B4C0;         /* TM + tagline on dark */
  --faint: #8E8E9C;

  /* B-Dark seven-stop gradient, v1.1 */
  --grad: linear-gradient(90deg, #C4B5FD 0%, #A599F7 16.7%, #8D85F5 33.3%, #7869F5 50%, #747BF6 66.7%, #6488F7 83.3%, #5C9CFF 100%);
  --grad-soft: linear-gradient(135deg, rgba(196,181,253,.16), rgba(92,156,255,.10));

  --font: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 18px;
  --radius-sm: 12px;
  --wrap: 1280px;                       /* content column: centred, comfortable reading width */
  --gutter: clamp(16px, 2.4vw, 44px);    /* small side margin, like most modern sites */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: rgba(120, 105, 245, .45); color: #fff; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap-full { width: calc(100% - 2 * var(--gutter)); margin-inline: auto; }   /* menu bar: edge to edge */
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: inline-block; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--lavender); }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
h2 { font-size: clamp(32px, 4.4vw, 52px); }
p { margin: 0; }
.lede { color: var(--ink-2); font-size: clamp(17px, 1.5vw, 19px); max-width: 60ch; }

/* ---------- Buttons ---------- */
.btn {
  --h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 26px; border-radius: 999px; border: 0;
  font: 700 16px/1 var(--font); letter-spacing: -.005em; cursor: pointer; text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  white-space: nowrap;
}
.btn-primary {
  position: relative; overflow: hidden; isolation: isolate; color: #0F0F12;
  background: linear-gradient(90deg, #D9CFFE 0%, #B3A8FA 45%, #8FB6FF 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 8px 20px -10px rgba(0,0,0,.6);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-position .6s var(--ease);
}
/* Light sheen that sweeps across on hover */
.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent);
  transform: skewX(-18deg); transition: left .7s var(--ease);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset, 0 14px 28px -12px rgba(0,0,0,.75); }
.btn-primary:hover::after { left: 120%; }
.btn-primary:active { transform: translateY(0) scale(.97); transition-duration: .1s; }
/* Menu "Join the waiting list": a slide-to-confirm switch.
   Rest: lavender track, black knob with a lavender arrow on the left, violet label.
   Slide (or click): a dark layer fills in behind the knob, revealing a light label; the knob turns lavender.
   At the end the knob shows a check, then the waiting-list form opens. Closing the form resets it. */
.nav-cta {
  --kx: 0px; --fw: 0px; --kp: 0; --h: 36px;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; height: var(--h); padding: 0 16px 0 42px;
  border: 0; border-radius: 999px; cursor: pointer; touch-action: pan-y; white-space: nowrap;
  font: 600 14px/1 var(--font); letter-spacing: -.005em; color: #1B1530; overflow: hidden;
  background: linear-gradient(90deg, #D9CFFE 0%, #B3A8FA 50%, #8FB6FF 100%);          /* BrandOS Colour Kit: light gradient */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 2px rgba(20,16,40,.12), 0 6px 16px -10px rgba(0,0,0,.7);
  transition: filter .25s ease, box-shadow .25s ease;
}
.nav-cta .cta-t { position: relative; z-index: 1; opacity: calc(1 - var(--kp)); transition: opacity .2s ease; }
.nav-cta .cta-over {                                      /* the dark fill, clipped to just behind the knob */
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; padding: 0 42px 0 16px; border-radius: inherit; pointer-events: none;
  color: #FFFFFF; background: linear-gradient(90deg, #8B7CF6 0%, #7869F5 45%, #5C9CFF 100%);   /* BrandOS Colour Kit: Iris */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3); text-shadow: 0 1px 1px rgba(20,16,60,.35);
  clip-path: inset(0 calc(100% - var(--fw)) 0 0 round 999px);
  transition: clip-path .24s cubic-bezier(.34, 1.25, .64, 1);
}
.nav-cta .cta-knob {
  position: absolute; z-index: 3; left: 4px; top: 50%; width: calc(var(--h) - 8px); height: calc(var(--h) - 8px); border-radius: 50%; display: grid; place-items: center;
  color: #5B4BDB;                                                            /* white knob, Iris arrow */
  background: radial-gradient(120% 120% at 30% 20%, #FFFFFF 55%, #ECE8FF);
  box-shadow: inset 0 -1px 0 rgba(91,75,219,.12), 0 0 0 1px rgba(91,75,219,.10), 0 3px 8px -2px rgba(27,21,48,.45);
  transform: translate(var(--kx), -50%) scale(1); cursor: grab; touch-action: none;
  transition: transform .24s cubic-bezier(.34, 1.25, .64, 1), background .2s ease, color .2s ease;
}
.nav-cta .cta-knob svg { grid-area: 1 / 1; transition: transform .2s ease, opacity .15s ease; }
.nav-cta .ic-ok { opacity: 0; transform: scale(.5); }
.nav-cta.on .ic-go { opacity: 0; transform: scale(.5); }
.nav-cta.on .ic-ok { opacity: 1; transform: none; }
.nav-cta::after {                                       /* a glossy shine that sweeps across on hover */
  content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: -45%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-18deg); opacity: 0;
}
.nav-cta:not(.on):not(.dragging):hover { filter: brightness(1.05) saturate(1.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 2px rgba(20,16,40,.12), 0 8px 20px -10px rgba(0,0,0,.8); }
.nav-cta:not(.on):not(.dragging):hover::after { opacity: 1; animation: swShine .8s ease-out; }
@keyframes swShine { from { left: -45%; } to { left: 120%; } }
.nav-cta:not(.on):not(.dragging):hover .ic-go { transform: translateX(2px); }
.nav-cta:not(.on):active .cta-knob, .nav-cta.dragging .cta-knob { transform: translate(var(--kx), -50%) scale(.92); }
.nav-cta:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; }
.nav-cta.dragging, .nav-cta.dragging .cta-knob, .nav-cta.dragging .cta-over, .nav-cta.dragging .cta-t { transition: none; cursor: grabbing; }
.nav-links .nav-cta { margin-left: 12px; }
.nav-cta svg { width: 12px; height: 12px; }
/* Large version for the page's main calls to action */
.nav-cta.cta-lg { --h: 52px; padding: 0 26px 0 62px; font-size: 16px; font-weight: 700; }
.nav-cta.cta-lg .cta-over { padding: 0 62px 0 26px; }
.nav-cta.cta-lg svg { width: 15px; height: 15px; }
@media (max-width: 420px) { .nav .nav-cta { --h: 32px; padding: 0 12px 0 36px; font-size: 12.5px; } .nav .nav-cta .cta-over { padding: 0 36px 0 12px; } }
.btn-ghost { color: var(--ink); background: transparent; box-shadow: 0 0 0 1px var(--line-strong) inset; }
.btn-ghost:hover { background: rgba(196,181,253,.06); }
.btn-sm { --h: 42px; padding: 0 18px; font-size: 14px; }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn:focus-visible, .field :focus-visible, .x:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(15, 15, 18, .72);
  backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.nav.scrolled { border-bottom-color: var(--line); }
/* A soft gradient light sits centred on the bottom edge of the menu bar;
   it gives a small shake when the mouse moves over the bar */
.nav::before, .nav::after { content: ""; position: absolute; bottom: -1px; height: 1px; pointer-events: none; }
.nav::before { left: 0; right: 0; background: linear-gradient(90deg, transparent, rgba(196,181,253,.10) 22%, rgba(139,124,246,.12) 50%, rgba(196,181,253,.10) 78%, transparent); }
.nav::after {
  left: 50%; width: min(1400px, 78%); height: 1.5px; bottom: -1.25px; border-radius: 2px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(196,181,253,.6) 22%, rgba(139,124,246,.75) 50%, rgba(196,181,253,.6) 78%, transparent)   /* lavender -> violet -> lavender */;
}
@media (hover: hover) and (pointer: fine) {
  .nav:hover::after { animation: lineShake .55s cubic-bezier(.36, .07, .19, .97) both; }
}
@keyframes lineShake {
  0%, 100% { transform: translateX(-50%); }
  20% { transform: translateX(calc(-50% - 6px)); }
  40% { transform: translateX(calc(-50% + 5px)); }
  60% { transform: translateX(calc(-50% - 3px)); }
  80% { transform: translateX(calc(-50% + 2px)); }
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.brand-lockup { display: block; height: 34px; width: auto; }
.nav-logo { display: block; line-height: 0; border-radius: 6px; }
.nav-logo img { display: block; height: 46px; width: auto; }
.nav-logo:focus-visible { outline: 2px solid var(--lavender); outline-offset: 6px; }
.nav-links { position: relative; display: flex; align-items: center; gap: 6px; }
/* Liquid-glass menu pills: a frosted, see-through capsule with a glossy top edge and a soft water shine.
   Hover: a light follows the pointer, a gloss sweeps across and the pill squishes like a drop of water. */
.nav-links a:not(.btn) {
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; padding: 8px 15px 8px 12px; border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500;
  background: transparent; box-shadow: none;                  /* resting: plain text + icon, no box */
  transition: background .3s ease, box-shadow .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.nav-links a:not(.btn)::before {                          /* the wet highlight: a bright crescent on the top half */
  content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; top: 1px; height: 52%; border-radius: 999px 999px 60% 60% / 999px 999px 40% 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); opacity: 0; transition: opacity .3s;
}
.nav-links a:not(.btn)::after {                           /* light that follows the pointer + a gloss band that sweeps on hover */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .3s;
  background:
    linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 46%, rgba(220,212,255,.12) 52%, transparent 66%) -160% 0 / 220% 100% no-repeat,
    radial-gradient(60px 40px at var(--mx) var(--my), rgba(196,181,253,.38), transparent 70%);
}
.nav-links .ni { flex: none; color: #CFC4FF; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), color .3s; }
.nav-links a[aria-current="true"] .ni { color: #FFFFFF; }
.nav-links a[aria-current="true"] .t3d { background-image: linear-gradient(180deg, #FFFFFF 0%, #E4DCFF 55%, #C4B5FD 100%); }
/* One liquid-glass box marks the current item; it glides (with a springy, water-like stretch) only when the current item changes */
.nav-glass {
  position: absolute; left: 0; top: 50%; z-index: 0; pointer-events: none; border-radius: 999px;
  width: var(--gw, 0px); height: var(--gh, 36px); transform: translate(var(--gx, 0px), -50%); opacity: 0;
  background: linear-gradient(180deg, rgba(196,181,253,.26), rgba(92,156,255,.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(196,181,253,.4), 0 8px 22px -10px rgba(0,0,0,.85);
  -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5);
  transition: transform .55s cubic-bezier(.34, 1.45, .55, 1), width .55s cubic-bezier(.34, 1.45, .55, 1), height .3s ease, opacity .25s ease;
}
.nav-glass.on { opacity: 1; }
.nav-glass::before {                                     /* the wet highlight on the top half */
  content: ""; position: absolute; left: 8%; right: 8%; top: 1px; height: 52%; border-radius: 999px 999px 60% 60% / 999px 999px 40% 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0));
}
.nav-glass.moving { animation: glassWobble .55s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes glassWobble { 0% { border-radius: 999px; } 35% { border-radius: 40% 60% 55% 45% / 60% 45% 55% 40%; } 100% { border-radius: 999px; } }
.nav-links a:not(.btn) { z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .nav-links a:not(.btn):hover::after { opacity: 1; animation: navGloss .9s ease-out; }
  .nav-links a:not(.btn):not([aria-current="true"]):hover { transform: translateY(-2px); }
  .nav-links a:not(.btn):hover .ni { transform: translateY(-1px) rotate(-8deg) scale(1.12); color: #FFFFFF; }
}
@keyframes navJelly { 0% { transform: scale(1); } 30% { transform: scale(1.07, .93); } 55% { transform: scale(.97, 1.04); } 80% { transform: scale(1.02, .99); } 100% { transform: scale(1); } }
@keyframes navGloss { from { background-position: -160% 0, 0 0; } to { background-position: 160% 0, 0 0; } }
.nav-links a:not(.btn):active { transform: scale(.95); transition-duration: .1s; }
.nav-links a:not(.btn):focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }
.nav-links .btn { margin-left: 12px; }
/* Menu text with a light 3D shade: lit from the top, soft shadow below */
.nav-links .t3d {
  background: linear-gradient(180deg, #FFFFFF 0%, #EEEAFB 50%, #BDB5DD 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 2px 3px rgba(0,0,0,.35));
}


/* ---------- Site background (fixed, behind everything) ---------- */
.site-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; --cell: 64px; }
.site-bg::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(30% 35% at 80% 15%, rgba(120,105,245,.14), transparent 70%),
    radial-gradient(28% 32% at 10% 70%, rgba(92,156,255,.08), transparent 70%),
    radial-gradient(24% 30% at 55% 105%, rgba(196,181,253,.07), transparent 70%);
  animation: drift 40s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(-4%, 3%, 0) scale(1.05); } }
.site-bg .grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(244,244,247,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,244,247,.028) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  mask-image: radial-gradient(ellipse 90% 85% at 50% 40%, #000 35%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 40%, #000 35%, transparent 95%);
}
.site-bg .grid i {
  position: absolute; width: calc(var(--cell) - 1px); height: calc(var(--cell) - 1px);
  background: rgba(196,181,253,.045); opacity: 0;
}
.site-bg .grid i.glow { animation: glow 7s ease-in-out forwards; }
.site-bg .grid i.gone { animation: fadeOut .4s ease forwards; }
.site-bg .grid i.hit { animation: vanish .7s var(--ease) forwards; }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes vanish { 0% { opacity: 1; background: rgba(196,181,253,.16); transform: scale(1); } 100% { opacity: 0; transform: scale(1.4); } }
.bg-tip {
  position: fixed; z-index: 35; pointer-events: none; transform: translate(-50%, -100%);
  padding: 4px 2px; white-space: nowrap;
  font: 500 14px/1.2 var(--font); color: #DDD4FE; /* lavender, lightened; text only, no box */
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 12px rgba(15,15,18,.9);   /* keeps it readable on any background */
}
.bg-tip .ch2 { display: inline-block; white-space: pre; will-change: transform, opacity, filter; }
@keyframes glow { 0% { opacity: 0; } 35%, 60% { opacity: 1; } 100% { opacity: 0; } }
main, footer { position: relative; z-index: 1; }
header.nav { position: sticky; top: 0; z-index: 40; }

/* ---------- Menu on tablets and phones ---------- */
.nav-toggle, .nav-cta-m { display: none; }
.nav-toggle {
  width: 42px; height: 42px; border: 0; border-radius: 12px; cursor: pointer; flex: none;
  background: rgba(196,181,253,.08); box-shadow: 0 0 0 1px var(--line-strong) inset;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .2s; }
.nav.open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-toggle:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }
@media (max-width: 1080px) {   /* compact menu below 1080px so the full menu never squeezes or wraps */
  .nav .wrap { gap: 10px; }
  .nav-logo { margin-right: auto; }
  .nav-toggle { display: inline-flex; }
  .nav-cta-m { display: inline-flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 12px var(--gutter) 22px; background: #0F0F12;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s ease, transform .3s cubic-bezier(.23, 1, .32, 1), visibility 0s linear .3s;
  }
  .nav.open .nav-links { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .3s cubic-bezier(.23, 1, .32, 1); }
  .nav-links a:not(.btn) { display: flex; padding: 14px 16px; font-size: 17px; border-radius: 14px; }
  .nav-glass { display: none; }
  .nav-links a[aria-current="true"] { background: linear-gradient(90deg, rgba(196,181,253,.2), rgba(92,156,255,.1)); }
  .nav-links a[aria-current="true"] { transform: none; }
  .nav-links .btn { display: none; }
}
@media (max-width: 420px) {
}
@media (max-width: 560px) {
  .sys-title small { display: none; }
  .sys-head .tag { letter-spacing: .14em; }
  .sys-title { gap: 10px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; padding: clamp(24px, 3.4vw, 44px) 0 0;
  /* Exactly one screen below the nav, so the next section never peeks in */
  min-height: calc(100vh - 84px); min-height: calc(100svh - 84px);
  display: flex; flex-direction: column;
}
.hero > .wrap { flex: 1; align-content: center; }   /* the content fills the screen, so the tools row sits right at the bottom */
/* Gradient highlights */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(38% 55% at 78% 18%, rgba(120,105,245,.22), transparent 70%),
    radial-gradient(30% 45% at 12% 85%, rgba(92,156,255,.12), transparent 70%),
    radial-gradient(26% 40% at 45% 0%, rgba(196,181,253,.10), transparent 70%);
}
/* Landing background life: soft beams of light glide across, and a huge faint B watermark drifts behind */
.hero-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-fx .hero-spot {                                   /* soft light that follows the pointer */
  position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(420px circle at var(--hx, 50%) var(--hy, 40%), rgba(196,181,253,.09), rgba(143,182,255,.04) 40%, transparent 70%);
}
.hero.lit .hero-spot { opacity: 1; }
/* brighter grid lines, only around the pointer (same grid as the background, so they line up exactly) */
.site-bg .grid-lit {
  position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease;
  background-image: linear-gradient(rgba(196,181,253,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(196,181,253,.22) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  -webkit-mask: radial-gradient(220px circle at var(--gx, -999px) var(--gy, -999px), #000, transparent 75%);
          mask: radial-gradient(220px circle at var(--gx, -999px) var(--gy, -999px), #000, transparent 75%);
}
.site-bg.lit .grid-lit { opacity: 1; }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(38px, 5vw, 70px); font-weight: 900; line-height: 1.16; letter-spacing: -0.035em; margin: 22px 0 26px; padding-bottom: .06em; }
/* Headline: one diagonal light sweeps across all three lines. Each letter of
   "founders." fills with the brand gradient at the exact moment the light passes
   over it; once the light has crossed, the word holds filled, then the loop repeats.
   The light and the fill are painted in the SAME text layer (no overlay copies),
   so letter edges stay clean. Positions are driven by the "Headline sweep" script. */
.hero h1 { display: flex; flex-direction: column; align-items: flex-start; padding-top: .12em; }  /* offsets line 1's paint-room margin */
.hero h1 .ln { display: block; }
.hero h1 .ln2 { display: block; }
.hero h1 .ln2 .ln, .hero h1 .ln2 .ln-3 { display: inline; }
.hero h1 .ln-ul { position: relative; align-self: flex-start; }
/* the underline the light draws under "prints inbound.", once "founders" has filled */
/* a square-ended line on the baseline, from just after the stem of the "p" to the end of the full stop */
.hero h1 { isolation: isolate; }   /* lets the underline sit behind the letters */
.hero h1 .h1-ul { position: absolute; z-index: -1; left: .27em; right: .1em; bottom: .33em; height: .15em;   /* tucked up behind the foot of the letters */
  border-radius: 0; overflow: hidden;
  background: linear-gradient(90deg, #C4B5FD, #8B7CF6 50%, #5C9CFF); clip-path: inset(0 100% 0 0); }
/* a bright pen tip leads the line as it's drawn */
.hero h1 .h1-ul-head { position: absolute; z-index: -1; left: .27em; bottom: .345em; width: .2em; height: .2em; margin: 0 0 -.04em -.1em; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 0 0 .04em rgba(196,181,253,.45), 0 0 .3em .06em rgba(139,124,246,.8); opacity: 0; pointer-events: none; }
/* once drawn, a glint runs along the line */
.hero h1 .h1-ul::after { content: ""; position: absolute; inset: 0; width: 30%; transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent); }
.hero h1 .h1-ul.done::after { animation: ulGlint 1.1s cubic-bezier(.4, 0, .2, 1) .15s both; }
@keyframes ulGlint { to { transform: translateX(380%); } }
.hero h1 .h1-sub { display: block; margin-top: .55em; font-size: .36em; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; color: var(--ink-2, #C9CDEE); }
.hero h1 .ln:not(.ln-3), .hero h1 .ch {
  color: #F4F4F7; /* fallback before the script runs */
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
}
.hero h1.sweep .ln:not(.ln-3), .hero h1.sweep .ch { -webkit-text-fill-color: transparent; }
.hero h1 .ch { display: inline; }
/* Extra paint room so descenders and letter edges are never clipped; negative
   margins cancel it out, so the layout does not move */
.hero h1 .ln:not(.ln-3) { padding: .12em .06em .22em; margin: -.12em -.06em -.22em; }
.hero h1 .ch { padding: .12em .05em .22em; margin: -.12em -.05em -.22em; }

/* Launch announcement: static megaphone badge + spaced caps */
.launch-note { display: inline-flex; align-items: center; gap: 12px; margin: 0; }
.launch-note b { font-size: 14px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; background: linear-gradient(90deg, #E4DCFF, #C4B5FD 45%, #9DBEFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { margin-bottom: 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; color: var(--muted); font-size: 14px; font-weight: 500; }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta i { width: 6px; height: 6px; border-radius: 50%; background: var(--core); }

/* Tools strip at the foot of the hero */
.tools { position: relative; z-index: 1; display: flex; align-items: center; gap: 28px; padding: 22px 0 26px; margin-top: 28px; border-top: 1px solid var(--line); }
.hero .tools { display: block; width: 100%; padding: 6px 0; }   /* tools strip runs the full screen width */
.hero .tools {                                   /* proof strip: solid page colour (covers the grid), with a soft light on the left */
  background: var(--bg); overflow: hidden;
  border-top-color: rgba(214,206,255,.10); border-bottom: 1px solid rgba(214,206,255,.10);
}
/* Edge light: the strip's top and bottom hairlines catch light at the left end and fade out across the page */
.hero .tools::before, .hero .tools::after { content: ""; position: absolute; left: 0; width: 45%; height: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,.75), rgba(196,181,253,.55) 25%, rgba(92,156,255,.25) 60%, transparent);
  animation: proofLight 5s ease-in-out infinite alternate; }
.hero .tools::before { top: 0; }
.hero .tools::after { bottom: 0; width: 30%; animation-delay: -2.5s; }
@keyframes proofLight { from { opacity: .45; } to { opacity: 1; } }
.hero .tools .tools-rail { z-index: 1; }
.tools-rail { position: relative; width: 100%; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tools-track { display: flex; align-items: center; gap: 16px; width: max-content; animation: toolsScroll 70s linear infinite; }
.tools-rail:hover .tools-track { animation-play-state: paused; }
@keyframes toolsScroll { to { transform: translateX(calc(-50% - 8px)); } }
.tool { display: inline-flex; align-items: center; gap: 10px; flex: none; color: #8E8E9C; font-size: 15px; font-weight: 500; white-space: nowrap; transition: color .25s; }
.tool svg { width: 22px; height: 22px; fill: currentColor; transition: fill .25s, transform .25s var(--ease); }
.tool:hover { color: var(--ink); }
.tool:hover svg { fill: var(--brand); transform: scale(1.12); }
/* Each proof item: icon tile, then the figure and its caption on one line. No box at rest; the box pops up on hover */
.proof { flex: none; display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
    padding: 6px 18px 6px 6px; border-radius: 12px; background-color: transparent; box-shadow: 0 0 0 1px transparent inset;
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, background-color .3s ease, opacity .3s ease; }
.proof-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
    background: rgba(139,92,246,.09); box-shadow: 0 0 0 1px rgba(196,181,253,.14) inset; transition: background-color .3s ease, box-shadow .3s ease; }
.proof svg { width: 16px; height: 16px; fill: none; stroke: #C4B5FD; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.proof-txt { display: inline-flex; align-items: baseline; gap: 8px; }   /* figure and caption on one line */
.proof-fig { font-size: 16.5px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.proof-cap { font-size: 15px; font-weight: 500; line-height: 1.25; color: #B8B6C8; transition: color .25s ease; }
.proof.solo .proof-fig { font-size: 15px; font-weight: 600; color: #E4E4EC; letter-spacing: 0; }   /* the markets line has no figure */
/* Hover: the strip stops and a glass box pops up behind the item with a soft violet glow. The text itself never flashes */
.proof:hover { transform: translateY(-2px); background-color: rgba(255,255,255,.035);
    box-shadow: 0 0 0 1px rgba(196,181,253,.30) inset, 0 1px 0 rgba(255,255,255,.08) inset, 0 10px 24px -12px rgba(139,92,246,.45); }
.proof:hover .proof-ic { background: rgba(139,92,246,.18); box-shadow: 0 0 0 1px rgba(196,181,253,.34) inset; }
.proof:hover .proof-cap { color: #E4E2EE; }
.tools-rail:hover .proof:not(:hover) { opacity: .5; }
.hero .tools-rail { padding: 14px 0; margin: -14px 0; }   /* so the lifted box isn't clipped */
@media (max-width: 640px) {
  .proof { gap: 10px; padding: 5px 14px 5px 5px; }
  .proof-ic { width: 28px; height: 28px; }
  .proof-fig { font-size: 15px; }
  .proof-cap { font-size: 14px; }
}

/* Hero system card: the 5 components as a live rail */
.sys-card {
  position: relative; border-radius: 24px; padding: 26px;
  background: linear-gradient(180deg, rgba(32,32,41,.9), rgba(21,21,26,.9));
  box-shadow: 0 0 0 1px var(--line) inset, 0 40px 80px -40px rgba(0,0,0,.8);
}
.sys-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, rgba(196,181,253,.45), rgba(92,156,255,.08) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.sys-head { display: flex; align-items: center; margin-bottom: 22px; }
.sys-head img { width: 48px; height: 48px; margin-left: -6px; flex: none; }   /* centred over the 01 step circle (36px), so the logo and the rail line up */
.sys-head .tag { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.sys-title { display: flex; align-items: center; gap: 14px; flex: 1; }
.sys-title > span { display: grid; gap: 4px; text-align: right; margin-left: auto; }   /* B logo stays left, title moves to the right */
.sys-title .tag { color: var(--ink-2); }
.sys-title small { font-size: 12.5px; color: var(--faint); }
.sys-rail { list-style: none; margin: 0; padding: 0; position: relative; }
/* Wide card: steps on the left, "What we run for you" on the right.
   Narrow card (phones, smaller windows): the details sit under the steps. */
.sys-card { container-type: inline-size; }
.sys-detail .d-name { display: none; }
.d-items { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.d-items li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; color: var(--ink-2); box-shadow: 0 0 0 1px var(--line-strong) inset; }
@container (min-width: 640px) {
  .sys-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: stretch; }
  .sys-body .sys-detail { margin-top: 0; padding: 4px 0 4px 32px; border-top: 0; border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
  .sys-detail .d-name { display: block; margin: 8px 0 2px; font-size: 30px; font-weight: 900; letter-spacing: .04em; line-height: 1.1; color: var(--ink); }
  .sys-detail p { font-size: 15.5px; }
}
.sys-rail::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(180deg, #C4B5FD, #7869F5, #5C9CFF); opacity: .35; }
.sys-rail li { position: relative; }
.sys-step {
  width: 100%; display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: center; padding: 8px 0;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
  opacity: .55; transition: opacity .35s var(--ease);
}
.sys-step:hover { opacity: .85; }
.sys-step[aria-selected="true"] { opacity: 1; }
.sys-step:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; border-radius: 10px; }
.sys-dot {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); box-shadow: 0 0 0 1px var(--line-strong) inset;
  font-size: 12px; font-weight: 700; color: var(--lavender);
  transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.sys-step[aria-selected="true"] .sys-dot { background: var(--lavender); color: var(--bg); box-shadow: none; }
.sys-rail b { display: block; font-weight: 700; font-size: 15px; letter-spacing: .08em; }
.sys-rail small { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.sys-detail { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); min-height: 128px; }
.sys-detail .k { font-size: 12px; font-weight: 700; color: var(--lavender); }
.sys-detail p { margin: 6px 0 12px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.sys-detail .t { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
.sys-detail .t strong { color: var(--ink); font-weight: 700; }
.sys-detail .body { transition: opacity .3s var(--ease); }
.sys-detail .body.swap { opacity: 0; }
/* card foot: two quiet steps, "Install once." → "It compounds forever.", each with its icon, joined by a faint arrow */
.sys-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.sys-foot .sf-a, .sys-foot .sf-b { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sys-foot .sf-ic { width: 15px; height: 15px; flex: none; color: var(--lavender); }
.sys-foot .sf-arrow { position: relative; flex: 1; min-width: 24px; height: 1px; background: rgba(214,206,255,.12); }   /* a thin light line, no arrowhead */
.sys-foot .sf-b { font-weight: 500; }
.sys-foot .sf-b span { position: relative; z-index: 0; display: inline-block; color: var(--muted); animation: sfLit 9s ease infinite; }
.sys-foot .sf-b span::before { content: ""; position: absolute; inset: -5px -12px; z-index: -1; border-radius: 999px; opacity: 0;
  background: radial-gradient(closest-side, rgba(167,139,250,.30), rgba(92,156,255,.10) 70%, transparent);
  box-shadow: 0 0 18px rgba(139,92,246,.28); animation: sfGlow 9s ease infinite; }
/* Install run, every 9s, like a browser download: the ring around the download icon and the thin light line fill together,
   on one slow timer (arrow nudges down while they fill), then a soft glow lights up behind "It compounds forever." and the text turns white as they land */
.sys-foot .sf-dlic { width: 19px; height: 19px; }
.sys-foot .sf-ring-bg { stroke: rgba(196,181,253,.18); }
.sys-foot .sf-ring { stroke: #8FB6FF; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 12px 12px;
  animation: sfRing 9s cubic-bezier(.45, .05, .35, 1) infinite; }
.sys-foot .sf-dl { animation: sfDl 9s ease-in-out infinite; }
.sys-foot .sf-arrow::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 0;
  background: linear-gradient(90deg, rgba(214,206,255,.15), rgba(232,228,255,.85));
  animation: sfInstall 9s cubic-bezier(.45, .05, .35, 1) infinite; }
@keyframes sfRing { 0%, 5% { stroke-dashoffset: 100; opacity: 1; } 70%, 88% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sfInstall { 0%, 5% { width: 0; opacity: 1; } 70%, 88% { width: 100%; opacity: 1; } 97%, 100% { width: 100%; opacity: 0; } }
@keyframes sfDl { 0%, 8% { transform: translateY(0); } 18% { transform: translateY(1.5px); } 28% { transform: translateY(0); }
  38% { transform: translateY(1.5px); } 48% { transform: translateY(0); } 58% { transform: translateY(1.5px); } 68%, 100% { transform: translateY(0); } }
@keyframes sfLit { 0%, 69% { color: var(--muted); } 75%, 88% { color: #fff; } 97%, 100% { color: var(--muted); } }
@keyframes sfGlow { 0%, 69% { opacity: 0; } 76%, 88% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* ---------- Sections ---------- */
section { position: relative; scroll-margin-top: 84px; }
.section { padding: clamp(52px, 6vw, 84px) 0; }
.section-head { display: grid; gap: 16px; margin-bottom: 36px; max-width: 760px; }
/* Split head: a section head with an intro paragraph uses the full width on wide screens.
   Kicker + heading on the left, the paragraph on the right behind a thin gradient rule, resting on the heading's baseline */
@media (min-width: 1024px) {
  .section > .wrap > .section-head:has(> .lede) { max-width: none; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 96px); align-items: end; margin-bottom: 44px; }
  .section > .wrap > .section-head:has(> .lede) > :not(.lede) { grid-column: 1; }
  .section > .wrap > .section-head:has(> .lede) > .lede { grid-column: 2; grid-row: 1 / span 2; align-self: end; max-width: 46ch; position: relative; padding-left: 28px; }
  .section > .wrap > .section-head:has(> .lede) > .lede::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px;
    background: linear-gradient(180deg, transparent, rgba(196,181,253,.55) 30%, rgba(92,156,255,.45) 75%, transparent); }
}
.sec-kicker { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--lavender); }
.divider-line { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(196,181,253,.22) 20%, rgba(92,156,255,.22) 80%, transparent); }

/* 3B's */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tier {
  position: relative; border-radius: var(--radius); padding: 38px 34px 36px;
  background: var(--bg-2); box-shadow: 0 0 0 1px var(--line) inset;
}
.tier .num { font-size: 13px; font-weight: 700; letter-spacing: .18em; color: var(--faint); }
.tier h3 { font-size: 34px; margin: 22px 0 18px; }
.tier p { color: var(--muted); font-size: 16px; line-height: 1.7; }
.tier .verdict { margin-top: 22px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.tier.is-build { background: linear-gradient(180deg, rgba(120,105,245,.14), rgba(21,21,26,.6) 70%); box-shadow: 0 0 0 1px rgba(120,105,245,.45) inset; }
.tier.is-build .num, .tier.is-build .verdict { color: var(--lavender); }
.tier.is-build p { color: var(--ink-2); }
.tier { display: flex; flex-direction: column; }
.tier p { flex: 1; margin-bottom: 0; }
/* Strike-through is drawn as a line so it can slash across after the chart plays */
.tier .strike { position: relative; display: inline-block; align-self: flex-start; text-decoration: none; }
.tier .strike::after {
  content: ""; position: absolute; left: -3%; right: -3%; top: 54%; height: 2px; border-radius: 2px;
  background: rgba(196,196,208,.55); transform-origin: left center;
}
.tier.play .strike::after { animation: tcStrike .5s cubic-bezier(.65, 0, .35, 1) both; }
.tier.play:nth-child(1) .strike::after { animation-delay: 1.15s; }
.tier.play:nth-child(2) .strike::after { animation-delay: 1.45s; }
@keyframes tcStrike { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Signal charts: each card's line acts out its verdict (decays / burns out / compounds) */
.tier-chart { position: relative; height: clamp(64px, 6vw, 84px); margin-top: 40px; color: #7C7C8C; }
.tier-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tier-chart path { vector-effect: non-scaling-stroke; }
.tc-base { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 4; fill: none; }
.tc-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc-area { fill: currentColor; opacity: .08; stroke: none; }
.tc-build { color: #8B7CF6; }
.tc-build .tc-line { stroke-width: 2.5; }
.tc-build .tc-area { opacity: .16; }
.tier.play .tc-line { animation: tcDraw 1.3s cubic-bezier(.45, 0, .2, 1) both; }
.tier.play .tc-area { animation: tcDraw 1.3s cubic-bezier(.45, 0, .2, 1) both; }
.tier.play.is-build .tc-area { animation-duration: 1.7s; }
/* Before a card's turn: line, marker, dot, strike and verdict wait off-stage */
.tiers.armed .tier:not(.play) :is(.tc-line, .tc-area, .tc-cut, .tc-dot, .verdict) { opacity: 0; }
.tiers.armed .tier:not(.play) .strike::after { transform: scaleX(0); }
.tier.play:nth-child(1) .tc-line { animation-delay: .1s; }   .tier.play:nth-child(1) .tc-area { animation-delay: .9s; }
.tier.play:nth-child(2) .tc-line { animation-delay: .4s; }   .tier.play:nth-child(2) .tc-area { animation-delay: 1.2s; }
.tier.play:nth-child(3) .tc-line { animation-delay: .7s; animation-duration: 1.7s; }  .tier.play:nth-child(3) .tc-area { animation-delay: 1.8s; }
@keyframes tcDraw { from { clip-path: inset(-30% 100% -30% -2%); } to { clip-path: inset(-30% -2% -30% -2%); } }   /* wipe left to right */
@keyframes tcFade { from { opacity: 0; } }
/* Buy: a dashed "budget stops" marker where the line falls away */
.tc-cut { position: absolute; left: 53%; top: 10%; bottom: 0; border-left: 1px dashed rgba(240,122,140,.55); }
.tc-cut::after { content: "budget stops"; position: absolute; left: 6px; top: -4px; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #E58A9A; }
.tier.play .tc-cut { animation: tcFade .4s ease 1.05s both; }
/* Build: a live dot rides the end of the curve and keeps pulsing */
.tc-dot { position: absolute; right: -5px; top: calc(6 / 72 * 100% - 5px); width: 10px; height: 10px; border-radius: 50%; background: #5C9CFF; box-shadow: 0 0 0 0 rgba(92,156,255,.5); }
.tier.play .tc-dot { animation: tcFade .3s ease 2.3s both, tcPulse 2s ease-out 2.6s infinite; }
@keyframes tcPulse { 0% { box-shadow: 0 0 0 0 rgba(92,156,255,.45); } 100% { box-shadow: 0 0 0 12px rgba(92,156,255,0); } }
/* Verdict word lands once its line has played */
.tier.play .verdict { animation: tcVerdict .5s var(--ease) both; }
.tier.play:nth-child(1) .verdict { animation-delay: 1.3s; }
.tier.play:nth-child(2) .verdict { animation-delay: 1.6s; }
.tier.play:nth-child(3) .verdict { animation-delay: 2.3s; }
@keyframes tcVerdict { from { opacity: 0; transform: translateY(6px); } }
.tier.play.solo .tc-line { animation-delay: 0s; }
.tier.play.solo .tc-area { animation-delay: 0s; }
.tier.play.solo .tc-cut { animation-delay: .75s; }
.tier.play.solo .strike::after { animation-delay: .9s; }
.tier.play.solo .verdict { animation-delay: 1s; }
.tier.play.solo .tc-dot { animation-delay: 1.5s, 1.8s; }
.tiers-note { margin-top: 28px; color: var(--muted); max-width: 70ch; }

/* "I call it the 3B's" line: its own hover */
.three-b { margin: 0; font-size: 17px; font-weight: 500; color: var(--ink-2); }
.three-b span {
  position: relative; display: inline-block; cursor: default;
  background: linear-gradient(90deg, var(--ink-2), var(--ink-2)); -webkit-background-clip: text; background-clip: text;
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.three-b span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; border-radius: 2px;
  background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.three-b span:hover { color: transparent; background-image: var(--grad); transform: translateX(4px); }
.three-b span:hover::after { transform: scaleX(1); }

/* Torch: every card gets a soft light that follows the cursor (cards with their own spotlight keep theirs).
   The light is injected by the "Torch" script below, behind the card's content */
.torch { isolation: isolate; }
.torch-light { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(320px circle at var(--tx, 50%) var(--ty, 0%), rgba(196,181,253,.11), rgba(92,156,255,.03) 45%, transparent 65%); }
.torch:hover > .torch-light { opacity: 1; }
@media (hover: none) { .torch-light { display: none; } }

/* Shared card hover (same as service cards): lift, cursor spotlight, gradient top line */
.tier, .tax-card { position: relative; overflow: hidden; isolation: isolate; transition: box-shadow .35s var(--ease), translate .35s var(--ease), opacity .8s var(--ease), transform .8s var(--ease); }
.tier::before, .tax-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(196,181,253,.12), transparent 60%);
}
.tier::after, .tax-card::after {                             /* top line that also runs round both curved corners */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--radius); border: 2px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--grad) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
/* Every card: the cursor spotlight */
.tier:hover::before, .tax-card:hover::before { opacity: 1; }
/* Highlighted cards only (Visibility Premium, Build it): lift, stronger edge, gradient top line */
.tier.is-build:hover, .tax-card.premium:hover { translate: 0 -4px; box-shadow: 0 0 0 1px rgba(120,105,245,.6) inset, 0 22px 40px -24px rgba(0,0,0,.9); }
.tier.is-build:hover::after, .tax-card.premium:hover::after { transform: scaleX(1); }

/* Services */
.svc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 36px; }
.svc-head .section-head { margin-bottom: 0; }
.mini-stats { display: flex; gap: 12px; margin: 0; flex: none; }
.mini-stats div { min-width: 118px; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--bg-2); box-shadow: 0 0 0 1px var(--line) inset; }
.mini-stats dt { font-size: 34px; font-weight: 900; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Odometer: each digit is a column of 0–9 that scrolls up to its value */
.odo { display: inline-flex; vertical-align: top; }
.odo-col { display: inline-block; height: 1em; overflow: hidden; }
.odo-strip { display: block; will-change: transform; }
.odo-strip span {
  display: block; height: 1em; line-height: 1;
  background: var(--grad); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mini-stats sup { font-size: .42em; font-weight: 700; letter-spacing: 0; vertical-align: top; position: relative; top: .3em; margin-left: 2px; }
.mini-stats dd { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.svc-tagline { margin: 10px 0 0; font-size: 18px; font-style: italic; font-weight: 500; color: var(--lavender); }
.mini-stats .is-free { background: linear-gradient(160deg, rgba(139,124,246,.20), rgba(92,156,255,.06)); box-shadow: 0 0 0 1px rgba(196,181,253,.38) inset; }
.mini-stats .is-free dd { color: var(--ink-2, #C9CDEE); }

/* The four rungs. Every card has the same order: name + badge, tag, promise, best for, components, CTA.
   The CTAs all sit on one line at the foot of the cards */
.pkg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; padding-top: 22px; }
.pkg {
  position: relative; display: flex; flex-direction: column; padding: 30px 24px 22px; border-radius: var(--radius); isolation: isolate;
  background-color: var(--bg-2); box-shadow: 0 0 0 1px var(--line) inset;
  transition: box-shadow .4s var(--ease), translate .35s var(--ease), opacity .8s var(--ease), transform .8s var(--ease);
}
.pkg::before {                                                 /* spotlight that follows the cursor */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(196,181,253,.10), transparent 60%);
}
.pkg:hover { translate: 0 -4px; box-shadow: 0 0 0 1px rgba(196,181,253,.28) inset, 0 22px 40px -24px rgba(0,0,0,.9); }
.pkg:hover::before { opacity: 1; }
.pkg-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.pkg h3 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.pkg-badge { flex: none; padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #8FE3B4; background: rgba(52,199,123,.10); box-shadow: 0 0 0 1px rgba(143,227,180,.32) inset; }
.pkg-tag { margin: 10px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.pkg-promise { margin: 24px 0 0; font-size: 19px; font-weight: 700; line-height: 1.32; letter-spacing: -.015em; color: var(--ink); }
.pkg-best { margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.pkg-best b { font-weight: 600; color: var(--ink-2, #C9CDEE); }
.pkg-parts { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pkg-parts li { padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--lavender);
  background: rgba(196,181,253,.06); box-shadow: 0 0 0 1px rgba(196,181,253,.22) inset; transition: box-shadow .3s, background-color .3s; }
.pkg-parts li i { font-style: normal; font-weight: 500; letter-spacing: .02em; color: var(--muted); }
.pkg:hover .pkg-parts li { background-color: rgba(196,181,253,.10); box-shadow: 0 0 0 1px rgba(196,181,253,.38) inset; }
.pkg-foot { margin-top: auto; padding-top: 30px; }
.pkg-cta { width: 100%; justify-content: center; }
.pkg-note { margin: 12px 0 0; min-height: 1.5em; font-size: 13px; text-align: center; color: var(--faint); }

/* 00 · Scorecard: the free front door, set apart by a dashed edge */
.pkg.is-free { box-shadow: none; background-image: linear-gradient(180deg, rgba(52,199,123,.05), transparent 45%); }
.pkg.is-free::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 1.5px dashed rgba(196,181,253,.62); transition: border-color .35s var(--ease); }
.pkg.is-free:hover::after { border-color: rgba(196,181,253,.9); }

/* 02 · The OS: the featured rung. Lifted above the row, a crown bar, a lit edge */
.pkg.is-feat { margin-top: -22px; padding-top: 56px;
  background: radial-gradient(120% 55% at 50% 0%, rgba(139,124,246,.20), transparent 70%), var(--bg-2);
  box-shadow: 0 0 0 1.5px rgba(139,124,246,.75) inset, 0 34px 70px -34px rgba(92,76,220,.55); }
.pkg.is-feat:hover { box-shadow: 0 0 0 1.5px rgba(196,181,253,.9) inset, 0 40px 80px -34px rgba(92,76,220,.7); }
.pkg-crown { position: absolute; top: 0; left: 0; right: 0; margin: 0; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 12px; border-radius: var(--radius) var(--radius) 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #FFFFFF; background: linear-gradient(90deg, #8B7CF6, #7869F5 50%, #5C9CFF); }
.pkg.is-feat .pkg-tag { color: var(--lavender); }

.pkg-all { display: flex; justify-content: center; margin-top: 34px; }

/* Scorecard popup */
.sc-modal { width: min(860px, 100% - 24px); max-height: min(92vh, 760px); padding: 0; border: 0; border-radius: 22px; overflow: auto; color: var(--ink);
  background: radial-gradient(90% 60% at 0% 0%, rgba(120,105,245,.22), transparent 70%), #121119;
  box-shadow: 0 0 0 1px rgba(196,181,253,.22) inset, 0 50px 100px -30px rgba(0,0,0,.9); }
.sc-modal::backdrop { background: rgba(6,6,10,.72); backdrop-filter: blur(6px); }
.sc-modal[open] { animation: scIn .35s var(--ease) both; }
@keyframes scIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.sc-x { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  color: #D6D6DE; background: rgba(255,255,255,.08); transition: background .2s, color .2s; }
.sc-x:hover { background: rgba(255,255,255,.16); color: #FFFFFF; }
.sc-head { padding: 34px 34px 6px; }
.sc-head h2 { margin: 14px 0 0; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; }
.sc-opts { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; padding: 24px 34px 34px; align-items: stretch; }
.sc-opt { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 16px; background: rgba(255,255,255,.03); box-shadow: 0 0 0 1px var(--line) inset; }
.sc-opt h3 { margin: 0 0 4px; font-size: 20px; }
.sc-k { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lavender); }
.sc-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.sc-field small { font-weight: 500; color: var(--faint); }
.sc-field input { height: 46px; padding: 0 14px; border: 0; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 500; color: var(--ink);
  background: rgba(255,255,255,.05); box-shadow: 0 0 0 1px var(--line-strong) inset; outline: none; transition: box-shadow .2s; }
.sc-field input::placeholder { color: #6E6E7C; }
.sc-field input:focus { box-shadow: 0 0 0 1.5px var(--lavender) inset, 0 0 0 4px rgba(196,181,253,.14); }
.sc-field input[aria-invalid="true"] { box-shadow: 0 0 0 1.5px #F2878F inset; }
.sc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sc-err { margin: 0; font-size: 13px; color: #F2A0A6; }
.sc-go { margin-top: 4px; justify-content: center; }
.sc-note { margin: 0; font-size: 13px; color: var(--faint); }
.sc-talk { justify-content: center; align-items: center; text-align: center;
  background: radial-gradient(120% 70% at 50% 0%, rgba(139,124,246,.16), transparent 65%), rgba(255,255,255,.03); }
.sc-face { position: relative; width: 76px; height: 76px; margin-bottom: 4px; border-radius: 50%; overflow: hidden; background: #221d4a;
  box-shadow: 0 0 0 2px rgba(196,181,253,.55), 0 0 0 7px rgba(139,124,246,.12); }
.sc-face img { position: absolute; width: 135%; height: 135%; max-width: none; left: -17%; top: -12%; }   /* face, shoulders and tee */
.sc-reply { margin-top: 2px; }
.sc-q { margin: 0; font-size: 16px; color: var(--muted); }
.sc-talk .sc-go { margin-top: 10px; align-self: stretch; }
.sc-done { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px;
  text-align: center; border-radius: inherit; background: #15141D; color: var(--lavender); }
.sc-done[hidden] { display: none; }
.sc-done h3 { color: var(--ink); }
.sc-done p { margin: 0; font-size: 14px; color: var(--muted); }
@media (max-width: 1180px) { .pkg-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; } }
@media (max-width: 680px) {
  .pkg-grid { grid-template-columns: 1fr; }
  .pkg.is-feat { margin-top: 0; }
  .sc-opts { grid-template-columns: 1fr; padding: 18px 20px 22px; } .sc-head { padding: 28px 20px 4px; }
}

/* Closing CTA */
.closing { text-align: center; padding: clamp(56px, 7vw, 96px) 0; overflow: hidden; }
.closing::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 900px; height: 520px; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(109,92,231,.22), transparent 72%);
}
.closing .wrap { position: relative; }
.closing img.sym { width: 72px; height: 72px; margin: 0 auto 30px; }
/* Closing B mark: still, no animation, no ring. Just the logo with a soft glow tight behind it */
.closing .sym-wrap { position: relative; display: block; width: 72px; height: 72px; margin: 0 auto 34px; }
.closing .sym-wrap img.sym { position: relative; z-index: 1; margin: 0; }
.closing .sym-wrap::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; pointer-events: none;   /* glow sits right behind the mark only */
  background: radial-gradient(closest-side, rgba(139,124,246,.42), rgba(92,156,255,.14) 55%, transparent); filter: blur(6px); }
.closing blockquote { margin: 0 auto 40px; max-width: 900px; font-size: clamp(26px, 3.4vw, 42px); font-weight: 700; letter-spacing: -.025em; line-height: 1.3; }
.closing blockquote span { color: var(--ink); }
.closing .sign { color: var(--muted); margin-bottom: 36px; font-size: 16px; }

footer { padding: 44px 0 28px; color: var(--faint); font-size: 14px; }
.foot-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
/* ---------- Help launcher (bottom-right): face button; hover or tap shows "Ask BrandOS" with "Contact us" under it ---------- */
.cfab {
  position: fixed; right: var(--gutter); bottom: calc(22px + var(--lift, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 45; width: 56px; height: 56px;
  opacity: 0; transform: translateY(18px) scale(.8); pointer-events: none; visibility: hidden;          /* hidden on the first screen */
  transition: opacity .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1), visibility 0s linear .45s;
}
.cfab.in { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
/* the gradient line that travels round the circle */
.cfab-ring {
  position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(196,181,253,0) 0deg, rgba(196,181,253,.15) 80deg, #C4B5FD 200deg, #8B7CF6 280deg, #5C9CFF 340deg, rgba(92,156,255,0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.2px));
  animation: cfabSpin 3.2s linear infinite;
}
@keyframes cfabSpin { to { transform: rotate(1turn); } }
.cfab-face {
  position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; overflow: hidden;
  color: #121018; background: #FFFFFF; box-shadow: 0 14px 30px -12px rgba(0,0,0,.75);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.cfab-face svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* The help face reacts to the visitor (same engine as "ChatBot Face Reaction"): mood comes from data-mood on .cfab
   (default · near · follow · happy · curious · surprised · excited · thinking · rest), blinking from .blink,
   gaze from --lx/--ly/--ex/--ey and head tilt from --tilt. */
:is(.cfab, .chat-av) { --lx: 0px; --ly: 0px; --ex: 0px; --ey: 0px; --tilt: 0deg; }
:is(.cfab, .chat-av) .head { transform-origin: 50px 54px; transform: rotate(var(--tilt)); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
:is(.cfab, .chat-av) .look { transform: translate(var(--lx), var(--ly)); }
:is(.cfab, .chat-av) .eyes { transform: translate(var(--ex), var(--ey)); }
:is(.cfab, .chat-av) .eye .ball { transform-box: fill-box; transform-origin: center; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), opacity .15s; }
:is(.cfab, .chat-av) .eye .lid { opacity: var(--lid, 0); transition: opacity .2s; }
:is(.cfab, .chat-av) .eye .arc { opacity: 0; transition: opacity .15s; }
:is(.cfab, .chat-av) .mouth, :is(.cfab, .chat-av) .nose { transition: d .32s cubic-bezier(.2, .7, .2, 1); }
:is(.cfab, .chat-av).blink .eye .ball { transform: scaleY(.12); transition-duration: .07s; }
:is(.cfab, .chat-av)[data-mood="happy"] .eye .ball, :is(.cfab, .chat-av)[data-mood="excited"] .eye .ball { opacity: 0; }
:is(.cfab, .chat-av)[data-mood="happy"] .eye .arc, :is(.cfab, .chat-av)[data-mood="excited"] .eye .arc { opacity: 1; }
:is(.cfab, .chat-av)[data-mood="surprised"] .eye .ball { transform: scale(1.3); }
:is(.cfab, .chat-av)[data-mood="surprised"] .eye .lid { opacity: 0; }
:is(.cfab, .chat-av) .brow { opacity: var(--lid, 0); transition: opacity .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
:is(.cfab, .chat-av)[data-mood="surprised"] .brow { opacity: 1; transform: translateY(-2.5px); }
:is(.cfab, .chat-av)[data-mood="happy"] .brow, :is(.cfab, .chat-av)[data-mood="excited"] .brow { opacity: 0; }
:is(.cfab, .chat-av) .blush { opacity: 0; transition: opacity .3s; }
:is(.cfab, .chat-av)[data-mood="happy"] .blush, :is(.cfab, .chat-av)[data-mood="excited"] .blush { opacity: .55; }
:is(.cfab, .chat-av)[data-mood="near"] .eye .ball { transform: scale(1.1); }
:is(.cfab, .chat-av) .cfab-fx { position: absolute; inset: -22px; pointer-events: none; z-index: 2; }
:is(.cfab, .chat-av) .cfab-fx svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cfab-fx .mk { stroke: var(--violet); stroke-width: 3.2; stroke-linecap: round; fill: none; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .2s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
:is(.cfab, .chat-av)[data-mood="happy"] .mk.tr, :is(.cfab, .chat-av)[data-mood="excited"] .mk:not(.ex) { opacity: 1; transform: none; }
:is(.cfab, .chat-av)[data-mood="excited"] .mk:not(.ex) { animation: botPop 1.1s cubic-bezier(.2, .7, .2, 1) infinite; }
:is(.cfab, .chat-av)[data-mood="excited"] .mk.tl { animation-delay: .25s; }
@keyframes botPop { 0%, 100% { transform: none; } 50% { transform: scale(1.25); } }
.cfab[data-mood="surprised"] .mk.ex { opacity: 1; transform: none; }
.cfab-tip {
  position: absolute; right: calc(100% + 14px); top: 50%; white-space: nowrap; pointer-events: none;
  padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink);
  border: 1px solid transparent;                                       /* outline only, in the Colour Kit gradient */
  background: linear-gradient(#16151F, #16151F) padding-box, linear-gradient(90deg, #D9CFFE 0%, #B3A8FA 55%, #8FB6FF 100%) border-box;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.9);
  opacity: 0; transform: translate(8px, -50%) scale(.95); transform-origin: right center;
  transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.cfab-tip b { color: var(--lavender); font-weight: 700; }
.cfab-tip::after { content: ""; position: absolute; right: -6px; top: 50%; width: 10px; height: 10px; border-radius: 0 2px 0 0; transform: translateY(-50%) rotate(45deg); background: #16151F; border-top: 1px solid #8FB6FF; border-right: 1px solid #8FB6FF; }
.cfab.tip .cfab-tip { opacity: 1; transform: translate(0, -50%); }
.cfab.show .cfab-tip, .cfab:hover .cfab-tip { opacity: 0; }
.cfab-face:hover, .cfab.show .cfab-face { transform: scale(1.05); }               /* no extra border on hover: the travelling line is the only ring */
.cfab-face:focus-visible { outline: 2px solid var(--lavender); outline-offset: 6px; }
/* the menu: a small card with two clear choices */
.cfab-menu {
  position: absolute; right: -4px; bottom: calc(100% + 16px); width: 292px; padding: 10px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(36,33,54,.98), rgba(24,23,31,.98));
  box-shadow: 0 0 0 1px var(--line-strong), 0 34px 70px -26px rgba(0,0,0,.95);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(12px) scale(.94); transform-origin: calc(100% - 30px) 100%; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .35s cubic-bezier(.34, 1.4, .64, 1), visibility 0s linear .35s;
}
.cfab-menu::before {                                                              /* little tail pointing at the face */
  content: ""; position: absolute; right: 24px; bottom: -6px; width: 12px; height: 12px; transform: rotate(45deg);
  background: rgba(24,23,31,.98); box-shadow: 1px 1px 0 0 var(--line-strong);
}
.cfab-menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; }   /* keeps hover alive across the gap */
.cfab:hover .cfab-menu, .cfab.show .cfab-menu, .cfab-menu:focus-within { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity .2s ease, transform .35s cubic-bezier(.34, 1.4, .64, 1); }
.cfab-hello { display: flex; align-items: center; gap: 11px; padding: 8px 8px 14px; font-size: 15px; color: var(--ink); }
.cfab-hello .hv { flex: none; width: 34px; height: 34px; border-radius: 50%; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23121018' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(50 50) scale(1.4) translate(-50 -54)'><circle cx='36' cy='44' r='5' fill='%23121018' stroke='none'/><circle cx='64' cy='44' r='5' fill='%23121018' stroke='none'/><path d='M53.5 39L47.5 58L56 58'/><path fill='%23121018' d='M38 67C44 74 56 74 62 67C56 74 44 74 38 67Z'/></g></svg>") center / 100% no-repeat, #FFFFFF; box-shadow: 0 0 0 2px rgba(196,181,253,.35); position: relative; }
.cfab-hello .hv::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #8B7CF6; box-shadow: 0 0 0 2px #24213A; }
.cfab-hello b { display: block; font-weight: 800; }
.cfab-hello small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.cfab-opt {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 11px; border-radius: 16px; cursor: pointer;
  font: inherit; text-align: left; color: var(--ink); border: 1px solid var(--line); background: rgba(255,255,255,.025);
  opacity: 0; transform: translateY(8px);
  transition: opacity .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1), background .2s, border-color .2s;
}
.cfab-opt + .cfab-opt { margin-top: 8px; }
.cfab:hover .cfab-opt, .cfab.show .cfab-opt, .cfab-menu:focus-within .cfab-opt { opacity: 1; transform: none; }
.cfab:hover .cfab-opt.ask, .cfab.show .cfab-opt.ask { transition-delay: .06s, .06s, 0s, 0s; }
.cfab:hover .cfab-opt:not(.ask), .cfab.show .cfab-opt:not(.ask) { transition-delay: .12s, .12s, 0s, 0s; }
.cfab-opt:hover { background: rgba(196,181,253,.08); border-color: rgba(196,181,253,.4); }
.cfab-opt.ask { background: linear-gradient(rgba(44,39,69,.9), rgba(44,39,69,.9)) padding-box, linear-gradient(120deg, #C4B5FD, #8B7CF6 50%, #5C9CFF) border-box; border-color: transparent; }
.cfab-opt.ask:hover { background: linear-gradient(rgba(52,46,82,.95), rgba(52,46,82,.95)) padding-box, linear-gradient(120deg, #C4B5FD, #8B7CF6 50%, #5C9CFF) border-box; }
.cfab-opt:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }
.cfab-opt .oi { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--lavender); background: rgba(196,181,253,.1); box-shadow: 0 0 0 1px var(--line) inset; }
.cfab-opt.ask .oi { color: #0F0F12; background: linear-gradient(135deg, #D9CFFE 0%, #B3A8FA 45%, #8FB6FF 100%); box-shadow: 0 6px 14px -8px rgba(0,0,0,.7); }
.cfab-opt .ot { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cfab-opt b { font-size: 15px; font-weight: 700; }
.cfab-opt small { font-size: 12.5px; color: var(--muted); }
.cfab-opt .oa { flex: none; color: var(--faint); transition: transform .2s var(--ease), color .2s; }
.cfab-opt:hover .oa { transform: translateX(3px); color: var(--lavender); }
.cfab-mail { display: block; padding: 10px 10px 4px; font-size: 12.5px; text-align: center; color: var(--muted); text-decoration: none; }
.cfab-mail:hover { color: var(--lavender); text-decoration: underline; text-underline-offset: 3px; }
.cfab-mail:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; border-radius: 6px; }
.chat.open ~ .cfab { visibility: hidden; }                                    /* the chat sits where the face is */
@media (max-width: 560px) { .cfab, .cfab-face { width: 50px; height: 50px; } }
@media print { .cfab { display: none; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ---------- Ecosystem tab (right edge): hover or tap slides out the brand list ---------- */
.eco { position: fixed; top: 50%; right: 0; z-index: 44; transform: translateY(-50%); transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1), visibility 0s linear 0s; }
/* while the ecosystem panel is open, the page behind it softly blurs and dims */
.eco-scrim { position: fixed; inset: 0; z-index: 43; pointer-events: none; opacity: 0; visibility: hidden;
  background: rgba(8,8,12,.38); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  transition: opacity .3s ease, visibility 0s linear .3s; }
body:has(.eco:not(.away):hover, .eco:not(.away):focus-within, .eco.open:not(.away)) .eco-scrim { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.eco.away { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(24px, -50%); transition: opacity .25s ease, transform .3s ease, visibility 0s linear .3s; }   /* only on the landing screen */
.eco-handle {
  display: flex; align-items: center; gap: 12px; padding: 18px 11px; cursor: pointer; writing-mode: vertical-rl;
  font: 500 11.5px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink); background: rgba(26,26,33,.92); border: 1px solid var(--line-strong); border-right: 0; border-radius: 14px 0 0 14px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .2s, padding .25s var(--ease);
}
.eco-handle::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px rgba(139,124,246,.22); }
.eco-handle:hover, .eco.open .eco-handle { background: rgba(36,34,52,.96); }
.eco-handle:focus-visible { outline: 2px solid var(--lavender); outline-offset: -3px; }
.eco-panel {
  position: absolute; top: 50%; right: 0; width: min(360px, calc(100vw - 70px)); padding: 20px; border-radius: 16px;
  background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong), 0 30px 80px -30px rgba(0,0,0,.85);
  transform: translate(104%, -50%); opacity: 0; visibility: hidden;
  transition: transform .38s cubic-bezier(.2, .8, .2, 1), opacity .3s, visibility .38s;
}
.eco:hover .eco-panel, .eco:focus-within .eco-panel, .eco.open .eco-panel { transform: translate(var(--eco-gap, -58px), -50%); opacity: 1; visibility: visible; }
.eco-panel::after { content: ""; position: absolute; top: 0; bottom: 0; right: -58px; width: 58px; }   /* keeps hover alive between panel and tab */
.eco-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; pointer-events: none; height: 16px; border: 2px solid transparent; border-bottom: 0; border-radius: 16px 16px 0 0; background: linear-gradient(90deg, #C4B5FD, #8B7CF6, #5C9CFF) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); }
.eco-sub { display: block; margin-bottom: 12px; font: 500 11px/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.eco-panel h4 { margin: 0 0 16px; font-size: 18px; font-weight: 900; letter-spacing: -.02em; color: var(--ink); }
/* the three brands sit on one rail: Builds → Scales → Multiplies */
.eco-list { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 8px; }
.eco-list::before { content: ""; position: absolute; left: 30px; top: 30px; bottom: 30px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #B3A8FA, rgba(139,124,246,.35) 45%, rgba(196,181,253,.12)); }
.eco-brand { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid transparent; color: inherit; text-decoration: none; }
.eco-brand.live { background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, rgba(196,181,253,.7), rgba(92,156,255,.45)) border-box; box-shadow: 0 14px 30px -18px rgba(0,0,0,.8); transition: transform .25s var(--ease); }
.eco-brand.live:hover { transform: translateX(-2px); }
.eco-brand.live:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }
.eco-brand.soon { background: rgba(255,255,255,.02); border-color: var(--line); cursor: default; }
.eco-brand .ico { position: relative; z-index: 1; flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-weight: 900; font-size: 14px; letter-spacing: -.02em; background: #F4F4F7; }
.eco-brand .ico img { width: 22px; height: 22px; object-fit: contain; }
.eco-brand .ico-soon { background: #F4F4F7; }
.eco-brand .ico-soon img { opacity: .55; filter: grayscale(.4); }
.eco-brand .lock { position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px; padding: 3px; border-radius: 50%; color: #0F0F12; background: var(--lavender); box-shadow: 0 0 0 2px var(--surface); }
.hide-name { display: block; width: 74px; }
.hide-name b { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(196,181,253,.16) 0%, rgba(196,181,253,.34) 50%, rgba(196,181,253,.16) 100%); background-size: 200% 100%; animation: veil 2.8s ease-in-out infinite; }
.eco-brand .t { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.eco-brand .nm { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.eco-brand .ds { font-size: 13px; line-height: 1.45; color: var(--muted); }
.eco-brand .here { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--lavender); }
/* details are veiled until launch: two soft bars with a slow shimmer say "something's here" without saying what */
.veil { display: grid; gap: 6px; padding-top: 3px; }
.veil b { display: block; height: 7px; border-radius: 4px; background: linear-gradient(90deg, rgba(196,181,253,.10) 0%, rgba(196,181,253,.26) 50%, rgba(196,181,253,.10) 100%); background-size: 200% 100%; animation: veil 2.8s ease-in-out infinite; }
.veil b:first-child { width: 92%; } .veil b:last-child { width: 58%; animation-delay: .2s; }
@keyframes veil { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.eco-badge { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 999px; border: 1px solid var(--line-strong); font: 600 11px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.eco-badge.on { color: #5BD69A; border-color: rgba(91,214,154,.4); background: rgba(91,214,154,.08); }
.eco-badge.on i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.eco-foot b { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 700; }
.eco-foot { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--muted); }
.eco-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--lavender); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.eco-link:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }
/* wires: from the tab's dot out to each brand, drawn in when the panel opens; the live one carries a flowing signal */
.eco-wires { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: -1; }
.eco-wires path { fill: none; stroke-linecap: round; }
.eco-wires .w { stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .55s cubic-bezier(.4, 0, .2, 1); }
.eco-wires .w.live { stroke: url(#ecoWireGrad); }
.eco-wires .w.soon { stroke: rgba(196,181,253,.32); }
.eco-wires .flow { stroke: #EDE8FF; stroke-width: 2; stroke-dasharray: 3 14; opacity: 0; transition: opacity .3s; animation: ecoFlow 1.1s linear infinite; }
.eco-wires .node { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.3); transition: opacity .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.eco-wires .node.live { fill: #C4B5FD; } .eco-wires .node.soon { fill: #2C2745; stroke: rgba(196,181,253,.55); stroke-width: 1.2; }
/* one wire: it rests on BrandOS and glides to whichever card the mouse is over */
.eco-wires .w { transition: stroke-dashoffset .55s cubic-bezier(.4, 0, .2, 1), d .45s cubic-bezier(.4, 0, .2, 1), stroke .3s; }
.eco-wires .flow { transition: opacity .3s, d .45s cubic-bezier(.4, 0, .2, 1); }
.eco-wires .node.end { transition: opacity .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1), cy .45s cubic-bezier(.4, 0, .2, 1), fill .3s; }
.eco.wired .eco-wires .w { stroke-dashoffset: 0; }
.eco.wired .eco-wires .node { opacity: 1; transform: scale(1); transition-delay: .3s, .3s, 0s, 0s; }
.eco.wired .eco-wires .flow { opacity: .9; transition-delay: .4s, 0s; }
.eco.wired .eco-wires .flow.off { opacity: 0; transition-delay: 0s; }
@keyframes ecoFlow { to { stroke-dashoffset: -17; } }
@media (max-width: 560px) { .eco-handle { padding: 14px 8px; font-size: 11px; gap: 10px; } .eco { --eco-gap: -52px; } .eco-wires { display: none; } }
@media print { .eco { display: none; } }

/* ---------- Ask BrandOS chat (opens from the help face, bottom-right) ---------- */
.chat { position: fixed; right: var(--gutter); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 46; }
.chat-panel {
  position: absolute; right: 0; bottom: 0; width: min(380px, calc(100vw - 2 * var(--gutter))); height: min(560px, calc(100dvh - 120px));
  display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--surface);
  box-shadow: 0 0 0 1px var(--line-strong), 0 40px 80px -30px rgba(0,0,0,.9);
  transform-origin: bottom right; animation: chatIn .32s cubic-bezier(.2, .8, .2, 1);
}
.chat-panel[hidden] { display: none; }
@keyframes chatIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px 18px; border-bottom: 1px solid var(--line); position: relative; }
.chat-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; pointer-events: none; height: 20px; border: 2px solid transparent; border-bottom: 0; border-radius: 20px 20px 0 0; background: linear-gradient(90deg, #C4B5FD, #8B7CF6, #5C9CFF) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); }
.chat-head h2 { margin: 0; font-size: 16px; font-weight: 900; letter-spacing: -.01em; color: var(--ink); }
.chat-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
/* the help face lives in the chat too: it thinks while an answer is on its way, smiles when it arrives, and blinks */
.chat-av { position: relative; flex: none; width: 38px; height: 38px; }
.chat-av .chat-face { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; color: #121018; background: #FFFFFF; box-shadow: 0 0 0 2px rgba(196,181,253,.35); }
.chat-av .chat-face svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chat-av .cfab-fx { inset: -14px; }
.chat-av .cfab-fx .mk { stroke-width: 4.5; }
.chat-online { display: inline-flex; align-items: center; gap: 5px; color: #7FE0AE; font-weight: 600; }
.chat-online::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5BD69A; }   /* the online dot sits by the text, clear of the face */
.chat-x { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--muted); background: transparent; }
.chat-x:hover { color: var(--ink); background: rgba(196,181,253,.08); }
.chat-x:focus-visible { outline: 2px solid var(--lavender); outline-offset: 1px; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.msg { max-width: 86%; padding: 10px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; }
.msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.bot { align-self: flex-start; color: var(--ink); background: rgba(196,181,253,.07); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg.me { align-self: flex-end; color: #0F0F12; background: linear-gradient(135deg, #D9CFFE, #B3A8FA); border-bottom-right-radius: 6px; }
.msg .chat-cta { margin-top: 10px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; font: 700 13px/1 var(--font); color: #0F0F12; background: linear-gradient(90deg, #D9CFFE 0%, #B3A8FA 45%, #8FB6FF 100%); }
.msg .chat-cta:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }
.msg.bot { position: relative; margin-left: 26px; }
.msg.bot::before {                                       /* small face beside each BrandOS reply */
  content: ""; position: absolute; left: -25px; bottom: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23121018' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(50 50) scale(1.1) translate(-50 -54)'><circle cx='36' cy='44' r='5' fill='%23121018' stroke='none'/><circle cx='64' cy='44' r='5' fill='%23121018' stroke='none'/><path d='M53.5 39L47.5 58L56 58'/><path fill='%23121018' d='M38 67C44 74 56 74 62 67C56 74 44 74 38 67Z'/></g></svg>") center / 100% no-repeat, #FFFFFF; box-shadow: 0 0 0 1px rgba(196,181,253,.35);
}
.msg.typing { display: flex; gap: 5px; padding: 14px; }
.msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--lavender); animation: chatDot 1.1s infinite ease-in-out; }
.msg.typing i:nth-child(2) { animation-delay: .15s; } .msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chatDot { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.chat-chips[hidden] { display: none; }
.chat-chips button { padding: 7px 11px; border-radius: 999px; cursor: pointer; font: 500 12.5px/1.2 var(--font); color: var(--ink); background: transparent; border: 1px solid var(--line-strong); text-align: left; }
.chat-chips button:hover { border-color: rgba(196,181,253,.5); background: rgba(196,181,253,.06); }
.chat-chips button:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }
.chat-form { display: flex; align-items: flex-end; gap: 8px; margin: 0 12px; padding: 6px 6px 6px 14px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line-strong); }
.chat-form:focus-within { border-color: rgba(196,181,253,.55); box-shadow: 0 0 0 4px rgba(120,105,245,.16); }
.chat-form textarea { flex: 1; min-width: 0; max-height: 110px; resize: none; padding: 8px 0; border: 0; outline: none; background: transparent; font: 400 16px/1.4 var(--font); color: var(--ink); }
.chat-form textarea::placeholder { color: #80808E; }
.chat-send { flex: none; width: 38px; height: 38px; border-radius: 12px; border: 0; cursor: pointer; display: grid; place-items: center; color: #0F0F12; background: linear-gradient(135deg, #D9CFFE 0%, #B3A8FA 45%, #8FB6FF 100%); }
.chat-send:disabled { opacity: .45; cursor: default; }
.chat-send:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }
.chat-note { margin: 0; padding: 9px 16px 12px; font-size: 12.5px; color: var(--faint); text-align: center; }
.chat-link { padding: 0; border: 0; background: none; font: inherit; color: var(--lavender); text-decoration: underline; cursor: pointer; }
@media (max-width: 560px) {
  .chat-panel { height: min(560px, calc(100dvh - 100px)); }
}
@media print { .chat { display: none; } }


/* Contact form heading */
.ct-form-head { margin: 0 44px 16px 0; padding-bottom: 14px; border-bottom: 1px solid var(--c-line, #E1E5F0); }
.ct-form-head h3 { margin: 0 0 4px; font-size: 24px; font-weight: 900; letter-spacing: -.02em; color: var(--c-ink, #16182A); }
.ct-form-head p { margin: 0; font-size: 14px; color: var(--c-muted, #5A5F78); }
.ct-success.show ~ * , .ct-main:has(.ct-success.show) .ct-form-head { display: none; }   /* hide the heading on the thank-you screen */

/* ---------- Contact us ---------- */
.nav-contact {
  display: inline-flex; align-items: center; white-space: nowrap; padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--ink); background-color: transparent;
  transition: background-color .2s ease, transform .2s cubic-bezier(.23, 1, .32, 1);
}
@media (hover: hover) and (pointer: fine) { .nav-contact:hover { transform: translateY(-1px); background-color: rgba(196,181,253,.16); } }
.nav-contact:active { transform: scale(.97); transition-duration: .1s; }
.nav-contact:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }
@media (max-width: 1080px) { .nav-contact { display: block; width: 100%; padding: 14px 16px; font-size: 17px; border-radius: 12px; text-align: left; } }
/* Waiting-list form: tighter spacing between rows so it fits on screen without scrolling.
   Fields and boxes keep their size; only the gaps around them shrink. */
dialog.modal#waitlist { max-height: min(96vh, 980px); }
#waitlist .m-head { padding: 20px 30px 12px; }
#waitlist .m-head h2 { margin: 2px 0 4px; }
#waitlist .m-body { padding: 14px 30px 16px; }
#waitlist .field { gap: 4px; margin-bottom: 8px; }
#waitlist .grid-2 { gap: 14px; }
#waitlist .consent { margin: 14px 0 10px; }   /* a little lower, clear of the start-date chips */
#waitlist #wl-submit { --h: 44px; padding: 0 20px; font-size: 15px; }   /* slimmer button, no extra padding */
#waitlist .form-error { margin-bottom: 10px; }

.wl-need .field { min-width: 0; }
/* Brand dropdowns: replace the browser's own select list (which highlights in system blue) */
.csel { position: relative; }
.csel-btn {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer;
  font: 400 16px/1.4 var(--font); color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 13px 38px 13px 14px; transition: border-color .2s, box-shadow .2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23B4B4C0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.csel-btn .v { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csel-btn .v.ph { color: #80808E; }
.csel-btn:hover { border-color: rgba(196,181,253,.34); }
.csel-btn:focus-visible, .csel.open .csel-btn { outline: none; border-color: var(--core); box-shadow: 0 0 0 4px rgba(120,105,245,.2); }
.field.invalid .csel-btn { border-color: #F07A8C; }
.csel-list.cc-list { width: 100%; max-height: none; overflow: visible; }   /* short lists: every option visible, no inner scroll */
.cc-list.csel-list li { display: block; padding: 10px 12px; }   /* plain rows, not the country-code grid */
.cc-list.csel-list li[aria-selected="true"] { color: var(--lavender); font-weight: 700; }
/* light contact form version */
.contact-modal .csel-btn {
  font-size: 15px; padding-top: 10px; padding-bottom: 10px; color: var(--c-ink); background-color: var(--c-field); border-color: var(--c-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%235A5F78' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.contact-modal .ct-input .csel-btn { padding-left: 44px; }
.contact-modal .csel-btn .v.ph { color: #6B7089; }
.contact-modal .csel-btn:focus-visible, .contact-modal .csel.open .csel-btn { border-color: var(--c-accent); box-shadow: 0 0 0 4px rgba(109,92,231,.16); background-color: #FFFFFF; }
.contact-modal .field.invalid .csel-btn { border-color: #C8233F; background-color: #FFF6F7; }
.contact-modal .csel-list li[aria-selected="true"] { color: var(--c-accent); }

/* Waiting-list header: one plain colour, the same as the form below (thin divider keeps them apart) */
#waitlist .m-head {
  border-bottom-color: var(--line);
  background: var(--surface);
}
#waitlist .m-head h2 { color: #FFFFFF; }
#waitlist .m-head p { color: #C9CDEE; }
#waitlist .m-head .x { background: rgba(255,255,255,.08); color: #D6D6DE; }
#waitlist .m-head .x:hover { background: rgba(255,255,255,.16); color: #FFFFFF; }

/* Contact dialog: two panels. Deep indigo info panel + clean white form with a Signal Blue accent */
dialog.modal.contact-modal {
  --c-ink: #16182A; --c-muted: #5A5F78; --c-field: #FFFFFF; --c-line: #E1E5F0; --c-accent: #6D5CE7; --c-accent-2: #5B4AD6;   /* Royal Violet, matches the panel */
  width: min(940px, 100% - 24px); max-height: min(94vh, 980px); background: #F4F4F7; color: var(--c-ink);   /* Light Stock */
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.85);
}
.ct-layout { display: grid; grid-template-columns: 270px 1fr; min-height: 0; flex: 1; overflow: hidden; }
.ct-side {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px 26px; color: #E8EAFF; overflow: hidden;
  background:   /* same ground as the footer */
    radial-gradient(110% 55% at 0% 0%, rgba(120,105,245,.30), transparent 70%),
    radial-gradient(110% 55% at 100% 100%, rgba(92,156,255,.18), transparent 70%),
    linear-gradient(160deg, #17152A, #131218 55%, #13151F);
}
.ct-side::after {   /* faint dot grid for texture */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(255,255,255,.28) 1px, transparent 1.2px); background-size: 18px 18px;
  -webkit-mask: linear-gradient(200deg, #000, transparent 70%); mask: linear-gradient(200deg, #000, transparent 70%);
}
.ct-side > * { position: relative; z-index: 1; }
/* Water in the contact panel: rings ripple out from the B mark, like the footer */
.ct-side > .ct-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.wave-logo { position: relative; display: inline-block; width: max-content; align-self: flex-start; line-height: 0; vertical-align: top; }   /* hugs the logo, even in flex columns */
.wave-logo .ct-logo { margin-bottom: 0; }
.ct-side .wave-logo { margin-bottom: 14px; }
.ct-logo { display: block; width: 132px; height: auto; margin-bottom: 14px; }
.ct-side h2 { margin: 0; font-size: 30px; font-weight: 900; letter-spacing: -.03em; color: #FFFFFF; }
.ct-side p { margin: 0; color: #C9CDEE; font-size: 15px; line-height: 1.6; }
.ct-facts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px; }
.ct-facts li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: #FFFFFF; }
.ct-facts small { display: block; margin-bottom: 1px; color: #C6CBF2; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }   /* ≥5.5:1 across the whole indigo gradient */
.ct-facts a { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; }
.ct-facts a:hover { text-decoration-color: #FFFFFF; }
.ct-fi { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #FFFFFF; }
.ct-main { padding: 26px 30px 22px; overflow-y: auto; overscroll-behavior: contain; }
.ct-x {
  position: absolute; z-index: 5; top: 14px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--c-muted); background: #EEF1F7; transition: background .2s, color .2s;
}
.ct-x:hover { background: #E1E6F0; color: var(--c-ink); }
.ct-x:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.contact-modal .field { gap: 5px; margin-bottom: 11px; }
.contact-modal .grid-2 { gap: 12px; }
.contact-modal .field input, .contact-modal .field select { padding-top: 10px; padding-bottom: 10px; font-size: 15px; }
.contact-modal .field textarea { min-height: 84px; padding: 10px 14px; font-size: 15px; }
.contact-modal .field label { color: var(--c-ink); font-size: 13px; font-weight: 700; }
.contact-modal .field label .opt { color: var(--c-muted); font-weight: 500; }
.contact-modal .req { color: #C8233F; margin-left: 2px; }
/* Filled fields with an icon; focus lifts the field to white with a blue ring */
.ct-input { position: relative; }
.ct-input .ct-ic { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: #8A90A8; pointer-events: none; transition: color .2s; }
.ct-input:focus-within .ct-ic { color: var(--c-accent); }
.contact-modal .field input, .contact-modal .field textarea, .contact-modal .field select {
  background: var(--c-field); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: 12px; box-shadow: none;
}
.contact-modal .ct-input input, .contact-modal .ct-input select { padding-left: 44px; }
.contact-modal .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%235A5F78' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; cursor: pointer;
}
.contact-modal .field select:invalid { color: #6B7089; }
.contact-modal .field select option { background: #FFFFFF; color: var(--c-ink); }
.contact-modal .field input::placeholder, .contact-modal .field textarea::placeholder { color: #6B7089; }
.contact-modal .field input:hover, .contact-modal .field textarea:hover, .contact-modal .field select:hover { border-color: var(--c-line); }
.contact-modal .field input:focus, .contact-modal .field textarea:focus, .contact-modal .field select:focus {
  background-color: #FFFFFF; border-color: var(--c-accent); box-shadow: 0 0 0 4px rgba(109,92,231,.16);
}
.contact-modal .field.invalid input, .contact-modal .field.invalid textarea, .contact-modal .field.invalid select { border-color: #C8233F; background-color: #FFF6F7; }
.contact-modal .field .err { color: #B01E38; }
/* Message: a thin bar fills as the message grows towards the limit */
.ct-meter { height: 3px; border-radius: 3px; background: var(--c-line); overflow: hidden; }
.ct-meter i { display: block; height: 100%; width: 0; background: var(--c-accent); transition: width .2s, background .2s; }
.ct-count { justify-self: end; margin-top: -3px; line-height: 1; color: var(--c-muted); font-size: 12px; }
.ct-heard-row .field[hidden] { display: none; }
.ct-select input[readonly] { cursor: pointer; caret-color: transparent; }
.ct-select input { padding-right: 38px; }
.ct-select-btn { position: absolute; right: 6px; top: 50%; translate: 0 -50%; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; cursor: pointer; display: grid; place-items: center; }
.ct-select-btn svg { transition: transform .2s; }
.ct-select.open .ct-select-btn svg { transform: rotate(180deg); }
.contact-modal .ct-subj-list { width: 100%; max-height: none; }   /* all 7 subjects visible, no inner scroll */
.contact-modal .ct-subj-list li { display: block; padding: 9px 12px; font-size: 14.5px; }
.contact-modal .ct-subj-list li em { font-style: normal; color: var(--c-muted); font-size: 13px; }
.contact-modal .ct-subj-list li[aria-selected="true"] { font-weight: 700; color: var(--c-accent); }
.ct-quote { margin: auto 0 0; padding: 16px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.ct-quote blockquote { margin: 0 0 12px; color: #FFFFFF; font-size: 15px; font-weight: 700; line-height: 1.45; letter-spacing: -.01em; }
.ct-quote figcaption { display: flex; align-items: center; gap: 14px; }
.ct-qphoto { position: relative; flex: none; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: #221d4a; box-shadow: 0 0 0 1px rgba(196,181,253,.45); }
.ct-qphoto img { position: absolute; width: 165%; height: 165%; max-width: none; left: -30%; top: -16%; transform: scaleX(-1); }
.ct-quote strong { display: block; margin-bottom: 2px; color: #FFFFFF; font-size: 15px; }
.ct-quote small { display: block; color: #C6CBF2; font-size: 12.5px; line-height: 1.45; }
@media (max-width: 820px) { .ct-quote { display: none; } }   /* phones: keep the form close to the top */
.contact-modal .ct-phone { grid-template-columns: 122px 1fr; gap: 8px; }
.contact-modal .cc-input { padding-left: 14px; padding-right: 30px; }
.contact-modal .cc-list { width: 290px; max-height: 240px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--c-line), 0 18px 40px -14px rgba(22,24,42,.3); }
.contact-modal .cc-list li { color: var(--c-ink); }
.contact-modal .cc-list li .code { color: var(--c-accent); font-weight: 700; }
.contact-modal .cc-list li .dial { color: var(--c-muted); }
.contact-modal .cc-list li.active, .contact-modal .cc-list li:hover { background: #F0EDFF; color: var(--c-ink); }
.contact-modal .cc-list .none { color: var(--c-muted); }
#ct-email { text-transform: lowercase; }   /* shows lowercase while typing; the value is lowercased too */
#ct-email::placeholder { text-transform: none; }
.ct-news {
  display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; padding: 10px 14px; border-radius: 14px; cursor: pointer;
  background: #EFECFE; border: 1px solid #DDD6FE; color: var(--c-ink); font-size: 14px; line-height: 1.5;
}
.ct-news input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--c-accent); cursor: pointer; }
.ct-news em { font-style: normal; font-weight: 700; color: var(--c-accent); }
.ct-news span { color: var(--c-muted); }
.contact-modal .form-error { color: #8F1A30; background: #FFF0F2; box-shadow: 0 0 0 1px #F5BAC5 inset; }
.ct-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; }
.ct-foot small { color: var(--c-muted); font-size: 13px; }
.ct-submit {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 26px; border: 0; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 15.5px; font-weight: 700; color: #FFFFFF;
  background:   /* the side panel's gradient */
    radial-gradient(120% 160% at 0% 0%, rgba(120,105,245,.75), transparent 60%),
    radial-gradient(120% 160% at 100% 100%, rgba(92,156,255,.45), transparent 60%),
    linear-gradient(120deg, #17152A, #131218 55%, #13151F);
  background-size: 140% 140%; background-position: 0% 0%;
  box-shadow: 0 8px 18px -10px rgba(22,24,42,.45); transition: background-position .5s var(--ease), transform .2s var(--ease), box-shadow .2s;
}
.ct-submit:hover { background-position: 100% 100%; transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(22,24,42,.5); }
.ct-submit:active { transform: scale(.98); }
.ct-submit:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.ct-submit .spinner { border-color: rgba(255,255,255,.35); border-top-color: #FFFFFF; }
.ct-submit[aria-busy="true"] .spinner { display: inline-block; }
.ct-success { display: none; text-align: center; padding: 50px 10px 30px; }
.ct-success.show { display: block; }
.ct-ring { width: 80px; height: 80px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; color: var(--c-accent); background: #F0EDFF; }
.ct-ring path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .6s .15s var(--ease) forwards; }
.ct-success h2 { margin: 0 0 10px; font-size: 30px; font-weight: 900; color: var(--c-ink); }
.ct-success p { max-width: 44ch; margin: 0 auto 26px; color: var(--c-muted); }
.ct-success strong { color: var(--c-ink); }
@media (max-width: 820px) {
  .ct-layout { grid-template-columns: 1fr; grid-template-rows: max-content max-content; overflow-y: auto; }   /* panel keeps its full height, the whole card scrolls */
  .ct-side { padding: 26px 22px 20px; }
  .ct-side h2 { font-size: 28px; }
  .ct-logo { width: 116px; margin-bottom: 8px; }
  .ct-facts { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
  .ct-facts li:last-child { grid-column: 1 / -1; }
  .ct-main { overflow: visible; padding: 26px 22px 24px; }
  .ct-x { background: rgba(255,255,255,.14); color: #FFFFFF; }
}
@media (max-width: 560px) { .ct-facts { grid-template-columns: 1fr; } .ct-submit { width: 100%; justify-content: center; } }

/* ---------- Address button + map dialog ---------- */
.foot-addr {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-2); background: rgba(196,181,253,.06); box-shadow: 0 0 0 1px var(--line-strong) inset;
  transition: background .2s, color .2s, transform .2s var(--ease);
}
.foot-addr[hidden] { display: none; }
.foot-addr svg { flex: none; color: var(--lavender); transition: color .2s; }
.foot-addr:hover { background: var(--lavender); color: #0F0F12; }
.foot-addr:hover svg { color: #0F0F12; }
.foot-addr:active { transform: scale(.97); }
.foot-addr:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; }
dialog.addr-modal { width: min(620px, 100% - 24px); }
.addr-text { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.addr-text strong { color: #FFFFFF; font-weight: 700; }
.addr-map { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--line) inset;
  background: radial-gradient(70% 80% at 85% 70%, rgba(120,105,245,.14), transparent 70%), #14131c; }
.wm-stage { position: relative; height: 300px; overflow: hidden; }
.wm-map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none;
  filter: invert(.9) hue-rotate(200deg) saturate(.55) brightness(.9) contrast(.95); }   /* dark Google map to match the page */
.wm-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none;   /* soft brand tint + vignette over the map */
  background: radial-gradient(80% 90% at 50% 50%, transparent 55%, rgba(20,19,28,.75)), linear-gradient(rgba(60,45,140,.16), rgba(60,45,140,.16)); }
.wm { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; }
.wm-grid path { stroke: rgba(196,181,253,.06); stroke-width: 1; }
.wm-arc { fill: none; stroke: rgba(160,150,250,.55); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 3 6; animation: wmFlow 1.6s linear infinite; animation-delay: var(--d); }
@keyframes wmFlow { to { stroke-dashoffset: -18; } }
.wm-dot { fill: #8FB6FF; }
.wm-dot.hq { fill: #C4B5FD; }
.wm-ring { fill: none; stroke: #8FB6FF; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: wmPing 2.6s ease-out infinite; animation-delay: var(--d, 0s); }
.wm-ring.hq { stroke: #C4B5FD; }
@keyframes wmPing { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.wm text { fill: #E8EAFF; font: 600 12px/1 var(--font); letter-spacing: .01em; paint-order: stroke; stroke: #14131c; stroke-width: 4px; }
.wm-hq text { fill: #FFFFFF; font-weight: 700; font-size: 13px; }
.wm-clocks { list-style: none; margin: 0; padding: 10px 12px 12px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; border-top: 1px solid var(--line); }
.wm-clocks li { display: grid; gap: 2px; text-align: center; font-size: 11.5px; color: var(--muted); }
.wm-clocks b { color: #FFFFFF; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wm-clocks li:first-child b { color: #C4B5FD; }
.addr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
@media (max-width: 520px) { .wm-clocks { grid-template-columns: repeat(3, 1fr); } }

.cta-reach { margin: 16px auto 0; max-width: 560px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.cta-reach span { white-space: nowrap; }
@media (max-width: 560px) { .cta-reach span { white-space: normal; } }

/* ---------- What BrandOS is ----------
   Two system windows. Left: "About BrandOS", a dictionary-style entry and its spec sheet.
   Right: what it isn't (struck through as it arrives) filtered down to what it is, kept in a lit panel.
   Below: the closer, typed at a system prompt. */
.wb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.wb-win { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 60% at 0% 0%, rgba(139,124,246,.10), transparent 60%), #121119;
  box-shadow: 0 0 0 1px var(--line) inset, 0 30px 60px -40px rgba(0,0,0,.9); transition: box-shadow .35s ease, transform .35s var(--ease); }
/* at rest: a soft brand-gradient edge, brightest at the top-left corner */
.wb-win::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--wb-a, 0deg) at 50% 50%, rgba(196,181,253,.0) 0deg, rgba(196,181,253,.0) 200deg, rgba(196,181,253,.55) 270deg, rgba(92,156,255,.45) 315deg, rgba(196,181,253,.0) 360deg),
              linear-gradient(140deg, rgba(196,181,253,.38), rgba(255,255,255,.06) 35%, rgba(255,255,255,.04) 70%, rgba(92,156,255,.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .9; transition: opacity .4s ease; }
/* on hover: the light travels round the edge, the corner glow warms and the window lifts */
.wb-win::after { animation: wbOrbit 9s linear infinite; }                   /* colour always travels round the edge */
.wb-win:nth-of-type(2)::after { animation-delay: -4.5s; }
.wb-win:hover::after { animation-duration: 4s; opacity: 1; }
.wb-win.in:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(196,181,253,.18) inset, 0 40px 80px -40px rgba(0,0,0,.95); }
.wb-win { background-size: 100% 100%; transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease, background .45s ease; }
.wb-win:hover { background: radial-gradient(120% 70% at 0% 0%, rgba(139,124,246,.18), transparent 62%), #13121B; }
.wb-win > .wb-spot { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(196,181,253,.10), rgba(92,156,255,.04) 40%, transparent 70%); }
.wb-win:hover > .wb-spot { opacity: 1; }
.wb-win > .wb-bar, .wb-win > .wb-pane { position: relative; z-index: 1; }
.wb-bar { transition: background .4s ease; }
.wb-win:hover .wb-bar { background: linear-gradient(90deg, rgba(139,124,246,.14), rgba(255,255,255,.02) 60%); }
.wb-win:hover .wb-bar i:nth-child(2) { background: #A599F7; } .wb-win:hover .wb-bar i:nth-child(3) { background: #5C9CFF; }
.wb-bar i { transition: background .3s ease; }
.wb-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.025); }
.wb-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.14); }
.wb-bar i:first-child { background: #8B7CF6; }
.wb-bar span { margin-left: 10px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.wb-pane { flex: 1; display: flex; flex-direction: column; padding: 28px 30px 30px; }
.wb-is .wb-pane { justify-content: center; }
.wb-entry { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px dashed rgba(196,181,253,.22); }
.wb-word { font-size: clamp(32px, 3.2vw, 42px); font-weight: 900; letter-spacing: -.03em; line-height: 1; color: #FFFFFF; }
.wb-word b { font-weight: 900; background: linear-gradient(90deg, #C4B5FD, #8B7CF6 50%, #5C9CFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wb-pos { font-size: 14px; font-style: italic; color: var(--muted); }
.wb-logo { display: block; height: clamp(22px, 2.1vw, 28px); width: auto; }
.wb-entry { align-items: center; position: relative; border-bottom: 0; }
.wb-entry::after, .wb-keep::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(196,181,253,.15), #C4B5FD, #8B7CF6, #5C9CFF, rgba(92,156,255,.15), rgba(196,181,253,.15)) 0 0 / 200% 100%;
  animation: wbLine 6s linear infinite; }
.wb-entry::after { bottom: 0; opacity: .55; }
@keyframes wbLine { to { background-position: -200% 0; } }
.wb-def { margin: 0; font-size: 18px; line-height: 1.65; color: var(--ink); }
.wb-label { margin: 26px 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--lavender); }
.wb-pane > .wb-label:first-child { margin-top: 0; }
.wb-spec { margin: 0; display: grid; gap: 2px; }
.wb-spec div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 9px 0; }
.wb-spec div::after { content: ""; grid-column: 2; grid-row: 1; height: 1px; align-self: center;      /* dotted leader between label and value */
  background: radial-gradient(circle, rgba(196,181,253,.35) 1px, transparent 1.4px) 0 0 / 7px 2px repeat-x; }
.wb-spec dt { grid-column: 1; grid-row: 1; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.wb-spec dd { grid-column: 3; grid-row: 1; margin: 0; color: #FFFFFF; font-size: 15px; font-weight: 600; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; text-align: right; }
.wb-spec dd span { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #E8EAFF; box-shadow: 0 0 0 1px rgba(196,181,253,.28) inset; }
.wb-is ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.wb-is li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.wb-is li svg { flex: none; width: 24px; height: 24px; padding: 5px; border-radius: 50%; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wb-no li { color: #8E8E9C; }
.wb-no li svg { stroke: #8E8E9C; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset; }
.wb-keep { position: relative; padding-top: 26px; margin-top: 30px; }      /* what's left once the rest is crossed out: no box, just a lit rule above */
.wb-keep::before { top: 0; }
.wb-is .wb-no { margin-bottom: 0; }
.wb-keep .wb-label { margin-top: 0; color: transparent; background: linear-gradient(90deg, #E4DCFF, #C4B5FD 45%, #9DBEFF); -webkit-background-clip: text; background-clip: text; }
.wb-yes { gap: 12px !important; }
.wb-yes li { position: relative; align-items: center !important; gap: 14px !important; padding: 14px 16px; border-radius: 14px; color: #FFFFFF; font-weight: 500; font-size: 16.5px; line-height: 1.4;
  background: linear-gradient(90deg, rgba(139,124,246,.16), rgba(92,156,255,.05) 70%, transparent);
  box-shadow: inset 2px 0 0 #8B7CF6; overflow: hidden; transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .35s ease; }
.wb-yes li::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); pointer-events: none;     /* a sheen passes once as each row arrives */
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.10) 50%, transparent 70%); }
.wb-is.in .wb-yes li::after { animation: wbSheen 1.4s ease calc(1.5s + (var(--i) - 4) * .3s) both; }
@keyframes wbSheen { to { transform: translateX(100%); } }
.wb-yes li:hover { transform: translateX(4px); background: linear-gradient(90deg, rgba(139,124,246,.24), rgba(92,156,255,.08) 70%, transparent); }
.wb-yes .ck { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; }
.wb-yes .ck::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1.5px;            /* a ring of brand colour turns round the tick */
  background: conic-gradient(from var(--wb-a, 0deg), #C4B5FD, #8B7CF6, #5C9CFF, rgba(92,156,255,0) 70%, #C4B5FD);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: wbOrbit 4s linear infinite; }
.wb-yes li:nth-child(2) .ck::before { animation-delay: -2s; }
.wb-yes .ck svg { width: 26px !important; height: 26px !important; padding: 6px !important; }
.wb-yes li svg { stroke: #0F0F12; background: linear-gradient(135deg, #D9CFFE, #B3A8FA 50%, #8FB6FF); }
.wb-closer { margin-top: 22px; display: flex; align-items: center; gap: 18px; padding: 24px 30px; border-radius: 18px;
  background: #121119; box-shadow: 0 0 0 1px rgba(196,181,253,.22) inset; }
.wb-prompt { flex: none; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--lavender); padding: 6px 12px; border-radius: 10px; background: rgba(196,181,253,.08); }
.wb-closer p { margin: 0; font-size: clamp(18px, 1.8vw, 23px); font-weight: 700; letter-spacing: -.02em; line-height: 1.35; color: #FFFFFF; }
.wb-caret { display: inline-block; width: .5em; height: .95em; margin-left: .18em; vertical-align: -.12em; border-radius: 2px; background: #C4B5FD; animation: wbCaret 1.1s steps(1) infinite; }
@keyframes wbCaret { 50% { opacity: 0; } }
@media (max-width: 900px) { .wb-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .wb-pane { padding: 22px; } .wb-def { font-size: 16.5px; }
  .wb-spec div { grid-template-columns: 1fr; gap: 6px; } .wb-spec div::after { display: none; }
  .wb-spec dt, .wb-spec dd { grid-column: 1; grid-row: auto; justify-content: flex-start; text-align: left; }
  .wb-closer { flex-direction: column; align-items: flex-start; padding: 22px; }
}
/* Spec sheet motion: each dotted leader draws out from its label, the value lands, then a small light keeps
   running along the leader towards the value, like data flowing into the sheet */
.wb-spec div::after { transform: scaleX(0); transform-origin: left center; transition: transform .7s var(--ease) calc(.3s + var(--i) * .14s); }
.wb-spec dd { opacity: 0; transform: translateX(8px); transition: opacity .5s ease calc(.7s + var(--i) * .14s), transform .5s var(--ease) calc(.7s + var(--i) * .14s); }
.wb-answer.in .wb-spec div::after { transform: scaleX(1); }
.wb-answer.in .wb-spec dd { opacity: 1; transform: none; }
.wb-spec div { border-radius: 10px; transition: background-color .3s ease; }
.wb-spec div:hover { background-color: rgba(196,181,253,.04); }
.wb-spec div:hover dt { color: #FFFFFF; }
.wb-spec div::before { content: ""; grid-column: 2; grid-row: 1; align-self: center; height: 1.5px; border-radius: 2px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(196,181,253,.2), #C4B5FD 40%, #8B7CF6 75%, #FFFFFF); transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease; }
.wb-answer.in .wb-spec div:hover::before { transform: scaleX(1); transition: transform 1.4s cubic-bezier(.45, 0, .25, 1); }   /* runs slowly label -> value */
.wb-answer.in .wb-spec div:hover dd { color: #C4B5FD; transform: translateX(3px); transition: color .35s ease 1.25s, transform .45s cubic-bezier(.34, 1.56, .64, 1) 1.25s; }
.wb-answer.in .wb-spec div:hover dd span { box-shadow: 0 0 0 1px rgba(196,181,253,.7) inset; color: #FFFFFF; transition: box-shadow .35s ease 1.25s, color .35s ease 1.25s; }
.wb-spec dt, .wb-spec dd { transition: color .3s ease, opacity .5s ease, transform .5s var(--ease); }

/* "What it isn't": one effect, on a loop. Every 5 seconds a small pen glides slowly along the next line and
   inks a hand-drawn strike through it; the words stay fully visible. When all four are struck, only the ink
   lines fade out, and the pen starts again from the left (it never rewinds). */
.wb-no li span { position: relative; color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg, #C9C9D6 0 50%, #C9C9D6 50% 100%) 100% 0 / 200% 100% no-repeat !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  transition: background-position 2s cubic-bezier(.4, 0, .3, 1), opacity .45s ease !important; }
.wb-no li span::after { content: ""; position: absolute; left: -2px; right: -2px; top: calc(58% - 4px); height: 8px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6.2C22 3.6 41 7.4 63 5.4S104 3.2 128 5.8 170 6.6 199 4.4' fill='none' stroke='%23B9A8FF' stroke-opacity='.9' stroke-width='.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; clip-path: inset(0 100% 0 0); transition: clip-path 2s cubic-bezier(.4, 0, .3, 1); }
.wb-no li span::before { content: ""; position: absolute; top: 58%; left: 0; width: 22px; height: 22px; margin: -21px 0 0 -2px; pointer-events: none; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 15L17 3l4 4L9 19z' fill='%23C4B5FD'/%3E%3Cpath d='M17 3l4 4-1.6 1.6-4-4z' fill='%238B7CF6'/%3E%3Cpath d='M2 22l3-7 4 4z' fill='%23F4F2FF'/%3E%3Cpath d='M2 22l3.6-3.6' stroke='%230F0F12' stroke-width='.8'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.55)); }
.wb-no li.cut span { background-position: 0 0 !important; }
.wb-no li.cut span::after { clip-path: inset(0 0 0 0); }
.wb-no li.cut span::before { animation: wbPen 2s cubic-bezier(.4, 0, .3, 1) both; }
@keyframes wbPen { 0% { left: 0; opacity: 0; transform: translateY(-6px) rotate(-8deg); } 10% { opacity: 1; transform: none; }
  30% { transform: translateY(-1px) rotate(2deg); } 55% { transform: translateY(1px) rotate(-2deg); } 80% { transform: translateY(-1px) rotate(1deg); }
  90% { opacity: 1; } 100% { left: 100%; opacity: 0; transform: translateY(-8px) rotate(8deg); } }
.wb-no li span::after { transition: clip-path 2s cubic-bezier(.4, 0, .3, 1), opacity .45s ease; }
.wb-no li.fade span::after { opacity: 0; }
.wb-no li.reset span, .wb-no li.reset span::after { transition: none !important; }

/* Closer: a light runs around the border, a soft aurora drifts behind, and the line is typed in */
@property --wb-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.wb-closer { position: relative; overflow: hidden; isolation: isolate; }
.wb-win::after, .wb-closer::before { --wb-a: 0deg; }
.wb-closer::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 1; pointer-events: none;
  background: conic-gradient(from var(--wb-a), transparent 0deg, transparent 250deg, rgba(196,181,253,.9) 300deg, #FFFFFF 320deg, rgba(92,156,255,.8) 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: wbOrbit 6s linear infinite; }
@keyframes wbOrbit { to { --wb-a: 360deg; } }
.wb-closer::after { content: ""; position: absolute; inset: -40% -10%; z-index: -1; pointer-events: none; opacity: .55;
  background: radial-gradient(30% 60% at 20% 50%, rgba(139,124,246,.22), transparent 70%), radial-gradient(28% 55% at 80% 50%, rgba(92,156,255,.16), transparent 70%);
  animation: wbAurora 14s ease-in-out infinite alternate; }
@keyframes wbAurora { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
/* the line itself: each word rises out of a soft blur, one after another; the second sentence lands in the brand gradient */
.wb-closer .w { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(.45em) scale(.96);
  transition: opacity .7s ease, filter .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.2s + var(--w) * 90ms); }
.wb-closer .w.g { background: var(--grad) no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }   /* sized and offset per word by script, so the gradient runs once across the sentence */
.wb-closer.in .w { opacity: 1; filter: none; transform: none; }
.wb-closer .wb-caret { visibility: hidden; }
.wb-closer.in .wb-caret { visibility: visible; animation: wbHide 1.4s steps(1) both, wbCaret 1.1s steps(1) 1.4s infinite; }   /* caret appears once the last word has landed */
@keyframes wbHide { 0%, 100% { opacity: 0; } }
.wb-yes li svg { transform: scale(.4); opacity: 0; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) calc(1.3s + (var(--i) - 4) * .2s), opacity .3s ease calc(1.3s + (var(--i) - 4) * .2s); }
.wb-is.in .wb-yes li svg { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .wb-spec div::after, .wb-is .wb-no li svg, .wb-yes li svg { transform: none !important; opacity: 1 !important; }
  .wb-spec dd { opacity: 1 !important; transform: none !important; }
  .wb-no li svg path { stroke-dashoffset: 0 !important; }
  .wb-no li span::after { transform: scaleX(1) !important; }
  .wb-no li span { background-position: 0 0 !important; } .wb-no li span::before { display: none; }
  .wb-closer .w { opacity: 1 !important; filter: none !important; transform: none !important; }
}

/* ---------- Testimonials ---------- */
.tmn-slider { --gap: 18px; --per: 3; }
/* The track: cards slide sideways (swipe, drag-scroll, arrows, dots or auto-advance) and snap into place */
.tmn-grid {
  display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px 2px 10px; margin: -6px -2px 0; scrollbar-width: none; overscroll-behavior-x: contain;
}
.tmn-grid::-webkit-scrollbar { display: none; }
.tmn-grid:focus-visible { outline: 2px solid var(--lavender); outline-offset: 4px; border-radius: var(--radius); }
.tmn-grid > .tmn { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); scroll-snap-align: start; }
.tmn-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.tmn-nav {
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  color: var(--ink); background: rgba(196,181,253,.06); box-shadow: 0 0 0 1px var(--line-strong) inset;
  transition: background .2s, color .2s, transform .2s var(--ease);
}
.tmn-nav:hover { background: var(--lavender); color: var(--bg); }
.tmn-nav:active { transform: scale(.94); }
.tmn-nav:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; }
.tmn-dots { display: flex; gap: 8px; }
.tmn-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgba(196,181,253,.28); transition: width .35s var(--ease), background .3s; }
.tmn-dots button[aria-current="true"] { width: 26px; background: linear-gradient(90deg, #C4B5FD, #8B7CF6, #5C9CFF); }
.tmn-dots button:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; }
.tmn-controls[hidden] { display: none; }
.tmn {
  position: relative; display: flex; flex-direction: column; gap: 20px; margin: 0;
  padding: 30px 28px 26px; border-radius: var(--radius); background: var(--bg-2); box-shadow: 0 0 0 1px var(--line) inset;
  transition: box-shadow .35s var(--ease), translate .35s var(--ease), opacity .8s var(--ease), transform .8s var(--ease);
}
.tmn:hover { translate: 0 -4px; box-shadow: 0 0 0 1px rgba(196,181,253,.6) inset, 0 22px 40px -24px rgba(0,0,0,.9); }
.tmn > * { position: relative; z-index: 1; }
/* Hover: a lavender fill grows in from the centre and the text turns dark */
.tmn::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background:                                                     /* the same diagonal stripes, over a lighter take on the button gradient */
    repeating-linear-gradient(135deg, rgba(255,255,255,0) 0 14px, rgba(120,105,245,.07) 14px 28px),
    linear-gradient(120deg, #EEE9FF 0%, #D6CCFD 48%, #C2D8FF 100%);
  opacity: 0; transform: scale(.92); transition: opacity .35s var(--ease), transform .5s var(--ease);
}
.tmn:hover::before, .tmn:focus-within::before { opacity: 1; transform: none; }
.tmn-mark, .tmn blockquote p, .tmn-who strong, .tmn-who span, .tmn-result { transition: color .3s var(--ease), box-shadow .3s var(--ease); }
.tmn figcaption { transition: border-color .3s var(--ease); }
.tmn:hover .tmn-mark, .tmn:hover blockquote p, .tmn:hover .tmn-who strong, .tmn:hover .tmn-who span, .tmn:hover .tmn-result,
.tmn:focus-within .tmn-mark, .tmn:focus-within blockquote p, .tmn:focus-within .tmn-who strong, .tmn:focus-within .tmn-who span, .tmn:focus-within .tmn-result { color: #0F0F12; }
.tmn:hover .tmn-result, .tmn:focus-within .tmn-result { box-shadow: 0 0 0 1px rgba(15,15,18,.35) inset; }
.tmn:hover figcaption, .tmn:focus-within figcaption { border-top-color: rgba(15,15,18,.18); }
.tmn:hover .tmn-avatar, .tmn:focus-within .tmn-avatar { box-shadow: 0 0 0 2px #0F0F12; }
.tmn:hover .tmn-badge, .tmn:focus-within .tmn-badge { color: var(--lavender); background: #0F0F12; }
.tmn-mark { display: block; height: 30px; color: var(--lavender); font-size: 64px; font-weight: 900; line-height: .9; }
.tmn blockquote { margin: 0; flex: 1; }
.tmn blockquote p { color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1.55; }
.tmn-result { align-self: flex-start; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--lavender); box-shadow: 0 0 0 1px var(--line-strong) inset; }
.tmn figcaption { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.tmn-avatar { flex: none; width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 0 0 1px rgba(196,181,253,.35); overflow: hidden; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: var(--bg); background: var(--lavender); }
.tmn-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tmn-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tmn-who strong { color: var(--ink); font-size: 15px; font-weight: 700; }
.tmn-who a { color: inherit; text-decoration: none; }
.tmn-who a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tmn-who span { color: var(--muted); font-size: 13.5px; }
/* Placeholder slots (only visible with ?preview=testimonials) */
.tmn.is-sample { box-shadow: 0 0 0 1px var(--line-strong) inset; background: repeating-linear-gradient(135deg, var(--bg-2) 0 14px, #17171d 14px 28px); }
.tmn.is-sample blockquote p, .tmn.is-sample .tmn-who strong { color: var(--muted); }
.tmn.is-sample:hover blockquote p, .tmn.is-sample:hover .tmn-who strong,
.tmn.is-sample:focus-within blockquote p, .tmn.is-sample:focus-within .tmn-who strong { color: #0F0F12; }
.tmn-badge { position: absolute; z-index: 2; top: 16px; right: 16px; transition: color .3s, background .3s; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bg); background: var(--lavender); }
@media (max-width: 980px) { .tmn-slider { --per: 2; } }
@media (max-width: 640px) { .tmn-slider { --per: 1; } .tmn-grid > .tmn { flex-basis: 88%; } }   /* next card peeks in, so it reads as swipeable */

/* Footer: solid soft violet/blue ground across the full width (nothing shows through) */
footer {
  isolation: isolate;
  background:
    radial-gradient(60% 90% at 50% 120%, rgba(139,124,246,.22), transparent 70%),     /* a low horizon glow */
    radial-gradient(30% 60% at 0% 0%, rgba(196,181,253,.08), transparent 70%),
    linear-gradient(180deg, #14131C 0%, #0F0E15 100%);
}
footer::before {                                   /* the menu bar's lavender → violet → lavender line, lighter and finer */
  content: ""; position: absolute; left: 50%; top: -1px; width: min(1400px, 78%); height: 1px; z-index: 1;
  transform: translateX(-50%) scaleY(.6); transform-origin: center top;
  background: linear-gradient(90deg, transparent, rgba(196,181,253,.38) 22%, rgba(139,124,246,.48) 50%, rgba(196,181,253,.38) 78%, transparent); }
footer > .wrap { position: relative; z-index: 1; }
.foot-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }   /* keeps the ripples inside the footer */

/* Footer rising light: thin lines of light rise quietly from the bottom edge and fade, like reputation building
   over time, with tiny stars drifting up and twinkling among them. Pure CSS animation; the elements are added by a small script. */
.foot-rise .ln { position: absolute; bottom: 0; width: 1px; border-radius: 1px; opacity: 0;
  background: linear-gradient(0deg, transparent, var(--c, #C4B5FD)); animation: riseUp var(--d, 8s) ease-out infinite; animation-delay: var(--w, 0s); }
.foot-rise .st { position: absolute; bottom: 0; width: var(--s, 2px); height: var(--s, 2px); animation: starUp var(--d, 14s) linear infinite; animation-delay: var(--w, 0s); }
.foot-rise .st::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #EDE8FF; opacity: 0; animation: twinkle var(--tw, 2.6s) ease-in-out infinite; animation-delay: var(--w2, 0s); }
@keyframes riseUp { 0% { transform: translateY(100%); opacity: 0; } 20% { opacity: .5; } 100% { transform: translateY(-40%); opacity: 0; } }
@keyframes starUp { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(var(--h, -260px)); opacity: 0; } }
@keyframes twinkle { 0%, 100% { opacity: 0; } 30% { opacity: var(--o, .8); } 55% { opacity: calc(var(--o, .8) * .35); } 75% { opacity: var(--o, .8); } }
.foot-motto { font-size: 13px; color: var(--muted); }

.foot-brand .brand-lockup { height: 28px; width: auto; }
.foot-brand p { margin-top: 14px; max-width: 34ch; color: var(--muted); line-height: 1.55; }
.foot-col h2 { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--ink); }
.foot-col p { color: var(--muted); line-height: 1.6; }
.foot-col a, .foot-col button { display: block; margin-bottom: 8px; padding: 0; border: 0; background: none; font: inherit; color: var(--muted); text-decoration: none; cursor: pointer; transition: color .2s; }
.foot-col a:hover, .foot-col button:hover { color: var(--ink); }
.foot-col a.li { display: flex; align-items: center; gap: 8px; }
.foot-col a.li svg { flex: none; color: var(--lavender); }
.foot-col a:focus-visible, .foot-col button:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; border-radius: 4px; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); }
footer .tagline { letter-spacing: .22em; font-size: 11px; font-weight: 700; color: var(--muted); }
@media (max-width: 760px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* Invisibility Tax vs Visibility Premium */
.tax { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tax-card { border-radius: var(--radius); padding: 32px 30px; background: var(--bg-2); box-shadow: 0 0 0 1px var(--line) inset; }
.tax-card.premium { background: linear-gradient(180deg, rgba(120,105,245,.12), rgba(21,21,26,.6) 75%); box-shadow: 0 0 0 1px rgba(120,105,245,.4) inset; }
.tax-card .label { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.tax-card.premium .label { color: var(--lavender); }
.tax-card h3 { font-size: 28px; margin: 14px 0 10px; }
.tax-card > p { color: var(--muted); font-size: 16px; }
.tax-card ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.tax-card li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; color: var(--ink-2); font-size: 15.5px; }
.tax-card li::before { content: ""; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--faint); }
.tax-card.premium li::before { background: var(--core); }
/* Founder message */
.founder-note {
  margin: 36px 0 0; padding: 12px 28px 12px 14px; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
  border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line) inset;
  background:
    radial-gradient(55% 140% at var(--vx) 50%, rgba(120,105,245,.20), transparent 70%),   /* violet glow */
    radial-gradient(45% 140% at var(--bx) 40%, rgba(92,156,255,.14), transparent 70%),    /* blue glow   */
    #131218;
  /* The two glows swap sides and back: violet drifts left -> right, blue right -> left */
  animation: glowSwap 9s ease-in-out infinite alternate;
}
@property --vx { syntax: "<percentage>"; inherits: false; initial-value: 8%; }
@property --bx { syntax: "<percentage>"; inherits: false; initial-value: 96%; }
@keyframes glowSwap { from { --vx: 8%; --bx: 96%; } to { --vx: 92%; --bx: 4%; } }
.fn-photo { position: relative; display: block; flex: none; width: 96px; height: 96px; border-radius: 18px; overflow: hidden; background: #221d4a; box-shadow: 0 0 0 1px rgba(196,181,253,.45); transition: box-shadow .3s; }
.fn-photo:hover { box-shadow: 0 0 0 1.5px var(--lavender); }
.fn-photo:focus-visible { outline: 2px solid var(--lavender); outline-offset: 4px; }
/* Crop to head and shoulders, mirrored so he faces the quote */
.fn-photo img { position: absolute; width: 165%; height: 165%; max-width: none; left: -30%; top: -16%; transform: scaleX(-1); }
.founder-note blockquote { margin: 0; text-align: center; padding: 0 12px; }
.founder-note p { font-size: clamp(19px, 2vw, 24px); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.founder-note p::before { content: "\201C"; color: var(--lavender); margin-right: .14em; }
.founder-note p::after { content: "\201D"; color: var(--lavender); margin-left: .14em; transition: opacity .3s; }
/* Typewriter: letters are revealed one by one (space is reserved, so nothing shifts) */
.typed-quote { transition: opacity .45s ease; }
.typed-quote.fading { opacity: 0; }
.typed-quote .tq { visibility: hidden; }
.typed-quote .tq.on { visibility: visible; }
.typed-quote.typing::after { opacity: 0; }   /* closing quote mark appears once typing finishes */
/* With the script running, the quote marks are typed too: the cursor starts at once,
   types the opening mark, the line and the closing mark, then blinks after it */
.typed-quote.js::before, .typed-quote.js::after { content: none; }
.typed-quote .qm { color: var(--lavender); }
.typed-quote .qm-open { margin-right: .14em; }
.typed-quote .qm-close { margin-left: .14em; }
.tq-caret.solid { animation: none; }
.tq-caret {
  display: inline-block; width: 2px; height: 1.05em; margin: 0 -1px -0.16em; border-radius: 1px;   /* net zero width: the cursor never pushes text */
  background: var(--lavender); vertical-align: baseline; animation: caretBlink 1s steps(1) infinite;
}
.tq-caret.done { animation: caretBlink 1s steps(1) 3, caretOut .4s ease 3s forwards; }
@keyframes caretBlink { 50% { opacity: 0; } }
@keyframes caretOut { to { opacity: 0; width: 0; margin: 0; } }
.fn-person { display: flex; align-items: center; gap: 14px; padding-right: 28px; border-right: 1px solid var(--line); font-size: 15px; }
.fn-id { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.fn-person strong { color: var(--ink); font-weight: 700; }
.fn-name { position: relative; color: inherit; text-decoration: none; }
.fn-name::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--lavender); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.fn-name:hover::after, .fn-name:focus-visible::after { transform: scaleX(1); }
.fn-name:focus-visible { outline: none; }
.fn-person span { color: var(--muted); font-size: 13.5px; }
.fn-tag { font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--lavender); }
@media (max-width: 760px) { .founder-note { grid-template-columns: 1fr; gap: 16px; padding: 20px; } .fn-person { padding: 0 0 16px; border-right: 0; border-bottom: 1px solid var(--line); } .founder-note blockquote { text-align: left; padding: 0; } }

.gravity { display: inline-block; margin-top: 28px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }

/* ---------- Modal + form ---------- */
dialog.modal {
  width: min(680px, 100% - 24px); max-height: min(92vh, 980px); padding: 0; border: 0; border-radius: 24px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 0 0 1px var(--line-strong), 0 60px 120px -30px rgba(0,0,0,.9);
  overflow: hidden;
}
dialog.modal[open] { display: flex; flex-direction: column; animation: pop .2s var(--ease); }
dialog.modal::backdrop { background: rgba(8, 8, 10, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .3s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.m-head { position: relative; padding: 28px 30px 22px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(120,105,245,.10), transparent); }
.m-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; pointer-events: none; height: 24px; border: 2px solid transparent; border-bottom: 0; border-radius: 24px 24px 0 0; background: var(--grad) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); }
.m-head h2 { font-size: 28px; margin: 10px 0 6px; }
.m-head p { color: var(--muted); font-size: 15px; }
.x {
  position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.05); color: var(--muted); display: grid; place-items: center; transition: background .2s, color .2s;
}
.x:hover { background: rgba(255,255,255,.1); color: var(--ink); }
.m-body { padding: 26px 30px 30px; overflow-y: auto; overscroll-behavior: contain; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label, .field .lbl { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.field label .opt { color: var(--faint); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; font: 400 16px/1.4 var(--font); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 13px 14px; transition: border-color .2s, box-shadow .2s; appearance: none; -webkit-appearance: none;
}
.field textarea { min-height: 116px; resize: vertical; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23B4B4C0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
.field select option { background: var(--surface); color: var(--ink); }
/* Unchosen dropdowns read as placeholders, like empty inputs */
.field select:invalid { color: #80808E; }
.field input::placeholder, .field textarea::placeholder { color: #80808E; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(196,181,253,.34); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--core); box-shadow: 0 0 0 4px rgba(120,105,245,.2); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #F07A8C; }
.field .err { display: none; color: #F59AA8; font-size: 13px; font-weight: 500; }
.field.invalid .err { display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span {
  display: inline-block; padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 400; color: var(--muted);
  box-shadow: 0 0 0 1px var(--line-strong) inset; transition: all .2s;
}
.chips input:checked + span { color: #fff; background: rgba(120,105,245,.22); box-shadow: 0 0 0 1px var(--core) inset; }
.chips input:focus-visible + span { outline: 2px solid var(--lavender); outline-offset: 2px; }
.ms { position: relative; display: grid; gap: 7px; }
.ms-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer;
  font: 400 16px/1.4 var(--font); color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 13px 14px; transition: border-color .2s, box-shadow .2s;
}
.ms-btn:hover { border-color: rgba(196,181,253,.34); }
.ms-btn:focus-visible, .ms.open .ms-btn { outline: none; border-color: var(--core); box-shadow: 0 0 0 4px rgba(120,105,245,.2); }
.ms-btn .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-btn .v.ph { color: #80808E; }
.ms-btn svg { flex: none; transition: transform .2s var(--ease); }
.ms.open .ms-btn svg { transform: rotate(180deg); }
.ms-panel {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); max-height: 264px; overflow-y: auto;
  padding: 6px; border-radius: var(--radius-sm); background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--line-strong), 0 18px 40px -12px rgba(0,0,0,.8);
}
.ms-panel[hidden] { display: none; }
.field .ms-opt { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: center; padding: 10px 10px; border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 400; color: var(--ink-2); }
.ms-opt:hover, .ms-opt:focus-within { background: rgba(196,181,253,.08); }
.ms-opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--core); }
.field .ms-opt input {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; padding: 0; margin: 0; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: 5px; background: var(--bg) center / 12px no-repeat;
}
.field .ms-opt input:checked {
  border-color: var(--lavender); background-color: var(--lavender);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' stroke='%230F0F12' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.field .ms-opt input:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; box-shadow: none; }
.field .ms-opt:has(input:checked) { color: var(--ink); }
.field.invalid .ms-btn { border-color: #F07A8C; }
.svc-hint { color: var(--faint); font-size: 13px; }
.chips + .err { margin-top: 2px; }
.role-other { margin-top: 10px; }
.role-other[hidden] { display: none; }
.phone { display: grid; grid-template-columns: 118px 1fr; gap: 8px; }
.cc { position: relative; }
.phone { grid-template-columns: 150px 1fr; }
.field .cc-input { padding-right: 34px; cursor: pointer; }
.field .cc-input:focus { cursor: text; }
.cc-chev { position: absolute; right: 12px; top: 50%; translate: 0 -50%; pointer-events: none; transition: transform .2s; }
.cc.open .cc-chev { transform: rotate(180deg); }
.cc-list {
  position: absolute; z-index: 6; left: 0; top: calc(100% + 6px); width: 300px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  list-style: none; margin: 0; padding: 6px; border-radius: var(--radius-sm);
  background: var(--surface-2); box-shadow: 0 0 0 1px var(--line-strong), 0 18px 40px -12px rgba(0,0,0,.8);
}
.cc-list[hidden] { display: none; }
.cc-list li { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14.5px; color: var(--ink-2); }
.cc-list li .code { font-weight: 500; color: var(--lavender); }
.cc-list li .dial { color: var(--muted); }
.cc-list li[aria-selected="true"] { color: var(--ink); }
.cc-list li.active, .cc-list li:hover { background: rgba(196,181,253,.10); color: var(--ink); }
.cc-list .none { display: block; padding: 10px; color: var(--faint); cursor: default; }
.cc-list .none:hover { background: none; }
.ms-group { display: block; padding: 10px 10px 4px; font-size: 12px; font-weight: 500; color: var(--faint); }
.ms-group:first-child { padding-top: 4px; }
.svc-other, .budget-other { margin-top: 10px; }
.svc-other[hidden], .budget-other[hidden] { display: none; }
.form-error { margin: 4px 0 16px; }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; font-size: 14px; color: var(--muted); margin: 6px 0 22px; cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--core); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.form-foot small { color: var(--faint); font-size: 13px; }
.form-error { display: none; margin-bottom: 16px; padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(240,122,140,.08); box-shadow: 0 0 0 1px rgba(240,122,140,.35) inset; color: #F8B4BF; font-size: 14px; }
.form-error.show { display: block; }
.btn[aria-busy="true"] { pointer-events: none; opacity: .85; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(15,15,18,.25); border-top-color: #0F0F12; animation: spin .8s linear infinite; display: none; }
.btn[aria-busy="true"] .spinner { display: inline-block; }
.btn[aria-busy="true"] .arrow { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.success { display: none; text-align: center; padding: 56px 34px 50px; }
.success.show { display: block; }
.success .ring { width: 84px; height: 84px; margin: 0 auto 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(120,105,245,.14); box-shadow: 0 0 0 1px var(--core) inset; }
.success .ring path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .6s .15s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.success h2 { font-size: 32px; margin-bottom: 12px; }
.success p { color: var(--muted); max-width: 44ch; margin: 0 auto 28px; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero .wrap, .time { grid-template-columns: 1fr; gap: 48px; }
  .sys-card { max-width: none; }   /* use the full width on tablets */
  .tier { padding: 28px 24px 28px; }
  .tier h3 { font-size: 26px; }
  .hero { min-height: 0; }
  .arch-row { grid-template-columns: 1fr 1fr; }
  .arch-row .comp { grid-column: 1 / -1; padding-bottom: 0; }
  .arch-row.head .h-comp { display: none; }
  .who { grid-template-columns: 1fr 1fr; }
  .who-lead { grid-column: 1 / -1; }
  .svc-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .brand-lockup { height: 28px; }
  .nav-logo img { height: 32px; }
  .nav .wrap { gap: 12px; }
  .nav .btn-sm { --h: 38px; padding: 0 14px; font-size: 13px; }
  .nav .wrap { height: 72px; }
  .hero { min-height: 0; }
  .tiers, .bos, .nots, .stats, .tax, .who, .ias-words { grid-template-columns: 1fr; }
  .mini-stats { width: 100%; }
  .mini-stats div { flex: 1; min-width: 0; padding: 14px; }
  .bos div { border-right: 0; border-bottom: 1px solid var(--line); }
  .bos div:last-child { border-bottom: 0; }
  .arch-row, .arch-row.head { grid-template-columns: 1fr; }
  .arch-row.head { display: none; }
  .arch-row > * { padding: 8px 20px; }
  .arch-row .comp { padding-top: 22px; }
  .arch-row p:last-child { padding-bottom: 22px; }
  .arch-row p::before { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
  .arch-row p:nth-of-type(1)::before { content: "What we build"; }
  .arch-row p:nth-of-type(2)::before { content: "How we deliver it"; }
  .grid-2 { grid-template-columns: 1fr; gap: 0; }
  .m-head, .m-body { padding-inline: 20px; }
  .form-foot .btn { width: 100%; }
  dialog.modal { max-height: 94vh; }
}
/* Back to the top: sits on the footer's top line at the right edge of the content, centred on the line */
.to-top {
  position: absolute; z-index: 2; top: 0; right: var(--gutter); translate: 0 -50%;   /* far right end of the footer line */
  width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer; color: #0F0F12;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #D9CFFE 0%, #B3A8FA 45%, #8FB6FF 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 12px 28px -10px rgba(0,0,0,.7);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.6);
  transition: opacity .25s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1), visibility 0s linear .45s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.to-top svg { width: 20px; height: 20px; transition: transform .25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .to-top:hover svg { transform: translateY(-3px); } }
.to-top:active { transform: scale(.94); }
.to-top:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; }

/* Phones and tablets held upright: centre the reading text.
   The form and the architecture card's step list keep their left alignment so they stay easy to scan */
@media (max-width: 1024px) and (orientation: portrait) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero .wrap > div:first-child, .section-head, .lede, .tiers-note, .three-b, .tier, .pkg, .tax-card, .tmn, footer { text-align: center; }
  .tmn-result { align-self: center; }
  .tier .strike { align-self: center; }
  .tmn figcaption { justify-content: center; }
  .tmn-who { align-items: center; }
  .hero h1 { align-items: center; }
  /* "A reputation" and "system for" share one row when they fit (tablets, large phones), so the headline is two lines
     with no empty sides; on narrow phones they wrap back to three lines. "founders." always gets its own line */
  .hero h1 { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: .26em; }
  .hero h1 .ln2, .hero h1 .ln-ul, .hero h1 .h1-sub { flex-basis: 100%; text-align: center; }
  .hero h1 .ln-ul { align-self: center; flex-basis: auto; }
  .hero .lede, .section-head, .section-head .lede, .tiers-note, .three-b { margin-inline: auto; }
  .hero-cta, .hero-meta { justify-content: center; }

  .svc-head { flex-direction: column; align-items: center; }
  .mini-stats { justify-content: center; }
  .mini-stats div { text-align: center; }
  .pkg-top, .pkg-parts { justify-content: center; }

  /* Bullet lists: the dot sits in front of each centred line */
  .tax-card li { display: block; }
  .tax-card li::before { display: inline-block; margin: 0 10px 0 0; vertical-align: middle; }

  /* Founder note: photo, name and quote stacked in the middle */
  .founder-note { grid-template-columns: 1fr; gap: 16px; padding: 22px 20px; justify-items: center; }
  .fn-person { flex-direction: column; text-align: center; padding: 0; border: 0; }
  .fn-id { align-items: center; }
  .founder-note blockquote { text-align: center; }

  /* Footer */
  .foot-top { grid-template-columns: 1fr; justify-items: center; }
  .foot-brand .brand-lockup { margin-inline: auto; }
  .foot-brand p { margin-inline: auto; }
  .foot-col a.li { justify-content: center; }
  .foot-bottom { flex-direction: column; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .success .ring path { stroke-dashoffset: 0; }
  .tools-rail { overflow-x: auto; }
}