/* ==================================================================
   Modes — kwizzbit/modes (whole-file segment)
   Faithful slice of /HTML/modes-full.html. Globals (reset/body/font-face/:root)
   dropped; tokens canonical (theme.json). Full-bleed via the .kwb-segment wrapper.
   ================================================================== */

    /* Cream pixel-grain backdrop (the coral mic photo is retired — it read as a
       shoehorned-in anomaly against the rest of the site). modes.js injects an
       animated low-res canvas here, the same technique as the FAQ footer CTA's
       "Ask us anything" grain field (faq-page.js), recoloured to THIS page's own
       cream token so it can dissolve into flat cream — a plain `background-color`
       on this section, no separate fallback colour needed — by the time you reach
       modes-segment-intro directly below, which shares that exact cream. On this
       page the header goes transparent and the segment is pulled up by exactly the
       header's height (nav.css, body.page-id-97) so the canvas runs behind the nav
       — hence the +5.5rem here, which restores the designed gap between nav and badge. */
    .modes-hero {
      position: relative;
      overflow: clip;   /* holds the canvas inside the band. clip, NOT hidden — hidden makes this a scroll container (see the overflow gotcha elsewhere in this build) */
      background-color: var(--wp--preset--color--cream);
      padding-top: calc(5.5rem + clamp(6rem, 9vw, 9rem));
      padding-bottom: clamp(4rem, 6vw, 6rem);
      text-align: center;
    }
    /* Desktop: fill the window on landing, content optically centred in it.
       The segment is pulled up under the transparent nav, so its top sits
       directly beneath the announce bar — hence height = viewport minus that
       strip, and the hero's bottom edge lands on the fold. svh (not vh) so a
       mobile browser's collapsing chrome can't make it overshoot.
       padding-top 5.5rem = the nav's height, so centring measures the space
       BELOW the nav rather than behind it; the small bottom padding keeps the
       content off the fold if a viewport is unusually short. */
    @media (min-width: 1024px) {
      .modes-hero {
        --modes-announce-h: 39px;   /* the strip's rendered height; it does not wrap at these widths */
        min-height: calc(100svh - var(--modes-announce-h));
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 5.5rem;
        padding-bottom: 2rem;
      }
      .modes-hero__inner { width: 100%; }
    }
    /* 1120px, not the old 960: at the +10%/+20% headline sizes line 2 measures
       1003px, which would not clear 960 minus the .container gutters — the
       headline broke to four lines instead of its designed two. */
    .modes-hero__inner {
      position: relative;   /* lifts the content above the ::before artwork layer, which is */
      z-index: 1;           /* absolutely positioned and would otherwise paint over it */
      max-width: 1120px;
      margin-inline: auto;
    }

    /* ── Page-load stagger — mic → title → lead → graphic ─── */
    /* JS adds .has-modes-reveal to prime the hidden state, then
       .modes-is-visible to trigger the lift. Mirrors homepage hero. */
    .kwb-segment--modes.has-modes-reveal .modes-hero__title,
    .kwb-segment--modes.has-modes-reveal .modes-hero__lead,
    .kwb-segment--modes.has-modes-reveal .modes-hero__cta,
    .kwb-segment--modes.has-modes-reveal .modes-hero__finesmallprint {
      opacity: 0;
      transform: translateY(28px);
      transition:
        opacity  0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    }
    /* The cluster reveal is kept separate so it can COMPOSE the responsive
       --cluster-scale (set per breakpoint below). If it shared the group rule,
       the visible-state transform would resolve to scale(1) and wipe out the
       tablet/mobile sizing. translateY drives the lift; scale() the breakpoint. */
    .kwb-segment--modes.has-modes-reveal .strip-row__cluster {
      opacity: 0;
      transform: translateY(28px) scale(var(--cluster-scale, 1));
      transition:
        opacity  0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    }
    /* Mic kept separate too — its rest transform is a rotation, not "none", and
       its entrance is the drop-in-and-settle from the homepage impact segment
       (see .modes-hero__mic below), not the shared translateY fade. modes.js
       hands off to the continuous mic-float loop once this transition completes. */
    .kwb-segment--modes.has-modes-reveal .modes-hero__mic {
      opacity: 0;
      transform: translateY(36px) rotate(-4deg);
      transition:
        opacity  0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .kwb-segment--modes.modes-is-visible .modes-hero__mic    { opacity: 1; transform: rotate(6deg); transition-delay: 0s;    }
    .kwb-segment--modes.modes-is-visible .modes-hero__title  { opacity: 1; transform: none; transition-delay: 0.10s; }
    .kwb-segment--modes.modes-is-visible .modes-hero__lead   { opacity: 1; transform: none; transition-delay: 0.20s; }
    .kwb-segment--modes.modes-is-visible .modes-hero__cta    { opacity: 1; transform: none; transition-delay: 0.27s; }
    /* 0.85, NOT 1 — this line's resting state is 85% opaque (see its rule below).
       Revealing it to 1 would quietly override that and print it at full white. */
    .kwb-segment--modes.modes-is-visible .modes-hero__finesmallprint { opacity: 0.85; transform: none; transition-delay: 0.31s; }
    .kwb-segment--modes.modes-is-visible .strip-row__cluster { opacity: 1; transform: translateY(0) scale(var(--cluster-scale, 1)); transition-delay: 0.34s; }
    @media (prefers-reduced-motion: reduce) {
      .kwb-segment--modes.has-modes-reveal .modes-hero__title,
      .kwb-segment--modes.has-modes-reveal .modes-hero__lead,
      .kwb-segment--modes.has-modes-reveal .modes-hero__cta { opacity: 1; transform: none; transition: none; }
      /* same 0.85 exception as the reveal above — motion off must not repaint it white */
      .kwb-segment--modes.has-modes-reveal .modes-hero__finesmallprint { opacity: 0.85; transform: none; transition: none; }
      /* preserve the breakpoint scale even when motion is suppressed */
      .kwb-segment--modes.has-modes-reveal .strip-row__cluster { opacity: 1; transform: scale(var(--cluster-scale, 1)); transition: none; }
      /* Unscoped (not .has-modes-reveal) — that class is never added at all when
         reduced-motion is on (see modes.js), so a scoped rule here would never
         match anything. Targets the bare mic directly, same as impact.css does
         for its own mic: settles at its resting tilt, no drop-in, no float loop,
         even if is-floating still gets added by JS. */
      .modes-hero__mic,
      .modes-hero__mic.is-floating { animation: none; opacity: 1; transform: rotate(6deg); }
    }
    /* Floating mic — reused verbatim from the homepage "What should playing feel
       like?" statement (impact.css/.impact-2__mic), recoloured for nothing (it's
       already a flat pixel-art asset) but reproportioned for this hero: it's the
       first thing in the content column now (the counter badge that used to sit
       above it moved to a pixel eyebrow on modes-segment-intro below, see there),
       and its wrap's negative bottom margin pulls it down so it visually overlaps
       the top of .modes-hero__title — the same overlap trick impact-2 uses on its
       own headline. z-index:2 lifts it (and its shadow) above the title's normal
       in-flow paint order.
       RE-SIZED on user feedback (2026-08-12): explicit widths now (320/210/200
       desktop/tablet/mobile), each paired with a margin-top push-down (100/60/60)
       to give it more clearance from the nav above — the wrap's own height/
       margin-bottom/shadow offset are untouched from the prior round, so the
       overlap onto the title and the shadow reach are unaffected by the move. */
    .modes-hero__mic-wrap {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      height: 170px;
      margin-top: 140px;
      margin-bottom: -90px;
      position: relative;
      z-index: 2;
    }
    .modes-hero__mic {
      display: block;
      width: 320px;
      height: auto;
      object-fit: contain;
      transform: rotate(6deg);
      transform-origin: center center;
      pointer-events: none;
      user-select: none;
      /* Hard-edged (0-blur) shadow, offset down-left so it falls across the
         headline beneath — same technique as impact-2's mic, just scaled to
         this mic's smaller size. */
      filter: drop-shadow(-50px 115px 0px rgba(0, 0, 0, 0.15));
    }
    .modes-hero__mic.is-floating {
      animation: modes-mic-float 4s ease-in-out infinite;
    }
    @keyframes modes-mic-float {
      0%   { transform: translateY(0px)  rotate(6deg);   }
      40%  { transform: translateY(-8px) rotate(6.8deg); }
      100% { transform: translateY(0px)  rotate(6deg);   }
    }
    .modes-hero__title {
      font-family: var(--wp--preset--font-family--display);
      font-weight: 400;
      font-size: clamp(2.5rem, -0.4rem + 6vw, 5rem);
      line-height: 0.875;
      letter-spacing: -0.0862em;
      color: var(--wp--preset--color--ink);
      margin: 0 0 var(--wp--preset--spacing--50);
    }
    /* Desktop: 88px base, broken onto two lines — "No matter the mood," /
       "we've got the mode." Each line is then scaled off that base: line 1 +10%,
       line 2 +20% (em, so both track the 5.5rem base). The two --mobile breaks
       collapse here; the always-on break stays the line split. */
    @media (min-width: 1024px) {
      .modes-hero__title { font-size: 5.5rem; line-height: 0.85; }
      .modes-hero__title-line1 { font-size: 1.1em; }   /* +10% → 6.05rem */
      .modes-hero__title-coral { font-size: 1.2em; }   /* +20% → 6.6rem  */
      .modes-hero__br--mobile { display: none; }
    }
    /* Line 2. Named --coral from when it carried the coral gradient + text-shimmer
       sweep; it's plain ink now, same as line 1 — matching modes-segment-intro's
       headline below, which also keeps its two lines one flat colour and saves the
       coral accent for just the cursor. Class name kept — it is the line-2 hook in
       the markup. */
    .modes-hero__title-coral {
      color: var(--wp--preset--color--ink);
      -webkit-text-fill-color: var(--wp--preset--color--ink);
    }
    .modes-hero__lead {
      font-family: var(--wp--preset--font-family--body);
      font-weight: 500;
      font-size: 17px;
      line-height: 1.412;
      color: #473531;
      max-width: 420px;
      margin: 0.65rem auto 0;
    }
    /* CTA — sits between the lead and the card cluster, centred by .modes-hero's
       text-align. Top margin comes from the .mode-cta base (2rem): it is defined
       later in this file at equal specificity, so it wins on source order. */
    .modes-hero__cta {
      white-space: nowrap;
    }
    /* Reassurance line beneath the offer button — same treatment as
       .mantra__finesmallprint's opacity-fade idea, just re-based on ink now the
       field beneath it is cream, not coloured. */
    .modes-hero__finesmallprint {
      margin: 0.625rem 0 0;
      font-family: var(--wp--preset--font-family--body);
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1;
      color: var(--wp--preset--color--ink);
      opacity: 0.85;
      text-align: center;
    }
    /* The blinking full stop — coral, matching the badge's "1"/"3" and
       modes-segment-intro's own cursor treatment directly below. -webkit-text-fill-color
       is set as well as color because the parent .modes-hero__title-coral declares its
       own fill-color, which would otherwise win over a plain colour on this child. */
    .modes-hero__cursor {
      -webkit-text-fill-color: var(--wp--preset--color--coral);
      color: var(--wp--preset--color--coral);
      animation: cursor-blink 1.1s steps(1) infinite;
    }
    @keyframes cursor-blink {
      0%, 49% { opacity: 1; }
      50%, 100% { opacity: 0; }
    }

    /* ==========================================================
       STRIP ROW — 3 mode thumbnails with dashed connectors.
       Strip imagery is supplied complete (badge + title + meta
       baked into the WebP) so the link wrapper carries only an
       accessible aria-label.
       ========================================================== */
    /* Sits directly under the "Every one's a winner" intro and shares its cream
       band, so the statement and its three cards read as one section. The dusty
       rose starts below, at the mode explainers. */
    .strip-row {
      background: var(--wp--preset--color--cream);
      padding-top: clamp(0.75rem, 1.5vw, 1.25rem);  /* cluster pulled up tight to the intro copy */
      padding-bottom: clamp(11rem, 15vw, 17rem);      /* the cream segment's bottom edge — the air under segment 2's content, before the rose band starts */
    }
    .strip-row__inner {
      max-width: 1024px;
      margin-inline: auto;
    }
    /* Mobile static graphic — hidden on desktop/tablet, shown on phones only */
    .strip-row__mobile-img { display: none; }
    .strip-row__mobile-img img { display: block; width: 100%; height: auto; }
    /* ==========================================================
       STRIP CLUSTER — 3 mode cards as a wonky floating collage on a
       soft coral plate. Centred by construction: the LIVE card pins to
       dead-centre (front, on top); Classic & Solo flank it symmetrically.
       No SVG coordinate system, nothing to drift out of alignment.
       ========================================================== */
    .strip-row__cluster {
      --card-w: 333px;            /* regular on-site card width (333×105 aspect) */
      --pair-left: -64px;         /* top pair straddles the plate, spilling ~64px each side */
      --cluster-scale: 1;         /* 1 on desktop; shrunk per breakpoint to fit tablet/mobile */
      position: relative;
      isolation: isolate;         /* self-contain stacking context — stops z-index children
                                     from painting over content outside the cluster */
      width: 571px;
      height: 228px;
      margin-inline: auto;
    }
    /* Soft coral plate behind the cluster — 571×228, tilted 1° */
    .strip-row__cluster::before {
      content: "";
      position: absolute;
      inset: 0;
      background: #FDDCD2;
      transform: rotate(1deg);
      z-index: 0;
    }
    .strip-col {
      position: absolute;
      width: var(--card-w);
    }
    .strip-col .card-slot { position: relative; will-change: transform; }

    /* ── Strip-card avatars — circular player pics, bottom-right corner ── */
    @keyframes strip-avatar-pop {
      from { transform: scale(0); opacity: 0; }
      to   { transform: scale(1); opacity: 1;  }
    }
    /* box-shadow ring instead of border — sits outside the element geometry
       so overflow:hidden / border-radius never interact with it, and the
       background image fills the full 46×46 circle without any dark gap. */
    .strip-card__avatar-wrap {
      position: absolute;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      overflow: hidden;
      z-index: 10;
      background-size: cover;
      background-position: center top;
      background-color: #b8aeac; /* neutral fallback if image clips short */
      box-shadow: 0 0 0 2.5px #fff;
      transform: scale(0);   /* hidden until JS fires */
    }
    /* Per-card offsets — nudged leftward, scattered around the lower-right of each card */
    .strip-col--classic .strip-card__avatar-wrap { bottom: -7px;  right: 6px;  }
    .strip-col--live    .strip-card__avatar-wrap { bottom: -13px; right: 10px; }
    .strip-col--solo    .strip-card__avatar-wrap { bottom: -5px;  right: 5px;  }
    .strip-card__avatar-wrap.is-popped {
      animation: strip-avatar-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    @media (prefers-reduced-motion: reduce) {
      .strip-card__avatar-wrap { transform: scale(1); }
      .strip-card__avatar-wrap.is-popped { animation: none; }
    }

    /* Classic — top-left, REGULAR size, tilts left 1°. Spills over the plate's left edge. */
    .strip-col--classic {
      top: 38px;
      left: var(--pair-left);
      transform-origin: left top;
      transform: rotate(-1deg);
      z-index: 2;
    }
    .strip-col--classic .card-slot { animation: mode-float-a 6.5s ease-in-out infinite; }

    /* Solo — top-right, ALL CONTENT scaled 105%, tilts right 2°. 16px gap from Classic,
       spills over the plate's right edge. */
    .strip-col--solo {
      top: 26px;
      left: calc(var(--pair-left) + var(--card-w) + 16px);
      transform-origin: left top;
      transform: rotate(2deg) scale(1.05);
      z-index: 2;
    }
    .strip-col--solo .card-slot { animation: mode-float-c 7.2s ease-in-out infinite; }

    /* LIVE — centred beneath the top pair (10px gap), ALL CONTENT scaled 110%, tilts left 2°.
       Spills over the plate's bottom edge. */
    .strip-col--live {
      top: 153px;
      left: 50%;
      transform-origin: center top;
      transform: translateX(-50%) rotate(-2deg) scale(1.10);
      z-index: 3;
    }
    .strip-col--live .card-slot { animation: mode-float-b 6s ease-in-out infinite; }

    /* Float drift — each card a different direction & cadence (translate only;
       rotation lives on the parent .strip-col so the two never fight) */
    @keyframes mode-float-a {
      0%, 100% { transform: translate(0, 0); }
      50%      { transform: translate(-5px, -11px); }
    }
    @keyframes mode-float-b {
      0%, 100% { transform: translate(0, 0); }
      50%      { transform: translate(6px, -9px); }
    }
    @keyframes mode-float-c {
      0%, 100% { transform: translate(0, 0); }
      50%      { transform: translate(4px, -13px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .strip-col .card-slot { animation: none; }
    }
    /* Quiz card — adapted from kwizzbit/gateway */
    .quiz-card {
      display: block;
      width: 100%;
      aspect-ratio: 333 / 105;
      border-radius: 0;
      overflow: hidden;
      position: relative;
      box-shadow: none;
      text-decoration: none;
      transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .quiz-card:hover {
      transform: translateY(-1px);
    }
    .quiz-card__bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
    }
    .quiz-card__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 0.625rem 0.75rem;
    }
    .quiz-card__badge {
      position: absolute;
      top: 0.5rem;
      left: 0.5rem;
      font-family: var(--wp--preset--font-family--body);
      font-weight: 700;
      font-size: 9px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 0; /* square corners — matches the audience question cards */
      line-height: 1.4;
      background: #fff;
      color: var(--wp--preset--color--coral);
    }
    /* Vary the badge type colour per mode, mirroring the warm-red spread used on
       the audience pages' question-card badges (Quickfire / Text-field / Pick-one). */
    .quiz-card__badge--classic { color: #F2662E; } /* orange-coral */
    .quiz-card__badge--live    { color: #FF3623; } /* brand coral  */
    .quiz-card__badge--solo    { color: #E03B2B; } /* blood-orange */
    .quiz-card__title {
      font-family: var(--wp--preset--font-family--body);
      font-weight: 600;
      font-size: 0.875rem;
      color: #FFFFFF;
      line-height: 1.25;
      margin-bottom: 0.3rem;
    }
    .quiz-card__meta {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      flex-wrap: wrap;
    }
    .quiz-card__meta-item {
      display: flex;
      align-items: center;
      gap: 0.2rem;
      font-family: var(--wp--preset--font-family--body);
      font-weight: 500;
      font-size: 0.6875rem;
      color: rgba(255,255,255,0.85);
      white-space: nowrap;
    }
    .quiz-card__meta-item svg { width: 10px; height: 10px; flex-shrink: 0; }

    /* Connector SVG, descriptions grid and per-card captions all removed —
       the cards now read as a self-contained wonky collage (see .strip-row__cluster). */

    /* ==========================================================
       MODES SEGMENT INTRO — centred title above the 3 mode sections.
       Shares the #F0E3D9 backdrop that runs through Classic/Live/Solo.
       ========================================================== */
    /* Cream — the calm beat between the coral hero and the dusty-rose mode
       explainers below. The card strip that follows shares this cream, so the
       statement and its three cards stay one section. */
    .modes-segment-intro {
      background: var(--wp--preset--color--cream);
      padding-top: clamp(9rem, 12vw, 14rem);
      padding-bottom: 0.75rem;   /* deliberately tight — the card strip below hugs this copy as one unit */
    }
    .modes-segment-intro__inner {
      max-width: 1100px;
      margin-inline: auto;
      text-align: center;   /* centres the whole stack; .mode-cta is inline-flex so it centres too */
    }
    /* Headline, copy, then CTA — one centred stack at every width */
    .modes-segment-intro__head {
      margin-bottom: 0;
    }
    /* Pixel eyebrow — was the hero's "1 platform / 3 ways to play" counter badge;
       moved here (2026-08-12, user's call) once the hero's own badge was dropped
       in favour of the floating mic having the space to itself. Same Pixelar
       eyebrow treatment used sitewide (features-9/who-for/ready-made __eyebrow). */
    .modes-segment-intro__eyebrow {
      display: block;
      font-family: var(--wp--preset--font-family--pixel);
      font-size: var(--wp--preset--font-size--h-8-eyebrow);
      font-weight: 400;
      letter-spacing: 0.06em;
      color: var(--wp--preset--color--coral);
      text-transform: uppercase;
      margin-bottom: 0.75rem;
      line-height: 1;
    }
    /* Blinking coral period — matches .modes-hero__cursor treatment */
    .modes-segment-intro__cursor {
      -webkit-text-fill-color: var(--wp--preset--color--coral);
      color: var(--wp--preset--color--coral);
      animation: cursor-blink 1.1s steps(1) infinite;
    }
    /* Line 1, "Every one" — 10% up on line 2. In em, so it tracks whatever the
       h2's size is at each breakpoint (96px desktop / 3rem tablet / clamp on
       mobile) and stays +10% at all of them from this one rule. */
    .modes-segment-intro__title-line1 {
      font-size: 1.1em;
    }
    /* 96px is the DESKTOP size — the ≤1023 and ≤640 blocks below override it,
       so this base value only ever paints at 1024+. */
    .modes-segment-intro__title {
      font-family: var(--wp--preset--font-family--display);
      font-weight: 400;
      font-size: 96px;
      line-height: 0.889;
      letter-spacing: -0.10764em;
      color: var(--wp--preset--color--ink);
      margin: 0;
    }
    .modes-segment-intro__sub {
      font-family: var(--wp--preset--font-family--body);
      font-weight: 500;
      font-size: 17px;
      line-height: 1.45;
      color: #473531;
      max-width: 470px;   /* narrower column under the bigger headline */
      margin: 1.5rem auto 0;
    }
    @media (max-width: 1023px) {
      .modes-segment-intro__title { font-size: 3rem; }
    }
    @media (max-width: 640px) {
      /* +20% on the clamp itself (2.25→2.7rem, 12.16→14.592vw, 2.85→3.42rem).
         line-height is unitless and letter-spacing is in em, so both already
         scale proportionally with font-size — untouched here, ratios intact. */
      .modes-segment-intro__title {
        font-size: clamp(2.7rem, 14.592vw, 3.42rem);
        line-height: 0.8421;
        letter-spacing: -0.10763em;
      }
      .modes-segment-intro__sub   { max-width: calc(100% - 30px); }
    }

    /* ==========================================================
       TIER SNIPPET — an "ultra crop" of the /features/ table, under the cards.
       The markup reuses features-table's leaf classes verbatim (they are bare
       BEM, not scoped under .features-table, so they style identically here).
       Its surface tokens (--ft-table-bg / --ft-border) are declared for
       .modes-tiers alongside .features-table in features-table.css.
       Only three things differ from the real table, and they are all here:
         1. no feature-name column, so --ft-cols is the tier tracks only;
         2. the Game-show highlight therefore sits in column 2, not 3;
         3. the grid's min-width drops to the tier minimums (it can't overflow,
            so it needs no scroll wrapper).
       ========================================================== */
    .modes-tiers {
      /* Same tier widths as the real table, so the two read as the same object */
      --ft-cols: repeat(3, minmax(108px, 158px));
      display: flex;
      justify-content: center;
      /* +50px on top of the original responsive curve, rather than a new fixed
         value — the clamp still scales with the viewport, it just sits 50px lower. */
      margin-top: calc(clamp(3rem, 6vw, 5rem) + 50px);
    }
    /* The real grid is width:100% + min-width:744px (a 420px label column plus
       three tiers). With no label column this shrink-wraps to its three tracks. */
    .modes-tiers .features-table__grid {
      width: auto;
      min-width: 0;
    }
    /* No table surface here. The real table's sand fills and row hairlines earn
       their keep separating 37 rows; a single row floating in the cream band just
       reads as a stray crop of a table. Stripped back to type — the "Best value"
       badge and Game-show's coral name carry the recommendation on their own, so
       the animated frame (.features-table__pop-layer) is omitted from the markup
       here too. Cells are set transparent EXPLICITLY rather than left to inherit. */
    .modes-tiers .features-table__grid,
    .modes-tiers .features-table__plan,
    .modes-tiers .features-table__plan--pop,
    .modes-tiers .features-table__cell,
    .modes-tiers .features-table__cell--pop {
      background: transparent;
    }
    .modes-tiers .features-table__cell {
      border-bottom: 0;
    }
    /* Tightened: the real table spaces name-from-value for a 37-row grid (20px +
       19px). Here each column is one thought — name, price, then what you get —
       so the name/price pair sits close and the value follows at ~14px. */
    .modes-tiers .features-table__plan {
      padding: 1.25rem 0.5rem 0;
      gap: 0.3rem;
    }
    .modes-tiers .features-table__cell {
      padding: 0.85rem 0.5rem 0;
    }
    /* Shorter badge fill: the real one inherits a body line-height, which pads the
       coral/ink block out taller than the 13px text needs.
       The padding stays asymmetric, but 1px lighter on top and 1px heavier below
       than a straight halving — that lifts the text 1px inside the fill without
       changing the fill's height. (The real table nudges its text DOWN ~1.5px to
       centre it; line-height:1 here shifted where that optical centre sits.) */
    .modes-tiers .features-table__plan-badge {
      line-height: 1;
      padding: calc(0.2rem - 1px) 0.5rem calc(0.14rem + 1px);
    }
    /* Price line under each tier name — Roobert bold smallprint. */
    .modes-tiers__price {
      font-family: var(--wp--preset--font-family--body);
      font-weight: 700;   /* Roobert has no SemiBold — 700 is its bold */
      font-size: 0.75rem;
      line-height: 1.3;
      letter-spacing: -0.01em;
      /* #473531, matching this segment's own sub copy — NOT --ink-soft, which the
         palette deliberately aliases to ink and would print this at full strength,
         competing with the tier name above it. */
      color: #473531;
    }
    @media (max-width: 640px) {
      /* mirrors the real table's own mobile tier cap */
      .modes-tiers { --ft-cols: repeat(3, minmax(108px, 140px)); }
    }

    /* ==========================================================
       HERO SPLIT — re-used from kwizzbit/hero-split
       ========================================================== */
   .kwb-segment--modes .hero-split {
      background: #F0E3D9; /* warmer dusty rose — runs through all 3 mode sections */
      padding-top: clamp(3rem, 5vw, 4.5rem);
      padding-bottom: clamp(3rem, 5vw, 4.5rem);
    }
    /* The air above segment 3's content, where the rose band opens. Scoped to the
       FIRST mode row only — bumping the shared .hero-split rule above would push
       Live and Solo apart too and change the rhythm between the three. Equal
       specificity to that rule, so it must stay below it to win. The ≤1023 block
       further down overrides both, keeping this a desktop-only change. */
   .kwb-segment--modes .hero-split--modes-classic {
      padding-top: clamp(6rem, 9vw, 8rem);
    }
   .kwb-segment--modes .hero-split__inner {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
      align-items: center;
    }
    @media (min-width: 1024px) {
     .kwb-segment--modes .hero-split__inner {
        grid-template-columns: 524px 1fr;
        gap: 70px;
        align-items: center;
        max-width: 1100px;
        margin-inline: auto;
      }
     .kwb-segment--modes .hero-split__media { grid-column: 1; grid-row: 1; }
     .kwb-segment--modes .hero-split__content { grid-column: 2; grid-row: 1; }
      .kwb-segment--modes .hero-split--reverse .hero-split__inner {
        grid-template-columns: 1fr 524px;
      }
      .kwb-segment--modes .hero-split--reverse .hero-split__media { grid-column: 2; grid-row: 1; }
      .kwb-segment--modes .hero-split--reverse .hero-split__content { grid-column: 1; grid-row: 1; }
    }

   .kwb-segment--modes .hero-split__media {
      position: relative;
      width: 100%;
      max-width: 32rem;
      margin-inline: auto;
    }
    @media (min-width: 1024px) {
     .kwb-segment--modes .hero-split__media {
        width: 524px;
        max-width: none;
        margin-inline: 0;
      }
    }

   .kwb-segment--modes .hero-split__image-wrap {
      width: 524px;
      height: 492px;
      max-width: 100%;
      overflow: hidden;
      background: var(--wp--preset--color--cream-soft);
      display: block;
      will-change: transform;
    }
   .kwb-segment--modes .hero-split__image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    @keyframes image-float {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-5px); }
    }
    .kwb-segment--modes .hero-split--modes-classic .hero-split__image-wrap { animation: image-float 5s ease-in-out 1s infinite; }
    .kwb-segment--modes .hero-split--modes-live    .hero-split__image-wrap { animation: image-float 5s ease-in-out 2.5s infinite; }
    .kwb-segment--modes .hero-split--modes-solo    .hero-split__image-wrap { animation: image-float 5s ease-in-out 4s infinite; }
    /* Solid offset plate shadows — zero blur, hard edge */
    .kwb-segment--modes .hero-split--modes-classic .hero-split__image-wrap,
    .kwb-segment--modes .hero-split--modes-solo    .hero-split__image-wrap { box-shadow: 20px 20px 0 0 #EBCEC5; }
    .kwb-segment--modes .hero-split--modes-live    .hero-split__image-wrap { box-shadow: -20px 20px 0 0 #EBCEC5; }
   .kwb-segment--modes .hero-split--modes-solo { padding-bottom: clamp(5rem, 8vw, 9rem); }
    @media (prefers-reduced-motion: reduce) {
     .kwb-segment--modes .hero-split__image-wrap { animation: none; }
    }

    @keyframes content-rise {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .kwb-segment--modes .hero-split--modes .hero-split__content {
      text-align: left;
      animation: content-rise 0.72s var(--wp--custom--motion--ease-out) both;
      animation-delay: 0.12s;
    }
    @media (min-width: 1024px) {
      .kwb-segment--modes .hero-split--modes .hero-split__content { max-width: 420px; }
    }

   .kwb-segment--modes .hero-split__eyebrow {
      display: block;
      font-family: 'Pixelar', monospace;
      font-weight: 400;
      font-size: 19px;
      line-height: 1;
      letter-spacing: 0;
      color: var(--wp--preset--color--coral);
      margin: 0 0 0.5rem;
    }

    .kwb-segment--modes .hero-split--modes .hero-split__title {
      font-family: var(--wp--preset--font-family--display);
      font-weight: 400;
      font-size: clamp(2.25rem, 0.25rem + 2.5vw, 3.25rem);
      line-height: 0.95;
      letter-spacing: -0.10764em;
      color: var(--wp--preset--color--coral);
      margin: 0 0 0.5rem;
      text-wrap: balance;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0;
    }
    .kwb-segment--modes .hero-split--modes .hero-split__title-em {
      font-size: 0.42em;
      vertical-align: 0.85em;
      font-weight: 400;
      margin-left: 0.02em;
    }
    .kwb-segment--modes .hero-split--modes .hero-split__title-badge {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.625rem;
      border: 1px solid #C7C3C2;
      color: var(--wp--preset--color--coral);
      font-family: var(--wp--preset--font-family--body);
      font-weight: 400;
      font-size: 0.75rem;
      line-height: 1;
      letter-spacing: 0;
      border-radius: 0;
      margin-left: 1.25rem;
      align-self: center;
    }

   .kwb-segment--modes .hero-split__subhead {
      font-family: var(--wp--preset--font-family--display);
      font-weight: 600;
      font-size: 1.25rem;
      line-height: 1.25;
      letter-spacing: -0.065em;
      color: var(--wp--preset--color--ink);
      margin: 0 0 var(--wp--preset--spacing--60);
    }

    .feature-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 22px;
    }
    .feature-item {
      display: grid;
      grid-template-columns: 52px 1fr;
      gap: 16px;
      align-items: start;
    }
    .feature-item__icon {
      width: 52px;
      height: 52px;
      background: #ffffff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .feature-item__icon svg {
      width: 28px;
      height: auto;
      display: block;
    }
    .feature-item__title {
      font-family: var(--wp--preset--font-family--body);
      font-weight: 700;
      font-size: 0.9375rem;
      line-height: 1.2;
      letter-spacing: 0.02em;
      color: var(--wp--preset--color--ink);
      margin: 4px 0 6px;
    }
    .feature-item__desc {
      font-family: var(--wp--preset--font-family--body);
      font-weight: 500;
      font-size: 0.875rem;
      line-height: 1.45;
      color: #473531;
      margin: 0;
      max-width: 344px;
    }
    .mode-cta {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      height: 42px;
      padding: 0 1.5rem;
      margin-top: 2rem;
      font-family: var(--wp--preset--font-family--body);
      font-size: 0.875rem;
      font-weight: 700;
      line-height: 1;
      color: #fff;
      text-decoration: none;
      background: var(--wp--preset--gradient--btn-secondary);
      border: none;
      cursor: pointer;
      transition: background 160ms cubic-bezier(0.22, 1, 0.36, 1),
                  transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    @media (hover: hover) {
      .mode-cta:hover {
        background: var(--wp--preset--gradient--btn-secondary-hover);
        transform: translateY(-1px);
      }
    }
    .mode-cta:active {
      background: var(--wp--preset--gradient--btn-secondary-hover);
      transform: translateY(1px);
    }
    /* Coral variant — swaps the dark gradient for the primary coral gradient */
    .mode-cta--coral { background: var(--wp--preset--gradient--btn-primary); }
    @media (hover: hover) {
      .mode-cta--coral:hover { background: var(--wp--preset--gradient--btn-primary-hover); }
    }
    .mode-cta--coral:active { background: var(--wp--preset--gradient--btn-primary-hover); }
    .mode-cta__arrow {
      width: 10px;
      height: 10px;
      flex-shrink: 0;
    }

    .kwb-segment--modes .hero-split + .hero-split { padding-top: 0; }
    @media (min-width: 1024px) {
      /* Add generous breathing room between the 3 mode sections on desktop */
      .kwb-segment--modes .hero-split + .hero-split { padding-top: clamp(4rem, 6vw, 6rem); }
    }

    /* ── Scroll reveal ─────────────────────────────────────────── */
    [data-reveal] {
      opacity: 0;
      transform: translateY(32px);
      transition:
        opacity  0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    }
    [data-reveal].is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    [data-reveal-delay="1"] { transition-delay: 0.12s; }
    [data-reveal-delay="2"] { transition-delay: 0.24s; }
    @media (prefers-reduced-motion: reduce) {
      [data-reveal] { opacity: 1; transform: none; transition: none; }
    }

    /* ── Icon pop-in on scroll ───────────────────────────────── */
    @keyframes icon-pop {
      from { opacity: 0; transform: scale(0); }
      to   { opacity: 1; transform: scale(1); }
    }
    .kwb-segment--modes [data-icon-reveal] .feature-item__icon {
      opacity: 0;
      transform: scale(0);
    }
    .kwb-segment--modes [data-icon-reveal].is-revealed .feature-item__icon {
      animation: icon-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      animation-delay: var(--icon-delay, 0s);
    }
    @media (prefers-reduced-motion: reduce) {
      .kwb-segment--modes [data-icon-reveal] .feature-item__icon,
      .kwb-segment--modes [data-icon-reveal].is-revealed .feature-item__icon {
        opacity: 1 !important;
        transform: scale(1) !important;
        animation: none !important;
      }
    }

    /* ── Tablet ≤1023 ── */
    @media (max-width: 1023px) {
      /* +5.5rem = the header height the segment is pulled up by (still 5.5rem at
         this width; it only drops to 3.5rem at ≤640) — without it the badge
         would sit under the transparent nav. */
      .modes-hero { padding-top: calc(5.5rem + clamp(2.5rem, 4vw, 3.5rem)); padding-bottom: clamp(3rem, 4.5vw, 4.5rem); }

      .modes-hero__mic-wrap { height: 135px; margin-top: 90px; margin-bottom: -70px; }
      .modes-hero__mic { width: 210px; filter: drop-shadow(-38px 88px 0px rgba(0, 0, 0, 0.15)); }

      /* The desktop composition is preserved EXACTLY — we just shrink the whole
         collage with one transform on the cluster, so cards, text, badges and
         avatars all scale together. No vertical stacking. --cluster-scale is
         tuned so the ~699px visual footprint fits the smallest tablet (641px)
         with a little side margin. overflow:hidden is a safety clip here — and
         does the deliberate right-edge crop on mobile (≤640) below. */
      .strip-row { overflow: hidden; }
      .strip-row__cluster {
        --cluster-scale: 0.85;
        transform: scale(var(--cluster-scale));   /* fallback path: reduced-motion / no-JS */
        transform-origin: center top;
      }

     .kwb-segment--modes .hero-split { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(5rem, 7vw, 7rem); }
     .kwb-segment--modes .hero-split__inner { max-width: 700px; margin-inline: auto; }
     .kwb-segment--modes .hero-split__image-wrap {
        width: 100%;
        max-width: 419px;
        height: auto;
        aspect-ratio: 524 / 492;
        margin-inline: auto;
      }
     .kwb-segment--modes .hero-split__media { margin-inline: auto; }
      .kwb-segment--modes .hero-split--modes .hero-split__content {
        margin-top: 8px;
        text-align: left;
        max-width: 470px;
        margin-inline: auto;
      }
      .kwb-segment--modes .hero-split--modes .hero-split__title { font-size: 2.625rem; }
    }

    /* ── Tablet — hero headline only (cluster uses the scaled collage above) ── */
    @media (min-width: 641px) and (max-width: 1023px) {
      /* +10% on user feedback (2026-08-12): 3.5rem → 3.85rem. line-height is
         unitless and letter-spacing is in em, so both already scale with it —
         untouched, composition/spacing otherwise intact. */
      .modes-hero__title { font-size: 3.85rem; line-height: 0.88; }
    }

    /* ── Mobile ≤640 ── */
    @media (max-width: 640px) {
      /* +5.5rem = the header's rendered height, same as every other width (see nav.css).
         padding-bottom: 2.5rem + 180px — kept from the old image-clearance sizing;
         still reads well as an unhurried cream runway before the fold, now that the
         canvas fades to flat colour well above this point anyway. */
      .modes-hero { padding-top: calc(5.5rem + 3rem); padding-bottom: calc(2.5rem + 180px); }
      .modes-hero__mic-wrap { height: 100px; margin-top: 85px; margin-bottom: -55px; }
      .modes-hero__mic { width: 200px; filter: drop-shadow(-24px 58px 0px rgba(0, 0, 0, 0.15)); }
      /* +10% on user feedback (2026-08-12): 3.4rem → 3.74rem, same reasoning
         as the tablet bump above. */
      .modes-hero__title {
        font-size: 3.74rem;
        line-height: 0.85;
      }
      .modes-hero__eyebrow { font-size: 18px; }
      .modes-hero__lead { font-size: 1rem; max-width: 88%; }

      /* Mobile — swap floating cluster for static graphic.
         The cluster is hidden entirely; modes-graphic.webp takes its place.
         Image is 125% wide so the right 20% bleeds off the viewport edge,
         clipped by strip-row's overflow:hidden. */
      /* .modes-tiers is the last thing in this section, so this padding is the
         space beneath the Pro/Game-show/Enterprise block — +50px on top of the
         original responsive value. */
      .strip-row { padding-bottom: calc(clamp(3.5rem, 8vw, 5rem) + 50px); }
      .strip-row__inner { display: none; }   /* hides cluster + its container padding */
      .strip-row__mobile-img {
        display: block;
        line-height: 0;          /* kills the descender gap below the img */
      }
      .strip-row__mobile-img img {
        width: 112%;             /* 100% + 12% scale increase */
        margin-left: 20px;       /* inset 20px from left; right bleed clipped by strip-row overflow:hidden */
        animation: mobile-graphic-float 6s ease-in-out infinite;
      }
      @keyframes mobile-graphic-float {
        0%, 100% { transform: translateY(0); }
        50%       { transform: translateY(-6px); }
      }

     .kwb-segment--modes .hero-split { padding-top: 2.5rem; padding-bottom: 5rem; }
     .kwb-segment--modes .hero-split__inner { width: 100%; padding-inline: 4vw; box-sizing: border-box; }
     .kwb-segment--modes .hero-split__media { width: 100%; margin-inline: auto; }
     .kwb-segment--modes .hero-split__image-wrap {
        width: 100%;
        height: auto;
        aspect-ratio: 524 / 492;
        margin-inline: auto;
      }
      .kwb-segment--modes .hero-split--modes .hero-split__content { margin-top: 1.75rem; max-width: 92vw; }
      .kwb-segment--modes .hero-split--modes .hero-split__title {
        font-size: clamp(1.875rem, 9vw, 2.25rem);
        line-height: 0.95;
        letter-spacing: -0.10763em;
        gap: 0.4em;
      }
     .kwb-segment--modes .hero-split__eyebrow { font-size: 18px; }
     .kwb-segment--modes .hero-split__subhead { font-size: 1rem; }
     .modes-segment-intro__sub { font-size: 1rem; } /* 16px on mobile — matches hero lead */
      .kwb-segment--modes .hero-split--modes .hero-split__title-badge { margin-left: 0.5rem; }

      .feature-item { grid-template-columns: 44px 1fr; gap: 12px; }
      .feature-item__icon { width: 44px; height: 44px; }
      .feature-item__icon svg { width: 24px; }
    }