/* The EVP campaign planner, in the site's own look: Fraunces and Source Sans 3, plum, pink and
   warm paper, square corners. Adapted from the Enlivio planner's layout (27 Oct 2026). On paper
   it is set like the budgets and decks: the Omni mark in pink, a Fraunces title, the company's
   details at the foot of every sheet. */

.plan-hero__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.plan-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.plan-steps a { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0 1.1rem; border: 1px solid rgba(255,255,255,0.6);
  color: #fff; font-weight: 600; font-size: 0.95rem; text-decoration: none; border-radius: var(--radius); }
.plan-steps a:hover, .plan-steps a:focus-visible { background: #fff; color: var(--plum); }
.plan-steps b { color: var(--pink-hot); font-weight: 700; }
.plan-steps a:hover b { color: var(--pink); }
.plan-clear { min-height: 44px; padding: 0 1.1rem; border: 1px solid rgba(255,255,255,0.6); background: none; color: #fff; font: 600 0.95rem/1 var(--body);
  cursor: pointer; border-radius: var(--radius); }
.plan-clear:hover, .plan-clear:focus-visible { background: var(--pink); border-color: var(--pink); }

.plan-band h2 { margin-bottom: clamp(20px, 3vw, 32px); }
.plan-band .eyebrow { margin-bottom: 0.5rem; }

/* ── Channels and choices ────────────────────────────────── */
.plan-chips, .plan-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.plan-chip, .plan-pill, .plan-month { border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; border-radius: var(--radius);
  font: 600 0.95rem/1.2 var(--body); }
.plan-chip { min-height: 44px; padding: 0 1.1rem; }
.plan-pill { min-height: 40px; padding: 0 0.9rem; font-size: 0.9rem; }
.plan-chip:hover, .plan-pill:hover, .plan-month:hover { border-color: var(--plum); }
.plan-pill:disabled { color: #a49aa1; background: var(--paper-2); border-color: var(--line); cursor: not-allowed; }
.plan-chip[aria-pressed="true"], .plan-pill[aria-pressed="true"], .plan-month[aria-pressed="true"] { background: var(--plum); border-color: var(--plum); color: #fff; }
.plan-chip[aria-pressed="true"]::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pink-hot); margin-right: 0.6rem; vertical-align: 1px; }

/* ── Content types ───────────────────────────────────────── */
.plan-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-card-row) var(--gap-card-col); }
.plan-type { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.plan-type__pic { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: var(--plum); cursor: pointer; overflow: hidden; }
.plan-type__pic img { width: 100%; height: 100%; object-fit: cover; }
.plan-type__pic--none { display: grid; place-items: center; cursor: default; background: linear-gradient(135deg, var(--plum), var(--berry)); }
.plan-type__pic--none span { font: 500 1.2rem/1.2 var(--display); color: rgba(255,255,255,0.85); padding: 0 1rem; text-align: center; }
.plan-play { position: absolute; left: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; background: var(--pink); display: grid; place-items: center; }
.plan-play::before { content: ""; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.plan-type__pic:hover .plan-play, .plan-type__pic:focus-visible .plan-play { background: var(--pink-hot); }
.plan-type__tag { position: absolute; left: 12px; top: 12px; padding: 0.3rem 0.6rem; border-radius: var(--radius); background: rgba(20, 3, 16, 0.75);
  color: #fff; font: 700 0.75rem/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; }
.plan-type__body { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; padding: 1.1rem 1.2rem 1.3rem; }
.plan-type__body p { margin: 0; flex: 1; color: var(--ink-2); font-size: 1rem; }
.plan-type .btn { align-self: flex-start; margin-top: 0.4rem; }
.plan-from { font-size: 0.9rem; color: var(--ink-2); }
.plan-added { font-size: 0.9rem; font-weight: 700; color: var(--pink); }

/* ── The plan's items ────────────────────────────────────── */
.plan-rows { display: grid; gap: 1rem; margin-top: clamp(28px, 4vw, 44px); }
.plan-rows:empty { display: none; }
.plan-row { --c: var(--plum); background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--c); border-radius: var(--radius); }
.plan-row--cut { border-left-color: color-mix(in srgb, var(--c) 45%, white); }
.plan-row__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.5rem 0; }
.plan-row__price { text-align: right; }
.plan-row__price b { display: block; font: 500 1.5rem/1.1 var(--display); color: var(--plum); }
.plan-row__price span { font-size: 0.88rem; color: var(--ink-2); }
.plan-row__grid { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.9rem 1.25rem; padding: 1.2rem 1.5rem 1.5rem; align-items: start; }
.plan-lbl { padding-top: 0.55rem; font-size: 0.9rem; font-weight: 700; color: var(--ink-2); }
/* An example's link to its case study, on the cards (Sam, 27 Oct 2026). */
.plan-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.plan-month { min-height: 40px; padding: 0.3rem 0; font-size: 0.88rem; line-height: 1.1; }
.plan-month small, .plan-g__head small { display: block; font-size: 0.7rem; font-weight: 600; opacity: 0.7; }
.plan-stepper { justify-self: start; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.plan-stepper button { width: 40px; height: 40px; border: 0; background: none; cursor: pointer; font-size: 1.2rem; color: var(--ink); }
.plan-stepper button:hover { background: var(--paper-2); }
.plan-stepper output { min-width: 34px; text-align: center; font-weight: 700; }
.plan-included { margin: 0; padding: 0 0 0 1.1rem; columns: 2; column-gap: 2rem; color: var(--ink-2); font-size: 0.95rem; }
.plan-included li { margin: 0 0 0.25rem; break-inside: avoid; }
.plan-row__foot { display: flex; justify-content: flex-end; padding: 0 1rem 0.75rem; }
.plan-link { min-height: 40px; padding: 0 0.4rem; border: 0; background: none; cursor: pointer; color: var(--ink-2); font: 600 0.9rem/1 var(--body);
  text-decoration: underline; text-underline-offset: 3px; }
.plan-link:hover { color: var(--pink); }
.plan-empty { margin: 0; color: var(--ink-2); }
.plan-empty a { color: var(--pink); font-weight: 600; }
.plan-row__grid .plan-empty { padding-top: 0.55rem; }

/* While the visitor's plan is empty: an example plan, greyed and fading out, with the prompt over it. */
.plan-example-wrap { position: relative; }
.plan-example { max-height: 40rem; overflow: hidden; opacity: 0.4; filter: grayscale(1); pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.plan-example__note { position: absolute; top: 9rem; left: 50%; transform: translateX(-50%); width: min(26rem, calc(100% - 2rem));
  padding: 1.5rem 1.75rem; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(20, 3, 16, 0.12); text-align: center; }
.plan-example__tag { display: block; margin-bottom: 0.35rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pink); }
.plan-example__note p { margin: 0; font: 500 1.25rem/1.3 var(--display); color: var(--plum); text-wrap: balance; }

/* ── The plan ────────────────────────────────────────────── */
.plan-tiles { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 1rem; margin-bottom: 2.5rem; }
.plan-tile { padding: 1.3rem 1.4rem; background: var(--paper-2); border-radius: var(--radius); }
.plan-tile small { display: block; margin-bottom: 0.4rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.plan-tile b { display: block; font: 500 2rem/1.1 var(--display); color: var(--plum); }
.plan-tile span { display: block; margin-top: 0.3rem; font-size: 0.9rem; color: var(--ink-2); }
.plan-tile--total { background: var(--plum); color: #fff; }
.plan-tile--total small { color: var(--pink-hot); }
.plan-tile--total b { color: #fff; font-size: 2.8rem; }
.plan-tile--total span { color: #E8D9E3; }

.plan-gantt { overflow-x: auto; margin-bottom: 2.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.plan-g { min-width: 860px; }
.plan-g__row { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 52px; border-top: 1px solid var(--line); }
.plan-g__row:first-child { border-top: 0; }
.plan-g__name { display: flex; flex-direction: column; justify-content: center; padding: 0.5rem 0.9rem; border-right: 1px solid var(--line); font-size: 0.9rem; }
.plan-g__name b { font-weight: 700; }
.plan-g__name span { font-size: 0.82rem; color: var(--ink-2); }
.plan-g__track { position: relative; background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: calc(100% / 13) 100%; }
.plan-g__head { min-height: 40px; background: var(--paper-2); }
.plan-g__head .plan-g__track { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); background: none; }
.plan-g__head .plan-g__track span { padding: 0.6rem 0 0 0.4rem; border-left: 1px solid var(--line); font-size: 0.82rem; font-weight: 700; color: var(--ink-2); }
.plan-g__bar { --c: var(--plum); position: absolute; top: 14px; height: 24px; min-width: 6px; border-radius: 2px; background: var(--c); }
.plan-g__bar--cut { background: color-mix(in srgb, var(--c) 45%, white); }
.plan-g__due { position: absolute; top: 10px; width: 12px; height: 32px; border-radius: 2px; background: var(--pink-hot); }
/* The proposed shoot: a round marker on the bar, in the site's green so it reads apart from "ready". */
.plan-g__shoot { position: absolute; z-index: 1; top: 16px; width: 10px; height: 20px; border-radius: 5px; background: var(--green); border: 2px solid #fff; box-sizing: content-box; margin-left: -2px; }
.plan-lg--shoot { background: var(--green); border-radius: 6px; }
.sw { --c: var(--plum); display: inline-block; flex-shrink: 0; width: 10px; height: 10px; margin-right: 0.5rem; border-radius: 2px; background: var(--c); }
.sw--cut { background: color-mix(in srgb, var(--c) 45%, white); }
.plan-legend { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: -1.75rem 0 2.5rem; font-size: 0.9rem; color: var(--ink-2); }
.plan-lg { display: inline-block; width: 22px; height: 12px; margin-right: 0.5rem; vertical-align: -1px; border-radius: 2px; }
.plan-lg--cut { background: color-mix(in srgb, var(--plum) 45%, white); }
.plan-lg--due { background: var(--pink-hot); }

.plan-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.plan-table th { padding: 0.6rem 0.75rem; border-bottom: 2px solid var(--plum); text-align: left; font-size: 0.85rem; font-weight: 700; color: var(--pink); white-space: nowrap; }
.plan-table td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.plan-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan-table__month td { padding: 0.5rem 0.75rem; background: var(--paper-2); font-weight: 700; color: var(--plum); }
.plan-table__quarters td { border-top: 2px solid var(--plum); border-bottom: 0; font-weight: 700; }
.plan-table__quarters td.num { font: 500 1.25rem/1.2 var(--display); color: var(--pink); }
.plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 2rem; }
.plan-copied { font-size: 0.9rem; font-weight: 700; }

/* ── Send to a producer ──────────────────────────────────── */
.plan-send { max-width: 52rem; margin-top: clamp(40px, 5vw, 64px); padding: clamp(24px, 3vw, 36px); background: var(--paper-2); border-radius: var(--radius); }
.plan-send h3 { margin: 0 0 1.25rem; }
.plan-send__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
.plan-send label small { font-weight: 400; color: var(--ink-2); }

/* ── The example player ──────────────────────────────────── */
.plan-player { width: min(92vw, 1100px); max-width: none; padding: 0; border: 0; background: #000; }
.plan-player::backdrop { background: rgba(20, 3, 16, 0.85); }
.plan-player video, .plan-player img { display: block; width: 100%; max-height: 78vh; object-fit: contain; background: #000; }
.plan-player [hidden] { display: none; }
.plan-player__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; background: var(--plum); color: #fff; }
.plan-player__bar .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.6); }
.plan-player__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.plan-send__next { margin: -0.75rem 0 1.25rem; color: var(--ink-2); }

.plan-print { display: none; }

/* The way down to the plan: a pill at the foot of the screen, its arrow nudging downward and a ring
   pulsing out from it, so it reads as "there is more below" without anyone having to read it. */
.plan-jump { position: fixed; z-index: 30; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0 1.4rem; border-radius: 999px;
  background: var(--pink); color: #fff; font: 700 1rem/1 var(--body); text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(43, 2, 37, 0.3); animation: plan-ring 1.8s var(--ease) infinite; }
.plan-jump[hidden] { display: none; }
.plan-jump:hover, .plan-jump:focus-visible { background: var(--plum); color: #fff; }
.plan-jump:focus-visible { outline: 3px solid var(--pink-hot); outline-offset: 3px; }
.plan-jump svg { animation: plan-nudge 1.8s var(--ease) infinite; }
@keyframes plan-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
@keyframes plan-ring {
  0% { box-shadow: 0 6px 20px rgba(43, 2, 37, 0.3), 0 0 0 0 rgba(155, 1, 103, 0.45); }
  70% { box-shadow: 0 6px 20px rgba(43, 2, 37, 0.3), 0 0 0 14px rgba(155, 1, 103, 0); }
  100% { box-shadow: 0 6px 20px rgba(43, 2, 37, 0.3), 0 0 0 0 rgba(155, 1, 103, 0); }
}
@media (prefers-reduced-motion: reduce) { .plan-jump, .plan-jump svg { animation: none; } }

/* A card left on its own in the last row runs the full width, its picture beside its words. */
@media (min-width: 1001px) {
  .plan-type:last-child:nth-child(3n + 1) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .plan-type:last-child:nth-child(3n + 1) .plan-type__pic { height: 100%; }
}
@media (min-width: 721px) and (max-width: 1000px) {
  .plan-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-type:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plan-type:last-child:nth-child(odd) .plan-type__pic { height: 100%; }
}
@media (max-width: 1000px) {
  .plan-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan-tile--total { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .plan-types, .plan-send__fields { grid-template-columns: 1fr; }
  .plan-row__head { padding: 1rem 1rem 0; }
  .plan-row__grid { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding: 1rem; }
  .plan-lbl { padding-top: 0.5rem; }
  .plan-months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .plan-included { columns: 1; }
  .plan-tiles { gap: 0.5rem; }
  .plan-tile { padding: 0.9rem; }
  .plan-tile b { font-size: 1.5rem; }
  .plan-table th:nth-child(2), .plan-table td:nth-child(2) { display: none; }
}

/* ── On paper ────────────────────────────────────────────────
   Set like the budget PDFs and decks: the Omni mark, a Fraunces title in Omni pink, Source Sans
   for the rest, and the company's details at the foot of every sheet. They sit in the page's own
   margin box: once a page defines a margin box the browser prints none of its own date, title
   and address there, and every sheet keeps real margins, so nothing can run into the footer. */
@media print {
  @page {
    size: A4;
    margin: 15mm 15mm 24mm;
    /* Claimed, though empty: Chrome leaves out its own header and footer only along an edge
       whose margin boxes the page defines, so without this its date and title print above. */
    @top-center { content: ""; }
    @bottom-left {
      content: "Omni Productions  ·  Underfall Yard, Cumberland Road, Bristol BS1 6XG  ·  0117 917 7100  ·  hello@omni-productions.co.uk\A Omni Productions is a trading name of Omnifarious Limited, registered in England, company no. 03601961.";
      white-space: pre-wrap; vertical-align: top; padding-top: 4mm;
      font: 400 8pt/1.55 "Source Sans 3", "Source Sans Pro", sans-serif; color: #6a636e;
    }
    @bottom-right {
      content: counter(page) " of " counter(pages);
      vertical-align: top; padding-top: 4mm;
      font: 400 8pt/1.55 "Source Sans 3", "Source Sans Pro", sans-serif; color: #6a636e;
    }
  }
  body { background: #fff; font-size: 10.5pt; color: #2a2430; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .header, .footer, .skip, .modal, .cta, .plan-hero, #channels, #content, .plan-actions, .plan-send, .plan-player, .plan-jump,
  [id^="cookiescript"], [class^="cookiescript"] { display: none !important; }
  .plan-band { padding: 0; background: none; }
  .plan-band > .wrap { width: auto; margin: 0; }
  #plan > .wrap > .eyebrow, #plan > .wrap > h2 { display: none; }
  .plan-print { display: block; margin-bottom: 7mm; }
  .plan-print__mark svg { display: block; height: 11mm; width: auto; color: #9B0167; margin-bottom: 5mm; }
  .plan-print p { margin: 0; font-size: 9.5pt; color: #8a8390; }
  .plan-print .plan-print__title { margin: 0 0 2mm; font: 500 24pt/1.12 var(--display); letter-spacing: -0.01em; color: #9B0167; }
  .plan-tiles { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3mm; margin-bottom: 7mm; break-inside: avoid; }
  .plan-tile { padding: 4mm; background: #f7f5f7; }
  .plan-tile--total { grid-column: auto; background: #250217; }
  .plan-tile b { font-size: 18pt; }
  .plan-tile--total b { font-size: 22pt; }
  .plan-gantt { overflow: visible; border-color: #e3dde1; margin-bottom: 7mm; }
  .plan-g { min-width: 0; }
  .plan-g__row { grid-template-columns: 46mm minmax(0, 1fr); min-height: 9mm; break-inside: avoid; }
  .plan-legend { margin: -4mm 0 7mm; font-size: 9pt; break-before: avoid; }
  /* The schedule starts its own page: left to fall where it may, its heading and first month were
     stranded at the foot of the timeline's page. */
  .plan-table { font-size: 9.5pt; break-before: page; }
  .plan-table__month { break-after: avoid; }
  .plan-table tr { break-inside: avoid; }
  .plan-table td:nth-child(4), .plan-table td:nth-child(5) { white-space: nowrap; }
}