/* wild-meme / infomercial
   Late-night TV shop. A blue studio, a TV set whose screen is split in two: the
   demo (camera 1 = the hero, camera 2 = scene-1) beside a red order panel with
   sunburst rays, a yellow price-slash starburst ($$$ struck through, the ticker as
   the price), a CALL NOW box that is really the contract, and an "operators
   standing by" ticker. Heavy italic caps with a hard 3D extrude; sections are the
   programme's segments (BUT WAIT offer rows, testimonial screens, the phone bank).
   Polarity: saturated mid-dark blue with hot red/yellow; nothing else in the
   category is blue, italic or sunburst. */

:root {
  --im-blue: color-mix(in oklab, #1639d8 84%, var(--wl-accent));
  --im-blue-2: color-mix(in oklab, #2a5cff 80%, var(--wl-accent));
  --im-blue-deep: color-mix(in oklab, #07135a 88%, var(--wl-accent));
  --im-yellow: color-mix(in oklab, #ffe23a 80%, var(--wl-secondary));
  --im-red: color-mix(in oklab, #e3121b 64%, var(--wl-accent));
  --im-red-deep: color-mix(in oklab, #8f0710 70%, var(--wl-accent));
  --im-ink: #0a0b18;
  --im-paper: #fffdf4;
  --im-extrude: 1px 1px 0 var(--im-ink), 2px 2px 0 var(--im-ink), 3px 3px 0 var(--im-ink), 4px 4px 0 var(--im-ink), 5px 5px 0 var(--im-ink), 6px 7px 12px rgb(0 0 0 / 0.45);
  --im-extrude-sm: 1px 1px 0 var(--im-ink), 2px 2px 0 var(--im-ink), 3px 3px 0 var(--im-ink);
  --im-chan-h: 50px;
  --im-standby-h: 46px;
  --im-tv-m: clamp(8px, 1.4vw, 18px);
  --im-bezel: clamp(6px, 0.9vw, 12px);

  --v-bg: var(--im-blue-deep);
  --v-fg: #ffffff;
  --v-soft: rgb(255 255 255 / 0.84);
  --v-faint: rgb(255 255 255 / 0.62);
  --v-line: rgb(255 255 255 / 0.18);
  --v-line-strong: rgb(255 255 255 / 0.4);
  --v-surface: var(--im-paper);
  --v-surface-2: #ece6d2;
  --v-card-bg: var(--im-paper);
  --v-accent: var(--im-yellow);
  --v-accent-text: var(--im-yellow);
  --v-on-accent: var(--im-ink);
  --v-secondary: var(--im-red);
  --v-seg-1: var(--im-red);
  --v-seg-2: var(--im-yellow);
  --v-seg-3: var(--im-blue-2);
  --v-seg-4: #25c46b;
  --v-seg-5: #ff8a1f;
  --v-seg-6: #9aa3c7;
  --v-font-body: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", "Nimbus Sans", sans-serif;
  --v-font-display: "Arial Black", "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --v-font-mono: "Courier New", "Liberation Mono", "Nimbus Mono PS", monospace;
  --v-display-weight: 900;
  --v-display-tracking: -0.025em;
  --v-display-case: uppercase;
  --v-display-lh: 0.92;
  --v-title-size: clamp(2.2rem, 5.2vw, 4.6rem);
  --v-radius: 14px;
  --v-radius-sm: 8px;
  --v-radius-lg: 26px;
  --v-border: 3px solid var(--im-ink);
  --v-shadow: 6px 8px 0 var(--im-ink);
  --v-card-pad: clamp(18px, 2.4vw, 30px);
  --v-maxw: 1160px;
  --v-sec-gap: clamp(64px, 8vw, 116px);
  --v-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --v-spring: cubic-bezier(0.3, 1.7, 0.5, 1);

  --wl-label-lore: "Here's the story";
  --wl-label-features: "But wait";
  --wl-label-supply: "What's in the box";
  --wl-label-flow: "It's this easy";
  --wl-label-timeline: "Coming up";
  --wl-label-comparison: "Side by side";
  --wl-label-stats: "By the numbers";
  --wl-label-tweet: "Live from the timeline";
  --wl-label-gallery: "See it in action";
  --wl-label-facts: "The facts, folks";
  --wl-label-quotes: "Testimonials";
  --wl-label-faq: "Caller questions";
  --wl-label-access: "Operators standing by";
}

html { background: var(--im-blue-deep); color-scheme: dark; }
body {
  background:
    radial-gradient(ellipse 70% 38% at 50% 0%, color-mix(in srgb, var(--im-blue-2) 70%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 30% at 12% 42%, rgb(255 255 255 / 0.07), transparent 70%),
    linear-gradient(180deg, var(--im-blue) 0%, var(--im-blue-deep) 58%, var(--im-blue-deep) 100%);
  background-attachment: fixed;
}

/* ------------------------------------------------------------ channel bar */
.im-chan {
  position: sticky; top: 0; z-index: 50;
  height: var(--im-chan-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 clamp(12px, 2vw, 26px);
  background: var(--im-ink);
  border-bottom: 3px solid var(--im-yellow);
  min-width: 0;
}
.im-chan__brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; text-decoration: none; }
.im-chan__logo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--im-yellow); }
.im-chan__name { font: italic 900 1.05rem/1 var(--v-font-display); text-transform: uppercase; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.im-chan__tick { flex: none; padding: 4px 8px 3px; background: var(--im-yellow); color: var(--im-ink); font: 900 0.8rem/1 var(--v-font-display); border-radius: 4px; transform: skewX(-10deg); }
.im-chan__nav { flex: 1 1 0; min-width: 0; display: flex; gap: 2px; justify-content: safe center; overflow-x: auto; scrollbar-width: none; }
.im-chan__nav::-webkit-scrollbar { display: none; }
.im-chan__nav .wl-nav__link { flex: none; padding: 7px 10px; border-radius: 6px; font: 700 0.74rem/1 var(--v-font-body); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: rgb(255 255 255 / 0.72); white-space: nowrap; }
.im-chan__nav .wl-nav__link:hover, .im-chan__nav .wl-nav__link.is-active { color: var(--im-ink); background: var(--im-yellow); }
.im-chan__live { flex: none; margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font: 800 0.74rem/1 var(--v-font-body); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.im-chan__on { padding: 5px 7px 4px; background: var(--im-red); border-radius: 3px; }
.im-chan__dot { width: 9px; height: 9px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 10px #ff3b3b; animation: im-blink 1.1s steps(2, jump-none) infinite; }

/* ------------------------------------------------------------ the TV set */
.im-hero { padding: var(--im-tv-m) var(--im-tv-m) 0; }
.im-tv {
  position: relative;
  padding: var(--im-bezel);
  border-radius: clamp(14px, 2vw, 28px);
  background: linear-gradient(160deg, #2a2d3a 0%, #0c0d14 30%, #050508 100%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08) inset, 0 40px 90px -30px #000, 0 0 0 2px rgb(0 0 0 / 0.6);
}
.im-tv__screen {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
  min-height: calc(100svh - var(--im-chan-h) - var(--im-tv-m) - 2 * var(--im-bezel) - var(--im-standby-h) - var(--im-tv-m));
  border-radius: clamp(8px, 1.2vw, 16px) clamp(8px, 1.2vw, 16px) 0 0;
  overflow: hidden;
  background: var(--im-ink);
}

/* left half: the demo */
.im-demo {
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(ellipse 80% 70% at 40% 30%, var(--im-blue-2), var(--im-blue) 45%, var(--im-blue-deep));
  border-right: 6px solid var(--im-yellow);
  min-width: 0; min-height: 420px;
}
.im-demo__spot { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 45% 40%, transparent 55%, rgb(3 6 30 / 0.55)); }
.im-demo__cam { position: absolute; inset: 0; z-index: 1; }
.im-demo__media { position: absolute; inset: 0; }
.im-demo__media .wl-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.im-camtag {
  position: absolute; z-index: 5; left: 16px; top: 14px;
  padding: 5px 9px 4px; border-radius: 3px;
  background: rgb(0 0 0 / 0.72); color: #fff;
  font: 700 0.72rem/1 var(--v-font-mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.im-camtag::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #ff3b3b; vertical-align: 0.05em; }
.im-demo__inset {
  position: absolute; z-index: 4; right: 5%; top: 7%;
  width: min(36%, 250px); margin: 0;
  border: 5px solid #fff; border-radius: 6px;
  box-shadow: 8px 10px 0 rgb(0 0 0 / 0.45);
  rotate: 3deg;
  background: var(--im-ink);
}
.im-demo__inset-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.im-demo__inset .im-camtag { left: 6px; top: 6px; font-size: 0.62rem; }

/* the price-slash starburst: $$$ struck, the ticker as the price */
.im-burst {
  position: absolute; z-index: 6; left: 4%; bottom: 17%;
  width: clamp(150px, 17vw, 228px); aspect-ratio: 1;
  display: grid; place-content: center; justify-items: center; gap: 2px;
  color: var(--im-ink); text-align: center;
  rotate: -12deg;
}
.im-burst::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--im-yellow);
  clip-path: polygon(50% 0%, 57.8% 12.4%, 70.7% 5.8%, 73% 20.3%, 87.5% 20.8%, 83.2% 34.8%, 97% 40%, 86.3% 50%, 97% 60%, 83.2% 65.2%, 87.5% 79.2%, 73% 79.7%, 70.7% 94.2%, 57.8% 87.6%, 50% 100%, 42.2% 87.6%, 29.3% 94.2%, 27% 79.7%, 12.5% 79.2%, 16.8% 65.2%, 3% 60%, 13.7% 50%, 3% 40%, 16.8% 34.8%, 12.5% 20.8%, 27% 20.3%, 29.3% 5.8%, 42.2% 12.4%);
  filter: drop-shadow(5px 6px 0 var(--im-ink));
  animation: im-spin 24s linear infinite;
}
.im-burst__was { font: 900 clamp(1.1rem, 1.9vw, 1.6rem)/1 var(--v-font-display); letter-spacing: 0.04em; }
.im-burst__was s { text-decoration: none; position: relative; }
.im-burst__was s::after { content: ""; position: absolute; left: -12%; right: -12%; top: 50%; height: 0.2em; background: var(--im-red); rotate: -14deg; border-radius: 2px; }
.im-burst__now { display: block; max-width: 13ch; width: 100%; overflow: hidden; font: italic 900 clamp(1.3rem, 2.5vw, 2.1rem)/1 var(--v-font-display); color: var(--im-red); letter-spacing: -0.03em; }

/* lower third on the demo */
.im-lower {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; margin: 0;
  display: flex; align-items: stretch; min-width: 0;
  background: #fff; color: var(--im-ink);
  box-shadow: 0 -4px 0 var(--im-red);
}
.im-lower__tag { flex: none; display: flex; align-items: center; padding: 12px 16px; background: var(--im-red); color: #fff; font: italic 900 0.9rem/1 var(--v-font-display); text-transform: uppercase; }
.im-lower__text { flex: 1 1 auto; min-width: 0; padding: 12px 18px; font: italic 900 clamp(1rem, 1.7vw, 1.45rem)/1.1 var(--v-font-display); text-transform: uppercase; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* right half: the order panel */
.im-order {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 1.8vh, 22px);
  padding: clamp(22px, 3.2vw, 46px) clamp(20px, 3vw, 44px);
  background: radial-gradient(circle at 100% 0%, var(--im-red) 0%, var(--im-red-deep) 78%);
  min-width: 0;
}
.im-order::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 100% 0%, rgb(255 255 255 / 0.09) 0deg 5deg, transparent 5deg 10deg);
}
.im-order__kicker { margin: 0; align-self: flex-start; max-width: 100%; padding: 7px 12px 6px; background: var(--im-ink); color: var(--im-yellow); font: 800 0.78rem/1.25 var(--v-font-body); letter-spacing: 0.12em; text-transform: uppercase; transform: skewX(-10deg); }
.im-order__kicker > span { display: inline-block; transform: skewX(10deg); }
.im-order__headline {
  margin: 0;
  font: italic 900 clamp(2.3rem, 4.9vw, 4.7rem)/0.9 var(--v-font-display);
  letter-spacing: -0.035em; text-transform: uppercase;
  color: var(--im-yellow);
  text-shadow: var(--im-extrude);
  text-wrap: balance; overflow-wrap: break-word;
}
.im-order[data-im-len="l"] .im-order__headline { font-size: clamp(2rem, 3.9vw, 3.8rem); }
.im-order[data-im-len="xl"] .im-order__headline { font-size: clamp(1.7rem, 3.1vw, 3rem); }
.im-order__headline .wl-w:nth-child(3n+2) { color: #fff; }
.im-order__sub { margin: 0; max-width: 34rem; color: #fff; font-size: clamp(0.98rem, 1.15vw, 1.12rem); line-height: 1.45; font-weight: 600; text-shadow: 0 1px 2px rgb(0 0 0 / 0.4); }

.im-callnow {
  position: relative;
  display: grid; gap: 4px;
  padding: 12px 16px 14px;
  background: var(--im-paper); color: var(--im-ink);
  border: 4px solid var(--im-ink); border-radius: 10px;
  box-shadow: 6px 7px 0 var(--im-ink);
  max-width: 30rem;
}
.im-callnow__label { margin: 0; font: italic 900 clamp(1.1rem, 1.7vw, 1.5rem)/1 var(--v-font-display); text-transform: uppercase; letter-spacing: -0.01em; }
.im-callnow__call { color: var(--im-red); text-decoration: line-through 0.14em var(--im-ink); }
.im-callnow__copy { color: var(--im-red); animation: im-flash 1.3s steps(2, jump-none) infinite; }
.im-callnow__num { font: 700 clamp(1.25rem, 2.3vw, 2rem)/1.05 var(--v-font-mono); letter-spacing: 0.02em; overflow-wrap: anywhere; }

.im-order__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.im-order__cta .wl-btn {
  border: 3px solid var(--im-ink); border-radius: 10px;
  background: #fff; color: var(--im-ink);
  font: italic 900 0.95rem/1 var(--v-font-display); text-transform: uppercase; letter-spacing: 0;
  box-shadow: 4px 5px 0 var(--im-ink);
  padding: 0.85em 1.1em;
}
.im-order__cta .wl-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 7px 0 var(--im-ink); border-color: var(--im-ink); }
.im-order__cta .wl-btn--primary { background: var(--im-yellow); font-size: 1.08rem; }
.im-order__cta .wl-btn__ca { display: none; }

/* the ticker under the screen */
.im-standby {
  display: flex; align-items: stretch; min-width: 0;
  height: var(--im-standby-h);
  border-radius: 0 0 clamp(8px, 1.2vw, 16px) clamp(8px, 1.2vw, 16px);
  overflow: hidden;
  background: var(--im-yellow); color: var(--im-ink);
}
.im-standby__tag { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 18px 0 14px; background: var(--im-ink); color: var(--im-yellow); font: italic 900 0.95rem/1 var(--v-font-display); text-transform: uppercase; white-space: nowrap; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); padding-right: 30px; }
.im-standby__phone { width: 20px; height: 20px; border-radius: 5px 5px 9px 9px; background: var(--im-red); box-shadow: inset 0 -6px 0 rgb(0 0 0 / 0.25); animation: im-ring 1.4s ease-in-out infinite; }
.im-standby__track { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; font: italic 900 1.05rem/1 var(--v-font-display); text-transform: uppercase; letter-spacing: -0.01em; }
.im-standby__track .wl-marquee__item { padding: 0 1.1em; }
.im-standby__track .wl-marquee__item::after { content: "\2605"; margin-left: 2.2em; color: var(--im-red); }

/* ------------------------------------------------------------ the segments */
.im-flow { padding-bottom: clamp(60px, 8vw, 110px); }
.im-flow .wl-sec__head { max-width: none; margin-bottom: clamp(22px, 3vw, 40px); }
.im-flow .wl-kicker {
  display: inline-flex; margin: 0 0 16px; padding: 8px 14px 7px 12px; gap: 10px;
  background: var(--im-red); color: #fff;
  font: italic 900 0.9rem/1 var(--v-font-display); letter-spacing: 0.02em;
  transform: skewX(-10deg); box-shadow: 4px 4px 0 var(--im-ink);
}
.im-flow .wl-kicker .wl-ord { opacity: 1; color: var(--im-yellow); }
.im-flow .wl-kicker__label::after { content: " \2014"; }
.im-flow .wl-sec__title { font-style: italic; color: #fff; text-shadow: var(--im-extrude); text-wrap: balance; }

/* BUT WAIT offer rows */
.im-flow .wl-features { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 60rem; }
.im-flow .wl-feature {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(16px, 2.4vw, 30px); align-items: center;
  padding: clamp(16px, 2vw, 24px) clamp(18px, 2.4vw, 30px);
  background: var(--im-paper); color: var(--im-ink);
  border: 4px solid var(--im-ink); border-radius: 12px; box-shadow: 7px 8px 0 var(--im-ink);
}
.im-flow .wl-feature:hover { transform: translate(-2px, -2px); border-color: var(--im-ink); }
.im-flow .wl-feature + .wl-feature { margin-top: 64px; }
.im-flow .wl-feature + .wl-feature::before {
  content: "But wait \2014\00a0there's more!";
  position: absolute; left: 50%; top: -52px; translate: -50% 0; rotate: -2.5deg;
  padding: 8px 18px 7px; white-space: nowrap;
  background: var(--im-yellow); color: var(--im-red);
  font: italic 900 clamp(1rem, 1.9vw, 1.35rem)/1 var(--v-font-display); text-transform: uppercase;
  border: 3px solid var(--im-ink); box-shadow: 4px 4px 0 var(--im-ink);
}
.im-flow .wl-feature__icon {
  grid-row: 1 / span 3; margin: 0;
  width: clamp(64px, 7vw, 84px); height: clamp(64px, 7vw, 84px); border-radius: 0;
  background: var(--im-red); color: #fff;
  clip-path: polygon(50% 0%, 61% 13%, 77% 8%, 79% 24%, 94% 30%, 86% 44%, 96% 57%, 81% 64%, 80% 80%, 64% 79%, 55% 94%, 43% 83%, 28% 91%, 23% 76%, 7% 71%, 13% 56%, 3% 43%, 17% 34%, 17% 18%, 33% 17%, 41% 3%);
}
.im-flow .wl-feature__icon .wl-glyph { width: 42%; height: 42%; stroke-width: 2.6; }
.im-flow .wl-feature__icon--img img { width: 64%; height: 64%; border-radius: 50%; }
.im-flow .wl-feature .wl-ord { position: static; grid-column: 2; font: 800 0.72rem/1 var(--v-font-mono); color: var(--im-red); letter-spacing: 0.16em; margin-bottom: 6px; }
.im-flow .wl-feature .wl-ord::before { content: "Offer #"; }
.im-flow .wl-feature__title { grid-column: 2; margin: 0 0 4px; font: italic 900 clamp(1.3rem, 2.4vw, 2rem)/1 var(--v-font-display); text-transform: uppercase; letter-spacing: -0.02em; }
.im-flow .wl-feature__text { grid-column: 2; margin: 0; color: #2c2e45; font-size: 1.02rem; }

/* testimonials: little TV screens with a lower third */
.im-flow .wl-quotes { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 22px; }
.im-flow .wl-quote {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 0; overflow: hidden;
  background: #0d1030; border: 6px solid #07070b; border-radius: 16px;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.12), 0 24px 40px -20px #000;
  min-height: 260px;
}
.im-flow .wl-quote::before {
  content: "Testimonial"; position: static; display: block; align-self: flex-start;
  margin: 14px 0 0 14px; padding: 5px 8px 4px;
  font: 800 0.66rem/1 var(--v-font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--im-red); color: #fff; border-radius: 3px;
}
.im-flow .wl-quote__text { margin: 0; padding: 18px 22px 22px; font: italic 800 clamp(1.15rem, 1.7vw, 1.45rem)/1.25 var(--v-font-body); color: #fff; }
.im-flow .wl-quote__text::before { content: "\201C"; color: var(--im-yellow); }
.im-flow .wl-quote__text::after { content: "\201D"; color: var(--im-yellow); }
.im-flow .wl-quote__who { display: block; padding: 11px 16px; background: var(--im-yellow); color: var(--im-ink); font: italic 900 0.95rem/1.1 var(--v-font-display); text-transform: uppercase; letter-spacing: 0; border-top: 4px solid var(--im-red); }
.im-flow .wl-quote__who a { color: inherit; }

/* the story: the host's pitch on a cue card */
.im-flow .wl-lore { max-width: 50rem; padding: clamp(22px, 3vw, 38px); background: var(--im-paper); color: var(--im-ink); border: 4px solid var(--im-ink); border-radius: 6px; box-shadow: 8px 9px 0 var(--im-ink); rotate: -0.6deg; }
.im-flow .wl-lore__lead { font: italic 800 clamp(1.25rem, 2.1vw, 1.7rem)/1.3 var(--v-font-body); color: var(--im-ink); }
.im-flow .wl-lore__lead::first-line { color: var(--im-red); }
.im-flow .wl-lore__p { color: #34364e; }

/* see it in action: camera monitors */
.im-flow .wl-gallery { gap: 18px; }
.im-flow .wl-shot { border: 8px solid #07070b; border-radius: 12px; background: #000; box-shadow: 0 0 0 2px rgb(255 255 255 / 0.14); counter-increment: im-cam; }
.im-flow .wl-gallery { counter-reset: im-cam 2; }
.im-flow .wl-shot::before { content: "Cam " counter(im-cam); position: absolute; z-index: 2; left: 10px; top: 10px; padding: 4px 8px 3px; background: rgb(0 0 0 / 0.72); color: #fff; font: 700 0.66rem/1 var(--v-font-mono); letter-spacing: 0.14em; text-transform: uppercase; border-radius: 3px; }
.im-flow .wl-shot__caption { left: 0; right: 0; bottom: 0; border-radius: 0; padding: 9px 14px; background: #fff; color: var(--im-ink); font: italic 900 0.92rem/1.15 var(--v-font-display); text-transform: uppercase; backdrop-filter: none; border-top: 4px solid var(--im-red); }

/* the post, on air */
.im-flow .wl-post { background: var(--im-paper); color: var(--im-ink); border: 4px solid var(--im-ink); border-radius: 14px; box-shadow: 8px 9px 0 var(--im-ink); }
.im-flow .wl-post__handle, .im-flow .wl-post__meta { color: #555872; }
.im-flow .wl-post__brand { color: var(--im-ink); }
.im-flow .wl-post__meta { border-top-color: rgb(0 0 0 / 0.15); }
.im-flow .wl-post__link { color: var(--im-red); }
.im-flow .wl-post__avatar--initial { background: var(--im-red); color: #fff; }
.im-flow .wl-post__meta:empty { display: none; }

/* what's in the box: a price card */
.im-flow .wl-infographic { padding: clamp(20px, 3vw, 40px); background: var(--im-paper); color: var(--im-ink); border: 4px solid var(--im-ink); border-radius: 16px; box-shadow: 8px 9px 0 var(--im-ink); }
.im-flow .wl-donut { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); align-items: center; }
.im-flow .wl-donut__chart { width: min(100%, 330px); }
.im-flow .wl-donut__track { stroke: #e6dfc7; }
.im-flow .wl-donut__seg { stroke-width: 34; }
.im-flow .wl-donut__ticks line { stroke: rgb(0 0 0 / 0.3); }
.im-flow .wl-donut__label, .im-flow .wl-stat__label, .im-flow .wl-ring__label, .im-flow .wl-caption { color: #555872; }
.im-flow .wl-donut__value, .im-flow .wl-stat__value, .im-flow .wl-ring__value { font-style: italic; color: var(--im-ink); }
.im-flow .wl-legend__item { border-bottom: 2px dashed rgb(0 0 0 / 0.25); font-weight: 800; }
.im-flow .wl-legend__value { font: italic 900 1.5rem/1 var(--v-font-display); color: var(--im-red); }
.im-flow .wl-legend__swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--im-ink); }
.im-flow .wl-stats { background: var(--im-ink); border: 3px solid var(--im-ink); border-radius: 10px; }
.im-flow .wl-stat { background: var(--im-yellow); }
.im-flow .wl-ring__track { stroke: #e6dfc7; }
.im-flow .wl-ring__fill { stroke: var(--im-red); }
.im-flow .wl-bar__bg { fill: #e6dfc7; }
.im-flow .wl-bar__value { font-style: italic; color: var(--im-red); }
.im-flow .wl-table-wrap { border: 3px solid var(--im-ink); }
.im-flow .wl-table th, .im-flow .wl-table td { border-bottom-color: rgb(0 0 0 / 0.15); }
.im-flow .wl-table thead th { color: var(--im-ink); background: var(--im-yellow); }
.im-flow .wl-cell-yes { color: #15924a; }
.im-flow .wl-node__card { background: var(--im-paper); color: var(--im-ink); border: 4px solid var(--im-ink); box-shadow: 6px 7px 0 var(--im-ink); }
.im-flow .wl-node__card .wl-ord { background: var(--im-red); color: #fff; }
.im-flow .wl-node__text { color: #34364e; }
.im-flow .wl-edge__line, .im-flow .wl-edge__head { stroke: var(--im-yellow); stroke-width: 3; }
.im-flow .wl-ms__title { font-style: italic; text-transform: uppercase; }

/* the facts, folks: a checklist on a yellow card */
.im-flow .wl-facts { max-width: 56rem; gap: 0; padding: clamp(14px, 2vw, 24px); background: var(--im-yellow); border: 4px solid var(--im-ink); border-radius: 12px; box-shadow: 8px 9px 0 var(--im-ink); rotate: 0.5deg; }
.im-flow .wl-fact { padding: 14px 8px; background: transparent; border: 0; border-bottom: 3px solid var(--im-ink); border-radius: 0; color: var(--im-ink); font: italic 800 clamp(1.05rem, 1.6vw, 1.3rem)/1.25 var(--v-font-body); }
.im-flow .wl-fact:last-child { border-bottom: 0; }
.im-flow .wl-fact__mark { background: var(--im-red); color: #fff; border: 3px solid var(--im-ink); }

/* caller questions: phone lines */
.im-flow .wl-faq { counter-reset: im-line; gap: 14px; }
.im-flow .wl-qa { background: var(--im-paper); color: var(--im-ink); border: 4px solid var(--im-ink); border-radius: 12px; box-shadow: 6px 7px 0 var(--im-ink); counter-increment: im-line; }
.im-flow .wl-qa__q { font: italic 900 clamp(1.05rem, 1.6vw, 1.3rem)/1.2 var(--v-font-display); text-transform: uppercase; letter-spacing: -0.01em; }
.im-flow .wl-qa__q > span:first-child::before { content: "Line " counter(im-line); display: inline-block; margin-right: 12px; padding: 5px 8px 4px; background: var(--im-red); color: #fff; font: 800 0.7rem/1 var(--v-font-mono); letter-spacing: 0.12em; vertical-align: 0.25em; border-radius: 3px; font-style: normal; }
.im-flow .wl-qa__a { color: #34364e; font-size: 1.04rem; }

/* the phone bank */
.im-flow .wl-sec--access .wl-sec__inner {
  padding: clamp(24px, 4vw, 56px);
  background: radial-gradient(circle at 100% 0%, var(--im-red), var(--im-red-deep) 80%);
  border: 5px solid var(--im-ink); border-radius: 22px; box-shadow: 10px 12px 0 var(--im-ink);
  position: relative; overflow: hidden; isolation: isolate;
}
.im-flow .wl-sec--access .wl-sec__inner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-conic-gradient(from 0deg at 100% 0%, rgb(255 255 255 / 0.08) 0deg 5deg, transparent 5deg 10deg); }
.im-flow .wl-sec--access .wl-kicker { background: var(--im-ink); }
.im-flow .wl-sec--access .wl-sec__title { color: var(--im-yellow); }
.im-flow .wl-access { max-width: none; }
.im-flow .wl-access__net { color: #fff; font-weight: 800; }
.im-flow .wl-ca { grid-template-columns: minmax(0, 1fr) auto; background: var(--im-paper); color: var(--im-ink); border: 4px solid var(--im-ink); border-radius: 12px; box-shadow: 6px 7px 0 var(--im-ink); padding: 14px 14px 14px 20px; }
.im-flow .wl-ca__label { grid-column: 1 / -1; color: var(--im-red); font: italic 900 1rem/1 var(--v-font-display); letter-spacing: 0; }
.im-flow .wl-ca__label::before { content: "Call now \2014\00a0"; text-decoration: line-through 0.14em; color: var(--im-ink); }
.im-flow .wl-ca__value { font: 700 clamp(0.95rem, 2vw, 1.55rem)/1.2 var(--v-font-mono); }
.im-flow .wl-copy { background: var(--im-yellow); color: var(--im-ink); border: 3px solid var(--im-ink); border-radius: 10px; font: italic 900 1.05rem/1 var(--v-font-display); text-transform: uppercase; box-shadow: 4px 5px 0 var(--im-ink); }
.im-flow .wl-links { gap: 12px; }
.im-flow .wl-link { background: #fff; color: var(--im-ink); border: 3px solid var(--im-ink); border-radius: 10px; box-shadow: 4px 5px 0 var(--im-ink); font: italic 900 0.92rem/1 var(--v-font-display); text-transform: uppercase; }
.im-flow .wl-link:hover { border-color: var(--im-ink); }

/* ------------------------------------------------------------ sign-off */
.im-foot { background: var(--im-ink); border-top: 4px solid var(--im-yellow); }
.im-foot__end { margin: 0; padding: 26px var(--v-pad-x) 0; text-align: center; font: italic 900 clamp(1.6rem, 4vw, 3rem)/1 var(--v-font-display); text-transform: uppercase; color: var(--im-yellow); text-shadow: var(--im-extrude-sm); }
.im-foot__inner { padding: 24px var(--v-pad-x) 40px; }
.im-foot .wl-foot { justify-content: center; }
.im-foot .wl-foot .wl-links { margin-left: 0; }
.im-foot .wl-link { background: transparent; color: #fff; border: 2px solid rgb(255 255 255 / 0.4); }

/* ------------------------------------------------------------ motion */
@keyframes im-blink { 50% { opacity: 0.25; } }
@keyframes im-flash { 50% { color: var(--im-ink); } }
@keyframes im-spin { to { rotate: 360deg; } }
@keyframes im-ring { 0%, 60%, 100% { rotate: 0deg; } 10%, 30%, 50% { rotate: -14deg; } 20%, 40% { rotate: 14deg; } }
@keyframes im-slash { from { scale: 0 1; } }
@keyframes im-zoom { from { opacity: 0; transform: scale(0.6) rotate(-8deg); } }
.im-burst__was s::after { transform-origin: 0 50%; animation: im-slash 0.5s 0.6s var(--v-ease) both; }
.im-burst { animation: im-zoom 0.6s 0.2s var(--v-spring) both; }
.im-order__headline .wl-w { animation: im-zoom 0.5s var(--v-spring) both; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
.wl-still .im-burst::before { animation: none; }

/* ------------------------------------------------------------ phone */
@media (max-width: 860px) {
  :root { --im-chan-h: 54px; --im-standby-h: 42px; }
  .im-chan__nav { display: none; }
  .im-tv__screen { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .im-demo { min-height: 0; aspect-ratio: 4 / 3.4; border-right: 0; border-bottom: 6px solid var(--im-yellow); }
  .im-burst { width: 118px; left: 3%; bottom: 58px; }
  .im-demo__inset { width: 38%; right: 4%; top: 6%; border-width: 3px; }
  .im-lower__text { font-size: 0.95rem; padding: 10px 12px; }
  .im-lower__tag { padding: 10px 12px; font-size: 0.78rem; }
  .im-order { padding: 22px 18px 24px; }
  .im-order__headline { font-size: clamp(2.1rem, 10.5vw, 3rem); }
  .im-order[data-im-len="l"] .im-order__headline, .im-order[data-im-len="xl"] .im-order__headline { font-size: clamp(1.8rem, 8.6vw, 2.4rem); }
  .im-standby__tag { font-size: 0.78rem; padding-left: 10px; padding-right: 24px; }
  .im-standby__tag { max-width: 46%; overflow: hidden; }
  .im-flow .wl-feature { grid-template-columns: minmax(0, 1fr); }
  .im-flow .wl-feature__icon { grid-row: auto; margin-bottom: 10px; }
  .im-flow .wl-feature .wl-ord, .im-flow .wl-feature__title, .im-flow .wl-feature__text { grid-column: 1; }
  .im-flow .wl-feature + .wl-feature::before { font-size: 0.9rem; max-width: 92%; white-space: normal; text-align: center; }
  .im-flow .wl-lore, .im-flow .wl-facts { rotate: 0deg; }
}

/* ------------------------------------------------------------ a brief whose hero is the quoted post */
.im-demo__media.wl-media--post { display: grid; place-items: center; padding: 58px clamp(18px, 3vw, 36px) 70px; }
.im-demo__media .wl-post--giant { width: 100%; max-width: 540px; background: var(--im-paper); color: var(--im-ink); border: 4px solid var(--im-ink); border-radius: 14px; box-shadow: 8px 9px 0 var(--im-ink); rotate: -2deg; }
.im-demo__media .wl-post--giant .wl-post__text { font-size: clamp(1.3rem, 2.3vw, 2.1rem); line-height: 1.18; }
.im-demo__media .wl-post__handle, .im-demo__media .wl-post__meta { color: #555872; }
.im-demo__media .wl-post__brand { color: var(--im-ink); }
.im-demo__media .wl-post__meta { border-top-color: rgb(0 0 0 / 0.15); }
.im-demo__media .wl-post__meta:empty { display: none; }
.im-demo__media .wl-post__link { color: var(--im-red); }
@media (max-width: 860px) { .im-demo:has(.wl-media--post) { aspect-ratio: auto; } .im-demo__media.wl-media--post { position: relative; padding: 50px 16px 70px; } }
.im-demo:has(.wl-media--post) .im-demo__inset { top: auto; bottom: 66px; right: 4%; width: min(26%, 170px); rotate: 5deg; }
.im-demo:has(.wl-media--post) .im-burst { left: auto; right: 2%; top: 3%; bottom: auto; width: clamp(110px, 10vw, 140px); }