:root {
    color-scheme: dark;

    --navy-900: #070A28;
    --navy-800: #0C1140;
    --navy-700: #141757;
    --indigo:   #2A27C4;
    --indigo-b: #3131DF;
    --blue:     #1D4BF9;
    --mint:     #45FFEC;
    --white:    #FFFFFF;
    --text:     #E6EBFF;
    --text-dim: #93A0D8;
    --text-faint:#5F6CA8;
    --hair:     rgba(144,160,255,.16);
    --hair-str: rgba(144,160,255,.30);
    --surface:  rgba(18,24,78,.62);
    --surface-2:rgba(10,14,52,.78);

    --display: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  *, *::before, *::after { box-sizing: inherit; }
  html { scroll-padding-top: env(safe-area-inset-top, 0px); }

  body {
    margin: 0;
    background:
      radial-gradient(1100px 620px at 12% -6%, rgba(42,39,196,.55), transparent 62%),
      radial-gradient(900px 560px at 92% 8%, rgba(29,75,249,.32), transparent 60%),
      var(--navy-900);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--display);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  .shell { max-width: 1420px; margin: 0 auto; padding: 18px 20px 48px; }

  /* ───────────────────────── masthead ───────────────────────── */

  .masthead {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hair);
  }
  .masthead img { height: 30px; width: auto; display: block; }
  .masthead .rule { width: 1px; height: 26px; background: var(--hair-str); }
  .masthead h1 {
    margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .005em;
  }
  .masthead h1 span { color: var(--mint); }
  .masthead .badge {
    margin-left: auto;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em;
    color: var(--text-dim);
    border: 1px solid var(--hair-str); border-radius: 100px;
    padding: 5px 13px; white-space: nowrap;
  }

  /* ───────────────────────── layout ───────────────────────── */

  .deck {
    display: grid;
    grid-template-columns: minmax(0,1fr) 302px;
    gap: 18px;
    margin-top: 18px;
  }
  .panels { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }

  @media (max-width: 1080px) {
    .deck { grid-template-columns: minmax(0,1fr); }
    .panels { grid-template-columns: minmax(0,1fr); }
  }

  /* ───────────────────────── viewer ───────────────────────── */

  .screen {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #03050F;
    border-radius: 6px;
    border: 1px solid var(--hair-str);
  }
  #stage { position: absolute; inset: 0 auto auto 0; width: 1280px; height: 720px; transform-origin: top left; }

  #backdrop {
    position: absolute; inset: 0;
    background:
      radial-gradient(760px 520px at 86% 86%, rgba(29,75,249,.5), transparent 62%),
      linear-gradient(118deg, var(--navy-800) 0%, var(--indigo) 58%, var(--blue) 100%);
    opacity: 0; transition: opacity .4s ease;
  }
  #backdrop[data-on="true"] { opacity: 1; }

  #content {
    position: absolute; inset: 0 auto auto 0;
    width: 1280px; height: 720px;
    transform-origin: top left;
    transition: transform .55s cubic-bezier(.22,.85,.22,1),
                box-shadow .55s ease, opacity .3s ease, border-radius .4s ease;
    overflow: hidden;
    background: #0B2418;
  }
  #content canvas { display: block; width: 1280px; height: 720px; }
  #content[data-hidden="true"] { opacity: 0; }

  .layer {
    position: absolute; display: block;
    opacity: 0;
    transition: opacity .42s ease, transform .55s cubic-bezier(.22,.85,.22,1);
    image-rendering: auto;
  }
  .layer[data-anim="right"]  { transform: translateX(34px); }
  .layer[data-anim="bottom"] { transform: translateY(34px); }
  .layer[data-anim="left"]   { transform: translateX(-34px); }
  .layer[data-anim="scale"]  { transform: scale(.9); transform-origin: center; }
  .layer.in { opacity: 1; transform: none; }
  .layer.boxed { border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.55); }

  /* ───────────────────────── transport ───────────────────────── */

  .transport {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 12px; padding: 12px 14px;
    background: var(--surface); border: 1px solid var(--hair); border-radius: 6px;
    backdrop-filter: blur(8px);
  }
  .tally {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
    color: var(--text-faint);
  }
  .tally::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%;
    background: rgba(147,160,216,.22);
  }
  .tally[data-on="true"] { color: var(--mint); }
  .tally[data-on="true"]::before { background: var(--mint); box-shadow: 0 0 11px var(--mint); }

  .now { font-size: 13px; font-weight: 700; }
  .now small { display: block; font-size: 10.5px; font-weight: 500; color: var(--text-faint); font-family: var(--mono); letter-spacing: .02em; }
  .count { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--mint); min-width: 62px; }
  .count[data-idle="true"] { color: var(--text-faint); }
  .grow { margin-left: auto; }

  button {
    font-family: var(--display); font-weight: 600; font-size: 12.5px;
    cursor: pointer; border-radius: 4px; color: var(--text);
    background: rgba(90,105,220,.16); border: 1px solid var(--hair-str);
    padding: 8px 14px;
    transition: background .15s ease, border-color .15s ease;
  }
  button:hover { background: rgba(90,105,220,.3); border-color: var(--mint); }
  button.key { background: var(--mint); border-color: var(--mint); color: #042B28; font-weight: 700; }
  button.key:hover { background: #7affee; }
  button:focus-visible, select:focus-visible, input:focus-visible, .fmt:focus-visible {
    outline: 2px solid var(--mint); outline-offset: 2px;
  }

  .switch { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-dim); cursor: pointer; }
  .switch input { accent-color: var(--mint); width: 15px; height: 15px; }

  .dur { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); }
  .dur input[type="range"] { width: 104px; accent-color: var(--mint); }
  .dur b { font-family: var(--mono); color: var(--text); font-weight: 700; min-width: 34px; }

  /* ───────────────────────── format rail ───────────────────────── */

  .rail { display: flex; flex-direction: column; gap: 7px; }
  .rail .grp {
    font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
    color: var(--text-faint); margin: 10px 0 2px 2px;
  }
  .rail .grp:first-child { margin-top: 0; }

  .fmt {
    display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
    padding: 9px 11px;
    background: var(--surface-2); border: 1px solid var(--hair); border-radius: 5px;
    cursor: pointer; color: var(--text);
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
  }
  .fmt:hover { border-color: var(--hair-str); background: rgba(24,32,96,.8); }
  .fmt[aria-pressed="true"] {
    border-color: var(--mint);
    background: linear-gradient(90deg, rgba(69,255,236,.14), rgba(69,255,236,.03));
  }
  .fmt svg { flex: 0 0 auto; display: block; border-radius: 2px; }
  .fmt .t { min-width: 0; }
  .fmt .t b { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
  .fmt .t span {
    display: block; font-family: var(--mono); font-size: 10px; color: var(--text-faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ───────────────────────── panels ───────────────────────── */

  .panel {
    background: var(--surface); border: 1px solid var(--hair); border-radius: 6px;
    padding: 15px 16px 17px; min-width: 0;
  }
  .panel h2 {
    margin: 0 0 3px; font-size: 12.5px; font-weight: 700;
  }
  .panel .sub { margin: 0 0 13px; font-size: 11.5px; color: var(--text-faint); line-height: 1.45; }

  dl.spec { margin: 0; display: grid; grid-template-columns: 136px minmax(0,1fr); gap: 7px 14px; font-size: 12px; }
  dl.spec dt { color: var(--text-faint); font-family: var(--mono); font-size: 10.5px; padding-top: 1px; }
  dl.spec dd { margin: 0; font-family: var(--mono); font-size: 11.5px; color: var(--text); overflow-wrap: anywhere; }
  dl.spec dd em { font-style: normal; color: var(--mint); }

  pre.sig {
    margin: 0; padding: 11px 12px;
    background: #04061C; border: 1px solid var(--hair); border-radius: 4px;
    font-family: var(--mono); font-size: 10.5px; line-height: 1.75; color: var(--text-dim);
    overflow-x: auto; white-space: pre;
  }
  pre.sig .tag { color: var(--mint); }
  pre.sig .att { color: #9FB4FF; }
  .sig-note { margin: 11px 0 0; font-size: 11.5px; color: var(--text-dim); line-height: 1.5; }
  .sig-note b { color: var(--text); font-weight: 700; }

  #log, .logbox {
    height: 150px; overflow-y: auto; margin: 0;
    background: #04061C; border: 1px solid var(--hair); border-radius: 4px;
    padding: 9px 11px;
    font-family: var(--mono); font-size: 10.5px; line-height: 1.8;
  }
  #log div, .logbox div { white-space: pre-wrap; overflow-wrap: anywhere; }
  #log .t, .logbox .t { color: var(--text-faint); }
  #log .s-sig .m, .logbox .s-sig .m, .logbox .s-net .m { color: var(--mint); }
  #log .s-pod .m, .logbox .s-pod .m { color: #9FB4FF; }
  #log .s-app .m, .logbox .s-app .m { color: var(--text-dim); }

  footer {
    margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--hair);
    font-size: 11px; color: var(--text-faint); line-height: 1.6;
  }

  @media (prefers-reduced-motion: reduce) {
    #content, .layer, #backdrop { transition-duration: 1ms !important; }
  }
  /* ═══════════════════════════════════════════════════════════════════
   * Portal: tabs and panes
   * ═════════════════════════════════════════════════════════════════ */

  .tabs {
    display: flex; gap: 6px; margin: 14px 0 0;
    border-bottom: 1px solid var(--hair);
    overflow-x: auto;
  }
  .tabs button {
    display: flex; flex-direction: column; gap: 1px;
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    border-radius: 0; padding: 9px 16px 11px; text-align: left; white-space: nowrap;
  }
  .tabs button b { font-size: 13px; font-weight: 700; color: var(--text-dim); }
  .tabs button span { font-family: var(--mono); font-size: 10px; color: var(--text-faint); }
  .tabs button:hover { background: rgba(90,105,220,.12); }
  .tabs button[aria-selected="true"] { border-bottom-color: var(--mint); }
  .tabs button[aria-selected="true"] b { color: var(--text); }
  .tabs button[aria-selected="true"] span { color: var(--mint); }

  [role="tabpanel"][hidden] { display: none; }
  .panel.wide { grid-column: 1 / -1; }

  /* ═══════════════════════════════════════════════════════════════════
   * Surface shell
   * ═════════════════════════════════════════════════════════════════ */

  .deck-mobile { grid-template-columns: 418px minmax(0,1fr); }
  .deck-mobile .rail {
    display: grid; align-content: start;
    grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  }
  .deck-mobile .rail .grp { grid-column: 1 / -1; }

  .surface-fit { position: relative; width: 100%; overflow: hidden; }
  .surface-stage { position: absolute; top: 0; left: 0; transform-origin: top left; }

  pre.sig .kw  { color: #9FB4FF; }
  pre.sig .str { color: var(--mint); }
  pre.sig .cmt { color: var(--text-faint); font-style: italic; }

  @media (max-width: 860px) {
    .deck-mobile { grid-template-columns: minmax(0,1fr); }
  }

  /* ═══════════════════════════════════════════════════════════════════
   * AWG creatives
   * ═════════════════════════════════════════════════════════════════ */

  .cr {
    position: relative; overflow: hidden; flex: 0 0 auto;
    background: linear-gradient(118deg, #0C1140 0%, #2A27C4 58%, #1D4BF9 100%);
    color: #fff; font-family: var(--display);
    opacity: 0; transform: translateY(8px);
    transition: opacity .32s ease, transform .32s cubic-bezier(.22,.85,.22,1);
  }
  .cr.in { opacity: 1; transform: none; }
  .cr-globe { position: absolute; right: -14%; bottom: -34%; opacity: .9; pointer-events: none; }
  .cr-strip .cr-globe { right: -4%; bottom: -120%; opacity: .75; }
  .cr-tall .cr-globe  { right: -28%; bottom: -12%; }
  .cr-full .cr-globe  { right: -22%; bottom: -14%; }
  .cr-art { position: relative; width: 100%; height: 100%; overflow: hidden; }
  .cr-art .cr-globe { right: -10%; bottom: -46%; }

  .cr-pad { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; }
  .cr-row { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; }
  .cr-rule { width: 1px; align-self: stretch; margin: 22% 0; background: rgba(255,255,255,.3); }

  .cr-logo { display: block; object-fit: contain; }
  .cr-head { margin-top: .5em; font-weight: 800; letter-spacing: -.01em; }
  .cr-head span { display: block; }
  .cr-head .hi { color: var(--mint); }
  .cr-kick { margin-top: .7em; font-weight: 600; color: #BFD2FF; letter-spacing: .06em; }
  .cr-strip-txt { font-weight: 600; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cr-strip-txt b { color: var(--mint); font-weight: 800; }
  .cr-cta {
    display: inline-block; background: var(--mint); color: #042B28;
    font-weight: 700; border-radius: 100px; white-space: nowrap;
  }
  .cr-row .cr-cta { margin-left: auto; }
  .cr-ad {
    position: absolute; z-index: 3; top: 4px; right: 4px;
    font-family: var(--mono); font-size: 8px; letter-spacing: .06em;
    color: rgba(255,255,255,.82); background: rgba(4,8,30,.45);
    border: 1px solid rgba(255,255,255,.22); border-radius: 2px; padding: 1px 4px;
  }

  /* ═══════════════════════════════════════════════════════════════════
   * Native cards
   * ═════════════════════════════════════════════════════════════════ */

  .nat {
    position: relative; background: #fff; color: #11161F;
    opacity: 0; transform: translateY(8px);
    transition: opacity .32s ease, transform .32s cubic-bezier(.22,.85,.22,1);
  }
  .nat.in { opacity: 1; transform: none; }
  .nat-head { display: flex; align-items: center; gap: 7px; }
  .nat-icon { width: 22px; height: 22px; border-radius: 5px; display: block; }
  .nat-adv { font-size: 12px; font-weight: 700; }
  .nat-ad {
    font-size: 9px; font-weight: 700; letter-spacing: .06em;
    background: #FFE08A; color: #4A3200; border-radius: 2px; padding: 1px 5px;
  }
  .nat-title { margin: 9px 0 10px; font-size: 16px; line-height: 1.26; font-weight: 700; }
  .nat-media .cr { opacity: 1; transform: none; }
  .nat-body { margin: 10px 0 12px; font-size: 13px; line-height: 1.45; color: #4C5566; }
  .nat-cta {
    display: inline-block; font-size: 12px; font-weight: 700;
    background: #11161F; color: #fff; border-radius: 100px; padding: 8px 16px;
  }
  .nat-mob { padding: 14px 12px; border-top: 1px solid #E6E9EF; border-bottom: 1px solid #E6E9EF; }
  .nat-web { padding: 18px 20px; border: 1px solid #E2DED6; background: #FBFAF7; }
  .nat-web .nat-title { font-family: Georgia, "Times New Roman", serif; font-size: 23px; }
  .nat-web .nat-body { font-family: Georgia, "Times New Roman", serif; font-size: 15px; }

  /* ═══════════════════════════════════════════════════════════════════
   * Full-screen formats
   * ═════════════════════════════════════════════════════════════════ */

  .fs {
    position: relative; overflow: hidden; background: #060A22;
    opacity: 0; transition: opacity .3s ease;
  }
  .fs.in { opacity: 1; }
  .fs-art { opacity: 1 !important; transform: none !important; }
  .fs-ad {
    position: absolute; top: 14px; left: 14px; z-index: 4;
    font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
    color: rgba(255,255,255,.9); background: rgba(4,8,30,.5);
    border: 1px solid rgba(255,255,255,.3); border-radius: 3px; padding: 2px 7px;
  }
  .fs-close {
    position: absolute; top: 10px; right: 10px; z-index: 4;
    width: 30px; height: 30px; padding: 0; line-height: 1;
    font-size: 19px; border-radius: 50%;
    background: rgba(4,8,30,.55); border: 1px solid rgba(255,255,255,.3); color: #fff;
  }
  .fs-bar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 4;
    display: flex; align-items: center; gap: 8px;
    padding: 13px 52px 13px 16px;
    background: linear-gradient(180deg, rgba(3,6,20,.82), transparent);
    font-size: 12px; font-weight: 600; color: #fff;
  }
  .fs-bar .fs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
  .fs-reward {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
    display: flex; flex-direction: column; gap: 3px;
    padding: 16px 18px 22px;
    background: linear-gradient(0deg, rgba(3,6,20,.9), transparent);
    color: #fff;
  }
  .fs-reward b { font-size: 15px; }
  .fs-reward span { font-size: 12px; color: #BFD2FF; }
  .fs-appopen {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 20px 0 30px;
    background: linear-gradient(0deg, rgba(3,6,20,.92), transparent);
    color: #fff;
  }
  .fs-appopen img { width: 34px; height: 34px; border-radius: 9px; }
  .fs-appopen b { font-size: 13px; }
  .fs-load { width: 74px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
  .fs-load::after {
    content: ""; display: block; width: 38%; height: 100%; background: var(--mint);
    animation: fsload 1.3s ease-in-out infinite;
  }
  @keyframes fsload { 0% { margin-left: -38%; } 100% { margin-left: 100%; } }

  /* ═══════════════════════════════════════════════════════════════════
   * Mobile surface
   * ═════════════════════════════════════════════════════════════════ */

  .phone {
    width: 418px; height: 872px; padding: 14px; position: relative;
    background: #0A0D22; border-radius: 46px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 24px 60px rgba(0,0,0,.55);
  }
  .phone-notch {
    position: absolute; z-index: 7; top: 14px; left: 50%; transform: translateX(-50%);
    width: 116px; height: 26px; background: #0A0D22; border-radius: 0 0 16px 16px;
  }
  .phone-screen {
    position: relative; width: 390px; height: 844px; overflow: hidden;
    border-radius: 34px; background: #fff; color: #11161F;
    display: flex; flex-direction: column;
    font-size: 14px;
  }

  .mob-status {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    padding: 13px 24px 7px; font-size: 12px; font-weight: 700;
  }
  .mob-bars { width: 42px; height: 10px; background:
    linear-gradient(90deg, #11161F 0 10px, transparent 10px 13px, #11161F 13px 23px,
                    transparent 23px 26px, #11161F 26px 42px); border-radius: 2px; }

  .mob-head {
    flex: 0 0 auto; display: flex; align-items: baseline; gap: 9px;
    padding: 6px 16px 10px; border-bottom: 1px solid #E6E9EF;
  }
  .mob-head b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
  .mob-head span { font-size: 12px; font-weight: 700; color: #D8352A; letter-spacing: .06em; }

  .mob-scroll { flex: 1 1 auto; overflow-y: auto; scrollbar-width: none; }
  .mob-scroll::-webkit-scrollbar { display: none; }

  .mob-kick { display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: #D8352A; }
  .mob-meta { display: block; margin-top: 6px; font-size: 11px; color: #8A93A3; }

  .mob-lead { padding: 0 0 16px; border-bottom: 8px solid #F1F3F7; }
  .mob-hero { height: 190px; background: linear-gradient(142deg, #2B6E46, #19452C 60%, #123320); }
  .mob-lead .mob-kick, .mob-lead h2, .mob-lead .mob-meta { padding: 0 16px; }
  .mob-lead .mob-kick { padding-top: 13px; }
  .mob-lead h2 { margin: 6px 0 0; font-size: 21px; line-height: 1.22; font-weight: 800; letter-spacing: -.015em; }

  .mob-card { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #EDEFF4; }
  .mob-thumb { flex: 0 0 86px; height: 72px; border-radius: 6px; }
  .mob-thumb.t0 { background: linear-gradient(135deg, #3A4A6B, #1E2740); }
  .mob-thumb.t1 { background: linear-gradient(135deg, #6B4A3A, #40281E); }
  .mob-thumb.t2 { background: linear-gradient(135deg, #2B6E46, #19452C); }
  .mob-thumb.t3 { background: linear-gradient(135deg, #5A3A6B, #331E40); }
  .mob-txt { min-width: 0; }
  .mob-card h3 { margin: 5px 0 0; font-size: 14px; line-height: 1.28; font-weight: 700; }
  .mob-end { padding: 26px 16px 40px; text-align: center; font-size: 12px; color: #A8B0BE; }

  .mob-slot { min-height: 0; }
  .mob-slot.filled { display: flex; justify-content: center; padding: 14px 0; background: #F1F3F7; }
  .mob-slot .nat { background: #fff; }

  .mob-anchor { flex: 0 0 auto; }
  .mob-anchor.filled { display: flex; justify-content: center; padding: 6px 0; background: #F1F3F7; border-top: 1px solid #E6E9EF; }

  .mob-tabs {
    flex: 0 0 auto; display: flex; padding: 9px 0 22px;
    border-top: 1px solid #E6E9EF; background: #fff;
  }
  .mob-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .mob-tab i { width: 18px; height: 18px; border-radius: 5px; background: #C3C9D4; }
  .mob-tab em { font-style: normal; font-size: 10px; font-weight: 700; color: #8A93A3; }
  .mob-tab.on i { background: #D8352A; }
  .mob-tab.on em { color: #11161F; }

  .mob-screen { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
  .mob-screen.filled { pointer-events: auto; }

  /* ═══════════════════════════════════════════════════════════════════
   * Display surface
   * ═════════════════════════════════════════════════════════════════ */

  .brow { width: 1440px; height: 944px; position: relative; background: #fff; }
  .brow-bar {
    height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 16px;
    background: #23262E; border-bottom: 1px solid #000;
  }
  .brow-bar .dot { width: 11px; height: 11px; border-radius: 50%; }
  .brow-bar .dot.r { background: #FF5F57; }
  .brow-bar .dot.y { background: #FEBC2E; }
  .brow-bar .dot.g { background: #28C840; }
  .brow-url {
    margin-left: 16px; flex: 1; max-width: 560px;
    background: #15171D; border-radius: 100px; padding: 5px 14px;
    font-family: var(--mono); font-size: 11px; color: #A8B0BE;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .brow-view { position: relative; width: 1440px; height: 900px; overflow: hidden; background: #ECEBE7; }
  .pg-scroll { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; }
  .pg-scroll::-webkit-scrollbar { display: none; }

  .page {
    position: relative; z-index: 2;
    width: 1040px; margin: 0 auto; min-height: 900px;
    background: #fff; color: #15181E; padding: 0 30px 40px;
    font-family: Georgia, "Times New Roman", serif;
  }
  .skin-on .page { box-shadow: 0 0 44px rgba(0,0,0,.35); }

  .pg-skin { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .4s ease; overflow: hidden; }
  .pg-skin.filled { opacity: 1; }
  .skin-art {
    position: absolute; inset: 0;
    background: linear-gradient(118deg, #0C1140 0%, #2A27C4 55%, #1D4BF9 100%);
    opacity: 0; transition: opacity .4s ease;
  }
  .skin-art.in { opacity: 1; }
  .skin-art svg { position: absolute; }
  .skin-art svg:first-child { left: -210px; top: 120px; }
  .skin-art svg:last-child { right: -160px; bottom: -60px; }

  .pg-mast {
    display: flex; align-items: baseline; justify-content: center; gap: 14px;
    padding: 22px 0 12px; border-bottom: 3px double #15181E;
  }
  .pg-brand b { font-size: 46px; font-weight: 800; letter-spacing: .12em; font-family: var(--display); }
  .pg-brand span { font-size: 17px; font-style: italic; color: #6A6F7A; margin-left: 8px; }
  .pg-date { position: absolute; right: 30px; font-size: 12px; color: #6A6F7A; font-family: var(--display); }

  .pg-nav {
    display: flex; gap: 26px; justify-content: center;
    padding: 11px 0; border-bottom: 1px solid #D8D4CC;
    font-family: var(--display); font-size: 13px; font-weight: 600; color: #4A505C;
  }
  .pg-nav .on { color: #B3261E; border-bottom: 2px solid #B3261E; padding-bottom: 2px; }

  .pg-cols { display: grid; grid-template-columns: 640px 300px; gap: 40px; padding-top: 26px; }
  .pg-cols main { min-width: 0; }
  .pg-kick { display: block; font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #B3261E; }
  .pg-cols h1 { margin: 10px 0 0; font-size: 42px; line-height: 1.1; font-weight: 400; letter-spacing: -.01em; }
  .pg-stand { margin: 14px 0 0; font-size: 19px; line-height: 1.45; color: #3C434F; }
  .pg-byline { display: block; margin-top: 12px; font-family: var(--display); font-size: 12px; color: #6A6F7A; }
  .pg-hero { height: 330px; margin: 20px 0 22px; background: linear-gradient(142deg, #2B6E46, #19452C 58%, #0F2C1C); }
  .pg-cols main p { margin: 0 0 17px; font-size: 17px; line-height: 1.62; }
  .pg-more { font-family: var(--display); font-size: 13px; font-weight: 700; color: #B3261E; padding: 10px 0 30px; }

  .pg-cols aside { min-width: 0; }
  .pg-most { border-top: 3px solid #15181E; padding-top: 12px; margin-top: 26px; }
  .pg-most h4 { margin: 0 0 10px; font-family: var(--display); font-size: 13px; letter-spacing: .08em; }
  .pg-mr { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid #E4E0D8; }
  .pg-mr b { font-size: 21px; color: #C9C3B7; line-height: 1; }
  .pg-mr span { font-size: 14px; line-height: 1.35; }

  .pg-foot {
    margin-top: 34px; padding-top: 16px; border-top: 1px solid #D8D4CC;
    font-family: var(--display); font-size: 12px; color: #6A6F7A;
  }

  .pg-slot { min-height: 0; }
  .pg-slot.filled { display: flex; justify-content: center; }
  .pg-top.filled { padding: 18px 0 4px; }
  .pg-mid.filled { padding: 8px 0 22px; }
  .pg-side.filled { padding: 0 0 8px; }

  .pg-rail { position: absolute; z-index: 3; top: 130px; }
  .pg-rail.l { left: 20px; }
  .pg-rail.r { right: 20px; }

  .pg-anchor { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; }
  .pg-anchor.filled {
    display: flex; justify-content: center; padding: 8px 0;
    background: rgba(248,248,246,.97); border-top: 1px solid #D8D4CC;
    box-shadow: 0 -8px 24px rgba(0,0,0,.12);
  }
  .pg-screen { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
  .pg-screen.filled { pointer-events: auto; background: rgba(6,10,34,.6); display: flex; align-items: center; justify-content: center; }

  /* slot outlines */
  .show-slots [data-slot] { outline: 1px dashed rgba(69,255,236,.65); outline-offset: -1px; }
  .show-slots .mob-slot, .show-slots .mob-anchor,
  .show-slots .pg-slot, .show-slots .pg-rail { min-height: 22px; background: rgba(69,255,236,.08); }
  .show-slots .pg-rail { min-width: 22px; }

  /* the reward bar shares the top edge with the Ad badge */
  .fs--reward .fs-bar { padding-left: 54px; }

  /* ═══════════════════════════════════════════════════════════════════
   * POS terminal
   * ═════════════════════════════════════════════════════════════════ */

  .statechip {
    font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
    border-radius: 100px; padding: 4px 11px; white-space: nowrap;
  }
  .statechip[data-mode="ads"] { color: var(--mint); border: 1px solid rgba(69,255,236,.5); background: rgba(69,255,236,.1); }
  .statechip[data-mode="txn"] { color: #FFB9A8; border: 1px solid rgba(255,120,90,.45); background: rgba(255,120,90,.1); }

  .hintline { margin: 9px 2px 0; font-size: 11.5px; color: var(--text-faint); }

  .pos-body {
    position: relative; border-radius: 34px;
    background: linear-gradient(170deg, #F4F5F8 0%, #DCDEE6 58%, #C6C9D4 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 26px 60px rgba(0,0,0,.55);
  }
  .pos-cam {
    position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
    width: 12px; height: 12px; border-radius: 50%;
    background: #2A2E3C; box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
  }
  .pos-screen {
    position: absolute; overflow: hidden; background: #000;
    border-radius: 6px; cursor: pointer;
    box-shadow: 0 0 0 5px #1A1D28, inset 0 0 0 1px rgba(0,0,0,.6);
  }
  .pos-screen:focus-visible { outline: 3px solid var(--mint); outline-offset: 7px; }
  .pos-screen > * { position: absolute; inset: 0; }
  .pos-screen .cr { position: absolute; }

  .pos-chin {
    position: absolute; left: 0; right: 0; bottom: 0; height: 168px;
    display: flex; align-items: center; gap: 28px; padding: 0 64px;
  }
  .pos-devmark { display: flex; align-items: center; gap: 11px; color: #53585F; }
  .pos-devglyph { display: block; }
  .pos-devword {
    font-family: var(--display); font-weight: 500; font-size: 48px;
    letter-spacing: -.005em; line-height: 1;
  }
  .pos-slot {
    margin-left: auto; width: 300px; height: 16px; border-radius: 8px;
    background: #1A1D28; box-shadow: inset 0 2px 5px rgba(0,0,0,.7);
  }
  .pos-nfc { display: flex; opacity: .9; }

  /* --- POS screens (light, like a real terminal) --------------------- */

  .pos-ui {
    background: #F7F8FB; color: #141824;
    font-family: var(--display); opacity: 0;
    transition: opacity .18s ease;
    display: flex; flex-direction: column;
  }
  .pos-ui.in { opacity: 1; }
  .pos-screen .cr { opacity: 0; transition: opacity .3s ease; }
  .pos-screen .cr.in { opacity: 1; transform: none; }

  .pos-wake { align-items: center; justify-content: center; gap: 18px; background: #fff; }
  .pos-wake b { font-size: 46px; font-weight: 700; }
  .pos-wake span { font-size: 24px; color: #6A7084; }
  .pos-ripple {
    width: 150px; height: 150px; border-radius: 50%;
    border: 5px solid rgba(49,49,223,.35);
    animation: posripple 1.1s ease-out infinite;
  }
  @keyframes posripple {
    0%   { transform: scale(.55); border-color: rgba(49,49,223,.6); }
    100% { transform: scale(1.25); border-color: rgba(49,49,223,0); }
  }

  .pos-keypad { padding: 44px 56px; gap: 30px; }
  .pos-amt {
    display: flex; align-items: baseline; gap: 16px;
    border-bottom: 3px solid #141824; padding-bottom: 18px;
  }
  .pos-cur { font-size: 34px; color: #6A7084; font-weight: 600; }
  .pos-amt b { font-size: 74px; font-weight: 700; letter-spacing: -.02em; }
  .pos-padrow { display: flex; gap: 30px; flex: 1; }
  .pos-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .pos-key {
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #DCDFE8; border-radius: 10px;
    font-size: 40px; font-weight: 600;
  }
  .pos-side { width: 320px; display: flex; flex-direction: column; gap: 14px; }
  .pos-confirm {
    flex: 1; display: flex; align-items: center; justify-content: center;
    background: #1FA463; color: #fff; border-radius: 10px; font-size: 38px; font-weight: 700;
  }
  .pos-cancel {
    height: 100px; display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #DCDFE8; color: #6A7084;
    border-radius: 10px; font-size: 30px; font-weight: 600;
  }

  .pos-tap { align-items: center; justify-content: center; gap: 10px; background: #fff; }
  .pos-label { font-size: 28px; color: #6A7084; }
  .pos-total { font-size: 86px; font-weight: 700; letter-spacing: -.02em; }
  .pos-wave { display: flex; margin: 26px 0 10px; }
  .pos-hint { font-size: 30px; color: #3C4354; }
  .pos-nets { display: flex; gap: 16px; margin-top: 30px; }
  .pos-nets span {
    font-size: 19px; font-weight: 700; color: #6A7084;
    border: 1px solid #DCDFE8; border-radius: 5px; padding: 7px 16px; background: #fff;
  }

  .pos-proc { align-items: center; justify-content: center; gap: 24px; background: #fff; }
  .pos-proc b { font-size: 48px; font-weight: 700; }
  .pos-proc span { font-size: 26px; color: #6A7084; }
  .pos-spin {
    width: 104px; height: 104px; border-radius: 50%;
    border: 9px solid #E3E6EE; border-top-color: #3131DF;
    animation: posspin 1s linear infinite;
  }
  @keyframes posspin { to { transform: rotate(360deg); } }

  .pos-ok { flex-direction: row; background: #1FA463; }
  .pos-okleft { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 0 70px; color: #fff; }
  .pos-oklab { font-size: 30px; opacity: .9; }
  .pos-okleft b { font-size: 68px; font-weight: 700; letter-spacing: -.02em; }
  .pos-okauth { font-family: var(--mono); font-size: 20px; opacity: .82; }
  .pos-okright { width: 420px; display: flex; flex-direction: column; background: #fff; }

  .pos-rtick {
    width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.26);
    position: relative; margin-bottom: 6px;
  }
  .pos-rtick::after {
    content: ""; position: absolute; left: 24px; top: 18px;
    width: 20px; height: 36px; border: solid #fff; border-width: 0 6px 6px 0;
    transform: rotate(45deg);
  }

  .pos-rbtn {
    flex: 1; display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 600; color: #141824;
    border-bottom: 1px solid #E3E6EE;
  }
  .pos-rbtn.ghost { color: #8A90A2; }
  .pos-rbtn:last-child { border-bottom: 0; }

  .pos-split { display: flex; background: #fff; }
  .pos-split .cr { position: relative; flex: 0 0 auto; }
  .pos-receipt {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    padding-top: 54px; color: #141824; background: #fff;
  }
  .pos-receipt .pos-rtick { background: #1FA463; }
  .pos-receipt b { font-size: 44px; font-weight: 700; margin-top: 10px; }
  .pos-rsub { font-size: 25px; color: #6A7084; margin: 8px 0 26px; }
  .pos-receipt .pos-rbtn {
    flex: 0 0 auto; width: 100%; padding: 26px 0;
    border-top: 1px solid #E3E6EE; border-bottom: 0;
  }

  /* --- video + QR creative chrome ------------------------------------ */

  .cr-vid { justify-content: center; }
  .cr-vprog {
    position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
    height: 6px; background: rgba(255,255,255,.18);
  }
  .cr-vprog i {
    display: block; height: 100%; width: 0; background: var(--mint);
    animation: crprog 15s linear infinite;
  }
  @keyframes crprog { to { width: 100%; } }
  .cr-muted {
    position: absolute; z-index: 3; right: 18px; bottom: 20px;
    color: rgba(255,255,255,.72); display: flex;
  }

  .cr-qr { position: relative; z-index: 2; display: flex; height: 100%; }
  .cr-qr-copy { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
  .cr-qr-head { margin-top: .7em; font-weight: 600; color: #BFD2FF; }
  .cr-qr-offer { margin-top: .12em; font-weight: 800; line-height: 1; color: var(--mint); letter-spacing: -.02em; }
  .cr-qr-offer span { display: block; margin-top: .18em; color: #fff; font-weight: 700; letter-spacing: -.01em; }
  .cr-qr-act { margin-top: .9em; font-weight: 600; color: #fff; }
  .cr-qr-legal { margin-top: 1.4em; color: rgba(255,255,255,.62); max-width: 42ch; line-height: 1.45; }
  .cr-qr-panel {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; background: #fff; border-radius: 14px; margin: 6%;
    box-shadow: 0 18px 50px rgba(0,0,0,.4);
  }
  .cr-qr-code { display: block; }
  .cr-qr-cap { color: #2A2F42; font-weight: 600; text-align: center; max-width: 22ch; line-height: 1.3; }

  /* --- switch ------------------------------------------------------- */

  .toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
  .toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
  .toggle .track {
    position: relative; width: 38px; height: 21px; flex: 0 0 auto;
    border-radius: 100px; background: rgba(90,105,220,.26);
    border: 1px solid var(--hair-str);
    transition: background .18s ease, border-color .18s ease;
  }
  .toggle .knob {
    position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
    border-radius: 50%; background: var(--text-faint);
    transition: transform .18s cubic-bezier(.3,.8,.3,1), background .18s ease;
  }
  .toggle .tlabel { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
  .toggle input:checked ~ .track { background: rgba(69,255,236,.3); border-color: var(--mint); }
  .toggle input:checked ~ .track .knob { transform: translateX(17px); background: var(--mint); }
  .toggle input:checked ~ .tlabel { color: var(--text); }
  .toggle input:focus-visible ~ .track { outline: 2px solid var(--mint); outline-offset: 2px; }
  .toggle:hover .track { border-color: var(--mint); }


  /* ═══════════════════════════════════════════════════════════════════
   * Demo / Tech specs split
   *
   * The demo is what gets presented, so everything explanatory lives below
   * it behind a disclosure that stays shut until somebody wants detail.
   * ═════════════════════════════════════════════════════════════════ */

  details.specs { margin-top: 22px; border-top: 1px solid var(--hair); }

  details.specs > summary {
    display: flex; align-items: center; gap: 11px;
    padding: 14px 4px; cursor: pointer; list-style: none;
    color: var(--text-dim);
  }
  details.specs > summary::-webkit-details-marker { display: none; }
  details.specs > summary:hover { color: var(--text); }
  details.specs > summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; border-radius: 3px; }
  details.specs > summary b { font-size: 12.5px; font-weight: 700; }
  details.specs > summary .shint {
    font-family: var(--mono); font-size: 10.5px; color: var(--text-faint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  details.specs > summary .chev {
    flex: 0 0 auto; width: 8px; height: 8px; margin-left: 2px;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
    transform: rotate(-45deg) translate(-1px, -1px);
    transition: transform .18s ease;
  }
  details.specs[open] > summary .chev { transform: rotate(45deg) translate(-1px, -1px); }

  .specs-body { padding-bottom: 4px; }
  .specs-body > .panels:first-child { margin-top: 0; }
  .specs-body footer { margin-top: 20px; }

  @media (prefers-reduced-motion: reduce) {
    details.specs > summary .chev { transition: none; }
  }

  /* ═══════════════════════════════════════════════════════════════════
   * NFC Ad — scene
   * ═════════════════════════════════════════════════════════════════ */

  .nfc-scene { position: relative; }
  .nfc-prop {
    position: absolute; left: 0; top: 0; width: 540px; height: 900px;
    display: flex; align-items: center; justify-content: center;
  }
  .nfc-phone {
    position: absolute;
    transition: transform .62s cubic-bezier(.3,.85,.3,1);
    will-change: transform;
  }
  /* The surface is 380px wide and centred in the 540px prop column, so it
   * ends at x=460. The phone starts at 572 — travelling 92px brings its edge
   * to 480, close enough to read as contact without covering the offer. */
  .nfc-scene[data-act="reach"]   .nfc-phone { transform: translateX(-44px) rotate(-4deg); }
  .nfc-scene[data-act="contact"] .nfc-phone { transform: translateX(-92px) rotate(-6deg); }
  .nfc-scene[data-act="open"]    .nfc-phone { transform: translateX(-30px) rotate(-2deg); }

  .nfc-spark {
    position: absolute; left: 408px; top: 392px; z-index: 4;
    color: var(--mint); opacity: 0; pointer-events: none;
    transform: scale(.6);
    transition: opacity .2s ease, transform .3s ease;
  }
  .nfc-scene[data-act="contact"] .nfc-spark,
  .nfc-scene[data-act="open"]    .nfc-spark { opacity: 1; transform: scale(1); }
  .nfc-spark .nfc-wave path { opacity: .25; }
  .nfc-scene[data-act="contact"] .nfc-spark path { animation: nfcping 1s ease-out infinite; }
  .nfc-spark .w1 { animation-delay: 0s !important; }
  .nfc-spark .w2 { animation-delay: .12s !important; }
  .nfc-spark .w3 { animation-delay: .24s !important; }
  .nfc-spark .w4 { animation-delay: .36s !important; }
  @keyframes nfcping { 0%,100% { opacity: .2; } 40% { opacity: 1; } }

  /* --- advertiser console ------------------------------------------- */

  .cons {
    width: 360px; border-radius: 8px; overflow: hidden;
    background: var(--surface-2); border: 1px solid var(--hair-str);
    box-shadow: 0 24px 50px rgba(0,0,0,.5);
  }
  .cons-head {
    padding: 13px 18px; font-size: 13px; font-weight: 700;
    background: rgba(90,105,220,.2); border-bottom: 1px solid var(--hair);
  }
  .cons-body { padding: 16px 18px 20px; }
  .cons-row {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 8px 0; border-bottom: 1px solid var(--hair);
    font-size: 12px; color: var(--text-faint);
  }
  .cons-row b { color: var(--text); font-family: var(--mono); font-size: 11.5px; }
  .cons-msg {
    margin: 16px 0; padding: 13px 14px; border-radius: 6px;
    background: rgba(4,8,30,.6); border: 1px solid var(--hair);
    display: flex; flex-direction: column; gap: 4px;
  }
  .cons-msg b { font-size: 13px; }
  .cons-msg span { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
  .cons-send {
    display: block; text-align: center; padding: 12px 0; border-radius: 6px;
    background: rgba(69,255,236,.16); border: 1px solid var(--mint);
    color: var(--mint); font-size: 13px; font-weight: 700;
  }
  .cons-send.fire { animation: consfire .5s ease-out 2; }
  @keyframes consfire {
    0% { background: rgba(69,255,236,.16); }
    40% { background: var(--mint); color: #042B28; box-shadow: 0 0 28px rgba(69,255,236,.6); }
    100% { background: rgba(69,255,236,.16); }
  }

  /* --- geofence map -------------------------------------------------- */

  .geomap {
    position: relative; width: 400px; height: 400px; border-radius: 10px;
    background: #10163A; border: 1px solid var(--hair-str); overflow: hidden;
    box-shadow: 0 24px 50px rgba(0,0,0,.5);
  }
  .geo-grid {
    position: absolute; inset: 0; opacity: .5;
    background-image:
      linear-gradient(rgba(144,160,255,.12) 1px, transparent 1px),
      linear-gradient(90deg, rgba(144,160,255,.12) 1px, transparent 1px);
    background-size: 44px 44px;
  }
  .geo-ring {
    position: absolute; left: 50%; top: 50%; width: 236px; height: 236px;
    margin: -118px 0 0 -118px; border-radius: 50%;
    border: 1.5px dashed rgba(69,255,236,.5); background: rgba(69,255,236,.07);
    transition: background .3s ease, border-color .3s ease;
  }
  .geomap.inside .geo-ring {
    background: rgba(69,255,236,.17); border-color: var(--mint);
    animation: geopulse .9s ease-out 2;
  }
  @keyframes geopulse { 0%,100% { box-shadow: 0 0 0 0 rgba(69,255,236,0); } 45% { box-shadow: 0 0 0 16px rgba(69,255,236,.12); } }
  .geo-radius {
    position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
    font-family: var(--mono); font-size: 10px; color: var(--mint);
  }
  .geo-pin {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 7px;
  }
  .geo-pin::before {
    content: ""; width: 16px; height: 16px; border-radius: 50% 50% 50% 0;
    background: #E8552F; transform: rotate(-45deg);
    box-shadow: 0 0 0 4px rgba(232,85,47,.25);
  }
  .geo-pin span { font-size: 12px; font-weight: 700; color: var(--text); }
  .geo-dot {
    position: absolute; left: 24px; top: 316px; width: 13px; height: 13px;
    border-radius: 50%; background: #9FB4FF;
    box-shadow: 0 0 0 5px rgba(159,180,255,.22);
  }
  .geomap.moving .geo-dot { animation: geowalk 2.4s cubic-bezier(.4,0,.5,1) forwards; }
  /* The ring is 236px across, centred at 200,200 — so its inner edge sits
   * 118px from the pin. The walk stops ~100px out, which is just inside the
   * fence rather than on top of the store, and crosses the boundary at about
   * the moment the ENTER transition is logged. */
  @keyframes geowalk {
    0%   { left: 24px;  top: 316px; }   /* 209px out — well outside */
    60%  { left: 80px;  top: 276px; }   /* 140px out — about to cross */
    100% { left: 112px; top: 252px; }   /* 100px out — just inside */
  }
  .geo-label {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 14px;
    background: rgba(4,8,30,.72); font-family: var(--mono); font-size: 10.5px;
    color: var(--text-dim);
  }

  /* --- phone screens -------------------------------------------------- */

  .ph {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    opacity: 0; transition: opacity .28s ease;
    font-family: var(--display);
  }
  .ph.in { opacity: 1; }
  .ph-status { flex: 0 0 auto; height: 46px; }

  .ph-lock {
    background: linear-gradient(165deg, #1B2340 0%, #3A2A4E 48%, #6B3B3B 100%);
    color: #fff; align-items: center;
  }
  .ph-lockicon {
    width: 17px; height: 14px; margin-top: 12px; border-radius: 3px;
    background: rgba(255,255,255,.85); position: relative;
  }
  .ph-lockicon::before {
    content: ""; position: absolute; left: 3.5px; top: -7px; width: 10px; height: 10px;
    border: 2.5px solid rgba(255,255,255,.85); border-bottom: 0; border-radius: 5px 5px 0 0;
  }
  .ph-time { margin-top: 16px; font-size: 76px; font-weight: 300; letter-spacing: -.02em; }
  .ph-date { font-size: 16px; opacity: .85; }
  .ph-notifs { width: 100%; padding: 30px 14px 0; display: flex; flex-direction: column; gap: 10px; }
  .ph-swipe { margin-top: auto; margin-bottom: 26px; font-size: 13px; opacity: .6; }

  .ph-notif {
    background: rgba(255,255,255,.93); color: #11161F;
    border-radius: 15px; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 3px;
    opacity: 0; transform: translateY(-18px) scale(.97);
    transition: opacity .34s ease, transform .44s cubic-bezier(.2,.9,.25,1);
    box-shadow: 0 10px 26px rgba(0,0,0,.3);
  }
  .ph-notif.in { opacity: 1; transform: none; }
  .pn-head { display: flex; align-items: center; gap: 7px; }
  .pn-ic {
    width: 17px; height: 17px; border-radius: 4px;
    background: linear-gradient(140deg, #E8552F, #B3261E);
  }
  .pn-app { font-size: 11px; font-weight: 700; letter-spacing: .03em; color: #4C5566; text-transform: uppercase; }
  .pn-time { margin-left: auto; font-size: 11px; color: #8A93A3; }
  .pn-title { font-size: 14px; font-weight: 700; margin-top: 2px; }
  .pn-body { font-size: 13px; line-height: 1.35; color: #3C4354; }

  .ph-cam { background: #0A0B10; }
  .cam-view { position: relative; flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .cam-subject { filter: brightness(.82) contrast(1.05); transform: scale(.92) rotate(-1.5deg); }
  .cam-scan {
    position: absolute; left: 6%; right: 6%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--mint), transparent);
    box-shadow: 0 0 16px var(--mint);
    animation: camscan 2s ease-in-out infinite;
  }
  @keyframes camscan { 0%,100% { top: 22%; } 50% { top: 74%; } }
  .cam-reticle {
    position: absolute; left: 50%; top: 52%; width: 190px; height: 190px;
    margin: -95px 0 0 -95px; opacity: 0; transition: opacity .25s ease, transform .3s ease;
    transform: scale(1.14);
  }
  .cam-reticle i { position: absolute; width: 30px; height: 30px; border: 3px solid var(--mint); }
  .cam-reticle .tl { left: 0; top: 0; border-right: 0; border-bottom: 0; }
  .cam-reticle .tr { right: 0; top: 0; border-left: 0; border-bottom: 0; }
  .cam-reticle .bl { left: 0; bottom: 0; border-right: 0; border-top: 0; }
  .cam-reticle .br { right: 0; bottom: 0; border-left: 0; border-top: 0; }
  .ph-cam.locked .cam-reticle { opacity: 1; transform: scale(1); }
  .ph-cam.locked .cam-scan { opacity: 0; }
  .cam-hint { padding: 16px 0; text-align: center; font-size: 14px; color: rgba(255,255,255,.7); }
  .ph-cam.locked .cam-hint { opacity: 0; }
  .cam-chip {
    position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%) translateY(10px);
    background: #fff; color: #11161F; border-radius: 100px; padding: 11px 22px;
    font-size: 14px; font-weight: 700; opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
    box-shadow: 0 8px 22px rgba(0,0,0,.4);
  }
  .ph-cam.locked .cam-chip { opacity: 1; transform: translateX(-50%); }

  .ph-land { background: #fff; color: #15181E; }
  .land-bar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    margin-top: 46px; padding: 9px 16px 11px; background: #F2F3F6;
    border-bottom: 1px solid #E0E3EA;
  }
  .land-lock { width: 9px; height: 11px; border-radius: 2px; background: #6A7084; }
  .land-url { font-family: var(--mono); font-size: 12px; color: #4C5566; }
  .land-scroll { flex: 1; overflow-y: auto; scrollbar-width: none; }
  .land-scroll::-webkit-scrollbar { display: none; }
  .land-hero {
    padding: 30px 22px 28px; text-align: center; color: #fff;
    background: linear-gradient(158deg, #E8552F 0%, #B3261E 68%, #7E1810 100%);
  }
  .land-brand { font-size: 14px; font-weight: 800; letter-spacing: .2em; opacity: .92; }
  .land-offer { margin-top: 12px; font-size: 42px; font-weight: 800; line-height: 1.02; letter-spacing: -.02em; }
  .land-sub { margin-top: 9px; font-size: 15px; opacity: .92; }
  .land-coupon {
    margin: 20px 18px; padding: 20px 18px; text-align: center;
    border: 2px dashed #D9DCE4; border-radius: 12px;
  }
  .land-clab { display: block; font-size: 12px; color: #8A93A3; letter-spacing: .08em; }
  .land-coupon b { display: block; margin-top: 6px; font-family: var(--mono); font-size: 30px; font-weight: 700; letter-spacing: .04em; }
  .land-bars {
    height: 42px; margin: 14px 0 10px; background-image: repeating-linear-gradient(
      90deg, #15181E 0 3px, transparent 3px 6px, #15181E 6px 8px, transparent 8px 13px,
      #15181E 13px 14px, transparent 14px 19px);
  }
  .land-cnote { font-size: 12px; color: #8A93A3; }
  .land-ctas { padding: 0 18px; display: flex; flex-direction: column; gap: 10px; }
  .land-cta {
    text-align: center; padding: 15px 0; border-radius: 10px;
    background: #15181E; color: #fff; font-size: 15px; font-weight: 700;
  }
  .land-cta2 {
    text-align: center; padding: 14px 0; border-radius: 10px;
    border: 1px solid #D9DCE4; color: #15181E; font-size: 15px; font-weight: 600;
  }
  .land-perm {
    margin: 22px 18px; padding: 16px; border-radius: 10px; background: #F5F6F9;
    display: flex; flex-direction: column; gap: 6px;
  }
  .land-perm b { font-size: 14px; line-height: 1.3; }
  .land-perm span { font-size: 12.5px; color: #5A6273; line-height: 1.4; }
  .land-permrow { display: flex; gap: 10px; margin-top: 8px; }
  .land-pno, .land-pyes { flex: 1; text-align: center; padding: 11px 0; border-radius: 8px; font-size: 13px; font-weight: 600; }
  .land-pno { border: 1px solid #D9DCE4; color: #5A6273; }
  .land-pyes { background: #E8552F; color: #fff; }
  .land-terms { margin: 0 18px; font-size: 11px; line-height: 1.5; color: #8A93A3; }
  .land-ad { margin: 14px 18px 30px; font-family: var(--mono); font-size: 10.5px; color: #A8B0BE; }

  @media (prefers-reduced-motion: reduce) {
    .nfc-phone, .cam-scan, .geomap.moving .geo-dot, .cons-send.fire,
    .geomap.inside .geo-ring, .nfc-scene[data-act="contact"] .nfc-spark path {
      transition-duration: 1ms !important; animation: none !important;
    }
    .geomap.moving .geo-dot { left: 112px; top: 252px; }
  }

  /* ═══════════════════════════════════════════════════════════════════
   * NFC Ad — tappable surfaces
   * The tag sits behind glass on a real screen, not on printed card.
   * ═════════════════════════════════════════════════════════════════ */

  .srf { position: relative; font-family: var(--display); }
  .srf-shadow {
    position: absolute; left: 6%; right: 6%; bottom: -26px; height: 24px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%);
  }
  .srf-sm .srf-shadow { display: none; }

  .srf-brand { font-size: 15px; font-weight: 800; letter-spacing: .2em; color: #FF8A6B; }
  .srf-offer { margin-top: 9px; font-size: 38px; font-weight: 800; line-height: 1.02; letter-spacing: -.025em; }
  .srf-sub { margin-top: 6px; font-size: 14px; opacity: .78; }
  .srf-tap {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    margin: 16px 0 0; padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18);
  }
  .srf-tap b { font-size: 15px; font-weight: 700; }
  .srf-ic { display: flex; color: var(--mint); }
  .srf-qr { display: flex; justify-content: center; margin-top: 16px; }
  .srf-qr svg { border-radius: 4px; padding: 5px; background: #fff; }
  .srf-qrline { margin-top: 8px; font-size: 12px; opacity: .72; }
  .srf-host { margin-top: 12px; font-family: var(--mono); font-size: 10px; opacity: .55; }

  .srf-sm .srf-brand { font-size: 10px; }
  .srf-sm .srf-offer { font-size: 23px; margin-top: 5px; }
  .srf-sm .srf-sub { font-size: 10px; }
  .srf-sm .srf-tap { margin-top: 10px; padding: 6px 0; }
  .srf-sm .srf-tap b { font-size: 10px; }
  .srf-sm .srf-qr { margin-top: 10px; }
  .srf-sm .srf-qrline { font-size: 9px; }
  .srf-sm .srf-host { font-size: 8px; margin-top: 8px; }

  /* --- countertop terminal ------------------------------------------- */

  .nterm {
    width: 380px; padding: 24px; border-radius: 22px;
    background: linear-gradient(170deg, #F4F5F8 0%, #DCDEE6 58%, #C6C9D4 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 24px 52px rgba(0,0,0,.5);
    transform: perspective(1400px) rotateY(8deg);
    transform-origin: right center;
  }
  .nterm-screen {
    border-radius: 6px; padding: 22px 20px 18px; text-align: center; color: #fff;
    background: linear-gradient(158deg, #E8552F 0%, #B3261E 70%, #7E1810 100%);
    box-shadow: 0 0 0 4px #1A1D28;
  }
  .nterm-chin { display: flex; align-items: center; gap: 12px; padding: 18px 2px 0; color: #53585F; }
  .nterm-mark { display: flex; align-items: center; gap: 8px; }
  .nterm-word { font-size: 24px; font-weight: 500; letter-spacing: -.005em; line-height: 1; }
  .nterm-slot { margin-left: auto; width: 120px; height: 9px; border-radius: 5px; background: #1A1D28; }
  .srf-sm.nterm { width: 230px; padding: 15px; border-radius: 13px; transform: none; box-shadow: none; }
  .srf-sm .nterm-screen { padding: 13px 11px 11px; box-shadow: 0 0 0 2px #1A1D28; }
  .srf-sm .nterm-chin { padding-top: 10px; gap: 7px; }
  .srf-sm .nterm-word { font-size: 14px; }
  .srf-sm .nterm-slot { width: 60px; height: 5px; }

  /* --- small digital billboard ---------------------------------------- */

  .nboard { width: 334px; }
  .nboard-screen {
    padding: 28px 24px 22px; text-align: center; color: #fff; border-radius: 10px;
    background: linear-gradient(162deg, #10163A 0%, #2A27C4 60%, #1D4BF9 100%);
    box-shadow: 0 0 0 9px #16192A, 0 0 0 10px #2C3146, 0 24px 52px rgba(0,0,0,.5);
  }
  .nboard-neck { width: 34px; height: 54px; margin: 10px auto 0; background: linear-gradient(90deg, #2C3146, #4A5064, #2C3146); }
  .nboard-foot { width: 190px; height: 13px; margin: 0 auto; border-radius: 4px; background: linear-gradient(180deg, #4A5064, #22263A); }
  .srf-sm.nboard { width: 216px; }
  .srf-sm .nboard-screen { padding: 15px 13px 12px; box-shadow: 0 0 0 5px #16192A; }
  .srf-sm .nboard-neck { height: 26px; width: 20px; }
  .srf-sm .nboard-foot { width: 110px; height: 8px; }

  /* --- screen in the room --------------------------------------------- */

  .nctv { width: 486px; }
  .nctv-screen {
    display: flex; align-items: center; gap: 22px; text-align: left;
    padding: 26px 24px; color: #fff; border-radius: 4px;
    background: linear-gradient(140deg, #10163A 0%, #2A27C4 62%, #1D4BF9 100%);
    box-shadow: 0 0 0 10px #16192A, 0 0 0 11px #2C3146, 0 26px 54px rgba(0,0,0,.5);
  }
  .nctv-copy { flex: 1; min-width: 0; }
  .nctv-copy .srf-tap { justify-content: flex-start; }
  .nctv-qr { flex: 0 0 auto; text-align: center; }
  .nctv-qr svg { border-radius: 4px; padding: 6px; background: #fff; }
  .nctv-stand { width: 140px; height: 14px; margin: 14px auto 0; border-radius: 0 0 6px 6px; background: linear-gradient(180deg, #4A5064, #22263A); }
  .srf-sm.nctv { width: 262px; }
  .srf-sm .nctv-screen { padding: 14px 13px; gap: 12px; box-shadow: 0 0 0 5px #16192A; }

  /* ═══════════════════════════════════════════════════════════════════
   * Apple Wallet
   * ═════════════════════════════════════════════════════════════════ */

  .ph-wallet { background: #0B0C10; color: #fff; }
  .wal-head { display: flex; align-items: baseline; padding: 6px 22px 16px; }
  .wal-head b { font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
  .wal-plus { margin-left: auto; font-size: 30px; font-weight: 300; color: #5C9BFF; }

  .wal-stack { position: relative; padding: 0 18px; }
  .wal-pass, .wal-card { border-radius: 16px; padding: 18px; box-shadow: 0 14px 30px rgba(0,0,0,.55); }

  .wal-pass {
    position: relative; z-index: 2;
    background: linear-gradient(152deg, #E8552F 0%, #B3261E 68%, #7E1810 100%);
    transform: translateY(380px);
    transition: transform .72s cubic-bezier(.22,.9,.25,1);
  }
  .ph-wallet.landed .wal-pass { transform: translateY(0); }

  .wal-ph { display: flex; align-items: center; gap: 9px; }
  .wal-pic { width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,.9); }
  .wal-ph b { font-size: 14px; font-weight: 800; letter-spacing: .06em; }
  .wal-pkind { margin-left: auto; font-size: 11px; opacity: .8; letter-spacing: .08em; text-transform: uppercase; }
  .wal-poffer { margin-top: 18px; font-size: 32px; font-weight: 800; line-height: 1.02; letter-spacing: -.02em; }
  .wal-psub { margin-top: 5px; font-size: 13px; opacity: .88; }
  .wal-pcode { margin-top: 18px; background: #fff; border-radius: 8px; padding: 10px; text-align: center; }
  .wal-bars {
    height: 32px; background-image: repeating-linear-gradient(
      90deg, #15181E 0 3px, transparent 3px 6px, #15181E 6px 8px, transparent 8px 13px,
      #15181E 13px 14px, transparent 14px 19px);
  }
  .wal-pcode span { display: block; margin-top: 7px; font-family: var(--mono); font-size: 13px; font-weight: 700; color: #15181E; letter-spacing: .08em; }

  .wal-card {
    margin-top: -118px; padding-top: 128px;
    background: linear-gradient(152deg, #2B3350 0%, #161B2E 72%);
    transition: margin-top .5s ease .35s;
  }
  .ph-wallet.settled .wal-card { margin-top: -96px; }
  .wal-ch { display: flex; align-items: center; gap: 12px; }
  .wal-chip { width: 32px; height: 24px; border-radius: 4px; background: linear-gradient(140deg, #E6C77A, #B9913C); }
  .wal-ctls { display: flex; color: rgba(255,255,255,.75); }
  .wal-cnum { margin-top: 16px; font-family: var(--mono); font-size: 17px; letter-spacing: .06em; }
  .wal-ckind { margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.62); }

  .wal-toast {
    position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%) translateY(12px);
    background: rgba(255,255,255,.95); color: #11161F; border-radius: 100px;
    padding: 11px 22px; font-size: 13px; font-weight: 700;
    opacity: 0; transition: opacity .3s ease, transform .3s ease;
    box-shadow: 0 10px 26px rgba(0,0,0,.4);
  }
  .ph-wallet.landed .wal-toast { opacity: 1; transform: translateX(-50%); }
  .ph-wallet.settled .wal-toast { opacity: 0; }

  .land-cta[data-action] { cursor: pointer; transition: transform .14s ease, background .14s ease; }
  .land-cta[data-action]:hover { background: #2A303C; }
  .land-cta.press { transform: scale(.96); background: #E8552F; }

  @media (prefers-reduced-motion: reduce) {
    .wal-pass, .wal-card, .wal-toast { transition-duration: 1ms !important; }
  }

  /* ═══════════════════════════════════════════════════════════════════
   * NFC Ad — tap cue, wallet chooser, Google Wallet
   * ═════════════════════════════════════════════════════════════════ */

  /* terminal carries the QR beside the NFC mark */
  .srf-qr-row { align-items: center; gap: 14px; margin-top: 14px; }
  .srf-qr-row svg { padding: 4px; }
  .srf-qrside { font-size: 12px; opacity: .78; text-align: left; max-width: 11ch; line-height: 1.3; }
  .srf-sm .srf-qr-row { gap: 8px; margin-top: 9px; }
  .srf-sm .srf-qrside { font-size: 8px; }

  /* the cue: a pulsing ring, a fingertip, and nothing else */
  .tapcue { position: absolute; right: 14px; top: 50%; width: 34px; height: 34px; margin-top: -17px; pointer-events: none; }
  .cue-ring {
    position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid currentColor; opacity: 0;
    animation: cuering 1.8s ease-out infinite;
  }
  .cue-tip {
    position: absolute; left: 9px; top: 9px; width: 16px; height: 16px;
    border-radius: 50%; background: currentColor; opacity: .85;
    animation: cuetip 1.8s ease-out infinite;
  }
  @keyframes cuering {
    0%   { transform: scale(.45); opacity: 0; }
    28%  { opacity: .75; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
  }
  @keyframes cuetip {
    0%, 100% { transform: scale(1); }
    22%      { transform: scale(.72); }
    45%      { transform: scale(1); }
  }
  .land-cta .tapcue { color: var(--mint); }
  .ph-notif { position: relative; cursor: pointer; }
  .ph-notif .tapcue { color: #E8552F; right: 10px; }
  .ph-notif.press { transform: scale(.97); }
  .land-cta { position: relative; }

  /* wallet chooser sheet */
  .wsheet {
    position: absolute; inset: 0; z-index: 6;
    background: rgba(8,10,20,.5);
    display: flex; align-items: flex-end;
    opacity: 0; transition: opacity .25s ease;
  }
  .wsheet.in { opacity: 1; }
  .wsheet-card {
    width: 100%; background: #fff; color: #15181E;
    border-radius: 20px 20px 0 0; padding: 12px 18px 26px;
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    transform: translateY(100%); transition: transform .38s cubic-bezier(.2,.9,.25,1);
  }
  .wsheet.in .wsheet-card { transform: none; }
  .wsheet-grab { width: 38px; height: 4px; border-radius: 2px; background: #D4D8E0; align-self: center; margin-bottom: 6px; }
  .wsheet-card b { font-size: 15px; text-align: center; margin-bottom: 4px; }
  .wsheet-btn {
    text-align: center; padding: 15px 0; border-radius: 10px;
    font-size: 15px; font-weight: 700; cursor: pointer;
  }
  .wsheet-apple { background: #000; color: #fff; }
  .wsheet-google { background: #1A73E8; color: #fff; }
  .wsheet-btn:active { transform: scale(.98); }
  .wsheet-cancel { text-align: center; padding: 12px 0; font-size: 14px; color: #8A93A3; }

  /* Google Wallet variant */
  .wal-google { background: #F6F8FC; color: #1F2330; }
  .wal-google .wal-head b { font-size: 24px; font-weight: 600; }
  .wal-google .wal-plus { color: #1A73E8; }
  .wal-google .wal-card { background: linear-gradient(152deg, #3B4254, #222736); }
  .wal-google .wal-toast { background: #1F2330; color: #fff; }
  .wal-gmark { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 22px; height: 22px; margin-right: 10px; }
  .wal-gmark i { border-radius: 2px; }
  .wal-gmark i:nth-child(1) { background: #4285F4; }
  .wal-gmark i:nth-child(2) { background: #EA4335; }
  .wal-gmark i:nth-child(3) { background: #FBBC05; }
  .wal-gmark i:nth-child(4) { background: #34A853; }
  .wal-head { align-items: center; }

  @media (prefers-reduced-motion: reduce) {
    .cue-ring, .cue-tip { animation: none; }
    .cue-ring { opacity: .6; transform: scale(1); }
    .wsheet, .wsheet-card { transition-duration: 1ms !important; }
  }

  /* ═══════════════════════════════════════════════════════════════════
   * NFC Ad — in-app video mid-roll
   * Runs on one phone start to finish, so the prop column stands down and
   * the handset moves to the middle of the scene.
   * ═════════════════════════════════════════════════════════════════ */

  .nfc-scene[data-solo="true"] .nfc-prop { opacity: 0; pointer-events: none; }
  .nfc-scene[data-solo="true"] .nfc-spark { opacity: 0; }
  .nfc-scene[data-solo="true"] .nfc-phone { transform: translateX(-271px); }

  .ph-video { background: #0C0D12; color: #fff; }
  .vid-top { flex: 0 0 auto; display: flex; align-items: center; padding: 4px 18px 12px; }
  .vid-top b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
  .vid-glass {
    margin-left: auto; width: 17px; height: 17px; border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,.75);
    box-shadow: 5px 5px 0 -3px rgba(255,255,255,.75);
  }

  .vid-player { position: relative; flex: 0 0 auto; height: 220px; overflow: hidden; background: #000; }

  .vid-frame {
    position: absolute; inset: 0;
    background: linear-gradient(152deg, #2B6E46 0%, #19452C 56%, #0F2C1C 100%);
  }
  .vid-frame::after {
    content: ""; position: absolute; left: -30%; top: 0; width: 30%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
    animation: vidsweep 5s linear infinite;
  }
  @keyframes vidsweep { to { left: 110%; } }
  .vid-bug {
    position: absolute; left: 14px; top: 13px;
    font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
    background: rgba(8,14,30,.78); padding: 4px 9px; border-radius: 3px;
  }
  .vid-score {
    position: absolute; left: 14px; top: 38px;
    font-size: 15px; font-weight: 700;
    background: rgba(8,14,30,.78); padding: 6px 11px; border-radius: 4px;
  }

  .vid-ad {
    position: absolute; inset: 0; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: linear-gradient(158deg, #E8552F 0%, #B3261E 70%, #7E1810 100%);
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
  }
  .ph-video.ad .vid-ad { opacity: 1; pointer-events: auto; }
  .vid-adbrand { font-size: 12px; font-weight: 800; letter-spacing: .2em; opacity: .92; }
  .vid-adoffer { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.04; }
  .vid-adsub { font-size: 12px; opacity: .9; }
  .vid-cta {
    position: relative; margin-top: 14px; padding: 11px 44px 11px 20px;
    border-radius: 100px; background: #fff; color: #B3261E;
    font-size: 14px; font-weight: 700;
    transition: transform .14s ease;
  }
  .vid-cta .tapcue { color: #B3261E; right: 8px; }
  .vid-cta.press { transform: scale(.94); }

  .vid-chip, .vid-skip {
    position: absolute; z-index: 3; bottom: 16px;
    font-size: 11px; font-weight: 700; border-radius: 3px;
    opacity: 0; transition: opacity .3s ease;
  }
  .vid-chip { left: 14px; background: rgba(8,14,30,.8); padding: 4px 8px; font-family: var(--mono); letter-spacing: .06em; }
  .vid-skip { right: 14px; background: rgba(255,255,255,.92); color: #15181E; padding: 6px 12px; }
  .ph-video.ad .vid-chip, .ph-video.ad .vid-skip { opacity: 1; }

  .vid-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.22); }
  .vid-prog { position: absolute; left: 0; top: 0; height: 100%; width: 42%; background: #fff; }
  .vid-cue { position: absolute; left: 42%; top: 0; width: 5px; height: 100%; background: #FFC53D; }
  .ph-video.ad .vid-prog { background: #FFC53D; animation: vidad 15s linear forwards; }
  @keyframes vidad { from { width: 0; } to { width: 100%; } }
  .ph-video.ad .vid-cue { opacity: 0; }

  .vid-meta { flex: 0 0 auto; padding: 16px 18px 14px; border-bottom: 1px solid #1E2029; }
  .vid-meta b { display: block; font-size: 16px; line-height: 1.3; font-weight: 700; }
  .vid-meta span { display: block; margin-top: 6px; font-size: 12.5px; color: #8A93A3; }

  .vid-next { flex: 1; overflow: hidden; padding: 14px 18px; }
  .vid-nlab { display: block; font-size: 12px; font-weight: 700; color: #8A93A3; letter-spacing: .06em; margin-bottom: 12px; }
  .vid-nrow { display: flex; gap: 11px; align-items: center; margin-bottom: 13px; }
  .vid-nthumb { flex: 0 0 76px; height: 46px; border-radius: 5px; background: linear-gradient(135deg, #2F3A56, #1A2134); }
  .vid-ntitle { font-size: 13px; line-height: 1.3; }

  @media (prefers-reduced-motion: reduce) {
    .vid-frame::after, .ph-video.ad .vid-prog { animation: none; }
  }

  /* ═══════════════════════════════════════════════════════════════════
   * Ads Wrapper — same Meridian page, narrower column so the wrapper's
   * fixed side rails (160×600 left, 300×250 right) sit in the gutters
   * ═════════════════════════════════════════════════════════════════ */

  .wr-surface .page { width: 840px; }
  .wr-surface .pg-cols { grid-template-columns: minmax(0,1fr) 250px; gap: 24px; }
  .wr-surface .pg-rail { top: 150px; }
  .wr-surface .pg-rail.l { left: 0; }
  .wr-surface .pg-rail.r { right: 0; }

  .wr-inter { position: relative; }
  .wr-inter .fs-close { top: -14px; right: -14px; }
  .wr-inter .cr { box-shadow: 0 24px 60px rgba(0,0,0,.5); }

  .wr-win {
    position: absolute; z-index: 3; left: 4px; bottom: 4px;
    font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .02em;
    color: #042B28; background: var(--mint); border-radius: 2px; padding: 2px 6px;
    white-space: nowrap; pointer-events: none;
  }
  .wr-win[data-fill="adx"] { color: #fff; background: #4A56C9; }

  [data-slot].wr-flash { animation: wrFlash 1.3s ease; }
  @keyframes wrFlash {
    0%, 60% { outline: 3px solid var(--mint); outline-offset: 3px; }
    100% { outline: 3px solid transparent; outline-offset: 3px; }
  }

  .wr-board {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--surface-2); border: 1px solid var(--hair); border-radius: 5px;
    padding: 9px 11px 8px;
  }
  .wr-clock {
    position: relative; height: 18px; margin-bottom: 5px;
    background: rgba(90,105,220,.12); border-radius: 3px; overflow: hidden;
  }
  .wr-clock i { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(69,255,236,.22); }
  .wr-clock span {
    position: relative; display: block; text-align: center;
    font-family: var(--mono); font-size: 10px; line-height: 18px; color: var(--text-dim);
  }
  .wr-bid {
    display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "n v" "b b" "s s";
    column-gap: 8px; padding: 5px 0 4px; border-top: 1px solid var(--hair);
  }
  .wr-bid:first-of-type { border-top: 0; }
  .wr-bid b { grid-area: n; font-size: 12px; font-weight: 700; }
  .wr-bid em { grid-area: v; font-style: normal; font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--text-faint); }
  .wr-bid .bar { grid-area: b; height: 4px; margin: 4px 0 3px; background: rgba(90,105,220,.14); border-radius: 2px; overflow: hidden; }
  .wr-bid .bar i { display: block; height: 100%; width: 0; background: var(--mint); transition: width .35s ease; }
  .wr-bid small { grid-area: s; font-family: var(--mono); font-size: 9.5px; color: var(--text-faint); }
  .wr-bid[data-state="live"] small { color: var(--text-dim); }
  .wr-bid[data-state="bid"] em { color: var(--mint); }
  .wr-bid[data-state="nobid"] em, .wr-bid[data-state="nobid"] b { color: var(--text-faint); }
  .wr-bid[data-state="timeout"] em { color: #FFB86B; }

  .fmt .t .wr-res {
    margin-top: 2px; white-space: normal; color: var(--text-dim);
  }
  .fmt .t .wr-res[data-state="prebid"] { color: var(--mint); }
  .fmt .t .wr-res[data-state="adx"] { color: #9FB4FF; }

  pre.sig.tall { max-height: 330px; overflow: auto; }
  .hintline b { color: var(--text-dim); }
  .panel code { font-family: var(--mono); font-size: 10.5px; color: var(--mint); }
  .logbox .s-warn .m { color: #FFB86B; }

  .wr-verdict { margin: 0 0 12px; font-size: 13px; font-weight: 700; }
  .wr-table { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-bottom: 14px; }
  .wr-table:last-child { margin-bottom: 0; }
  .wr-table th {
    text-align: left; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .04em;
    color: var(--text-faint); padding: 6px 10px; border-bottom: 1px solid var(--hair-str);
  }
  .wr-table td { padding: 6px 10px; border-bottom: 1px solid var(--hair); }
  .wr-table td.mono { font-family: var(--mono); font-size: 10.5px; }
  .wr-table td[data-fill="prebid"] { color: var(--mint); font-weight: 700; }
  .wr-table td[data-fill="adx"] { color: #9FB4FF; font-weight: 700; }
  .panel .wr-table { display: table; }
  @media (max-width: 720px) {
    .js-report { overflow-x: auto; }
  }

  /* ═══════════════════════════════════════════════════════════════════
   * Reporting — publisher dashboard inside a browser frame
   * ═════════════════════════════════════════════════════════════════ */

  .deck-full { grid-template-columns: minmax(0,1fr); }
  .rp-src { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); }

  .rp {
    position: relative; width: 1440px; height: 900px;
    display: grid; grid-template-columns: 232px minmax(0,1fr);
    background: #F3F4F9; color: #1B2140; font-family: var(--display);
  }
  .rp-side { background: #0C1140; padding: 26px 22px; }
  .rp-side img { height: 30px; display: block; margin-bottom: 34px; }
  .rp-menu { display: flex; flex-direction: column; gap: 4px; }
  .rp-menu span { padding: 11px 14px; border-radius: 6px; font-size: 15px; font-weight: 600; color: #93A0D8; }
  .rp-menu span.on { background: rgba(69,255,236,.12); color: #45FFEC; }

  .rp-main { overflow-y: auto; padding: 26px 34px 34px; }
  .rp-head { display: flex; align-items: center; padding-bottom: 16px; border-bottom: 1px solid #DDE0EC; }
  .rp-head h3 { margin: 0; font-size: 26px; font-weight: 800; }
  .rp-who { margin-left: auto; text-align: right; }
  .rp-who b { display: block; font-size: 15px; }
  .rp-who span { font-size: 12px; color: #6B7395; }

  .rp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 22px 0; }
  .rp-kpi {
    background: linear-gradient(118deg, #141757 0%, #2A27C4 70%, #1D4BF9 100%);
    color: #fff; border-radius: 10px; padding: 18px 22px;
  }
  .rp-kpi h5 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: #C9D1FF; }
  .rp-kpi p { margin: 0; font-size: 34px; font-weight: 800; color: #45FFEC; letter-spacing: -.01em; }

  .rp-filters { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
  .rp-filters .grow { flex: 1; }
  .rp-range {
    position: relative; display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid #D3D7E6; border-radius: 6px; padding: 9px 14px;
    font-size: 14px; min-width: 470px;
  }
  .rp-range select {
    margin-left: auto; font: inherit; font-size: 13px; font-weight: 600; color: #2A27C4;
    border: 0; background: #EEF0FF; border-radius: 4px; padding: 4px 8px; cursor: pointer;
  }
  .rp-cal { width: 14px; height: 14px; border: 2px solid #2A27C4; border-radius: 3px; border-top-width: 4px; }
  .rp .rp-btn {
    background: #2A27C4; border: 1px solid #2A27C4; color: #fff;
    font-size: 14px; padding: 10px 18px; border-radius: 6px;
  }
  .rp .rp-btn:hover { background: #3131DF; }
  .rp .rp-csv { background: #fff; color: #2A27C4; }
  .rp .rp-csv:hover { background: #EEF0FF; }

  .rp-tools { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; color: #4A5275; }
  .rp-tools select, .rp-tools input {
    font: inherit; font-size: 13px; color: #1B2140; background: #fff;
    border: 1px solid #D3D7E6; border-radius: 4px; padding: 5px 8px; margin: 0 4px;
  }
  .rp-tools input { width: 220px; }

  .rp-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 13.5px; border-radius: 8px; overflow: hidden; }
  .rp-table th {
    text-align: left; font-size: 12.5px; font-weight: 700; color: #4A5275;
    padding: 11px 12px; border-bottom: 2px solid #DDE0EC; background: #FAFBFE; white-space: nowrap;
  }
  .rp-table thead th[data-key] { cursor: pointer; user-select: none; }
  .rp-table thead th[data-key]:hover { color: #2A27C4; }
  .rp-table thead th[data-sort="asc"]::after { content: " \25B2"; font-size: 9px; color: #2A27C4; }
  .rp-table thead th[data-sort="desc"]::after { content: " \25BC"; font-size: 9px; color: #2A27C4; }
  .rp-table td { padding: 10px 12px; border-bottom: 1px solid #ECEEF5; white-space: nowrap; }
  .rp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
  .rp-table tfoot th { border-top: 2px solid #DDE0EC; border-bottom: 0; color: #1B2140; }
  .rp-tg { width: 34px; }
  .rp .rp-tg button {
    width: 22px; height: 22px; padding: 0; line-height: 1; font-size: 15px; font-weight: 700;
    border-radius: 50%; background: #2A27C4; border: 0; color: #fff;
  }
  .rp-sites > td { background: #F6F7FC; padding: 8px 12px 12px 46px; }
  .rp-sites table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .rp-sites th { font-size: 11.5px; padding: 6px 10px; background: transparent; border-bottom: 1px solid #DDE0EC; }
  .rp-sites td { padding: 6px 10px; border-bottom: 0; }
  .rp-empty { text-align: center; color: #6B7395; padding: 30px !important; }

  .rp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 13px; color: #4A5275; }
  .rp-pager { display: flex; gap: 4px; }
  .rp .rp-pager button {
    background: #fff; border: 1px solid #D3D7E6; color: #1B2140; font-size: 13px; padding: 6px 12px;
  }
  .rp .rp-pager button.on { background: #2A27C4; border-color: #2A27C4; color: #fff; }
  .rp .rp-pager button:disabled { opacity: .45; cursor: default; }

  @media (max-width: 720px) {
    .masthead .badge { margin-left: 0; white-space: normal; }
  }
  .wr-warn { margin: -6px 0 12px; font-size: 11.5px; color: #FFB86B; }

  /* ─── Ads Wrapper: set-up controls, demand panel, mobile web surface ─── */

  .surface-stage > [hidden] { display: none !important; }

  .wr-setup {
    display: flex; flex-direction: column; gap: 9px;
    background: var(--surface-2); border: 1px solid var(--hair); border-radius: 5px; padding: 10px 11px;
  }
  .wr-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .wr-seg button { padding: 7px 6px; font-size: 11.5px; }
  .wr-seg button[aria-pressed="true"] { background: var(--mint); border-color: var(--mint); color: #042B28; font-weight: 700; }
  .wr-hb { display: flex; align-items: center; gap: 10px; cursor: pointer; }
  .wr-hb input { accent-color: var(--mint); width: 17px; height: 17px; flex: 0 0 auto; }
  .wr-hb .t b { display: block; font-size: 12.5px; font-weight: 700; }
  .wr-hb .t small { display: block; font-family: var(--mono); font-size: 10px; color: var(--text-faint); }

  .wr-gam {
    background: var(--surface-2); border: 1px solid var(--hair); border-radius: 5px; padding: 11px 12px;
    font-size: 11.5px; line-height: 1.5; color: var(--text-dim);
  }
  .wr-gam b { display: block; font-size: 12.5px; color: var(--text); margin-bottom: 4px; }
  .wr-gam p { margin: 0 0 7px; }
  .wr-gam em { font-style: normal; color: #9FB4FF; font-weight: 700; }
  .wr-gam .wr-gam-hint { margin: 0; color: var(--mint); }
  .wr-board-note { margin: 6px 0 0; font-size: 10.5px; line-height: 1.45; color: var(--text-faint); }
  .wr-slots { display: flex; flex-direction: column; gap: 7px; }

  .mw .mob-status { padding-bottom: 4px; }
  .mw-url {
    flex: 0 0 auto; margin: 0 12px 8px; padding: 7px 12px; border-radius: 10px;
    background: #EEF0F4; font-size: 12px; color: #4A505C; text-align: center;
  }
  .mw-view { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .mw-scroll { flex: 1 1 auto; overflow-y: auto; scrollbar-width: none; }
  .mw-scroll::-webkit-scrollbar { display: none; }
  .mw-home { flex: 0 0 auto; height: 22px; position: relative; }
  .mw-home::after { content: ""; position: absolute; left: 50%; top: 9px; width: 120px; height: 4px; margin-left: -60px; border-radius: 2px; background: #11161F; }

  .mw-top.filled { display: flex; justify-content: center; padding: 6px 0; background: #F4F4F2; }
  .mw-mast { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 12px 0 8px; border-bottom: 3px double #15181E; margin: 0 16px; }
  .mw-mast b { font-family: var(--display); font-size: 27px; font-weight: 800; letter-spacing: .1em; }
  .mw-mast span { font-family: Georgia, serif; font-style: italic; font-size: 13px; color: #6A6F7A; }
  .mw-nav { display: flex; gap: 16px; overflow: hidden; padding: 9px 16px; border-bottom: 1px solid #D8D4CC; font-size: 12px; font-weight: 600; color: #4A505C; white-space: nowrap; }
  .mw-nav .on { color: #B3261E; }
  .mw-art { padding: 16px 16px 4px; font-family: Georgia, "Times New Roman", serif; color: #15181E; }
  .mw-kick { display: block; font-family: var(--display); font-size: 10px; font-weight: 800; letter-spacing: .12em; color: #B3261E; }
  .mw-art h1 { margin: 8px 0 0; font-size: 26px; line-height: 1.15; font-weight: 400; }
  .mw-stand { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: #3C434F; }
  .mw-byline { display: block; margin-top: 9px; font-family: var(--display); font-size: 11px; color: #6A6F7A; }
  .mw-hero { height: 200px; margin: 14px -16px 16px; background: linear-gradient(142deg, #2B6E46, #19452C 58%, #0F2C1C); }
  .mw-art p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; }
  .mw-most { margin: 6px 16px 0; border-top: 3px solid #15181E; padding-top: 10px; font-family: Georgia, serif; }
  .mw-most h4 { margin: 0 0 6px; font-family: var(--display); font-size: 12px; letter-spacing: .08em; }
  .mw-foot { padding: 18px 16px 130px; font-size: 11px; color: #6A6F7A; }

  .mw-anchor { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; }
  .mw-anchor.filled {
    display: flex; justify-content: center; padding: 6px 0;
    background: rgba(248,248,246,.97); border-top: 1px solid #D8D4CC; box-shadow: 0 -8px 20px rgba(0,0,0,.14);
  }
  .mw-screen { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
  .mw-screen.filled { pointer-events: auto; background: rgba(6,10,34,.72); display: flex; align-items: center; justify-content: center; }
  .show-slots .mw-top, .show-slots .mw-anchor { min-height: 22px; background: rgba(69,255,236,.08); }
  .wr-board[hidden], .wr-gam[hidden] { display: none; }

  /* plain-language step lists in Details */
  ol.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
  ol.steps b { color: var(--text); }
  ol.steps li::marker { color: var(--mint); font-weight: 700; }