/* Hexvar's own brand green on Atomic. Source: the Hexvar Trust Lattice design system (core #31f2d2, core-deep #087f78,
   void #080c10 (SDR-0010 D67), carbon #0d1217, graphite #151c23, alloy #2a3540). Overrides Atomic tokens only (RB-atomic-adopt STEP 7);
   load after tokens.css.
   The light page needs a text-safe green: core #31f2d2 is 14:1 on the dark bands but fails as text on white, so the accent
   is core-deep #087f78 (4.9:1 on white, white text on it passes 4.5:1) and core is kept for the dark bands and decoration.
   --hx-accent drives three jobs today: the primary fill, the info tone and the focus ring; all three move together.
   --hx-good is also green, kept apart from the brand by the pill's glyph and hidden word, not by hue alone. */
:root,
[data-theme='light'],
.theme-light {
  /* Atomic parts read these two: point them at the site's one body face so pills and inputs match the page */
  --hx-sans: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --hx-mono: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --brand-core: #31f2d2;           /* host variable (not an --hx- token): the bright brand teal for dark bands and decoration */
  --hx-accent: #087f78;
  --hx-accent-deep: #065f5a;
  --hx-ink: #ffffff;               /* text on the accent fill */
  /* light neutrals: a faint teal-grey, no blue */
  --hx-bg: oklch(0.985 0.004 190);
  --hx-side: oklch(0.96 0.008 190);
  --hx-panel2: oklch(0.968 0.007 190);
  --hx-line: oklch(0.9 0.01 190);
  --hx-line2: oklch(0.62 0.025 190);
  --hx-text: oklch(0.2 0.02 200);
  --hx-muted: oklch(0.44 0.025 200);
  --hx-series-1: var(--hx-accent);
  --hx-series-2: var(--hx-accent-deep);
  /* the dark bands use the brand's own dark surfaces */
  --hx-navy-950: #080c10;
  --hx-navy-900: #0d1217;
  --hx-navy-800: #151c23;
  --hx-navy-700: #2a3540;
}

/* Web Awesome's own brand blue is separate from --hx-accent; map its brand job to the accent so a raw component or focus ring is not blue. */
:root,
[data-theme='light'],
.theme-light {
  --wa-color-brand-fill-loud: var(--hx-accent);
  --wa-color-brand-on-loud: var(--hx-ink);
  --wa-color-brand-border-loud: var(--hx-accent);
  --wa-color-brand-fill-normal: var(--hx-acc-bg);
  --wa-color-brand-on-normal: var(--hx-accent);
  --wa-color-brand-border-normal: color-mix(in oklch, var(--hx-accent) 55%, transparent);
  --wa-color-text-link: var(--hx-accent);
}

/* tokens.css re-declares the light tokens for an OS that prefers light when no data-theme is set, with higher specificity. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]):not(.theme-dark) {
    --hx-accent: #087f78;
    --hx-accent-deep: #065f5a;
    --hx-ink: #ffffff;
  }
}

/* ---- journey (journey-map.md): trail bar, doors, S0 situation cards. Colours and fonts come from the comic-card variables in index.html. */
.jbar{position:sticky;top:0;z-index:20;background:rgba(8,12,16,.96);border-bottom:2px solid var(--c-line)}
nav + .jbar{top:0}
nav:has(+ .jbar){position:relative}
.jsit{text-decoration:none;color:inherit}
.jbar-in{display:flex;align-items:center;gap:12px 16px;flex-wrap:nowrap;height:64px;padding-block:8px}
.jleft{display:flex;align-items:center;gap:8px 20px;flex:1 1 auto;min-width:0}
.jlogo{display:inline-flex;gap:8px;align-items:center;min-height:44px;font:400 24px/1 var(--f-head);letter-spacing:.03em;text-transform:uppercase;color:var(--c-cream);text-decoration:none}
.jlogo span span{color:var(--c-hero)}
.jback{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;color:var(--c-mut);text-decoration:none;font-weight:700;font-size:16px}
.jback:hover{color:var(--c-hero)}
.jstep{font-size:15px;color:var(--c-mut);white-space:nowrap}
.jplan{margin-left:auto}
.jdoors{display:flex;flex-direction:column;gap:12px;max-width:640px}
.jdoor{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 18px;border:2px solid var(--c-cream);border-radius:var(--r-ctl);color:var(--c-cream);text-decoration:none;font-weight:700;font-size:18px;line-height:1.3}
.jdoor>span:first-child{flex:1 1 auto}
.jdoor:hover{border-color:var(--c-hero);color:var(--c-hero)}
.jdoor.seen:after{content:"✓ visited";font-size:12px;font-weight:400;color:var(--c-mut);margin-left:auto;order:3}
.jarrow{margin-left:auto;color:var(--c-hero)}
.jnext{padding-block:48px;border-top:1px solid var(--c-line)}
.jnext .jdoors{max-width:none;flex-direction:row;flex-wrap:wrap}
.jnext .jdoor{flex:1 1 280px}
.jsits{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.jsit h3{font:400 28px/1.1 var(--f-head);text-transform:uppercase;letter-spacing:.01em}
.jclose{margin-top:8px}
.jfigs{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.jstat{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.jstat .stat{font-size:clamp(44px,8vw,64px)}
.jsteps{display:grid;gap:16px;max-width:760px;margin:0;padding:0;list-style:none;counter-reset:s}
.jsteps li{counter-increment:s;display:flex;gap:16px;align-items:baseline;font-size:19px}
.jsteps li:before{content:counter(s);flex:0 0 36px;height:36px;border-radius:50%;background:var(--c-hero);color:var(--c-g);display:flex;align-items:center;justify-content:center;font-weight:700}
.jpills{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:640px){
  .jbar-in{gap:8px 10px;flex-wrap:wrap;height:auto;min-height:64px}
  .jleft{display:contents}
  .jlogo{order:1;flex:1 1 auto;font-size:22px}.jback{order:2}.btn.jplan{order:3;margin-left:0;padding:0 12px;font-size:17px}.jstep{order:4;flex:1 1 100%;min-height:24px;display:flex;align-items:center}
  nav + .jbar .btn.jplan{margin-left:auto}
  .wrap{padding-inline:16px}
  .sec{padding:64px 0}
}
nav + .jbar .jlogo{display:none}
nav a.logo{min-height:44px}
.ck a,.card p>a:only-child{display:inline-flex;align-items:center;min-height:44px}

/* situation pages: one button under the pair, or the recap line when the visitor came through the journey */
.pairbtn{justify-content:center}
.recap{margin:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:17px;font-weight:700;color:var(--c-mut)}
.recap[hidden],.pair-cold[hidden]{display:none}
.recap a{color:var(--c-hero)}
.sec.snug.recapped{padding-block:20px}
/* S0 home: Hex beside the headline, a villain on every door, one proof line */
.s0hero{display:grid;gap:32px;align-items:center}
@media (min-width:900px){.s0hero{grid-template-columns:1.5fr 1fr}}
.s0q{font-size:clamp(26px,3.2vw,36px);color:var(--c-hero);max-width:none}
.s0art{margin:0;justify-self:center}
.s0art img{width:clamp(200px,24vw,320px);height:auto;filter:drop-shadow(6px 6px 0 rgba(0,0,0,.45))}
@media (max-width:899px){.s0art{display:none}}
.card.s0door{padding-top:0;overflow:hidden}
.s0v{display:block;width:calc(100% + 2*var(--card-pad,28px));max-width:none;margin-inline:calc(-1*var(--card-pad,28px));aspect-ratio:4/3;height:auto;object-fit:cover;border-bottom:2px solid var(--c-line)}
.s0vname{font:400 18px/1 var(--f-fx);letter-spacing:.06em;color:var(--c-villain)}
.s0who{display:flex;flex-wrap:wrap;gap:16px;align-items:center;text-decoration:none;color:var(--c-cream);border-top:1px solid var(--c-line);padding-top:24px}
.s0who img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--c-hero)}
.s0who .eyebrow{margin-left:auto}
/* narrow story column (backup screens): photo left, words and Meet them stacked beside it */
.ch-story .s0who{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:16px;row-gap:6px}
.ch-story .s0who img{grid-row:span 3}
.ch-story .s0who hx-pill,.ch-story .s0who .eyebrow{margin-left:0;justify-self:start}
/* card screens: the card is the hero, the other doors are quiet links */

/* Get my plan: form left, what arrives and how details are used right; the side stacks under the form on a phone */
.formgrid{display:grid;gap:32px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.formgrid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start}}
.formside .h3{font:700 22px/1.2 var(--f-body);text-transform:none;letter-spacing:0}
/* logo kit wordmark in the bar and site nav */
.wm{height:44px;width:auto;display:block;margin-inline:-12px}
/* Hex idle: an 8s, 4px bob (brand spec motion); journey.js runs the wave -> point-at-doors loop on home */
@keyframes hexbob{0%,100%{translate:0 0}50%{translate:0 -4px}}
.s0art img{animation:hexbob 8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.s0art img{animation:none}}
/* Hex speech bubble: fades when the line changes */
.s0art{display:flex;flex-direction:column;align-items:center;gap:12px}
.s0say{margin:0;position:relative;height:108px;box-sizing:border-box;display:grid;place-items:center;width:min(100%,280px);background:var(--c-cream);color:var(--c-g);border:3px solid var(--c-g);border-radius:20px;padding:10px 18px;font:400 22px/1.15 var(--f-fx);letter-spacing:.04em;max-width:22ch;text-align:center;transition:opacity .4s ease}
.s0say::after{content:'';position:absolute;left:50%;bottom:-14px;translate:-50% 0;border:12px solid transparent;border-top-color:var(--c-cream);border-bottom:0}
.s0say.out{opacity:0}
@media (prefers-reduced-motion:reduce){.s0say{transition:none}}
.s0art img.flip{transform:scaleX(-1)}
.s0art img{aspect-ratio:1/1}

/* secondary button: outline, wrapping row. Weaker than the one filled .btn on the screen (layout rule 1). */
.btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn2{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;font:700 15px/1.2 var(--f-body);color:var(--c-cream);background:transparent;border:2px solid var(--c-cream);border-radius:4px;text-decoration:none;transition:border-color .15s ease,color .15s ease}
.btn2:hover{border-color:var(--c-hero);color:var(--c-hero)}

/* the comic card: same build as a home door (.s0door): art on top, Bangers name, text below; button on the bottom edge */
.card.wk{padding:0;overflow:hidden;display:flex;flex-direction:column;gap:0;margin:0}
.wk-tag{align-self:flex-start;margin:14px 0 12px 20px;padding:2px 10px;border-radius:4px;font:700 13px/1.5 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--c-g);background:var(--c-villain)}
.wk.hero .wk-tag{background:var(--c-hero)}
.wk-stage{position:relative;border-block:2px solid var(--c-line);aspect-ratio:4/3;background:var(--c-alt)}
.wk-art{display:block;width:100%;height:100%;object-fit:cover}
.wk-say{position:absolute;top:8px;left:8px;margin:0;max-width:42%;background:var(--c-cream);color:var(--c-g);border:3px solid var(--c-g);border-radius:16px;padding:5px 11px;font:400 16px/1.12 var(--f-fx);letter-spacing:.04em}
.wk-say::after{content:'';position:absolute;left:22px;bottom:-12px;border:10px solid transparent;border-top-color:var(--c-g);border-bottom:0}
.wk-say::before{content:'';position:absolute;left:25px;bottom:-7px;z-index:1;border:7px solid transparent;border-top-color:var(--c-cream);border-bottom:0}
.wk-body{display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px}
.wk-name{font:400 28px/1.05 var(--f-fx);letter-spacing:.05em;text-transform:uppercase;color:var(--c-villain)}
.wk.hero .wk-name{color:var(--c-hero)}
.wk-rows{margin:0;display:flex;flex-direction:column;gap:8px}
.wk-rows div{display:flex;flex-direction:column;gap:0}
.wk-rows dt{font:700 12px/1.5 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--c-mut)}
.wk-rows dd{margin:0;font-size:16px;line-height:1.4}
.wk-btn{display:flex;justify-content:space-between;align-items:center;min-height:56px;padding:0 20px;font:400 22px/1 var(--f-head);letter-spacing:.02em;text-transform:uppercase;text-decoration:none;color:var(--c-g);background:var(--c-villain)}
.wk-btn.hero{background:var(--c-hero)}
.wk-btn:hover{filter:brightness(1.08)}
.wk-btn:focus-visible{outline-offset:-6px;outline-color:var(--c-g)}
.pair .card.wk{max-width:400px}
.herogrid>.card.wk{flex:0 1 380px;margin:0 auto}

/* hero of a card screen: headline, card, story. Phone: one column in that order. Desktop: text left, card right, top-aligned, no empty band. */
.hero-in.cardhero{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start;padding-block:32px}
.ch-card{min-width:0}
.ch-story{align-self:start}
@media (min-width:900px){
  .hero-in.cardhero{grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:auto 1fr;column-gap:56px;row-gap:24px}
  .ch-head{grid-column:1;grid-row:1}
  .ch-story{grid-column:1;grid-row:2}
  .ch-card{grid-column:2;grid-row:1 / span 2}
}

/* site footer: two rows on the .wrap edges; the wordmark art has side padding, so it is pulled left to sit on the edge */
footer.sf{padding:0;font-size:15px;background:var(--c-foot);border-top:2px solid var(--c-line);color:var(--c-mut)}
footer.sf .wrap{display:flex;flex-direction:column;gap:0;align-items:stretch;justify-content:flex-start}
footer.sf .sf-row{display:flex;justify-content:space-between;align-items:center;gap:8px 32px;flex-wrap:wrap;padding-block:28px}
footer.sf .sf-legal{padding-block:12px;border-top:1px solid var(--c-line);font-size:14px}
footer.sf .sf-brand{display:flex;flex-direction:column;gap:0;align-items:flex-start}
footer.sf .sf-brand a{display:flex;align-items:center;min-height:44px;padding:0}
footer.sf .sf-wm{height:28px;width:auto;display:block;margin-left:-3px}
footer.sf .sf-links{display:flex;flex-wrap:wrap;gap:0 28px;align-items:center;max-width:none}
footer.sf .sf-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--c-mut);text-decoration:none}
footer.sf .sf-links a:hover{color:var(--c-cream);text-decoration:underline}
@media (max-width:640px){
  footer.sf .sf-row{flex-direction:column;align-items:flex-start;justify-content:flex-start}
  footer.sf .sf-links{gap:0 20px}
}
/* page art (Codex, from the cast references) */
.pageart{margin:0}
.pageart img{display:block;width:100%;height:auto;border:2px solid var(--c-line);border-radius:var(--r-card);box-shadow:6px 6px 0 rgba(0,221,185,.18)}
/* step 3 headline is the week's success sentence: smaller than a slogan headline */
/* plan template: two-up lists, the button with its one-line promise, step art */
.wa-grid.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.plancta{align-items:center;gap:16px;flex-wrap:wrap}
.stepart{width:100%;height:auto;border-radius:6px}
.card .imgp{min-height:200px}
/* the comic "Previously…" caption box: cream paper, ink border, offset shadow */
.caption{background:var(--c-cream);color:var(--c-g);border:3px solid #000;box-shadow:6px 6px 0 #000;padding:14px 18px;max-width:62ch;display:flex;flex-direction:column;gap:6px}
.caption-k{font:400 20px/1 var(--f-head);letter-spacing:.04em;text-transform:uppercase;color:#077A73} /* teal ink on cream: brand #087F78 is 4.41:1 on cream, under WCAG AA 4.5; this shade is 4.71:1. Orange belongs to villains */
.caption p{margin:0;font-size:18px;line-height:1.5}
.caption hx-pill{align-self:flex-start}
header.planhero h1{font-size:clamp(32px,4vw,48px);max-width:24ch}
/* team template: two profile cards, portrait on top */
.profile .photo{width:160px;height:160px;border-radius:50%;border:3px solid var(--c-hero);object-fit:cover}
.profile .nick{margin:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font:400 20px/1.1 var(--f-head);text-transform:uppercase;letter-spacing:.03em;color:var(--c-hero)}
.profile .pname{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* plan template: recap spot art inside the caption; Hex beside "The plan" */
.caption{flex-direction:row;align-items:center;gap:16px}
.capspot{flex:0 0 120px;width:120px}
.capspot .imgp{min-height:120px;padding:8px;font-size:11px;line-height:1.3}
.capspot .imgp strong{font-size:12px}
img.capspot{height:120px;object-fit:cover;border:2px solid #000}
.planhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.planhex{margin:0;display:flex;align-items:flex-end;gap:8px}
.planhex img{width:120px;height:auto;transform:scaleX(-1)} /* the pose points down-right; Hex sits right of the steps, so mirror him to point at them */
.hexsay{margin:0 0 56px;background:var(--c-cream);color:var(--c-g);border:2px solid #000;border-radius:14px;padding:8px 12px;font:400 18px/1.1 Bangers,var(--f-head);letter-spacing:.03em}
@media (max-width:640px){.caption{flex-direction:column;align-items:flex-start}.planhex img{width:90px}.hexsay{margin-bottom:50px}}
@media (prefers-reduced-motion:no-preference){.planhex img{animation:hexbob 8s ease-in-out infinite}}
.capspot.imgp{min-height:120px;justify-content:center;text-align:center;padding:8px}
.artbrief summary{cursor:pointer;color:var(--c-mut);font-size:14px}
/* plan template rhythm: one reading column of sections, tighter than a long-form page, so the story reads as one flow */
[data-slot]{padding-block:56px}
[data-slot] > .wrap.wa-gap-3xl{gap:28px}
.planhead{justify-content:flex-start;align-items:flex-end;gap:28px}
.wa-grid.qgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
ul.ck.promise{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:12px 32px}
/* step art placeholders: short, so the steps read before the prompts do */
[data-slot="plan"] .card .imgp{min-height:0;aspect-ratio:4/3;justify-content:flex-start}
[data-slot="plan"] .card .imgp span{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
/* What we promise: comic pledge badges on a teal halftone ground */
[data-slot="promise"]{background:radial-gradient(circle,rgba(0,221,185,.10) 1.8px,transparent 2.1px) 0 0/14px 14px,var(--c-bg,#080C10)}
.pledges{list-style:none;margin:0;padding:0;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.pledge{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--c-card);border:3px solid var(--c-hero);box-shadow:6px 6px 0 #000;border-radius:var(--r-card);padding:44px 18px 18px;margin-top:24px}
.pledge .hexnum{position:absolute;top:-26px;left:16px;width:52px;height:46px;display:grid;place-items:center;background:var(--c-hero);color:var(--c-g);font:400 26px/1 var(--f-head);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);filter:drop-shadow(3px 3px 0 #000)}
.pledge-h{font:400 clamp(24px,2.4vw,30px)/1.02 var(--f-head);text-transform:uppercase;letter-spacing:.01em;color:var(--c-cream)}
.pledge .mut{font-size:16px;line-height:1.5}
.pledge hx-pill{align-self:flex-start;margin-top:auto}
@media (prefers-reduced-motion:no-preference){.pledge{transition:transform .15s ease}.pledge:hover{transform:translate(-2px,-2px)}}
/* Questions you will have: the visitor asks in a comic bubble, the answer card sits under its tail */
.qa{display:flex;flex-direction:column;gap:18px}
.qbubble{position:relative;align-self:flex-start;max-width:92%;margin:0;background:var(--c-cream);color:var(--c-g);border:3px solid #000;border-radius:22px;box-shadow:4px 4px 0 #000;padding:12px 20px;font:400 clamp(22px,2.2vw,28px)/1.05 Bangers,var(--f-head);letter-spacing:.03em}
.qbubble:after{content:"";position:absolute;left:28px;bottom:-17px;width:22px;height:18px;background:var(--c-cream);border:3px solid #000;border-top:0;border-left:0;transform:skewX(35deg)}
.qans{flex:1}
.qshort{font:400 clamp(22px,2vw,26px)/1.1 var(--f-head);text-transform:uppercase;letter-spacing:.01em;color:var(--c-hero)}
.qans .mut{font-size:16px;line-height:1.55}
.wa-grid.qgrid{gap:40px 28px}
/* click-to-flip question cards (only once assets/journey.js has marked the page .flipready; otherwise both faces stack) */
.flip-front{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:260px;padding:28px;border-radius:var(--r-card);border:3px solid var(--c-hero);background:radial-gradient(circle,rgba(0,221,185,.14) 1.8px,transparent 2.1px) 0 0/14px 14px,var(--c-card);box-shadow:6px 6px 0 #000}
.flip-front:focus-visible{outline:3px solid var(--c-cream);outline-offset:4px}
.flip-front .qbubble{position:relative;display:block}
.fliphint{font:700 14px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--c-hero)}
.qask{margin:0;font:400 18px/1.1 Bangers,var(--f-head);letter-spacing:.03em;color:var(--c-mut)}
.flipback{all:unset;cursor:pointer;font:700 15px/1 var(--f-body);color:var(--c-mut);padding:12px 4px;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;margin-left:auto}
.flipback:hover{color:var(--c-cream)}.flipback:focus-visible{outline:3px solid var(--c-cream);outline-offset:3px}
.flipready .flip{perspective:1400px}
.flipready .flip-in{display:grid;transition:transform .55s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d;height:100%}
.flipready .flip-face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flipready .flip-back{transform:rotateY(180deg)}
.flipready .flip.is-flipped .flip-in{transform:rotateY(180deg)}
.flipready .flip-front .fliphint{display:inline-flex}
html:not(.flipready) .fliphint,html:not(.flipready) .flipback{display:none}
html:not(.flipready) .flip-in{display:flex;flex-direction:column;gap:18px}
@media (prefers-reduced-motion:reduce){.flipready .flip-in{transition:none}}
.wa-grid.qgrid{align-items:stretch}
.flip-front .qbubble{align-self:center;font-size:clamp(26px,2.8vw,34px)}
.fliphint{gap:6px}
.qask:focus,.qshort:focus{outline:none}
/* customers: the "Built for" strip; each tile opens its case study */
.custrip{display:flex;flex-wrap:wrap;gap:20px}
.custile{flex:1 1 260px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:22px;border:2px solid var(--c-line);border-radius:var(--r-card);background:var(--c-card);color:var(--c-cream);text-decoration:none}
.custile:hover{border-color:var(--c-hero)}
.custlogo-ph{display:flex;align-items:center;gap:8px;min-height:56px}
.caselogo{margin:0;display:grid;place-items:center;background:#fff;border:3px solid #000;box-shadow:6px 6px 0 #000;padding:32px}
.caselogo img{max-width:100%;max-height:160px}
/* the series: each customer an issue, shown as a comic cover */
/* the cover frame (SDR-0010 D47): fixed masthead, one art panel, cover blurb, customer + Hexvar footer; only the art and words change per issue */
.custile.issue{flex:0 1 300px;padding:16px;gap:12px}
.cover{width:100%;aspect-ratio:3/4;display:flex;flex-direction:column;background:#0b1015;border:3px solid #000;box-shadow:5px 5px 0 #000;overflow:hidden}
.cv-mast{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--c-hero);color:#071012;padding:8px 10px;border-bottom:3px solid #000;font:400 22px/1 var(--f-head);text-transform:uppercase;letter-spacing:.02em}
.cv-mast b{font-weight:400;background:#071012;color:var(--c-hero);padding:4px 8px;border-radius:3px;font-size:18px}
.cv-panel{position:relative;flex:1;min-height:0}
.cv-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cv-art.standin{filter:saturate(.75) brightness(.8)} /* the villain alone, until the drawn cover (customer as hero) exists */
.cv-art.empty{background:radial-gradient(var(--c-line) 1px,transparent 1.5px) 0 0/12px 12px}
.cv-blurb{position:absolute;left:10px;right:10px;bottom:10px;margin:0;background:var(--c-cream);color:var(--c-g);border:3px solid #000;box-shadow:4px 4px 0 #000;padding:6px 10px;font:400 20px/1.05 var(--f-head);text-transform:uppercase}
.cv-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-top:3px solid #000;background:var(--c-card)}
.cv-plus{font:700 1.4em/1 var(--f-display,inherit);color:var(--c-ink,#fff)}
.cv-who{display:flex;align-items:center;gap:8px;min-width:0;font:400 18px/1.05 var(--f-head);text-transform:uppercase;color:var(--c-cream)}
.cv-who img{height:30px;width:auto;max-width:150px;object-fit:contain;background:#fff;border-radius:3px;padding:2px 4px}
/* the logo kit wordmark (hexvar_wordmark_on_dark), never typeset text: docs/brand/visual.md ## logo */
.cv-hex{display:flex;align-items:center;flex:none}
.cv-hex img{height:34px;width:auto}
.custile.issue:hover .cover{box-shadow:5px 5px 0 var(--c-hero)}
/* an issue's opening: the situation caption beside the villain the customer beat */
.tale{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:28px;align-items:start}
@media (max-width:760px){.tale{grid-template-columns:minmax(0,1fr)}}
.facedv{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--c-cream)}
.facedv img{width:100%;height:auto;border:3px solid var(--c-villain);border-radius:4px}
.facedv strong{font:400 22px/1.05 Bangers,var(--f-head);letter-spacing:.03em;color:var(--c-villain)}
/* ONE speech bubble (consistency C1): every character line uses this look. Cream, 3px ink border, 18px corners, offset ink shadow,
   Bangers; the tail is an ink triangle with a cream inner (from the card bubble). Per-bubble rules above set only size and placement. */
.s0say,.wk-say,.hexsay,.qbubble{background:var(--c-cream);color:var(--c-g);border:3px solid #000;border-radius:18px;box-shadow:4px 4px 0 #000;font-family:var(--f-fx);letter-spacing:.04em}
.hexsay,.qbubble{position:relative}
.s0say::after,.wk-say::after,.hexsay::after,.qbubble::after{content:'';position:absolute;left:24px;right:auto;bottom:-14px;width:0;height:0;background:none;transform:none;translate:none;border:12px solid transparent;border-top-color:#000;border-bottom:0}
.s0say::before,.wk-say::before,.hexsay::before,.qbubble::before{content:'';position:absolute;left:27px;right:auto;bottom:-8px;z-index:1;border:9px solid transparent;border-top-color:var(--c-cream);border-bottom:0}
.s0say::after,.s0say::before{left:50%;translate:-50% 0}
.hexsay::after{left:auto;right:18px}.hexsay::before{left:auto;right:21px}
.wk-say{box-shadow:3px 3px 0 #000}
/* ONE secondary button (consistency C4): .btn.ghost looks like .btn2 (a.btn.ghost beats the inline .btn.ghost rule) */
a.btn.ghost{min-height:44px;padding:0 18px;font:700 15px/1.2 var(--f-body);letter-spacing:0;text-transform:none;border-width:2px}
/* Sent cut-scene: plays once and holds its last frame */
.cutscene{width:100%;max-width:520px;aspect-ratio:4/3;border:3px solid #000;box-shadow:6px 6px 0 #000;border-radius:4px;object-fit:cover;background:var(--c-cream)}
div.cutscene{background:none;border:0;box-shadow:none}
/* page-to-page: a comic hexagon wipe between pages, and each villain door morphs into its villain card. Browsers without
   cross-document view transitions load the page normally; reduced motion turns the transition off. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:hexwipe .5s cubic-bezier(.2,.7,.2,1)}
@keyframes hexwipe{from{clip-path:polygon(50% 44%,55% 47%,55% 53%,50% 56%,45% 53%,45% 47%)}to{clip-path:polygon(50% -75%,175% -12%,175% 112%,50% 175%,-75% 112%,-75% -12%)}}
::view-transition-group(*){animation-duration:.5s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-new(root),::view-transition-group(*){animation:none}}
/* logo walls: every logo on a uniform chip (cream for colour marks, dark for white-only marks), the name always as text */
/* battle cards (Experience): comic card with a white logo plate; customers carry the hero teal, employers stay neutral */
.logowall{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
.bcard{display:flex;flex-direction:column;gap:8px;background:var(--c-card);border:3px solid #000;border-radius:var(--r-card);box-shadow:5px 5px 0 #000;padding:12px 12px 14px;outline:2px solid var(--c-line);outline-offset:-5px}
.bcard.customer{outline-color:var(--c-hero)}
.bkick{display:flex;justify-content:space-between;font:700 11px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--c-mut);padding:2px 2px 0}
.bcard.customer .bkick{color:var(--c-hero)}.bkick b{font-weight:700}
.bplate{display:grid;place-items:center;height:96px;background:#fff;border:2px solid #000;border-radius:4px;padding:12px;color:#0d1217;text-align:center;font-size:18px}
.bplate img{max-width:100%;max-height:68px;object-fit:contain}.bplate img.inv{filter:brightness(0)}
.bname{margin:4px 0 0;font:400 22px/1.05 Bangers,var(--f-head);letter-spacing:.03em;color:var(--c-cream)}
.bind{align-self:flex-start;font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;border:1px solid var(--c-line);color:var(--c-mut)}
.babout{margin:0;font-size:14px;line-height:1.45;color:var(--c-mut)}
.blink{margin-top:auto;padding-top:6px;font-size:14px;font-weight:700;min-height:44px;display:inline-flex;align-items:center}
/* what we build with: chips with the repo count */
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--c-line);border-radius:999px;padding:4px 6px 4px 12px;font-size:14px;color:var(--c-cream)}
.chips small{background:var(--c-alt);border-radius:999px;padding:1px 8px;font-size:12px;color:var(--c-hero)}
.wa-grid.stackgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.builtwith{margin-top:12px}
.tagline{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-hero);border:2px solid var(--c-hero);border-radius:4px;padding:2px 8px}
.casecover{margin:0;max-width:340px;justify-self:end;width:100%}
/* back link to the page above (every page one level down has one) */
/* tap targets are at least 44px (qa-run.mjs measures them on phones): the back link keeps its teal line as an underline,
   so the 44px box does not push the line away from the words */
.crumb{align-self:flex-start;display:inline-flex;gap:8px;align-items:center;min-height:44px;font-weight:700;font-size:15px;color:var(--c-cream);text-decoration:underline 2px var(--c-hero);text-underline-offset:6px}
.crumb:hover{color:var(--c-hero)}
.crumb:focus-visible{outline:3px solid var(--c-hero);outline-offset:4px}
/* skip link: off screen until focused, then a teal tab top left, above the bars and the open menu */
.skip{position:absolute;left:12px;top:-200px;z-index:60;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;font:700 16px/1 var(--f-body);color:var(--c-g);background:var(--c-hero);border:2px solid var(--c-g);border-radius:4px;text-decoration:none}
.skip:focus{top:12px}
.skip:focus-visible{outline:3px solid var(--c-cream);outline-offset:2px}
/* phone menu and plan bar (SDR-0010 D53). Desktop: hidden; the nav keeps its inline links and the bar its Get my plan. */
.menu,.plandock{display:none}
@media (max-width:760px){
  .menu{display:block;margin-left:auto}
  .menu-btn{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:2px solid var(--c-line);border-radius:var(--r-card);color:var(--c-cream);font-size:24px;line-height:1;cursor:pointer;background:var(--c-card)}
  .menu-btn::-webkit-details-marker{display:none}
  .menu-btn:focus-visible{outline:3px solid var(--c-hero);outline-offset:3px}
  .menu .menu-close,.menu[open] .menu-open{display:none}
  .menu[open] .menu-close{display:inline}
  .menu-panel{position:fixed;inset:64px 0 0 0;z-index:40;background:var(--c-g);border-top:2px solid var(--c-line);padding:16px 16px 32px;overflow-y:auto;display:flex;flex-direction:column;gap:20px}
  .menu-panel ul{list-style:none;margin:0;padding:0}
  .menu-panel li a{display:flex;justify-content:space-between;align-items:center;min-height:56px;padding:0 4px;border-bottom:1px solid var(--c-line);color:var(--c-cream);text-decoration:none;font:400 24px/1.1 var(--f-head);letter-spacing:.02em;text-transform:uppercase}
  .menu-panel li a[aria-current="page"]{color:var(--c-hero)}
  .menu-panel .btn{justify-content:center}
  nav .btn.jplan,.jbar .btn.jplan{display:none}
  .plandock{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(8,12,16,.96);border-top:2px solid var(--c-line)}
  .plandock .btn{display:flex;justify-content:center;width:100%}
  body:has(.plandock){padding-bottom:76px}
  /* the plan bar is about 70px plus the safe area: focus scrolling stops above it (WCAG 2.4.11), and the footer's last links clear it */
  html:has(.plandock){scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  body:has(.plandock) footer.sf{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  body:has(.menu[open]){overflow:hidden}
}
@media (max-width:760px){
  .jbar .menu{order:9}
  body:has(.menu[open]) .plandock{display:none}
}
/* phone journey bar (D53): row 1 logo + menu, row 2 Back + step; the wordmark's letters line up with the page text (its SVG has side padding) */
@media (max-width:760px){
  .jbar-in{flex-wrap:wrap}
  .jbar .jlogo{order:1;flex:1 0 calc(100% - 64px)}
  .jbar .menu{order:2;margin-left:0}
  .jbar .jback{order:3}
  .jbar .jstep{order:4;flex:1 1 auto;justify-content:flex-end}
  .wm{margin-inline:-4px}
}
/* phone: the who-line stacks beside its photo (same layout as .ch-story .s0who), so "Meet them" never runs to the edge */
@media (max-width:760px){
  .s0who{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:16px;row-gap:6px}
  .s0who img{grid-row:span 3}
  .s0who hx-pill,.s0who .eyebrow{margin-left:0;justify-self:start}
}
/* flip cards sized to their one question on phones */
@media (max-width:760px){
  .flip-front{min-height:160px;padding:20px}
}
/* plan builder (D57): one question per screen once the script runs; without it every question shows as one plain form */
.builder fieldset{border:0;margin:0;padding:0;min-width:0}
.builder legend{font:400 clamp(28px,4vw,40px)/1.05 var(--f-head);text-transform:uppercase;color:var(--c-cream);margin-bottom:20px;padding:0;outline:0}
.builder .bnum{display:block;font:700 13px/1.6 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--c-hero);margin-bottom:6px}
.builder.stepping .bq{display:none}
.builder.stepping .bq.on{display:block}
.builder:not(.stepping) .bnav{display:none}
.builder:not(.stepping) .bq{margin-bottom:32px}
.bchoices{display:grid;gap:12px}
.bchoice{display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 18px;border:2px solid var(--c-line);border-radius:var(--r-card);background:var(--c-card);color:var(--c-cream);font-weight:700;font-size:18px;cursor:pointer}
.bchoice:hover{border-color:var(--c-cream)}
.bchoice input{width:22px;height:22px;accent-color:var(--c-hero);flex:0 0 auto}
.bchoice:has(input:checked){border-color:var(--c-hero);box-shadow:inset 0 0 0 1px var(--c-hero)}
.bchoice:has(input:focus-visible){outline:3px solid var(--c-hero);outline-offset:3px}
.bnav{display:flex;gap:12px;justify-content:space-between;align-items:center}
.bnav [data-next]{margin-left:auto}
.bnav .btn:disabled{opacity:.45;cursor:not-allowed}
.bask{display:flex;align-items:center;gap:14px}
.bask img{width:72px;height:auto;flex:0 0 auto}
.bask .hexsay{margin:0}
.bplan{background:var(--c-card);border:2px solid var(--c-line);border-radius:var(--r-card);padding:24px}
.bvs{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.bvs:empty{display:none}
.bvs figure{margin:0}
.bvs img{width:100%;height:auto;border-radius:var(--r-card);display:block}
.bvs figcaption{font:400 15px/1.15 var(--f-fx);margin-top:6px;color:var(--c-cream)}
.bvs figure:first-child figcaption{color:var(--c-villain)}
.bvs figure:last-child figcaption{color:var(--c-hero)}
.bvsx{font:400 22px/1 var(--f-head);color:var(--c-mut)}
.bsteps{margin:0;padding-left:22px;display:grid;gap:6px}
.bsteps:empty{display:none}
.bplan ul{margin:6px 0 0;padding-left:20px}
@media (min-width:900px){.bplan{position:sticky;top:96px}}
.bnav [hidden]{display:none!important}
/* the builder's Hex stands LEFT of his bubble: the tail points left at him, vertically centred (brand rule: the tail points at the speaker) */
.bask{gap:22px}
.bask img{width:96px}
.bask .hexsay::after,.bask .hexsay::before{left:auto;right:auto;bottom:auto;top:50%;border-color:transparent;border-left:0}
.bask .hexsay::after{left:-15px;margin-top:-12px;border-width:12px 15px 12px 0;border-right-color:#000}
.bask .hexsay::before{left:-9px;margin-top:-9px;border-width:9px 11px 9px 0;border-right-color:var(--c-cream)}
.feed{list-style:none;margin:0;padding:0;display:grid;gap:16px}
/* the whole answer face turns the card back, so it reads as clickable */
.flipready .flip-back{cursor:pointer}
.flipready .flip-back a{cursor:pointer}
/* a question row that opens (details.card) is a 44px tap target, with its marker kept */
.card > summary{padding-block:9px}

/* villain wiki: /villains/ gallery and /villains/<id>/ pages (villains.mjs). Comic brand: villain orange, Bangers words, cream balloons. */
.vgrid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.vcard{display:flex;flex-direction:column;background:var(--c-card);border:2px solid var(--c-line);border-radius:var(--r-card);text-decoration:none;color:var(--c-cream);overflow:hidden}
.vcard:hover,.vcard:focus-visible{border-color:var(--c-villain)}
.vcard-b{display:flex;flex-direction:column;gap:10px;padding:16px;align-items:flex-start}
.vname,.vhead h1{font:400 clamp(28px,6vw,44px)/1.05 var(--f-fx);letter-spacing:.04em;color:var(--c-villain);margin:0}
.vname{font-size:28px}
.vsay{color:var(--c-mut);font-size:16px;line-height:1.4}
.vart{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--c-alt);border-bottom:2px solid var(--c-line)}
.vart.empty{display:grid;place-items:center;border:2px dashed var(--c-line);color:var(--c-mut);font:400 22px/1 var(--f-fx);letter-spacing:.06em;text-transform:uppercase}
.vtop .vart{border:2px solid var(--c-line);border-radius:var(--r-card)}
.vrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.vstars{color:var(--c-villain);font-size:20px;letter-spacing:2px}
.vstars .off{color:var(--c-line)}
.vchip{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;border:2px solid var(--c-line);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-cream)}
.vchip.cls{border-color:var(--c-villain);color:var(--c-villain)}
.vchip.draft,.vchip.need{border-color:#ffd84d;color:#ffd84d}
.vchip.src,.vchip.hero{border-color:var(--c-hero);color:var(--c-hero)}
.vbubble{margin:0;position:relative;align-self:flex-start;max-width:min(100%,46ch);background:var(--c-cream);color:var(--c-g);border:3px solid #000;border-radius:22px;box-shadow:4px 4px 0 #000;padding:12px 20px;font:400 clamp(20px,4.6vw,26px)/1.15 var(--f-fx);letter-spacing:.03em}
.vquotes{display:flex;flex-direction:column;gap:16px}
.vquotes .vbubble{background:var(--c-villain);border-color:#000}
.vtop{display:grid;gap:24px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.vpanel{display:flex;flex-direction:column;gap:12px;background:var(--c-card);border:2px solid var(--c-line);border-radius:var(--r-card);padding:20px}
.vpanel h2{margin:0 0 4px}
.vbar{display:grid;grid-template-columns:minmax(96px,9em) 1fr 2ch;gap:12px;align-items:center;font-size:16px}
.vbar-t{display:block;height:14px;background:var(--c-alt);border:2px solid var(--c-line);border-radius:999px;overflow:hidden}
.vbar-t i{display:block;height:100%;background:var(--c-villain)}
.vbar b{text-align:right}
.vfacts{display:grid;gap:16px 32px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin:0}
.vfacts div{border-top:2px solid var(--c-line);padding-top:10px}
.vfacts dt{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-villain)}
.vfacts dd{margin:4px 0 0;overflow-wrap:anywhere}
.vlist{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:10px;overflow-wrap:anywhere}
@media (max-width:720px){.vtop{grid-template-columns:minmax(0,1fr)}.vbar{grid-template-columns:minmax(84px,7em) 1fr 2ch;gap:8px}}
/* home router: two answers under the hero; Build scrolls to the doors (#build), Lead goes to /leadership/ */
.s0hero .s0art{align-self:end}
.router{display:grid;gap:14px;max-width:640px}
.rt{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:18px 20px;border:3px solid var(--c-cream);background:var(--c-card);color:var(--c-cream);text-decoration:none;font-size:18px;font-weight:700;box-shadow:6px 6px 0 var(--c-hero);transition:transform .15s}
.rt:nth-child(2){box-shadow:6px 6px 0 var(--c-villain)}
.rt:hover{transform:translate(-2px,-2px)}
.rt .rk{font:400 24px/1 var(--f-fx);letter-spacing:.05em;color:var(--c-hero)}
.rt:nth-child(2) .rk{color:var(--c-villain)}
@media (prefers-reduced-motion:reduce){.rt{transition:none}}
/* Ben's page (decision-06 comic panels). Live .btn, .eyebrow, .qbubble and .caption only; orange is villains only, so panels alternate teal and cream */
.benart{position:relative;margin:0;justify-self:center;max-width:440px}
.benart img{display:block;width:100%;height:auto;border:4px solid #000;outline:4px solid var(--c-cream);background:var(--c-cream);box-shadow:14px 14px 0 var(--c-hero);transform:rotate(2deg)}
.benbubble{position:absolute;z-index:2;left:-56px;top:-10px;max-width:230px;padding:14px 18px;font-size:24px;line-height:1.1;transform:rotate(-4deg)}
.benbubble::after{left:auto;right:34px}.benbubble::before{left:auto;right:37px}
@media (max-width:860px){.benbubble{left:-6px;top:-34px;font-size:20px;max-width:190px}.benart{margin-top:30px}}
.glance{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.glance li{border:2px solid var(--c-cream);background:var(--c-card);padding:6px 12px;font-weight:700;font-size:15px;transform:rotate(var(--r,0deg))}
.glance li:nth-child(3n+2){--r:1.5deg}.glance li:nth-child(3n){--r:-1deg}
.benfigs{border-block:4px solid var(--c-g)}
h2.benk{font:400 22px/1 var(--f-fx);letter-spacing:.05em;text-transform:none;color:var(--c-g);max-width:none}
.benfigs ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px}
.benfigs li{display:flex;flex-direction:column;gap:8px;font-weight:700;font-size:15px}
.benn{font:400 clamp(38px,4.4vw,58px)/1 var(--f-head)}
.benbg{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));align-items:start}
.benquote{margin:0;background:var(--c-cream);color:var(--c-g);border:4px solid #000;box-shadow:8px 8px 0 var(--c-hero);padding:26px 28px;transform:rotate(-1deg)}
.benquote blockquote{margin:0;font:400 clamp(26px,3vw,34px)/1.1 var(--f-fx);letter-spacing:.03em}
.benquote figcaption{margin-top:12px;font-weight:700}
.bentitles{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bentitles li{border:2px solid var(--c-hero);color:var(--c-hero);padding:4px 10px;font-weight:700;font-size:14px}
.benpanels{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.benpanels.benwide{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.benpanel{display:flex;flex-direction:column;gap:6px;background:var(--c-card);border:3px solid var(--c-cream);padding:24px;box-shadow:8px 8px 0 var(--c-hero)}
.benpanel:nth-child(even){box-shadow:8px 8px 0 var(--c-cream)}
.benpanel p{margin:0;font-size:18px}
.bentag{font:400 18px/1.1 var(--f-fx);letter-spacing:.05em;color:var(--c-hero)}
.benbadges{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.benbadges li{background:var(--c-card);border:3px solid var(--c-cream);box-shadow:4px 4px 0 var(--c-hero);padding:12px 14px}
.benbadges li:nth-child(even){box-shadow:4px 4px 0 var(--c-cream)}
.benbadges a{display:inline-flex;align-items:center;min-height:44px;color:var(--c-hero);text-decoration:underline 2px;text-underline-offset:5px}
.bengh{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;margin:0;background:var(--c-card);border:3px solid var(--c-cream);box-shadow:6px 6px 0 var(--c-hero);padding:20px 24px;color:var(--c-mut)}
.bengh .benn{font-size:36px;color:var(--c-cream)}
/* the CTA question is a caption (no drawn speaker, D68) and leads somewhere: /contact/ */
.cta-ask{align-self:flex-start;transform:rotate(2deg)}
.cta-ask p{font:400 clamp(22px,2.4vw,28px)/1.15 var(--f-fx);letter-spacing:.03em}
.cta-ask a{display:inline-flex;align-items:center;min-height:44px;color:var(--c-g);text-decoration:underline 2px;text-underline-offset:5px}
/* home: the not-sure link sits at its own width under the router, not stretched by the column */
.s0other{align-self:flex-start}
/* /who-its-for/ comic (decision-07): framed hero art, jump buttons, BUILD villain loops (orange) and LEAD cream cards (teal) */
.whoart{margin:0}
.whoart img{display:block;width:100%;height:auto;border:4px solid #000;outline:4px solid var(--c-cream);box-shadow:14px 14px 0 var(--c-hero);transform:rotate(1.5deg)}
.whojump{display:flex;flex-wrap:wrap;gap:14px}
.whojump a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 16px;font:400 22px/1 var(--f-fx);letter-spacing:.05em;color:var(--c-cream);text-decoration:none;background:var(--c-card);border:3px solid var(--c-cream);box-shadow:5px 5px 0 var(--c-villain);transform:rotate(-1.5deg)}
.whojump a+a{box-shadow:5px 5px 0 var(--c-hero);transform:rotate(1.5deg)}
.whohead{display:flex;flex-wrap:wrap;align-items:baseline;gap:18px}
.whotag{display:inline-block;padding:4px 12px;border:3px solid #000;color:var(--c-g);font:400 20px/1.2 var(--f-fx);letter-spacing:.06em;transform:rotate(-3deg)}
.whotag.build{background:var(--c-villain)}.whotag.lead{background:var(--c-hero)}
.whovs{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.whov{display:flex;flex-direction:column;background:var(--c-card);color:var(--c-cream);text-decoration:none;border:3px solid var(--c-cream);box-shadow:8px 8px 0 var(--c-villain)}
.whov video{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-bottom:3px solid var(--c-cream);background:var(--c-villain)}
.whovname{align-self:flex-start;padding:12px 16px 0;font:400 19px/1.1 var(--f-fx);letter-spacing:.05em;color:var(--c-villain)}
.whov h3{padding:6px 16px 0;font-size:22px}
.whov p{margin:8px 16px 0;font-size:15px;color:var(--c-mut)}
.whogo{margin-top:auto;padding:14px 16px 16px;font:400 18px/1.1 var(--f-fx);letter-spacing:.05em}
.whols{display:grid;gap:34px 26px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));padding-top:18px}
.whol{position:relative;display:flex;flex-direction:column;background:var(--c-cream);color:var(--c-g);text-decoration:none;border:4px solid #000;padding:30px 24px 0;box-shadow:8px 8px 0 var(--c-hero)}
/* art cards keep room on the right for the image that hangs off the corner */
.whol-art{padding-right:84px}
.whol:nth-child(2){transform:rotate(-.8deg)}
.whol h3{font-size:28px;color:var(--c-g)}
.whol p{margin:12px 0 0;font-weight:700}
.whol .whogo{padding:18px 0 22px}
.whorole{position:absolute;top:-18px;left:18px;padding:2px 12px;background:var(--c-hero);border:3px solid #000;font:400 19px/1.3 var(--f-fx);letter-spacing:.05em;transform:rotate(-3deg)}
.whol-art .whohex{position:absolute;right:-14px;bottom:-18px;width:96px;height:auto;transform:rotate(6deg)}
.whol:focus-visible{outline-color:var(--c-hero)}
@media (prefers-reduced-motion:no-preference){
  .whov,.whol,.whol-art .whohex{transition:transform .15s}
  .whov:hover{transform:translate(-3px,-3px) rotate(-.6deg)}
  .whol:hover{transform:translate(-3px,-3px)}
  .whol-art:hover .whohex{transform:rotate(-4deg) scale(1.08)}
  .whov:hover .whovname{animation:whowig .35s ease-in-out 2}
  .whotag{animation:whopop .5s cubic-bezier(.2,1.6,.4,1) both}
  @keyframes whowig{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
  @keyframes whopop{from{transform:scale(.3) rotate(-12deg);opacity:0}to{transform:scale(1) rotate(-3deg);opacity:1}}
  /* bonus-round cut-scene (assets/journey.js adds .rip on a villain card click): the page tears, the loop bursts in, the name stamps */
  .rip{position:fixed;inset:0;z-index:99;display:none;pointer-events:none;overflow:hidden;background:var(--c-villain) radial-gradient(rgba(8,12,16,.18) 2px,transparent 2px) 0 0/16px 16px}
  .rip.on{display:block}
  .rip-half{position:absolute;inset:0;background:var(--c-g)}
  .rip-l{clip-path:polygon(0 0,52% 0,47% 9%,54% 18%,46% 29%,53% 41%,45% 52%,52% 63%,46% 74%,53% 86%,48% 100%,0 100%)}
  .rip-r{clip-path:polygon(52% 0,100% 0,100% 100%,48% 100%,53% 86%,46% 74%,52% 63%,45% 52%,53% 41%,46% 29%,54% 18%,47% 9%)}
  .rip.on .rip-l{animation:ripl .55s cubic-bezier(.6,0,.4,1) forwards}
  .rip.on .rip-r{animation:ripr .55s cubic-bezier(.6,0,.4,1) forwards}
  .rip video{position:absolute;left:50%;top:46%;width:min(70vw,620px);transform:translate(-50%,-50%) scale(.2) rotate(-8deg);border:5px solid #000;box-shadow:14px 14px 0 #000;opacity:0}
  .rip.on video{animation:ripburst .5s .35s cubic-bezier(.2,1.5,.4,1) forwards}
  .rip-title{position:absolute;left:50%;bottom:9%;margin:0;white-space:nowrap;font:400 clamp(34px,6vw,72px)/1 var(--f-fx);letter-spacing:.05em;color:var(--c-cream);-webkit-text-stroke:3px #000;text-shadow:6px 6px 0 #000;transform:translateX(-50%) scale(2.4) rotate(-4deg);opacity:0}
  .rip.on .rip-title{animation:ripstamp .3s .75s cubic-bezier(.2,1.6,.4,1) forwards}
  @keyframes ripl{to{transform:translateX(-62%) rotate(-9deg)}}
  @keyframes ripr{to{transform:translateX(62%) rotate(9deg)}}
  @keyframes ripburst{to{transform:translate(-50%,-50%) scale(1) rotate(-2deg);opacity:1}}
  @keyframes ripstamp{to{transform:translateX(-50%) scale(1) rotate(-4deg);opacity:1}}
}
/* Get my plan step 5: native fields (type=email, autocomplete) on the paper card, and the plain-words messages under a field or the button */
.paper .bfield input{font:inherit;padding:10px;border:2px solid #4b5b60;border-radius:6px;background:#fff;color:var(--c-g)}
.berr{margin:0;font-weight:700;color:var(--c-villain)}
.paper .berr{color:#a33a00}
.berr[hidden]{display:none}