/* Sound the Depths — CISO discovery learning path.
   Visual language follows docker.com: Repro (Inter when the font files are absent), Docker blue on white cards, deep navy feature bands.
   The ocean behind the app darkens as the learner dives deeper. */
:root{
  --blue:#1D63ED; --blue-bright:#2560FF; --blue-600:#1E4DCC; --blue-50:#EAF1FF; --blue-100:#D6E3FF;
  --navy:#00153C; --navy-deep:#06112D; --navy-700:#0B2350; --navy-600:#173A78;
  --ink:#0B1220; --ink-soft:#475569; --ink-mute:#64748B; --line:#E6EBF2; --line-2:#D6DCE6; --bg:#F4F6F9; --white:#fff;
  --good:#12A150; --good-50:#E5F7EC; --warn:#E89A00; --warn-50:#FFF4DC; --bad:#E5484D; --bad-50:#FDECEC;
  --krill:#FF6B8B; --foam:#7FD4FF; --aqua:#38D6C9;
  --radius:12px; --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(11,18,32,.06),0 1px 1px rgba(11,18,32,.04);
  --shadow:0 8px 24px rgba(6,17,45,.10),0 2px 6px rgba(6,17,45,.06);
  --shadow-lg:0 24px 60px rgba(6,17,45,.22);
  --font:"Repro","Inter",Helvetica,Arial,sans-serif;
  --mono:"Repro","Inter",Helvetica,Arial,sans-serif; /* no monospace face (Brandon, 2026-10-20): numbers use Repro's tabular figures */
  --top:64px;
  --depth:0; /* 0 surface → 1 abyss, set from JS */
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);color:var(--ink);background:var(--navy-deep);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:-.011em;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--foam);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* ---------- ocean backdrop ---------- */
.ocean{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,#5AB6FF calc((1 - var(--depth))*100%),#04102A) 0%,
    color-mix(in srgb,#1D63ED calc((1 - var(--depth))*100%),#020A1E) 45%,
    color-mix(in srgb,#00153C calc((1 - var(--depth))*100%),#01050F) 100%);
  transition:background 1.2s ease}
.ocean .rays{position:absolute;inset:-20% -10% auto -10%;height:90%;opacity:calc(.55 - var(--depth)*.5);
  background:repeating-linear-gradient(100deg,rgba(255,255,255,.10) 0 40px,transparent 40px 140px);
  mask-image:linear-gradient(180deg,#000 0%,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);
  animation:rays 14s ease-in-out infinite alternate;transition:opacity 1.2s}
@keyframes rays{to{transform:translateX(60px) skewX(-4deg)}}
.bubble{position:absolute;bottom:-40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55),rgba(255,255,255,.05) 60%);animation:rise linear infinite}
@keyframes rise{to{transform:translate(var(--dx,20px),-115vh)}}
.ocean .far-whale{position:absolute;width:340px;opacity:.10;top:58%;left:-360px;animation:cruise 60s linear infinite}
@keyframes cruise{to{transform:translateX(calc(100vw + 720px))}}

/* ---------- top bar ---------- */
.top{position:fixed;inset:0 0 auto 0;height:var(--top);z-index:40;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 max(16px,env(safe-area-inset-left))}
.brand{display:flex;align-items:center;gap:10px;text-align:left;color:var(--ink);text-decoration:none;white-space:nowrap;background:none;border:0;padding:0}
.brand .mark{width:34px;height:34px;flex:none}
.brand b{font-weight:700;font-size:16px;letter-spacing:-.02em}
.brand small{display:block;font-size:14px;color:var(--ink-soft);font-weight:500;letter-spacing:0;margin-top:-2px}
.top .grow{flex:1}
.depthpill{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft);font-weight:500;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:6px 12px;white-space:nowrap}
.depthpill i{font-style:normal;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--blue);font-weight:600}
.krill{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;background:var(--navy);color:#fff;border-radius:999px;padding:6px 14px 6px 8px;white-space:nowrap;position:relative}
.krill svg{width:22px;height:22px;display:block}
#krillIcon{display:flex}   /* no inline line box: it reserved descender space and lifted the icon 3 px */
.soundwrap{position:relative}
.soundbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;padding:0}
.soundbtn:hover{background:var(--bg)}
.soundbtn svg{width:19px;height:19px;fill:var(--navy)}
.soundbtn svg path[stroke]{stroke:var(--navy)}
.soundmenu{position:absolute;right:0;top:calc(100% + 10px);width:290px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:14px 16px;z-index:50}
.soundmenu[hidden]{display:none}
.soundmenu>b{display:block;font-size:14px;letter-spacing:0;color:var(--ink-mute);margin-bottom:6px}
.sw{display:flex;gap:12px;align-items:flex-start;padding:9px 0;cursor:pointer}
.sw+.sw{border-top:1px solid var(--line)}
.sw input{appearance:none;-webkit-appearance:none;flex:none;width:38px;height:22px;border-radius:999px;background:var(--line-2);position:relative;margin:2px 0 0;cursor:pointer;transition:background .2s}
.sw input::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s}
.sw input:checked{background:var(--blue)}
.sw input:checked::after{transform:translateX(16px)}
.sw input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sw .t{display:block;font-weight:600;font-size:14px}
.sw small{display:block;font-size:14px;color:var(--ink-mute);line-height:1.35}
.krill.pop{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{40%{transform:scale(1.18)}}
.krill .plus{position:absolute;right:6px;top:-6px;color:var(--krill);font-size:14px;font-weight:800;opacity:0;pointer-events:none}
.krill .plus.go{animation:plusup 1s ease forwards}
@keyframes plusup{0%{opacity:0;transform:translateY(8px)}20%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
.mapbtn{border:1px solid var(--line-2);background:#fff;border-radius:8px;padding:7px 12px;font-size:14px;font-weight:500}
.mapbtn:hover{border-color:var(--blue);color:var(--blue)}

/* ---------- shell ---------- */
.shell{position:relative;z-index:auto;display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;max-width:1240px;margin:0 auto;padding:calc(var(--top) + 24px) max(16px,env(safe-area-inset-right)) 80px max(16px,env(safe-area-inset-left))}
.rail{position:sticky;top:calc(var(--top) + 24px);align-self:start}
.gauge{background:rgba(6,17,45,.55);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:16px;color:#fff;backdrop-filter:blur(8px)}
.gauge h3{margin:0 0 2px;font-size:14px;letter-spacing:0;color:var(--foam);font-weight:600}
.gauge .sub{font-size:14px;color:rgba(255,255,255,.6);margin-bottom:12px}
.stops{list-style:none;margin:0;padding:0;position:relative}
.stops::before{content:"";position:absolute;left:15px;top:14px;bottom:14px;width:2px;background:linear-gradient(var(--foam),rgba(127,212,255,.15))}
.stop button{display:flex;gap:12px;align-items:center;width:100%;text-align:left;border:0;background:none;color:#fff;padding:7px 4px;border-radius:10px;position:relative}
.stop button:hover{background:rgba(255,255,255,.07)}
.stop .dot{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--navy-700);border:2px solid rgba(127,212,255,.35);font-size:14px;font-weight:700;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--foam);position:relative;z-index:1;transition:all .3s}
.stop .t{font-size:14px;font-weight:600;line-height:1.2}
.stop .m{font-size:14px;color:rgba(255,255,255,.55);font-weight:500}
.stop.cur .dot{background:var(--blue);border-color:#fff;color:#fff;box-shadow:0 0 0 6px rgba(37,96,255,.35)}
.stop.done .dot{background:var(--aqua);border-color:var(--aqua);color:var(--navy)}
.badges{display:grid;grid-template-columns:repeat(3,44px);justify-content:center;gap:10px 18px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.badges .bd{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.25);font-size:20px;filter:grayscale(1);opacity:.5}
.badges .bd.on{filter:none;opacity:1;background:rgba(56,214,201,.18);border:1px solid var(--aqua)}
.rail .meta{margin-top:12px;font-size:14px;color:rgba(255,255,255,.55);text-align:center}

/* ---------- stage / cards ---------- */
.stage{min-width:0}
.card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.6);overflow:hidden}
.beat{padding:clamp(20px,3.2vw,40px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;letter-spacing:-.005em;color:var(--blue)}
.eyebrow .n{font-family:var(--font);font-variant-numeric:tabular-nums;font-weight:700;background:var(--blue-50);border-radius:6px;padding:1px 7px;letter-spacing:0}
h1,h2,h3{letter-spacing:-.025em;line-height:1.15;margin:0}
h1{font-size:clamp(34px,5.2vw,58px);font-weight:700}
h2{font-size:clamp(24px,3vw,32px);font-weight:700;margin:10px 0 8px}
h3{font-size:20px;font-weight:650}
.lead{font-size:16px;color:var(--ink-soft);max-width:62ch;margin:0 0 20px}
p{max-width:68ch}
.muted{color:var(--ink-soft)}
.beathead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;border-radius:999px;padding:4px 10px;background:var(--bg);color:var(--ink-soft);border:1px solid var(--line)}
.chip.blue{background:var(--blue-50);color:var(--blue-600);border-color:var(--blue-100)}

.footerbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px clamp(20px,3.2vw,40px);border-top:1px solid var(--line);background:#FBFCFE;flex-wrap:wrap}
.steps{display:flex;gap:6px;align-items:center}
.steps i{width:22px;height:5px;border-radius:3px;background:var(--line-2);transition:all .3s}
.steps i.on{background:var(--blue);width:34px}
.steps i.done{background:var(--blue-100)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;padding:11px 18px;font-weight:600;font-size:16px;border:1px solid transparent;transition:all .2s ease;text-decoration:none;white-space:nowrap}
.btn.primary{background:var(--blue);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 4px 14px rgba(29,99,237,.35)}
.btn.primary:hover{background:var(--blue-600)}
.btn.primary[disabled]{background:#B8C7E8;box-shadow:none;cursor:not-allowed}
.btn.ghost{background:#fff;border-color:var(--line-2);color:var(--ink)}
.btn.ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn.dark{background:var(--navy);color:#fff}
.btn.dark:hover{background:var(--navy-700)}
.btn.lg{padding:15px 26px;font-size:16px;border-radius:10px}
.btn svg{width:18px;height:18px}
.hint{font-size:14px;color:var(--ink-mute)}

/* ---------- hero ---------- */
.hero{position:relative;color:#fff;background:radial-gradient(120% 90% at 80% 10%,#2560FF 0%,#0B2A7A 40%,var(--navy) 75%);padding:clamp(28px,5vw,64px) clamp(22px,4vw,56px) 0;overflow:hidden}
.hero .eyebrow{color:var(--foam)}
.hero .eyebrow .n{background:rgba(127,212,255,.15)}
.hero h1{max-width:13ch;margin:14px 0 14px}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,#7FD4FF,#38D6C9);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{color:rgba(255,255,255,.82)}
.hero .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:8px 0 28px}
.hero .facts{display:flex;gap:22px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.75);margin-bottom:28px}
.hero .facts b{display:block;color:#fff;font-size:20px;letter-spacing:-.02em}
.hero .sea{position:relative;height:190px;margin:0 calc(-1*clamp(22px,4vw,56px))}
.hero .waves{position:absolute;left:0;right:0;bottom:0;height:120px}
.hero .waves path{animation:swell 7s ease-in-out infinite alternate}
.hero .waves path:nth-child(2){animation-duration:9s;animation-direction:alternate-reverse}
@keyframes swell{to{transform:translateX(-60px)}}
.hero .breach{position:absolute;left:58%;bottom:34px;width:220px;animation:breach 6s cubic-bezier(.4,0,.3,1) infinite;transform-origin:50% 100%}
@keyframes breach{0%,8%{transform:translateY(120px) rotate(-18deg)}30%{transform:translateY(-36px) rotate(-6deg)}46%{transform:translateY(-44px) rotate(6deg)}70%,100%{transform:translateY(130px) rotate(24deg)}}
.hero .splash{position:absolute;left:calc(58% + 60px);bottom:60px;width:120px;opacity:0;animation:splash 6s ease-out infinite}
@keyframes splash{0%,62%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1)}90%,100%{opacity:0;transform:scale(1.3) translateY(-10px)}}
.mission{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.mission .ava{width:72px;height:72px}
.mission h3{font-size:16px;margin-bottom:4px}
.mission p{margin:0;font-size:16px;color:var(--ink-soft)}
.route{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:18px}
.route .leg{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;background:#fff;position:relative;overflow:hidden}
.route .leg b{display:block;font-size:14px}
.route .leg span{font-size:14px;color:var(--ink-mute)}
.route .leg .d{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px;color:var(--blue);font-weight:600}
.route .leg::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,#7FD4FF,var(--navy));opacity:calc(.25 + var(--i)*.15)}

/* ---------- coach (Humphrey) ---------- */
.coach{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:start;margin:18px 0}
.coach .ava{width:56px;height:56px}
.coach .say{background:var(--blue-50);border:1px solid var(--blue-100);border-radius:4px 14px 14px 14px;padding:12px 16px;font-size:16px;color:var(--navy-700);position:relative}
.coach .say b{color:var(--navy)}
.coach.good .say{background:var(--good-50);border-color:#BDE8CD;color:#0E5130}
.coach.warn .say{background:var(--warn-50);border-color:#F6D99B;color:#6B4800}
.coach.bad .say{background:var(--bad-50);border-color:#F5C2C3;color:#7A1D20}
.coach .hear,.msg.coachmsg .hear{background:none;border:0;padding:0 0 0 2px;margin-left:6px;width:22px;height:18px;display:inline-grid;place-items:center;vertical-align:-4px;border-radius:5px;color:var(--blue);cursor:pointer}
.coach .hear:hover,.msg.coachmsg .hear:hover{background:var(--blue-100)}
.coach .hear svg,.msg.coachmsg .hear svg{width:16px;height:16px;fill:var(--blue)}
.coach .hear svg path[stroke],.msg.coachmsg .hear svg path[stroke]{stroke:var(--blue)}
.resultcoach{max-width:640px;margin:8px auto 0;text-align:left}
.coach .name{font-size:14px;font-weight:700;color:var(--ink-soft);margin-bottom:3px;letter-spacing:.02em}
.swim-in{animation:swimin .5s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes swimin{from{opacity:0;transform:translateY(10px) scale(.98)}}

/* ---------- animated "video" player ---------- */
.player{border-radius:var(--radius-lg);overflow:hidden;background:var(--navy-deep);box-shadow:var(--shadow);position:relative;margin:8px 0 6px}
.player .screen{position:relative;aspect-ratio:16/9;overflow:hidden;background:radial-gradient(90% 90% at 50% 0%,#123A8C 0%,#06112D 70%)}
.player svg.scene{position:absolute;inset:0;width:100%;height:100%}
/* captions sit in their own bar under the picture, never over it */
.player .cap{background:#0A1838;color:#fff;padding:10px 6%;min-height:68px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(255,255,255,.08);font-size:clamp(14px,1.5vw,16px);font-weight:500;text-align:center;line-height:1.35}
.player .title{position:absolute;left:4%;top:5%;color:rgba(255,255,255,.75);font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:opacity .4s}
.player.started .title{opacity:0}
.player .big{position:absolute;inset:0;display:grid;place-items:center;background:rgba(2,8,24,.35);border:0;transition:opacity .3s}
.player .big span{width:86px;height:86px;border-radius:50%;background:var(--blue);display:grid;place-items:center;box-shadow:0 0 0 12px rgba(37,96,255,.25),0 12px 40px rgba(0,0,0,.4);transition:transform .2s}
.player .big:hover span{transform:scale(1.07)}
.player .big svg{width:34px;height:34px;margin-left:5px;fill:#fff}
.player .big em{position:absolute;bottom:16%;color:#fff;font-style:normal;font-weight:600;font-size:14px;padding:5px 12px;border-radius:999px;background:rgba(2,8,24,.72)}
.player.playing .big,.player.started .big{opacity:0;pointer-events:none}
.ctrl{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#0A1838;color:#fff}
.ctrl button{background:none;border:0;color:#fff;width:32px;height:32px;display:grid;place-items:center;border-radius:6px}
.ctrl button:hover{background:rgba(255,255,255,.1)}
.ctrl button[hidden]{display:none}
.ctrl svg{width:18px;height:18px;fill:#fff}
.ctrl .bar{flex:1;height:6px;background:rgba(255,255,255,.18);border-radius:3px;position:relative;cursor:pointer}
.ctrl .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--foam);border-radius:3px;width:0}
.ctrl .bar b{position:absolute;top:-3px;width:2px;height:12px;background:rgba(255,255,255,.35)}
.ctrl .time{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px;color:rgba(255,255,255,.7);min-width:74px;text-align:right}
/* scene element states: hidden until their cue */
.scene [data-in]{opacity:0;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.scene [data-in].on{opacity:1}
.scene .up{transform:translateY(24px)} .scene .up.on{transform:none}
.scene .zoom{transform:scale(.6);transform-box:fill-box;transform-origin:center} .scene .zoom.on{transform:none}
.scene .left{transform:translateX(-40px)} .scene .left.on{transform:none}
.scene .right{transform:translateX(40px)} .scene .right.on{transform:none}
.scene [data-out].gone{opacity:.12!important}
.scene [data-out].vanish.gone{opacity:0!important}
.scene .draw{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset 1.2s ease,opacity .4s}
.scene .draw.on{stroke-dashoffset:0}
.scene .pulse.on{animation:spulse 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes spulse{50%{transform:scale(1.08)}}
.scene .blink.on{animation:sblink 1s steps(2) infinite}
@keyframes sblink{50%{opacity:.25}}
.scene .flow.on{stroke-dasharray:6 10;animation:sflow 1s linear infinite}
@keyframes sflow{to{stroke-dashoffset:-32}}
.scene text{font-family:var(--font);letter-spacing:-.01em}

/* ---------- flip cards ---------- */
.flips{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0}
.flip{perspective:1000px;min-height:210px;border:0;padding:0;background:none;text-align:left}
.flip .in{position:relative;width:100%;height:100%;min-height:210px;transition:transform .7s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d}
.flip.on .in{transform:rotateY(180deg)}
.flip .f,.flip .b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:8px}
.flip .f{background:linear-gradient(160deg,#fff,#F3F6FC);border:1px solid var(--line-2)}
.flip .b{background:linear-gradient(160deg,var(--navy-700),var(--navy));color:#fff;transform:rotateY(180deg)}
.flip .tag{font-size:14px;font-weight:700;letter-spacing:0}
.flip .f .tag{color:var(--bad)}
.flip .b .tag{color:var(--aqua)}
.flip .q{font-size:20px;font-weight:650;letter-spacing:-.02em;line-height:1.25}
.flip .b p{margin:0;font-size:16px;color:rgba(255,255,255,.88)}
.flip .tap{margin-top:auto;font-size:14px;color:var(--ink-mute);display:flex;gap:6px;align-items:center}
.flip .b .tap{color:rgba(255,255,255,.55)}
.flip:hover .f{border-color:var(--blue)}

/* ---------- buckets / matching / sorting ---------- */
.pool{display:flex;flex-wrap:wrap;gap:10px;min-height:56px;padding:14px;background:var(--bg);border:1.5px dashed var(--line-2);border-radius:var(--radius);margin:14px 0}
.pool:empty::after{content:"All placed. Nice swimming.";color:var(--ink-mute);font-size:14px}
.tile{background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:10px 14px;font-size:14px;line-height:1.35;box-shadow:var(--shadow-sm);text-align:left;max-width:100%;transition:transform .15s,border-color .15s,box-shadow .15s;touch-action:manipulation;user-select:none}
.tile:hover{border-color:var(--blue);transform:translateY(-1px)}
.tile.sel{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-100);transform:translateY(-2px)}
.tile.ok{border-color:var(--good);background:var(--good-50)}
.tile.no{border-color:var(--bad);background:var(--bad-50);animation:shake .4s}
.tile[draggable=true]{cursor:grab}
.tile.dragging{opacity:.4}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.bin{border:1.5px solid var(--line);border-radius:var(--radius);padding:12px;min-height:120px;background:#fff;transition:all .2s;display:flex;flex-direction:column;gap:8px;text-align:left}
.bin .bh{display:flex;align-items:center;gap:8px;font-weight:650;font-size:16px}
.bin .bh small{font-weight:500;color:var(--ink-mute);font-size:14px;display:block}
.bin .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:16px;flex:none}
.bin.target{border-color:var(--blue);background:var(--blue-50);cursor:pointer}
.bin.over{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-100)}
.bin .tile{font-size:14px;padding:8px 10px}
.match{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;align-items:start}
.match .quotes{display:flex;flex-direction:column;gap:10px}
.match .slots{display:flex;flex-direction:column;gap:10px}
.slot{display:flex;flex-direction:column;gap:6px;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;min-height:64px;transition:all .2s;text-align:left}
.slot .lbl{font-size:14px;font-weight:700;color:var(--navy);display:flex;gap:8px;align-items:center}
.slot .lbl i{width:10px;height:10px;border-radius:3px;background:var(--c,var(--blue));flex:none}
.slot .lbl small{font-weight:500;color:var(--ink-mute)}
.slot.target{border-color:var(--blue);background:var(--blue-50);cursor:pointer}
.slot.over{box-shadow:0 0 0 4px var(--blue-100)}
.slot.filled{border-color:var(--good);background:var(--good-50)}
.slot .placed{font-size:14px;color:#0E5130}
.quote{font-size:14px}
.quote::before{content:"“";font-weight:800;color:var(--blue);margin-right:2px}
.quote::after{content:"”";font-weight:800;color:var(--blue)}

/* swipe deck */
.deck{display:grid;grid-template-columns:1fr;place-items:center;margin:18px 0 8px;min-height:250px;position:relative}
.swipe{grid-area:1/1;width:min(460px,100%);min-height:200px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;gap:10px;justify-content:center;transition:transform .45s cubic-bezier(.3,1.2,.5,1),opacity .4s;touch-action:pan-y;user-select:none}
.swipe .k{font-size:14px;font-weight:700;letter-spacing:0;color:var(--ink-mute)}
.swipe .line{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.swipe.back1{transform:translateY(10px) scale(.96);opacity:.7}
.swipe.back2{transform:translateY(20px) scale(.92);opacity:.4}
.swipe.back1>*,.swipe.back2>*{visibility:hidden}   /* the stacked cards behind are paper, not faded text */
.swipe.outL{transform:translateX(-140%) rotate(-18deg);opacity:0}
.swipe.outR{transform:translateX(140%) rotate(18deg);opacity:0}
.swipe .stamp{position:absolute;top:18px;padding:4px 10px;border:3px solid;border-radius:6px;font-weight:800;letter-spacing:.06em;font-size:16px;opacity:0;transform:rotate(-10deg)}
.swipe .stamp.l{left:18px;color:var(--bad)} .swipe .stamp.r{right:18px;color:var(--good);transform:rotate(10deg)}
.swipe{position:relative}
.swipebtns{display:flex;gap:12px;justify-content:center;margin:8px 0}
.swipebtns .btn{min-width:150px}
.tally{display:flex;gap:16px;justify-content:center;font-size:14px;color:var(--ink-soft)}
.tally b{color:var(--ink)}

/* reorder */
.order{list-style:none;margin:16px 0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:o}
.order li{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:10px 10px 10px 12px;box-shadow:var(--shadow-sm);transition:transform .25s,border-color .2s,background .2s}
.order li::before{counter-increment:o;content:counter(o);width:28px;height:28px;border-radius:50%;background:var(--blue-50);color:var(--blue-600);font-weight:700;font-size:14px;display:grid;place-items:center}
.order li .tx{font-size:16px}
.order li .tx small{display:block;color:var(--ink-mute);font-size:14px;font-weight:600;letter-spacing:0}
.order li .mv{display:flex;gap:4px}
.order li .mv button{width:32px;height:32px;border-radius:8px;border:1px solid var(--line-2);background:#fff;display:grid;place-items:center}
.order li .mv button:hover{border-color:var(--blue)}
.order li .mv svg{width:14px;height:14px}
.order li.ok{border-color:var(--good);background:var(--good-50)}
.order li.no{border-color:var(--bad);background:var(--bad-50)}
.order li.drag-over{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-100)}

/* hotspots (sonar sweep) */
.sonar{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:radial-gradient(70% 90% at 50% 50%,#0B2A6E,#04102A);aspect-ratio:16/10;margin:16px 0}
.sonar svg{position:absolute;inset:0;width:100%;height:100%}
.sonar .sweep{transform-origin:50% 50%;animation:sweep 5s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.hot{position:absolute;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(56,214,201,.18);display:grid;place-items:center;padding:0}
.hot::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--aqua);animation:ping 2s ease-out infinite}
.hot span{width:18px;height:18px;border-radius:50%;background:var(--aqua);box-shadow:0 0 18px var(--aqua);display:grid;place-items:center;font-size:14px;font-weight:800;color:var(--navy)}
.hot.seen{background:rgba(255,255,255,.12)}
.hot.seen::before{animation:none;border-color:rgba(255,255,255,.4)}
.hot.seen span{background:#fff;box-shadow:none}
@keyframes ping{from{transform:scale(.8);opacity:1}to{transform:scale(1.9);opacity:0}}
.hot-label{position:absolute;transform:translate(-50%,0);color:rgba(255,255,255,.75);font-size:14px;font-weight:600;white-space:nowrap;pointer-events:none;margin-top:28px}
.reveal{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;background:#fff;min-height:132px}
.reveal .k{font-size:14px;font-weight:700;letter-spacing:0;color:var(--blue)}
.reveal h3{margin:4px 0 6px}
.reveal p{margin:0 0 8px;font-size:16px;color:var(--ink-soft)}
.reveal .ask{background:var(--navy);color:#fff;border-radius:10px;padding:10px 14px;font-size:14px}
.reveal .ask b{color:var(--foam);font-size:14px;letter-spacing:0;display:block}

/* tabs / framework explorer */
.vf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0}
.vf .side{border-radius:var(--radius);padding:14px;border:1px solid var(--line)}
.vf .side h4{margin:0 0 10px;font-size:14px;letter-spacing:0;color:var(--ink-mute)}
.vf .side.them{background:linear-gradient(180deg,#F5F9FF,#fff)}
.vf .side.us{background:linear-gradient(180deg,#F2FBFA,#fff)}
.vf .el{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 12px;margin-bottom:8px;font-weight:600;font-size:14px;transition:all .2s}
.vf .el i{width:12px;height:12px;border-radius:4px;background:var(--c);flex:none}
.vf .el small{margin-left:auto;font-weight:500;color:var(--ink-mute);font-size:14px}
.vf .el:hover{border-color:var(--c)}
.vf .el.on{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent)}
.vf .el.seen small::after{content:" ✓";color:var(--good)}
.vfd{border-radius:var(--radius);background:var(--navy);color:#fff;padding:18px 20px;min-height:150px;position:relative;overflow:hidden}
.vfd .k{font-size:14px;font-weight:700;letter-spacing:0;color:var(--foam)}
.vfd h3{margin:4px 0 8px;font-size:20px}
.vfd p{margin:0 0 10px;color:rgba(255,255,255,.85);font-size:16px}
.vfd .ex{border-left:3px solid var(--aqua);padding:6px 12px;background:rgba(255,255,255,.06);border-radius:0 8px 8px 0;font-size:14px}
.vfd .ex b{display:block;font-size:14px;letter-spacing:0;color:var(--aqua)}

/* three questions strip */
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}
.three div{border-radius:var(--radius);padding:16px;background:var(--bg);border:1px solid var(--line)}
.three b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--blue);font-size:14px}
.three p{margin:6px 0 0;font-weight:600;font-size:16px;letter-spacing:-.01em}

/* call simulator */
.call{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0;min-height:560px}
.call .conv{display:flex;flex-direction:column;border-right:1px solid var(--line);min-width:0}
.call .hdr{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:#FBFCFE}
.call .hdr .ava{width:44px;height:44px;flex:none}
.call .hdr b{display:block;font-size:16px}
.call .hdr span{font-size:14px;color:var(--ink-mute)}
.call .live{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--bad);letter-spacing:0}
.call .live i{width:8px;height:8px;border-radius:50%;background:var(--bad);animation:sblink 1.2s infinite}
.call .timer{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink-mute)}
.msgs{flex:1;padding:18px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;max-height:520px;scroll-behavior:smooth;background:linear-gradient(180deg,#fff,#F8FAFD)}
.msg{max-width:84%;padding:11px 15px;border-radius:16px;font-size:16px;line-height:1.45;animation:swimin .4s both}
.msg.them{background:#fff;border:1px solid var(--line);border-top-left-radius:4px;align-self:flex-start;box-shadow:var(--shadow-sm)}
.msg.me{background:var(--blue);color:#fff;border-top-right-radius:4px;align-self:flex-end}
.msg.sys{align-self:center;background:none;color:var(--ink-mute);font-size:14px;font-weight:600;padding:2px}
.msg.coachmsg{align-self:stretch;max-width:100%;background:var(--blue-50);border:1px solid var(--blue-100);color:var(--navy-700);font-size:14px;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}
.msg.coachmsg.g{background:var(--good-50);border-color:#BDE8CD;color:#0E5130}
.msg.coachmsg.o{background:var(--warn-50);border-color:#F6D99B;color:#6B4800}
.msg.coachmsg.p{background:var(--bad-50);border-color:#F5C2C3;color:#7A1D20}
.msg.coachmsg svg{width:34px;height:34px}
.msg.coachmsg .hear{float:right;margin:0 0 4px 8px}
.typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:16px;border-top-left-radius:4px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-mute);animation:typ 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typ{30%{transform:translateY(-4px);opacity:.5}}
.choices{padding:14px 18px;border-top:1px solid var(--line);background:#fff;display:flex;flex-direction:column;gap:8px}
.choices .k{font-size:14px;font-weight:700;letter-spacing:0;color:var(--ink-mute);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.choices .k span:last-child{flex:none;white-space:nowrap}
.choice{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;text-align:left;border:1px solid var(--line-2);border-radius:10px;background:#fff;padding:10px 12px;font-size:14px;line-height:1.4;transition:all .15s}
.choice:hover{border-color:var(--blue);background:var(--blue-50)}
.choice b{width:24px;height:24px;border-radius:6px;background:var(--bg);display:grid;place-items:center;font-size:14px;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.side{background:#FBFCFE;display:flex;flex-direction:column}
.call .side{padding:16px;gap:16px}
.meter h4,.notes h4{margin:0 0 8px;font-size:14px;letter-spacing:0;color:var(--ink-mute)}
.trust{height:12px;border-radius:6px;background:var(--line);overflow:hidden;position:relative}
.trust i{position:absolute;inset:0 auto 0 0;width:40%;background:linear-gradient(90deg,#F7B500,#12A150);border-radius:6px;transition:width .8s cubic-bezier(.3,1.3,.5,1)}
.trustlbl{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-mute);margin-top:6px}
.trustlbl b{color:var(--ink)}
.notes ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.notes li{border:1px dashed var(--line-2);border-radius:8px;padding:8px 10px;font-size:14px;color:var(--ink-mute);transition:all .4s}
.notes li b{display:flex;gap:6px;align-items:center;font-size:14px;color:var(--ink-soft)}
.notes li b i{width:9px;height:9px;border-radius:3px;background:var(--c)}
.notes li.got{border-style:solid;border-color:var(--c);background:#fff;color:var(--ink);animation:swimin .5s both}
.notes li.got b{color:var(--navy)}

/* objections */
.objs{display:flex;flex-direction:column;gap:14px;margin:16px 0}
.obj{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.obj .oq{display:flex;gap:12px;align-items:center;background:var(--navy);color:#fff;padding:14px 16px}
.obj .oq .wv{font-size:24px}
.obj .oq b{font-size:16px;letter-spacing:-.01em}
.obj .oq small{display:block;font-size:14px;color:var(--foam);letter-spacing:0;font-weight:600}
.obj .opts{padding:12px;display:flex;flex-direction:column;gap:8px}
.obj .why{padding:0 16px 14px;font-size:14px;color:var(--ink-soft)}
.choice.right{border-color:var(--good);background:var(--good-50)}
.choice.wrong{border-color:var(--bad);background:var(--bad-50)}
.choice[disabled]{cursor:default}
.choice[disabled]:not(.right):not(.wrong){opacity:.55}

/* checklist */
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin:16px 0}
.check{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;text-align:left;border:1px solid var(--line-2);border-radius:10px;padding:12px;background:#fff;font-size:14px}
.check .bx{width:24px;height:24px;border-radius:7px;border:2px solid var(--line-2);display:grid;place-items:center;transition:all .2s}
.check.on{border-color:var(--good);background:var(--good-50)}
.check.on .bx{background:var(--good);border-color:var(--good)}
.check .bx svg{width:14px;height:14px;stroke:#fff;opacity:0}
.check.on .bx svg{opacity:1}
.check b{display:block;font-size:14px}
.check span{color:var(--ink-soft);font-size:14px}

/* quiz */
.qwrap{max-width:760px}
.qprog{display:flex;gap:5px;margin:14px 0 22px}
.qprog i{flex:1;height:6px;border-radius:3px;background:var(--line)}
.qprog i.ok{background:var(--good)} .qprog i.no{background:var(--bad)} .qprog i.cur{background:var(--blue)}
.qq{font-size:24px;font-weight:650;letter-spacing:-.02em;line-height:1.3;margin:0 0 16px}
.qopts{display:flex;flex-direction:column;gap:10px}
.qopts .choice{font-size:16px;padding:13px 14px}
.qexp{margin-top:14px}
.result{text-align:center;padding:10px 0}
.ring{width:170px;height:170px;margin:0 auto 10px;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:40px;line-height:1;letter-spacing:-.03em;text-align:center}
.ring b small{display:block;font-size:14px;line-height:1.2;color:var(--ink-mute);font-weight:500;letter-spacing:0;margin-top:6px}
.certform{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:18px 0}
.certform input{font:inherit;font-size:16px;border:1.5px solid var(--line-2);border-radius:8px;padding:12px 14px;min-width:min(320px,100%)}
.certform input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-100)}
.certpreview{max-width:760px;margin:18px auto 0;box-shadow:var(--shadow-lg);border-radius:8px;overflow:hidden;background:#fff}
.certpreview .scaler{transform-origin:0 0}

/* battlecard on the result screen */
.bcbox{margin:44px auto 0;padding-top:34px;border-top:1px solid var(--line);max-width:760px}
.bcbox h2{margin:8px 0 8px}
.bcpreview{max-width:560px}

/* battlecard (rendered at 1275x1650 then rasterized) */
.bc{text-align:left;width:1275px;height:1650px;position:relative;background:#fff;font-family:var(--font);color:var(--ink);overflow:hidden;font-size:20px;line-height:1.4;display:flex;flex-direction:column}
.bc .bch{flex:none;height:150px;padding:0 64px;display:flex;align-items:center;justify-content:space-between;gap:30px;color:#fff;background:radial-gradient(120% 160% at 90% 0%,#2560FF 0%,#0B2A7A 45%,#00153C 85%)}
.bc .bch .l{display:flex;align-items:center;gap:18px}
.bc .bch .l svg{width:70px;height:70px;flex:none}
.bc .bch .l b{display:block;font-size:38px;letter-spacing:-.025em;line-height:1.1;white-space:nowrap}
.bc .bch .l span{font-size:18px;color:rgba(255,255,255,.75)}
.bc .bch .r{text-align:right}
.bc .bch .r small{display:block;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#7FD4FF;font-weight:700}
.bc .bch .r b{display:block;font-size:28px;letter-spacing:-.02em;margin:2px 0}
.bc .bch .r span{display:block;font-size:16px;color:rgba(255,255,255,.75)}
.bc .bcg{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:30px 64px 0;align-items:start}
.bc section{margin-bottom:23px}
.bc h4{display:flex;align-items:center;gap:10px;margin:0 0 9px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:#1D63ED;font-weight:700}
.bc h4 i{font-style:normal;width:26px;height:26px;border-radius:50%;background:#1D63ED;color:#fff;display:grid;place-items:center;letter-spacing:0;font-size:14px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.bc .ask{border-left:5px solid var(--c);padding:2px 0 2px 14px;margin-bottom:11px;font-size:19.5px}
.bc .ask small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#64748B}
.bc .blind{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bc .blind div{background:#F4F6F9;border-radius:10px;padding:9px 12px;font-size:16.5px;color:#475569;line-height:1.3}
.bc .blind b{display:block;color:#00153C;font-size:16.5px}
.bc .li{display:flex;gap:10px;align-items:baseline;margin-bottom:7px}
.bc .li .mk{flex:none;width:22px;height:22px;border-radius:50%;background:#EAF1FF;color:#1D63ED;font-weight:700;font-size:13px;display:grid;place-items:center;font-family:var(--mono);font-variant-numeric:tabular-nums;position:relative;top:3px}
.bc .li.dont .mk{background:#FDECEC;color:#E5484D;font-family:var(--font);font-size:16px}
.bc .bo{margin-bottom:13px;font-size:17.5px;color:#475569;line-height:1.34}
.bc .bo b{display:block;color:#00153C;font-size:18px}
.bc .bcb{flex:1 1 auto;min-height:0;margin-top:8px;padding:0 64px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.bc .bcb section{margin:0;border-radius:16px;padding:20px 24px;font-size:17.5px;line-height:1.38}
.bc .bcb p{margin:0 0 8px}
.bc .ind{background:#EAF1FF;border:1.5px solid #D6E3FF}
.bc .ind .tip{margin:12px 0 0;font-size:15px;color:#64748B}
.bc .focus{background:#00153C;color:#fff}
.bc .focus h4{color:#7FD4FF}
.bc .focus .fi{margin-bottom:9px;color:rgba(255,255,255,.85)}
.bc .focus .fi b{display:block;color:#38D6C9}
.bc .focus .none{color:rgba(255,255,255,.8)}
.bc .fine{flex:none;padding:14px 64px 26px;font-size:13px;line-height:1.4;color:#94A3B8}

/* certificate (rendered at 1650x1275 then rasterized) */
.cert{text-align:left;width:1650px;height:1275px;position:relative;background:#fff;font-family:var(--font);color:var(--ink);overflow:hidden}
.cert .band{position:absolute;inset:0 0 auto 0;height:300px;background:radial-gradient(120% 140% at 85% 0%,#2560FF 0%,#0B2A7A 45%,#00153C 80%)}
.cert .wave{position:absolute;left:-12%;right:-12%;top:248px;height:150px;background:#fff;border-radius:50% 50% 0 0/100% 100% 0 0}
.cert .frame{position:absolute;inset:36px;border:2px solid rgba(29,99,237,.18);border-radius:22px}
.cert .head{position:absolute;left:110px;top:92px;display:flex;align-items:center;gap:22px;color:#fff}
.cert .head svg{width:96px;height:96px}
.cert .head b{font-size:40px;letter-spacing:-.02em;display:block}
.cert .head span{font-size:20px;color:rgba(255,255,255,.75);font-weight:500}
.cert .kicker{position:absolute;right:110px;top:110px;color:#7FD4FF;font-size:18px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;text-align:right}
.cert .kicker small{display:block;color:rgba(255,255,255,.7);letter-spacing:.05em;font-weight:500;text-transform:none;font-size:18px;margin-top:6px}
.cert .body{position:absolute;left:110px;right:110px;top:400px;text-align:left}
.cert .body .t1{font-size:22px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#1D63ED}
.cert .body .nm{font-size:96px;font-weight:750;letter-spacing:-.035em;line-height:1.05;margin:22px 0 18px;color:#00153C}
.cert .body .rule{width:180px;height:6px;border-radius:3px;background:linear-gradient(90deg,#2560FF,#38D6C9);margin-bottom:28px}
.cert .body .t2{font-size:29px;color:#475569;max-width:1220px;line-height:1.45}
.cert .skills{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.cert .skills span{font-size:20px;font-weight:600;color:#1E4DCC;background:#EAF1FF;border:1.5px solid #D6E3FF;border-radius:999px;padding:10px 22px}
.cert .body .t2 b{color:#0B1220}
.cert .foot{position:absolute;left:110px;right:110px;bottom:96px;display:flex;gap:56px;align-items:flex-end}
.cert .foot div small{display:block;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#64748B;font-weight:600;margin-bottom:8px}
.cert .foot div b{font-size:26px;letter-spacing:-.01em}
.cert .seal{margin-left:auto;width:210px;height:210px;flex:none}
.cert .body .who{font-size:26px;font-weight:600;color:#1E4DCC;margin:-6px 0 22px}
.cert .fine{position:absolute;left:110px;right:110px;bottom:46px;font-size:14px;color:#94A3B8}
.cert .whale-wm{position:absolute;right:-40px;bottom:180px;width:620px;opacity:.06}

/* toast / badge */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(calc(100% + 60px));visibility:hidden;z-index:80;background:var(--navy);color:#fff;border-radius:14px;padding:12px 18px 12px 12px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-lg);transition:transform .5s cubic-bezier(.3,1.4,.5,1);max-width:calc(100vw - 32px)}
.toast.on{transform:translateX(-50%) translateY(0);visibility:visible}
.toast .medal{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7FD4FF,#1D63ED);display:grid;place-items:center;font-size:24px;flex:none;box-shadow:0 0 0 4px rgba(127,212,255,.25)}
.toast b{display:block;font-size:16px}
.toast span{font-size:14px;color:rgba(255,255,255,.7)}
canvas.confetti{position:fixed;inset:0;z-index:90;pointer-events:none}

/* module transition: the whale swims across */
.swimby{position:fixed;inset:0;z-index:70;pointer-events:none;display:none}
.swimby.go{display:block}
.swimby svg{position:absolute;top:38%;width:300px;left:-320px;animation:swimby 1.4s cubic-bezier(.5,0,.3,1) forwards}
@keyframes swimby{to{transform:translateX(calc(100vw + 660px))}}
.swimby .trail{position:absolute;top:calc(38% + 70px);left:0;right:0;height:2px}

/* map overlay (mobile) */
.scrim{display:none}

/* footer disclaimer */
.legal{position:relative;z-index:1;max-width:1240px;margin:-50px auto 0;padding:0 16px 30px;color:rgba(255,255,255,.55);font-size:14px;text-align:center}
.legal a{color:rgba(255,255,255,.75)}

/* briefing: make it yours */
.yours{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;background:#fff}
.yours .yh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.yours .yh h3{font-size:16px;margin:0}
.yours .yh span{font-size:14px;color:var(--ink-mute)}
.yours .yf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.yours label{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600;color:var(--ink-soft)}
.yours input,.yours select{font:inherit;font-size:16px;font-weight:400;color:var(--ink);border:1.5px solid var(--line-2);border-radius:8px;height:46px;padding:0 12px;background:#fff;min-width:0;width:100%}
.yours select{-webkit-appearance:none;appearance:none;padding-right:38px;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/12px 8px}
.yours input:focus,.yours select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-100)}

/* misc */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}
.kpi{border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:#fff}
.kpi b{display:block;font-size:24px;letter-spacing:-.03em;color:var(--navy)}
.kpi span{font-size:14px;color:var(--ink-mute)}
.done-banner{display:flex;gap:14px;align-items:center;background:linear-gradient(90deg,var(--good-50),#fff);border:1px solid #BDE8CD;border-radius:var(--radius);padding:12px 16px;margin-top:16px;animation:swimin .5s both}
.done-banner .medal{font-size:24px}
.done-banner b{display:block}
.done-banner span{font-size:14px;color:var(--ink-soft)}
.scorecard{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.scorecard div{border-radius:var(--radius);padding:14px;background:var(--bg);border:1px solid var(--line)}
.scorecard b{display:block;font-size:24px;letter-spacing:-.02em}
.scorecard span{font-size:14px;color:var(--ink-mute)}
.ending{border-radius:var(--radius);padding:12px 16px;margin:4px 0 10px;border:1px solid var(--line);background:var(--bg)}
.ending b{display:block;font-size:16px}
.ending span{font-size:14px;color:var(--ink-soft)}
.ending.good{background:var(--good-50);border-color:#BDE8CD}
.ending.okay{background:var(--blue-50);border-color:var(--blue-100)}
.ending.warn{background:var(--warn-50);border-color:#F6D99B}
.ending.bad{background:var(--bad-50);border-color:#F5C2C3}
.call .hdr .callmu{background:none;border:0;width:34px;height:34px;display:grid;place-items:center;border-radius:8px;color:var(--ink)}
.call .hdr .callmu:hover{background:var(--bg)}
.call .hdr .callmu svg{width:20px;height:20px;fill:var(--ink)}
.call .hdr .callmu svg path[stroke]{stroke:var(--ink)}
.playback{background:var(--navy);color:#fff;border-radius:var(--radius);padding:16px 18px;margin:12px 0}
.playback h4{margin:0 0 8px;font-size:14px;letter-spacing:0;color:var(--foam)}
.playback ul{margin:0;padding-left:18px}
.playback li{margin:4px 0;font-size:14px;color:rgba(255,255,255,.9)}
.playback li b{color:var(--aqua)}

@media (max-width:1180px){.route{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{position:fixed;z-index:60;top:var(--top);left:0;bottom:0;width:min(320px,88vw);padding:16px;background:var(--navy-deep);transform:translateX(-105%);transition:transform .3s;overflow-y:auto}
  body.map-open .rail{transform:none}
  body.map-open .scrim{display:block;position:fixed;inset:var(--top) 0 0 0;z-index:55;background:rgba(0,0,0,.4)}
  .call{grid-template-columns:minmax(0,1fr)}
  .call .conv{border-right:0}
  .call .side{border-top:1px solid var(--line)}
  .notes ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .msgs{max-height:420px}
}
@media (min-width:981px){.mapbtn{display:none}}
@media (max-width:720px){
  .match{grid-template-columns:minmax(0,1fr)}
  .vf,.two,.three{grid-template-columns:minmax(0,1fr)}
  .kpis{grid-template-columns:minmax(0,1fr)}
  .depthpill{display:none}
  .brand small{display:none}
  .hero .breach{left:auto;right:-20px;width:170px}
  .hero .splash{display:none}
  .mission{grid-template-columns:minmax(0,1fr)}
  .yours .yf{grid-template-columns:minmax(0,1fr)}
  .route{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footerbar .steps{display:none}
  .player .cap{font-size:14px;min-height:62px;padding:8px 14px}
  .ctrl{flex-wrap:wrap;row-gap:8px;padding:12px 12px 8px}
  .ctrl .bar{order:-1;flex-basis:100%;flex-grow:0}
  .ctrl .time{margin-left:auto}
  .krill .kl{display:none}
  .krill{padding-right:12px}
  .brand b{font-size:16px}
  .top{gap:10px}
  .mapbtn{padding:6px 9px;font-size:14px}
}

/* jargon: the first use on a screen is tappable for a definition */
.term{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;border-bottom:1.5px dotted currentColor;cursor:help;letter-spacing:inherit}
.term:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}
.termdef{display:block;margin:.5em 0 0;padding:.45em .7em;border-radius:8px;background:color-mix(in srgb,var(--blue) 14%,transparent);font-size:14px;font-weight:500;line-height:1.45}
.termdef[hidden]{display:none}
.termdef b{margin-right:.35em}

/* never trapped: Start over in the heading, Skip for now beside Continue */
[hidden]{display:none!important}   /* .btn's display would otherwise beat the hidden attribute */
.btn.sm{padding:7px 12px;font-size:14px}
.btn.sm svg{width:15px;height:15px}
.beathead .restart{order:2;margin-left:auto}
#skip{white-space:nowrap}

/* the call: your own line first */
.ownline{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--ink-soft);cursor:pointer}
.ownline input{margin-top:3px;accent-color:var(--blue)}
.myline{display:grid;gap:8px}
.myline label{font-size:14px;font-weight:600;color:var(--ink-soft)}
.myline textarea,.plan input,.plan textarea{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line-2);border-radius:8px;background:#fff;color:var(--ink);resize:vertical}
.myline textarea:focus,.plan input:focus,.plan textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:transparent}
.myline .btn{justify-self:start}
.msg.mine{align-self:stretch;max-width:100%;background:#fff;border:1px dashed var(--line-2);color:var(--ink);font-size:14px;display:grid;gap:4px}
.msg.mine b{font-size:14px;color:var(--ink-mute);font-weight:700}
.msg.mine .vs{color:var(--ink-soft)}

/* the worked example: the rep on the right and the CISO on the left, as in the live call */
.wx ol{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.wx li{display:grid;gap:4px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);animation:wxin .35s ease}
.wx li b{font-size:14px;color:var(--ink-soft)}
.wx li.rep{background:var(--blue-50);border-color:var(--blue-100);margin-left:clamp(0px,8vw,80px)}
.wx li.rep small{color:var(--blue-600);font-size:14px}
.wx li.them{background:#fff;margin-right:clamp(0px,8vw,80px)}
.wx .chip{justify-self:start;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--ink)}
.wx .chip i{width:8px;height:8px;border-radius:2px;background:var(--c)}
.wxbtns{display:flex;gap:10px;flex-wrap:wrap}
@keyframes wxin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wx li{animation:none}}

/* the planner */
.plan{display:grid;gap:12px;margin:0 0 14px}
.prow{display:grid;gap:5px}
.prow span{font-size:14px;font-weight:600;color:var(--ink-soft)}

/* the footer's right side: what's left, Skip, Continue */
.fwd{display:flex;gap:12px;align-items:center}
@media (max-width:640px){
  .footerbar{row-gap:10px}
  .fwd{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-end}
  .fwd #gate{flex:1 1 100%;text-align:right}
  .fwd #gate:empty{display:none}
}

/* the scene's poster: its final frame, dimmed and still, until play */
.player.poster svg.scene{filter:brightness(.62) saturate(.85)}
.player.poster svg.scene *{animation-play-state:paused}
.player.snap svg.scene *{transition:none!important}
@media (max-width:600px){
  .player .title{display:none}                     /* the heading right above says the same; on a phone it covers the poster */
  .beathead .restart{order:-1;margin-left:auto}    /* top right of the card, not between the title and its intro */
}
.eyebrow .n{white-space:nowrap}

/* no word alone on a paragraph's last line (Brandon, 2026-10-21) */
p{text-wrap:pretty}