/* Board Infinity parent chrome — GENERATED from site-src/gen_site.py.
   Do not edit here; edit the generator so the live site and this preview
   can never disagree about what the navbar is. */

:root{
  --blue:#148AFF;           /* fills + large display only - 3.44:1, illegal for text */
  --blue-txt:#006BD6;       /* brand 7, 5.2:1 - links, labels, buttons with white text */
  --accent2:#7F56D9;        /* decorative rotation, 5.0:1 as text */
  --accent1:#F46C40;        /* decorative, large/non-text only */
  --accent1-txt:#A8351B;    /* accent 1 step 8, 6.6:1 */
  --success-txt:#036A3E;    /* success 9, 6.7:1 - real success signals only */
 --blue-hov:#3D9EFF; --blue-act:#0073E5;
  --blue-bg:#F5FAFF; --blue-bg-2:#E6F3FF; --blue-line:#99CCFF; --blue-soft:#C2E0FF;
  --success:#05C170; --success-bg:#E6F9F1; --warning:#FCA106; --warning-bg:#FFFAE6;
  --ink:#141414; --text:#262626; --text-2:#595959; --text-3:#595959; --muted:#BFBFBF;
  --line:#D9D9D9; --line-2:#EBEBEB; --paper:#FFFFFF; --paper-2:#FAFAFA;
  --canvas:#07111F; --canvas-2:#0F1B3D;
  --r-sm:8px; --r-md:10px; --r-lg:16px;
  --sh-sm:0 1px 3px 0 rgba(0,0,0,.08),0 1px 2px -1px rgba(0,0,0,.06);
  --sh-md:0 4px 16px rgba(0,0,0,.08);
  --sh-lg:0 24px 64px -16px rgba(7,17,31,.18);
  --max:1200px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* type scale - 23 distinct sizes and 6 weights had accumulated across the page */
  --t-xs:12px; --t-sm:13.5px; --t-md:15px; --t-lg:17px; --t-xl:20px;
  --t-2xl:24px; --t-3xl:30px; --t-4xl:38px; --t-5xl:48px;
}
/* Inter was declared everywhere but never actually LOADED: these pages skip
   wp_head, so the theme's enqueued @font-face never reached them and every page
   silently fell back to the visitor's system font. The woff2 the theme already
   self-hosts is one variable file covering 100-900. */
@font-face{font-family:'Inter';src:url('/wp-content/themes/bi-child/assets/fonts/inter-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--font);font-size:16px;line-height:1.65;color:var(--text-2);background:var(--paper);
  -webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--blue-soft)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
h1,h2,h3{color:var(--ink);font-weight:800;letter-spacing:-.025em;line-height:1.1}
.num{font-variant-numeric:tabular-nums}
.kicker{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue-txt)}
.kicker .idx{color:var(--text-3);font-weight:600;letter-spacing:.08em}
.kicker::after{content:"";flex:1;height:1px;background:var(--line-2);transform:translateY(-4px)}
.sec-h{font-size:clamp(1.8rem,3.1vw,2.6rem);max-width:800px}
.sec-h em{font-style:normal;color:var(--blue-txt)}
.sec-sub{font-size:16.5px;color:var(--text-2);max-width:640px;margin-top:14px}
.sec{padding:88px 0;position:relative}
@media(max-width:760px){.sec{padding:60px 0}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15px;
  line-height:1;border-radius:var(--r-md);border:1px solid transparent;padding:15px 26px;white-space:nowrap;
  transition:background-color .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s}
.btn:focus-visible{outline:2px solid transparent;box-shadow:0 0 0 3px var(--blue-soft)}
.btn-primary{background:var(--blue-txt);color:#fff}
.btn-primary:hover{background:var(--blue-hov);transform:translateY(-1px)}  /* CTA shadow removed */
.btn-primary:active{background:var(--blue-act)}
.btn-ghost{background:var(--paper);color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--blue-txt);color:var(--blue-txt);background:var(--blue-bg)}
.btn-dark-ghost{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.22)}
.btn-dark-ghost:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.12);color:#fff}
.btn .arr{transition:transform .18s}
.btn:hover .arr{transform:translateX(3px)}
.link{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:700;color:var(--blue-txt)}
.link:hover{color:var(--blue-act)}

/* nav */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 28px;height:66px;display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:16.5px;color:var(--ink);white-space:nowrap}
.logo img{width:32px;height:32px;border-radius:50%}
.nav-links{display:flex;gap:2px;flex:1;justify-content:center;align-items:center}
.nav-links>div{position:relative;display:flex;align-items:center}
.nav-links a,.nav-links button{display:block;font-size:14.5px;font-weight:600;color:var(--text-2);
  padding:9px 13px;border-radius:var(--r-sm);background:none;border:0;transition:color .15s,background .15s}
/* Top-level items only (direct children — dropdown links keep their own rules).
   A <button> does NOT inherit font-family, so the menu buttons were rendering in
   the browser's default UI font while the plain links used Inter: same px, two
   different typefaces and two different baselines. Fixed height + inline-flex
   pins every item to one line. */
.nav-links>div>a,.nav-links>div>button{display:inline-flex;align-items:center;gap:5px;
  font-family:inherit;font-size:14.5px;font-weight:600;line-height:1;letter-spacing:inherit;
  height:38px;padding:0 13px;white-space:nowrap;cursor:pointer}
.nav-links a:hover,.nav-links button:hover{color:var(--ink);background:var(--paper-2)}
.dd{position:absolute;top:100%;left:0;min-width:270px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:10px;opacity:0;visibility:hidden;
  transform:translateY(6px);transition:all .18s}
.nav-links>div:hover .dd,.nav-links>div:focus-within .dd{opacity:1;visibility:visible;transform:none}
.dd a{padding:9px 12px;font-size:13.5px;border-radius:var(--r-sm)}
.dd .dd-h{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);padding:10px 12px 4px}
.nav-cta{display:flex;align-items:center;gap:8px;margin-left:auto}
/* Everything in the bar sits on the same 38px height and the same 14.5px type
   as the menu items. Login had no desktop rule at all, so it fell back to 16px
   body text and read as a different family of control. */
.nav-cta{gap:6px}
.nav-cta .login{display:inline-flex;align-items:center;height:38px;padding:0 13px;
  font-size:14.5px;font-weight:600;color:var(--text-2);border-radius:var(--r-sm)}
.nav-cta .login:hover{color:var(--ink);background:var(--paper-2)}
.nav-cta .btn{height:38px;padding:0 18px;font-size:14.5px;font-weight:700;line-height:1}
@media(max-width:920px){.nav-links{display:none}}

/* breadcrumbs + hero */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--text-3);margin-bottom:26px}
.crumbs a{color:var(--blue-txt);font-weight:600}
.crumbs a:hover{text-decoration:underline}
.hero-p{position:relative;padding:72px 0 80px;border-bottom:1px solid var(--line-2);overflow:clip;
  background:radial-gradient(820px 420px at 82% -12%,rgba(20,138,255,.09),transparent 62%),linear-gradient(180deg,#FBFDFF,#fff 75%)}
.hero-p::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(20,138,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,138,255,.045) 1px,transparent 1px);
  background-size:52px 52px;mask-image:radial-gradient(680px 420px at 78% 4%,#000 25%,transparent 72%);
  -webkit-mask-image:radial-gradient(680px 420px at 78% 4%,#000 25%,transparent 72%)}
.hero-p .wrap{position:relative}
.role-tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue-txt);background:var(--blue-bg);border:1px solid var(--blue-soft);
  border-radius:26px;padding:6px 14px;margin-bottom:20px}
.hero-p h1{font-size:clamp(2.1rem,3.9vw,3.3rem);letter-spacing:-.03em;max-width:19em;margin-bottom:18px;text-wrap:balance}
.hero-p h1 em{font-style:normal;color:var(--blue-txt)}
.hero-p .lede{font-size:17.5px;line-height:1.6;max-width:37rem;margin-bottom:30px}
.hero-p .lede strong{color:var(--text);font-weight:600}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.hero-chips{display:flex;flex-wrap:wrap;gap:9px}
.hchip{display:inline-flex;align-items:baseline;gap:7px;border:1px solid var(--line);background:#fff;
  border-radius:26px;padding:7px 15px;font-size:12.5px;font-weight:600;color:var(--text-2)}
.hchip b{color:var(--ink);font-weight:800;font-size:14px}

/* generic cards & grids */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px}
@media(max-width:960px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:26px;box-shadow:var(--sh-sm);
  transition:box-shadow .25s,transform .25s,border-color .25s}
.card:hover{box-shadow:var(--sh-md);transform:translateY(-3px);border-color:var(--blue-line)}
.card h3{font-size:17px;margin-bottom:8px;letter-spacing:-.015em}
.card p{font-size:14px;line-height:1.6;color:var(--text-2)}
.card .k{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--blue-txt);margin-bottom:12px}
a.card{display:block}
.card .go{margin-top:14px}

/* module list (what's included) */
.mods{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:42px}
@media(max-width:760px){.mods{grid-template-columns:1fr}}
.mod{display:flex;gap:14px;border:1px solid var(--line-2);border-left:3px solid var(--blue);
  border-radius:var(--r-md);background:#fff;padding:18px 20px}
.mod b{display:block;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:3px;letter-spacing:-.01em}
.mod p{font-size:13.5px;color:var(--text-2);line-height:1.55}

/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
@media(max-width:860px){.stats{grid-template-columns:1fr}}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-sm)}
.stat b{display:block;font-size:clamp(2.2rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1;margin-bottom:8px}
.stat b .unit{font-size:.55em;color:var(--text-3)}
.stat h3{font-size:15.5px;margin-bottom:5px}
.stat p{font-size:13.5px;color:var(--text-3);line-height:1.55}

/* vertical toggle (mgmt/eng) */
.vtog{display:inline-flex;border:1px solid var(--line);border-radius:26px;background:#fff;padding:4px;margin:34px 0 0}
.vtog label{padding:9px 22px;border-radius:22px;font-size:13.5px;font-weight:700;color:var(--text-2);cursor:pointer;transition:all .18s}
#v-m,#v-e{position:absolute;opacity:0;pointer-events:none}
#v-m:checked~.vtog-wrap .vtog label[for=v-m],#v-e:checked~.vtog-wrap .vtog label[for=v-e]{background:var(--blue);color:#fff}
#v-m:checked~.vtog-wrap .v-eng,#v-e:checked~.vtog-wrap .v-mgmt{display:none}

/* FAQ */
.faq{margin-top:44px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.faq details{border-bottom:1px solid var(--line-2)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
  cursor:pointer;padding:22px 26px;font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--text-3);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 26px 24px;font-size:14.5px;line-height:1.65;color:var(--text-2);max-width:60rem}

/* method mini */
.mrail{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:44px}
@media(max-width:960px){.mrail{grid-template-columns:1fr;gap:12px}}
.mstep{border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--paper-2);padding:18px}
.mstep.hot{border-color:var(--blue-txt);background:var(--blue-bg)}
.mstep i{display:block;font-style:normal;font-size:11px;font-weight:800;color:var(--blue-txt);margin-bottom:8px}
.mstep b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:4px}
.mstep p{font-size:12px;color:var(--text-3);line-height:1.5}

/* quote */
.quote{border-top:2px solid var(--ink);padding-top:24px;margin-top:48px;max-width:720px}
.quote .mark{font-size:40px;font-weight:800;line-height:.5;color:var(--blue-txt);display:block;margin-bottom:16px}
.quote blockquote{font-size:18px;line-height:1.55;color:var(--text);font-weight:500;margin-bottom:18px}
.quote figcaption b{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.quote figcaption span{font-size:12.5px;color:var(--text-3)}

/* story */
.story-num{font-size:clamp(3rem,7vw,5rem);font-weight:800;letter-spacing:-.04em;color:var(--blue-txt);line-height:1}
.story-sec{margin-top:52px}
.story-sec h2{font-size:1.5rem;margin-bottom:14px}
.story-sec p,.story-sec li{font-size:15.5px;line-height:1.7;color:var(--text-2);max-width:46rem}
.story-sec ul{padding-left:22px;margin-top:10px}
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 0}
@media(max-width:760px){.results{grid-template-columns:1fr}}
.res{border:1px solid var(--line);border-radius:var(--r-md);padding:18px;background:var(--paper-2)}
.res b{display:block;font-size:1.9rem;font-weight:800;color:var(--blue-txt);letter-spacing:-.02em}
.res span{font-size:12.5px;color:var(--text-3)}

/* related rail */
.rel{background:var(--paper-2);border-top:1px solid var(--line-2)}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
@media(max-width:860px){.rel-grid{grid-template-columns:1fr}}

/* CTA band + footer */
.final{padding:88px 0}
.final-in{position:relative;border-radius:20px;overflow:clip;background:var(--canvas);padding:72px 56px}
@media(max-width:760px){.final-in{padding:52px 28px}}
.final-in::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 380px at 82% 15%,rgba(20,138,255,.22),transparent 65%)}
.final-in::after{content:"";position:absolute;inset:0;opacity:.6;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:52px 52px}
.final h2{position:relative;color:#fff;font-size:clamp(1.8rem,3.4vw,2.7rem);letter-spacing:-.03em;max-width:16em;margin-bottom:14px}
.final p{position:relative;color:rgba(255,255,255,.7);font-size:16px;max-width:36em;margin-bottom:30px}
.final .ctas{position:relative;display:flex;flex-wrap:wrap;gap:12px}
.final .fine{position:relative;margin-top:20px;font-size:12.5px;color:rgba(255,255,255,.5)}
@media(max-width:1020px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* reveals — fail-open (see homepage) */
.rv{transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.rv.off{opacity:0;transform:translateY(20px)}
.rv.in{opacity:1;transform:none}

/* ---- v10 chrome: utility bar + mega menu + wordmark ---- */
.utilbar{background:var(--canvas);color:rgba(255,255,255,.72)}
.utilbar .wrap{display:flex;justify-content:space-between;align-items:center;height:34px;font-size:12px;font-weight:600}
.utilbar a{color:rgba(255,255,255,.72);margin-right:18px;transition:color .2s}
.utilbar a:hover{color:#fff}
.u-tag{letter-spacing:.06em;font-size:11px}
@media(max-width:760px){.u-tag{display:none}}
.logo img{width:76px;height:auto;border-radius:0;display:block}
.wm-inv{filter:brightness(0) invert(1);opacity:.92}
.mi{position:relative}
.mi .car{font-size:10px;opacity:.6}
.mega{position:fixed;top:66px;left:50%;transform:translate(-50%,8px);display:grid;grid-template-columns:.85fr 1.3fr 1fr 1.1fr;gap:8px;
  width:min(1240px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--sh-lg);
  padding:18px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;z-index:200}
.mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.mi:hover .mega,.mi:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mcol a{display:block;padding:7px 10px;font-size:13px;font-weight:600;color:var(--text-2);border-radius:var(--r-sm)}
.mcol a:hover{background:var(--blue-bg);color:var(--blue-txt)}
.mcol a em{display:block;font-style:normal;font-size:10.5px;font-weight:600;color:var(--blue-txt)}
.mfeat{background:var(--canvas);border-radius:var(--r-md);padding:6px}
.mfeat .dd-h{color:rgba(255,255,255,.5)}
.mfeat a{color:rgba(255,255,255,.85)}
.mfeat a:hover{background:rgba(255,255,255,.08);color:#fff}
.mfeat a b{display:block;font-size:12.5px;color:#fff}
.mfeat a span{display:block;font-size:11px;font-weight:500;color:rgba(255,255,255,.6)}
@media(max-width:920px){.mega{display:none}}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;display:flex;flex-direction:column;justify-content:center;gap:4px;width:40px;height:40px;padding:8px;cursor:pointer;border:1px solid var(--line);border-radius:var(--r-sm)}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary span{display:block;height:2px;background:var(--ink);border-radius:2px}
.mnav-panel{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:8px;z-index:300}
.mnav-panel a{display:block;padding:11px 14px;font-size:14px;font-weight:600;color:var(--text);border-radius:var(--r-sm)}
.mnav-panel a:hover{background:var(--blue-bg);color:var(--blue-txt)}
@media(max-width:920px){.mnav{display:block}.nav-cta .login{display:none}}
/* exact-v10 nav */
.dd{min-width:300px}
/* One type scale for every menu item, mega column or simple dropdown. These were
   13px/600 in .mcol and 14px/700 in .dd, so Solutions and Resources looked like
   two different menus. Padding still differs — the dropdowns are roomier. */
.dd a,.mcol a{font-size:13.5px;font-weight:600;color:var(--text-2)}
.dd a{display:block;padding:9px 12px}
.dd a em,.mcol a em{display:block;font-style:normal;font-size:11.5px;font-weight:500;color:var(--text-3);margin-top:1px}
.dd-sub{font-size:12px;color:var(--blue-txt);font-weight:600;padding:0 12px 8px}
/* Mega/dropdown lead-in: the SERVICE NAME is the heading (big, blue) and the
   category label sits under it as a small caps kicker. .dd-h had no rule inside
   .mega, so those labels were rendering at full body size and out-ranking the
   names they were meant to label. */
.dd-lead{display:block;color:var(--blue) !important;font-weight:800 !important;
  font-size:16px !important;line-height:1.22;letter-spacing:-.012em;padding:7px 10px 2px !important;margin:0}
.dd .dd-lead{padding:7px 12px 2px !important}
.mcol .dd-h,.mega .dd-h{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);padding:0 10px 9px;margin:0}
.dd .dd-h{padding:0 12px 9px}
.mcol .dd-sub{font-size:11.5px;color:var(--text-3);font-weight:600;padding:0 10px 9px;margin:0}
.mcol .dd-sep{margin-top:14px;border-top:1px solid var(--line-2);padding-top:13px !important}
.mfeat .dd-h{padding:2px 10px 10px}
.bmark{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-txt);
  border:1px solid var(--blue-line);background:var(--blue-bg);border-radius:26px;padding:2px 9px;margin-left:6px;vertical-align:2px}
.ext{color:var(--blue-txt);font-size:12px}
.mega{grid-template-columns:.85fr 1.35fr 1.05fr 1.15fr;max-height:calc(100vh - 82px);overflow:auto;overscroll-behavior:contain}
.mcol a{padding:8px 10px}
.mfeat{padding:12px}
.mfeat a i{display:block;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-line);margin-bottom:2px}
.mfeat a{border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);margin-bottom:8px;padding:12px}
/* v10 hero look */
.hl{background:linear-gradient(180deg,transparent 62%,var(--blue-bg-2) 62%)}
.hv-badge i{background:var(--canvas-2)}
.pr-card{position:absolute;bottom:8%;left:-4%;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-md);padding:14px 18px;min-width:200px}
.pr-card .pr-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:8px}
.pr-card .pr-top em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.pr-card .pr-top b{font-size:19px;font-weight:800;color:var(--blue-txt)}
.pr-card .pr-bar{height:6px;border-radius:99px;background:var(--line-2);overflow:hidden;margin-bottom:7px}
.pr-card .pr-bar i{display:block;height:100%;width:90%;border-radius:99px;background:var(--blue)}
.pr-card span{font-size:11.5px;font-weight:600;color:var(--text-2)}
.chip-pill{display:inline-flex;align-items:center;gap:6px;background:var(--blue);color:#fff;border-radius:26px;
  padding:7px 15px;font-size:13px;font-weight:700;box-shadow:0 4px 14px rgba(20,138,255,.35)}
/* courses catalog — decluttered */
.crow-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 18px}
.crow-head h2{font-size:1.35rem;letter-spacing:-.02em}
.crow-head .cnt{font-size:12.5px;font-weight:700;color:var(--text-3)}
.course-grid{grid-template-columns:repeat(4,1fr);gap:14px;margin-top:0}
@media(max-width:1020px){.course-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.course-grid{grid-template-columns:1fr}}
a.ccard{padding:16px;gap:7px}
.ccard .ctype{font-size:10px;color:var(--text-3);letter-spacing:.09em}
.ccard .ctype .pillx{background:var(--paper-2);border:1px solid var(--line-2);color:var(--text-3)}
.ccard h3{font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.ccard .cmeta{font-size:11.5px}
.ccard .cmeta .star{color:var(--warning);font-weight:700}
.cmore{margin-top:14px}
.cmore summary{list-style:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid var(--line);
  border-radius:26px;padding:9px 18px;font-size:13px;font-weight:700;color:var(--text-2);background:#fff}
.cmore summary:hover{border-color:var(--blue-txt);color:var(--blue-txt);background:var(--blue-bg)}
.cmore summary::-webkit-details-marker{display:none}
.cmore[open] summary{margin-bottom:14px}
/* course page: preview + coach */
.preview-card{position:relative;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(140deg,var(--canvas),var(--canvas-2));
  min-height:250px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.preview-card .play{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.preview-card:hover .play{transform:scale(1.08);background:var(--blue)}
.preview-card .play::after{content:"";display:block;width:0;height:0;border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.preview-card .pv-cap{position:absolute;left:18px;bottom:14px;color:rgba(255,255,255,.85);font-size:13px;font-weight:600}
.coach-card{display:grid;grid-template-columns:88px 1fr;gap:22px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:#fff;box-shadow:var(--sh-sm);padding:28px;align-items:start}
@media(max-width:640px){.coach-card{grid-template-columns:1fr}}
.coach-card .cavat{width:88px;height:88px;font-size:30px}
.coach-card h3{font-size:18px;margin-bottom:4px}
.coach-card .crole{font-size:12.5px;font-weight:700;color:var(--blue-txt);margin-bottom:10px}
.coach-card ul{list-style:none;display:grid;gap:8px;margin-top:10px}
.coach-card li{display:flex;gap:9px;font-size:13.5px;color:var(--text-2)}
.coach-card li svg{flex:none;margin-top:3px;color:var(--success)}

/* ---- v10 homepage sections ---- */
.hero-v10{position:relative;padding:76px 0 84px;border-bottom:1px solid var(--line-2);overflow:clip;
  background:radial-gradient(820px 420px at 80% -10%,rgba(20,138,255,.10),transparent 62%),linear-gradient(180deg,#FBFDFF,#fff 75%)}
.hero-v10::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(20,138,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,138,255,.045) 1px,transparent 1px);
  background-size:52px 52px;mask-image:radial-gradient(700px 460px at 74% 6%,#000 28%,transparent 74%);
  -webkit-mask-image:radial-gradient(700px 460px at 74% 6%,#000 28%,transparent 74%)}
.hv-grid{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
@media(max-width:1020px){.hv-grid{grid-template-columns:1fr}}
.hv-badge{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;border-radius:26px;
  padding:8px 16px 8px 8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);margin-bottom:26px}
.hv-badge i{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--canvas);color:#fff;font-style:normal;font-size:13px}
.hv-badge em{font-style:normal;color:var(--blue-txt)}
.hero-v10 h1{font-size:clamp(2.4rem,4.4vw,3.75rem);letter-spacing:-.033em;margin-bottom:22px;text-wrap:balance}
.hero-v10 h1 .accent{color:var(--blue-txt)}
.hero-v10 .hv-sub{font-size:18px;line-height:1.6;max-width:33rem;margin-bottom:32px}
.hero-v10 .hv-sub strong{color:var(--text);font-weight:600}
.hv-visual{position:relative}
.hv-visual img{width:100%;height:auto;border-radius:var(--r-lg)}
.hv-chip{position:absolute;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-md);padding:10px 14px}
.hv-chip b{display:block;font-size:15px;font-weight:800;color:var(--ink);line-height:1.1}
.hv-chip em{font-style:normal;font-size:11px;color:var(--text-3)}
.hv-chip.a{top:-16px;right:-8px}
.hv-chip.b{bottom:-16px;left:-8px}
@media(max-width:560px){.hv-chip{display:none}}
.accred-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:0}
@media(max-width:960px){.accred-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.accred-row{grid-template-columns:repeat(2,1fr)}}
.acc-card{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;padding:16px 14px;text-align:center}
.acc-card img{height:26px;width:auto;margin:0 auto 8px}
.acc-card b{display:block;font-size:12.5px;color:var(--ink)}
.acc-card span{font-size:11px;color:var(--text-3);line-height:1.4;display:block}
.eco6{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
@media(max-width:960px){.eco6{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.eco6{grid-template-columns:1fr}}
.svc-depth{margin-top:48px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.svc-depth details{border-bottom:1px solid var(--line-2)}
.svc-depth details:last-child{border-bottom:0}
.svc-depth summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;
  padding:22px 26px;font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.015em}
.svc-depth summary::-webkit-details-marker{display:none}
.svc-depth summary .cnt{font-size:12px;font-weight:700;color:var(--blue-txt);background:var(--blue-bg);border-radius:26px;padding:5px 13px}
.svc-depth .svc-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:0 26px 24px}
@media(max-width:860px){.svc-depth .svc-grid{grid-template-columns:1fr}}
.svc-depth .svc-grid a{display:block;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--paper-2);
  padding:12px 14px;font-size:13.5px;font-weight:600;color:var(--text)}
.svc-depth .svc-grid a:hover{border-color:var(--blue-txt);background:var(--blue-bg);color:var(--blue-txt)}
.svc-depth .svc-grid a em{display:block;font-style:normal;font-size:11.5px;font-weight:500;color:var(--text-3);margin-top:2px}
.lead-panel{display:grid;grid-template-columns:1.1fr .9fr;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--sh-md);margin-top:48px}
@media(max-width:900px){.lead-panel{grid-template-columns:1fr}}

/* ---- courses ---- */
.cat-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.cat-nav a{border:1px solid var(--line);border-radius:26px;padding:8px 16px;font-size:13px;font-weight:700;color:var(--text-2);background:#fff}
.cat-nav a:hover{border-color:var(--blue-txt);color:var(--blue-txt);background:var(--blue-bg)}
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
@media(max-width:960px){.course-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.course-grid{grid-template-columns:1fr}}
a.ccard{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;
  padding:18px;box-shadow:var(--sh-sm);transition:box-shadow .2s,transform .2s,border-color .2s}
a.ccard:hover{box-shadow:var(--sh-md);transform:translateY(-2px);border-color:var(--blue-line)}
.ccard .ctype{display:flex;gap:6px;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-txt)}
.ccard .ctype .pillx{background:var(--blue-bg);border-radius:26px;padding:3px 10px}
.ccard .ctype .pillg{background:var(--success-bg);color:var(--success);border-radius:26px;padding:3px 10px}
.ccard h3{font-size:15px;letter-spacing:-.01em;line-height:1.35}
.ccard .cmeta{margin-top:auto;font-size:12px;color:var(--text-3);display:flex;gap:10px;align-items:center}
.cmodes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
@media(max-width:860px){.cmodes{grid-template-columns:1fr}}
.cmode{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:28px;box-shadow:var(--sh-sm);position:relative}
.cmode.hot{border-color:var(--blue-line);background:linear-gradient(180deg,var(--blue-bg),#fff 60%)}
.cmode .tagm{position:absolute;top:-11px;left:24px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--blue);color:#fff;border-radius:26px;padding:4px 12px}
.cmode h3{font-size:19px;margin-bottom:10px}
.cmode ul{list-style:none;display:grid;gap:9px;margin:14px 0 20px}
.cmode li{display:flex;gap:9px;font-size:13.5px;color:var(--text-2)}
.cmode li svg{flex:none;margin-top:3px;color:var(--success)}
.coach-band{display:grid;grid-template-columns:64px 1fr;gap:18px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--paper-2);padding:22px;margin-top:44px;align-items:center}
.coach-band .cavat{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--canvas));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:22px}

/* ---------- deep course pages: hero grid + sticky enroll card, skills, 1-on-1 band ---------- */
.chero{display:grid;grid-template-columns:1fr 350px;gap:56px;align-items:start}
@media(max-width:960px){.chero{grid-template-columns:1fr}}
.cmeta-row{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;font-size:13.5px;color:var(--text-2)}
.cmeta-row b{color:var(--ink);font-weight:800}
.cmeta-row .star{color:var(--warning)}
.enroll-card{position:sticky;top:90px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  box-shadow:var(--sh-md);padding:26px;display:flex;flex-direction:column;gap:0}
@media(max-width:960px){.enroll-card{position:static}}
.enroll-card .ec-k{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px}
.enroll-card ul{list-style:none;display:grid;gap:10px;margin:2px 0 20px}
.enroll-card li{display:flex;gap:9px;font-size:13.5px;color:var(--text-2)}
.enroll-card li svg{flex:none;margin-top:3px;color:var(--success)}
.enroll-card .btn{width:100%;justify-content:center}
.enroll-card .ec-alt{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--text-3);text-align:center}
.enroll-card .ec-alt a{color:var(--blue-txt);font-weight:700}
.skill-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px}
.skill-tags span{border:1px solid var(--line);background:var(--paper-2);border-radius:26px;padding:7px 15px;
  font-size:13px;font-weight:600;color:var(--text-2)}
.syl{margin-top:44px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.syl details{border-bottom:1px solid var(--line-2)}
.syl details:last-child{border-bottom:0}
.syl summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:22px 26px;font-weight:700;font-size:15.5px}
.syl summary::-webkit-details-marker{display:none}
.syl summary .sno{flex:none;width:34px;height:34px;border-radius:50%;background:var(--blue-bg);border:1px solid var(--blue-line);
  color:var(--blue-txt);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.syl summary .sdur{margin-left:auto;font-size:12px;font-weight:600;color:var(--text-3);white-space:nowrap}
.syl summary::after{content:"+";font-size:20px;font-weight:400;color:var(--text-3);transition:transform .2s}
.syl details[open] summary::after{transform:rotate(45deg)}
.syl .sbody{padding:0 26px 24px 76px;font-size:14px;line-height:1.65;color:var(--text-2)}
.syl .sbody .build{display:block;margin-top:10px;font-size:13.5px;color:var(--ink)}
@media(max-width:640px){.syl .sbody{padding-left:26px}}
.oo-band{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;margin-top:54px;
  border-radius:var(--r-lg);padding:34px 38px;color:#fff;
  background:linear-gradient(120deg,var(--canvas),var(--canvas-2))}
@media(max-width:760px){.oo-band{grid-template-columns:1fr}}
.oo-band h3{font-size:1.35rem;letter-spacing:-.02em;margin-bottom:8px;color:#fff}
.oo-band p{font-size:14px;color:rgba(255,255,255,.78);max-width:56ch}
.oo-band .btn{white-space:nowrap}
.cert-card{display:grid;grid-template-columns:1fr 200px;gap:30px;align-items:center;margin-top:44px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-sm);padding:32px 36px}
@media(max-width:700px){.cert-card{grid-template-columns:1fr}}
.cert-visual{border:1px solid var(--line);border-radius:10px;background:var(--paper-2);padding:18px;text-align:center}
.cert-visual i{font-style:normal;font-size:26px;color:var(--blue-txt)}
.cert-visual b{display:block;font-size:12px;margin-top:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}

/* ---------- program pages: tracks, data tables, illustration bands ---------- */
.trk{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:18px;margin-top:44px}
.trk>div{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:22px;box-shadow:var(--sh-sm);
  transition:box-shadow .25s,border-color .25s}
.trk>div:hover{box-shadow:var(--sh-md);border-color:var(--blue-line)}
.trk h3{font-size:14px;letter-spacing:.02em;padding-bottom:13px;margin-bottom:14px;border-bottom:1px solid var(--line-2)}
.trk h3 i{display:block;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue-txt);margin-bottom:6px}
.trk ul{list-style:none;display:grid;gap:9px}
.trk li{display:flex;gap:9px;font-size:13.5px;line-height:1.5;color:var(--text-2)}
.trk li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--blue-line);margin-top:8px}

.dtab{margin-top:44px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  box-shadow:var(--sh-sm);overflow-x:auto;overscroll-behavior-x:contain}
table.dt{width:100%;min-width:640px;border-collapse:collapse;font-size:13.5px}
table.dt.wide{min-width:900px}
table.dt th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);background:var(--paper-2);padding:14px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
table.dt td{padding:15px 18px;border-bottom:1px solid var(--line-2);color:var(--text-2);line-height:1.55;vertical-align:top}
table.dt tr:last-child td{border-bottom:0}
table.dt tbody tr:hover{background:var(--blue-bg)}
table.dt td b{color:var(--ink);font-weight:700}
table.dt td:first-child{color:var(--text)}
.dnote{font-size:13px;color:var(--text-3);margin-top:16px;max-width:78ch;line-height:1.6}
.dscroll{font-size:11.5px;color:var(--text-3);margin-top:10px;letter-spacing:.04em}
@media(min-width:900px){.dscroll{display:none}}

.ill{margin-top:44px;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 20px;
  background:linear-gradient(180deg,var(--blue-bg),#fff 70%);box-shadow:var(--sh-sm);overflow-x:auto}
.ill .ill-t{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-txt);margin-bottom:18px}
.ill svg{width:100%;height:auto;max-width:100%}
.hero-ill{margin-top:40px}
.ill-lg{display:flex;gap:20px;margin-top:14px;font-size:12px;color:var(--text-2);flex-wrap:wrap}
.ill-lg span{display:inline-flex;align-items:center;gap:7px}
.ill-lg i{width:11px;height:11px;border-radius:3px;display:inline-block}

.flag{display:flex;gap:14px;align-items:flex-start;margin-top:40px;padding:20px 22px;border-radius:var(--r-lg);
  border:1px solid var(--warning);background:var(--warning-bg)}
.flag b{display:block;color:var(--ink);font-size:14px;margin-bottom:5px}
.flag p{font-size:13.5px;color:var(--text-2);line-height:1.6}
.flag .fi{flex:none;width:22px;height:22px;border-radius:50%;background:var(--warning);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}

.stagerail{margin-top:48px;display:grid;gap:18px}
.stg{display:grid;grid-template-columns:210px 1fr;gap:26px;padding:26px 0;border-top:1px solid var(--line-2)}
.stg:first-child{border-top:0;padding-top:0}
.stg .sh i{display:block;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-txt);margin-bottom:7px}
.stg .sh b{display:block;font-size:19px;color:var(--ink);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.stg .sh span{display:block;font-size:12.5px;color:var(--text-3);margin-top:6px}
.stg .sl{display:grid;gap:12px}
.stg .sl a{display:block;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;padding:18px 20px;
  box-shadow:var(--sh-sm);transition:box-shadow .22s,transform .22s,border-color .22s}
.stg .sl a:hover{box-shadow:var(--sh-md);transform:translateY(-2px);border-color:var(--blue-line)}
.stg .sl b{display:block;font-size:15.5px;color:var(--ink);margin-bottom:5px}
.stg .sl p{font-size:13.5px;color:var(--text-2);line-height:1.55}
@media(max-width:800px){.stg{grid-template-columns:1fr;gap:16px;padding:22px 0}}

/* ---------- accent system: each journey stage gets one of the brand ramps.
   Every component below reads var(--ac*), so a single wrapper class re-skins
   a whole page without touching component CSS. All values come from the
   designer's Ant Design brand kit — nothing invented. ---------- */
.ac-blue{--ac:#148AFF;--ac-hov:#3D9EFF;--ac-bg:#F5FAFF;--ac-bg2:#E6F3FF;--ac-line:#99CCFF;--ac-ink:#0073E5}
.ac-green{--ac:#05C170;--ac-hov:#38CD8D;--ac-bg:#F7FDFA;--ac-bg2:#E6F9F1;--ac-line:#8CE2BD;--ac-ink:#05B066}
.ac-amber{--ac:#FCA106;--ac-hov:#FFB92E;--ac-bg:#FFFDF5;--ac-bg2:#FFFAE6;--ac-line:#FFD080;--ac-ink:#D68100}
.ac-coral{--ac:#D13845;--ac-hov:#DE5F66;--ac-bg:#FFF5F5;--ac-bg2:#FFF1F0;--ac-line:#F7BBBA;--ac-ink:#AB2635}
[class*=ac-] .kicker,[class*=ac-] .role-tag,[class*=ac-] .sec-h em,[class*=ac-] .link{color:var(--ac)}
[class*=ac-] .role-tag{background:var(--ac-bg2);border-color:var(--ac-line)}
[class*=ac-] .hero-p{background:radial-gradient(820px 420px at 82% -12%,color-mix(in srgb,var(--ac) 11%,transparent),transparent 62%),linear-gradient(180deg,var(--ac-bg),#fff 75%)}
[class*=ac-] .card:hover,[class*=ac-] .trk>div:hover{border-color:var(--ac-line)}
[class*=ac-] .trk li::before{background:var(--ac-line)}
[class*=ac-] table.dt tbody tr:hover{background:var(--ac-bg)}
[class*=ac-] .hero-p h1 em{color:var(--ac)}

/* ---------- proof-before-pitch logo wall ---------- */
.lwall{margin-top:40px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  padding:26px 30px;box-shadow:var(--sh-sm)}
.lwall .lw-h{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);text-align:center;margin-bottom:20px}
.lwall ul{list-style:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:34px 46px}
.lwall li{display:flex;align-items:center}
.lwall img{height:52px;width:auto;filter:grayscale(1);opacity:.62;transition:filter .3s,opacity .3s}
.lwall li:hover img{filter:none;opacity:1}
.lwall .lw-f{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2);text-align:center;
  font-size:13px;color:var(--text-2)}
.lwall .lw-f b{color:var(--ink)}
@media(max-width:640px){.lwall ul{gap:22px 28px}.lwall img{height:40px}}

/* ---------- annotated product-UI shot: the UI is the evidence ---------- */
.shot{margin-top:44px;display:grid;grid-template-columns:1.45fr 1fr;gap:34px;align-items:start}
@media(max-width:900px){.shot{grid-template-columns:1fr;gap:24px}}
.shot .sfig{position:relative;margin:0;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--paper-2);overflow:hidden;box-shadow:var(--sh-lg)}
.shot .sfig img{width:100%;height:auto;display:block}
.shot .sfig figcaption{font-size:11.5px;color:var(--text-3);padding:10px 14px;border-top:1px solid var(--line-2);
  background:#fff}
.shot .pin{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--ac,#148AFF);color:#fff;
  font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ac,#148AFF) 26%,transparent),0 2px 8px rgba(0,0,0,.28)}
.shot ol{list-style:none;display:grid;gap:16px;counter-reset:pin}
.shot ol li{display:grid;grid-template-columns:26px 1fr;gap:13px;counter-increment:pin}
.shot ol li::before{content:counter(pin);width:26px;height:26px;border-radius:50%;
  background:var(--ac-bg2,#E6F3FF);color:var(--ac-ink,#0073E5);font-size:12.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.shot ol b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:3px}
.shot ol p{font-size:13.5px;color:var(--text-2);line-height:1.55}
.shot .s-lede{font-size:15px;color:var(--text-2);margin-bottom:22px;line-height:1.6}

/* ---------- product tour: cross-fading real UI frames (no filming needed) ---------- */
.tour{margin-top:44px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper-2);box-shadow:var(--sh-lg)}
.tour .tstage{position:relative;height:clamp(300px,40vw,470px);
  background:linear-gradient(180deg,var(--ac-bg,#F5FAFF),#fff)}
.tour figure{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;
  padding:20px 20px 46px;opacity:0}
.tour figure:first-of-type{opacity:1}
.tour figure img{max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:var(--r-sm);box-shadow:0 8px 28px -10px rgba(7,17,31,.3);background:#fff}
.tour figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 18px;background:#fff;
  border-top:1px solid var(--line-2);font-size:13px;color:var(--text-2);text-align:center}
.tour figcaption b{color:var(--ink)}
.tour .tdots{display:flex;gap:7px;justify-content:center;padding:12px;background:#fff;border-top:1px solid var(--line-2)}
.tour .tdots i{width:22px;height:3px;border-radius:2px;background:var(--line);display:block}
@media (prefers-reduced-motion:no-preference){
  .tour[data-frames="3"] figure{animation:tfade 18s infinite}
  .tour[data-frames="3"] figure:nth-of-type(2){animation-delay:6s}
  .tour[data-frames="3"] figure:nth-of-type(3){animation-delay:12s}
  .tour[data-frames="3"] .tdots i{animation:tdot 18s infinite}
  .tour[data-frames="3"] .tdots i:nth-child(2){animation-delay:6s}
  .tour[data-frames="3"] .tdots i:nth-child(3){animation-delay:12s}
  @keyframes tfade{0%{opacity:0}2%{opacity:1}31%{opacity:1}34%{opacity:0}100%{opacity:0}}
  @keyframes tdot{0%{background:var(--line)}2%{background:var(--ac,#148AFF)}31%{background:var(--ac,#148AFF)}34%{background:var(--line)}100%{background:var(--line)}}
}

/* ---------- horizontal scroll rails ---------- */
.railwrap{margin-top:44px;position:relative}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(272px,272px);gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  padding:4px 4px 18px;scrollbar-width:thin}
.rail>*{scroll-snap-align:start}
.rcard{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:20px;
  box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:9px;
  transition:box-shadow .25s,transform .25s,border-color .25s}
.rcard:hover{box-shadow:var(--sh-md);transform:translateY(-3px);border-color:var(--ac-line,#99CCFF)}
.rcard .rk{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ac-ink,#0073E5);
  background:var(--ac-bg2,#E6F3FF);border-radius:26px;padding:4px 11px;align-self:flex-start}
.rcard h3{font-size:15.5px;line-height:1.3}
.rcard .rrole{font-size:13px;color:var(--text-2);line-height:1.5}
.rcard .rrec{margin-top:auto;padding-top:11px;border-top:1px solid var(--line-2);font-size:12px;color:var(--text-3)}
.rcard .rrec b{color:var(--text-2);font-weight:600}
.railhint{font-size:11.5px;color:var(--text-3);letter-spacing:.04em;margin-top:2px}

/* ---------- at-a-glance summary: understand the page in five seconds ---------- */
.glance{margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden;box-shadow:var(--sh-sm)}
.glance>div{padding:20px 22px;border-left:1px solid var(--line-2)}
.glance>div:first-child{border-left:0}
.glance .gi{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:9px}
.glance .gi svg{color:var(--ac,#148AFF);flex:none}
.glance b{display:block;font-size:19px;color:var(--ink);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.glance span{display:block;font-size:12.5px;color:var(--text-2);margin-top:4px}
@media(max-width:860px){.glance{grid-template-columns:1fr 1fr}.glance>div:nth-child(3){border-left:0}
  .glance>div:nth-child(n+3){border-top:1px solid var(--line-2)}}
@media(max-width:480px){.glance{grid-template-columns:1fr}.glance>div{border-left:0;border-top:1px solid var(--line-2)}
  .glance>div:first-child{border-top:0}}

/* ---------- sticky in-page nav for long pages ---------- */
.jump{position:sticky;top:66px;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-2)}
.jump nav{max-width:var(--max);margin:0 auto;padding:0 28px;display:flex;gap:4px;overflow-x:auto;
  scrollbar-width:none}
.jump nav::-webkit-scrollbar{display:none}
.jump a{flex:none;font-size:13px;font-weight:600;color:var(--text-2);padding:14px 13px;white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.jump a:hover{color:var(--ac,#148AFF);border-bottom-color:var(--ac-line,#99CCFF)}
.sec{scroll-margin-top:120px}

/* ---------- icon chips: colour + shape, so a grid isn't a wall of text ---------- */
.ico{width:38px;height:38px;border-radius:11px;background:var(--ac-bg2,#E6F3FF);color:var(--ac-ink,#0073E5);
  display:flex;align-items:center;justify-content:center;flex:none;margin-bottom:14px}
.ico svg{width:20px;height:20px}
.trk h3 .ico{width:30px;height:30px;border-radius:9px;margin:0 0 10px}
.trk h3 .ico svg{width:16px;height:16px}

/* ---------- footer (Sample A, approved 10 Aug 2026) ---------- */
footer{background:var(--canvas);color:#A8BEDC;font-size:14px;position:relative}
footer a{color:inherit}
footer a:hover{color:#fff}
.f-in{max-width:var(--max);margin:0 auto;padding:0 28px}
.f-grid-bg{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:78px 78px}
.f-cta{position:relative;padding:52px 0 46px;border-bottom:1px solid rgba(255,255,255,.1)}
.f-cta .f-in{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.f-chip{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:#05C170;border:1px solid rgba(5,193,112,.4);background:rgba(5,193,112,.1);
  border-radius:999px;padding:6px 14px;margin-bottom:16px}
.f-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:#05C170}
.f-cta h2{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.028em;line-height:1.14;
  color:#fff;margin:0}
.f-cta h2 em{font-style:normal;background:linear-gradient(92deg,var(--blue),#05C170);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.f-btn{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--canvas);font-weight:800;
  font-size:14.5px;border-radius:11px;padding:13px 22px;white-space:nowrap;
  transition:transform .16s,box-shadow .16s}
.f-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(0,0,0,.5);color:var(--canvas)}
.f-btn svg{width:18px;height:18px;flex:none}
.f-main{position:relative;display:grid;grid-template-columns:1.3fr 3fr;gap:52px;padding:52px 0 42px}
.f-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:30px 26px}
.f-brand{display:flex;flex-direction:column;gap:18px}
/* The wordmark asset is black type with a blue infinity mark. On navy that
   reads as "only the blue bit is visible", so it is inverted to solid white
   here rather than via the .wm-inv class - the verbatim pages get this
   stylesheet but not the main one, and were rendering the raw logo. */
.f-brand img{height:44px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.95}
.f-tag{color:#8FA9C9;font-size:14px;max-width:330px;margin:0;line-height:1.6}
.f-row{display:flex;gap:11px;align-items:flex-start;color:#A8BEDC;font-size:13.5px;line-height:1.55}
.f-row svg{flex:none;width:16px;height:16px;margin-top:3px;color:#C2E0FF}
.f-soc{display:flex;gap:9px}
.f-soc a{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#C3D9F0;
  transition:background .16s,border-color .16s,color .16s,transform .16s}
.f-soc a:hover{background:var(--blue);border-color:var(--blue-txt);color:#fff;transform:translateY(-2px)}
.f-soc svg{width:16px;height:16px}
footer h3{font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#8FA9C9;margin:0 0 15px}
.f-col{display:grid;gap:5px;align-content:start}   /* was 11: the link padding above now carries the rhythm */
.f-col a{color:#C3D9F0;font-size:14px;width:fit-content;transition:color .15s;
  padding:3px 0}   /* 22px -> 28px: SC 2.5.8 needs 24 */
.f-base{border-top:1px solid rgba(255,255,255,.11);display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;align-items:center;padding:20px 0;font-size:13px;color:#7E93B2}
.f-legal{display:flex;gap:22px;flex-wrap:wrap}
.f-legal a,.f-row a{padding:3px 0;display:inline-block}   /* 21px -> 27px, SC 2.5.8 */
@media(max-width:1000px){.f-main{grid-template-columns:1fr;gap:34px}.f-cols{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.f-in{padding:0 22px}.f-cols{grid-template-columns:1fr 1fr}}