/* Generated by brand/build.py from brand/tokens.json. Do not edit. */
:root {
  --eap-navy: #14213D;
  --eap-navy-raised: #1F3157;
  --eap-paper: #F7F4EC;
  --eap-white: #FFFFFF;
  --eap-black: #000000;
  --eap-charcoal: #2A2E35;
  --eap-muted: #5B6475;
  --eap-amber: #E0A33A;
  --eap-amber-deep: #8F5A12;
  --eap-blue: #3C6FB6;
  --eap-pack-muted: #B9C2D3;
  --eap-sans: "IBM Plex Sans", system-ui, sans-serif;
  --eap-serif: "IBM Plex Serif", Georgia, serif;
}
@font-face {
  font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/IBMPlexSans-Regular.975dcda3.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/assets/fonts/IBMPlexSans-SemiBold.a20caf82.ttf") format("truetype");
}
/* Explain a Paper: the design system (spec 1.2).
   build.mjs prepends brand/tokens.css (the --eap-* custom properties) and the @font-face rules
   for the fonts it copies from brand/fonts, so every colour here is an alias of a brand token.
   Do not introduce new colours: each text pair used below is one of the passing pairs in
   brand/contrast.md (WCAG 2.2 AA), noted beside the rule where it matters.

   Components, in order: base and type; header and nav (with the sign-in slot); hero; bands,
   cards and grids; buttons (pill CTAs); the four-step flow; the tier grid and price blocks;
   forms with field-level errors; notices; status badges; the film-timeline stepper; tables;
   the dashboard layout; FAQ; legal pages; footer. */

:root {
  --navy: var(--eap-navy);
  --navy-raised: var(--eap-navy-raised);
  --paper: var(--eap-paper);
  --white: var(--eap-white);
  --charcoal: var(--eap-charcoal);
  --muted: var(--eap-muted);
  --amber: var(--eap-amber);            /* accent on navy (7.20:1); never text on paper */
  --amber-deep: var(--eap-amber-deep);  /* accent on paper and white; text-safe (5.25:1) */
  --blue: var(--eap-blue);              /* text on paper (4.61:1); graphic on navy (3.15:1) */
  --on-navy-2: var(--eap-pack-muted);   /* secondary text on navy (8.91:1) */
  --rule: #DDD8CC;                      /* hairlines only, never text */
  --wrap: 68rem;
  --radius: 12px;
  --tap: 44px;                          /* WCAG 2.2 target size, kept above the AA minimum */
}

/* ---------------------------------------------------------------- base and type */
* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--charcoal);
  font: 17px/1.65 var(--eap-sans, "IBM Plex Sans"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
main { flex: 1; }
img { max-width: 100%; height: auto; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.narrow { max-width: 46rem; }
h1, h2, h3, h4 { color: var(--navy); line-height: 1.15; letter-spacing: -0.015em; font-weight: 600; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.45rem, 3vw, 2rem); margin-top: 0; }
h3 { font-size: 1.12rem; margin-top: 1.6em; }
p, li, dd, td, th { color: var(--charcoal); }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2rem; }
li { margin-bottom: .4em; }
a { color: var(--navy); text-decoration-color: var(--amber-deep); text-underline-offset: 3px; }
a:hover { color: var(--amber-deep); }
.hint, .muted { color: var(--muted); font-size: .94rem; }
.lede { font-size: 1.15rem; max-width: 60ch; }
.eyebrow { display: inline-block; color: var(--amber-deep); font-weight: 600; letter-spacing: .08em;
           text-transform: uppercase; font-size: .82rem; margin: 0 0 .9rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
                   clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* A visible focus ring everywhere (WCAG 2.4.7, 2.4.11): amber-deep on light grounds, amber on navy. */
:focus-visible { outline: 3px solid var(--amber-deep); outline-offset: 3px; border-radius: 4px; }
header.site :focus-visible, .hero :focus-visible, footer.site :focus-visible,
.card.dark :focus-visible { outline-color: var(--amber); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--amber); color: var(--navy);
        font-weight: 600; padding: .6rem 1rem; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- header and nav */
header.site { background: var(--navy); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1.5rem;
                    padding-block: 10px; flex-wrap: wrap; }
/* The logo art carries its own navy margin, so it sits a little taller than the type it sets. */
header.site .brand { display: flex; align-items: center; min-height: var(--tap); }
header.site .brand img { display: block; height: 46px; width: auto; }
header.site nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .2rem; }
header.site nav a {
  color: var(--on-navy-2); text-decoration: none; font-size: .95rem;
  display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: .6rem;
}
header.site nav a:hover, header.site nav a[aria-current="page"] { color: var(--white); }
header.site nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--amber);
                                          text-underline-offset: 6px; text-decoration-thickness: 2px; }
/* "Who it's for": a native <details> disclosure (build.mjs navHtml; js/nav.js adds Escape and
   click-outside). Overrides the FAQ's details rules. The panel is navy-raised, so its text pairs
   are the header's own (white and on-navy-2 on navy-raised). */
header.site details.nav-group { position: relative; border: 0; }
header.site details.nav-group > :not(summary) { margin: 0; }
header.site details.nav-group summary {
  display: inline-flex; align-items: center; gap: .35rem; min-height: var(--tap); padding: 0 .6rem;
  color: var(--on-navy-2); font-weight: 400; font-size: .95rem; list-style: none; cursor: pointer; }
header.site details.nav-group summary::after {
  content: ""; width: .45em; height: .45em; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: translateY(-.15em) rotate(45deg); transition: transform .15s; font-size: 1rem; }
header.site details.nav-group[open] summary::after { transform: translateY(.1em) rotate(-135deg); }
header.site details.nav-group summary:hover, header.site details.nav-group[open] summary { color: var(--white); }
header.site details.nav-group.current summary { color: var(--white); text-decoration: underline;
  text-decoration-color: var(--amber); text-underline-offset: 6px; text-decoration-thickness: 2px; }
header.site details.nav-group ul {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: max-content; max-width: min(22rem, 90vw);
  list-style: none; margin: 0; padding: .4rem; background: var(--navy-raised); border-radius: var(--radius);
  border-top: 3px solid var(--amber); box-shadow: 0 12px 28px rgba(0, 0, 0, .28); }
header.site details.nav-group li { margin: 0; }
header.site details.nav-group li a { display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: .45rem .8rem; border-radius: 8px; color: var(--white); line-height: 1.3; }
header.site details.nav-group li a:hover { background: var(--navy); }
header.site details.nav-group li a[aria-current="page"] { text-decoration: none; background: var(--navy);
  box-shadow: inset 3px 0 0 var(--amber); }
header.site details.nav-group .nav-note { color: var(--on-navy-2); font-size: .84rem; }

/* The account slot: "Register interest" while ordering is closed, "Sign in" or "Account" once
   it opens (layout.html, <!--ordering-open--> block). */
.nav-account { display: flex; align-items: center; gap: .5rem; }
.nav-account a.signin { color: var(--white); text-decoration: none; min-height: var(--tap);
                        display: inline-flex; align-items: center; padding-inline: .6rem; }
.nav-account a.signin:hover { text-decoration: underline; text-decoration-color: var(--amber); }
.nav-account .cta { margin-top: 0; min-height: 40px; padding: .45rem 1.1rem; font-size: .95rem; }
.header-links { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem 1rem; }

@media (max-width: 900px) {
  header.site .wrap { padding-block: 8px 4px; }
  .header-links { width: 100%; justify-content: space-between; }
  header.site nav { margin-left: -.6rem; }
}
@media (max-width: 560px) {
  header.site .brand img { height: 38px; }
  header.site nav a { font-size: .9rem; padding-inline: .5rem; }
  .nav-account { width: 100%; padding-bottom: 8px; }
}

/* ---------------------------------------------------------------- hero */
.hero { background: var(--navy); color: var(--paper); padding-block: clamp(3rem, 8vw, 5.5rem); }
.hero h1 { color: var(--white); max-width: 20ch; }
.hero .eyebrow { color: var(--amber); }                       /* amber on navy, 7.20:1 */
.hero p { color: var(--on-navy-2); font-size: 1.12rem; max-width: 60ch; }
.hero p.lede { color: var(--paper); font-size: 1.22rem; }
.hero a:not(.cta) { color: var(--white); text-decoration-color: var(--amber); }
.hero a:not(.cta):hover { color: var(--amber); }
.hero.compact { padding-block: clamp(2.5rem, 6vw, 4rem); }
.hero-split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .hero-split { grid-template-columns: 1.35fr 1fr; } }
.hero-points { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.hero-points li { background: var(--navy-raised); border-radius: var(--radius); padding: 1rem 1.2rem;
                  color: var(--on-navy-2); margin: 0; border-left: 4px solid var(--amber); }
.hero-points strong { color: var(--white); display: block; font-weight: 600; }

/* ---------------------------------------------------------------- bands, cards and grids */
section.band { padding-block: clamp(2.75rem, 6vw, 4.25rem); }
section.band + section.band { border-top: 1px solid var(--rule); }
section.band.white { background: var(--white); }
section.band.navy { background: var(--navy); }
section.band.navy h2, section.band.navy h3 { color: var(--white); }
section.band.navy p { color: var(--on-navy-2); }
.section-head { max-width: 62ch; margin-bottom: 1.8rem; }
.section-head p { font-size: 1.05rem; }

.grid { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .grid.two { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .grid.three { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid.four { grid-template-columns: repeat(4, 1fr); } }

.card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.4rem 1.5rem; }
.card h3 { margin-top: 0; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card.dark { background: var(--navy); border-color: var(--navy); }
.card.dark h2, .card.dark h3, .card.dark h4 { color: var(--white); }
.card.dark p, .card.dark li { color: var(--on-navy-2); }
.card.accent { border-top: 4px solid var(--amber-deep); }
.checks { list-style: none; padding: 0; margin: 0 0 1em; }
.checks li { position: relative; padding-left: 1.6rem; }
.checks li::before { content: ""; position: absolute; left: .1rem; top: .5em; width: .7rem; height: .38rem;
                     border-left: 2px solid var(--amber-deep); border-bottom: 2px solid var(--amber-deep);
                     transform: rotate(-45deg); }
.card.dark .checks li::before { border-color: var(--amber); }

/* ---------------------------------------------------------------- buttons (pill CTAs) */
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; align-items: center; }
.cta, button.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: var(--tap); padding: .65rem 1.4rem; border-radius: 999px; border: 2px solid var(--amber);
  background: var(--amber); color: var(--navy); font: inherit; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; margin-top: .5rem; white-space: nowrap;
}
.cta:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.hero .cta:hover, section.band.navy .cta:hover, .card.dark .cta:hover,
header.site .cta:hover { background: var(--white); border-color: var(--white); color: var(--navy); }
.cta.secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.cta.secondary:hover { background: var(--navy); color: var(--white); }
.hero .cta.secondary, section.band.navy .cta.secondary, .card.dark .cta.secondary {
  color: var(--white); border-color: var(--on-navy-2); }
.hero .cta.secondary:hover, .card.dark .cta.secondary:hover { color: var(--navy); }
.cta-row .cta { margin-top: 0; }
.cta-row + .hint { margin-top: 1rem; }
.cta[disabled], .cta[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }

/* ---------------------------------------------------------------- the four-step flow */
.flow { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; counter-reset: step; }
@media (min-width: 700px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .flow.four { grid-template-columns: repeat(4, 1fr); } }
/* The number and the heading sit on one line; everything after them spans the card. */
.flow > li { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem;
             align-items: center; align-content: start; }
.flow > li > :not(.n):not(h3) { grid-column: 1 / -1; }
.flow .n { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem;
           border-radius: 50%; background: var(--navy); color: var(--amber); font-weight: 600; }
.flow h3 { margin: 0; }
.flow > li > h3 + * { margin-top: .8rem; }

/* ---------------------------------------------------------------- tier grid and prices */
.tier-grid { display: grid; gap: 1.25rem; }
@media (min-width: 620px) { .tier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .tier-grid { grid-template-columns: repeat(3, 1fr); } }
.tier { display: flex; flex-direction: column; gap: .35rem; }
.tier h3 { margin: 0; }
.tier .grants { color: var(--muted); font-size: .95rem; margin: 0; }
.tier > p { flex: 1; }
.tier > p.price, .tier > p.grants { flex: none; }
.tier .cta { align-self: flex-start; }
.tier.featured { border: 2px solid var(--navy); position: relative; }
.tier .flag { position: absolute; top: -.85rem; left: 1.5rem; background: var(--navy); color: var(--white);
              font-size: .8rem; font-weight: 600; padding: .15rem .7rem; border-radius: 999px; }
.price { font-size: clamp(2rem, 4.5vw, 2.5rem); font-weight: 600; letter-spacing: -.03em; color: var(--navy);
         line-height: 1.1; margin: .4rem 0 .2rem; }
.price .unit { font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
/* The VAT-inclusive figure always sits directly below the ex-VAT price (spec 1.3). */
.inc-vat { display: block; color: var(--muted); font-size: .9rem; margin: 0 0 .6rem; }
.card.dark .price { color: var(--white); }
.card.dark .inc-vat, .card.dark .price .unit { color: var(--on-navy-2); }

.enterprise { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 860px) { .enterprise { grid-template-columns: 1.4fr 1fr; } }
.enterprise .options { background: var(--navy-raised); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.enterprise .options h4 { color: var(--white); margin: 0 0 .5rem; font-size: 1rem; }
.enterprise .options p { margin-bottom: .6rem; }

.addons { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .addons { grid-template-columns: repeat(2, 1fr); } }
.addon { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.addon > div:first-child { flex: 1 1 16rem; }
.addon .price { font-size: 1.7rem; margin-top: 0; }

/* ---------------------------------------------------------------- forms, field-level errors
   Matches skillpublisher's API shape: a 400 returns {error, fields: {name: message}}, and the
   script writes each message into the .err under its field and sets aria-invalid on the input.
   The .err is referenced by the input's aria-describedby, so it is read with the field. */
form { max-width: 40rem; }
.field { margin-bottom: 1.15rem; }
.field label, .field legend { display: block; font-weight: 600; color: var(--navy); margin-bottom: .35rem; }
.field .opt { font-weight: 400; color: var(--muted); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%; min-height: var(--tap); padding: .6rem .8rem; font: inherit; color: var(--charcoal);
  background: var(--white); border: 1.5px solid var(--muted); border-radius: 8px;
}
textarea { min-height: 8rem; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; accent-color: var(--navy); margin: .2rem .6rem 0 0; flex: none; }
.check { display: flex; align-items: flex-start; min-height: var(--tap); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--navy); }
.field .hint { margin: .35rem 0 0; }
/* Colour is never the only signal: the input gets a thick border and the message a label. */
[aria-invalid="true"] { border-color: var(--amber-deep) !important; border-width: 3px !important; }
.err { color: var(--amber-deep); font-size: .92rem; font-weight: 600; margin: .35rem 0 0; }
.err:empty { display: none; }
.err:not(:empty)::before { content: "Error: "; }
.hp { position: absolute; left: -9999px; }
fieldset { border: 0; padding: 0; margin: 0 0 1.15rem; }

/* ---------------------------------------------------------------- notices */
.notice { border-radius: 10px; padding: .85rem 1.1rem; margin: 0 0 1.2rem; border: 1px solid var(--rule);
          border-left-width: 5px; background: var(--white); color: var(--charcoal); }
.notice.bad { border-left-color: var(--amber-deep); }
.notice.ok { border-left-color: var(--blue); }
.notice.info { border-left-color: var(--navy); }
.notice strong { color: var(--navy); }

/* A button that reads as an inline link (the "What does this mean?" opener). */
button.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--blue);
                 text-decoration: underline; cursor: pointer; min-height: 24px; }  /* blue on white/paper, 4.61:1 */
button.linkish:hover { color: var(--navy); }

/* The explainer dialog (native <dialog>, opened modally by order.js). */
dialog.explainer { max-width: 36rem; width: calc(100% - 2rem); border: 1px solid var(--rule); border-radius: var(--radius);
                   padding: 1.25rem 1.5rem; background: var(--white); color: var(--charcoal); }
dialog.explainer::backdrop { background: color-mix(in srgb, var(--navy) 60%, transparent); }
dialog.explainer h2 { margin-top: 0; }
dialog.explainer h3 { margin: 1rem 0 .35rem; }

/* ---------------------------------------------------------------- status badges
   A badge always carries its text label ("Waiting for you", "With us", "Delivered"): the colour
   only reinforces it. Every pair is from brand/contrast.md. */
.badge { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .15rem .75rem;
         font-size: .85rem; font-weight: 600; line-height: 1.6; border: 1.5px solid currentColor;
         background: var(--white); color: var(--navy); white-space: nowrap; }
.badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.badge.you { background: var(--amber); border-color: var(--amber); color: var(--navy); }          /* waiting for you */
.badge.us { background: var(--navy); border-color: var(--navy); color: var(--white); }            /* with us */
.badge.us::before { background: var(--amber); }
.badge.done { color: var(--blue); background: var(--paper); }                                    /* delivered */
.badge.muted { color: var(--muted); background: var(--paper); }                                  /* draft, lapsed, cancelled */
.badge.warn { color: var(--amber-deep); background: var(--paper); }                              /* on hold, past due */

/* ---------------------------------------------------------------- film-timeline stepper
   <ol class="timeline"><li class="done">…</li><li class="current" aria-current="step">…</li><li>…</li></ol>
   The state is also in the text ("Done", "Now"), so the markers are decoration. */
.timeline { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.timeline > li { position: relative; padding: 0 0 1.25rem 2.4rem; margin: 0; }
.timeline > li::before { content: ""; position: absolute; left: .45rem; top: .35rem; width: 1rem; height: 1rem;
                         border-radius: 50%; border: 2px solid var(--muted); background: var(--paper); }
.timeline > li::after { content: ""; position: absolute; left: .9rem; top: 1.55rem; bottom: .1rem; width: 2px; background: var(--rule); }
.timeline > li:last-child::after { content: none; }
.timeline > li.done::before { background: var(--navy); border-color: var(--navy); }
.timeline > li.done::after { background: var(--navy); }
.timeline > li.current::before { background: var(--amber); border-color: var(--navy); box-shadow: 0 0 0 4px var(--white); }
.timeline .step { font-weight: 600; color: var(--navy); display: block; }
.timeline .when { color: var(--muted); font-size: .9rem; }
.timeline > li:not(.done):not(.current) .step { color: var(--muted); font-weight: 400; }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; margin: 0 0 1.5rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { color: var(--navy); font-weight: 600; background: var(--paper); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- dashboard layout
   <div class="dash wrap"><aside class="dash-nav">…</aside><div class="dash-main">…</div></div> */
.dash { display: grid; gap: 1.5rem; padding-block: clamp(1.5rem, 4vw, 2.5rem); }
@media (min-width: 900px) { .dash { grid-template-columns: 14rem 1fr; } }
.dash-nav { display: flex; flex-wrap: wrap; gap: .25rem; align-content: start; }
@media (min-width: 900px) { .dash-nav { flex-direction: column; } }
.dash-nav a { display: flex; align-items: center; min-height: var(--tap); padding: 0 .9rem; border-radius: 8px;
              text-decoration: none; color: var(--navy); }
.dash-nav a:hover { background: var(--white); }
.dash-nav a[aria-current="page"] { background: var(--navy); color: var(--white); }
.dash-main { min-width: 0; }
.dash-head { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.dash-head h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0; }
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-bottom: 1.5rem; }
.stat { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.2rem; }
.stat .v { display: block; font-size: 1.8rem; font-weight: 600; color: var(--navy); line-height: 1.2; }
.stat .k { color: var(--muted); font-size: .9rem; }

/* ---------------------------------------------------------------- FAQ */
.faq-group { margin-top: 2.2rem; }
.faq-group:first-of-type { margin-top: .5rem; }
details { border-top: 1px solid var(--rule); }
details:last-of-type { border-bottom: 1px solid var(--rule); }
details summary { cursor: pointer; font-weight: 600; color: var(--navy); min-height: var(--tap);
                  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--amber-deep); line-height: 1; }
details[open] summary::after { content: "\2212"; }
details > :not(summary) { margin: 0 0 1rem; }

/* ---------------------------------------------------------------- legal pages */
.legal { padding-block: clamp(2.5rem, 6vw, 4rem); }
.legal h2 { margin-top: 1.6em; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .5em; }
dl.details { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin: 0 0 1.2em; }
dl.details dt { color: var(--muted); }
dl.details dd { margin: 0; }
@media (max-width: 560px) { dl.details { grid-template-columns: 1fr; } dl.details dd { margin-bottom: .6rem; } }

/* ---------------------------------------------------------------- footer */
footer.site { background: var(--navy); color: var(--on-navy-2); font-size: .92rem; border-top: 1px solid var(--navy-raised); }
footer.site p { color: var(--on-navy-2); margin: 0; }
/* Two columns like sosx.ai: identity, links and small print on the left; "Keep in touch" on the
   right behind a divider. On a phone they stack, identity first. */
footer.site .footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-block: 2.5rem; }
@media (min-width: 900px) { footer.site .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); } }
footer.site .footer-brand img { display: block; height: 40px; width: auto; }
footer.site .footer-tagline { margin-top: .5rem; }
footer.site nav { margin-top: 1.5rem; }
footer.site .footer-links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; list-style: none; margin: 0; padding: 0; }
footer.site li { margin: 0; }
footer.site .footer-links a { text-decoration: none; }
footer.site .footer-links a:hover, footer.site .footer-links a:focus-visible { text-decoration: underline; }
footer.site a { color: var(--white); text-decoration-color: var(--amber); display: inline-flex; align-items: center; min-height: var(--tap); }
footer.site a:hover { color: var(--amber); }
footer.site .footer-small { margin-top: 1.75rem; display: grid; gap: .25rem; }
footer.site .footer-small a { display: inline; min-height: 0; }
footer.site .footer-side { border-top: 1px solid var(--navy-raised); padding-top: 2rem; }
@media (min-width: 900px) { footer.site .footer-side { border-top: 0; padding-top: 0; border-left: 1px solid var(--navy-raised); padding-left: 2.5rem; } }
footer.site .footer-heading { color: var(--white); font-size: 1.05rem; margin: 0 0 .4rem; }
footer.site .footer-side p + p { margin-top: 1rem; }
footer.site .footer-side .cta { color: var(--navy); }
footer.site .footer-side .cta:hover { color: var(--navy); }
footer.site .footer-small-line { font-size: .85rem; }
/* The newsletter sign-up (functions/_lib/newsletter.js). The promise under the form stays
   readable at small size: it is what makes the consent honest, not decoration. */
footer.site .subscribe { max-width: none; margin-top: 1rem; }
footer.site .subscribe label { display: block; color: var(--white); font-weight: 600; margin-bottom: .35rem; }
footer.site .subscribe-row { display: flex; flex-wrap: wrap; gap: .6rem; }
footer.site .subscribe-row input { flex: 1 1 12rem; min-width: 0; }
footer.site .subscribe-row .cta { margin-top: 0; flex: 0 0 auto; }
footer.site .subscribe-row .cta:hover { background: var(--white); border-color: var(--white); color: var(--navy); }
footer.site .subscribe .err { color: var(--amber); }
footer.site .subscribe .form-status { color: var(--white); margin-top: .6rem; }
footer.site .subscribe .form-status:empty { display: none; }
footer.site .subscribe-promise { font-size: .82rem; line-height: 1.5; margin-top: .6rem; }
footer.site .subscribe-promise a { display: inline; min-height: 0; }
footer.site .footer-side .footer-contact { margin-top: 1.25rem; }
footer.site .footer-contact a { display: inline; min-height: 0; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* ---------------------------------------------------------------- utilities (no inline styles: the CSP forbids them) */
.after { margin-top: 1.5rem; }
section.band.navy a:not(.cta) { color: var(--white); text-decoration-color: var(--amber); }
section.band.navy a:not(.cta):hover { color: var(--amber); }
.card.dark a:not(.cta) { color: var(--white); text-decoration-color: var(--amber); }

/* ---------- film style options: voice and layout pickers (film-style-options §6) ---------- */
.voice-group { border: 0; padding: 0; margin: 0 0 1rem; }
.voice-group legend { font-weight: 600; display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
img.flag { width: 24px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(20, 33, 61, .15); vertical-align: middle; }
.voice-cards { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.voice-card { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  border: 1px solid var(--rule); border-radius: var(--radius); padding: .5rem .75rem; background: var(--white); }
.voice-card .check { margin: 0; display: flex; align-items: center; gap: .5rem; }
.voice-card .persona { font-weight: 600; }
.voice-card:has(input:checked) { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.play { min-width: 4.5rem; min-height: 44px; border-radius: 40px; border: 1px solid var(--navy);
  background: var(--white); color: var(--navy); font: inherit; font-size: .9rem; cursor: pointer; }
.play[aria-pressed="true"] { background: var(--navy); color: var(--white); }

.layout-cards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.layout-card { display: grid; gap: .5rem; border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .75rem; background: var(--white); cursor: pointer; }
.layout-card img { width: 100%; height: auto; border-radius: 6px; }
.layout-card span { font-size: .95rem; }
.layout-card strong { display: block; }
.layout-card:has(input:checked) { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.layout-card input:focus-visible + img { outline: 3px solid var(--amber-deep); outline-offset: 2px; }

/* The format and target-length pickers (order form): radio cards like the layout picker, without
   pictures. The whole card shows the focus ring, and they stack to one column at phone width. */
.option-cards { display: grid; gap: .75rem; grid-template-columns: 1fr; margin-bottom: .5rem; }
.field .option-card { display: flex; align-items: flex-start; gap: .6rem; border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .75rem; margin: 0; background: var(--white); cursor: pointer; min-height: var(--tap); font-weight: 400; }
.option-card input { margin-top: .3rem; flex: none; }
.option-card span { font-size: .95rem; }
.option-card strong { display: block; }
.option-card:has(input:checked) { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.option-card:has(input:focus-visible) { outline: 3px solid var(--amber-deep); outline-offset: 2px; }
.length-cards { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.order-summary { font-weight: 600; margin: 1rem 0 .25rem; }

.custom-layout { margin-top: 1rem; padding: 1rem; border-radius: var(--radius); background: var(--white); border: 1px solid var(--rule); }
.layout-preview { margin: 1rem 0 0; }
.layout-frame { position: relative; width: 100%; max-width: 32rem; aspect-ratio: 16 / 9;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; }
.layout-frame .zone { position: absolute; display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 600; color: var(--navy); border-radius: 3px; }
.zone-title { background: rgba(255, 0, 0, .35); }
.zone-text { background: rgba(0, 255, 0, .35); }
.zone-animation { background: rgba(0, 0, 255, .3); }
.zone-logo { background: rgba(255, 255, 0, .6); }
.rating-scale { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.rating-scale .check { min-height: 44px; display: inline-flex; align-items: center; gap: .35rem; }

/* ---------------------------------------------------------------- audience cards (home, "Who it's for") */
.audiences { list-style: none; padding: 0; margin: 0; }
.audiences > li { margin: 0; display: flex; flex-direction: column; }
.audiences > li h3 { margin-bottom: .6rem; }
.audiences .links { margin-top: auto; padding-top: .4rem; display: flex; flex-direction: column; gap: .2rem;
  font-weight: 600; }
.audiences .links a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ---------------------------------------------------------------- videos
   The play controls, the /videos gallery, the viewer pages and the pop-up player
   (build-videos.mjs, js/video.js). Posters are plain images; the play badge is amber on navy
   (7.20:1), drawn in CSS. */
.hero-split > :only-child { grid-column: 1 / -1; }
.hero-points.four { margin-top: 2.25rem; }
@media (min-width: 700px) { .hero-points.four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hero-points.four { grid-template-columns: repeat(4, 1fr); } }
/* The audience pages: the film beside the hero text, its three points in a row beneath. */
.hero-points.three { margin-top: 2.25rem; }
@media (min-width: 800px) { .hero-points.three { grid-template-columns: repeat(3, 1fr); } }
.hero-film { margin: 0; }
.hero-film figcaption { color: var(--on-navy-2); font-size: .95rem; margin-top: .7rem; }
.muted-on-navy { color: var(--on-navy-2); }

.video-launch { position: relative; display: block; border-radius: var(--radius); overflow: hidden;
  background: var(--navy); line-height: 0; }
.video-launch img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  transition: opacity .15s ease; }
.video-launch.portrait img, .viewer-film.portrait .video-launch img { aspect-ratio: 9 / 16; }
.hero .video-launch { box-shadow: 0 0 0 1px var(--navy-raised), 0 18px 40px rgba(0, 0, 0, .35); }
.play-badge { position: absolute; left: 50%; top: 50%; width: 4.25rem; height: 4.25rem; margin: -2.125rem 0 0 -2.125rem;
  border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px var(--navy); transition: transform .15s ease; }
.play-badge::after { content: ""; position: absolute; left: 1.7rem; top: 1.3rem; border-style: solid;
  border-width: .82rem 0 .82rem 1.3rem; border-color: transparent transparent transparent var(--navy); }
a:hover > .play-badge, a:focus-visible > .play-badge, a:hover .play-badge { transform: scale(1.08); }
a:hover > img { opacity: .9; }
.video-launch:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.video-length { position: absolute; right: .6rem; bottom: .6rem; background: var(--navy); color: var(--white);
  font-size: .85rem; line-height: 1.4; padding: .1rem .5rem; border-radius: 6px; font-variant-numeric: tabular-nums; }

/* The gallery */
.video-group + .video-group { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); }
.channels { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-weight: 600; }
.channels a { display: inline-flex; align-items: center; min-height: var(--tap); }
.video-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.video-card { margin: 0; display: flex; flex-direction: column; }
.video-card-link { text-decoration: none; display: block; }
.video-thumb { position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: var(--navy);
  line-height: 0; margin-bottom: .75rem; }
.video-thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video-card.portrait .video-thumb img { object-position: center 30%; }
.video-thumb:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.video-thumb .play-badge { width: 3.2rem; height: 3.2rem; margin: -1.6rem 0 0 -1.6rem; }
.video-thumb .play-badge::after { left: 1.25rem; top: .95rem; border-width: .64rem 0 .64rem 1rem; }
.video-card-title { display: block; color: var(--navy); font-weight: 600; font-size: 1.08rem; line-height: 1.3;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.video-card-link:hover .video-card-title, .video-card-link:focus-visible .video-card-title { text-decoration-color: var(--amber-deep); }
.video-card p { margin: .4rem 0 0; font-size: .96rem; }
.video-card .video-source { color: var(--muted); font-size: .88rem; }

/* /examples: one card per brand, its name above the video and a link to its own list beneath */
.brand-name { font-size: 1.2rem; margin: 0 0 .6rem; color: var(--navy); }
.brand-card .brand-more { margin-top: auto; padding-top: .35rem; font-weight: 600; font-size: .96rem; }
.brand-card .brand-more a { display: inline-flex; align-items: center; min-height: var(--tap); }
.brand-design { max-width: 62ch; }

/* A viewer page */
.video-view { padding-top: clamp(1.75rem, 4vw, 2.75rem); }
.crumbs { font-size: .92rem; color: var(--muted); margin-bottom: 1rem; }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); }
.video-view h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); max-width: 30ch; }
.viewer { display: grid; gap: 1.5rem 2rem; margin: 1.5rem 0 2.5rem; align-items: start; }
@media (min-width: 900px) { .viewer { grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr); } }
.viewer-film { margin: 0; }
.viewer-film figcaption { margin-top: .5rem; }
.viewer-film.portrait { max-width: 22rem; }
.viewer-side > :first-child { margin-top: 0; }
.viewer-side .cta-row { margin-top: 0; }
.disclosure p { margin: 0; font-size: .95rem; }
.share { margin-top: 1.25rem; }
.share-label { font-size: 1rem; margin: 0 0 .5rem; }
.share-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.share-list li { margin: 0; }
/* Round icon buttons; each keeps its name as hidden text and a tooltip. */
.share-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap);
  padding: 0; border-radius: 50%; border: 2px solid var(--navy); color: var(--navy); background: var(--white);
  text-decoration: none; }
.share-btn:hover, .share-btn:focus-visible { background: var(--navy); color: var(--white); }
.share-icon { display: block; width: 22px; height: 22px; }
.share-icon .share-icon-ink { fill: var(--white); }
.share-btn:hover .share-icon-ink, .share-btn:focus-visible .share-icon-ink { fill: var(--navy); }
.share-status { min-height: 1.5em; margin: .5rem 0 0; font-size: .92rem; color: var(--charcoal); }
.video-section { max-width: 46rem; margin-top: 2.5rem; }
.video-section:first-child { margin-top: 0; }
.chapters { list-style: none; padding: 0; margin: 0; columns: 2 16rem; column-gap: 2rem; }
.chapters li { margin: 0; break-inside: avoid; }
.chapters a { display: flex; gap: .75rem; align-items: center; min-height: var(--tap); }
.chapter-time { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 2.8rem; }
.transcript h3 { margin: 1.4rem 0 .35rem; font-size: 1rem; }
.citation { font-size: .96rem; }
/* An example page: one paper's versions side by side, to compare. */
.video-section.paper { max-width: none; }
.video-section.paper > p, .video-section.paper > h2 { max-width: 46rem; }
.video-section.paper + .video-section.paper { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); }
.version-grid { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; display: grid; gap: 1.5rem 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.version-card { margin: 0; }
.version-card h3 { margin: .75rem 0 .25rem; font-size: 1.08rem; }
.version-card p { margin: .25rem 0 0; font-size: .96rem; }
.version-placeholder { aspect-ratio: 16 / 9; border-radius: var(--radius); background: var(--navy-raised);
  display: flex; align-items: center; justify-content: center; color: var(--on-navy-2); font-weight: 600; font-size: 1.4rem; }
.version-transcript { margin-top: .5rem; font-size: .92rem; }
.version-transcript summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; font-weight: 600; color: var(--navy); }
.shorts-grid { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1.25rem; justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 13rem)); }
.video-section:has(> .shorts-grid) > h2, .video-section:has(> .shorts-grid) > p { text-align: center; }
/* The original paper, beside the films: a PDF thumbnail and the citation, linking to it by DOI. */
.paper-source { display: flex; gap: 1rem; align-items: flex-start; max-width: 46rem; margin: .75rem 0 1rem; padding: 1rem;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); color: inherit; text-decoration: none; }
.paper-source img { flex: none; width: 60px; height: 75px; }
.paper-source strong { display: block; color: var(--navy); text-decoration: underline; text-decoration-color: var(--amber-deep); text-underline-offset: 3px; }
.paper-source .citation, .paper-source .hint { display: block; margin-top: .3rem; }
.paper-source:hover strong { text-decoration-thickness: 2px; }
.paper-source:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.short-card { margin: 0; }
.short-card h3 { margin: .6rem 0 .25rem; font-size: 1rem; }
.short-card p { font-size: .92rem; margin: 0; }
.short-card .play-badge { width: 3.2rem; height: 3.2rem; margin: -1.6rem 0 0 -1.6rem; }
.short-card .play-badge::after { left: 1.25rem; top: .95rem; border-width: .64rem 0 .64rem 1rem; }
.video-view .video-section:has(.shorts-grid) { max-width: none; }

/* The pop-up player: a native modal <dialog>. */
dialog.film-dialog { width: min(72rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0;
  border-radius: var(--radius); background: var(--navy); color: var(--white); overflow: auto; }
dialog.film-dialog::backdrop { background: color-mix(in srgb, var(--navy) 85%, transparent); }
.film-dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .35rem .5rem .35rem 1.1rem; }
.film-dialog-title { color: var(--white); font-size: 1rem; margin: 0; line-height: 1.3; }
.film-dialog-close { flex: none; width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; background: transparent;
  color: var(--white); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.film-dialog-close:hover { background: var(--navy-raised); color: var(--amber); }
.film-dialog :focus-visible { outline-color: var(--amber); }
.film-dialog-stage { background: var(--eap-black); line-height: 0; }
.film-dialog-stage video, .film-dialog-stage iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto;
  max-height: calc(100dvh - 7rem); border: 0; background: var(--eap-black); }
dialog.film-dialog.portrait { width: min(26rem, calc(100vw - 2rem), calc((100dvh - 8rem) * 9 / 16 + 0.1px)); min-width: min(18rem, calc(100vw - 2rem)); }
dialog.film-dialog.portrait .film-dialog-stage video { aspect-ratio: 9 / 16; }
/* The pop-up on every screen. Desktop and tablet: a centred panel, the film as large as the
   window allows at its own shape. Phones, and any window too short for a panel (a phone on its
   side): the dialog fills the screen, the film centred in it, clear of notches and home bars.
   The page behind does not scroll while it is open (iOS scrolls it otherwise). */
dialog.film-dialog { max-width: none; margin: auto; }
html:has(dialog.film-dialog[open]) { overflow: hidden; }
dialog.film-dialog[open] { display: flex; flex-direction: column; }
.film-dialog-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.film-dialog-stage video, .film-dialog-stage iframe { max-width: 100%; margin: 0 auto; }
.film-dialog-stage video { object-fit: contain; }
dialog.film-dialog.portrait .film-dialog-stage iframe { aspect-ratio: 9 / 16; }
@media (max-width: 40rem), (max-height: 32rem) {
  dialog.film-dialog, dialog.film-dialog.portrait { width: 100vw; min-width: 0; height: 100dvh; max-height: 100dvh;
    border-radius: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .film-dialog-stage video, .film-dialog-stage iframe,
  dialog.film-dialog.portrait .film-dialog-stage video { width: 100%; height: auto; max-height: calc(100dvh - 4rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  dialog.film-dialog.portrait .film-dialog-stage video, dialog.film-dialog.portrait .film-dialog-stage iframe { width: auto; height: 100%; }
}
@media (max-height: 32rem) {
  /* On its side: every pixel of height for the film; the title bar stays for the close button. */
  .film-dialog-bar { padding-block: 0; }
  .film-dialog-stage video, .film-dialog-stage iframe,
  dialog.film-dialog.portrait .film-dialog-stage video, dialog.film-dialog.portrait .film-dialog-stage iframe {
    max-height: calc(100dvh - var(--tap) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); width: auto; height: 100%; }
  .film-dialog-stage video, .film-dialog-stage iframe { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) { .play-badge, .video-launch img { transition: none; } }

/* ---------------------------------------------------------------- the script editor
   /films/:id while a script is with the customer (script-editor.md). One card per scene, the
   narration and the visual note as labelled fields, and Move up / Move down buttons (no drag).
   A scene the customer changed carries a text mark as well as the amber edge. The ops console
   marks the customer's changes the same way. */
form.script-editor { max-width: 48rem; }
.scene-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 1rem; }
.scene-edit { margin: 0; }
.scene-edit.changed, .scene-final.edited { border-left: 5px solid var(--amber-deep); }
.scene-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem; margin-bottom: .6rem; }
.scene-head h3 { margin: 0; }
.mark { display: inline-block; border: 1.5px solid var(--amber-deep); color: var(--amber-deep); border-radius: 999px;
        padding: 0 .6rem; font-size: .82rem; font-weight: 600; line-height: 1.6; margin-right: .3rem; }
.scene-edit textarea { min-height: 0; }
.scene-edit .field { margin-bottom: .9rem; }
.scene-edit .field .count { margin-top: .15rem; }
.scene-tools { display: flex; flex-wrap: wrap; gap: .5rem; }
.scene-tools .cta { margin-top: 0; min-height: var(--tap); padding: .35rem .9rem; font-size: .92rem; white-space: normal; }
.script-savebar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem; }
.script-savebar .cta { margin-top: 0; }
.script-savebar .form-status { flex: 1 1 14rem; margin: 0; }
#script-length.over { color: var(--amber-deep); font-weight: 600; }
.script-final-block ol.scenes-final { padding-left: 0; list-style: none; }
.scene-final { background: var(--white); border: 1px solid var(--rule); border-radius: 8px; padding: .7rem .9rem; margin-bottom: .6rem; }
.scene-final .visual-note { background: var(--paper); border-radius: 6px; padding: .4rem .6rem; }
@media (max-width: 560px) {
  .scene-edit { padding: 1rem; }
  .scene-tools .cta { flex: 1 1 calc(50% - .5rem); }
}

/* ---------------------------------------------------------------- price comparison (/pricing#compare) */
/* The graphic on the left, the text on the right, half the width each; stacked on a phone. */
.compare { display: grid; gap: 1.5rem 2.5rem; align-items: start; }
@media (min-width: 900px) { .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } .compare .savings { margin: 0; } }
.compare-text > :first-child { margin-top: 0; }
.savings { background: var(--navy); color: var(--white); border-radius: var(--radius); padding: 1.75rem 1.5rem;
  margin: 1.25rem 0 2rem; }
.savings p { color: var(--white); margin: 0; }
.savings-kicker { color: var(--on-navy-2) !important; font-weight: 600; font-size: .95rem; }
.savings-big { font-size: clamp(2.6rem, 9vw, 4.6rem); line-height: 1.05; font-weight: 600; margin: .35rem 0 1.25rem !important; }
.savings-big strong { color: var(--amber); font-weight: 600; }
.savings-chart { display: grid; gap: 1rem; }
.bar-label { font-size: .98rem; margin-bottom: .35rem !important; }
.bar-label strong { color: var(--amber); white-space: nowrap; }
.bar { display: block; width: 100%; height: 2.2rem; }
.bar-theirs { fill: var(--navy-raised); }
.bar-theirs-low { fill: #3A4F7A; }
.bar-ours { fill: var(--amber); }
.savings-foot { color: var(--on-navy-2) !important; font-size: .9rem; margin-top: 1.1rem !important; }
.currency-switch { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.currency-label { color: var(--on-navy-2); font-size: .9rem; margin-right: .25rem; }
.currency-switch button { min-height: var(--tap); padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--on-navy-2);
  background: transparent; color: var(--white); font: inherit; font-size: .92rem; cursor: pointer; }
.currency-switch button[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--navy); font-weight: 600; }
.currency-switch button:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* Explanatory graphics
   Drawn by the explainer engine's site tableaux (site/assets/graphics/README.md): each is a navy
   panel of its own, so it reads the same on the paper and white bands. <picture> swaps in the
   portrait drawing at 760px and below, where every word stays at 14px or more down to a 390px
   phone; the landscape one is held to 56rem so its words never set larger than they need to. */
figure.graphic { margin: 2rem 0 0; max-width: 56rem; }
figure.graphic.lead { margin: 0 0 2rem; }
figure.graphic picture, figure.graphic img { display: block; width: 100%; height: auto; }
figure.graphic figcaption { color: var(--muted); font-size: .94rem; margin-top: .6rem; max-width: 62ch; }
@media (max-width: 760px) {
  figure.graphic { max-width: 34rem; }
}

/* ---------------------------------------------------------------- two-factor sign-in
   Account → Security and /auth/two-factor (two-factor.md). */
.tfa-steps { padding-left: 1.25rem; margin: 0; }
.tfa-steps > li { margin-bottom: 1.25rem; }
.tfa-qr svg { display: block; width: 13rem; height: 13rem; max-width: 100%; border: 1px solid var(--rule); border-radius: 8px; }
.tfa-secret, .tfa-code-list { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.tfa-secret { display: inline-block; font-size: 1rem; letter-spacing: .06em; word-break: break-all;
  background: var(--paper); color: var(--navy); padding: .35rem .6rem; border-radius: 6px; }
.tfa-code-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 2rem;
  padding-left: 1.8rem; font-size: 1.02rem; color: var(--navy); }
@media (max-width: 30rem) { .tfa-code-list { grid-template-columns: 1fr; } }
.tfa-action { margin-top: 1rem; border-top: 1px solid var(--rule); padding-top: .75rem; }
.tfa-action summary { cursor: pointer; font-weight: 600; color: var(--navy); min-height: var(--tap); display: flex; align-items: center; }
#tfa-form .link-button { background: none; border: 0; padding: .5rem 0; min-height: var(--tap); font: inherit; color: var(--navy);
  text-decoration: underline; text-decoration-color: var(--amber-deep); text-underline-offset: 3px; cursor: pointer; }
#tfa-form .link-button:hover { color: var(--amber-deep); }
#tfa-code { font-size: 1.4rem; letter-spacing: .3em; max-width: 12rem; }

/* ---------------------------------------------------------------- key numbers and charts (/our-numbers) */
/* Navy panels like the savings graphic on /pricing#compare; every figure is real text. */
.key-stats { background: var(--navy); color: var(--white); border-radius: var(--radius); padding: 1.5rem 1.25rem; margin: 1.5rem 0 2rem; }
.key-stats h2 { color: var(--white); margin: 0 0 1rem; font-size: 1.15rem; }
.key-stats ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.key-stats li { margin: 0; }
.ks-v { display: block; color: var(--amber); font-size: clamp(2rem, 7vw, 2.7rem); font-weight: 600; line-height: 1.1; }
.ks-k { display: block; color: var(--on-navy-2); font-size: .95rem; margin-top: .3rem; }
.key-stats .ks-note { color: var(--on-navy-2); font-size: .88rem; margin: 1.25rem 0 0; }
.key-stats a { color: var(--white); }
.charts { background: var(--navy); border-radius: var(--radius); padding: 1.25rem 1rem 1rem; margin: 0 0 2rem; }
.charts figure { margin: 0; }
.charts figcaption { color: var(--on-navy-2); font-size: .9rem; margin-top: .75rem; }
.chart-pair { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .chart-pair { grid-template-columns: 3fr 2fr; } }
.chart { display: block; width: 100%; height: auto; }
.chart text { font-family: inherit; }
.chart-grid { stroke: var(--navy-raised); stroke-width: 1; }
.chart-tick { fill: var(--on-navy-2); font-size: 13px; }
.chart-month { fill: var(--white); font-size: 15px; font-weight: 600; }
.chart-legend { fill: var(--white); font-size: 14px; }
.chart-ai { fill: var(--on-navy-2); }
.chart-ours { fill: var(--amber); }
.chart-ai.partial, .chart-ours.partial { opacity: .85; stroke: var(--white); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart-gap { fill: none; stroke: var(--white); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart-saved { fill: var(--white); font-size: 13px; }
.chart-saved-v { fill: var(--amber); font-size: 14px; font-weight: 600; }
.chart-value { fill: var(--white); font-size: 14px; font-weight: 600; }

/* ---------------------------------------------------------------- pro and con markers
   Founder, 1 Oct 2026: a green tick on boxes that state a benefit (.card.pro, or li.pro in a
   .checks or .hero-points list), a red cross on boxes that state a drawback of the
   alternatives (.card.con, li.con). Decorative: drawn by pseudo-elements, so screen readers
   get the text alone, which carries the meaning. The shapes differ (tick, cross), not only the
   colours. The circle is the token colour and the glyph is white on it: --pro 5.13:1 and --con
   6.54:1 against white (4.67:1 and 5.95:1 on paper), both above the 3:1 graphic minimum; on
   navy the circle gains a white ring, so it stands out there too. */
:root {
  --pro: #2E7D32;   /* tick circle: 5.13:1 on white, 4.67:1 on paper */
  --con: #B3261E;   /* cross circle: 6.54:1 on white, 5.95:1 on paper */
}
.card.pro > h3, .card.con > h3 { display: flex; align-items: flex-start; gap: .55rem; }
.card.pro > h3::before, .card.con > h3::before,
.hero-points li.pro > strong::before, .hero-points li.con > strong::before {
  content: ""; flex: none; width: 1.3rem; height: 1.3rem; margin-top: .12em; border-radius: 50%;
  background: var(--pro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8.2' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.card.con > h3::before, .hero-points li.con > strong::before { background: var(--con) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.8 7.8l8.4 8.4M16.2 7.8l-8.4 8.4' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.hero-points li.pro > strong, .hero-points li.con > strong { display: flex; align-items: flex-start; gap: .5rem; }
.hero-points li.pro > strong::before, .hero-points li.con > strong::before,
.card.dark.pro > h3::before, .card.dark.con > h3::before { box-shadow: 0 0 0 2px var(--white); }
.checks li.pro, .checks li.con { padding-left: 2rem; }
.checks li.pro::before, .checks li.con::before {
  left: 0; top: .22em; width: 1.3rem; height: 1.3rem; border: 0; border-radius: 50%; transform: none;
  background: var(--pro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8.2' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.checks li.con::before { background: var(--con) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.8 7.8l8.4 8.4M16.2 7.8l-8.4 8.4' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; }

/* ---------------------------------------------------------------- audience icons
   Founder, 1 Oct 2026: a line icon beside each "Who it's for" heading, in the house style
   (2px strokes, rounded joins): amber-deep on the light card (5.77:1 on white), amber in the
   navy nav dropdown (5.79:1 on navy-raised). Decorative background images; the heading names
   the audience. .audience-uni (mortarboard), .audience-research (book), .audience-industry
   (chip), .audience-public (column-fronted building), .audience-pro (briefcase). */
.audiences > li[class*="audience-"] > h3 { display: flex; align-items: center; gap: .7rem; }
.audiences > li[class*="audience-"] > h3::before { content: ""; flex: none; width: 40px; height: 40px;
  background: center / contain no-repeat; }
.audiences > li.audience-uni > h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%238F5A12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15l16-7 16 7-16 7z'/%3E%3Cpath d='M11 18.5v7c2.5 2.6 5.6 3.5 9 3.5s6.5-.9 9-3.5v-7'/%3E%3Cpath d='M36 15v9'/%3E%3C/svg%3E"); }
.audiences > li.audience-research > h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%238F5A12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11c-3.5-2.4-8.5-3-13-2v21c4.5-1 9.5-.4 13 2 3.5-2.4 8.5-3 13-2V9c-4.5-1-9.5-.4-13 2z'/%3E%3Cpath d='M20 11v21'/%3E%3C/svg%3E"); }
.audiences > li.audience-industry > h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%238F5A12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='11' y='11' width='18' height='18' rx='2'/%3E%3Crect x='16' y='16' width='8' height='8' rx='1'/%3E%3Cpath d='M16 6v5M24 6v5M16 29v5M24 29v5M6 16h5M6 24h5M29 16h5M29 24h5'/%3E%3C/svg%3E"); }
.audiences > li.audience-public > h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%238F5A12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 15l15-8 15 8z'/%3E%3Cpath d='M8 15v0M5 33h30M7 29h26M10 18v11M16 18v11M24 18v11M30 18v11'/%3E%3C/svg%3E"); }
.audiences > li.audience-pro > h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%238F5A12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='13' width='28' height='19' rx='2.5'/%3E%3Cpath d='M15 13v-3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v3M6 21h28M18 21v3h4v-3'/%3E%3C/svg%3E"); }
header.site details.nav-group li[class*="audience-"] > a { padding-left: 2.6rem; background-position: left .7rem center;
  background-size: 22px; background-repeat: no-repeat; }
header.site details.nav-group li.audience-uni > a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23E0A33A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15l16-7 16 7-16 7z'/%3E%3Cpath d='M11 18.5v7c2.5 2.6 5.6 3.5 9 3.5s6.5-.9 9-3.5v-7'/%3E%3Cpath d='M36 15v9'/%3E%3C/svg%3E"); }
header.site details.nav-group li.audience-research > a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23E0A33A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11c-3.5-2.4-8.5-3-13-2v21c4.5-1 9.5-.4 13 2 3.5-2.4 8.5-3 13-2V9c-4.5-1-9.5-.4-13 2z'/%3E%3Cpath d='M20 11v21'/%3E%3C/svg%3E"); }
header.site details.nav-group li.audience-pro > a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23E0A33A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='13' width='28' height='19' rx='2.5'/%3E%3Cpath d='M15 13v-3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v3M6 21h28M18 21v3h4v-3'/%3E%3C/svg%3E"); }