/* ═══════════════════════════════════════════════════════════════════════════════
   Omni design tokens. The single source of truth for colour, type, spacing,
   elevation and stacking.

   Loaded first, before every other stylesheet, so anything can refer to these and
   nothing has to guess. If a value is worth using twice, it belongs here.

   WHY THIS FILE EXISTS
   A measurement of the platform on 21 Aug 2026 found 497 distinct hex colours
   across 4,276 uses. Grouped by whether the eye can tell them apart, that collapsed
   to 230 clusters, and the top 26 covered 83% of all uses. In other words: about
   twenty-six real colours, wearing five hundred costumes. #ffffff had 41
   near-duplicate spellings. #e6e6ef had 47.

   Three specific consequences of having no token layer, all found by that count:

     1. The brand magenta existed as two values, #9B0167 everywhere and #a1006b on
        the landing page. That is deltaE 2.32 apart, which is exactly the threshold
        at which the eye starts to notice. The landing page was subtly off-brand.

     2. --teal meant #019B82 on the landing page and #00d2c6 on the budget grid.
        Those are 21.84 apart: not a drift, a different colour with the same name.
        This is what happens when a token is named after a colour instead of a job.
        Every name here is a role.

     3. Six greys were in use that are perceptually identical: #77778c, #6f6f82,
        #707088, #7f7f95, #6f6f83, #6c6c80. Nobody chose six. They accumulated.

   NAMING
   Roles, never colours. --brand, not --pink. --ink-muted, not --grey-6. A role
   survives a rebrand and reads correctly at the point of use; a colour name starts
   lying the moment the colour changes.

   TWO SURFACE FAMILIES
   The platform genuinely has two: the budget grid runs warm (paper, plum, a soft
   pink-grey hairline) and everything else runs cool (near-white, lavender-grey).
   That was not a decision, it was two eras of the app, and it is the main reason
   the product does not feel like one piece. Both are written out below rather than
   left implicit, so the choice to unify them is a small edit in one file rather
   than an archaeology project across 53 templates.
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ──────────────────────────────────────────────────────────────────
     One magenta. #9B0167 is the brand and also the Shoots calendar colour, which
     is why it must not drift: the two have to match on the Traffic page. */
  --brand:            #9B0167;
  --brand-strong:     #7a0152;   /* hover and pressed */
  --brand-bright:     #e4018a;   /* figures and emphasis, on light only */
  --brand-tint:       #fdf0f8;   /* selected rows, chips, hovered menu items */
  --brand-wash:       rgba(155, 1, 103, .2);
  --brand-veil:       rgba(251, 244, 248, .5);

  /* ── Ink ────────────────────────────────────────────────────────────────────
     Text on light surfaces. Four steps: primary, secondary, muted, and one faint
     step for things that must recede without becoming unreadable.

     The number after each is its contrast ratio against --surface-sunken. Every
     step clears WCAG AA (4.5:1) for body text, and the top two clear AAA (7:1).
     They are written down because that is what stops the scale drifting back:
     these values were chosen to hit those numbers, not picked by eye.

     This is the warm family. It used to belong to the budget grid alone while the
     other 52 pages ran a cool one, and unifying on warm was not only a look
     decision - the cool greys it replaces FAILED AA. #77778c was 4.09:1 across 180
     uses and #9090a8 was 2.92:1 across 44. */
  --ink:              #483640;   /* 10.51:1  AAA  body */
  --ink-heading:      #250217;   /* 17.95:1  AAA  headings */
  --ink-soft:         #5a4a52;   /*  7.78:1  AAA  secondary */
  --ink-muted:        #61585d;   /*  6.45:1  AA   labels, meta */
  --ink-faint:        #796f77;   /*  4.53:1  AA   the quietest text allowed */

  /* ── Surfaces ─────────────────────────────────────────────────────────────── */
  --surface:          #ffffff;   /* cards, inputs, anything raised */
  --surface-sunken:   #faf7f9;   /* the page behind the cards */
  --surface-stripe:   #fbfbfd;   /* zebra rows. A pinned column must match this. */
  --line:             #ece5e9;   /* the default border */
  --line-soft:        #f3edf0;   /* inside a card, between rows */
  --divider:          rgba(57, 43, 51, .4);

  /* There are deliberately no --*-warm aliases. The tokens above ARE the warm
     family now, so an alias would only be a second name for the same value, and
     the first attempt at one produced a cycle: tokens.css said
     --ink-warm: var(--ink) while budget_detail.html said --ink: var(--ink-warm).
     A CSS custom property cycle makes both sides invalid, which is a silent way to
     lose every colour on the page. */

  /* ── Dark chrome ────────────────────────────────────────────────────────────
     The top bar and side drawer stay dark on every page, light theme or not. */
  --chrome:           #14141c;
  --chrome-raised:    #2a2a38;
  --chrome-deep:      #0f0f13;
  --chrome-line:      #2a2a38;
  --on-chrome:        #ffffff;   /* 18.32:1  AAA */
  --on-chrome-muted:  #9090a8;   /*  5.88:1  AA   fails on light, fine on dark */
  /* The brand magenta is 2.26:1 on the chrome, so it cannot be text or an icon
     there. This is the same hue lifted until it clears AA on that background. Use it
     for active nav states and anything brand-coloured on the dark bar. */
  --brand-on-chrome:  #d24a97;   /*  4.51:1  AA  */

  /* ── State ──────────────────────────────────────────────────────────────────
     Named for meaning, not colour, so a status can be restyled without hunting
     for greens. Contrast against --surface is at least 4.5:1 for text use. */
  --good:             #0a7d55;   /* 4.84:1  AA  */
  --good-tint:        #e8f5ee;
  --warn:             #b8860b;   /* 3.06:1  bands and fills only, NOT text */
  --warn-ink:         #976a00;   /* 4.51:1  AA  the same amber, for text */
  --warn-tint:        #fdf6e3;
  --danger:           #c62828;   /* 5.28:1  AA  */
  --danger-tint:      #fdeaea;
  --profit:           #0a7d55;
  --loss:             #c62828;
  --accent-live:      #00d2c6;   /* the "line in use" marker on the budget grid */
  --accent-live-ink:  #00786f;

  /* Provisional, as distinct from good or bad. A pencilled booking is neither. */
  --info:             #3f4a6b;   /* 7.67:1 on its tint  AAA */
  --info-tint:        #eef0f7;

  /* Holidays and milestones. Three parts each, because they appear three ways: an
     accent (the rail on the week grid), text, and a tinted background (the badge in
     the month grid, the band in the week grid).

     They were a mess of unrelated colours: the week grid drew holiday text in a mint
     #34d399 at 1.92:1 while the month grid drew the same holiday as amber on cream,
     so the same thing was a different colour depending on which view you were
     looking at. Holidays are amber everywhere now, milestones purple everywhere. */
  --holiday:          #b45309;   /* 5.02:1 on white   the rail */
  --holiday-ink:      #92400e;   /* 6.37:1 on the tint  text */
  --holiday-tint:     #fef3c7;   /* badges and the week band */
  --milestone:        #5b3fa8;   /* 7.72:1 on white   the rail */
  --milestone-ink:    #6b21a8;   /* 7.39:1 on the tint  text */
  --milestone-tint:   #f3e8ff;

  /* ── Calendars ──────────────────────────────────────────────────────────────
     Fixed by the business, not by taste: these match the Google Calendar colours
     and appear in the Traffic grid, the KPI tiles and the bot's messages. Changing
     one means changing it in Google too. */
  --cal-shoots:       #9B0167;
  --cal-edit-1:       #019B82;
  --cal-edit-2:       #01669B;
  --cal-edit-3:       #BF6000;
  --cal-ai:           #007E97;

  /* ── Type ───────────────────────────────────────────────────────────────────
     Eight steps, and the measurement found 59 sizes in use. The rule from
     CLAUDE.md holds: nothing below 13px on screen. 16px on inputs is not a style
     choice, it stops iOS zooming the page when a field is focused. */
  --font:             'Figtree', system-ui, -apple-system, sans-serif;
  --font-serif:       'Source Serif 4', Georgia, serif;

  --fs-meta:          13px;      /* labels, badges, table meta */
  --fs-body:          14px;      /* body, buttons, nav */
  --fs-emph:          15px;      /* emphasis within body */
  --fs-input:         16px;
  --fs-subhead:       18px;
  --fs-title:         20px;
  --fs-display:       24px;
  --fs-display-lg:    28px;

  --lh-tight:         1.2;
  --lh-body:          1.45;
  --lh-prose:         1.6;

  --fw-normal:        400;
  --fw-medium:        500;
  --fw-semi:          600;
  --fw-bold:          700;
  --fw-heavy:         800;

  /* ── Spacing ────────────────────────────────────────────────────────────────
     A 4px base. Named by size rather than by use, because the same gap serves
     different purposes and a use-based name would be wrong half the time. */
  --sp-1:             4px;
  --sp-2:             8px;
  --sp-3:             12px;
  --sp-4:             16px;
  --sp-5:             20px;
  --sp-6:             24px;
  --sp-8:             32px;
  --sp-10:            40px;

  /* ── Radii ──────────────────────────────────────────────────────────────────
     36 distinct values were in use. These five cover every real case. */
  --r-sm:             4px;
  --r-md:             8px;
  --r-lg:             12px;
  --r-xl:             16px;
  --r-pill:           999px;

  /* ── Elevation ──────────────────────────────────────────────────────────────
     81 distinct box-shadows were in use, which is 78 more than anyone designed.
     Three levels: resting, raised, floating. */
  --shadow-sm:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:        0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:        0 8px 24px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);

  /* ── Stacking ───────────────────────────────────────────────────────────────
     Every layer in one list, so a new overlay can be placed by reading rather
     than by trying 9999 and seeing what happens. */
  --z-nav:            500;
  --z-dropdown:       510;
  --z-modal:          700;
  --z-confirm:        800;
  --z-drawer-scrim:   1390;
  --z-drawer:         1400;
  --z-staging:        1500;
  --z-toast:          9000;

  /* ── Motion ─────────────────────────────────────────────────────────────────
     Short enough not to be in the way. Anything longer than 250ms in an interface
     people use all day starts to feel slow. */
  --t-fast:           .12s;
  --t-base:           .18s;
  --t-slow:           .25s;
  --ease:             cubic-bezier(.2, .6, .3, 1);
}

/* Respect the system setting. The transitions above are decoration; nobody should
   have to sit through them if they have asked not to. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t-base: 0s; --t-slow: 0s; }
}

/* AI Video Cost Calculator. Every class is prefixed aic- so nothing here can reach
   another page's markup, and nothing in base.css has an existing rule to collide with.
   The estimate panel is Omni Productions plum, the one dark surface on a light page. */
body.theme-light {
  --aic-plum: #2B0225;
  --aic-berry: #4F033A;
  --aic-on-plum: #F5EDF2;
  --aic-on-plum-soft: #D9C6D3;
  --aic-plum-line: rgba(255, 255, 255, .16);
  --aic-hot: #ff6cc4;
  --aic-teal: #2DCBAA;
  --aic-sky: #4FB4E6;
}
/* The page chrome every budget page draws for itself (see budget_faq.css). */
html body { background: var(--surface-sunken) !important; }
.header { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px 0 0; position: sticky; top: 0; z-index: 500; background: #14141c; }
.header-logo { width: 72px; height: 72px; object-fit: cover; }
html body .header { background: #14141c !important; border-bottom: none !important; }
.btn { background: var(--brand); color: #fff; border: none; padding: 10px 18px; border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: none; display: inline-block; }
.btn:hover { background: var(--brand-strong); }
.btn-ghost { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); color: #f0f0f8; }
.btn-ghost:hover { background: rgba(255,255,255,.18); color: #fff; }
.btn[hidden] { display: none !important; }

.aic-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aic-eyebrow { font: var(--fw-semi) 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin: 0 0 var(--sp-2); }
.aic-h3 { font: var(--fw-semi) var(--fs-title)/1.2 var(--font-serif); color: var(--ink-heading); margin: var(--sp-8) 0 var(--sp-2); }
.aic-hint { color: var(--ink-muted); font-size: var(--fs-body); margin: 0 0 var(--sp-3); max-width: 44rem; }

/* title bar */
.aic-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4) var(--sp-6); padding: var(--sp-6) var(--sp-6) var(--sp-4); max-width: 1440px; margin: 0 auto; }
.aic-bar h1 { font: var(--fw-semi) clamp(24px, 3vw, 32px)/1.1 var(--font-serif); color: var(--ink-heading); margin: 0; letter-spacing: -.01em; }
.aic-bar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.aic-inline { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body); color: var(--ink-muted); font-weight: var(--fw-semi); }
.aic-inline select { font: var(--fw-medium) var(--fs-body) var(--font); padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); }
.aic-seg { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); }
.aic-seg button { border: 0; background: transparent; padding: 7px 14px; border-radius: var(--r-pill); font: var(--fw-semi) var(--fs-body) var(--font); color: var(--ink-soft); cursor: pointer; }
.aic-seg button[aria-pressed="true"] { background: var(--brand); color: #fff; }
.aic-seg--dark { border-color: var(--aic-plum-line); background: transparent; }
.aic-seg--dark button { color: var(--aic-on-plum); padding: 4px 10px; font-size: var(--fs-meta); }
.aic-seg--dark button[aria-pressed="true"] { background: var(--aic-teal); color: var(--aic-plum); }
.aic-banner { max-width: 1440px; margin: 0 auto var(--sp-2); padding: var(--sp-3) var(--sp-6); background: var(--info-tint); color: var(--info); font-size: var(--fs-body); }
.aic-banner a { color: var(--brand); font-weight: var(--fw-semi); }

/* layout */
.aic-layout { max-width: 1440px; margin: 0 auto; padding: 0 var(--sp-6) 120px; display: grid; grid-template-columns: 190px minmax(0, 1fr) 340px; gap: var(--sp-8); align-items: start; }
.aic-rail { position: sticky; top: 88px; padding-top: var(--sp-4); }
.aic-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: aic; }
.aic-rail button { width: 100%; text-align: left; background: none; border: 0; padding: 9px 10px 9px 38px; position: relative; cursor: pointer; color: var(--ink-soft); font: var(--fw-medium) var(--fs-body)/1.25 var(--font); border-radius: var(--r-md); }
.aic-rail button::before { counter-increment: aic; content: counter(aic); position: absolute; left: 8px; top: 7px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font: var(--fw-bold) 12px/1 var(--font); color: var(--ink-muted); background: var(--surface); }
.aic-rail button:hover { background: var(--brand-tint); color: var(--ink-heading); }
.aic-rail button.is-done::before { content: "\2713"; background: var(--good); border-color: var(--good); color: #fff; }
.aic-rail button[aria-current="step"] { background: var(--brand-tint); color: var(--brand-strong); font-weight: var(--fw-bold); }
.aic-rail button[aria-current="step"]::before { border-color: var(--brand); color: var(--brand); }
.aic-main { min-width: 0; padding-top: var(--sp-4); }
.aic-head { margin-bottom: var(--sp-5); max-width: 44rem; }
.aic-head h2 { font: var(--fw-semi) clamp(22px, 2.4vw, 28px)/1.15 var(--font-serif); color: var(--ink-heading); margin: 0 0 var(--sp-2); }
.aic-head p { color: var(--ink-soft); margin: 0; font-size: var(--fs-emph); line-height: var(--lh-body); }
.aic-field { border: 0; padding: 0; margin: 0 0 var(--sp-6); min-width: 0; }
.aic-field > legend, .aic-label { display: block; padding: 0; font: var(--fw-bold) var(--fs-emph) var(--font); color: var(--ink-heading); margin-bottom: var(--sp-1); }
.aic-field[hidden], .aic-example[hidden] { display: none !important; }
/* The question still to answer, when Next is blocked. A rule down the left rather than
   a red box: nothing is wrong, it just has not been answered yet. */
.aic-field.is-missing { padding-left: var(--sp-3); margin-left: calc(var(--sp-3) * -1);
  border-left: 3px solid var(--brand); }
.aic-field.is-missing > legend, .aic-field.is-missing > .aic-label { color: var(--brand); }
.aic-row { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-8); }

/* cards */
.aic-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-3); }
/* Four genres across; three ways of using AI under them, with a shorter picture. The
   columns follow the width the step actually has (the rail and the panel take their
   share), and a row is never left with one card on its own: four go 4, 2 + 2 or 1;
   three go 3 or 1. */
.aic-step { container: aic-step / inline-size; }
.aic-cards--four, .aic-cards--uses { grid-template-columns: minmax(0, 1fr); }
@container aic-step (min-width: 400px) { .aic-cards--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container aic-step (min-width: 560px) { .aic-cards--uses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container aic-step (min-width: 700px) { .aic-cards--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.aic-cards--uses .aic-card__media { aspect-ratio: 21 / 9; }
.aic-h3--first { margin-top: 0; }
/* A monthly series, as the nine turns of each month. */
.aic-cycle { list-style: none; counter-reset: aic-cycle; margin: 0 0 var(--sp-5); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-2) var(--sp-5); max-width: 48rem; }
.aic-cycle li { counter-increment: aic-cycle; position: relative; padding-left: 2.1em; font-size: var(--fs-emph); color: var(--ink-soft); line-height: 1.4; }
.aic-cycle li::before { content: counter(aic-cycle); position: absolute; left: 0; top: 0; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--brand-tint); color: var(--brand-strong); font: var(--fw-bold) 12px/1.5em var(--font); text-align: center; }
.aic-cycle b { color: var(--ink-heading); }
.aic-rail li[hidden] { display: none !important; }
/* Not a step: no number from the rail's counter. */
.aic-rail .aic-restart::before { content: none; counter-increment: none; }
.aic-rail .aic-restart:hover { background: none; }
.aic-rail .aic-restart { width: auto; margin: var(--sp-4) 0 0 10px; padding: 0; border: 0; background: none; color: var(--ink-muted); font: var(--fw-semi) var(--fs-meta) var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.aic-rail .aic-restart:hover { color: var(--brand); }
/* Campaign development: what the up-front work includes, and what it costs. */
.aic-included { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-3); max-width: 44rem; }
.aic-included li { position: relative; padding-left: 1.8em; color: var(--ink-soft); font-size: var(--fs-emph); line-height: var(--lh-body); }
.aic-included li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--good); font-weight: var(--fw-bold); }
.aic-included b { color: var(--ink-heading); }
.aic-devcost { max-width: 44rem; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--aic-plum); color: var(--aic-on-plum); }
.aic-devcost > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-2) var(--sp-4); }
.aic-devcost__label { font: var(--fw-bold) 12px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--aic-on-plum-soft); }
.aic-devcost__value { font: var(--fw-semi) 28px/1.1 var(--font-serif); color: #fff; font-variant-numeric: tabular-nums; }
.aic-devcost p { margin: var(--sp-2) 0 0; font-size: var(--fs-body); color: var(--aic-on-plum-soft); }
.aic-cards--plain { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: 44rem; }
/* The note under a set of cards lines up with them and sits clear of them. */
.aic-cards + .aic-callout { margin-top: var(--sp-5); }
.aic-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-md); overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; }
.aic-card:hover { border-color: var(--ink-faint); transform: translateY(-1px); }
.aic-card input { position: absolute; opacity: 0; pointer-events: none; }
/* One ring for selected. Keyboard focus is a separate, thinner ring set further out, so
   the two never stack into a double border. */
.aic-card:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.aic-card.is-off { cursor: not-allowed; opacity: .5; filter: grayscale(1); }
.aic-card.is-off:hover { transform: none; border-color: var(--line); }
.aic-card__off { display: block; margin-top: 6px; font-size: var(--fs-meta); font-weight: var(--fw-semi); color: var(--ink); }
.aic-card:has(input:checked) .aic-card__body { background: var(--brand-tint); }
.aic-card:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 4px; }
.aic-card:has(input:checked:focus-visible) { outline-color: var(--ink-faint); }
.aic-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--aic-plum) center / cover no-repeat; }
.aic-card__media--empty { display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--aic-berry) 0 12px, var(--aic-plum) 12px 24px); color: var(--aic-on-plum-soft); font: var(--fw-semi) 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; }
.aic-card__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.aic-card__tag { z-index: 1; position: absolute; left: 8px; bottom: 8px; background: rgba(43, 2, 37, .86); color: #fff; font: var(--fw-semi) 11px/1.3 var(--font); padding: 3px 7px; border-radius: var(--r-sm); text-transform: none; letter-spacing: 0; }
.aic-card__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.aic-card__title { display: block; font: var(--fw-semi) 17px/1.2 var(--font-serif); color: var(--ink-heading); margin-bottom: 4px; }
.aic-card__desc { display: block; font-size: var(--fs-meta); line-height: 1.4; color: var(--ink-muted); }
.aic-card__tick { position: absolute; top: 8px; right: 8px; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; font: var(--fw-bold) 12px/24px var(--font); text-align: center; display: none; }
.aic-card:has(input:checked) .aic-card__tick { display: block; }

/* pills */
.aic-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.aic-pill { position: relative; }
.aic-pill input { position: absolute; opacity: 0; pointer-events: none; }
.aic-pill span { display: inline-block; padding: 8px 14px; border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--r-pill); font: var(--fw-semi) var(--fs-body) var(--font); color: var(--ink); cursor: pointer; }
.aic-pill span:hover { border-color: var(--ink-faint); }
.aic-pill small { font-weight: var(--fw-normal); color: var(--ink-muted); margin-left: 4px; font-size: var(--fs-meta); }
/* Selected reads as chosen, not as a button: brand outline and tint, and a tick
   ahead of the label. The padding is shared so the pill does not change width. */
.aic-pill span { border-width: 2px; padding: 7px 14px 7px 14px; }
.aic-pill span::before { content: ""; display: inline-block; width: 0; transition: width .12s; }
.aic-pill input:checked + span { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-strong); }
.aic-pill input:checked + span::before { content: "\2713"; width: 1.1em; font-weight: var(--fw-bold); color: var(--brand); }
.aic-pill input:checked + span small { color: var(--brand-strong); }
.aic-pill input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 2px; }

/* range + stepper */
.aic-range { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; max-width: 520px; }
.aic-range input { width: 100%; accent-color: var(--brand); }
.aic-range output { font: var(--fw-semi) 22px/1 var(--font-serif); color: var(--aic-plum); min-width: 6ch; text-align: right; font-variant-numeric: tabular-nums; }
.aic-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.aic-stepper button { width: 40px; height: 40px; border: 0; background: none; cursor: pointer; font-size: 20px; color: var(--brand); }
.aic-stepper button:hover { background: var(--brand-tint); }
.aic-stepper output { min-width: 3ch; text-align: center; font-weight: var(--fw-bold); color: var(--ink-heading); font-variant-numeric: tabular-nums; }
.aic-toggle { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-3); cursor: pointer; font-weight: var(--fw-semi); color: var(--ink-heading); max-width: 36rem; }
.aic-toggle input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand); flex: none; }
.aic-toggle small { display: block; font-weight: var(--fw-normal); color: var(--ink-muted); }

.aic-callout { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--good); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-body); color: var(--ink); max-width: 44rem; margin: 0 0 var(--sp-5); }
.aic-callout--brand { border-left-color: var(--brand); }
.aic-example { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-4); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3); margin: 0 0 var(--sp-6); max-width: 44rem; }
.aic-example img, .aic-example video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-sm); display: block; }
.aic-example p { margin: 0; font-size: var(--fs-body); color: var(--ink-soft); line-height: var(--lh-body); }
.aic-example strong { display: block; font: var(--fw-semi) 16px/1.3 var(--font-serif); color: var(--ink-heading); margin-bottom: 2px; }
.aic-example a { color: var(--brand); font-weight: var(--fw-semi); }

/* policy + create */
.aic-policy { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-3); }
.aic-policy li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-body); color: var(--ink-soft); line-height: var(--lh-body); }
.aic-policy strong { display: block; color: var(--brand-strong); font-size: var(--fs-emph); margin-bottom: 2px; }
.aic-full { max-width: 48rem; margin: 0 0 var(--sp-5); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.aic-full summary { cursor: pointer; color: var(--brand); font-weight: var(--fw-semi); }
.aic-full ol { color: var(--ink-soft); font-size: var(--fs-body); line-height: var(--lh-body); padding-left: 1.3em; }
.aic-full li { margin-bottom: 6px; }
.aic-create { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); max-width: 48rem; }
.aic-create .aic-h3 { margin-top: 0; }
.aic-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.aic-inputs label, .aic-ratecard label { display: grid; gap: 4px; font: var(--fw-semi) var(--fs-meta) var(--font); color: var(--ink-soft); }
.aic-inputs input, .aic-ratecard input { font: var(--fw-normal) var(--fs-input) var(--font); padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-sunken); color: var(--ink); font-variant-numeric: tabular-nums; }
.aic-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.aic-error { color: var(--danger); font-weight: var(--fw-semi); font-size: var(--fs-body); }

/* In step 7 the policy is just its eight titles, as a ticked list, so the form sits
   close under it. The window shows the same list with the explanations. */
.aic-step .aic-policy { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-2) var(--sp-5); margin-bottom: var(--sp-3); max-width: 48rem; }
.aic-step .aic-policy li { background: none; border: 0; padding: 0 0 0 1.6em; position: relative; }
.aic-step .aic-policy li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--good); font-weight: var(--fw-bold); }
.aic-step .aic-policy li strong { margin: 0; font-size: var(--fs-emph); color: var(--ink-heading); }
.aic-step .aic-policy li span { display: none; }
.aic-modal .aic-policy li span { display: block; }
.aic-step[hidden] { display: none !important; }

/* the AI policy: a button that is always there, and a window over a darkened page */
.aic-policy-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 2px solid var(--brand); border-radius: var(--r-pill); background: var(--surface); color: var(--brand-strong); font: var(--fw-semi) var(--fs-body) var(--font); cursor: pointer; }
.aic-policy-btn:hover { background: var(--brand-tint); }
.aic-linkbtn { background: none; border: 0; padding: 0; color: var(--brand); font: var(--fw-semi) var(--fs-emph) var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.aic-linkbtn:hover { color: var(--brand-strong); }
.aic-policy-more { margin: 0 0 var(--sp-5); }
.aic-policy-back { margin: 0 0 var(--sp-3); }
.aic-modal { width: min(760px, calc(100vw - 32px)); max-height: min(86vh, 900px); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--surface-sunken); color: var(--ink); box-shadow: 0 24px 64px rgba(20, 3, 16, .45); overflow: hidden; }
.aic-modal[open] { display: flex; flex-direction: column; }
.aic-modal::backdrop { background: rgba(20, 3, 16, .72); backdrop-filter: blur(3px); }
.aic-modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6) var(--sp-4); background: var(--surface); border-bottom: 1px solid var(--line); }
.aic-modal__head h2 { font: var(--fw-semi) 24px/1.15 var(--font-serif); color: var(--ink-heading); margin: 0; }
.aic-modal__close { flex: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-heading); font-size: 24px; line-height: 1; cursor: pointer; }
.aic-modal__close:hover { background: var(--brand-tint); border-color: var(--brand); }
/* flex: 1 and min-height: 0 let the body shrink to the window and scroll. Without them
   it grows to its full height and the window clips the rest of the policy. */
.aic-modal__body { flex: 1 1 auto; min-height: 0; padding: var(--sp-5) var(--sp-6) var(--sp-6); overflow-y: auto; overscroll-behavior: contain; }
.aic-modal__head { flex: none; }
.aic-modal .aic-policy { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.aic-modal .aic-full { max-width: none; border: 0; padding: 0; margin: 0; }
/* The full policy, set as a readable document. */
.aic-doc { max-width: 42rem; color: var(--ink); font-size: var(--fs-emph); line-height: var(--lh-prose); }
.aic-doc h3 { font: var(--fw-semi) 26px/1.15 var(--font-serif); color: var(--ink-heading); margin: 0 0 var(--sp-1); }
.aic-doc h4 { font: var(--fw-semi) 19px/1.25 var(--font-serif); color: var(--ink-heading); margin: var(--sp-8) 0 var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.aic-doc h5 { font: var(--fw-bold) var(--fs-emph)/1.3 var(--font); color: var(--brand-strong); margin: var(--sp-5) 0 var(--sp-2); }
.aic-doc p { margin: 0 0 var(--sp-3); }
.aic-doc ol, .aic-doc ul { margin: 0 0 var(--sp-3); padding-left: 1.4em; }
.aic-doc li { margin-bottom: var(--sp-2); }
.aic-doc dl { margin: 0 0 var(--sp-3); display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); }
.aic-doc dt { font-weight: var(--fw-bold); color: var(--ink-heading); }
.aic-doc dd { margin: 0; color: var(--ink-soft); }
.aic-doc__meta { color: var(--ink-muted); font-size: var(--fs-body); }
.aic-doc__foot { margin-top: var(--sp-8) !important; padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-meta); color: var(--ink-muted); }
@media (max-width: 560px) { .aic-doc dl { grid-template-columns: 1fr; } .aic-doc dd { margin-bottom: var(--sp-2); } }
@media (max-width: 820px) { .aic-modal__head, .aic-modal__body { padding-left: var(--sp-4); padding-right: var(--sp-4); } }

/* step navigation */
/* Back and Next: fixed to the bottom of the window on every step (see syncNav). */
.aic-stepnav { display: flex; align-items: center; gap: var(--sp-3); margin: 0; padding: var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line);
  position: fixed; bottom: var(--aic-nav-bottom, 0px); left: var(--aic-nav-left, 0px); width: var(--aic-nav-width, 100%); z-index: 30; background: var(--surface-sunken); box-shadow: 0 -10px 16px -14px rgba(20, 3, 16, .35); }
/* Room at the foot of the form so the last field is never hidden under the bar. */
.aic-main { padding-bottom: 96px; }
.aic-spacer { flex: 1; }
.aic-count { color: var(--ink-muted); font-size: var(--fs-meta); }
.aic-btn-ghost { background: var(--surface); color: var(--brand); border: 1px solid var(--brand); }
.aic-btn-ghost:hover { background: var(--brand-tint); }
.aic-stepnav .btn:disabled { opacity: .4; cursor: not-allowed; }
/* The same Back and Next at the top of each step, laid out exactly like the bar at the
   foot (Back left, the step count and Next right), in place of the step's own "Step N". */
.aic-topnav { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.aic-topnav .btn:disabled { opacity: .4; cursor: not-allowed; }
.aic-topnav .btn[hidden] { display: none; }
.aic-btn-sm { padding: 6px 14px; font-size: var(--fs-meta); }
.aic-clear { padding: 6px 4px; border: 0; background: none; color: var(--ink-muted);
  font: var(--fw-semi) var(--fs-meta)/1.2 var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.aic-clear:hover { color: var(--brand); }
.aic-clear:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.aic-main .aic-step > .aic-head > .aic-eyebrow { display: none; }

/* the estimate panel */
/* Stays in view while the steps scroll. It is capped at the window's height, so the price
   at its top is always on screen however long the step: a panel taller than the window
   can't stick, and gets pushed up and out of sight near the foot of the page. The rest of
   the panel (breakdown, export) scrolls inside it. */
.aic-panel { position: sticky; top: 88px; margin-top: var(--sp-4); background: var(--aic-plum); color: var(--aic-on-plum); border-radius: var(--r-lg);
  overflow-x: hidden; overflow-y: auto; max-height: calc(100vh - 88px - var(--sp-4)); max-height: calc(100dvh - 88px - var(--sp-4)); overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--aic-plum-line) transparent; }
.aic-panel__in { padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.aic-panel__top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.aic-panel .aic-eyebrow { color: var(--aic-hot); margin: 0; }
.aic-total { font: var(--fw-semi) clamp(32px, 3vw, 42px)/1 var(--font-serif); color: #fff; margin-top: var(--sp-3); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.aic-range-total { font: var(--fw-semi) 24px/1.15 var(--font-serif); color: #fff; margin-top: var(--sp-3); font-variant-numeric: tabular-nums; }
.aic-upfront { display: grid; gap: 2px; margin-top: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--aic-plum-line); border-radius: var(--r-md); background: rgba(255, 255, 255, .05); }
.aic-upfront[hidden] { display: none !important; }
/* The "Spread over" slider in the panel, for a retainer. */
.aic-spread { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: rgba(255, 255, 255, .06); display: grid; gap: 6px; }
.aic-spread[hidden] { display: none !important; }
.aic-spread label { font: var(--fw-semi) var(--fs-body) var(--font); color: #fff; }
.aic-spread output { font-variant-numeric: tabular-nums; }
.aic-spread input { width: 100%; accent-color: var(--aic-teal); }
.aic-spread small { font-size: 12px; line-height: 1.35; color: var(--aic-on-plum-soft); }
.aic-upfront.is-waiting .aic-upfront__value { font-size: 17px; color: var(--aic-on-plum-soft); }
.aic-upfront__label { font: var(--fw-bold) 11px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--aic-on-plum-soft); }
.aic-upfront__value { font: var(--fw-semi) 24px/1.15 var(--font-serif); color: #fff; font-variant-numeric: tabular-nums; }
.aic-upfront__note { font-size: var(--fs-meta); color: var(--aic-on-plum-soft); line-height: 1.35; }
.aic-subhead { margin: var(--sp-4) 0 0; font: var(--fw-bold) 11px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--aic-on-plum-soft); }
.aic-subhead + .aic-total, .aic-subhead + .aic-total + .aic-range-total, .aic-subhead ~ .aic-range-total { margin-top: 4px; }
.aic-sub { color: var(--aic-on-plum-soft); font-size: var(--fs-meta); margin-top: 6px; line-height: 1.4; }
.aic-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--aic-plum-line); margin: var(--sp-4) calc(-1 * var(--sp-5)) 0; border-block: 1px solid var(--aic-plum-line); }
.aic-facts div { background: var(--aic-plum); padding: 10px 12px; }
.aic-facts b { display: block; font: var(--fw-semi) 18px/1.1 var(--font-serif); color: #fff; font-variant-numeric: tabular-nums; }
.aic-facts span { font-size: 11px; color: var(--aic-on-plum-soft); text-transform: uppercase; letter-spacing: .08em; }
.aic-break { list-style: none; margin: var(--sp-3) 0 0; padding: 0; font-size: var(--fs-body); }
.aic-break li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 6px 0; border-bottom: 1px solid var(--aic-plum-line); font-variant-numeric: tabular-nums; }
.aic-break li span:first-child { color: var(--aic-on-plum-soft); }
.aic-break li.sub span:first-child { padding-left: var(--sp-3); font-size: var(--fs-meta); }
.aic-break li.sum { border-bottom: 0; font-weight: var(--fw-bold); color: #fff; padding-top: 10px; }
.aic-break li.sum span:first-child { color: #fff; }
.aic-meter { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--aic-berry); margin-top: var(--sp-4); }
.aic-meter i { display: block; height: 100%; }
.aic-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: var(--sp-2); font-size: 11px; color: var(--aic-on-plum-soft); }
.aic-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; background: currentColor; vertical-align: 0; }
.aic-c1 { color: var(--aic-hot); } .aic-c2 { color: var(--aic-teal); } .aic-c3 { color: var(--aic-sky); } .aic-c4 { color: var(--aic-on-plum-soft); }
.aic-meter i.aic-c1 { background: var(--aic-hot); } .aic-meter i.aic-c2 { background: var(--aic-teal); } .aic-meter i.aic-c3 { background: var(--aic-sky); } .aic-meter i.aic-c4 { background: var(--aic-on-plum-soft); }
.aic-legend span { color: var(--aic-on-plum-soft); }
.aic-legend span.aic-c1::before { background: var(--aic-hot); } .aic-legend span.aic-c2::before { background: var(--aic-teal); }
.aic-legend span.aic-c3::before { background: var(--aic-sky); } .aic-legend span.aic-c4::before { background: var(--aic-on-plum-soft); }
.aic-panel.is-empty .aic-total, .aic-panel.is-empty .aic-range-total { color: var(--aic-on-plum-soft); }
.aic-stepnav .btn:disabled { opacity: .45; cursor: not-allowed; }
.aic-fx { display: block; margin-bottom: 6px; }
.aic-fx[hidden] { display: none !important; }
.aic-panel__foot { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--aic-plum-line); font-size: var(--fs-meta); color: var(--aic-on-plum-soft); line-height: 1.4; }
.aic-panel__toggle { display: none; margin-top: var(--sp-2); background: none; border: 1px solid var(--aic-plum-line); border-radius: var(--r-sm); color: #fff; padding: 4px 10px; font: var(--fw-semi) var(--fs-meta) var(--font); cursor: pointer; }

/* team workings */
.aic-detail { margin-top: var(--sp-10); }
.aic-detail h2 { font: var(--fw-semi) 24px/1.2 var(--font-serif); color: var(--ink-heading); margin: 0 0 var(--sp-2); }
.aic-tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.aic-tablewrap table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: var(--fs-body); }
.aic-tablewrap th, .aic-tablewrap td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--ink); }
.aic-tablewrap th { font: var(--fw-semi) 11px/1.2 var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); background: var(--surface-sunken); }
.aic-tablewrap .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.aic-tablewrap .aic-note { color: var(--ink-muted); }
/* light.css paints every td's colour and background with !important, so the row
   emphasis lives on a label inside the cell rather than on the cell itself. */
.aic-rowblock { display: inline-block; background: var(--aic-plum); color: #fff; font-weight: var(--fw-bold); padding: 3px 10px; border-radius: var(--r-sm); }
.aic-rowstage { color: var(--brand-strong); font-weight: var(--fw-bold); }
.aic-rowtot { color: var(--ink-heading); font-weight: var(--fw-heavy); }
.aic-maths { font: 13px/1.6 ui-monospace, "SF Mono", Menlo, monospace; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); overflow-x: auto; white-space: pre; color: var(--ink); margin: 0; }
.aic-ratecard { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-3) var(--sp-4); }
.aic-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink-heading); color: #fff; padding: 10px 18px; border-radius: var(--r-md); font-weight: var(--fw-semi); z-index: 60; }

/* views */
.aic-is-team .aic-client-only, .aic-is-client .aic-team-only { display: none !important; }
/* No Clear or Start again in the team view: a producer working on a client's saved brief
   must not be able to wipe it with one click (Sam, 5 Oct 2026). */
.aic-is-team #aic-clear, .aic-is-team #aic-restart { display: none !important; }

/* narrower screens */
@media (max-width: 1180px) {
  .aic-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-6); }
  .aic-rail { position: static; grid-column: 1 / -1; padding-top: 0; }
  .aic-rail ol { display: flex; flex-wrap: wrap; gap: 4px; }
  .aic-rail button { padding: 7px 12px 7px 38px; }
}
@media (max-width: 820px) {
  .aic-bar, .aic-layout, .aic-banner { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .aic-layout { grid-template-columns: minmax(0, 1fr); padding-bottom: 180px; }
  .aic-rail ol { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .aic-rail button { white-space: nowrap; }
  .aic-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; margin: 0; z-index: 40; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 72vh; overflow-y: auto; box-shadow: var(--shadow-lg); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .aic-panel:not(.is-open) .aic-panel__more { display: none; }
  .aic-panel__toggle { display: inline-block; }
  .aic-example { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .aic-card { transition: none; } .aic-card:hover { transform: none; } }

/* ---------------------------------------------------------------- client PDF
   The export controls in the panel, and the A4 document the browser saves. */
.aic-export { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--aic-plum-line); display: grid; gap: var(--sp-2); }
.aic-export label { display: grid; gap: 4px; font: var(--fw-semi) var(--fs-meta) var(--font); color: var(--aic-on-plum); }
.aic-export label small { font-weight: var(--fw-normal); color: var(--aic-on-plum-soft); }
.aic-export input, .aic-export textarea { resize: vertical; font: var(--fw-normal) var(--fs-body) var(--font); padding: 8px 10px; border: 1px solid var(--aic-plum-line); border-radius: var(--r-md); background: rgba(255, 255, 255, .08); color: #fff; }
.aic-export input::placeholder, .aic-export textarea::placeholder { color: var(--aic-on-plum-soft); }
.aic-export__btn { padding: 10px 14px; border: 0; border-radius: var(--r-md); background: var(--aic-teal); color: var(--aic-plum); font: var(--fw-bold) var(--fs-body) var(--font); cursor: pointer; }
.aic-export__btn:hover { background: #fff; }
.aic-export__hint { display: block; font-size: 12px; color: var(--aic-on-plum-soft); }
.aic-export .aic-export__btn { margin-top: var(--sp-3); justify-self: start; }
.aic-doc-print { display: none; }

@media print {
  @page { size: A4; margin: 0; }
  body.aic-printing .aic-doc-print { padding: 0 14mm; }
  .pd-frame { width: 100%; border-collapse: collapse; }
  .pd-frame > thead > tr > td, .pd-frame > tfoot > tr > td, .pd-frame > tbody > tr > td { padding: 0; border: 0; }
  .pd-space { height: 14mm; }
  body.aic-printing main > *:not(.aic-doc-print), body.aic-printing > *:not(main) { display: none !important; }
  body.aic-printing, body.aic-printing main { background: #fff !important; }
  body.aic-printing .aic-doc-print { display: block; color: #221A20; font: 10.5pt/1.5 var(--font); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .aic-doc-print h1, .aic-doc-print h2, .aic-doc-print h3 { font-family: var(--font-serif); color: #2B0225; margin: 0; }
  .aic-doc-print h2 { font-size: 15pt; margin: 18pt 0 6pt; padding-top: 8pt; border-top: 1px solid #E3DBD6; break-after: avoid; }
  .aic-doc-print h3 { font-size: 11.5pt; margin: 10pt 0 4pt; color: #9B0167; break-after: avoid; }
  .pd-cover { background: #2B0225; color: #F5EDF2; padding: 16pt 18pt 18pt; border-radius: 6pt; }
  .pd-logo svg { height: 24pt; width: auto; color: #fff; fill: #fff; display: block; margin-bottom: 18pt; }
  .pd-eyebrow { font: 700 8pt/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #ff6cc4; background: #2B0225; margin: 0 0 6pt; }
  .pd-cover h1 { color: #fff; background: #2B0225; font-size: 24pt; line-height: 1.1; }
  .pd-meta { margin: 8pt 0 0; color: #D9C6D3; background: #2B0225; font-size: 10pt; }
  .pd-price { display: flex; gap: 10pt; margin: 12pt 0 6pt; }
  .pd-price > div { flex: 1; display: flex; flex-direction: column; border: 1px solid #E3DBD6; border-radius: 6pt; padding: 10pt 12pt; background: #FBF8F6; }
  .pd-price span { display: block; font: 700 7.5pt/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #5A4F56; }
  .pd-price b { display: block; font: 600 18pt/1.2 var(--font-serif); color: #2B0225; margin: 3pt 0; }
  .pd-price small { color: #5A4F56; font-size: 8.5pt; line-height: 1.4; }
  .pd-muted { color: #5A4F56; }
  .pd-note { color: #5A4F56; font-size: 9pt; margin: 4pt 0; }
  .pd-small { color: #483640; font-size: 10pt; margin: 2pt 0 6pt; }
  .aic-doc-print dl { display: grid; grid-template-columns: 36mm 1fr; gap: 3pt 10pt; margin: 0; }
  .aic-doc-print dt { font-weight: 700; color: #2B0225; }
  .aic-doc-print dd { margin: 0; }
  .aic-doc-print ul, .aic-doc-print ol { margin: 2pt 0 4pt; padding-left: 14pt; }
  .aic-doc-print li { margin-bottom: 2.5pt; break-inside: avoid; }
  .pd-table { width: 100%; border-collapse: collapse; font-size: 9.5pt; margin-top: 4pt; break-inside: avoid; }
  .pd-table th { text-align: left; font: 700 7.5pt/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: #5A4F56; border-bottom: 1.5px solid #2B0225; padding: 4pt 6pt; }
  .pd-table td { padding: 5pt 6pt; border-bottom: 1px solid #E3DBD6; }
  .pd-table tr.is-quoted td { background: #fdf0f8; font-weight: 700; color: #7a0152; }
  .pd-policy { break-before: page; }
  .pd-sec { break-inside: avoid; page-break-inside: avoid; }
  .pd-policy ol li b { color: #2B0225; }
  .pd-foot { margin-top: 16pt; padding-top: 6pt; border-top: 1px solid #E3DBD6; color: #5A4F56; font-size: 8pt; }
}

/* (i) explanations: a small round button by the question, opening a plain-English note
   under it. The shapes in the aspect-ratio options are drawn to scale. */
.aic-info { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 6px; padding: 0; vertical-align: 2px;
  border: 1.5px solid var(--brand); border-radius: 50%; background: transparent; color: var(--brand);
  font: italic var(--fw-bold) 13px/1 var(--font-serif); cursor: pointer; }
.aic-info:hover, .aic-info[aria-expanded="true"] { background: var(--brand); color: #fff; }
.aic-info:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.aic-info { position: relative; }
.aic-info::before { content: ""; position: absolute; inset: -11px; } /* a 44px tap area */
.aic-tip { max-width: 40rem; margin: var(--sp-1) 0 var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--r-md); color: var(--ink); font-size: var(--fs-body); line-height: 1.5; }
.aic-tip[hidden] { display: none; }
.aic-tip p { margin: 0 0 var(--sp-2); }
.aic-tip p:last-child { margin-bottom: 0; }
.aic-shape { width: 18px; height: 18px; margin-right: 6px; vertical-align: -4px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.aic-ratio-diagram { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.aic-ratio-diagram figure { margin: 0; text-align: center; }
.aic-ratio-diagram svg { width: 64px; height: 64px; fill: var(--surface-sunken, #F7F2EF); stroke: var(--brand); stroke-width: 2; }
.aic-ratio-diagram figcaption { font-size: var(--fs-meta); line-height: 1.4; color: var(--ink-muted); }
.aic-ratio-diagram figcaption b { display: block; color: var(--ink-heading); font-size: var(--fs-body); }
@media (max-width: 560px) { .aic-ratio-diagram { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { .aic-info, .aic-tip { display: none !important; } }

/* ---------- the simple layout (body.aic-simple: clients on the public calculator) ----------
   One question area, a progress bar instead of the step list, one clear Next, the price on
   its own with the breakdown a click away, and the PDF on the last step. Nothing here
   changes a question or a price; it only decides what is on show at once. */
.aic-progress, .aic-more-toggle { display: none; }
.aic-simple .aic-bar .aic-eyebrow { display: none; }
.aic-simple .aic-bar h1 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.aic-simple .aic-layout { position: relative; }
@media (min-width: 821px) { .aic-simple .aic-layout { grid-template-columns: minmax(0, 1fr) 340px; } }
.aic-simple .aic-rail { display: none; }
/* In the menu the steps are always one column: the medium and phone rules lay the rail out
   sideways (wrapping, or scrolling), which read as a jumble inside a menu. */
.aic-simple .aic-rail.is-open ol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; flex-wrap: nowrap; overflow: visible; padding: 0; }
.aic-simple .aic-rail.is-open button { padding: 8px 12px 8px 40px; white-space: normal; font-size: var(--fs-body); }
.aic-simple .aic-rail.is-open button::before { top: 6px; }
@media (max-width: 560px) { .aic-simple .aic-rail.is-open { left: 0 !important; right: 0; width: auto; max-width: none; } }
.aic-simple .aic-rail.is-open .aic-restart { display: block; width: 100%; margin: var(--sp-2) 0 0; padding: var(--sp-3) 12px 4px; border-top: 1px solid var(--line); text-align: left; }
.aic-simple .aic-rail.is-open { display: block; position: absolute; z-index: 60; width: 300px; max-width: calc(100vw - 32px); padding: var(--sp-2); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg, 0 12px 32px rgba(20, 3, 16, .18)); }
.aic-simple .aic-topnav #aic-count-top, .aic-simple .aic-topnav .aic-spacer { display: none; }
/* Clear stays in view (Sam, 5 Oct 2026): after the progress bar's "All steps", before Next. */
.aic-simple .aic-topnav #aic-back-top { order: 0; }
.aic-simple .aic-topnav .aic-progress { order: 1; }
.aic-simple .aic-topnav #aic-clear { order: 2; align-self: flex-start; margin-top: -1px; }
.aic-simple .aic-topnav #aic-next-top { order: 3; margin-left: var(--sp-2); }
.aic-simple .aic-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px var(--sp-3); flex: 1; min-width: 0; }
.aic-progress__label { font: var(--fw-semi) var(--fs-meta)/1.3 var(--font); color: var(--ink-soft); min-width: 0; }
.aic-allsteps { background: none; border: 0; padding: 2px 0; color: var(--brand); font: var(--fw-semi) var(--fs-meta)/1.2 var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.aic-allsteps:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.aic-progress__bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.aic-progress__bar i { display: block; height: 100%; background: var(--brand); transition: width .3s ease; }
.aic-simple #aic-back, .aic-simple #aic-back-top { background: none; border: 0; padding: 8px 4px; color: var(--ink-soft); font-weight: var(--fw-semi);
  text-decoration: underline; text-underline-offset: 3px; box-shadow: none; }
.aic-simple #aic-back:hover, .aic-simple #aic-back-top:hover { color: var(--brand); }
.aic-simple #aic-back:disabled, .aic-simple #aic-back-top:disabled { visibility: hidden; }
.aic-simple .aic-more-toggle { display: inline-block; margin: var(--sp-1) 0 var(--sp-4); background: none; border: 0; padding: 0; color: var(--brand);
  font: var(--fw-semi) var(--fs-meta)/1.3 var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.aic-simple .aic-included:not(.is-open) .aic-included__more { display: none; }
.aic-simple .aic-panel__toggle { display: inline-block; }
.aic-simple .aic-panel:not(.is-open) .aic-panel__more, .aic-simple .aic-panel:not(.is-open) .aic-spread { display: none; }
/* On a phone the panel is a bar at the foot of the screen: the note and the PDF stay inside
   "See the breakdown" there, so the bar never grows over the form. */
@media (min-width: 821px) {
  .aic-simple .aic-panel .aic-panel__foot { display: block !important; }
  .aic-simple.aic-last .aic-panel .aic-export { display: grid !important; }
}
#aic-next, #aic-next-top { text-align: center; white-space: nowrap; }

/* The retainer in words under the monthly fee, with Change back to "Your retainer". */
.aic-term { margin: 6px 0 0; font-size: var(--fs-meta); color: var(--aic-on-plum); }
.aic-term__change { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: var(--fw-semi); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.aic-term__change:hover { color: #fff; }
.aic-term__change:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Moving to a step puts focus on its heading (focusStep), for screen readers. It isn't a
   control, so no focus box round it: arriving from the AI page drew one (Sam, 6 Oct 2026). */
.aic-step h2[tabindex="-1"]:focus, .aic-step h2[tabindex="-1"]:focus-visible { outline: none; }

/* The Omni Productions website's type and paper, over the dashboard's tokens. */
:root {
  /* The website's own measurements (redux.css), so the logo and content edges line up
     with every other page on omni-productions.co.uk. */
  --site-gutter: clamp(20px, 4vw, 56px);
  --site-max: 1360px;
  --font: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
  --font-serif: "Fraunces", "Source Serif Pro", Georgia, serif;
  --surface-sunken: #FBF8F6;
  --ink: #221A20;
  --ink-heading: #2B0225;
  --fs-body: 15px;
  --fs-meta: 13px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--surface-sunken); }
.btn { background: var(--brand); color: #fff; border: none; padding: 10px 18px; border-radius: 4px; font: 600 15px/1.2 var(--font); cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover { background: var(--brand-strong); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn[hidden] { display: none !important; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
/* Four contact fields sit two by two, and stack on a phone. */
#site-agree .aic-inputs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }

/* Header: same height, logo size and content edge as the website's .header__bar. */
.site-header { background: #2B0225; color: #fff; }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: 76px; width: min(100% - 2 * var(--site-gutter), var(--site-max)); margin-inline: auto; }
.site-header__brand { display: inline-flex; color: #fff; }
.site-header__brand svg { height: 34px; width: auto; display: block; }
.site-header__tag { font: 600 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: #ff6cc4; }
.site-header__meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: flex-end; }
.site-header__out { color: #fff; font: 600 14px/1 var(--font); text-underline-offset: 3px; }
.site-header__out:hover { color: #ff6cc4; }

/* The calculator's own rows use the same content edge, so its left side lines up
   under the logo. (Loaded after the calculator's stylesheet, so these win.) */
.aic-bar, .aic-layout, .aic-banner { max-width: none; width: min(100% - 2 * var(--site-gutter), var(--site-max)); padding-left: 0; padding-right: 0; }
.aic-bar { padding-top: var(--sp-6); }

/* ---------------------------------------------------------------- landing
   The calculator is hidden until "Start your estimate"; #estimate skips straight to it. */
body.site-landing .aic-bar, body.site-landing .aic-layout, body.site-landing .aic-banner { display: none !important; }
body:not(.site-landing) .site-landing-page { display: none; }
.lp-wrap { width: min(100% - 2 * var(--site-gutter), var(--site-max)); margin-inline: auto; }
.lp-eyebrow { font: 600 13px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: #ff6cc4; margin: 0 0 16px; }
.lp-eyebrow--brand { color: var(--brand); }
.site-landing-page h1 { font: 500 clamp(2.4rem, 5vw, 4.4rem)/1.02 var(--font-serif); letter-spacing: -.015em; color: #fff; margin: 0 0 20px; text-wrap: balance; font-variation-settings: "opsz" 144; }
.site-landing-page h2 { font: 500 clamp(1.8rem, 3vw, 2.6rem)/1.1 var(--font-serif); color: var(--ink-heading); margin: 0 0 28px; text-wrap: balance; }
.lp-hero { background: #2B0225; color: #F5EDF2; padding-block: clamp(40px, 6vw, 88px); }
.lp-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.lp-lead { font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.5; color: #E8D9E3; max-width: 34rem; margin: 0 0 28px; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lp-btn { padding: 15px 26px; font-size: 17px; }
.lp-ghost { padding: 13px 22px; border: 2px solid rgba(255,255,255,.55); border-radius: 4px; background: transparent; color: #fff; font: 600 17px/1.2 var(--font); cursor: pointer; }
.lp-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.lp-small { margin: 16px 0 0; font-size: 14px; color: #CDB8C6; }
.lp-hero__film { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.lp-hero__film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-caption { position: absolute; left: 14px; bottom: 12px; background: rgba(43,2,37,.85); color: #fff; padding: 5px 10px; border-radius: 3px; font-size: 13px; }
.lp-caption b { font-weight: 700; margin-right: 6px; }
.lp-section { padding-block: clamp(48px, 6vw, 88px) 0; }
/* The films, as the Omni website shows its work (its .tile cards): the film edge to edge
   at 16:9, then the kind of film in pink capitals, the title and one line under it. */
.lp-reel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 36px) clamp(20px, 2vw, 28px); }
.lp-tile { margin: 0; }
.lp-tile__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #F1ECE8; }
.lp-tile__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-tile__kind { display: block; margin-top: 1rem; font: 600 0.8rem/1 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: #9B0167; }
.lp-tile h3 { margin: 1rem 0 0; font: 500 clamp(1.3rem, 1.9vw, 1.6rem)/1.25 var(--font-serif); letter-spacing: -0.01em; color: #221A20; text-wrap: balance; }
.lp-tile p { margin: 0; font-size: 1rem; line-height: 1.5; color: #5A4F56; }
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: lp; }
.lp-steps li { counter-increment: lp; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 24px; }
.lp-steps li::before { content: counter(lp); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff; font: 700 16px/1 var(--font); margin-bottom: 14px; }
.lp-steps h3 { font: 600 21px/1.2 var(--font-serif); color: var(--ink-heading); margin: 0 0 8px; }
.lp-steps p { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.5; }
.lp-band { background: #2B0225; color: #F5EDF2; margin-top: clamp(56px, 7vw, 104px); padding-block: clamp(44px, 5vw, 72px); }
.lp-band__in { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 32px; align-items: center; }
.lp-band h2 { color: #fff; margin-bottom: 14px; }
.lp-band p { margin: 0; color: #E8D9E3; font-size: 17px; line-height: 1.55; max-width: 44rem; }
@media (max-width: 900px) {
  .lp-hero__in, .lp-band__in { grid-template-columns: 1fr; }
  /* Six films go 3, 2 or 1 across; the three steps go 3 or 1, never 2 + 1. */
  .lp-reel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .lp-reel { grid-template-columns: 1fr; } }

/* Text selection in the brand colour, as on omni-productions.co.uk (redux.css): pink
   with white on paper, white with plum on the plum surfaces. */
::selection { background: #9B0167; color: #fff; }
.site-header ::selection, .lp-hero ::selection, .lp-band ::selection,
.aic-panel ::selection, .aic-devcost ::selection, .aic-rowblock::selection { background: #fff; color: #2B0225; }

/* ------------------------------------------------------------ saved estimates (team page) */
.team-save { display: grid; gap: 6px; padding-top: 6px; border-top: 1px solid var(--aic-plum-line); }
.team-save__buttons { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.team-save__new { background: none; border: 0; color: #fff; font: 600 13px var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; }
.team-modal { width: min(1000px, calc(100vw - 32px)); }
.team-find { display: grid; gap: 4px; font: 600 13px var(--font); color: var(--ink-soft); margin-bottom: 12px; max-width: 420px; }
.team-find input { font: 400 15px var(--font); padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.team-table td { vertical-align: middle; }
.team-table tr.is-current td { background: var(--brand-tint); }
.team-table small { color: var(--ink-muted); }
.team-actions { white-space: nowrap; text-align: right; }
.team-actions button { background: none; border: 1px solid var(--line); border-radius: 4px; padding: 5px 9px; margin-left: 4px; font: 600 13px var(--font); color: var(--brand-strong); cursor: pointer; }
.team-actions button:hover { border-color: var(--brand); background: var(--brand-tint); }
.team-actions button[data-del] { color: var(--danger); }
/* The bots' trap field on the brief form: off-screen, not display:none (some bots skip those). */
.site-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* The privacy line under the send button. */
.site-privacy { margin: var(--sp-2) 0 0; font-size: var(--fs-meta); color: var(--ink-soft); }
.site-privacy a { color: var(--brand); }
/* The brief form's messages, styled as the website's own forms (redux.css .form .status):
   sent, the form folds away to a green panel; a problem, a pink-bordered note. */
.site-status[hidden] { display: none; }
.site-status.is-error { margin: 1.2rem 0 0; padding: 0.9rem 1.1rem; border: 2px solid var(--brand); background: none; color: var(--ink-heading); font-weight: 600; }
.site-status.is-sent { margin: 0; padding: clamp(1.6rem, 3vw, 2.4rem); border: 0; background: #019B82; color: #fff;
  font: 500 clamp(1.25rem, 1.8vw, 1.5rem)/1.4 var(--font-serif); text-align: center; }
.site-status:focus { outline: none; }
#site-agree.is-sent { padding: 0; border: 0; background: none; }
#site-agree.is-sent > :not(.site-status) { display: none; }

/* No Download PDF on the client page: the client gets the brief by email when they send it
   (functions/api/enquiry.js). The team page keeps it. Outweighs the simple layout's
   last-step rule in ai_calculator.css. */
body.aic-is-client .aic-panel .aic-export.aic-export.aic-export { display: none !important; }

/* Each film is one link, "Start with something like this", stretched over the whole card. */
.lp-section__lead { margin: -0.5rem 0 1.75rem; max-width: 40rem; font-size: 1.1rem; line-height: 1.5; color: #5A4F56; }
.lp-tile { position: relative; }
.lp-tile__go { display: inline-block; margin-top: 0.35rem; font-weight: 600; color: #9B0167; text-decoration: underline; text-underline-offset: 3px; }
.lp-tile__go::after { content: ""; position: absolute; inset: 0; }
.lp-tile__go:focus-visible { outline: none; }
.lp-tile:has(.lp-tile__go:focus-visible) { outline: 3px solid #9B0167; outline-offset: 6px; }
.lp-tile:hover .lp-tile__go { color: #7A0151; }
.lp-tile:hover .lp-tile__media video { transform: scale(1.02); }
.lp-tile__media video { transition: transform .3s ease; }
@media (prefers-reduced-motion: reduce) { .lp-tile__media video { transition: none; } .lp-tile:hover .lp-tile__media video { transform: none; } }
.lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The calculator's title, an h2 on the website (the landing's question is the page's h1). */
.aic-bar .aic-bar__name { font: var(--fw-semi) clamp(24px, 3vw, 32px)/1.1 var(--font-serif); color: var(--ink-heading); margin: 0; letter-spacing: -.01em; }
.aic-simple .aic-bar .aic-bar__name { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }