/* ============ Decktell · design system ============ */
:root{
  /* "Playroom v3": the brand's warm cream paper (landing / email / paper-stage family),
     ink text, royal-blue interactive primary, pill geometry. Warmth lives in the canvas
     and the content (illustrations, thumbs, avatars); state colors stay semantic. */
  --bg:#FBF6EC; --bg2:#F4ECDA; --surf:#FFFFFF; --surf2:#F7F2E7;
  --tx:#17181C; --mut:#6E6758; --faint:#A29A87;
  --bd:#EBE3D2; --bd2:#DFD5C0;
  --amber:#E8894A; --amberT:#EB7A3E;
  --blue:#EB7A3E; --yellow:#F7B92E; --lav:#B9A5F8;
  --teal:#4CC38A; --coral:#E15B5B;
  --shadow:0 2px 4px rgba(120,74,26,.05),0 18px 44px -20px rgba(120,74,26,.20);
  --font:"Poppins",-apple-system,"SF Pro Display",system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
/* Reserve the vertical scrollbar's space on every page so the viewport width never
   changes between a scrolling (tall) page and a short one. This is what keeps the
   centered top bar — and its tabs — from shifting when you move between pages.
   scrollbar-gutter for modern browsers; overflow-y:scroll as the universal fallback. */
html{overflow-y:scroll;scrollbar-gutter:stable}
body{font-family:var(--font);background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:var(--amber)}
.app{max-width:1180px;margin:0 auto;padding:18px clamp(14px,4vw,36px) 70px}
/* workspace pages share the library's band so the top bar (and its tabs) sits in the
   exact same place across Library/Team/Assignments — nav brand, cards, and table still
   share a left edge, just on the wider 1120 column. */
.app:has(.wsp){max-width:1180px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;cursor:pointer;transition:opacity .15s}
.brand:hover{opacity:.85}
.mark{width:38px;height:38px;flex:none;display:block}
.mark .mark-svg{width:100%;height:100%;display:block;filter:drop-shadow(0 5px 12px rgba(180,95,30,.38))}
.brand h1,.brand .brand-name{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em;margin:0;line-height:1}
.brand .tag{font-size:12px;color:var(--mut);margin-top:2px}

/* tabs + view switching */
.top{flex-wrap:wrap}
/* toggle switch */
.switch{width:42px;height:23px;border-radius:999px;border:0;background:var(--bd2);position:relative;cursor:pointer;transition:background .18s;flex:none;padding:0}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;transition:left .18s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch.on{background:var(--amber)}
.switch.on::after{left:21px}
.dsel{background:var(--surf2);border:1px solid var(--bd2);border-radius:9px;color:var(--tx);font-family:var(--font);font-size:13px;font-weight:600;padding:7px 11px;cursor:pointer;outline:none}
.dsel:hover,.dsel:focus{border-color:var(--amber)}
/* (the old studio filter-pill block lived here; it was dead CSS whose bare `.pill`
   selector leaked hover/cursor styles onto every status pill product-wide) */
.pg-row-col{flex-direction:column;align-items:flex-start;gap:9px}
.style-row{display:flex;align-items:center;gap:11px;margin-top:13px;flex-wrap:wrap}
.style-row-l{font-size:12px;color:var(--faint);font-weight:500;white-space:nowrap}
/* consolidated appearance/motion controls card */
.controls-card{background:var(--surf);border:0;border-radius:20px;box-shadow:var(--shadow);margin-bottom:18px}
.cc-head{font-size:12px;color:var(--faint);padding:11px 18px 10px;font-weight:600}
.cc-hint{font-weight:400}
.cc-group{display:flex;align-items:flex-start;gap:16px;padding:11px 18px;border-top:1px solid var(--bd)}
.cc-title{width:104px;flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--amber);font-weight:600;padding-top:7px}
.cc-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:1;min-width:0}
.cc-div{width:1px;height:22px;background:var(--bd2);margin:0 3px}
.cc-mini{font-size:12.5px;color:var(--mut);font-weight:600;display:flex;align-items:center;gap:5px;white-space:nowrap}
.cc-mini b{color:var(--amber);font-family:var(--mono)}
.cc-controls input[type="range"]{accent-color:var(--amber);width:104px}
.cc-switches{gap:22px}
.cc-switch{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--tx);font-weight:500}
@media (max-width:620px){.cc-group{flex-direction:column;gap:8px}.cc-title{width:auto;padding-top:0}}
/* hover tooltips */
.tip{position:relative}
.tip:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 9px);left:0;background:var(--surf2);border:1px solid var(--bd2);color:var(--tx);font-family:var(--font);font-size:12px;font-weight:400;padding:8px 11px;border-radius:9px;width:230px;line-height:1.45;box-shadow:var(--shadow);z-index:70;pointer-events:none;white-space:normal}
.tip:hover::before{content:"";position:absolute;bottom:calc(100% + 3px);left:18px;border:6px solid transparent;border-top-color:var(--bd2);z-index:70}

/* playground panel */
.gear{border:1px solid var(--bd2);background:var(--surf);color:var(--mut);width:38px;height:38px;border-radius:10px;cursor:pointer;font-size:16px;flex:none}
.gear:hover{color:var(--tx);border-color:var(--amber)}
.playground{position:fixed;top:0;right:0;bottom:0;width:300px;max-width:86vw;background:var(--surf);border-left:1px solid var(--bd);box-shadow:-18px 0 50px -20px rgba(0,0,0,.5);z-index:60;transform:translateX(110%);transition:transform .28s cubic-bezier(.22,.61,.36,1);display:flex;flex-direction:column}
.app[data-settings="open"] .playground{transform:none}
.pg-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--bd);font-weight:800;font-size:15px}
.pg-x{border:0;background:transparent;color:var(--mut);font-size:22px;line-height:1;cursor:pointer;width:28px;height:28px;border-radius:8px}
.pg-x:hover{color:var(--tx);background:var(--surf2)}
.pg-body{padding:14px 18px 20px;overflow-y:auto}
.pg-group{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);font-weight:600;margin:16px 0 10px}
.pg-group:first-child{margin-top:2px}
.pg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0}
.pg-row label{font-size:13.5px;color:var(--tx);font-weight:500}
.pg-row input[type="range"]{flex:1;max-width:130px;accent-color:var(--amber)}
.seg{display:flex;background:var(--surf2);border:1px solid var(--bd);border-radius:9px;padding:2px}
.seg-b{border:0;background:transparent;color:var(--mut);font-family:var(--font);font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:7px;cursor:pointer}
.seg-b.on{background:var(--amberT);color:#161008}
.pg-toggle{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--tx);padding:8px 0;cursor:pointer;font-weight:500}
.pg-toggle input{accent-color:var(--amber);width:16px;height:16px}
.pg-note{margin-top:16px;font-size:12px;color:var(--faint);line-height:1.5;border-top:1px solid var(--bd);padding-top:12px}

/* history / library */
.hist-head{margin:4px 0 18px}
.hist-head h2{font-size:21px;font-weight:800;margin:0;letter-spacing:-.01em}
.hist-head p{color:var(--mut);font-size:14px;margin:6px 0 0;max-width:60ch}
.hist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.hist-card{text-align:left;border:0;background:var(--surf);border-radius:18px;padding:15px 16px;cursor:pointer;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:7px;min-height:110px;font-family:var(--font);transition:.15s}
.hist-card:hover{border-color:var(--amber);transform:translateY(-2px)}
.hist-topic{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);font-weight:600}
.hist-q{font-size:15px;font-weight:650;color:var(--tx);line-height:1.3}
.hist-meta{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:auto}
.hist-empty{grid-column:1/-1;text-align:center;color:var(--mut);padding:44px 20px;border:1px dashed var(--bd2);border-radius:14px}

.notice{background:color-mix(in srgb,var(--amber) 10%,var(--surf));border:1px solid color-mix(in srgb,var(--amber) 35%,var(--bd));border-radius:12px;padding:12px 15px;font-size:13.5px;color:var(--tx);margin-bottom:16px;line-height:1.55}
.notice code{font-family:var(--mono);font-size:12px;background:var(--surf2);padding:1px 6px;border-radius:5px;border:1px solid var(--bd)}

/* ask */
.ask-go{flex:none;border:0;border-radius:999px;background:var(--amberT);color:#fff;font-weight:700;font-size:14px;padding:11px 20px;cursor:pointer;font-family:var(--font);transition:.15s;box-shadow:0 6px 16px -6px color-mix(in srgb,var(--amberT) 50%,transparent);text-decoration:none;display:inline-block}
.ask-go:hover{filter:brightness(1.05)}
.ask-go:active{transform:translateY(1px)}
.ask-go:disabled{opacity:.75;cursor:default;box-shadow:none} /* only while working */
.ask-go:disabled:hover{filter:none}
.go-kbd{font-family:var(--mono);font-size:10.5px;background:rgba(255,255,255,.22);padding:2px 6px;border-radius:6px;margin-left:7px;font-weight:600}
/* landing CTA */
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:10px;margin:4px 0 26px}
.hero-go{font-size:17px;padding:15px 36px;text-decoration:none}
.hero-eta{font-size:12.5px;color:var(--faint);font-weight:600}
/* the Studio dock: the command bar to Decktell — deliberately dark so it never
   reads as a content field (narration notes stay light) */
.st-dock{flex:none;max-width:960px;width:100%;margin:0 auto}
.st-dock-box{display:flex;flex-direction:column;gap:6px;background:var(--tx);border-radius:16px;padding:10px 12px;box-shadow:0 14px 30px -16px rgba(31,33,40,.55);transition:box-shadow .15s}
.st-dock-box:focus-within{box-shadow:0 0 0 2px var(--amberT),0 16px 34px -16px rgba(31,33,40,.6)}
.st-dock-box.st-dock-drag{box-shadow:0 0 0 2.5px var(--amberT),0 14px 30px -16px rgba(31,33,40,.55)}
.st-dock-toolbar{display:flex;align-items:center;justify-content:space-between;width:100%}
.st-dock-plus{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:rgba(255,255,255,.75);cursor:pointer;display:grid;place-items:center;transition:.15s}
.st-dock-plus:hover{background:rgba(255,255,255,.18);color:#fff}
.st-dock-input{width:100%;resize:none;border:0;background:transparent;color:#fff;font-family:var(--font);font-size:13.5px;line-height:1.5;padding:3px 2px;outline:none;min-height:26px;max-height:150px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}
.st-dock-input::-webkit-scrollbar{width:8px}
.st-dock-input::-webkit-scrollbar-track{background:transparent}
.st-dock-input::-webkit-scrollbar-thumb{background:rgba(255,255,255,.26);border-radius:99px}
.st-dock-input::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.4)}
.st-dock-input::placeholder{color:rgba(255,255,255,.48)}
.st-dock-input:disabled{opacity:.55}
/* the AI's reply — a quiet line inside the dark dock, above the message */
.st-dock-reply{display:flex;align-items:flex-start;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:9px 11px;margin:1px 0 2px;animation:st-reply-in .18s ease-out}
.st-dock-reply[hidden]{display:none}
.st-dock-reply-mark{flex:none;display:grid;place-items:center;width:20px;height:20px;color:var(--amber);margin-top:1px}
.st-dock-reply-text{flex:1;color:rgba(255,255,255,.9);font-family:var(--font);font-size:12.5px;line-height:1.45}
.st-dock-reply-x{flex:none;border:0;background:transparent;color:rgba(255,255,255,.45);font-size:12px;cursor:pointer;padding:0 2px;line-height:1;transition:.12s}
.st-dock-reply-x:hover{color:rgba(255,255,255,.85)}
.st-dock-reply.st-reply-err{background:rgba(220,80,70,.14);border-color:rgba(220,80,70,.32)}
.st-dock-reply.st-reply-err .st-dock-reply-mark{color:#ff9b8f}
@keyframes st-reply-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.st-dock-pill{align-self:flex-start;display:flex;align-items:center;gap:7px;background:var(--amberT);color:#fff;border:0;border-radius:999px;padding:6px 11px;font-family:var(--font);font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap;margin:2px 0 0 3px}
.st-dock-pill[hidden]{display:none}
.st-dock-x{opacity:.8}
.st-dock-go{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:var(--amberT);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.15s}
.st-dock-go:hover{filter:brightness(1.12)}
.st-dock-go:disabled{opacity:.7;cursor:default;filter:none}
.st-dock-spinner{width:15px;height:15px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:st-spin .7s linear infinite}
.st-dock-chips{display:flex;gap:8px;align-items:center;margin-top:9px;flex-wrap:wrap}
.st-dock-chips[hidden]{display:none}
.st-dock-hint{font-size:11px;color:var(--mut);margin-top:7px;min-height:1.2em}
/* dock suggestions: rounded-rect category chips → a dropdown list (hover previews) */
.st-suggest{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:11px}
.st-suggest[hidden]{display:none}
.st-sg-cat{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--bd);background:var(--surf);color:var(--tx);font-family:var(--font);font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:11px;cursor:pointer;transition:.12s}
.st-sg-cat:hover{border-color:var(--bd2);background:var(--surf2)}
.st-sg-cat.on{border-color:var(--amberT);background:var(--surf2)}
.st-sg-ic{width:15px;height:15px;flex:none;color:var(--mut)}
.st-sg-cat:hover .st-sg-ic,.st-sg-cat.on .st-sg-ic{color:var(--amber)}
.st-sg-panel{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);z-index:30;width:min(540px,92%);background:var(--surf);border:1px solid var(--bd);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.st-sg-head{display:flex;align-items:center;gap:8px;padding:10px 14px;color:var(--mut);font-size:12px;font-weight:700;border-bottom:1px solid var(--bd)}
.st-sg-head span{flex:1}
.st-sg-x{border:0;background:none;color:var(--faint);cursor:pointer;font-size:13px;line-height:1;padding:3px 5px;border-radius:6px;transition:.12s}
.st-sg-x:hover{color:var(--tx);background:var(--surf2)}
.st-sg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;border:0;border-top:1px solid var(--bd);background:none;color:var(--tx);font-family:var(--font);font-size:13.5px;padding:11px 14px;cursor:pointer;transition:background .1s}
.st-sg-row:first-of-type{border-top:0}
.st-sg-row:hover{background:var(--surf2)}
.st-sg-meta{flex:none;font-family:var(--mono);font-size:11px;color:var(--faint);background:var(--surf2);border-radius:999px;padding:2px 8px}
.st-film-thumb.st-ghost{background:none;box-shadow:none;border:2px dashed var(--bd2)}
/* new-deck state: the chrome doesn't exist until the deck does */
.st-new .st-actions,.st-new .st-inspect,.st-new .st-slidebar,.st-new .st-notes{display:none}
.st-genwait.st-newcard{aspect-ratio:16/9;min-height:0;width:100%;
  background:radial-gradient(120% 130% at 50% 0%,#FFFDF8 0%,#FBF6EC 55%,#F4EDDF 100%)}
.st-newcard .st-genstage{color:#26272E}
/* the ghost slide: a wireframe of the slide that isn't inked yet */
.st-wire{width:100%;display:flex;flex-direction:column;align-items:center;gap:15px;margin-bottom:20px}
.st-wire span{display:block;border:2px dashed rgba(35,30,20,.15);border-radius:999px}
.st-wire-kicker{width:92px;height:10px}
.st-wire-title{width:min(400px,58%);height:30px;border-radius:12px}
.st-wire-sub{width:min(250px,38%);height:12px}
.st-new .st-dock-chips{justify-content:center}
.st-newarrow{font-size:22px;color:var(--mut);line-height:1;animation:st-newbob 1.7s ease-in-out infinite}
@keyframes st-newbob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media (prefers-reduced-motion: reduce){.st-newarrow{animation:none}}

/* ===================== Studio (PowerPoint shell) ===================== */
.studio{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.st-top{display:flex;align-items:center;gap:14px;padding:10px 18px;border-bottom:1.5px solid var(--bd);background:var(--surf);flex:none}
.st-home{width:34px;height:34px;flex:none;display:grid;place-items:center}
.st-home .mark-svg{width:100%;height:100%;filter:drop-shadow(0 4px 10px rgba(180,95,30,.38))}
.st-title-wrap{flex:1;min-width:0}
.st-title{font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:8px;padding:2px 8px;margin-left:-8px;cursor:text;outline:none;transition:background .12s,box-shadow .12s}
.st-title:hover{background:var(--surf2)}
.st-title:focus{background:var(--surf2);box-shadow:0 0 0 2px color-mix(in srgb,var(--amberT) 45%,transparent)}
.st-subtitle{font-size:11px;color:var(--mut)}
.st-actions{display:flex;align-items:center;gap:8px}
.st-saved{font-size:11px;color:var(--mut);font-family:var(--mono,monospace)}
.st-btn{border:0;border-radius:999px;background:var(--amberT);color:#fff;font-weight:700;font-size:13px;padding:8px 16px;cursor:pointer;font-family:var(--font);transition:.15s}
.st-btn:hover{filter:brightness(1.07)}
.st-btn.st-secondary{background:var(--tx);color:var(--bg);border:0}
.st-btn.st-sm{font-size:12px;padding:6px 10px}
.st-btn.st-danger{background:transparent;color:var(--coral);border:1.5px solid color-mix(in srgb,var(--coral) 35%,transparent)}
.st-btn.st-danger:hover{background:color-mix(in srgb,var(--coral) 8%,transparent);filter:none}
.st-body{display:flex;flex:1;min-height:0}
/* filmstrip */
.st-films{width:212px;flex:none;overflow-y:auto;padding:12px;border-right:1.5px solid var(--bd);display:flex;flex-direction:column;gap:10px}
.st-film{position:relative;cursor:pointer;border-radius:10px;padding:6px;border:2px solid transparent;transition:border-color .12s,background .12s}
.st-film:hover{background:var(--surf2)}
.st-film.on{border-color:color-mix(in srgb,var(--amberT) 50%,transparent);background:color-mix(in srgb,var(--amberT) 6%,transparent)}
.st-film-over{border-color:color-mix(in srgb,var(--amberT) 55%,transparent);border-style:dashed}
.st-film-n{position:absolute;left:-2px;top:4px;font-size:10px;font-weight:700;color:var(--mut);width:14px;text-align:right}
.st-film-thumb{margin-left:14px;aspect-ratio:16/9;border-radius:7px;background:radial-gradient(120% 130% at 50% 0%,#191D28 0%,#12141B 55%,#0D0F15 100%);overflow:hidden;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.st-film-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.st-film-thumb.stage-paper{background:radial-gradient(120% 130% at 50% 0%,#FFFDF8 0%,#FBF6EC 55%,#F4EDDF 100%)}
.st-film-scene > div{position:absolute;inset:0}
.st-film-scene .kx-scene{position:absolute;inset:0}
.st-film-cap{margin-left:14px;margin-top:4px;font-size:11px;color:var(--mut);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-film-addrow{display:flex;gap:6px;margin:2px 0 8px 14px}
.st-film-add{flex:1;padding:10px 6px;border:2px dashed var(--bd2);border-radius:10px;background:transparent;color:var(--mut);font-family:var(--font);font-weight:700;font-size:12.5px;cursor:pointer;transition:.15s}
.st-film-add:hover{border-color:var(--amberT);color:var(--amberT);background:color-mix(in srgb,var(--amberT) 5%,transparent)}
/* canvas + notes — slide, transport and notes travel as one OPTICALLY centered
   group: 40% of leftover space above, 60% below (geometric center reads sunken) */
.st-canvas-wrap{flex:1;min-width:0;display:flex;flex-direction:column;padding:16px 20px;gap:12px;overflow-y:auto}
.st-canvas-wrap::before{content:"";flex:2}
.st-canvas-wrap::after{content:"";flex:3}
.st-canvas{flex:0 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.st-canvas > div{width:100%;max-width:960px}
.st-canvas .kx-caption{display:none} /* captions are a watch-mode artifact; the editor shows the slide itself */
.st-canvas .kx-controls,.st-canvas .kx-bigplay,.st-canvas .kx-filmstrip{display:none} /* deck-scoped playback lives in Present/Watch, not the editor */
/* slide-scoped mini transport */
.st-slidebar{display:flex;align-items:center;gap:12px;max-width:960px;width:100%;margin:0 auto}
.st-slideplay{width:34px;height:34px;border-radius:50%;border:0;background:var(--tx);color:var(--bg);font-size:13px;cursor:pointer;display:grid;place-items:center;flex:none;transition:.15s}
.st-slideplay:hover{background:var(--amberT);color:#fff}
.st-slidetrack{flex:1;height:5px;border-radius:3px;background:var(--bd2);overflow:hidden;cursor:pointer}
.st-slidetrack:hover{height:7px}
.st-slidefill{height:100%;width:0;border-radius:3px;background:var(--amberT);transition:width .1s linear}
.st-slidedur{font-family:var(--mono);font-size:11.5px;color:var(--mut);flex:none;font-variant-numeric:tabular-nums}
.st-notes{flex:none;max-width:960px;width:100%;margin:0 auto}
.st-notes-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.st-notes-label{font-size:12px;font-weight:700;flex:1;min-width:0}
.st-notes-hint{font-size:11px;color:var(--mut);font-weight:500}
.st-hear{flex:none;border:1px solid var(--bd);background:var(--surf);color:var(--tx);font-family:var(--font);font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:999px;cursor:pointer;transition:.12s;white-space:nowrap}
.st-hear:hover{border-color:var(--amberT);color:var(--amber)}
/* deck-level (header) controls: voiceover toggle + Deck menu */
.st-deck-wrap{position:relative}
.st-deck-menu{position:absolute;right:0;top:calc(100% + 8px);width:264px;background:var(--surf);border-radius:18px;box-shadow:var(--shadow);border:1.5px solid var(--bd);padding:12px;z-index:40;display:flex;flex-direction:column;gap:8px}
.st-deck-menu[hidden]{display:none}
.st-btn.st-vo-toggle{background:var(--surf2);color:var(--tx);border:1.5px solid var(--bd)}
.st-btn.st-vo-toggle:hover{border-color:var(--bd2)}
.st-btn.st-vo-toggle.on{background:var(--amberT);color:#fff;border-color:var(--amberT)}
/* narration UI is opt-in per deck — hidden until Voiceover is on */
.studio:not(.st-voiceover) .st-notes,
.studio:not(.st-voiceover) .st-vo-only{display:none}
/* Highlight only appears on scene kinds that render the accent pill */
.studio:not(.st-can-emph) .st-emph-only{display:none}
/* "Try another look" only appears on scene kinds that have alternate compositions */
.studio:not(.st-can-look) .st-look-only{display:none}
.st-notes-input{width:100%;resize:vertical;min-height:52px;background:var(--surf);border:1.5px solid var(--bd2);border-radius:14px;color:var(--tx);font-family:var(--font);font-size:13.5px;line-height:1.5;padding:10px 14px;outline:none}
.st-notes-input:focus{border-color:var(--amberT)}
/* inspector */
.st-inspect{width:210px;flex:none;border-left:1.5px solid var(--bd);padding:16px 14px;display:flex;flex-direction:column;gap:10px}
.st-ins-h{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--amberT)}
.st-ins-row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mut)}
.st-ins-row span:last-child{color:var(--tx);font-weight:600;text-align:right}
.st-ins-sect{margin-top:14px}
.st-wide{width:100%}
.st-stepper{display:flex;align-items:center;gap:8px}
.st-step{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--bd2);background:var(--surf);color:var(--tx);font-size:15px;font-weight:700;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.12s}
.st-step:hover{border-color:var(--amberT);color:var(--amberT)}
.st-step-val{font-variant-numeric:tabular-nums;min-width:38px;text-align:center}
.st-seg-wide{width:100%}
.st-seg-wide .st-seg{flex:1;padding:5px 4px;text-align:center}
/* highlight word-picker: tap words in the headline; selected run gets the deck accent */
.st-emwords{display:flex;flex-wrap:wrap;gap:5px}
.st-emw{border:1px solid var(--bd);background:var(--surf2);color:var(--tx);font-family:var(--font);font-size:12.5px;font-weight:600;padding:4px 9px;border-radius:7px;cursor:pointer;transition:.1s}
.st-emw:hover{border-color:var(--emw-accent,var(--amberT))}
.st-emw.on{background:var(--emw-accent,var(--amberT));border-color:var(--emw-accent,var(--amberT));color:#fff}
.st-emw-empty{color:var(--faint);font-size:12px}
.st-ins-hint{font-size:10.5px;color:var(--mut);line-height:1.45;margin-top:-4px}
.st-ins-tools{display:flex;gap:6px;margin-top:auto;padding-top:14px}
/* Edit-a-part: scope the dock to a field, or lock it from AI edits */
.st-ins-sub{font-size:10px;font-weight:500;color:var(--faint);letter-spacing:0;text-transform:none}
/* filmstrip per-slide lock badge */
.st-film-pin{position:absolute;right:6px;top:6px;z-index:2;width:20px;height:20px;padding:0;border:0;border-radius:6px;background:rgba(255,255,255,.85);color:var(--faint);cursor:pointer;display:grid;place-items:center;opacity:0;transition:.12s;box-shadow:0 1px 3px rgba(0,0,0,.14)}
.st-film:hover .st-film-pin{opacity:.85}
.st-film-pin:hover{opacity:1;color:var(--tx)}
.st-film-pin.on{opacity:1;background:var(--amber);color:#fff}
/* hover tooltip on the lock — below-right, inside the thumb so the scrolling sidebar can't clip it */
.st-film-pin[data-tip]:hover::after{content:attr(data-tip);position:absolute;top:calc(100% + 6px);right:0;width:150px;background:var(--tx);color:var(--bg);font-family:var(--font);font-size:11px;font-weight:500;line-height:1.35;text-align:left;padding:7px 9px;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.24);z-index:80;pointer-events:none;white-space:normal}
/* locked slide: persistent, unmistakable — amber ring on the thumb + always-visible lock pin */
.st-film.st-locked{background:color-mix(in srgb,var(--amber) 9%,transparent)}
.st-film.st-locked .st-film-thumb{box-shadow:0 0 0 2px var(--amber),0 2px 8px rgba(0,0,0,.12)}
.st-film.st-locked .st-film-pin{opacity:1}
/* highlight section: header lock + accent swatches */
.st-ins-h-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.st-h-lock{width:26px;height:24px}
.st-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:9px 0 6px}
.st-sw{width:22px;height:22px;border-radius:50%;border:0;background:var(--sw);cursor:pointer;padding:0;box-shadow:0 0 0 1px var(--bd);transition:transform .1s,box-shadow .12s}
.st-sw:hover{transform:scale(1.14)}
.st-sw.on{box-shadow:0 0 0 2px var(--surf),0 0 0 4px var(--sw)}
.st-sw-auto{width:auto;height:22px;border-radius:999px;background:var(--surf2);color:var(--mut);font-family:var(--font);font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:0 10px;box-shadow:inset 0 0 0 1px var(--bd);transition:.12s}
.st-sw-auto.on{box-shadow:inset 0 0 0 1.5px var(--amberT);color:var(--amber)}
/* custom colour: a swatch that opens the native picker; the ± rainbow ring hints "pick any" */
.st-sw-custom{position:relative;display:inline-grid;place-items:center;overflow:hidden;background:conic-gradient(from 0deg,#ef4444,#eab308,#22c55e,#3b82f6,#a855f7,#ef4444)}
.st-sw-custom.on{background:var(--sw)}
.st-sw-custom input{position:absolute;inset:-6px;width:200%;height:200%;opacity:0;cursor:pointer;border:0;padding:0}
/* typeface chips preview their own face */
.st-font-editorial{font-family:"Fraunces",Georgia,serif}
.st-font-grotesk{font-family:"Space Grotesk",var(--font)}
/* reorganized inspector: Style playground */
.st-ins-row-top{flex-direction:column;align-items:flex-start;gap:8px}
.st-ins-row-top > span:first-child{color:var(--mut)}
.st-seg-fill{width:100%}
.st-seg-fill .st-seg{flex:1;text-align:center;padding:5px 4px}
.st-dur{display:flex;align-items:center;gap:9px;flex:1;min-width:0;margin-left:12px}
.st-dur .st-step-val{flex:none;min-width:34px;text-align:right;font-size:12px;color:var(--tx);font-weight:600}
.st-dur-range{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:4px;border-radius:999px;background:var(--bd2);outline:none;cursor:pointer}
.st-dur-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:var(--amberT);cursor:pointer;box-shadow:0 1px 3px rgba(31,33,40,.28)}
.st-dur-range::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:var(--amberT);cursor:pointer}
.st-ins-kind{opacity:.55;font-weight:600;font-size:10px;margin-left:7px}
/* pending: skeleton + live progress while the deck builds in front of you */
.st-pending .st-actions .st-btn,.st-pending .st-design-wrap,.st-pending .st-share-wrap,.st-pending .st-inspect,.st-pending .st-notes,.st-pending .st-slidebar{opacity:.35;pointer-events:none}
.st-skel{pointer-events:none}
.st-shimmer{background:linear-gradient(100deg,var(--surf2) 40%,var(--surf) 50%,var(--surf2) 60%);background-size:200% 100%;animation:st-shim 1.2s linear infinite;box-shadow:none}
@keyframes st-shim{to{background-position:-200% 0}}
.st-genwait{min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;background:var(--surf);border-radius:18px;box-shadow:var(--shadow);padding:40px}
.st-genspin{width:34px;height:34px;border-radius:50%;border:3.5px solid var(--bd2);border-top-color:var(--amberT);animation:st-spin .8s linear infinite}
@keyframes st-spin{to{transform:rotate(360deg)}}
.st-genstage{font-weight:800;font-size:16px}
.st-gendetail{font-size:13px;color:var(--mut);max-width:420px;line-height:1.5;min-height:1.2em}
.st-gentrack{width:min(360px,80%);height:6px;border-radius:3px;background:var(--bd2);overflow:hidden}
.st-genfill{height:100%;width:3%;background:var(--amberT);border-radius:3px;transition:width .4s ease}
.st-genfail{font-size:30px}
/* alive: slides deal in as they're born; the newest one takes the stage */
@keyframes st-arrive{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:none}}
.st-film.st-arrive{animation:st-arrive .5s cubic-bezier(.2,.85,.3,1.15) both}
.st-build-stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:radial-gradient(120% 130% at 50% 0%,#191D28 0%,#12141B 55%,#0D0F15 100%);animation:st-show .55s ease both}
.st-build-stage.stage-paper{background:radial-gradient(120% 130% at 50% 0%,#FFFDF8 0%,#FBF6EC 55%,#F4EDDF 100%)}
.st-build-scene{position:absolute;inset:0;container-type:size}
.st-build-scene > div{position:absolute;inset:0}
@keyframes st-show{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.st-genwait.st-genpill{min-height:0;padding:12px 18px;margin-top:12px;gap:7px}
.st-genrow{display:flex;align-items:center;gap:9px}
.st-genspin-sm{width:17px;height:17px;border-width:2.5px}
.st-genverb{font-size:11.5px;color:var(--faint);font-style:italic;min-height:1.2em}
/* present overlay */
.st-present-overlay{position:fixed;inset:0;z-index:60;background:#08090D;display:flex;flex-direction:column}
.st-present-overlay[hidden]{display:none}
.st-present-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:2vh 2vw}
.st-present-stage > div{width:100%;max-width:1400px}
.st-present-hud{flex:none;display:flex;justify-content:space-between;align-items:center;padding:8px 18px;color:var(--mut);font-size:12px}
.st-present-keys{display:flex;align-items:center;gap:10px}


.gen-status[data-state="failed"] .gs-fill{background:#FF5C72}
.gen-status[data-state="done"] .gs-fill{background:#5BD16A}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.chips-lead{font-size:12px;color:var(--faint)}
.chip{border:1px solid var(--bd2);background:var(--surf);color:var(--tx);border-radius:999px;padding:7px 13px 7px 11px;font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:7px;font-family:var(--font);transition:.15s}
.chip:hover{border-color:var(--amber);transform:translateY(-1px)}
.chip.on{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,var(--surf))}
.chip-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none}
.chip-badge{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--teal);border:1px solid color-mix(in srgb,var(--teal) 40%,transparent);border-radius:5px;padding:1px 4px;margin-left:2px}
.err{margin-top:12px;background:color-mix(in srgb,var(--coral) 10%,var(--surf));border:1px solid color-mix(in srgb,var(--coral) 40%,var(--bd));color:var(--tx);border-radius:11px;padding:11px 14px;font-size:13.5px}

/* layout grid */
.stage-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
@media (min-width:920px){.stage-grid{grid-template-columns:1fr 330px}}
.player-card{background:var(--surf);border:0;border-radius:22px;padding:14px;box-shadow:var(--shadow)}
.foot{margin-top:22px;font-size:12.5px;color:var(--faint);line-height:1.5}

/* ============ player ============ */
.kx-player,.kx-staticvars{--st-ink:#F4F1EA;--st-mut:#A6ABBD;--kx-a:#4A74EC;--kx-a2:#7C9BF2;
  --st-capbg:rgba(10,12,17,.5);--st-capink:#F6F3EC;--st-card:rgba(255,255,255,.055);--st-cardbd:rgba(255,255,255,.11);
  --st-optbg:rgba(255,255,255,.06);--st-optbd:rgba(255,255,255,.22);--st-gridline:rgba(255,255,255,.035);
  --st-spot:rgba(255,255,255,.05);--st-vign:rgba(0,0,0,.5);--st-onaccent:#161008}
/* paper stage: warm light deck surface */
.kx-player[data-stage="paper"],.kx-staticvars.stage-paper{--st-ink:#26272E;--st-mut:#6E6A61;
  --st-capbg:rgba(255,253,246,.78);--st-capink:#26272E;--st-card:rgba(35,30,20,.045);--st-cardbd:rgba(35,30,20,.12);
  --st-optbg:rgba(35,30,20,.04);--st-optbd:rgba(35,30,20,.22);--st-gridline:rgba(35,30,20,.05);
  --st-spot:rgba(255,255,255,.55);--st-vign:rgba(120,95,50,.14);--st-onaccent:#fff}
.kx-player[data-stage="paper"] .kx-stage{background:radial-gradient(120% 130% at 50% 0%,#FFFDF8 0%,#FBF6EC 55%,#F4EDDF 100%)}
.kx-player[data-stage="paper"] .kx-stage::after{box-shadow:inset 0 0 90px rgba(120,95,50,.10)}
.kx-player[data-stage="paper"][data-act="1"] .kx-stage::before{background:radial-gradient(120% 130% at 50% 0%,rgba(78,134,245,.07),transparent 60%)}
.kx-player[data-stage="paper"][data-act="3"] .kx-stage::before{background:radial-gradient(120% 130% at 50% 100%,rgba(240,98,42,.08),transparent 60%)}
.kx-swrap{position:absolute;inset:0}
.kx-stage{position:relative;width:100%;aspect-ratio:9/16;max-height:64vh;border-radius:11px;overflow:hidden;
  background:radial-gradient(120% 130% at 50% 0%,#191D28 0%,#12141B 55%,#0D0F15 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);cursor:pointer;user-select:none;margin:0 auto}
@media (min-width:560px){.kx-stage{aspect-ratio:4/3;max-height:none}}
@media (min-width:920px){.kx-stage{aspect-ratio:16/9}}
.kx-stage::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 120px rgba(0,0,0,.45)}
/* mood arc: the stage temperature follows the story acts (cool open → neutral → warm landing) */
.kx-stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;transition:opacity 1.2s ease;opacity:0}
.kx-player[data-act="1"] .kx-stage::before{opacity:1;background:radial-gradient(120% 130% at 50% 0%,rgba(64,96,180,.10),transparent 60%)}
.kx-player[data-act="3"] .kx-stage::before{opacity:1;background:radial-gradient(120% 130% at 50% 100%,rgba(255,150,60,.10),transparent 60%)}
/* per-kind backdrops */
.kx-bg-grid::before{content:"";position:absolute;inset:6%;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--st-gridline) 1px,transparent 1px),linear-gradient(90deg,var(--st-gridline) 1px,transparent 1px);
  background-size:9cqmin 9cqmin;mask-image:radial-gradient(80% 80% at 50% 50%,#000 40%,transparent 100%)}
.kx-bg-spot::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 48% at 50% 44%,var(--st-spot),transparent 70%)}
.kx-bg-vign::before{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 22cqmin var(--st-vign)}
/* act-change color card sweep + match-cut ghost */
.kx-actcard{position:absolute;inset:0;z-index:6;background:linear-gradient(100deg,var(--kx-a,#FFB020),var(--kx-a2,#FFC85C));transform:translateX(-105%);pointer-events:none}
.kx-carry{position:absolute;z-index:5;pointer-events:none}
.kx-carry svg{width:100%;height:100%;overflow:visible}
.kx-ambient{position:absolute;inset:0;z-index:0;pointer-events:none}
.kx-stage-inner{position:absolute;inset:0;container-type:size;z-index:1}
.kx-scene{position:absolute;inset:0;color:var(--st-ink);display:flex;flex-direction:column;justify-content:center;padding:8% 8% 14%}
.kx-rough-fx{filter:url(#kx-rough)}

/* idle hint (empty player, nothing loaded yet) */
.kx-idle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:12%;z-index:4;color:var(--st-mut,#A6ABBD);font-size:clamp(13px,3.4cqmin,17px);font-weight:500;pointer-events:none}
.kx-idle[hidden]{display:none}

/* caption */
.kx-caption{position:absolute;left:0;right:0;bottom:0;padding:32px 7% 14px;pointer-events:none;z-index:5;
  background:linear-gradient(to top,rgba(8,9,13,.82),transparent)}
.kx-player[data-stage="paper"] .kx-caption{background:linear-gradient(to top,rgba(250,244,232,.9),transparent)}
.kx-caption > span{display:inline;background:var(--st-capbg);color:var(--st-capink);font-size:clamp(12px,3.6cqmin,17px);line-height:1.45;font-weight:500;padding:2px 8px;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* karaoke: words brighten as the narrator reaches them */
.kx-caption .kx-cw{opacity:.45;transition:opacity .18s ease}
.kx-caption .kx-cw.kx-said{opacity:1}
.kx-caption .kx-cap-key{background:var(--st-capbg);font-weight:700;font-size:clamp(13px,4.2cqmin,20px);color:var(--kx-a2,#FFC85C)}
.kx-caption .kx-cap-key .kx-cw{opacity:0}
.kx-caption .kx-cap-key .kx-cw.kx-said{opacity:1}

/* ---- kinetic emphasis: the key phrase lands inside an accent pill ---- */
.kx-em{color:inherit;font-weight:800;display:inline;padding:.02em .32em .1em;border-radius:.5em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;background:transparent;
  transition:background .35s ease,color .35s ease}
.kx-em-on .kx-em,.kx-em.kx-em-on{background:var(--kx-a,#3D63F2);color:var(--st-onaccent,#fff)}
.kx-em .kx-hw{color:inherit}
.kx-emwrap{position:relative}
.kx-scrib{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}

/* ---- layout variants ---- */
.kx-bul-cards .kx-bul-list{display:grid;grid-template-columns:1fr 1fr;gap:2cqmin;list-style:none}
.kx-bul-cards .kx-bi{background:var(--st-card);border:1px solid var(--st-cardbd);border-radius:2cqmin;padding:2.4cqmin;align-items:flex-start}
.kx-cmp-vs{position:relative}
.kx-cmp-vs::after{content:"VS";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-6deg);font-weight:900;font-size:clamp(16px,5cqmin,30px);color:var(--kx-a,#FFB020);background:var(--st-bg,#12151C);padding:.6cqmin 1.6cqmin;border-radius:99px;border:2px solid var(--kx-a,#FFB020);z-index:2}
.kx-tl-h .kx-tl-list{display:flex;gap:3cqmin;align-items:flex-start;justify-content:center}
.kx-tl-h .kx-tl{flex:1;max-width:26cqmin;flex-direction:column;text-align:center;align-items:center}

/* ---- story kinds ---- */
.kx-hook{display:flex;align-items:center;justify-content:center;padding:6%}
.kx-hook-wrap{max-width:86%;text-align:center}
.kx-hook-line{font-size:clamp(22px,7.4cqmin,44px);font-weight:800;line-height:1.16;color:var(--st-ink);letter-spacing:-.01em;text-wrap:balance}
.kx-hook-line .kx-hw{display:inline-block;opacity:0}
.kx-hook-u{margin:2.6cqmin auto 0;height:.9cqmin;border-radius:99px;background:var(--kx-a,#FFB020);width:0}
.kx-hook-kicker{margin-top:2.4cqmin;font-size:clamp(11px,3cqmin,15px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--kx-a2,#FFC85C);opacity:0}
.kx-payoff{display:flex;align-items:center;justify-content:center;padding:6%;position:relative}
.kx-payoff-wrap{max-width:84%;text-align:center;position:relative}
.kx-payoff-glow{position:absolute;inset:-30%;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--kx-a,#FFB020) 22%,transparent),transparent 70%);opacity:0;pointer-events:none}
.kx-payoff-line{position:relative;font-size:clamp(20px,6.6cqmin,40px);font-weight:800;line-height:1.2;color:var(--st-ink);letter-spacing:-.01em;text-wrap:balance;opacity:0}
.kx-payoff-note{position:relative;margin-top:2.6cqmin;font-size:clamp(12px,3.4cqmin,17px);color:var(--st-mut);font-weight:500;opacity:0}
.kx-analogy{display:flex;align-items:center;justify-content:center;padding:6%}
.kx-ana-wrap{width:90%;max-width:900px;text-align:center}
.kx-ana-row{display:flex;align-items:stretch;justify-content:center;gap:3cqmin}
.kx-ana-card{flex:1;max-width:34cqmin;min-height:24cqmin;border-radius:2.4cqmin;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6cqmin;padding:2.6cqmin;opacity:0}
.kx-ana-a{background:color-mix(in srgb,var(--kx-a,#FFB020) 14%,transparent);border:1.5px solid color-mix(in srgb,var(--kx-a,#FFB020) 45%,transparent)}
.kx-ana-b{background:rgba(55,214,192,.10);border:1.5px solid rgba(55,214,192,.42)}
.kx-ana-label{font-size:clamp(14px,3.8cqmin,21px);font-weight:700;color:var(--st-ink)}
.kx-ana-art{width:16cqmin;height:16cqmin}
.kx-ana-art svg{width:100%;height:100%;overflow:visible}
.kx-ana-bridge{align-self:center;font-size:clamp(11px,3cqmin,15px);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--st-mut);opacity:0;white-space:nowrap}
.kx-ana-note{margin-top:2.6cqmin;font-size:clamp(12px,3.3cqmin,16px);color:var(--st-mut);opacity:0}
.kx-quiz{display:flex;align-items:center;justify-content:center;padding:6%}
.kx-quiz-wrap{width:88%;max-width:760px;text-align:center}

/* overlays */
.kx-prep{position:absolute;inset:0;display:grid;place-items:center;z-index:8;background:rgba(10,12,17,.6);backdrop-filter:blur(3px)}
.kx-prep[hidden]{display:none}
.kx-prep-in{text-align:center;color:#EDE9E0}
.kx-spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.16);border-top-color:#FFB020;margin:0 auto 12px;animation:kx-spin .8s linear infinite}
@keyframes kx-spin{to{transform:rotate(360deg)}}
.kx-prep-t{font-size:13.5px;font-weight:600}
.kx-bigplay{position:absolute;inset:0;display:grid;place-items:center;z-index:6;background:rgba(9,10,14,.42)}
.kx-bigplay[hidden]{display:none}
.kx-bigbtn{width:68px;height:68px;border-radius:50%;border:0;cursor:pointer;background:#FFB020;color:#161008;display:grid;place-items:center;box-shadow:0 10px 30px -6px rgba(255,176,32,.6);transition:transform .15s}
.kx-bigbtn:hover{transform:scale(1.06)}
.kx-bigbtn svg{width:28px;height:28px;margin-left:3px}

/* controls */
.kx-controls{display:flex;align-items:center;gap:11px;padding:13px 4px 3px}
.kx-cspace{flex:1}
/* the filmstrip — one clickable mini-slide per scene, iMovie-style, in place of a scrubber */
.kx-filmstrip{display:flex;gap:8px;padding:12px 2px 0;overflow-x:auto;scrollbar-width:thin}
.kx-fcard{position:relative;flex:0 0 auto;width:122px;padding:2px;border:2px solid transparent;border-radius:10px;
  background:none;cursor:pointer;transition:border-color .15s ease,transform .15s ease}
.kx-fcard:hover{transform:translateY(-2px)}
.kx-fcard.kx-fc-on{border-color:var(--amber)}
.kx-fthumb{position:relative;width:114px;height:64px;border-radius:7px;overflow:hidden;
  background:radial-gradient(120% 130% at 50% 0%,#191D28 0%,#12141B 100%)}
.kx-player[data-stage="paper"] .kx-fthumb{background:radial-gradient(120% 130% at 50% 0%,#FFFDF8 0%,#F4EDDF 100%)}
.kx-fthumb>div{pointer-events:none} /* scaledMount surface — display only */
.kx-fbar{position:absolute;left:8px;right:8px;bottom:7px;height:3px;border-radius:99px;background:rgba(128,128,128,.3);overflow:hidden;pointer-events:none}
.kx-fbarfill{height:100%;width:0;background:var(--amber);border-radius:99px}
.kx-fnum{position:absolute;top:6px;left:8px;font-size:10px;font-weight:700;line-height:1;color:#fff;
  background:rgba(0,0,0,.45);padding:2px 6px 3px;border-radius:6px;pointer-events:none}
.kx-pp{width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;background:var(--tx);color:var(--bg);display:grid;place-items:center;flex:none;transition:.15s}
.kx-pp:hover{background:var(--amber);color:#161008}
.kx-pp svg{width:17px;height:17px}
.kx-ic{width:34px;height:34px;border-radius:9px;border:1px solid var(--bd2);background:transparent;color:var(--mut);cursor:pointer;display:grid;place-items:center;flex:none;transition:.15s}
.kx-ic:hover{color:var(--tx);border-color:var(--amber)}
.kx-ic.kx-on{color:var(--amber);border-color:var(--amber)}
.kx-ic svg{width:16px;height:16px}
.kx-time{font-family:var(--mono);font-size:12px;color:var(--mut);flex:none;font-variant-numeric:tabular-nums}
.kx-track{position:relative;flex:1;height:28px;display:flex;align-items:center;cursor:pointer;touch-action:none;min-width:60px}
.kx-rail{position:absolute;left:0;right:0;height:5px;border-radius:3px;background:var(--bd2)}
.kx-fill{position:absolute;left:0;height:5px;border-radius:3px;background:var(--amber)}
.kx-thumb{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--amber);top:50%;transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.kx-track:hover .kx-thumb{transform:translate(-50%,-50%) scale(1.15)}
.kx-track .kx-tick{position:absolute;width:2px;height:11px;background:var(--surf);top:50%;transform:translate(-50%,-50%);border-radius:2px;opacity:.85}
.kx-track .kx-tick-a3{background:color-mix(in srgb,var(--kx-a,#FFB020) 65%,var(--surf));height:14px}

/* ============ scene primitives ============ */
/* ---- deck typeface pairing (user-chosen "Theme"). Two vars — body + display — default to
   the app font; a .kx-font-* class on the player/thumb container overrides them. The layout
   engine measures real rendered text, so any pairing re-fits itself and can't overflow. ---- */
.kx-player,.kx-staticvars{--kx-font:var(--font);--kx-font-title:var(--font)}
.kx-font-editorial{--kx-font-title:"Fraunces",Georgia,"Times New Roman",serif}
.kx-font-grotesk{--kx-font:"Space Grotesk",var(--font);--kx-font-title:"Space Grotesk",var(--font)}
/* ---- composition engine (atomic layout) — JS owns positions, so no flex/padding here ---- */
.kx-compose{padding:0;display:block;font-family:var(--kx-font)}
.kx-compose .kx-atom{position:absolute;opacity:0;box-sizing:border-box;color:var(--st-ink);will-change:transform,opacity}
.kx-a-eyebrow{font-family:var(--mono);font-size:var(--kx-c-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--kx-a2);font-weight:600;text-align:center}
.kx-a-title{font-family:var(--kx-font-title);font-size:var(--kx-c-title);font-weight:800;letter-spacing:-.02em;line-height:1.08;text-wrap:balance;text-align:center}
.kx-a-text{font-size:var(--kx-c-body);line-height:1.42;color:var(--st-ink);text-align:left}
.kx-a-caption{font-size:var(--kx-c-caption);color:var(--st-mut);text-align:center;font-weight:500}
.kx-a-bullets ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55em}
.kx-a-bullets .kx-a-li{display:flex;align-items:flex-start;gap:.6em;font-size:var(--kx-c-body);line-height:1.34}
/* read-along: the narration on-slide. Future words sit dimmed, spoken words are full ink,
   and the word being spoken wears the accent pill — the same treatment as the title emphasis. */
.kx-a-narration{text-align:left}
.kx-a-narration .kx-cw{opacity:.34;transition:opacity .18s ease,background-color .14s ease;
  border-radius:.5em;padding:.02em .18em .08em;margin:-.02em -.18em -.08em}
.kx-a-narration .kx-cw.kx-said{opacity:1}
.kx-a-narration .kx-cw.kx-now{background:var(--kx-a,#3D63F2);color:var(--st-onaccent,#fff);opacity:1;font-weight:700}
/* spoken mode: bullets sit dimmed and ILLUMINATE as the voice names each one — a state change
   reads fine even ±hundreds of ms off (device latency), where a pop-in at the wrong moment
   reads broken. Static/read renders show all items at full strength. */
.kx-compose[data-kx-mode="spoken"] .kx-a-li{opacity:.32;transition:opacity .22s ease}
.kx-compose[data-kx-mode="spoken"] .kx-a-li .kx-a-dot{filter:grayscale(1) opacity(.55);transition:filter .22s ease}
.kx-compose[data-kx-mode="spoken"] .kx-a-li.kx-li-on{opacity:1}
.kx-compose[data-kx-mode="spoken"] .kx-a-li.kx-li-on .kx-a-dot{filter:none}
.kx-a-bullets .kx-a-dot{flex:none;width:.5em;height:.5em;border-radius:50%;background:var(--kx-a);margin-top:.48em}
.kx-a-stat{text-align:center}
.kx-a-statv{font-size:var(--kx-c-stat);font-weight:800;color:var(--kx-a);line-height:1;letter-spacing:-.02em}
.kx-a-statc{font-size:var(--kx-c-caption);color:var(--st-mut);margin-top:.4em;font-weight:500}
.kx-a-object{display:flex;flex-direction:column;align-items:center;gap:.4em}
.kx-a-objart{display:flex;align-items:center;justify-content:center;width:100%}
.kx-a-objsvg{width:100%;height:100%;display:block;overflow:visible}
.kx-a-chip{border:1.5px solid color-mix(in srgb,var(--kx-a) 55%,transparent);background:color-mix(in srgb,var(--kx-a) 10%,transparent);border-radius:14px;padding:.3em .7em;font-size:var(--kx-c-label);font-weight:700;text-align:center;line-height:1.15;overflow:hidden}
.kx-a-objlbl{font-size:var(--kx-c-label);font-weight:600;text-align:center;line-height:1.15;max-width:100%}
.kx-a-objcap{font-size:var(--kx-c-caption);color:var(--st-mut);text-align:center;line-height:1.2}
.kx-eyebrow{font-family:var(--mono);font-size:clamp(9px,2.6cqmin,13px);letter-spacing:.14em;text-transform:uppercase;color:var(--kx-a2);font-weight:600}
.kx-chart,.kx-cycle,.kx-hub,.kx-flow,.kx-network,.kx-meter,.kx-scale,.kx-orbit,.kx-donut,.kx-tree,.kx-globe,.kx-algo,.kx-callstack,.kx-list,.kx-grid,.kx-bitfield,
.kx-bintree,.kx-graph,.kx-arch,.kx-datapath,.kx-seq,.kx-nn,.kx-hier,.kx-layers,.kx-fsm,.kx-wave,.kx-scatter,.kx-tracks,.kx-chain,.kx-mem,.kx-git,.kx-venn,.kx-compress,.kx-pixels,.kx-descent,.kx-attn,.kx-htable,.kx-logic,.kx-eloop{padding:0}
.kx-chart svg,.kx-cycle svg,.kx-hub svg,.kx-flow svg,.kx-network svg,.kx-meter svg,.kx-scale svg,.kx-orbit svg,.kx-donut svg,.kx-tree svg,.kx-globe svg,.kx-algo svg,.kx-callstack svg,.kx-list svg,.kx-grid svg,.kx-bitfield svg,
.kx-bintree svg,.kx-graph svg,.kx-arch svg,.kx-datapath svg,.kx-seq svg,.kx-nn svg,.kx-hier svg,.kx-layers svg,.kx-fsm svg,.kx-wave svg,.kx-scatter svg,.kx-tracks svg,.kx-chain svg,.kx-mem svg,.kx-git svg,.kx-venn svg,.kx-compress svg,.kx-pixels svg,.kx-descent svg,.kx-attn svg,.kx-htable svg,.kx-logic svg,.kx-eloop svg{position:absolute;inset:0}

/* codetrace */
.kx-codetrace{align-items:center;justify-content:center}
.kx-ct-wrap{display:flex;gap:3cqmin;width:90%;max-width:96%;align-items:stretch}
.kx-ct-code{flex:1.4;margin:0;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:3cqmin;font-family:var(--mono);font-size:clamp(10px,2.9cqmin,15px);line-height:1.7;color:#D6D3CA;overflow:auto;white-space:pre}
.kx-ct-ln{padding:0 1.4cqmin;border-radius:4px;transition:background .2s}
.kx-ct-ln.on{background:color-mix(in srgb,var(--kx-a) 22%,transparent);box-shadow:inset 2px 0 0 var(--kx-a)}
.kx-ct-vars{flex:1;background:var(--surf2);border:1px solid var(--bd);border-radius:12px;padding:3cqmin;min-width:26%}
.kx-ct-vh{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:2cqmin}
.kx-ct-v{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:clamp(11px,3cqmin,15px);padding:1cqmin 0;border-bottom:1px solid var(--bd)}
.kx-ct-vn{color:var(--kx-a2);font-weight:600}.kx-ct-vv{color:var(--st-ink,#F4F1EA)}
.kx-ct-empty{color:var(--faint)}

/* hashbox / cryptoflow / keypair / table (dom) */
.kx-hashbox{align-items:center;justify-content:center}
.kx-hb-wrap{display:flex;align-items:center;gap:2.4cqmin;flex-wrap:wrap;justify-content:center}
.kx-hb-b{background:rgba(255,255,255,.05);border:1px solid var(--kx-a);border-radius:10px;padding:3cqmin 4cqmin;font-family:var(--mono);font-size:clamp(13px,3.6cqmin,20px);color:var(--st-ink,#F4F1EA);font-weight:600}
.kx-hb-out{color:var(--kx-a2);border-color:var(--kx-a2)}
.kx-hb-fn{background:color-mix(in srgb,var(--kx-a) 20%,transparent);border-radius:10px;padding:3cqmin 3.5cqmin;font-weight:700;color:var(--kx-a2)}
.kx-hb-arrow{color:var(--mut);font-size:clamp(16px,4cqmin,26px)}
.kx-hb-cap{flex-basis:100%;text-align:center;color:var(--mut);font-size:clamp(12px,3cqmin,16px);margin-top:3cqmin}
.kx-crypto,.kx-keypair{align-items:center;justify-content:center;text-align:center}
.kx-cf-wrap{display:flex;flex-direction:column;align-items:center;gap:1.6cqmin}
.kx-cf-b{background:rgba(255,255,255,.05);border:1px solid var(--kx-a);border-radius:10px;padding:2cqmin 4cqmin;font-family:var(--mono);font-weight:600;color:var(--st-ink,#F4F1EA);font-size:clamp(13px,3.4cqmin,18px)}
.kx-cf-cipher{color:var(--kx-a2);border-color:var(--kx-a2)}
.kx-cf-step{color:var(--mut);font-size:clamp(11px,2.8cqmin,14px);display:flex;gap:2cqmin;align-items:center}
.kx-cf-cap{color:var(--mut);margin-top:2cqmin;font-size:clamp(12px,3cqmin,15px)}
.kx-kp-wrap{display:flex;gap:5cqmin;align-items:stretch;justify-content:center;flex-wrap:wrap}
.kx-kp-col{border:1px solid var(--kx-a);border-radius:14px;padding:4cqmin;max-width:40%;min-width:34%}
.kx-kp-icon{font-size:clamp(28px,8cqmin,48px)}
.kx-kp-t{font-weight:800;color:var(--kx-a2);margin-top:2cqmin;font-size:clamp(14px,3.6cqmin,20px)}
.kx-kp-n{color:var(--mut);font-size:clamp(11px,2.8cqmin,14px);margin-top:1.5cqmin;line-height:1.4}
.kx-kp-cap{flex-basis:100%;color:var(--mut);margin-top:2cqmin;font-size:clamp(12px,3cqmin,15px)}
.kx-table{align-items:center;justify-content:center}
.kx-tb-wrap{width:90%;overflow:auto}
.kx-tb-cap{color:var(--mut);font-size:clamp(12px,3cqmin,16px);margin-bottom:2cqmin;font-weight:600}
.kx-tb{border-collapse:collapse;width:100%;font-size:clamp(11px,3cqmin,16px);color:var(--st-ink,#F4F1EA)}
.kx-tb th{font-family:var(--mono);font-size:.85em;text-transform:uppercase;letter-spacing:.04em;color:var(--kx-a2);text-align:left;padding:2cqmin 3cqmin;border-bottom:2px solid var(--kx-a)}
.kx-tb td{padding:2cqmin 3cqmin;border-bottom:1px solid rgba(255,255,255,.1)}
.kx-tone-a{--tc:var(--kx-a2)}.kx-tone-b{--tc:#37D6C0}.kx-tone-c{--tc:#FF6E5B}

/* title */
.kx-title-wrap{max-width:88%}
.kx-h1{font-size:clamp(24px,9cqmin,60px);font-weight:800;letter-spacing:-.025em;line-height:1.05;margin-top:2.5cqmin;text-wrap:balance}
.kx-underline{height:4px;background:var(--kx-a);border-radius:3px;margin-top:3cqmin;box-shadow:0 0 16px var(--kx-a);width:0}
.kx-sub{font-size:clamp(13px,4.2cqmin,22px);color:var(--st-mut);margin-top:3cqmin;font-weight:500}

/* statement */
.kx-statement{align-items:center;text-align:center}
.kx-stmt-wrap{max-width:90%}
.kx-stmt{font-size:clamp(22px,9cqmin,60px);font-weight:800;letter-spacing:-.02em;line-height:1.1;text-wrap:balance;color:var(--st-ink)}
.kx-stmt-note{font-size:clamp(13px,4cqmin,22px);color:var(--st-mut);margin-top:3.5cqmin;font-weight:500}

/* bullets */
.kx-bul-wrap{max-width:92%}
.kx-bul-list{list-style:none;margin:3.5cqmin 0 0;padding:0;display:flex;flex-direction:column;gap:2.6cqmin}
.kx-bi{display:flex;gap:2.6cqmin;align-items:center}
.kx-bi .kx-tick{width:6.2cqmin;height:6.2cqmin;min-width:22px;min-height:22px;max-width:34px;max-height:34px;border-radius:26%;flex:none;background:var(--kx-a);color:var(--st-onaccent,#fff);display:grid;place-items:center;box-shadow:0 4px 12px -4px var(--kx-a)}
.kx-bi .kx-tick svg{width:64%;height:64%}
.kx-bi span:last-child{font-size:clamp(15px,4.6cqmin,26px);font-weight:600;color:var(--st-ink);letter-spacing:-.01em;line-height:1.25}

/* steps */
.kx-steps-wrap{max-width:94%}
.kx-steps-list{list-style:none;margin:3cqmin 0 0;padding:0;display:flex;flex-direction:column;gap:2.4cqmin}
.kx-step{display:flex;gap:2.8cqmin;align-items:flex-start}
.kx-step-n{width:7cqmin;height:7cqmin;min-width:26px;min-height:26px;max-width:40px;max-height:40px;border-radius:50%;flex:none;background:color-mix(in srgb,var(--kx-a) 16%,transparent);border:1.5px solid var(--kx-a);color:var(--kx-a2);font-weight:700;display:grid;place-items:center;font-size:clamp(12px,3.4cqmin,18px);font-variant-numeric:tabular-nums}
.kx-step-body{display:flex;flex-direction:column;gap:.4cqmin;padding-top:.6cqmin}
.kx-step-label{font-size:clamp(14px,4.2cqmin,23px);font-weight:650;color:var(--st-ink);line-height:1.2}
.kx-step-detail{font-size:clamp(12px,3.3cqmin,17px);color:var(--st-mut);line-height:1.3}

/* compare */
.kx-compare{padding:8% 7%}
.kx-cmp-wrap{display:flex;gap:3cqmin;height:100%;align-items:stretch}
.kx-compare[data-orient="portrait"] .kx-cmp-wrap{flex-direction:column}
.kx-cmp{flex:1;border-radius:14px;padding:4cqmin;display:flex;flex-direction:column;justify-content:center;gap:1.6cqmin;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.kx-cmp-ic{width:9cqmin;height:9cqmin;min-width:30px;min-height:30px;max-width:52px;max-height:52px;margin-bottom:1cqmin}
.kx-cmp-ic svg{width:100%;height:100%}
.kx-cmp-ic{color:var(--tc)}
.kx-cmp-title{font-size:clamp(15px,4.8cqmin,26px);font-weight:750;letter-spacing:-.01em;line-height:1.15}
.kx-cmp-cap{font-size:clamp(12px,3.4cqmin,17px);color:var(--st-mut);line-height:1.35}
.kx-cmp{border-top:3px solid var(--tc)}
.kx-cmp .kx-cmp-title{color:var(--tc)}

/* stat */
.kx-stat{align-items:center;text-align:center}
.kx-stat-num{font-size:clamp(48px,20cqmin,150px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.kx-stat-cap{font-size:clamp(13px,4.4cqmin,24px);color:var(--st-mut);margin-top:3.5cqmin;font-weight:500;max-width:24ch;margin-left:auto;margin-right:auto;line-height:1.35}

/* timeline */
.kx-tl-wrap{max-width:94%}
.kx-tl-list{list-style:none;margin:3cqmin 0 0;padding:0 0 0 3cqmin;display:flex;flex-direction:column;gap:2.6cqmin;border-left:2px solid rgba(255,255,255,.12)}
.kx-tl{display:flex;align-items:baseline;gap:2.4cqmin;position:relative}
.kx-tl-dot{position:absolute;left:calc(-3cqmin - 5px);width:9px;height:9px;border-radius:50%;background:var(--kx-a);top:.5em}
.kx-tl-when{font-family:var(--mono);font-size:clamp(11px,3cqmin,15px);color:var(--kx-a2);font-weight:600;flex:none;min-width:8ch}
.kx-tl-label{font-size:clamp(13px,3.8cqmin,20px);color:var(--st-ink);font-weight:550;line-height:1.25}

/* ============ under the hood ============ */
.uh{background:var(--surf);border:0;border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.uh-h{padding:15px 17px 13px;border-bottom:1px solid var(--bd)}
.uh-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-weight:600}
.uh-h h2{font-size:14.5px;font-weight:700;margin:6px 0 0;letter-spacing:-.01em}
.uh-meta{font-family:var(--mono);font-size:11px;color:var(--mut);margin-top:7px}
.uh-meta b{color:var(--tx)}
.uh-list{padding:8px;max-height:340px;overflow-y:auto}
.uh-row{width:100%;text-align:left;display:grid;grid-template-columns:20px 1fr auto;gap:9px;align-items:start;padding:8px 9px;border-radius:9px;border:0;background:transparent;cursor:pointer;font-family:var(--font);transition:.15s}
.uh-row:hover{background:var(--surf2)}
.uh-row.on{background:color-mix(in srgb,var(--amber) 11%,var(--surf));box-shadow:inset 3px 0 0 var(--amber)}
.uh-n{font-family:var(--mono);font-size:11px;color:var(--faint);padding-top:1px;font-variant-numeric:tabular-nums}
.uh-row.on .uh-n{color:var(--amber)}
.uh-kind{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--teal);font-weight:600;display:block}
.uh-nar{font-size:12px;color:var(--mut);margin-top:2px;display:block;line-height:1.4}
.uh-row.on .uh-nar{color:var(--tx)}
.uh-dur{font-family:var(--mono);font-size:10.5px;color:var(--faint);padding-top:1px;font-variant-numeric:tabular-nums}
.uh-json-wrap{border-top:1px solid var(--bd);padding:12px 15px 14px;background:var(--surf2)}
.uh-json-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.uh-json{font-family:var(--mono);font-size:11px;line-height:1.55;margin:0;white-space:pre-wrap;word-break:break-word;color:var(--mut);max-height:230px;overflow:auto}
.uh-json .jk{color:var(--amber)}
.uh-json .js{color:var(--teal)}
.uh-json .jn{color:var(--coral)}

/* illustration */
.kx-illus{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqmin;padding:6% 6% 12%}
.kx-illus-art{width:70cqmin;max-width:84%;aspect-ratio:1}
.kx-illus-art svg{width:100%;height:100%;display:block;overflow:visible}
.kx-illus-cap{font-size:clamp(14px,4cqmin,22px);color:var(--st-ink);font-weight:600;text-align:center;max-width:82%;line-height:1.3}
/* "Try another look" — alternate compositions per scene kind (v0 = default) */
.kx-hook.kx-v1{justify-content:flex-start;align-items:flex-end;padding:6% 9% 11%}
.kx-hook.kx-v2{justify-content:flex-start;align-items:flex-start;padding:11% 9% 6%}
.kx-hook.kx-v1 .kx-hook-wrap,.kx-hook.kx-v2 .kx-hook-wrap{text-align:left;max-width:82%}
.kx-hook.kx-v1 .kx-hook-u,.kx-hook.kx-v2 .kx-hook-u{margin-left:0;margin-right:auto}
.kx-statement.kx-v1{align-items:flex-start;text-align:left}
.kx-statement.kx-v2 .kx-stmt-wrap{display:flex;flex-direction:column-reverse}
.kx-statement.kx-v2 .kx-stmt-note{margin:0 0 3.5cqmin;letter-spacing:.12em;text-transform:uppercase;font-size:clamp(11px,3cqmin,15px);font-weight:700;color:var(--kx-a2)}
.kx-stat.kx-v1 .kx-stat-num{font-size:clamp(64px,27cqmin,200px)}
.kx-stat.kx-v1 .kx-stat-cap{font-size:clamp(12px,3.6cqmin,20px);opacity:.85}
.kx-stat.kx-v2{align-items:flex-start;text-align:left}
.kx-stat.kx-v2 .kx-stat-cap{margin-left:0;margin-right:0}
.kx-illus.kx-v1{flex-direction:row;align-items:center;justify-content:center;gap:5cqmin;padding:8%}
.kx-illus.kx-v1 .kx-illus-art{width:50cqmin;max-width:52%}
.kx-illus.kx-v1 .kx-illus-cap{text-align:left;max-width:34%;font-size:clamp(15px,4.4cqmin,26px)}
.kx-payoff.kx-v1{align-items:flex-start;text-align:left}

/* matrix */
.kx-matrix{padding:7% 7%}
.kx-mx-wrap{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;gap:2cqmin;height:100%;width:100%}
.kx-mx-y{grid-column:1;grid-row:1;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;align-self:center;font-family:var(--mono);font-size:clamp(9px,2.4cqmin,12px);letter-spacing:.1em;text-transform:uppercase;color:var(--st-mut)}
.kx-mx-grid{grid-column:2;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:2.4cqmin}
.kx-mx-x{grid-column:2;grid-row:2;text-align:center;font-family:var(--mono);font-size:clamp(9px,2.4cqmin,12px);letter-spacing:.1em;text-transform:uppercase;color:var(--st-mut)}
.kx-mx-cell{border-radius:12px;padding:3cqmin;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);border-left:3px solid var(--tc);display:flex;flex-direction:column;justify-content:center;gap:1cqmin}
.kx-mx-label{font-size:clamp(13px,3.7cqmin,20px);font-weight:700;color:var(--tc);line-height:1.15}
.kx-mx-cap{font-size:clamp(11px,2.8cqmin,15px);color:var(--st-mut);line-height:1.3}

/* annotate */
.kx-annotate{align-items:center;text-align:center}
.kx-an-wrap{max-width:90%}
.kx-an-text{font-size:clamp(18px,6cqmin,38px);font-weight:650;line-height:1.5;letter-spacing:-.01em;color:var(--st-ink)}
.kx-an-mark{background-image:linear-gradient(var(--tc),var(--tc));background-repeat:no-repeat;background-position:0 92%;background-size:calc(var(--on,0)*100%) .16em;color:var(--st-ink);border-radius:2px;padding-bottom:.05em}
.kx-an-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:2cqmin 4cqmin;margin-top:5cqmin}
.kx-an-leg{display:flex;align-items:center;gap:1.4cqmin;font-size:clamp(12px,3cqmin,17px);font-weight:600;color:var(--st-mut)}
.kx-an-dot{width:2.6cqmin;height:2.6cqmin;min-width:10px;min-height:10px;border-radius:50%;background:var(--tc)}

/* code */
.kx-code{align-items:center}
.kx-code-wrap{width:88%;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:4cqmin 4cqmin 4cqmin;position:relative;overflow:hidden}
.kx-code-lang{position:absolute;top:1.6cqmin;right:2.4cqmin;font-family:var(--mono);font-size:clamp(9px,2.2cqmin,12px);color:var(--st-mut);letter-spacing:.05em}
.kx-code-pre{margin:0;font-family:var(--mono);font-size:clamp(11px,3.1cqmin,17px);line-height:1.65;color:#D6D3CA;white-space:pre;overflow-x:auto}
.kx-code-ln{padding:0 1.4cqmin;border-radius:4px}
.kx-code-hl{background:color-mix(in srgb,var(--kx-a) 15%,transparent);box-shadow:inset 2px 0 0 var(--kx-a)}
.kx-t-cm{color:#6b7180}.kx-t-st{color:#37D6C0}.kx-t-kw{color:var(--kx-a2)}.kx-t-nu{color:#FF9F6B}

/* formula */
.kx-formula{align-items:center;text-align:center}
.kx-fx-wrap{max-width:92%}
.kx-fx-main{font-size:clamp(30px,11cqmin,76px);font-weight:700;letter-spacing:.01em;color:var(--st-ink);font-feature-settings:"tnum"}
.kx-fx-note{font-size:clamp(13px,3.6cqmin,19px);color:var(--st-mut);margin-top:3cqmin;font-weight:500}
.kx-fx-terms{display:flex;flex-wrap:wrap;justify-content:center;gap:2cqmin 3cqmin;margin-top:5cqmin}
.kx-fx-term{display:flex;align-items:center;gap:1.4cqmin;font-size:clamp(12px,3cqmin,16px)}
.kx-fx-sym{font-weight:800;color:var(--kx-a2);font-family:var(--mono);min-width:2ch;text-align:center}
.kx-fx-mean{color:var(--st-mut);font-weight:500}

@media (prefers-reduced-motion:reduce){.kx-spinner{animation:none}}
.uh-studio{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:var(--amberT);text-decoration:none}
.uh-studio:hover{text-decoration:underline}

/* ===================== Playroom hero ===================== */
.hero{position:relative;text-align:center;padding:34px 0 22px}
.hero-title{font-size:clamp(34px,6vw,58px);font-weight:400;letter-spacing:-.02em;line-height:1.12;margin:0}
.hero-b{font-weight:800}
/* emphasis by WEIGHT (regular headline, bold key phrases) + two small glyphs
   anchored to their words — integrated, never floating */
.hero-accent{white-space:nowrap}
.hero-w1{position:relative}
.hero-pencil{position:absolute;width:.6em;height:.6em;right:-.44em;top:-.1em;transform:rotate(14deg)}
.hero-play{display:inline-block;width:.56em;height:.56em;margin-left:.14em;transform:rotate(6deg) translateY(.04em)}
.hero-sub{color:var(--mut);font-size:clamp(14px,1.7vw,16.5px);line-height:1.6;margin:16px auto 0;max-width:60ch;font-weight:500}
/* candy doodles (decoration with intent — hidden on small screens) */
/* badge doodles that sit ON the headline, like stickers */
@media (max-width:760px){.hero{padding-top:18px}}

/* ===== the product in miniature: a tiny Studio window ===== */
.mock-wrap{max-width:880px;margin:18px auto 34px}
.mock{background:var(--surf);border:1.5px solid var(--bd);border-radius:20px;box-shadow:var(--shadow);padding:12px;cursor:pointer;transition:box-shadow .2s}
.mock:hover{box-shadow:0 26px 52px -22px rgba(31,33,40,.35)}
.mock:focus-visible{outline:2px solid var(--amberT);outline-offset:3px}
.mock-bar{display:flex;justify-content:space-between;align-items:center;padding:2px 6px 10px}
.mock-title{font-weight:700;font-size:13.5px}
.mock-present{background:var(--amberT);color:#fff;font-size:12px;font-weight:700;padding:5px 13px;border-radius:999px}
/* the stage alone defines the window height; the rail is pinned to match it exactly */
.mock-body{position:relative}
.mock-rail{position:absolute;left:0;top:0;bottom:0;width:24%;overflow:hidden;border-radius:10px}
.mock-belt{display:flex;flex-direction:column;gap:8px;transition:transform .5s cubic-bezier(.25,.8,.3,1);will-change:transform}
.mock-thumb{position:relative;flex:none;border-radius:9px;overflow:hidden;
  background:radial-gradient(120% 130% at 50% 0%,#FFFDF8 0%,#FBF6EC 55%,#F4EDDF 100%);
  box-shadow:inset 0 0 0 1.5px rgba(31,33,40,.10);transition:box-shadow .3s}
.mock-thumb.on{box-shadow:inset 0 0 0 2.5px var(--amberT)}
.mock-n{position:absolute;top:6px;left:6px;z-index:5;width:20px;height:20px;border-radius:50%;background:#fff;
  border:1.5px solid rgba(31,33,40,.25);color:var(--tx);font-size:10.5px;font-weight:800;display:grid;place-items:center;transition:.2s}
.mock-thumb.on .mock-n{background:var(--amberT);border-color:var(--amberT);color:#fff}
.mock-thumb-scene,.mock-mount{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.mock-thumb-scene > div,.mock-mount > div{position:absolute;inset:0}
.mock-thumb-scene .kx-scene,.mock-mount .kx-scene{position:absolute;inset:0}
.mock-stage{width:calc(76% - 10px);margin-left:calc(24% + 10px);aspect-ratio:16/9;position:relative;border-radius:12px;overflow:hidden;
  background:radial-gradient(120% 130% at 50% 0%,#FFFDF8 0%,#FBF6EC 55%,#F4EDDF 100%);
  box-shadow:inset 0 0 0 1.5px rgba(31,33,40,.10)}
.mock-scene{position:absolute;inset:0}
/* video-style progress along the stage's bottom edge */
.strip-bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(31,33,40,.12);z-index:5}
.strip-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:var(--amberT)}
@media (max-width:760px){.mock-wrap{margin-top:10px}.mock-bar{padding-bottom:8px}.mock-n{width:16px;height:16px;font-size:9px}}
/* the hand-drawn arrow pointing at Generate */
.hero-arrow{position:absolute;right:118px;top:-54px;width:80px;height:54px;color:var(--tx);opacity:.8;pointer-events:none;transform:rotate(8deg)}
@media (max-width:900px){.hero-arrow{display:none}}

/* ===================== input modes ===================== */
.ask-script-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* provenance badge: scenes with AI-added phrasing */
.src-added{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--coral);border:1px solid color-mix(in srgb,var(--coral) 45%,transparent);border-radius:999px;padding:1px 6px;margin-left:6px;vertical-align:middle}
/* accuracy guardrail: an AI-generated figure the author should verify before sharing */
.src-flag{display:inline-block;font-size:10px;font-weight:700;color:#B77400;background:color-mix(in srgb,#F5A623 20%,transparent);border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:middle;cursor:help}

/* ===================== share menu ===================== */
.st-share-wrap,.st-design-wrap{position:relative}
.st-share-menu,.st-design-menu{position:absolute;right:0;top:calc(100% + 8px);width:320px;background:var(--surf);border-radius:18px;box-shadow:var(--shadow);border:1.5px solid var(--bd);padding:8px;z-index:40;display:flex;flex-direction:column;gap:4px}
.st-share-menu[hidden],.st-design-menu[hidden]{display:none}
.st-design-menu{width:264px;padding:12px;gap:8px}
.st-menu-l{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.st-menu-d{font-size:11.5px;color:var(--mut);line-height:1.45}
.st-share-opt{display:block;text-align:left;border:0;background:transparent;border-radius:12px;padding:11px 12px;cursor:pointer;font-family:var(--font);text-decoration:none;transition:background .12s}
.st-share-opt:hover{background:var(--surf2)}
.st-share-t{display:block;font-size:13.5px;font-weight:700;color:var(--tx)}
.st-share-d{display:block;font-size:11.5px;color:var(--mut);line-height:1.45;margin-top:3px}

/* ===================== watch mode ===================== */
.watch{max-width:1020px;margin:0 auto;padding:18px clamp(14px,4vw,36px) 60px}
.watch-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
/* learner header: employer leads on the left, "via Decktell" is secondary on the right */
.watch-org{display:flex;align-items:center;gap:10px}
.watch-org-name{font-weight:800;font-size:17px;letter-spacing:-.01em}
/* company brand mark: uploaded logo, or a name-initial monogram fallback */
.org-brand{flex:none;display:grid;place-items:center;overflow:hidden;line-height:1}
.org-brand-img{object-fit:contain;background:#fff}
.org-brand-mono{background:var(--tx);color:#fff;font-weight:800}
.org-brand-sm{width:30px;height:30px;border-radius:8px;font-size:14px}
.org-brand-lg{width:52px;height:52px;border-radius:12px;font-size:22px}
.cert-issuer{display:inline-flex;align-items:center;gap:8px}
.cert-issuer .org-brand{width:24px;height:24px;border-radius:6px;font-size:11px}
.watch-via{display:inline-flex;align-items:center;gap:6px;color:var(--faint);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.watch-via .mark{width:18px;height:18px}
.watch-via-name{color:var(--mut)}
.watch-via:hover .watch-via-name{color:var(--tx)}
.watch-main{text-align:center}
.watch-title{font-size:clamp(22px,3.6vw,34px);font-weight:800;letter-spacing:-.015em;margin:10px 0 4px}
.watch-sub{color:var(--mut);font-size:14px;margin:0 0 18px;font-weight:500}
.watch-card{text-align:left}
.watch-cta{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;color:var(--mut);font-size:13px;font-weight:500}
.watch-cta .ask-go{text-decoration:none}
/* phone: reclaim vertical room for the stage and give controls real touch targets */
@media (max-width:559px){
  .watch{padding:12px 14px 40px}
  .watch-top{margin-bottom:4px}
  .brand h1,.brand .brand-name{font-size:15px}
  .watch-title{font-size:19px;margin:6px 0 2px}
  .watch-sub{font-size:12.5px;margin:0 0 12px}
  .player-card{padding:10px;border-radius:18px}
  .watch-cta{margin-top:16px;flex-wrap:wrap}
  .kx-controls{gap:9px;padding:12px 2px 2px}
  .kx-pp{width:46px;height:46px}
  .kx-pp svg{width:19px;height:19px}
  .kx-ic{width:40px;height:40px}
  .kx-bigbtn{width:60px;height:60px}
}

/* ===================== handout (print → PDF) ===================== */
.handout{max-width:900px;margin:0 auto;padding:18px clamp(14px,4vw,36px) 60px}
.ho-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.ho-title{font-size:clamp(22px,3.4vw,32px);font-weight:800;letter-spacing:-.015em;margin:0 0 18px}
.ho-page{margin-bottom:26px}
.ho-slide{border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.ho-scene{position:relative;aspect-ratio:16/9;background:radial-gradient(120% 130% at 50% 0%,#191D28 0%,#12141B 55%,#0D0F15 100%)}
.ho-scene.stage-paper{background:radial-gradient(120% 130% at 50% 0%,#FFFDF8 0%,#FBF6EC 55%,#F4EDDF 100%);border:1px solid var(--bd)}
.ho-scene > div{position:absolute;inset:0;container-type:size}
.ho-scene .kx-scene{position:absolute;inset:0}
.ho-notes{display:flex;gap:10px;align-items:baseline;padding:12px 6px 0;font-size:13.5px;line-height:1.6;color:var(--tx)}
.ho-n{font-family:var(--mono);font-size:11px;color:var(--faint);flex:none}
.ho-foot{text-align:center;color:var(--faint);font-size:12px;margin-top:8px}
@media print{
  .ho-toolbar,.ho-foot{display:none}
  body{background:#fff}
  .handout{padding:0;max-width:none}
  .ho-page{page-break-after:always;margin:0 0 12px}
  .ho-slide{box-shadow:none;border:1px solid #ddd}
}
/* Nothing floating ever prints: Chrome repeats position:fixed elements on EVERY page, so
   the feedback button (and any open dialog) would stamp itself onto each sheet of the
   insurer-facing report or a certificate. Global, so future print views inherit it. */
@media print{
  .fb-fab,.fb-dialog,.cfm{display:none !important}
}

/* ===================== front-door creator + decks ===================== */
.ask-script-actions{display:flex;align-items:center;gap:14px}
.decks{margin-top:34px}
.decks-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.decks-head h3{font-size:24px;font-weight:800;margin:0;letter-spacing:-.02em}
.top-right{display:flex;align-items:center;gap:14px}
.deckslink{font-size:13.5px;font-weight:700;color:var(--tx);text-decoration:none;padding:8px 16px;border-radius:10px;border:0;box-shadow:inset 0 0 0 1px var(--bd2);background:var(--surf2);transition:.15s}
.deckslink:hover{border-color:var(--amberT);color:var(--amberT)}
.deckslink-new{background:var(--amberT);border-color:var(--amberT);color:#fff}
.deckslink-new:hover{color:#fff;filter:brightness(1.07)}
.decks-count{font-family:var(--mono);font-size:11px;color:var(--mut);background:var(--surf2);box-shadow:inset 0 0 0 1px var(--bd);border-radius:6px;padding:2px 8px}
.hist-card{cursor:pointer}
.hist-actions{margin-top:auto;display:flex;gap:6px;font-size:12px;font-weight:700;color:var(--amber)}
.hist-actions a{color:var(--amber);text-decoration:none}
.hist-actions a:hover{text-decoration:underline}
.hist-sep{color:var(--faint)}
/* stage theme segment (Studio top bar) */
.st-stage-seg{display:flex;background:var(--surf2);border:1.5px solid var(--bd);border-radius:999px;padding:3px;gap:2px}
.st-seg{border:0;background:transparent;color:var(--mut);font-family:var(--font);font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;cursor:pointer;transition:.12s}
.st-seg.on{background:var(--surf);color:var(--tx);box-shadow:var(--shadow)}

/* ---- auth (signup / login) ---- */
.auth{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px}
.auth-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.auth-brand .mark{width:34px;height:34px}
.auth-brand h1,.auth-brand .brand-name{font-size:20px;font-weight:800;margin:0;letter-spacing:-.01em}
.auth-card{width:100%;max-width:380px;background:var(--surf);border-radius:20px;padding:28px 26px;box-shadow:var(--shadow)}
.auth-card h2{font-size:22px;font-weight:800;margin:0 0 4px;letter-spacing:-.02em}
.auth-sub{color:var(--mut);font-size:13.5px;margin:0 0 18px}
.auth-form{display:flex;flex-direction:column;gap:8px}
.auth-label{font-size:12px;font-weight:700;color:var(--mut);margin-top:4px;text-align:left}
.auth-opt{font-weight:500;color:var(--faint)}
.auth-fine{color:var(--faint);font-size:12px;line-height:1.5;margin:14px 0 0;text-align:center}
.auth-form input{width:100%;box-sizing:border-box;background:var(--surf2);border:1.5px solid var(--bd2);border-radius:11px;padding:12px 13px;font-size:14px;font-family:var(--font);color:var(--tx);outline:none;transition:border-color .12s}
.auth-form input:focus{border-color:var(--amberT)}
.auth-go{background:var(--amberT);color:#fff;border:0;border-radius:11px;padding:12px;font-size:14px;font-weight:700;cursor:pointer;margin-top:4px;transition:filter .12s}
.auth-go:hover{filter:brightness(1.06)}
.auth-alt{text-align:center;color:var(--mut);font-size:13px;margin:16px 0 0}
.auth-alt a{color:var(--amber);text-decoration:none;font-weight:600}
.auth-err{background:#FEECEC;color:#B42318;border-radius:9px;padding:9px 12px;font-size:13px;margin-bottom:12px}
.auth-note{background:#E9F7EF;color:#1B7A43;border-radius:9px;padding:9px 12px;font-size:13px;margin-bottom:12px}

/* ---- top nav auth controls ---- */
.top-right{display:flex;align-items:center;gap:10px}
.nav-ghost{text-decoration:none;color:var(--tx);font-weight:600;font-size:14px;padding:8px 12px;border-radius:9px}
.nav-ghost:hover{background:var(--surf2)}
.nav-solid{text-decoration:none;color:#fff;background:var(--amberT);font-weight:700;font-size:14px;padding:8px 15px;border-radius:9px;transition:filter .12s}
.nav-solid:hover{filter:brightness(1.06)}
/* Account trigger — a pill that matches the Library/Team tabs, with a gradient-ring avatar */
.acct{position:relative}
.acct summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--tx);background:none;border-radius:10px;padding:5px 8px 5px 5px;transition:background .12s}
.acct summary::-webkit-details-marker{display:none}
.acct summary:hover{background:var(--surf2)}
.acct[open] summary{background:var(--surf2)}
.acct-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-chev{width:14px;height:14px;color:var(--mut);flex:none;transition:transform .15s}
.acct[open] .acct-chev{transform:rotate(180deg)}
.acct-avi{width:24px;height:24px;flex:none;border-radius:50%;background:var(--bd2);display:grid;place-items:center}
.acct-avi-in{color:var(--mut);font-size:12px;font-weight:800;line-height:1}

/* Dropdown card — white surface, outline-icon rows, an active highlight, a divider */
.acct-menu{position:absolute;right:0;top:calc(100% + 10px);background:var(--surf);border:1px solid var(--bd);border-radius:16px;box-shadow:var(--shadow);min-width:250px;padding:8px;z-index:60;display:flex;flex-direction:column;gap:2px}
.acct-org{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);padding:8px 12px 10px}
.acct-org-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.acct-sep{height:1px;background:var(--bd);margin:6px 4px}
.acct-row{display:flex;align-items:center;gap:12px;text-align:left;text-decoration:none;color:var(--tx);font-size:14px;font-weight:600;padding:9px 12px;border-radius:11px;background:none;border:0;width:100%;cursor:pointer;font-family:var(--font);transition:.1s}
.acct-row:hover,.acct-row.on{background:var(--surf2)}
.acct-row .ws-ico{width:19px;height:19px;flex:none;color:var(--mut)}
.acct-menu form{margin:0}
.acct-logout{color:var(--coral)!important}
.acct-logout .ws-ico{color:var(--coral)}

/* ============ Workspace: People + Training (PR3) ============ */
/* Top buttons wear the "Preview" (.lib-btn.ghost) look — surf2 fill, inset hairline,
   bold ink label — just tighter than the library button. */
/* Underline tabs: text links, active gets a brand underline */
.wsnav{display:flex;gap:22px;margin-left:auto;align-items:center}
.wsnav a{text-decoration:none;color:var(--mut);font-weight:600;font-size:14.5px;padding:6px 2px;border-bottom:2px solid transparent;transition:color .12s,border-color .12s}
.wsnav a:hover{color:var(--tx)}
.wsnav a.on{color:var(--tx);border-bottom-color:var(--amberT)}
.wsnav a:focus,.acct summary:focus{outline:none}
.wsnav a:focus-visible,.acct summary:focus-visible{outline:2px solid var(--amberT);outline-offset:2px}
.top .acct{margin-left:14px}

.wsp{max-width:1120px;margin:0 auto;padding:26px 22px 60px}
.wsp-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 18px}
.wsp-head h3{font-size:26px;font-weight:800;margin:0 0 4px;letter-spacing:-.02em}
.wsp-sub{margin:0;color:var(--mut);font-size:14px;max-width:60ch}
/* Seat and quota counts moved to .fact chips, where every other count in the workspace lives. */
.wsp-head .fact-row{margin-top:8px}
.wsp-note,.wsp-err{border-radius:10px;padding:11px 14px;font-size:14px;font-weight:500;margin-bottom:16px}
.wsp-note{background:color-mix(in srgb,var(--teal) 14%,transparent);color:#177a4f;border:1px solid color-mix(in srgb,var(--teal) 34%,transparent)}
.wsp-err{background:color-mix(in srgb,var(--coral) 12%,transparent);color:#b23b3b;border:1px solid color-mix(in srgb,var(--coral) 32%,transparent)}
.wsp-go{display:inline-block;text-decoration:none;text-align:center;background:var(--amberT);color:#fff;font-weight:700;font-size:14px;font-family:var(--font);padding:9px 18px;border-radius:10px;border:0;cursor:pointer;transition:filter .12s;white-space:nowrap}
.wsp-go:hover{filter:brightness(1.06)}
.wsp-hint{color:var(--faint);font-size:12.5px}
.wsp-empty{color:var(--mut);font-size:15px;padding:30px 0;text-align:center}
.wsp-empty a{color:var(--amberT);font-weight:600}
.wsp-back{display:inline-block;color:var(--mut);text-decoration:none;font-size:13px;font-weight:600;margin-bottom:14px}
.wsp-back:hover{color:var(--tx)}
.wsp-arch{color:var(--faint);font-size:12.5px;margin-top:16px}

/* roster add */
/* "Add people" modal: a native <dialog>, so backdrop / focus-trap / Esc are free. */
.add-dialog{border:0;padding:0;border-radius:18px;background:var(--surf);color:var(--tx);box-shadow:0 24px 60px -20px rgba(120,74,26,.55);max-width:460px;width:calc(100vw - 32px)}
.add-dialog::backdrop{background:rgba(60,40,15,.4);backdrop-filter:blur(2px)}
.add-dialog-inner{position:relative;padding:24px}
.add-dialog-x{position:absolute;top:13px;right:13px;width:30px;height:30px;display:grid;place-items:center;border:0;background:none;color:var(--faint);font-size:15px;cursor:pointer;border-radius:8px;font-family:var(--font)}
.add-dialog-x:hover{background:var(--surf2);color:var(--tx)}
.add-dialog-title{font-size:19px;font-weight:800;letter-spacing:-.01em;margin:0 0 4px}
.add-dialog-sub{margin:0 0 16px;color:var(--mut);font-size:14px;max-width:42ch}
.add-dialog-input{min-height:46px}
.add-dialog-help{color:var(--mut);font-size:12.5px;line-height:1.6;margin-top:10px}
.add-dialog-help kbd{font-family:var(--mono);font-size:11px;background:var(--surf2);box-shadow:inset 0 0 0 1px var(--bd);border-radius:5px;padding:1px 5px;color:var(--tx)}
.add-dialog-eg{font-family:var(--mono);font-size:11.5px;background:var(--surf2);border-radius:5px;padding:1px 5px;color:var(--tx);white-space:nowrap}
.add-dialog-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;flex-wrap:wrap}
.add-dialog-btns{display:flex;align-items:center;gap:10px;margin-left:auto}
.wsp-empty-link{background:none;border:0;color:var(--amberT);font-weight:600;font-size:inherit;cursor:pointer;padding:0;font-family:var(--font);text-decoration:underline}

/* People = one card: the add-people row is a light top bar, the roster table sits flush
   below it (its own card chrome is stripped so there's one shadow, one idea). */
.roster-card{background:var(--surf);border:1px solid var(--bd);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:8px}
.roster-card .wsp-table{border:0;box-shadow:none;border-radius:0}
.roster-card .wsp-empty{padding:26px 0}
.roster-add{padding:12px 14px;border-bottom:1px solid var(--bd)}
.roster-addbar{display:flex;align-items:center;gap:10px}
.roster-addbar .chip-input{flex:1;min-height:42px}
.roster-addbar .wsp-go{flex:none}
.roster-add .wsp-hint{display:block;margin-top:8px}

/* tables */
.wsp-table{width:100%;border-collapse:collapse;font-size:14px;background:var(--surf);border:1px solid var(--bd);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.wsp-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:700;padding:11px 14px;border-bottom:1px solid #E2D4B8;background:#EFE3CB}
.wsp-table td{padding:12px 14px;border-bottom:1px solid var(--bd);vertical-align:top}
.wsp-table tr:last-child td{border-bottom:0}
.wsp-table .mono{font-family:var(--mono);font-size:12.5px;color:var(--mut)}
.wsp-table .dim{color:var(--faint)}
.wsp-table .right{text-align:right}
/* button_to puts the class on the <button> itself, so target it directly (not a descendant) */
form.button_to{margin:0;display:inline-block}
.wsp-link-del{background:none;border:1px solid var(--bd);color:var(--mut);font-size:12.5px;font-weight:600;
  cursor:pointer;font-family:var(--font);padding:5px 12px;border-radius:8px;
  transition:color .12s,border-color .12s,background .12s}
.wsp-link-del:hover{color:var(--coral);border-color:color-mix(in srgb,var(--coral) 55%,var(--bd));
  background:color-mix(in srgb,var(--coral) 8%,transparent)}

/* The hidden attribute always wins, no matter what display a class sets: this retires
   the recurring ".foo{display:flex} beats [hidden]" bug class for good. */
[hidden]{display:none!important}

/* status pills */
.pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
/* Status badges: soft tint + outline icon + colored label, rounded rect.
   The icon is a CSS mask so it always inherits the label's color (currentColor)
   — no per-view SVG or JS needed; every place that uses these classes gets it. */
.pill-done,.pill-prog,.pill-wait,.pill-err{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;border-radius:9px;padding:4px 11px;line-height:1.35;white-space:nowrap}
.pill-done::before,.pill-prog::before,.pill-wait::before,.pill-err::before{content:"";width:14px;height:14px;flex:none;background:currentColor;-webkit-mask:center/contain no-repeat var(--pill-icon);mask:center/contain no-repeat var(--pill-icon)}
.pill-done{background:color-mix(in srgb,var(--teal) 16%,transparent);color:#177a4f;--pill-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12l2.5 2.5L16 9'/%3E%3C/svg%3E")}
.pill-prog{background:color-mix(in srgb,var(--yellow) 24%,transparent);color:#8a6414;--pill-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9' stroke-dasharray='3.2 3.6'/%3E%3C/svg%3E")}
.pill-wait{background:color-mix(in srgb,var(--mut) 10%,transparent);color:var(--mut);--pill-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 1.8'/%3E%3C/svg%3E")}
.pill-err{background:color-mix(in srgb,var(--coral) 18%,transparent);color:#a2321f;--pill-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E")}

/* ---- Settings: profile / password / workspace cards ---- */
.set-card{background:var(--surf);border-radius:16px;box-shadow:var(--shadow);padding:20px 22px;margin-bottom:16px;max-width:560px}
.set-h{font-weight:800;font-size:15px;margin-bottom:12px}
.set-form{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.set-lbl{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--mut);width:100%}
.set-lbl input{font:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--bd2);border-radius:10px;background:var(--surf2);color:var(--tx);width:100%}
.set-lbl input:focus{outline:none;border-color:var(--amberT)}
.set-note{font-size:12px;color:var(--mut);margin:10px 0 0}
.set-foot{font-size:12px;color:var(--faint);margin-top:18px;font-family:var(--mono)}

/* ---- My decks: the workbench (dropzone + usage cards) ---- */
.mdk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:14px;margin-top:14px}
.mdk-drop{border:2px dashed var(--bd2);border-radius:14px;display:grid;place-items:center;text-align:center;padding:18px;color:var(--mut);text-decoration:none;font-size:12.5px;min-height:104px;transition:border-color .12s,background .12s}
.mdk-drop b{color:var(--tx);font-size:14px;font-weight:800}
.mdk-drop:hover,.mdk-drop.dragging{border-color:var(--amberT);background:color-mix(in srgb,var(--amberT) 6%,transparent)}
.mdk-drop.hero{min-height:180px;grid-column:1/-1;padding:28px}
.mdk-drop.hero b{font-size:17px}
.mdk-drop-sub{display:inline-block;margin-top:4px;max-width:52ch;line-height:1.6}
.mdk-cta{display:inline-block;background:var(--amberT);color:#fff;font-weight:700;font-size:13px;border-radius:10px;padding:9px 16px;margin-top:12px}
.mdk-drop-hint{display:block;font-family:var(--mono);font-size:11px;color:var(--amberT);margin-top:6px;min-height:1em}
.mdk-card{background:var(--surf);border-radius:14px;box-shadow:0 2px 12px rgba(120,74,26,.10);padding:14px 15px}
.mdk-card.failed{box-shadow:0 2px 12px rgba(120,74,26,.10),inset 3px 0 0 var(--coral)}
.mdk-top{display:flex;align-items:center;gap:12px}
.mdk-thumb{width:76px;height:48px;flex:none;border-radius:8px;background:radial-gradient(120% 120% at 20% 15%,#FDF9F0,#F3E4C8);box-shadow:inset 0 0 0 1px #E8DCC2;overflow:hidden;display:grid;place-items:center}
.mdk-thumb.dim{opacity:.45}
.mdk-thumb .deckstrip-fallback{width:100%;height:100%;display:grid;place-items:center;font-size:9px;font-weight:800;color:#B05E1E;padding:4px;text-align:center}
.mdk-shimmer{background:linear-gradient(90deg,#F3E9D5,#EBDCBD,#F3E9D5);background-size:200% 100%;animation:mdksh 1.4s linear infinite;box-shadow:none}
@keyframes mdksh{from{background-position:0 0}to{background-position:200% 0}}
.mdk-id{flex:1;min-width:0}
.mdk-title{display:block;font-weight:700;font-size:14px;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdk-prov{display:block;font-family:var(--mono);font-size:10px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdk-hair{border:0;border-top:1px solid var(--bd);margin:10px 0 8px}
.mdk-use{font-size:12.5px;color:var(--mut)}
.mdk-use b{color:var(--tx)}
.mdk-lib{text-align:center;color:var(--mut);font-size:12.5px;margin-top:14px}
.mdk-menu-link{display:flex;align-items:center;gap:10px;width:100%;font-size:13.5px;font-weight:600;color:var(--tx);padding:8px 10px;border-radius:8px}
.mdk-menu-link:hover{background:var(--surf2)}
@media (prefers-reduced-motion:reduce){.mdk-shimmer{animation:none}}

/* terminal-neutral states (Superseded): no clock, nothing is being waited for */
.pill-idle{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;border-radius:9px;padding:4px 11px;line-height:1.35;white-space:nowrap;background:color-mix(in srgb,var(--mut) 10%,transparent);color:var(--mut)}

/* ---- team/assignment ops additions ---- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll .wsp-table{min-width:560px}
.wsp-go-sm{padding:7px 14px;font-size:12.5px}
.wsp-err-action{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.asg-hint{color:var(--faint);font-size:12px;margin:5px 0 0;line-height:1.5}
.org-rename{margin-top:8px;font-size:12.5px;color:var(--mut)}
.org-rename summary{cursor:pointer;list-style:none}
.org-rename summary::-webkit-details-marker{display:none}
.org-rename-hint{color:var(--faint)}
.org-rename-edit{color:var(--amberT);font-weight:600;font-size:12px;white-space:nowrap}
.org-rename[open] .org-rename-edit{display:none}
.org-rename-form{display:flex;flex-direction:column;gap:10px;margin-top:10px;max-width:460px}
.org-rename-line{display:flex;gap:8px}
.org-rename-line input{flex:1;background:var(--surf2);border:1.5px solid var(--bd2);border-radius:9px;padding:8px 10px;font-size:13px;font-family:var(--font);color:var(--tx)}
.org-logo-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.org-logo-pick{display:inline-flex;align-items:center;background:var(--surf2);box-shadow:inset 0 0 0 1px var(--bd2);border-radius:9px;padding:7px 12px;font-size:12.5px;font-weight:700;color:var(--tx);cursor:pointer}
.org-logo-pick:hover{background:var(--bg2)}
.org-logo-name{font-size:12px;color:var(--mut);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}
.org-logo-remove{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--mut);cursor:pointer}
.org-logo-hint{flex-basis:100%;font-size:11.5px;color:var(--faint)}
/* Roster row: kebab menu (Edit email / Remove) + inline edit-state.
   Show/hide is driven by the `editing` class on the <tr> and the menu's [hidden]. */
.prow-edit{display:none;align-items:center;gap:9px}
.prow-input{border:1.5px solid var(--amberT);border-radius:8px;padding:6px 10px;font-size:13.5px;font-family:var(--mono);color:var(--tx);background:var(--surf);box-shadow:0 0 0 3px color-mix(in srgb,var(--amberT) 14%,transparent);min-width:220px;max-width:100%}
.prow-input:focus{outline:none}
.prow-menu-wrap{position:relative;display:inline-block}
.prow-save{display:none;gap:6px}
tr.editing .prow-display{display:none}
tr.editing .prow-edit{display:flex}
tr.editing .prow-menu-wrap{display:none}
tr.editing .prow-save{display:inline-flex}
tr.editing td{background:color-mix(in srgb,var(--amberT) 4%,transparent)}
.prow-kebab,.prow-ok,.prow-cancel-btn{width:30px;height:30px;flex:none;display:grid;place-items:center;border:1px solid var(--bd);background:var(--surf);color:var(--mut);border-radius:8px;cursor:pointer;font-family:var(--font);transition:.12s}
.prow-kebab:hover,.prow-cancel-btn:hover{color:var(--tx);border-color:var(--bd2)}
.prow-kebab svg{width:16px;height:16px}.prow-ok svg,.prow-cancel-btn svg{width:16px;height:16px}
.prow-ok{border-color:color-mix(in srgb,var(--teal) 55%,var(--bd));color:#177a4f}
.prow-ok:hover{background:color-mix(in srgb,var(--teal) 10%,transparent)}
.prow-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surf);border:1px solid var(--bd);border-radius:12px;box-shadow:var(--menu-sh,var(--shadow));padding:6px;min-width:172px;z-index:100;display:flex;flex-direction:column;gap:2px}
.prow-menu[hidden]{display:none}
.prow-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;font-size:13.5px;font-weight:600;color:var(--tx);padding:8px 10px;border-radius:8px;cursor:pointer;font-family:var(--font)}
.prow-menu button:hover{background:var(--surf2)}
.prow-menu .pm-ic{width:17px;height:17px;flex:none;color:var(--mut)}
.prow-menu-form{margin:0}
.prow-menu-danger{color:var(--coral)}
.prow-menu-danger .pm-ic{color:var(--coral)}
.prow-sep{height:1px;background:var(--bd);margin:5px 4px}
.covered{display:flex;align-items:center;gap:16px;background:var(--surf);border:1.5px solid color-mix(in srgb,var(--teal) 45%,transparent);border-radius:16px;padding:18px 20px;margin-bottom:22px;box-shadow:var(--shadow);flex-wrap:wrap}
.covered-check{width:44px;height:44px;flex:none;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:22px;font-weight:800}
.covered-body{flex:1;min-width:240px}
.covered-body strong{font-size:15.5px}
.covered-body p{margin:3px 0 0;color:var(--mut);font-size:13px;line-height:1.5}
.covgap{display:flex;align-items:center;gap:16px;background:var(--surf);border:1.5px solid color-mix(in srgb,var(--amber) 55%,transparent);border-radius:16px;padding:18px 20px;margin-bottom:22px;box-shadow:var(--shadow);flex-wrap:wrap}
.covgap[hidden]{display:none}
.covgap-body{flex:1;min-width:240px}
.covgap-body strong{font-size:15.5px}
.covgap-body p{margin:3px 0 0;color:var(--mut);font-size:13px;line-height:1.5}
.firstrun{background:var(--surf);border:1.5px solid var(--amberT);border-radius:16px;padding:20px 22px;margin-bottom:22px;box-shadow:var(--shadow)}
.firstrun-title{font-weight:800;font-size:16px;margin-bottom:10px}
.firstrun-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px;font-size:14px;color:var(--mut)}
.firstrun-steps strong{color:var(--tx)}
@media (max-width:640px){
  .rep-actions{flex-wrap:wrap}
}
/* the campaign roster: columns sized to their content, terminal action on the right rail */
.asg-table th:nth-child(1){width:34%}
.asg-table th:nth-child(2){width:15%}
.asg-table th:nth-child(3){width:15%}
.asg-table th:nth-child(4){width:22%}
.asg-table th:nth-child(5){width:14%;text-align:right}
.asg-table td:last-child{text-align:right}
.asg-table td:last-child>div{display:inline-block}
.asg-resend-form{display:inline}
.asg-resend-form[hidden]{display:none}
/* quiet by design: copying a link is the fallback channel, so the button must not
   outshout the state pills, which are this page's actual content */
.linkbtn{border:0;box-shadow:inset 0 0 0 1px var(--bd2);border-radius:10px;background:var(--surf2);color:var(--tx);font-weight:700;font-size:13.5px;padding:9px 16px;cursor:pointer;font-family:var(--font);white-space:nowrap;transition:.12s}
.linkbtn:hover{background:var(--bg2)}
/* Enrollment table: center every cell so pills/chips/buttons line up with the
   avatar+name block, and keep the person cell as a clean avatar + stacked name/email. */
.asg-table td{vertical-align:middle}
.asg-who{display:flex;align-items:center;gap:9px}
.asg-who .avi{flex:none}
.asg-who-meta{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.asg-who-meta .dim{font-size:12px}
.linkbtn.copied{background:var(--teal);border-color:var(--teal);color:#fff}
.asg-mail-ok{color:var(--mut);font-size:12.5px;font-weight:600;white-space:nowrap}

/* ---- content-color layer: warmth lives in content, not state. Illustration blobs,
   deck-thumb strips, and people avatars carry the workspace's color; the pill system
   stays strictly semantic. ---- */
.wsp-blob{border-radius:22px;background:radial-gradient(120% 120% at 40% 25%,#FCEFD6,#F1E4C6);display:grid;place-items:center;padding:10px}
.wsp-illus{width:100%;height:100%;display:block}
.wsp-split{display:grid;grid-template-columns:1fr 180px;gap:26px;align-items:center}
.wsp-split-art{width:180px;aspect-ratio:1/1}
@media (max-width:700px){.wsp-split{grid-template-columns:1fr}.wsp-split-art{display:none}}
.deckstrip{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.deckstrip-item{flex:none;width:96px;border-radius:9px;overflow:hidden;border:1px solid var(--bd);background:linear-gradient(160deg,#FBF6EC,#F4EDDF);display:block;text-decoration:none;transition:transform .13s,box-shadow .13s}
.deckstrip-item img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.deckstrip-fallback{display:grid;place-items:center;aspect-ratio:16/9;font-size:9.5px;font-weight:700;color:var(--mut);padding:4px 6px;text-align:center;line-height:1.3}
a.deckstrip-item:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(120,74,26,.28)}
.deckstrip.sm{gap:8px;margin-top:10px}
.deckstrip.sm .deckstrip-item{width:64px;border-radius:7px}
.deckstrip-item.xs{width:56px;border-radius:6px}
.tr-camp{display:flex;align-items:center;gap:10px}
.fact-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fact{display:inline-block;font-size:10.5px;font-weight:700;color:var(--mut);background:var(--surf2);box-shadow:inset 0 0 0 1px var(--bd);border-radius:6px;padding:3px 8px;font-family:var(--mono);text-decoration:none;white-space:nowrap}
a.fact:hover{color:var(--tx)}
.avi{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-weight:700;font-size:12.5px;color:var(--tx);flex:none;vertical-align:middle;margin-right:9px}
.avi-0{background:#F9E3CC}.avi-1{background:#F6ECC0}.avi-2{background:#DCE9D5}.avi-3{background:#D9E4F4}.avi-4{background:#E6DFF2}.avi-5{background:#F6DCD8}
.covered-art{width:104px;flex:none;aspect-ratio:1/1;padding:6px}

/* run-plan banner: the assign page's timeline language, continued on the running page */
.runplan{background:var(--surf);border:1px solid var(--bd);border-radius:16px;padding:24px 28px;margin-bottom:32px;box-shadow:var(--shadow)}
.runplan-title{font-weight:800;font-size:20px;letter-spacing:-.015em;margin-bottom:14px}
.runplan-rows{display:flex;flex-direction:column;gap:9px}
.runplan-row{display:grid;grid-template-columns:120px 1fr;gap:16px;font-size:14px;color:var(--mut);line-height:1.6}
.runplan-row>span:last-child{max-width:64ch}
.runplan-when{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tx);padding-top:2.5px;white-space:nowrap}
@media (max-width:560px){.runplan-row{grid-template-columns:1fr;gap:2px}}
.asg-toolbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;padding:10px 4px;margin:0 -4px 14px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid transparent;transition:border-color .15s}
.asg-toolbar.scrolled{border-bottom-color:color-mix(in srgb,#784A1A 14%,transparent)}
.asg-tb-back{color:var(--mut);font-size:12.5px;font-weight:600;white-space:nowrap}
.asg-tb-title{font-weight:800;font-size:14.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.asg-tb-spacer{flex:1}
.asg-toolbar .asg-tb-report{display:none}
.asg-toolbar.scrolled .asg-tb-report{display:inline-block}
.asg-receipt{display:flex;align-items:center;gap:14px;background:var(--surf);border:1.5px solid color-mix(in srgb,var(--teal) 45%,transparent);border-radius:16px;padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow);flex-wrap:wrap}
.asg-receipt[hidden]{display:none}
.asg-receipt-seal{width:34px;height:34px;flex:none;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:800}
.asg-receipt-body{flex:1;min-width:240px}
.asg-receipt-body strong{font-size:14.5px}
.asg-receipt-body p{margin:3px 0 0;color:var(--mut);font-size:12.5px;line-height:1.6}
.asg-receipt-body b{color:var(--tx)}
.asg-plan{margin:2px 0 12px;max-width:70ch;color:var(--mut);font-size:13.5px;line-height:1.7}
.asg-plan b{color:var(--tx)}
.asg-eyebrow{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:0 0 6px}
.asg-course{position:relative;background:var(--surf);border-radius:16px;box-shadow:0 1px 2px rgba(120,74,26,.06),0 8px 24px rgba(120,74,26,.10);padding:8px 18px;margin:0 0 16px}
.crs-rail{position:absolute;left:30px;top:26px;bottom:26px;border-left:2px dashed var(--bd2)}
.crs-lesson{display:flex;align-items:center;gap:14px;padding:10px 0;position:relative}
.crs-num{width:26px;height:26px;flex:none;border-radius:7px;background:var(--tx);color:var(--bg);display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:700;position:relative;z-index:1}
.crs-num.done{background:var(--teal);color:#fff}
.crs-num.seal{border-radius:50%;background:var(--surf2);color:var(--mut);box-shadow:inset 0 0 0 1.5px var(--bd2)}
.crs-num.seal.done{background:var(--teal);color:#fff;box-shadow:none}
.crs-thumb{width:88px;height:55px;flex:none;border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--bd);background:radial-gradient(120% 120% at 20% 15%,#FDF9F0,#F3E4C8)}
.crs-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.crs-thumb .deckstrip-fallback{width:100%;height:100%;display:grid;place-items:center;font-size:9px;font-weight:800;color:#B05E1E;padding:4px;text-align:center}
.crs-title{flex:1;min-width:0}
.crs-title b{display:block;font-size:13.5px;letter-spacing:-.005em}
.crs-title>span{font-size:11.5px;color:var(--mut)}
.crs-watch{color:var(--amberT);font-weight:700;font-size:12px;white-space:nowrap}
.asg-class-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 6px;flex-wrap:wrap}
.asg-class-head .asg-eyebrow{margin:0}
.asg-class-head .asg-meter{margin:0;flex:1;max-width:340px;justify-content:flex-end}
.asg-list{background:var(--surf);border-radius:16px;box-shadow:0 1px 2px rgba(120,74,26,.06),0 8px 24px rgba(120,74,26,.10);overflow:visible}
.asg-lrow{display:flex;align-items:center;gap:12px;padding:12px 18px;min-height:52px;border-top:1px solid var(--bd)}
.asg-lrow:first-child{border-top:0}
.asg-lrow[hidden]{display:none}
.asg-lrow.late{box-shadow:inset 3px 0 0 var(--coral)}
.asg-lrow.gone{opacity:.55}
.asg-lrow .asg-who{flex:1;min-width:0}
.asg-lrow-trail{display:flex;align-items:center;gap:10px;flex:none}
.asg-filter{margin:0 0 10px}
.asg-filter input{width:100%;max-width:340px;font:inherit;font-size:13px;padding:8px 12px;border:1px solid var(--bd2);border-radius:10px;background:var(--surf);color:var(--tx)}
.asg-nudge{background:none;border:none;color:var(--mut);font-size:12px;font-weight:600;text-decoration:underline;cursor:pointer;padding:0;font-family:var(--font)}
.asg-nudge:hover{color:var(--tx)}
.asg-nudge-form{display:inline}
.asg-empty{background:var(--surf);border-radius:16px;box-shadow:var(--shadow);padding:26px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--mut)}
.asg-empty p{margin:0}
.asg-foot{display:flex;align-items:center;gap:14px;color:var(--mut);font-size:12px;margin:12px 2px 0}
.add-dialog-warn{margin:0 0 14px;padding:9px 12px;border-radius:10px;font-size:12.5px;background:color-mix(in srgb,var(--coral) 10%,transparent);color:#b23b3b;border:1px solid color-mix(in srgb,var(--coral) 28%,transparent)}
.pill{transition:background-color .2s,color .2s}
.asg-meter .asg-bar span{animation:asgfill .5s ease-out}
@keyframes asgfill{from{width:0}}
@media (prefers-reduced-motion:reduce){
  .asg-meter .asg-bar span{animation:none}
  .pill,.asg-toolbar{transition:none}
}
.asg-watch{color:var(--amberT);font-weight:600}
.asg-meter{display:flex;align-items:center;gap:12px;margin:14px 0 4px}
.asg-meter .asg-bar{flex:1;max-width:420px}
.asg-meter-label{font-family:var(--mono);font-size:11px;color:var(--mut);white-space:nowrap}
.asg-substat{font-family:var(--mono);font-size:10.5px;color:var(--mut);margin-top:4px}
.due-edit{display:inline-block;position:relative}
.due-edit summary{list-style:none;cursor:pointer}
.due-edit summary::-webkit-details-marker{display:none}
.due-token{color:var(--tx);font-weight:700;border-bottom:1.5px dashed var(--amberT);white-space:nowrap}
.due-pen{color:var(--amberT);font-size:11px;font-weight:600}
.due-edit-form{position:absolute;top:calc(100% + 6px);left:0;z-index:30;display:flex;gap:8px;align-items:center;background:var(--surf);border:1px solid var(--bd2);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow);white-space:nowrap}
.due-edit-form input[type=date]{font:inherit;font-size:13px;padding:6px 9px;border:1px solid var(--bd2);border-radius:8px;background:var(--surf2);color:var(--tx)}
.due-edit-remove{border:0;background:none;color:var(--mut);font-size:12.5px;font-weight:600;text-decoration:underline;cursor:pointer;font-family:var(--font)}
.due-edit-remove:hover{color:#b23b3b}
.asg-menu{position:relative;display:inline-block}
.asg-menu summary{list-style:none}
.asg-menu summary::-webkit-details-marker{display:none}
.asg-menu .prow-menu{min-width:212px}
.prow-menu form{display:block}
.enroll-label{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:14px 0 6px}
.enroll-list{max-height:240px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.enroll-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;cursor:pointer;font-size:13.5px}
.enroll-row:hover{background:var(--surf2)}
.enroll-row input{accent-color:var(--amberT);width:16px;height:16px;flex:none}

/* assignment cards + progress */
.asg-list{display:flex;flex-direction:column;gap:10px}
.asg-card{display:flex;align-items:center;justify-content:space-between;gap:20px;text-decoration:none;color:inherit;background:var(--surf);border:1px solid var(--bd);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow);transition:.12s}
.asg-card:hover{border-color:var(--amberT);transform:translateY(-1px)}
.asg-title{font-weight:700;font-size:15.5px;letter-spacing:-.01em}
.asg-meta{color:var(--mut);font-size:13px;margin-top:3px}
.asg-over{color:var(--coral);font-weight:700}
.asg-prog{min-width:150px;flex:none}
.asg-prog.wide{min-width:220px}
.asg-bar{height:8px;border-radius:999px;background:var(--surf2);box-shadow:inset 0 0 0 1px var(--bd2);overflow:hidden}
.asg-bar span{display:block;height:100%;background:var(--teal);border-radius:999px;transition:width .3s}
.asg-bar.over span{background:var(--coral)}
/* Training "rich rows": stacked title + due chip, and a bar with an inline % label */
.tr-camp .deckstrip-item.xs{width:108px;border-radius:9px}
.trn-table td{vertical-align:middle}
.tr-camp .trn-meta{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.trn-due{display:inline-block;font-size:10.5px;font-weight:700;font-family:var(--mono);color:var(--mut);background:var(--surf2);box-shadow:inset 0 0 0 1px var(--bd);border-radius:6px;padding:2px 8px;white-space:nowrap}
.trn-due.over{color:#a2321f;background:color-mix(in srgb,var(--coral) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--coral) 30%,transparent)}
.trn-completion{display:flex;align-items:center;gap:10px}
.trn-completion .asg-bar{flex:1;min-width:96px}
.trn-pct{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--mut);min-width:34px;font-variant-numeric:tabular-nums}
.trn-actions{display:inline-flex;align-items:center;gap:12px;justify-content:flex-end}
.trn-del-form{display:inline;margin:0}
.trn-del{display:inline-flex;align-items:center;padding:5px;border:0;background:none;color:var(--faint);cursor:pointer;border-radius:6px}
.trn-del:hover{color:var(--coral);background:color-mix(in srgb,var(--coral) 10%,transparent)}
.trn-del svg{width:17px;height:17px}
.asg-pct{font-size:12px;color:var(--mut);font-weight:600;margin-top:5px;text-align:right}
.asg-prog.wide .asg-pct{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}

/* new assignment form */
.asg-lbl{font-weight:700;font-size:13px;margin:0 0 8px}
.asg-lbl+.asg-lbl{margin-top:18px}
.asg-select,.asg-input{width:100%;border:1.5px solid var(--bd2);border-radius:10px;padding:10px 12px;font-family:var(--font);font-size:14px;color:var(--tx);background:var(--surf2)}
.asg-select:focus,.asg-input:focus{outline:none;border-color:var(--amberT);background:var(--surf)}
.asg-people{margin-top:8px;border:1.5px solid var(--bd2);border-radius:10px;max-height:260px;overflow:auto}
.asg-people-head{padding:10px 12px;border-bottom:1px solid var(--bd);background:var(--surf2);font-weight:700;font-size:13px}
.asg-person{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:14px;border-bottom:1px solid var(--bd);cursor:pointer}
.asg-person:last-child{border-bottom:0}
.asg-person:hover{background:var(--surf2)}
.asg-person .mono{font-family:var(--mono);font-size:12px}

/* ---- assign training: the plan told as a timeline (seq-). Restraint on purpose:
   ink and gray carry the story, blue stays on controls, teal marks the payoff. ---- */
.seq{max-width:680px}
.seq-tl{position:relative;padding-left:56px}
.seq-tl::before{content:"";position:absolute;left:19px;top:12px;bottom:12px;width:2px;background:var(--bd2)}
.seq-ev{position:relative;margin-bottom:30px}
.seq-mark{position:absolute;left:-56px;top:0;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;background:var(--surf);border:2px solid var(--bd2);color:var(--mut);box-shadow:var(--shadow)}
.seq-ev.now .seq-mark{background:var(--tx);border-color:var(--tx);color:var(--surf)}
.seq-ev.pay .seq-mark{background:var(--teal);border-color:var(--teal);color:#fff}
.seq-when{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:5px;padding-top:3px}
.seq-h{font-size:16.5px;font-weight:800;margin:0 0 3px}
.seq-say{color:var(--mut);font-size:13.5px;line-height:1.55;margin:0 0 12px;max-width:58ch}
.seq-card{background:var(--surf);border:1px solid var(--bd);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.seq-due{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13.5px;font-weight:700}
.seq-date{width:auto;max-width:190px}
.chip-input-err{border-color:var(--coral) !important;animation:seq-shake .18s 2}
@keyframes seq-shake{50%{transform:translateX(4px)}}
.seq-remind{margin-top:14px;font-size:12.5px}
.seq-remind summary{cursor:pointer;color:var(--mut);font-weight:700;width:fit-content}
.seq-remind summary:hover{color:var(--tx)}
.seq-remind[open] summary{margin-bottom:8px}
.seq-remind[hidden]{display:none}
.seq-mail-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;font-weight:700;color:var(--mut);margin:16px 0 8px}
.seq-title{font-size:12.5px;color:var(--faint);margin:14px 0 0}
.seq-title input{font-family:var(--font);font-size:12.5px;color:var(--mut);border:0;border-bottom:1px dashed var(--bd2);background:none;padding:1px 2px;width:36ch;max-width:100%}
.seq-title input:focus{outline:none;border-bottom-color:var(--amberT);color:var(--tx)}
.seq-flip{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.seq-ev .seq-off{display:none}
.seq-ev.off .seq-h,.seq-ev.off .seq-say{color:var(--faint)}
.seq-ev.off .seq-when{color:var(--faint);text-decoration:line-through}
.seq-ev.off .seq-mark{opacity:.45}
.seq-ev.off .seq-on{display:none}
.seq-ev.off .seq-off{display:block}
.tsw{position:relative;flex:none;margin-top:2px;cursor:pointer;display:inline-block}
.tsw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.tsw span[aria-hidden]{display:block;width:42px;height:23px;border-radius:999px;background:var(--bd2);transition:background .18s;position:relative}
.tsw span[aria-hidden]::after{content:"";position:absolute;top:2.5px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .18s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.tsw input:checked+span[aria-hidden]{background:var(--amberT)}
.tsw input:checked+span[aria-hidden]::after{left:21px}
.tsw input:focus-visible+span[aria-hidden]{box-shadow:0 0 0 3px color-mix(in srgb,var(--amberT) 30%,transparent)}
.seq-end{padding-left:56px;margin-top:4px}
.seq-go{font-size:15px;padding:12px 26px}
.seq-note{font-size:12.5px;color:var(--mut);margin-top:10px;max-width:52ch}
@media (max-width:560px){
  .seq-tl,.seq-end{padding-left:44px}
  .seq-tl::before{left:15px}
  .seq-mark{left:-44px;width:32px;height:32px;font-size:13px}
}

/* copy-link widget */

/* learner watch page extras */
.watch-for{margin-left:auto;color:var(--mut);font-size:13px}
.watch-for strong{color:var(--tx)}
/* the state cards are display:flex, which would beat the UA's [hidden] rule — never show a hidden state */
.watch-done[hidden],.watch-fail[hidden],.watch-err[hidden]{display:none}
.watch-done{display:flex;align-items:center;gap:16px;max-width:560px;margin:22px auto 0;background:var(--surf);border:1px solid color-mix(in srgb,var(--teal) 40%,transparent);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow)}
.watch-done-check{width:44px;height:44px;flex:none;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:22px;font-weight:800}
.watch-done strong{font-size:16px}
.watch-done p{margin:2px 0 0;color:var(--mut);font-size:13.5px}
.watch-done .ask-go{margin-left:auto;white-space:nowrap}

/* ============ Certificate ============ */
.cert-page{min-height:100vh;background:var(--bg2);display:flex;flex-direction:column;align-items:center;gap:20px;padding:34px 18px}
.cert{width:100%;max-width:760px;aspect-ratio:1.414/1;background:#fff;border-radius:8px;box-shadow:0 20px 60px -20px rgba(25,35,80,.3);padding:20px}
.cert-frame{height:100%;border:2px solid var(--amberT);border-radius:4px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6% 9%}
.cert-frame::before{content:"";position:absolute;inset:8px;border:1px solid color-mix(in srgb,var(--amberT) 40%,transparent);border-radius:3px;pointer-events:none}
.cert-mark{width:56px;height:56px;margin-bottom:18px}
.cert-eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:.28em;color:var(--amber);font-weight:700}
.cert-name{font-size:clamp(22px,4.5vw,44px);font-weight:800;letter-spacing:-.02em;margin:14px 0 6px;color:var(--tx);max-width:100%;overflow-wrap:break-word;word-break:break-word}
.cert-body{color:var(--mut);font-size:15px}
.cert-course{font-size:clamp(18px,3vw,24px);font-weight:700;color:var(--tx);margin-top:8px;max-width:24ch}
.cert-meta{display:flex;gap:clamp(18px,5vw,54px);margin-top:26px}
.cert-meta>div{display:flex;flex-direction:column;gap:3px}
.cert-k{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:700}
.cert-v{font-size:14px;font-weight:600;color:var(--tx)}
.cert-v.mono{font-family:var(--mono);font-size:13px}
.cert-foot{position:absolute;bottom:6%;font-size:11px;color:var(--faint);letter-spacing:.02em}
.cert-decks{font-size:11.5px;color:var(--mut);margin-top:10px;letter-spacing:.01em}

/* ---- learner curriculum hub ---- */
.watch-hub-back{display:inline-block;color:var(--mut);font-size:13px;font-weight:600;text-decoration:none;margin-bottom:6px}
.watch-hub-back:hover{color:var(--tx)}
.hub-progress{max-width:560px;margin:12px auto 8px;display:flex;align-items:center;justify-content:center;gap:12px}
.hub-progress.hub-progress-inline{margin:12px 0 10px;justify-content:flex-start}
.hub-progress .asg-bar{flex:1}
.hub-progress-n{font-size:13px;font-weight:700;color:var(--mut);white-space:nowrap}
/* per-deck segmented progress (one segment per deck; filled = done, amber = current) */
.watch-steps{display:flex;gap:6px;margin:4px 0 10px;max-width:420px}
.watch-step{flex:1;height:6px;border-radius:999px;background:var(--surf2);box-shadow:inset 0 0 0 1px var(--bd2)}
.watch-step.done{background:var(--teal);box-shadow:none}
.watch-step.current{background:var(--amber);box-shadow:none}
/* "Rewatch the deck" escape hatch under the quiz card */
.watch-rewatch{display:block;text-align:center;margin:16px auto 0;color:var(--mut);font-size:13px;font-weight:600;text-decoration:none}
.watch-rewatch[hidden]{display:none} /* class display must not beat the [hidden] attribute */
.watch-rewatch:hover{color:var(--tx)}
/* Course-card layout: a cover + details hero, then the lesson syllabus.
   Employer name sits in the header (trust); the cover is a warm illustration blob. */
.course{max-width:600px;margin:22px auto 0;text-align:left}
/* stretch so the cover matches the info column's height (better aligned) */
.course-hero{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:stretch;background:var(--surf);border:1px solid var(--bd);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
.course-cover{min-height:214px;border-radius:13px;overflow:hidden;background:radial-gradient(120% 120% at 40% 25%,#FCEFD6,#F1E4C6);display:grid;place-items:center;padding:14px}
.course-cover .course-illus{width:100%;height:100%;display:block}
.course-cover img{width:100%;height:100%;object-fit:cover}
.course-info{min-width:0;display:flex;flex-direction:column;justify-content:center}
.course-title{font-size:22px;font-weight:800;letter-spacing:-.015em;line-height:1.12;margin:0 0 8px}
.course-desc{margin:0 0 14px;color:var(--mut);font-size:14px}
.course-info .fact-row{margin:0 0 16px}
.fact-cert{letter-spacing:0}
.course-status{font-size:13px;font-weight:700;color:var(--mut);margin:0 0 14px}
.course-status.done{color:#177a4f}
/* a bigger, more confident Start button */
.course-info .ask-go{align-self:flex-start;font-size:16px;padding:14px 30px;border-radius:999px}
.course-sub{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);margin:24px 4px 10px}
.course .hub-list{max-width:none;margin:0}
@media (max-width:600px){.course-hero{grid-template-columns:1fr;text-align:center;justify-items:center}.course-cover{width:240px;min-height:0;aspect-ratio:16/10}.course-info{align-items:center;text-align:center}.course-info .fact-row{justify-content:center}.course-info .ask-go{align-self:center}}
.hub-continue{display:inline-block;margin-bottom:22px;font-size:15px;padding:13px 26px}
.hub-list{list-style:none;max-width:560px;margin:10px auto 0;padding:0;display:flex;flex-direction:column;gap:10px;text-align:left}
.hub-item{display:flex;align-items:center;gap:14px;background:var(--surf);border:1.5px solid var(--bd);border-radius:14px;padding:13px 16px;box-shadow:var(--shadow);transition:border-color .12s,transform .12s}
.hub-item:hover{border-color:var(--amberT)}
.hub-item:hover .hub-item-go{color:var(--amberT)}
.hub-item.current{border-color:var(--amberT)}
.hub-item.done{opacity:.72}
.hub-item-go{margin-left:auto;flex:none;color:var(--faint);font-size:22px;line-height:1;padding-left:8px;transition:color .12s}
.hub-item-n{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;background:var(--surf2);color:var(--mut);box-shadow:inset 0 0 0 1.5px var(--bd2)}
.hub-item.done .hub-item-n{background:var(--teal);color:#fff;box-shadow:none}
.hub-item.current .hub-item-n{background:var(--amber);color:#3a2a08;box-shadow:none}
.hub-item-body{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit;min-width:0}
.hub-item-title{font-weight:700;font-size:14.5px}
.hub-item-meta{font-size:12px;color:var(--mut)}

/* ---- assign training: option cards + invite preview (wiz- prefix is historical;
   these were born in the old setup wizard) ---- */
.wiz-opt{display:flex;gap:12px;align-items:flex-start;background:var(--surf);border:1.5px solid var(--bd);border-radius:14px;padding:14px 16px;cursor:pointer;box-shadow:var(--shadow)}
.wiz-opt:has(input:checked){border-color:var(--amberT);box-shadow:0 0 0 3px color-mix(in srgb,var(--amberT) 14%,transparent),var(--shadow)}
.wiz-opt input{margin-top:3px;accent-color:var(--amber)}
.wiz-opt>span{display:flex;flex-direction:column;gap:2px}
.wiz-opt strong{font-size:14.5px}
.wiz-opt em{font-style:normal;color:var(--mut);font-size:12.5px;line-height:1.5}
.wiz-preview{margin:18px 0 6px}
.wiz-preview-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;font-weight:700;color:var(--mut);margin-bottom:8px;flex-wrap:wrap}
.wiz-preview-send{background:none;border:0;color:var(--amber);font-weight:700;font-size:13px;cursor:pointer;font-family:var(--font);text-decoration:underline;text-underline-offset:2px}
.wiz-preview-send[disabled]{color:var(--teal);text-decoration:none;cursor:default}
.wiz-preview-card{background:#FBF7EE;border:1.5px solid #E7DFC9;border-radius:14px;padding:18px 20px;color:#3C3C46}
.wiz-preview-subject{font-size:12px;font-weight:700;color:#8A8A93;border-bottom:1px solid #E7DFC9;padding-bottom:8px;margin-bottom:10px}
.wiz-preview-card p{margin:0 0 8px;font-size:13.5px;line-height:1.55}
.wiz-preview-btn{display:inline-block;background:#E8894A;color:#fff;font-weight:600;font-size:13.5px;border-radius:9px;padding:9px 18px;margin-top:4px}
.wiz-preview-meta{background:#F4EEDF;border-radius:10px;padding:12px 14px;margin-top:12px !important;font-size:12.5px !important;color:#3C3C46}
.wiz-preview-meta strong{color:#2A2A33}
/* library: the recommended bundle card */
.lib-bundle{background:var(--surf);border:1.5px solid var(--amberT);border-radius:16px;padding:22px 22px 20px;margin-bottom:14px;box-shadow:var(--shadow)}
.lib-bundle h3{margin:6px 0 6px;font-size:20px;font-weight:800}
.lib-bundle .lib-sum{margin:0;max-width:64ch}
.lib-bundle-decks{display:flex;gap:12px;margin:16px 0 2px;overflow-x:auto;padding-bottom:6px}
.lib-bundle-deck{flex:none;width:132px;text-decoration:none;border-radius:10px;overflow:hidden;border:1px solid #EADFC7;background:var(--surf);transition:transform .13s,box-shadow .13s}
.lib-bundle-deck:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(120,74,26,.05),0 14px 30px -18px rgba(120,74,26,.28)}
.lib-bundle-thumb{display:block;aspect-ratio:16/9;background:#F4E6CD}
.lib-bundle-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lib-bundle-cat{display:block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);padding:6px 8px 7px}
.lib-bundle-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid #E3D4B4}
.lib-bundle-meta{font-size:13px;color:var(--mut)}
.lib-bundle-meta strong{color:var(--tx);font-weight:800}
.lib-bundle-foot .lib-btn.solid{flex:none;padding:11px 22px}
.lib-single-head{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);margin:26px 0 14px}
/* phones: let the certificate grow to its content — the fixed A4 ratio clips and overlaps text */
@media (max-width:640px){
  .cert{aspect-ratio:auto}
  .cert-frame{height:auto;padding:34px 18px 58px}
  .cert-meta{flex-direction:column;gap:14px;margin-top:20px}
  .cert-foot{bottom:14px;left:0;right:0}
}
.cert-actions .ask-go{cursor:pointer;border:0;font-family:var(--font)}
@media print{
  .no-print{display:none !important}
  .cert-page{background:#fff;padding:0}
  .cert{box-shadow:none;max-width:100%}
}
@media (max-width:640px){
  .asg-card{flex-direction:column;align-items:stretch;gap:12px}
  .asg-prog,.asg-prog.wide{min-width:0}
  .wsnav{width:100%;order:3;margin:8px 0 0;justify-content:center}
  .watch-done{flex-direction:column;text-align:center}
  .watch-done .ask-go{margin:0}
}

/* ============ Billing (PR4) ============ */
.acct-plan{flex:none;display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:800;letter-spacing:.03em;color:#6b41c6;background:color-mix(in srgb,var(--lav) 36%,transparent);border-radius:6px;padding:3px 8px}
.acct-plan::before{content:"";width:9px;height:9px;background:currentColor;-webkit-mask:center/contain no-repeat var(--bolt);mask:center/contain no-repeat var(--bolt);--bolt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2L4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E")}
/* auto-fit rather than a fixed column count: it was still repeat(3,1fr) after the third
   tier was dropped, which parked two cards in a three-column grid and left the block
   visibly off-centre under its own switch. */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
/* The plan block: switch and cards share one column, so the switch is centered over the
   cards on any page, whatever that page's own alignment is. The generous space above and
   the tight space below are the point: the switch belongs to the cards, not to the header,
   and grouping should be said with distance before it is said with anything else. */
.plan-block{max-width:720px;margin-top:26px}

/* Billing interval switch. A warm ink track: dark enough to read as a control against the
   cream, warm enough to belong to this page rather than arrive from another product. The
   first version of this was near-black with a deep drop shadow and became the loudest
   object on the page, louder than the price it modifies. Contrast here comes from the
   white selected segment and a hairline, not from volume. Deliberately NOT orange: it is
   a view switch, and the accent belongs to the button it modifies. */
.plan-switch{display:flex;justify-content:center;margin:0 0 14px}
.plan-switch-track{display:inline-flex;gap:2px;background:#2B2620;border-radius:11px;padding:3px;box-shadow:0 2px 6px -2px rgba(120,74,26,.3)}
.plan-switch button{display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:rgba(255,255,255,.62);font-family:var(--font);font-size:13px;font-weight:600;padding:7px 15px;border-radius:9px;cursor:pointer;transition:background-color .14s,color .14s}
.plan-switch button:hover{color:rgba(255,255,255,.9)}
.plan-switch button.on{background:var(--surf);color:var(--tx);font-weight:700}
.plan-switch .fact{font-size:10px;background:rgba(255,255,255,.13);color:rgba(255,255,255,.8);box-shadow:none;pointer-events:none}
.plan-switch button.on .fact{background:color-mix(in srgb,var(--amberT) 14%,transparent);color:var(--amber)}

.plan-card{background:var(--surf);border:1.5px solid var(--bd);border-radius:16px;padding:24px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
/* The current plan is state, so the pill system carries it (see .plan-cur). The card only
   firms its border: the accent ring used to make the FREE card the loudest thing on a page
   whose whole job is the upgrade sitting next to it. */
.plan-card.on{border-color:var(--bd2)}
.plan-name{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.plan-price{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:6px 0 2px}
/* The unit suffix only. Class-scoped, not `.plan-price span`, because the price is now
   wrapped in a per-interval span and a bare descendant selector shrank the whole amount.
   The hair of space stops "/yr" from colliding with the numeral's last stroke. */
.plan-price .per{font-size:14px;font-weight:600;color:var(--mut);margin-left:2px}
.plan-blurb{color:var(--mut);font-size:13px;margin:2px 0 14px;min-height:34px}
.plan-feats{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:7px;font-size:13.5px}
.plan-feats li{padding-left:22px;position:relative}
.plan-feats li::before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:800}
.plan-feats li.off{color:var(--faint)}
.plan-feats li.off::before{content:"–";color:var(--faint)}
.plan-go{width:100%;margin-top:auto}
.plan-go[disabled]{opacity:.5;cursor:not-allowed}
/* Both cards' feet resolve on the same line: this matches the primary button's height so a
   card that ends in a state and a card that ends in an action still terminate together. */
.plan-cur{margin-top:auto;display:flex;align-items:center;justify-content:center;min-height:38px;text-align:center;font-size:13px;font-weight:600;color:var(--mut);line-height:1.5}
.plan-cur.dim{color:var(--faint)}
.plan-cur a{color:var(--amberT);font-weight:700}
/* Still worn by the assign page ("Recommended") and the library ("Start here"). It left the
   plan cards because "Most popular" across one paid plan and zero customers was a claim we
   could not back; it stays here because on those pages it is an honest editorial nudge. */
.plan-pop{font-size:9px;font-weight:800;letter-spacing:.05em;color:var(--amber);background:color-mix(in srgb,var(--amberT) 16%,transparent);border-radius:4px;padding:2px 6px;margin-left:6px;vertical-align:middle}
/* "Beta" label: neutral mono chip so it flags work-in-progress without competing with the accent */
.beta-badge{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);background:var(--surf2);box-shadow:inset 0 0 0 1px var(--bd2);border-radius:5px;padding:2px 6px;margin-left:8px;vertical-align:middle}

/* ---- App-wide branded confirm dialog (replaces native confirm) ---- */
.cfm{border:0;padding:0;border-radius:16px;background:var(--surf);color:var(--tx);box-shadow:0 24px 60px -20px rgba(120,74,26,.55);max-width:430px;width:calc(100vw - 32px)}
.cfm::backdrop{background:rgba(60,40,15,.4);backdrop-filter:blur(2px)}
.cfm[open]{animation:cfm-in .14s ease}
@keyframes cfm-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.cfm-panel{padding:24px}
.cfm-msg{margin:0;font-size:15.5px;line-height:1.5;color:var(--tx);font-weight:500}
.cfm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.cfm-btn{font-family:var(--font);font-weight:700;font-size:14px;border-radius:10px;padding:10px 18px;cursor:pointer;border:0}
.cfm-cancel{background:var(--surf2);color:var(--tx);box-shadow:inset 0 0 0 1px var(--bd)}
.cfm-cancel:hover{background:var(--bd2)}
.cfm-ok{background:var(--tx);color:var(--surf)}
.cfm-ok:hover{filter:brightness(1.12)}
.cfm-danger .cfm-ok{background:var(--coral);color:#fff}
.cfm-danger .cfm-ok:hover{filter:brightness(.94)}

/* ---- Feedback widget (floating button + dialog) and admin inbox ---- */
.fb-fab{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 10px;border:0;border-radius:999px;background:var(--surf);color:var(--tx);box-shadow:0 2px 6px rgba(120,74,26,.12),0 12px 28px -12px rgba(120,74,26,.35);cursor:pointer;font-family:var(--font);font-weight:700;font-size:13.5px;transition:transform .12s,box-shadow .12s}
.fb-fab:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(120,74,26,.14),0 18px 36px -14px rgba(120,74,26,.42)}
.fb-fab-mark,.fb-fab-mark svg{width:22px;height:22px;display:inline-flex}
.fb-dialog{border:0;border-radius:16px;padding:0;max-width:420px;width:calc(100vw - 32px);background:var(--surf);color:var(--tx);box-shadow:var(--shadow)}
.fb-dialog::backdrop{background:rgba(23,24,28,.38)}
.fb-dialog>div{padding:20px;position:relative}
.fb-x{position:absolute;top:12px;right:14px;border:0;background:none;font-size:15px;color:var(--mut);cursor:pointer;line-height:1}
.fb-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.fb-head-mark,.fb-head-mark svg{width:34px;height:34px;flex:none}
.fb-title{font-size:16px;font-weight:800;letter-spacing:-.01em}
.fb-sub{font-size:13px;color:var(--mut);margin-top:2px;line-height:1.45}
.fb-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--bd2);border-radius:10px;padding:10px 12px;font-family:var(--font);font-size:14px;resize:vertical;background:var(--bg)}
.fb-cats{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0 10px;font-size:13px;color:var(--tx)}
.fb-cats label,.fb-reply-ok{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.fb-reply-ok{font-size:13px;color:var(--mut);margin-bottom:14px}
.fb-send{width:100%;border:0;border-radius:10px;padding:11px 16px;background:var(--amberT);color:#fff;font-family:var(--font);font-weight:700;font-size:14px;cursor:pointer}
.fb-send:hover{filter:brightness(1.06)}
.fb-send:disabled{opacity:.6;cursor:default}
.fb-send-sm{width:auto;padding:8px 14px;font-size:13px}
.fb-done{text-align:center}
.fb-done-mark,.fb-done-mark svg{width:40px;height:40px;margin:0 auto 8px;display:block}
.fb-done .fb-send{margin-top:16px}
.fb-inbox{display:flex;flex-direction:column;gap:12px}
.fb-item{border:1px solid var(--bd);border-radius:12px;padding:14px 16px;background:var(--surf)}
.fb-item-new{border-color:var(--amberT)}
.fb-item-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.fb-senti{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.fb-senti-positive{color:var(--teal)}
.fb-senti-negative,.fb-senti-frustrated{color:var(--coral)}
.fb-status{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-family:var(--mono)}
.fb-msg{font-size:14.5px;line-height:1.5;white-space:pre-wrap}
.fb-ai{font-size:12.5px;color:var(--mut);margin-top:6px;font-style:italic}
.fb-meta{margin-top:8px;font-size:12px}
.fb-reply-form{display:flex;gap:8px;margin-top:12px;align-items:flex-start}
.fb-reply-form textarea{flex:1;border:1px solid var(--bd2);border-radius:8px;padding:8px 10px;font-family:var(--font);font-size:13.5px;resize:vertical}
.fb-reply-done{margin-top:10px;padding:10px 12px;background:var(--surf2);border-radius:8px;font-size:13px;color:var(--tx);white-space:pre-wrap}
/* .plan-annual (the underlined "or $59/mo" link) is gone: it looked like a footnote and
   was in fact a monthly checkout. The .plan-switch above the grid makes that choice
   explicit and reversible before any money is involved. */
/* The interval comparison, in the unit the buyer is weighing. ONE emphasis per line, never
   a run of bold fragments: alternating weight mid-sentence gives the card a ransom-note
   texture and, by emphasising everything, emphasises nothing. */
.plan-annual-note{color:var(--mut);font-size:12.5px;font-weight:500;margin:-2px 0 6px;line-height:1.5}
.plan-annual-note strong{color:var(--tx);font-weight:700}
/* public pricing page */
.lp-pricing{max-width:1060px;margin:0 auto;padding:56px 22px 30px;text-align:center}
.lp-pricing .lp-prob-lead{margin:14px auto 34px}
.lp-plan-grid{text-align:left}
.lp-pricing .plan-block{margin:0 auto}
.lp-plan-grid .plan-go{text-align:center;text-decoration:none;box-sizing:border-box}
.lp-pricing-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:960px;margin:34px auto 0;text-align:left}
@media (max-width:860px){.lp-pricing-notes{grid-template-columns:1fr}}
/* public footer */
.pub-foot{max-width:1060px;margin:40px auto 0;padding:26px 22px 34px;border-top:1px solid var(--bd);color:var(--mut);font-size:13px}
.pub-foot-row{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
.pub-foot-links{display:flex;gap:16px;flex-wrap:wrap}
.pub-foot-links a{color:var(--mut);text-decoration:none}
.pub-foot-links a:hover{color:var(--tx)}
.pub-foot-credit{margin:10px 0 0;font-size:11.5px;color:var(--faint)}
.pub-foot-credit a{color:var(--faint)}
/* landing pricing strip */
.lp-flash{max-width:1060px;margin:14px auto 0}
.lp-price-note{color:var(--faint);font-size:13.5px;margin:16px 0 0}
.lp-price-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.lp-price-card{position:relative;background:var(--surf);border:1.5px solid #EADFC7;border-radius:16px;padding:20px;box-shadow:0 1px 2px rgba(120,74,26,.05),0 16px 36px -20px rgba(120,74,26,.22);text-align:left}
.lp-price-card.hot{border-color:var(--amberT);box-shadow:0 2px 5px rgba(120,74,26,.07),0 22px 46px -20px rgba(120,74,26,.30)}
.lp-price-tag{position:absolute;top:-10px;right:16px;background:var(--amberT);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.lp-price-n{font-size:26px;font-weight:800;letter-spacing:-.02em}
.lp-price-n span{font-size:13px;font-weight:600;color:var(--mut)}
.lp-price-card p{color:var(--mut);font-size:13.5px;margin:6px 0 0;line-height:1.5}
@media (max-width:720px){.lp-price-cards{grid-template-columns:1fr}}
.lp-trust a{color:var(--amber);text-decoration:none;font-weight:600}
/* landing: requirement analyzer (lives on the cream band) */
.lp-analyzer{text-align:center}
.lp-analyzer-box,.lp-analyzer-result{max-width:720px;margin-inline:auto}
.lp-analyzer-box{display:flex;flex-direction:column;gap:12px;text-align:left}
.lp-analyzer-box textarea{width:100%;box-sizing:border-box;background:#FFFDF8;border:1.5px solid #E3D4B4;border-radius:14px;padding:14px 16px;font-size:14px;font-family:var(--font);color:var(--tx);outline:none;resize:vertical}
.lp-analyzer-box textarea:focus{border-color:#C98B4B}
.lp-analyzer-box .lp-btn-solid{align-self:center;border:0;cursor:pointer;font-family:var(--font)}
.lp-analyzer-box .lp-btn-solid[disabled]{opacity:.6;cursor:wait}
.lp-analyzer-result{margin-top:22px;background:#FFFDF8;border:1.5px solid #E3D4B4;border-radius:16px;padding:20px 22px;text-align:left}
.lp-an-summary{font-weight:700;font-size:15px;margin:0 0 14px}
.lp-an-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--bd)}
.lp-an-mark{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px}
.lp-an-row.yes .lp-an-mark{background:color-mix(in srgb,var(--teal) 18%,transparent);color:#177a4f}
.lp-an-row.partial .lp-an-mark{background:color-mix(in srgb,var(--yellow) 26%,transparent);color:#8a6414}
.lp-an-row.no .lp-an-mark{background:color-mix(in srgb,var(--coral) 18%,transparent);color:#a2321f}
.lp-an-row strong{font-size:14px}
.lp-an-row p{margin:2px 0 0;color:var(--mut);font-size:13px;line-height:1.5}
.lp-an-bottom{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--bd);color:var(--mut);font-size:13.5px;line-height:1.55}
.lp-an-cta{display:inline-block;margin-top:14px;text-decoration:none}
.lp-analyzer-egs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;max-width:720px;margin:12px auto 0}
.lp-analyzer-egs-l{font-size:13px;color:var(--mut)}
.lp-analyzer-src{max-width:640px;margin:14px auto 0;text-align:center;font-size:12.5px;line-height:1.55;color:var(--mut)}
.lp-eg{border:1.5px solid #E3D4B4;background:#FFFDF8;color:var(--tx);border-radius:999px;padding:6px 14px;font-size:13px;font-family:var(--font);cursor:pointer;transition:border-color .15s,background .15s}
.lp-eg:hover{border-color:#C98B4B;background:#FFF7E8}
.lib-side-note{color:var(--faint);font-size:12px;margin:8px 0 0;line-height:1.5}
/* legal pages */
.legal{max-width:720px;margin:0 auto;padding:48px 22px 20px}
.legal h1{font-size:32px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
.legal-date{color:var(--faint);font-size:13px;margin:0 0 22px}
.legal h2{font-size:18px;font-weight:800;margin:26px 0 8px}
.legal p,.legal li{color:var(--mut);font-size:14.5px;line-height:1.65}
.legal ul{padding-left:20px;display:flex;flex-direction:column;gap:6px;margin:8px 0}
.legal a{color:var(--amber)}
/* free-plan report preview: readable but unmistakably a sample */
.repdoc-sample{position:relative}
.repdoc-sample::after{content:"SAMPLE · Upgrade to download";position:fixed;inset:0;display:grid;place-items:center;font-size:clamp(28px,6vw,64px);font-weight:800;color:rgba(180,60,30,.16);transform:rotate(-24deg);pointer-events:none;letter-spacing:.06em;white-space:nowrap}
.repdoc-upgrade{position:sticky;top:0;z-index:5;background:#FFF7E8;border-bottom:1.5px solid var(--amberT);padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.success-hero{text-align:center;padding:50px 20px;display:flex;flex-direction:column;align-items:center;gap:12px}
.success-hero .watch-done-check{width:56px;height:56px;font-size:28px}
.success-hero h3{font-size:24px;font-weight:800;margin:6px 0 0}
.success-actions{display:flex;gap:14px;align-items:center;margin-top:14px}
.watch-wm{text-align:center;color:var(--faint);font-size:12px;margin-top:18px}
.watch-wm a{color:var(--mut);font-weight:600;text-decoration:none}
@media (max-width:720px){.plan-grid{grid-template-columns:1fr}}

/* ============ Reports (PR5) ============ */
.rep-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.asg-head-right{display:flex;gap:14px;align-items:center}
/* Completion-ring summary: "are we covered?" is the hero; the rest are satellites.
   Teal fill = the covered share (teal is the paid-for/achievement color). */
.team-summary{display:flex;align-items:center;gap:30px;background:var(--surf);border:1px solid var(--bd);border-radius:16px;padding:20px 26px;box-shadow:var(--shadow);flex-wrap:wrap;margin:4px 0 22px}
.tsum-ring{position:relative;width:120px;height:120px;flex:none;border-radius:50%;background:conic-gradient(var(--teal) calc(var(--p,0)*1%),var(--surf2) 0)}
.tsum-ring::before{content:"";position:absolute;inset:13px;border-radius:50%;background:var(--surf);box-shadow:inset 0 0 0 1px var(--bd)}
.tsum-ring-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.tsum-ring-in b{font-size:26px;font-weight:800;font-family:var(--mono);letter-spacing:-.02em}
.tsum-ring-in s{font-size:10.5px;color:var(--mut);text-decoration:none;text-transform:uppercase;letter-spacing:.07em}
.tsum-sats{display:flex;flex-direction:column;gap:11px;justify-content:center}
.tsum-sat{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:inherit}
.tsum-sat b{font-family:var(--mono);font-weight:800;font-size:18px;letter-spacing:-.02em;min-width:54px}
.tsum-sat span{color:var(--mut);font-size:13.5px}
.tsum-sat.warn b{color:var(--coral)}
a.tsum-sat-link:hover span{color:var(--tx)}
.rep-h{font-size:14px;font-weight:800;letter-spacing:-.01em;margin:26px 0 10px;color:var(--tx)}
.rep-csv{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--amberT);text-decoration:none}
.rep-csv:hover{text-decoration:underline}
.wsp-table a{color:var(--amberT);text-decoration:none;font-weight:600}
.wsp-table a:hover{text-decoration:underline}

/* Printable compliance report doc */
.repdoc{max-width:800px;margin:0 auto;padding:34px 26px 60px;color:var(--tx)}
.repdoc-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.repdoc-actions .wsp-go{cursor:pointer;border:0;font-family:var(--font)}
.repdoc-head{display:flex;align-items:center;gap:16px;border-bottom:2px solid var(--tx);padding-bottom:18px;margin-bottom:22px}
.repdoc-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px}
.repdoc-brand .mark{width:30px;height:30px}
.repdoc-titles h1{font-size:22px;font-weight:800;margin:0;letter-spacing:-.02em}
.repdoc-org{color:var(--mut);font-size:13px;margin-top:3px}
.repdoc-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
.repdoc-summary>div{display:flex;flex-direction:column;gap:3px}
.repdoc-k{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);font-weight:700}
.repdoc-v{font-size:20px;font-weight:800;font-family:var(--mono)}
.repdoc-h{font-size:15px;font-weight:800;margin:26px 0 10px;padding-bottom:5px;border-bottom:1px solid var(--bd2)}
.repdoc-table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:10px}
.repdoc-table th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:700;padding:7px 8px;border-bottom:1.5px solid #E2D4B8;background:#EFE3CB;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.repdoc-table td{padding:7px 8px;border-bottom:1px solid var(--bd)}
.repdoc-table td.done{color:#177a4f;font-weight:700}
.repdoc-table .mono{font-family:var(--mono);font-size:12px}
.repdoc-empty{color:var(--faint);text-align:center;padding:14px}
.repdoc-foot{margin-top:30px;padding-top:16px;border-top:1px solid var(--bd);font-size:11px;color:var(--faint);line-height:1.6}
@media print{
  .no-print{display:none !important}
  .repdoc{max-width:100%;padding:0}
  .repdoc-table{font-size:11px}
  .repdoc-head{border-color:#000}
}
@media (max-width:640px){
  .repdoc-summary{grid-template-columns:repeat(2,1fr)}
}

/* ============ Training library (premium) ============ */
.lib{max-width:1120px;margin:0 auto;padding:8px 20px 72px}
.lib-hero{max-width:880px;margin:20px 0 34px}
.lib-eyebrow{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--amberT);margin-bottom:10px}
.lib-hero h1{font-size:clamp(30px,4.5vw,42px);font-weight:800;letter-spacing:-.03em;margin:0 0 12px;line-height:1.05}
.lib-hero p{color:var(--mut);font-size:16px;line-height:1.6;margin:0;max-width:60ch}

.lib-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.lib-card{display:flex;flex-direction:column;background:var(--surf);border:1px solid var(--bd);border-radius:18px;
  box-shadow:var(--shadow);overflow:hidden;transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s,border-color .16s}
.lib-card:hover{transform:translateY(-4px);border-color:var(--bd2);box-shadow:0 4px 10px rgba(25,35,80,.06),0 26px 50px -24px rgba(25,35,80,.30)}

.lib-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(160deg,#FBF6EC,#F4EDDF)}
.lib-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .35s ease}
.lib-card:hover .lib-thumb img{transform:scale(1.035)}
.lib-thumb::after{content:"";position:absolute;inset:0;box-shadow:inset 0 -1px 0 rgba(25,35,80,.06)}
.lib-thumb-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.85);width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--amberT);display:grid;place-items:center;opacity:0;transition:.2s;
  box-shadow:0 6px 20px rgba(25,35,80,.25);backdrop-filter:blur(2px)}
.lib-thumb-play svg{width:22px;height:22px;margin-left:2px}
.lib-card:hover .lib-thumb-play{opacity:1;transform:translate(-50%,-50%) scale(1)}

.lib-body{padding:18px 20px 6px;flex:1;display:flex;flex-direction:column}
.lib-cat{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);margin-bottom:7px}
.lib-body h3{font-size:18px;font-weight:800;letter-spacing:-.015em;line-height:1.2;margin:0 0 7px}
.lib-body h3 a{color:var(--tx);text-decoration:none}
.lib-body h3 a:hover{color:var(--amberT)}
.lib-sum{color:var(--mut);font-size:14px;line-height:1.5;margin:0 0 12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lib-meta{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--faint);margin-bottom:12px}
.lib-meta .dot::before{content:"·";margin-right:10px;color:var(--bd2)}
.lib-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.lib-tag{font-size:10.5px;font-weight:700;color:var(--mut);background:var(--surf2);box-shadow:inset 0 0 0 1px var(--bd);
  border-radius:6px;padding:3px 8px;font-family:var(--mono)}
.lib-actions{display:flex;gap:10px;padding:16px 20px 18px}
.lib-btn{flex:1;text-align:center;text-decoration:none;font-weight:700;font-size:13.5px;padding:10px 12px;border-radius:10px;transition:.13s;font-family:var(--font)}
.lib-btn.ghost{color:var(--tx);background:var(--surf2);box-shadow:inset 0 0 0 1px var(--bd2)}
.lib-btn.ghost:hover{background:var(--bg2)}
.lib-btn.solid{color:#fff;background:var(--amberT)}
.lib-btn.solid:hover{filter:brightness(1.06)}
@media (max-width:720px){.lib-grid{grid-template-columns:1fr}}

.lib-show{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
.lib-show-main h1{font-size:22px;font-weight:800;letter-spacing:-.015em;margin:0 0 4px}
.lib-show-side{position:sticky;top:20px;display:flex;flex-direction:column;gap:18px}
.lib-side-actions{display:flex;flex-direction:column;gap:8px}
.lib-side-actions .wsp-go,.lib-side-actions .deckslink{text-align:center}
.lib-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:13.5px}
.lib-facts dt{color:var(--mut);font-weight:600}
.lib-facts dd{margin:0;font-weight:600}
.lib-facts-block{border-top:1px solid var(--bd);padding-top:14px}
.lib-facts-h{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:700;margin-bottom:8px}
.lib-sources{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.lib-sources a{color:var(--amberT);text-decoration:none}
.lib-sources a:hover{text-decoration:underline}
@media (max-width:760px){.lib-show{grid-template-columns:1fr}.lib-show-side{position:static}}

/* ============ Player full-screen + wider library preview ============ */
.wsp.wide{max-width:1200px}
.kx-player:fullscreen{
  background:#0e1017;display:flex;flex-direction:column;padding:0;
  /* re-theme the controls for the dark backdrop by remapping the tokens they use */
  --tx:#EAEDF4; --bg:#0e1017; --mut:#AEB6C6; --bd2:#3A4150; --surf:#1a1e27;
}
.kx-player:fullscreen .kx-stage{flex:1;min-height:0;width:100%;height:auto;max-height:none;aspect-ratio:auto;border-radius:0}
.kx-player:fullscreen .kx-controls{padding:14px 26px;background:#0e1017}

/* ============ Interactive quiz (knowledge check) ============ */
.kx-quiz{padding:6% 8% 8%}
.kx-quiz-wrap{width:100%;max-width:86cqw;margin:0 auto;display:flex;flex-direction:column;gap:3.2cqmin}
.kx-quiz-eyebrow{font-size:2.1cqmin;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--kx-a,#E8894A)}
.kx-quiz-q{font-size:5.2cqmin;font-weight:800;letter-spacing:-.01em;line-height:1.18;color:var(--st-ink)}
.kx-quiz-opts{display:flex;flex-direction:column;gap:1.8cqmin}
.kx-quiz-opt{display:flex;align-items:center;gap:2.4cqmin;text-align:left;width:100%;cursor:pointer;
  font-family:var(--font);font-size:2.9cqmin;font-weight:600;color:var(--st-ink);line-height:1.3;
  background:color-mix(in srgb,var(--st-ink) 5%,transparent);border:0.35cqmin solid color-mix(in srgb,var(--st-ink) 14%,transparent);
  border-radius:2.4cqmin;padding:2.4cqmin 2.8cqmin;transition:border-color .12s,background .12s,transform .08s}
.kx-quiz-opt:not(:disabled):hover{border-color:var(--kx-a,#E8894A);background:color-mix(in srgb,var(--kx-a,#E8894A) 8%,transparent)}
.kx-quiz-opt:not(:disabled):active{transform:scale(.99)}
.kx-quiz-key{flex:none;width:5cqmin;height:5cqmin;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:2.6cqmin;color:var(--st-ink);background:color-mix(in srgb,var(--st-ink) 10%,transparent)}
.kx-quiz-ot{flex:1}
.kx-quiz-mark{flex:none;width:4cqmin;text-align:center;font-weight:800;font-size:3cqmin;opacity:0}
.kx-quiz-opt.kx-q-correct{border-color:#2FA96A;background:color-mix(in srgb,#2FA96A 15%,transparent)}
.kx-quiz-opt.kx-q-correct .kx-quiz-key{background:#2FA96A;color:#fff}
.kx-quiz-opt.kx-q-correct .kx-quiz-mark{opacity:1;color:#2FA96A}
.kx-quiz-opt.kx-q-correct .kx-quiz-mark::after{content:"✓"}
.kx-quiz-opt.kx-q-wrong{border-color:#E15B5B;background:color-mix(in srgb,#E15B5B 13%,transparent)}
.kx-quiz-opt.kx-q-wrong .kx-quiz-key{background:#E15B5B;color:#fff}
.kx-quiz-opt.kx-q-wrong .kx-quiz-mark{opacity:1;color:#E15B5B}
.kx-quiz-opt.kx-q-wrong .kx-quiz-mark::after{content:"✕"}
.kx-quiz-reveal{font-size:2.6cqmin;line-height:1.45;color:var(--st-mut);opacity:0}
.kx-quiz-verdict{font-weight:800}
.kx-quiz-verdict.ok{color:#2FA96A}
.kx-quiz-verdict.no{color:#E15B5B}

/* learner: didn't pass the knowledge check — review & retry */
.watch-fail{display:flex;align-items:center;gap:16px;max-width:560px;margin:22px auto 0;background:var(--surf);
  border:1px solid color-mix(in srgb,var(--yellow) 55%,transparent);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow)}
.watch-fail-icon{width:44px;height:44px;flex:none;border-radius:50%;background:var(--yellow);color:#4a3410;display:grid;place-items:center;font-size:24px;font-weight:800}
.watch-fail-body{flex:1}
.watch-fail strong{font-size:16px}
.watch-fail p{margin:2px 0 0;color:var(--mut);font-size:13.5px}
.watch-fail-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px;white-space:nowrap}
.watch-fail-link{font-size:12.5px;font-weight:600;color:var(--mut);text-decoration:none}
.watch-fail-link:hover{color:var(--tx)}
@media (max-width:560px){
  .watch-fail{flex-direction:column;align-items:center;text-align:center}
  .watch-fail-actions{align-items:center;white-space:normal}
  .watch-done{flex-direction:column;text-align:center}
  .watch-done .ask-go{margin-left:0}
}

/* learner: the attestation gate — "completed and understood", checked before the completing POST */
.watch-ack[hidden]{display:none}
.watch-ack{display:flex;align-items:center;gap:16px;max-width:560px;margin:22px auto 0;background:var(--surf);
  border:1px solid color-mix(in srgb,var(--amberT) 45%,transparent);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow)}
.watch-ack-icon{width:44px;height:44px;flex:none;border-radius:50%;background:var(--amberT);color:#fff;display:grid;place-items:center;font-size:22px;font-weight:800}
.watch-ack-body{flex:1;text-align:left}
.watch-ack strong{font-size:16px}
.watch-ack-row{display:flex;align-items:flex-start;gap:9px;margin-top:7px;cursor:pointer;font-size:13.5px;line-height:1.45;color:var(--tx)}
.watch-ack-row input{width:17px;height:17px;flex:none;margin-top:1px;accent-color:var(--amberT);cursor:pointer}
.watch-ack-hint{margin:6px 0 0;color:#E15B5B;font-size:12.5px;font-weight:600}
.watch-ack-hint[hidden]{display:none}
.watch-ack .ask-go{white-space:nowrap}
@media (max-width:560px){
  .watch-ack{flex-direction:column;align-items:stretch;text-align:left}
  .watch-ack .ask-go{text-align:center}
}

/* learner: completion couldn't be recorded (flaky network) — visible retry, never silent loss */
.watch-err{display:flex;align-items:center;gap:16px;max-width:560px;margin:22px auto 0;background:var(--surf);
  border:1px solid color-mix(in srgb,#E15B5B 55%,transparent);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow)}
.watch-err-icon{width:44px;height:44px;flex:none;border-radius:50%;background:#E15B5B;color:#fff;display:grid;place-items:center;font-size:22px;font-weight:800}
.watch-err-body{flex:1;text-align:left}
.watch-err strong{font-size:16px}
.watch-err p{margin:2px 0 0;color:var(--mut);font-size:13.5px}
@media (max-width:560px){
  .watch-err{flex-direction:column;text-align:center}
  .watch-err-body{text-align:center}
}

/* ============ Page quiz (post-video knowledge check) ============ */
.pq{max-width:640px;margin:24px auto 0;background:var(--surf);border:1px solid var(--bd);border-radius:20px;
  padding:28px 30px;box-shadow:var(--shadow);text-align:left}
.pq-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.pq-eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--amberT)}
.pq-count{font-size:12.5px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.pq-q{font-size:21px;font-weight:800;letter-spacing:-.015em;line-height:1.3;margin:0 0 20px;color:var(--tx)}
.pq-opts{display:flex;flex-direction:column;gap:10px}
.pq-opt{display:flex;align-items:center;gap:14px;text-align:left;width:100%;cursor:pointer;font-family:var(--font);
  font-size:15.5px;font-weight:600;color:var(--tx);line-height:1.35;background:var(--surf2);
  border:1.5px solid var(--bd2);border-radius:13px;padding:14px 16px;transition:border-color .12s,background .12s,transform .06s}
.pq-opt:not(:disabled):hover{border-color:var(--amberT);background:color-mix(in srgb,var(--amberT) 6%,transparent)}
.pq-opt:not(:disabled):active{transform:scale(.995)}
.pq-opt:focus-visible{outline:2px solid var(--amberT);outline-offset:2px}
.pq-key{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;
  font-size:13px;color:var(--tx);background:color-mix(in srgb,var(--tx) 9%,transparent)}
.pq-ot{flex:1}
.pq-mark{flex:none;width:20px;text-align:center;font-weight:800;font-size:16px}
.pq-opt.pq-correct{border-color:#2FA96A;background:color-mix(in srgb,#2FA96A 12%,transparent)}
.pq-opt.pq-correct .pq-key{background:#2FA96A;color:#fff}
.pq-opt.pq-correct .pq-mark::after{content:"✓";color:#2FA96A}
.pq-opt.pq-wrong{border-color:var(--coral);background:color-mix(in srgb,var(--coral) 11%,transparent)}
.pq-opt.pq-wrong .pq-key{background:var(--coral);color:#fff}
.pq-opt.pq-wrong .pq-mark::after{content:"✕";color:var(--coral)}
.pq-reveal{margin-top:16px;font-size:14.5px;line-height:1.5;color:var(--mut)}
.pq-verdict{font-weight:800}
.pq-verdict.ok{color:#2FA96A}.pq-verdict.no{color:var(--coral)}
.pq-actions{display:flex;justify-content:flex-end;margin-top:20px}
.pq-next{font-family:var(--font);font-weight:700;font-size:14.5px;color:#fff;background:var(--amberT);
  border:0;border-radius:11px;padding:11px 20px;cursor:pointer;transition:filter .12s}
.pq-next:hover{filter:brightness(1.06)}
.pq-preview-note{max-width:640px;margin:16px auto 0;text-align:center;font-size:13px;color:var(--faint)}

/* ============================ Landing page (compliance-led) ============================ */
.lp .top,.app:has(.wsp) .top{max-width:1120px;margin:0 auto 8px;padding:0 22px}
.lp-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--amberT)}
.lp-eyebrow.center{text-align:center}
.lp-h2{font-size:clamp(26px,3.6vw,36px);font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:10px 0 0;color:var(--tx)}
.lp-h2.center{text-align:center}
.lp-btn-solid{display:inline-block;text-decoration:none;font-weight:700;font-size:15.5px;color:#fff;background:var(--amberT);
  padding:14px 26px;border-radius:12px;transition:filter .12s,transform .12s;box-shadow:0 10px 24px -10px color-mix(in srgb,var(--amberT) 70%,transparent)}
.lp-btn-solid:hover{filter:brightness(1.07);transform:translateY(-1px)}
.lp-btn-ghost{display:inline-block;text-decoration:none;font-weight:700;font-size:15.5px;color:var(--tx);
  padding:14px 22px;border-radius:12px;background:var(--surf);box-shadow:inset 0 0 0 1.5px var(--bd2);transition:.12s}
.lp-btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--amberT);color:var(--amberT)}
.lp-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.lp-cta.center{justify-content:center}

/* hero */
/* Hero: claim left, the product playing itself right. The one asymmetric, editorial
   moment on the page — everything below earns its scroll. */
.lp-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px);align-items:center;
  max-width:1130px;margin:0 auto;padding:40px 22px 30px;text-align:left}
.lp-hero-copy{max-width:580px}
.lp-h1{font-size:clamp(30px,3.5vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:14px 0 0;text-wrap:balance}
.lp-accent{color:var(--amberT)}
.lp-lede{font-size:clamp(15.5px,1.7vw,18px);line-height:1.6;color:var(--mut);margin:18px 0 0;max-width:54ch}
.lp-trust{margin-top:18px;font-size:13px;color:var(--faint);line-height:1.7}
.lp-hero-demo{min-width:0}
@media (max-width:960px){
  .lp-hero{grid-template-columns:1fr;text-align:center;padding-top:28px}
  .lp-hero-copy{max-width:640px;margin:0 auto}
  .lp-lede{margin-inline:auto}
  .lp-hero .lp-cta{justify-content:center}
  .lp-hero-demo{max-width:680px;margin:6px auto 0}
}

/* sections shared */
.lp-prob,.lp-how,.lp-why,.lp-comply,.lp-lib,.lp-final,.lp-price-strip{max-width:1080px;margin:0 auto;padding:60px 22px}

/* The product's own world is warm cream and orange (every deck card shows it) — the
   marketing page borrows that world for its focal moments instead of framing them in
   generic SaaS blue-on-white. */
.lp-band{background:#F8F2E5;border:1px solid #EADFC7;border-radius:28px;max-width:1080px;
  margin:26px auto;padding:52px clamp(22px,5vw,64px)}
.lp-eyebrow.warm{color:#A85E1B}
.lp-band-lead{font-size:16.5px;line-height:1.6;color:#5B5546;max-width:62ch;margin:14px auto 24px;text-align:center}
.lp-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:8px}
.lp-prob{text-align:center}
.lp-prob .lp-h2{margin-bottom:0}
.lp-prob-lead{font-size:18px;line-height:1.6;color:var(--mut);max-width:64ch;margin:16px auto 34px}
.lp-prob-grid,.lp-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lp-why-grid{grid-template-columns:repeat(4,1fr)}
.lp-prob-card{background:var(--surf);border:1px solid var(--bd);border-radius:16px;padding:24px;box-shadow:var(--shadow);text-align:left}
.lp-prob-card span{font-size:26px}
.lp-prob-card strong{display:block;font-size:16px;margin:0 0 6px;letter-spacing:-.01em}
.lp-prob-card p{margin:0;color:var(--mut);font-size:14px;line-height:1.5}

/* how it works */
.lp-how{text-align:left}
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:36px;text-align:left}
.lp-step{position:relative;padding-top:6px}
.lp-step-n{width:42px;height:42px;border-radius:50%;background:#F6E7D4;color:#B4651F;
  display:grid;place-items:center;font-weight:800;font-size:19px;margin-bottom:14px}
.lp-step strong{display:block;font-size:18px;letter-spacing:-.015em;margin-bottom:6px}
.lp-step p{margin:0;color:var(--mut);font-size:14.5px;line-height:1.5}

/* why us */
.lp-why-card{background:var(--surf);border:1px solid var(--bd);border-radius:16px;padding:24px;box-shadow:var(--shadow)}
.lp-why-ic{width:40px;height:40px;border-radius:11px;background:color-mix(in srgb,var(--amberT) 12%,transparent);color:var(--amberT);
  display:grid;place-items:center;font-size:18px;font-weight:800;margin-bottom:14px}
.lp-why-card strong{display:block;font-size:16px;letter-spacing:-.01em;margin-bottom:6px}
.lp-why-card p{margin:0;color:var(--mut);font-size:14px;line-height:1.5}

/* compliance strip */
.lp-comply{text-align:center}
.lp-comply-row{margin-top:46px;padding-top:28px;border-top:1px solid #E3D4B4}
.lp-comply-row .lp-comply-label{text-align:left}
.lp-comply-row .lp-badges{justify-content:flex-start;margin:0 0 14px}
.lp-comply-row .lp-comply-note{margin:0;text-align:left;max-width:70ch}
.lp-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:28px 0 20px}
.lp-badge{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--tx);background:var(--surf);
  border:1px solid #E3D4B4;border-radius:999px;padding:9px 18px;box-shadow:0 1px 2px rgba(120,74,26,.05)}
.lp-comply-note{color:var(--mut);font-size:15px;line-height:1.6;max-width:60ch;margin:0 auto}

/* library showcase */
.lp-lib-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px}
.lp-lib-all{font-weight:700;font-size:14.5px;color:var(--amberT);text-decoration:none;white-space:nowrap}
.lp-lib-all:hover{text-decoration:underline}
.lp-lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lp-lib-card{text-decoration:none;color:inherit;background:var(--surf);border:1px solid var(--bd);border-radius:16px;
  overflow:hidden;box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s}
.lp-lib-card:hover{transform:translateY(-3px);box-shadow:0 24px 46px -24px rgba(25,35,80,.3)}
.lp-lib-thumb{aspect-ratio:16/9;overflow:hidden;background:linear-gradient(160deg,#FBF6EC,#F4EDDF)}
.lp-lib-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lp-lib-cat{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--amber);margin:14px 18px 4px}
.lp-lib-title{font-size:15.5px;font-weight:800;letter-spacing:-.01em;margin:0 18px 18px;line-height:1.25}

/* final CTA — a cream band framed like the certificate they're here to earn */
.lp-final{text-align:center;background:#F8F2E5;border:1.5px solid #E3D4B4;border-radius:20px;
  margin-bottom:20px;padding:16px;box-shadow:0 2px 5px rgba(120,74,26,.06),0 24px 50px -24px rgba(120,74,26,.26)}
.lp-final-frame{border:1px solid #D9C39B;border-radius:12px;padding:44px clamp(20px,5vw,56px) 40px}
.lp-final-h{font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.025em;margin:0 0 8px;max-width:22ch;margin-inline:auto;color:#2A2A22}
.lp-final p{color:#5B5546;font-size:16px;margin:0}
.lp-foot{max-width:1080px;margin:0 auto;padding:30px 22px 60px;border-top:1px solid var(--bd);color:var(--faint);font-size:12.5px;text-align:center}
.lp-foot a{color:var(--mut)}

@media (max-width:860px){
  .lp-prob-grid,.lp-why-grid,.lp-steps,.lp-lib-grid{grid-template-columns:1fr}
  .lp-why-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){.lp-why-grid{grid-template-columns:1fr}}

/* ---- Platform admin dashboard (super_admin only) ---- */
.adm{max-width:1120px;margin:0 auto;padding:28px 24px 72px}
.acct-admin .ws-ico{color:var(--amber)}
.adm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:8px 0 24px;flex-wrap:wrap}
.adm-eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.adm-head h1{font-size:30px;font-weight:700;color:var(--tx);margin:4px 0 0;letter-spacing:-.02em}
.adm-mrr{text-align:right}
.adm-mrr-n{font-size:32px;font-weight:800;color:var(--teal);line-height:1;font-variant-numeric:tabular-nums}
.adm-mrr-l{font-size:12px;color:var(--mut);margin-top:4px}
.adm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
@media(max-width:820px){.adm-stats{grid-template-columns:repeat(2,1fr)}}
.adm-stat{background:var(--surf);border:1px solid var(--bd);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.adm-stat-n{display:block;font-size:26px;font-weight:800;color:var(--tx);line-height:1.1;font-variant-numeric:tabular-nums}
.adm-stat-sub{font-size:16px;font-weight:600;color:var(--faint)}
.adm-stat-l{display:block;font-size:12.5px;color:var(--mut);margin-top:6px}
.adm-h2{font-size:15px;font-weight:700;color:var(--tx);margin:0 0 12px}
.adm-h2-sub{font-weight:500;color:var(--faint);font-size:12.5px;margin-left:6px}
.adm-plans{margin-bottom:28px}
.adm-plan-row{display:flex;gap:12px;flex-wrap:wrap}
.adm-plan{display:flex;align-items:center;gap:10px;background:var(--surf);border:1px solid var(--bd);border-radius:12px;padding:10px 16px}
.adm-plan-n{font-size:20px;font-weight:800;color:var(--tx);font-variant-numeric:tabular-nums}
.adm-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:999px;text-transform:uppercase}
.adm-badge-free{background:var(--surf2);color:var(--mut);border:1px solid var(--bd)}
.adm-badge-team{background:color-mix(in srgb,var(--amberT) 14%,transparent);color:var(--amber)}
.adm-badge-business{background:rgba(76,195,138,.15);color:#1E8A5A}
.adm-table-wrap{overflow-x:auto;background:var(--surf);border:1px solid var(--bd);border-radius:14px;box-shadow:var(--shadow)}
.adm-table{width:100%;border-collapse:collapse;font-size:13.5px}
.adm-table th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--mut);padding:12px 14px;border-bottom:1px solid #E2D4B8;background:#EFE3CB}
.adm-table td{padding:12px 14px;border-bottom:1px solid var(--bd);color:var(--tx)}
.adm-table tr:last-child td{border-bottom:0}
.adm-table th.num,.adm-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.adm-org-name{font-weight:600}
.adm-dim{color:var(--mut)}
.adm-live{color:var(--teal);font-size:10px;margin-left:6px;vertical-align:middle}
.adm-empty{color:var(--mut);padding:16px 4px}

/* ---- Admin sub-nav + illustrations catalog ---- */
.adm-count{font-size:15px;font-weight:600;color:var(--faint);vertical-align:middle;margin-left:6px}
.adm-subnav{display:flex;gap:6px;margin:0 0 24px;border-bottom:1px solid var(--bd)}
.adm-subnav a{padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--mut);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.adm-subnav a:hover{color:var(--tx)}
.adm-subnav a.on{color:var(--amber);border-bottom-color:var(--amber)}
.adm-illus-group{margin-bottom:30px}
.adm-illus-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.adm-illus-card{margin:0;background:var(--surf);border:1px solid var(--bd);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.adm-illus-frame{background:#F8F2E0;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:10%}
.adm-illus-svg{width:100%;height:100%;display:block}
.adm-illus-card figcaption{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-top:1px solid var(--bd)}
.adm-illus-slug{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--tx);word-break:break-all}
.adm-illus-meta{font-size:11px;color:var(--faint)}

/* ---- admin analytics: date range + activation funnel ---- */
.adm-range{display:flex;gap:4px}
.adm-range a{padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--mut);text-decoration:none;border:1px solid var(--bd);border-radius:8px}
.adm-range a:hover{color:var(--tx)}
.adm-range a.on{color:#fff;background:var(--amberT);border-color:var(--amberT)}
.adm-funnel,.adm-events{margin-bottom:30px}
.adm-funnel-rows{display:flex;flex-direction:column;gap:8px}
.adm-funnel-row{display:grid;grid-template-columns:150px 1fr 96px;align-items:center;gap:12px}
.adm-funnel-label{font-size:13px;font-weight:600;color:var(--tx)}
.adm-funnel-bar-wrap{background:var(--surf2);border-radius:8px;height:26px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--bd2)}
.adm-funnel-bar{height:100%;background:linear-gradient(90deg,var(--amberT),var(--amber));border-radius:8px;min-width:3px;transition:width .3s}
.adm-funnel-n{text-align:right;font-size:14px;font-weight:700;color:var(--tx);font-variant-numeric:tabular-nums}
.adm-funnel-pct{display:inline-block;margin-left:8px;font-size:12px;font-weight:600;color:var(--mut);min-width:34px}
.adm-err-hot{color:var(--coral);font-weight:800}
/* ---- admin health ---- */
.adm-run-btn{background:var(--surf);border:1px solid var(--bd);border-radius:9px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--tx);cursor:pointer;font-family:var(--font)}
.adm-run-btn:hover{border-color:var(--amber);color:var(--amber)}
.adm-health-now{display:flex;align-items:baseline;gap:14px;padding:18px 22px;border-radius:14px;margin-bottom:24px;border:1px solid var(--bd)}
.adm-health-status{font-size:26px;font-weight:800;letter-spacing:.5px}
.adm-health-when{font-size:13px;color:var(--mut)}
.adm-health-ok{background:color-mix(in srgb,var(--teal) 12%,transparent)}
.adm-health-ok .adm-health-status{color:#177a4f}
.adm-health-degraded{background:color-mix(in srgb,var(--yellow) 18%,transparent)}
.adm-health-degraded .adm-health-status{color:#8a6414}
.adm-health-down{background:color-mix(in srgb,var(--coral) 16%,transparent)}
.adm-health-down .adm-health-status{color:#a2321f}
.adm-health-badge-ok{background:color-mix(in srgb,var(--teal) 16%,transparent);color:#177a4f}
.adm-health-badge-degraded{background:color-mix(in srgb,var(--yellow) 24%,transparent);color:#8a6414}
.adm-health-badge-down{background:color-mix(in srgb,var(--coral) 18%,transparent);color:#a2321f}
/* ---- session timeline ---- */
.adm-timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--bd);display:flex;flex-direction:column;gap:2px}
.adm-timeline li{position:relative;padding:6px 0 6px 18px;font-size:13px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.adm-timeline li::before{content:"";position:absolute;left:-5px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--amber)}
.adm-timeline-t{color:var(--faint);font-variant-numeric:tabular-nums;font-size:12px;min-width:74px}
.adm-timeline-close{font-size:12px;font-weight:600;color:var(--amber);margin-left:8px}

/* ---- IA repositioning: library-first, create-your-own secondary ---- */
.wsnav-2nd{opacity:.62}
.wsnav-2nd:hover,.wsnav-2nd.on{opacity:1}
.decks-sub{color:var(--mut);font-size:14px;margin:2px 0 20px;max-width:60ch}
.decks-sub a{color:var(--amber);font-weight:600}
.lib-create{color:var(--mut);font-size:14px;margin-top:10px}
.lib-create a{color:var(--amber);font-weight:600;white-space:nowrap}
.lib-custom{text-align:center;max-width:560px;margin:44px auto 8px;padding:30px 22px 6px;border-top:1px solid #E3D4B4}
.lib-custom h3{font-size:20px;font-weight:800;margin:0 0 6px}
.lib-custom p{color:var(--mut);font-size:15px;line-height:1.55;margin:0 auto 16px;max-width:44ch}
.lib-custom .lib-btn{flex:none;display:inline-block;padding:11px 22px}

/* ---- Add-people: live count + seat capacity ---- */
.rep-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rep-head-actions{display:flex;align-items:center;gap:10px}
/* "Add on demand": the roster is the resting state; this button reveals the paste box */
.roster-addbtn{background:var(--surf2);box-shadow:inset 0 0 0 1px var(--bd2);border:0;border-radius:10px;color:var(--tx);font-weight:700;font-size:13px;padding:7px 14px;cursor:pointer;font-family:var(--font);white-space:nowrap;transition:.12s}
.roster-addbtn:hover{background:var(--bg2)}
.roster-cancel{background:none;border:0;color:var(--mut);font-weight:600;font-size:13px;cursor:pointer;font-family:var(--font);padding:9px 6px;white-space:nowrap}
.roster-cancel:hover{color:var(--tx)}
.roster-seats{font-size:10.5px;font-weight:700;color:var(--mut);background:var(--surf2);box-shadow:inset 0 0 0 1px var(--bd);border-radius:6px;padding:3px 8px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.roster-seats.warn{color:var(--coral)}
.roster-bad{color:var(--coral)}

/* ---- Add-people chip input (Gmail-style pills) ---- */
.chip-input{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:46px;padding:8px 10px;
  border:1px solid var(--bd2);border-radius:10px;background:var(--surf);cursor:text}
.chip-input:focus-within{border-color:var(--amberT);box-shadow:0 0 0 3px color-mix(in srgb,var(--amberT) 14%,transparent)}
.chip-input input{border:0;outline:0;flex:1;min-width:160px;font:inherit;color:var(--tx);background:transparent;padding:4px 2px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 5px 3px 10px;border-radius:999px;
  font-size:13px;line-height:1.5;white-space:nowrap;background:color-mix(in srgb,var(--amberT) 12%,transparent);color:var(--amber);font-variant-numeric:tabular-nums}
.chip button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:16px;line-height:1;padding:0 3px;border-radius:999px;opacity:.65}
.chip button:hover{opacity:1;background:rgba(0,0,0,.06)}
.chip-invalid{background:rgba(225,91,91,.13);color:var(--coral)}
.chip-dup{background:var(--surf2);color:var(--mut)}
.chip-known{background:color-mix(in srgb,var(--teal) 12%,transparent);color:#177a4f}

/* ---- Flash auto-dismiss (flash_controller) ---- */
.wsp-note,.wsp-err{transition:opacity .45s ease,transform .45s ease;cursor:default}
.flash-out{opacity:0;transform:translateY(-8px);pointer-events:none}
@media (prefers-reduced-motion: reduce){.flash-out{transform:none}}

/* ============================================================
   Landing redesign (2026-08): warm illustration palette + the
   3-step story spine. Scoped to .lp / body:has(.lp) so the rest
   of the app keeps its cool "Playroom" theme untouched.
   ============================================================ */
body:has(.lp){background:#FBF6EC}
.lp{
  /* repaint the landing accent onto the illustration house palette */
  --amber:#E8894A; --amberT:#EB7A3E; --blue:#EB7A3E; --yellow:#F8A621;
  --bg:#FBF6EC; --bg2:#F4ECDA;
}

/* marker-highlight swipe on the key hero words */
.lp-mk{position:relative;isolation:isolate;white-space:nowrap;color:inherit}
.lp-mk::before{content:"";position:absolute;left:-.12em;right:-.12em;top:14%;bottom:6%;
  background:var(--yellow);opacity:.5;transform:rotate(-1.4deg);border-radius:.18em;z-index:-1}

/* the story spine */
.lp-flow{max-width:1080px;margin:0 auto;padding:60px 24px 8px}
.lp-flow-head{text-align:center;max-width:660px;margin:0 auto}
.lp-flow-head .lp-band-lead{margin-top:12px}
.lp-flow-steps{position:relative;max-width:900px;margin:20px auto 0}
.lp-flow-steps::before{content:"";position:absolute;left:50%;top:64px;bottom:64px;width:0;
  border-left:2.5px dashed color-mix(in srgb,var(--tx) 15%,transparent);transform:translateX(-1px)}
.lp-flow-row{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;padding:20px 0}
.lp-flow-illus{display:grid;place-items:center}
.lp-flow-blob{width:100%;max-width:340px;aspect-ratio:1/1;border-radius:26px;
  background:radial-gradient(120% 120% at 40% 25%,#FCEFD6,#F1E4C6);
  display:grid;place-items:center;padding:12px}
.lp-illus-svg{width:100%;height:100%;display:block}
.lp-flow-row.rev .lp-flow-illus{order:2}
.lp-flow-row.rev .lp-flow-txt{order:1;text-align:right}
.lp-flow-row.rev .lp-flow-head-n{justify-content:flex-end}
.lp-flow-head-n{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.lp-flow-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  flex:0 0 auto;border-radius:9px;background:var(--tx);color:#fff;font-weight:700;
  font-family:var(--mono);font-size:15px}
.lp-flow-txt h3{font-family:"Fraunces",Georgia,serif;font-size:26px;line-height:1.12;margin:0;color:var(--tx)}
.lp-flow-txt p{color:var(--mut);font-size:15.5px;line-height:1.55;margin:0;max-width:44ch}
.lp-flow-row.rev .lp-flow-txt p{margin-left:auto}
.lp-flow-link{display:inline-block;margin-top:12px;font-weight:700;font-size:14px;
  color:var(--amberT);text-decoration:none}
.lp-flow-link:hover{text-decoration:underline}

@media (max-width:720px){
  .lp-flow-steps::before{left:22px}
  .lp-flow-row{grid-template-columns:1fr;gap:14px;padding:16px 0}
  .lp-flow-row.rev .lp-flow-illus{order:0}
  .lp-flow-row.rev .lp-flow-txt{order:0;text-align:left}
  .lp-flow-row.rev .lp-flow-head-n{justify-content:flex-start}
  .lp-flow-row.rev .lp-flow-txt p{margin-left:0}
  .lp-flow-blob{max-width:280px}
}

/* ---- Hero "you're covered" proof chip ---- */
.lp-proof{display:flex;flex-direction:column;gap:12px;width:100%;max-width:520px;margin:0 auto}
.lp-proof-covered{display:flex;align-items:center;gap:11px;
  background:color-mix(in srgb,var(--amber) 13%,#fff);
  border:1px solid color-mix(in srgb,var(--amber) 34%,transparent);border-radius:14px;padding:12px 15px}
.lp-proof-check{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--amber);color:#fff;
  font-size:14px;font-weight:800;display:grid;place-items:center;line-height:1}
.lp-proof-covered-txt{font-size:13px;color:var(--tx);line-height:1.35}

@media (max-width:720px){
  .lp-proof{max-width:440px}
}

/* ---- Honest compliance label + founder note (audit fixes) ---- */
#check{scroll-margin-top:24px}
.lp-comply-label{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-bottom:10px;text-align:center}

.lp-founder{max-width:760px;margin:0 auto;padding:22px 24px 34px;display:flex;align-items:center;gap:22px}
.lp-founder-photo{flex:0 0 auto;width:88px;height:88px;border-radius:50%;overflow:hidden;
  background:radial-gradient(120% 120% at 40% 25%,#FCEFD6,#F1E4C6);display:grid;place-items:center;
  box-shadow:0 8px 20px -10px rgba(60,44,24,.4);border:2px solid #fff}
.lp-founder-photo img{width:100%;height:100%;object-fit:cover;display:block}
.lp-founder-mono{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:30px;color:var(--amberT)}
.lp-founder-quote{font-size:16px;line-height:1.55;color:var(--tx);margin:0;max-width:52ch}
.lp-founder-sig{margin:8px 0 0;font-size:13px;font-weight:600;color:var(--mut)}
.lp-founder-link{color:var(--amberT);font-weight:700;text-decoration:none}
.lp-founder-link:hover{text-decoration:underline}
@media (max-width:720px){
  .lp-founder{flex-direction:column;text-align:center;gap:14px;padding:18px 22px 26px}
  .lp-founder-quote{max-width:none}
}

/* ---- Hero illustration (replaces the text-heavy certificate) ---- */
.lp-hero-blob{width:100%;aspect-ratio:1/1;border-radius:26px;
  background:radial-gradient(120% 120% at 38% 22%,#FCEFD6,#F1E4C6);
  display:grid;place-items:center;padding:16px}
.lp-hero-illus{width:100%;height:100%;display:block}