/*
Theme Name: DNI Institute
Theme URI: https://definingnarratives.org
Author: We The Revolt, Inc.
Author URI: https://wetherevolt.com
Description: The whole Defining Narratives platform in one upload. Twelve templates covering the public site, four sign-up paths, signable forms, the participant account, the parent and guardian page and the officer caseload. The DNI Core plugin, referrals, consent, an append-only hours ledger, notification routing and reporting, is bundled and installs itself on activation.
Version: 6.4.0
Requires at least: 6.2
Requires PHP: 8.0
License: Proprietary
Text Domain: dni
*/

/* ==========================================================================
   Defining Narratives Institute, core stylesheet
   We The Revolt, Inc.
   Palette: Ink / Lime / Violet / Amber / Paper
   Display: Archivo (variable width + weight)   Body: Inter
   ========================================================================== */

:root{
  --ink:#07090A;
  --ink-2:#0B0F10;
  --panel:#11171A;
  --panel-2:#161E21;
  --hair:rgba(255,255,255,.10);
  --hair-strong:rgba(255,255,255,.20);

  --lime:#C1FF72;
  --violet:#8B6BFF;
  --amber:#FFB03A;
  --paper:#F4F6F2;
  --paper-2:#E7EBE4;

  --fg:#EDF1EC;
  --mut:#8E9A94;
  --ink-fg:#0A0D0E;
  --ink-mut:#5B6663;

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;

  --maxw:1240px;
  --gut:clamp(20px,5vw,48px);
  --r:18px;
  --r-sm:12px;

  --shell:0 30px 80px -40px rgba(0,0,0,.9);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink);color:var(--fg);
  font-family:var(--body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.03em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}

/* film grain, keeps the black from reading as flat CSS black ------------- */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ============================================================ PRIMITIVES */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.sec{padding:clamp(64px,7.6vw,108px) 0;position:relative}
.sec--tight{padding:clamp(46px,5vw,72px) 0}
.paper{background:var(--paper);color:var(--ink-fg)}
.paper h1,.paper h2,.paper h3{color:var(--ink-fg)}
.panel-bg{background:var(--ink-2)}

.eyebrow{
  font-family:var(--display);font-variation-settings:"wdth" 122;
  font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--lime);margin:0 0 18px;display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.paper .eyebrow{color:#2F6B12}

h1,.h1{font-size:clamp(42px,7.4vw,92px);font-variation-settings:"wdth" 88;letter-spacing:-.035em}
h2,.h2{font-size:clamp(30px,4.6vw,58px);font-variation-settings:"wdth" 92}
h3,.h3{font-size:clamp(19px,2vw,24px);letter-spacing:-.02em}
.lede{font-size:clamp(16.5px,1.5vw,19px);color:var(--mut);max-width:60ch}
.paper .lede{color:#4A544F}
.tiny{font-size:12.5px;letter-spacing:.02em;color:var(--mut)}

.label{
  font-family:var(--display);font-variation-settings:"wdth" 118;
  font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);
}

/* buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:.01em;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),background .18s,color .18s,border-color .18s;
  text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--lime{background:var(--lime);color:var(--ink)}
.btn--lime:hover{background:#D3FF95}
.btn--ghost{border-color:var(--hair-strong);color:var(--fg);background:rgba(255,255,255,.02)}
.btn--ghost:hover{border-color:var(--lime);color:var(--lime)}
.paper .btn--ghost{border-color:rgba(0,0,0,.22);color:var(--ink-fg)}
.paper .btn--ghost:hover{border-color:var(--ink-fg);background:rgba(0,0,0,.04)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#1A2124}
.btn--block{width:100%}
.btns{display:flex;flex-wrap:wrap;gap:12px}

.arrow{display:inline-block;transition:transform .2s}
a:hover .arrow,.btn:hover .arrow{transform:translateX(4px)}

/* ============================================================ SKIP LINK */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--lime);color:var(--ink);padding:12px 18px;font-weight:700}
.skip:focus{left:12px;top:12px}

/* ============================================================ HEADER */
.hdr{position:sticky;top:0;z-index:120;background:rgba(7,9,10,.72);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--hair)}
.hdr-in{display:flex;align-items:center;gap:clamp(16px,3vw,40px);height:74px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;min-height:54px}
.brand-logo{height:clamp(40px,7.4vw,var(--logo-h,54px));width:auto;display:block}
.brand img{height:30px;width:auto}
.brand-txt{font-family:var(--display);font-variation-settings:"wdth" 110;font-weight:800;font-size:12.5px;letter-spacing:.14em;line-height:1.15;text-transform:uppercase}
.brand-txt span{display:block;color:var(--mut);font-weight:600;letter-spacing:.2em;font-size:9.5px}
.hdr-menu{display:flex;align-items:center;gap:clamp(18px,3vw,40px);margin-left:auto}
.nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:500}
.nav a{color:#C9D2CC;position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--lime);transition:right .25s ease}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]{color:#fff}
.hdr-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.hdr-cta .btn{padding:11px 20px;font-size:13.5px}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--hair);border-radius:10px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
.burger span{display:block;width:18px;height:1.5px;background:#fff;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:#fff;transition:.2s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.is-open .burger span{background:transparent}
.is-open .burger span::before{top:0;transform:rotate(45deg)}
.is-open .burger span::after{top:0;transform:rotate(-45deg)}
@media(max-width:1020px){
  .hdr-menu{display:none}
  .burger{display:flex}
  .is-open .hdr-menu{
    display:flex;position:fixed;left:0;right:0;top:74px;bottom:0;z-index:119;
    flex-direction:column;align-items:stretch;gap:0;background:var(--ink-2);
    padding:10px var(--gut) 40px;overflow-y:auto;
  }
  .is-open .nav{flex-direction:column;align-items:stretch;gap:0}
  .is-open .nav a{padding:17px 0;border-bottom:1px solid var(--hair);font-size:17px}
  .is-open .nav a::after{display:none}
  .is-open .hdr-cta{flex-direction:column;align-items:stretch;margin-top:24px}
  .is-open .hdr-cta .btn{padding:16px 20px;font-size:15.5px}
}

/* ============================================================ HERO */
.hero{position:relative;min-height:min(86vh,820px);display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--hair)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:60% 35%;filter:grayscale(.85) contrast(1.08) brightness(.72)}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,var(--ink) 12%,rgba(7,9,10,.86) 42%,rgba(7,9,10,.30) 74%,rgba(7,9,10,.66) 100%),
    radial-gradient(120% 80% at 8% 100%,rgba(193,255,114,.14),transparent 60%);
}
.hero-in{position:relative;z-index:2;padding:clamp(88px,12vw,132px) 0 0}
.hero h1{max-width:14ch;margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--lime)}
.hero p{max-width:44ch;font-size:clamp(16px,1.7vw,19.5px);color:#C3CCC6}
.hero .btns{margin-top:32px}
.hero-foot{
  position:relative;z-index:2;margin-top:clamp(40px,5.6vw,68px);
  border-top:1px solid var(--hair);padding:20px 0 26px;
  display:flex;flex-wrap:wrap;gap:22px 44px;align-items:center;
}
.hero-foot dl{display:flex;flex-direction:column;gap:2px;margin:0}
.hero-foot dt{font-family:var(--display);font-variation-settings:"wdth" 118;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);font-weight:700}
.hero-foot dd{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(17px,2vw,22px);letter-spacing:-.02em}

/* the 23-week rail, signature device ------------------------------------ */
.rail{display:flex;align-items:flex-end;gap:3px;height:34px;width:100%}
.rail i{flex:1;border-radius:2px;background:var(--hair-strong);transform-origin:bottom;animation:railUp .5s cubic-bezier(.2,.8,.3,1) both}
.rail i[data-ph="1"]{background:#7FA84A;height:48%}
.rail i[data-ph="2"]{background:#9BD25A;height:58%}
.rail i[data-ph="3"]{background:var(--lime);height:68%}
.rail i[data-ph="4"]{background:#A9A0FF;height:78%}
.rail i[data-ph="5"]{background:var(--violet);height:88%}
.rail i[data-ph="6"]{background:var(--amber);height:100%}
@keyframes railUp{from{transform:scaleY(.06);opacity:0}to{transform:scaleY(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.rail i{animation:none}}
.rail-legend{display:flex;justify-content:space-between;margin-top:10px;font-size:11px;color:var(--mut);letter-spacing:.06em}

/* ============================================================ REVEAL */
.no-js .rv,.rv.in{opacity:1;transform:none}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ============================================================ GRIDS */
.grid{display:grid;gap:clamp(14px,1.6vw,22px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:940px){.g3,.g4{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:minmax(0,1fr)}}
/* Grid items default to a min-content floor, which lets a wide input push a
   column past the viewport. Nothing in this layout should ever do that. */
.grid > *,.split > *,.doors > *,.tracks > *{min-width:0}
.form input,.form select,.form textarea,.field input,.field select{min-width:0}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.sec-head{max-width:720px;margin-bottom:clamp(30px,3.4vw,48px)}
.sec-head .lede{margin-top:16px}

/* ============================================================ DOORS */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:860px){.doors{grid-template-columns:1fr}}
.door{
  position:relative;overflow:hidden;border-radius:var(--r);min-height:clamp(360px,42vw,480px);
  display:flex;flex-direction:column;justify-content:flex-end;padding:28px;isolation:isolate;
  border:1px solid var(--hair);
}
.door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(1) brightness(.6);transition:transform .8s cubic-bezier(.2,.7,.3,1),filter .5s}
.door::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,9,10,.15) 0%,rgba(7,9,10,.72) 52%,rgba(7,9,10,.95) 100%)}
.door:hover img{transform:scale(1.06);filter:grayscale(.55) brightness(.66)}
.door-idx{font-family:var(--display);font-variation-settings:"wdth" 118;font-size:11px;letter-spacing:.24em;font-weight:700;color:var(--lime);margin-bottom:auto}
.door h3{font-size:clamp(22px,2.4vw,29px);margin-bottom:10px}
.door p{font-size:14.5px;color:#B6C0BA;margin-bottom:16px}
.door ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.door li{font-size:11.5px;letter-spacing:.04em;padding:6px 11px;border-radius:999px;border:1px solid var(--hair-strong);color:#D6DED8}
.door--violet .door-idx{color:var(--violet)}
.door--amber .door-idx{color:var(--amber)}

/* ============================================================ CARDS */
.card{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);padding:clamp(22px,2.4vw,30px);position:relative}
.paper .card{background:#fff;border-color:rgba(0,0,0,.08);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card h3{margin-bottom:10px}
.card p{font-size:14.8px;color:var(--mut);margin:0}
.paper .card p{color:#4A544F}
.card--link{transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s,background .2s;display:block}
.card--link:hover{transform:translateY(-4px);border-color:var(--hair-strong);background:var(--panel-2)}
.paper .card--link:hover{border-color:rgba(0,0,0,.2);background:#fff;box-shadow:0 18px 40px -24px rgba(0,0,0,.4)}
.card-k{font-family:var(--display);font-variation-settings:"wdth" 118;font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--lime);margin-bottom:14px;display:block}
.paper .card-k{color:#2F6B12}

.stat{display:flex;flex-direction:column;gap:6px}
.stat b{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 88;font-size:clamp(38px,5vw,62px);line-height:.92;letter-spacing:-.04em;color:var(--lime)}
.stat span{font-size:13.5px;color:var(--mut);max-width:26ch}

/* ============================================================ COURSES */
.course{
  display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;
  background:var(--panel);border:1px solid var(--hair);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s;
}
.course:hover{transform:translateY(-5px);border-color:var(--hair-strong)}
.course-fig{position:relative;aspect-ratio:1/1;overflow:hidden;background:#0D1112}
.course-fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.course:hover .course-fig img{transform:scale(1.05)}
.course-tag{position:absolute;top:14px;left:14px;font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:rgba(7,9,10,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--hair-strong)}
.course-tag--live{color:var(--lime);border-color:rgba(193,255,114,.45)}
.course-tag--soon{color:var(--amber);border-color:rgba(255,176,58,.45)}
.course-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.course-body h3{font-size:19px}
.course-body p{font-size:14px;color:var(--mut);margin:0;flex:1}
.course-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--mut);border-top:1px solid var(--hair);padding-top:14px;margin-top:4px}
.course-meta b{color:var(--fg);font-weight:600}
.course-fig--placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#12191B,#0B0F10)}
.course-fig--placeholder > span:first-child{font-family:var(--display);font-weight:800;font-size:64px;line-height:1;color:rgba(255,255,255,.10)}

/* filter chips */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px}
.chip{
  padding:10px 18px;border-radius:999px;border:1px solid var(--hair);background:transparent;
  font-size:13.5px;font-weight:500;cursor:pointer;color:var(--mut);transition:.18s;
}
.chip:hover{color:var(--fg);border-color:var(--hair-strong)}
.chip[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--ink);font-weight:600}

/* ============================================================ WEEK RAIL (interactive) */
.weeks{border:1px solid var(--hair);border-radius:var(--r);background:var(--panel);overflow:hidden}
.weeks-track{display:grid;grid-template-columns:repeat(23,1fr);gap:2px;padding:16px;background:var(--ink-2)}
.wk{
  appearance:none;border:0;cursor:pointer;padding:0;border-radius:3px;height:56px;
  background:rgba(255,255,255,.12);position:relative;transition:.18s;
  display:flex;align-items:flex-end;justify-content:center;
}
.wk::before{content:attr(data-n);font-family:var(--display);font-size:9px;font-weight:700;color:rgba(255,255,255,.45);padding-bottom:5px}
.wk:hover{background:rgba(255,255,255,.26)}
.wk[data-ph="1"]{background:rgba(193,255,114,.18)}
.wk[data-ph="2"]{background:rgba(193,255,114,.30)}
.wk[data-ph="3"]{background:rgba(193,255,114,.46)}
.wk[data-ph="4"]{background:rgba(139,107,255,.30)}
.wk[data-ph="5"]{background:rgba(139,107,255,.50)}
.wk[data-ph="6"]{background:rgba(255,176,58,.40)}
.wk[aria-selected="true"]{background:var(--lime)}
.wk[aria-selected="true"]::before{color:var(--ink)}
.wk[data-ph="4"][aria-selected="true"],.wk[data-ph="5"][aria-selected="true"]{background:var(--violet)}
.wk[data-ph="6"][aria-selected="true"]{background:var(--amber)}
.weeks-panel{padding:clamp(22px,3vw,34px)}
.weeks-panel .label{display:block;margin-bottom:12px;color:var(--lime)}
.weeks-panel h3{font-size:clamp(21px,2.4vw,30px);margin-bottom:12px}
.weeks-panel p{color:var(--mut);max-width:62ch;margin:0}
@media(max-width:760px){
  .weeks-track{grid-template-columns:repeat(12,1fr)}
  .wk{height:44px}
}

/* phase list */
.phase{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--hair)}
.paper .phase{border-color:rgba(0,0,0,.10)}
.phase:last-child{border-bottom:1px solid var(--hair)}
.paper .phase:last-child{border-color:rgba(0,0,0,.10)}
.phase-n{font-family:var(--display);font-weight:800;font-size:26px;color:var(--lime);line-height:1}
.paper .phase-n{color:#3A8A1B}
.phase h3{font-size:18px;margin-bottom:6px}
.phase p{font-size:14px;color:var(--mut);margin:0}
.paper .phase p{color:#4A544F}
@media(max-width:560px){.phase{grid-template-columns:1fr;gap:8px}}

/* ============================================================ PROCESS TIMELINE */
.flow{position:relative;display:grid;gap:0}
.flow-step{display:grid;grid-template-columns:88px 1fr;gap:clamp(16px,3vw,34px);padding:26px 0;border-top:1px solid var(--hair);align-items:start}
.paper .flow-step{border-color:rgba(0,0,0,.1)}
.flow-step:last-child{border-bottom:1px solid var(--hair)}
.paper .flow-step:last-child{border-color:rgba(0,0,0,.1)}
.flow-n{font-family:var(--display);font-variation-settings:"wdth" 88;font-weight:800;font-size:clamp(30px,4vw,46px);line-height:.9;color:rgba(255,255,255,.42);letter-spacing:-.04em}
.paper .flow-n{color:rgba(0,0,0,.42)}
.flow-step h3{font-size:clamp(18px,2vw,22px);margin-bottom:8px}
.flow-step p{font-size:14.8px;color:var(--mut);margin:0;max-width:64ch}
.paper .flow-step p{color:#4A544F}
.flow-step b.sla{color:var(--lime);font-weight:600}
.paper .flow-step b.sla{color:#2F6B12}
@media(max-width:560px){.flow-step{grid-template-columns:1fr;gap:6px}}

/* ============================================================ QUOTE / BANNER */
.band{border-block:1px solid var(--hair);background:linear-gradient(90deg,rgba(193,255,114,.07),transparent 60%);padding:clamp(30px,4vw,46px) 0}
.band p{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 92;font-size:clamp(20px,2.8vw,34px);letter-spacing:-.02em;max-width:26ch;margin:0}
.band .lime{color:var(--lime)}

.feature{position:relative;border-radius:var(--r);overflow:hidden;min-height:clamp(300px,38vw,460px)}
.feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.7) brightness(.8)}

/* ============================================================ FAQ */
.faq{border-top:1px solid var(--hair)}
.paper .faq{border-color:rgba(0,0,0,.12)}
.faq-i{border-bottom:1px solid var(--hair)}
.paper .faq-i{border-color:rgba(0,0,0,.12)}
.faq-q{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;
  padding:24px 46px 24px 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:clamp(16px,1.7vw,19px);letter-spacing:-.01em;
}
.faq-q::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;margin-top:-6px;
  background:
    linear-gradient(currentColor,currentColor) center/13px 1.6px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.6px 13px no-repeat;
  color:var(--lime);transition:transform .25s}
.paper .faq-q::after{color:#3A8A1B}
.faq-i.open .faq-q::after{transform:rotate(45deg)}
.faq-a{display:none;padding:0 46px 26px 0;color:var(--mut);font-size:15.2px;max-width:78ch}
.paper .faq-a{color:#4A544F}
.faq-i.open .faq-a{display:block;animation:fade .3s ease both}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ============================================================ FORMS */
.form{display:grid;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field > label{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.field input,.field select,.field textarea{
  background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--r-sm);
  padding:15px 16px;font-size:16px;color:var(--fg);width:100%;transition:border-color .18s,background .18s;
}
.paper .field input,.paper .field select,.paper .field textarea{background:#fff;border-color:rgba(0,0,0,.16);color:var(--ink-fg)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--lime);background:#0E1416}
.paper .field input:focus,.paper .field select:focus,.paper .field textarea:focus{background:#fff}
.field textarea{min-height:150px;resize:vertical;font-family:var(--body)}
.field .hint{font-size:12.5px;color:var(--mut);margin:0}
.field.err input,.field.err select{border-color:#FF6B6B}
.err-msg{display:none;font-size:12.5px;color:#FF8080}
.field.err .err-msg{display:block}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:620px){.row2{grid-template-columns:1fr}}

.opt{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--hair);border-radius:var(--r-sm);cursor:pointer;transition:.18s;background:var(--ink-2)}
.opt:hover{border-color:var(--hair-strong)}
.opt input{margin-top:3px;accent-color:var(--lime);width:18px;height:18px;flex-shrink:0}
.opt span{font-size:14.5px}
.opt small{display:block;color:var(--mut);font-size:12.8px;margin-top:3px}
.opt:has(input:checked){border-color:var(--lime);background:rgba(193,255,114,.06)}

/* claim-code input */
.code-in{display:flex;gap:8px;justify-content:flex-start;flex-wrap:wrap}
.code-in input{
  width:56px;height:66px;text-align:center;font-family:var(--display);font-weight:800;font-size:26px;
  background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--r-sm);text-transform:uppercase;
}
.code-in input:focus{outline:none;border-color:var(--lime);background:#0E1416}
@media(max-width:520px){.code-in input{width:44px;height:56px;font-size:21px}}

/* stepper */
.steps{display:flex;gap:4px;margin-bottom:34px}
.steps div{flex:1;height:4px;border-radius:2px;background:var(--hair);position:relative}
.steps div.done{background:var(--lime)}
.steps-lbl{display:flex;justify-content:space-between;margin-top:12px;font-size:11.5px;color:var(--mut);letter-spacing:.12em;text-transform:uppercase;font-family:var(--display);font-weight:700}

/* ============================================================ HELP CENTER */
.search{position:relative;max-width:620px}
.search input{width:100%;padding:19px 22px 19px 54px;border-radius:999px;background:var(--panel);border:1px solid var(--hair);font-size:16px}
.search input:focus{outline:none;border-color:var(--lime)}
.search svg{position:absolute;left:20px;top:50%;transform:translateY(-50%);opacity:.5}
.help-cat{display:flex;gap:14px;align-items:flex-start}
.help-cat .dot{width:9px;height:9px;border-radius:50%;background:var(--lime);margin-top:8px;flex-shrink:0}
.no-res{display:none;padding:30px 0;color:var(--mut)}
.no-res.show{display:block}

/* ============================================================ CONTACT ROWS */
.kv{display:grid;grid-template-columns:110px 1fr;gap:10px 20px;font-size:15px}
.kv dt{font-family:var(--display);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);font-weight:700;padding-top:4px}
.kv dd{margin:0}
.kv a:hover{color:var(--lime)}

/* ============================================================ CTA */
.cta{position:relative;overflow:hidden;border-radius:var(--r);padding:clamp(38px,6vw,76px);background:linear-gradient(135deg,#12191B,#0A0E0F);border:1px solid var(--hair)}
.cta::before{content:"";position:absolute;top:-40%;right:-10%;width:60%;height:180%;background:radial-gradient(circle,rgba(193,255,114,.16),transparent 62%);pointer-events:none}
.cta h2{max-width:16ch;margin-bottom:18px;position:relative}
.cta p{max-width:52ch;color:var(--mut);position:relative}
.cta .btns{margin-top:30px;position:relative}

/* ============================================================ FOOTER */
.ftr{border-top:1px solid var(--hair);background:var(--ink-2);padding:clamp(52px,6vw,80px) 0 34px;margin-top:0}
.ftr-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(26px,4vw,48px)}
@media(max-width:900px){.ftr-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr-top{grid-template-columns:1fr}}
.ftr h4{font-family:var(--display);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);font-weight:700;margin-bottom:16px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:14.2px}
.ftr ul a{color:#BAC4BE}
.ftr ul a:hover{color:var(--lime)}
.ftr-brand p{font-size:14px;color:var(--mut);max-width:34ch;margin-top:16px}
.ftr-wtr{margin-top:22px;height:26px;width:auto;opacity:.9}
.ftr-legal{margin-top:clamp(38px,5vw,58px);padding-top:26px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between;font-size:12.4px;color:var(--mut)}
.ftr-legal p{margin:0;max-width:70ch}

/* ============================================================ MISC */
.hr{height:1px;background:var(--hair);border:0;margin:0}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--hair-strong);font-size:12px;letter-spacing:.06em;color:var(--mut)}
.pill b{color:var(--lime);font-weight:600}
.note{border-left:2px solid var(--lime);padding:4px 0 4px 18px;color:var(--mut);font-size:14.5px;max-width:70ch}
.paper .note{border-color:#3A8A1B;color:#4A544F}
.accent{color:var(--lime)}
.paper .accent{color:#2F6B12}
.card--primary{border-color:rgba(193,255,114,.55);background:linear-gradient(160deg,rgba(193,255,114,.10),transparent 60%)}
.card--primary:hover{border-color:var(--lime)}
.center{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.hide{display:none !important}


/* ============================================================ CHOICE ACCORDION */
.choice{border:1px solid var(--hair);border-radius:var(--r);background:var(--panel);overflow:hidden;transition:border-color .2s,background .2s}
.choice + .choice{margin-top:12px}
.choice[open]{border-color:rgba(193,255,114,.45);background:var(--panel-2)}
.choice > summary{
  list-style:none;cursor:pointer;padding:clamp(20px,2.4vw,26px) clamp(20px,2.4vw,30px);
  display:flex;align-items:center;gap:18px;
  font-family:var(--display);font-weight:700;font-size:clamp(17px,1.9vw,21px);letter-spacing:-.015em;
}
.choice > summary::-webkit-details-marker{display:none}
.choice > summary::marker{content:""}
.choice > summary:hover{color:var(--lime)}
.choice-idx{
  font-family:var(--display);font-variation-settings:"wdth" 118;font-size:11px;font-weight:700;
  letter-spacing:.2em;color:var(--lime);flex-shrink:0;width:34px;
}
.choice-arw{margin-left:auto;flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid var(--hair-strong);
  display:flex;align-items:center;justify-content:center;transition:transform .25s,border-color .2s}
.choice-arw::before{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.choice[open] .choice-arw{transform:rotate(180deg);border-color:var(--lime);color:var(--lime)}
.choice-body{padding:0 clamp(20px,2.4vw,30px) clamp(24px,2.6vw,30px) clamp(54px,5vw,64px);color:var(--mut);font-size:15px;max-width:74ch}
.choice-body p{margin-bottom:14px}
.choice-body ul{margin:0 0 18px;padding-left:18px;display:grid;gap:7px}
.choice-body strong{color:var(--fg);font-weight:600}
@media(max-width:620px){.choice-body{padding-left:clamp(20px,2.4vw,30px)}}

/* ============================================================ TRACK CARDS */
.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:34px}
@media(max-width:1000px){.tracks{grid-template-columns:1fr;max-width:640px}}
.track{
  position:relative;border:1px solid var(--hair);border-radius:var(--r);
  background:linear-gradient(165deg,var(--panel-2),var(--ink-2) 70%);
  padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;
  transition:border-color .2s,transform .2s cubic-bezier(.2,.7,.3,1);
}
.track:hover{transform:translateY(-4px);border-color:var(--hair-strong)}
.track-chip{
  position:absolute;top:-13px;right:22px;padding:7px 13px;border-radius:9px;
  font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--lime);color:var(--ink);
}
.track-chip--violet{background:#A896FF;color:var(--ink)}
.track-chip--amber{background:var(--amber);color:var(--ink)}
.track h3{font-size:clamp(21px,2.2vw,26px);margin-bottom:10px;max-width:14ch}
.track > p{font-size:14.5px;color:var(--mut);margin-bottom:22px}
.track dl{display:grid;grid-template-columns:104px 1fr;gap:12px 16px;margin:0 0 22px;font-size:14.4px}
.track dt{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);padding-top:3px}
.track dd{margin:0;color:#D3DBD6}
.track .track-note{
  border:1px solid var(--hair);border-radius:var(--r-sm);padding:14px 16px;font-size:13.6px;color:var(--mut);
  background:rgba(255,255,255,.02);margin-bottom:22px;
}
.track .btn{margin-top:auto}
@media(max-width:520px){.track dl{grid-template-columns:1fr;gap:4px 0}.track dd{margin-bottom:8px}}

/* ============================================================ PORTAL */
.pbar{border-bottom:1px solid var(--hair);background:var(--ink-2)}
.pbar-in{display:flex;align-items:center;gap:16px;padding:18px 0}
.pbar .who{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:14px}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--lime);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:15px}
.pbar .who small{display:block;color:var(--mut);font-size:11.5px}
.demo-flag{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;
  border:1px dashed rgba(255,176,58,.5);color:var(--amber);font-size:12.5px;letter-spacing:.04em;width:fit-content}

.meter{height:10px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden}
.meter i{display:block;height:100%;background:var(--lime);border-radius:999px}
.minirail{display:flex;gap:2px;width:132px}
.minirail i{flex:1;height:9px;border-radius:1px;background:rgba(255,255,255,.13)}
.minirail i.done{background:var(--lime)}
.minirail i.now{background:#fff}

.prog{display:grid;grid-template-columns:repeat(23,1fr);gap:3px;margin:22px 0 0}
.prog i{height:34px;border-radius:3px;background:rgba(255,255,255,.10);position:relative}
.prog i.done{background:rgba(193,255,114,.55)}
.prog i.now{background:var(--lime);box-shadow:0 0 0 3px rgba(193,255,114,.18)}
@media(max-width:620px){.prog i{height:26px}}

.tbl-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--r);background:var(--panel)}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:820px}
.tbl th{text-align:left;font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mut);padding:18px 16px;border-bottom:1px solid var(--hair);white-space:nowrap}
.tbl td{padding:16px;border-bottom:1px solid var(--hair);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:rgba(255,255,255,.025)}
.tbl b{font-weight:600}
.tbl .mono{font-family:var(--display);font-variation-settings:"wdth" 100;letter-spacing:.06em;color:var(--mut);font-size:13px}
.tag{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:11.5px;
  letter-spacing:.04em;border:1px solid var(--hair-strong);white-space:nowrap}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tag--ok{color:var(--lime);border-color:rgba(193,255,114,.35)}
.tag--warn{color:var(--amber);border-color:rgba(255,176,58,.4)}
.tag--stop{color:#FF8080;border-color:rgba(255,128,128,.4)}
.tag--idle{color:var(--mut)}
.attn{border:1px solid rgba(255,176,58,.4);background:rgba(255,176,58,.06);border-radius:var(--r);padding:clamp(20px,2.4vw,28px)}
.attn h3{color:var(--amber);font-size:18px;margin-bottom:6px}
.lesson{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--hair)}
.lesson:last-child{border-bottom:0}
.lesson-ic{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.07);display:flex;align-items:center;
  justify-content:center;font-size:13px;flex-shrink:0;color:var(--mut)}
.lesson-ic.done{background:rgba(193,255,114,.16);color:var(--lime)}
.lesson b{display:block;font-weight:600;font-size:15px}
.lesson span{font-size:12.6px;color:var(--mut)}
.lesson .btn{margin-left:auto;padding:10px 18px;font-size:13px}


/* ============================================================ INLINE LINKS
   A link inside a block of text has to be identifiable without colour, so
   anything that is not a button or a card gets an underline. */
.lede a,.note a,.tiny a,.card p a,.faq-a a,.hint a,.ftr-legal a,
p a.accent,p a:not(.btn):not(.card--link):not(.brand){
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.lede a:hover,.note a:hover,.tiny a:hover,.card p a:hover,.faq-a a:hover{text-decoration-thickness:2px}


/* ============================================================================
   Home page: hero parallax and the audience router.

   The hero is the same photograph it always was. The parallax is depth on top
   of it, and it turns itself off on phones and for reduced motion, so what
   most people see is the strong still image the page was built around.
   ========================================================================== */

.hero--px{position:relative;isolation:isolate;overflow:hidden;overflow:clip}
.hero--px .hero-media{position:absolute;inset:-6% 0;z-index:0}
.hero-layer{position:absolute;inset:0;display:block;will-change:transform}
.hero-layer img{width:100%;height:100%;object-fit:cover;display:block}
.hero-layer:nth-child(2){opacity:.5;clip-path:polygon(0 20%,100% 0,100% 76%,0 100%)}
.hero-layer:nth-child(3){opacity:.72;clip-path:polygon(0 56%,100% 32%,100% 100%,0 100%)}
.hero--px .hero-in{position:relative;z-index:2}

/* five doors: officer, facility, school, parent, young person ---------------- */
.whos{display:grid;gap:12px;margin-top:28px}
@media(min-width:760px){.whos{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(min-width:1100px){
  .whos{grid-template-columns:repeat(3,1fr)}
  .whos > :first-child{grid-column:span 2}
}
.who{display:flex;flex-direction:column;gap:10px;padding:24px 22px 22px;
  border:1px solid var(--hair);border-radius:18px;background:rgba(255,255,255,.02);
  text-decoration:none;color:inherit;position:relative;overflow:hidden;
  transition:border-color .2s,background .2s,transform .2s;min-height:100%}
.who::after{content:"";position:absolute;inset:auto auto -40% -20%;width:60%;height:80%;
  background:radial-gradient(closest-side,rgba(193,255,114,.14),transparent);opacity:0;transition:opacity .3s}
.who:hover{border-color:rgba(193,255,114,.5);background:rgba(193,255,114,.04);transform:translateY(-2px)}
.who:hover::after{opacity:1}
.who-k{font-family:Archivo,sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--lime)}
.who-t{font-family:Archivo,sans-serif;font-size:clamp(20px,4.6vw,26px);letter-spacing:-.02em;line-height:1.15}
.who-d{font-size:15px;line-height:1.65;color:var(--mut);flex:1}
.who-go{display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  font-size:14px;font-weight:600;color:var(--fg)}
.who:hover .who-go .arrow{transform:translateX(4px)}
.who-go .arrow{transition:transform .2s}

@media (prefers-reduced-motion: reduce){
  .hero-layer{transform:none!important}
}
.no-js .hero-layer{transform:none!important}

/* ---------------------------------------------------------------- locations */
.locs{display:grid;gap:14px;margin-top:28px}
@media(min-width:820px){.locs{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(min-width:1180px){.locs{grid-template-columns:repeat(3,1fr)}}
.loc{display:flex;flex-direction:column;overflow:hidden;border-radius:18px;
  border:1px solid var(--hair);background:rgba(255,255,255,.02);transition:border-color .2s,transform .2s}
.loc:hover{border-color:rgba(193,255,114,.4);transform:translateY(-2px)}
.loc-fig{margin:0;aspect-ratio:16/10;overflow:hidden;background:#12181A}
.loc-fig img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.loc:hover .loc-fig img{transform:scale(1.04)}
.loc-body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.loc-city{font-family:Archivo,sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);margin:0}
.loc-body h3{font-family:Archivo,sans-serif;font-size:clamp(19px,3.4vw,23px);letter-spacing:-.02em;margin:0}
.loc-addr{font-size:14px;color:var(--fg);margin:0;font-variant-numeric:tabular-nums}
.loc-blurb{font-size:14.6px;line-height:1.62;color:var(--mut);margin:0;flex:1}
.loc .btn--sm{align-self:flex-start;margin-top:8px;padding:10px 18px;font-size:14px}
.loc--next{background:
  radial-gradient(120% 100% at 0% 0%, rgba(193,255,114,.10), transparent 62%),
  rgba(255,255,255,.02);
  border-style:dashed}
.loc--next .loc-body{justify-content:center;min-height:220px}

/* -------------------------------------------------------- header and spacing */
.hdr-in{gap:clamp(14px,3vw,32px);padding-block:clamp(12px,1.6vw,18px)}
.brand{gap:0}
.hdr-menu{gap:clamp(16px,2.6vw,36px)}
.nav{gap:clamp(16px,2vw,26px)}
.hdr-cta{display:flex;gap:10px;align-items:center}
.hdr .btn{padding:11px 20px;font-size:14px;white-space:nowrap}
@media(max-width:1080px){ .hdr .btn--ghost{display:none} }

/* powered by, in the hero and in the footer -------------------------------- */
.powered{display:inline-flex;align-items:center;gap:0;margin:0}
.powered img{height:clamp(28px,4.6vw,var(--logo-powered-h,36px));width:auto;opacity:1;display:block}
.hero-powered{margin-top:clamp(20px,3vw,28px)}
.hero-powered img{height:clamp(32px,5.2vw,var(--logo-hero-h,42px))}

/* decorative marks. Purely ornamental, hidden from assistive tech ----------- */
.deco{position:absolute;pointer-events:none;z-index:0;opacity:.5;background:none}
.deco img{background:none}
.deco img{display:block;width:100%;height:auto}
.deco--circles{width:clamp(180px,26vw,360px);right:-4%;top:-8%}
.deco--boxes{width:clamp(170px,24vw,320px);left:-5%;bottom:-10%;opacity:.35}
@media(max-width:760px){ .deco{opacity:.28} }
.sec,.band{position:relative}
.sec--faces,.page-head,#who,.sec--cta{overflow:hidden;overflow:clip}
.sec:has(> .deco),.band:has(> .deco){overflow:hidden;overflow:clip}
.sec > .wrap,.band > .wrap{position:relative;z-index:1}

/* designed by, the last line on the site ------------------------------------ */
.ftr-credit{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:18px;
  border-top:1px solid var(--hair);flex-wrap:wrap}
.ftr-credit a{display:inline-flex;align-items:center;opacity:.72;transition:opacity .2s}
.ftr-credit a:hover{opacity:1}
.ftr-credit img{height:26px;width:auto;display:block}

/* ---------------------------------------------------- the faces composition */
.sec--faces{overflow:hidden;overflow:clip}
.faces{display:grid;gap:12px}
@media(min-width:900px){
  .faces{grid-template-columns:1fr 1.15fr;grid-template-rows:auto auto;gap:16px;align-items:stretch}
  .face--tall{grid-row:span 2}
  .faces-txt{align-self:center;padding:8px 0 8px 6px}
}
@media(min-width:1180px){
  /* Three columns, every item placed explicitly.
     The two tiles that span both rows drop their aspect ratio here: a ratio
     plus a stretched height makes the browser derive the width from the
     height, which is what pushed them out past their own column. */
  .faces{grid-template-columns:.9fr 1.15fr .9fr;grid-template-rows:auto auto;align-items:stretch}
  .face--tall{grid-column:1;grid-row:1 / span 2}
  .faces-txt{grid-column:2;grid-row:1}
  .face--wide{grid-column:2;grid-row:2}
  .face--sq{grid-column:3;grid-row:1 / span 2}
  .face--tall,.face--sq{aspect-ratio:auto;height:100%;min-height:520px}
}
.face{position:relative;margin:0;border-radius:20px;overflow:hidden;overflow:clip;background:#12181A;min-height:220px}
.face img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.face:hover img{transform:scale(1.03)}
.face--tall{aspect-ratio:3/4}
.face--wide{aspect-ratio:16/9}
.face--sq{aspect-ratio:4/5}
.face figcaption{position:absolute;inset:auto 0 0;padding:20px 18px 16px;font-size:14.5px;line-height:1.45;
  background:linear-gradient(180deg,transparent,rgba(7,9,10,.9))}
.faces-txt h2{margin:10px 0 14px}
@media(max-width:899px){
  .face--tall{aspect-ratio:4/5}
  .face--sq{aspect-ratio:4/3}
}

/* two image strip under the locations */
.locs-strip{display:grid;gap:12px;margin-top:18px}
@media(min-width:820px){.locs-strip{grid-template-columns:1.2fr .8fr;gap:16px}}
.locs-strip figure{margin:0;border-radius:18px;overflow:hidden;overflow:clip;aspect-ratio:16/10;background:#12181A}
.locs-strip img{width:100%;height:100%;object-fit:cover;display:block}

/* ------------------------------------------------------------ audience pages */
.page-head{padding-top:clamp(52px,7vw,92px);overflow:hidden;overflow:clip}
.page-head h1{font-size:clamp(32px,8vw,62px);line-height:1.04;letter-spacing:-.035em;max-width:18ch;text-wrap:balance}
.page-fig{margin:0;border-radius:22px;overflow:hidden;overflow:clip;aspect-ratio:16/9;background:#12181A}
.page-fig img{width:100%;height:112%;object-fit:cover;display:block;will-change:transform}
.prose{max-width:66ch;font-size:17px;line-height:1.75}
.prose > * + *{margin-top:20px}
.prose h2{font-family:var(--display);font-size:clamp(22px,4.6vw,30px);letter-spacing:-.02em;
  line-height:1.2;margin-top:46px}
.prose h3{font-family:var(--display);font-size:clamp(18px,3.6vw,22px);margin-top:34px;letter-spacing:-.015em}
.prose p{color:var(--mut)}
.prose strong{color:var(--fg);font-weight:600}
.prose ul,.prose ol{padding-left:0;list-style:none;display:grid;gap:10px}
.prose li{position:relative;padding-left:22px;color:var(--mut)}
.prose li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:50%;background:var(--lime)}
.prose ol{counter-reset:p}
.prose ol li{counter-increment:p;padding-left:34px}
.prose ol li::before{content:counter(p);width:auto;height:auto;background:none;color:var(--lime);
  font-family:var(--display);font-weight:700;font-size:13px;top:2px;letter-spacing:.06em}
.prose blockquote{margin:0;padding:0 0 0 20px;border-left:3px solid var(--lime);
  font-family:var(--display);font-size:clamp(19px,3.6vw,24px);line-height:1.3;letter-spacing:-.015em;color:var(--fg)}
.prose hr{border:0;border-top:1px solid var(--hair);margin:38px 0}

/* ------------------------------------------------- who it is for, the panel */
.aud-panel{position:absolute;left:0;right:0;top:100%;background:#0C1112;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);z-index:60}
.aud-panel[hidden]{display:none}
.aud-in{padding-block:clamp(20px,3vw,30px)}
.aud-k{font-family:var(--display);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--lime);margin:0 0 14px}
.aud-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.aud-grid a{display:block;padding:14px 16px;border:1px solid var(--hair);border-radius:12px;
  text-decoration:none;transition:border-color .18s,background .18s}
.aud-grid a:hover{border-color:rgba(193,255,114,.55);background:rgba(193,255,114,.05)}
.aud-t{display:block;font-family:var(--display);font-size:15.5px;letter-spacing:-.01em;color:var(--fg)}
.aud-d{display:block;font-size:13px;color:var(--mut);margin-top:4px;line-height:1.45}
/* The header is position:sticky, which is already a containing block for the
   absolutely positioned panel. Setting position:relative here overrode the
   sticky and quietly stopped the header following the scroll on every page. */

/* ----------------------------------------------------------------------------
   Grid children default to min-width:auto, which lets a large image push its
   own track wider than the container and quietly creates a horizontal scroll
   on desktop. Every grid on this site opts out.
   -------------------------------------------------------------------------- */
.faces > *,
.locs > *,
.locs-strip > *,
.whos > *,
.doors > *,
.grid > *,
.split > *,
.promise > *,
.stats > *,
.aud-grid > *{min-width:0}
.dni-lesson img,
.faces img,
.locs img,
.locs-strip img,
.doors img,
.split img,
.promise img,
.page-fig img{max-width:100%}

/* The two spanning tiles again, declared last so it actually lands. A ratio on
   an item that is also stretched to two rows makes the browser size the width
   from the height, which pushed both tiles out of their columns. */
@media(min-width:1180px){
  .faces .face--tall,
  .faces .face--sq{aspect-ratio:auto;height:100%;min-height:540px}
}

/* ============================================================================
   Hero video.

   The clip sits under a two part scrim: a vertical gradient that holds the
   words, and a soft vignette that stops the corners fighting the type. The
   whole layer is inert, so nothing here can be clicked, focused or tabbed into.
   ========================================================================== */
.hero-vid{position:absolute;inset:0;z-index:0;overflow:hidden;overflow:clip;background:#07090A;pointer-events:none}
.hero-vid-poster,
.hero-vid-media{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;object-fit:cover;border:0;pointer-events:none}
/* A 16:9 clip has to be over-scaled to fill a tall phone screen without bars. */
.hero-vid-media{width:100vw;height:56.25vw;min-height:100%;min-width:177.77vh}
.hero-vid-poster{opacity:1;transition:opacity .9s ease .25s}
.hero-vid.is-playing .hero-vid-poster{opacity:0}
.hero-vid-media{opacity:0;transition:opacity 1.1s ease}
.hero-vid.is-playing .hero-vid-media{opacity:1}

.hero-vid-scrim{position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg,
      rgba(7,9,10,calc(var(--dni-dim,.62) * 1.10)) 0%,
      rgba(7,9,10,calc(var(--dni-dim,.62) * .78)) 18%,
      rgba(7,9,10,calc(var(--dni-dim,.62) * .58)) 38%,
      rgba(7,9,10,calc(var(--dni-dim,.62) * .74)) 58%,
      rgba(7,9,10,calc(var(--dni-dim,.62) * 1.00)) 80%,
      rgba(7,9,10,.98) 100%),
    radial-gradient(120% 85% at 22% 78%, rgba(7,9,10,.72), transparent 62%),
    radial-gradient(90% 70% at 85% 12%, rgba(139,107,255,.14), transparent 70%)}

/* A second, tighter wash directly behind the words themselves, so a bright
   frame in the middle of a clip can never wash the headline out. */
/*
 * The wash behind the headline.
 *
 * This was a radial gradient inside a box, which meant it ended at the box
 * edge and left a visible hard line across the video. It is now a much wider,
 * heavily blurred ellipse with no boundary of its own, so it fades out well
 * before it runs out of element to fade in.
 */
.hero--px .hero-in::before{content:"";position:absolute;inset:-40% -30% -40% -40%;z-index:-1;
  background:radial-gradient(60% 50% at 34% 52%,
    rgba(7,9,10,.86) 0%,
    rgba(7,9,10,.66) 38%,
    rgba(7,9,10,.34) 62%,
    rgba(7,9,10,0) 82%);
  filter:blur(38px);pointer-events:none}
@media(min-width:900px){
  .hero--px .hero-in::before{inset:-45% 8% -45% -40%;
    background:radial-gradient(52% 52% at 28% 52%,
      rgba(7,9,10,.88) 0%,
      rgba(7,9,10,.62) 40%,
      rgba(7,9,10,.28) 66%,
      rgba(7,9,10,0) 84%)}
}
.hero--px .hero-media{z-index:1}
.hero-vid ~ .hero-media{opacity:.34;transition:opacity .8s ease}
/* Once a clip is actually playing, the still photograph gets out of its way
   entirely. It is the fallback for a slow connection, not a second layer. */
.hero-vid.is-playing ~ .hero-media{opacity:0;pointer-events:none}

/* ============================================================================
   The closing panel.

   It was a flat rounded box with an empty right half. Now the empty half does
   work: a drifting field, a hairline grid, and the mark sitting in it, with the
   whole panel lifting slightly as it comes into view.
   ========================================================================== */
.cta{position:relative;overflow:hidden;overflow:clip;isolation:isolate;
  padding:clamp(30px,5vw,64px);border-radius:24px;
  border:1px solid var(--hair);
  background:
    radial-gradient(120% 130% at 96% 8%, rgba(193,255,114,.10), transparent 58%),
    radial-gradient(90% 120% at 100% 100%, rgba(139,107,255,.12), transparent 62%),
    linear-gradient(160deg, #0E1415 0%, #0A0F10 58%, #080C0D 100%)}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 100% at 100% 0%, #000 10%, transparent 72%);
  -webkit-mask-image:radial-gradient(80% 100% at 100% 0%, #000 10%, transparent 72%)}
.cta::after{content:"";position:absolute;right:-14%;top:-30%;width:min(58%,540px);aspect-ratio:1;
  z-index:-1;border-radius:50%;
  background:conic-gradient(from 210deg, rgba(193,255,114,.20), rgba(139,107,255,.16), rgba(255,176,58,.10), rgba(193,255,114,.20));
  filter:blur(46px);opacity:.7;animation:dniDrift 26s ease-in-out infinite alternate}
@keyframes dniDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-6%,7%,0) scale(1.12)}
}
.cta > *{position:relative;z-index:1}
.cta h2{max-width:15ch;text-wrap:balance}
.cta p{max-width:48ch}
@media(min-width:900px){
  .cta{padding-right:min(46%,420px)}
}
/* The mark, sitting in the space that used to be empty. */
.cta-mark{position:absolute;right:clamp(18px,4vw,54px);top:50%;transform:translateY(-50%);
  width:clamp(120px,20vw,240px);opacity:.16;z-index:0;pointer-events:none;
  filter:grayscale(1) brightness(2)}
@media(max-width:899px){ .cta-mark{display:none} }

/* ============================================================================
   The two image strip under the locations.

   It was two cards of different heights with a hole beside them. Now they
   overlap, sit on different vertical rhythms, and drift at different speeds.
   ========================================================================== */
.locs-strip{position:relative;display:grid;gap:12px;margin-top:clamp(20px,3vw,34px)}
@media(min-width:820px){
  .locs-strip{grid-template-columns:1.35fr .85fr;gap:0;align-items:start}
  .locs-strip figure:first-child{grid-column:1;margin-right:-8%;z-index:1}
  .locs-strip figure:last-child{grid-column:2;margin-top:clamp(48px,9vw,120px);z-index:2}
}
.locs-strip figure{margin:0;border-radius:20px;overflow:hidden;overflow:clip;background:#12181A;position:relative;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.9)}
.locs-strip figure:first-child{aspect-ratio:16/10}
.locs-strip figure:last-child{aspect-ratio:4/3;border:1px solid rgba(255,255,255,.08)}
.locs-strip img{width:100%;height:114%;object-fit:cover;display:block;will-change:transform}
.locs-strip figcaption{position:absolute;inset:auto 0 0;padding:22px 20px 16px;font-size:13.5px;
  line-height:1.5;color:#D8DEDA;background:linear-gradient(180deg,transparent,rgba(7,9,10,.9))}

/* ============================================================================
   The faces composition. Same three tiles, more considered.
   ========================================================================== */
.faces{position:relative}
.face{box-shadow:0 30px 70px -34px rgba(0,0,0,.95)}
.face::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(7,9,10,.12) 0%, transparent 30%, rgba(7,9,10,.28) 100%);
  mix-blend-mode:multiply}
.face img{filter:grayscale(1) contrast(1.06)}
.face--wide img{filter:none}
@media(min-width:1180px){
  /* The outer tiles sit slightly lower than the middle column, so the block
     reads as a composition instead of three boxes on a shelf. */
  .faces .face--tall{margin-top:clamp(14px,2vw,34px)}
  .faces .face--sq{margin-bottom:clamp(14px,2vw,34px)}
}
.faces-txt h2{text-wrap:balance}
.faces-txt .lede{max-width:34ch}

/* -------------------------------------------------------------- pricing page */
.free-band{border:1px solid rgba(193,255,114,.34);border-radius:22px;padding:clamp(24px,4vw,40px);
  background:radial-gradient(120% 120% at 0% 0%, rgba(193,255,114,.12), transparent 58%), rgba(255,255,255,.02);
  display:grid;gap:20px}
@media(min-width:820px){ .free-band{grid-template-columns:auto 1fr;gap:38px;align-items:center} }
.free-k{font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);margin:0 0 6px}
.free-band h2{font-size:clamp(48px,10vw,86px);line-height:.9;letter-spacing:-.04em;margin:0;color:var(--lime)}
.free-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.free-list li{font-size:15.5px;color:var(--fg);padding-left:22px;position:relative}
.free-list li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--lime)}
.free-note{grid-column:1/-1;margin:0;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);
  font-size:14.5px;color:var(--mut);max-width:62ch}

.tiers{display:grid;gap:14px;margin-top:28px}
@media(min-width:720px){ .tiers{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1100px){ .tiers{grid-template-columns:repeat(3,1fr)} }
.tier{position:relative;display:flex;flex-direction:column;gap:8px;padding:26px 22px;
  border:1px solid var(--hair);border-radius:18px;background:rgba(255,255,255,.02);
  transition:border-color .2s,transform .2s}
.tier:hover{border-color:rgba(193,255,114,.45);transform:translateY(-2px)}
.tier--pick{border-color:rgba(193,255,114,.55);background:rgba(193,255,114,.05)}
.tier-flag{position:absolute;top:-10px;left:22px;background:var(--lime);color:#07090A;
  font-family:var(--display);font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px}
.tier-k{font-family:var(--display);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin:0}
.tier h3{font-family:var(--display);font-size:20px;letter-spacing:-.015em;margin:0}
.tier-price{font-family:var(--display);font-size:clamp(32px,6vw,42px);line-height:1;letter-spacing:-.03em;margin:6px 0 0}
.tier-price span{font-size:13px;letter-spacing:.02em;color:var(--mut);margin-left:6px;font-weight:500}
.tier-blurb{font-size:14.6px;line-height:1.62;color:var(--mut);margin:6px 0 0;flex:1}
.tier .btn{align-self:flex-start;margin-top:14px}

/* ------------------------------------------------------------ contact people */
.people{display:grid;gap:0;margin-top:6px}
.person{padding:18px 0;border-top:1px solid var(--hair)}
.person:first-child{border-top:0;padding-top:10px}
.person h3{font-family:var(--display);font-size:19px;letter-spacing:-.015em;margin:0}
.person-role{margin:4px 0 0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.person-note{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:var(--mut)}
.person-mail{display:inline-block;margin-top:10px;font-size:14.5px;color:var(--fg);
  border-bottom:1px solid rgba(193,255,114,.5);padding-bottom:2px;text-decoration:none}
.person-mail:hover{color:var(--lime)}

/* ---------------------------------------------------------------- video bars */
/*
 * Full bleed. A band that stops at the text column reads as an embedded video
 * player; one that runs edge to edge reads as the page breathing. It breaks
 * out of the wrap using the viewport width rather than needing markup outside
 * the container.
 */
.vbar{position:relative;--vbar-h:clamp(260px,42vh,460px);height:var(--vbar-h);overflow:hidden;
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  margin-block:clamp(40px,7vw,86px);border-radius:0;background:#0C1112;isolation:isolate}
.vbar .hero-vid-media{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100%;min-width:177.77vh;border:0;pointer-events:none;
  opacity:0;transition:opacity 1.1s ease}
.vbar.is-playing .hero-vid-media{opacity:1}
.vbar-scrim{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(7,9,10,.55),rgba(7,9,10,.30) 45%,rgba(7,9,10,.85))}
.vbar-cap{position:absolute;inset:auto 0 0;z-index:3;margin:0 auto;
  padding:clamp(22px,4vw,44px) var(--gut);width:100%;max-width:var(--maxw);
  font-family:var(--display);font-size:clamp(20px,3.6vw,34px);line-height:1.18;letter-spacing:-.025em;
  text-wrap:balance}
.vbar-cap span{display:block;max-width:22ch}
@media(prefers-reduced-motion:reduce){.vbar .hero-vid-media{display:none}}

/* --------------------------------------------------- evidence, as accordions */
.ev{display:grid;gap:10px;margin-top:26px}
details.ev-item{border:1px solid var(--hair);border-radius:16px;background:rgba(255,255,255,.02);
  overflow:hidden;transition:border-color .2s,background .2s}
details.ev-item[open]{border-color:rgba(193,255,114,.4);background:rgba(193,255,114,.04)}
details.ev-item summary{display:flex;align-items:center;gap:16px;padding:20px 22px;cursor:pointer;
  list-style:none;min-height:64px}
details.ev-item summary::-webkit-details-marker{display:none}
details.ev-item summary:hover .ev-h{color:#fff}
.ev-n{font-family:var(--display);font-size:12px;letter-spacing:.16em;color:var(--lime);flex:0 0 auto}
.ev-h{font-family:var(--display);font-size:clamp(16.5px,3vw,20px);letter-spacing:-.015em;
  line-height:1.25;flex:1;color:var(--fg);transition:color .2s}
.ev-plus{position:relative;width:16px;height:16px;flex:0 0 16px}
.ev-plus::before,.ev-plus::after{content:"";position:absolute;background:var(--lime);
  transition:transform .25s ease,opacity .25s ease}
.ev-plus::before{inset:7px 0 7px 0;height:2px}
.ev-plus::after{inset:0 7px 0 7px;width:2px}
details.ev-item[open] .ev-plus::after{transform:scaleY(0);opacity:0}
.ev-body{padding:0 22px 22px;display:grid;gap:14px}
.ev-body p{margin:0;font-size:15.5px;line-height:1.7;color:var(--mut)}
.ev-body strong{color:var(--fg)}
.ev-find strong{color:var(--lime)}
.ev-do{padding-left:16px;border-left:2px solid var(--hair)}

/* ------------------------------------------------------- the featured course */
.feat{display:grid;gap:0;overflow:hidden;border-radius:22px;border:1px solid rgba(193,255,114,.34);
  background:radial-gradient(120% 120% at 100% 0%, rgba(193,255,114,.10), transparent 56%), rgba(255,255,255,.02);
  text-decoration:none;color:inherit;margin-top:26px;transition:border-color .2s,transform .2s}
.feat:hover{border-color:rgba(193,255,114,.6);transform:translateY(-2px)}
@media(min-width:880px){ .feat{grid-template-columns:.85fr 1.15fr;align-items:stretch} }
.feat-media{display:block;overflow:hidden;background:#12181A;aspect-ratio:4/3}
.feat-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.feat:hover .feat-media img{transform:scale(1.04)}
.feat-body{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,4vw,40px)}
.feat-k{font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--lime)}
.feat-t{font-family:var(--display);font-size:clamp(26px,5vw,40px);line-height:1.05;letter-spacing:-.03em}
.feat-d{font-size:15.5px;line-height:1.7;color:var(--mut);max-width:52ch}
.feat-meta{font-size:13.5px;color:var(--mut);padding-top:12px;border-top:1px solid var(--hair)}
.feat-meta b{color:var(--lime);font-variant-numeric:tabular-nums}
.feat-go{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--fg);margin-top:auto}
.feat:hover .feat-go .arrow{transform:translateX(4px)}
.feat-go .arrow{transition:transform .2s}

/* ------------------------------------------------------- help centre, in bands */
.helpgrp{position:relative;padding:clamp(26px,4vw,40px) clamp(18px,3vw,32px);
  border-radius:20px;margin-bottom:16px;border:1px solid var(--hair);overflow:hidden}
.helpgrp::before{content:"";position:absolute;inset:0 auto 0 0;width:4px}
.helpgrp-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.helpgrp-n{font-family:var(--display);font-size:12px;letter-spacing:.18em;
  padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.06)}
.helpgrp h2{font-size:clamp(21px,2.6vw,28px);margin:0;letter-spacing:-.02em}

/* Each group gets its own colour, so a long page has landmarks you can
   navigate by rather than five identical slabs of text. */
.helpgrp--1{background:linear-gradient(160deg,rgba(193,255,114,.09),transparent 62%)}
.helpgrp--1::before{background:#C1FF72}
.helpgrp--1 .helpgrp-n{color:#C1FF72;background:rgba(193,255,114,.14)}

.helpgrp--2{background:linear-gradient(160deg,rgba(139,107,255,.11),transparent 62%)}
.helpgrp--2::before{background:#8B6BFF}
.helpgrp--2 .helpgrp-n{color:#B9A6FF;background:rgba(139,107,255,.18)}

.helpgrp--3{background:linear-gradient(160deg,rgba(255,176,58,.10),transparent 62%)}
.helpgrp--3::before{background:#FFB03A}
.helpgrp--3 .helpgrp-n{color:#FFC978;background:rgba(255,176,58,.16)}

.helpgrp--4{background:linear-gradient(160deg,rgba(94,199,255,.10),transparent 62%)}
.helpgrp--4::before{background:#5EC7FF}
.helpgrp--4 .helpgrp-n{color:#9BDCFF;background:rgba(94,199,255,.16)}

.helpgrp--5{background:linear-gradient(160deg,rgba(255,120,140,.09),transparent 62%)}
.helpgrp--5::before{background:#FF788C}
.helpgrp--5 .helpgrp-n{color:#FFA8B5;background:rgba(255,120,140,.16)}

.helpgrp .faq-q{font-size:15.5px}
.helpgrp .faq-i{border-color:rgba(255,255,255,.09)}


/* ----------------------------------------------------------------------------
   Printing must always work.

   Some "copy protection" plugins inject @media print { body * { display:none } }
   which makes every page print as a blank sheet. Facilities with no open
   internet depend on printed lessons, so this undoes it. Loaded last, and
   scoped to print only.
   -------------------------------------------------------------------------- */
@media print{
  body *{display:revert!important}
  body::after{content:none!important}
  .hdr,.ftr,.aud-panel,.burger,.hero-vid,.vbar,.deco,.btns,.skip{display:none!important}
  body{background:#fff!important;color:#000!important}
  .wrap{max-width:none!important;padding:0!important}
}

/* ============================================================================
   Mobile, properly.

   Most people meet this site on a phone, often a cheap one on a bad connection,
   so this is the layout that matters and the one everything else adapts from.
   ========================================================================== */

@media(max-width:1020px){

  /* ------------------------------------------------------------ the sheet */
  /* A full sheet rather than a dropdown: bigger targets, room for the audience
     links, and nothing hidden behind a scroll the thumb cannot reach. */
  .is-open .hdr-menu{
    /* Restated in full. Inheriting position and inset from the earlier rule
       left the sheet 116px tall, so it sat as a band over the hero instead of
       covering the page. */
    display:flex;flex-direction:column;align-items:stretch;
    position:fixed;inset:0;z-index:200;overflow-y:auto;
    padding:calc(env(safe-area-inset-top,0px) + 84px) var(--gut)
            calc(env(safe-area-inset-bottom,0px) + 32px);
    background:
      radial-gradient(90% 60% at 100% 0%, rgba(139,107,255,.14), transparent 60%),
      radial-gradient(80% 50% at 0% 100%, rgba(193,255,114,.10), transparent 62%),
      #0A0F10;
    animation:dniSheet .28s cubic-bezier(.2,.8,.2,1) both;
    overscroll-behavior:contain;
  }
  @keyframes dniSheet{
    from{opacity:0;transform:translateY(-8px)}
    to{opacity:1;transform:none}
  }

  /*
   * The header uses backdrop-filter, and any filter on an ancestor makes it the
   * containing block for position:fixed descendants. That is why the sheet was
   * anchoring to the 116px header instead of the viewport and rendering as a
   * band over the hero. Dropping the blur while the sheet is open restores the
   * viewport as the containing block, and the blur is pointless behind a solid
   * sheet anyway.
   */
  .hdr{z-index:210}
  .hdr.is-open{-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent}
  .is-open .brand{position:relative;z-index:220}
  .burger{position:relative;z-index:220}

  /* Links: 56px tall, which is a comfortable thumb target rather than a
     minimum-passing one, with the arrow signalling it goes somewhere. */
  .is-open .nav a{
    display:flex;align-items:center;justify-content:space-between;
    min-height:56px;padding:16px 2px;font-size:19px;letter-spacing:-.01em;
    border-bottom:1px solid rgba(255,255,255,.07);
    font-family:var(--display);color:var(--fg);
    animation:dniItem .34s cubic-bezier(.2,.8,.2,1) both;
  }
  .is-open .nav a::before{
    content:"";position:absolute;left:-var(--gut);width:3px;height:0;background:var(--lime);
    transition:height .2s
  }
  .is-open .nav a:active{color:var(--lime)}
  .is-open .nav a::after{
    content:"→";display:block;position:static;width:auto;height:auto;
    background:none;opacity:.35;font-size:16px;transition:opacity .2s,transform .2s
  }
  .is-open .nav a:active::after{opacity:1;transform:translateX(3px)}

  @keyframes dniItem{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .is-open .nav a:nth-child(1){animation-delay:.03s}
  .is-open .nav a:nth-child(2){animation-delay:.06s}
  .is-open .nav a:nth-child(3){animation-delay:.09s}
  .is-open .nav a:nth-child(4){animation-delay:.12s}
  .is-open .nav a:nth-child(5){animation-delay:.15s}
  .is-open .nav a:nth-child(6){animation-delay:.18s}

  /* Buttons pinned to the bottom of the sheet, where a thumb actually rests. */
  .is-open .hdr-cta{
    margin-top:auto;padding-top:28px;gap:10px;
    animation:dniItem .34s cubic-bezier(.2,.8,.2,1) .22s both;
  }
  .is-open .hdr-cta .btn{
    justify-content:center;min-height:54px;font-size:16px;border-radius:14px
  }

  /*
   * The audience panel sits beside the menu in the markup rather than inside
   * it, so on a phone it becomes its own full sheet layered above, opened by
   * the "Who it is for" link and closed the same way. Trying to fold it into
   * the menu made it a static block floating over the hero.
   */
  .aud-panel{
    position:fixed;inset:0;z-index:230;overflow-y:auto;border:0;
    padding:calc(env(safe-area-inset-top,0px) + 84px) var(--gut)
            calc(env(safe-area-inset-bottom,0px) + 32px);
    background:radial-gradient(90% 60% at 100% 0%, rgba(139,107,255,.16), transparent 60%), #0A0F10;
    animation:dniSheet .26s cubic-bezier(.2,.8,.2,1) both;
  }
  .aud-in{padding:0}
  .aud-grid{grid-template-columns:1fr;gap:8px}
  .aud-grid a{padding:15px 16px;border-radius:14px;min-height:60px;
    display:flex;flex-direction:column;justify-content:center}
  .aud-t{font-size:17px}
  .aud-k{margin-bottom:14px;font-size:11px}

  body.dni-nav-open{overflow:hidden;position:relative}
}

/* ------------------------------------------------------ mobile margin fixes */
@media(max-width:900px){
  /* The wide tile was computing wider than its own column and getting clipped,
     which cropped the caption. Nothing in a grid should exceed its track. */
  .face,.face--wide,.face--tall,.face--sq{width:100%;max-width:100%}
  .faces{grid-template-columns:minmax(0,1fr)}

  /* Decorative marks pulled back inside the viewport so they read as design
     rather than as something falling off the edge. */
  .deco--circles{width:clamp(150px,42vw,220px);right:-12%;top:-4%;opacity:.34}
  .deco--boxes{width:clamp(140px,40vw,200px);left:-14%;opacity:.24}

  /* Consistent rhythm between sections on a phone. */
  .sec{padding-block:clamp(44px,9vw,68px)}
  .page-head{padding-top:clamp(38px,9vw,64px)}
  .sec-head h2,.page-head h1{text-wrap:balance}
  .prose,.lede{max-width:none}
}

/* -------------------------------------------------------------- mobile hero */
@media(max-width:780px){
  .hero--px{min-height:min(92svh,760px);padding-block:96px 40px}
  .hero--px h1{font-size:clamp(38px,11.5vw,60px);line-height:.98;letter-spacing:-.035em;max-width:none}
  .hero-sub,.hero--px .hero-in > p{font-size:16.5px;max-width:36ch}
  .hero--px .btns{gap:10px}
  .hero--px .btn{flex:1 1 auto;justify-content:center;min-height:52px}
  .hero-foot{grid-template-columns:1fr 1fr;gap:18px 14px;margin-top:30px}
  .hero-powered img{height:34px}
  /* The wash behind the type is centred on a phone, because the text is. */
  .hero--px .hero-in::before{inset:-30% -20% -30% -20%;
    background:radial-gradient(70% 46% at 50% 46%,
      rgba(7,9,10,.88) 0%, rgba(7,9,10,.62) 44%, rgba(7,9,10,0) 84%)}
}


/* ----------------------------------------------------------------------------
   Video bars must clip their own over-scaled clip.

   A 16:9 video filling a short band has to be wider than the band, which is
   fine as long as the band clips it. Without an explicit containment the
   over-scaled iframe widened the page on narrow screens.
   -------------------------------------------------------------------------- */
.vbar{overflow:hidden}

/*
 * Crop the clip vertically, never horizontally.
 *
 * The hero over-scales width so a tall phone screen has no bars, which is right
 * there. A video bar is the opposite shape: wide and short. Over-scaling width
 * for it demanded an iframe wider than the phone, and that widened the document
 * even with the bar clipping. Pinning width to the bar and letting the height
 * run over means the crop happens top and bottom, where nobody misses it, and
 * horizontal overflow becomes impossible by construction.
 */
/*
 * Fill the band, always.
 *
 * Sizing the clip from viewport width meant a 16:9 video inside a taller band
 * left black bars above and below on a phone. Sized from the band's own height
 * instead, the clip is always at least as tall as the band and overflows
 * sideways, where the band clips it and nobody notices.
 */
.vbar .hero-vid-media{
  left:50%;top:50%;transform:translate(-50%,-50%);
  height:100%;min-height:100%;
  width:calc(var(--vbar-h, 260px) * 1.7778);
  min-width:100%;max-width:none;
}
@media(max-width:820px){
  .vbar{--vbar-h:clamp(200px,30vh,280px);height:var(--vbar-h)}
}


/* ----------------------------------------------------------------------------
   A last guard against sideways scroll.

   Every element is accounted for at every width tested, but sub-pixel rounding
   on very narrow screens can still leave a few stray pixels of scroll. This
   site never wants horizontal scroll, so clip it at the body. Clip rather than
   hidden, because hidden on a root element breaks position:sticky.
   -------------------------------------------------------------------------- */
body{overflow-x:hidden;overflow-x:clip}


/* The clip drifts against the scroll. The bar clips it, so the movement reads
   as depth rather than as the video sliding around. */
.vbar .hero-vid-media{will-change:transform}
@media(prefers-reduced-motion:no-preference){
  .vbar[data-px] .hero-vid-media{transition:none}
}

/* ------------------------------------------------- the self serve programs */
.progs{display:grid;gap:16px;margin-top:26px}
@media(min-width:860px){.progs{grid-template-columns:repeat(2,1fr);gap:20px}}
.prog{display:flex;flex-direction:column;overflow:hidden;border-radius:20px;
  border:1px solid var(--hair);background:rgba(255,255,255,.02);
  transition:border-color .2s,transform .2s}
.prog:hover{border-color:rgba(193,255,114,.5);transform:translateY(-2px)}
.prog-media{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#12181A}
.prog-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.prog:hover .prog-media img{transform:scale(1.04)}
.prog-tag{position:absolute;top:12px;left:12px;background:var(--lime);color:#07090A;
  font-family:var(--display);font-size:10px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;padding:6px 11px;border-radius:999px}
.prog-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.prog-k{margin:0;font-family:var(--display);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lime)}
.prog-body h3{margin:0;font-family:var(--display);font-size:clamp(21px,3.6vw,26px);letter-spacing:-.02em}
.prog-d{margin:0;font-size:15px;line-height:1.65;color:var(--mut);flex:1}
.prog-meta{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.prog-meta li{font-size:12.5px;color:var(--mut);border:1px solid var(--hair);
  border-radius:999px;padding:5px 11px}
.prog-meta b{color:var(--lime);font-variant-numeric:tabular-nums}
/*
 * Price first, then the button. The note used to be an <i> inside the price,
 * which picked up a background from a plugin on the live site and rendered as
 * a grey slab behind the text. Explicit elements with explicit backgrounds, so
 * nothing else can decorate them.
 */
.prog-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:14px;padding-top:16px;border-top:1px solid var(--hair)}
.prog-price{margin:0;display:flex;flex-direction:column;gap:2px;background:none}
.prog-cost{font-family:var(--display);font-size:22px;letter-spacing:-.025em;line-height:1;
  color:var(--fg);background:none}
.prog-note{font-size:12px;letter-spacing:.01em;color:var(--mut);background:none;
  font-family:var(--body)}
.prog-foot .btn{margin-left:auto}

/* Card art sits slightly low so a logo in the top corner is not sliced. */
.prog-media img{object-position:center 45%}

/* ----------------------------------------------------------------------------
   Nothing else gets to decorate our text.

   A copy protection plugin was painting a background behind inline elements,
   which showed up as a grey slab behind the price note. This is scoped tightly
   rather than applied globally, so it fixes the symptom without fighting the
   whole site.
   -------------------------------------------------------------------------- */
.prog-price,.prog-price *,
.prog-meta li,
.tier-price,.tier-price *,
.free-band h2{background-image:none!important;box-shadow:none!important}

/* ------------------------------------------------- the who it is for panel */
/* A hover bridge. Without it, the gap between the link and the panel counts as
   leaving, and the panel closes while the mouse is still travelling to it. */
.aud-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.aud-panel{animation:dniPanel .18s cubic-bezier(.2,.8,.2,1) both;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
@keyframes dniPanel{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.nav a[aria-expanded="true"]{color:#fff}
.nav a[aria-expanded="true"]::after{right:0}
@media(prefers-reduced-motion:reduce){.aud-panel{animation:none}}

/* ---------------------------------------------------------- enrol on a course */
.enrol{display:grid;gap:24px;padding:clamp(24px,4vw,40px);border-radius:22px;
  border:1px solid rgba(193,255,114,.34);
  background:radial-gradient(120% 120% at 0% 0%, rgba(193,255,114,.10), transparent 58%),
    rgba(255,255,255,.02)}
@media(min-width:900px){.enrol{grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}}
.enrol-k{margin:0 0 8px;font-family:var(--display);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lime)}
.enrol-main h2{margin:0 0 12px;font-size:clamp(24px,4.6vw,34px);letter-spacing:-.025em}
.enrol-d{margin:0 0 16px;font-size:16px;line-height:1.65;color:var(--mut);max-width:44ch}
.enrol-free{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.enrol-free li{position:relative;padding-left:24px;font-size:15px;color:var(--fg)}
.enrol-free li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;
  border-radius:50%;background:var(--lime)}
.enrol-buy{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.enrol-price{margin:0;font-family:var(--display);font-size:clamp(34px,7vw,48px);line-height:1;
  letter-spacing:-.035em}
.enrol-price span{display:block;font-family:var(--body);font-size:12.5px;letter-spacing:.01em;
  color:var(--mut);margin-top:8px}
.enrol-buy .btn{width:100%;justify-content:center;min-height:54px;font-size:16px}
.enrol-code{font-size:14px;color:var(--fg);border-bottom:1px solid rgba(193,255,114,.5);
  padding-bottom:2px;text-decoration:none}
.enrol-code:hover{color:var(--lime)}
.enrol-ask{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--mut)}
.enrol-ask a{color:var(--lime)}

/* demonstration marker */
.dni-demo-bar{position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:#FFB03A;color:#1A1200;padding:10px 16px;text-align:center;
  font-size:13.5px;line-height:1.4}
.dni-demo-bar a{color:#1A1200;text-decoration:underline;margin-left:8px;font-weight:600}

/* The panel needs a bridge under the nav item, so the pointer can travel from
   the link into the panel without passing over dead space and closing it. */
@media(min-width:1021px){
  .aud-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
  .aud-panel{animation:dniDrop .18s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes dniDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.nav a[aria-expanded="true"]{color:#fff}
.nav a[aria-expanded="true"]::after{right:0}

/* ----------------------------------------------------------------------------
   Safari.

   Three things this browser needs spelling out, and all three were silently
   degrading rather than erroring, which is why they were easy to miss.

   overflow:clip arrived in Safari 16, so hidden is declared first everywhere
   as the fallback. text-wrap:balance arrived in 17.5 and simply does nothing
   before that, which is fine. And a flex or grid child with an image needs an
   explicit minimum of zero or Safari sizes it from the image's intrinsic width
   and pushes the row wider than its container.
   -------------------------------------------------------------------------- */
.faces > *, .locs > *, .locs-strip > *, .whos > *, .doors > *,
.progs > *, .grid > *, .split > *, .promise > *, .tiers > *,
.enrol > *, .aud-grid > *{min-width:0;min-height:0}

.prog-media, .loc-fig, .face, .split-fig, .promise-fig, .page-fig, .door-media{
  position:relative;
}
.prog-media img, .loc-fig img, .face img, .door-media img{
  max-width:100%;
}

/* Safari needs the flex basis stated or it will not shrink a card below its
   content. Without this the two program cards force a horizontal scroll. */
.prog, .tier, .who, .loc{min-width:0;flex:1 1 auto}

/* ------------------------------------------------- register, starting a course */
.reg-cost{display:grid;gap:20px;margin-top:28px;padding:24px;border-radius:18px;
  border:1px solid rgba(193,255,114,.3);background:rgba(193,255,114,.05)}
@media(min-width:700px){.reg-cost{grid-template-columns:auto 1fr;gap:48px}}
.reg-cost-k{margin:0 0 6px;font-family:var(--display);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lime)}
.reg-cost-v{margin:0;font-family:var(--display);font-size:clamp(30px,6vw,42px);line-height:1;
  letter-spacing:-.03em}
.reg-cost-n{margin:8px 0 0;font-size:12.5px;color:var(--mut)}
.reg-free{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.reg-free li{position:relative;padding-left:22px;font-size:14.5px}
.reg-free li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;
  border-radius:50%;background:var(--lime)}

/* --------------------------------------------------------------- plain forms */
.dni-form{display:grid;gap:16px}
.dni-row{display:grid;gap:16px}
@media(min-width:520px){.dni-row{grid-template-columns:1fr 1fr}}
.dni-field{display:grid;gap:7px}
.dni-field > span{font-family:var(--display);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut)}
.dni-field input,.dni-field select,.dni-field textarea{
  width:100%;padding:14px 16px;min-height:52px;font-size:16px;
  background:rgba(255,255,255,.04);border:1px solid var(--hair);border-radius:12px;
  color:var(--fg);font-family:var(--body)}
.dni-field input:focus,.dni-field select:focus{outline:none;border-color:var(--lime);
  box-shadow:0 0 0 3px rgba(193,255,114,.16)}
.dni-field small{font-size:12.5px;color:var(--mut);line-height:1.5}
.dni-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:54px;padding:0 26px;border:0;border-radius:999px;cursor:pointer;
  background:var(--lime);color:#07090A;font-family:var(--display);font-size:16px;font-weight:700}
.dni-btn:hover{filter:brightness(1.05)}
.dni-small{margin:0;font-size:13px;color:var(--mut)}
.dni-small a{color:var(--lime)}

/* ------------------------------------------- the adult route, before the list */
.start-adult{margin-top:30px;padding:24px;border-radius:18px;
  border:1px solid rgba(193,255,114,.34);
  background:radial-gradient(120% 120% at 0% 0%, rgba(193,255,114,.10), transparent 60%),
    rgba(255,255,255,.02)}
.start-adult-k{margin:0 0 8px;font-family:var(--display);font-size:clamp(17px,3.6vw,21px);
  letter-spacing:-.015em}
.start-adult-d{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--mut);max-width:52ch}
.start-adult .btns{gap:10px;flex-wrap:wrap}

/* ----------------------------------------------------------------------------
   Mobile density.

   Several blocks were written for a desktop column and stack into a wall on a
   phone: eight option cards each with a heading, two paragraphs, a bullet list
   and a button, then an eight cell grid of thirty word answers underneath.
   Tighter type, tighter padding, and lists that stop pretending to be tables.
   -------------------------------------------------------------------------- */
@media(max-width:700px){
  .path{padding:20px}
  .path h3{font-size:19px;line-height:1.25}
  .path p{font-size:15px;line-height:1.6}
  .path .path-meta{gap:6px}
  .path .path-meta li{font-size:13px;padding:6px 10px}
  .path + .path{margin-top:12px}

  .good{gap:14px}
  .good > div{padding:18px}
  .good h4{font-size:15.5px}
  .good p{font-size:14.5px;line-height:1.6}

  .faq-a{font-size:14.8px;line-height:1.65}
  .sec-head h2{font-size:clamp(24px,6.4vw,32px)}
  .lede{font-size:16px;line-height:1.6}

  /* A card that carries a paragraph and a list needs room between them
     rather than the desktop gap, which reads as one block on a phone. */
  .card{padding:20px}
  .card + .card{margin-top:12px}
}

/* Long words and URLs in a narrow column break rather than widen the page. */
@media(max-width:520px){
  .prose p,.lede,.path p,.good p,.faq-a{overflow-wrap:break-word}
}

/* ------------------------------------------------- media placed in page content

   Videos and images added through the block editor had no width rules of any
   kind here, so they sat at the reading measure with black either side and
   read as a small embedded player rather than as part of the page. The theme
   already knows how to run a band edge to edge, it just never offered that to
   anything placed in content.

   Three widths now: default sits in the text column, wide reaches past it, and
   full runs edge to edge the way the theme's own video bars do. The full bleed
   uses the same viewport based breakout as .vbar so the two agree.
*/
.wp-block-video,
.wp-block-embed,
.wp-block-image{margin-inline:auto}

.wp-block-video video,
.wp-block-image img{width:100%;height:auto;display:block;border-radius:18px}

/* ---------------------------------------------------- embedded video, properly

   This is the fix that should have been made three attempts ago, and the
   reason the earlier ones did nothing is worth writing down.

   WordPress does not put a bare iframe on the page. With responsive-embeds
   enabled it wraps every embed in .wp-block-embed__wrapper, gives that wrapper
   a padding-top equal to the aspect ratio, and absolutely positions the iframe
   inside it. The wrapper is the box. The iframe merely fills it.

   Earlier rules here set width:100% and height:auto on the iframe. On an
   absolutely positioned element inside a padded wrapper, height:auto collapses
   it, and the width was already 100% of a wrapper nobody had touched. So the
   rule looked correct, changed nothing, and the video stayed the size the
   content column made it.

   The wrapper is styled now, and Vimeo and YouTube embeds run edge to edge by
   default rather than waiting for somebody to choose full width on every block.
*/
.wp-block-embed__wrapper{position:relative;width:100%;margin:0}

.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper::before{
  content:"";display:block;padding-top:56.25%;
}
.wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before{padding-top:75%}
.wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper::before{padding-top:100%}
.wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper::before{padding-top:42.85%}

.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper > iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}

/* An embed with no aspect class still needs a box rather than a default
   150px iframe height. */
.wp-block-embed:not(.wp-has-aspect-ratio) .wp-block-embed__wrapper > iframe{
  width:100%;aspect-ratio:16/9;height:auto;border:0;display:block;
}

/* Video embeds go edge to edge unless the editor says otherwise. A film on a
   page about this work is the argument, not an illustration of it. */
.wp-block-embed.is-type-video:not(.alignwide):not(.alignnone){
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.wp-block-embed.is-type-video .wp-block-embed__wrapper > iframe{border-radius:0}

/* Constrain it again where the editor explicitly asked for that. */
.wp-block-embed.alignnone,
.wp-block-embed.alignwide{margin-left:auto;margin-right:auto;width:auto}
.wp-block-embed.alignnone .wp-block-embed__wrapper > iframe{border-radius:18px}

/* Captions sit under the video rather than inside the breakout. */
.wp-block-embed figcaption{
  max-width:var(--maxw);margin:14px auto 0;padding:0 var(--gut);
  font-size:13.5px;line-height:1.6;color:var(--mut);text-align:center;
}

@media(max-width:760px){
  .wp-block-embed.is-type-video .wp-block-embed__wrapper > iframe{border-radius:0}
}

.alignwide{
  width:min(100%,calc(var(--maxw) + 14vw));
  max-width:calc(100vw - (var(--gut) * 2));
  margin-inline:auto;
}

.alignfull{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* Edge to edge means edge to edge: corners and side padding would give the
   game away. */
.alignfull video,
.alignfull iframe,
.alignfull img{border-radius:0}

/* A 16:9 clip in a full bleed block should behave like the hero band rather
   than growing taller than the viewport on a wide screen. */
.alignfull.wp-block-video video{max-height:88vh;object-fit:cover}

@media(max-width:760px){
  .alignwide,
  .alignfull{border-radius:0}
  .alignfull.wp-block-video video{max-height:60vh}
}

/* ------------------------------------------------------- the Hunt band

   A full bleed statement for the one course somebody can start on their own,
   placed after the course library rather than instead of it.

   The image is a real <img> rather than a background so it can be lazy loaded
   and so the browser can pick a sensible decode; the scrim above it carries
   the contrast, which means the artwork can stay bright without the type
   fighting it.
*/
.hunt-band{
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  min-height:clamp(460px,64vh,720px);
  display:flex;align-items:flex-end;
  background:#0C1112;
}

.hunt-band-img{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:60% 42%;
  display:block;
}

/* Dark at the bottom where the words are, clear at the top so the sky and the
   figure stay readable as a picture. */
.hunt-band-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(7,9,10,.20) 0%,rgba(7,9,10,.10) 34%,rgba(7,9,10,.86) 88%,rgba(7,9,10,.96) 100%),
    linear-gradient(90deg,rgba(7,9,10,.72) 0%,rgba(7,9,10,.30) 46%,rgba(7,9,10,0) 74%);
}

.hunt-band-in{
  position:relative;z-index:2;
  padding-block:clamp(40px,7vw,88px);
  max-width:var(--maxw);
}

.hunt-band-in h2{
  margin:10px 0 14px;
  font-size:clamp(30px,5.4vw,58px);
  letter-spacing:-.03em;line-height:1.04;text-wrap:balance;
  max-width:16ch;
}

.hunt-band-in .lede{max-width:52ch;margin-bottom:26px}
.hunt-band-in .btns{margin-top:4px}

.hunt-band-note{
  margin:18px 0 0;font-size:13.5px;line-height:1.6;color:var(--mut);max-width:46ch;
}

/* On a phone the figure sits right of centre in the artwork, so the frame
   shifts to keep him in shot while the type stacks below. */
@media(max-width:760px){
  .hunt-band{min-height:clamp(420px,72vh,620px)}
  .hunt-band-img{object-position:68% 38%}
  .hunt-band-scrim{
    background:linear-gradient(180deg,rgba(7,9,10,.28) 0%,rgba(7,9,10,.14) 26%,rgba(7,9,10,.90) 78%,rgba(7,9,10,.97) 100%);
  }
  .hunt-band-in h2{max-width:14ch}
}

@media(prefers-reduced-motion:no-preference){
  .hunt-band-img{transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
  .hunt-band:hover .hunt-band-img{transform:scale(1.02)}
}

/* --------------------------------------------- branded course landing pages

   A course as its own front door. Used by template-course-landing.php for the
   self serve courses, where somebody arrives cold from a link and decides in
   about fifteen seconds. The header does the deciding, so it gets the screen.
*/
.cband{
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  min-height:clamp(560px,82vh,880px);
  display:flex;align-items:flex-end;
  background:#0C1112;
}

.cband-media{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:60% 40%;
  display:block;
}

.cband-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(7,9,10,.24) 0%,rgba(7,9,10,.08) 30%,rgba(7,9,10,.88) 86%,rgba(7,9,10,.97) 100%),
    linear-gradient(90deg,rgba(7,9,10,.74) 0%,rgba(7,9,10,.32) 48%,rgba(7,9,10,0) 76%);
}

.cband-in{
  position:relative;z-index:2;
  padding-block:clamp(44px,7vw,92px);
  max-width:var(--maxw);
}

.cband-in h1{
  margin:12px 0 16px;
  font-size:clamp(38px,7.4vw,86px);
  letter-spacing:-.035em;line-height:.98;text-wrap:balance;max-width:14ch;
}

.cband-in .lede{max-width:50ch;margin-bottom:28px}

.cband-facts{
  display:flex;flex-wrap:wrap;gap:10px 26px;
  list-style:none;margin:24px 0 0;padding:0;
  font-size:14px;color:var(--mut);
}
.cband-facts b{color:var(--fg)}

/* Anything the editor already put on the page keeps its own rhythm. */
.dni-course-body > * + *{margin-top:22px}
.dni-course-body h2{margin-top:44px}
.dni-course-body img,
.dni-course-body video{border-radius:18px;width:100%;height:auto;display:block}

/* what it costs */
.cprice{display:grid;gap:34px}
@media(min-width:820px){
  .cprice{grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
}
.cprice-n{font-family:var(--display);font-size:clamp(44px,8vw,78px);line-height:1;
  letter-spacing:-.035em;margin:10px 0 8px}
.cprice-s{color:var(--mut);font-size:14.5px;margin:0}
.cprice-free{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
.cprice-free li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.6}
.cprice-free li::before{content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;border-radius:50%;background:var(--lime)}

@media(max-width:760px){
  .cband{min-height:clamp(500px,76vh,700px)}
  .cband-media{object-position:66% 36%}
  .cband-scrim{
    background:linear-gradient(180deg,rgba(7,9,10,.30) 0%,rgba(7,9,10,.12) 24%,rgba(7,9,10,.92) 76%,rgba(7,9,10,.98) 100%);
  }
  .cband-in h1{max-width:12ch}
}

/* ------------------------------- the portal reads on the white lesson page

   template-portal.php counts as a learning screen, so the lesson stylesheet
   forces a white page for readability. The plugin's portal markup, though,
   sets near white text because it was written for the dark site, and the
   light mode override it ships only fires inside a .paper section, which the
   portal is not.

   The result was a page of white text on a white background: "Everything is
   signed", "Week 1 of 6" and the whole course chooser present, legible to the
   DOM and invisible to a person. Somebody signing up saw an empty screen and
   reasonably concluded the site was broken.

   Rather than restyle the plugin's markup, this hands the portal the same
   light palette the plugin already defines for paper, using its own custom
   properties so a future change to those keeps working.
*/
body.dni-learning .dni-portal,
body.dni-learning .dni-form{
  color:#0A0D0E;
  --dni-mut:#4A544F;
  --dni-hair:rgba(0,0,0,.16);
}

body.dni-learning .dni-portal h1,
body.dni-learning .dni-portal h2,
body.dni-learning .dni-portal h3,
body.dni-learning .dni-portal b,
body.dni-learning .dni-portal strong{color:#07090A}

body.dni-learning .dni-portal p,
body.dni-learning .dni-portal li,
body.dni-learning .dni-portal small,
body.dni-learning .dni-portal .dni-hint{color:#414B46}

/* The eyebrow label is lime on black. On paper it needs to be dark enough to
   read while staying recognisably the accent. */
body.dni-learning .dni-portal .dni-k{color:#3F6B12}

/* Cards inside the portal keep their dark panel treatment, so anything set on
   the container must not bleed into them. */
body.dni-learning .dni-portal .dni-card,
body.dni-learning .dni-portal .dni-card *{color:#EDF1EC}
body.dni-learning .dni-portal .dni-card .dni-k{color:#C1FF72}
body.dni-learning .dni-portal .dni-card .dni-hint{color:#B9C2BD}

/* Buttons keep full contrast either way. */
body.dni-learning .dni-portal .dni-btn,
body.dni-learning .dni-portal .btn--lime{color:#07090A}

/* The signed panel is a pale green card; its text must be dark, not white. */
body.dni-learning .dni-portal .dni-done,
body.dni-learning .dni-portal .dni-done *{color:#1B3A0A}

/* ------------------------------- the header on white learning screens

   .hdr is rgba(7,9,10,.72) with a blur behind it, which reads as near black
   over the dark site. The lesson stylesheet forces the page white so lesson
   text is readable, and seventy two percent black over white is grey. The
   header went from looking deliberate to looking like an unstyled band, on
   the screens a participant spends the most time on.

   Solid here, translucent everywhere else. The blur is dropped too: there is
   nothing behind it worth blurring on a white page, and it costs a repaint on
   every scroll.
*/
body.dni-learning .hdr{
  background:var(--ink,#07090A);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.10);
}

/* The participant bar under it is the same story. */
body.dni-learning .pbar{background:var(--ink,#07090A)}

/* Notices on the white learning page.

   The plugin already defines dark-on-light versions of these, but only inside
   a .paper section, and the portal is not one. So an error arrived as pale
   red on pale pink: legible if you knew it was there, missable if you did not.
   That is the wrong failure mode for the message telling somebody why they
   cannot start a course. Same colours the plugin already chose, applied where
   the page is actually white. */
body.dni-learning .dni-notice--ok{
  background:rgba(58,138,27,.10);
  border-color:rgba(58,138,27,.40);
  color:#26520E;
}
body.dni-learning .dni-notice--err{
  background:rgba(179,45,46,.08);
  border-color:rgba(179,45,46,.35);
  color:#8A1F20;
}
body.dni-learning .dni-notice a{color:inherit;text-decoration:underline}

/* ============================================================ the journal

   Long form research, built to be read rather than skimmed and to look like
   it was worth writing. The measure is deliberately narrow: around sixty six
   characters is where sustained reading stops being work, and a wide column
   is the single most common reason a good article goes unread.

   Figures break out past the measure, so a chart is a moment rather than an
   interruption.
*/
.post-wrap{max-width:720px}
.post-head{padding:clamp(48px,8vw,96px) 0 0}
.post-head .eyebrow a{color:var(--lime);text-decoration:none}

.post-title{
  font-size:clamp(34px,6vw,60px);letter-spacing:-.035em;line-height:1.03;
  margin:12px 0 20px;text-wrap:balance;
}
.post-standfirst{
  font-size:clamp(18px,2.4vw,22px);line-height:1.55;color:var(--mut);
  margin:0 0 26px;max-width:60ch;
}
.post-meta{
  font-size:13.5px;color:var(--mut);margin:0;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
}

.post-hero{
  margin:clamp(32px,5vw,56px) 0 0;width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);
}
.post-hero img{width:100%;height:auto;display:block;max-height:70vh;object-fit:cover}

.post-body{padding:clamp(36px,6vw,64px) 0 0;font-size:17.5px;line-height:1.72}
.post-body > * + *{margin-top:1.15em}

.post-body h2{
  font-size:clamp(25px,3.6vw,34px);letter-spacing:-.025em;line-height:1.18;
  margin:2.2em 0 .55em;text-wrap:balance;
}
.post-body h3{
  font-size:clamp(19px,2.4vw,22px);letter-spacing:-.015em;
  margin:1.8em 0 .4em;
}
.post-body p{color:#D6DCD8}
.post-body strong{color:var(--fg)}
.post-body a{color:var(--lime);text-underline-offset:3px}

.post-body ul,.post-body ol{padding-left:1.15em;color:#D6DCD8}
.post-body li{margin:.45em 0}
.post-body li::marker{color:var(--lime)}

.post-body blockquote{
  margin:2em 0;padding:4px 0 4px 26px;border-left:3px solid var(--lime);
  font-size:clamp(20px,2.8vw,25px);line-height:1.42;letter-spacing:-.015em;
  color:var(--fg);
}
.post-body blockquote p{color:var(--fg)}
.post-body blockquote cite{
  display:block;margin-top:12px;font-size:14px;font-style:normal;color:var(--mut);
}

.post-body img{border-radius:16px;width:100%;height:auto;display:block}
.post-body hr{border:0;border-top:1px solid var(--hair);margin:2.6em 0}

/* ---------------------------------------------------------- the figures

   Everything below is a component an article can drop in. They break the
   measure on purpose: a figure is meant to stop you.
*/
.fig{
  margin:2.6em 0;padding:clamp(22px,3.4vw,34px);
  background:var(--panel,#0E1416);border:1px solid var(--hair);border-radius:18px;
}
@media(min-width:900px){
  .fig{width:calc(100% + 130px);margin-left:-65px}
}
.fig-label{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime);margin:0 0 14px;font-weight:700;
}
.fig-title{font-size:clamp(19px,2.4vw,23px);letter-spacing:-.02em;margin:0 0 6px;line-height:1.25}
.fig-note{font-size:13px;line-height:1.6;color:var(--mut);margin:16px 0 0}
.fig-note a{color:var(--mut);text-decoration:underline}

/* big numbers */
.fig-stats{display:grid;gap:20px;margin-top:20px}
@media(min-width:620px){.fig-stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
.fig-stat-n{
  font-family:var(--display);font-size:clamp(38px,6vw,54px);line-height:1;
  letter-spacing:-.04em;color:var(--lime);margin:0 0 6px;
}
.fig-stat-l{font-size:13.5px;line-height:1.5;color:var(--mut);margin:0}

/* horizontal bars, drawn in CSS so nothing has to load */
.fig-bars{display:grid;gap:16px;margin-top:22px}
.fig-bar-row{display:grid;gap:7px}
.fig-bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:14px}
.fig-bar-top b{color:var(--fg);font-size:15px}
.fig-bar-top span{color:var(--mut)}
.fig-bar-track{height:11px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.fig-bar-fill{height:100%;border-radius:999px;background:var(--lime);display:block}
.fig-bar-fill--soft{background:rgba(193,255,114,.42)}

/* a sequence of steps */
.fig-steps{counter-reset:s;display:grid;gap:2px;margin-top:20px}
.fig-step{
  display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;
  padding:16px 0;border-top:1px solid var(--hair);
}
.fig-step:first-child{border-top:0}
.fig-step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--display);font-size:15px;color:var(--lime);padding-top:2px;
}
.fig-step h4{margin:0 0 4px;font-size:16px;letter-spacing:-.01em}
.fig-step p{margin:0;font-size:14.5px;line-height:1.6;color:var(--mut)}

/* two things side by side */
.fig-vs{display:grid;gap:16px;margin-top:20px}
@media(min-width:640px){.fig-vs{grid-template-columns:1fr 1fr}}
.fig-vs-col{padding:20px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--hair)}
.fig-vs-col h4{margin:0 0 10px;font-size:15px;letter-spacing:.01em}
.fig-vs-col ul{margin:0;padding-left:1.05em;font-size:14.5px;line-height:1.62;color:var(--mut)}
.fig-vs-col--good{border-color:rgba(193,255,114,.34)}
.fig-vs-col--good h4{color:var(--lime)}

/* a source, shown rather than hidden in a footnote */
.fig-cite{
  margin:2.2em 0;padding:18px 20px;border-left:3px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.02);border-radius:0 12px 12px 0;
  font-size:14px;line-height:1.6;color:var(--mut);
}
.fig-cite b{display:block;color:var(--fg);margin-bottom:4px;font-size:14.5px}

/* the line that matters */
.pull{
  margin:2.4em 0;font-family:var(--display);
  font-size:clamp(23px,3.6vw,33px);line-height:1.24;letter-spacing:-.028em;
  color:var(--fg);text-wrap:balance;
}
.pull::before{content:"";display:block;width:52px;height:3px;background:var(--lime);margin-bottom:18px}

/* -------------------------------------------------------------- the tail */
.post-next{
  margin:clamp(48px,7vw,84px) 0 0;padding:clamp(28px,4vw,40px);
  border-radius:20px;background:var(--panel,#0E1416);border:1px solid var(--hair);
}
.post-next h2{font-size:clamp(23px,3.2vw,30px);letter-spacing:-.025em;margin:8px 0 12px;line-height:1.2}
.post-next .lede{margin-bottom:22px;font-size:16px}

.post-more{margin:clamp(44px,6vw,72px) 0 clamp(48px,7vw,90px)}
.post-more-grid{display:grid;gap:16px;margin-top:18px}
@media(min-width:760px){.post-more-grid{grid-template-columns:repeat(3,1fr)}}
.post-card{
  display:block;padding:20px;border-radius:16px;text-decoration:none;
  background:rgba(255,255,255,.03);border:1px solid var(--hair);
  transition:border-color .2s ease,transform .2s ease;
}
.post-card:hover{border-color:rgba(193,255,114,.4);transform:translateY(-2px)}
.post-card-cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.post-card h3{margin:8px 0 6px;font-size:17px;line-height:1.28;letter-spacing:-.015em;color:var(--fg)}
.post-card p{margin:0;font-size:14px;line-height:1.55;color:var(--mut)}

@media(max-width:760px){
  .fig{margin-left:0;width:auto}
  .post-hero img{max-height:46vh}
}

/* ============================================ video, the fix that holds

   Four attempts at this failed for two reasons I had not checked.

   First, the rules only ever targeted .wp-block-embed. A Vimeo iframe pasted
   straight into a page as HTML is not a block, carries none of those classes,
   and was never touched by anything I wrote. Raw iframes are handled here too.

   Second, a full bleed child cannot escape a clipped ancestor. Several
   sections set overflow:clip so decorative artwork does not cause sideways
   scroll, and content rendered inside one of those was being cut at the
   container edge no matter how wide the child asked to be. The chain around
   page content is explicitly opened below.
*/

/* Let the breakout actually break out. Only on the content column, so the
   decorative clipping elsewhere is untouched. */
.sec > .wrap,
.wrap > .prose,
.prose,
.lede,
.post-body{overflow:visible}

/* Any video iframe in page content, however it got there: block editor,
   pasted embed code, or a plugin. */
.prose iframe[src*="vimeo"],
.prose iframe[src*="youtube"],
.prose iframe[src*="youtu.be"],
.post-body iframe[src*="vimeo"],
.post-body iframe[src*="youtube"],
.lede iframe[src*="vimeo"],
.lede iframe[src*="youtube"],
.wp-block-embed.is-type-video iframe{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  border:0;
  border-radius:0;
}

/* And run them edge to edge. A raw iframe has no figure around it, so the
   breakout is applied to the iframe itself. */
.prose > iframe[src*="vimeo"],
.prose > iframe[src*="youtube"],
.prose > p > iframe[src*="vimeo"],
.prose > p > iframe[src*="youtube"],
.post-body > iframe[src*="vimeo"],
.post-body > iframe[src*="youtube"],
.wp-block-embed.is-type-video{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* A paragraph containing only an iframe adds nothing but a margin. */
.prose p:has(> iframe:only-child),
.post-body p:has(> iframe:only-child){margin:2.4em 0;max-width:none}

/* Vimeo and YouTube both honour a wrapper with an aspect ratio, so a very
   wide screen does not produce a video taller than the window. */
.wp-block-embed.is-type-video iframe,
.prose > iframe[src*="vimeo"],
.prose > iframe[src*="youtube"]{max-height:88vh;object-fit:cover}

@media(max-width:760px){
  .wp-block-embed.is-type-video iframe,
  .prose iframe[src*="vimeo"],
  .prose iframe[src*="youtube"]{max-height:56vh}
}

/* ------------------------------------------- spacing inside portal cards

   The plugin sets .dni-card p{margin:0}, which is right for a card holding a
   single line and wrong for the course and payment cards, where a heading, a
   description, a price line and a button all stack. Everything collapsed
   against everything else and the button ended up sitting on the text.

   Spacing is restored between siblings only, so a card with one paragraph is
   unchanged and nothing already laid out correctly moves.
*/
.dni-portal .dni-card > * + *{margin-top:12px}
.dni-portal .dni-card p{margin:0}
.dni-portal .dni-card h3{margin:8px 0 0;line-height:1.25}
.dni-portal .dni-card .dni-k{display:block;margin-bottom:2px}

/* The button needs room of its own, and a form wrapper around it adds none. */
.dni-portal .dni-card form{margin:6px 0 0}
.dni-portal .dni-card .dni-btn,
.dni-portal .dni-card .btn{margin-top:6px}

/* The card grid itself breathes a little more than the plugin default, since
   these carry more than a label. */
.dni-portal .dni-cards{gap:18px}
.dni-portal .dni-card{padding:24px}

/* The panel and the sections around it were butting up against the header
   and each other on the portal page. */
.dni-portal + .dni-portal{margin-top:20px}
body.dni-learning .sec--tight > .wrap > .dni-portal:first-child{margin-top:8px}

/* A price or meta line reads as secondary rather than as body copy. */
.dni-portal .dni-card .dni-hint{display:block;margin-top:10px;line-height:1.55}

@media(max-width:620px){
  .dni-portal .dni-card{padding:20px}
  .dni-portal .dni-card .dni-btn,
  .dni-portal .dni-card .btn{width:100%;text-align:center}
}

/* ============================================== booking a live session

   Built for a phone held in one hand on a bus. Every session is one row and
   one button, the touch target is comfortably past the forty four pixel
   minimum, and nothing depends on hover or on dragging.
*/
.dni-week{
  margin:26px 0 10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);font-weight:700;
}
.dni-week:first-of-type{margin-top:18px}

.dni-sessions{display:grid;gap:10px}

.dni-session{
  display:grid;gap:4px 16px;align-items:center;
  grid-template-columns:1fr;
  padding:16px 18px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid var(--hair);
  transition:border-color .18s ease,background .18s ease;
}
@media(min-width:640px){
  .dni-session{grid-template-columns:120px 1fr auto}
}

.dni-session-when b{display:block;font-size:15px;line-height:1.3;color:var(--fg)}
.dni-session-when span{font-size:13.5px;color:var(--mut)}

.dni-session-what h5{margin:0;font-size:16px;line-height:1.3;letter-spacing:-.01em;color:var(--fg)}
.dni-session-what p{margin:3px 0 0;font-size:13.5px;color:var(--mut)}

.dni-session-do{margin:8px 0 0}
@media(min-width:640px){.dni-session-do{margin:0}}

.dni-session .dni-btn{
  min-height:46px;padding:0 22px;width:100%;
  display:inline-flex;align-items:center;justify-content:center;
}
@media(min-width:640px){.dni-session .dni-btn{width:auto}}

/* Booked. The whole row changes, not just the button, so it reads at a
   glance on a small screen without anybody having to look for a label. */
.dni-session.is-booked{
  border-color:rgba(193,255,114,.45);
  background:rgba(193,255,114,.07);
}
.dni-session.is-booked .dni-session-when b{color:var(--lime)}

.dni-btn--on{
  background:transparent;border:1px solid var(--lime);color:var(--lime);
}
.dni-btn--on:hover{background:rgba(193,255,114,.12);color:var(--lime)}

/* On paper, which is what the portal is. */
body.dni-learning .dni-session{background:#fff;border-color:rgba(0,0,0,.12)}
body.dni-learning .dni-session-when b,
body.dni-learning .dni-session-what h5{color:#07090A}
body.dni-learning .dni-session-when span,
body.dni-learning .dni-session-what p{color:#4A544F}
body.dni-learning .dni-session.is-booked{background:#F3FCE8;border-color:#8FCB4E}
body.dni-learning .dni-session.is-booked .dni-session-when b{color:#3F6B12}
body.dni-learning .dni-btn--on{border-color:#5FA92C;color:#3F6B12;background:transparent}
body.dni-learning .dni-week{color:#5A645F}

/* ---------------------------------------------------- what is outstanding */
.dni-checklist{list-style:none;margin:16px 0 20px;padding:0;display:grid;gap:12px}
.dni-checklist li{
  display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;
  font-size:15px;line-height:1.55;
}
.dni-check-dot{
  width:14px;height:14px;border-radius:50%;margin-top:4px;
  border:2px solid var(--mut);display:block;
}
.dni-checklist em{font-style:normal;color:var(--mut)}
body.dni-learning .dni-checklist em{color:#4A544F}
body.dni-learning .dni-check-dot{border-color:#8A948E}

/* ================================================= the roster and the ask

   The roster is used standing up, in a room, on a phone, sometimes with no
   signal. Every target is large, the current state is visible without reading
   a label, and nothing depends on hover.
*/
.dni-roster-head{margin-bottom:18px}
.dni-roster-head h2{margin:6px 0 4px;font-size:clamp(22px,3vw,28px);letter-spacing:-.02em}

.dni-roster-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}

.dni-roster-row{
  display:grid;gap:10px;padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid var(--hair);
  transition:border-color .16s ease,background .16s ease;
}
.dni-roster-name{font-size:16px;font-weight:600;color:var(--fg)}
.dni-roster-mins{font-size:12.5px;color:var(--mut)}

.dni-roster-marks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}

.dni-mark{position:relative;display:block}
.dni-mark input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.dni-mark span{
  display:flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 10px;border-radius:999px;
  border:1px solid var(--hair);font-size:14px;font-weight:600;
  color:var(--mut);text-align:center;
}
.dni-mark input:focus-visible + span{outline:2px solid var(--lime);outline-offset:2px}

.dni-mark--present input:checked + span{background:#C1FF72;border-color:#C1FF72;color:#07090A}
.dni-mark--excused input:checked + span{background:#F5D57A;border-color:#F5D57A;color:#07090A}
.dni-mark--absent  input:checked + span{background:#E88C8C;border-color:#E88C8C;color:#07090A}

/* The whole row shifts, so a facilitator scanning nine people sees the
   unmarked ones without reading anything. */
.dni-roster-row[data-state=""]{border-color:rgba(255,255,255,.22)}
.dni-roster-row[data-state="present"]{background:rgba(193,255,114,.08);border-color:rgba(193,255,114,.4)}
.dni-roster-row[data-state="excused"]{background:rgba(245,213,122,.08);border-color:rgba(245,213,122,.4)}
.dni-roster-row[data-state="absent"]{background:rgba(232,140,140,.07);border-color:rgba(232,140,140,.35)}

.dni-roster-save{
  position:sticky;bottom:0;margin-top:18px;padding:14px 0;
  background:linear-gradient(to top,var(--ink) 60%,transparent);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.dni-roster-save .dni-btn{min-height:50px;padding:0 28px}

.dni-roster-state{font-size:13.5px;color:var(--mut)}
.dni-roster-state.is-warn{color:#F5D57A}
.dni-roster-state.is-ok{color:var(--lime)}

/* ---------------------------------------------------------- asking to talk */
.dni-choices{border:0;padding:0;margin:0 0 18px}
.dni-choices legend{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);font-weight:700;margin-bottom:10px;padding:0;
}
.dni-choices{display:grid;gap:8px}
@media(min-width:560px){
  .dni-choices{grid-template-columns:1fr 1fr}
  .dni-choices legend{grid-column:1 / -1}
}

.dni-choice{position:relative;display:block}
.dni-choice input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.dni-choice span{
  display:flex;align-items:center;min-height:48px;padding:0 16px;
  border-radius:12px;border:1px solid var(--hair);
  font-size:15px;color:var(--mut);
}
.dni-choice input:checked + span{
  border-color:var(--lime);color:var(--fg);background:rgba(193,255,114,.08);
}
.dni-choice input:focus-visible + span{outline:2px solid var(--lime);outline-offset:2px}

/* On the white portal page. */
body.dni-learning .dni-roster-row{background:#fff;border-color:rgba(0,0,0,.12)}
body.dni-learning .dni-roster-name{color:#07090A}
body.dni-learning .dni-mark span{border-color:rgba(0,0,0,.18);color:#4A544F}
body.dni-learning .dni-choice span{border-color:rgba(0,0,0,.18);color:#3C4640}
body.dni-learning .dni-choice input:checked + span{color:#07090A;background:#F3FCE8;border-color:#8FCB4E}
body.dni-learning .dni-choices legend{color:#5A645F}
body.dni-learning .dni-roster-save{background:linear-gradient(to top,#fff 60%,transparent)}

/* =========================================== video that actually reaches the edge

   Two separate reasons the video bands were never full width, and I had only
   ever chased the second one.

   FIRST. The bands were printed inside <div class="wrap">. A wrap has a max
   width and an inline gutter, and calc(50% - 50vw) measured from inside that
   padding undershoots on the left and overflows on the right. The band ended
   up narrower than the page and pushed sideways. Those wraps are gone from the
   templates now, and the rule below makes the band safe either way so nobody
   reintroduces one by accident.

   SECOND. Pages rendered through page.php put their content in .lede, not
   .prose. Every full bleed rule I wrote listed .prose and .post-body and never
   .lede, which is exactly why the two pages you kept pointing at never moved.
*/

/* Belt and braces: a band inside a padded container still reaches the edges. */
.wrap > .vbar,
.wrap > .hero-vid,
.lede > .vbar{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw - var(--gut));
  margin-right:calc(50% - 50vw - var(--gut));
}

/* Content rendered into .lede gets the same treatment as .prose. This is the
   one that fixes the evidence page and what this is. */
.lede iframe[src*="vimeo"],
.lede iframe[src*="youtube"],
.lede iframe[src*="youtu.be"],
.lede .wp-block-embed.is-type-video iframe{
  display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:0;
}

.lede > iframe[src*="vimeo"],
.lede > iframe[src*="youtube"],
.lede > p > iframe[src*="vimeo"],
.lede > p > iframe[src*="youtube"],
.lede .wp-block-embed.is-type-video,
.lede .wp-block-video{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

.lede p:has(> iframe:only-child){margin:2.4em 0;max-width:none}

/* The bands are a deliberate height so they read as a band rather than as a
   film. On a wide screen that can look short, so they grow with the viewport
   while staying out of the way on a laptop. */
.vbar{--vbar-h:clamp(320px,52vh,620px)}
@media(min-width:1400px){.vbar{--vbar-h:clamp(420px,58vh,720px)}}
@media(max-width:760px){.vbar{--vbar-h:clamp(240px,38vh,360px)}}

/* ------------------------------------------- WooCommerce, wearing our clothes

   The cart and checkout are WooCommerce's own templates. They are not worth
   rebuilding, but they should not look like a different website either, and a
   person about to type a card number is exactly who notices.
*/
.dni-cart-back{
  margin:0 0 22px;padding:14px 18px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--hair);
  font-size:14.5px;
}
.dni-cart-back a{color:var(--lime);text-underline-offset:3px}

.woocommerce table.shop_table{
  border-color:var(--hair);border-radius:14px;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{border-color:var(--hair)}

/* The remove button. Small, grey and easy to miss by default, which is the
   single most common reason somebody cannot work out how to empty a cart. */
.woocommerce a.remove{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.08);color:var(--fg) !important;
  font-size:18px;line-height:1;text-decoration:none;
}
.woocommerce a.remove:hover{background:#E88C8C;color:#07090A !important}

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  background:var(--lime);color:#07090A;border-radius:999px;
  font-weight:700;min-height:46px;padding:0 24px;border:0;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover{background:#B2F55E;color:#07090A}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review{
  border:1px solid var(--hair);border-radius:16px;padding:20px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  min-height:46px;border-radius:10px;border:1px solid var(--hair);
  padding:0 14px;
}

.woocommerce-info,
.woocommerce-message{
  border-top-color:var(--lime);border-radius:10px;
}
.woocommerce-info::before,
.woocommerce-message::before{color:var(--lime)}

/* Three fields across, for circuit, city and state on the referral form. */
.dni-form .dni-row--3{display:grid;gap:14px}
@media(min-width:720px){
  .dni-form .dni-row--3{grid-template-columns:1fr 1fr 140px}
}