/* ==========================================================================
   Digital Course Production (eLearning Development) - page components only.
   Colour, type, buttons, nav shell, footer, oband, accreditation band, cards,
   checks, faq, forms, tables and section rhythm all come from bi-theme.css.
   No hex literal in this file may fall outside the theme tokens (#fff aside).
   ========================================================================== */

/* ---- announce ---- */
.announce{background:var(--canvas);color:var(--on-canvas);font-size:13.5px;text-align:center;padding:10px 24px}
.announce b{color:#fff}
.announce a{color:var(--on-navy-a);font-weight:700;white-space:nowrap}

/* ---- service dropdown in nav ---- */
.drop{position:relative}
.drop__btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  color:var(--text);font-weight:600;font-size:14.5px;padding:0;white-space:nowrap}
.drop__btn:hover{color:var(--blue-txt)}
.drop__btn svg{transition:transform .18s}
.drop.open .drop__btn svg{transform:rotate(180deg)}
.drop__menu{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);
  min-width:360px;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:8px;display:none;z-index:210}
.drop.open .drop__menu{display:block}
.drop__menu a{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:10px;
  color:var(--navy);font-weight:600;font-size:14.5px;text-decoration:none}
.drop__menu a:hover{background:var(--brand-0);color:var(--blue-txt)}
.drop__menu a.on{background:var(--brand-0);color:var(--blue-txt)}
.drop__menu small{display:block;font-weight:500;color:var(--text-2);font-size:12.5px;margin-top:1px}
.drop__menu .dm{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  color:#fff;flex:none;margin-top:1px}

/* ---- sub-nav ---- */
.subnav{position:sticky;top:76px;z-index:190;background:#fff;border-bottom:1px solid var(--line-2)}
.subnav__in{display:flex;align-items:center;gap:6px;max-width:var(--max);margin:0 auto;
  padding:0 var(--pad);height:58px;overflow-x:auto;scrollbar-width:none}
.subnav__in::-webkit-scrollbar{display:none}
.subnav a{font-size:14px;font-weight:600;color:var(--text-2);padding:8px 14px;
  border-radius:var(--r-pill);white-space:nowrap;text-decoration:none;transition:.15s}
.subnav a:hover{background:var(--paper-2);color:var(--navy)}
.subnav a.on{background:var(--brand-0);color:var(--blue-txt)}
.subnav__cta{margin-left:auto;flex:none;position:sticky;right:0;
  box-shadow:-14px 0 14px 6px #fff}
/* `.subnav a` (0,1,1) outranks `.btn-p` (0,1,0), which would leave a grey label on the
   blue fill. Restore white explicitly. */
.subnav a.btn,.subnav a.btn:hover{color:#fff;background:var(--blue-txt)}
.subnav a.btn:hover{background:var(--blue)}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;padding:44px 0 84px;
  background:radial-gradient(1100px 520px at 8% -12%,var(--brand-1) 0%,transparent 58%),
             radial-gradient(820px 430px at 100% 4%,var(--a2-1) 0%,transparent 60%),var(--surface)}
.hx{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.crumbs{font-size:13px;color:var(--text-2);margin-bottom:22px}
.crumbs a{color:var(--text-2)}
.crumbs a:hover{color:var(--blue-txt)}
.crumbs i{font-style:normal;color:var(--line);margin:0 8px}
.hero .sub{margin:22px 0 22px;max-width:560px}
.hctas{display:flex;gap:14px;flex-wrap:wrap}
.aud{font-size:14px;font-weight:700;color:var(--text-2);margin:0 0 28px}
.aud i{font-style:normal;color:var(--brand-3);margin:0 4px}
.mock-note{font-size:11.5px;color:var(--text-2);margin:14px 0 0;text-align:center}
.mock-note--on{color:var(--on-navy-2);margin-top:22px}
.hv-pills{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.hv-pill{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-md);
  box-shadow:var(--sh-sm);padding:16px 18px;display:flex;flex-direction:column;gap:5px}
.hv-pill b{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--blue-txt);line-height:1.05}
.hv-pill span{font-size:12.5px;color:var(--text-2);line-height:1.4}

/* ---- hero: studio recording frame (drawn, not a photo) ---- */
.stu{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:14px;position:relative}
.stu__top{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:0 4px}
.rec{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:900;
  letter-spacing:.14em;color:var(--error-6);background:var(--error-1);
  border-radius:var(--r-pill);padding:5px 11px}
.rec i{width:8px;height:8px;border-radius:50%;background:var(--error-6);flex:none;
  animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.stu__t{font-size:12px;font-weight:700;color:var(--text-2)}
.stu__tc{margin-left:auto;font-size:12px;font-weight:800;color:var(--navy)}
.stu__stage{display:grid;grid-template-columns:1fr 1.15fr;gap:12px;border-radius:var(--r-md);
  overflow:hidden}
.stu__cam{position:relative;border-radius:var(--r-md);overflow:hidden;min-height:200px;
  background:radial-gradient(120% 90% at 22% 8%,var(--brand-8) 0%,var(--navy) 62%,#001029 100%)}
.stu__cam::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 46% at 74% 4%,rgba(138,196,255,.42) 0%,transparent 70%)}
.stu__fig{position:absolute;inset:0}
.stu__fig .hd{position:absolute;left:50%;bottom:36%;transform:translateX(-50%);
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(150deg,var(--brand-3),var(--brand-5) 70%,var(--brand-8))}
.stu__fig .sh{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:132px;height:36%;border-radius:66px 66px 0 0;
  background:linear-gradient(180deg,var(--brand-5),var(--brand-8) 80%)}
.stu__fig--sm .hd{width:40px;height:40px;bottom:38%}
.stu__fig--sm .sh{width:100px}
.stu__lbl{position:absolute;left:10px;bottom:10px;z-index:2;font-size:10.5px;font-weight:800;
  color:#fff;background:rgba(0,23,61,.62);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-pill);padding:4px 10px;backdrop-filter:blur(4px)}
.stu__slide{border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--brand-0);
  padding:16px;display:flex;flex-direction:column;gap:8px}
.stu__sl{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-txt)}
.stu__slide b{font-size:16px;font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.25}
.stu__eq{font-size:12.5px;font-weight:700;color:var(--text-2);background:#fff;
  border:1px solid var(--brand-2);border-radius:8px;padding:8px 10px}
.stu__bars{display:flex;align-items:flex-end;gap:7px;height:44px;margin-top:auto}
.stu__bars i{flex:1;max-width:26px;display:block;height:var(--w);border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,var(--brand-4),var(--brand-1))}
.stu__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;padding:0 2px}
.stu__chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  color:var(--text-2);background:var(--paper-2);border:1px solid var(--line-2);
  border-radius:var(--r-pill);padding:5px 10px}
.stu__chip svg{color:var(--blue-txt);flex:none}

/* ---- trusted-by marquee (fixed per the global spec) ---- */
.mq-sec{padding:34px 0 30px;background:#fff;border-bottom:1px solid var(--line-2)}
.mq-cap{text-align:center;font-size:13px;font-weight:700;color:var(--text-2);margin:0 0 22px}
.mq{overflow:hidden;position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq__t{display:flex;align-items:center;width:max-content;animation:mq 38s linear infinite}
.mq:hover .mq__t,.mq:focus-within .mq__t{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq__i{flex:none;height:56px;display:grid;place-items:center;margin:0 40px;
  filter:grayscale(1);opacity:.66;transition:filter .2s,opacity .2s}
.mq__i:hover{filter:none;opacity:1}
.mq__i img{max-height:52px;max-width:150px;width:auto;height:auto;object-fit:contain}
/* a text mark has nothing to desaturate - don't dim it into illegibility */
.mq__i--t{filter:none;opacity:.8}
.mq__i--t span{font-size:17px;font-weight:900;letter-spacing:-.03em;color:var(--navy);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .mq{mask-image:none;-webkit-mask-image:none;overflow:visible}
  .mq__t{animation:none;width:100%;flex-wrap:wrap;justify-content:center;gap:8px 0}
  .mq__t .mq__i:nth-child(n+7){display:none}
  .mq__i{margin:0 26px;filter:none;opacity:1}
}

/* ---- figures band variants ---- */
.ob-note{font-size:11.5px;color:var(--on-navy-2);margin:22px 0 0;text-align:center;position:relative}
.ob--plain{margin-bottom:8px}
.ob--plain>div{border-left:2px solid rgba(255,255,255,.16)}
.ob--plain>div:first-child{border-left:0}
.ob--plain b{display:block;font-size:clamp(28px,3.2vw,40px);font-weight:800;
  letter-spacing:-.03em;color:#fff;line-height:1}
.ob--plain span{display:block;font-size:13px;color:var(--on-navy);margin-top:8px;line-height:1.45}
.ob--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ob--light>div{border-left:2px solid var(--brand-2)}
.ob--light>div:first-child{border-left:0}
.ob--light b{color:var(--blue-txt)}
.ob--light span{color:var(--text-2)}
.ob--light{gap:22px;margin-top:8px}

/* ---- audience router / cross-sell cards ---- */
.xs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.xs a{display:flex;flex-direction:column;gap:11px;text-decoration:none}
.xs .ico{margin-bottom:4px}
.xs h3{font-size:17px;margin:0}
.xs p{flex:1}
.xs .go{font-size:13px;font-weight:700;color:var(--blue-txt);display:flex;align-items:center;gap:6px}
.xs a:hover .go svg{transform:translateX(4px)}
.xs .go svg{transition:transform .18s}

/* ---- 3-up problem cards ---- */
.gap3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.gap3 .card{position:relative;overflow:hidden;padding-top:30px}
.gap3 .card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.gap3 .card:nth-child(1)::before{background:var(--blue-txt)}
.gap3 .card:nth-child(2)::before{background:var(--a2-6)}
.gap3 .card:nth-child(3)::before{background:var(--a1-6)}
.gap3 .ico{margin-bottom:18px}
.gap3 h3{font-size:19px}

/* ---- outcomes: retention panel on navy ---- */
.oret{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center;margin-top:44px}
.oret__c{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-xl);padding:24px 26px}
.d-clab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.d-lab{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-navy-2);margin:0}
.d-delta{font-size:11.5px;font-weight:800;color:var(--on-navy-a)}
.d-bars{display:flex;align-items:flex-end;gap:12px;height:170px}
.d-bar{flex:1;display:grid;grid-template-rows:16px 1fr 14px;gap:7px;height:100%;
  justify-items:center;align-items:end}
.d-bar i{display:block;width:100%;height:var(--h);align-self:end;border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,rgba(138,196,255,.5),rgba(138,196,255,.12))}
.d-bar.on i{background:linear-gradient(180deg,var(--blue),var(--brand-4))}
.d-bar em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--on-navy-2)}
.d-bar b{font-size:12px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.d-bar.on b{color:var(--on-navy-a)}
.oret__b h3{font-size:23px;line-height:1.25;margin:0 0 12px}
.oret__b>p{color:var(--on-navy);font-size:15px;margin:0 0 22px}

/* ---- process ---- */
.procs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.proc{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px 24px;
  box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s,border-color .18s;
  display:flex;flex-direction:column}
.proc:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--brand-2)}
.proc__h{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.proc__n{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none}
.proc__h b{display:block;font-size:16.5px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.proc__h span{display:block;font-size:11.5px;font-weight:800;color:var(--blue-txt);
  letter-spacing:.04em;text-transform:uppercase;margin-top:2px}
.proc>p{font-size:14px;color:var(--text-2);margin:0 0 16px}
.proc__l{list-style:none;display:grid;gap:8px;margin-top:auto;padding-top:14px;
  border-top:1px solid var(--line-2)}
.proc__l li{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--text)}
.proc__l svg{flex:none;color:var(--blue-txt);margin-top:3px}
.procs__t{display:flex;align-items:center;justify-content:center;gap:8px;margin:32px 0 0;
  font-size:15px;color:var(--text-2);flex-wrap:wrap;text-align:center}
.procs__t b{color:var(--navy);font-weight:800}
.procs__t i{font-style:normal;color:var(--line)}

/* ---- course template showcase (tabs) ---- */
.tmp{display:grid;grid-template-columns:320px 1fr;border:1px solid var(--line-2);
  border-radius:var(--r-xl);background:#fff;box-shadow:var(--sh-md);overflow:hidden}
.tmp__rail{background:var(--brand-0);border-right:1px solid var(--line-2);padding:14px}
.tmp__tab{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;background:none;
  border:1px solid transparent;border-radius:var(--r-md);padding:13px 14px;color:var(--text);
  transition:.15s;margin-bottom:4px}
.tmp__tab:hover{background:#fff}
.tmp__tab[aria-selected="true"]{background:#fff;border-color:var(--brand-2);box-shadow:var(--sh-sm)}
.tmp__tab b{display:block;font-size:14.5px;font-weight:700;color:var(--navy)}
.tmp__tab[aria-selected="true"] b{color:var(--blue-txt)}
.tmp__tab small{display:block;font-size:12px;color:var(--text-2);margin-top:2px;line-height:1.4}
.tmp__tab .ti{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  flex:none;margin-top:1px}
.tmp__body{padding:32px 34px}
.tmp__p{display:none}
.tmp__p.on{display:block;animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tmp__p h3{font-size:22px;margin:0 0 6px}
.tmp__s{font-size:14.5px;color:var(--text-2);margin:0 0 24px}
.tmpl{display:grid;grid-template-columns:1.25fr .75fr;gap:26px;align-items:center}
.tmpl__side .tmpl__pill{display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:.11em;
  text-transform:uppercase;color:var(--a2-8);background:var(--a2-1);border:1px solid var(--a2-3);
  border-radius:6px;padding:4px 9px;margin-bottom:12px}
.tmpl__side p{font-size:14px;color:var(--text-2);margin:0}
.tmpl__lab{display:block;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue-txt);margin-bottom:10px}
/* formula spotlight */
.tmpl__eq{background:var(--navy);border-radius:var(--r-lg);padding:26px}
.tmpl__eq .tmpl__lab{color:var(--on-navy-a)}
.tmpl__eq>b{display:block;font-size:19px;font-weight:800;color:#fff;letter-spacing:-.02em;
  line-height:1.5;margin-bottom:18px}
.tmpl__eq em{font-style:normal;color:var(--brand-3);border-bottom:2px solid var(--brand-5);padding-bottom:1px}
.tmpl__ann{display:flex;align-items:center;gap:11px;font-size:13px;color:var(--on-navy);
  padding:7px 0}
.tmpl__ann i{font-style:normal;width:22px;height:22px;border-radius:50%;flex:none;
  background:rgba(0,117,235,.28);border:1px solid var(--brand-5);color:#fff;
  font-size:11px;font-weight:800;display:grid;place-items:center}
/* faculty frame */
.tmpl__cam{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:230px;
  background:radial-gradient(120% 90% at 24% 6%,var(--brand-8) 0%,var(--navy) 60%,#001029 100%)}
.tmpl__lower{position:absolute;left:16px;bottom:16px;z-index:2;background:rgba(0,23,61,.72);
  border-left:3px solid var(--blue);border-radius:0 8px 8px 0;padding:9px 14px;backdrop-filter:blur(4px)}
.tmpl__lower b{display:block;font-size:13px;font-weight:800;color:#fff}
.tmpl__lower span{display:block;font-size:11px;color:var(--on-navy);margin-top:1px}
.tmpl__badge{position:absolute;right:14px;top:14px;z-index:2;font-size:10px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--on-navy-a);
  background:rgba(0,117,235,.18);border:1px solid rgba(0,117,235,.45);
  border-radius:var(--r-pill);padding:5px 11px}
/* interactive tabs mock */
.tmpl__tabs{border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:#fff;
  box-shadow:var(--sh-sm)}
.tmpl__tr{display:flex;background:var(--paper-2);border-bottom:1px solid var(--line-2)}
.tmpl__tr span{flex:1;text-align:center;font-size:12.5px;font-weight:700;color:var(--text-2);
  padding:13px 8px}
.tmpl__tr span.on{background:#fff;color:var(--blue-txt);box-shadow:inset 0 -2px 0 var(--blue-txt)}
.tmpl__tb{padding:20px 22px}
.tmpl__tb p{margin:0 0 10px;font-size:14px;color:var(--navy)}
.tmpl__tb ul{list-style:none;display:grid;gap:8px}
.tmpl__tb li{font-size:13.5px;color:var(--text-2);padding-left:16px;position:relative}
.tmpl__tb li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--brand-3)}
.tmpl__hint{display:block;font-size:11.5px;color:var(--text-2);margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line-2)}
/* checkpoint mock */
.tmpl__q{border:1px solid var(--line-2);border-radius:var(--r-lg);background:#fff;padding:22px;
  box-shadow:var(--sh-sm)}
.tmpl__q>b{display:block;font-size:15.5px;font-weight:700;color:var(--navy);line-height:1.45;
  margin-bottom:14px}
.tmpl__opt{display:flex;align-items:center;gap:11px;border:1.5px solid var(--line-2);
  border-radius:10px;padding:11px 14px;font-size:13.5px;color:var(--text);margin-bottom:8px}
.tmpl__opt i{font-style:normal;width:18px;height:18px;border-radius:50%;flex:none;
  border:2px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:900}
.tmpl__opt--ok{border-color:var(--ok-2);background:var(--ok-1)}
.tmpl__opt--ok i{border-color:var(--ok-9);background:var(--ok-9);color:#fff}
.tmpl__fb{font-size:12.5px;color:var(--text-2);margin:12px 0 0;padding-top:12px;
  border-top:1px solid var(--line-2)}
.tmpl__fb b{color:var(--ok-9)}

/* ---- comparison tables ---- */
table.tbl td.tv{font-weight:700;color:var(--navy)}
.tbl-ba table.tbl th:first-child{color:var(--text-2)}
.tbl-ba table.tbl th:last-child{color:var(--blue-txt);background:var(--brand-0)}
.tbl-ba table.tbl th .x{font-weight:900;margin-right:6px;color:var(--error-6)}
.tbl-ba table.tbl th .v{font-weight:900;margin-right:6px;color:var(--ok-9)}
.tbl-ba table.tbl td:first-child{font-weight:400;color:var(--text-2)}
.tbl-ba table.tbl td:last-child{background:var(--brand-0)}
.tnote{font-size:12.5px;color:var(--text-2);margin:16px 0 0;max-width:840px}

/* ---- video gallery ---- */
.vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.vids .vid{cursor:pointer;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s,border-color .18s}
.vid:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--brand-2)}
.vid__f{position:relative;aspect-ratio:16/9;display:grid;place-items:center;
  background:radial-gradient(110% 100% at 26% 8%,var(--brand-8) 0%,var(--navy) 62%,#001029 100%)}
.vid__f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid__f iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2}
.vid.played .vid__f img{display:none}
.vid__f::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,23,61,.06) 0%,rgba(0,23,61,.26) 100%)}
.vid.played .vid__f::after{display:none}
.vid__play{width:58px;height:58px;border-radius:50%;background:#fff;color:var(--blue-txt);
  display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(0,0,0,.5);z-index:1;
  transition:transform .18s}
.vid:hover .vid__play{transform:scale(1.08)}
.vid.played .vid__play{display:none}
.vid__m{padding:16px 18px;display:flex;flex-direction:column;gap:7px}
.vid__tag{font-size:10px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;
  color:var(--a2-8);background:var(--a2-1);border-radius:5px;padding:3px 8px;width:fit-content}
.vid__m b{font-size:15px;font-weight:700;color:var(--navy);line-height:1.35}

/* ---- pain point cards ---- */
.pains{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pain{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px 24px;
  box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s,border-color .18s}
.pain:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--brand-2)}
.pain .ico{margin-bottom:16px}
.pain__k{display:block;font-size:10.5px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-2);margin-bottom:7px}
.pain h3{font-size:17px;line-height:1.32;margin:0 0 9px}
.pain p{font-size:14px;color:var(--text-2);margin:0}

/* ---- UGC quadrants + regulatory ---- */
.quads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.quad{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);padding:24px 22px;transition:.2s}
.quad:hover{background:rgba(255,255,255,.1);border-color:rgba(0,117,235,.5);transform:translateY(-4px)}
.quad__n{display:block;font-size:10.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-navy-a);margin-bottom:10px}
.quad b{display:block;font-size:17px;font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:8px}
.quad p{font-size:13.5px;color:var(--on-navy);margin:0}
.reg{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.reg__i{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-xl);padding:28px}
.reg__i h3{font-size:19px;margin:0 0 8px}
.reg__i p{color:var(--on-navy);font-size:14.5px;margin:0}
.disc{display:flex;gap:14px;align-items:flex-start;margin:26px 0 0;padding:20px 22px;
  border-radius:var(--r-lg);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13);font-size:14px;color:var(--on-navy)}
.disc svg{flex:none;color:var(--on-navy-a);margin-top:2px}
.disc b{color:#fff}
.disc--light{background:var(--brand-0);border-color:var(--brand-2);color:var(--text-2)}
.disc--light svg{color:var(--blue-txt)}
.disc--light b{color:var(--navy)}

/* ---- production strip ---- */
.stps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.stp{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:24px 20px;
  box-shadow:var(--sh-sm);position:relative;transition:transform .18s,box-shadow .18s}
.stp:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.stp__n{position:absolute;right:18px;top:16px;font-size:24px;font-weight:800;color:var(--brand-2);
  letter-spacing:-.04em;line-height:1}
.stp .ico{margin-bottom:16px}
.stp b{display:block;font-size:15.5px;font-weight:800;color:var(--navy);margin-bottom:7px;
  letter-spacing:-.02em}
.stp p{font-size:13.5px;color:var(--text-2);margin:0}
.callout{display:flex;align-items:flex-start;gap:13px;margin:26px auto 0;padding:18px 22px;
  max-width:900px;border-radius:var(--r-lg);background:var(--brand-0);border:1px solid var(--brand-2);
  font-size:14.5px;color:var(--text-2)}
.callout svg{flex:none;color:var(--blue-txt);margin-top:2px}
.callout b{color:var(--navy)}

/* ---- expert network panel ---- */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.exp{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-xl);
  box-shadow:var(--sh-md);padding:26px 28px}
.exp__h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--line-2)}
.exp__h b{font-size:14.5px;font-weight:800;color:var(--navy)}
.exp__h span{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2)}
.exp__r{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.exp__r:last-child{border-bottom:0;padding-bottom:0}
.exp__a{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;margin-top:1px}
.exp__r b{display:block;font-size:14.5px;font-weight:800;color:var(--navy)}
.exp__r i{display:block;font-style:normal;font-size:13px;color:var(--text-2);margin-top:2px;line-height:1.45}

/* ---- EdTech capacity panel ---- */
.cap{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:24px 26px}
.cap__h{display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:6px;
  border-bottom:1px solid var(--line-2)}
.cap__h b{font-size:14.5px;font-weight:800;color:var(--navy)}
.d-chip{margin-left:auto;font-size:10.5px;font-weight:800;color:var(--text-2);background:var(--paper-2);
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:4px 10px;white-space:nowrap}
.d-dot{width:9px;height:9px;border-radius:50%;background:var(--ok-6);flex:none;
  box-shadow:0 0 0 4px rgba(6,193,112,.22)}
.cap__r{display:grid;grid-template-columns:1fr 96px 46px;gap:14px;align-items:center;padding:13px 0}
.cap__l{font-size:13.5px;color:var(--text-2)}
.cap__b{height:10px;border-radius:99px;background:var(--paper-2);border:1px solid var(--line-2);
  overflow:hidden;display:block}
.cap__f{display:block;height:100%;width:var(--w);background:var(--brand-2)}
.cap__f--low{background:var(--a1-4)}
.cap__f--full{background:linear-gradient(90deg,var(--blue-txt),var(--brand-4))}
.cap__r b{font-size:19px;font-weight:800;color:var(--navy);text-align:right;letter-spacing:-.03em}
.cap__r--sum{border-top:1px solid var(--line-2);margin-top:4px;padding-top:16px}
.cap__r--sum .cap__l{color:var(--navy);font-weight:700}
.cap__r--sum b{color:var(--blue-txt);font-size:15px}
.cap__n{font-size:12.5px;color:var(--text-2);margin:14px 0 0;padding-top:14px;
  border-top:1px solid var(--line-2)}

/* ---- 4-up advantage cards ---- */
.advs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.advs--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.advs .card{display:flex;flex-direction:column}
.advs .ico{margin-bottom:16px}
.advs h3{font-size:17px;margin:0 0 8px}
.advs p{flex:1}
.adv__a{display:block;font-size:12.5px;color:var(--text-2);margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line-2)}
.adv__a b{color:var(--blue-txt);font-weight:800}

/* ---- what you get, on the dark band ---- */
.incl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.incl--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.incl .i{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-lg);padding:26px 24px;transition:.2s}
.incl .i:hover{background:rgba(255,255,255,.1);border-color:rgba(0,117,235,.5);transform:translateY(-4px)}
.incl .i .ico{width:44px;height:44px;border-radius:12px;margin-bottom:16px}
.incl .i h3{font-size:16.5px;margin:0 0 7px}
.incl .i p{color:var(--on-navy);font-size:14px;margin:0}

/* ---- numbered step loop ---- */
.loop{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-xl);
  box-shadow:var(--sh-md);padding:30px}
.loop__s{display:flex;gap:16px;align-items:flex-start;padding:16px 0;position:relative}
.loop__s:not(:last-child)::after{content:"";position:absolute;left:21px;top:56px;bottom:-4px;
  width:2px;background:linear-gradient(var(--brand-2),var(--brand-0))}
.loop__n{flex:none;width:44px;height:44px;border-radius:13px;background:var(--brand-0);
  border:1px solid var(--brand-2);color:var(--blue-txt);display:grid;place-items:center;z-index:1;
  font-weight:800;font-size:14px}
.loop__s h4{margin:0 0 4px}
.loop__s p{font-size:14px;color:var(--text-2);margin:0}

/* ---- corporate: files to module ---- */
.conv{display:grid;grid-template-columns:1fr 32px 1.25fr;gap:14px;align-items:start;
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:24px 22px}
.conv__lab{display:block;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-2);margin-bottom:12px}
.conv__lab--on{color:var(--blue-txt)}
.conv__f{display:flex;align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:10px;
  padding:10px 12px;margin-bottom:8px;font-size:12.5px;color:var(--text-2);background:var(--paper-2)}
.conv__x{font-size:9px;font-weight:900;letter-spacing:.04em;color:#fff;border-radius:4px;
  padding:3px 5px;flex:none}
.conv__x.pdf{background:var(--n-8)}
.conv__x.ppt{background:var(--n-8)}
.conv__x.mp4{background:var(--n-8)}
.conv__ar{color:var(--brand-3);display:grid;place-items:center;align-self:center}
.conv__mod{border:1px solid var(--brand-2);border-radius:var(--r-md);background:var(--brand-0);padding:16px}
.conv__mh{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.conv__mh b{font-size:14px;font-weight:800;color:var(--navy)}
.conv__tag{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--blue-txt);
  background:#fff;border:1px solid var(--brand-2);border-radius:var(--r-pill);padding:3px 9px}
.conv__row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-2);padding:4px 0}
.conv__row svg{flex:none;color:var(--blue-txt)}
.conv__bar{height:9px;border-radius:99px;background:#fff;border:1px solid var(--brand-2);
  overflow:hidden;margin:12px 0 8px}
.conv__bf{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--blue-txt),var(--brand-4))}
.conv__bl{font-size:11.5px;color:var(--text-2)}
.conv__bl b{color:var(--navy);font-size:13px}

/* ---- corporate: analytics panel ---- */
.an{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-xl);padding:24px 26px}
.an__h{display:flex;align-items:center;gap:11px;padding-bottom:16px;margin-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.14)}
.an__h b{font-size:14.5px;font-weight:800;color:#fff}
.an__h .d-chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:var(--on-navy)}
.an__r{display:grid;grid-template-columns:1fr 92px 44px;gap:14px;align-items:center;padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.09)}
.an__k{font-size:13px;color:var(--on-navy)}
.an__b{height:9px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;display:block}
.an__b i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--brand-5),var(--brand-3))}
.an__b i.an__f--w{background:linear-gradient(90deg,var(--a1-6),var(--a1-4))}
.an__r b{font-size:14px;font-weight:800;color:#fff;text-align:right}
.an__n{font-size:12.5px;color:var(--on-navy-2);margin:16px 0 0;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.14)}
.prod{margin-top:26px;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:24px 26px;box-shadow:var(--sh-sm)}
.prod>b{display:block;font-size:12px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-2);margin-bottom:14px}
.prod__c{display:flex;flex-wrap:wrap;gap:9px}
.chip--lg{font-size:13px;font-weight:700;color:var(--navy);background:var(--brand-0);
  border:1px solid var(--brand-2);padding:8px 14px}

/* ---- creators: from / to card ---- */
.fromto{display:grid;grid-template-columns:1fr 32px 1.1fr;gap:14px;align-items:start;
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:24px 22px}
.fromto__l{display:block;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-2);margin-bottom:12px}
.fromto__l--on{color:var(--a1-8)}
.fromto__a{border:1px dashed var(--line);border-radius:var(--r-md);padding:18px;background:var(--paper-2)}
.fromto__a b{display:block;font-size:17px;font-weight:800;color:var(--navy);letter-spacing:-.02em;
  margin-bottom:8px}
.fromto__a p{font-size:13px;color:var(--text-2);margin:0 0 12px}
.fromto__t{display:block;font-size:11px;font-weight:700;color:var(--text-2);background:#fff;
  border:1px solid var(--line-2);border-radius:6px;padding:6px 9px;width:fit-content}
.fromto__ar{color:var(--a1-4);display:grid;place-items:center;align-self:center}
.fromto__b{border:1px solid var(--a1-3);border-radius:var(--r-md);padding:18px;background:var(--a1-1)}
.fromto__b>b{display:block;font-size:17px;font-weight:800;color:var(--navy);letter-spacing:-.02em;
  margin-bottom:12px}
.fromto__r{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--text-2);padding:4px 0}
.fromto__r svg{flex:none;color:var(--a1-8);margin-top:3px}

/* ---- global: economics ---- */
.eco{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.eco__t{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-xl);overflow:hidden}
.eco__r{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:16px 24px;
  border-bottom:1px solid rgba(255,255,255,.1);font-size:14px;color:var(--on-navy);align-items:center}
.eco__r:last-child{border-bottom:0}
.eco__r--h{background:rgba(255,255,255,.06);font-size:11px;font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-navy-2)}
.eco__r--h span:last-child{color:var(--on-navy-a)}
.eco__r b{color:#fff;font-weight:700}
.eco__b h3{font-size:23px;margin:0 0 12px}
.eco__b>p{color:var(--on-navy);font-size:15px;margin:0 0 22px}

/* ---- warm variant (creators) ---- */
.grad--warm{background:linear-gradient(96deg,var(--a1-8) 6%,var(--a1-6) 52%,var(--a2-6) 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero--warm{background:radial-gradient(1100px 520px at 8% -12%,var(--a1-1) 0%,transparent 58%),
             radial-gradient(820px 430px at 100% 4%,var(--brand-1) 0%,transparent 60%),var(--surface)}
.sec--warm{background:var(--brand-1)}  /* follows the page theme, was hard-wired to accent 1 */
body.warm h1{font-size:clamp(40px,5.2vw,68px)}
body.warm .lede{font-size:clamp(17px,1.5vw,20px)}
body.warm .eyebrow{color:var(--a1-8)}
body.warm .badge i{background:var(--a1-6)}
body.warm .gap3 .card:nth-child(1)::before{background:var(--a1-6)}
body.warm .gap3 .card:nth-child(2)::before{background:var(--a1-8)}
body.warm .gap3 .card:nth-child(3)::before{background:var(--a2-6)}
body.warm .loop__n{background:var(--a1-1);border-color:var(--a1-3);color:var(--a1-8)}
body.warm .loop__s:not(:last-child)::after{background:linear-gradient(var(--a1-3),var(--a1-1))}
body.warm .subnav a.on{background:var(--a1-1);color:var(--a1-8)}
body.warm .hv-pill b{color:var(--a1-8)}
body.warm .ico--1{background:var(--a1-1);color:var(--a1-8)}
body.warm .vid__m b{color:var(--navy)}
body.warm h1 em,body.warm h2 em{color:var(--a1-8)}

/* ---- final CTA + form ---- */
.cta-g{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.form-card{background:#fff;border-radius:var(--r-xl);padding:34px;box-shadow:var(--sh-lg)}
/* the card sits inside .sec--navy, whose `h3{color:#fff}` would make these
   headings invisible on the white card. */
.form-card h3{font-size:21px;margin:0 0 4px;color:var(--navy)}
.form-card .fs{font-size:13.5px;color:var(--text-2);margin:0 0 22px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field.full{grid-column:1/-1}
.form-card .btn{width:100%;margin-top:8px}
.legal{font-size:11.5px;color:var(--text-2);margin:12px 0 0;text-align:center}
.done{display:none;text-align:center;padding:22px 0}
.done .fi{width:56px;height:56px;border-radius:50%;background:var(--ok-1);color:var(--ok-9);
  display:grid;place-items:center;margin:0 auto 14px}
.done p{font-size:14px;color:var(--text-2);margin:0}

/* ---- mobile sticky CTA ---- */
.mcta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:220;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line-2);
  padding:11px 16px;gap:10px;box-shadow:0 -6px 24px rgba(0,23,61,.1)}
.mcta .btn{flex:1}

/* ---- responsive ---- */
@media(max-width:1080px){
  .hx,.split,.cta-g,.oret,.eco,.reg,.tmpl{grid-template-columns:1fr;gap:36px}
  .xs,.advs,.advs--3,.pains,.quads,.incl,.incl--3,.procs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vids{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tmp{grid-template-columns:1fr}
  .tmp__rail{border-right:0;border-bottom:1px solid var(--line-2);display:grid;
    grid-template-columns:1fr 1fr;gap:6px}
  .tmp__tab{margin-bottom:0}
  .conv,.fromto{grid-template-columns:1fr}
  .conv__ar,.fromto__ar{transform:rotate(90deg);margin:0 auto}
}
@media(max-width:920px){
  .subnav{top:76px}
  .nav-l.open{display:flex;position:absolute;top:76px;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line-2);flex-direction:column;align-items:stretch;gap:0;
    padding:10px var(--pad) 18px;box-shadow:var(--sh-lg)}
  .nav-l.open>a,.nav-l.open .drop{padding:13px 2px;border-bottom:1px solid var(--line-2)}
  .nav-l.open .drop__menu{position:static;transform:none;box-shadow:none;border:0;padding:6px 0 0;
    min-width:0;display:block}
  .nav-l.open .nav-cta{display:block;margin-top:14px}
  .nav-l.open .nav-cta .btn{width:100%}
}
@media(max-width:760px){
  .hero{padding:28px 0 56px}
  .gap3,.xs,.advs,.advs--3,.pains,.quads,.incl,.incl--3,.procs,.stps,.vids,.hv-pills{grid-template-columns:1fr}
  .stu__stage{grid-template-columns:1fr}
  .stu__cam{min-height:170px}
  .ob--3{grid-template-columns:1fr 1fr}
  .tmp__rail{grid-template-columns:1fr}
  .tmp__body{padding:24px 20px}
  .eco__r{grid-template-columns:1fr;gap:6px}
  .eco__r--h{display:none}
  .form-card{padding:24px}
  .fgrid{grid-template-columns:1fr}
  .mcta{display:flex}
  body{padding-bottom:68px}
  /* the sticky pill would sit on top of the scrolling anchors; the .mcta bar
     already carries the CTA on small screens */
  .subnav__cta{display:none}
}

/* ==========================================================================
   v2 COMPONENTS - richer hero with real photography, plus the sections added
   after the first review round.
   ========================================================================== */

/* ---- hero v2: gradient mesh + photograph ---- */
.hero{padding:40px 0 88px}
.hero__mesh{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(64% 74% at 2% -12%, var(--brand-3) 0%, transparent 58%),
    radial-gradient(52% 62% at 74% -16%, var(--a2-3) 0%, transparent 62%),
    radial-gradient(46% 56% at 104% 58%, var(--a1-3) 0%, transparent 66%),
    radial-gradient(78% 78% at 26% 112%, var(--brand-2) 0%, transparent 60%),
    linear-gradient(180deg, var(--brand-0) 0%, var(--surface) 70%)}
.hero__mesh::after{content:"";position:absolute;inset:0;opacity:.62;
  background-image:linear-gradient(var(--brand-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--brand-2) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(70% 60% at 50% 30%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000 0%,transparent 78%)}
.hero>.wrap{position:relative;z-index:1}
.hx__t{max-width:700px}
/* these headlines run long; 64px turns them into five-line blocks */
.hx__t h1{font-size:clamp(32px,3.7vw,47px)}
.hero__trust{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;margin:30px 0 0;
  padding-top:22px;border-top:1px solid var(--brand-2)}
.hero__trust i{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-2)}
.hero__trust span{font-size:13.5px;font-weight:800;letter-spacing:-.02em;color:var(--navy);
  opacity:.78}

/* the production still */
.shot{position:relative;margin:0;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 40px 80px -32px rgba(0,23,61,.5),0 0 0 1px rgba(0,23,61,.06)}
.shot img{width:100%;height:100%;aspect-ratio:16/10.4;object-fit:cover;display:block;
  filter:saturate(1.06) contrast(1.04) brightness(1.04)}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,23,61,.34) 0%,transparent 34%,transparent 44%,rgba(0,23,61,.52) 100%)}
.shot__rec{position:absolute;left:16px;top:16px;z-index:2;display:inline-flex;align-items:center;
  gap:8px;font-size:10.5px;font-weight:900;letter-spacing:.14em;color:#fff;
  background:rgba(209,56,69,.9);border-radius:var(--r-pill);padding:6px 12px}
.shot__rec i{width:8px;height:8px;border-radius:50%;background:#fff;flex:none;
  animation:blink 1.6s ease-in-out infinite}
.shot__card{position:absolute;left:16px;bottom:16px;z-index:2;max-width:64%;
  background:rgba(255,255,255,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--sh-md);
  display:grid;gap:7px}
.shot__card b{font-size:13px;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.shot__r{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-2)}
.shot__r>span{width:20px;height:20px;border-radius:50%;background:var(--brand-1);
  color:var(--blue-txt);display:grid;place-items:center;flex:none}
.hx__v .stu__chips{margin-top:16px}
.hx__v .hv-pills{margin-top:14px}

/* ---- production standard strip ---- */
.sec--std{background:var(--brand-0);border-top:1px solid var(--brand-1);
  border-bottom:1px solid var(--brand-1);padding:64px 0}
.cft__top{max-width:820px;margin-bottom:34px}
.cft__h{font-size:clamp(24px,2.7vw,34px);margin:10px 0 0}
.cfts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cft{background:#fff;border:1px solid var(--brand-1);border-radius:var(--r-lg);padding:20px 22px;
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:4px 14px;
  box-shadow:var(--sh-sm)}
.cft__i{grid-row:1/3;width:38px;height:38px;border-radius:11px;background:var(--brand-1);
  color:var(--blue-txt);display:grid;place-items:center;flex:none}
.cft b{font-size:15px;font-weight:800;color:var(--navy);letter-spacing:-.02em;align-self:center}
.cft>span:last-child{font-size:13px;color:var(--text-2);line-height:1.5}
.cft__n{font-size:12.5px;color:var(--text-2);margin:22px 0 0;max-width:820px}

/* ---- router: first-deliverable line ---- */
.xs__st{display:block;font-size:12px;font-weight:700;color:var(--blue-txt);
  background:var(--brand-0);border:1px solid var(--brand-1);border-radius:8px;
  padding:8px 10px;line-height:1.4}

/* ---- challenge / response ---- */
.chs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ch{display:flex;gap:18px;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:26px 24px;box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s,border-color .18s}
.ch:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--brand-2)}
.ch__b{flex:1;min-width:0}
.ch__q{display:block;font-size:17px;font-weight:800;color:var(--navy);letter-spacing:-.02em;
  line-height:1.35;margin-bottom:10px}
.ch__b p{font-size:14.5px;color:var(--text-2);margin:0}
.ch__go{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;
  font-weight:700;color:var(--blue-txt);text-decoration:none}
.ch__go:hover{text-decoration:underline}
.ch__go svg{transition:transform .18s}
.ch__go:hover svg{transform:translateX(3px)}

/* ---- week-by-week timeline ---- */
.tl{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-xl);
  box-shadow:var(--sh-md);padding:26px 28px}
.tl__head,.tl__row{display:grid;grid-template-columns:210px minmax(0,1fr) 280px;gap:24px;
  align-items:center}
.tl__head{padding-bottom:12px;border-bottom:1px solid var(--line-2);margin-bottom:6px}
.tl__ticks{display:grid;grid-template-columns:repeat(10,1fr);font-size:10.5px;font-weight:800;
  letter-spacing:.06em;color:var(--text-2)}
.tl__ticks span{text-align:center}
.tl__row{padding:18px 0;border-bottom:1px solid var(--line-2)}
.tl__row:last-child{border-bottom:0;padding-bottom:4px}
.tl__lab b{display:block;font-size:16px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.tl__lab span{display:block;font-size:12.5px;color:var(--text-2);margin-top:3px}
.tl__track{display:grid;grid-template-columns:repeat(10,1fr);background:var(--paper-2);
  border:1px solid var(--line-2);border-radius:var(--r-pill);height:34px;align-items:center;
  padding:3px}
.tl__bar{grid-column:calc(var(--s) + 1) / span var(--n);height:28px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;min-width:0}
.tl__bar span{font-size:11.5px;font-weight:800;color:#fff;white-space:nowrap;padding:0 8px}
.tl__bar--1{background:linear-gradient(90deg,var(--blue-txt),var(--brand-5))}
.tl__bar--2{background:linear-gradient(90deg,var(--a2-8),var(--a2-4))}
.tl__bar--3{background:linear-gradient(90deg,var(--a1-8),var(--a1-6))}
.tl__bar--4{background:linear-gradient(90deg,var(--brand-9),var(--brand-7))}
.tl__bar--on{background:repeating-linear-gradient(115deg,var(--brand-9) 0 9px,var(--brand-8) 9px 18px)}
.tl__items{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:5px 16px}
.tl__items li{font-size:12.5px;color:var(--text-2);padding-left:13px;position:relative}
.tl__items li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;
  border-radius:50%;background:var(--brand-3)}
.tl__foot{font-size:14.5px;color:var(--text-2);margin:26px auto 0;text-align:center}
.tl__foot b{color:var(--navy)}

/* ---- the course-quality diff ---- */
.dps{display:grid;grid-template-columns:1fr 40px 1fr;gap:16px;align-items:start}
.dps__ar{align-self:center;display:grid;place-items:center;color:var(--brand-3)}
.dp{min-width:0}
.dp__tag{font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
  padding:7px 13px;border-radius:var(--r-pill);width:fit-content;margin-bottom:12px}
.dp--bad .dp__tag{color:var(--text-2);background:var(--n-3);border:1px solid var(--n-5)}
.dp--good .dp__tag{color:#fff;background:var(--blue-txt)}
.dp__win{border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:#fff;
  box-shadow:var(--sh-md)}
.dp--good .dp__win{border-color:var(--brand-2);box-shadow:var(--sh-lg)}
.dp__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--paper-2);
  border-bottom:1px solid var(--line-2)}
.dp__bar i{width:9px;height:9px;border-radius:50%;background:var(--n-5);flex:none}
.dp__bar span{margin-left:8px;font-size:11px;color:var(--text-2);background:#fff;
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:3px 10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp__body{display:grid;grid-template-columns:1.32fr 1fr}
.dp__stage{padding:14px;border-right:1px solid var(--line-2);min-width:0}
.dp__side{padding:14px 16px;min-width:0}
.dp__st{display:block;font-size:11.5px;font-weight:900;letter-spacing:.05em;color:var(--navy);
  margin-bottom:10px}
.dp__lessons{list-style:none;display:grid;gap:5px}
.dp__lessons li{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:baseline;
  font-size:11.5px;color:var(--text-2);padding:7px 8px;border-radius:7px;
  border:1px solid transparent}
.dp--good .dp__lessons li.on{background:var(--brand-0);border-color:var(--brand-2);color:var(--navy)}
.dp--bad .dp__lessons li.on{background:var(--n-3);border-color:var(--n-5)}
.dp__ln{font-weight:800;color:var(--blue-txt);font-size:10.5px}
.dp--bad .dp__ln{color:var(--text-2)}
.dp__lt{min-width:0;line-height:1.35}
.dp__ld{font-variant-numeric:tabular-nums;font-size:10.5px;opacity:.75}
.dp__feats{list-style:none;display:grid;gap:9px;margin-top:16px}
.dp__feats li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45}
.dp--bad .dp__feats li{color:var(--text-2)}
.dp--good .dp__feats li{color:var(--text)}
.dp__ok,.dp__no{flex:none;width:19px;height:19px;border-radius:50%;display:grid;
  place-items:center;margin-top:2px}
.dp__ok{background:var(--brand-1);color:var(--blue-txt)}
.dp__no{background:var(--n-3);color:var(--n-8);font-size:13px;font-weight:900;line-height:1}
.dp__lessons li{align-items:start}

/* the two player stages */
.dst{border-radius:var(--r-md);overflow:hidden;background:var(--navy)}
.dst--bad{background:var(--n-12)}
.dst__cam{position:relative;aspect-ratio:16/7;background:linear-gradient(160deg,#2b3340,#171c24)}
.dst__wc{position:absolute;right:8px;bottom:8px;width:52px;height:38px;border-radius:5px;
  background:linear-gradient(150deg,#4a5261,#2c333f);font-size:7px;font-weight:800;
  color:rgba(255,255,255,.5);display:grid;place-items:center;letter-spacing:.06em}
.dst__slide{background:#fff;padding:12px 14px 14px;display:grid;gap:5px}
.dst__slide b{font-size:11px;font-weight:800;color:var(--n-9);margin-bottom:3px}
.dst__slide span{height:5px;border-radius:3px;background:var(--n-4)}
.dst__slide span.s{width:62%}
.dst__frame{position:relative;aspect-ratio:16/8.4;overflow:hidden;
  background:radial-gradient(120% 90% at 22% 6%,var(--brand-8) 0%,var(--navy) 62%,#001029 100%)}
.dst__frame .stu__fig{position:absolute;left:-24%;right:auto;width:56%;inset-block:0}
.dst__frame .stu__fig .hd{width:34px;height:34px;bottom:40%}
.dst__frame .stu__fig .sh{width:86px}
.dst__l3{position:absolute;left:10px;bottom:10px;z-index:2;background:rgba(0,23,61,.72);
  border-left:3px solid var(--blue);border-radius:0 6px 6px 0;padding:5px 9px}
.dst__l3 b{display:block;font-size:9.5px;font-weight:800;color:#fff}
.dst__l3 span{display:block;font-size:8.5px;color:var(--on-navy)}
.dst__gfx{position:absolute;right:10px;top:10px;width:53%;background:rgba(255,255,255,.95);
  border-radius:8px;padding:9px 11px;box-shadow:var(--sh-md)}
.dst__gfx b{display:block;font-size:10.5px;font-weight:800;color:var(--navy);line-height:1.25}
.dst__gfx em{display:block;font-style:normal;font-size:9.5px;font-weight:700;color:var(--blue-txt);
  margin-top:5px;padding-top:5px;border-top:1px solid var(--brand-1)}
.dst__cc{position:absolute;right:10px;bottom:10px;z-index:2;font-size:8px;font-weight:900;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(0,117,235,.85);
  border-radius:4px;padding:3px 7px}
.dst__ctl{display:flex;align-items:center;gap:9px;padding:9px 11px;background:rgba(0,0,0,.55)}
.dst--bad .dst__ctl{background:var(--n-11)}
.dst__pl{width:16px;height:16px;border-radius:50%;background:#fff;flex:none;position:relative}
.dst__pl::after{content:"";position:absolute;left:6px;top:4.5px;border-left:5px solid var(--navy);
  border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
.dst__pg{position:relative;flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.24)}
.dst__pg em{display:block;height:100%;width:var(--w);border-radius:99px;background:var(--blue)}
.dst--bad .dst__pg em{background:rgba(255,255,255,.55)}
.dst__pg u{position:absolute;top:-2px;width:2px;height:8px;background:#fff;opacity:.7}
.dst__t{font-size:9px;font-weight:700;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.dst__chap{display:flex;gap:1px;background:rgba(255,255,255,.08)}
.dst__chap span{flex:1;text-align:center;font-size:8px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--on-navy);padding:6px 2px;background:rgba(255,255,255,.04)}
.dst__chap span.on{color:#fff;background:rgba(0,117,235,.45)}

/* the delta strip under the diff */
.dlts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:28px}
.dlt{background:#fff;border:1px solid var(--brand-2);border-radius:var(--r-md);padding:16px 18px;
  box-shadow:var(--sh-sm)}
.dlt b{display:block;font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-2);margin-bottom:7px}
.dlt span{display:block;font-size:17px;font-weight:800;color:var(--blue-txt);letter-spacing:-.02em}

/* ---- inside-the-production gallery ---- */
.gls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.gl{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md);
  background:var(--navy)}
.gl--wide{grid-column:span 2;grid-row:span 2}
.gl img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/10.5;
  transition:transform .5s ease}
.gl--wide img{aspect-ratio:1/1}
.gl:hover img{transform:scale(1.04)}
.gl::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 38%,rgba(0,23,61,.82) 100%)}
.gl figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px}
.gl figcaption b{display:block;font-size:15px;font-weight:800;color:#fff;letter-spacing:-.02em}
.gl--wide figcaption b{font-size:20px}
.gl figcaption span{display:block;font-size:12px;color:var(--on-navy);margin-top:3px;line-height:1.4}

/* ---- deliverables manifest ---- */
.dvs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dv{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:24px;
  box-shadow:var(--sh-sm)}
.dv__h{display:flex;align-items:center;gap:13px;padding-bottom:16px;margin-bottom:6px;
  border-bottom:1px solid var(--line-2)}
.dv__h .ico{width:38px;height:38px;border-radius:11px}
.dv__h b{font-size:16px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.dv__l{list-style:none;display:grid}
.dv__l li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line-2);font-size:14px;font-weight:600;
  color:var(--navy)}
.dv__l li:last-child{border-bottom:0;padding-bottom:0}
.dv__l i{grid-column:2;font-style:normal;font-size:12.5px;font-weight:400;color:var(--text-2)}
.dv__x{grid-row:1/3;width:44px;height:30px;border-radius:6px;display:grid;place-items:center;
  font-size:9px;font-weight:900;letter-spacing:.03em;color:#fff;flex:none}
.dv__x.pk{background:var(--blue-txt)}
.dv__x.vid{background:var(--a2-8)}
.dv__x.doc{background:var(--n-8)}
.dv__x.txt{background:var(--brand-9)}
.dv__x.src{background:var(--a1-8)}

/* ---- formats matrix ---- */
.fmts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fmt{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px 24px;
  box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s,border-color .18s}
.fmt:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--brand-2)}
.fmt .ico{margin-bottom:16px}
.fmt b{display:block;font-size:16.5px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.fmt__w{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--blue-txt);background:var(--brand-0);
  border:1px solid var(--brand-1);border-radius:5px;padding:3px 8px;margin:9px 0 11px}
.fmt p{font-size:14px;color:var(--text-2);margin:0}

/* ---- engagement models ---- */
.mdls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.mdl{position:relative;background:#fff;border:1.5px solid var(--line-2);border-radius:var(--r-xl);
  padding:32px 28px;box-shadow:var(--sh-sm);display:flex;flex-direction:column}
.mdl--feat{border-color:var(--blue-txt);box-shadow:var(--sh-md)}
.mdl__tag{position:absolute;top:-13px;left:28px;background:var(--blue-txt);color:#fff;
  font-size:11px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;
  border-radius:6px;padding:5px 12px}
.mdl h3{font-size:21px;margin:0 0 6px}
.mdl__s{font-size:14px;color:var(--text-2);margin:0 0 20px}
.mdl__m{display:flex;align-items:baseline;gap:10px;padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid var(--line-2)}
.mdl__m b{font-size:28px;font-weight:800;color:var(--blue-txt);letter-spacing:-.03em}
.mdl__m span{font-size:13px;color:var(--text-2)}
.mdl__l{list-style:none;display:grid;gap:11px}
.mdl__l li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text)}
.mdl__l svg{flex:none;color:var(--blue-txt);margin-top:4px}
.mdl__f{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line-2);font-size:13px;
  color:var(--text-2)}

/* ---- production team ---- */
.rls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.rl{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-lg);padding:22px 20px;transition:.2s}
.rl:hover{background:rgba(255,255,255,.1);border-color:rgba(0,117,235,.5);transform:translateY(-4px)}
.rl .ico{width:42px;height:42px;border-radius:12px;margin-bottom:14px}
.rl b{display:block;font-size:15.5px;font-weight:800;color:#fff;letter-spacing:-.02em;
  margin-bottom:6px}
.rl>span:last-child{font-size:13px;color:var(--on-navy);line-height:1.5}

/* ---- platforms & standards ---- */
.plts{display:grid;gap:18px}
.plt{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:22px 24px;
  box-shadow:var(--sh-sm);display:grid;grid-template-columns:190px 1fr;gap:18px;align-items:center}
.plt>b{font-size:12px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-2)}
.plt__c{display:flex;flex-wrap:wrap;gap:9px}

/* ---- v2 responsive ---- */
@media(max-width:1080px){
  .cfts,.fmts,.dvs,.mdls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chs{grid-template-columns:1fr}
  .gls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gl--wide{grid-column:span 2;grid-row:auto}
  .gl--wide img{aspect-ratio:16/9}
  .dps{grid-template-columns:1fr;gap:26px}
  .dps__ar{transform:rotate(90deg);margin:0 auto}
  .dlts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl__head,.tl__row{grid-template-columns:180px minmax(0,1fr);gap:16px}
  .tl__items{grid-column:1/-1;grid-template-columns:1fr 1fr}
  .tl__head>span:last-child{display:none}
  .hx__t{max-width:none}
}
@media(max-width:760px){
  .cfts,.fmts,.dvs,.mdls,.rls,.gls,.dlts,.tl__items{grid-template-columns:1fr}
  .gl--wide{grid-column:span 1}
  .hero__trust{gap:6px 14px}
  .hero__trust span{font-size:13px}
  .shot__card{position:static;left:auto;right:auto;bottom:auto;border-radius:0 0 var(--r-xl) var(--r-xl);
    backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff;box-shadow:none;
    border-top:1px solid var(--line-2)}
  .shot::after{display:none}
  .dp__body{grid-template-columns:1fr}
  .dp__stage{border-right:0;border-bottom:1px solid var(--line-2)}
  .plt{grid-template-columns:1fr;gap:12px}
  .tl__head,.tl__row{grid-template-columns:1fr}
  .tl__head{display:none}
  .tl__track{margin-top:10px}
}

/* ---- AI + human pipeline (EdTech) ---- */
.ais{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ai__s{position:relative;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);padding:22px 22px 20px;display:grid;
  grid-template-columns:auto 1fr;grid-template-rows:auto auto auto auto;gap:3px 13px;transition:.2s}
.ai__s:hover{background:rgba(255,255,255,.1);transform:translateY(-4px)}
.ai__s--human{border-left:3px solid var(--brand-4)}
.ai__s--both{border-left:3px solid var(--a2-4)}
.ai__s--ai{border-left:3px solid var(--a1-4)}
.ai__n{position:absolute;right:18px;top:16px;font-size:22px;font-weight:800;letter-spacing:-.04em;
  color:rgba(255,255,255,.22);line-height:1}
.ai__i{grid-row:1/3;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:#fff;flex:none}
.ai__s b{font-size:15.5px;font-weight:800;color:#fff;letter-spacing:-.02em;align-self:end}
.ai__k{font-size:10.5px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;align-self:start}
.ai__s--human .ai__k{color:var(--brand-3)}
.ai__s--both .ai__k{color:var(--a2-4)}
.ai__s--ai .ai__k{color:var(--a1-4)}
.ai__w{grid-column:1/-1;font-size:12.5px;font-weight:700;color:#fff;margin-top:12px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.13)}
.ai__s p{grid-column:1/-1;font-size:13px;color:var(--on-navy);margin:4px 0 0;line-height:1.5}
.ai__key{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px;justify-content:center}
.ai__key span{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--on-navy)}
.ai__key i{width:22px;height:4px;border-radius:99px;display:block}
.ai__key .k1{background:var(--brand-4)}
.ai__key .k2{background:var(--a2-4)}
.ai__key .k3{background:var(--a1-4)}

/* the canvas band variant, used for the white-label terms */
.sec--canvas .incl .i{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}

@media(max-width:1080px){ .ais{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:760px){ .ais{grid-template-columns:1fr} }

/* ---- warm variant: keep the creator page off the blue band ---- */
body.warm .hero__mesh{background:
    radial-gradient(64% 74% at 2% -12%, var(--a1-3) 0%, transparent 58%),
    radial-gradient(52% 62% at 74% -16%, var(--a2-3) 0%, transparent 62%),
    radial-gradient(46% 56% at 104% 58%, var(--brand-3) 0%, transparent 66%),
    radial-gradient(78% 78% at 26% 112%, var(--a1-1) 0%, transparent 60%),
    linear-gradient(180deg, var(--a1-1) 0%, var(--surface) 70%)}
body.warm .hero__mesh::after{background-image:linear-gradient(var(--a1-3) 1px,transparent 1px),
  linear-gradient(90deg,var(--a1-3) 1px,transparent 1px)}
body.warm .hero__trust{border-top-color:var(--a1-3)}
body.warm .sec--std{background:var(--a1-1);border-top-color:var(--a1-3);border-bottom-color:var(--a1-3)}
body.warm .cft{border-color:var(--a1-3)}
body.warm .cft__i{background:var(--a1-1);color:var(--a1-8)}
body.warm .xs__st{color:var(--a1-8);background:var(--a1-1);border-color:var(--a1-3)}
body.warm .ch__go{color:var(--a1-8)}
body.warm .dlt{border-color:var(--a1-3)}
body.warm .dlt span{color:var(--a1-8)}
body.warm .fmt__w{color:var(--a1-8);background:var(--a1-1);border-color:var(--a1-3)}
body.warm .dp--good .dp__tag{background:var(--a1-8)}
body.warm .dp--good .dp__win{border-color:var(--a1-3)}
body.warm .dp--good .dp__lessons li.on{background:var(--a1-1);border-color:var(--a1-3)}
body.warm .dp__ln{color:var(--a1-8)}
body.warm .dp__ok{background:var(--a1-1);color:var(--a1-8)}
body.warm .tl__foot b,body.warm .callout b{color:var(--navy)}

/* ==========================================================================
   v3 - second review round. Type never sits over a photograph; the partner
   logos are full colour; the standard/stages/gallery/deliverables/comparison/
   engagement components are rebuilt.
   ========================================================================== */

/* ---- hero: caption bar under the image, no overlay ---- */
.shot{position:relative;margin:0;border-radius:var(--r-xl);overflow:hidden;background:#fff;
  box-shadow:0 44px 90px -34px rgba(0,23,61,.46),0 0 0 1px rgba(0,23,61,.07)}
.shot img{width:100%;height:auto;aspect-ratio:16/10.2;object-fit:cover;display:block;
  filter:saturate(1.05) contrast(1.03) brightness(1.03)}
.shot::after{display:none}
.shot__rec{display:none}
.shot__card{display:none}
.shot__cap{display:flex;align-items:center;gap:11px;padding:15px 20px;background:var(--navy);
  color:#fff;font-size:13.5px;font-weight:700;line-height:1.35}
.shot__cap i{width:9px;height:9px;border-radius:50%;background:var(--ok-6);flex:none;
  box-shadow:0 0 0 4px rgba(6,193,112,.25)}
.hx__t .stu__chips{margin-top:28px}
.hx__v .hv-pills{margin-top:16px}

/* ---- partner logos: full colour, sized by mark type ---- */
.mq-sec{padding:40px 0 36px}
.mq__i{flex:none;height:74px;display:grid;place-items:center;margin:0 44px;
  filter:none;opacity:1}
.mq__i:hover{filter:none;opacity:1}
.mq__i img{width:auto;height:auto;object-fit:contain}
.mq__i--crest img{max-height:74px;max-width:100px}
.mq__i--wide img{max-height:38px;max-width:160px}
.mq__t{animation-duration:42s}
@media (prefers-reduced-motion:reduce){ .mq__i{margin:0 30px} }

/* ---- the production standard, as a spec sheet ---- */
.sec--std{background:var(--brand-0);border-top:1px solid var(--brand-1);
  border-bottom:1px solid var(--brand-1);padding:76px 0}
.std{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:start}
.std__side h2{font-size:clamp(26px,2.9vw,38px);margin:10px 0 16px}
.std__side .lede{margin-bottom:26px}
.std__list{background:#fff;border:1px solid var(--brand-1);border-radius:var(--r-xl);
  box-shadow:var(--sh-sm);overflow:hidden}
.std__r{display:grid;grid-template-columns:auto auto 1fr;gap:4px 16px;align-items:center;
  padding:20px 26px;border-bottom:1px solid var(--line-2)}
.std__r:last-child{border-bottom:0}
.std__r:hover{background:var(--brand-0)}
.std__n{grid-row:1/3;font-size:13px;font-weight:900;color:var(--brand-3);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.std__i{grid-row:1/3;width:38px;height:38px;border-radius:11px;background:var(--brand-1);
  color:var(--blue-txt);display:grid;place-items:center}
.std__r b{font-size:15.5px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.std__d{font-size:13.5px;color:var(--text-2);line-height:1.5}

/* ---- audience router: image-led clickable cards ---- */
.aud-cs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.aud-c{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-2);
  border-radius:var(--r-lg);overflow:hidden;text-decoration:none;box-shadow:var(--sh-sm);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.aud-c:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--brand-2)}
.aud-c__im{display:block;position:relative;overflow:hidden}
.aud-c__im img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform .5s ease}
.aud-c:hover .aud-c__im img{transform:scale(1.05)}
.aud-c__b{display:flex;flex-direction:column;gap:9px;padding:20px 22px 22px;flex:1}
.aud-c__ic{width:40px;height:40px;border-radius:12px;background:var(--brand-0);
  border:1px solid var(--brand-2);color:var(--blue-txt);display:grid;place-items:center;
  margin:-40px 0 4px;position:relative;z-index:1;box-shadow:var(--sh-sm);background-color:#fff}
.aud-c__b b{font-size:17px;font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.3}
.aud-c__p{font-size:14px;color:var(--text-2);flex:1}
.aud-c .go{font-size:13px;font-weight:700;color:var(--blue-txt);display:flex;align-items:center;gap:6px}
.aud-c:hover .go svg{transform:translateX(4px)}
.aud-c .go svg{transition:transform .18s}

/* ---- problem cards ---- */
.probs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.probs--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.prob{position:relative;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:26px 24px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.prob:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--brand-2)}
.prob__n{position:absolute;right:20px;top:18px;font-size:13px;font-weight:900;
  color:var(--brand-2);font-variant-numeric:tabular-nums}
.prob .ico{margin-bottom:16px}
.prob h3{font-size:17px;line-height:1.32;margin:0 0 9px}
.prob p{font-size:14px;color:var(--text-2);margin:0 0 18px;flex:1}
.prob__r{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--navy);
  font-weight:600;padding-top:16px;border-top:1px solid var(--line-2);line-height:1.5}
.prob__r i{flex:none;width:19px;height:19px;border-radius:50%;background:var(--brand-1);
  color:var(--blue-txt);display:grid;place-items:center;margin-top:1px}

/* ---- stage rail ---- */
.stgs{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.stgs__rail{position:absolute;left:8%;right:8%;top:26px;height:2px;
  background:linear-gradient(90deg,var(--brand-2),var(--a2-3),var(--a1-3),var(--brand-2))}
.stg{position:relative;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-xl);
  padding:0 26px 26px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;
  transition:transform .18s,box-shadow .18s}
.stg:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.stg__n{width:54px;height:54px;border-radius:50%;background:var(--blue-txt);color:#fff;
  display:grid;place-items:center;font-size:20px;font-weight:800;margin:-27px 0 18px;
  box-shadow:0 8px 20px -8px rgba(0,107,214,.6);border:4px solid #fff}
.stg:nth-child(3) .stg__n{background:var(--a2-8)}
.stg:nth-child(4) .stg__n{background:var(--a1-8)}
.stg:nth-child(5) .stg__n{background:var(--brand-9)}
.stg__w{display:inline-block;width:fit-content;font-size:11px;font-weight:900;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blue-txt);background:var(--brand-0);
  border:1px solid var(--brand-2);border-radius:var(--r-pill);padding:4px 11px;margin-bottom:12px}
.stg h3{font-size:19px;margin:0 0 14px}
.stg__l{list-style:none;display:grid;gap:8px;margin:0 0 18px;flex:1}
.stg__l li{font-size:13.5px;color:var(--text-2);padding-left:14px;position:relative;line-height:1.45}
.stg__l li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;
  border-radius:50%;background:var(--brand-3)}
.stg__you{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;font-weight:700;
  color:var(--navy);padding-top:15px;border-top:1px solid var(--line-2);line-height:1.4}
.stg__you svg{flex:none;color:var(--text-2);margin-top:1px}
.stgs__f{font-size:14.5px;color:var(--text-2);margin:32px auto 0;text-align:center;max-width:820px}
.stgs__f b{color:var(--navy)}

/* ---- diff outcome band ---- */
.dlts,.dlt{display:none}
.dband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:32px;
  background:#fff;border:1px solid var(--brand-2);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-sm)}
.dband__i{padding:22px 24px;border-right:1px solid var(--line-2)}
.dband__i:last-child{border-right:0}
.dband__k{display:block;font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-2);margin-bottom:11px}
.dband__v{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dband__v s{font-size:14px;color:var(--text-2);text-decoration-thickness:1px}
.dband__v svg{color:var(--brand-3);flex:none;align-self:center}
.dband__v b{font-size:20px;font-weight:800;color:var(--blue-txt);letter-spacing:-.02em}

/* ---- gallery filmstrip: caption under the image ---- */
.gls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.gl{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;background:#fff;
  border:1px solid var(--line-2);box-shadow:var(--sh-sm);display:flex;flex-direction:column;
  transition:transform .2s,box-shadow .2s}
.gl:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.gl--wide{grid-column:auto;grid-row:auto}
.gl::after{display:none}
.gl__im{position:relative;display:block;overflow:hidden}
.gl__im img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .5s ease}
.gl:hover .gl__im img{transform:scale(1.05)}
.gl__n{position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:50%;
  background:rgba(0,23,61,.82);color:#fff;display:grid;place-items:center;font-size:12.5px;
  font-weight:800;backdrop-filter:blur(4px)}
.gl figcaption{position:static;padding:16px 18px 18px}
.gl figcaption b{display:block;font-size:15px;font-weight:800;color:var(--navy);
  letter-spacing:-.02em}
.gl--wide figcaption b{font-size:15px}
.gl figcaption span{display:block;font-size:12.5px;color:var(--text-2);margin-top:4px;line-height:1.45}

/* ---- deliverables: real file badges ---- */
.dv{padding:26px 26px 22px}
.dv__h{display:flex;align-items:center;gap:13px;padding-bottom:18px;margin-bottom:4px;
  border-bottom:1px solid var(--line-2)}
.dv__hi{width:40px;height:40px;border-radius:12px;background:var(--brand-0);
  border:1px solid var(--brand-2);color:var(--blue-txt);display:grid;place-items:center;flex:none}
.dv__l li{display:grid;grid-template-columns:52px 1fr;gap:2px 14px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line-2)}
.dv__l li:last-child{border-bottom:0;padding-bottom:2px}
.dv__l b{font-size:14.5px;font-weight:700;color:var(--navy);align-self:end}
.dv__l li>span:last-child{font-size:12.5px;color:var(--text-2);line-height:1.45;align-self:start}
.dv__x{grid-row:1/3;width:52px;height:40px;border-radius:8px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;font-size:9.5px;font-weight:900;
  letter-spacing:.04em;color:#fff}
.dv__x i{display:block;opacity:.75;line-height:0}
.dv__x--pk{background:var(--blue-txt)}
.dv__x--vid{background:var(--a2-8)}
.dv__x--doc{background:var(--n-8)}
.dv__x--txt{background:var(--brand-9)}
.dv__x--src{background:var(--a1-8)}

/* ---- comparison cards ---- */
.cmps{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cmp{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm);background:#fff;
  border:1px solid var(--line-2)}
.cmp--b{border-color:var(--blue-txt);box-shadow:var(--sh-md)}
.cmp__h{display:flex;align-items:center;gap:12px;padding:20px 26px;background:var(--paper-2);
  border-bottom:1px solid var(--line-2)}
.cmp--b .cmp__h{background:var(--blue-txt);border-bottom-color:var(--blue-txt)}
.cmp__h b{font-size:16.5px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.cmp--b .cmp__h b{color:#fff}
.cmp__x{width:26px;height:26px;border-radius:50%;background:var(--n-5);color:#fff;display:grid;
  place-items:center;font-size:15px;font-weight:900;flex:none;line-height:1}
.cmp__t{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;
  display:grid;place-items:center;flex:none}
.cmp__r{display:grid;grid-template-columns:1fr;gap:3px;padding:15px 26px;
  border-bottom:1px solid var(--line-2)}
.cmp__r:last-child{border-bottom:0}
.cmp__k{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-2)}
.cmp__v{font-size:15px;color:var(--text-2);line-height:1.45}
.cmp--b .cmp__v{color:var(--navy);font-weight:700}

/* ---- engagement models: equal height, aligned bands ---- */
.mdls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.mdl{position:relative;background:#fff;border:1.5px solid var(--line-2);border-radius:var(--r-xl);
  padding:34px 28px 28px;box-shadow:var(--sh-sm);display:grid;
  grid-template-rows:auto auto 1fr auto auto;gap:0;height:100%}
.mdl__t{min-height:96px}
.mdl__t h3{font-size:21px;margin:0 0 7px}
.mdl__t p{font-size:14px;color:var(--text-2);margin:0}
.mdl__m{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:18px 0;margin:4px 0 18px;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);min-height:78px}
.mdl__m b{font-size:26px;font-weight:800;color:var(--blue-txt);letter-spacing:-.03em}
.mdl__m span{font-size:13px;color:var(--text-2)}
.mdl__l{list-style:none;display:grid;gap:11px;align-content:start}
.mdl__l li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text);
  line-height:1.45}
.mdl__l svg{flex:none;color:var(--blue-txt);margin-top:4px}
.mdl__f{margin:20px 0 16px;padding-top:16px;border-top:1px solid var(--line-2);font-size:13px;
  color:var(--text-2)}
.mdl .btn{width:100%}
.mdl__s{display:none}

/* ---- video cards on our own thumbnails ---- */
.vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.vid{cursor:pointer;background:var(--navy);border:1px solid var(--line-2);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s,border-color .18s}
.vid:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--brand-2)}
.vid__f{position:relative;aspect-ratio:16/9;display:grid;place-items:center;background:var(--navy)}
.vid__f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid__f::after{display:none}
.vid__m{display:none}
.vid__play{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.94);
  color:var(--blue-txt);display:grid;place-items:center;z-index:1;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.6);transition:transform .18s}
.vid:hover .vid__play{transform:scale(1.09)}

/* ---- component library: a real still in the expert-on-screen panel ---- */
.tmpl__shot{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md)}
.tmpl__shot img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.tmpl__ov{position:absolute;left:14px;bottom:14px;background:rgba(0,23,61,.82);
  border-left:3px solid var(--blue);border-radius:0 8px 8px 0;padding:9px 14px;
  backdrop-filter:blur(4px)}
.tmpl__ov b{display:block;font-size:13px;font-weight:800;color:#fff}
.tmpl__ov span{display:block;font-size:11px;color:var(--on-navy);margin-top:1px}

/* ---- retired v2 blocks ---- */
.cfts,.cft,.cft__top,.cft__n,.chs,.ch,.tl,.tl__head,.xs__st,.plts,.plt{display:none}

/* ---- v3 responsive ---- */
@media(max-width:1080px){
  .std{grid-template-columns:1fr;gap:32px}
  .aud-cs,.probs,.probs--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stgs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stgs__rail{display:none}
  .gls{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dband{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dband__i:nth-child(2){border-right:0}
  .dband__i:nth-child(-n+2){border-bottom:1px solid var(--line-2)}
  .cmps{grid-template-columns:1fr}
  .mdls{grid-template-columns:1fr}
  .mdl__t,.mdl__m{min-height:0}
}
@media(max-width:760px){
  .aud-cs,.probs,.probs--3,.stgs,.gls,.vids{grid-template-columns:1fr}
  .dband{grid-template-columns:1fr}
  .dband__i{border-right:0;border-bottom:1px solid var(--line-2)}
  .dband__i:last-child{border-bottom:0}
  .std__r{grid-template-columns:auto 1fr;padding:18px 20px}
  .std__i{display:none}
  .mq__i{margin:0 26px;height:60px}
  .mq__i--crest img{max-height:54px}
  .mq__i--wide img{max-height:32px;max-width:132px}
}

/* ==========================================================================
   v4 - third review round
   ========================================================================== */

/* ---- hero: audience switcher (clickable, deliberately not buttons) ---- */
.swis{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:30px;padding-top:24px;
  border-top:1px solid var(--brand-2)}
.swis__l{font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-2);flex:none}
.swis__r{display:flex;gap:10px;flex-wrap:wrap}
.swi{display:inline-flex;align-items:center;gap:9px;text-decoration:none;background:#fff;
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:8px 8px 8px 12px;
  box-shadow:var(--sh-sm);transition:transform .16s,box-shadow .16s,border-color .16s}
.swi:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--brand-2)}
.swi__i{width:26px;height:26px;border-radius:8px;background:var(--brand-0);color:var(--blue-txt);
  display:grid;place-items:center;flex:none}
.swi__t{font-size:14px;font-weight:700;color:var(--navy)}
.swi__a{width:24px;height:24px;border-radius:50%;background:var(--brand-0);color:var(--blue-txt);
  display:grid;place-items:center;flex:none;transition:transform .16s}
.swi:hover .swi__a{transform:translateX(2px);background:var(--blue-txt);color:#fff}
body.warm .swi__i,body.warm .swi__a{background:var(--a1-1);color:var(--a1-8)}
body.warm .swi:hover .swi__a{background:var(--a1-8);color:#fff}
body.warm .swis{border-top-color:var(--a1-3)}

/* ---- partner logos in uniform tiles ---- */
.mq-sec{padding:44px 0 40px;background:var(--paper-2);border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2)}
.mq-cap{margin-bottom:26px}
.mq__i{flex:none;height:auto;display:block;margin:0 12px;filter:none;opacity:1}
.mq__box{display:grid;place-items:center;width:190px;height:96px;background:#fff;
  border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  padding:18px 22px;transition:box-shadow .2s,border-color .2s}
.mq__i:hover .mq__box{box-shadow:var(--sh-md);border-color:var(--brand-2)}
.mq__box img{max-height:52px;max-width:142px;width:auto;height:auto;object-fit:contain;display:block}
@media (prefers-reduced-motion:reduce){ .mq__i{margin:0 8px} }

/* ---- three-phase rail ---- */
.phrail{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  justify-items:center;margin:0 0 -30px;padding:0 14%}
.phrail__l{position:absolute;left:26%;right:26%;top:29px;height:2px;
  background:linear-gradient(90deg,var(--blue-txt),var(--a2-6),var(--ok-6))}
.phn{position:relative;z-index:1;width:58px;height:58px;border-radius:50%;background:#fff;
  border:2px solid var(--brand-2);display:grid;place-items:center;
  box-shadow:0 0 0 6px var(--surface),var(--sh-sm)}
.phn i{font-style:normal;font-size:16px;font-weight:800;color:var(--blue-txt);
  font-variant-numeric:tabular-nums}
.phrail .phn:nth-child(3){border-color:var(--a2-3)}
.phrail .phn:nth-child(3) i{color:var(--a2-8)}
.phrail .phn:nth-child(4){border-color:var(--ok-2)}
.phrail .phn:nth-child(4) i{color:var(--ok-9)}
.phs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:52px}
.ph{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-xl);padding:30px 28px 26px;
  box-shadow:var(--sh-sm);display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.ph:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.ph__tag{display:inline-block;width:fit-content;font-size:11px;font-weight:900;letter-spacing:.11em;
  text-transform:uppercase;border-radius:var(--r-pill);padding:6px 13px;margin-bottom:20px}
.ph--1 .ph__tag{color:var(--blue-txt);background:var(--brand-0);border:1px solid var(--brand-2)}
.ph--2 .ph__tag{color:var(--a2-8);background:var(--a2-1);border:1px solid var(--a2-3)}
.ph--3 .ph__tag{color:var(--ok-9);background:var(--ok-1);border:1px solid var(--ok-2)}
.ph__ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px}
.ph--1 .ph__ic{background:var(--brand-1);color:var(--blue-txt)}
.ph--2 .ph__ic{background:var(--a2-1);color:var(--a2-8)}
.ph--3 .ph__ic{background:var(--ok-1);color:var(--ok-9)}
.ph h3{font-size:20px;margin:0 0 10px;line-height:1.28}
.ph>p{font-size:14.5px;color:var(--text-2);margin:0 0 20px}
.ph__l{list-style:none;display:grid;gap:10px;margin:0 0 20px;flex:1}
.ph__l li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text);line-height:1.45}
.ph--1 .ph__l svg{color:var(--blue-txt)}
.ph--2 .ph__l svg{color:var(--a2-8)}
.ph--3 .ph__l svg{color:var(--ok-9)}
.ph__l svg{flex:none;margin-top:4px}
.ph__w{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--text-2);
  padding-top:16px;border-top:1px solid var(--line-2)}

/* ---- what-we-do pipeline ---- */
.pls{display:grid;gap:26px}
.pl{display:grid;grid-template-columns:1fr 1.06fr;gap:52px;align-items:center;
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-xl);padding:38px 40px;
  box-shadow:var(--sh-sm)}
.pl__k{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.11em;
  text-transform:uppercase;border-radius:var(--r-pill);padding:6px 13px;margin-bottom:16px}
.pl__k--a{color:var(--blue-txt);background:var(--brand-0);border:1px solid var(--brand-2)}
.pl__k--b{color:var(--a2-8);background:var(--a2-1);border:1px solid var(--a2-3)}
.pl__k--c{color:var(--ok-9);background:var(--ok-1);border:1px solid var(--ok-2)}
.pl__k--d{color:var(--warn-9);background:var(--warn-1);border:1px solid var(--warn-2)}
.pl__c h3{font-size:clamp(21px,2.1vw,26px);margin:0 0 12px}
.pl__c>p{font-size:15px;color:var(--text-2);margin:0 0 20px}
.pl__l{list-style:none;display:grid;gap:10px}
.pl__l li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--text);line-height:1.45}
.pl__l svg{flex:none;color:var(--blue-txt);margin-top:4px}

/* the drawn product panels */
.pnl{border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:#fff;
  box-shadow:var(--sh-md)}
.pnl__bar{display:flex;gap:6px;padding:12px 16px;background:var(--paper-2);
  border-bottom:1px solid var(--line-2)}
.pnl__bar i{width:9px;height:9px;border-radius:50%;background:var(--n-5)}
.pnl__b{padding:20px}
.pnl__r{display:flex;align-items:center;gap:13px;border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:14px 16px;margin-bottom:10px;background:#fff}
.pnl__r:last-child{margin-bottom:0}
.pnl__m{width:34px;height:26px;border-radius:6px;background:var(--brand-0);
  border:1px solid var(--brand-2);color:var(--blue-txt);display:grid;place-items:center;
  font-size:11px;font-weight:900;flex:none}
.pnl__f{flex:1;font-size:13.5px;font-weight:700;color:var(--navy)}
.pnl__f i{font-style:normal;color:var(--brand-3);margin:0 4px}
.pnl__i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.pnl__i--a{background:var(--brand-1);color:var(--blue-txt)}
.pnl__i--b{background:var(--a2-1);color:var(--a2-8)}
.pnl__i--c{background:var(--ok-1);color:var(--ok-9)}
.pnl__t{flex:1;min-width:0}
.pnl__t b{display:block;font-size:13.5px;font-weight:800;color:var(--navy)}
.pnl__t i{display:block;font-style:normal;font-size:12px;color:var(--text-2);margin-top:1px}
.pnl__p{font-size:10.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:5px 10px;flex:none}
.pnl__p--a{color:var(--blue-txt);background:var(--brand-0);border:1px solid var(--brand-2)}
.pnl__p--b{color:var(--a2-8);background:var(--a2-1);border:1px solid var(--a2-3)}
.pnl__p--c{color:var(--ok-9);background:var(--ok-1);border:1px solid var(--ok-2)}
.pnl__lab{font-size:10.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-2);margin:0 0 16px}
.pnl__bars{display:flex;align-items:flex-end;gap:14px;height:130px;padding:0 4px}
.pnl__bcol{flex:1;display:grid;grid-template-rows:1fr auto;gap:8px;height:100%;justify-items:center}
.pnl__bcol i{display:block;width:100%;height:var(--h);align-self:end;border-radius:8px 8px 3px 3px}
.pnl__bcol em{font-style:normal;font-size:11px;font-weight:700;color:var(--text-2)}
.pnl__bar--a{background:linear-gradient(180deg,var(--brand-9),var(--brand-5))}
.pnl__bar--b{background:linear-gradient(180deg,var(--blue),var(--brand-2))}
.pnl__bar--c{background:linear-gradient(180deg,var(--a1-6),var(--a1-3))}
.pnl__st{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.pnl__st div{background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:12px 10px;text-align:center}
.pnl__st b{display:block;font-size:17px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.pnl__st span{display:block;font-size:10.5px;color:var(--text-2);margin-top:3px;line-height:1.3}
.pnl__note{font-size:10.5px;color:var(--text-2);margin:14px 0 0;text-align:center}
.pnl__hd{display:flex;align-items:center;gap:13px;padding-bottom:16px;margin-bottom:16px;
  border-bottom:1px solid var(--line-2)}
.pnl__cs{display:flex;flex-wrap:wrap;gap:8px}
.pnl__c{font-size:12px;font-weight:700;color:var(--navy);background:var(--paper-2);
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:6px 12px}
.pnl__ft{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--text-2);
  margin:18px 0 0;padding-top:14px;border-top:1px dashed var(--line);line-height:1.45}
.pnl__ft svg{flex:none;color:var(--warn-9);margin-top:2px}
.pnl__ft b{color:var(--navy)}

/* ---- outcome ring + metric rows ---- */
.dp2{display:grid;grid-template-columns:.86fr 1.14fr;gap:26px;align-items:stretch}
.ring{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-xl);padding:36px 30px 30px;
  box-shadow:var(--sh-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px}
.ring__g{--p:71;width:230px;height:230px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--blue-txt) 0 calc(var(--p)*0.6%),
             var(--brand-4) calc(var(--p)*0.6%) calc(var(--p)*1%),
             var(--brand-1) calc(var(--p)*1%) 100%)}
.ring__i{width:174px;height:174px;border-radius:50%;background:#fff;display:grid;place-items:center;
  align-content:center;gap:2px;box-shadow:inset 0 0 0 1px var(--line-2)}
.ring__i b{font-size:46px;font-weight:800;color:var(--navy);letter-spacing:-.04em;line-height:1}
.ring__i span{font-size:10.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-2)}
.ring__t{font-size:16.5px;font-weight:800;color:var(--navy);margin-top:18px;text-align:center}
.ring__cmp{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.ring__cmp i{font-style:normal;font-size:11px;font-weight:800;color:var(--text-2);
  letter-spacing:.08em;text-transform:uppercase}
.ring__a{font-size:12.5px;font-weight:700;color:var(--text-2);background:var(--paper-2);
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:6px 13px}
.ring__b{font-size:12.5px;font-weight:800;color:var(--ok-9);background:var(--ok-1);
  border:1px solid var(--ok-2);border-radius:var(--r-pill);padding:6px 13px}
.mrows{display:grid;gap:18px}
.mrow{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-xl);padding:24px 28px;
  box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s}
.mrow:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.mrow__i{width:46px;height:46px;border-radius:13px;background:var(--brand-1);color:var(--blue-txt);
  display:grid;place-items:center;flex:none}
.mrow__b b{display:block;font-size:16.5px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.mrow__b>span{display:block;font-size:13px;color:var(--text-2);margin:3px 0 12px}
.mrow__t{display:block;height:8px;border-radius:99px;background:var(--paper-2);
  border:1px solid var(--line-2);overflow:hidden}
.mrow__t i{display:block;height:100%;width:var(--w);border-radius:99px;
  background:linear-gradient(90deg,var(--blue-txt),var(--brand-4))}
.mrow__v{font-size:32px;font-weight:800;color:var(--navy);letter-spacing:-.04em;flex:none;
  white-space:nowrap}
.mrow__v em{font-style:normal;font-size:17px;color:var(--blue-txt);margin-left:1px}

/* ---- comparison: recommended flag + inline CTA ---- */
.cmp__h{position:relative;padding-right:150px}
.cmp__rec{position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:10.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:var(--ok-6);border-radius:var(--r-pill);padding:7px 14px;
  box-shadow:0 6px 16px -6px rgba(6,193,112,.8)}
.cmp--a .cmp__h{padding-right:26px}
.cmp__cta{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;
  margin-top:0;background:linear-gradient(120deg,var(--navy),var(--navy-2) 60%,#001029);
  border-radius:0 0 var(--r-xl) var(--r-xl);padding:26px 34px;text-align:center}
.cmp__cta span{font-size:16px;font-weight:700;color:#fff}
.cmps{margin-bottom:0}

/* ---- entry points ---- */
.ents{display:grid;gap:14px}
.ent{display:grid;grid-template-columns:56px 1fr 220px 200px;gap:24px;align-items:center;
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-xl);padding:26px 30px;
  box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s,border-color .18s}
.ent:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--brand-2)}
.ent--on{border-color:var(--blue-txt);box-shadow:var(--sh-md)}
.ent__n{font-size:26px;font-weight:800;color:var(--brand-2);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}
.ent--on .ent__n{color:var(--blue-txt)}
.ent__b b{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:800;color:var(--navy);
  letter-spacing:-.02em;flex-wrap:wrap}
.ent__b b i{font-style:normal;font-size:10.5px;font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:var(--blue-txt);border-radius:var(--r-pill);
  padding:4px 10px}
.ent__b>span{display:block;font-size:14px;color:var(--text-2);margin:6px 0 12px}
.ent__gs{display:flex;flex-wrap:wrap;gap:7px}
.ent__g{font-size:11.5px;font-weight:700;color:var(--text-2);background:var(--paper-2);
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:5px 11px}
.ent__m{padding-left:24px;border-left:1px solid var(--line-2)}
.ent__m b{display:block;font-size:22px;font-weight:800;color:var(--blue-txt);letter-spacing:-.03em}
.ent__m span{display:block;font-size:12.5px;color:var(--text-2);margin-top:4px;line-height:1.4}
.ent__a{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:14px;white-space:nowrap;
  font-weight:700;color:var(--blue-txt);background:var(--brand-0);border:1px solid var(--brand-2);
  border-radius:10px;padding:13px 18px;text-decoration:none;transition:.18s}
.ent__a:hover{background:var(--blue-txt);color:#fff;border-color:var(--blue-txt)}
.ent__a svg{transition:transform .18s}
.ent__a:hover svg{transform:translateX(3px)}
.mdls,.mdl{display:none}

/* ---- v4 responsive ---- */
@media(max-width:1080px){
  .phs{grid-template-columns:1fr}
  .phrail{display:none}
  .phs{margin-top:0}
  .pl,.pl--b{grid-template-columns:1fr;gap:30px}
  .pl--b .pl__c{order:-1}
  .dp2{grid-template-columns:1fr}
  .ent{grid-template-columns:44px 1fr;gap:16px}
  .ent__m{grid-column:2;padding-left:0;border-left:0;border-top:1px solid var(--line-2);padding-top:14px}
  .ent__a{grid-column:2;width:fit-content}
  .cmp__h{padding-right:26px}
  .cmp__rec{position:static;transform:none;margin-left:auto}
}
@media(max-width:760px){
  .mq__box{width:150px;height:82px;padding:14px 18px}
  .mq__box img{max-height:42px;max-width:112px}
  .pl{padding:26px 22px}
  .mrow{grid-template-columns:auto 1fr;padding:20px}
  .mrow__v{grid-column:2;font-size:26px}
  .ring__g{width:186px;height:186px}
  .ring__i{width:140px;height:140px}
  .ring__i b{font-size:36px}
  .swis{flex-direction:column;align-items:flex-start;gap:12px}
  .cmp__cta{padding:22px}
}

/* ==========================================================================
   v5 - fourth review round
   ========================================================================== */

/* the blue-to-green display gradient, as used on the approved homepage footer */
.grad2{background:linear-gradient(96deg,var(--blue) 4%,var(--brand-4) 44%,var(--grad-end) 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent}
@media(min-width:900px){ .grad2{white-space:nowrap} }

/* ---- hero: stat bar attached to the image, no floating pills ---- */
.hv-pills{display:none}
.hstats{display:grid;grid-template-columns:1fr 1fr;background:var(--navy-2);
  border-top:1px solid rgba(255,255,255,.12)}
.hstat{padding:18px 22px;border-left:1px solid rgba(255,255,255,.12)}
.hstat:first-child{border-left:0}
.hstat b{display:block;font-size:30px;font-weight:800;color:#fff;letter-spacing:-.035em;
  line-height:1;font-variant-numeric:tabular-nums}
.hstat span{display:block;font-size:12.5px;color:var(--on-navy);margin-top:7px;line-height:1.35}

/* ---- the four audiences, one classy band ---- */
.abd-sec{padding:0 0 6px;background:var(--surface);position:relative;z-index:2;margin-top:-34px}
.abd__l{font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-2);margin:0 0 12px;text-align:center}
.abd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;
  border:1px solid var(--line-2);border-radius:var(--r-xl);box-shadow:var(--sh-lg);overflow:hidden}
.abd__c{display:flex;align-items:center;gap:13px;padding:22px 24px;text-decoration:none;
  border-left:1px solid var(--line-2);transition:background .18s}
.abd__c:first-child{border-left:0}
.abd__c:hover{background:var(--brand-0)}
.abd__i{width:38px;height:38px;border-radius:11px;background:var(--brand-0);
  border:1px solid var(--brand-2);color:var(--blue-txt);display:grid;place-items:center;flex:none;
  transition:.18s}
.abd__c:hover .abd__i{background:var(--blue-txt);border-color:var(--blue-txt);color:#fff}
.abd__t{flex:1;min-width:0}
.abd__t b{display:block;font-size:15px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.abd__t i{display:block;font-style:normal;font-size:12.5px;color:var(--text-2);margin-top:2px}
.abd__a{color:var(--brand-3);flex:none;transition:transform .18s,color .18s}
.abd__c:hover .abd__a{color:var(--blue-txt);transform:translateX(3px)}

/* ---- illustrative label inside the mock window ---- */
.dp__ill{margin-left:auto;font-style:normal;font-size:9.5px;font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2);background:#fff;border:1px solid var(--line-2);
  border-radius:5px;padding:3px 7px;flex:none}
.dband{display:none}
.mock-note{display:none}

/* ---- our numbers ---- */
.res-sec{padding:0 0 84px}
.res{background:linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 58%,#001029 100%);
  border-radius:var(--r-xl);padding:44px 48px 40px;position:relative;overflow:hidden}
.res::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  right:-160px;top:-240px;background:radial-gradient(circle,rgba(0,117,235,.42),transparent 65%)}
.res::after{content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
  background-size:56px 56px}
.res__h{position:relative;z-index:1;text-align:center;max-width:640px;margin:0 auto 34px}
.res__h h2{color:#fff;font-size:clamp(24px,2.6vw,34px);margin:10px 0 0}
.res__h .eyebrow{color:var(--on-navy-a)}
.res__g{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px}
.res__i{border-left:2px solid rgba(255,255,255,.16);padding:4px 0 4px 24px}
.res__i:first-child{border-left:0;padding-left:0}
.res__i b{display:block;font-size:clamp(34px,4vw,52px);font-weight:800;color:#fff;
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.res__i b em{font-style:normal;font-size:.52em;color:var(--on-navy-a);margin-left:2px}
.res__i span{display:block;font-size:13.5px;color:var(--on-navy);margin-top:12px;line-height:1.45}
.res__n{position:relative;z-index:1;font-size:11.5px;color:var(--on-navy-2);margin:32px 0 0;
  text-align:center}

/* ---- closing CTA band above the footer ---- */
.fcta{background:linear-gradient(150deg,#050d1e 0%,var(--navy) 60%,#020814 100%);
  position:relative;overflow:hidden;padding:76px 0}
.fcta::after{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
  background-size:104px 104px}
.fcta__in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap}
.fcta__p{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:900;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ok-6);
  border:1px solid rgba(6,193,112,.42);border-radius:var(--r-pill);padding:9px 18px;
  margin-bottom:20px}
.fcta__p i{width:7px;height:7px;border-radius:50%;background:var(--ok-6);flex:none}
.fcta h2{color:#fff;font-size:clamp(30px,4.2vw,52px);line-height:1.1;margin:0}
.fcta .btn-w{padding:19px 34px;font-size:16px;border-radius:14px}
.ft{padding-top:64px}

/* ---- v5 responsive ---- */
@media(max-width:1080px){
  .abd{grid-template-columns:1fr 1fr}
  .abd__c:nth-child(3){border-left:0}
  .abd__c:nth-child(n+3){border-top:1px solid var(--line-2)}
  .res__g{grid-template-columns:1fr 1fr;gap:26px}
  .res__i:nth-child(3){border-left:0;padding-left:0}
}
@media(max-width:760px){
  .abd-sec{margin-top:0;padding-top:26px}
  .abd{grid-template-columns:1fr}
  .abd__c{border-left:0;border-top:1px solid var(--line-2)}
  .abd__c:first-child{border-top:0}
  .res{padding:32px 26px 28px}
  .res__g{grid-template-columns:1fr;gap:22px}
  .res__i,.res__i:nth-child(3){border-left:0;padding-left:0;
    border-top:1px solid rgba(255,255,255,.16);padding-top:20px}
  .res__i:first-child{border-top:0;padding-top:4px}
  .hstats{grid-template-columns:1fr}
  .hstat{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .hstat:first-child{border-top:0}
  .fcta{padding:52px 0}
  .fcta__in{flex-direction:column;align-items:flex-start}
  .grad2{white-space:normal}
}

/* a real closing line under a section (not an illustrative label) */
.sec-foot{font-size:14px;color:var(--text-2);margin:26px auto 0;text-align:center;max-width:820px}
.sec-foot b{color:var(--navy)}

/* ==========================================================================
   v5 - fifth review round
   ·  the production standard rebuilt as six spec cards (.spx)
   ·  AI-augmented video generation section (.aiv)
   ·  the diff's "produced" stage now carries a real production frame
   ========================================================================== */

/* ---- production standard, rebuilt (.spx) ---- */
.spx__h{display:grid;grid-template-columns:1.02fr .98fr;gap:20px 56px;align-items:end;
  margin-bottom:34px}
.spx__h h2{font-size:clamp(26px,2.9vw,38px);margin:10px 0 0;max-width:15ch}
.spx__hr{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-bottom:4px}
.spx__hr .lede{margin:0}
.spx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.spx__c{position:relative;background:#fff;border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:26px 24px 24px;box-shadow:var(--sh-sm);
  transition:transform .18s,box-shadow .18s,border-color .18s;overflow:hidden}
.spx__c::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:var(--blue)}
.spx__c--2::before{background:var(--a2-6)}
.spx__c--3::before{background:var(--a1-6)}
.spx__c:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--brand-2)}
.spx__ic{position:absolute;right:20px;top:24px;width:38px;height:38px;border-radius:11px;
  background:var(--brand-0);color:var(--blue-txt);display:grid;place-items:center}
.spx__c--2 .spx__ic{background:var(--a2-1);color:var(--a2-8)}
.spx__c--3 .spx__ic{background:var(--a1-1);color:var(--a1-8)}
.spx__s{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blue-txt);background:var(--brand-0);
  border:1px solid var(--brand-2);border-radius:var(--r-pill);padding:4px 11px}
.spx__c--2 .spx__s{color:var(--a2-8);background:var(--a2-1);border-color:var(--a2-3)}
.spx__c--3 .spx__s{color:var(--a1-8);background:var(--a1-1);border-color:var(--a1-3)}
.spx__t{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--navy);
  line-height:1.3;margin:16px 0 0;padding-right:34px}
.spx__d{display:block;font-size:13.5px;line-height:1.55;color:var(--text-2);
  margin-top:11px;padding-top:13px;border-top:1px solid var(--line-2)}

/* ---- AI-augmented video generation (.aiv) ----------------------------------
   The shared .sec--navy band paints a faint 56px grid. In this section it read as
   stray lines behind the video, so it is switched off here and replaced with two
   soft brand glows. No other navy band changes. */
.sec--aiv{padding:104px 0;
  background:linear-gradient(165deg,#001A47 0%,var(--navy-2) 46%,#00102E 100%)}
.sec--aiv::after{display:none}
.sec--aiv::before{width:900px;height:900px;top:-420px;right:-260px;
  background:radial-gradient(circle,rgba(0,117,235,.34),transparent 66%)}
.aiv__glow{position:absolute;left:-220px;bottom:-360px;width:760px;height:760px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(var(--glow2),.24),transparent 68%)}

.aiv-head{max-width:900px;margin:0 auto 52px;text-align:center}
.aiv-head h2{font-size:clamp(36px,5vw,64px);line-height:1.04;letter-spacing:-.03em;margin:0}
.aiv-head .eyebrow{display:block;margin-bottom:16px}
.aiv-head .lede{margin:20px auto 0;max-width:780px;font-size:18px}

.aiv{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.aiv__l{display:flex;flex-direction:column;gap:18px}
.aiv__v{width:100%;cursor:pointer;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05) inset;
  transition:transform .2s,border-color .2s}
.aiv__v:hover{transform:translateY(-4px);border-color:rgba(111,176,255,.55)}
.aiv__v .vid__f{background:var(--navy)}
.aiv__v .vid__play{width:66px;height:66px;background:var(--blue);color:#fff;
  box-shadow:0 16px 40px -10px rgba(0,23,61,.6)}
.aiv__pill{position:absolute;left:14px;top:14px;z-index:3;font-size:10px;font-weight:900;
  letter-spacing:.09em;text-transform:uppercase;color:#fff;background:rgba(0,23,61,.82);
  border:1px solid rgba(255,255,255,.26);border-radius:var(--r-pill);padding:6px 13px}
.aiv__cap{font-size:14px;line-height:1.6;color:var(--on-navy);margin:0}

.aiv__r{display:flex;flex-direction:column;gap:26px}
.aiv__srcs{display:flex;flex-direction:column;gap:12px}
.aiv__sl{font-size:11px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;
  color:var(--on-navy-a)}
.aiv__fs{display:flex;flex-wrap:wrap;gap:8px}
.aiv__f{font-size:12px;font-weight:800;letter-spacing:.04em;color:#DCEBFF;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  border-radius:7px;padding:7px 12px}
.aiv__flow{position:relative;display:grid;gap:26px}
.aiv__flow::before{content:"";position:absolute;left:17px;top:12px;bottom:16px;width:2px;
  border-radius:2px;background:linear-gradient(180deg,var(--blue) 0%,var(--brand-4) 100%)}
.aiv__s{position:relative;display:grid;grid-template-columns:auto 1fr;gap:18px;
  align-items:start}
.aiv__n{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:#00102E;
  border:2px solid rgba(111,176,255,.65);box-shadow:0 0 0 6px rgba(0,117,235,.1)}
.aiv__n i{font-style:normal;font-size:11.5px;font-weight:900;color:#8FC6FF;
  font-variant-numeric:tabular-nums}
.aiv__st b{display:block;font-size:17px;font-weight:800;color:#fff;letter-spacing:-.02em;
  line-height:1.3;padding-top:7px}
.aiv__st p{font-size:14px;line-height:1.6;color:var(--on-navy);margin:7px 0 0}

.aiv__cs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.aiv__c{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);padding:26px 24px 24px}
.aiv__ci{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:linear-gradient(150deg,rgba(var(--glow2),.5),rgba(255,255,255,.14));color:#fff;
  margin-bottom:16px}
.aiv__c b{display:block;font-size:17px;font-weight:800;color:#fff;letter-spacing:-.02em}
.aiv__c span{display:block;font-size:14px;line-height:1.6;color:var(--on-navy);margin-top:9px}
.aiv__b{align-self:flex-start;margin-top:4px}

/* ---- the diff's produced stage: a real frame, playable ---- */
.dst--good.vid{cursor:pointer;background:var(--navy)}
.dp__stage .vid:hover{transform:none;box-shadow:none;border-color:transparent}
.dst__frame--real{aspect-ratio:16/9;background:var(--navy)}
.dst__frame--real .vid__play{width:46px;height:46px;z-index:2}
/* the concept card sits low-left, clear of the presenter's face and of the
   Board Infinity mark in the top-right of the real frame */
.dst__frame--real .dst__gfx{left:9px;bottom:9px;top:auto;right:auto;width:58%;z-index:3;
  padding:8px 10px;background:rgba(0,23,61,.9);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(3px);box-shadow:none}
.dst__frame--real .dst__gfx b{color:#fff;font-size:10px}
.dst__frame--real .dst__gfx em{color:#8FC6FF;border-top-color:rgba(255,255,255,.22);font-size:9px}
.dst__frame--real .dst__cc{left:9px;top:9px;right:auto;bottom:auto;z-index:3}
.dp__ill--real{color:var(--blue-txt)!important;background:var(--brand-0)!important;
  border-color:var(--brand-2)!important}

@media(max-width:980px){
  .sec--aiv{padding:76px 0}
  .aiv{grid-template-columns:1fr;gap:34px}
  .aiv__cs{grid-template-columns:1fr;margin-top:36px}
  .spx{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spx__h{grid-template-columns:1fr;align-items:start}
  .spx__h h2{max-width:none}
}
@media(max-width:720px){
  .spx{grid-template-columns:1fr}
  .spx__t{padding-right:0}
  .spx__ic{position:static;margin-bottom:14px}
  .spx__s{display:block;width:fit-content}
  .aiv-head{margin-bottom:36px}
  .aiv__flow{gap:22px}
  .aiv__s{gap:14px}
  .aiv__flow::before{left:15px}
  .aiv__n{width:32px;height:32px}
  .aiv__b{width:100%;justify-content:center}
}

/* ---- component library, rebuilt (.cmps) ------------------------------------
   Was a tab rail beside a panel that sat two-thirds empty. All four pieces are
   now on screen at once, each above its own preview. The video preview is a real
   produced frame rather than a photograph of a camera. */
.cmps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.cmp{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-2);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm);
  transition:transform .18s,box-shadow .18s,border-color .18s}
.cmp:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--brand-2)}
.cmp__pv{position:relative;aspect-ratio:16/8.2;overflow:hidden;background:var(--brand-0);
  border-bottom:1px solid var(--line-2);display:grid;place-items:center;padding:20px}
.cmp__pv>div{width:100%;max-height:100%}
.cmp__pv--shot{padding:0;background:var(--navy)}
.cmp__pv--shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-height:none}
.cmp__pv--shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,23,61,0) 52%,rgba(0,23,61,.42) 100%)}
.cmp__l3{position:absolute;left:14px;bottom:14px;z-index:2;width:auto;background:rgba(0,23,61,.78);
  border-left:3px solid var(--blue);border-radius:0 7px 7px 0;padding:7px 11px}
.cmp__l3 b{display:block;font-size:11.5px;font-weight:800;color:#fff}
.cmp__l3 span{display:block;font-size:10px;color:var(--on-navy)}
.cmp__gfx{position:absolute;left:14px;top:14px;z-index:2;width:46%;padding:10px 12px;
  background:rgba(0,23,61,.88);border:1px solid rgba(255,255,255,.2);border-radius:9px}
.cmp__gfx b{display:block;font-size:12px;font-weight:800;color:#fff;line-height:1.25}
.cmp__gfx em{display:block;font-style:normal;font-size:11px;font-weight:700;color:#8FC6FF;
  margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.22)}
.cmp__cc{position:absolute;right:14px;bottom:14px;z-index:2;font-size:9px;font-weight:900;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(0,117,235,.9);
  border-radius:5px;padding:4px 8px}
.cmp__b{padding:22px 24px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.cmp__tag{display:inline-flex;align-items:center;gap:7px;width:fit-content;font-size:10.5px;
  font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-txt);
  background:var(--brand-0);border:1px solid var(--brand-2);border-radius:var(--r-pill);
  padding:5px 11px}
.cmp__b b{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--navy);line-height:1.25}
.cmp__b p{font-size:14px;line-height:1.6;color:var(--text-2);margin:0}
/* the borrowed preview mock-ups need to sit tighter inside a card */
.cmp__pv .tmpl__eq{padding:20px;width:100%}
.cmp__pv .tmpl__eq>b{font-size:16px}
.cmp__pv .tmpl__tabs,.cmp__pv .tmpl__q{width:100%}
@media(max-width:860px){
  .cmps{grid-template-columns:1fr}
}

/* ==========================================================================
   v6 - single-frame hero (.hf) + per-page accent themes (.thm--*)
   --------------------------------------------------------------------------
   The client supplied one 1672x941 artwork per page, each composed with its
   subject in the right ~55% and a tinted blank left side for the copy. So the
   hero is now ONE frame: the artwork at width:100% (never cropped, never a
   background-image) with the headline block absolutely positioned over the
   blank side. Everything in that block is sized in `em` off a single clamped
   container font-size, so the copy scales with the frame rather than spilling
   out of it at intermediate widths.
   ========================================================================== */

.hf{position:relative;background:var(--paper)}
.hf__frame{position:relative;width:100%;line-height:0}
.hf__im{display:block;width:100%;height:auto}
.hf__over{position:absolute;inset:0;display:flex;align-items:center;line-height:1.5}
.hf__wrap{width:100%}
.hf__t{max-width:46%;font-size:clamp(10px,1.06vw,17.5px)}
.hf__t .crumbs{margin:0 0 1.5em;font-size:.78em}
.hf__eb{margin:0 0 1em;font-size:.72em;font-weight:900;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue-txt)}
.hf__t h1{font-size:2.95em;line-height:1.06;letter-spacing:-.03em;margin:0;color:var(--navy)}
.hf__lede{margin:1.15em 0 0;font-size:1.06em;line-height:1.6;color:var(--text-2);
  max-width:30em;text-wrap:pretty}
.hf__ctas{display:flex;flex-wrap:wrap;gap:.7em;margin-top:1.7em}
.hf__ctas .btn{font-size:.86em}
.hf__sts{display:flex;gap:2.2em;margin-top:2em;padding-top:1.5em;
  border-top:1px solid var(--brand-2)}
.hf__st b{display:block;font-size:1.85em;font-weight:900;letter-spacing:-.03em;
  color:var(--navy);line-height:1;font-variant-numeric:tabular-nums}
.hf__st span{display:block;font-size:.76em;color:var(--text-2);margin-top:.45em}
.hf__cap{display:flex;align-items:center;gap:9px;justify-content:flex-end;
  margin:0;padding:13px var(--pad) 15px;font-size:12.5px;color:var(--text-2);
  max-width:var(--max);margin-inline:auto}
.hf__cap i{width:7px;height:7px;border-radius:50%;background:var(--ok-6);flex:none}

/* the copy no longer fits inside the frame - crop the artwork to its subject and
   put the copy underneath */
@media(max-width:900px){
  .hf__frame{aspect-ratio:16/10}
  .hf__im{height:100%;object-fit:cover;object-position:78% center}
  .hf__over{position:static;display:block}
  .hf__wrap{padding-top:32px;padding-bottom:8px}
  .hf__t{max-width:none;font-size:16px}
  .hf__t h1{font-size:clamp(30px,7.4vw,42px)}
  .hf__cap{justify-content:flex-start}
}
@media(max-width:560px){
  .hf__frame{aspect-ratio:4/3}
  .hf__sts{gap:1.4em}
  .hf__ctas .btn{width:100%;justify-content:center}
}

/* ---- per-page accent themes -----------------------------------------------
   Each page carries `thm--<key>` on <body>. Only the DECORATIVE tokens are
   remapped: --blue / --blue-txt / --blue-hov / --blue-deep and the four brand
   tints, plus the --acc* aliases the hero uses. --navy, --canvas, the footer and
   the wordmark are deliberately untouched, so every page still reads as Board
   Infinity while its accents differ.

   Families are the approved decorative rotation only - brand, accent 2
   (violet) and accent 1 (terracotta) - at the exact ramp steps from the palette
   PDF. Step 6 of any ramp is a FILL, never text: every --*-txt value below is a
   step measured at or above 4.5:1 on white. */
:root{
  --grad-end:#06C170;  /* the approved homepage blue-to-green display gradient */
  --glow2:127,86,217;  /* second hero-band glow, as an r,g,b triplet */
}
/* universities - accent 2 (violet), the periwinkle artwork */
body.thm--uni{
  --blue:#7F56D9; --blue-txt:#6941C6; --blue-hov:#9E77ED; --blue-deep:#53389E;
  --brand-0:#F9F5FF; --brand-1:#F4EBFF; --brand-2:#E9D7FE; --brand-3:#D6BBFB;
  --brand-4:#B692F6; --brand-5:#9E77ED; --brand-6:#7F56D9; --brand-7:#6941C6;
  --brand-8:#53389E; --grad-end:#B692F6; --glow2:105,65,198;
}
/* EdTech - accent 1 (terracotta), the peach artwork */
body.thm--edtech{
  --blue:#F46C40; --blue-txt:#A8351B; --blue-hov:#FF956B; --blue-deep:#A8351B;
  --brand-0:#FFF9F5; --brand-1:#FFF6F0; --brand-2:#FFEFE6; --brand-3:#FFD4BD;
  --brand-4:#FFB694; --brand-5:#FF956B; --brand-6:#F46C40; --brand-7:#CF4F2B;
  --brand-8:#A8351B; --grad-end:#FFB694; --glow2:244,108,64;
}

/* Corporate L&D - the sage-green artwork. NOTE: this is the Success ramp, which
   the palette PDF reserves for confirmed-success meaning only. It is used here
   because the client supplied a green hero and asked every page to follow its
   artwork. Text steps are 8/9 (#048950 / #036A3E); step 6 #06C170 is 2.4:1 on
   white and is only ever a fill here. Swap this whole block for the brand-9
   indigo set if design wants the semantic rule kept. */
body.thm--corp{
  --blue:#06C170; --blue-txt:#036A3E; --blue-hov:#38CD8D; --blue-deep:#036A3E;
  --brand-0:#F7FDFA; --brand-1:#E6F9F1; --brand-2:#B2ECD3; --brand-3:#8CE2BD;
  --brand-4:#58D59F; --brand-5:#38CD8D; --brand-6:#06C170; --brand-7:#05B066;
  --brand-8:#048950; --grad-end:#58D59F; --glow2:6,193,112;
}
/* Creators - accent 2 (violet), the orchid artwork. Same family as universities,
   because both supplied artworks are purple; centred a step lighter so the two
   pages are not identical. */
body.thm--creator{
  --blue:#9E77ED; --blue-txt:#6941C6; --blue-hov:#B692F6; --blue-deep:#53389E;
  --brand-0:#F9F5FF; --brand-1:#F4EBFF; --brand-2:#E9D7FE; --brand-3:#D6BBFB;
  --brand-4:#C4A7FA; --brand-5:#B692F6; --brand-6:#9E77ED; --brand-7:#7F56D9;
  --brand-8:#6941C6; --grad-end:#D6BBFB; --glow2:158,119,237;
}