/* ===========================================================================
   SuturaLab design system.
   Every brand value (colour, type, space, radius, elevation, motion) comes
   from src/tokens.js through /tokens.css. No literal colour, font stack or
   magic number is allowed in this file — the end-to-end suite enforces it.
   Written mobile-first: the base rules are the phone, and min-width queries
   add the larger layouts.
   ========================================================================= */

/* ---------- 1. reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* Every scroll that lands on something — an anchor, :target, a script's
   scrollIntoView, the browser restoring focus — stops --header-h + a step
   BELOW the sticky bar, so the header can never sit on top of the text it
   just scrolled to. One rule for the whole document, so it holds at every
   width without a media query. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + var(--s4))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--f-base);line-height:var(--lh-body);
  font-feature-settings:"kern","liga","cv05";-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit;max-width:100%}

/* ---------- 1b. containment: nothing may leave its box ----------
   Enforced, not hoped for: scripts/layout-gate.py lays every page state out at
   360/390/414/768/1024/1440 and fails `npm run check` if any box crosses its
   parent's padding box or the viewport. These rules are the reason it passes.
     · long words break instead of pushing the layout wider (German compounds,
       clinical terms, URLs, e-mail addresses);
     · flex and grid children may shrink — without min-inline-size:0 they take
       their min-content width and blow the row open;
     · fieldset carries min-inline-size:min-content in every UA stylesheet,
       which is what made the landing mini-test question escape its card. */
:where(p,li,dd,dt,td,th,figcaption,label,legend,summary,blockquote,h1,h2,h3,h4,h5,h6){
  overflow-wrap:break-word}
:where(p,li,dd,td,figcaption,.lede,.small,.tiny,.hint,.explain,.takeaway,.callout){
  hyphens:auto;-webkit-hyphens:auto}
/* …but never inside a name, a label or a heading: "Esen-cial" is worse than a
   second line, and an uppercase tracked eyebrow must never be hyphenated. */
:where(.eyebrow,.badge,.ladder-name,.ladder-price,.ladder-tag,.opt-key,.opt-state,.meter-val,
  .price,.pack-price,.bento-num,.menu-label,.crumbs,.brand,.lockup-word,h1,h2,h3,h4,h5,th,
  .tbl-stack td::before,.dash-stats span,.hero-stats span,.breaker-stats span,.tq-count,legend){
  hyphens:manual;-webkit-hyphens:manual}
:where(.opt,.badge,.kv,.crumbs,.pstep-body,.card-body,.bento-item,.pack,.panel,.alert,.q,.tq,.empty,.fpost,.fcat,.fthread,.dg-fig) *{
  overflow-wrap:anywhere}
code,.mono,.cert .code,a[href^="mailto:"],a[href^="http"]{overflow-wrap:anywhere}
fieldset,.grid>*,.g2>*,.g3>*,.g4>*,.split>*,.packs>*,.bento>*,.dash-grid>*,.learn>*,
.hero-grid>*,.foot-grid>*,.cluster>*,.between>*,.btn-row>*,.card-foot>*,.panel-head>*,
.kv>*,.score>*,.resume>*,.pstep>*,.fcat>*,.fthread>*,.alert>*,.meter-row>*,.ladder>*,
.q,.q>*,.tq,.tq>*,.hero-quiz,.hero-quiz>*{min-inline-size:0;min-width:0}
:target{scroll-margin-top:calc(var(--header-h) + var(--s5))}

a{color:var(--accent-700);text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--t-fast) var(--ease)}
a:hover{color:var(--accent-bright)}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs);box-shadow:var(--ring)
}
.on-dark :focus-visible,.site-footer :focus-visible,.band :focus-visible{outline-color:var(--accent-on-dark);box-shadow:var(--ring-dark)}

.skip{position:absolute;left:var(--s4);top:calc(var(--s4) * -6);z-index:100;background:var(--accent);color:var(--white);
  padding:var(--s3) var(--s4);border-radius:var(--r-sm);text-decoration:none;font-weight:var(--w-semi);transition:top var(--t-base) var(--ease)}
.skip:focus{top:var(--s4);color:var(--white)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 2. typography ---------- */
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:var(--w-display);line-height:var(--lh-tight);
  letter-spacing:var(--tr-tight);margin:0 0 var(--s4);text-wrap:balance}
h1{font-size:var(--f-3xl)}
h2{font-size:var(--f-2xl)}
h3{font-size:var(--f-xl);line-height:var(--lh-snug)}
h4{font-size:var(--f-lg);line-height:var(--lh-snug);letter-spacing:var(--tr-snug)}
h5{font-size:var(--f-base);line-height:var(--lh-snug)}
p{margin:0 0 var(--s4);text-wrap:pretty}
hr{border:0;border-top:1px solid var(--line);margin:var(--s6) 0}
strong,b{font-weight:var(--w-semi)}
code,.mono{font-family:var(--mono);font-size:.92em}

.eyebrow{font-size:var(--f-xs);letter-spacing:var(--tr-wide);text-transform:uppercase;
  font-weight:var(--w-bold);color:var(--accent-700);margin:0 0 var(--s3);display:flex;align-items:center;gap:var(--s2)}
.eyebrow::before{content:"";width:var(--s5);height:2px;background:var(--accent-bright);flex:0 0 auto;border-radius:var(--r-pill)}
.eyebrow.center{justify-content:center}
.lede{font-size:var(--f-md);color:var(--ink-2);max-width:var(--measure);line-height:var(--lh-loose);text-wrap:pretty}
.measure{max-width:var(--measure)}
.muted{color:var(--ink-3)}
.small{font-size:var(--f-sm)}
.tiny{font-size:var(--f-xs);line-height:1.5}
.center{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.stack>*+*{margin-top:var(--s4)}
.nowrap{white-space:nowrap}

/* ---------- 3. layout primitives ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}
.narrow{max-width:var(--maxw-narrow)}
/* one vertical rhythm for the whole site; `tight` is the half-step */
section{padding-block:var(--section-y)}
section.tight{padding-block:var(--section-y-tight)}
section+section{padding-top:0}
section.band,section.band-soft,section.band-accent,section.teaser-band,section.breaker,
section+section.band,section+section.band-soft,section+section.band-accent,
section+section.teaser-band,section+section.breaker{padding-top:var(--section-y)}
.section-head{max-width:64ch;margin-bottom:var(--s6)}
.section-head.center{margin-inline:auto}
.section-head .lede.center{margin-inline:auto}
.grid{display:grid;gap:var(--s4)}
.g2,.g3,.g4{grid-template-columns:1fr}
.split{display:grid;grid-template-columns:1fr;gap:var(--s6);align-items:center}
.cluster{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.between{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between}

/* ---------- 4. header ---------- */
/* Solid by default: a translucent bar without a working backdrop filter let
   the question text scroll through it and read as if it were on top of the
   card. The frosted treatment is restored only where the blur really works. */
.site-header{position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
@supports ((backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px))){
  .site-header{background:color-mix(in srgb,var(--paper) 88%,transparent);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
}
.hdr{display:flex;align-items:center;gap:var(--s3);min-height:var(--header-h)}
.brand,.lockup{display:inline-flex;align-items:center;gap:var(--s2);text-decoration:none;color:var(--ink)}
.brand{font-family:var(--display);font-size:1.22rem;font-weight:var(--w-bold);letter-spacing:var(--tr-tight)}
.brand .mark,.lockup .mark{width:26px;height:26px;flex:0 0 26px}
.lockup-word{font-family:var(--display);font-weight:var(--w-bold);letter-spacing:var(--tr-tight);color:var(--lockup-color,var(--ink))}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.nav{display:none}
.nav .btn{align-self:center}
.nav a{color:var(--ink-2);text-decoration:none;font-size:var(--f-sm);font-weight:var(--w-med);
  padding:var(--s2) var(--s2);border-radius:var(--r-sm);white-space:nowrap}
.nav a:hover{color:var(--accent-700);background:var(--teal-50)}
.nav a.on{color:var(--accent-700);font-weight:var(--w-semi)}

/* mobile drawer, JS-free */
.menu{position:relative}
.menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface)}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{content:"";width:18px;height:2px;background:var(--ink);box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink);border-radius:var(--r-pill)}
.menu[open]>summary{border-color:var(--accent);background:var(--teal-50)}
.menu[open]>summary::after{box-shadow:0 -6px 0 var(--accent),0 6px 0 var(--accent);background:var(--accent)}
.menu-panel{position:absolute;right:0;top:calc(100% + var(--s2));min-width:min(78vw,280px);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--e3);padding:var(--s3);z-index:60;
  display:flex;flex-direction:column;gap:var(--s1)}
.menu-panel a,.menu-panel button{display:flex;align-items:center;min-height:var(--tap);padding:var(--s2) var(--s3);
  border-radius:var(--r-sm);text-decoration:none;color:var(--ink-2);font-size:var(--f-sm);font-weight:var(--w-med)}
.menu-panel a:hover{background:var(--teal-50);color:var(--accent-700)}
.menu-panel a.on{background:var(--teal-100);color:var(--accent-800);font-weight:var(--w-semi)}
.menu-sep{height:1px;background:var(--line);margin:var(--s2) 0}
.menu-label{font-size:var(--f-xs);letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--ink-3);
  font-weight:var(--w-bold);padding:var(--s2) var(--s3) 0}

.langsel{position:relative}
.langsel>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  min-width:var(--tap);height:var(--tap);padding-inline:var(--s3);font-size:var(--f-sm);font-weight:var(--w-semi);
  white-space:nowrap;overflow:hidden;
  color:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface)}
.langsel>summary::-webkit-details-marker{display:none}
.langsel[open]>summary{border-color:var(--accent);color:var(--accent-700);background:var(--teal-50)}
.langmenu{position:absolute;right:0;top:calc(100% + var(--s2));background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--e3);min-width:180px;padding:var(--s2);z-index:60}
.langmenu a{display:flex;align-items:center;min-height:var(--tap);padding:var(--s2) var(--s3);border-radius:var(--r-sm);
  font-size:var(--f-sm);text-decoration:none;color:var(--ink-2)}
.langmenu a:hover{background:var(--teal-50);color:var(--accent-700)}
.langmenu a.on{background:var(--teal-100);color:var(--accent-800);font-weight:var(--w-semi)}

/* ---------- 5. buttons ---------- */
.btn{
  --btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line-2);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--tap);padding:var(--s3) var(--s5);
  font-family:var(--sans);font-size:var(--f-sm);font-weight:var(--w-semi);line-height:1.2;letter-spacing:var(--tr-snug);
  text-align:center;text-decoration:none;cursor:pointer;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);border-radius:var(--r-sm);
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn{max-width:100%;text-wrap:balance}
.btn:hover{color:var(--btn-fg)}
@media (hover:hover){.btn:hover{transform:translateY(-1px)}}
.btn:active{transform:translateY(1px) scale(.995)}
@media (prefers-reduced-motion:reduce){.btn:hover,.btn:active{transform:none}}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:var(--ring)}

.btn-primary{--btn-bg:var(--accent);--btn-fg:var(--white);--btn-bd:var(--accent);box-shadow:var(--e1)}
.btn-primary:hover{--btn-bg:var(--accent-700);--btn-bd:var(--accent-700);box-shadow:var(--e2)}
.btn-primary:active{--btn-bg:var(--accent-800);--btn-bd:var(--accent-800)}

.btn-cta{--btn-bg:var(--ember);--btn-fg:var(--white);--btn-bd:var(--ember);box-shadow:var(--e1)}
.btn-cta:hover{--btn-bg:var(--ember-600);--btn-bd:var(--ember-600);box-shadow:var(--e2)}
.btn-cta:active{--btn-bg:var(--ember-700);--btn-bd:var(--ember-700)}
.btn-cta:focus-visible{outline-color:var(--ember-600)}

.btn-secondary{--btn-bg:var(--surface);--btn-fg:var(--accent-700);--btn-bd:var(--teal-200)}
.btn-secondary:hover{--btn-bg:var(--teal-50);--btn-bd:var(--accent-bright)}
.btn-secondary:active{--btn-bg:var(--teal-100)}

.btn-ghost{--btn-bg:transparent;--btn-fg:var(--ink-2);--btn-bd:var(--line-2)}
.btn-ghost:hover{--btn-bg:var(--surface);--btn-fg:var(--accent-700);--btn-bd:var(--accent)}
.btn-ghost:active{--btn-bg:var(--surface-2)}

.btn-quiet{--btn-bg:transparent;--btn-fg:var(--ink-2);--btn-bd:transparent}
.btn-quiet:hover{--btn-bg:var(--surface-2);--btn-fg:var(--accent-700)}

.btn-danger{--btn-bg:var(--surface);--btn-fg:var(--danger);--btn-bd:var(--danger-line)}
.btn-danger:hover{--btn-bg:var(--danger);--btn-fg:var(--white);--btn-bd:var(--danger)}
.btn-danger:focus-visible{outline-color:var(--danger)}

.btn-light{--btn-bg:var(--white);--btn-fg:var(--accent-700);--btn-bd:var(--white)}
.btn-light:hover{--btn-bg:var(--teal-50);--btn-bd:var(--teal-50)}
.btn-light:focus-visible{outline-color:var(--accent-on-dark);box-shadow:var(--ring-dark)}

.btn-sm{min-height:var(--tap);padding:var(--s2) var(--s4);font-size:var(--f-xs)}
.btn-lg{min-height:52px;padding:var(--s4) var(--s6);font-size:var(--f-base)}
.btn-block{width:100%}
.btn-icon{padding-inline:var(--s3);min-width:var(--tap)}

.btn[disabled],.btn.is-disabled,.btn[aria-disabled=true]{
  opacity:.55;cursor:not-allowed;box-shadow:none;transform:none;pointer-events:none;filter:saturate(.55)}
.btn.is-loading{color:transparent!important;pointer-events:none;position:relative}
.btn.is-loading::after{content:"";position:absolute;width:1rem;height:1rem;border-radius:var(--r-pill);
  border:2px solid currentColor;border-top-color:transparent;color:var(--btn-fg);animation:spin 700ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* every button lives in a container: this is it */
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.btn-row.end{justify-content:flex-end}
.btn-row.center{justify-content:center}
.btn-row>form{display:contents}
.form-actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;
  margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line)}
.form-actions.plain{border-top:0;padding-top:0}
@media (max-width:479px){
  .btn-row>.btn,.form-actions>.btn,.btn-row>form>.btn{flex:1 1 100%}
  .btn-row.inline>.btn{flex:0 1 auto}
}

/* sticky mobile action bar */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;gap:var(--s3);align-items:center;
  padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:var(--e3)}
.sticky-cta .btn{flex:1}
.sticky-cta .sticky-price{font-family:var(--display);font-weight:var(--w-bold);font-size:var(--f-base);white-space:nowrap}
body.has-sticky{padding-bottom:calc(var(--s10))}
/* the consent bar owns the bottom of the screen until the visitor chooses */
body:has(.cookiebar) .sticky-cta{display:none}
@media (min-width:768px){.sticky-cta{display:none}body.has-sticky{padding-bottom:0}}

/* ---------- 6. forms ---------- */
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--e1);min-width:0}
@media (min-width:480px){.form{padding:var(--s5)}}
.form-plain{background:transparent;border:0;box-shadow:none;padding:0}
label{display:block;font-size:var(--f-sm);font-weight:var(--w-semi);margin-bottom:var(--s2);color:var(--ink-2)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=search],select,textarea{
  width:100%;min-height:var(--tap);padding:var(--s3) var(--s3);
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);
  font-size:var(--f-base);color:var(--ink);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 2px),calc(100% - 12px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:var(--s7)}
textarea{min-height:130px;line-height:var(--lh-body);font-family:var(--mono);font-size:var(--f-sm)}
input:hover,select:hover,textarea:hover{border-color:var(--teal-300)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-2);color:var(--ink-3);cursor:not-allowed}
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:1}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--danger)}
input[aria-invalid=true]:focus{box-shadow:0 0 0 var(--ring-w) var(--danger-line)}
.field{margin-bottom:var(--s4);min-width:0}
/* an error belongs under the control it is about, never floating at the top */
.field[data-invalid] input,.field[data-invalid] textarea,.field[data-invalid] select{border-color:var(--danger)}
/* iOS zooms — and therefore reflows — any input under 16px; keep them at 16 */
input,select,textarea{font-size:max(16px,var(--f-base))}
.field:last-of-type{margin-bottom:var(--s5)}
.hint{font-size:var(--f-xs);color:var(--ink-3);margin:var(--s2) 0 0}
.field-error{font-size:var(--f-xs);color:var(--danger);font-weight:var(--w-semi);margin:var(--s2) 0 0}
/* kept only for the admin forms; min-inline-size:0 is the fix that stops a
   fieldset refusing to shrink below its widest word on a narrow phone */
fieldset{border:0;margin:0;padding:0;min-inline-size:0}
legend{padding:0;display:block;width:100%;max-width:100%;float:none}

/* ---------- 7. alerts & toasts ---------- */
.alert{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);border-radius:var(--r-sm);
  font-size:var(--f-sm);margin-bottom:var(--s4);border:1px solid;border-left-width:3px}
.alert-error{background:var(--danger-50);border-color:var(--danger-line);border-left-color:var(--danger);color:var(--danger)}
.alert-ok{background:var(--ok-50);border-color:var(--ok-line);border-left-color:var(--ok);color:var(--ok)}
.alert-info{background:var(--teal-50);border-color:var(--info-line);border-left-color:var(--accent);color:var(--accent-800)}
.alert-warn{background:var(--warn-50);border-color:var(--warn-line);border-left-color:var(--warn);color:var(--warn)}
.alert a{color:inherit;font-weight:var(--w-semi)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--s5) + env(safe-area-inset-bottom));
  z-index:70;background:var(--ink);color:var(--on-dark);padding:var(--s3) var(--s5);border-radius:var(--r-pill);
  box-shadow:var(--e4);font-size:var(--f-sm);max-width:92vw}

/* ---------- 8. badges ---------- */
.badge{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--f-xs);font-weight:var(--w-bold);
  letter-spacing:.04em;text-transform:uppercase;padding:var(--s1) var(--s2);border-radius:var(--r-xs);border:1px solid;line-height:1.35}
.badge-free{background:var(--ok-50);border-color:var(--ok-line);color:var(--ok)}
.badge-paid{background:var(--warn-50);border-color:var(--warn-line);color:var(--warn)}
.badge-on{background:var(--teal-100);border-color:var(--info-line);color:var(--accent-800)}
.badge-neutral{background:var(--surface-2);border-color:var(--line);color:var(--ink-2)}
.badge-soon{background:var(--surface-2);border-color:var(--line-2);color:var(--ink-3)}
.badge-ember{background:var(--ember-50);border-color:var(--ember-line);color:var(--ember-700)}
.pill-row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-bottom:var(--s3)}

/* ---------- 9. cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.card:hover{border-color:var(--teal-300);box-shadow:var(--e2)}
.card-body{padding:var(--s4);display:flex;flex-direction:column;flex:1;gap:var(--s2);min-width:0}
@media (min-width:480px){.card-body{padding:var(--s5)}}
.card-body>*{margin-bottom:0}
.card-media{aspect-ratio:16/10;background:var(--surface-2);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover}
.card h3{font-size:var(--f-lg);margin:0}
.card .card-foot{margin-top:auto;padding-top:var(--s4);display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);flex-wrap:wrap;border-top:1px solid var(--line)}
.card-title-link{text-decoration:none;color:inherit}
.card-title-link:hover{color:var(--accent-700)}
.price{font-family:var(--display);font-weight:var(--w-bold);font-size:var(--f-lg)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);min-width:0}
@media (min-width:480px){.panel{padding:var(--s5)}}
/* On a phone a heading must own its whole line: side-by-side with a hint it
   was breaking into "Tu / itinerario". */
.panel-head{display:flex;flex-direction:column;align-items:stretch;gap:var(--s2);margin-bottom:var(--s4)}
.panel-head h2,.panel-head h3{margin:0;font-size:var(--f-lg);max-width:100%}
.panel-head h2{font-size:var(--f-xl)}
@media (min-width:640px){
  .panel-head{flex-direction:row;align-items:baseline;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
}

/* bento feature grid */
.bento{display:grid;grid-template-columns:1fr;gap:var(--s4)}
.bento-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);
  display:flex;flex-direction:column;gap:var(--s2);min-width:0;
  transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
@media (min-width:480px){.bento-item{padding:var(--s5)}}
@media (hover:hover){.bento-item:hover{transform:translateY(-2px);box-shadow:var(--e2)}}
.bento-item:hover{border-color:var(--teal-300)}
.bento-item h4{margin:0;font-size:var(--f-md)}
.bento-item p{margin:0;font-size:var(--f-sm);color:var(--ink-2)}
.bento-num{font-family:var(--display);font-size:var(--f-sm);font-weight:var(--w-bold);color:var(--accent-700);
  letter-spacing:var(--tr-wide);text-transform:uppercase}
.bento-wide{background:var(--teal-50);border-color:var(--info-line)}

/* ---------- 10. photography ----------
   Three treatments, all token-built, so every photograph reads as one set.
     .ph-scrim  natural frame + accent/ink gradient
     .ph-duo    duotone towards the brand teal
     .ph-cine   deep wash for white type over the image                     */
.ph{position:relative;overflow:hidden;background:var(--surface-2);isolation:isolate}
.ph>picture{display:block;width:100%;height:100%}
.ph img{width:100%;height:100%;object-fit:cover}
.ph::before,.ph::after{pointer-events:none}
.ph-scrim::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(158deg,color-mix(in srgb,var(--accent-bright) 18%,transparent),transparent 46%,color-mix(in srgb,var(--ink) 38%,transparent))}
.ph-duo img{filter:grayscale(1) contrast(1.06)}
.ph-duo::before{content:"";position:absolute;inset:0;z-index:1;background:var(--accent-700);mix-blend-mode:lighten}
.ph-duo::after{content:"";position:absolute;inset:0;z-index:2;background:var(--accent-on-dark-4);mix-blend-mode:multiply}
.ph-cine img{filter:grayscale(.88) contrast(1.05) brightness(.56)}
.ph-cine::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 62%,transparent),color-mix(in srgb,var(--accent-800) 78%,transparent))}
.r-3x2{aspect-ratio:3/2}
.r-16x5{aspect-ratio:16/5}
.r-16x10{aspect-ratio:16/10}
.figure{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);margin:0}
.figure img{width:100%;object-fit:cover}
.figure figcaption{font-size:var(--f-xs);color:var(--ink-3);padding:var(--s3) var(--s4);background:var(--surface)}
.photo-rule{height:96px;border-radius:0}

/* full-bleed photographic section break */
.breaker{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--on-dark);padding:0}
.breaker>.ph{position:absolute;inset:0;z-index:0;border-radius:0}
.breaker-in{position:relative;z-index:3;padding-block:var(--s8);max-width:54ch}
.breaker h2{color:var(--white);margin-bottom:var(--s3)}
.breaker p{color:var(--on-dark-2)}
.breaker .eyebrow{color:var(--accent-on-dark-2)}
.breaker .eyebrow::before{background:var(--accent-on-dark)}
.breaker-stats{display:flex;gap:var(--s6);flex-wrap:wrap;margin-top:var(--s5)}
.breaker-stats b{display:block;font-family:var(--display);font-size:var(--f-xl);line-height:1;color:var(--white)}
.breaker-stats span{font-size:var(--f-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-muted)}

/* ---------- 11. hero ---------- */
.hero{border-bottom:1px solid var(--line);background:
  radial-gradient(120% 90% at 100% 0%,var(--teal-50),transparent 60%),
  linear-gradient(180deg,var(--teal-50),var(--paper) 78%)}
/* phone: promise, then the question, then the proof — the question is the
   second thing a visitor sees and needs no scroll on a 360px screen.
   desktop: promise + proof in the left column, the question beside them. */
.hero-grid{display:grid;grid-template-columns:1fr;gap:var(--s5);align-items:start;padding-block:var(--section-y)}
.hero-copy{order:1}
.hero-quiz{order:2}
.hero-extra{order:3}
.hero-extra .hero-stats{margin-top:var(--s5)}
.hero h1{font-size:var(--f-3xl);margin-bottom:var(--s4);max-width:18ch}
.hero .lede{font-size:var(--f-md);max-width:52ch}
.hero-figure{border-radius:var(--r-lg);box-shadow:var(--e3);aspect-ratio:5/4;order:-1}
/* the landing asks its first question here: one tap from arriving to answering */
.hero-quiz{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--e3);padding:var(--s4);position:relative}
@media (min-width:480px){.hero-quiz{padding:var(--s5)}}
.hero-quiz .tq{box-shadow:none;border:0;padding:0;margin:0;background:transparent}
.hero-quiz .tq-result{box-shadow:none;border:0;padding:0;background:transparent}
.hero-quiz-head{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}
.hero-quiz-head .badge{flex:0 0 auto}
.hero-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);margin-top:var(--s6);
  padding-top:var(--s5);border-top:1px solid var(--line)}
.hero-stats b{display:block;font-family:var(--display);font-size:var(--f-xl);line-height:1;color:var(--ink)}
.hero-stats span{font-size:var(--f-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.hero-proof{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-top:var(--s4);font-size:var(--f-xs);color:var(--ink-3)}
.hero-proof span{display:inline-flex;align-items:center;gap:var(--s1)}
.hero-proof span::before{content:"";width:6px;height:6px;border-radius:var(--r-pill);background:var(--accent-bright)}

/* ---------- 12. bands ---------- */
.band{background:var(--ink);color:var(--on-dark)}
.band h2,.band h3{color:var(--white)}
.band p{color:var(--on-dark-2)}
.band a{color:var(--accent-on-dark)}
.band .eyebrow{color:var(--accent-on-dark-2)}
.band .eyebrow::before{background:var(--accent-on-dark)}
.band-accent{background:var(--accent-800);color:var(--accent-on-dark-4)}
.band-accent h2{color:var(--white)}
.band-accent p{color:var(--accent-on-dark-3)}
.band-soft{background:var(--surface-2);border-block:1px solid var(--line)}

/* ---------- 13. tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:var(--f-sm);background:var(--surface)}
.tbl caption{text-align:left;font-size:var(--f-xs);color:var(--ink-3);padding-bottom:var(--s2)}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:var(--s3);text-align:left;vertical-align:middle}
.tbl thead th{font-weight:var(--w-bold);color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;
  font-size:var(--f-xs);background:var(--surface-2);position:sticky;top:0;z-index:1}
.tbl tbody tr:hover td{background:var(--teal-50)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);-webkit-overflow-scrolling:touch}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* card-stacked tables on phones */
@media (max-width:767px){
  .tbl-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl-stack,.tbl-stack tbody,.tbl-stack tr,.tbl-stack td{display:block;width:100%}
  .tbl-stack tr{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3);margin-bottom:var(--s3);background:var(--surface)}
  .tbl-stack td{border:0;padding:var(--s2) 0;display:flex;justify-content:space-between;gap:var(--s4);align-items:baseline}
  .tbl-stack td::before{content:attr(data-label);font-size:var(--f-xs);text-transform:uppercase;letter-spacing:.06em;
    color:var(--ink-3);font-weight:var(--w-bold);flex:0 0 auto}
  .tbl-stack td:empty{display:none}
  .tbl-wrap.stacked{border:0;border-radius:0;overflow:visible}
}

/* ---------- 14. progress, skeleton, empty ---------- */
.bar{height:8px;background:var(--surface-3);border-radius:var(--r-pill);overflow:hidden}
.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-bright));
  border-radius:var(--r-pill);transition:width var(--t-slow) var(--ease)}
.bar.gold span{background:var(--gold)}
.meter-row{display:flex;align-items:center;gap:var(--s3)}
.meter-row .bar{flex:1}
.meter-val{font-size:var(--f-xs);font-weight:var(--w-bold);color:var(--ink-2);font-variant-numeric:tabular-nums}
.skeleton{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));
  background-size:200% 100%;animation:sk 1.4s var(--ease) infinite;border-radius:var(--r-sm);min-height:1rem}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.empty{border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:var(--s5) var(--s4);text-align:center;background:var(--surface)}
@media (min-width:480px){.empty{padding:var(--s6) var(--s5)}}
.empty .mark{margin:0 auto var(--s3);opacity:.85}
.empty h4{margin:0 0 var(--s2)}
.empty p{color:var(--ink-3);margin:0 auto var(--s4);max-width:44ch;font-size:var(--f-sm)}

/* ---------- 15. tabs, accordion, modal ---------- */
.segmented{display:inline-flex;padding:var(--s1);background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-pill);gap:var(--s1);max-width:100%;overflow-x:auto}
.segmented a,.segmented button{display:inline-flex;align-items:center;justify-content:center;min-height:36px;
  padding:var(--s2) var(--s4);border-radius:var(--r-pill);border:0;background:transparent;
  font-size:var(--f-xs);font-weight:var(--w-semi);color:var(--ink-2);text-decoration:none;white-space:nowrap;cursor:pointer}
.segmented a:hover,.segmented button:hover{color:var(--accent-700)}
.segmented a.on,.segmented button.on{background:var(--surface);color:var(--accent-800);box-shadow:var(--e1)}
details.acc{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);margin-bottom:var(--s3);overflow:hidden}
details.acc>summary{cursor:pointer;padding:var(--s4);font-weight:var(--w-semi);font-size:var(--f-sm);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:var(--tap);list-style:none}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::after{content:"";flex:0 0 10px;width:10px;height:10px;border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);transform:rotate(45deg) translateY(-2px);transition:transform var(--t-base) var(--ease)}
details.acc[open]>summary::after{transform:rotate(225deg) translateY(-2px)}
details.acc[open]>summary{border-bottom:1px solid var(--line);background:var(--teal-50)}
details.acc>div{padding:var(--s4)}
details.acc>div>p:last-child{margin-bottom:0}
.modal{border:1px solid var(--line);border-radius:var(--r-lg);padding:0;max-width:min(94vw,520px);box-shadow:var(--e4);background:var(--surface)}
.modal::backdrop{background:color-mix(in srgb,var(--ink) 55%,transparent)}
.modal-head{padding:var(--s5) var(--s5) 0}
.modal-body{padding:var(--s4) var(--s5)}
.modal-foot{padding:var(--s4) var(--s5) var(--s5);display:flex;gap:var(--s3);justify-content:flex-end;flex-wrap:wrap}

/* ---------- 16. lists ---------- */
.ticks{list-style:none;padding-left:0;margin:0 0 var(--s4)}
.ticks li{position:relative;padding-left:var(--s5);margin-bottom:var(--s2);color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:2px;top:.5em;width:.5rem;height:.28rem;
  border-left:2px solid var(--accent-bright);border-bottom:2px solid var(--accent-bright);transform:rotate(-45deg)}
.kv{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--line);font-size:var(--f-sm)}
.kv:last-child{border-bottom:0}
.crumbs{font-size:var(--f-xs);color:var(--ink-3);margin-bottom:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--accent-700);text-decoration:underline}

/* ---------- 16b. the three-step level ladder ----------
   Esencial (free) -> Intermedio -> Avanzado. The point of the component is
   that the progression is legible in one glance: numbered steps, a connecting
   rail, the price under each name and an explicit "you are here". */
.ladder{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);grid-template-columns:1fr;
  counter-reset:rung}
.ladder-step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);
  transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.ladder-step:hover{border-color:var(--teal-300);box-shadow:var(--e2)}
.ladder-n{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink-3);
  font-family:var(--display);font-weight:var(--w-bold);font-size:var(--f-sm);line-height:1}
.ladder-body{min-width:0;display:flex;flex-direction:column;gap:var(--s1)}
.ladder-name{font-family:var(--display);font-weight:var(--w-bold);font-size:var(--f-md);color:var(--ink);
  text-decoration:none;display:block;text-wrap:balance}
.ladder-name:hover{color:var(--accent-700)}
.ladder-price{font-family:var(--display);font-weight:var(--w-bold);font-size:var(--f-sm);color:var(--accent-700)}
.ladder-note{font-size:var(--f-xs);color:var(--ink-3);line-height:1.5}
.ladder-step .bar{margin-top:var(--s2)}
.ladder-done .ladder-n{background:var(--ok-50);border-color:var(--ok-line);color:var(--ok)}
.ladder-here{border-color:var(--accent);box-shadow:var(--e2)}
.ladder-here .ladder-n{background:var(--accent);border-color:var(--accent);color:var(--white)}
.ladder-locked{background:var(--surface-2)}
.ladder-locked .ladder-name{color:var(--ink-2)}
.ladder-tag{display:inline-block;align-self:flex-start;font-size:var(--f-xs);font-weight:var(--w-bold);
  text-transform:uppercase;letter-spacing:.06em;padding:var(--s1) var(--s2);border-radius:var(--r-pill);
  background:var(--teal-100);color:var(--accent-800)}
.ladder-arrow{display:none}
@media (min-width:768px){
  .ladder{grid-template-columns:repeat(3,1fr);gap:var(--s4)}
  .ladder-step{grid-template-columns:1fr}
  .ladder-n{margin-bottom:var(--s2)}
  .ladder-arrow{display:block;position:absolute;right:calc(var(--s4) * -1 - 1px);top:calc(50% - 7px);
    width:14px;height:14px;border-top:2px solid var(--line-2);border-right:2px solid var(--line-2);
    transform:rotate(45deg);z-index:2}
  .ladder-step:last-child .ladder-arrow{display:none}
}

/* ---------- 17. packs & comparison ---------- */
.packs{display:grid;grid-template-columns:1fr;gap:var(--s4);align-items:stretch}
.pack{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);overflow:hidden;min-width:0}
@media (min-width:480px){.pack{padding:var(--s5)}}
.pack-media{margin:calc(-1 * var(--s5)) calc(-1 * var(--s5)) var(--s4);aspect-ratio:16/5;border-bottom:1px solid var(--line)}
.pack-featured{border-color:var(--accent);box-shadow:var(--e3);border-width:2px}
.pack-flag{position:absolute;z-index:4;top:var(--s3);right:var(--s3);background:var(--accent);color:var(--white);
  font-size:var(--f-xs);font-weight:var(--w-bold);letter-spacing:.06em;text-transform:uppercase;
  padding:var(--s1) var(--s3);border-radius:var(--r-pill);margin:0}
.pack h3{font-size:var(--f-xl);margin:0}
.pack-price{font-family:var(--display);font-weight:var(--w-bold);font-size:var(--f-2xl);line-height:1;margin:var(--s3) 0 0;color:var(--ink)}
.pack-price small{font-family:var(--sans);font-size:var(--f-xs);font-weight:var(--w-med);color:var(--ink-3);margin-left:var(--s2)}
.pack-cta{margin-top:auto;padding-top:var(--s5);display:flex;flex-direction:column;gap:var(--s2);align-items:stretch}
.pack-cta .btn{width:100%}
.pack-cta .tiny{text-align:center}
.compare{margin-top:var(--s6)}
.cmp th[scope=row]{font-weight:var(--w-semi);color:var(--ink-2);text-transform:none;letter-spacing:0;
  font-size:var(--f-sm);background:var(--surface);position:sticky;left:0;z-index:1;
  box-shadow:1px 0 0 var(--line)}
.cmp td{text-align:center;font-variant-numeric:tabular-nums}
.cmp thead th{text-align:center}
.cmp thead th:first-child{text-align:left}
.cmp .on-col{background:var(--teal-50)}

/* ---------- 18. tests: landing mini-test and the real ones ----------
   One component, three surfaces (landing hero, landing band, course test).
   Built as div[role=group] + p.q-prompt, never fieldset/legend: a fieldset
   carries min-inline-size:min-content in the UA stylesheet and a legend is
   laid out against the fieldset's border box, which is exactly how a long
   question ended up hanging outside its card on a 360px phone. */
.teaser-band{background:linear-gradient(180deg,var(--teal-50),var(--paper));border-block:1px solid var(--line)}
.tq{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5) var(--s4);box-shadow:var(--e2);margin-bottom:var(--s4);
  container-type:inline-size;overflow:visible}
.q,.tq{scroll-margin-top:calc(var(--header-h) + var(--s4))}
/* A teaching image is a diagram or a numbered photo slot and nothing else,
   but a slot file can still fail to load: cap it and clip it so a broken
   image can never print its alt text across the card. */
.q img,.tq img,.tq-fig img,.q-fig img{max-width:100%;height:auto;overflow:hidden}
@media (min-width:480px){.tq{padding:var(--s5)}}
.tq[hidden],.q[hidden]{display:none}
/* The statement. It is a heading element, so the `:where(h1…h6)` reset above
   would switch hyphenation off again: these declarations win on specificity
   and are what keep a long clinical sentence inside the card on a 360px
   phone. scroll-margin-top repeats the document's scroll-padding so a
   question that is scrolled to directly clears the sticky header too. */
.q-prompt{font-family:var(--display);font-weight:var(--w-display);font-size:var(--f-lg);
  line-height:var(--lh-snug);margin:0 0 var(--s4);color:var(--ink);
  text-wrap:pretty;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto;
  min-inline-size:0;max-width:var(--measure);
  scroll-margin-top:calc(var(--header-h) + var(--s4))}
.q-prompt .q-n{display:inline-flex;align-items:center;justify-content:center;min-width:1.7em;height:1.7em;
  margin-right:var(--s2);border-radius:var(--r-pill);background:var(--teal-100);color:var(--accent-800);
  font-family:var(--sans);font-size:.6em;font-weight:var(--w-bold);vertical-align:.2em}
.tq-count{margin:0 0 var(--s3);letter-spacing:.1em;text-transform:uppercase;font-weight:var(--w-bold);
  color:var(--accent-700);display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.tq-fig{margin:0 0 var(--s4)}
.tq-img{border-radius:var(--r-md);width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.tq-explain[hidden],.tq-nav[hidden],.tq-result[hidden],.tq-submit[hidden]{display:none}
.tq-verdict{margin:0 0 var(--s1);font-weight:var(--w-bold);display:flex;align-items:center;gap:var(--s2)}
.tq-verdict::before{content:"\2713";flex:0 0 auto;font-weight:var(--w-bold);font-size:1.05em;line-height:1}
.tq-ok .tq-verdict{color:var(--ok)}
.tq-no .tq-verdict{color:var(--danger)}
.tq-no .tq-verdict::before{content:"\2715"}
.tq-nav{margin-top:var(--s4);display:flex;justify-content:stretch}
.tq-nav .btn{width:100%}
.tq-result{background:var(--surface);border:1px solid var(--info-line);border-radius:var(--r-lg);
  padding:var(--s5) var(--s4);box-shadow:var(--e2)}
@media (min-width:480px){.tq-result{padding:var(--s5)}}
.tq-result .score{margin-bottom:var(--s4)}
.tq-steps{display:flex;gap:var(--s2);margin-bottom:var(--s4);align-items:center}
.tq-steps.center{justify-content:center}
.tq-dot{flex:1 1 0;min-width:18px;max-width:52px;height:5px;border-radius:var(--r-pill);background:var(--teal-200);
  transition:background var(--t-base) var(--ease)}
.tq-dot.on{background:var(--accent)}

/* options — shared by the mini-test and the course tests.
   State is never colour alone: every answered option gains a key letter, an
   icon drawn from a mask, and a written word. */
.tq-opts,.q-opts{display:flex;flex-direction:column;gap:var(--s2)}
.opt{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:flex-start;
  padding:var(--s3);min-height:var(--tap);
  border:1px solid var(--line-2);border-radius:var(--r-md);cursor:pointer;
  font-size:var(--f-sm);line-height:1.5;font-weight:var(--w-med);color:var(--ink-2);background:var(--surface);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
@media (min-width:480px){.opt{padding:var(--s3) var(--s4)}}
.opt>input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.opt-key{flex:0 0 1.75rem;display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-3);
  font-family:var(--display);font-size:var(--f-xs);font-weight:var(--w-bold);line-height:1}
.opt-text{flex:1 1 0;min-width:0;overflow-wrap:anywhere;padding-top:.15rem}
/* On a phone the verdict goes on its own line under the answer: squeezing
   "Ihre Antwort" into the same row left the option text four words wide. */
.opt-state{flex:1 0 100%;display:none;align-items:center;gap:var(--s1);
  margin-left:calc(1.75rem + var(--s3));
  font-size:var(--f-xs);font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:.05em}
@media (min-width:520px){
  .opt-state{flex:0 0 auto;margin-left:auto;padding-top:.32rem;align-self:start}
}
.opt-state::before{content:"\2713";font-size:.9em;line-height:1}
@media (hover:hover){.opt:hover{border-color:var(--accent-bright);background:var(--teal-50);transform:translateY(-1px)}}
.opt:active{transform:translateY(0)}
.opt:has(input:focus-visible){box-shadow:var(--ring);border-color:var(--accent)}
.opt:has(input:checked){border-color:var(--accent);background:var(--teal-50);box-shadow:inset 0 0 0 1px var(--accent)}
.opt:has(input:checked) .opt-key{background:var(--accent);border-color:var(--accent);color:var(--white)}
.opt.correct{border-color:var(--ok);background:var(--ok-50);color:var(--ok);font-weight:var(--w-semi);
  box-shadow:inset 0 0 0 1px var(--ok)}
.opt.correct .opt-key{background:var(--ok);border-color:var(--ok);color:var(--white)}
.opt.correct .opt-state{display:flex;color:var(--ok)}
.opt.wrong{border-color:var(--danger);background:var(--danger-50);color:var(--danger);
  box-shadow:inset 0 0 0 1px var(--danger)}
.opt.wrong .opt-key{background:var(--danger);border-color:var(--danger);color:var(--white)}
.opt.wrong .opt-state{display:flex;color:var(--danger)}
.opt.wrong .opt-state::before{content:"\2715"}
.opt.is-dim{opacity:.6}
.opt.is-locked{cursor:default}
@media (hover:hover){.opt.is-locked:hover{transform:none;border-color:inherit;background:inherit}}
.explain{margin-top:var(--s3);padding:var(--s4);background:var(--surface-2);border-left:3px solid var(--accent-bright);
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:var(--f-sm);color:var(--ink-2)}
.explain p:last-child{margin-bottom:0}
.takeaway{margin-top:var(--s3);padding:var(--s4);background:var(--teal-50);border:1px solid var(--info-line);
  border-radius:var(--r-sm);font-size:var(--f-sm);color:var(--accent-800)}
.takeaway strong{display:block;font-size:var(--f-xs);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--s1)}

/* ---------- 18b. authored diagrams ----------
   Never presented as a photograph: the caption carries an explicit
   "Diagrama" tag and the SVG is role="img" with a written description. */
.dg-fig{margin:0 0 var(--s5);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);overflow:hidden}
.dg-fig .dg{display:block;width:100%;height:auto;background:var(--surface)}
.dg-fig figcaption{font-size:var(--f-xs);color:var(--ink-3);line-height:1.6;
  padding:var(--s3) var(--s4);border-top:1px solid var(--line);background:var(--surface-2);
  display:flex;flex-wrap:wrap;gap:var(--s2);align-items:baseline}
.dg-tag{flex:0 0 auto;font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:.08em;
  color:var(--accent-700);background:var(--teal-50);border:1px solid var(--info-line);
  border-radius:var(--r-xs);padding:0 var(--s2)}
/* a photograph slot that is still waiting for the real shot */
.photo-slot{border:1px dashed var(--line-2);border-radius:var(--r-lg);background:var(--surface-2);
  padding:var(--s5) var(--s4);text-align:center;color:var(--ink-3);font-size:var(--f-sm)}
.photo-slot code{display:inline-block;margin-top:var(--s2);font-size:var(--f-xs);color:var(--ink-2)}

/* ---------- 19. learning ---------- */
.learn{display:grid;grid-template-columns:1fr;gap:var(--s5);padding:var(--s5) 0 var(--s8)}
.toc{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:var(--s4);order:2}
.toc h4{font-size:var(--f-xs);font-family:var(--sans);text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-3);margin-bottom:var(--s3);font-weight:var(--w-bold)}
.toc ol{list-style:none;margin:0 0 var(--s4);padding:0}
.toc .mod{font-size:var(--f-xs);font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-3);margin:var(--s4) 0 var(--s2)}
.toc li a{display:flex;gap:var(--s2);align-items:baseline;padding:var(--s2) var(--s2);min-height:36px;
  border-radius:var(--r-xs);font-size:var(--f-sm);text-decoration:none;color:var(--ink-2)}
.toc li a:hover{background:var(--teal-50);color:var(--accent-700)}
.toc li a.on{background:var(--teal-100);color:var(--accent-800);font-weight:var(--w-semi)}
.toc .tick{color:var(--ok);font-weight:var(--w-bold);flex:0 0 auto}
.toc .quiz a{color:var(--accent-700)}

.lesson{max-width:74ch;min-width:0}
.lesson p,.lesson li{max-width:var(--measure)}
.lesson h1{font-size:var(--f-2xl);margin-bottom:var(--s4)}
.lesson h2{font-size:var(--f-xl)}
.lesson h3{font-size:var(--f-lg);margin-top:var(--s6)}
.lesson h4{font-size:var(--f-md);margin-top:var(--s5);margin-bottom:var(--s2);font-family:var(--sans);font-weight:var(--w-bold)}
.lesson p,.lesson li{color:var(--ink-2)}
.lesson ul,.lesson ol{padding-left:var(--s5);margin:0 0 var(--s4)}
.lesson li{margin-bottom:var(--s2)}
.lesson table{width:100%;border-collapse:collapse;margin:0 0 var(--s5);font-size:var(--f-sm);
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (min-width:768px){.lesson table{display:table;table-layout:fixed}}
.lesson th,.lesson td{border:1px solid var(--line);padding:var(--s2) var(--s3);text-align:left;vertical-align:top}
.lesson th{background:var(--surface-2);font-weight:var(--w-semi);color:var(--ink)}
.lesson blockquote{margin:0 0 var(--s5);padding:var(--s4) var(--s5);background:var(--teal-50);
  border-left:3px solid var(--accent-bright);border-radius:0 var(--r-sm) var(--r-sm) 0}
.lesson blockquote p:last-child{margin:0}
.callout{border:1px solid var(--warn-line);background:var(--warn-50);border-radius:var(--r-md);
  padding:var(--s4);margin:0 0 var(--s5);font-size:var(--f-sm)}
.callout strong{color:var(--warn)}
.callout p:last-child{margin-bottom:0}
.video{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:var(--ink);margin-bottom:var(--s5)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--s2);
  height:100%;color:var(--ink-3);border:1px dashed var(--line-2);border-radius:var(--r-md);background:var(--surface-2);text-align:center;padding:var(--s4)}
.steps{display:grid;grid-template-columns:1fr;gap:var(--s4);margin:0 0 var(--s5)}
.steps figure{margin:0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.steps img{aspect-ratio:4/3;object-fit:cover;width:100%}
.steps figcaption{font-size:var(--f-xs);padding:var(--s3);color:var(--ink-2)}
.lesson-nav{display:flex;justify-content:space-between;gap:var(--s3);margin-top:var(--s6);
  padding-top:var(--s5);border-top:1px solid var(--line);flex-wrap:wrap}
.lesson-nav>div{display:flex;gap:var(--s3);flex-wrap:wrap;flex:1}
.lesson-nav>div:last-child{justify-content:flex-end}

.q{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:var(--s4);margin-bottom:var(--s5);min-width:0}
@media (min-width:480px){.q{padding:var(--s5)}}
.q-img{border-radius:var(--r-md);margin-bottom:var(--s4);width:100%;height:auto;max-height:280px;object-fit:cover}
.score{display:flex;align-items:center;gap:var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4);background:var(--surface);margin-bottom:var(--s5);flex-wrap:wrap}
@media (min-width:480px){.score{padding:var(--s5)}}
.score>div:last-child{min-width:0;flex:1 1 14ch}
.score .n{font-family:var(--display);font-weight:var(--w-bold);font-size:var(--f-2xl);line-height:1}
.score.pass{border-color:var(--ok-line);background:var(--ok-50)}
.score.pass .n{color:var(--ok)}
.score.fail{border-color:var(--danger-line);background:var(--danger-50)}
.score.fail .n{color:var(--danger)}

/* ---------- 20. student panel ---------- */
.dash-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s5)}
.dash-stats div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4)}
.dash-stats b{display:block;font-family:var(--display);font-weight:var(--w-bold);font-size:var(--f-xl);line-height:1.1}
.dash-stats span{font-size:var(--f-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.dash-grid{display:grid;grid-template-columns:1fr;gap:var(--s4)}
.resume{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;justify-content:space-between;
  background:linear-gradient(120deg,var(--teal-50),var(--surface) 70%);border:1px solid var(--info-line);
  border-radius:var(--r-lg);padding:var(--s5)}
.resume>div:first-child{flex:1 1 16rem;min-width:0}
.resume .btn{flex:0 0 auto}
.path{list-style:none;padding:0;margin:var(--s4) 0 0}
.pstep{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.pstep:last-child{border-bottom:0}
.pstep-n{flex:0 0 1.75rem;height:1.75rem;border-radius:var(--r-pill);display:grid;place-items:center;
  font-size:var(--f-xs);font-weight:var(--w-bold);background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line-2)}
.pstep-body{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.pstep-body a{text-decoration:none;font-weight:var(--w-semi);font-size:var(--f-sm)}
.pstep-done .pstep-n{background:var(--ok-50);border-color:var(--ok-line);color:var(--ok)}
.pstep-doing .pstep-n{background:var(--teal-100);border-color:var(--info-line);color:var(--accent-800)}
.pstep-locked .pstep-n{background:var(--surface-2);border-color:var(--line-2);color:var(--ink-3)}

/* ---------- 21. certificate ---------- */
.cert-page{background:var(--surface-2);padding:var(--s6) var(--s4)}
.cert{max-width:940px;margin:0 auto;background:var(--white);border:1px solid var(--line-2);
  padding:clamp(1.5rem,5vw,4rem);position:relative;box-shadow:var(--e3)}
.cert::before{content:"";position:absolute;inset:12px;border:1px solid var(--teal-200);pointer-events:none}
.cert-inner{position:relative;text-align:center}
.cert .kicker{font-size:var(--f-xs);letter-spacing:.3em;text-transform:uppercase;color:var(--accent-700);margin-bottom:var(--s5)}
.cert h1{font-size:clamp(1.6rem,4vw,2.6rem);margin:var(--s4) 0 var(--s2)}
.cert .name{font-family:var(--display);font-weight:var(--w-bold);font-size:clamp(1.35rem,4.4vw,2.8rem);
  border-bottom:1px solid var(--line-2);display:inline-block;padding:0 var(--s4) var(--s2);margin:var(--s4) 0;
  max-width:100%;overflow-wrap:anywhere;text-wrap:balance}
.cert .meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s4);
  margin-top:var(--s6);font-size:var(--f-sm);color:var(--ink-2)}
.cert .meta b{display:block;font-family:var(--sans);font-size:var(--f-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s1);font-weight:var(--w-bold)}
.cert .code{font-family:var(--mono);letter-spacing:.06em}
.cert .cert-disclaimer{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);
  font-size:var(--f-xs);color:var(--ink-3);line-height:1.7;text-align:left}
.cert-actions{max-width:940px;margin:var(--s4) auto 0;display:flex;gap:var(--s3);flex-wrap:wrap}

/* ---------- 22. charts (admin) ---------- */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{font-family:var(--sans);font-size:10px;fill:var(--ink-3)}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart .grid-line{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3}
.chart .bar-1{fill:var(--accent)}
.chart .bar-2{fill:var(--teal-400)}
.chart .bar-3{fill:var(--teal-300)}
.chart .bar-4{fill:var(--teal-200)}
.chart .bar-5{fill:var(--ember)}
.chart .line-path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .area-path{fill:var(--teal-100);opacity:.7}
.chart .dot{fill:var(--accent)}
.chart-legend{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s3);font-size:var(--f-xs);color:var(--ink-2)}
.chart-legend span{display:inline-flex;align-items:center;gap:var(--s1)}
.chart-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}

/* ---------- 23. forum ---------- */
.fcats{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s5)}
.fcat,.fthread{display:flex;gap:var(--s3);justify-content:space-between;align-items:flex-start;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4)}
.fcat:hover,.fthread:hover{border-color:var(--teal-300)}
.fcat-locked{opacity:.68}
.fpost{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);margin-bottom:var(--s4);min-width:0}
@media (min-width:480px){.fpost{padding:var(--s5)}}
.fpost header{border-bottom:1px solid var(--line);padding-bottom:var(--s2);margin-bottom:var(--s3);
  display:flex;gap:var(--s3);flex-wrap:wrap;align-items:baseline}
.fpost-body p{color:var(--ink-2);margin:0 0 var(--s3)}
.fpost-body p:last-child{margin-bottom:0}

/* ---------- 24. study assistant ---------- */
.aip{border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-lg);padding:var(--s4);margin:var(--s6) 0}
.aip-compact{margin:var(--s4) 0 0;padding:var(--s3) var(--s4)}
.aip-head{display:flex;gap:var(--s3);align-items:baseline;flex-wrap:wrap;margin-bottom:var(--s3)}
.aip-log{display:flex;flex-direction:column;gap:var(--s3)}
.aip-log:empty{display:none}
.aip-msg{font-size:var(--f-sm);color:var(--ink-2);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:var(--s3);white-space:pre-wrap}
.aip-user{background:transparent;border-style:dashed}
.aip-actions{margin:var(--s3) 0}
.aip-row{display:flex;gap:var(--s2);flex-direction:column}
.aip-note{margin:var(--s3) 0 0}
.aip-soon{display:flex;gap:var(--s3);align-items:flex-start;background:var(--surface);border:1px dashed var(--line-2);
  border-radius:var(--r-md);padding:var(--s4);font-size:var(--f-sm);color:var(--ink-2)}
.aip-soon p{margin:0}

/* ---------- 25. footer & cookie bar ---------- */
.site-footer{background:var(--ink);color:var(--on-dark-3);padding:var(--s7) 0 var(--s5);
  font-size:var(--f-sm);margin-top:var(--s8);padding-bottom:calc(var(--s5) + env(safe-area-inset-bottom))}
.site-footer a{color:var(--on-dark-2);text-decoration:none}
.site-footer a:hover{color:var(--white);text-decoration:underline}
.site-footer .lockup-word{color:var(--white)}
.site-footer h5{color:var(--white);font-family:var(--sans);font-size:var(--f-xs);font-weight:var(--w-bold);
  letter-spacing:.12em;text-transform:uppercase;margin:0 0 var(--s3);line-height:1.4}
.foot-grid{display:grid;grid-template-columns:1fr;gap:var(--s6)}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:var(--s2)}
.foot-grid li a{display:inline-flex;align-items:center;min-height:32px}
.disclaimer{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--dark-line);
  font-size:var(--f-xs);color:var(--on-dark-faint);line-height:1.7}
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:65;background:var(--ink);color:var(--on-dark);
  padding:var(--s4) 0 calc(var(--s4) + env(safe-area-inset-bottom));box-shadow:var(--e4)}
.cookiebar a{color:var(--accent-on-dark)}
.cookiebar-in{display:flex;gap:var(--s4);align-items:flex-start;justify-content:space-between;flex-direction:column}
.cookiebar .btn-ghost{--btn-fg:var(--white);--btn-bd:var(--dark-line-2)}
.cookiebar .btn-ghost:hover{--btn-bg:var(--dark-line);--btn-fg:var(--white);--btn-bd:var(--accent-on-dark)}
.cookiebar .btn-row{width:100%}
.cookiebar .btn-row .btn{flex:1}

/* ---------- 26. breakpoints ---------- */
@media (min-width:480px){
  .dash-stats{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:640px){
  .wrap{padding-inline:var(--s5);padding-inline:max(var(--s5),env(safe-area-inset-left)) max(var(--s5),env(safe-area-inset-right))}
  .g2{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-columns:repeat(2,1fr)}
  .packs{grid-template-columns:1fr}
  .cookiebar-in{flex-direction:row;align-items:center}
  .cookiebar .btn-row{width:auto}
  .cookiebar .btn-row .btn{flex:0 0 auto}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
  .hero-stats{grid-template-columns:repeat(4,1fr)}
  .tq-nav .btn{width:auto}
}
@media (min-width:768px){
  section{padding-block:var(--s8)}
  .nav{display:flex;align-items:center;gap:var(--s2)}
  .menu{display:none}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .packs{grid-template-columns:repeat(3,1fr)}
  .dash-stats{grid-template-columns:repeat(4,1fr)}
  .dash-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .grid{gap:var(--s5)}
  .hero-grid{padding-block:var(--s8)}
}
@media (min-width:1024px){
  /* row 1 is the height of the copy, row 2 absorbs the rest, so the left
     column never opens a hole under the lede when the card is tall */
  .hero-grid{grid-template-columns:1.02fr .98fr;grid-template-rows:auto 1fr;
    gap:var(--s5) var(--s8);align-items:start}
  .hero-copy{grid-column:1;grid-row:1}
  .hero-extra{grid-column:1;grid-row:2;align-self:start}
  .hero-quiz{grid-column:2;grid-row:1 / span 2;align-self:start}
  .hero-figure{aspect-ratio:3/2;order:0}
  .split{grid-template-columns:1fr 1fr;gap:var(--s8)}
  .g4{grid-template-columns:repeat(4,1fr)}
  .bento{grid-template-columns:repeat(4,1fr)}
  .bento-tall{grid-row:span 2}
  .bento-wide{grid-column:span 2}
  .foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}
  .learn{grid-template-columns:var(--toc-w) 1fr;gap:var(--s7)}
  .toc{position:sticky;top:calc(var(--header-h) + var(--s4));align-self:start;order:-1;
    max-height:calc(100vh - var(--header-h) - var(--s6));overflow:auto}
  .breaker-in{padding-block:var(--s9)}
}

/* ---------- 28. brand book (/marca) ----------
   The page that documents the system is built out of the system: every value
   on it is read from src/tokens.js at render time. These rules only lay the
   specimens out — they never introduce a new brand value. */
.bb code{hyphens:manual;-webkit-hyphens:manual}
.bb-hero .lede{max-width:var(--measure)}
.bb-source{margin-top:var(--s3);max-width:var(--measure)}
.bb-toc{margin-top:var(--s6);border-top:1px solid var(--line);padding-top:var(--s5)}
.bb-toc-label{font-size:var(--f-xs);letter-spacing:var(--tr-wide);text-transform:uppercase;
  font-weight:var(--w-bold);color:var(--ink-3);margin:0 0 var(--s3)}
.bb-toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--s1)}
.bb-toc a{display:flex;align-items:center;gap:var(--s3);min-height:var(--tap);text-decoration:none;
  color:var(--ink-2);font-weight:var(--w-med);font-size:var(--f-sm);border-bottom:1px solid var(--line);padding-block:var(--s1)}
.bb-toc a span{font-family:var(--display);font-weight:var(--w-bold);color:var(--accent-700);flex:0 0 auto}
.bb-toc a:hover{color:var(--accent-700)}
.bb-head{max-width:64ch;margin-bottom:var(--s6)}
.bb-head h2{margin-bottom:var(--s3)}
.bb-sub{font-size:var(--f-lg);margin:var(--s7) 0 var(--s4)}
.bb-oneline{font-family:var(--display);font-weight:var(--w-display);font-size:var(--f-xl);
  line-height:var(--lh-snug);letter-spacing:var(--tr-snug);max-width:32ch;margin:0 0 var(--s5);
  border-left:3px solid var(--accent-bright);padding-left:var(--s4)}
.bb-cards{display:grid;grid-template-columns:1fr;gap:var(--s4)}
.bb-two{display:grid;grid-template-columns:1fr;gap:var(--s4);margin-top:var(--s5);align-items:start}
.bb-two>*{min-inline-size:0;min-width:0}
.bb-panel-ember{border-color:var(--ember-line);background:var(--ember-50)}
.bb-panel-ember h4{color:var(--ember-700)}
.bb-panel-warn{border-color:var(--warn-line);background:var(--warn-50)}
.bb-panel-warn h4{color:var(--warn)}
.bb-panel-accent{border-color:var(--info-line);background:var(--teal-50)}
.bb-panel-accent h4{color:var(--accent-800)}

/* logo specimens */
.bb-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--s4)}
.bb-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  min-width:0;display:flex;flex-direction:column}
.bb-tile-art{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:var(--s3);
  min-height:130px;padding:var(--s5);background:var(--surface)}
.bb-tile-ink .bb-tile-art{background:var(--ink)}
.bb-tile-ink .lockup-word{color:var(--on-dark)}
.bb-tile-meta{padding:var(--s3) var(--s4);border-top:1px solid var(--line);background:var(--surface-2)}
.bb-tile-meta h4{margin:0 0 var(--s1);font-size:var(--f-sm)}
.bb-tile-meta p{margin:0;color:var(--ink-3)}
.bb-lockup{display:inline-flex;align-items:center;gap:var(--s2)}
.bb-lockup .lockup-word{font-family:var(--display);font-weight:var(--w-bold);
  letter-spacing:var(--tr-tight);font-size:var(--f-xl);color:var(--ink)}
.bb-favicon svg{width:64px;height:64px}
.bb-clear{position:relative;display:inline-flex;padding:16px;border:1px dashed var(--teal-300);background:var(--teal-50)}
.bb-clear-x{position:absolute;left:var(--s1);top:var(--s1);font-family:var(--mono);font-size:var(--f-xs);color:var(--accent-700)}
.bb-minsize{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4);
  border-top:1px solid var(--line);padding-top:var(--s4)}
.bb-minsize-note{margin:0}

.bb-misuse{list-style:none;margin:var(--s4) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.bb-misuse-item{min-width:0}
.bb-misuse-art{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:104px;padding:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.bb-misuse-item p{margin:var(--s2) 0 0;color:var(--ink-3);display:flex;align-items:baseline;gap:var(--s2)}
.bb-no{flex:0 0 auto;width:.55rem;height:.55rem;border-radius:var(--r-pill);background:var(--danger)}
.bb-strike{position:absolute;left:8%;right:8%;top:50%;height:2px;background:var(--danger);
  transform:rotate(-18deg);opacity:.85;z-index:2}
.bb-x-stretch svg{transform:scaleX(1.7)}
.bb-x-shadow svg{filter:drop-shadow(0 6px 6px var(--ink-3))}
.bb-x-lowcontrast{background:var(--teal-300)}
.bb-x-gradient{background:linear-gradient(135deg,var(--ember),var(--accent-bright))}
.bb-x-rotate svg{transform:rotate(-22deg)}
.bb-x-fx svg{filter:blur(1.1px) saturate(2.6)}

/* colour */
.bb-colgroup{margin-bottom:var(--s6)}
.bb-colgroup h4{margin-bottom:var(--s3)}
.bb-swatches{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--s3)}
.bb-swatch{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--s3);min-width:0}
.bb-swatch-top{display:flex;align-items:center;gap:var(--s3)}
.bb-swatch-top>*{min-inline-size:0;min-width:0}
.bb-colgroup-dark .bb-swatch{background:var(--ink);border-color:var(--dark-line)}
.bb-colgroup-dark .bb-token,.bb-colgroup-dark .bb-hex{color:var(--on-dark-2)}
.bb-colgroup-dark .bb-ratio-on{color:var(--on-dark-muted)}
.bb-chip{width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line-2);flex:0 0 44px}
.bb-chip-meta{display:flex;flex-direction:column;gap:2px;flex:1 1 auto}
.bb-token{font-size:var(--f-xs);font-weight:var(--w-semi);color:var(--ink)}
.bb-hex{font-size:var(--f-xs);color:var(--ink-3);text-transform:uppercase}
.bb-ratios{display:block;margin-top:var(--s2)}
.bb-ratio-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  font-size:var(--f-xs);margin-top:2px}
.bb-ratio-on{color:var(--ink-3);min-width:0}
.bb-ratio{display:inline-flex;align-items:center;gap:var(--s1);padding:2px var(--s2);border-radius:var(--r-xs);
  border:1px solid;font-size:var(--f-xs);font-weight:var(--w-semi);white-space:nowrap}
.bb-ratio.is-aaa{background:var(--ok-50);border-color:var(--ok-line);color:var(--ok)}
.bb-ratio.is-aa{background:var(--teal-50);border-color:var(--info-line);color:var(--accent-800)}
.bb-ratio.is-aal{background:var(--warn-50);border-color:var(--warn-line);color:var(--warn)}
.bb-ratio.is-no{background:var(--surface-2);border-color:var(--line-2);color:var(--ink-3)}
.bb-mix{margin-top:var(--s4)}
.bb-mix-bar{display:flex;height:28px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line-2)}
.bb-mix-seg{display:block;min-width:0}
.bb-mix-legend{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-size:var(--f-xs);color:var(--ink-2)}
.bb-mix-legend li{flex:0 0 auto;display:flex;align-items:center;gap:var(--s2)}
.bb-dot{width:.7rem;height:.7rem;border-radius:var(--r-pill);border:1px solid var(--line-2);flex:0 0 auto}

/* type */
.bb-scale{list-style:none;margin:0;padding:0}
.bb-scale li{border-bottom:1px solid var(--line);padding:var(--s4) 0;min-width:0}
.bb-scale li:last-child{border-bottom:0}
.bb-scale-sample{margin:0 0 var(--s2);color:var(--ink);overflow-wrap:break-word;hyphens:auto}
.bb-scale-meta{margin:0;font-size:var(--f-xs);color:var(--ink-3);display:flex;flex-wrap:wrap;gap:var(--s2)}
.bb-weights{list-style:none;margin:0 0 var(--s3);padding:0}
.bb-weights li{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--line);padding:var(--s2) 0;min-width:0}
.bb-weights li:last-child{border-bottom:0}
.bb-weights code{font-size:var(--f-xs);color:var(--ink-3);font-weight:var(--w-reg);letter-spacing:normal}

/* layout system */
.bb-bars{list-style:none;margin:0;padding:0}
.bb-bars li{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0;min-width:0}
.bb-bars code{flex:0 0 3.4rem;font-size:var(--f-xs);color:var(--ink-2)}
.bb-bar{height:12px;border-radius:var(--r-xs);background:var(--accent-bright);flex:0 0 auto;max-width:100%}
.bb-radii{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.bb-radii li{display:flex;align-items:center;gap:var(--s2);font-size:var(--f-xs);color:var(--ink-3);min-width:0}
.bb-radius-box{width:38px;height:38px;flex:0 0 auto;background:var(--teal-100);border:1px solid var(--accent-bright)}
.bb-elevs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--s3)}
.bb-elevs li{display:flex;align-items:center;gap:var(--s3);font-size:var(--f-xs);color:var(--ink-3);min-width:0}
.bb-elev-box{width:38px;height:38px;flex:0 0 auto;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm)}
.bb-kv{list-style:none;margin:0;padding:0}
.bb-kv li{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--line);padding:var(--s2) 0;font-size:var(--f-sm);min-width:0}
.bb-kv li:last-child{border-bottom:0}
.bb-kv li>*{min-width:0}
.bb-rules{margin:0;padding-left:var(--s5);font-size:var(--f-sm);color:var(--ink-2)}
.bb-rules li{margin-bottom:var(--s2)}
.bb-rules li:last-child{margin-bottom:0}

/* components */
.bb-states{display:grid;grid-template-columns:1fr;gap:var(--s4)}
.bb-state{min-width:0}
.bb-state-label{font-size:var(--f-xs);letter-spacing:var(--tr-wide);text-transform:uppercase;
  font-weight:var(--w-bold);color:var(--ink-3);margin:0 0 var(--s2)}
.dress-rows{list-style:none;margin:0 0 var(--s3);padding:0}
.dress-rows .kv{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s2) 0;
  border-bottom:1px solid var(--line);font-size:var(--f-sm)}
.dress-rows .kv:last-child{border-bottom:0}
.dress-rows .kv{align-items:baseline}
.dress-rows .kv>*{min-inline-size:0;min-width:0}
.dress-rows .kv>*:first-child{flex:0 0 6.5rem}
.dress-rows .kv>*:last-child{flex:1 1 0;text-align:right}
.dress-avoid{font-size:var(--f-sm);color:var(--danger);margin:0 0 var(--s3)}
.dress-avoid strong{color:var(--danger)}

/* voice */
.bb-say{color:var(--ok)}
.bb-dont{color:var(--danger);text-decoration:line-through}
.bb-bans{margin:0;padding-left:var(--s5);color:var(--ink-2)}
.bb-bans li{margin-bottom:var(--s2)}
.bb-bans li:last-child{margin-bottom:0}

/* image policy */
.bb-ex{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);background:var(--surface);min-width:0}
.bb-ex-ok{border-color:var(--ok-line)}
.bb-ex-bad{border-color:var(--danger-line)}
.bb-ex-tag{font-size:var(--f-xs);letter-spacing:var(--tr-wide);text-transform:uppercase;font-weight:var(--w-bold);margin:0 0 var(--s3)}
.bb-ex-ok .bb-ex-tag{color:var(--ok)}
.bb-ex-bad .bb-ex-tag{color:var(--danger)}
.bb-ex-photo{position:relative;border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--s3)}
.bb-ex-photo img{width:100%;height:auto;filter:grayscale(.35)}

/* social templates */
.bb-slides{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--s5)}
.bb-slides>li{min-width:0}
.bb-slides h4{margin:var(--s3) 0 var(--s1);font-size:var(--f-sm)}
.bb-slides p{margin:0}
.bb-slide-frame{position:relative;width:100%;max-width:300px;margin-inline:auto;padding-top:125%;
  border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--e1)}
.bb-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:6.7%;gap:var(--s2)}
.bb-slide p{margin:0}
.bb-slide-ink{background:var(--ink);color:var(--on-dark)}
.bb-slide-paper{background:var(--paper);color:var(--ink)}
.bb-slide-tag{font-family:var(--sans);font-size:var(--f-xs);letter-spacing:var(--tr-wide);
  text-transform:uppercase;font-weight:var(--w-bold);color:var(--accent-on-dark)}
.bb-slide-h{font-family:var(--display);font-weight:var(--w-display);font-size:var(--f-lg);
  line-height:var(--lh-tight);letter-spacing:var(--tr-tight);color:var(--white);flex:1 1 auto;
  display:flex;flex-direction:column;justify-content:center}
.bb-slide-h-ink{color:var(--ink)}
.bb-slide-strike{color:var(--ink-3);text-decoration:line-through}
.bb-slide-opts{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:var(--f-xs);color:var(--on-dark-2)}
.bb-slide-opts li{border-top:1px solid var(--dark-line-2);padding-top:4px}
.bb-slide-mark{position:absolute;right:6.7%;bottom:6.7%}
.bb-slide-halves{flex:1 1 auto;display:flex;align-items:center;gap:var(--s2)}
.bb-slide-half{flex:1 1 0;min-width:0;font-family:var(--display);font-weight:var(--w-display);
  font-size:var(--f-md);line-height:var(--lh-tight);letter-spacing:var(--tr-tight);text-align:center}
.bb-slide-rule{flex:0 0 1px;align-self:stretch;background:var(--line-2)}
.bb-slide-foot{font-size:var(--f-xs);color:var(--ink-3)}
.bb-slide-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);flex:1 1 auto;
  align-content:center;font-family:var(--display);font-weight:var(--w-display);font-size:var(--f-md);color:var(--white)}
.bb-slide-steps li{border-bottom:1px solid var(--dark-line-2);padding-bottom:var(--s2)}
.bb-slide-cta{align-self:flex-start;background:var(--ember);color:var(--white);
  border-radius:var(--r-sm);padding:var(--s2) var(--s3);font-size:var(--f-xs);font-weight:var(--w-semi)}

@media (min-width:640px){
  .bb-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1) var(--s5)}
  .bb-cards,.bb-two{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
  .bb-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bb-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bb-misuse{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bb-states{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bb-slides{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bb-elevs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .bb-toc ol{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bb-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bb-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bb-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bb-slides{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- 27. print ---------- */
@media print{
  .site-header,.site-footer,.cert-actions,.cookiebar,.sticky-cta,.no-print{display:none!important}
  body,.cert-page{background:var(--white);padding:0}
  .cert{border:none;box-shadow:none;max-width:100%;padding:2cm}
  .cert::before{inset:.8cm}
  @page{size:A4 landscape;margin:0}
}