/* Veil Support Site — dependency-free design system.
   Brand tokens extracted from the Veil product (tailwind.config.ts + app/globals.css):
   brand-primary #3e13af · accent #1A9F6F · surfaces #faf9f7/#F3F0FA · ink #1a1523/#4a4458
   · border #e8e4f0 · Playfair Display headings / Mulish body · radii card 14 / btn 10 / badge 20.
   Deep-violet hero language from the product login screen (#070518 → #1a1140).
   Contrast-adjusted shades (AA): --ok #166534, --bad #B91C1C, warn text #8a5d10. */
:root{
  --brand:#3e13af; --brand-light:#5a3cc4; --brand-dark:#2d0e80;
  --accent:#1A9F6F; --accent-light:#2bbd86;
  --veil-deepest:#070518; --veil-deep:#1a1140;
  --brand-soft:#F3F0FA; --brand-tint:#ede8f7;
  --ink:#1a1523; --ink-soft:#4a4458; --ink-faint:#676078;
  --bg:#faf9f7; --bg-alt:#F3F0FA; --card:#ffffff; --line:#e8e4f0;
  --warn-bg:#fdf3e7; --warn-line:#D97706; --warn-ink:#8a5d10;
  --ok:#166534; --ok-line:#16A34A; --bad:#B91C1C;
  --radius:14px; --radius-btn:10px; --maxw:960px;
  --font:Mulish,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-heading:"Playfair Display",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.65;font-size:16.5px}
h1,h2{font-family:var(--font-heading);letter-spacing:.005em}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:2px}
.site-header :focus-visible,.hero :focus-visible,.site-footer :focus-visible{outline-color:#fff}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--brand);color:#fff;padding:.5rem 1rem;border-radius:0 0 6px 0;font-weight:600}
.skip-link:focus{left:0}
code{background:var(--brand-soft);border:1px solid var(--line);border-radius:4px;padding:.1em .35em;font-size:.9em}

/* Header / nav */
.site-header{background:linear-gradient(120deg,var(--brand-dark),var(--brand));color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 8px rgba(26,17,64,.28)}
.site-header .bar{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:1.5rem;padding:.7rem 1.2rem}
.brand{display:flex;align-items:center;gap:.65rem;color:#fff;font-weight:700;font-size:1.15rem;letter-spacing:.01em}
.brand:hover{text-decoration:none}
.brand .name{font-family:var(--font-heading);font-size:1.25rem;line-height:1}
.brand .mark{width:2.1rem;height:2.1rem;border-radius:.55rem;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand .mark svg{width:1.2rem;height:1.2rem;display:block}
.brand small{font-weight:600;color:#cfc8e8;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
nav.main{margin-left:auto;display:flex;gap:.2rem;flex-wrap:wrap}
nav.main a{color:#d9d2f0;padding:.45rem .75rem;border-radius:6px;font-size:.93rem}
nav.main a:hover{background:rgba(255,255,255,.12);text-decoration:none;color:#fff}
nav.main a.active{background:rgba(255,255,255,.18);color:#fff;font-weight:700;box-shadow:inset 0 -2px 0 var(--accent-light)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:6px;padding:.35rem .7rem;font-size:1rem;cursor:pointer}
@media(max-width:820px){
  .nav-toggle{display:block}
  nav.main{display:none;flex-basis:100%;flex-direction:column;padding-bottom:.6rem}
  nav.main.open{display:flex}
  .site-header .bar{flex-wrap:wrap}
}

/* Hero — deep-violet gradient from the product's login visual language */
.hero{background:linear-gradient(135deg,var(--veil-deepest) 0%,var(--veil-deep) 55%,var(--brand-dark) 100%);color:#fff;padding:3.5rem 1.2rem 3rem}
.hero .inner{max-width:var(--maxw);margin:0 auto}
.hero .kicker{color:var(--accent-light);letter-spacing:.25em;text-transform:uppercase;font-size:.78rem;font-weight:700;margin:0 0 .8rem;font-family:var(--font)}
.hero h1{font-size:2.4rem;margin:.1rem 0 .8rem;line-height:1.22}
.hero p.lead{color:#b9a8ff;font-size:1.12rem;max-width:44em;margin:0 0 1.6rem}
.hero .accent{display:inline-block;width:130px;height:6px;background:var(--accent);border-radius:3px;margin-bottom:1.4rem}

/* Layout */
main{max-width:var(--maxw);margin:0 auto;padding:2.2rem 1.2rem 4rem}
main.wide{max-width:1200px}
h1{font-size:1.9rem;line-height:1.25;margin:0 0 .4rem}
h2{font-size:1.4rem;margin:2.2rem 0 .6rem;padding-top:.4rem}
h3{font-size:1.08rem;margin:1.5rem 0 .4rem}
.subtitle{color:var(--ink-soft);font-size:1.05rem;margin:0 0 1.6rem}
hr{border:none;border-top:1px solid var(--line);margin:2rem 0}
.pagegrid{display:grid;grid-template-columns:220px 1fr;gap:2.5rem;max-width:1200px;margin:0 auto;padding:2.2rem 1.2rem 4rem}
.toc{position:sticky;top:70px;align-self:start;font-size:.9rem;border-left:2px solid var(--line);padding-left:1rem}
.toc a{display:block;color:var(--ink-soft);padding:.18rem 0}
.toc a:hover{color:var(--brand)}
.toc .toc-h{font-weight:700;color:var(--ink);margin-bottom:.4rem}
@media(max-width:900px){.pagegrid{display:block}.toc{display:none}}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.1rem;margin:1.4rem 0}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem;background:var(--card);display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(26,17,64,.06)}
.card h3{margin:0 0 .4rem;font-size:1.05rem}
.card p{margin:0 0 .8rem;color:var(--ink-soft);font-size:.94rem;flex:1}
.card .go{font-weight:600;font-size:.92rem}
.card .tag{align-self:flex-start;background:var(--brand-soft);color:var(--brand);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:4px;padding:.15rem .5rem;margin-bottom:.6rem}

/* Callouts */
.callout{border-radius:var(--radius);padding:.9rem 1.1rem;margin:1.1rem 0;font-size:.95rem;border:1px solid var(--line);background:var(--bg-alt)}
.callout.warn{background:var(--warn-bg);border-color:var(--warn-line)}
.callout.warn strong:first-child{color:var(--warn-ink)}
.callout.tip{border-left:4px solid var(--accent)}
.callout.regime{border-left:4px solid var(--brand);background:var(--brand-soft)}
.callout.regime .lg,.callout.regime .oia{display:block;margin:.15rem 0}
.callout.regime .lbl{display:inline-block;min-width:96px;font-weight:700;color:var(--brand)}

/* Tables */
table{border-collapse:collapse;width:100%;margin:1.1rem 0;font-size:.93rem}
th,td{border:1px solid var(--line);padding:.5rem .7rem;text-align:left;vertical-align:top}
th{background:var(--brand-tint);color:var(--ink)}
tr:nth-child(even) td{background:var(--bg-alt)}
td.c,th.c{text-align:center}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll table{min-width:560px}

/* Figures */
figure{margin:1.4rem 0}
figure img,figure svg{max-width:100%;border:1px solid var(--line);border-radius:var(--radius)}
figcaption{font-size:.85rem;color:var(--ink-faint);margin-top:.4rem}

/* Steps */
.steps{counter-reset:step;list-style:none;padding:0;margin:1.2rem 0}
.steps li{counter-increment:step;position:relative;padding:0 0 1rem 3rem;margin:0}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:2rem;height:2rem;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.steps li::after{content:"";position:absolute;left:.95rem;top:2.2rem;bottom:0;width:2px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps li strong{display:block}

/* Video cards */
.video-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.video-card .poster{position:relative;display:block;background:var(--veil-deep)}
.video-card .poster img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;opacity:.95}
.video-card .poster .badge-soon{position:absolute;top:.7rem;right:.7rem;background:rgba(26,17,64,.88);color:var(--accent-light);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .6rem;border-radius:4px;border:1px solid var(--accent-light)}
.video-card .meta{padding:.9rem 1.1rem}
.video-card .meta h2,.video-card .meta h3{margin:0 0 .3rem;font-size:1rem;font-family:var(--font);padding-top:0}
.video-card .meta p{margin:0;font-size:.88rem;color:var(--ink-soft)}
details.transcript{margin:.6rem 1.1rem 1rem;font-size:.9rem}
details.transcript summary{cursor:pointer;color:var(--brand);font-weight:600}
details.transcript .body{margin-top:.6rem;color:var(--ink-soft);white-space:pre-line;max-height:340px;overflow:auto;border-left:3px solid var(--line);padding-left:.9rem}

/* Quiz */
.quiz{border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem;background:var(--bg-alt);margin:1.6rem 0}
.quiz h2{margin-top:0}
.quiz .q{margin:1.1rem 0;padding:1rem 1.1rem;background:var(--card);border:1px solid var(--line);border-radius:8px;min-width:0}
.quiz fieldset.q{margin-inline:0}
.quiz .q p.stem,.quiz .q legend.stem{font-weight:600;margin:0 0 .6rem;padding:0}
.quiz label{display:block;padding:.4rem .6rem;border-radius:6px;cursor:pointer}
.quiz label:hover{background:var(--brand-soft)}
.quiz .q.correct{border-color:var(--ok-line)}
.quiz .q.incorrect{border-color:var(--bad)}
.quiz .explain{display:none;margin-top:.6rem;font-size:.9rem;padding:.6rem .8rem;border-radius:6px}
.quiz .q.correct .explain{display:block;background:#e9f6ef;color:#1d6b47}
.quiz .q.incorrect .explain{display:block;background:#fbeae7;color:#933a2b}
.quiz .actions{margin-top:1.2rem;display:flex;align-items:center;gap:1rem}
.quiz button{background:var(--brand);color:#fff;font-weight:700;border:none;border-radius:var(--radius-btn);padding:.6rem 1.4rem;font-size:1rem;cursor:pointer}
.quiz button:hover{background:var(--brand-light)}
.quiz button:active{background:var(--brand-dark)}
.quiz .score{font-weight:700}
.quiz .score.pass{color:var(--ok)} .quiz .score.fail{color:var(--bad)}

/* Roles / breadcrumbs / misc */
.pill{display:inline-block;background:var(--brand-soft);color:var(--brand);border-radius:20px;padding:.15rem .7rem;font-size:.8rem;font-weight:600;margin:.1rem .2rem .1rem 0}
.breadcrumb{font-size:.85rem;color:var(--ink-faint);margin-bottom:1.2rem}
.breadcrumb a{color:var(--ink-faint)}
.next-prev{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;border-top:1px solid var(--line);padding-top:1.2rem;font-size:.95rem}
.check{color:var(--ok);font-weight:700}.cross{color:var(--ink-faint)}

/* Footer */
.site-footer{background:var(--veil-deep);color:#b3a9d6;font-size:.85rem;margin-top:3rem}
.site-footer .inner{max-width:1200px;margin:0 auto;padding:1.6rem 1.2rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}
.site-footer a{color:#d9d2f0}

/* Site search (header) */
.site-search{position:relative;margin-left:auto}
nav.main{margin-left:0}
.site-search input{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:8px;padding:.4rem .8rem;font-size:.9rem;width:170px;transition:width .15s}
.site-search input::placeholder{color:#cfc8e8}
.site-search input:focus{width:240px;outline:2px solid #fff;outline-offset:1px;background:rgba(255,255,255,.2)}
.search-results{position:absolute;right:0;top:calc(100% + .5rem);width:340px;max-height:420px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 28px rgba(26,17,64,.25);z-index:60}
.search-results a{display:block;padding:.6rem .9rem;border-bottom:1px solid var(--line);color:var(--ink)}
.search-results a:last-child{border-bottom:none}
.search-results a:hover,.search-results a.active{background:var(--brand-soft);text-decoration:none}
.search-results .sr-page{display:block;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand)}
.search-results .sr-head{display:block;font-size:.92rem}
.search-empty{padding:.8rem .9rem;font-size:.9rem;color:var(--ink-soft)}
@media(max-width:820px){.site-search{order:2;flex:1}.site-search input{width:100%}.site-search input:focus{width:100%}.search-results{left:0;right:0;width:auto}}

/* Checklists */
.checklist{list-style:none;padding:0;margin:1rem 0}
.checklist li{padding:.15rem 0}
.checklist label{display:flex;gap:.6rem;align-items:flex-start;padding:.45rem .6rem;border-radius:8px;cursor:pointer}
.checklist label:hover{background:var(--brand-soft)}
.checklist input{margin-top:.25rem;accent-color:var(--brand);width:1.05rem;height:1.05rem;flex-shrink:0}
.checklist li.done label{color:var(--ink-faint)}
.checklist li.done .ck-title{text-decoration:line-through;text-decoration-color:var(--accent)}
.checklist .ck-title{font-weight:600;display:block}
.checklist small{color:var(--ink-soft)}
.checklist-meta{display:flex;align-items:center;gap:1rem;font-size:.88rem;color:var(--ink-soft)}
.checklist-meta button{background:none;border:1px solid var(--line);border-radius:6px;padding:.2rem .7rem;cursor:pointer;color:var(--ink-soft);font-size:.82rem}
.checklist-meta button:hover{border-color:var(--brand);color:var(--brand)}

/* Progress badges (training paths) */
[data-progress-for]{display:inline-block;font-size:.78rem;font-weight:700;border-radius:20px;padding:.12rem .6rem;background:var(--bg-alt);color:var(--ink-faint)}
[data-progress-for][data-state="read"]{background:#fdf6ec;color:var(--warn-ink)}
[data-progress-for][data-state="done"]{background:#e9f6ef;color:var(--ok)}
button[data-mark-read]{background:#fff;border:1px solid var(--line);border-radius:var(--radius-btn);padding:.5rem 1.1rem;font-size:.92rem;cursor:pointer;color:var(--ink)}
button[data-mark-read]:hover{border-color:var(--brand);color:var(--brand)}
button[data-mark-read][aria-pressed="true"]{border-color:var(--ok-line);color:var(--ok)}

/* Role cards on start-here */
.role-jump{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.8rem;margin:1.2rem 0}
.role-jump a{border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem;background:#fff;font-weight:700;color:var(--ink);display:flex;flex-direction:column;gap:.15rem}
.role-jump a:hover{border-color:var(--brand);text-decoration:none;color:var(--brand)}
.role-jump a small{font-weight:400;color:var(--ink-soft);font-size:.8rem}

/* Glossary */
.glossary dt{font-weight:700;margin-top:1.1rem;scroll-margin-top:80px}
.glossary dd{margin:0.2rem 0 0;color:var(--ink-soft)}
.glossary-az{display:flex;flex-wrap:wrap;gap:.35rem;margin:1rem 0;position:sticky;top:64px;background:var(--bg);padding:.5rem 0;z-index:5}
.glossary-az a{border:1px solid var(--line);border-radius:6px;min-width:1.9rem;text-align:center;padding:.15rem .3rem;font-size:.85rem;font-weight:600}
.glossary-az a:hover{border-color:var(--brand);text-decoration:none}

/* Print — quick-reference cards & checklists print cleanly */
@media print{
  .site-header,.site-footer,.nav-toggle,.next-prev,.breadcrumb,.skip-link,.site-search,.checklist-meta button,button[data-mark-read],.hero .accent{display:none !important}
  body{background:#fff;font-size:12px;color:#000}
  main,.pagegrid{max-width:100%;padding:0}
  .print-card{break-inside:avoid;page-break-inside:avoid;border:1px solid #999;border-radius:8px;padding:12px;margin:0 0 14px}
  .print-card h2{margin-top:0;padding-top:0}
  a{color:#000;text-decoration:none}
  .checklist input{accent-color:#000}
  table{font-size:11px}
}
.print-hint{font-size:.88rem;color:var(--ink-soft)}

/* Regime picker */
.regime-picker{border:1px solid var(--line);border-radius:var(--radius);padding:.8rem 1.1rem;margin:1rem 0;background:var(--card)}
.regime-picker legend{font-weight:700;padding:0 .3rem}
.regime-picker label{margin-right:1.4rem;cursor:pointer;display:inline-block;padding:.2rem 0}
.regime-picker input{accent-color:var(--brand);margin-right:.3rem}
.regime-pill{display:block;margin-top:.5rem;background:none;border:none;color:var(--brand);font-size:.8rem;cursor:pointer;padding:0;font-weight:600;text-align:left}
.regime-pill:hover{text-decoration:underline}