/* Shared by webinar-1.html (registration) and webinar-1-confirmation.html
   (confirmation). Extracted from the registration page when the
   confirmation moved to its own URL, so the two pages cannot drift apart
   visually. Edit here, not in either page. */
  /* ---------------------------------------------------------------------
     Tokens
     --------------------------------------------------------------------- */
  :root {
    --bg: #0a0a12;
    --bg-band: #11111d;
    --surface: #12121c;
    --text: #e8e9ee;
    --heading: #fff;
    --body: #b4b9c8;
    --light: #d3d6e0;
    --meta: #9aa0b0;
    --faint: #6b7080;
    --accent: #38bdf8;
    --accent-light: #7dd3fc;
    --accent-lighter: #bae6fd;
    --line: rgba(255, 255, 255, 0.07);
    --line-card: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.09);
    --line-field: rgba(255, 255, 255, 0.14);
    --line-btn: rgba(255, 255, 255, 0.18);
    --gutter: clamp(16px, 4vw, 40px);
  }

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

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
  }

  a { color: var(--accent-light); }
  a:hover { color: var(--accent-lighter); }

  input, select, button { font-family: inherit; }
  input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  select option { background: var(--surface); color: #fff; }
  ::placeholder { color: var(--faint); }

  [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;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }

  /* ---------------------------------------------------------------------
     Layout primitives
     --------------------------------------------------------------------- */
  .wrap { max-width: 1160px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
  .cols { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
  .cols-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .cols-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 3vw, 40px); }
  .cols-260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: stretch; }
  .cols-240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: stretch; }
  .cols-cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: stretch; }

  .pad-y { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); }
  .pad-b { padding-bottom: clamp(40px, 6vw, 80px); }

  .card {
    background: var(--surface);
    border: 1px solid var(--line-card);
    border-radius: 14px;
    padding: 26px;
  }
  /* Section rhythm. Below the hero the ground alternates so each section reads
     as its own slab, and every section after the first carries a hairline, so
     two flat sections in a row still divide. The rule is on the section rather
     than the parity, so reordering or inserting one cannot undo it. */
  .band { background: var(--bg-band); }
  .band > .wrap { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); }
  [data-view="form"] > section + section { border-top: 1px solid var(--line); }
  [data-view="form"] > section.close-cta { border-top: 0; }

  /* ---------------------------------------------------------------------
     Type
     --------------------------------------------------------------------- */
  .kicker {
    font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--accent-light);
  }
  .kicker-faint { color: var(--faint); }
  h1, h2, h3 { color: var(--heading); margin: 0; letter-spacing: -0.025em; }
  .h-hero { font-size: clamp(32px, 4.8vw, 58px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 800; text-wrap: pretty; }
  .h-1 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; line-height: 1.12; text-wrap: pretty; }
  .h-2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; line-height: 1.15; }
  .h-3 { font-size: clamp(22px, 2.8vw, 30px); font-weight: 800; line-height: 1.15; }
  .lede { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55; color: var(--body); }
  .body-lg { font-size: 17px; line-height: 1.6; color: var(--body); }
  .body { font-size: 15px; line-height: 1.6; color: var(--body); }
  .note { font-size: 12px; color: var(--faint); }
  .emphasis { color: #fff; font-weight: 700; }

  .pill {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; padding: 6px 12px; border-radius: 999px;
  }
  .pill-accent { border: 1px solid rgba(56, 189, 248, 0.35); background: rgba(56, 189, 248, 0.08); color: var(--accent-light); }
  .pill-neutral { border: 1px solid var(--line-field); background: rgba(255, 255, 255, 0.06); color: var(--light); }
  .pill-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.25);
  }

  /* ---------------------------------------------------------------------
     Buttons
     --------------------------------------------------------------------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--accent); color: var(--bg); border: 0; border-radius: 10px;
    text-decoration: none; font-weight: 800; cursor: pointer;
    transition: background 0.15s ease;
  }
  .btn:hover { background: var(--accent-light); color: var(--bg); }
  .btn:active { background: var(--accent-lighter); }
  .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }

  .btn-lg { min-height: 54px; font-size: 16px; width: 100%; }
  .btn-cta { font-size: 17px; padding: 16px 28px; }
  .btn-sm { font-size: 14px; padding: 12px 18px; border-radius: 8px; }
  .btn-nav { font-size: 14px; padding: 10px 16px; border-radius: 8px; white-space: nowrap; }
  .btn-trial { font-size: 15px; padding: 14px 20px; }

  .btn-outline {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; color: #fff; border: 1px solid var(--line-btn);
    text-decoration: none; font-weight: 700; border-radius: 8px;
    transition: background 0.15s ease;
  }
  .btn-outline:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
  .btn-outline-sm { font-size: 14px; padding: 10px 16px; }
  .btn-outline-lg { font-size: 15px; padding: 14px 20px; border-radius: 10px; }

  .btn-text {
    background: none; border: 0; color: var(--meta);
    font-size: 13px; cursor: pointer; padding: 4px;
  }
  .btn-text:hover { color: #fff; }
  .btn-back { color: var(--faint); padding: 0; }

  /* ---------------------------------------------------------------------
     Header
     --------------------------------------------------------------------- */
  .site-header {
    position: sticky; top: 0; z-index: 20;
    background: rgba(10, 10, 18, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .site-header .wrap {
    height: 86px; padding-top: 14px; padding-bottom: 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
  }
  /* Logo treatment mirrors agencyaidasdr.com: same mark, 58px, same glow. */
  .site-header img {
    height: 58px; width: auto; display: block;
    filter: drop-shadow(rgba(255, 255, 255, 0.35) 0 0 1px)
            drop-shadow(rgba(129, 140, 248, 0.45) 0 6px 18px);
    transition: filter 220ms;
  }
  @media (max-width: 520px) { .site-header img { height: 44px; } }
  .header-cta { display: flex; align-items: center; gap: 14px; }
  .header-date { font-size: 13px; color: var(--meta); white-space: nowrap; }
  @media (max-width: 520px) { .header-date { display: none; } }

  /* ---------------------------------------------------------------------
     Hero
     --------------------------------------------------------------------- */
  .hero { position: relative; overflow: hidden; }
  .hero-glow {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 70% 50% at 50% -10%, rgba(56, 189, 248, 0.18), transparent 70%);
  }
  .hero .wrap {
    position: relative;
    padding-top: clamp(40px, 7vw, 88px);
    padding-bottom: clamp(32px, 5vw, 56px);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(28px, 4vw, 56px); align-items: center;
  }
  .hero h1 { margin-bottom: 18px; }
  .hero .lede { margin: 0 0 26px; max-width: 54ch; }
  .hero-checks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 28px; }
  .hero-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--light); }
  .tick { color: var(--accent); font-weight: 800; }

  /* Agencies already running the program. These are brand marks, not faces,
     so they sit in a spaced row rather than an overlapping avatar stack:
     overlap would crop the symbol, which is the whole point of the row. */
  .avatars { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .agency-logos { display: flex; align-items: center; gap: 8px; }
  .agency-logo {
    width: 46px; height: 46px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-card);
  }
  /* 38px circles at 62% gave a 24px mark, which turned the detailed ones (the
     palm, the ACDC arcs) into coloured blobs. 46px at 72% is a 33px mark, which
     is the smallest that still reads. */
  .agency-logo img { width: 72%; height: 72%; object-fit: contain; opacity: 0.92; }
  /* Stand-in until the real mark is supplied. Deliberately plain so it does
     not read as somebody's logo. */
  .agency-logo .monogram {
    font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--meta);
  }
  /* The bigger marks push the row close to the column width, so the label is
     allowed to take the rest of the line and drop underneath when it will not
     fit. Without the flex basis it wrapped at every width, including wide ones
     with room to spare. */
  .avatars > span { font-size: 13px; color: var(--meta); flex: 1 1 200px; min-width: 0; }

  /* ---------------------------------------------------------------------
     Registration form
     --------------------------------------------------------------------- */
  .reg {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    padding: clamp(22px, 3vw, 32px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(56, 189, 248, 0.08);
    scroll-margin-top: 104px;
  }
  .reg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
  .reg-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-light); }
  .reg-step { font-size: 12px; color: var(--meta); }
  .reg h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 4px; }
  .reg-sub { font-size: 14px; color: var(--meta); margin: 0 0 20px; line-height: 1.5; }
  .reg-bars { display: flex; gap: 6px; margin-bottom: 20px; }
  .reg-bar { height: 3px; flex: 1; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
  .reg-bar.on { background: var(--accent); }
  .reg form { display: flex; flex-direction: column; gap: 14px; }
  .reg form.step-2 { gap: 16px; }

  .field { display: flex; flex-direction: column; gap: 6px; }
  .field label, .field-label { font-size: 13px; font-weight: 600; color: var(--light); }
  .field-label .opt { color: var(--faint); font-weight: 500; }
  .input {
    background: var(--bg); border: 1px solid var(--line-field); color: #fff;
    border-radius: 8px; padding: 0 14px; min-height: 48px; font-size: 16px; width: 100%;
  }
  select.input { appearance: none; -webkit-appearance: none; padding-right: 38px;
    background-image: linear-gradient(45deg, transparent 50%, #9aa0b0 50%), linear-gradient(135deg, #9aa0b0 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  }
  .input:hover { border-color: rgba(255, 255, 255, 0.24); }

  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip {
    background: transparent; color: var(--body);
    border: 1px solid var(--line-field); border-radius: 999px;
    padding: 9px 14px; font-size: 13px; font-weight: 600;
    cursor: pointer; min-height: 38px;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  }
  .chip:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--light); }
  .chip[aria-pressed="true"] {
    background: rgba(56, 189, 248, 0.15);
    color: var(--accent-light);
    border-color: rgba(56, 189, 248, 0.6);
  }
  .fine { font-size: 12px; color: var(--faint); margin: 0; text-align: center; line-height: 1.5; }

  .form-error {
    font-size: 13px; line-height: 1.5; color: #fecaca;
    background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.35);
    border-radius: 8px; padding: 10px 12px; margin: 0;
  }

  /* ---------------------------------------------------------------------
     Customer marquee (mirrors agencyaidasdr.com)
     --------------------------------------------------------------------- */
  .cmq-wrap {
    padding: 38px 0 42px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--bg-band);
    overflow: hidden;
  }
  .cmq-label {
    text-align: center; font-size: 12px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--meta);
    margin-bottom: 26px; padding: 0 20px;
  }
  .cmq-track {
    display: flex; width: max-content; align-items: center;
    animation: cmq-scroll 52s linear infinite; will-change: transform;
  }
  .cmq-wrap:hover .cmq-track { animation-play-state: paused; }
  .cmq-tile {
    flex: none; display: flex; align-items: center; justify-content: center;
    height: 84px; width: 180px; margin-right: 20px;
    background: #fff; border: 1px solid rgba(120, 130, 160, 0.16);
    border-radius: 14px; box-shadow: 0 8px 20px -14px rgba(20, 24, 60, 0.4);
  }
  .cmq-tile img {
    max-height: 50px; max-width: 138px; width: auto; height: auto;
    object-fit: contain; display: block;
  }
  .cmq-big img { max-height: 60px; max-width: 150px; }
  .cmq-badge img { max-height: 74px; max-width: 74px; }
  .cmq-dark { background: #111118; border-color: rgba(255, 255, 255, 0.14); }
  @keyframes cmq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .cmq-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
    .cmq-tile { margin-bottom: 20px; }
  }

  /* ---------------------------------------------------------------------
     Stats
     --------------------------------------------------------------------- */
  .stat-num { font-size: clamp(34px, 4vw, 48px); font-weight: 800; letter-spacing: -0.03em; color: #fff; line-height: 1; }
  .stat-label { font-size: 14px; color: var(--meta); margin-top: 8px; }
  .stat-accent {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(56, 189, 248, 0.04));
    border-color: rgba(56, 189, 248, 0.35);
  }
  .stat-accent .stat-num { color: var(--accent); }
  .stat-accent .stat-label { color: var(--light); }

  /* ---------------------------------------------------------------------
     Agenda
     --------------------------------------------------------------------- */
  .panel { background: var(--surface); border: 1px solid var(--line-card); border-radius: 14px; padding: clamp(22px, 3vw, 32px); }
  .agenda { display: flex; flex-direction: column; gap: 14px; }
  .agenda-item { display: flex; gap: 12px; align-items: flex-start; }
  .agenda-n {
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    background: rgba(56, 189, 248, 0.15); color: var(--accent);
    font-size: 13px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
  }
  .agenda-copy { font-size: 15px; line-height: 1.5; color: var(--light); }
  .agenda-copy strong { color: #fff; }

  /* ---------------------------------------------------------------------
     Host
     --------------------------------------------------------------------- */
  .host { display: flex; gap: 20px; align-items: center; }
  .host img {
    width: clamp(96px, 14vw, 160px); height: clamp(96px, 14vw, 160px);
    border-radius: 16px; object-fit: cover; object-position: 50% 20%;
    flex: none; border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .host-name { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
  .host-meta { font-size: 14px; color: var(--meta); margin-top: 4px; }

  /* ---------------------------------------------------------------------
     Fit / skip lists
     --------------------------------------------------------------------- */
  .fit { border-color: rgba(56, 189, 248, 0.3); padding: clamp(22px, 3vw, 30px); }
  .fit h3, .skip h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; }
  .skip { padding: clamp(22px, 3vw, 30px); }
  .list { display: flex; flex-direction: column; gap: 12px; }
  .list-row { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--light); }
  .list-row .mark { font-weight: 800; flex: none; color: var(--accent); }
  .skip .list-row { color: var(--meta); }
  .skip .list-row .mark { color: var(--faint); }
  .skip-note { font-size: 14px; color: var(--meta); margin: 16px 0 0; line-height: 1.5; }

  /* ---------------------------------------------------------------------
     FAQ
     --------------------------------------------------------------------- */
  .faq { display: flex; flex-direction: column; gap: 10px; }
  .faq-item { background: var(--surface); border: 1px solid var(--line-card); border-radius: 12px; overflow: hidden; }
  .faq-q {
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
    text-align: left; background: none; border: 0; color: #fff;
    padding: 18px 20px; font-size: 16px; font-weight: 700; cursor: pointer; min-height: 56px;
  }
  .faq-q:hover { color: var(--accent-light); }
  .faq-icon { color: var(--accent); font-size: 20px; flex: none; }
  .faq-a { padding: 0 20px 18px; font-size: 15px; line-height: 1.6; color: var(--body); }

  /* ---------------------------------------------------------------------
     Closing CTA
     --------------------------------------------------------------------- */
  .close-cta { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
  .close-glow {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 60% 60% at 50% 110%, rgba(56, 189, 248, 0.2), transparent 70%);
  }
  .close-inner {
    position: relative; max-width: 760px; margin: 0 auto;
    padding: clamp(48px, 7vw, 96px) var(--gutter); text-align: center;
  }
  .close-date { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 14px; }
  .close-inner h2 { font-size: clamp(28px, 4.2vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 16px; text-wrap: pretty; }
  .close-inner .body-lg { font-size: 17px; line-height: 1.55; margin: 0 0 28px; }

  /* ---------------------------------------------------------------------
     MRR calculator (mirrors the /agencies "Build a new MRR line." calculator:
     same inputs, same pricing model, same outputs, dark-theme surfaces)
     --------------------------------------------------------------------- */
  .mrr-head > * { min-width: 0; }
  .mrr-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 3vw, 40px); align-items: end; margin-bottom: 26px; }
  .mrr-head h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; }
  /* Was align-items: stretch, which matched /agencies when the controls card
     held three groups. With the channel chips gone it holds two sliders, so
     stretching left a mostly empty card beside a full one. */
  .mrr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  @media (max-width: 860px) { .mrr-grid { grid-template-columns: 1fr; } }
  /* Grid items default to min-width:auto and refuse to shrink below their
     content, which pushed the cards past the gutter on narrow screens. */
  .mrr-grid > * { min-width: 0; }
  .mrr-card { background: var(--surface); border: 1px solid var(--line-card); border-radius: 18px; padding: clamp(22px, 3vw, 30px); min-width: 0; }
  .mrr-controls { display: flex; flex-direction: column; gap: 26px; }
  .mrr-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 600; color: var(--light); margin-bottom: 8px; gap: 12px; }
  .mrr-row b { color: var(--accent); font-weight: 700; }
  .mrr-range { width: 100%; accent-color: var(--accent); height: 22px; cursor: pointer; }
  .mrr-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .mrr-chip {
    padding: 11px 8px; border-radius: 10px; cursor: pointer; text-align: center;
    border: 1px solid var(--line-field); background: transparent; color: var(--body);
    font-family: inherit; transition: background 160ms, border-color 160ms, color 160ms;
  }
  .mrr-chip:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--light); }
  .mrr-chip[aria-pressed="true"] { border-color: var(--accent); background: rgba(56, 189, 248, 0.14); color: var(--accent-light); }
  .mrr-chip .t { font-size: 13.5px; font-weight: 700; }
  .mrr-chip .p { font-size: 11.5px; margin-top: 2px; opacity: 0.85; }
  .mrr-fine { font-size: 12px; color: var(--faint); line-height: 1.6; }
  .mrr-out { background: linear-gradient(180deg, rgba(56,189,248,0.10), rgba(56,189,248,0.03)); border-color: rgba(56, 189, 248, 0.35); }
  .mrr-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .mrr-pair > * { min-width: 0; }
  @media (max-width: 380px) { .mrr-pair { grid-template-columns: 1fr; gap: 14px; } }
  .mrr-k { font-size: 10.5px; letter-spacing: 0.1em; color: var(--meta); text-transform: uppercase; }
  .mrr-v { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; color: #fff; }
  .mrr-v span { font-size: 15px; color: var(--meta); font-weight: 500; }
  .mrr-keep { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-card); }
  .mrr-keep .mrr-k { color: #4ade80; }
  .mrr-keep-v { font-size: clamp(38px, 5vw, 52px); font-weight: 800; letter-spacing: -0.03em; color: #4ade80; line-height: 1.1; margin-top: 4px; }
  .mrr-keep-sub { font-size: 14px; color: var(--meta); margin-top: 4px; }
  .mrr-steps { margin-top: 20px; border: 1px solid var(--line-card); border-radius: 12px; overflow: hidden; }
  .mrr-step { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 10px 14px; font-size: 13.5px; }
  .mrr-step + .mrr-step { border-top: 1px solid var(--line-card); }
  .mrr-step.on { background: rgba(56, 189, 248, 0.12); }
  .mrr-step span:first-child { color: var(--light); }
  .mrr-step span:last-child { color: #4ade80; font-weight: 700; }

  /* ---------------------------------------------------------------------
     Thank-you page
     --------------------------------------------------------------------- */
  .outcome { max-width: 1160px; margin: 0 auto; padding: clamp(20px, 3vw, 32px) var(--gutter) clamp(40px, 6vw, 72px); }
  .outcome-narrow { max-width: 800px; }
  .outcome h1 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 12px 0 8px; text-wrap: pretty; }
  .ty-sub { font-size: clamp(15px, 1.5vw, 17px); color: var(--body); line-height: 1.5; margin: 0 0 18px; }
  .outcome-intro { max-width: 900px; margin: 0 auto; text-align: center; }

  /* The calendar block outweighs the headline on purpose. */
  .cal-block {
    scroll-margin-top: 100px;
    background: linear-gradient(180deg, rgba(56,189,248,0.14), rgba(56,189,248,0.04));
    border: 1px solid rgba(56, 189, 248, 0.45);
    border-radius: 18px; padding: clamp(22px, 3vw, 30px);
    display: grid; grid-template-columns: 1fr; gap: 20px;
    align-items: center; max-width: 920px; margin: 0 auto 28px; text-align: center;
  }
  .cal-block > * { min-width: 0; }
  @media (max-width: 760px) { .cal-block { grid-template-columns: 1fr; } }
  .cal-date { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; color: #fff; letter-spacing: -0.02em; }
  .cal-times { font-size: clamp(15px, 1.6vw, 17px); color: var(--accent-light); font-weight: 600; margin-top: 6px; }
  .cal-meta { font-size: 14px; color: var(--meta); margin-top: 6px; }
  .cal-buttons { display: flex; flex-direction: column; gap: 10px; align-items: center; }
  .cal-primary {
    font-size: clamp(17px, 2vw, 20px); font-weight: 800;
    padding: 18px 30px; border-radius: 12px; white-space: nowrap; cursor: pointer;
  }
  .cal-alt { display: flex; gap: 8px; width: min(100%, 360px); }
  .cal-alt-btn { flex: 1; justify-content: center; font-size: 13px; padding: 9px 14px; cursor: pointer; font-family: inherit; }

  .todo { list-style: none; max-width: 860px; margin: 0 auto clamp(36px, 6vw, 64px); padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: todo; }
  .todo li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--light); }
  .todo strong { color: #fff; }
  .todo-n {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(56, 189, 248, 0.15); color: var(--accent);
    font-size: 13px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; margin-top: 1px;
  }

  .ty-section { margin-bottom: clamp(36px, 6vw, 64px); }
  .ty-section h2 { margin-bottom: 18px; }
  .ty-copy { max-width: 70ch; margin: 0 0 10px; }
  .reminder { border-top: 1px solid var(--line-card); padding-top: 26px; margin-bottom: 0; }

  /* Responsive Wistia embeds are centered in a single column so each video
     has room to breathe on desktop and uses the full available width on mobile. */
  .video-shell {
    width: min(100%, 760px); margin-left: auto; margin-right: auto;
    border-radius: 14px; overflow: hidden; background: var(--surface);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.32);
  }
  .video-shell wistia-player { display: block; width: 100%; }
  .hero-vid { margin-top: 24px; margin-bottom: 28px; }
  .video-section h2, .ready-section h2 { text-align: center; }
  .video-stack { display: flex; flex-direction: column; gap: clamp(32px, 6vw, 64px); }

  /* Legacy placeholder rules remain for any older cached page during rollout. */
  .vid {
    position: relative; aspect-ratio: 16 / 9; border-radius: 14px;
    background: repeating-linear-gradient(45deg, #12121c, #12121c 12px, #15151f 12px, #15151f 24px);
    border: 1px dashed rgba(56, 189, 248, 0.4);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  }
  /* The hero video leads the page, so it is capped by viewport height as
     well as width. That keeps the calendar block under it inside the first
     screen on desktop instead of pushing it below the fold. */
  .vid-hero {
    max-width: min(760px, 100%);
    max-height: min(42vh, 380px);
    aspect-ratio: 16 / 9;
    width: auto; margin: 0 auto;
  }
  @supports not (aspect-ratio: 16 / 9) { .vid-hero { height: 360px; } }
  .vid-cap { text-align: center; font-size: 14px; color: var(--meta); margin: 10px 0 0; }
  .vid-hero .vid-play { font-size: clamp(34px, 5vw, 46px); }
  .vid-hero .vid-label { font-size: 14px; color: var(--accent-light); font-weight: 600; }

  /* Backup data: the video's substance, readable without pressing play. */
  .backup { margin: 0 0 clamp(36px, 6vw, 64px); }
  .backup .ty-copy { max-width: none; }
  .facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px; margin: 18px 0;
  }
  .facts > * { min-width: 0; }
  .fact {
    background: var(--surface); border: 1px solid var(--line-card);
    border-radius: 12px; padding: 16px 18px;
  }
  .fact-v { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; color: var(--accent); letter-spacing: -0.02em; line-height: 1.1; }
  .fact-l { font-size: 13px; color: var(--meta); margin-top: 6px; line-height: 1.4; }
  .vid-badge {
    position: absolute; top: 12px; left: 12px;
    font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--accent-light); background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 999px; padding: 4px 10px;
  }
  .vid-play { font-size: clamp(26px, 4vw, 38px); color: var(--accent); line-height: 1; }
  .vid-label { font-size: 13px; color: var(--meta); }
  .vid-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
  .vid-row > * { min-width: 0; }
  .vid-fig { margin: 0; }
  .vid-fig figcaption { font-size: 14px; line-height: 1.5; color: var(--body); margin-top: 12px; }
  .vid-fig figcaption strong { color: #fff; }

  .ready {
    max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px;
  }
  .ready-item {
    display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px;
    align-items: center; background: var(--surface); border: 1px solid var(--line-card);
    border-radius: 12px; padding: 16px 18px; color: var(--light); line-height: 1.55;
  }
  .ready-n {
    width: 38px; height: 38px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; background: rgba(56, 189, 248, 0.15);
    color: var(--accent); font-weight: 800;
  }
  @media (max-width: 520px) {
    .cal-primary { width: 100%; white-space: normal; }
    .cal-alt { flex-direction: column; }
    .ready-item { grid-template-columns: 32px minmax(0, 1fr); padding: 14px; }
    .ready-n { width: 32px; height: 32px; }
  }

  .next-card { background: var(--surface); border: 1px solid var(--line-card); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
  .next-card h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
  .next-card p { font-size: 14px; line-height: 1.55; color: var(--meta); margin: 0; }
  .next-card p.grow { flex: 1; }
  .next-card .btn-outline { align-self: flex-start; }

  .trial-card { background: var(--surface); border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 16px; padding: clamp(22px, 3vw, 32px); margin: 28px 0; }
  .trial-card h2 { margin-bottom: 10px; }
  .trial-actions { display: flex; flex-wrap: wrap; gap: 10px; }

  /* ---------------------------------------------------------------------
     Footer
     --------------------------------------------------------------------- */
  .site-footer { border-top: 1px solid var(--line); }
  .site-footer .wrap {
    padding-top: 20px; padding-bottom: 20px;
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
    font-size: 12px; color: var(--faint);
  }