:root {
  --teal: #62ffed;
  --pale: #daf8f6;
  --dark: #2c2c2e;
  --ink: #17181a;
  --muted: #536260;
  /* Same wash .status-note--err uses on the content pages, so an error reads
     identically whichever form you are on. */
  --error-wash: #ffb8e6;
  --line: 1.5px solid var(--ink);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

/* Inverse of --teal (#62ffed), so selected text reads as a color negative. */
::selection {
  background: #9d0012;
  color: var(--teal);
}

html {
  min-height: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.v3-landing { background: var(--teal); }
body.v3-form { background: var(--pale); }

h1, h2, h3, h4, p { margin: 0; }
img, video { max-width: 100%; }

a {
  color: currentColor;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-skip-ink: none;
}

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid #166cf7;
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 11px 16px;
  border: 2px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

/* HOLLOW DISPLAY TYPE — why the stroke is double-width and paint-order is set.
 *
 * `-webkit-text-stroke` strokes EVERY contour of a glyph independently. Letters
 * built from overlapping contours — B, P, R, D, E, U are stem + bowl(s) laid on
 * top of each other, not one merged silhouette — therefore get their hidden
 * internal seams stroked too, and the "empty outline" fills up with stray lines
 * through the bowls. It is a property of the outlines, not of one engine: it
 * reproduces in Arial and in General Sans, upright and italic. Gecko and WebKit
 * render it far more harshly than Blink, which is why it read as a
 * Firefox/Safari bug.
 *
 * `paint-order: stroke fill` draws the stroke first and then lays the fill —
 * the union of all contours — back over it. Every seam is inside that union, so
 * it gets covered; the counters (the real holes in O, B, P) are outside it and
 * survive. Only the outer half of the stroke stays visible, so each width below
 * is DOUBLED to keep the line weight the design already had.
 *
 * This only works where the fill is opaque and matches whatever sits behind the
 * text — a transparent fill covers nothing. That is why the price rules below
 * carry an explicit --teal fill rather than `transparent`. (It also happens to
 * be what the old comment here was after: some Android/Chrome builds shattered a
 * fully transparent fill into glyph fragments.)
 *
 * Support: Firefox 60+, Safari 11+, Chrome/Edge 123+. */
.display-outline {
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 500;
  line-height: .98;
  letter-spacing: .006em;
  text-transform: uppercase;
  -webkit-text-stroke: 2.7px var(--ink);
  paint-order: stroke fill;
  transform: scaleX(.695);
  transform-origin: left center;
}

/* The opaque fill that does the covering — it must be the page's own paper. */
body.v3-landing .display-outline { color: var(--teal); -webkit-text-fill-color: var(--teal); }
body.v3-form .display-outline { color: var(--pale); -webkit-text-fill-color: var(--pale); }

.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Sparkles scale with the layout (vw) so they keep their size relative to
   neighbouring elements instead of looming large on small screens. */
.spark { display: block; width: clamp(36px, 5.4vw, 52px); height: auto; }
.spark--small { width: clamp(27px, 4vw, 39px); }
.desktop-only { display: initial; }

/* The dark circle is always present behind the pill. At rest it is fully
   covered; on hover the foreground moves away while this layer stays put. */
.oval-button {
  --button-fill: var(--teal);
  --button-ink: var(--ink);
  --button-shadow: var(--dark);
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 9px 32px 10px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--button-ink);
  font-size: clamp(20px, 2.8vw, 27px);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  transition: transform 150ms ease;
}

.oval-button::before,
.oval-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.oval-button::before {
  z-index: -1;
  background: var(--button-fill);
}

.oval-button::after {
  z-index: -2;
  background: var(--button-shadow);
  transition: transform 150ms ease;
}

.oval-button:hover,
.oval-button:focus-visible,
.oval-button.is-active-preview { transform: translate(3px, -11px); }
.oval-button:hover::after,
.oval-button:focus-visible::after,
.oval-button.is-active-preview::after { transform: translate(-3px, 11px); }
.oval-button:active { transform: translate(1px, -4px); }
.oval-button:active::after { transform: translate(-1px, 4px); }

.oval-button--dark {
  --button-fill: var(--dark);
  --button-ink: var(--teal);
  --button-shadow: var(--teal);
  min-height: 39.3px;
  padding: 7px 22px 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
}
.oval-button--dark::before { border-color: var(--dark); }
.oval-button--dark::before,
.oval-button--dark::after { border-width: 1px; }

/* Shared moving wordmark */
.brand-marquee {
  width: 100%;
  overflow: hidden;
}

.brand-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 38px;
  padding-right: 38px;
  white-space: nowrap;
  will-change: auto;
}

/* Animation only starts once JS has sized the track correctly (see the
   inline script by the marquee markup) -- starting earlier would animate
   a %-based transform against the raw, un-duplicated (and thus wrong-width)
   markup, then visibly jump when the real width kicks in. */
.v3-landing .brand-marquee--ready .brand-marquee__track,
.v3-form .brand-marquee--ready .brand-marquee__track { animation: v3-marquee 32s linear infinite; }
.motion-paused .brand-marquee__track { animation-play-state: paused; }

.brand-marquee__track img {
  display: block;
  width: auto;
  height: clamp(56px, 7vw, 88px);
}

/* The form page uses the same tightly repeated, auto-scrolling marquee as landing. */
.v3-landing .brand-marquee,
.v3-form .brand-marquee { line-height: 0; }
.v3-landing .brand-marquee__track,
.v3-form .brand-marquee__track {
  width: max-content;
  gap: 0;
  padding-right: 0;
  backface-visibility: hidden;
  will-change: transform;
}
.v3-landing .brand-marquee__group,
.v3-form .brand-marquee__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(7px, .75vw, 10px);
  padding-right: clamp(7px, .75vw, 10px);
}
.v3-landing .brand-marquee__track img,
.v3-form .brand-marquee__track img {
  height: clamp(44px, 5.65vw, 68px);
}

@keyframes v3-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* Landing: canonical PDF page 4 */
.landing-hero {
  position: relative;
  min-height: 672px;
  padding-top: 20px;
  background: var(--teal);
}

.hero-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(281px, 30.15vw, 340px);
  align-items: start;
  gap: clamp(48px, 7.3vw, 82px);
  width: min(100%, 1120px);
  min-height: 486px;
  margin: 48px auto 0;
  padding: 0 28px;
}

.hero-copy { min-width: 0; }

.hero-title {
  display: grid;
  width: 162.4%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(72px, 8.9vw, 98px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  transform: translateY(2.3px) scaleX(.616);
  /* Doubled + paint-order — see the hollow display type note above. */
  -webkit-text-stroke: 3.8px var(--ink);
  paint-order: stroke fill;
}

/* Grid items get an automatic min-size floor based on their (nowrap)
   content by default, which at narrow widths can force this wider than
   its intended 162.4%-of-container box and push it past the viewport
   edge. min-width: 0 lets the scaleX squish govern the size instead. */
.hero-title span { min-width: 0; }

.hero-actions {
  position: relative;
  display: block;
  height: 132px;
  width: min(100%, 470px);
  margin: 52px auto 33px;
}

.hero-action-row {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 80px;
}

.hero-action-row:first-child .oval-button {
  position: absolute;
  top: 10px;
  left: 7.5px;
  width: 196px;
}

.hero-action-row--end {
  top: 58px;
  left: 236px;
  width: auto;
  height: auto;
  transform: none;
}

.hero-action-row--end .oval-button { width: 235px; }

/* The two hero pills, sized ~25% up from the original 54px PDF spec. */
.hero-actions .oval-button {
  min-height: 68px;
  height: 68px;
  padding: 9px 33px 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -.25px;
}
.hero-actions .oval-button::before,
.hero-actions .oval-button::after { border-width: 1.9px; }

.hero-actions .spark--small {
  position: absolute;
  top: -1.5px;
  left: 214px;
  width: 46.2px;
  height: 39.9px;
}

.hero-reprise {
  position: relative;
  width: min(100%, 620px);
  margin: 0 auto;
}

.hero-reprise__spark {
  position: absolute;
  width: 48px;
  bottom: -10px;
  right: 60px;
}

.hero-reprise h2 {
  margin-bottom: 14px;
  width: 154.6%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 47px;
  font-weight: 400;
  line-height: 47px;
  transform: scaleX(.647);
  transform-origin: left center;
}

.hero-reprise p {
  width: 117.6%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 33px;
  font-weight: 400;
  line-height: 35px;
  transform: scaleX(.85);
  transform-origin: left center;
}

.hero-media {
  position: relative;
  width: 100%;
  transform: translateY(16.6px);
}

.hero-media__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1170 / 1830;
  overflow: hidden;
  border: 0;
  border-radius: 12px 12px 0 0;
  background: #10201d;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
}

.hero-media__video {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 20;
  object-fit: cover;
  object-position: top center;
}

.motion-toggle {
  position: absolute;
  z-index: 3;
  top: 11px;
  right: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  color: var(--teal);
  background: rgba(44, 44, 46, .72);
  cursor: pointer;
}

.motion-toggle__icon {
  display: block;
  width: 16px;
  height: 18px;
  fill: currentColor;
}

.hero-media__spark {
  position: absolute;
  z-index: 2;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.2));
}

.hero-media__spark--top { top: 15.3px; left: -28.3px; width: 57.1px; }
.hero-media__spark--bottom { right: -24.7px; bottom: 55px; width: 49.6px; }

/* Gradient hand-off from the teal hero to the dark bulletins section,
   sitting behind the noise texture. Parked for now - revisit later.
   Starts fully visible by default (a plain color fade isn't "motion") -
   JS only delays its reveal until the hero-copy pin's hold beat has
   finished scrolling.
.hero-fade {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 243px;
  pointer-events: none;
  opacity: 1;
  background: linear-gradient(to bottom, transparent 0%, var(--dark) 100%);
}
*/

.hero-dissolve {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-color: var(--dark);
  background-image: url("/assets/img/static-noise-img-01.png");
  background-size: 100% 400%;
  background-position: center center;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 40%);
  will-change: transform;
}

/* Landing: canonical PDF pages 5 and top of 6 */
.bulletins-panel {
  position: relative;
  min-height: max(772px, 100vh);
  overflow: hidden;
  padding: 85px 24px 120px;
  color: var(--teal);
  background: var(--dark);
}

.bulletins-texture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bulletins-shell {
  position: relative;
  z-index: 1;
  width: min(94%, 591px);
  margin: 0 auto;
  transform: translateX(3.4px);
}

.bulletins-intro h2 {
  margin-bottom: 14px;
  width: 154.6%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 47px;
  font-weight: 400;
  line-height: 47px;
  white-space: nowrap;
  transform: scaleX(.647);
  transform-origin: left center;
}

.bulletins-intro p {
  width: 117.6%;
  margin-bottom: 29px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 33px;
  font-weight: 400;
  line-height: 35px;
  transform: scaleX(.85);
  transform-origin: left center;
}

.bulletins-intro strong {
  display: block;
  width: 103.1%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 19px;
  transform: scaleX(.97);
  transform-origin: left center;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 21px;
  margin-top: 15px;
}

.price-card {
  position: relative;
  display: flex;
  min-height: 275px;
  flex-direction: column;
  padding: 18px 20px 19px;
  border: var(--line);
  border-radius: 0;
  color: var(--ink);
  background: var(--teal);
}

.price-card h3 {
  width: 117.7%;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  transform: scaleX(.85);
  transform-origin: left center;
}

.price-card__price {
  width: 117.7%;
  margin: 6px 0 13px;
  /* --teal, not transparent: this sits on a teal card, and paint-order needs
     an opaque fill to cover the contour seams. Renders identically. */
  color: var(--teal);
  -webkit-text-fill-color: var(--teal);
  font-family: "Satoshi", "General Sans", sans-serif;
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  -webkit-text-stroke: 2.7px var(--ink);
  paint-order: stroke fill;
  transform: scaleX(.85);
  transform-origin: left center;
}

.price-card ul {
  display: grid;
  gap: 0;
  width: 103.6%;
  margin: 0 0 12px;
  padding-left: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  transform: scaleX(.966);
  transform-origin: left center;
}

.price-card .oval-button {
  align-self: flex-start;
  margin-top: auto;
  min-height: 54px;
  height: 54px;
  padding: 7px 26px 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -.25px;
}
.price-card .oval-button::before,
.price-card .oval-button::after { border-width: 1.5px; }

.price-card__spark { position: absolute; z-index: 2; }
.price-card__spark--top { top: 14.7px; left: -32px; width: 43.8px; }
.price-card__spark--bottom {
  right: -22.8px;
  bottom: 22px;
  width: 46.2px;
  height: 39.9px;
}

/* Landing: canonical PDF page 6 */
.landing-footer {
  min-height: 534px;
  padding: 55px 20px 4px;
  background: var(--teal);
  font-family: Arial, Helvetica, sans-serif;
}

.footer-shell { width: min(100%, 1040px); margin: 0 auto; }

.footer-top {
  display: grid;
  grid-template-columns: 379px max-content;
  justify-content: space-between;
  gap: 28px;
  align-items: start;
}

.footer-title {
  width: 157.7%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 50px;
  font-weight: 400;
  line-height: 50px;
  transform: scaleX(.634);
}

.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 19px;
}

.store-badges a { position: relative; display: inline-flex; }
.store-badges a::before { content: ""; position: absolute; inset: -7px -3px; }
.store-badges img { display: block; width: auto; height: 38px; }

/* TestFlight opt-in, sized to sit level with the store badges beside it.
   Deliberately NOT Apple's App Store badge: that asset is licensed for
   links to an App Store product page, and until the store build ships the
   only iOS route is the beta. Drawn as an outlined pill in the footer's own
   ink-on-teal language instead of borrowing a mark we aren't entitled to. */
.store-badges .tf-badge {
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 15px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.store-badges .tf-badge svg { flex: none; width: 15px; height: 15px; }

.footer-availability > p {
  margin-top: 15px;
  width: 117.7%;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.3;
  transform: scaleX(.85);
  transform-origin: left center;
}

.footer-nav {
  display: grid;
  grid-template-columns: 113px 127px max-content;
  gap: 39px;
  margin-top: 15px;
}

.footer-nav h2 {
  margin: 0 0 21px;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  transform: scaleX(.65);
  transform-origin: left top;
}

.footer-nav ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 18px;
  white-space: nowrap;
  transform: scaleX(.85);
  transform-origin: left center;
}
.footer-nav a::before { content: ""; position: absolute; inset: -4px; }

.footer-bottom {
  display: grid;
  grid-template-columns: 378.5px 504.5px;
  gap: 12px;
  height: 284px;
  align-items: stretch;
  justify-content: space-between;
  margin-top: 33px;
}

.footer-made-by {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 7px;
  padding-bottom: 5px;
}

.footer-made-by > p {
  width: 482px;
  margin-bottom: 0;
  font-size: 28px;
  font-weight: 400;
  line-height: 32px;
  transform: translateY(1px) scaleX(.875);
  transform-origin: left top;
}

.footer-made-by small {
  display: block;
  width: 100%;
  font-family: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(-4px) scaleX(1.05);
  transform-origin: left center;
}
.footer-wordmark {
  display: block;
  width: 504.5px;
  height: 274px;
  margin-top: 1px;
}

/* Form */
.form-marquee { padding-top: 18px; }

.form-shell {
  width: min(100%, 548px);
  margin: 0 auto;
  padding: 26px 34px 90px;
}

.form-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 30px;
  padding-top: 18px;
}

.form-title {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 64px;
  font-weight: 400;
  white-space: nowrap;
  transform-origin: center;
  transform: scaleX(.695);
}

.form-subtitle {
  margin-top: 4px;
}

.form-subtitle__text {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 400;
  transform: scaleX(.85);
  transform-origin: center;
}

.form-status {
  width: min(100%, 620px);
  margin: 0 auto 30px;
  padding: 18px 20px;
  border: var(--line);
  background: var(--teal);
  font-weight: 600;
  line-height: 1.45;
}

#success-message { position: relative; }
.success-message__spark { position: absolute; top: 20px; right: 24px; width: clamp(42px, 6.3vw, 60px); }

/* Matches .summary-box h2 / .summary-line's type treatment (same Arial +
   squish) without pulling in their box-model (border, grid columns) that
   doesn't apply to this plain confirmation message. */
#success-message h2 {
  width: 117.7%;
  margin: 0 0 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 29px;
  font-weight: 600;
  transform: scaleX(.85);
  transform-origin: left center;
}
#success-message p {
  width: 117.7%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.45;
  transform: scaleX(.85);
  transform-origin: left center;
}
#success-message p + p { margin-top: 12px; }

/* Id-qualified on purpose: `#success-message p` above is an id selector and
   beats any bare class, which is the exact trap that silently overrode the
   date line on this page once already. */
#success-message .success-message__patreon {
  margin-top: 20px;
  font-size: 16px;
  color: var(--muted, #536260);
}
#success-message .success-message__patreon a { color: inherit; }

/* Placeholder layout only — real order data (package/dates/price) isn't
   available on this page yet; it reloads fresh after the Stripe redirect,
   so none of the form's in-memory state survives to populate it. Sized and
   weighted down from .summary-line/.summary-total so it reads as a lighter
   recap, not a second full Summary box. */
.success-summary {
  width: 117.7%;
  margin-top: 22px;
  padding-top: 16px;
  border-top: var(--line);
  transform: scaleX(.85);
  transform-origin: left center;
}
.success-summary__line {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  /* Actually rendered at 20px regardless of what's declared here, because
     #success-message p (higher specificity, an id beats a class) wins the
     cascade -- written as 20px so the declaration matches reality instead
     of quietly losing to that override. */
  font-size: 20px;
  font-weight: 400;
  line-height: 1.45;
}
.success-summary__line strong { font-weight: 600; }
.success-summary__dates {
  margin: 6px 0 0 32px;
  padding: 0;
  list-style: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.45;
}
.success-summary__promo {
  margin: 10px 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
}
.success-summary__promo strong { font-weight: 600; }
.success-summary__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 10px;
  border-top: var(--line);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
}
.success-summary__total strong { font-size: 18px; font-weight: 600; }

.form-intro-grid {
  width: 100%;
}

.form-question {
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

/* Match the top spacing every other section gets from .form-section's
   margin-top; this heading's section has no such margin since the FAQ
   pill sits above it, so it's added directly to the heading instead. */
#airtime-heading { margin-top: 72px; }

.form-explainer-pill {
  position: relative;
  z-index: 2;
  display: flex;
  width: 80%;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  margin: 0 auto -22px;
  padding: 0 26px;
  border: var(--line);
  border-radius: 50%;
  background: var(--pale);
  color: inherit;
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 140ms ease;
}

/* Hover previews the toggle result: collapsed hovers to the expanded teal,
   and when already expanded it hovers back to transparent. The hover-lock
   class (added on click, cleared on mouseleave) suppresses the preview right
   after a click so it doesn't flash while the pointer is still resting on it. */
.form-explainer-pill:not(.hover-lock):hover,
.form-explainer-pill[aria-expanded="true"] { background: var(--dark); color: var(--teal); }
.form-explainer-pill[aria-expanded="true"]:not(.hover-lock):hover { background: var(--pale); color: inherit; }

.form-explainer-pill__text {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 400;
  transform: scaleX(.85);
  transform-origin: center;
}

.form-explainer-pill__q {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(calc(-50% - 14px));
  height: 58px;
  width: auto;
}

.package-options { display: grid; gap: 15px; }
.package-option { position: relative; display: block; cursor: pointer; }
.package-option > input { position: absolute; opacity: 0; pointer-events: none; }

.package-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 86px;
  align-items: center;
  padding: 10px 21px;
  border: var(--line);
  background: var(--teal);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .package-option:hover .package-card { transform: translate(4px, -4px); box-shadow: -4px 4px 0 var(--dark); }
}
.package-option > input:focus-visible + .package-card { outline: 3px solid #166cf7; outline-offset: 4px; }
.package-option > input:checked + .package-card { transform: translate(4px, -4px); box-shadow: -4px 4px 0 var(--dark); }

.package-option:last-child .package-card { min-height: 108px; }
.package-card__title {
  display: block;
  width: 117.7%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  transform: scaleX(.85);
  transform-origin: left center;
}
.package-card__features {
  display: grid;
  gap: 0;
  width: 103.6%;
  margin: 6px 0 0;
  padding-left: 0;
  list-style: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  transform: scaleX(.966);
  transform-origin: left center;
}

/* Currently unused by any page — kept in the hollow-type vocabulary, and fixed
   alongside the others so a future use doesn't inherit the seam bug. Paper fill
   because .summary-box lives on the form page. */
.summary-price {
  color: var(--pale);
  -webkit-text-fill-color: var(--pale);
  font-size: clamp(50px, 6vw, 68px);
  font-weight: 500;
  line-height: 1;
  -webkit-text-stroke: 2.7px var(--ink);
  paint-order: stroke fill;
}

.package-card__price {
  width: 117.7%;
  justify-self: end;
  align-self: start;
  margin-top: 5px;
  /* Teal fill to match .package-card behind it — see the note above. */
  color: var(--teal);
  -webkit-text-fill-color: var(--teal);
  font-family: "Satoshi", "General Sans", sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  -webkit-text-stroke: 2.7px var(--ink);
  paint-order: stroke fill;
  transform: scaleX(.85);
  transform-origin: right center;
}

.faq {
  width: 70%;
  margin: 0 auto 30px;
  padding-top: 30px;
  border: var(--line);
  background: var(--teal);
  overflow: hidden;
}

.faq-title {
  position: relative;
  margin: -20px -22px 0;
  padding: 10px 20px;
  border-radius: 50%;
  color: var(--teal);
  background: #000;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.faq-title::after {
  content: "?";
  position: absolute;
  right: 24px;
  bottom: -7px;
  color: var(--teal);
  font-size: 66px;
  font-weight: 500;
  line-height: 1;
  -webkit-text-stroke: 1px var(--ink);
}

.faq-intro { border-bottom: var(--line); }
.faq-intro p { padding: 10px 18px 18px; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.5; }

.faq details { border-bottom: var(--line); }
.faq details.is-animating { overflow: hidden; }
.faq details:last-child { border-bottom: 0; }

.faq summary {
  position: relative;
  min-height: 44px;
  padding: 16px 42px 16px 18px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.faq-summary__text {
  display: inline-block;
  white-space: nowrap;
  transform: scaleX(.85);
  transform-origin: left center;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
  transform: translateY(-50%);
}
.faq summary::before { transform: translateY(-50%) rotate(90deg); }
.faq details[open] summary::before { content: none; }
.faq details p { padding: 0 18px 18px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5; }

.form-section {
  width: min(100%, 620px);
  margin-top: 72px;
}

.form-section--wide { width: min(100%, 980px); }
.form-section__title {
  margin-bottom: 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 45px;
}

.form-section__lede {
  margin-bottom: 28px;
  font-size: 18px;
  font-weight: 600;
}

.channel-grid { display: grid; gap: 18px; }

.station-section {
  width: 100%;
  margin-top: 34px;
}

.station-layout {
  display: grid;
  grid-template-columns: 323px 323px;
  gap: 59px;
  align-items: start;
}

.station-picker,
.selection-recap { min-width: 0; }

.selection-recap {
  display: grid;
  gap: 58px;
}

.selection-recap__group { display: grid; justify-items: start; }
.selection-recap__group > h2 {
  width: 122%;
  margin-bottom: 17px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  transform: scaleX(.82);
  transform-origin: left center;
}

.selection-edit {
  position: relative;
  min-width: 78px;
  min-height: 39px;
  margin: 17px 0 0 4px;
  padding: 5px 20px 7px;
  border: var(--line);
  border-radius: 50%;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

.selection-edit::before { content: ""; position: absolute; inset: -3px; }

.selection-edit:hover { background: var(--teal); }

.selection-edit__text {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  transform: scaleX(.85);
  transform-origin: center;
}

.channel-button {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 86px;
  padding: 10px 21px;
  border: var(--line);
  background: var(--teal);
  text-align: left;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, padding-right 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .channel-button:hover:not(:disabled) { transform: translate(4px, -4px); box-shadow: -4px 4px 0 var(--dark); }
}
.channel-button[aria-checked="true"] { transform: translate(4px, -4px); box-shadow: -4px 4px 0 var(--dark); padding-right: 90px; }
.channel-button:disabled { cursor: not-allowed; opacity: .38; }
.channel-button strong {
  display: block;
  width: 117.7%;
  margin-bottom: 7px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  transform: scaleX(.85);
  transform-origin: left center;
}
.channel-button span {
  display: block;
  width: 103.6%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  transform: scaleX(.966);
  transform-origin: left center;
}

.channel-button__star {
  display: none;
  position: absolute;
  top: 50%;
  right: 22px;
  width: 48px;
  transform: translateY(-50%);
}
.channel-button[aria-checked="true"] .channel-button__star { display: block; }

.schedule-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: min(100%, 620px);
  margin-bottom: 13px;
}

.selection-count { font-size: 16px; font-weight: 600; }
.calendar-months {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 360px;
  max-height: 415px;
  border: var(--line);
  background: var(--teal);
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

.calendar {
  padding: 6px 13px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.calendar:first-child { padding-top: 16px; }

.calendar h3 {
  width: 117.7%;
  margin-bottom: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  transform: scaleX(.85);
  transform-origin: left center;
}
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.calendar-weekday { padding: 4px 0 6px; font-size: 13px; font-weight: 500; text-align: center; }
.calendar-spacer { aspect-ratio: 1; }

.calendar-day {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.calendar-day:hover:not(:disabled) { outline: 1.5px solid var(--ink); }
.calendar-day.selected { color: var(--teal); background: var(--dark); }
.calendar-day:disabled { cursor: not-allowed; opacity: .34; text-decoration: line-through; }

.daypart-picker { margin-top: 34px; }
.daypart-heading { margin-bottom: 6px; font-size: 18px; font-weight: 600; }

/* Names the timezone the daypart hours belong to — filled in by form.js. */
.daypart-zone-note {
  margin-bottom: 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}
.daypart-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.daypart-option {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  border: var(--line);
  background: var(--teal);
  text-align: left;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, padding-right 140ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .daypart-option:hover { transform: translate(4px, -4px); box-shadow: -4px 4px 0 var(--dark); }
}
.daypart-option:focus-visible { outline: 3px solid #166cf7; outline-offset: 3px; }
.daypart-option[aria-checked="true"] { transform: translate(4px, -4px); box-shadow: -4px 4px 0 var(--dark); padding-right: 90px; }

.daypart-option__star {
  display: none;
  position: absolute;
  top: 50%;
  right: 22px;
  width: 48px;
  transform: translateY(-50%);
}
.daypart-option[aria-checked="true"] .daypart-option__star { display: block; }
.daypart-option strong {
  width: 117.7%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
  transform: scaleX(.85);
  transform-origin: left center;
}
.daypart-option span {
  width: 103.6%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  transform: scaleX(.966);
  transform-origin: left center;
}

.field-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
.field-grid .field--full { grid-column: 1 / -1; }
.field { display: grid; align-content: start; }

.field-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 9px;
}

.field label,
.field-heading label { font-size: 18px; font-weight: 600; }
.field-heading span { font-size: 13px; font-weight: 600; text-align: right; }
.field-heading label .field-optional,
label .field-optional { font-size: inherit; font-weight: 400; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 58px;
  padding: 14px 17px;
  border: var(--line);
  border-radius: 0;
  background: var(--teal);
  font-size: 18px;
}

/* Squished Arial to match the rest of the site's condensed look. File
   inputs and selects are excluded: file inputs are a native OS button, and
   a select's native dropdown arrow can't be isolated from the transform --
   both end up visually distorted if scaled. */
.field input:not([type="file"]),
.field textarea {
  width: 117.7%;
  font-family: Arial, Helvetica, sans-serif;
  transform: scaleX(.85);
  transform-origin: left center;
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 50px;
  font-family: Arial, Helvetica, sans-serif;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317181a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 17px center;
  background-size: 22px 22px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(23, 24, 26, .4);
  opacity: 1;
}

.field textarea { min-height: 120px; resize: vertical; }
.field input[type="file"] {
  padding: 8px;
  font-family: Arial, Helvetica, sans-serif;
  color: rgba(23, 24, 26, .4);
}
.field input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 9px 14px;
  border: 0;
  border-right: var(--line);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.audio-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.audio-preview audio { display: none; }

.audio-preview__actions { display: flex; gap: 6px; }
.audio-preview__actions button {
  padding: 7px 14px;
  border: var(--line);
  background: var(--teal);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.audio-preview__actions button:hover { background: var(--pale); }

.audio-preview__toggle {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  background: var(--dark);
  cursor: pointer;
}
.audio-preview__toggle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--teal);
  transform: translate(-35%, -50%);
}
.audio-preview__toggle.is-playing::before {
  border-style: none;
  width: 12px;
  height: 14px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(var(--teal), var(--teal)) left / 4px 100% no-repeat,
    linear-gradient(var(--teal), var(--teal)) right / 4px 100% no-repeat;
}

.audio-preview__time { font-family: Arial, Helvetica, sans-serif; font-size: 15px; }

.field-hint { margin-top: 8px; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.45; }

/* ── Error states ─────────────────────────────────────────────────────────
   A failure must not look like a success. pages.css already established the
   alarm language for the standalone forms (.status-note--err: heavier rule,
   pink wash); these are the same signals for the purchase form's fields.
   Colour is never the only cue — the rule thickens and a message appears. */

.field-error {
  position: relative;
  margin-top: 8px;
  padding-left: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.field-error::before,
.field-error::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 13px;
  height: 2px;
  background: currentColor;
}
.field-error::before { transform: translateY(-50%) rotate(45deg); }
.field-error::after { transform: translateY(-50%) rotate(-45deg); }

.field--error > input,
.field--error > select,
.field--error > textarea,
/* Doubled class: .check-row input sets its own teal background further down
   this file at equal specificity, and would otherwise win on source order. */
.check-row.check-row--error > input {
  border-width: 1.5px;
  background-color: var(--error-wash);
}

/* Section-level controls (package, station, daypart, calendar) are button and
   radiogroup collections rather than a single field, so the message carries
   the state instead of an input border. */
.section-error {
  margin: 14px 0 0;
  padding: 12px 16px;
  border: 1.5px solid var(--ink);
  background: var(--error-wash);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}

/* #error-message reuses .form-status, which is always teal — without this a
   hard failure renders in exactly the same friendly box as "Your bulletin is
   booked." */
.form-status--error { border-width: 1.5px; background: var(--error-wash); }

.form-status__list { margin: 10px 0 0; padding-left: 20px; font-weight: 400; }
.form-status__list li + li { margin-top: 6px; }
.form-status__list a { font-weight: 700; }

/* Scoped to the buyer-facing error summary specifically — .form-status__list
   is shared with the admin failed-upload list (admin.js), which keeps its
   own bold-link, site-default-font look. */
#error-message { font-family: Arial, Helvetica, sans-serif; }
#error-message .form-status__list a { font-weight: 400; }

/* ── Cover-art cropper ────────────────────────────────────────────────────
   See cropper.js. Renders INLINE, in the flow of the form, directly under
   the image field — cropping is part of filling that field in, not a modal
   interruption to the rest of the page. The square canvas IS the crop, so it
   needs no overlay or mask: what sits inside the border is what gets
   uploaded. */

.cropper {
  margin-top: 14px;
  border: var(--line);
  background: var(--teal);
  color: var(--ink);
}

.cropper__shell {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 18px;
}

.cropper__title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 600;
}

.cropper__hint {
  max-width: 380px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

.cropper__stage { border: var(--line); background: var(--pale); }

.cropper__canvas {
  display: block;
  /* The pointer handlers own dragging and pinching outright; without this the
     browser pans/zooms the page instead and the crop never moves. */
  touch-action: none;
  cursor: grab;
}
.cropper__canvas:active { cursor: grabbing; }
.cropper__canvas:focus-visible { outline: 3px solid #166cf7; outline-offset: 3px; }

.cropper__zoom {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  max-width: 380px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 600;
}
.cropper__zoom input {
  flex: 1;
  height: 22px;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  cursor: grab;
}
.cropper__zoom input:active { cursor: grabbing; }

.cropper__zoom input::-webkit-slider-runnable-track { height: 4px; border: none; background: var(--dark); border-radius: 2px; }
.cropper__zoom input::-moz-range-track { height: 4px; border: none; background: var(--dark); border-radius: 2px; }

.cropper__zoom input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 22px;
  margin-top: -9px;
  border: 0;
  background: url("/assets/img/star-01.png") center / contain no-repeat;
}
.cropper__zoom input::-moz-range-thumb {
  width: 26px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background: url("/assets/img/star-01.png") center / contain no-repeat;
}

.cropper__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: -6px; }
.cropper__actions .selection-edit { background: var(--teal); }
.cropper__actions .selection-edit:hover { background: var(--dark); color: var(--teal); }

/* ── Audio trimmer ────────────────────────────────────────────────────────
   See audio-trimmer.js. Same inline-in-the-form reasoning as the cropper
   above: choosing which 30 seconds air is part of filling the field in. */

.trimmer {
  margin-top: 14px;
  border: var(--line);
  background: var(--teal);
  color: var(--ink);
}

.trimmer__shell {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 18px;
  width: 100%;
  max-width: 420px;
}

.trimmer__title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 600;
}

.trimmer__hint {
  max-width: 380px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

.trimmer__stage {
  position: relative;
  width: 100%;
  height: 96px;
  border: var(--line);
  background: var(--pale);
  /* The handles own dragging outright; without this the browser scrolls the
     page under a touch drag instead of moving the handle. */
  touch-action: none;
}

.trimmer__canvas { display: block; width: 100%; height: 100%; }

/* Everything outside the selected window, dimmed so the kept portion of the
   waveform reads as the obvious focus. */
.trimmer__shade {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.72);
  pointer-events: none;
}
.trimmer__shade--left { left: 0; }
.trimmer__shade--right { right: 0; }

.trimmer__window {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
  pointer-events: none;
}

.trimmer__handle {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 18px;
  margin-left: -9px;
  background: var(--dark);
  cursor: ew-resize;
  touch-action: none;
}
.trimmer__handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 20px;
  transform: translate(-50%, -50%);
  background: var(--teal);
}
.trimmer__handle:focus-visible { outline: 3px solid #166cf7; outline-offset: 2px; }

.trimmer__readout { display: flex; align-items: center; gap: 10px; }

.trimmer__play {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  background: var(--dark);
  cursor: pointer;
}
.trimmer__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--teal);
  transform: translate(-35%, -50%);
}
.trimmer__play.is-playing::before {
  border-style: none;
  width: 12px;
  height: 14px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(var(--teal), var(--teal)) left / 4px 100% no-repeat,
    linear-gradient(var(--teal), var(--teal)) right / 4px 100% no-repeat;
}

.trimmer__time { font-family: Arial, Helvetica, sans-serif; font-size: 15px; }
.trimmer__audio { display: none; }

.trimmer__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: -6px; }
.trimmer__actions .selection-edit { background: var(--teal); }
.trimmer__actions .selection-edit:hover { background: var(--dark); color: var(--teal); }

/* Confirmed crop, shown in place of the file input's own filename. */
.image-preview { display: flex; gap: 14px; align-items: center; margin-top: 12px; }
.image-preview img { width: 84px; height: 84px; border: var(--line); object-fit: cover; }
.image-preview__actions { display: grid; gap: 6px; }

.image-preview__actions button {
  padding: 7px 14px;
  border: var(--line);
  background: var(--teal);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.image-preview__actions button:hover { background: var(--pale); }

.check-row {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 15px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  cursor: pointer;
}

/* The terms row is a <div>, not a <label> — see the note in post-bulletin.html.
   Only the inner <label> should read as tickable. */
.check-row--terms { align-items: flex-start; margin-top: 26px; cursor: auto; }
.check-row--terms > span { display: flex; flex-wrap: wrap; gap: 0 8px; padding-top: 7px; }
.check-row--terms label { cursor: pointer; }
.check-row--terms a { font-weight: 700; }

.check-row input {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  margin: 0;
  border: var(--line);
  background-color: var(--teal);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  cursor: pointer;
}

.check-row input:checked {
  background-color: var(--dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362fff2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E");
}

.check-row input:focus-visible {
  outline: 3px solid #166cf7;
  outline-offset: 3px;
}

.bonus-copy { max-width: 620px; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.45; }

/* Sits close after the timezone field rather than opening a new section gap. */
#bonus-section { margin-top: 34px; }

.summary-box {
  position: relative;
  width: min(100%, 620px);
  margin-top: 72px;
  padding-top: 29px;
  border-top: var(--line);
}

.summary-box h2 {
  width: 117.7%;
  margin-bottom: 30px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 29px;
  transform: scaleX(.85);
  transform-origin: left center;
}
.summary-box__spark { position: absolute; top: 35px; right: 30px; width: clamp(36px, 5.3vw, 51px); }

.summary-line {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  width: 117.7%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.45;
  transform: scaleX(.85);
  transform-origin: left center;
}

.summary-dates {
  width: 117.7%;
  margin: 8px 0 24px 40px;
  padding: 0;
  list-style: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.45;
  transform: scaleX(.85);
  transform-origin: left center;
}
/* Each row is label + optional remove control. The button sits inside the
   list's scaleX squish, so it takes the same horizontal compression as the
   date beside it rather than reading as a foreign element. */
/* ── Carried over from a previous bulletin ─────────────────────────── */
/* Shown in place of the usual preview when re-running an order. Reads as
   satisfied rather than empty, so a required-looking field isn't nagging
   about a file the server already has. */
.reused-asset {
  margin-top: 12px;
  padding: 14px 16px;
  border: 2px dashed var(--ink);
  border-radius: 12px;
}
.reused-asset__label {
  margin: 0 0 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.reused-asset audio { width: 100%; max-width: 420px; display: block; }
.reused-asset img { max-width: 148px; height: auto; border-radius: 8px; display: block; }
.reused-asset .field-hint { margin-top: 10px; }

/* ── Record inline, and drop a file on a field ─────────────────────── */

#audio-record {
  margin-top: 10px;
  font: inherit;
  font-size: 15px;
  padding: 9px 16px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
#audio-record:hover { background: var(--ink); color: var(--pale); }
#audio-record:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.recorder {
  margin-top: 14px;
  padding: 16px 18px;
  border: 2px solid var(--ink);
  border-radius: 12px;
}
.recorder__hint { margin: 0 0 12px; font-size: 15px; line-height: 1.45; }
.recorder__row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.recorder__go,
.recorder__cancel {
  font: inherit;
  font-size: 15px;
  padding: 9px 18px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.recorder__go { font-weight: 700; }
/* Filled while live, so "am I recording?" is answerable at a glance and not
   only from the running clock beside it. */
.recorder__go.is-recording { background: var(--ink); color: var(--pale); }
.recorder__go[disabled] { opacity: .5; cursor: progress; }
.recorder__time {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  min-width: 3.4ch;
}
.recorder__status { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted, #536260); }
.recorder__status:empty { display: none; }

/* The whole field lights up as a drop target — the <input> itself is a
   small strip, and aiming at it is exactly the fiddliness drag-and-drop is
   meant to remove. */
.field--dropping {
  outline: 2px dashed var(--ink);
  outline-offset: 6px;
  border-radius: 6px;
}

.summary-dates li { display: flex; align-items: baseline; gap: 8px; }
/* A day holding more than one play carries its count, so switching the
   time-of-day picker can't look like it silently dropped the picks made
   under the previous one. (.calendar-day is already position:relative.) */
.calendar-day__count {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--pale);
  font-size: 9px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
  pointer-events: none;
}
/* On a selected day the disc is dark, so the badge inverts to stay legible. */
.calendar-day.selected .calendar-day__count { background: var(--teal); color: var(--dark); }
.summary-dates__remove {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0 6px;
  font: inherit;
  font-size: 24px;
  line-height: 1;
  color: inherit;
  opacity: .45;
  cursor: pointer;
}
.summary-dates__remove:hover { opacity: 1; }
.summary-dates__remove:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 2px; }
.summary-dates-note {
  width: 117.7%;
  margin: -14px 0 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted, #536260);
  transform: scaleX(.85);
  transform-origin: left center;
}
.summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 117.7%;
  margin-top: 24px;
  padding-top: 14px;
  border-top: var(--line);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  transform: scaleX(.85);
  transform-origin: left center;
}

.summary-total strong { font-size: 25px; }
.submit-button {
  display: flex;
  margin: 45px auto 0;
  min-width: 360px;
  min-height: 68px;
  height: 68px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -.25px;
}
.submit-button:disabled { cursor: not-allowed; opacity: .5; }

/* Purely visual — the button underneath stays a real, always-clickable
   submit control (see the note above collectErrors in form.js) so it
   still reaches the validation summary instead of behaving like a dead
   disabled button. */
.submit-button.submit-button--blocked {
  --button-fill: var(--pale);
  --button-ink: #9a9a9a;
}
.submit-button.submit-button--blocked::before,
.submit-button.submit-button--blocked::after {
  border-color: #9a9a9a;
}

.promo-details { width: min(100%, 620px); margin-top: 28px; }
#schedule-dates-details { margin-top: 10px; }
#schedule-dates-list { margin-left: 0; }
.promo-details summary { cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.promo-row { display: flex; align-items: center; margin-top: 14px; }
.promo-row input {
  width: 220px;
  min-height: 58px;
  padding: 14px 17px;
  border: var(--line);
  background: var(--teal);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  transform: scaleX(.85);
  transform-origin: left center;
}
.promo-row input::placeholder { color: rgba(23, 24, 26, .4); opacity: 1; }
.promo-row .selection-edit { margin: 0 0 0 -10px; }
.apply-button__text {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  transform: scaleX(.7);
  transform-origin: center;
}
.promo-message { margin-top: 9px; font-size: 14px; font-weight: 600; }

.form-footer {
  padding: 28px 34px 45px;
  border-top: var(--line);
  font-family: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

.form-footer a { position: relative; display: inline-block; }
.form-footer a::before { content: ""; position: absolute; inset: -4px -3px; }

@media (max-width: 767px) {
  .desktop-only { display: none; }
  .brand-marquee__track { gap: 24px; padding-right: 24px; }

  .landing-hero { min-height: 0; padding-top: 17px; }
  .hero-shell {
    grid-template-columns: 1fr;
    gap: 52px;
    min-height: 0;
    margin-top: 54px;
    padding: 0 24px;
  }
  .hero-title { font-size: clamp(47px, 15vw, 66px); white-space: nowrap; }
  .hero-actions { margin: 42px 0 31px; }
  .hero-action-row:first-child .oval-button { left: 0; }
  .hero-actions .spark--small { left: 60%; }
  .hero-action-row--end { right: 0; left: auto; }
  .hero-reprise h2 { font-size: 42px; }
  .hero-reprise p { font-size: 26px; }
  .hero-reprise__spark { display: none; }
  .hero-media { width: min(82vw, 330px); margin: 0 auto; transform: none; }
  .bulletins-panel { min-height: 0; padding: 60px 24px 90px; }
  .bulletins-shell { transform: none; }
  .bulletins-intro h2 { font-size: 42px; }
  .bulletins-intro p { font-size: 26px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 24px; }
  .price-card { min-height: 326px; padding: 28px 27px 24px; }
  .price-card h3 { font-size: 23px; }
  .price-card ul { gap: 7px; font-size: 16px; }

  .landing-footer { padding: 58px 24px 45px; }
  .footer-top, .footer-bottom { grid-template-columns: 1fr; }
  .footer-availability > p { width: 100%; transform: none; }
  .store-badges img { height: 47px; }
  .store-badges .tf-badge { height: 47px; padding: 0 18px; font-size: 14px; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; margin-top: 24px; }
  .footer-bottom { height: auto; margin-top: 45px; }
  /* Dissolve the wrapper so "Made by" / "Join us" and the wordmark become
     siblings in the same grid, letting us reorder "Join us" below the
     wordmark without touching the markup. */
  .footer-made-by { display: contents; }
  .footer-made-by > p { order: 1; width: 100%; margin-bottom: 0; font-size: 23px; transform: none; }
  .footer-wordmark { order: 2; width: min(100%, 440px); height: auto; margin-top: 28px; }
  .footer-made-by small { order: 3; width: 100%; margin-top: 24px; transform: none; }

  .form-shell { padding: 24px 14px 72px; }
  .form-header { margin-bottom: 46px; }
  .form-title { font-size: 52px; }
  .form-intro-grid { width: 100%; margin-left: 0; }
  .form-explainer-pill { width: 92%; }
  .faq { width: 88%; margin: 0 auto 26px; }
  .faq-title { font-size: 17px; }
  .faq-title::after { right: 13px; font-size: 52px; }
  .package-card__title { font-size: 22px; }
  .package-card__features { gap: 7px; font-size: 16px; }
  .package-card__price { font-size: 50px; }

  .form-section, .form-section--wide, .summary-box, .promo-details { width: 100%; margin-top: 62px; }
  #airtime-heading { margin-top: 62px; }
  .station-section { margin-left: 0; margin-top: 34px; }
  #bonus-section { margin-top: 34px; }
  .station-layout { grid-template-columns: 1fr; gap: 48px; }
  .selection-recap { gap: 42px; }

  .calendar-months { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; gap: 25px; }
  .field-grid .field--full { grid-column: auto; }
  .field-heading { align-items: flex-start; }
  .field-heading label { max-width: 55%; }
  .summary-box__spark { right: 11px; }
  .submit-button { min-width: 0; width: min(86%, 360px); }
  .form-question { white-space: normal; }
}

/* Below ~480px the copy column is too narrow to hold the two enlarged
   hero pills in their diagonal stagger without overlapping, so drop
   "post a bulletin" fully below "get the app" into a clean stack. */
@media (max-width: 479px) {
  .hero-actions { height: 156px; }
  .hero-action-row--end { top: 86px; }
}

@media (min-width: 768px) {
  .hero-dissolve { display: block; }
}

@media (min-width: 768px) and (max-width: 980px) {
  .hero-shell { grid-template-columns: minmax(0, 1fr) clamp(260px, 30vw, 340px); gap: clamp(24px, 3.5vw, 40px); }
  .hero-title { font-size: clamp(52px, 7vw, 76px); }
  .hero-action-row--end { right: 0; left: auto; }
  .hero-reprise h2 { font-size: clamp(34px, 4.5vw, 45px); }
  .hero-reprise p { font-size: clamp(22px, 3vw, 30px); }
  .footer-top { grid-template-columns: 270px 1fr; gap: 20px; }
  .footer-nav { gap: 14px; }
  .footer-bottom { grid-template-columns: 280px 1fr; height: auto; }
  .footer-wordmark { height: auto; margin-top: 0; }
}

@media (min-width: 900px) and (max-width: 980px) {
  .footer-top { grid-template-columns: 379px minmax(0, 1fr); gap: 28px; }
  .footer-nav { gap: 39px; }
  .footer-bottom { grid-template-columns: 378.5px 504.5px; height: 284px; gap: 12px; }
  .footer-wordmark { height: 274px; margin-top: 1px; }
}

@media (min-width: 981px) {
  .landing-hero { min-height: clamp(700px, calc(77px + 62vw), 765px); }
  .hero-shell { width: min(100%, 1220px); gap: clamp(64px, 9vw, 112px); }
  .hero-title { font-size: clamp(72px, 8.9vw, 109px); }
  .price-card { min-height: 360px; }
  .price-card h3 { font-size: 24px; }
  .price-card__price { font-size: 64px; }

  /* Give "post a bulletin" more room to the right and open up the gap
     between "get the app" and its sparkle. */
  .hero-action-row--end { left: 268px; }
  .hero-actions .spark--small { left: 238px; }
}

@media (max-width: 359px) {
  .form-intro-grid > section,
  .faq-column { width: 100%; min-width: 0; }
  .form-explainer-pill {
    padding: 8px 42px 8px 16px;
    font-size: 14px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }
  .faq { margin-right: 20px; margin-left: 20px; }
  .faq-title { padding-right: 42px; padding-left: 42px; line-height: 1.1; white-space: normal; }
}

/* The question-mark icon's `right` offset is a fixed px value against a
   percentage-width pill, so its gap from the text doesn't scale evenly
   across phone widths -- these two bands re-tune it by feel: pulled
   toward center around 500-767px, pushed toward the edge below that. */
@media (min-width: 500px) and (max-width: 767px) {
  .form-explainer-pill__q { right: 34px; }
}

@media (max-width: 499px) {
  .form-explainer-pill__q { right: 14px; }

  /* Both footer credit lines are one long nowrap string of links; below
     500px they no longer fit at their default size, so shrink them (and
     shave the condensed footer's side padding) rather than let them wrap.
     This one scales with viewport width instead of a flat size -- measured
     against real overflow at 320-499px, 15px is the largest that's safe at
     320px and 21px is as large as it can go before other layout on this
     row starts overflowing anyway. */
  .footer-made-by small { font-size: clamp(15px, calc(5vw - 1px), 21px); }

  .form-footer {
    padding-left: 18px;
    padding-right: 18px;
    font-size: 13px;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .brand-marquee__track { animation: none; }
  .oval-button, .oval-button::after, .package-card, .channel-button { transition: none; }
}

@media (forced-colors: active) {
  .display-outline,
  .price-card__price,
  .package-card__price { color: CanvasText; -webkit-text-fill-color: CanvasText; -webkit-text-stroke: 0; }
  .motion-toggle { border-color: ButtonText; color: ButtonText; background: ButtonFace; }
}