/* Explain My Pitch brand tokens (hand-edited; brand/README.md). Contrast pairs (WCAG 2.2):
   charcoal on ground 13.5:1; muted on ground 6.2:1; indigo on white 7.7:1, white on indigo 7.7:1;
   ink on coral 5.9:1 (the primary button); coral-deep on white 6.4:1, on ground 6.0:1;
   on-ink on ink 10.3:1; lilac on ink 8.8:1; coral on ink 5.9:1, on ink-raised 4.9:1. */
:root {
  --emp-ink: #1B1530;
  --emp-ink-raised: #2A2250;
  --emp-ground: #F7F6FB;
  --emp-panel: #EEEBFF;
  --emp-white: #FFFFFF;
  --emp-charcoal: #2B2738;
  --emp-muted: #5E5970;
  --emp-indigo: #4535D6;
  --emp-lilac: #B7AEFF;
  --emp-on-ink: #C8C2E6;
  --emp-coral: #FF5F6B;
  --emp-coral-deep: #B4253A;
  --emp-rule: #DEDAEE;
  --emp-sans: "Inter", system-ui, sans-serif;
  --emp-display: "Fraunces", Georgia, serif;
}
@font-face {
  font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/Inter-Regular.subset.c4661c0f.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/assets/fonts/Inter-SemiBold.subset.0acba394.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/assets/fonts/Fraunces-SemiBold.subset.761bc13b.woff2") format("woff2");
}
/* Explain My Pitch: the design system (spec 1.2).
   build.mjs prepends brand/tokens.css (the --emp-* 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 {
  /* The alias names are the shared app's (kept so every component rule and script carries over);
     the values are Explain My Pitch's tokens (brand/tokens.css). "navy" is the ink, "amber" the
     coral accent, "paper" the cool ground, "blue" the indigo. */
  --navy: var(--emp-ink);
  --navy-raised: var(--emp-ink-raised);
  --paper: var(--emp-ground);
  --panel: var(--emp-panel);
  --white: var(--emp-white);
  --charcoal: var(--emp-charcoal);
  --muted: var(--emp-muted);
  --amber: var(--emp-coral);            /* accent on ink (5.9:1) and the primary button fill; never text on light */
  --amber-deep: var(--emp-coral-deep);  /* accent on ground and white; text-safe (6.0:1) */
  --blue: var(--emp-indigo);            /* links and highlights on light (7.2:1) */
  --on-navy-2: var(--emp-on-ink);       /* secondary text on ink (10.3:1) */
  --lilac: var(--emp-lilac);
  --rule: var(--emp-rule);              /* hairlines only, never text */
  --wrap: 70rem;
  --radius: 16px;
  --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(--emp-sans, "Inter"), 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: #000; 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: #000; }
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): indigo on the white card and in the white nav dropdown
   (7.7:1 on white). Decorative background images; the heading names
   the audience. .audience-founders (light bulb), .audience-sales (rising chart),
   .audience-grants (trophy), .audience-internal (presentation screen). */
.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; }
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; }
.audiences > li.audience-founders > 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='%234535D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6a9 9 0 0 0-5 16.5V27h10v-4.5A9 9 0 0 0 20 6z'/%3E%3Cpath d='M16 31h8M17 35h6M20 15v6'/%3E%3C/svg%3E"); }
.audiences > li.audience-sales > 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='%234535D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 33V18M35 33V18M5 33h30'/%3E%3Cpath d='M10 27l7-7 5 4 9-10'/%3E%3Cpath d='M26 14h5v5'/%3E%3C/svg%3E"); }
.audiences > li.audience-grants > 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='%234535D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 7h14v8a7 7 0 0 1-14 0z'/%3E%3Cpath d='M13 10H8a4 4 0 0 0 5 6M27 10h5a4 4 0 0 1-5 6M20 22v6M14 33h12M16 28h8v5h-8z'/%3E%3C/svg%3E"); }
.audiences > li.audience-internal > 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='%234535D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='9' width='28' height='18' rx='2.5'/%3E%3Cpath d='M14 33h12M20 27v6M11 21l5-5 4 3 6-6'/%3E%3C/svg%3E"); }
header.site details.nav-group li.audience-founders > a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%234535D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6a9 9 0 0 0-5 16.5V27h10v-4.5A9 9 0 0 0 20 6z'/%3E%3Cpath d='M16 31h8M17 35h6M20 15v6'/%3E%3C/svg%3E"); }
header.site details.nav-group li.audience-sales > a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%234535D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 33V18M35 33V18M5 33h30'/%3E%3Cpath d='M10 27l7-7 5 4 9-10'/%3E%3Cpath d='M26 14h5v5'/%3E%3C/svg%3E"); }
header.site details.nav-group li.audience-grants > a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%234535D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 7h14v8a7 7 0 0 1-14 0z'/%3E%3Cpath d='M13 10H8a4 4 0 0 0 5 6M27 10h5a4 4 0 0 1-5 6M20 22v6M14 33h12M16 28h8v5h-8z'/%3E%3C/svg%3E"); }
header.site details.nav-group li.audience-internal > a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%234535D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='9' width='28' height='18' rx='2.5'/%3E%3Cpath d='M14 33h12M20 27v6M11 21l5-5 4 3 6-6'/%3E%3C/svg%3E"); }

/* ================================================================ Explain My Pitch look
   The shared components above, restyled for people who pitch: a light, open page (white header,
   cool ground) so the one coral button is the thing the eye finds; ink "stage" bands with an
   indigo spotlight for the hero and the closing ask; Fraunces for headlines (a storyteller's
   serif), Inter for reading. Every colour is a token pair listed in brand/tokens.css. */
h1, h2, h3, .price, .stat .v { font-family: var(--emp-display); font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: 1.18rem; }
h4, .footer-heading, .video-card-title, .brand-name { font-family: var(--emp-sans); }
a { color: var(--blue); text-decoration-color: color-mix(in srgb, var(--blue) 45%, transparent); }
a:hover { color: var(--navy); text-decoration-color: var(--amber); }
.eyebrow { color: var(--blue); letter-spacing: .1em; }
.eyebrow::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%;
  background: var(--amber); margin-right: .55em; vertical-align: .08em; }
:focus-visible { outline-color: var(--blue); }

/* Header: white, with the on-light logo; the current page is underlined in coral. */
header.site { background: var(--white); border-bottom: 1px solid var(--rule); }
header.site nav a, header.site details.nav-group summary { color: var(--charcoal); }
header.site nav a:hover, header.site nav a[aria-current="page"],
header.site details.nav-group summary:hover, header.site details.nav-group[open] summary,
header.site details.nav-group.current summary { color: var(--navy); }
header.site :focus-visible { outline-color: var(--blue); }
header.site details.nav-group ul { background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--amber);
  box-shadow: 0 14px 30px rgba(27, 21, 48, .14); }
header.site details.nav-group li a { color: var(--navy); }
header.site details.nav-group li a:hover, header.site details.nav-group li a[aria-current="page"] { background: var(--panel); }
header.site details.nav-group .nav-note { color: var(--muted); }
.nav-account a.signin { color: var(--navy); }
header.site .cta:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* The stage: ink with an indigo spotlight from above and a faint coral wash below. */
.hero, section.band.navy {
  background:
    radial-gradient(ellipse 70% 90% at 78% -10%, rgba(69, 53, 214, .55), transparent 62%),
    radial-gradient(ellipse 50% 60% at 0% 110%, rgba(255, 95, 107, .16), transparent 60%),
    var(--navy);
}
.hero .eyebrow { color: var(--lilac); }
.hero h1 { letter-spacing: -0.02em; }
.hero-points li { background: rgba(255, 255, 255, .06); border-left-color: var(--amber); }
.hero :focus-visible, section.band.navy :focus-visible, footer.site :focus-visible, .card.dark :focus-visible { outline-color: var(--amber); }
section.band.navy .eyebrow { color: var(--lilac); }

/* Cards: soft lift instead of hard rules; the "accent" card gets an indigo top edge. */
.card { border-color: var(--rule); box-shadow: 0 1px 2px rgba(27, 21, 48, .05), 0 8px 24px rgba(27, 21, 48, .05); }
.card.accent { border-top: 4px solid var(--blue); }
section.band.panel { background: var(--panel); }
.checks li::before { border-color: var(--blue); }
.flow .n { background: var(--amber); color: var(--navy); font-family: var(--emp-display); }

/* Prices: the featured tier is outlined in indigo, its flag indigo with white text. */
.tier.featured { border-color: var(--blue); box-shadow: 0 10px 30px rgba(69, 53, 214, .14); }
.tier .flag { background: var(--blue); }
.price { color: var(--navy); }

/* Secondary buttons are ink outlines; the coral primary is the only filled button on a page. */
.cta:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.cta.secondary { border-color: var(--navy); }

/* Footer: the ink stage again, so every page ends where the hero began. */
footer.site { border-top: 0; }
footer.site a { text-decoration-color: var(--amber); }