/* ---------------------------------------------------------------------------
   Channel 8 — sponsor site. Mobile first; two breakpoints (720 / 1040).
   No framework, no webfonts, no build step. One file, drop it on any host.

   LIGHT theme. The show itself is neon-on-black, and the two places that
   actually show the show — the hero video and the on-air preview card — stay
   dark on purpose: they are screens inside a white page, which is what they
   are. Everything else is paper.
   ------------------------------------------------------------------------- */

:root{
  --paper:#ffffff;
  --paper2:#f5f6fa;      /* alternating sections, panels */
  --paper3:#eceff6;      /* inset rows, day cells, chips */
  --ink:#15171f;         /* body text */
  --ink2:#2a2f3d;
  --muted:#606a80;
  --line:rgba(21,23,31,.12);
  --line2:rgba(21,23,31,.24);
  --screen:#0e0f14;      /* the two dark islands: hero video + on-air preview */

  --magenta:#d81b76;     /* CTA + the show's own pink, darkened enough for white type */
  --magenta-soft:rgba(216,27,118,.09);
  --cyan:#22d3ee;        /* fills only */
  --cyan-ink:#0a7f96;    /* cyan as TEXT on paper */
  --amber:#ffc21e;       /* fills only */
  --gold:#8a5a00;        /* amber as TEXT on paper — prices, totals */
  --green:#00d076;       /* fills only */
  --green-ink:#00794a;
  --red:#d0322c;
  --red-soft:rgba(208,50,44,.07);

  --shadow:0 1px 1px rgba(18,22,40,.04),0 6px 18px -14px rgba(18,22,40,.30);
  --shadow-lg:0 2px 6px rgba(18,22,40,.06),0 26px 54px -32px rgba(18,22,40,.42);
  --r:10px;
  --wrap:1180px;
  --display:"Archivo Black","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --text:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
/* .btn is display:inline-flex, which beats the UA's [hidden]{display:none} —
   without this the Back button shows up on step 1 and Continue on checkout. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.6 var(--text);
  overflow-x:hidden;
}
/* height:auto is not optional: the markup carries width/height attributes for
   layout stability, and setting only the CSS width leaves the HTML height in
   play — which is what squashes a logo. */
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:900;letter-spacing:-.02em;line-height:1.02}
p{margin:0 0 1em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px;border-radius:4px}

.wrap{width:min(var(--wrap),100% - 2rem);margin-inline:auto}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1rem;
  font:800 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-ink);
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(0,208,118,.22);animation:pulse 2.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(0,208,118,0)}}
.section-title{font-size:clamp(23px,4.4vw,33px);margin-bottom:1.2rem;letter-spacing:-.015em}
/* The small uppercase label above a section title. Does the work the giant
   all-caps headline used to do, without the shouting. */
.kicker{
  display:flex;align-items:center;gap:.55rem;margin:0 0 .5rem;
  font:800 11px/1 var(--text);letter-spacing:.17em;text-transform:uppercase;color:var(--muted);
}
.kicker::before{content:"";width:22px;height:2px;background:var(--magenta);flex:0 0 auto}
.fineprint{color:var(--muted);font-size:13px}
.badge{display:inline-block;padding:.2rem .5rem;border-radius:6px;font:800 11px/1.4 var(--text);letter-spacing:.08em;text-transform:uppercase}
.badge--amber{background:var(--amber);color:#4a3200}
.badge--green{background:var(--green);color:#00230f}
.badge--red{background:var(--red);color:#fff}
.badge--grey{background:var(--paper3);color:var(--muted);border:1px solid var(--line)}

/* ------------------------------------------------------------- buttons -- */
.btn{
  --bg:transparent;--fg:var(--ink);--bd:var(--line2);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.25rem;border-radius:8px;border:1px solid var(--bd);
  background:var(--bg);color:var(--fg);
  font:700 14.5px/1 var(--text);letter-spacing:.01em;text-decoration:none;
  cursor:pointer;transition:transform .12s ease,filter .12s ease,background .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:translateY(1px)}
.btn--primary{--bg:var(--magenta);--fg:#fff;--bd:var(--magenta);box-shadow:0 6px 16px -10px rgba(216,27,118,.8)}
.btn--primary:hover{filter:brightness(1.06)}
.btn--ghost{background:var(--paper)}
.btn--ghost:hover{background:var(--paper3)}
.btn--sm{padding:.6rem 1rem;font-size:13px}
.btn--wide{width:100%}
.btn[disabled]{opacity:.42;cursor:not-allowed;box-shadow:none}
.iconbtn{
  width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
  background:var(--paper);font-size:22px;line-height:1;cursor:pointer;color:var(--ink);
}
.iconbtn:hover:not([disabled]){border-color:var(--line2);background:var(--paper3)}
.iconbtn[disabled]{opacity:.35;cursor:default}

/* -------------------------------------------------------------- header -- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:.75rem;
  padding:.6rem clamp(.75rem,3vw,2rem);
  background:rgba(255,255,255,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav__brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:1 1 auto;min-width:0}
.nav__brand img{width:36px}
.nav__wordmark{display:flex;flex-direction:column;font:900 15px/1 var(--display);letter-spacing:-.01em}
.nav__wordmark small{font:700 9px/1.4 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.nav__links{display:none;gap:1.4rem}
.nav__links a{text-decoration:none;font-weight:600;font-size:14px;color:var(--muted)}
.nav__links a:hover{color:var(--ink)}

/* ---------------------------------------------------------------- hero -- */
/* Copy left, the show playing in a small set on the right. Short by design:
   the calendar is the page, so the hero gets one screen at most. */
.hero{position:relative;overflow:hidden;padding:clamp(1.8rem,5vw,3rem) 0 clamp(1.6rem,4vw,2.6rem)}
.hero__glow{
  position:absolute;inset:-40% -20% auto -20%;height:70vh;pointer-events:none;
  background:
    radial-gradient(44% 56% at 18% 8%,rgba(216,27,118,.13),transparent 70%),
    radial-gradient(42% 54% at 86% 0%,rgba(34,211,238,.17),transparent 72%);
}
.hero__inner{position:relative;display:grid;gap:1.8rem;align-items:center}
.hero h1{font-size:clamp(31px,7.2vw,50px);letter-spacing:-.025em;line-height:1.04}
.lede{color:var(--muted);font-size:clamp(15px,3.8vw,17px);max-width:46ch;margin:.8rem 0 0}
.hero__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.3rem 0 0}

/* the little TV the intro plays in: bezel, chin, power light, two feet */
.tv{margin:0;max-width:520px;justify-self:center;width:100%}
.tv__box{
  position:relative;padding:11px 11px 30px;border-radius:20px;
  background:linear-gradient(175deg,#2b3040,#14161e 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),var(--shadow-lg);
}
.tv__screen{position:relative;border-radius:10px;overflow:hidden;background:#000}
.tv__screen video{width:100%;aspect-ratio:16/9;object-fit:cover;height:auto;display:block}
.tv__scan{position:absolute;inset:0;pointer-events:none;opacity:.45;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.42) 0 1px,transparent 1px 4px)}
.tv__tag{
  position:absolute;left:0;top:0;padding:.3rem .7rem;background:var(--magenta);color:#fff;
  font:800 9px/1.4 var(--text);letter-spacing:.16em;text-transform:uppercase;
  text-shadow:1px 1px 0 rgba(0,0,0,.45);
}
.tv__led{
  position:absolute;left:20px;bottom:12px;width:7px;height:7px;border-radius:50%;
  background:var(--green);box-shadow:0 0 9px rgba(0,208,118,.9);
}
.tv__sound{
  position:absolute;right:14px;bottom:6px;width:30px;height:30px;border-radius:50%;color:#fff;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);cursor:pointer;font-size:13px;
}
.tv__sound:hover{background:rgba(255,255,255,.2)}
.tv__stand{
  display:block;width:26%;height:12px;margin:0 auto;border-radius:0 0 10px 10px;
  background:linear-gradient(180deg,#20242f,#171a23);
}
.tv__stand::after{
  content:"";display:block;position:relative;top:12px;left:50%;transform:translateX(-50%);
  width:250%;height:8px;border-radius:6px;background:#1b1f29;
  box-shadow:0 8px 18px -10px rgba(18,22,40,.8);
}
.tv figcaption{margin:1.9rem 0 0;font-size:12px;color:var(--muted);text-align:center}

/* ------------------------------------------------- the strip under it -- */
.bar{border-bottom:1px solid var(--line);background:var(--paper2)}
.bar__inner{display:grid;gap:1rem;padding:1.1rem 0;align-items:center}
.bar__facts{display:flex;flex-wrap:wrap;gap:1.6rem;list-style:none;margin:0;padding:0}
.bar__facts li{display:flex;flex-direction:column}
.bar__facts b{font:900 20px/1.1 var(--display);color:var(--ink);letter-spacing:-.01em}
.bar__facts span{font-size:12px;color:var(--muted);letter-spacing:.03em}
.bar__links{display:flex;flex-wrap:wrap;gap:.6rem}
.slink{
  display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-radius:8px;
  border:1px solid var(--line2);background:var(--paper);text-decoration:none;font-weight:700;font-size:13.5px;
}
.slink:hover{border-color:var(--magenta);color:var(--magenta)}
.slink i{font-style:normal;color:var(--cyan-ink)}

/* ---------------------------------------------------------------- cast -- */
/* The four desks, drawn once for the show and reused here. Same head size and
   eye line on all four (normalised when the PNGs were cut), so the row reads as
   one cast photo rather than four crops. */
.cast{padding:clamp(2.5rem,7vw,4rem) 0;border-top:1px solid var(--line)}
.cast__lede{color:var(--muted);max-width:60ch;margin:-.6rem 0 1.6rem;font-size:15px}
.cast__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;
  list-style:none;margin:0;padding:0}
.cast__card{
  --accent:var(--magenta);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper);
  box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.cast__card img{
  width:100%;height:auto;display:block;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 16%,var(--paper)),var(--paper));
}
.cast__meta{padding:.7rem .85rem;border-top:3px solid var(--accent);margin-top:auto}
.cast__meta b{display:block;font:900 15px/1.2 var(--display)}
.cast__meta span{display:block;margin-top:.25rem;font-size:12.5px;color:var(--muted);line-height:1.4}
.cast__reads{
  display:inline-block;margin-top:.5rem;padding:.2rem .45rem;border-radius:5px;font-style:normal;
  font:800 10px/1.5 var(--text);letter-spacing:.1em;text-transform:uppercase;
  background:color-mix(in srgb,var(--accent) 20%,var(--paper));
  color:var(--ink);border:1px solid color-mix(in srgb,var(--accent) 55%,var(--paper));
}
/* The Announcer is heard and never seen, so the card has no portrait to show.
   A level meter is the honest illustration. */
.cast__reads--none{
  background:var(--paper3);color:var(--muted);border-color:var(--line);
}
.cast__card--void{--accent:var(--magenta)}
.cast__wave{
  aspect-ratio:400/460;display:flex;align-items:center;justify-content:center;gap:7px;
  background:linear-gradient(180deg,#1b1f2b,#12141c);
}
.cast__wave i{
  width:8px;border-radius:3px;background:var(--magenta);opacity:.9;
  animation:vu 1.5s ease-in-out infinite;
}
.cast__wave i:nth-child(1){height:22%;animation-delay:0s}
.cast__wave i:nth-child(2){height:44%;animation-delay:.12s}
.cast__wave i:nth-child(3){height:70%;animation-delay:.24s}
.cast__wave i:nth-child(4){height:92%;animation-delay:.36s;background:var(--cyan)}
.cast__wave i:nth-child(5){height:70%;animation-delay:.48s}
.cast__wave i:nth-child(6){height:44%;animation-delay:.6s}
.cast__wave i:nth-child(7){height:22%;animation-delay:.72s}
@keyframes vu{50%{transform:scaleY(.45)}}
.cast__card--green{--accent:var(--green)}
.cast__card--blue{--accent:var(--cyan)}
.cast__card--orange{--accent:var(--amber)}
.cast__card--pink{--accent:var(--magenta)}

/* ----------------------------------------------------------------- how -- */
.how,.pricing,.booking{padding:clamp(2.5rem,7vw,4.5rem) 0}
.pricing{background:var(--paper2);border-block:1px solid var(--line)}
.cards{display:grid;gap:1rem;list-style:none;margin:0;padding:0}
.card{position:relative;padding:1.5rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);box-shadow:var(--shadow)}
.card__n{
  position:absolute;top:-14px;left:1.2rem;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;background:var(--cyan);color:#04222a;
  font:900 18px/1 var(--display);
}
.card h3{font-size:17px;margin:.5rem 0 .55rem;letter-spacing:-.01em}
.card p{margin:0;color:var(--muted);font-size:14.5px}
.card b{color:var(--ink)}

/* ------------------------------------------------------------- pricing -- */
.tiers{display:grid;gap:1rem}
.tier{
  position:relative;padding:1.5rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);box-shadow:var(--shadow);
}
.tier--star{border-color:var(--line2);box-shadow:inset 3px 0 0 var(--magenta),var(--shadow)}
.tier__head{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.2rem}
.tier__no{font:800 10.5px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.tier h3{font-size:19px;letter-spacing:-.01em}
.tier__price{display:flex;align-items:baseline;gap:.4rem;margin:.5rem 0 1rem;
  padding-bottom:1rem;border-bottom:1px solid var(--line)}
.tier__price b{font:900 34px/1 var(--display);color:var(--ink);letter-spacing:-.02em}
.tier__price span{color:var(--muted);font-size:13px}
.tier__spec{margin:0 0 .9rem;display:grid;gap:.55rem}
.tier__spec div{display:grid;grid-template-columns:74px 1fr;gap:.6rem;align-items:baseline}
.tier__spec dt{font:800 10.5px/1.5 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tier__spec dd{margin:0;font-size:13.5px;font-weight:600}
.tier p.tier__why{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}

/* -------------------------------------------------------------- wizard -- */
.stepper{
  display:flex;gap:.4rem;list-style:none;margin:0 0 1.4rem;padding:0 0 .5rem;
  overflow-x:auto;scrollbar-width:none;
}
.stepper::-webkit-scrollbar{display:none}
.stepper li{
  flex:0 0 auto;display:flex;align-items:center;gap:.45rem;
  padding:.5rem .8rem;border-radius:7px;border:1px solid var(--line);
  color:var(--muted);font-size:13px;font-weight:700;white-space:nowrap;background:var(--paper);
}
.stepper li b{
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper3);color:var(--muted);font-size:11px;
}
.stepper li.is-on{color:var(--ink);border-color:var(--magenta)}
.stepper li.is-on b{background:var(--magenta);color:#fff}
.stepper li.is-done b{background:var(--green);color:#00230f}
.stepper li.is-done{color:var(--ink);cursor:pointer}

.panel{
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  padding:clamp(1rem,4vw,1.75rem);box-shadow:var(--shadow);
}
.panel__head h3{font-size:clamp(19px,4vw,23px);margin-bottom:.4rem;letter-spacing:-.01em}
.panel__head p{color:var(--muted);font-size:14.5px;max-width:62ch}
.panel--done{background:transparent;border:0;padding:0;box-shadow:none}

/* calendar */
.cal{margin-top:1.2rem}
.cal__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.cal__bar b{font:900 16px/1 var(--display);letter-spacing:-.01em}
.cal__dows{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.cal__dows span{text-align:center;font:700 10px/1 var(--text);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.day{
  position:relative;aspect-ratio:1/1.06;border-radius:10px;border:1px solid var(--line);
  background:var(--paper2);color:var(--ink);cursor:pointer;padding:.25rem 0 0;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  font:700 14px/1 var(--text);transition:border-color .12s,background .12s;
}
/* :not(.is-picked) matters: the hover rule outweighs .day.is-picked on
   specificity, so without it a picked day goes pale the moment you point at it. */
.day:hover:not(:disabled):not(.is-picked){border-color:var(--magenta);background:var(--magenta-soft)}
.day[disabled]{opacity:.4;cursor:default;background:transparent;border-color:transparent;color:var(--muted)}
.day--out{visibility:hidden}
.day--today{box-shadow:inset 0 0 0 1.5px var(--cyan-ink)}
.day.is-picked{background:var(--magenta);border-color:var(--magenta);color:#fff;
  box-shadow:0 6px 16px -10px rgba(216,27,118,.9)}
.day.is-picked .pip--free{background:rgba(255,255,255,.9)}
.day.is-picked .pip--taken{background:rgba(255,255,255,.35)}
.day.is-full{opacity:.45}
.day__n{padding-top:.35rem}
.day__pips{display:flex;gap:3px;padding-bottom:.45rem}
.pip{width:7px;height:7px;border-radius:2px;background:var(--line2);display:inline-block}
.pip--free{background:var(--green)}
.pip--taken{background:#c6ccdb}
.pip--mine{background:var(--amber)}
.cal__legend{display:flex;flex-wrap:wrap;gap:.9rem;list-style:none;margin:.9rem 0 0;padding:0;
  font-size:12px;color:var(--muted)}
.cal__legend li{display:flex;align-items:center;gap:.35rem}
.cal__legend-note{margin-left:auto;opacity:.8}

.picked{margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .5rem .45rem .85rem;
  border-radius:7px;background:var(--paper2);border:1px solid var(--line);font-size:13px;font-weight:700;
}
.chip button{
  width:20px;height:20px;border-radius:50%;border:0;background:rgba(21,23,31,.09);
  color:var(--ink);cursor:pointer;line-height:1;font-size:13px;
}
.chip button:hover{background:var(--red);color:#fff}

/* segments */
.daylist{display:grid;gap:1rem;margin-top:1.2rem}
.dayrow{border:1px solid var(--line);border-radius:var(--r);background:var(--paper2);padding:1rem}
.dayrow__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.dayrow__head h4{font-size:16px;text-transform:uppercase}
.dayrow__head span{font-size:12px;color:var(--muted)}
.slots{display:grid;gap:.6rem}
.slot{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;
  padding:.85rem;border-radius:12px;border:1px solid var(--line);background:var(--paper);
  cursor:pointer;text-align:left;color:var(--ink);
}
.slot:hover:not(.is-taken){border-color:var(--line2)}
.slot.is-on{border-color:var(--magenta);background:var(--magenta-soft)}
.slot.is-taken{opacity:.5;cursor:not-allowed;background:var(--paper3)}
.slot__box{
  width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line2);display:grid;place-items:center;
  font-size:13px;color:transparent;background:var(--paper);
}
.slot.is-on .slot__box{background:var(--magenta);border-color:var(--magenta);color:#fff}
.slot__name{font-weight:800;font-size:15px}
.slot__when{display:block;font-weight:500;font-size:12.5px;color:var(--muted);margin-top:2px}
.slot__reader{display:block;font-weight:700;font-size:11.5px;color:var(--cyan-ink);margin-top:4px;
  letter-spacing:.02em}
.slot__price{font:900 17px/1 var(--display);color:var(--ink);white-space:nowrap}
.slot.is-taken .slot__price{color:var(--muted);font-size:12px;font-family:var(--text)}
.dayrow__bundle{
  margin-top:.7rem;padding:.6rem .8rem;border-radius:10px;font-size:13px;
  background:rgba(0,208,118,.12);border:1px dashed rgba(0,121,74,.45);color:var(--green-ink);font-weight:700;
}

/* creative */
.modes{display:grid;gap:.5rem;margin:1.2rem 0}
.modes button{
  text-align:left;padding:.85rem 1rem;border-radius:12px;border:1px solid var(--line);
  background:var(--paper2);cursor:pointer;color:var(--ink);
}
.modes button b{display:block;font-size:14.5px}
.modes button span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.modes button.is-on{border-color:var(--cyan-ink);background:rgba(34,211,238,.12)}

.creatives{display:grid;gap:1.2rem}
.creative{border:1px solid var(--line);border-radius:var(--r);background:var(--paper2);overflow:hidden}
.creative__head{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  padding:.85rem 1rem;border-bottom:1px solid var(--line);background:var(--paper);
}
.creative__head h4{font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.creative__head .spread{margin-left:auto;display:flex;gap:.4rem}
.creative__body{display:grid;gap:1.1rem;padding:1rem}
.drop{
  position:relative;display:grid;place-items:center;gap:.4rem;min-height:150px;padding:1rem;
  border:1.5px dashed var(--line2);border-radius:12px;background:var(--paper);
  text-align:center;cursor:pointer;color:var(--muted);font-size:13px;
}
.drop:hover,.drop.is-over{border-color:var(--magenta);color:var(--ink);background:var(--magenta-soft)}
.drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop b{color:var(--ink);font-size:14px}
.drop img{border-radius:8px;max-height:210px;width:auto}
.imgmeta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;
  font-size:12px;color:var(--muted)}

.field{display:block}
.field > span{display:block;font-weight:700;font-size:13px;margin-bottom:.35rem}
/* `input` with no type attribute does NOT match input[type=text] — hence the
   :not() list rather than a list of types. */
input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select{
  width:100%;padding:.75rem .85rem;border-radius:10px;border:1px solid var(--line2);
  background:var(--paper);color:var(--ink);
}
textarea{resize:vertical;min-height:76px;line-height:1.45}
input::placeholder,textarea::placeholder{color:#9aa2b5}
input:focus,textarea:focus,select:focus{border-color:var(--magenta);outline:none;
  box-shadow:0 0 0 3px var(--magenta-soft)}
input:-webkit-autofill,input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 100px var(--paper) inset;
  caret-color:var(--ink);
}
.field .counter{display:flex;justify-content:space-between;gap:1rem;font-size:12px;
  font-weight:500;color:var(--muted);margin-top:.35rem}
.field .counter.is-over{color:var(--red);font-weight:700}
.hint{font-size:12.5px;color:var(--muted);margin:.35rem 0 0}

/* the on-air preview — the second dark island: a small copy of the actual frame */
.preview{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper);
  box-shadow:var(--shadow)}
.preview__frame{position:relative;aspect-ratio:16/9;background:#05060a;overflow:hidden}
.preview__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.95}
.preview__empty{position:absolute;inset:0;display:grid;place-items:center;color:#7a8299;font-size:12px}
.preview__scan{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.35) 0 1px,transparent 1px 4px)}
.preview__tag{position:absolute;left:0;top:0;background:var(--magenta);color:#fff;padding:2px 7px;
  font:800 8px/1.5 var(--text);letter-spacing:.14em;text-transform:uppercase}
.preview__bug{position:absolute;right:6px;top:6px;width:26px;opacity:.95}
.preview__band{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:stretch;
  background:rgba(10,11,16,.92);border-top:2px solid var(--magenta)}
.preview__chip{background:var(--magenta);color:#fff;padding:5px 8px;font:800 9px/1.3 var(--text);
  letter-spacing:.1em;text-transform:uppercase;display:grid;place-items:center;white-space:nowrap}
.preview__head{padding:5px 9px;font:800 13px/1.25 var(--text);color:#f4f1e8;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;align-self:center}
.preview__say{padding:.7rem .9rem;font-size:13px;color:var(--muted);border-top:1px solid var(--line);
  background:var(--paper)}
.preview__say b{color:var(--cyan-ink);font-size:11px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:.2rem}
.preview__say q{color:var(--ink);font-style:italic}

/* validate */
.policy{
  margin:1.1rem 0;padding:.9rem 1rem;border-radius:12px;font-size:13.5px;color:var(--muted);
  border:1px solid rgba(208,50,44,.28);background:var(--red-soft);
}
.policy b{color:var(--ink)}
.validate{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-bottom:1rem}
.validate .fineprint{margin:0;flex:1 1 240px}
.verdicts{display:grid;gap:.7rem}
.verdict{display:grid;grid-template-columns:auto 1fr;gap:.8rem;padding:.9rem 1rem;
  border-radius:12px;border:1px solid var(--line);background:var(--paper2)}
.verdict--approve{border-color:rgba(0,121,74,.45);background:rgba(0,208,118,.07)}
.verdict--reject{border-color:rgba(208,50,44,.45);background:var(--red-soft)}
.verdict--review{border-color:rgba(255,194,30,.7);background:rgba(255,194,30,.10)}
.verdict h5{margin:0 0 .2rem;font:800 14px/1.3 var(--text)}
.verdict ul{margin:.4rem 0 0;padding-left:1.1rem;font-size:13px;color:var(--muted)}
.verdict__icon{font-size:20px;line-height:1.2}
.verdict--approve .verdict__icon{color:var(--green-ink)}
.verdict--reject .verdict__icon{color:var(--red)}
.verdict--review .verdict__icon{color:var(--gold)}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(21,23,31,.2);
  border-top-color:var(--ink);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
.btn--primary .spin{border-color:rgba(255,255,255,.4);border-top-color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}

/* checkout */
.checkout{display:grid;gap:1.4rem;margin-top:1.2rem}
.form fieldset{border:1px solid var(--line);border-radius:12px;padding:1rem;margin:0 0 1rem}
.form legend{padding:0 .45rem;font:800 12px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-ink)}
.form label{display:block;margin-bottom:.8rem;font-size:13px;font-weight:700}
.form label input,.form label select{margin-top:.3rem;font-weight:400}
.form label small{display:block;margin-top:.3rem;font-weight:400;color:var(--muted);font-size:12px}
.form .row{display:grid;gap:.8rem}
.check{display:flex !important;gap:.6rem;align-items:flex-start;font-weight:500 !important;font-size:13px}
.check input{margin-top:.25rem;width:18px;height:18px;accent-color:var(--magenta);flex:0 0 auto}
.form input.is-bad{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.stripe-slot{padding:1rem;border-radius:12px;border:1px dashed var(--line2);background:var(--paper2);margin-bottom:1rem}
.stripe-slot__head{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.5rem}
.stripe-slot p{margin:0;font-size:13px;color:var(--muted)}

.summary{border:1px solid var(--line);border-radius:var(--r);background:var(--paper2);padding:1.1rem;
  height:max-content}
.summary h4{font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.8rem}
.sumline{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;font-size:13.5px;border-bottom:1px dashed var(--line)}
.sumline span{color:var(--muted)}
.sumline b{white-space:nowrap}
.sumline--tot{border:0;padding-top:.9rem;font-size:16px}
.sumline--tot b{font:900 23px/1 var(--display);color:var(--ink);letter-spacing:-.01em}
.sumline--off b{color:var(--green-ink)}

/* done */
.done{text-align:center;padding:clamp(1.5rem,6vw,3rem) 1rem;border:1px solid rgba(0,121,74,.35);
  border-radius:var(--r);background:linear-gradient(180deg,rgba(0,208,118,.10),var(--paper) 55%);
  box-shadow:var(--shadow)}
.done h3{font-size:clamp(22px,5vw,30px);margin-bottom:.6rem;letter-spacing:-.015em}
.done p{color:var(--muted);max-width:56ch;margin-inline:auto}
.done__lines{display:grid;gap:.4rem;max-width:420px;margin:1.4rem auto;text-align:left}
.done__lines div{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .8rem;
  border-radius:10px;background:var(--paper2);border:1px solid var(--line);font-size:13px}

/* sticky wizard bar */
.wizbar{
  position:sticky;bottom:0;z-index:40;margin-top:1rem;
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  padding:.7rem clamp(.75rem,3vw,1.2rem);padding-bottom:max(.7rem,env(safe-area-inset-bottom));
  border:1px solid var(--line);border-radius:var(--r);
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  box-shadow:0 -6px 24px -14px rgba(18,22,40,.5);
}
.wizbar__total{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.wizbar__total span{font-size:11.5px;color:var(--muted);letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wizbar__total b{font:900 21px/1.1 var(--display);color:var(--ink);letter-spacing:-.01em}
.wizbar__btns{display:flex;gap:.5rem}
.wizbar .btn{padding:.7rem 1.1rem}

/* footer */
.foot{border-top:1px solid var(--line);background:var(--paper2);padding:2.5rem 0 1.5rem;margin-top:3rem}
.foot__inner{display:grid;gap:2rem}
.foot__inner img{width:44px;margin-bottom:.7rem}
.foot__inner p{font-size:13px;color:var(--muted);margin:0}
.foot__inner a{color:var(--magenta)}
.foot__cols{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.foot__cols h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.foot__cols a{display:block;text-decoration:none;font-size:14px;font-weight:600;padding:.15rem 0}
.foot__cols a:hover{color:var(--magenta)}
.foot__legal{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.foot__legal p{font-size:11.5px;color:#7a8298;margin:0;max-width:90ch}
.foot__recaptcha{margin-top:.6rem !important}
.foot__recaptcha a{color:#7a8298;text-decoration:underline}
/* The badge is Google's own floating widget. It is hidden only while the
   attribution above is on the page: hiding both is a terms violation, and the
   badge itself lands on top of the sticky total on a phone. */
html.rc-hide .grecaptcha-badge{visibility:hidden}

/* toast */
.toast{
  position:fixed;left:50%;bottom:5.2rem;transform:translate(-50%,220%);
  z-index:100;max-width:min(420px,92vw);padding:.8rem 1.1rem;border-radius:12px;
  background:var(--paper);border:1px solid var(--line2);font-size:14px;font-weight:600;
  box-shadow:var(--shadow-lg);pointer-events:none;opacity:0;
  transition:transform .28s cubic-bezier(.2,.8,.3,1),opacity .2s linear;
}
.toast.is-up{transform:translate(-50%,0);opacity:1}
.toast--bad{border-color:var(--red);color:var(--red)}
.toast--good{border-color:var(--green-ink);color:var(--green-ink)}

/* ══════════════════════════════════════════════════════ 720px and up ══ */
@media (min-width:720px){
  .nav__links{display:flex}
  .nav{padding:.7rem 2rem}
  .nav__brand img{width:42px}
  .bar__inner{grid-template-columns:1fr auto}
  .bar__facts{gap:2.4rem}
  .cards{grid-template-columns:repeat(3,1fr)}
  .cast__row{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
  .tiers{grid-template-columns:repeat(3,1fr)}
  .slots{grid-template-columns:repeat(3,1fr)}
  .slot{grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:start}
  .slot__price{grid-column:2;justify-self:start;margin-top:.35rem}
  .modes{grid-template-columns:repeat(3,1fr)}
  .creative__body{grid-template-columns:1fr 1fr;align-items:start}
  .form .row{grid-template-columns:1fr 1fr}
  .day{font-size:15px;aspect-ratio:1/.82}
  .foot__inner{grid-template-columns:1.2fr 1fr}
  .done__lines{max-width:520px}
}

/* ═════════════════════════════════════════════════════ 1040px and up ══ */
@media (min-width:1040px){
  .hero__inner{grid-template-columns:1.06fr .94fr;gap:3rem}
  .checkout{grid-template-columns:1.35fr .65fr;align-items:start}
  .creative__body{grid-template-columns:1fr 1fr 1fr}
  .cal__grid{gap:6px}
  .panel{padding:2rem}
  /* The calendar is a calendar, not a wall: cap it and let the picked-days list
     take the space beside it instead of stretching the cells to 160px. */
  .panel[data-panel="1"]{display:grid;grid-template-columns:minmax(0,600px) 1fr;column-gap:2.5rem}
  .panel[data-panel="1"] .panel__head{grid-column:1/-1}
  .panel[data-panel="1"] .picked{align-self:start;flex-direction:column;align-items:stretch}
  .panel[data-panel="1"] .picked .chip{justify-content:space-between}
}

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