/* ============================================================
   Explore POV: "Passthrough" in the web player's look (the dark skin).
   BUILT FILE: do not edit. Source: css/passthrough.v24.css through
   site/skin/remap.js + scripts/skin/v25-tokens.css + player/ui/tokens.css
   + scripts/skin/v25-layer.css. Build: node scripts/skin/build-passthrough-v25.mjs
   Served instead of v24 only to opted-in browsers (the site-look switch).
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/player/assets/fonts/InterVariable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/player/assets/fonts/InterVariable-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+0300-036F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
  color-scheme: dark;
  /* ---- The player's tokens (player/ui/tokens.css), copied in by the build ---- */
  /* Colour */
  --ink: #fff;
  --ink-2: rgba(255, 255, 255, 0.70);
  --ink-3: rgba(255, 255, 255, 0.50);
  --on-accent: rgba(0, 0, 0, 0.88);
  --accent: #fff;
  --hairline: rgba(255, 255, 255, 0.12);
  --glass: rgba(30, 32, 36, 0.55);
  --glass-strong: rgba(22, 23, 27, 0.78);
  /* Sheets and the tab bar: thick enough that the page never reads through, blur or no blur. */
  --glass-thick: rgba(24, 25, 29, 0.94);
  --glass-hover: rgba(60, 62, 68, 0.62);
  --glass-edge: rgba(255, 255, 255, 0.12);
  --glass-filter: saturate(1.4) blur(36px);
  --toggle-tint: rgba(255, 255, 255, 0.6);
  --room: #000;

  /* Type: SF Pro on Apple devices, Inter elsewhere. 400 / 500 / 600 only. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, InterVariable, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* desktop sizes; the phone sizes come in below 700 px, and the range between is interpolated */
  --fs-display: clamp(40px, calc(22px + 2.92vw), 64px);
  --fs-screen: clamp(32px, calc(26px + 0.98vw), 40px);
  --fs-tile: clamp(24px, calc(21px + 0.49vw), 28px);
  --fs-card: clamp(19px, calc(17px + 0.37vw), 22px);
  --fs-shelf: var(--fs-card);
  --fs-eyebrow: 12px;
  --fs-body: clamp(16px, calc(15.3px + 0.12vw), 17px);
  --fs-meta: clamp(14px, calc(13.3px + 0.12vw), 15px);
  --fs-footnote: clamp(12px, calc(11.3px + 0.12vw), 13px);
  --track-eyebrow: 0.125em;

  /* Space and shape */
  --s-xs: 4px;
  --s-s: 8px;
  --s-m: 12px;
  --s-l: 16px;
  --s-xl: 24px;
  --s-xxl: 32px;
  --page: clamp(20px, calc(4px + 2.5vw), 40px);
  --gutter: 20px;
  --shelf-gap: 40px;
  --r-postcard: 16px;
  --r-tile: 20px;
  --r-hero: 28px;
  --r-pill: 999px;
  --content-max: 1680px;

  /* The scrim over imagery: black eased 0 -> 60% over the bottom 60% */
  --scrim: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.168) 61%, rgba(0, 0, 0, 0.432) 82%, rgba(0, 0, 0, 0.6) 100%);
  --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 2px 14px rgba(0, 0, 0, 0.32);

  /* Motion */
  --t-quick: 0.2s;
  --ease-quick: cubic-bezier(0.2, 0.7, 0.3, 1);
  --t-settle: 0.45s;
  --ease-settle: cubic-bezier(0.32, 0.72, 0, 1);

  /* ---- Passthrough's names, in the dark skin ---- */
  --ground: #000;
  --ground-hi: #0d1114;
  --ground-lo: #050607;
  --surface: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.14);
  --line-2: rgba(255, 255, 255, 0.09);
  /* The light theme's one accent (periwinkle) is white here: UI is white on glass. */
  --tint: #fff;
  --tint-deep: rgba(255, 255, 255, 0.78);
  --star: rgba(255, 255, 255, 0.92);
  /* Text on a white pill (a dark pill on the light theme). */
  --on-ink: var(--on-accent);
  /* SF on Apple devices, Inter elsewhere; the mono captions take the page font. */
  --sf: var(--font);
  --mono: var(--font);
  --win-shadow: inset 0 0 0 1px var(--glass-edge), 0 40px 120px rgba(0, 0, 0, 0.55);
  --win-shadow-soft: inset 0 0 0 1px var(--hairline);
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  --card-shadow-hover: 0 18px 44px rgba(0, 0, 0, 0.4);
  --btn-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  --btn-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.3);
  --screen-rim: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  --glass-ring: inset 0 0 0 1px var(--glass-edge);
  --radius-win: var(--r-hero);
  --radius-card: var(--r-tile);
}

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--sf);
      background: var(--ground);
      color: var(--ink);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: clip;
    }

    ::selection { background: rgba(255, 255, 255, 0.288); }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button { font-family: inherit; }

    a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
      outline: 2px solid var(--tint);
      outline-offset: 3px;
      border-radius: 6px;
    }

    .hidden { display: none !important; }

    .container {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 clamp(20px, 5vw, 64px);
    }

    /* The luminous room */
    .ambient {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background:
        radial-gradient(130% 85% at 50% -12%, var(--ground-hi), transparent 58%),
        radial-gradient(100% 55% at 50% 116%, var(--ground-lo), transparent 55%);
    }

    /* ============================================================
       Navigation — floating glass pill
       ============================================================ */
    .nav {
      position: fixed;
      top: 14px;
      left: 0;
      right: 0;
      z-index: 60;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 14px;
      pointer-events: none;
    }
    .nav > * { pointer-events: auto; }
    .nav__logo {
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.02em;
      padding: 9px 16px 9px 12px;
      border-radius: 22px;
      background: rgba(30, 32, 36, 0.6);
      -webkit-backdrop-filter: blur(24px) saturate(1.7);
      backdrop-filter: blur(24px) saturate(1.7);
      box-shadow: var(--glass-ring);
    }
    .nav__logo img { width: 26px; height: 26px; border-radius: 50%; }
    .nav__links {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 6px;
      border-radius: 22px;
      background: rgba(30, 32, 36, 0.6);
      -webkit-backdrop-filter: blur(24px) saturate(1.7);
      backdrop-filter: blur(24px) saturate(1.7);
      box-shadow: var(--glass-ring);
    }
    .nav__link {
      font-size: 14.5px;
      font-weight: 500;
      color: var(--ink-2);
      padding: 8px 14px;
      border-radius: 12px;
      transition: color 0.16s, background 0.16s;
    }
    .nav__link:hover { color: var(--ink); background: rgba(255, 255, 255, 0.087); }
    .nav__link--active { color: var(--ink); background: rgba(255, 255, 255, 0.087); }
    .nav__globe {
      display: none;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 21px;
      color: var(--ink-2);
      background: rgba(30, 32, 36, 0.6);
      -webkit-backdrop-filter: blur(24px) saturate(1.7);
      backdrop-filter: blur(24px) saturate(1.7);
      box-shadow: var(--glass-ring);
    }
    .nav__globe svg { width: 20px; height: 20px; }
    .nav__toggle {
      display: none;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border: 0;
      border-radius: 21px;
      color: var(--ink);
      cursor: pointer;
      background: rgba(30, 32, 36, 0.6);
      -webkit-backdrop-filter: blur(24px) saturate(1.7);
      backdrop-filter: blur(24px) saturate(1.7);
      box-shadow: var(--glass-ring);
    }
    .nav__toggle svg { width: 20px; height: 20px; }

    /* Search */
    .search-wrapper { position: relative; }
    .search-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border: 0;
      border-radius: 21px;
      color: var(--ink-2);
      cursor: pointer;
      background: rgba(30, 32, 36, 0.6);
      -webkit-backdrop-filter: blur(24px) saturate(1.7);
      backdrop-filter: blur(24px) saturate(1.7);
      box-shadow: var(--glass-ring);
      transition: color 0.16s;
    }
    .search-toggle:hover { color: var(--ink); }
    .search-toggle svg { width: 18px; height: 18px; }
    .search-box {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      width: min(380px, calc(100vw - 40px));
      border-radius: 20px;
      background: rgba(22, 23, 27, 0.86);
      -webkit-backdrop-filter: blur(24px) saturate(1.7);
      backdrop-filter: blur(24px) saturate(1.7);
      box-shadow: var(--glass-ring), 0 24px 60px rgba(0, 0, 0, 0.324);
      padding: 10px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      pointer-events: none;
      transition: opacity 0.18s, transform 0.18s, visibility 0.2s;
    }
    .search-box.active { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
    .search-input {
      width: 100%;
      border: 0;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.073);
      box-shadow: inset 0 0 0 1px var(--line-2);
      padding: 11px 14px;
      font: 500 14.5px var(--sf);
      color: var(--ink);
    }
    .search-input::placeholder { color: var(--ink-3); }
    .search-input:focus { outline: 2px solid var(--tint); outline-offset: 1px; }
    .search-results { max-height: 320px; overflow-y: auto; margin-top: 6px; }
    .search-result {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px;
      border-radius: 12px;
      transition: background 0.16s;
    }
    .search-result:hover { background: rgba(255, 255, 255, 0.087); }
    .search-result__img {
      width: 68px;
      height: 44px;
      object-fit: cover;
      border-radius: 8px;
      box-shadow: 0 0 0 1px var(--line-2), 0 2px 6px rgba(0, 0, 0, 0.216);
      flex-shrink: 0;
    }
    .search-result__info { min-width: 0; }
    .search-result__title {
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .search-result__meta {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--ink-3);
      margin-top: 2px;
    }
    .search-empty {
      padding: 14px;
      font-size: 13.5px;
      color: var(--ink-3);
      text-align: center;
    }

    /* Sign in + account */
    .nav__btn {
      border: 0;
      cursor: pointer;
      white-space: nowrap;
      padding: 11px 18px;
      border-radius: 21px;
      font-size: 14px;
      font-weight: 600;
      background: var(--ink);
      color: var(--on-ink);
      box-shadow: var(--btn-shadow);
      transition: transform 0.16s, box-shadow 0.16s;
    }
    .nav__btn:hover { transform: translateY(-1px); box-shadow: var(--btn-shadow-hover); }
    .account-area { position: relative; }
    .account-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border: 0;
      border-radius: 21px;
      color: var(--ink);
      cursor: pointer;
      background: rgba(30, 32, 36, 0.6);
      -webkit-backdrop-filter: blur(24px) saturate(1.7);
      backdrop-filter: blur(24px) saturate(1.7);
      box-shadow: var(--glass-ring);
    }
    .account-btn svg { width: 20px; height: 20px; }
    .account-dropdown {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      width: 280px;
      border-radius: 20px;
      background: var(--surface);
      box-shadow: 0 0 0 1px var(--line-2), 0 24px 60px rgba(0, 0, 0, 0.324);
      padding: 16px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      pointer-events: none;
      transition: opacity 0.18s, transform 0.18s, visibility 0.2s;
    }
    .account-dropdown.visible { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
    .account-dropdown__header { display: flex; align-items: center; gap: 12px; }
    .account-dropdown__avatar {
      width: 40px;
      height: 40px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.087);
      color: var(--ink-2);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .account-dropdown__avatar svg { width: 22px; height: 22px; }
    .account-dropdown__info { min-width: 0; }
    .account-dropdown__email {
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .account-dropdown__status { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
    .account-dropdown__divider { height: 1px; background: var(--line-2); margin: 13px 0; }
    .account-dropdown__item {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      padding: 3px 0;
    }
    .account-dropdown__label { font-size: 13.5px; color: var(--ink-2); }
    .account-dropdown__value { font-size: 13.5px; font-weight: 600; }
    .account-dropdown__value.premium { color: var(--tint); }
    .account-dropdown__logout {
      width: 100%;
      border: 0;
      cursor: pointer;
      padding: 10px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      background: rgba(255, 255, 255, 0.073);
      box-shadow: inset 0 0 0 1px var(--line-2);
      transition: background 0.16s;
    }
    .account-dropdown__logout:hover { background: rgba(255, 255, 255, 0.131); }

    /* Mobile overlay */
    .nav__overlay {
      position: fixed;
      inset: 0;
      z-index: 55;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: rgba(10, 11, 13, 0.92);
      -webkit-backdrop-filter: blur(30px) saturate(1.6);
      backdrop-filter: blur(30px) saturate(1.6);
      opacity: 0;
      /* visibility, not just opacity: without it the closed overlay keeps its links in the
         tab order on every page, so keyboard users tab into an invisible menu. */
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.22s, visibility 0.22s;
    }
    .nav__overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
    .nav__overlay a {
      font-size: clamp(26px, 6vw, 34px);
      font-weight: 600;
      letter-spacing: -0.025em;
      color: var(--ink);
      padding: 10px 22px;
      border-radius: 16px;
      transition: background 0.16s;
    }
    .nav__overlay a:hover { background: rgba(255, 255, 255, 0.087); }

    /* ============================================================
       Buttons & links
       ============================================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 14px 22px;
      border-radius: 16px;
      font-size: 15.5px;
      font-weight: 600;
      background: var(--ink);
      color: var(--on-ink);
      box-shadow: var(--btn-shadow);
      transition: transform 0.16s, box-shadow 0.16s;
    }
    .btn:hover { transform: translateY(-1px); box-shadow: var(--btn-shadow-hover); }
    .btn svg { width: 16px; height: 16px; }
    .link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 500;
      color: var(--tint);
      transition: gap 0.18s, color 0.18s;
    }
    .link:hover { gap: 10px; color: var(--tint-deep); }

    /* ============================================================
       Hero — copy beside a floating window
       ============================================================ */
    .hero {
      max-width: 1360px;
      margin: 0 auto;
      padding: clamp(108px, 15vh, 160px) clamp(20px, 4vw, 56px) clamp(28px, 4vh, 48px);
      display: grid;
      grid-template-columns: minmax(300px, 500px) minmax(340px, 540px);
      justify-content: center;
      gap: clamp(36px, 4.5vw, 68px);
      align-items: center;
      min-height: min(92svh, 900px);
    }
    .hero__copy { max-width: 560px; }
    .hero__award {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px 8px 10px;
      border-radius: 999px;
      background: rgba(30, 32, 36, 0.6);
      -webkit-backdrop-filter: blur(14px) saturate(1.6);
      backdrop-filter: blur(14px) saturate(1.6);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.087), 0 6px 18px rgba(0, 0, 0, 0.252);
      margin-bottom: 30px;
    }
    .hero__award-icon {
      width: 26px;
      height: 26px;
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--ink);
      color: var(--on-ink);
      flex-shrink: 0;
    }
    .hero__award-icon svg { width: 13px; height: 13px; }
    .hero__award-text { display: flex; flex-direction: column; line-height: 1.15; }
    .hero__award-text strong { font-size: 12.5px; font-weight: 600; }
    .hero__award-text span { font-size: 11px; color: var(--ink-2); }
    .hero__h1 {
      font-size: clamp(56px, 8vw, 112px);
      line-height: 0.99;
      letter-spacing: -0.035em;
      font-weight: 600;
      text-wrap: balance;
      margin-bottom: 28px;
    }
    .thin { font-weight: 300; color: var(--ink-2); }
    .hero__lede {
      font-size: clamp(17px, 1.6vw, 20px);
      line-height: 1.62;
      color: var(--ink-2);
      max-width: 38ch;
      margin-bottom: 38px;
    }
    .hero__lede strong { color: var(--ink); font-weight: 600; }
    .hero__actions {
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
      margin-bottom: 34px;
    }
    .hero__actions .btn { padding: 16px 27px; font-size: 16px; }
    .hero__actions .link { font-size: 15.5px; }
    .hero__stat {
      font-family: var(--mono);
      font-size: 12.5px;
      font-weight: 500;
      color: var(--ink-3);
      font-variant-numeric: tabular-nums;
    }
    .hero__stat b { color: var(--ink); font-weight: 500; }

    /* The window */
    .hero__win { min-width: 0; max-width: min(100%, 540px); margin-left: auto; width: 100%; }
    .hero__frame {
      position: relative;
      border-radius: var(--radius-win);
      background: transparent;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.216), 0 18px 44px rgba(0, 0, 0, 0.36), 0 54px 110px rgba(0, 0, 0, 0.324);
    }
    @keyframes heroFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-9px); }
    }
    @property --halo {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: true;
    }
    .hero__frame {
      padding: 0;
      animation: heroFloat 8.5s ease-in-out infinite, haloDrift 16s linear infinite;
    }
    @keyframes haloDrift { to { --halo: 360deg; } }
    /* soft spectral halo: light refracting around the portal edge */
    .hero__frame::before {
      content: "";
      position: absolute;
      inset: -7px;
      z-index: -1;
      border-radius: 33px;
      background: conic-gradient(from var(--halo),
        #6f8bff, #b06fff, #ff6fd8, #5fd4c8, #7fc3ff, #6f8bff);
      filter: blur(20px) saturate(1.3);
      opacity: 0.5;
    }
    /* the opening's cut edge: ambient occlusion + light wrap from the other side */
    .hero__rim {
      position: absolute;
      inset: 0;
      z-index: 3;
      border-radius: inherit;
      pointer-events: none;
      box-shadow:
        inset 0 0 30px rgba(120, 150, 255, 0.16),
        inset 0 2px 12px rgba(0, 0, 0, 0.396);
    }
    /* dichroic band right on the cut, counter-rotating against the spill */
    .hero__ring {
      position: absolute;
      inset: -3px;
      z-index: 5;
      border-radius: calc(var(--radius-win) + 3px);
      pointer-events: none;
      padding: 3px;
      background: conic-gradient(from calc(360deg - var(--halo)),
        #6f8bff, #b06fff, #ff6fd8, #5fd4c8, #7fc3ff, #6f8bff);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      opacity: 1;
    }
    .hero__carousel {
      display: flex;
      overflow-x: scroll;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      border-radius: var(--radius-win);
      aspect-ratio: 1 / 1;
      background: #10151d;
      cursor: grab;
    }
    .hero__carousel::-webkit-scrollbar { display: none; }
    .hero__carousel.dragging, .hero__carousel.dragging * { cursor: grabbing; }
    .hero__frame::after {
      content: "";
      position: absolute;
      left: 0; right: 0; top: 0;
      height: 38%;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(255,255,255,.09), transparent);
      mix-blend-mode: screen;
      border-radius: inherit;
      z-index: 3;
    }
    .hero__slide {
      position: relative;
      flex: 0 0 100%;
      scroll-snap-align: start;
      overflow: hidden;
    }
    .hero__media { position: absolute; inset: 0; }
    .hero__media video, .hero__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .hero__gradient {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(23, 26, 33, 0.55), rgba(23, 26, 33, 0.12) 38%, transparent 55%);
      pointer-events: none;
    }
    .hero__content {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 16px;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: 14px;
      align-items: end;
    }
    .hero__content > :not(.hero__cta) { grid-column: 1; }
    .hero__label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 5px;
    }
    .hero__label svg { width: 11px; height: 11px; }
    .hero__premium-badge {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      color: var(--ink);
      background: rgba(22, 23, 27, 0.86);
      padding: 2px 8px;
      border-radius: 999px;
      margin-left: 4px;
    }
    .hero__title {
      font-size: clamp(17px, 1.7vw, 21px);
      font-weight: 600;
      letter-spacing: -0.015em;
      line-height: 1.25;
      color: #fff;
      text-shadow: 0 1px 12px rgba(23, 26, 33, 0.3);
    }
    .hero__tagline {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.45;
      margin-top: 3px;
    }
    .hero__meta {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.75);
      font-variant-numeric: tabular-nums;
      margin-top: 4px;
    }
    .hero__cta {
      grid-column: 2;
      grid-row: 1 / span 4;
      align-self: end;
    }
    .hero__cta {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 10px 16px;
      border-radius: 12px;
      font-size: 13.5px;
      font-weight: 600;
      background: var(--ink);
      color: var(--on-ink);
      box-shadow: var(--btn-shadow);
      transition: transform 0.16s, box-shadow 0.16s;
      white-space: nowrap;
    }
    .hero__cta:hover { transform: translateY(-1px); box-shadow: var(--btn-shadow-hover); }
    .hero__cta svg { width: 14px; height: 14px; }

    .hero__grip {
      display: none;
      width: 52px;
      height: 5px;
      border-radius: 3px;
      margin: 14px auto 0;
      background: rgba(255, 255, 255, 0.29);
      box-shadow: 0 1px 3px rgba(255,255,255,.7);
    }
    .hero__dots {
      display: flex;
      justify-content: center;
      gap: 7px;
      margin-top: 12px;
      min-height: 6px;
    }
    .hero__dot {
      width: 6px;
      height: 6px;
      border: 0;
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.261);
      cursor: pointer;
      padding: 0;
      transition: width 0.22s, background 0.22s;
    }
    .hero__dot.active { width: 18px; background: var(--ink); }

    /* ============================================================
       Sections & shelves
       ============================================================ */
    .section { padding: clamp(30px, 4.5vw, 56px) 0; }
    .section__header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      margin-bottom: clamp(18px, 2.5vw, 26px);
    }
    .section__title {
      font-size: clamp(24px, 3vw, 34px);
      font-weight: 600;
      letter-spacing: -0.025em;
    }
    .section__link {
      font-size: 15px;
      font-weight: 500;
      color: var(--tint);
      transition: color 0.18s;
    }
    .section__link:hover { color: var(--tint-deep); }

    .shelf-container { position: relative; }
    .shelf {
      display: flex;
      gap: clamp(16px, 2vw, 24px);
      overflow-x: auto;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
      padding: 6px 4px 40px;
      margin-bottom: -18px;
    }
    .shelf::-webkit-scrollbar { display: none; }
    .shelf--loading { min-height: 240px; }
    .shelf-arrow {
      position: absolute;
      top: 38%;
      transform: translateY(-50%);
      z-index: 5;
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--ink);
      background: rgba(22, 23, 27, 0.86);
      -webkit-backdrop-filter: blur(10px) saturate(1.6);
      backdrop-filter: blur(10px) saturate(1.6);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.116), 0 4px 12px rgba(0, 0, 0, 0.252);
      transition: transform 0.16s, opacity 0.16s;
    }
    .shelf-arrow:hover { transform: translateY(-50%) scale(1.05); }
    .shelf-arrow--left { left: -10px; }
    .shelf-arrow--right { right: -10px; }
    .shelf-arrow.disabled { opacity: 0; pointer-events: none; }
    .shelf-arrow svg { width: 18px; height: 18px; }
    .scroll-indicators {
      display: none;
      justify-content: center;
      gap: 6px;
      margin-top: 2px;
    }
    .scroll-dot {
      width: 5px;
      height: 5px;
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.261);
      transition: width 0.22s, background 0.22s;
    }
    .scroll-dot.active { width: 14px; background: var(--ink); }

    /* ---------- Video cards (contract: .card/.card__img/.card__body/.card__title) ---------- */
    .card {
      flex: 0 0 clamp(238px, 23vw, 296px);
      display: flex;
      flex-direction: column;
      gap: 12px;
      scroll-snap-align: start;
      transition: transform 0.22s ease;
    }
    .card:hover { transform: translateY(-4px); }
    .card__img {
      position: relative;
      border-radius: var(--radius-card);
      background: #17181b;
      box-shadow: var(--card-shadow);
      aspect-ratio: 16 / 10;
      overflow: hidden;
      transition: box-shadow 0.22s;
    }
    .card__img::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      border-radius: inherit;
      box-shadow: var(--screen-rim);
    }
    .card:hover .card__img { box-shadow: var(--card-shadow-hover); }
    .card__img img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .card__duration, .card__date {
      position: absolute;
      z-index: 3;
      bottom: 10px;
      right: 10px;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      color: var(--ink);
      padding: 4px 9px;
      border-radius: 999px;
      background: rgba(22, 23, 27, 0.86);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.116), 0 4px 12px rgba(0, 0, 0, 0.252);
      font-variant-numeric: tabular-nums;
    }
    .card__date { right: auto; left: 10px; }
    .card__premium {
      position: absolute;
      z-index: 3;
      top: 10px;
      right: 10px;
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: var(--ink);
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(22, 23, 27, 0.86);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.116), 0 4px 12px rgba(0, 0, 0, 0.252);
    }
    .card__body {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 0 3px;
    }
    .card__title {
      order: 1;
      font-size: 16.5px;
      font-weight: 600;
      letter-spacing: -0.015em;
      line-height: 1.3;
    }
    .card__location {
      order: 2;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-3);
      font-variant-numeric: tabular-nums;
    }
    .card__tags { order: 3; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
    .card__tag {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-2);
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.065);
      box-shadow: inset 0 0 0 1px var(--line-2);
    }

    /* ---------- Country cards ---------- */
    .country-card {
      flex: 0 0 clamp(200px, 18vw, 240px);
      display: flex;
      flex-direction: column;
      gap: 12px;
      scroll-snap-align: start;
      position: relative;
      transition: transform 0.22s ease;
    }
    .country-card:hover { transform: translateY(-4px); }
    .country-card img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: var(--radius-card);
      background: #17181b;
      box-shadow: var(--card-shadow);
      transition: box-shadow 0.22s;
    }
    .country-card:hover img { box-shadow: var(--card-shadow-hover); }
    .country-card__overlay { display: none; }
    .country-card__body { padding: 0 3px; }
    .country-card__name {
      font-size: 16.5px;
      font-weight: 600;
      letter-spacing: -0.015em;
    }
    .country-card__count {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-3);
      font-variant-numeric: tabular-nums;
    }

    /* ============================================================
       Value props — quiet editorial columns
       ============================================================ */
    .value-prop { padding: clamp(44px, 7vw, 84px) 0; }
    .value-prop__tagline {
      font-size: clamp(28px, 4vw, 50px);
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1.02;
      text-wrap: balance;
      max-width: 22ch;
    }
    .value-prop__subtitle {
      font-size: clamp(15px, 1.4vw, 17.5px);
      color: var(--ink-2);
      max-width: 52ch;
      margin-top: 12px;
    }
    .value-prop__features {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(24px, 3.5vw, 48px);
      margin-top: clamp(28px, 4vw, 48px);
      border-top: 1px solid var(--line);
      padding-top: clamp(24px, 3.5vw, 40px);
    }
    .value-prop__icon { display: none; }
    .value-prop__title {
      font-size: clamp(19px, 1.9vw, 23px);
      font-weight: 600;
      letter-spacing: -0.02em;
      margin-bottom: 8px;
    }
    .value-prop__desc {
      font-size: 15.5px;
      line-height: 1.55;
      color: var(--ink-2);
      max-width: 40ch;
    }
    .value-prop__desc a { color: var(--tint); font-weight: 500; }
    .value-prop__desc a:hover { color: var(--tint-deep); }

    /* ============================================================
       Social proof
       ============================================================ */
    .social-proof { padding: clamp(44px, 7vw, 84px) 0; }
    .social-proof__title {
      font-size: clamp(28px, 4vw, 50px);
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1.02;
    }
    .social-proof__stats {
      display: flex;
      gap: clamp(28px, 5vw, 72px);
      flex-wrap: wrap;
      margin-top: clamp(24px, 3.5vw, 40px);
    }
    .social-proof__stat-value {
      font-size: clamp(26px, 3.4vw, 38px);
      font-weight: 600;
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
    }
    .social-proof__stat-label {
      font-size: 13.5px;
      color: var(--ink-3);
      margin-top: 3px;
    }
    .social-proof__badges {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: clamp(22px, 3vw, 32px);
    }
    .social-proof__badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 9px 16px 9px 11px;
      border-radius: 999px;
      background: rgba(30, 32, 36, 0.6);
      -webkit-backdrop-filter: blur(14px) saturate(1.6);
      backdrop-filter: blur(14px) saturate(1.6);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.087), 0 6px 18px rgba(0, 0, 0, 0.252);
    }
    .social-proof__badge-icon {
      width: 28px;
      height: 28px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--ink);
      color: var(--on-ink);
      flex-shrink: 0;
    }
    .social-proof__badge-icon svg { width: 14px; height: 14px; }
    .social-proof__badge-title { font-size: 13px; font-weight: 600; line-height: 1.2; }
    .social-proof__badge-subtitle { font-size: 11.5px; color: var(--ink-2); }
    .testimonials {
      columns: 3 280px;
      column-gap: 20px;
      margin-top: clamp(28px, 4vw, 44px);
    }
    .testimonial {
      break-inside: avoid;
      margin-bottom: 20px;
      padding: 22px;
      border-radius: var(--radius-card);
      background: var(--surface);
      box-shadow: var(--win-shadow-soft);
    }
    .testimonial__stars {
      color: var(--star);
      font-size: 12px;
      letter-spacing: 2px;
      margin-bottom: 10px;
    }
    .testimonial__text {
      font-size: 15px;
      line-height: 1.55;
      color: var(--ink);
    }
    .testimonial--featured .testimonial__text { font-size: 17px; font-weight: 500; }
    .testimonial__author { font-size: 13px; font-weight: 600; margin-top: 12px; }
    .testimonial__source {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--ink-3);
      margin-top: 2px;
    }

    /* ============================================================
       Tech specs — instrument readout
       ============================================================ */
    .tech-specs { padding: clamp(30px, 4.5vw, 56px) 0; }
    .tech-specs__title {
      font-size: clamp(24px, 3vw, 34px);
      font-weight: 600;
      letter-spacing: -0.025em;
      margin-bottom: clamp(18px, 2.5vw, 26px);
    }
    .tech-specs__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      border-radius: var(--radius-win);
      background: var(--surface);
      box-shadow: var(--win-shadow-soft);
      overflow: hidden;
    }
    .tech-spec {
      padding: clamp(22px, 3vw, 34px) clamp(18px, 2.5vw, 28px);
      box-shadow: 0 0 0 0.5px var(--line-2);
    }
    .tech-spec__value {
      font-family: var(--mono);
      font-size: clamp(22px, 2.6vw, 30px);
      font-weight: 500;
      letter-spacing: -0.01em;
      font-variant-numeric: tabular-nums;
    }
    .tech-spec__icon { color: var(--ink); height: clamp(28px, 3.2vw, 38px); display: flex; align-items: center; }
    .tech-spec__icon svg { width: 30px; height: 30px; }
    .tech-spec__label {
      font-size: 13px;
      color: var(--ink-3);
      margin-top: 6px;
    }

    /* ============================================================
       Press
       ============================================================ */
    .press-mentions { padding: clamp(30px, 4.5vw, 56px) 0; }
    .press-mentions__title {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-3);
      text-align: center;
      margin-bottom: 22px;
    }
    .press-mentions__logos {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(28px, 5vw, 56px);
      flex-wrap: wrap;
    }
    .press-logo {
      height: 22px;
      width: auto;
      filter: brightness(0) invert(1);
      opacity: 0.45;
      transition: opacity 0.18s;
    }
    .press-logo:hover { opacity: 0.7; }

    /* ============================================================
       Impact stories
       ============================================================ */
    .impact-stories { padding: clamp(44px, 7vw, 84px) 0; }
    .impact-stories__title {
      font-size: clamp(28px, 4vw, 50px);
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1.02;
      margin-bottom: clamp(24px, 3.5vw, 40px);
    }
    .impact-stories__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .impact-story {
      padding: 26px;
      border-radius: var(--radius-card);
      background: var(--surface);
      box-shadow: var(--win-shadow-soft);
      display: flex;
      flex-direction: column;
    }
    .impact-story__icon { color: var(--tint); margin-bottom: 14px; }
    .impact-story__icon svg { width: 22px; height: 22px; }
    .impact-story__quote {
      font-size: 15.5px;
      line-height: 1.55;
      color: var(--ink);
      flex: 1;
    }
    .impact-story__author { font-size: 13.5px; font-weight: 600; margin-top: 16px; }
    .impact-story__detail {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--ink-3);
      margin-top: 2px;
    }

    /* ============================================================
       Devices
       ============================================================ */
    .devices { padding: clamp(44px, 7vw, 84px) 0; }
    .devices__title {
      font-size: clamp(28px, 4vw, 50px);
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1.02;
    }
    .devices__subtitle {
      font-size: clamp(15px, 1.4vw, 17.5px);
      color: var(--ink-2);
      margin-top: 10px;
    }
    .devices__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 18px;
      margin-top: clamp(24px, 3.5vw, 40px);
    }
    .device-card {
      padding: 24px 22px;
      border-radius: var(--radius-card);
      background: var(--surface);
      box-shadow: var(--win-shadow-soft);
      display: flex;
      flex-direction: column;
      transition: transform 0.22s ease, box-shadow 0.22s;
    }
    .device-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--card-shadow-hover);
    }
    .device-card__icon {
      height: 32px;
      display: flex;
      align-items: center;
      color: var(--ink);
      margin-bottom: 16px;
    }
    .device-card__icon svg { width: 26px; height: 26px; }
    .device-card__logo {
      height: 22px;
      width: auto;
      filter: brightness(0) invert(1);
      opacity: 0.8;
    }
    .device-card__name {
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.015em;
    }
    .device-card__meta {
      font-size: 13px;
      color: var(--ink-2);
      line-height: 1.45;
      margin-top: 5px;
      flex: 1;
    }
    .device-card__link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 500;
      color: var(--tint);
      margin-top: 16px;
      transition: gap 0.18s, color 0.18s;
    }
    .device-card:hover .device-card__link { gap: 10px; color: var(--tint-deep); }
    .device-card__link svg { width: 14px; height: 14px; }

    /* ============================================================
       FAQs
       ============================================================ */
    .faqs { padding: clamp(44px, 7vw, 84px) 0; }
    .faqs__header { margin-bottom: clamp(22px, 3vw, 32px); }
    .faqs__title {
      font-size: clamp(28px, 4vw, 50px);
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1.02;
    }
    .faqs__subtitle {
      font-size: clamp(15px, 1.4vw, 17.5px);
      color: var(--ink-2);
      margin-top: 10px;
    }
    .faqs__list {
      border-radius: var(--radius-win);
      background: var(--surface);
      box-shadow: var(--win-shadow-soft);
      padding: 6px clamp(18px, 2.5vw, 30px);
      max-width: 860px;
    }
    .faq { border-bottom: 1px solid var(--line-2); }
    .faq:last-child { border-bottom: 0; }
    .faq__question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      text-align: left;
      border: 0;
      background: transparent;
      cursor: pointer;
      padding: 19px 2px;
      font-size: 16.5px;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--ink);
    }
    .faq__question svg {
      width: 17px;
      height: 17px;
      flex-shrink: 0;
      color: var(--ink-3);
      transition: transform 0.25s;
    }
    .faq.open .faq__question svg { transform: rotate(180deg); }
    .faq__answer {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.3s ease;
    }
    .faq.open .faq__answer { grid-template-rows: 1fr; }
    .faq__answer-inner {
      overflow: hidden;
      font-size: 15px;
      line-height: 1.6;
      color: var(--ink-2);
      padding: 0 2px;
    }
    .faq.open .faq__answer-inner { padding-bottom: 20px; }
    .faq__answer-inner a { color: var(--tint); font-weight: 500; }
    .faq__answer-inner a:hover { color: var(--tint-deep); }

    /* ============================================================
       Pricing
       ============================================================ */
    .pricing { padding: clamp(44px, 7vw, 84px) 0; }
    .pricing__header { margin-bottom: clamp(22px, 3vw, 32px); }
    .pricing__title {
      font-size: clamp(28px, 4vw, 50px);
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1.02;
    }
    .pricing__subtitle {
      font-size: clamp(15px, 1.4vw, 17.5px);
      color: var(--ink-2);
      margin-top: 10px;
    }
    .pricing__cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      max-width: 940px;
    }
    .pricing-card {
      position: relative;
      padding: 26px 24px;
      border-radius: var(--radius-win);
      background: var(--surface);
      box-shadow: var(--win-shadow-soft);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: transform 0.22s ease, box-shadow 0.22s;
    }
    .pricing-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--card-shadow-hover);
    }
    .pricing-card--featured {
      box-shadow: 0 0 0 2px var(--ink), var(--card-shadow);
    }
    .pricing-card__badge {
      position: absolute;
      top: -12px;
      left: 22px;
      font-size: 11px;
      font-weight: 600;
      color: var(--on-ink);
      background: var(--ink);
      padding: 5px 11px;
      border-radius: 999px;
      box-shadow: var(--btn-shadow);
    }
    .pricing-card__name { font-size: 15px; font-weight: 600; color: var(--ink-2); }
    .pricing-card__price { display: flex; align-items: baseline; gap: 4px; }
    .pricing-card__amount {
      font-size: clamp(26px, 3vw, 34px);
      font-weight: 600;
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
    }
    .pricing-card__savings {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-3);
      min-height: 16px;
    }
    .pricing-card__cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 14px;
      padding: 12px;
      border-radius: 14px;
      font-size: 14.5px;
      font-weight: 600;
      background: var(--ink);
      color: var(--on-ink);
      box-shadow: var(--btn-shadow);
      transition: transform 0.16s, box-shadow 0.16s;
    }
    .pricing-card:hover .pricing-card__cta { transform: translateY(-1px); box-shadow: var(--btn-shadow-hover); }

    /* ============================================================
       Footer
       ============================================================ */
    .footer {
      margin-top: clamp(36px, 5vw, 64px);
      border-top: 1px solid var(--line);
      background: linear-gradient(180deg, transparent, rgba(250, 251, 253, 0.5));
    }
    .footer__inner {
      max-width: 1240px;
      margin: 0 auto;
      padding: clamp(36px, 5vw, 56px) clamp(20px, 5vw, 64px) 32px;
    }
    .footer__logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.02em;
      margin-bottom: 8px;
    }
    .footer__logo img { width: 26px; height: 26px; border-radius: 50%; }
    .footer__dest {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 18px 0 6px;
      margin-bottom: clamp(22px, 3vw, 34px);
      border-bottom: 1px solid var(--line-2);
      padding-bottom: clamp(22px, 3vw, 30px);
    }
    .dest-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 13px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 500;
      color: var(--ink);
      background: rgba(255, 255, 255, 0.065);
      box-shadow: inset 0 0 0 1px var(--line-2);
      transition: background 0.16s;
    }
    .dest-chip:hover { background: rgba(255, 255, 255, 0.131); }
    .dest-chip .n {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-3);
      font-variant-numeric: tabular-nums;
    }
    .footer__sections {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 28px 20px;
    }
    .footer__section { display: flex; flex-direction: column; gap: 9px; }
    .footer__heading {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--ink-3);
      letter-spacing: 0.01em;
      margin-bottom: 3px;
    }
    .footer__section a, .footer__link {
      font-size: 14px;
      color: var(--ink-2);
      transition: color 0.16s;
    }
    .footer__section a:hover, .footer__link:hover { color: var(--ink); }
    .footer__links { list-style: none; display: flex; flex-direction: column; gap: 9px; }
    .footer__copy {
      display: block;
      margin-top: clamp(28px, 4vw, 40px);
      padding-top: 20px;
      border-top: 1px solid var(--line-2);
      font-family: var(--mono);
      font-size: 12px;
      color: var(--ink-3);
    }
    .footer__copy::after {
      content: "No CGI. No game engine. Real places.";
      float: right;
    }

    /* ============================================================
       Auth modal
       ============================================================ */
    .auth-modal {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(0, 0, 0, 0.62);
      -webkit-backdrop-filter: blur(18px) saturate(1.4);
      backdrop-filter: blur(18px) saturate(1.4);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.22s, visibility 0.2s;
    }
    .auth-modal.visible { opacity: 1; pointer-events: auto; visibility: visible; }
    .auth-modal__content {
      width: min(400px, 100%);
      border-radius: var(--radius-win);
      background: var(--surface);
      box-shadow: var(--win-shadow);
      padding: 34px 30px 28px;
      text-align: center;
      transform: translateY(10px);
      transition: transform 0.22s;
    }
    .auth-modal.visible .auth-modal__content { transform: none; }
    .auth-modal__icon {
      width: 52px;
      height: 52px;
      border-radius: 26px;
      margin: 0 auto 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.087);
      color: var(--ink);
    }
    .auth-modal__icon svg { width: 24px; height: 24px; }
    .auth-modal__title {
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -0.02em;
      margin-bottom: 6px;
    }
    .auth-error {
      display: none;
      font-size: 13.5px;
      color: #ffb4ab;
      background: rgba(255, 180, 171, 0.112);
      border-radius: 10px;
      padding: 10px 12px;
      margin: 10px 0 2px;
    }
    .auth-error.visible, .auth-error:not(:empty) { display: block; }
    .auth-modal__buttons {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 20px;
    }
    .auth-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      border: 0;
      cursor: pointer;
      padding: 13px;
      border-radius: 14px;
      font-size: 15px;
      font-weight: 600;
      transition: transform 0.16s, box-shadow 0.16s;
    }
    .auth-btn svg { width: 18px; height: 18px; }
    .auth-btn--apple {
      background: var(--ink);
      color: var(--on-ink);
      box-shadow: var(--btn-shadow);
    }
    .auth-btn--apple:hover { transform: translateY(-1px); box-shadow: var(--btn-shadow-hover); }
    .auth-btn--google {
      background: var(--surface);
      color: var(--ink);
      box-shadow: 0 0 0 1px var(--line), 0 2px 8px rgba(0, 0, 0, 0.144);
    }
    .auth-btn--google:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--line), 0 6px 16px rgba(0, 0, 0, 0.252); }
    .auth-newsletter {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      margin-top: 18px;
      text-align: left;
      cursor: pointer;
    }
    .auth-newsletter input { margin-top: 3px; accent-color: var(--tint); }
    .auth-newsletter__text { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

    /* Auth loading */
    .auth-loading {
      position: fixed;
      inset: 0;
      z-index: 110;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      background: rgba(0, 0, 0, 0.86);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
    }
    .auth-loading.visible { display: flex; }
    .auth-loading__logo { width: 52px; height: 52px; border-radius: 50%; box-shadow: var(--card-shadow); }
    .auth-loading__spinner {
      width: 26px;
      height: 26px;
      border: 3px solid var(--line);
      border-top-color: var(--ink);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .auth-loading__text { font-size: 16px; font-weight: 600; }
    .auth-loading__subtext { font-size: 13.5px; color: var(--ink-2); }

    /* ============================================================
       Paywall modal
       ============================================================ */
    .paywall-modal {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(0, 0, 0, 0.62);
      -webkit-backdrop-filter: blur(18px) saturate(1.4);
      backdrop-filter: blur(18px) saturate(1.4);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.22s, visibility 0.2s;
    }
    .paywall-modal.visible { opacity: 1; pointer-events: auto; visibility: visible; }
    .paywall-modal__content {
      position: relative;
      width: min(440px, 100%);
      max-height: min(86vh, 720px);
      overflow-y: auto;
      border-radius: var(--radius-win);
      background: var(--surface);
      box-shadow: var(--win-shadow);
      padding: 30px 26px 24px;
      transform: translateY(10px);
      transition: transform 0.22s;
    }
    .paywall-modal.visible .paywall-modal__content { transform: none; }
    .paywall-modal__close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--ink-2);
      background: rgba(255, 255, 255, 0.073);
      transition: background 0.16s, color 0.16s;
    }
    .paywall-modal__close:hover { background: rgba(255, 255, 255, 0.145); color: var(--ink); }
    .paywall-modal__close svg { width: 16px; height: 16px; }
    .paywall-modal__header { text-align: center; }
    .paywall-modal__icon {
      width: 48px;
      height: 48px;
      border-radius: 24px;
      margin: 0 auto 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.087);
      color: var(--ink);
    }
    .paywall-modal__icon svg { width: 22px; height: 22px; }
    .paywall-modal__title {
      font-size: 21px;
      font-weight: 600;
      letter-spacing: -0.02em;
    }
    .paywall-modal__subtitle {
      font-size: 13.5px;
      line-height: 1.5;
      color: var(--ink-2);
      margin-top: 6px;
    }
    .paywall-modal__benefits {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 18px 0 4px;
    }
    .paywall-benefit { display: flex; align-items: center; gap: 9px; }
    .paywall-benefit__icon { width: 15px; height: 15px; color: var(--tint); flex-shrink: 0; }
    .paywall-benefit__text { font-size: 13.5px; color: var(--ink-2); }
    .paywall-modal__images {
      display: flex;
      gap: 8px;
      margin: 14px 0 4px;
    }
    .paywall-modal__images img {
      flex: 1;
      min-width: 0;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      border-radius: 12px;
      box-shadow: 0 0 0 1px var(--line-2), 0 4px 12px rgba(0, 0, 0, 0.216);
    }
    .paywall-modal__packages {
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-top: 14px;
    }
    .paywall-modal__loading {
      font-size: 13.5px;
      color: var(--ink-3);
      text-align: center;
      padding: 14px;
    }
    .paywall-package {
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px 14px;
      border-radius: 14px;
      background: var(--surface);
      box-shadow: 0 0 0 1px var(--line);
      cursor: pointer;
      transition: box-shadow 0.16s, background 0.16s;
    }
    .paywall-package:hover { box-shadow: 0 0 0 1px var(--ink-3); }
    .paywall-package.selected {
      box-shadow: 0 0 0 2px var(--tint);
      background: rgba(255, 255, 255, 0.064);
    }
    .paywall-package__badge {
      position: absolute;
      top: -9px;
      right: 12px;
      font-size: 10px;
      font-weight: 600;
      color: var(--on-ink);
      background: var(--tint);
      padding: 3px 9px;
      border-radius: 999px;
    }
    .paywall-package__radio {
      width: 18px;
      height: 18px;
      border-radius: 9px;
      border: 2px solid var(--line);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .paywall-package.selected .paywall-package__radio { border-color: var(--tint); }
    .paywall-package.selected .paywall-package__radio::after {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 4px;
      background: var(--tint);
    }
    .paywall-package__info { flex: 1; min-width: 0; }
    .paywall-package__name { font-size: 14.5px; font-weight: 600; }
    .paywall-package__detail {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--ink-3);
      margin-top: 1px;
    }
    .paywall-package__price { text-align: right; }
    .paywall-package__amount {
      font-size: 16px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    .paywall-modal__cta {
      width: 100%;
      border: 0;
      cursor: pointer;
      margin-top: 16px;
      padding: 14px;
      border-radius: 14px;
      font-size: 15.5px;
      font-weight: 600;
      background: var(--ink);
      color: var(--on-ink);
      box-shadow: var(--btn-shadow);
      transition: transform 0.16s, box-shadow 0.16s, opacity 0.16s;
    }
    .paywall-modal__cta:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--btn-shadow-hover); }
    .paywall-modal__cta:disabled { opacity: 0.45; cursor: default; }
    .paywall-modal__footer {
      display: flex;
      justify-content: center;
      gap: 18px;
      margin-top: 14px;
    }
    .paywall-modal__footer a {
      font-size: 12px;
      color: var(--ink-3);
      transition: color 0.16s;
    }
    .paywall-modal__footer a:hover { color: var(--ink); }

    /* ============================================================
       Responsive
       ============================================================ */
    @media (max-width: 1040px) {
      .hero {
        grid-template-columns: 1fr;
        justify-content: center;
        gap: 44px;
        padding-top: clamp(96px, 12vh, 130px);
        min-height: 0;
        text-align: center;
      }
      .hero__copy { max-width: 560px; margin: 0 auto; }
      .hero__lede { margin-left: auto; margin-right: auto; }
      .hero__actions { justify-content: center; }
      .hero__win { margin: 0 auto; max-width: min(100%, 500px); }
    }

    @media (max-width: 980px) {
      .value-prop__features { grid-template-columns: 1fr; gap: 28px; }
      .impact-stories__grid { grid-template-columns: 1fr; }
      .tech-specs__grid { grid-template-columns: repeat(2, 1fr); }
      .pricing__cards { grid-template-columns: 1fr; max-width: 480px; }
    }

    @media (max-width: 768px) {
      .nav { justify-content: space-between; }
      .nav__links { display: none; }
      .nav__globe { display: flex; }
      .nav__toggle { display: flex; }
      .nav__btn { padding: 11px 15px; }
      .nav { gap: 8px; }
    }

    @media (max-width: 430px) {
      .nav__logo span { display: none; }
      .nav__logo { padding: 9px 11px; }
      .shelf-arrow { display: none; }
      .scroll-indicators { display: flex; }
      .card { flex-basis: min(76vw, 300px); }
      .country-card { flex-basis: min(56vw, 230px); }
      .testimonials { columns: 1; }
      .footer__copy::after { float: none; display: block; margin-top: 6px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
      .hero__frame { animation: none; }
      .hero__frame::before { opacity: 0.3; }
    }

    /* ---------- Hero loading iris (portal opening) ---------- */
    .hero__loading {
      position: absolute;
      inset: 0;
      z-index: 4;
      background: transparent;
      display: none;
      pointer-events: none;
      transition: opacity 0.8s ease;
    }
    .hero__frame.is-loading .hero__loading { display: block; }
    /* ---- the portal does not exist yet ----
       While loading there is no window at all: no panel, no shadow, no band.
       A small dark glass orb of spectral light floats directly on the page and
       charges. At 100% the orb grows from its own radius to the window's exact
       bounds while its circle relaxes into the window's corner radius; the live
       world is clipped inside the same growing shape, and the frame's shadow,
       rim and band fade in as the orb lands and hands the spectrum over. */
    .hero__ring, .hero__frame::before, .hero__frame::after, .hero__rim { transition: opacity 0.7s ease; }
    .hero__frame.is-loading { box-shadow: none; }
    .hero__frame.is-loading .hero__ring,
    .hero__frame.is-loading::before,
    .hero__frame.is-loading::after,
    .hero__frame.is-loading .hero__rim { opacity: 0; }
    .hero__frame.is-loading .hero__carousel { visibility: hidden; }
    .hero__frame.is-loading .portal-orb { display: flex; }
    .portal-orb {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 6;
      width: min(calc(180px + var(--charge, 0) * 44px), 52%);
      height: min(calc(180px + var(--charge, 0) * 44px), 52%);
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: radial-gradient(circle at 50% 42%, #141b2d, #0a0e18 78%);
      box-shadow: 0 18px 44px rgba(0, 0, 0, 0.396), 0 4px 12px rgba(0, 0, 0, 0.216);
      display: none;
      align-items: center;
      justify-content: center;
    }
    /* the window band, condensed onto the orb */
    .portal-orb::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 2.5px;
      background: conic-gradient(from calc(360deg - var(--halo, 0deg)),
        #6f8bff, #b06fff, #ff6fd8, #5fd4c8, #7fc3ff, #6f8bff);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      z-index: 2;
    }
    /* dichroic halo hugging the rim, hollow so the glass stays deep */
    .portal-orb__glow {
      position: absolute;
      inset: -16px;
      border-radius: 50%;
      background: conic-gradient(from var(--halo, 0deg),
        #6f8bff, #b06fff, #ff6fd8, #5fd4c8, #7fc3ff, #6f8bff);
      -webkit-mask: radial-gradient(circle, transparent 56%, #fff 74%);
      mask: radial-gradient(circle, transparent 56%, #fff 74%);
      filter: blur(15px) saturate(1.2);
      opacity: calc(0.38 + var(--charge, 0) * 0.42);
      animation: glowBreathe 4.2s ease-in-out infinite;
      z-index: 0;
    }
    @keyframes glowBreathe {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }
    .portal-orb__pct {
      position: relative;
      z-index: 3;
      font-family: var(--mono);
      font-size: 17px;
      font-weight: 500;
      color: #f0f3f8;
      font-variant-numeric: tabular-nums;
      text-shadow: 0 1px 12px rgba(10, 13, 20, 0.6);
    }
    /* charge complete: a small pulse before the bloom */
    .portal-orb.primed { animation: orbPrime 0.24s ease; }
    @keyframes orbPrime {
      0%, 100% { transform: translate(-50%, -50%) scale(1); }
      50% { transform: translate(-50%, -50%) scale(1.05); }
    }
    /* the bloom: ring and aperture expand together, glass clears to the world */
    .hero__loading.blooming { opacity: 0; transition: opacity 0.3s ease; }
    .portal-orb.blooming {
      background: transparent;
      box-shadow: none;
      opacity: 0;
      transition:
        width 0.95s cubic-bezier(0.55, 0.06, 0.18, 1),
        height 0.95s cubic-bezier(0.55, 0.06, 0.18, 1),
        border-radius 0.95s cubic-bezier(0.55, 0.06, 0.18, 1),
        background 0.3s ease, box-shadow 0.3s ease,
        opacity 0.3s ease 0.78s;
    }
    .portal-orb.blooming .hero__loading-aurora,
    .portal-orb.blooming .portal-orb__pct { opacity: 0; transition: opacity 0.3s ease; }
    /* the orb halo hands off to the frame halo instead of flooding the room */
    .portal-orb.blooming .portal-orb__glow { opacity: 0; transition: opacity 0.4s ease; }
    .portal-orb.fading { opacity: 0; transition: opacity 0.5s ease; }
    /* the world grows inside the same shape the orb draws */
    .hero__demo.blooming {
      transition: clip-path 0.95s cubic-bezier(0.55, 0.06, 0.18, 1),
        -webkit-clip-path 0.95s cubic-bezier(0.55, 0.06, 0.18, 1);
    }
    /* the window materializes as the orb lands: band first, then body.
       The blurred halo (::before) shows THROUGH the transparent frame body,
       so it must wait until the world has filled the window. */
    .hero__frame.blooming .hero__ring { opacity: 1; transition: opacity 0.45s ease 0.5s; }
    .hero__frame.blooming::before { opacity: 0.5; transition: opacity 0.45s ease 0.9s; }
    .hero__frame.blooming {
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.216), 0 18px 44px rgba(0, 0, 0, 0.36), 0 54px 110px rgba(0, 0, 0, 0.324);
      transition: box-shadow 0.5s ease 0.55s;
    }
    .hero__frame.blooming::after,
    .hero__frame.blooming .hero__rim { opacity: 1; transition: opacity 0.5s ease 0.55s; }
    .hero__loading-aurora { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; transition: opacity 0.3s ease; }
    .hero__loading-aurora .sw {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 165%;
      aspect-ratio: 1 / 1;
      margin: 0;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      filter: blur(26px) saturate(1.35);
      opacity: calc(0.5 + var(--charge, 0) * 0.4);
    }
    .hero__loading-aurora .sw.a {
      background: conic-gradient(from 20deg,
        rgba(111, 139, 255, 0.55), rgba(176, 111, 255, 0.30),
        rgba(255, 111, 216, 0.45), rgba(20, 24, 40, 0.05),
        rgba(95, 212, 200, 0.40), rgba(111, 139, 255, 0.55));
      animation: swirlA 26s linear infinite;
    }
    .hero__loading-aurora .sw.b {
      width: 120%;
      background: conic-gradient(from 200deg,
        rgba(95, 212, 200, 0.40), rgba(20, 24, 40, 0.02),
        rgba(176, 111, 255, 0.45), rgba(255, 111, 216, 0.28),
        rgba(20, 24, 40, 0.02), rgba(95, 212, 200, 0.40));
      mix-blend-mode: screen;
      animation: swirlB 34s linear infinite;
    }
    @keyframes swirlA { to { transform: translate(-50%, -50%) rotate(360deg); } }
    @keyframes swirlB { to { transform: translate(-50%, -50%) rotate(-360deg); } }
    /* at orb scale the big-chamber speeds read as static: tighten the orbit */
    .portal-orb .sw.a { animation-duration: 13s; }
    .portal-orb .sw.b { animation-duration: 18s; }
    /* energy gathering at the heart of the orb */
    .hero__loading-aurora .core {
      position: absolute;
      left: 50%;
      top: 45%;
      width: 76%;
      height: 76%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: radial-gradient(circle,
        rgba(176, 111, 255, 0.4), rgba(111, 139, 255, 0.24) 45%, transparent 70%);
      filter: blur(16px);
      mix-blend-mode: screen;
      animation: coreBreathe 4.2s ease-in-out infinite;
      opacity: calc(0.5 + var(--charge, 0) * 0.5);
    }
    @keyframes coreBreathe {
      0%, 100% { transform: translate(-50%, -50%) scale(1); }
      50% { transform: translate(-50%, -50%) scale(1.16); }
    }
    .hero__loading-place {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(50% + 132px);
      text-align: center;
      font-family: var(--mono);
      font-size: 12.5px;
      font-weight: 500;
      color: var(--ink);
      min-height: 17px;
      transition: opacity 0.35s ease;
    }
    .hero__loading-label {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(50% + 156px);
      text-align: center;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      color: var(--ink-3);
    }
    .hero__loading.fading { opacity: 0; }
    @media (prefers-reduced-motion: reduce) {
      .hero__loading-aurora .sw, .hero__loading-aurora .core, .hero__demo-touch::before, .portal-orb__glow { animation: none; }
      .portal-orb.blooming { transition: opacity 0.35s ease; }
      .hero__loading.blooming { transition: opacity 0.35s ease; }
    }

    /* ---------- Hero VR demo ---------- */
    .hero__demo {
      position: absolute;
      inset: 0;
      z-index: 2;
      border-radius: inherit;
      overflow: hidden;
      background: #0d1117;
      opacity: 0;
      transition: opacity 0.9s ease;
    }
    .hero__demo.on { opacity: 1; }
    .hero__demo.instant { transition: none; }
    .hero__demo-canvas { position: absolute; inset: 0; z-index: 0; }
    .hero__demo-canvas canvas {
      display: block;
      width: 100%;
      height: 100%;
      cursor: grab;
      touch-action: none;
    }
    .hero__demo-canvas.dragging canvas { cursor: grabbing; }
    .hero__demo .hero__gradient { z-index: 1; }
    .hero__demo-ui { z-index: 3; pointer-events: none; }
    .hero__demo-ui .hero__cta { pointer-events: auto; }
    .hero__demo-hint {
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.7s ease;
    }
    .hero__demo-hint.show { opacity: 1; }
    .hero__demo-hint.rest .hero__demo-touch { animation: touchPulse 2.6s ease-in-out infinite; }
    @keyframes touchPulse {
      0%, 100% { transform: scale(1); opacity: 0.95; }
      50% { transform: scale(0.82); opacity: 0.55; }
    }
    /* the dot sits at the exact center of the window; margins do the
       centering so transform stays free for the sweep and the pulse */
    .hero__demo-touch {
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -16px 0 0 -16px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(250, 251, 253, 0.95) 0 34%, rgba(250, 251, 253, 0.15) 46%, transparent 52%),
        conic-gradient(#6f8bff, #b06fff, #ff6fd8, #5fd4c8, #7fc3ff, #6f8bff);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
      transition: transform 0.2s ease;
    }
    .hero__demo-touch::before {
      content: "";
      position: absolute;
      inset: -9px;
      border-radius: 50%;
      background: conic-gradient(#6f8bff, #b06fff, #ff6fd8, #5fd4c8, #7fc3ff, #6f8bff);
      filter: blur(9px);
      opacity: 0.75;
      z-index: -1;
      animation: touchSpin 5s linear infinite;
    }
    @keyframes touchSpin { to { transform: rotate(360deg); } }
    .hero__demo-hint-label {
      position: absolute;
      left: 50%;
      top: calc(50% + 36px);
      transform: translateX(-50%);
      white-space: nowrap;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      color: #fff;
      background: rgba(23, 26, 33, 0.35);
      padding: 6px 13px;
      border-radius: 999px;
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }
        /* display:none, not visibility:hidden. Hidden still leaves a live scroll container
       underneath the portal: with several featured slides (signed-in visitors) a swipe
       still drove it, so the hero behaved like a slider under the video. The portal is
       the hero; nothing else should be interactive behind it.
       CRITICAL COMPANION RULE: the carousel's aspect-ratio box is the ONLY thing giving
       .hero__frame its height (the demo is position:absolute). display:none alone
       collapsed the frame to 540x0 and made the portal invisible - the frame must carry
       its own box whenever the carousel is out of the layout. */
    .hero__frame.demo-mode { aspect-ratio: 1 / 1; }
    .hero__frame.demo-mode .hero__carousel { display: none; }
    .hero__frame.demo-mode .hero__dots { display: none !important; }


/* ---- The player's motion and text styles (player/ui/tokens.css) ---- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-quick: 0.3s;
    --t-settle: 0.3s;
    --ease-settle: ease-in-out;
  }
}

/* The nine text styles */
.t-display { font-size: var(--fs-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.04; text-wrap: balance; }
.t-screen { font-size: var(--fs-screen); font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; }
.t-tile { font-size: var(--fs-tile); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
.t-card { font-size: var(--fs-card); font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; }
.t-shelf { font-size: var(--fs-shelf); font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; }
.t-eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--track-eyebrow); line-height: 1.3; text-transform: uppercase; }
.t-body { font-size: var(--fs-body); font-weight: 400; line-height: 1.5; max-width: 62ch; }
.t-meta { font-size: var(--fs-meta); font-weight: 400; line-height: 1.4; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.t-footnote { font-size: var(--fs-footnote); font-weight: 400; line-height: 1.4; color: var(--ink-3); }

/* ============================================================
   The site look (v25 layer): the web player's language on every
   Passthrough page. Everything above this line is v24 run through
   site/skin/remap.js; this layer sets what a colour swap can't:
   the top bar, the pills, the room, prose links, the auth UI.
   `:root` in front of a selector lifts it over a page's own
   <style> (which comes after this file) and over auth-ui.js's.
   ============================================================ */

/* ---------- Base ---------- */
body { font-family: var(--font); font-size: 16px; }
.thin { font-weight: 400; }
:root :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Links inside running text: white, underlined (the light theme told them apart by colour). */
:root :where(p, li, td, dd, blockquote, figcaption, .faq__answer-inner, .faq-item__answer) a:not([class]) {
  color: #fff;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:root :where(p, li, td, dd, blockquote, figcaption, .faq__answer-inner, .faq-item__answer) a:not([class]):hover { text-decoration-color: #fff; }

/* ---------- The room: the player's blurred, dimmed picture, as light alone ---------- */
.ambient {
  background:
    radial-gradient(75% 60% at 10% -8%, rgba(42, 86, 112, 0.62), transparent 66%),
    radial-gradient(65% 55% at 94% -2%, rgba(46, 60, 104, 0.5), transparent 64%),
    radial-gradient(120% 65% at 50% 115%, rgba(18, 44, 40, 0.58), transparent 64%),
    #000;
}

/* ---------- Top bar (the player's): wordmark, the glass nav pill, round glass buttons ---------- */
.nav {
  top: 0;
  height: 76px;
  padding: 0 var(--page);
  justify-content: flex-end;
  gap: var(--s-s);
}
/* A soft veil behind the bar, so the page scrolling under it never fights the wordmark. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 -28px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.42) 58%, transparent);
}
:root .nav__logo {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.05em;
  padding: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: var(--text-shadow);
  color: #fff;
}
:root .nav__logo img { display: none; }
:root .nav__logo span { display: inline; }
.wordmark__eye { width: 1.28em; height: 0.83em; margin: 0 0.02em; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.3)); }
:root .nav__links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
}
:root .nav__link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  transition: background var(--t-quick) var(--ease-quick), color var(--t-quick) var(--ease-quick);
}
:root .nav__link:hover { background: rgba(255, 255, 255, 0.1); color: var(--ink); }
:root .nav__link--active, :root .nav__link[aria-current="page"] { background: #fff; color: var(--on-accent); }
:root .nav__link--active:hover { background: #fff; color: var(--on-accent); }
/* The round glass buttons (the player's .round). */
:root :is(.nav__globe, .nav__toggle, .search-toggle, .account-btn) {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
  transition: background var(--t-quick) var(--ease-quick);
}
:root :is(.nav__globe, .nav__toggle, .search-toggle, .account-btn):hover { background: var(--glass-hover); color: var(--ink); }
:root .search-toggle svg { width: 20px; height: 20px; }
/* Sign in (auth-ui.js's button and the homepage's own): the player's glass "Sign in" pill. */
:root .nav :is(.epov-sign-in-btn, .nav__btn) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
  transform: none;
  transition: background var(--t-quick) var(--ease-quick);
}
:root .nav :is(.epov-sign-in-btn, .nav__btn)::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 4.2a3.3 3.3 0 1 1 0 6.6 3.3 3.3 0 0 1 0-6.6Zm0 13.6a7.8 7.8 0 0 1-5.9-2.7c.9-1.7 3.2-2.8 5.9-2.8s5 1.1 5.9 2.8a7.8 7.8 0 0 1-5.9 2.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 4.2a3.3 3.3 0 1 1 0 6.6 3.3 3.3 0 0 1 0-6.6Zm0 13.6a7.8 7.8 0 0 1-5.9-2.7c.9-1.7 3.2-2.8 5.9-2.8s5 1.1 5.9 2.8a7.8 7.8 0 0 1-5.9 2.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root .nav :is(.epov-sign-in-btn, .nav__btn):hover { background: var(--glass-hover); transform: none; box-shadow: inset 0 0 0 1px var(--glass-edge); }
/* The account menu and the search box: thick glass, as the player's sheets. */
:root :is(.account-dropdown, .search-box) {
  background: var(--glass-thick);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 24px 60px rgba(0, 0, 0, 0.5);
}
:root .search-input { height: 44px; border-radius: var(--r-pill); padding: 0 16px; font: 500 15px var(--font); }
:root .search-input:focus { outline: none; box-shadow: inset 0 0 0 2px #fff; }
:root .account-dropdown__logout { border-radius: var(--r-pill); height: 40px; padding: 0 16px; }
/* The phone menu: the player's black veil, big white words. */
:root .nav__overlay { background: rgba(0, 0, 0, 0.9); }
:root .nav__overlay a { color: #fff; font-weight: 600; letter-spacing: -0.02em; border-radius: var(--r-pill); }

/* Below 1000 px the centred pill would run into the wordmark: the menu button takes over (as on phones). */
@media (max-width: 1000px) {
  :root .nav__links { display: none; }
  :root .nav__toggle { display: flex; align-items: center; justify-content: center; }
}
@media (max-width: 768px) {
  .nav { height: 64px; gap: var(--s-s); }
  :root .nav__globe { display: none; }
  :root .nav__logo { font-size: 17px; }
}
@media (max-width: 430px) {
  :root .nav__logo span { display: inline; }
  :root .nav__logo { font-size: 15px; letter-spacing: 0.08em; }
  :root :is(.nav__toggle, .search-toggle, .account-btn) { width: 40px; height: 40px; }
  :root .nav :is(.epov-sign-in-btn, .nav__btn) { height: 40px; padding: 0 14px 0 11px; font-size: 14px; }
}

/* ---------- Buttons: white pill (the one thing to do), glass pill (everything else) ---------- */
:root :is(.btn, .cta-btn, .hero__cta, .pricing-card__cta, .paywall-modal__cta, .email-capture__submit, .content__link--primary, .auth-btn) {
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -0.005em;
  justify-content: center;
}
:root :is(.btn, .cta-btn, .content__link--primary) { min-height: 50px; padding-top: 0; padding-bottom: 0; padding-left: 26px; padding-right: 26px; font-size: 17px; align-items: center; }
:root :is(.btn, .cta-btn, .hero__cta, .pricing-card__cta, .paywall-modal__cta, .email-capture__submit, .content__link--primary):hover { transform: none; filter: brightness(0.92); }
:root :is(.btn, .cta-btn, .hero__cta, .pricing-card__cta, .paywall-modal__cta, .content__link--primary):active { transform: scale(0.97); }
:root :is(.btn--secondary, .pricing-card__cta--secondary, .content__link--secondary, .hero__cta--secondary, .auth-btn--google) {
  color: var(--ink);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
}
:root :is(.btn--secondary, .pricing-card__cta--secondary, .content__link--secondary, .hero__cta--secondary, .auth-btn--google):hover {
  color: var(--ink);
  background: var(--glass-hover);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
  filter: none;
}
/* A primary pill's words stay dark even inside prose whose links are white (`.article a`). */
:root :is(.btn, .cta-btn, .hero__cta, .pricing-card__cta, .paywall-modal__cta, .email-capture__submit, .content__link--primary):not(.btn--secondary, .pricing-card__cta--secondary, .content__link--secondary, .hero__cta--secondary, .btn--glass) {
  color: var(--on-ink);
  text-decoration: none;
}
/* The homepage demo's own dark glass button over the live picture keeps its white words. */
:root .hero__demo-ui .hero__cta { color: #fff; }

/* Text links that act as buttons ("See all", "Explore"): white, no periwinkle. */
:root :is(.link, .section__link, .device-card__link) { color: var(--ink); }
:root :is(.link, .section__link):hover, .device-card:hover .device-card__link { color: var(--ink-2); }

/* Chips and small badges: the player's glass chip. */
:root .dest-chip { height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-edge); }
:root .dest-chip:hover { background: var(--glass-hover); }
:root .dest-chip .n { font-size: 12px; color: var(--ink-3); }

/* ---------- Surfaces: dark glass cards (the player's plan card), no light-theme drop shadows ---------- */
:root :is(.testimonial, .impact-story, .device-card, .faqs__list, .tech-specs__grid, .pricing-card) {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
:root :is(.device-card, .pricing-card):hover { background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 0 0 1px var(--glass-edge); }
:root .pricing-card--featured { box-shadow: inset 0 0 0 2px #fff; background: rgba(255, 255, 255, 0.1); }
:root .card__img, :root .country-card img { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); }
:root .card__img::before { box-shadow: none; }

/* ---------- The old sign-in and paywall modals (classic pages still open them) ---------- */
:root .auth-modal__content, :root .paywall-modal__content {
  background: var(--glass-thick);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 40px 120px rgba(0, 0, 0, 0.55);
}
:root .auth-modal__icon, :root .paywall-modal__icon { background: rgba(255, 255, 255, 0.1); }
:root .paywall-modal__close { width: 44px; height: 44px; border-radius: 50%; background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-edge); color: var(--ink); }
:root .paywall-package { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--hairline); border-radius: var(--r-postcard); }
:root .paywall-package.selected { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 2px #fff; }
:root .paywall-package__badge { background: #fff; color: var(--on-accent); }

/* auth-ui.js's sign-in modal (its own styles load after this file): the player's sign-in sheet. */
:root .epov-modal { background: rgba(0, 0, 0, 0.62); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
:root .epov-modal__content {
  max-width: 460px;
  padding: 44px 32px 28px;
  border: 0;
  border-radius: var(--r-hero);
  background: var(--glass-thick);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 40px 120px rgba(0, 0, 0, 0.55);
}
:root .epov-modal__icon { width: 60px; height: 60px; margin-bottom: var(--s-l); background: rgba(255, 255, 255, 0.1); }
:root .epov-modal__icon svg { width: 30px; height: 30px; color: #fff; }
:root .epov-modal__title { font-family: var(--font); font-size: var(--fs-tile); font-weight: 600; letter-spacing: -0.01em; }
:root .epov-auth-btn { height: 50px; padding: 0 26px; border-radius: var(--r-pill); font-size: 17px; }
:root .epov-auth-btn--apple { background: #fff; color: var(--on-accent); }
:root .epov-auth-btn--google { background: var(--glass); color: #fff; box-shadow: inset 0 0 0 1px var(--glass-edge); }
:root .epov-newsletter input[type="checkbox"] { accent-color: #fff; }
:root .epov-newsletter__text { color: var(--ink-2); }
@media (hover: hover) {
  :root .epov-auth-btn--apple:hover, :root .epov-auth-btn--google:hover { transform: none; box-shadow: inset 0 0 0 1px var(--glass-edge); filter: brightness(0.92); }
}

/* ---------- The homepage's device-aware buttons, under the title of the two pages people reach from a
   headset's browser (injected by site/skin/rewriter.js, new look only). The homepage's rules. ---------- */
.skin-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-m); margin: var(--s-xl) auto 0; }
.skin-cta .btn--watch, .skin-cta .btn--trailer, .skin-cta .btn--quest, .skin-cta .link--avp { display: none; }
html.dev-headset .skin-cta .btn--watch { display: inline-flex; }
html.dev-headset .skin-cta .btn--store, html.dev-ios .skin-cta .btn--store, html.dev-other .skin-cta .btn--store { display: none; }
html.dev-ios .skin-cta .btn--trailer, html.dev-other .skin-cta .btn--trailer { display: inline-flex; }
html.dev-other .skin-cta .btn--quest { display: inline-flex; }
html.dev-ios .skin-cta .link--avp { display: inline-flex; }
html.dev-ios .skin-cta .link--browse, html.dev-other .skin-cta .link--browse { display: none; }
.skin-cta .btn svg { width: 18px; height: 18px; }
.skin-cta .btn--quest svg { width: 22px; height: 12px; }
:root .skin-cta .btn--quest {
  color: var(--ink); background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
}
.skin-cta .link { min-height: 44px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.skin-cta .link:hover { color: var(--ink); }
.skin-cta .link--avp { flex-basis: 100%; justify-content: center; font-size: 14px; }
html.is-headset .skin-cta .btn, html.dev-headset .skin-cta .btn { min-height: 56px; font-size: 19px; }

/* ---------- A place in the hero (critic A 4): the pricing page's place card on every static page ----------
   The page's own hero (its H1, lines, badges and buttons, unchanged) laid over a catalogue still in a 28 px
   card, the player's scrim, the words bottom-left, the place bottom-right. */
html[data-skin] .skin-placehero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  width: calc(100% - 2 * var(--page)); max-width: var(--content-max);
  min-height: clamp(320px, 44vh, 480px);
  margin: 84px auto 0;
  padding: clamp(56px, 8vh, 96px) clamp(24px, 3.4vw, 56px) clamp(52px, 4.6vw, 68px);
  gap: 0; grid-template-columns: none;
  border-radius: var(--r-hero);
  background: #111;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  text-align: left;
  color: #fff;
}
html[data-skin] .skin-placehero__media { position: absolute; inset: 0; z-index: -2; }
html[data-skin] .skin-placehero__media img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
html[data-skin] .skin-placehero__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* The player's scrim, a left shade under the words, and the homepage hero's bottom layer (critic A r2i #3), so
     the words hold over a pale sky or snow as well as the lede does over a dark one. */
  background:
    var(--scrim),
    linear-gradient(90deg, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.22) 48%, rgba(0, 0, 0, 0) 74%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 55%);
}
html[data-skin] .skin-placehero > :not(.skin-placehero__media, .skin-placehero__scrim, .skin-placehero__credit) {
  position: relative; max-width: min(760px, 100%); margin-left: 0; margin-right: 0; text-align: left; text-shadow: var(--text-shadow);
}
/* Words over the picture carry the shadow; buttons never do (the player's buttons carry none; on a white button it
   reads as a smudge; final critic 30 Sep #3). */
html[data-skin] .skin-placehero :is(.btn, .cta-btn, .hero__cta, .pricing-card__cta, .content__link--primary, .content__link--secondary, .btn--secondary, .hero__cta--secondary, .auth-btn, button) { text-shadow: none; }
/* One rhythm inside the card, whatever margins the page gave its hero's pieces (their buttons stay in the first screen). */
html[data-skin] .skin-placehero > :not(.skin-placehero__media, .skin-placehero__scrim, .skin-placehero__credit) { margin-top: 0; margin-bottom: 14px; }
html[data-skin] .skin-placehero > :not(.skin-placehero__media, .skin-placehero__scrim, .skin-placehero__credit):nth-last-child(2) { margin-bottom: 0; }
html[data-skin] .skin-placehero :is(h1, .hero__title, .page-hero__title) {
  font-size: var(--fs-display); letter-spacing: -0.02em; line-height: 1.04; text-align: left; color: #fff; text-wrap: balance;
}
html[data-skin] .skin-placehero :is(p, .hero__subtitle, .page-hero__subtitle, .hero__lede, .lead) { color: rgba(255, 255, 255, 0.9); text-align: left; margin-left: 0; margin-right: 0; }
html[data-skin] .skin-placehero :is([class*="actions"], [class*="chips"], [class*="badges"], .cta, .skin-cta, .hero__devices, .crumb, .crumbs) { justify-content: flex-start; margin-left: 0; margin-right: 0; }
html[data-skin] .skin-placehero :is(.hero__icon, .page-hero__icon) { margin-left: 0; margin-right: 0; }
/* The hero's buttons (critic A r2i #1): under the words, their left edge on the H1's, never pushed right by the
   homepage's `.hero__cta { grid-column: 2; align-self: end }`; the device pages' links in one row
   (site/skin/rewriter.js wraps them), side by side from 700 px, stacked below it. */
html[data-skin] .skin-placehero :is(.hero__cta, .hero__ctas) { grid-column: auto; grid-row: auto; align-self: auto; }
html[data-skin] .skin-placehero .hero__ctas { justify-content: flex-start; align-items: flex-start; }
/* The SEO pages' own button wrapper (header.hero > .hero__inner > div.hero__cta) centred its buttons under
   left-aligned words (found by skin_check.mjs's left-edge check: /armchair-travel/, /relaxing-vr-apps/,
   /vr-travel-for-seniors/). */
html[data-skin] .skin-placehero div.hero__cta { justify-content: flex-start; }
html[data-skin] .skin-cta--hero { display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; gap: 12px; }
html[data-skin] .skin-placehero > .skin-cta--hero { margin-top: 10px; }
@media (max-width: 699px) {
  html[data-skin] .skin-cta--hero { flex-direction: column; align-items: flex-start; }
}
html[data-skin] .skin-placehero__credit {
  position: absolute; right: clamp(24px, 3.4vw, 56px); bottom: clamp(24px, 3vw, 40px); z-index: 1; margin: 0;
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72); text-shadow: var(--text-shadow);
}
/* A page whose breadcrumb comes first: the crumb already clears the bar (and sits over the card's words). */
html[data-skin] :is(.crumb, .breadcrumb) + .skin-placehero { margin-top: 14px; }
html[data-skin] :is(.crumb, .breadcrumb):has(+ .skin-placehero) { padding-top: 88px; max-width: var(--content-max); width: calc(100% - 2 * var(--page)); padding-left: clamp(24px, 3.4vw, 56px); padding-right: clamp(24px, 3.4vw, 56px); margin-left: auto; margin-right: auto; text-align: left; }
@media (max-width: 700px) {
  html[data-skin] :is(.crumb, .breadcrumb) + .skin-placehero { margin-top: 12px; }
  html[data-skin] :is(.crumb, .breadcrumb):has(+ .skin-placehero) { padding-top: 72px; padding-left: 20px; padding-right: 20px; width: 100%; }
  html[data-skin] .skin-placehero { margin-top: 72px; min-height: 0; padding: 150px 20px 48px; border-radius: 24px; }
  html[data-skin] .skin-placehero :is(h1, .hero__title, .page-hero__title) { font-size: clamp(30px, 8.6vw, 38px); }
  html[data-skin] .skin-placehero__credit { right: 20px; bottom: 18px; font-size: 11px; }
}

/* ---------- Breadcrumbs: 44 px touch targets on touch screens (critic B r1 #13), the look unchanged: the hit area
   grows by padding and the same negative margin, so the row keeps its height and the words their places. ---------- */
@media (pointer: coarse) {
  html[data-skin] :is(.crumb, .breadcrumb) a {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
    padding: 0 8px; margin: -14px -8px;
  }
}

/* ---------- /map/: one plain link on to the library under the line over the globe (critic B r1 #18). The page's
   header lets drags through and fades while the tour runs or a country is open (it comes back when they stop), as
   today's H1 does; the link takes taps only while it shows. ---------- */
html[data-skin] .skin-map-link {
  /* its own line (not beside the inline "Drag to rotate" hint); a 44 px target that adds ~28 px to the header */
  display: flex; align-items: center; width: max-content; min-height: 44px; margin: -6px auto -10px;
  font-size: 15px; font-weight: 500; color: #fff; pointer-events: auto;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 3px;
  text-shadow: var(--text-shadow);
}
html[data-skin] .skin-map-link:hover { text-decoration-color: #fff; }
html[data-skin] .page-header.faded .skin-map-link { pointer-events: none; }
@media (max-width: 768px) { html[data-skin] .skin-map-link { font-size: 14px; } }

/* ---------- Long form (critic A 12, 25): readable lines, 16 px answers, text off the screen's edges ----------
   html[data-skin] lifts these over each page's own <style> (which comes after this file). */
html[data-skin] :is(.press-section p, .press-item__desc, .article p, .article li, .story-block__text, .prose p, .lead) { max-width: 68ch; }
html[data-skin] :is(.faq-item__answer, .faq-item__a, .faq__answer-inner, .faq p) { font-size: 16px; line-height: 1.6; max-width: 68ch; }
html[data-skin] .story__content { padding-inline: var(--page); }

/* ---------- The blog index: each post's picture on top (critic A 25); the grid at the hero's width, 3 across from
   1200 px, 2 from 700 px (critic A r2i #8). The page's `.article .body` (700 px) and `.wrap` (820 px, its own padding)
   are an essay's column, not a grid's; `.article h2` and `.article li` gave the card titles 30 px at 1.68 lines and a
   40 px top margin. ---------- */
html[data-skin] .wrap:has(.postlist) { width: calc(100% - 2 * var(--page)); max-width: var(--content-max); margin-inline: auto; padding-inline: 0; }
html[data-skin] .body:has(.postlist) { max-width: none; }
html[data-skin] .postlist { gap: var(--gutter); margin: 0; padding: 0; } /* not `.article ul`'s 22 px indent */
html[data-skin] .post { overflow: hidden; padding: 0 0 22px; border-radius: var(--r-tile); }
html[data-skin] .post > :not(.post__media) { margin-left: 22px; margin-right: 22px; }
html[data-skin] .post__media { display: block; aspect-ratio: 16 / 9; margin-bottom: 18px; background: #17181b; }
html[data-skin] .post__media img { width: 100%; height: 100%; object-fit: cover; }
html[data-skin] .post__title { margin-top: 0; margin-bottom: 8px; font-size: var(--fs-tile); line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
@media (min-width: 700px) {
  html[data-skin] .postlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  html[data-skin] .postlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- /devices/ (critic A r2i #9): the four cards under the hero with a gap, at the hero's width (not inset
   60 px); the Samsung file (a square with a thin wordmark across its middle) shown as its wordmark band at the
   homepage's size, here and in the Galaxy XR page's hero tile; the Vision Pro chip in glass, so the first screen
   keeps one white pill. ---------- */
html[data-skin] .devices-section { margin-top: var(--s-xl); padding-left: 0; padding-right: 0; }
html[data-skin] .devices-grid { width: calc(100% - 2 * var(--page)); max-width: var(--content-max); gap: var(--gutter); }
html[data-skin] .device-card__logo[src*="/images/samsung-logo"] { width: 96px; height: 16px; object-fit: cover; object-position: center; }
html[data-skin] .hero__logo[src*="/images/samsung-logo"] { width: 80px; height: 14px; object-fit: cover; object-position: center; }
html[data-skin] .device-card__badge {
  color: #fff; background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
}

/* ---------- Footer ---------- */
.footer { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.025)); border-top-color: var(--hairline); }
:root .footer__logo { font-size: 17px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
:root .footer__logo img { display: none; }
.footer__heading { color: var(--ink-3); font-weight: 600; }
.footer__copy { font-size: 12px; }

/* ---------- Reduced motion (the player's rule: fades of 0.3 s or less, no lifts) ---------- */
@media (prefers-reduced-motion: reduce) {
  :root :is(.card, .device-card, .pricing-card, .country-card):hover { transform: none; }
}

/* ---- The site shell's top bar, phone menu and footer (built from player.css + css/site-src/10-shell.css,
   scoped to the shell's elements) ---- */
:is(.site-top, .site-menu, .site-foot) .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.topbar { position: relative; z-index: 6; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-l); max-width: var(--content-max); height: 76px; margin: 0 auto; padding: 0 var(--page); }
body[data-screen="place"] .topbar { position: absolute; left: 0; right: 0; top: 0; max-width: none; }
:is(.site-top, .site-menu, .site-foot) .wordmark { justify-self: start; display: inline-flex; align-items: center; gap: 0.05em; font-size: 19px; font-weight: 500; letter-spacing: 0.1em; text-decoration: none; text-shadow: var(--text-shadow); }
:is(.site-top, .site-menu, .site-foot) .wordmark__eye { width: 1.28em; height: 0.83em; margin: 0 0.02em; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.3)); }
:is(.site-top, .site-menu, .site-foot) .topnav, :is(.site-top, .site-menu, .site-foot) .seg { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--glass); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: inset 0 0 0 1px var(--glass-edge); }
:is(.site-top, .site-menu, .site-foot) .topnav__link, :is(.site-top, .site-menu, .site-foot) .seg__btn { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: var(--r-pill); font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; transition: background var(--t-quick) var(--ease-quick), color var(--t-quick) var(--ease-quick); }
:is(.site-top, .site-menu, .site-foot) .topnav__link:hover, :is(.site-top, .site-menu, .site-foot) .seg__btn:hover { background: rgba(255, 255, 255, 0.1); }
:is(.site-top, .site-menu, .site-foot) .topnav__link[aria-current="page"], :is(.site-top, .site-menu, .site-foot) .seg__btn[aria-selected="true"], :is(.site-top, .site-menu, .site-foot) .seg__btn[aria-checked="true"] { background: #fff; color: var(--on-accent); }
:is(.site-top, .site-menu, .site-foot) .account { justify-self: end; display: flex; align-items: center; }
:is(.site-top, .site-menu, .site-foot) .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--glass); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: inset 0 0 0 1px var(--glass-edge); font-size: 16px; font-weight: 600; }
:is(.site-top, .site-menu, .site-foot) .avatar--large { width: 64px; height: 64px; font-size: 26px; margin: 0 auto var(--s-l); }
:is(.site-top, .site-menu, .site-foot) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 50px; padding: 0 26px; border-radius: var(--r-pill); font-size: 17px; font-weight: 600; line-height: 1; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; transition: transform var(--t-quick) var(--ease-quick), background var(--t-quick) var(--ease-quick), filter var(--t-quick) var(--ease-quick); }
:is(.site-top, .site-menu, .site-foot) .btn svg { width: 18px; height: 18px; flex: none; }
:is(.site-top, .site-menu, .site-foot) .btn:active { transform: scale(0.97); }
:is(.site-top, .site-menu, .site-foot) .btn[disabled] { opacity: 0.45; cursor: default; transform: none; }
:is(.site-top, .site-menu, .site-foot) .btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); }
:is(.site-top, .site-menu, .site-foot) .btn--primary:hover:not([disabled]) { filter: brightness(0.92); }
:is(.site-top, .site-menu, .site-foot) .btn--glass { background: var(--glass); color: var(--ink); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: inset 0 0 0 1px var(--glass-edge); }
:is(.site-top, .site-menu, .site-foot) .btn--glass:hover:not([disabled]) { background: var(--glass-hover); }
:is(.site-top, .site-menu, .site-foot) .btn--small { height: 38px; padding: 0 16px; font-size: 15px; gap: 7px; }
:is(.site-top, .site-menu, .site-foot) .btn--small svg { width: 16px; height: 16px; }
:is(.site-top, .site-menu, .site-foot) .btn--wide { width: 100%; }
:is(.site-top, .site-menu, .site-foot) .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-m); }
:is(.site-top, .site-menu, .site-foot) .actions--center { justify-content: center; }
:is(.site-top, .site-menu, .site-foot) .round { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--ink); background: var(--glass); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: inset 0 0 0 1px var(--glass-edge); transition: background var(--t-quick) var(--ease-quick); }
:is(.site-top, .site-menu, .site-foot) .round svg { width: 20px; height: 20px; }
:is(.site-top, .site-menu, .site-foot) .round:hover:not([disabled]) { background: var(--glass-hover); }
:is(.site-top, .site-menu, .site-foot) .round[disabled] { opacity: 0.4; cursor: default; }
:is(.site-top, .site-menu, .site-foot) .round--sm { width: 36px; height: 36px; }
:is(.site-top, .site-menu, .site-foot) .round--sm svg { width: 16px; height: 16px; }
:is(.site-top, .site-menu, .site-foot) .pill-premium { position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: var(--r-pill); background: rgba(24, 30, 42, 0.55); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); font-size: 14px; font-weight: 600; color: #fff; }
:is(.site-top, .site-menu, .site-foot) .pill-premium--hero { top: 24px; right: 24px; height: 36px; padding: 0 16px; font-size: 15px; }
:is(.site-top, .site-menu, .site-foot) .pill-added { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: var(--r-pill); background: #fff; color: var(--on-accent); font-size: 13px; font-weight: 600; }
@media (max-width: 700px) {
  .topbar { height: 60px; grid-template-columns: 1fr auto; }
  :is(.site-top, .site-menu, .site-foot) .topnav { display: none; }
  :is(.site-top, .site-menu, .site-foot) .wordmark { font-size: 16px; }
  :is(.site-top, .site-menu, .site-foot) .hero--country .hero__text .actions .btn { height: 44px; padding: 0 18px; font-size: 15px; }
  :is(.site-top, .site-menu, .site-foot) .hero__text .actions .btn { height: 46px; padding: 0 20px; font-size: 16px; }
  :is(.site-top, .site-menu, .site-foot) .account .btn--small { height: 44px; padding: 0 16px; }
  :is(.site-top, .site-menu, .site-foot) .place__bar .btn { height: 52px; }
  :is(.site-top, .site-menu, .site-foot) .journey__text .actions .btn { height: 44px; padding: 0 16px; font-size: 15px; }
}
.is-headset :where(.site-top, .site-menu, .site-foot) .btn { height: 58px; padding: 0 30px; font-size: 19px; }
.is-headset :where(.site-top, .site-menu, .site-foot) .btn--small { height: 46px; font-size: 16px; }
.is-headset :where(.site-top, .site-menu, .site-foot) .topnav__link, .is-headset :where(.site-top, .site-menu, .site-foot) .seg__btn { height: 44px; padding: 0 22px; font-size: 17px; }
.is-headset :where(.site-top, .site-menu, .site-foot) .round { width: 52px; height: 52px; }
@media (hover: none) {
  :is(.site-top, .site-menu, .site-foot) .btn--primary:hover:not([disabled]) { filter: none; }
  :is(.site-top, .site-menu, .site-foot) .btn--glass:hover:not([disabled]), :is(.site-top, .site-menu, .site-foot) .round:hover:not([disabled]) { background: var(--glass); }
}
.site-top { width: 100%; }
.site-top .wordmark { white-space: nowrap; }
:is(.site-top, .site-menu, .site-foot) .site-top--overlay, body[data-screen="place"] .site-top { position: absolute; left: 0; right: 0; top: 0; max-width: none; }
.site-top .topnav { justify-self: center; }
:is(.site-top, .site-menu, .site-foot) .site-top__end { justify-self: end; display: flex; align-items: center; gap: var(--s-s); }
:is(.site-top, .site-menu, .site-foot) .site-top__primary { display: contents; }
.site-top .btn--small svg { width: 16px; height: 16px; }
:is(.site-top, .site-menu, .site-foot) .site-account { display: none; }
html.is-signed-in :where(.site-top, .site-menu, .site-foot) .site-account { display: grid; }
html.is-signed-in :where(.site-top, .site-menu, .site-foot) .site-signin { display: none; }
:is(.site-top, .site-menu, .site-foot) .site-menu-btn { display: none; }
:is(.site-top, .site-menu, .site-foot) .site-search { flex: none; }
body[data-screen="home"] .site-top .site-top__primary .dev-only, body[data-screen="country"] .site-top .site-top__primary .dev-only, body[data-screen="dest-index"] .site-top .site-top__primary .dev-only, body[data-screen="pricing"] .site-top .site-top__primary .dev-only, body[data-screen="collection"] .site-top .site-top__primary .dev-only { display: none !important; }
:is(.site-top, .site-menu, .site-foot) .dev-only { display: none !important; }
html.dev-headset :where(.site-top, .site-menu, .site-foot) .dev-only--headset, html.dev-apple-desktop :where(.site-top, .site-menu, .site-foot) .dev-only--apple-desktop, html.dev-ios :where(.site-top, .site-menu, .site-foot) .dev-only--ios, html.dev-other :where(.site-top, .site-menu, .site-foot) .dev-only--other, html:where(:not(.dev-headset):not(.dev-ios):not(.dev-other):not(.dev-apple-desktop)) :where(.site-top, .site-menu, .site-foot) .dev-only--apple-desktop { display: inline-flex !important; }
:is(.site-top, .site-menu, .site-foot) .dev-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px; font-size: var(--fs-meta); font-weight: 500; color: var(--ink-2); text-decoration: none; }
:is(.site-top, .site-menu, .site-foot) .dev-link:hover { color: #fff; }
:is(.site-top, .site-menu, .site-foot) .dev-link svg { width: 14px; height: 14px; }
:is(.site-top, .site-menu, .site-foot) .dev-actions .dev-link { flex-basis: 100%; min-height: 32px; }
:is(.site-top, .site-menu, .site-foot) .icon-quest { width: 22px !important; height: 12px !important; }
.site-menu { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; gap: var(--s-xl); padding: calc(76px + env(safe-area-inset-top)) var(--page) calc(24px + env(safe-area-inset-bottom)); background: rgb(18, 19, 23); overflow-y: auto; overscroll-behavior: contain; }
.site-menu[hidden] { display: none; }
html.has-menu { overflow: hidden; }
html.has-menu .site-top { position: fixed; left: 0; right: 0; top: 0; z-index: 31; }
:is(.site-top, .site-menu, .site-foot) .site-menu__nav { display: flex; flex-direction: column; }
:is(.site-top, .site-menu, .site-foot) .site-menu__link { display: flex; align-items: center; min-height: 56px; font-size: var(--fs-tile); font-weight: 600; letter-spacing: -0.01em; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--hairline); }
:is(.site-top, .site-menu, .site-foot) .site-menu__link[aria-current="page"] { color: #fff; }
:is(.site-top, .site-menu, .site-foot) .site-menu__actions { display: flex; flex-direction: column; gap: var(--s-m); }
@media (max-width: 1180px) {
  .site-top .site-top__primary .dev-only { display: none !important; }
}
@media (max-width: 860px) {
  .site-top { grid-template-columns: 1fr auto; }
  .site-top .topnav { display: none; }
  :is(.site-top, .site-menu, .site-foot) .site-menu-btn { display: grid; }
}
@media (max-width: 700px) {
  .site-top { height: 60px; }
  .site-top .site-search { display: none; }
  :is(.site-top, .site-menu, .site-foot) .site-signin { height: 44px; padding: 0 16px; }
  :is(.site-top, .site-menu, .site-foot) .site-main { padding-bottom: 64px; }
}
@media (max-width: 359px) {
  :is(.site-top, .site-menu, .site-foot) .site-signin span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  :is(.site-top, .site-menu, .site-foot) .site-signin { width: 44px; padding: 0; }
}
.site-foot { position: relative; margin-top: 64px; border-top: 1px solid var(--hairline); background: rgba(0, 0, 0, 0.35); }
:is(.site-top, .site-menu, .site-foot) .site-foot__inner { max-width: var(--content-max); margin: 0 auto; padding: 48px var(--page) calc(40px + env(safe-area-inset-bottom)); }
:is(.site-top, .site-menu, .site-foot) .site-foot__dest { display: flex; flex-wrap: wrap; gap: var(--s-s); margin-bottom: 48px; }
:is(.site-top, .site-menu, .site-foot) .site-foot__chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-pill); font-size: 15px; font-weight: 500; color: #fff; text-decoration: none; background: var(--glass); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: inset 0 0 0 1px var(--glass-edge); transition: background var(--t-quick) var(--ease-quick); }
:is(.site-top, .site-menu, .site-foot) .site-foot__chip:hover { background: var(--glass-hover); }
:is(.site-top, .site-menu, .site-foot) .site-foot__n { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
:is(.site-top, .site-menu, .site-foot) .site-foot__cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 32px var(--gutter); }
:is(.site-top, .site-menu, .site-foot) .site-foot__col, :is(.site-top, .site-menu, .site-foot) .site-foot__links { display: flex; flex-direction: column; align-items: flex-start; }
:is(.site-top, .site-menu, .site-foot) .site-foot__head { display: flex; align-items: center; justify-content: space-between; list-style: none; font-size: var(--fs-footnote); font-weight: 600; color: #fff; margin-bottom: var(--s-s); }
:is(.site-top, .site-menu, .site-foot) .site-foot__head::-webkit-details-marker { display: none; }
:is(.site-top, .site-menu, .site-foot) .site-foot__head svg { display: none; width: 18px; height: 18px; color: var(--ink-2); transition: transform var(--t-settle) var(--ease-settle); }
@media (min-width: 701px) {
  :is(.site-top, .site-menu, .site-foot) .site-foot__head { pointer-events: none; }
}
:is(.site-top, .site-menu, .site-foot) .site-foot__col a { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--fs-meta); color: var(--ink-2); text-decoration: none; }
:is(.site-top, .site-menu, .site-foot) .site-foot__col a:hover { color: #fff; }
:is(.site-top, .site-menu, .site-foot) .site-foot__base { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-l); margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline); }
:is(.site-top, .site-menu, .site-foot) .wordmark--foot { font-size: 15px; text-shadow: none; }
:is(.site-top, .site-menu, .site-foot) .wordmark--foot .wordmark__eye { filter: none; }
@media (max-width: 700px) {
  :is(.site-top, .site-menu, .site-foot) .site-foot__dest { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 calc(-1 * var(--page)) 28px; padding: 0 var(--page); }
  :is(.site-top, .site-menu, .site-foot) .site-foot__dest::-webkit-scrollbar { display: none; }
  :is(.site-top, .site-menu, .site-foot) .site-foot__chip { flex: none; height: 36px; padding: 0 14px; font-size: 14px; }
  :is(.site-top, .site-menu, .site-foot) .site-foot__cols { display: block; border-top: 1px solid var(--hairline); }
  :is(.site-top, .site-menu, .site-foot) .site-foot__col { border-bottom: 1px solid var(--hairline); align-items: stretch; }
  :is(.site-top, .site-menu, .site-foot) .site-foot__col--top { display: none; }
  :is(.site-top, .site-menu, .site-foot) .site-foot__head { min-height: 48px; margin: 0; font-size: 15px; cursor: pointer; }
  :is(.site-top, .site-menu, .site-foot) .site-foot__head svg { display: block; }
  :is(.site-top, .site-menu, .site-foot) .site-foot__col[open] .site-foot__head svg { transform: rotate(180deg); }
  :is(.site-top, .site-menu, .site-foot) .site-foot__links { padding: 0 0 12px; }
  :is(.site-top, .site-menu, .site-foot) .site-foot__base { margin-top: 28px; }
}
@media (pointer: coarse) {
  :is(.site-top, .site-menu, .site-foot) .site-foot__col a, :is(.site-top, .site-menu, .site-foot) .crumbs a, :is(.site-top, .site-menu, .site-foot) .dev-link, :is(.site-top, .site-menu, .site-foot) .section__link { min-height: 44px; }
  :is(.site-top, .site-menu, .site-foot) .site-foot__chip { height: 44px; }
  :is(.site-top, .site-menu, .site-foot) .dev-actions .dev-link, :is(.site-top, .site-menu, .site-foot) .home-convert__plans, :is(.site-top, .site-menu, .site-foot) .place__see, :is(.site-top, .site-menu, .site-foot) .seg__btn, :is(.site-top, .site-menu, .site-foot) .handoff .btn--small { min-height: 44px; }
  :is(.site-top, .site-menu, .site-foot) .wordmark { min-height: 44px; display: inline-flex; align-items: center; }
}
:is(.site-top, .site-menu, .site-foot) .card, :is(.site-top, .site-menu, .site-foot) .tile { background: color-mix(in srgb, var(--tone, #17181b) 45%, #0b0c0e); }
:is(.site-top, .site-menu, .site-foot) [data-site-sheet][aria-busy="true"] { cursor: progress; }
:is(.site-top, .site-menu, .site-foot) .site-busy { display: inline-block; flex: none; width: 14px; height: 14px; margin-left: 6px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: site-busy 0.8s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  :is(.site-top, .site-menu, .site-foot) .site-busy { animation-duration: 1.6s; }
}
html.is-premium :where(.site-top, .site-menu, .site-foot) .place__lock, html.is-premium :where(.site-top, .site-menu, .site-foot) .place__see { display: none !important; }
.is-headset :where(.site-top, .site-menu, .site-foot) .site-foot__chip { height: 48px; font-size: 17px; }
.is-headset :where(.site-top, .site-menu, .site-foot) .site-foot__col a, .is-headset :where(.site-top, .site-menu, .site-foot) .crumbs a, .is-headset :where(.site-top, .site-menu, .site-foot) .dev-link, .is-headset :where(.site-top, .site-menu, .site-foot) .section__link { min-height: 48px; font-size: 17px; }
.is-headset :where(.site-top, .site-menu, .site-foot) .site-menu__link { min-height: 64px; }
/* On a skinned page the bar stays at the top as the page's own nav did (its layout was drawn for a fixed bar),
   over a soft veil; the player's pill sizes, never v25's page pills. */
.site-top.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; max-width: none; margin: 0; }
.site-top.topbar::before {
  content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.42) 58%, transparent);
}
:is(.site-top, .site-menu, .site-foot) .btn { min-height: 0; }
/* The player's base for buttons inside the shell (critic A 22: the phone menu button showed the browser's
   grey button border on skinned pages). */
:is(.site-top, .site-menu, .site-foot) :where(button) { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
:is(.site-top, .site-menu, .site-foot) .site-menu-btn { border: 0; outline: 0; box-shadow: inset 0 0 0 1px var(--glass-edge); }
.site-foot { position: relative; z-index: 1; }