/* =========================================================================
   thinkbridge design language: "Clear Glass"
   Monochrome. Mulish. A web approximation of Apple's Liquid Glass material
   (Apple publishes no official web CSS for it).
   Radius system: interactive = pill · tiles = 22px · panels = 32px · chapters = 44px
   ========================================================================= */
:root{
  --bg:#f4f4f6;
  --bg-2:#ebebef;
  --ink:#0c0c0e;
  --ink-2:#222226;
  --gray:#66666d;
  --gray-2:#9d9da5;
  --gray-3:#c6c6cc;
  --soft:#85858c;            /* two-tone headline tails: 3.4:1, readable at display sizes */
  --line:rgba(12,12,14,.08);

  --night:var(--brand-darkest);
  --night-gray:#b9b0c4;
  --night-line:rgba(255,255,255,.1);

  --r-pill:999px;
  --r-tile:22px;
  --r-panel:32px;
  --r-chapter:44px;

  --maxw:1200px;
  --ease:cubic-bezier(.16,1,.3,1);
  --font:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  interpolate-size:allow-keywords;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink-2);font-family:var(--font);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
svg{display:block}
.ph,.ph-light,.ph-fill{line-height:1}

/* film grain, fixed so it never repaints on scroll */
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
@media (max-width:640px){.wrap{padding:0 16px}}
.section{position:relative;padding:150px 0}
@media (max-width:900px){.section{padding:100px 0}}

/* ---------- type ---------- */
.eyebrow{display:block;font-size:14px;font-weight:700;color:var(--gray);letter-spacing:.01em}
.chapter .eyebrow{color:var(--night-gray)}
/* one size for every section heading; the two statement moments below are the only exceptions */
.h2{font-weight:800;letter-spacing:-.035em;line-height:1.06;font-size:clamp(34px,4.4vw,58px);color:var(--ink);max-width:26ch;text-wrap:balance}
.eyebrow + .h2{margin-top:16px}
.chapter .h2{color:#fff}
.lede{margin-top:22px;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--gray);max-width:68ch}
.chapter .lede{color:var(--night-gray)}
.soft{color:var(--soft)}
::selection{background:var(--brand);color:#fff}
html{accent-color:var(--ink);caret-color:var(--ink)}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:12px}
.chapter :focus-visible,.cta :focus-visible,.case-big :focus-visible{outline-color:#fff}

/* =========================================================================
   Glass material (web approximation)
   ========================================================================= */
.glass{
  position:relative;isolation:isolate;border-radius:var(--r-panel);
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.42));
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(12,12,14,.03),
    0 1px 2px rgba(12,12,14,.04),
    0 24px 60px -28px rgba(12,12,14,.22);
}
/* specular sheen */
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 70% at 12% -10%,rgba(255,255,255,.95),transparent 46%),
    linear-gradient(100deg,rgba(255,255,255,.35),transparent 38%,transparent 70%,rgba(255,255,255,.25));
}
/* refractive rim */
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(155deg,rgba(255,255,255,1),rgba(255,255,255,.2) 30%,rgba(12,12,14,.08) 65%,rgba(255,255,255,.75));
  -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);
}
.glass-dark{
  position:relative;isolation:isolate;border-radius:var(--r-panel);
  background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.025));
  -webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 30px 70px -35px rgba(0,0,0,.7);
}
.glass-dark::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(155deg,rgba(255,255,255,.45),rgba(255,255,255,.06) 35%,rgba(255,255,255,.02) 65%,rgba(255,255,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);
}
@media (prefers-reduced-transparency:reduce){
  .glass{background:#fbfbfc;-webkit-backdrop-filter:none;backdrop-filter:none}
  .glass-dark{background:var(--brand-dark);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ambient silver light behind glass, so the material has something to refract */
.ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;opacity:.9;animation:drift 26s ease-in-out infinite alternate}
.orb.a{width:520px;height:520px;background:radial-gradient(circle,#d4d4da 0,rgba(212,212,218,0) 70%)}
.orb.b{width:420px;height:420px;background:radial-gradient(circle,#c3c3ca 0,rgba(195,195,202,0) 70%);animation-duration:32s;animation-delay:-8s}
.orb.c{width:360px;height:360px;background:radial-gradient(circle,#fff 0,rgba(255,255,255,0) 70%);animation-duration:20s}
.chapter .orb.a{background:radial-gradient(circle,rgba(255,255,255,.13) 0,transparent 70%)}
.chapter .orb.b{background:radial-gradient(circle,rgba(255,255,255,.08) 0,transparent 70%)}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(80px,-60px,0) scale(1.15)}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border-radius:var(--r-pill);
  font-size:16.5px;font-weight:700;white-space:nowrap;
  transition:transform .16s var(--ease),box-shadow .3s var(--ease),background .2s;
}
.btn i{font-size:18px;transition:transform .25s var(--ease)}
/* hover movement only with a real mouse: on touch a tap would leave it stuck */
@media (hover:hover) and (pointer:fine){.btn:hover i{transform:translateX(4px)}}
.btn-ink{background:var(--brand);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 30px -12px rgba(12,12,14,.5)}
@media (hover:hover) and (pointer:fine){.btn-ink:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 20px 40px -14px rgba(12,12,14,.55)}}
.btn-glass{border-radius:var(--r-pill);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.btn-glass:hover{transform:translateY(-2px)}}
.btn-sm{height:42px;padding:0 18px;font-size:14.5px}
.chapter .btn-ink,.cta .btn-ink{background:#fff;color:var(--brand);box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}

.link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px;color:var(--ink)}
.link i{transition:transform .25s var(--ease)}
@media (hover:hover) and (pointer:fine){.link:hover i{transform:translate(3px,-3px)}}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}

/* =========================================================================
   Nav: floating glass capsule
   ========================================================================= */
.nav.glass{background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.68));transition:top .6s var(--ease),width .6s var(--ease),background .5s var(--ease),color .5s var(--ease)}
.nav.glass.on-dark{background:linear-gradient(135deg,rgba(44,44,48,.78),rgba(18,18,20,.66));color:#fff}
.nav.on-dark::before{opacity:.12}
.nav.on-dark .logo,.nav.on-dark .nav-top,.nav.on-dark .menu-btn{color:#fff}
.nav.on-dark .nav-top{opacity:.85}
.nav.on-dark .nav-top:hover,.nav.on-dark .nav-top[aria-expanded="true"]{opacity:1;background:rgba(255,255,255,.1)}
.nav.on-dark .nav-inner .btn-ink{background:#fff;color:var(--brand)}
.nav{position:fixed;z-index:80;top:14px;left:50%;transform:translateX(-50%);width:min(1140px,calc(100% - 24px));border-radius:var(--r-pill);transition:top .6s var(--ease),width .6s var(--ease)}
.nav.scrolled{top:10px;width:min(980px,calc(100% - 24px))}
.nav-inner{height:62px;display:flex;align-items:center;gap:24px;padding:0 10px 0 24px}
.logo{display:inline-flex;color:var(--ink)}
.logo svg{height:24px;width:auto;overflow:visible}
.nav-links{display:flex;gap:2px;margin:0 auto;font-size:14.5px;font-weight:600}
.nav-top{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r-pill);color:var(--ink-2);opacity:.75;font:inherit;transition:opacity .3s,background .3s,transform .16s var(--ease)}
.nav-top:hover,.nav-top[aria-expanded="true"]{opacity:1;background:rgba(12,12,14,.05)}
.nav-top i{font-size:13px;transition:transform .35s var(--ease)}
.nav-top[aria-expanded="true"] i{transform:rotate(180deg)}

/* dropdown panels */
.nav-dd{position:fixed;top:84px;left:0;right:0;z-index:79;pointer-events:none;transition:top .6s var(--ease)}
.nav-dd.scrolled{top:80px}
.dd{position:absolute;top:0;left:50%;opacity:0;pointer-events:none;
  transform:translateX(-50%) translateY(-8px) scale(.985);transform-origin:top center;transition:opacity .28s var(--ease),transform .28s var(--ease)}
.dd.open{opacity:1;pointer-events:auto;transform:translateX(-50%)}
.dd-inner{width:min(720px,calc(100vw - 32px));padding:14px;border-radius:26px;
  background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(255,255,255,.93));
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(12,12,14,.06),0 30px 70px -30px rgba(12,12,14,.4)}
.dd-narrow .dd-inner{width:min(360px,calc(100vw - 32px))}
.dd-2col{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.dd-item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:18px;transition:background .25s var(--ease),transform .35s var(--ease)}
.dd-item:hover{background:rgba(12,12,14,.05)}
.dd-ico{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:19px;color:var(--ink);background:rgba(12,12,14,.05)}
.dd-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.dd-txt b{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.dd-txt span{font-size:13.5px;font-weight:500;color:var(--gray);line-height:1.35}
.dd-slim{align-items:center}
.dd-slim .dd-txt b{font-size:15px}
.dd-item .dd-ico .glyph{width:22px;height:22px}
.js .dd .dd-item{opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease),background .25s var(--ease)}
.js .dd.open .dd-item{opacity:1;transform:none;transition-delay:calc(var(--n,0) * 22ms)}
/* opened from the keyboard: appear at once, never animate keyboard actions */
.js .dd.instant,.js .dd.instant .dd-item{transition:none}
/* over the dark chapters */
.nav-dd.on-dark .dd-inner{background:linear-gradient(135deg,rgba(34,34,38,.97),rgba(14,14,16,.95));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.08),0 30px 70px -30px rgba(0,0,0,.9)}
.nav-dd.on-dark .dd-item:hover{background:rgba(255,255,255,.08)}
.nav-dd.on-dark .dd-txt b{color:#fff}
.nav-dd.on-dark .dd-txt span{color:var(--night-gray)}
.nav-dd.on-dark .dd-ico{background:rgba(255,255,255,.08);color:#fff}
.nav-dd.on-dark .glyph circle{fill:#fff}
.nav-dd.on-dark .glyph circle.off{fill:rgba(255,255,255,.28)}
.menu-btn{display:none;width:46px;height:46px;border-radius:50%;place-items:center;font-size:22px;margin-left:auto;transition:transform .16s var(--ease)}
.mobile-menu{display:none}
@media (max-width:980px){
  .nav-dd{display:none}
  .nav-links,.nav-inner .btn{display:none}
  .menu-btn{display:grid}
  .mobile-menu{display:block;position:absolute;left:0;right:0;top:72px;border-radius:28px;padding:10px;opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
  .nav.open .mobile-menu{opacity:1;transform:none;pointer-events:auto}
  .mobile-menu{max-height:calc(100dvh - 96px);overflow-y:auto}
  .mobile-menu.glass{background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(255,255,255,.93))}
  .mm-link,.mm-top{display:flex;align-items:center;width:100%;padding:14px 16px;font-size:20px;font-weight:700;border-radius:18px;color:var(--ink);font-family:inherit;text-align:left}
  .mm-top i{margin-left:auto;font-size:15px;transition:transform .35s var(--ease)}
  .mm-top[aria-expanded="true"] i{transform:rotate(180deg)}
  .mm-link:hover,.mm-top:hover{background:rgba(12,12,14,.05)}
  .mm-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
  .mm-group.open .mm-panel{grid-template-rows:1fr}
  .mm-panel-in{overflow:hidden;min-height:0}
  .mm-panel a{display:block;padding:11px 16px 11px 30px;font-size:16.5px;font-weight:600;color:var(--gray);border-radius:14px}
  .mm-panel a:hover{background:rgba(12,12,14,.05);color:var(--ink)}
}

/* =========================================================================
   Hero: the lens
   ========================================================================= */
.hero{position:relative;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.lens{
  position:absolute;left:0;top:0;border-radius:50%;pointer-events:none;will-change:transform;z-index:1;
  background:
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.75) 0,rgba(255,255,255,.16) 16%,rgba(255,255,255,0) 40%),
    radial-gradient(circle at 72% 88%,rgba(255,255,255,.45) 0,rgba(255,255,255,0) 34%),
    rgba(255,255,255,.07);
  -webkit-backdrop-filter:saturate(130%) contrast(1.06);backdrop-filter:saturate(130%) contrast(1.06);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.95),
    inset 0 2px 3px rgba(255,255,255,1),
    inset 0 -40px 70px rgba(12,12,14,.07),
    inset 30px 0 60px rgba(255,255,255,.35),
    inset -20px -10px 40px rgba(12,12,14,.04),
    0 0 0 1px rgba(12,12,14,.05),
    0 60px 120px -50px rgba(12,12,14,.4);
}
.lens::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;padding:1.5px;
  background:conic-gradient(from 210deg,rgba(255,255,255,1),rgba(12,12,14,.12),rgba(255,255,255,.9),rgba(12,12,14,.06),rgba(255,255,255,1));
  -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);
}
.lens.dark{
  background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.2) 0,rgba(255,255,255,.03) 18%,rgba(255,255,255,0) 42%),rgba(255,255,255,.02);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),inset 0 2px 3px rgba(255,255,255,.35),inset 0 -40px 70px rgba(255,255,255,.03),0 60px 120px -50px rgba(0,0,0,.8);
}
.lens.dark::after{background:conic-gradient(from 210deg,rgba(255,255,255,.55),rgba(255,255,255,.04),rgba(255,255,255,.4),rgba(255,255,255,.02),rgba(255,255,255,.55))}
.lens-tag{position:absolute;right:6%;bottom:9%;padding:9px 16px;border-radius:var(--r-pill);font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.01em}

.hero-field{position:absolute;inset:0;width:100%;height:100%}
.hero-steps{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-steps span{position:absolute;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray-2);white-space:nowrap;transition:color .5s var(--ease),opacity .5s var(--ease);opacity:.75}
.hero-steps span.on{color:var(--ink);opacity:1}
@media (max-width:900px){
  .hero-steps span{opacity:0;font-size:12px}
  .hero-steps span.on{opacity:1}
}
.hero-grid{position:relative;z-index:2;flex:1;display:flex;align-items:center;width:100%;padding-top:110px;padding-bottom:40px}
.hero-copy{max-width:720px}
.rating{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:var(--r-pill);font-size:14px;font-weight:600;color:var(--ink-2)}
.stars{display:inline-flex;gap:1px;font-size:13px;color:var(--ink)}
.hero-title{margin-top:28px;font-size:clamp(40px,4.5vw,66px);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--ink)}
.hero-sub{margin-top:28px;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--gray);max-width:48ch}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
/* =========================================================================
   Gated hook: request your numbers
   ========================================================================= */
.hook{position:relative;z-index:1;margin-top:60px;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hook-title{font-size:clamp(34px,4.4vw,58px);font-weight:800;letter-spacing:-.035em;line-height:1.06;color:var(--ink);max-width:16ch}
.hook-sub{margin-top:14px;font-size:16.5px;line-height:1.5;color:var(--gray);max-width:52ch}

.hook-picks{border:0;padding:0;margin:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick-box{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:16px;cursor:pointer;
  background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px var(--line);
  font-size:14.5px;font-weight:700;color:var(--gray);transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .16s var(--ease)}
.pick-box i{font-size:19px}
.pick:hover .pick-box{background:#fff;color:var(--ink)}
.pick input:checked + .pick-box{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateY(-1px)}
.pick input:focus-visible + .pick-box{outline:2px solid var(--ink);outline-offset:3px}

.hook-fields{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hook-field{display:flex;flex-direction:column;gap:7px}
.hook-field > span{font-size:14px;font-weight:700;color:var(--ink-2)}
.hook-field input{font:inherit;font-size:16px;color:var(--ink);background:rgba(255,255,255,.7);border:0;box-shadow:inset 0 0 0 1px var(--line);
  border-radius:12px;padding:13px 14px;transition:box-shadow .3s,background .3s}
.hook-field input:focus{outline:0;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.hook-field input[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 3px rgba(12,12,14,.08)}
.hook-err{display:none;font-style:normal;font-size:13.5px;font-weight:600;color:var(--ink)}
.hook-err.on{display:block}
.hook-form .btn{margin-top:18px}
.hook-form .btn.working{opacity:.75;pointer-events:none}
.hook-fine{margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--gray);max-width:46ch}

.hook-done{padding:16px 0 4px}
.hook-done:focus{outline:none}
.hook-done-mark{width:52px;height:52px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:24px}
.hook-done h3{margin-top:18px;font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.hook-done p{margin-top:10px;font-size:16.5px;color:var(--gray);max-width:40ch}

/* the locked preview */
.hook-preview{position:relative;align-self:center;padding:30px 32px 34px;border-radius:var(--r-panel);overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.75),rgba(255,255,255,.45));box-shadow:inset 0 0 0 1px var(--line)}
.hook-preview::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 80% 0%,rgba(255,255,255,.7),transparent 60%)}
.hook-preview-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}
.hook-preview-label i{font-size:15px;color:var(--ink);transition:transform .5s var(--ease)}
@media (hover:hover) and (pointer:fine){.hook-preview:hover .hook-preview-label i{transform:translateY(-2px) rotate(-8deg)}}
.peek{display:none;margin-top:20px}
.peek.on{display:block}
.js .peek.on{animation:peekIn .45s var(--ease)}
@keyframes peekIn{from{opacity:0;transform:translateY(8px)}}
.blur{filter:blur(7px);-webkit-user-select:none;user-select:none}
.peek-row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:13px 0;border-bottom:1px solid var(--line)}
.peek-row span{font-size:15px;font-weight:600;color:var(--gray)}
.peek-row b{font-size:22px;font-weight:900;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.peek-bar{margin-top:20px;height:10px;border-radius:var(--r-pill);background:rgba(12,12,14,.08);overflow:hidden}
.peek-bar i{display:block;height:100%;width:calc(var(--v) * 100%);border-radius:inherit;background:var(--brand);filter:blur(4px)}
.peek-step{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.peek-step span:not(.peek-dot){flex:1;font-size:15px;font-weight:600;color:var(--gray)}
.peek-step b{font-size:19px;font-weight:800;color:var(--ink)}
.peek-dot{width:10px;height:10px;border-radius:50%;background:var(--brand);flex:none}
.peek-line{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.peek-line span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:800;background:rgba(12,12,14,.07);color:var(--ink)}
.peek-line b{font-size:16.5px;font-weight:700;color:var(--ink)}

/* repeat panel under the case studies */
.hook-band{position:relative;z-index:1;margin-top:16px;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  padding:44px 48px;border-radius:var(--r-panel)}
.hook-band > *:not(.band-art){position:relative;z-index:1}
.hook-band h3{font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-.03em;line-height:1.14;color:var(--ink);max-width:20ch}
.hook-band p{margin-top:10px;font-size:16.5px;color:var(--gray);max-width:44ch}
/* the hero lens, echoed: an ordered dot field that drifts and breathes */
.band-art{position:absolute;z-index:0;right:-170px;top:50%;width:560px;height:560px;margin-top:-280px;border-radius:50%;
  background-image:radial-gradient(circle,rgba(12,12,14,.2) 1.4px,transparent 2px);background-size:20px 20px;
  -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 66%);mask-image:radial-gradient(circle,#000 30%,transparent 66%);
  animation:bandDrift 18s ease-in-out infinite alternate}
@keyframes bandDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-26px,10px,0) scale(1.06)}}
.hook-band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform 1.4s var(--ease)}
@media (hover:hover) and (pointer:fine){.hook-band:hover::after{transform:translateX(120%)}}
.hook-band .btn{flex:none}
@media (max-width:640px){.hook-band{padding:30px 24px 32px;gap:18px}.band-art{right:-230px;top:auto;bottom:-190px;margin-top:0;width:420px;height:420px}}
@media (prefers-reduced-motion:reduce){.band-art{animation:none}.hook-band::after{display:none}}

@media (max-width:900px){
  .hook{grid-template-columns:1fr;gap:26px;margin-top:44px}
  .hook-preview{order:-1}
  .hook-picks,.hook-fields{grid-template-columns:1fr}
  .hook-band{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.js .peek.on{animation:none}}
/* =========================================================================
   Chapter (dark inset object): How it works + platform
   ========================================================================= */
.chapter{position:relative;margin:0 16px;border-radius:var(--r-chapter);background:var(--night);color:#fff}
.chapter .ambient{border-radius:inherit}
@media (max-width:640px){.chapter .wrap{padding-left:28px;padding-right:28px}}
/* =========================================================================
   FAQ: centered glass accordion
   ========================================================================= */
.faq{text-align:center}
.faq .h2{margin:0 auto}
.faq-list{position:relative;z-index:1;margin:56px auto 0;max-width:860px;display:grid;gap:10px;text-align:left}
.faq-list details{border-radius:var(--r-tile)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 26px 24px 30px;font-size:19.5px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.plus{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:18px;background:rgba(12,12,14,.05);transition:transform .3s var(--ease),background .3s,color .3s}
details[open] .plus{transform:rotate(45deg);background:var(--brand);color:#fff}
.faq-list details::details-content{block-size:0;overflow:hidden;transition:block-size .3s var(--ease),content-visibility .3s allow-discrete}
.faq-list details[open]::details-content{block-size:auto}
.ans{padding:0 80px 28px 30px;color:var(--gray);font-size:17px;max-width:66ch}
.ans a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (max-width:640px){.faq-list summary{font-size:17.5px;padding:20px 18px 20px 22px}.ans{padding:0 22px 22px}}
/* =========================================================================
   Closing: dark lens banner
   ========================================================================= */
.cta{position:relative;margin:0 16px;border-radius:var(--r-chapter);background:var(--night);color:#fff;overflow:hidden;min-height:min(92vh,860px);display:grid;place-items:center;text-align:center;padding:120px 24px}
.cta canvas{position:absolute;inset:0;width:100%;height:100%}
.cta-copy{position:relative;z-index:2;isolation:isolate}
.cta-copy::before{content:"";position:absolute;z-index:-1;inset:-70px -110px;background:radial-gradient(closest-side,rgba(var(--brand-darkest-rgb),.92) 55%,rgba(var(--brand-darkest-rgb),0))}
.cta h2{font-size:clamp(46px,7vw,112px);font-weight:900;letter-spacing:-.055em;line-height:.95;max-width:11ch;margin:0 auto}
.cta p{margin:26px auto 0;max-width:36ch;color:var(--night-gray);font-size:clamp(18px,1.6vw,21px)}
.cta .ctas{justify-content:center}
.cta .btn-glass-dark{color:#fff;border-radius:var(--r-pill)}

/* trust marks: each mark drawn inline in its own colours (footer band) */
.mark{height:50px;display:block}
.mark svg,.mark img{height:100%;width:auto;display:block}
.mark text{font-family:inherit;text-anchor:middle}
.mark .logo-iso{height:56px}
.iso-arc{font-size:6.4px;font-weight:700;fill:#1d4d9d}
.iso-word{font-size:36px;font-weight:900;letter-spacing:-1px;fill:#1d4d9d}
.iso-word.knock{fill:none;stroke:var(--bg);stroke-width:7;stroke-linejoin:round}
.iso-num{font-size:16px;font-weight:800;fill:#1d4d9d}
.soc-word{font-size:25px;font-weight:900;letter-spacing:-.5px;fill:#fff}
.soc-sub{font-size:10px;font-weight:800;letter-spacing:1.5px;fill:#fff;opacity:.85}
.mark .logo-gptw{height:60px}
.mark .gptw-line{font-size:12.5px;font-weight:800;letter-spacing:-.2px;fill:#fff;text-anchor:start}
.gptw-r{font-size:5px;font-weight:600}
.gptw-cert{font-size:10.5px;font-weight:800;fill:#fff}
.gptw-small{font-size:4.4px;font-weight:700;fill:#fff}
.gptw-country{font-size:5.6px;font-weight:800;letter-spacing:.4px;fill:#fff}
.mark .logo-gartner{height:30px}
.gartner-word{font-size:38px;font-weight:800;letter-spacing:-1.5px;fill:#fff}
.gartner-r{font-size:8px;font-weight:600;fill:#fff}
/* ---------- footer ---------- */
footer{padding:110px 0 60px}
/* brand band: who we are on the left, where we are on the right */
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:36px 56px;padding-bottom:54px;margin-bottom:50px;border-bottom:1px solid var(--line)}
.foot-brand p{margin-top:18px;color:var(--gray);font-size:15.5px;max-width:34ch}
.tagline{font-size:15px;font-weight:600;color:var(--ink)}
.tagline em{font-weight:800}
/* five columns, one per nav topic */
.foot-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:36px 26px;align-items:start}
.foot-col h2{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.foot-col ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:0}
.foot-col a{display:inline-flex;align-items:center;gap:5px;min-height:36px;font-size:14.5px;color:var(--gray);transition:color .3s var(--ease)}
.foot-col a:hover{color:var(--ink)}
.foot-col a i{font-size:13px}
/* social: small monochrome circles, brand marks in fill weight so they read at 17px */
.foot-social{margin-top:26px;display:flex;gap:10px}
.foot-social a{
  width:42px;height:42px;border-radius:var(--r-pill);
  display:grid;place-items:center;font-size:17px;color:var(--gray);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
@media (hover:hover) and (pointer:fine){.foot-social a:hover{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(12,12,14,.2);transform:translateY(-2px)}}
.foot-pubs{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 24px}
.foot-pubs a{display:inline-flex;align-items:center;gap:5px;min-height:34px;font-size:15px;font-weight:600;color:var(--gray);transition:color .3s var(--ease)}
.foot-pubs a:hover{color:var(--ink)}
.foot-pubs i{font-size:14px}
.foot-offices{flex:1 1 560px;min-width:0;max-width:760px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 28px;padding-top:4px}
.office{padding-top:16px;border-top:1px solid var(--line);font-style:normal;font-size:13.5px;line-height:1.6;color:var(--gray)}
.office-region{display:block;margin-bottom:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.office b{display:block;margin-bottom:6px;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
@media (max-width:900px){.foot-offices{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}}
@media (max-width:360px){.foot-offices{grid-template-columns:1fr}}
/* trust marks repeated from the hero, same artwork and colours, in their own ruled band */
.foot-marks{
  list-style:none;margin:54px 0 0;padding:44px 0 0;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:26px 40px;
}
.foot-bottom{margin-top:34px;padding-top:30px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:14px;color:var(--gray)}
.foot-bottom nav{display:flex;gap:22px}
@media (max-width:1080px){.foot-grid{grid-template-columns:repeat(3,1fr);gap:40px 26px}}
@media (max-width:900px){.foot-marks{gap:22px 30px}.foot-marks .mark{height:42px}.foot-marks .logo-iso{height:48px}.foot-marks .logo-gptw{height:50px}.foot-marks .logo-gartner{height:26px}}
@media (max-width:640px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
/* ---------- review mode ---------- */
.review-toggle{position:fixed;right:16px;bottom:16px;z-index:85;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-pill);background:var(--brand);color:#fff;font-size:13px;font-weight:700;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 12px 30px rgba(12,12,14,.3)}
.review .review-toggle{background:#fff;color:var(--ink)}
.review [data-draft]{outline:1.5px dashed currentColor;outline-offset:4px;border-radius:4px}
.review [data-ph]{outline:1.5px dashed var(--gray);outline-offset:-8px}

/* ---------- press feedback (after the hover rules, so it wins while pressed) ---------- */
.btn:active,.btn-ink:active,.btn-glass:active,.btn-line:active,.nav-top:active{transform:scale(.97)}
.menu-btn:active{transform:scale(.94)}
.pick:active .pick-box{transform:scale(.98)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* gentler, not zero: nothing moves, but fades and colour changes stay */
  *,*::before,*::after{animation:none!important;transition-property:opacity,color,background-color,border-color,box-shadow,fill,stroke!important;transition-duration:.2s!important;transition-delay:0s!important}
  .js .reveal{opacity:1;transform:none;filter:none}
  .fill .w{color:var(--ink)}
  .cost-bar{transform:none}
}

/* =========================================================================
   SOLUTIONS PAGE
   Everything above this line is shared with the homepage (index.html).
   ========================================================================= */

/* nav: this page's section */
.nav-top.is-current{opacity:1}
.nav-top.is-current::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:2px}

[hidden]{display:none!important}
.crumbs{position:relative;z-index:2}
.crumbs ol{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--gray)}
.crumbs li + li::before{content:"/";margin-right:8px;color:var(--gray-3)}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}
.s-head{position:relative;z-index:1}
.s-head .h2{max-width:26ch}
.btn-line{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
@media (hover:hover) and (pointer:fine){.btn-line:hover{box-shadow:inset 0 0 0 1px #fff;transform:translateY(-2px)}}
.glyph circle{fill:var(--brand);transition:transform .5s var(--ease);transform-box:fill-box;transform-origin:center}
.glyph circle.off{fill:var(--gray-3)}


/* =========================================================================
   CAREERS + THINKSCHOOL PAGES
   Everything above is shared with the About page (values, the dark stats
   chapter, the careers band) and the partner pages (the numbered rail).
   Neither page is in the nav: they are reached from the footer.
   ========================================================================= */
/* ---------- values ---------- */
.vals{position:relative;z-index:1;margin-top:60px;display:grid;grid-template-columns:.8fr 1.2fr;gap:16px;align-items:stretch}
.val-tabs{display:grid;gap:4px;align-content:start;padding:14px}
.val-tab{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border-radius:18px;text-align:left;font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--gray);transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.val-tab .n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:800;background:rgba(12,12,14,.05);color:var(--ink);transition:background .35s,color .35s}
.val-tab:hover{background:rgba(255,255,255,.75);color:var(--ink)}
.val-tab[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.val-tab[aria-selected="true"] .n{background:var(--brand);color:#fff}
.val-panel{padding:44px 46px 42px;display:flex;flex-direction:column}
.val-panel[hidden]{display:none}
.val-panel .glyph{width:52px;height:52px}
.val-panel h3{margin-top:22px;font-size:clamp(30px,3vw,40px);font-weight:900;letter-spacing:-.035em;line-height:1.04;color:var(--ink)}
.val-pair{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:0}
.val-pair > div{padding:4px 28px 4px 0}
.val-pair > div + div{padding:4px 0 4px 28px;border-left:1px solid var(--line)}
.val-pair small{display:block;font-size:13.5px;font-weight:700;color:var(--gray)}
.val-pair p{margin-top:8px;font-size:16.5px;line-height:1.5;color:var(--gray)}
.val-pair .you p{font-size:19px;line-height:1.42;font-weight:700;letter-spacing:-.012em;color:var(--ink)}
.js .val-panel.show .val-pair,.js .val-panel.show h3{animation:peekIn .5s var(--ease) both}
.js .val-panel.show .val-pair{animation-delay:60ms}
@keyframes peekIn{from{opacity:0;transform:translateY(8px)}}
@media (max-width:900px){
  .vals{grid-template-columns:1fr}
  .val-tabs{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;scrollbar-width:none;padding:6px;margin:0 -16px;padding-inline:16px}
  .val-tabs::-webkit-scrollbar{display:none}
  .val-tabs.glass{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0}
  .val-tabs.glass::before,.val-tabs.glass::after{display:none}
  .val-tab{background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--line)}
  .val-tab{font-size:16px;padding:11px 16px 11px 12px}
  .val-panel{padding:30px 24px 28px}
  .val-pair{grid-template-columns:1fr;gap:18px}
  .val-pair > div,.val-pair > div + div{padding:0;border:0}
  .val-pair > div + div{padding-top:18px;border-top:1px solid var(--line)}
}


/* ---------- why clients stay (dark chapter) ---------- */
.stay{padding:130px 0 120px}
.stay .h2{max-width:22ch}
.dstats{position:relative;z-index:1;margin-top:60px;display:grid;grid-template-columns:repeat(5,1fr)}
.dstat{padding:34px 28px 30px;position:relative}
.dstat + .dstat::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:1px;background:var(--night-line)}
.dstat-num{font-size:clamp(38px,3.8vw,54px);font-weight:800;letter-spacing:-.05em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.dstat-label{margin-top:12px;font-size:15px;font-weight:600;color:#fff;line-height:1.35}
.dstat-src{margin-top:6px;font-size:13px;font-weight:600;color:var(--night-gray)}
.stay-quote{position:relative;z-index:1;margin-top:90px;display:grid;grid-template-columns:1.3fr .7fr;gap:60px;align-items:end}
.stay .quote{margin:0;max-width:34ch;color:#fff;font-size:clamp(28px,3vw,42px);font-weight:700;letter-spacing:-.03em;line-height:1.2}
.stay .quote b{font-weight:900}
.stay .attrib{position:relative;z-index:1;margin-top:28px;display:flex;align-items:center;gap:16px}
.stay .who-mono{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:900;color:var(--ink);background:#fff}
.stay .who-mono img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 20%}
.stay .who-txt b{display:block;font-size:17px;color:#fff}
.stay .who-txt span{font-size:15px;color:var(--night-gray)}
.recog small{display:block;font-size:14px;font-weight:700;color:var(--night-gray)}
.recog ul{margin-top:14px;display:grid;gap:8px}
.recog li{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:16px;font-size:15.5px;font-weight:700;color:#fff;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.recog li i{font-size:20px;color:var(--night-gray)}
.stay .nudge{margin-top:70px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.stay .nudge h3{color:#fff}
.stay .nudge h3 span{color:var(--night-gray)}
.stay .nfield input{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.stay .nfield input::placeholder{color:#8e8e96}
.stay .nfield input:focus{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.5px #fff}
.stay .nerr{color:#fff}
.stay .nfine{color:var(--night-gray)}
.stay .nfine a{color:#fff}
.stay .btn-ink{background:#fff;color:var(--brand);box-shadow:none}
.stay .ndone{color:#fff}
.stay .ndone i{background:#fff;color:var(--ink)}
.stay .ndone span{color:var(--night-gray)}
@media (max-width:1000px){
  .dstats{grid-template-columns:1fr 1fr}
  .dstat + .dstat::before{display:none}
  .dstat{border-top:1px solid var(--night-line);padding:26px 4px}
  .dstat:nth-child(-n+2){border-top:0}
  .dstat:last-child{grid-column:1/-1}
  .stay-quote{grid-template-columns:1fr;gap:44px}
}
@media (max-width:640px){.stay{padding:90px 0 80px}}


/* ---------- careers band ---------- */
.careers .hook-band{padding:56px 56px 54px;align-items:flex-end}
.careers .hook-band h2{font-size:clamp(34px,4.4vw,58px);font-weight:800;letter-spacing:-.035em;line-height:1.06;color:var(--ink);max-width:14ch}
.careers .hook-band p{margin-top:16px;font-size:17.5px;max-width:46ch}
.perks{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px}
.perks span{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink-2);padding:9px 15px 9px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--line)}
.perks i{font-size:16px}
@media (max-width:640px){.careers .hook-band{padding:34px 24px 32px}}


.portrait{display:block;position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,rgba(12,12,14,.025),rgba(12,12,14,.06))}
.portrait svg{position:absolute;inset:0;width:100%;height:100%;transition:transform 1.2s var(--ease)}
.portrait circle{fill:var(--brand)}

/* numbered steps on a rail (the numbers carry the order) */
.rail{position:relative;z-index:1;margin-top:64px;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:36px}
.rail::before,.rail::after{content:"";position:absolute;left:20px;right:20px;top:19.5px;height:1px;background:rgba(12,12,14,.14)}
.rail::after{background:var(--brand);transform-origin:left;transform:scaleX(0);transition:transform 1.8s var(--ease) .15s}
.rail.in::after{transform:none}
.step{position:relative}
.step-n{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;
  background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(12,12,14,.18);transition:background .5s var(--ease),color .5s var(--ease),box-shadow .5s;transition-delay:calc(.35s + var(--i) * .4s)}
.rail.in .step-n{background:var(--brand);color:#fff;box-shadow:0 10px 22px -10px rgba(12,12,14,.5)}
.step h3{margin-top:24px;font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.step p{margin-top:10px;font-size:16px;line-height:1.55;color:var(--gray);max-width:36ch}
.chapter .rail::before{background:rgba(255,255,255,.14)}
.chapter .rail::after{background:#fff}
.chapter .step-n{background:var(--night);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.chapter .rail.in .step-n{background:#fff;color:var(--ink);box-shadow:none}
.chapter .step h3{color:#fff}
.chapter .step p{color:var(--night-gray)}
@media (max-width:900px){
  .rail{grid-template-columns:1fr;gap:34px;margin-top:48px}
  .rail::before,.rail::after{left:19.5px;right:auto;top:20px;bottom:20px;width:1px;height:auto}
  .rail::after{transform-origin:top;transform:scaleY(0)}
  .step{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:20px}
  .step h3{margin-top:8px}
  .step p{grid-column:2}
}


/* hero: short, copy on the left, one glass card on the right */
.k-hero{min-height:0}
.k-hero .hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:60px;align-items:center;padding-top:150px;padding-bottom:90px}
/* the glow fades out before the hero ends, so there is no hard line under the buttons */
.k-hero .ambient{-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.k-hero .hero-copy{max-width:none}
.k-hero .hero-title{margin-top:22px;max-width:15ch;text-wrap:balance}
.k-hero .hero-sub{max-width:50ch}
@media (max-width:980px){.k-hero .hero-grid{grid-template-columns:1fr;gap:44px;padding-top:124px}}

/* careers hero: ratings and recognition under the buttons */
.rated{margin:40px 0 0;padding:0;list-style:none;display:flex;flex-wrap:nowrap;gap:clamp(16px,2.2vw,30px)}
.rated li{display:flex;align-items:center;gap:10px;min-width:0}
.rated .lg{flex:none;height:34px;width:auto}
.rated .lg.gptw{height:68px}
.rated b{display:flex;align-items:baseline;gap:2px;font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.1;color:var(--ink)}
.rated b small{font-size:12px;font-weight:700;color:var(--gray)}
.rated .star{font-style:normal;font-size:13px;color:#f2a51a;margin-left:2px}
.rated span{display:block;margin-top:2px;font-size:13px;font-weight:600;color:var(--gray)}
/* phones: still one row, each badge stacks its logo over the rating */
@media (max-width:640px){.rated{margin-top:32px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.rated li{flex-direction:column;align-items:flex-start;gap:8px}.rated .lg{height:28px}.rated .lg.gptw{height:60px}.rated b{font-size:15px}.rated span{font-size:11.5px;line-height:1.3}}
/* careers hero art: a hand-drawn whiteboard in the About page's style (frame, hatching, Caveat). It draws
   itself in once the hero is on screen, then comes alive: data moves between the boxes, the bulb glows,
   the question mark rocks, the cursor blinks */
.wb{position:relative;margin:0;width:100%;max-width:560px;justify-self:end;--k:.2s}
.wb-board{position:relative;padding:22px 22px 30px;border-radius:14px;background:linear-gradient(160deg,#fdfdfd,#f1f1f4);
  box-shadow:inset 0 0 0 9px #e4e4e9,inset 0 0 0 10px #d2d2d9,0 30px 60px -34px rgba(12,12,14,.35);transform:rotate(-1.2deg)}
.wb-date{position:absolute;right:26px;top:16px;margin:0;font-family:"Caveat",cursive;font-size:21px;color:#8a8a93;z-index:1}
.wb-svg{display:block;width:100%;height:auto;margin-top:10px;overflow:visible}
.wb .ink{fill:none;stroke:#2a2a30;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.wb .ink.brand{stroke:var(--brand);stroke-width:3.2}
.wb .ink.thin{stroke-width:1.8}
.wb .ink.chk{stroke-width:4}
.wb .ink.tangle{stroke:rgba(142,47,69,.75);stroke-width:2}
.wb .ed{fill:#fff}
.wb .hw{font-family:"Caveat",cursive;font-size:22px;font-weight:600;fill:#2a2a30}
.wb .hw.md{font-size:25px;font-weight:700}
.wb .hw.sm{font-size:20px;font-weight:600;fill:#55555d}
.wb .hw.sm.dk{font-size:25px;fill:#2a2a30;font-weight:700}
.wb .hw.xs{font-size:17px;font-weight:700}
.wb .hw.num{font-size:38px;font-weight:700}
.wb .hw.big{font-size:64px;font-weight:700}
.wb .hw.brand{fill:var(--brand)}
.wb .hw.mid{text-anchor:middle}
.wb .flow circle{fill:var(--brand)}
.wb .glow{fill:var(--brand);opacity:0;transform-box:fill-box;transform-origin:center}
.wb .cursor{fill:var(--brand);opacity:0}
.wb .q{transform-box:fill-box;transform-origin:50% 90%}
.wb .ray{transform-box:fill-box;transform-origin:50% 100%}
.wb-tray{position:absolute;left:18%;right:18%;bottom:-4px;height:12px;border-radius:0 0 8px 8px;background:#dcdce2;display:flex;gap:10px;justify-content:center;align-items:flex-start;padding-top:2px}
.wb-tray span{width:46px;height:8px;border-radius:4px;background:#2a2a30}
.wb-tray .p{background:var(--brand)}.wb-tray .b{background:#1d4d9d}
.wb-cap{margin-top:26px;text-align:center;font-family:"Caveat",cursive;font-size:22px;color:var(--gray)}
/* the drawing, in order */
.js .wb .ink{stroke-dasharray:1;stroke-dashoffset:1}
.js .wb .hw,.js .wb .hatch,.js .wb .ed,.js .wb .flow{opacity:0}
.js .wb.in .ink{animation:wbDraw .7s var(--ease) forwards;animation-delay:calc(var(--i) * var(--k) + .3s)}
.js .wb.in .ink.tangle{animation-duration:1.4s}
.js .wb.in .hw,.js .wb.in .hatch,.js .wb.in .ed{transition:opacity .6s ease;transition-delay:calc(var(--i) * var(--k) + .4s);opacity:1}
/* then it comes alive */
.js .wb.in .flow{transition:opacity .6s ease 2s;opacity:1}
.wb.in .glow{animation:wbGlow 3.2s ease-in-out 1.6s infinite}
.js .wb.in .ink.ray{animation:wbDraw .7s var(--ease) forwards,wbRay 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * var(--k) + .3s),1.8s}
.wb.in .q{animation:wbRock 4s ease-in-out 1.4s infinite}
.wb.in .cursor{animation:wbBlink 1.1s steps(1) 2.4s infinite}
@keyframes wbDraw{to{stroke-dashoffset:0}}
@keyframes wbGlow{0%,100%{opacity:0;transform:scale(.9)}50%{opacity:.16;transform:scale(1.05)}}
@keyframes wbRay{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes wbRock{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}40%{transform:rotate(5deg)}60%{transform:rotate(0)}}
@keyframes wbBlink{0%{opacity:1}50%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .js .wb .ink{stroke-dasharray:none;animation:none}
  .js .wb .hw,.js .wb .hatch,.js .wb .ed{opacity:1;transition:none}
  .wb .flow,.wb .cursor,.wb .glow{display:none}
  .wb.in .q{animation:none}
}
@media (max-width:980px){.wb{justify-self:start}.wb-board{transform:none}}

/* thinkSchool hero: batch status, above the headline */
.batch{margin-top:22px;display:inline-flex;align-items:center;gap:9px;padding:8px 15px 8px 13px;border-radius:var(--r-pill);font-size:14px;font-weight:700;color:var(--ink-2);background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--line)}
.batch i{width:8px;height:8px;border-radius:50%;background:var(--gray-2)}
.batch + .hero-title{margin-top:18px}

/* thinkSchool hero card: the program in five lines */
.glance{padding:30px 32px 22px}
.glance-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--gray)}
.glance-label i{font-size:18px;color:var(--ink)}
.glance dl{margin:10px 0 0}
.glance-row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:14px 0;border-bottom:1px solid var(--line)}
.glance-row:last-child{border-bottom:0}
.glance dt{flex:none;font-size:15px;font-weight:600;color:var(--gray)}
.glance dd{margin:0;font-size:17px;font-weight:800;letter-spacing:-.015em;line-height:1.3;color:var(--ink);text-align:right}
@media (max-width:640px){.glance{padding:26px 22px 22px}}

/* fact tiles: a dot glyph, a short claim, one line of proof */
.facts{position:relative;z-index:1;margin-top:60px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.facts-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fact{padding:30px 28px 30px;border-radius:var(--r-tile)}
.fact .glyph{width:40px;height:40px}
.fact h3{margin-top:24px;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.22;color:var(--ink)}
.fact p{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--gray)}
@media (max-width:1000px){.facts,.facts-3{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.facts,.facts-3{grid-template-columns:1fr}.fact{padding:26px 22px}}
.strip{position:relative;z-index:1;margin-top:14px;display:flex;align-items:center;gap:14px;padding:22px 28px;border-radius:var(--r-tile);background:var(--bg-2);font-size:17.5px;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.strip i{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:15px;background:var(--brand);color:#fff}

/* technology chips, in two labelled groups */
.stack{position:relative;z-index:1;margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
.stack small{display:block;font-size:14px;font-weight:700;color:var(--gray)}
.stack .perks{margin-top:12px}
@media (max-width:760px){.stack{grid-template-columns:1fr}}

/* benefits: a hairline grid, not cards ("glass is reserved") */
.benefits{position:relative;z-index:1;margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;border-top:1px solid var(--line)}
.benefit{display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;padding:28px 0 30px;border-bottom:1px solid var(--line)}
.benefit-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px var(--line);font-size:24px;color:var(--ink)}
.benefit h3{margin-top:2px;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.benefit p{margin-top:6px;font-size:15.5px;line-height:1.5;color:var(--gray);max-width:34ch}
@media (max-width:1000px){.benefits{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.benefits{grid-template-columns:1fr}.benefit{padding:22px 0 24px}}

/* eligibility: must-haves in glass, nice-to-haves flat */
.elig{position:relative;z-index:1;margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.elig-card{padding:34px 36px 26px;border-radius:var(--r-panel)}
.elig-card.nice{background:rgba(255,255,255,.45);box-shadow:inset 0 0 0 1px var(--line)}
.elig-card h3{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.elig-card ul{margin-top:14px;display:grid}
.elig-card li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);font-size:16.5px;line-height:1.45;color:var(--ink-2)}
.elig-card li:last-child{border-bottom:0}
.elig-card li i{flex:none;margin-top:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:var(--brand);color:#fff}
.elig-card.nice li i{background:rgba(12,12,14,.07);color:var(--ink)}
@media (max-width:900px){.elig{grid-template-columns:1fr}.elig-card{padding:28px 24px 20px}}

/* voices: people in their own words, in balanced columns */
.voices{position:relative;z-index:1;margin-top:60px;columns:3 300px;column-gap:14px}
.voice{break-inside:avoid;margin:0 0 14px;padding:28px 28px 24px;border-radius:var(--r-tile);background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--line);transition:background .5s var(--ease)}
.voice:hover{background:#fff}
.voice blockquote{margin:0;font-size:17.5px;font-weight:600;line-height:1.5;letter-spacing:-.01em;color:var(--ink-2)}
.voice figcaption{margin-top:22px;display:flex;align-items:center;gap:12px}
.voice .portrait{flex:none;width:46px;border-radius:50%}
.voice b{display:block;font-size:15px;font-weight:800;line-height:1.3;color:var(--ink)}
.voice small{display:block;margin-top:2px;font-size:13px;font-weight:600;line-height:1.35;color:var(--gray)}

/* links inside FAQ answers */
.ans a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}


/* thinkOne set like the thinkbridge logo: "think" bold, "One" light */
tb-run{display:inline}
tb-one{font-weight:300}
tb-k{font-weight:800}

/* BRAND:START
   Brand colors, chosen in color-lab.html ("Yours", 23 Sept 2026) and applied site-wide on 25 Sept 2026.
   This block is identical on every page. To change a color, edit the tokens here on every page.
   Headings and body text stay ink and gray; the violet goes into surfaces, fills, buttons and dark sections. */
:root{
  --brand:#330066;--brand-rgb:51,0,102;
  --brand-darkest:#0f001f;--brand-darkest-rgb:15,0,31;
  --brand-dark:#1f003d;--brand-dark-rgb:31,0,61;
  --brand-medium:#8566a3;
  --brand-light:#c6b8d4;
  --brand-lightest:#f1edf4;
  --surface-wash:#f6f0f7;--surface-wash-rgb:246,240,247;
  --highlight:#330066;--on-highlight:#fff;
  /* main buttons: the deep-violet glow of the dark sections (How it works) */
  --cta-fill:radial-gradient(90% 170% at 100% 0%,rgba(var(--brand-rgb),.95),transparent 70%),radial-gradient(80% 150% at 0% 100%,rgba(var(--brand-dark-rgb),.9),transparent 65%),var(--brand-darkest);
  --brand-gradient:linear-gradient(135deg,#0f001f 15%,#330066);
  --brand-gradient-dark:linear-gradient(135deg,#fff 25%,#c6b8d4);
}

/* pure white page, with a faint violet glow along the edges */
body{background:#fff}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(55% 45% at 100% 0%,rgba(var(--brand-rgb),.13),transparent 70%),
    radial-gradient(50% 45% at 0% 100%,rgba(var(--brand-rgb),.1),transparent 70%);
  box-shadow:inset 0 0 160px rgba(var(--brand-rgb),.07)}
.orb.a{background:radial-gradient(circle,rgba(var(--brand-rgb),.16) 0,rgba(var(--brand-rgb),0) 70%)}
.orb.b{background:radial-gradient(circle,rgba(var(--brand-rgb),.11) 0,rgba(var(--brand-rgb),0) 70%)}
.chapter .orb.a,.chapter .orb.b,.cta .orb.a,.cta .orb.b{background:radial-gradient(circle,rgba(255,255,255,.1) 0,transparent 70%)}

/* tiles and containers: white, with the pale wash fading in from one corner */
.promise,
.case:not(.case-big){
  background:
    radial-gradient(110% 90% at 100% 0%,rgba(var(--surface-wash-rgb),.1),transparent 58%),
    linear-gradient(165deg,#fff 55%,rgba(var(--surface-wash-rgb),.05));
  box-shadow:inset 0 0 0 1px rgba(var(--brand-rgb),.15)}
.promise:hover{background:radial-gradient(110% 90% at 100% 0%,rgba(var(--surface-wash-rgb),.14),transparent 62%),#fff}
.case:not(.case-big):hover{box-shadow:inset 0 0 0 1px var(--brand)}
.case::before{background-image:radial-gradient(circle,rgba(var(--brand-rgb),.32) 1.3px,transparent 1.8px)}
/* glass keeps its depth; the tint goes into the sheen and the rim */
.glass::before{background:
    radial-gradient(90% 80% at 100% 100%,rgba(var(--surface-wash-rgb),.09),transparent 60%),
    radial-gradient(120% 70% at 12% -10%,rgba(255,255,255,.95),transparent 46%),
    linear-gradient(100deg,rgba(255,255,255,.35),transparent 38%,transparent 70%,rgba(255,255,255,.25))}
.glass::after{background:linear-gradient(155deg,#fff,rgba(var(--surface-wash-rgb),.1) 30%,rgba(var(--surface-wash-rgb),.24) 65%,rgba(255,255,255,.75))}
.nav.glass::before{background:radial-gradient(60% 120% at 100% 100%,rgba(var(--surface-wash-rgb),.07),transparent 70%)}
.stat + .stat::before{background:rgba(var(--brand-rgb),.16)}
.door-light .door-dots,.band-art{background-image:radial-gradient(circle,rgba(var(--brand-rgb),.34) 1.3px,transparent 1.8px)}
.hook-field input{box-shadow:inset 0 0 0 1px rgba(var(--brand-rgb),.18)}

/* big numbers and highlighted large text: the violet gradient */
.stat-num,
.case-num,
.hl{background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.case-big .case-num,
.proof-card .stat-num,
.chapter .hl,
.cta .hl{background:var(--brand-gradient-dark);-webkit-background-clip:text;background-clip:text}
.proof-card .stat + .stat::before{background:var(--night-line)}
.proof-card :focus-visible{outline-color:var(--brand-light)}

/* small details */
::selection{background:var(--brand);color:#fff}
:focus-visible{outline-color:var(--brand)}
.chapter :focus-visible,.cta :focus-visible,.case-big :focus-visible{outline-color:var(--brand-light)}
.glyph circle.off{fill:var(--brand-light)}
.case:not(.case-big) .link,.case:not(.case-big) .case-who{color:var(--brand)}
.plus{background:rgba(var(--brand-rgb),.07);color:var(--brand)}
.nav-top:hover,.nav-top[aria-expanded="true"],.dd-item:hover{background:rgba(var(--brand-rgb),.07)}
.dd-ico{background:rgba(var(--brand-rgb),.07);color:var(--brand)}
.door-light .door-tags i{background:rgba(var(--brand-rgb),.06);box-shadow:inset 0 0 0 1px rgba(var(--brand-rgb),.12)}
.hook-field input:focus{box-shadow:inset 0 0 0 1.5px var(--brand)}
.chapter .eyebrow,.cta .eyebrow{color:var(--brand-light)}
.stat-label{color:var(--ink-2)}

/* buttons: deep-violet gradient with white labels; the second button gets a violet hairline */
.btn-ink{background:var(--cta-fill);color:var(--on-highlight);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 30px -12px rgba(var(--brand-darkest-rgb),.55)}
.btn-ink:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 20px 40px -14px rgba(var(--brand-darkest-rgb),.65)}
.btn-glass{color:var(--brand);box-shadow:inset 0 0 0 1px rgba(var(--brand-rgb),.22),0 10px 24px -14px rgba(12,12,14,.45)}
.btn-glass:hover{box-shadow:inset 0 0 0 1.5px var(--brand),0 14px 30px -14px rgba(12,12,14,.5)}
.btn-glass-dark{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.btn-glass-dark:hover{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
/* inside dark sections the main button turns white with a violet label */
.chapter .btn-ink,.cta .btn-ink,.case-big .btn-ink,.nav.on-dark .nav-inner .btn-ink{background:#fff;color:var(--brand);box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}

/* arrow buttons and the open FAQ control use the highlight */
.door-go{background:var(--highlight);color:var(--on-highlight);box-shadow:0 14px 30px -12px rgba(12,12,14,.35)}
details[open] .plus{background:var(--highlight);color:var(--on-highlight)}
.case .link i{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;font-size:14px;background:var(--highlight);color:var(--on-highlight)}
.case-big .link i{background:#fff;color:var(--brand)}

/* dark sections turn deep violet */
.chapter,
.cta{background:
    radial-gradient(70% 60% at 92% 0%,rgba(var(--brand-rgb),.85),transparent 65%),
    radial-gradient(60% 50% at 0% 100%,rgba(var(--brand-dark-rgb),.9),transparent 60%),
    var(--brand-darkest)}
.cta-copy::before{background:radial-gradient(closest-side,rgba(var(--brand-darkest-rgb),.9) 55%,rgba(var(--brand-darkest-rgb),0))}
.case-big,
.door-dark{background:
    radial-gradient(70% 55% at 85% 8%,rgba(255,255,255,.14),transparent 60%),
    radial-gradient(80% 60% at 0% 100%,rgba(var(--brand-rgb),.9),transparent 65%),
    linear-gradient(160deg,var(--brand-dark),var(--brand-darkest))}
.case-big{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.14),0 40px 80px -40px rgba(12,12,14,.6)}
.door-dark .door-line,.case-big .case-how,.case-big .case-who{color:rgba(255,255,255,.72)}
.nav.glass.on-dark{background:linear-gradient(135deg,rgba(var(--brand-dark-rgb),.82),rgba(var(--brand-darkest-rgb),.72))}
.nav-dd.on-dark .dd-inner{background:linear-gradient(135deg,rgba(var(--brand-dark-rgb),.97),rgba(var(--brand-darkest-rgb),.96))}
.nav-dd.on-dark .dd-ico{background:rgba(255,255,255,.08);color:#fff}
.nav-dd.on-dark .dd-item:hover{background:rgba(255,255,255,.08)}
@media (prefers-reduced-transparency:reduce){.glass-dark{background:var(--brand-dark)}}

/* the two "What we build" doors are peers: both light, the first on a faint violet surface */
.door-alt{background:
    radial-gradient(90% 80% at 100% 0%,rgba(var(--surface-wash-rgb),.07),transparent 60%),
    linear-gradient(160deg,rgba(255,255,255,.75),rgba(255,255,255,.45))}
.door-alt::before{background:
    radial-gradient(90% 80% at 100% 0%,rgba(var(--surface-wash-rgb),.16),transparent 62%),
    radial-gradient(120% 70% at 12% -10%,rgba(255,255,255,.95),transparent 46%)}
.door-light .flow-lines path{stroke:rgba(var(--brand-rgb),.4)}
.door-light .flow-lines path:nth-child(even){stroke:rgba(var(--brand-rgb),.24)}
.door-light .flow-rails line{stroke:rgba(var(--brand-rgb),.22)}
.door-light .flow-pulse line{stroke:var(--brand)}

/* cards inside dark sections: white fading down into the pale wash, violet numbered circles, dark headings */
.chapter .step.glass-dark{
  background:linear-gradient(180deg,#fff 0%,var(--surface-wash) 100%);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 0 0 1px rgba(12,12,14,.06),0 24px 50px -30px rgba(0,0,0,.6)}
.chapter .step.glass-dark::after{display:none}
.chapter .step.glass-dark b{color:var(--brand-darkest)}
.chapter .step.glass-dark span:not(.step-n){color:var(--gray)}
.chapter .step.glass-dark .step-n{background:var(--brand);color:#fff;box-shadow:none}
/* stat strips inside dark sections get the same white-to-wash card */
.chapter .dstats.glass-dark{
  --night-line:rgba(var(--brand-rgb),.14);--night-gray:var(--gray);
  background:linear-gradient(180deg,#fff 0%,var(--surface-wash) 100%);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 0 0 1px rgba(12,12,14,.06),0 24px 50px -30px rgba(0,0,0,.6)}
.chapter .dstats.glass-dark::after{display:none}
.chapter .dstats .dstat-num{background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.chapter .dstats .dstat-label{color:var(--ink-2)}
/* interactive panels inside dark sections: solid and a shade darker than the section, instead of frosted glass */
.chapter .cr.glass-dark,.chapter .ref.glass-dark{
  background:linear-gradient(160deg,rgba(var(--brand-darkest-rgb),.9),rgba(var(--brand-darkest-rgb),.62));
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 20px 40px -26px rgba(0,0,0,.8)}
.chapter .cr.glass-dark::after,.chapter .ref.glass-dark::after{display:none}
/* dot glyphs take the brand colour unless a rule above says otherwise */
:where(.glyph) circle{fill:var(--brand)}
/* BRAND:END */

/* open roles (filled from Zoho Recruit by the build) */
.roles-bar{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.roles-chips{display:flex;flex-wrap:wrap;gap:8px}
.roles-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r-pill);font-size:14px;font-weight:700;color:var(--ink-2);background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--line);transition:background .25s,color .25s}
.roles-chip span{font-weight:600;color:var(--gray)}
.roles-chip[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.roles-chip[aria-pressed="true"] span{color:rgba(255,255,255,.7)}
.roles-search{position:relative;flex:0 1 320px}
.roles-search input{width:100%;padding:11px 14px 11px 38px;border-radius:var(--r-pill);border:0;font:inherit;font-size:15px;background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.roles-search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--gray)}
.roles-list{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.roles-list li{border-bottom:1px solid var(--line)}
.role{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:center;padding:22px 8px;border-radius:14px;transition:background .25s}
.role:hover{background:rgba(255,255,255,.65)}
.role-t{font-size:clamp(18px,1.6vw,21px);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.role-m{grid-column:1;font-size:14.5px;color:var(--gray)}
.role-go{grid-column:2;grid-row:1 / span 2;display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;color:var(--brand)}
.roles-empty{margin-top:18px;font-size:15.5px;color:var(--gray)}
.roles-portal{margin-top:26px}
.roles-foot{margin-top:20px;font-size:15px;color:var(--gray)}
.roles-foot a{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.role{grid-template-columns:1fr}.role-go{grid-column:1;grid-row:auto}.roles-search{flex-basis:100%}}