/* Explain My Charity brand tokens (hand-edited; brand/README.md). The SOSX Mentor edition scheme
   (founder, 3 Oct 2026): aubergine ground, violet, lilac and lavender, pink for decoration only.
   Every text pair the site uses is listed with its WCAG 2.2 contrast in brand/contrast.md. */
:root {
  --emc-ink: #1E1033;          /* aubergine: dark grounds, headings */
  --emc-ink-raised: #2C1A52;   /* a panel on the dark ground */
  --emc-paper: #F7F5FF;        /* the page ground */
  --emc-white: #FFFFFF;
  --emc-black: #000000;
  --emc-lilac: #EDE9FE;        /* light panels */
  --emc-text: #2A2140;         /* body text */
  --emc-muted: #5E5578;        /* secondary text on light grounds */
  --emc-lavender: #C4B5FD;     /* accent on the dark ground; never text on light grounds */
  --emc-violet: #6D28D9;       /* accent, links and buttons on light grounds */
  --emc-violet-deep: #4C1D95;  /* button hover */
  --emc-violet-mid: #7C3AED;   /* text on light grounds; graphics on the dark ground */
  --emc-on-ink: #CFC6EA;       /* secondary text on the dark ground */
  --emc-pink: #F472B6;         /* decoration only: strokes and fills, never text */
  --emc-rule: #E2DCF5;         /* hairlines only */
  --emc-display: "Outfit", system-ui, sans-serif;
  --emc-sans: "Nunito Sans", system-ui, sans-serif;
}
@font-face {
  font-family: "Nunito Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/NunitoSans-Regular.e53aa225.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito Sans"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/assets/fonts/NunitoSans-Bold.2c5ffcfe.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/assets/fonts/Outfit-SemiBold.4fec1ce2.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/assets/fonts/Outfit-Bold.f551a935.woff2") format("woff2");
}
/* Explain My Charity: the design system (spec 1.2).
   build.mjs prepends brand/tokens.css (the --emc-* 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 semantic names are Explain a Paper's; the values are this site's tokens (brand/tokens.css,
     the SOSX Mentor scheme). "navy" is the aubergine ground, "amber" the lavender accent on it and
     "amber-deep" the violet accent on light grounds. Ratios are in brand/contrast.md. */
  --navy: var(--emc-ink);
  --navy-raised: var(--emc-ink-raised);
  --paper: var(--emc-paper);
  --white: var(--emc-white);
  --charcoal: var(--emc-text);
  --muted: var(--emc-muted);
  --amber: var(--emc-lavender);         /* accent on the aubergine (9.66:1); never text on paper */
  --amber-deep: var(--emc-violet);      /* accent on paper and white; text-safe (6.58:1) */
  --blue: var(--emc-violet-mid);        /* text on paper (5.28:1); graphic on aubergine (3.13:1) */
  --on-navy-2: var(--emc-on-ink);       /* secondary text on the aubergine (10.97:1) */
  --lilac: var(--emc-lilac);
  --pink: var(--emc-pink);              /* decoration only */
  --rule: var(--emc-rule);              /* hairlines only, never text */
  --wrap: 68rem;
  --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(--emc-sans, "Nunito 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); }
/* Indicative local-currency figure (js/local-price.js): an add-on beside the GBP price, never in its place. */
.local-price { display: block; color: var(--muted); font-size: .85rem; margin: -.4rem 0 .6rem; }
.card.dark .local-price { color: var(--on-navy-2); }
.local-note { color: var(--muted); font-size: .88rem; max-width: 60ch; }

.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(--emc-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(--emc-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 tick (violet on this site) 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: #6D28D9;   /* tick circle, the brand violet: 7.10:1 on white, 6.58: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
   A line icon beside each "Who it's for" heading (founder, 1 Oct 2026), drawn for Explain My
   Charity: 2px strokes, rounded joins, violet on the light card (7.10:1 on white), lavender in
   the dark nav dropdown (8.26:1 on the raised aubergine). Decorative background images; the
   heading names the audience. .audience-fundraise (a coin into a jar), .audience-trustees (a
   board around a table), .audience-services (a signpost), .audience-research (a magnifier over
   a chart). */
.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-fundraise > 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='%236D28D9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='17' width='22' height='17' rx='4'/%3E%3Cpath d='M13 17v-3h14v3'/%3E%3Ccircle cx='20' cy='7.5' r='4'/%3E%3Cpath d='M14 25h12'/%3E%3C/svg%3E"); }
.audiences > li.audience-trustees > 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='%236D28D9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Ccircle cx='20' cy='9' r='3.5'/%3E%3Ccircle cx='28' cy='12' r='3.5'/%3E%3Cpath d='M6 24c1-4 3.5-6 6-6M34 24c-1-4-3.5-6-6-6M14.5 18.5c1.5-3 3.2-4 5.5-4s4 1 5.5 4'/%3E%3Crect x='6' y='25' width='28' height='5' rx='2'/%3E%3Cpath d='M10 30v5M30 30v5'/%3E%3C/svg%3E"); }
.audiences > li.audience-services > 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='%236D28D9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 5v30M14 35h12'/%3E%3Cpath d='M20 9h11l4 4-4 4H20z'/%3E%3Cpath d='M20 19H9l-4 4 4 4h11'/%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='%236D28D9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 33h18M9 33v-7M14 33v-11M19 33v-5'/%3E%3Ccircle cx='26' cy='14' r='7'/%3E%3Cpath d='M31 19l5 5'/%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-fundraise > a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23C4B5FD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='17' width='22' height='17' rx='4'/%3E%3Cpath d='M13 17v-3h14v3'/%3E%3Ccircle cx='20' cy='7.5' r='4'/%3E%3Cpath d='M14 25h12'/%3E%3C/svg%3E"); }
header.site details.nav-group li.audience-trustees > a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23C4B5FD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Ccircle cx='20' cy='9' r='3.5'/%3E%3Ccircle cx='28' cy='12' r='3.5'/%3E%3Cpath d='M6 24c1-4 3.5-6 6-6M34 24c-1-4-3.5-6-6-6M14.5 18.5c1.5-3 3.2-4 5.5-4s4 1 5.5 4'/%3E%3Crect x='6' y='25' width='28' height='5' rx='2'/%3E%3Cpath d='M10 30v5M30 30v5'/%3E%3C/svg%3E"); }
header.site details.nav-group li.audience-services > a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23C4B5FD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 5v30M14 35h12'/%3E%3Cpath d='M20 9h11l4 4-4 4H20z'/%3E%3Cpath d='M20 19H9l-4 4 4 4h11'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- ops console: outreach (/admin/outreach)
   Staff only. The email preview is drawn into a shadow root by admin-outreach.js, so its own
   styles (set through the CSSOM, which the CSP allows) never leak into the page. */
.ot-filters { display: flex; flex-wrap: wrap; gap: 0 1rem; max-width: none; }
.ot-filters .field { flex: 1 1 14rem; }
.ot-campaign-bar { margin: 0 0 1rem; }
.ot-actions [hidden], .ot-campaign-bar[hidden], .ot-more[hidden] { display: none !important; }
.ot-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.ot-bulk { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 .75rem; }
.ot-flag { display: block; font-size: .85rem; line-height: 1.4; }
.ot-flag.block { color: var(--amber-deep); font-weight: 600; }
.ot-flag.block::before { content: "Blocked: "; }
.ot-flag.warn { color: var(--muted); }
.ot-flag.warn::before { content: "Note: "; }
#ot-rows tr.selected-row td { background: var(--paper); }
#ot-rows td button.linkish { text-align: left; }
.ot-message { margin: 1.5rem 0; }
.ot-grid { display: grid; gap: 1.5rem; }
@media (min-width: 1100px) { .ot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ot-edit { max-width: none; }
.ot-check { display: flex; align-items: flex-start; font-weight: 400; }
.ot-headers { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; margin: 0 0 1rem; font-size: .9rem; }
.ot-headers dt { font-weight: 600; color: var(--navy); }
.ot-headers dd { margin: 0; overflow-wrap: anywhere; }
.ot-tabs { display: flex; gap: .4rem; margin-bottom: .5rem; }
.ot-tabs button { font: inherit; padding: .35rem .9rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--white); color: var(--navy); cursor: pointer; }
.ot-tabs button[aria-selected="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.ot-html { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); padding: .5rem; overflow: auto; max-height: 48rem; }
.ot-text { white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white);
           padding: 1rem; font-size: .88rem; max-height: 48rem; overflow: auto; }
.ot-more { margin: 1.25rem 0; }
.ot-more > summary { cursor: pointer; font-weight: 600; color: var(--navy); min-height: var(--tap); }
.ot-inline { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; max-width: none; margin-bottom: 1rem; }
.ot-inline input { flex: 1 1 18rem; width: auto; }

/* Stills for your website (film page) and a version's stills (ops console). */
.stills-grid { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.stills-grid li { margin: 0; min-width: 0; }
.stills-grid img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid var(--rule); border-radius: calc(var(--radius) / 2); background: var(--paper); }
.stills-grid p { margin: .5rem 0 0; }
.stills-grid .alt-label { display: block; margin-top: .5rem; font-size: .875rem; color: var(--muted); }
.stills-grid textarea.alt-text { min-height: 0; width: 100%; font-size: .875rem; }
.stills-grid .cta.small { margin-top: .5rem; min-height: var(--tap); }

/* ---------------------------------------------------------------- Explain My Charity look
   The SOSX Mentor scheme (founder, 3 Oct 2026; brand/tokens.css): Outfit for headings, Nunito
   Sans for text, violet buttons on light grounds and lavender ones on the aubergine, softer
   corners, and the mark's two ripples (lavender and pink, decoration only) behind the hero. */
h1, h2, h3, h4, .price, .eyebrow, .tier .flag, .ks-v, .savings-big { font-family: var(--emc-display); }
h1, h2 { letter-spacing: -0.005em; font-weight: 700; }
h3 { font-weight: 600; }
.lede { font-size: 1.18rem; }
a { text-decoration-thickness: 2px; }

/* Buttons: violet with white text on light grounds (7.10:1); lavender with aubergine text on the
   dark ones (9.66:1). */
.cta { background: var(--emc-violet); border-color: var(--emc-violet); color: var(--white); }
.cta:hover { background: var(--emc-violet-deep); border-color: var(--emc-violet-deep); color: var(--white); }
.cta.secondary { background: transparent; color: var(--emc-violet); border-color: var(--emc-violet); }
.cta.secondary:hover { background: var(--lilac); color: var(--emc-violet-deep); }
header.site .cta, .hero .cta, footer.site .cta, section.band.navy .cta, .card.dark .cta {
  background: var(--amber); border-color: var(--amber); color: var(--navy); }
header.site .cta:hover, .hero .cta:hover, footer.site .cta:hover, section.band.navy .cta:hover, .card.dark .cta:hover {
  background: var(--white); border-color: var(--white); color: var(--navy); }
.hero .cta.secondary, section.band.navy .cta.secondary, .card.dark .cta.secondary {
  background: transparent; color: var(--white); border-color: var(--white); }
.hero .cta.secondary:hover, section.band.navy .cta.secondary:hover, .card.dark .cta.secondary:hover {
  background: var(--navy-raised); color: var(--white); }

/* The hero: the aubergine ground with the mark's ripples, faint, in the top right corner. */
.hero { position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -180px; top: -180px; width: 560px; height: 560px;
  pointer-events: none; opacity: .22;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke-linecap='round'%3E%3Ccircle cx='50' cy='50' r='22' stroke='%23C4B5FD' stroke-width='3'/%3E%3Ccircle cx='50' cy='50' r='34' stroke='%23F472B6' stroke-width='3'/%3E%3Ccircle cx='50' cy='50' r='46' stroke='%236D28D9' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat; }
.hero > .wrap { position: relative; z-index: 1; }

/* Light panels in lilac; accent cards keep a violet top edge. */
section.band:not(.white):not(.navy) { background: var(--paper); }
.card { border-radius: var(--radius); }
.card.accent { border-top-color: var(--emc-violet); }
.tier.featured { border-color: var(--emc-violet); }
.tier .flag { background: var(--emc-pink); color: var(--navy); }   /* aubergine on pink: 6.74:1 */