/* How it works: the scroll-driven spotting walkthrough. Owned by templates/marketing/_walkthrough.html.
   Default (no JS, reduced motion): three still phone frames with captions.
   .wt-is-live (added by marketing-walkthrough.js): one sticky phone scrubbed by --p (0 → 1). */

/* overflow-x:clip (not hidden) keeps the decorative rings inside the page without breaking position:sticky. */
.wt-section { position:relative; overflow-x:clip; background:#fff; color:var(--marketing-ink); }

/* Introduction */
.wt-intro { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:24px 64px; align-items:end; padding-top:112px; }
.wt-intro .eyebrow { margin-bottom:20px; }
.wt-intro h2 { margin:0; font:700 clamp(44px,5.4vw,80px)/1 var(--display-font); letter-spacing:-.055em; }
.wt-intro h2 em { color:var(--field-teal-deep); font-style:normal; }
.wt-intro-copy { padding-bottom:10px; }
.wt-lede { max-width:470px; margin:0; color:var(--marketing-muted); font-size:18px; line-height:1.65; }
.wt-sample { margin:14px 0 0; color:var(--marketing-muted); font-size:13px; line-height:1.5; }

/* Steps: three frames side by side (static presentation). */
.wt-track { position:relative; }
.wt-stage { position:relative; }
.wt-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin:0; padding:64px 0 112px; list-style:none; }
.wt-step { display:grid; grid-template-rows:auto 1fr; gap:28px; min-width:0; }
.wt-frame { --wt-scale:.6; position:relative; display:flex; justify-content:center; padding:36px 16px; overflow:hidden; border-radius:24px; background:radial-gradient(circle at 50% 46%, #fff 0 18%, transparent 18.2% 30%, #a6d7d633 30.2% 30.6%, transparent 30.8% 44%, #a6d7d633 44.2% 44.6%, transparent 44.8%), var(--field-teal-tint); isolation:isolate; }
.wt-step-copy { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:14px; align-content:start; }
.wt-step-num { grid-row:span 2; padding-top:4px; color:var(--field-teal-deep); font:700 15px/1.4 var(--display-font); letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.wt-step-copy h3 { margin:0; font:700 clamp(22px,2vw,28px)/1.2 var(--display-font); letter-spacing:-.03em; }
.wt-step-copy p { margin:10px 0 0; max-width:420px; color:var(--marketing-muted); font-size:16px; line-height:1.65; }
.wt-meter, .wt-live { display:none; }

/* ------------------------------------------------------------------ */
/* The phone. Drawn on a 390 × 844 screen inside a 414 × 868 frame,   */
/* scaled by --wt-scale. Every moving part is a function of --p.       */
/* ------------------------------------------------------------------ */
.wt-phone-box { position:relative; flex:none; width:calc(414px * var(--wt-scale, .6)); height:calc(868px * var(--wt-scale, .6)); }
.wt-phone {
  --k-tap1:clamp(0, (var(--p) - .05) / .08, 1);
  --k-sel:clamp(0, (var(--p) - .08) / .10, 1);
  --k-card:clamp(0, (var(--p) - .24) / .12, 1);
  --k-tap2:clamp(0, (var(--p) - .40) / .07, 1);
  --k-spot:clamp(0, (var(--p) - .45) / .035, 1);
  --k-chip:clamp(0, (var(--p) - .485) / .06, 1);
  --k-back:clamp(0, (var(--p) - .62) / .07, 1);
  --k-tap3:clamp(0, (var(--p) - .67) / .07, 1);
  --k-tab:clamp(0, (var(--p) - .69) / .05, 1);
  --k-log:clamp(0, (var(--p) - .71) / .10, 1);
  --k-land:clamp(0, (var(--p) - .83) / .09, 1);
  /* Ease-out (cubic) versions of the segments that move things. */
  --e-sel:calc(1 - (1 - var(--k-sel)) * (1 - var(--k-sel)) * (1 - var(--k-sel)));
  --e-card:calc(1 - (1 - var(--k-card)) * (1 - var(--k-card)) * (1 - var(--k-card)));
  --e-back:calc(var(--k-back) * var(--k-back) * (3 - 2 * var(--k-back)));
  --e-tab:calc(var(--k-tab) * var(--k-tab) * (3 - 2 * var(--k-tab)));
  --e-log:calc(1 - (1 - var(--k-log)) * (1 - var(--k-log)) * (1 - var(--k-log)));
  --e-land:calc(1 - (1 - var(--k-land)) * (1 - var(--k-land)) * (1 - var(--k-land)));
  /* Back-out for the reward pop: a small overshoot, then settle. */
  --e-chip:calc(1 + 2.4 * (var(--k-chip) - 1) * (var(--k-chip) - 1) * (var(--k-chip) - 1) + 1.4 * (var(--k-chip) - 1) * (var(--k-chip) - 1));
  --up:calc(var(--e-card) * (1 - var(--e-back)));
  position:absolute; left:0; top:0; width:414px; height:868px; padding:8px; border:4px solid #999893; border-radius:56px; background:#030405;
  box-shadow:inset 0 0 0 2px #33383b, 16px 30px 50px #00151c40;
  transform:scale(var(--wt-scale, .6)); transform-origin:0 0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; text-align:left;
}
.wt-phone::before, .wt-phone::after { content:""; position:absolute; width:5px; border-radius:3px; background:#aaa8a2; }
.wt-phone::before { left:-8px; top:150px; height:84px; }
.wt-phone::after { right:-8px; top:180px; height:62px; }
.wt-screen { position:relative; width:390px; height:844px; overflow:hidden; border-radius:46px; background:#1a2420; color:#edeff0; contain:paint; }

/* Map: dark satellite-like vector terrain. */
.wt-map { position:absolute; inset:0; background:
  radial-gradient(ellipse 130px 90px at 72% 32%, #213a2b99 0 55%, transparent 60%),
  radial-gradient(ellipse 150px 100px at 26% 84%, #2b2c2499 0 55%, transparent 60%),
  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96'><rect width='96' height='96' fill='%231a221f'/><g fill='%23212b26'><rect x='3' y='3' width='26' height='18' rx='2'/><rect x='35' y='3' width='14' height='18' rx='2'/><rect x='55' y='3' width='38' height='18' rx='2'/><rect x='3' y='27' width='18' height='30' rx='2'/><rect x='27' y='27' width='30' height='14' rx='2'/><rect x='63' y='27' width='30' height='30' rx='2'/><rect x='3' y='63' width='38' height='14' rx='2'/><rect x='47' y='63' width='20' height='30' rx='2'/><rect x='73' y='63' width='20' height='14' rx='2'/></g><g fill='%23262f2a'><rect x='27' y='45' width='30' height='12' rx='2'/><rect x='3' y='81' width='38' height='12' rx='2'/><rect x='73' y='81' width='20' height='12' rx='2'/><rect x='9' y='7' width='8' height='6' rx='1'/></g><g fill='%231f2d25'><rect x='66' y='31' width='10' height='9' rx='2'/><rect x='51' y='68' width='10' height='10' rx='3'/></g></svg>") 0 0/96px 96px,
  #1a221f; }
.wt-map-art { position:absolute; inset:0; width:100%; height:100%; }
.wt-map-sea { fill:#0f2830; }
.wt-map-shore { fill:none; stroke:#3b5856; stroke-width:3; }
.wt-map-park { fill:#203a2b; }
.wt-map-roads { fill:none; stroke:#34403a; stroke-width:3; }
.wt-map-freeway path { fill:none; stroke:#4e4c3e; stroke-width:9; stroke-linecap:round; }
.wt-map-apron { fill:#2a302c; }
.wt-map-runway { fill:none; stroke:#5d625d; stroke-width:9; }
.wt-map-centerline { fill:none; stroke:#c9ccc6; stroke-width:1.2; stroke-dasharray:6 6; opacity:.7; }
.wt-map-labels text { fill:#f4f6f5; font:600 14px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; text-anchor:middle; paint-order:stroke; stroke:#0c1412; stroke-width:3px; stroke-linejoin:round; }
.wt-map-range { fill:none; stroke:#a6d7d6; stroke-opacity:.28; stroke-width:1.5; stroke-dasharray:4 7; }
.wt-map-you-halo { fill:#409faa; fill-opacity:.25; }
.wt-map-you { fill:#409faa; stroke:#fff; stroke-width:3.5; }
/* The selected flight's track draws in as the aircraft is chosen. */
.wt-map-track { fill:none; stroke:#f538db; stroke-width:3.5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--e-sel)); opacity:calc(var(--k-sel) * (1 - var(--up) * .4)); }

/* Aircraft: each drifts slowly along its heading as the page scrolls. */
.wt-plane { position:absolute; left:0; top:0; width:68px; height:68px; margin:-34px 0 0 -34px; transform:translate(var(--x), var(--y)) rotate(var(--hdg)) translateY(calc(var(--p) * -64px)); opacity:calc(1 - var(--e-sel) * .62); }
.wt-plane img { display:block; width:100%; height:100%; filter:drop-shadow(0 0 1.2px #409faa) drop-shadow(0 0 1.2px #409faa) drop-shadow(0 3px 4px #0009); }
.wt-target { position:absolute; left:0; top:0; transform:translate(193.5px, 263px) rotate(55deg) translateY(calc(min(var(--p), .1) * -140px)) rotate(-55deg); }
.wt-target .wt-plane { opacity:1; transform:rotate(55deg) scale(calc(1 + var(--e-sel) * .3)); }
.wt-halo { position:absolute; left:-46px; top:-46px; width:92px; height:92px; border:2.5px solid #a6d7d6; border-radius:50%; background:#409faa33; opacity:var(--k-sel); transform:scale(calc(.55 + var(--e-sel) * .45)); }
.wt-callout { position:absolute; left:0; top:52px; display:flex; align-items:center; gap:8px; padding:7px 13px 7px 8px; white-space:nowrap; border-radius:999px; background:#121719e6; box-shadow:0 6px 16px #0006; color:#fff; font-size:14px; font-weight:700; opacity:calc(var(--k-sel) * (1 - var(--k-card) * 3)); transform:translateX(-50%) translateY(calc((1 - var(--e-sel)) * 8px)); }
.wt-callout img { width:22px; height:22px; border-radius:6px; background:#fff; }
.wt-dim { position:absolute; inset:0; background:#05090a; opacity:calc(var(--up) * .35 + var(--e-log) * .25); }

/* Tap ripples: a soft ring that lands, grows and fades. */
.wt-tap { position:absolute; width:56px; height:56px; margin:-28px 0 0 -28px; border:3px solid #ffffffe6; border-radius:50%; background:#ffffff40; pointer-events:none; opacity:0; }
.wt-tap-plane { left:0; top:0; opacity:calc(min(1, var(--k-tap1) * 4) * (1 - var(--k-tap1))); transform:scale(calc(.5 + var(--k-tap1) * 1.1)); }
.wt-tap-spot { left:50%; bottom:48px; margin:0 0 -28px -28px; opacity:calc(min(1, var(--k-tap2) * 4) * (1 - var(--k-tap2))); transform:scale(calc(.5 + var(--k-tap2) * 1.3)); }
.wt-tap-tab { left:122.6px; top:786px; opacity:calc(min(1, var(--k-tap3) * 4) * (1 - var(--k-tap3))); transform:scale(calc(.5 + var(--k-tap3) * 1.1)); }

/* Status bar and the planespottr pill. */
.wt-topbar { position:absolute; inset:0 0 auto; height:54px; display:flex; align-items:center; justify-content:space-between; padding:6px 30px 0 44px; color:#fff; }
.wt-time { font-size:17px; font-weight:600; letter-spacing:-.01em; }
.wt-island { position:absolute; left:50%; top:11px; width:124px; height:36px; margin-left:-62px; border-radius:20px; background:#000; }
.wt-sysicons { display:flex; align-items:flex-end; gap:3px; }
.wt-sysicons i { width:4px; border-radius:1px; background:#fff; }
.wt-sysicons i:nth-child(1) { height:6px; } .wt-sysicons i:nth-child(2) { height:9px; } .wt-sysicons i:nth-child(3) { height:12px; }
.wt-sysicons b { width:26px; height:12px; margin-left:7px; border:1.5px solid #ffffffb3; border-radius:4px; box-shadow:inset 0 0 0 1.5px #000, inset 18px 0 0 #fff; }
.wt-brand-pill { position:absolute; left:50%; top:62px; display:flex; align-items:center; height:44px; padding:0 18px; border-radius:22px; background:#121719d9; box-shadow:0 6px 18px #0005; transform:translateX(-50%); opacity:calc(1 - var(--e-log)); }
.wt-brand-pill img { display:block; width:112px; height:auto; }

/* Tab bar: Map → My Log. Hidden while the flight card is up. */
.wt-tabbar { position:absolute; left:14px; right:14px; top:758px; height:56px; display:grid; grid-template-columns:repeat(5,1fr); padding:3px; border-radius:28px; background:#14191cf0; box-shadow:0 8px 24px #0006; transform:translateY(calc(var(--up) * 110px)); }
.wt-tab-pill { position:absolute; left:3px; top:3px; bottom:3px; width:calc((100% - 6px) / 5); border-radius:24px; background:#323a3e; transform:translateX(calc(var(--e-tab) * 100%)); }
.wt-tab { position:relative; display:grid; justify-items:center; align-content:center; gap:2px; color:#fff; font-size:10.5px; font-weight:600; }
.wt-tab svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linejoin:round; stroke-linecap:round; }
.wt-tab-map { color:color-mix(in srgb, #fff calc(var(--e-tab) * 100%), var(--field-teal-light)); }
.wt-tab-log { color:color-mix(in srgb, var(--field-teal-light) calc(var(--e-tab) * 100%), #fff); }
.wt-home { position:absolute; left:50%; bottom:8px; width:134px; height:5px; margin-left:-67px; border-radius:3px; background:#ffffffd9; }

/* Flight card sheet (the shared flight_card macro), pinned to native sizes inside the phone. */
.wt-sheet { position:absolute; left:10px; right:10px; bottom:14px; transform:translateY(calc((1 - var(--up)) * 560px)); }
.wt-screen .flight-card { padding:20px; border-radius:34px; box-shadow:0 -10px 40px #0007; }
.wt-screen .flight-card-top { gap:14px; }
.wt-screen .flight-number { gap:9px; font-size:15px; }
.wt-screen .flight-number img { width:26px; height:26px; }
.wt-screen .flight-card .flight-route { margin:12px 0 6px; font-size:30px; }
.wt-screen .flight-cities, .wt-screen .flight-registration { font-size:13px; }
.wt-screen .flight-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:18px; }
.wt-screen .flight-metrics>div { padding:12px 10px; }
.wt-screen .flight-metrics dt { font-size:12px; }
.wt-screen .flight-metrics dd { font-size:18px; }
.wt-screen .flight-status { margin-top:14px; font-size:12px; }
.wt-screen .flight-close { width:40px; height:40px; font-size:24px; }
/* The phone is scaled below 1, so the 20px white label renders smaller than 20px: deep teal per the brand rule. */
.wt-screen .flight-spot { position:relative; margin-top:16px; background:var(--field-teal-deep); transform:scale(calc(1 - .045 * min(var(--k-tap2) * 2, 2 - var(--k-tap2) * 2))); }
/* Spotted!: gold fill, brand-dark label and check, cross-faded over the teal Spot button. */
.wt-screen .flight-spot::after { content:"Spotted!"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding-left:30px; border-radius:inherit; background:var(--field-gold); color:var(--field-dark); font-size:20px; font-weight:700; opacity:var(--k-spot); }
.wt-screen .flight-spot::before { content:""; position:absolute; z-index:1; left:calc(50% - 60px); top:50%; width:26px; height:26px; margin-top:-13px; border-radius:50%; background:var(--field-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8' fill='none' stroke='%23e8b44c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; opacity:var(--k-spot); transform:scale(calc(.6 + var(--k-spot) * .4)); }
/* The reward: a gold-filled +64 chip with dark text, then the new-airframe badge. */
.wt-rewards { position:absolute; right:6px; bottom:calc(100% + 14px); display:flex; align-items:center; gap:8px; }
.wt-reward-points, .wt-reward-badge { display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 16px 0 13px; border-radius:20px; font-size:19px; font-weight:800; letter-spacing:-.01em; box-shadow:0 8px 20px #0006; }
.wt-reward-points { background:var(--field-gold); color:var(--field-dark); opacity:calc(min(1, var(--k-chip) * 3) * (1 - min(1, var(--k-back) * 2))); transform:translateY(calc((1 - var(--k-chip)) * 14px)) scale(calc(.55 + var(--e-chip) * .45)); transform-origin:50% 100%; order:2; }
.wt-reward-points svg { width:17px; height:17px; fill:currentColor; }
.wt-reward-badge { padding:0 14px; background:#fff; color:var(--field-dark); font-size:14px; font-weight:700; opacity:calc(clamp(0, (var(--k-chip) - .45) * 3, 1) * (1 - min(1, var(--k-back) * 2))); transform:translateX(calc((1 - clamp(0, (var(--k-chip) - .45) * 2, 1)) * 12px)); order:1; }

/* My Log: the tall card that opens over the map. */
.wt-log { position:absolute; left:10px; right:10px; top:58px; bottom:96px; padding:18px 16px 16px; overflow:hidden; border-radius:34px; background:#fff; color:var(--field-dark); box-shadow:0 -10px 40px #0006; transform:translateY(calc((1 - var(--e-log)) * 820px)); }
.wt-log-head { display:flex; align-items:center; justify-content:space-between; margin:0 2px 14px; }
.wt-log-head strong { font:700 28px/1.1 var(--display-font); letter-spacing:-.035em; }
.wt-log-close { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#e8eceb; color:#52676d; font-size:22px; line-height:1; }
.wt-log-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.wt-log-stats>div { display:grid; gap:4px; padding:10px 12px; border-radius:14px; background:#eef2f1; }
.wt-log-stats>div>span { color:#52676d; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.wt-log-stats b { display:flex; align-items:center; gap:5px; font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; }
.wt-spark { display:grid; place-items:center; width:20px; height:20px; flex:none; border-radius:50%; background:var(--field-dark); }
.wt-spark svg { width:12px; height:12px; fill:var(--field-gold); }
/* Values swap as the new spot lands: the earlier number, then the new one. */
.wt-swap { display:inline-grid; }
.wt-was, .wt-now { grid-area:1/1; font-style:normal; }
.wt-was { opacity:calc(1 - clamp(0, (var(--k-land) - .45) * 6, 1)); }
.wt-now { opacity:clamp(0, (var(--k-land) - .45) * 6, 1); }
.wt-log-search { display:flex; align-items:center; gap:8px; height:42px; margin-top:12px; padding:0 12px; border-radius:14px; background:#eef2f1; color:#6b7f84; font-size:14px; font-weight:500; }
.wt-log-chips { display:flex; gap:6px; margin-top:10px; }
.wt-log-chips span { padding:7px 12px; border-radius:999px; background:#eef2f1; color:#2f474d; font-size:13px; font-weight:700; white-space:nowrap; }
.wt-log-chips .wt-chip-on { background:var(--field-teal-deep); color:#fff; }
.wt-log-search svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.wt-log-list { margin-top:4px; }
.wt-log-day { display:flex; gap:5px; margin:14px 4px 8px; color:#52676d; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.wt-row { display:grid; grid-template-columns:88px minmax(0,1fr); gap:12px; padding:9px; border-radius:18px; background:#eef2f1; }
.wt-row + .wt-row, .wt-row + .wt-log-older { margin-top:8px; }
.wt-row-new { position:relative; z-index:1; background:var(--field-teal-tint); box-shadow:inset 0 0 0 2px var(--field-teal); opacity:min(1, calc(var(--k-land) * 2.5)); transform:translateY(calc((1 - var(--e-land)) * -18px)) scale(calc(.94 + var(--e-land) * .06)); }
.wt-log-older { transform:translateY(calc((1 - var(--e-land)) * -110px)); }
.wt-row-thumb { display:grid; place-items:center; height:80px; border-radius:12px; background:#1c2622; overflow:hidden; }
.wt-row-thumb img { width:64px; height:64px; transform:rotate(45deg); }
.wt-row-body { display:grid; gap:1px; min-width:0; align-content:center; }
.wt-row-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.wt-row-top b { font-size:17px; font-weight:800; }
.wt-points { padding:2px 9px; border-radius:999px; background:var(--field-gold); color:var(--field-dark); font-size:13px; font-weight:800; }
.wt-row-route { font-size:14px; font-weight:700; color:#2f474d; }
.wt-row-meta { overflow:hidden; color:#52676d; font-size:13px; white-space:nowrap; text-overflow:ellipsis; }
.wt-row-when { color:#6b7f84; font-size:12px; }

/* ------------------------------------------------------------------ */
/* Live presentation: a tall track and one sticky, scroll-scrubbed      */
/* phone. Only applied by the script when motion is allowed.            */
/* ------------------------------------------------------------------ */
.wt-is-live .wt-track { height:300vh; height:300svh; }
.wt-is-live .wt-stage {
  position:sticky; top:var(--wt-top, 88px); height:calc(100vh - var(--wt-top, 88px)); height:calc(100svh - var(--wt-top, 88px));
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto minmax(0,1fr); grid-template-areas:". live" "steps live" "meter live"; column-gap:48px;
}
.wt-is-live .wt-frame { display:none; }
.wt-is-live .wt-steps { grid-area:steps; display:grid; grid-template-columns:minmax(0,1fr); gap:6px; padding:0; }
.wt-is-live .wt-step { display:block; padding:18px 0 18px 24px; border-left:3px solid var(--marketing-line); transition:border-color .24s ease; }
.wt-is-live .wt-step[data-active] { border-left-color:var(--field-teal); }
.wt-is-live .wt-step-num { color:var(--marketing-muted); transition:color .24s ease; }
.wt-is-live .wt-step[data-active] .wt-step-num { color:var(--field-teal-deep); }
.wt-is-live .wt-step-copy h3 { color:var(--marketing-muted); font-size:clamp(24px,2.3vw,32px); transition:color .24s ease; }
.wt-is-live .wt-step[data-active] .wt-step-copy h3 { color:var(--marketing-ink); }
.wt-is-live .wt-step-copy p { font-size:17px; }
.wt-is-live .wt-step[data-active] .wt-step-copy p { color:var(--marketing-ink); }
.wt-is-live .wt-meter { grid-area:meter; display:flex; align-items:flex-start; gap:18px; padding-top:28px; color:var(--marketing-muted); font-size:14px; }
.wt-dashes { display:flex; gap:6px; padding-top:8px; }
.wt-dashes i { position:relative; width:32px; height:4px; overflow:hidden; border-radius:2px; background:var(--marketing-line); }
.wt-dashes i::after { content:""; position:absolute; inset:0; background:var(--field-teal-deep); transform:scaleX(var(--wt-fill, 0)); transform-origin:0 50%; }
.wt-meter-note { display:inline-grid; }
.wt-hint, .wt-meter-sample { grid-area:1/1; transition:opacity .3s ease; }
.wt-hint { display:inline-flex; gap:8px; }
.wt-hint[data-hidden] { opacity:0; }
.wt-meter-sample { opacity:0; white-space:nowrap; }
.wt-hint[data-hidden] + .wt-meter-sample { opacity:1; }
.wt-is-live .wt-live { grid-area:live; position:relative; display:flex; align-items:center; justify-content:center; min-height:0; padding:28px 0; isolation:isolate; }
.wt-is-live .wt-live::before { content:""; position:absolute; z-index:-1; left:50%; top:50%; width:min(640px,120%,100vw); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, #fff 0 30%, transparent 30.3% 46%, #a6d7d64d 46.2% 46.6%, transparent 46.8% 64%, #a6d7d633 64.2% 64.6%, transparent 64.8%), radial-gradient(circle, var(--field-teal-tint) 0 70%, transparent 70.5%); }
.wt-has-video .wt-live .wt-screen > :not([data-wt-video]) { visibility:hidden; }
.wt-live [data-wt-video] { position:absolute; inset:0; z-index:5; width:100%; height:100%; object-fit:cover; }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
@media (max-width:1100px) {
  .wt-frame { --wt-scale:.54; }
}
@media (max-width:900px) {
  .wt-intro { grid-template-columns:1fr; }
  .wt-steps { gap:20px; }
  .wt-frame { --wt-scale:.46; padding:28px 8px; }
  .wt-step-copy { grid-template-columns:1fr; }
  .wt-step-num { grid-row:auto; padding:0 0 6px; }
}
@media (max-width:767px) {
  .wt-intro { padding-top:72px; }
  .wt-lede { font-size:17px; }
  .wt-steps { grid-template-columns:1fr; gap:48px; padding:40px 0 72px; }
  .wt-frame { --wt-scale:.56; padding:28px 16px; }
  .wt-step-copy { grid-template-columns:auto minmax(0,1fr); }
  .wt-step-num { grid-row:span 2; padding:4px 0 0; }

  /* Live on phones: the stage sticks below the header; phone on top, the active caption below. */
  .wt-is-live .wt-track { height:290vh; height:290svh; }
  .wt-is-live .wt-stage { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto auto; grid-template-areas:"live" "meter" "steps"; column-gap:0; padding-bottom:max(16px, env(safe-area-inset-bottom)); }
  .wt-is-live .wt-live { padding:14px 0 4px; }
  .wt-is-live .wt-live::before { width:min(520px,100vw); }
  .wt-is-live .wt-meter { justify-content:space-between; gap:12px; padding:10px 0 4px; font-size:13px; }
  .wt-is-live .wt-steps { display:grid; gap:0; min-height:140px; }
  .wt-is-live .wt-step { grid-area:1/1; padding:6px 0 0; border:0; opacity:0; transform:translateY(8px); transition:opacity .24s ease, transform .24s ease; }
  .wt-is-live .wt-step[data-active] { opacity:1; transform:none; }
  .wt-is-live .wt-step-copy { column-gap:12px; }
  .wt-is-live .wt-step-num { color:var(--field-teal-deep); }
  .wt-is-live .wt-step-copy h3 { color:var(--marketing-ink); font-size:22px; }
  .wt-is-live .wt-step-copy p { margin-top:6px; color:var(--marketing-ink); font-size:16px; line-height:1.55; }
}
@media (max-width:359px) {
  .wt-frame { --wt-scale:.56; }
  .wt-intro h2 { font-size:clamp(40px,11.5vw,56px); }
}