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

  :root {
    --cream:   #F5F0E8;
    --ink:     #0D0D0B;
    --slide-h: 100svh;
    --gold:    #c8a84b;
    --link-wipe-buffer: 0.18em;
    --pill-breathing-room: clamp(18px, 1.2vw, 28px);
    --word-pill-gap: clamp(0.10em, 0.8vw, 0.18em);
    --word-text-gap: 0.26em;
    --word-link-gap: var(--word-text-gap);
  }

  html, body { width: 100%; min-height: 100%; background: var(--ink); }

  .hero-carousel { position: relative; width: 100%; height: var(--slide-h); overflow: hidden; background: #000; }
  .swiper        { width: 100%; height: 100%; }
  .swiper-slide  { overflow: hidden; position: relative; background: #000; }

  .slide-visual { position: absolute; inset: -20% -10%; width: 120%; height: 140%; background: #000; }
  .hero-carousel .slide-visual video { display: block; background: #000; }
  .slide-visual::after {
    content: ''; position: absolute; inset: 0;
    background:
      linear-gradient(to right, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 65%),
      linear-gradient(to top,   rgba(0,0,0,0.55) 0%, transparent 55%);
  }
  .hero-carousel::before {
    content: ''; position: absolute; inset: 0; z-index: 10; pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 256px;
  }

  .hero-text {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: clamp(2rem, 6vw, 5rem) clamp(2rem, 7vw, 6rem);
    padding-bottom: clamp(4rem, 10vh, 7rem);
    z-index: 20; pointer-events: none;
  }

  .hero-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500; font-size: 0.72rem;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 1rem;
    will-change: transform, opacity;
  }

  .hero-headline {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(2.8rem, 5vw, 7.5rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--cream);
    margin-bottom: 1.5rem;
  }

  .line-mask {
    overflow: hidden; display: block;
    padding-top: 0.15em; padding-bottom: 0.15em;
    margin-top: -0.15em; margin-bottom: -0.15em;
  }
  .line-mask.mobile-hero-line { display: none; }
  .line-inner { display: block; will-change: transform, opacity; }
  .line-inner.has-pill {
    display: flex;
    align-items: baseline;
    white-space: nowrap;
  }


  .desktop-pill-prefix {
    display: inline-block;
    flex-shrink: 0;
    margin-right: 0.18em;
  }

  @media (min-width: 1024px) {
    body.pt-br-page .line-inner.has-pill {
      flex-wrap: wrap;
      align-items: baseline;
      white-space: normal;
      max-width: 9.5em;
    }

    body.pt-br-page .line-inner.has-pill .word-is {
      flex: 0 0 100%;
      margin-left: 0 !important;
    }

    body.es-latam-page .line-inner.has-pill {
      flex-wrap: wrap;
      align-items: baseline;
      white-space: normal;
      max-width: 13em;
    }

    body.es-latam-page .line-inner.has-pill .word-is {
      flex: 0 0 100%;
      margin-left: 0 !important;
    }
  }

  @media (max-width: 1023px) {
    .desktop-pill-prefix {
      display: none;
    }
  }

  /* ============================================================
     CONCEPT 1 — WIPE + TYPE
     Word "link" and pill animate in parallel. Link shrinks
     while pill grows from 0 → 300px (left-to-right).
     ============================================================ */

  .word-link {
    display: inline-block;
    overflow: visible;
    vertical-align: baseline;
    white-space: nowrap;
    padding-right: var(--link-wipe-buffer);
    margin-right: calc(var(--link-wipe-buffer) * -1);
    flex-shrink: 0;
    /* Width is natural (auto) initially; GSAP animates to 0 */
  }

  .word-link.is-wiping {
    overflow: hidden;
  }

  .word-pill {
    display: inline-flex;
    align-items: center;
    vertical-align: baseline;
    position: relative;
    width: 0;                    /* starts hidden */
    overflow: hidden;
    border: 1.5px solid #fff;
    border-radius: 999px;
    background: transparent;
    box-sizing: border-box;
    height: 0.78em;              /* pill height relative to headline */
    /* Nudge to optically center against the surrounding text */
    translate: 0 -0.10em;
    /* Border invisible until pill has any width — prevents a hairline
       artifact when width is 0. We use opacity, not display, for clean transitions. */
    opacity: 0;
  }

  .word-pill.is-revealing,
  .word-pill.is-typing,
  .word-pill.is-locked {
    opacity: 1;
  }

  .word-is {
    display: inline-block;
    /* Initial text state needs a real word space between link and is. */
    margin-left: var(--word-link-gap);
    flex-shrink: 0;
  }

  .line-inner.has-pill.is-pill-mode .word-is {
    /* Once the pill has replaced link, use the tighter pill-to-text gap. */
    margin-left: var(--word-pill-gap);
  }

  /* Inner container holds globe + url text + cursor, padded inside the pill */
  .word-pill__inner {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 0.42em;
    gap: 0.30em;
    white-space: nowrap;
    flex-shrink: 0;
    width: max-content;
  }

  .word-pill__globe {
    display: inline-flex;
    align-items: center;
    color: rgba(245,240,232,0.9);
    flex-shrink: 0;
  }
  .word-pill__globe svg {
    width: 0.42em;
    height: 0.42em;
  }

  .word-pill__text-wrap {
    display: inline-flex;
    align-items: center;
    color: var(--cream);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    font-size: 0.3em;             /* mono URL text — much smaller than headline */
    letter-spacing: 0.005em;
    line-height: 1;
  }

  .word-pill__typed { display: inline-block; }
  .word-pill__tld {
    display: inline-block;
    min-width: 0;
    text-align: left;
    will-change: transform, opacity;
  }

  .word-pill__cursor {
    display: inline-block;
    width: 0.05em;
    height: 1em;
    background: var(--cream);
    margin-left: 0.05em;
    opacity: 0;
    vertical-align: middle;
  }
  .word-pill.is-typing .word-pill__cursor {
    opacity: 1;
    animation: pillBlink 0.9s step-end infinite;
  }
  .word-pill.is-locked .word-pill__cursor {
    animation: none;
    opacity: 0;
  }
  @keyframes pillBlink { 0%,100%{opacity:1} 50%{opacity:0} }

  /* Pulse ring for lock moment */
  .word-pill__pulse {
    display: none;
  }

  /* ─── SUBLINE / CTA / PROGRESS / SCROLL HINT (unchanged) ─── */
  .hero-subline {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    line-height: 1.75;
    color: rgba(245,240,232,0.6);
    margin-bottom: 2.5rem;
    max-width: 48ch;
    will-change: transform, opacity;
  }
  .hero-cta {
    pointer-events: all;
    display: inline-flex; align-items: center;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700; font-size: 0.7rem;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink); background: var(--cream);
    text-decoration: none;
    padding: 0.85rem 1.75rem; border-radius: 1.875rem;
    transition: background 0.3s, color 0.3s;
    align-self: flex-start;
    will-change: transform, opacity;
  }
  .hero-cta:hover { background: #fff; }
  .slide-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; z-index: 30; background: rgba(245,240,232,0.1); }
  .progress-fill  { height: 100%; background: var(--cream); width: 0%; }
  .scroll-hint {
    position: absolute; top: 50%; right: clamp(1.5rem, 3vw, 2.5rem);
    transform: translateY(-50%) rotate(90deg); z-index: 20;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.55rem; letter-spacing: 0.3em; text-transform: uppercase;
    color: rgba(245,240,232,0.28);
    display: flex; align-items: center; gap: 1rem; pointer-events: none;
  }
  .scroll-hint::before { content: ''; width: 40px; height: 1px; background: rgba(245,240,232,0.22); }

  @media (prefers-reduced-motion: reduce) {
    .word-link { width: auto !important; opacity: 1 !important; }
    .word-pill { display: none !important; }
  }



  /* ─── SHARED BASE ─────────────────────────────────────────────────────────── */
  :root {
    --page-bg:      #fafafa;
    --page-card:    #f4f4f4;
    --tile-bg:      #f4f4f4;
    --tile-chrome:  #ececec;
    --card-surface: #ffffff;
    --card-border:  rgba(15, 15, 20, 0.08);
    --mockup-bg:    #f7f7f7;
    --mockup-divider: #e2e2e2;
    --mockup-hero:  #1a1a1e;
    --ink:          #15131a;
    --ink-soft:     #3d3943;
    --muted:        #7a7682;
    --positive:     #2d7a57;
    --alert:        #d64545;
    --device-frame: #1a1a1e;
    --surface:      #ffffff;
    --border:       rgba(15, 15, 20, 0.08);
    --radius-tile:  16px;
    --radius-card:  11px;
    --shadow-deed:  0 2px 4px rgba(15,15,20,0.08), 0 24px 48px -8px rgba(15,15,20,0.22);
  }

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

  html, body {
    background: var(--page-bg);
    font-family: 'Inter', -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--ink);
  }

  /* ─── LAYOUT ──────────────────────────────────────────────────────────────── */
  .demo-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 4rem 2rem;
  }

  .demo-header {
    margin-bottom: 3rem;
  }
  .demo-header h2 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    max-width: 22ch;
  }
  .scroll-handoff .demo-header h2 .heading-break {
    display: none;
  }
  .demo-header .close {
    display: none !important;
  }

  /* One row, three equal columns, cards aligned to top.
     Below 1024px (iPad portrait and smaller), cards stack vertically. */
  .cards-row {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
  }

  @media (max-width: 1023px) {
    .cards-row {
      flex-direction: column;
      align-items: center;
      gap: 2.5rem;
    }
    .page-card {
      flex: none;
      width: 100%;
      max-width: 420px;
    }
  }

  /* ─── SHARED CARD + TILE STYLES ───────────────────────────────────────────── */
  .page-card {
    flex: 1;
    background: var(--page-card);
    border-radius: 18px;
    padding: 2rem 2rem 2.25rem;
    box-shadow: 0 1px 2px rgba(15,15,20,0.03), 0 2px 8px rgba(15,15,20,0.04);
  }

  .page-card .tile-slot {
    margin: 0 auto 1.75rem;
    display: flex;
    justify-content: center;
  }

  .page-card h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 1.875rem;
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
  }

  .page-card p {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 32ch;
  }

  .tile {
    width: 350px;
    height: 300px;
    position: relative;
    border-radius: var(--radius-tile);
    overflow: hidden;
    background: var(--tile-bg);
    box-shadow:
      inset 0 0 0 1px rgba(15,15,20,0.06),
      0 12px 32px -12px rgba(15,15,20,0.18),
      0 4px 12px -4px rgba(15,15,20,0.08);
  }


  /* ═══════════════════════════════════════════════════════════════════════════
     BLOCK 1 — Domain ownership
     ═══════════════════════════════════════════════════════════════════════════ */

  /* Browser chrome */
  .chrome {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 30px;
    background: var(--tile-chrome);
    border-bottom: 1px solid rgba(15,15,20,0.06);
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 8px;
    z-index: 10;
  }
  .traffic { display: flex; gap: 4px; }
  .traffic span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(15,15,20,0.15);
  }
  .address-bar {
    flex: 1;
    background: #fafafa;
    border: 1px solid rgba(15,15,20,0.06);
    border-radius: 5px;
    height: 18px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--ink);
    position: relative;
  }
  .address-bar .lock-mini {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--positive);
    flex-shrink: 0;
  }
  .address-bar .url-text {
    letter-spacing: -0.005em;
    font-variant-numeric: tabular-nums;
  }
  .address-bar .caret {
    display: inline-block;
    width: 1px; height: 9px;
    background: var(--ink);
    vertical-align: middle;
    animation: caret 0.8s steps(2) infinite;
  }
  @keyframes caret { 50% { opacity: 0; } }
  .chrome.done .caret { display: none; }

  /* Block 1 mockup — offset by chrome height */
  #tile-1 .mockup {
    position: absolute;
    top: 30px; left: 0; right: 0; bottom: 0;
    background:
      radial-gradient(ellipse 100% 80% at 50% 40%, rgba(255,255,255,0.6) 0%, transparent 60%),
      var(--mockup-bg);
    z-index: 5;
  }
  #tile-1 .mockup::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(15,15,20,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,15,20,0.035) 1px, transparent 1px);
    background-size: 20px 20px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 40%, transparent 80%);
  }

  .stage {
    position: absolute;
    top: 30px; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    z-index: 15;
    perspective: 1100px;
  }
  .deed {
    width: 240px;
    background: var(--card-surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    padding: 16px 18px 14px;
    box-shadow: var(--shadow-deed);
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(8deg) rotateY(-4deg) translateY(20px) scale(0.96);
    opacity: 0;
    font-family: 'Inter', sans-serif;
    will-change: transform, opacity;
  }
  .deed-label {
    font-size: 9px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 6px;
  }
  .deed-domain {
    font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 20px;
    letter-spacing: -0.025em; color: var(--ink);
    line-height: 1.1; margin-bottom: 10px;
  }
  .deed-meta {
    display: flex; align-items: center; gap: 8px;
    padding-top: 9px;
    border-top: 1px solid rgba(15,15,20,0.06);
  }
  .deed-meta .owner-chip {
    display: flex; align-items: center; gap: 5px;
    font-size: 9.5px; font-weight: 500; color: var(--ink-soft);
  }
  .deed-meta .owner-chip .dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: linear-gradient(135deg, #c5c5c5, #8a8a8a);
    flex-shrink: 0;
  }
  .deed-meta .registered {
    margin-left: auto;
    display: flex; align-items: center; gap: 4px;
    font-size: 9px; font-weight: 600;
    color: var(--positive); letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0; transform: scale(0.6) rotate(-8deg);
  }
  .deed-meta .registered svg {
    width: 11px; height: 11px;
    stroke: currentColor; fill: none;
    stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  }
  .seal {
    position: absolute; top: -18px; right: -18px;
    width: 62px; height: 62px;
    border-radius: 50%;
    background: var(--card-surface);
    border: 1.5px solid var(--ink);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(15,15,20,0.14);
    opacity: 0; transform: scale(0.3) rotate(-18deg);
    transform-origin: center; z-index: 5;
  }
  .seal::before {
    content: '';
    position: absolute; inset: 4px;
    border: 1px dashed rgba(15,15,20,0.35);
    border-radius: 50%;
    animation: sealRingSpin 18s linear infinite;
    animation-play-state: paused;
  }
  .seal.spinning::before { animation-play-state: running; }
  @keyframes sealRingSpin { to { transform: rotate(360deg); } }
  .seal-inner {
    font-family: 'Inter', sans-serif;
    font-weight: 800; font-size: 9px;
    letter-spacing: 0.14em; color: var(--ink);
    text-align: center; line-height: 1;
    position: relative; z-index: 2;
  }

  @media (prefers-reduced-motion: reduce) {
    .deed, .seal, .deed-meta .registered { opacity: 1 !important; transform: none !important; }
  }


  /* ═══════════════════════════════════════════════════════════════════════════
     BLOCK 2 — Suspension-proof notifications
     ═══════════════════════════════════════════════════════════════════════════ */

  /* Block 2 mockup — full tile (no chrome) */
  #tile-2 .mockup {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 100% 80% at 50% 45%, rgba(255,255,255,0.6) 0%, transparent 65%),
      var(--mockup-bg);
    z-index: 5;
  }
  #tile-2 .mockup::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(15,15,20,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,15,20,0.035) 1px, transparent 1px);
    background-size: 20px 20px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 40%, transparent 80%);
  }

  .socials-layer { position: absolute; inset: 0; z-index: 10; }

  .social-orb {
    position: absolute;
    width: 28px; height: 28px;
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 6px 14px rgba(15,15,20,0.14);
    opacity: 0;
    will-change: transform, opacity;
  }
  .social-orb svg { width: 13px; height: 13px; fill: currentColor; }

  /* Clock-face arrangement at radius 102px around tile center (175, 150).
     8 positions every 45°, starting at 12 o'clock. */
  .social-orb.youtube   { background: #ff0000;                                   top:  34px; left: 161px; }  /* 12:00 */
  .social-orb.tiktok    { background: var(--ink);                                top:  64px; left: 233px; }  /*  1:30 */
  .social-orb.telegram  { background: #2aabee;                                   top: 136px; left: 263px; }  /*  3:00 */
  .social-orb.snapchat  { background: #fffc00; color: var(--ink);                top: 208px; left: 233px; }  /*  4:30 */
  .social-orb.threads   { background: #ffffff; color: var(--ink);
                          border: 1px solid rgba(15,15,20,0.1);                  top: 238px; left: 161px; }  /*  6:00 */
  .social-orb.bluesky   { background: #0085ff;                                   top: 208px; left:  89px; }  /*  7:30 */
  .social-orb.x         { background: var(--ink);                                top: 136px; left:  59px; }  /*  9:00 */
  .social-orb.instagram { background: linear-gradient(135deg, #e1306c 0%, #c13584 50%, #833ab4 100%);
                          top:  64px; left:  89px; }  /* 10:30 */

  .flow-center {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 0;
    z-index: 20; height: 52px;
  }
  .flow-icon {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    visibility: hidden; opacity: 0; transform: scale(0.85);
    will-change: transform, opacity, visibility;
  }
  .flow-icon svg.main-icon {
    width: 35px; height: 35px;
    stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }
  .flow-badge {
    position: absolute;
    width: 11px; height: 11px;
    border-radius: 50%;
    border: 2px solid var(--card-surface);
    will-change: transform; z-index: 2;
  }
  .flow-badge.alert {
    bottom: -4px; left: -4px;
    background: var(--alert);
    animation: badgePulse 1.8s ease-in-out infinite;
    animation-play-state: paused;
  }
  .flow-badge.live {
    bottom: -4px; right: -4px;
    background: var(--positive);
    animation: livePulse 1.8s ease-in-out infinite;
    animation-play-state: paused;
  }
  .flow-center.playing .flow-badge { animation-play-state: running; }
  @keyframes badgePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(214, 69, 69, 0.5); }
    50% { transform: scale(1.18); box-shadow: 0 0 0 4px rgba(214, 69, 69, 0); }
  }
  @keyframes livePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(45, 122, 87, 0.5); }
    50% { transform: scale(1.12); box-shadow: 0 0 0 4px rgba(45, 122, 87, 0); }
  }
  .flow-avatar {
    position: absolute;
    width: 35px; height: 35px;
    border-radius: 50%; overflow: hidden;
    border: 2px solid var(--card-surface);
    box-shadow: 0 2px 6px rgba(15,15,20,0.18);
    z-index: 3; visibility: hidden; opacity: 0; transform: scale(0.6);
  }
  .flow-avatar.creator-avatar  { top: -17.5px; left: -17.5px; background: linear-gradient(135deg, #c5a48a, #8a6f55); display:none;}
  .flow-avatar.audience-avatar { top: -17.5px; right: -17.5px; background: #f4f4f4; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); display:none;}
  .flow-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .flow-avatar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  .flow-stream { width: 68px; height: 20px; position: relative; overflow: visible; }
  .flow-dot {
    position: absolute; top: 50%;
    width: 5px; height: 5px;
    border-radius: 50%; background: var(--positive);
    margin-top: -2.5px; opacity: 0; left: 0;
  }
  .flow-center.playing .flow-dot { animation: flowDot 1.6s linear infinite; }
  .flow-dot:nth-child(1) { animation-delay: 0s !important; }
  .flow-dot:nth-child(2) { animation-delay: 0.4s !important; }
  .flow-dot:nth-child(3) { animation-delay: 0.8s !important; }
  .flow-dot:nth-child(4) { animation-delay: 1.2s !important; }
  @keyframes flowDot {
    0%   { left: 0;    opacity: 0; transform: scale(0.4); }
    15%  { opacity: 1; transform: scale(1); }
    85%  { opacity: 1; transform: scale(1); }
    100% { left: 68px; opacity: 0; transform: scale(0.4); }
  }
  .pulse-ring {
    position: absolute; top: 50%; left: 50%;
    width: 78px; height: 78px;
    margin-left: -39px; margin-top: -39px;
    border-radius: 50%;
    border: 1.5px solid rgba(45, 122, 87, 0.45);
    opacity: 0; pointer-events: none; z-index: 12;
  }
  .commitment {
    position: absolute; left: 0; right: 0; bottom: 22px;
    text-align: center; font-size: 10px; font-weight: 500;
    letter-spacing: 0.02em; color: var(--ink-soft);
    padding: 0 24px; z-index: 25;
    opacity: 0; transform: translateY(6px);
  }
  .commitment em { font-style: normal; font-weight: 600; color: var(--ink); }

  @media (prefers-reduced-motion: reduce) {
    .flow-icon, .social-orb, .commitment, .flow-avatar { visibility: visible !important; opacity: 1 !important; transform: none !important; }
    .flow-icon, .flow-avatar { transform: scale(1) !important; }
    .flow-badge, .flow-dot { animation: none !important; }
  }


  /* ═══════════════════════════════════════════════════════════════════════════
     BLOCK 3 — One link, one site
     ═══════════════════════════════════════════════════════════════════════════ */

  .tile-bg-layer {
    position: absolute; inset: 0; z-index: 1;
    background: radial-gradient(ellipse 100% 80% at 50% 45%, rgba(255,255,255,0.5) 0%, transparent 70%);
  }
  .tile-bg-layer::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(15,15,20,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,15,20,0.035) 1px, transparent 1px);
    background-size: 20px 20px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 40%, transparent 80%);
  }
  .tablet {
    position: absolute; top: 32px; left: 118px;
    width: 190px; height: 130px;
    background: var(--device-frame);
    border-radius: 10px; padding: 4px;
    box-shadow: 0 10px 24px -8px rgba(15,15,20,0.3), 0 3px 8px rgba(15,15,20,0.12);
    z-index: 8; will-change: transform;
  }
  .tablet-screen { width: 100%; height: 100%; background: var(--surface); border-radius: 6px; overflow: hidden; position: relative; }
  .tablet-chrome { height: 14px; background: #f2f2f2; display: flex; align-items: center; padding: 0 6px; gap: 4px; border-bottom: 1px solid rgba(15,15,20,0.06); }
  .tablet-chrome .dots { display: flex; gap: 2px; }
  .tablet-chrome .dots span { width: 4px; height: 4px; border-radius: 50%; background: rgba(15,15,20,0.18); }
  .tablet-chrome .url { flex: 1; height: 9px; background: #fff; border: 1px solid rgba(15,15,20,0.08); border-radius: 3px; display: flex; align-items: center; gap: 3px; padding: 0 4px; font-size: 6px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
  .tablet-chrome .url .pad { width: 4px; height: 4px; border-radius: 50%; background: var(--positive); flex-shrink: 0; }
  .tablet-content { position: absolute; top: 14px; left: 0; right: 0; bottom: 0; background: var(--mockup-bg); overflow: hidden; }
  .tablet-hero { position: absolute; top: 0; left: 0; right: 0; height: 30px; background: var(--mockup-hero); opacity: 0; }
  .tablet-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 100% at 30% 50%, rgba(255,255,255,0.08), transparent 50%); }
  .tablet-avatar { position: absolute; top: 12px; left: 50%; margin-left: -17.5px; width: 35px; height: 35px; border-radius: 50%; overflow: hidden; border: 2px solid var(--mockup-bg); z-index: 3; opacity: 0; box-shadow: 0 2px 5px rgba(15,15,20,0.15); transform-origin: center center; }
  .tablet-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tablet-name { position: absolute; top: 53px; left: 0; right: 0; text-align: center; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 9px; letter-spacing: -0.02em; color: var(--ink); opacity: 0; }
  .tablet-tagline { position: absolute; top: 64px; left: 0; right: 0; text-align: center; font-size: 5.5px; color: var(--muted); letter-spacing: 0.01em; opacity: 0; }
  .tablet-grid { position: absolute; top: 105px; left: 12px; right: 12px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 3px; opacity: 0; }
  .tablet-grid .g-cell { aspect-ratio: 1; border-radius: 3px; background: var(--mockup-divider); }
  .tablet-grid .g-cell:nth-child(2) { background: #cfcfcf; }
  .tablet-grid .g-cell:nth-child(3) { background: #dcdcdc; }
  .tablet-grid .g-cell:nth-child(4) { background: #d2d2d2; }
  .phone { position: absolute; top: 112px; left: 42px; width: 76px; height: 156px; background: var(--device-frame); border-radius: 14px; padding: 3px; box-shadow: 0 10px 20px -6px rgba(15,15,20,0.3), 0 3px 6px rgba(15,15,20,0.12); z-index: 10; will-change: transform; transform-origin: center center; }
  .phone-screen { width: 100%; height: 100%; background: var(--surface); border-radius: 10px; overflow: hidden; position: relative; }
  .phone-notch { position: absolute; top: 4px; left: 50%; margin-left: -11px; width: 22px; height: 5px; border-radius: 3px; background: var(--device-frame); z-index: 5; }
  .phone-url { position: absolute; top: 12px; left: 6px; right: 6px; height: 10px; background: #f2f2f2; border-radius: 3px; display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 5.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
  .phone-url .pad { width: 3px; height: 3px; border-radius: 50%; background: var(--positive); flex-shrink: 0; }
  .phone-content { position: absolute; top: 26px; left: 0; right: 0; bottom: 0; padding: 6px; }
  .phone-avatar { width: 35px; height: 35px; border-radius: 50%; margin: 2px auto 3px; overflow: hidden; border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(15,15,20,0.15); transform-origin: center center; }
  .phone-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .phone-name { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 7px; text-align: center; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 1px; }
  .phone-tagline { font-size: 4.5px; text-align: center; color: var(--muted); margin-bottom: 5px; }
  .phone-social-slot { position: absolute; width: 16px; height: 16px; }
  .phone-social-slot[data-phone-slot="0"] { top: 75px; left: 7px; }
  .phone-social-slot[data-phone-slot="1"] { top: 75px; left: 27px; }
  .phone-social-slot[data-phone-slot="2"] { top: 75px; left: 47px; }
  .phone-social-slot[data-phone-slot="3"] { top: 93px; left: 7px; }
  .phone-social-slot[data-phone-slot="4"] { top: 93px; left: 27px; }
  .phone-social-slot[data-phone-slot="5"] { top: 93px; left: 47px; }
  .flying-icon { position: absolute; width: 16px; height: 16px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 3px 8px rgba(15,15,20,0.18); z-index: 15; will-change: transform; opacity: 0; transform-origin: center center; }
  .flying-icon svg { width: 8px; height: 8px; fill: currentColor; }
  .flying-icon.instagram { background: linear-gradient(135deg, #e1306c 0%, #c13584 50%, #833ab4 100%); }
  .flying-icon.tiktok    { background: var(--ink); }
  .flying-icon.youtube   { background: #ff0000; }
  .flying-icon.x         { background: var(--ink); }
  .flying-icon.telegram  { background: #2aabee; }
  .flying-icon.threads   { background: #ffffff; color: var(--ink); border: 1px solid rgba(15,15,20,0.1); box-shadow: 0 3px 8px rgba(15,15,20,0.14); }

  @media (prefers-reduced-motion: reduce) {
    .phone, .tablet, .flying-icon, .phone-avatar, .tablet-avatar { transform: none !important; }
    .flying-icon, .tablet-hero, .tablet-avatar, .tablet-name, .tablet-tagline, .tablet-grid { opacity: 1 !important; }
  }




  /* ============================================================
     COMBINED SCROLL HANDOFF
     ============================================================ */
  :root {
    --handoff-radius: 50px;
    --hero-progress: 0;
    --cards-x: 0px;
    --transition-scroll: 1800px;
    --sticky-y: 0px;
    --handoff-start-space: calc(100svh + 50vw);
    --handoff-end-space: 50vw;
    --handoff-card-gap: clamp(1.5rem, 2.2vw, 2.75rem);
  }

  /* Override final.html original fullscreen lock. The root page, not the body element, must be the scroll container so window.scrollY drives the handoff immediately on the first scroll.
     SPLIT body and html: body MUST have overflow: visible (not even computed-auto) so that sticky descendants — .rdkd-background-sticky and .rdkd-content-sticky in the orbit section — pin to the window scroll. With `body { overflow-x: hidden; overflow-y: visible }`, browsers compute body's overflow-y to `auto` (mixed visible/non-visible is illegal), turning body into a scroll container and breaking sticky. overflow-x: hidden on html alone is enough to prevent horizontal scrollbars. */
  html,
  body {
    height: auto !important;
    min-height: 100%;
  }

  html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    /* Keep the root canvas light. Dark sections draw their own backgrounds;
       a dark html background can show as a black gutter in mobile emulators. */
    background: var(--page-bg, #fafafa);
    scroll-behavior: auto;
  }

  body {
    overflow: visible !important;
    background: var(--page-bg, #fafafa);
  }

  .hero-carousel {
    position: relative;
    z-index: 3;
    clip-path: inset(
      0 0 0 0
      round 0 0
      calc(var(--hero-progress) * var(--handoff-radius))
      calc(var(--hero-progress) * var(--handoff-radius))
    );
    will-change: clip-path, transform;
  }

  .hero-carousel .slide-visual {
    transform: translate3d(0, calc(var(--hero-progress) * 10svh), 0) scale(1.02);
    transform-origin: center;
    will-change: transform;
  }

  .scroll-handoff {
    position: relative;
    z-index: 1;
    margin-top: -100svh;
    height: calc(100svh + var(--transition-scroll));
    min-height: 100svh;
    background: var(--page-bg, #fafafa);
  }

  .scroll-handoff__sticky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    overflow: hidden;
    background: var(--page-bg, #fafafa);
    z-index: 1;
    display: flex;
    align-items: center;
    transform: none;
    will-change: auto;
  }

  .scroll-handoff__sticky.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
  }

  .scroll-handoff__sticky.is-after {
    position: absolute;
    top: var(--transition-scroll);
    left: 0;
  }

  .scroll-handoff__track {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    transform: translate3d(var(--cards-x), 0, 0);
    will-change: transform;
  }

  .scroll-handoff .demo-wrap {
    max-width: none;
    width: max-content;
    margin: 0;
    padding: clamp(2rem, 6vh, 4rem) var(--handoff-end-space) clamp(2rem, 6vh, 4rem) var(--handoff-start-space);
  }

  .scroll-handoff .demo-header {
    max-width: 1320px;
  }

  .scroll-handoff .cards-row {
    width: max-content;
    min-width: 0;
    gap: var(--handoff-card-gap);
  }

  .scroll-handoff .page-card {
    flex: 0 0 416px;
  }

  @media (min-width: 1280px) {
    .scroll-handoff {
      --handoff-card-gap: clamp(0.75rem, 1vw, 1.25rem);
    }

    .scroll-handoff .demo-header h2 {
      font-size: clamp(1.45rem, 1.95vw, 2rem);
      max-width: none;
      white-space: nowrap;
    }

    .scroll-handoff .cards-row {
      align-items: stretch;
    }

    .scroll-handoff .page-card {
      flex: 0 0 clamp(380px, 29vw, 416px);
      display: flex;
      flex-direction: column;
      min-height: 660px;
    }
  }

  @media (min-width: 1280px) and (max-width: 1440px) {
    .scroll-handoff .page-card {
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
  }

  @media (max-width: 1279px) {
    .scroll-handoff {
      margin-top: 0;
      height: auto;
    }
    .scroll-handoff__sticky {
      position: relative;
      height: auto;
      min-height: 100svh;
      overflow: visible;
      display: block;
    }
    .scroll-handoff__track {
      height: auto;
      transform: none !important;
      display: block;
    }
    .scroll-handoff .demo-wrap {
      width: auto;
      padding: 4rem 2rem;
      margin: 0 auto;
      max-width: 1320px;
    }
    .scroll-handoff .cards-row {
      width: auto;
      min-width: 0;
    }
    .scroll-handoff .page-card {
      flex: none;
    }
  }


  /* ════════════════════════════════════════════════════════════════════════════
     RDKD SCROLL / ORBIT SECTION (merged in from rdkd_scroll_orbit_final.html)
     The :root vars from the source have been scoped to .rdkd-scroll so that
     --ink etc. do not override the hero/handoff sections (which use their own
     --ink: #15131a). The progress vars are written by JS to #rdkdScroll
     directly, so the .rdkd-scroll defaults below are just initial values
     before scroll begins.
     Globals (*, html, body, a, img) from the source were dropped — the base
     file already establishes those baselines.
     ════════════════════════════════════════════════════════════════════════════ */
/* ============================================================
       TOKENS
       Colors are placeholders; they are intentionally close to the
       original but easy to swap. The first title line uses a muted
       accent, the last line is solid ink, mirroring matelibre.com.
       ============================================================ */
    .rdkd-scroll {
      --radius-large: 50px;
      --ink: #000000;
      --canvas: #ffffff;
      --accent: #949494;          /* first title line color */
      --container-pad: 6vw;
      --header-height: 70px;

      /* Progress vars — written by JS, consumed by CSS */
      --title-progress: 0;
      --visual-progress: 0;
      --perks-top: 0px;           /* set by JS to ~40% of perks height */
    }

    /* ============================================================
       INTRO / OUTRO
       Low-noise scaffolding so the section under test is the focus.
       ============================================================ */
    .scaffold {
      min-height: 90vh;
      padding: 14vh var(--container-pad);
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f6f3ec;
      text-align: center;
    }
    .scaffold-inner { max-width: 720px; }
    .scaffold h1, .scaffold h2 {
      margin: 0 0 18px;
      font-size: clamp(48px, 8vw, 120px);
      line-height: .88;
      letter-spacing: -0.06em;
      text-transform: lowercase;
      font-weight: 800;
    }
    .scaffold p {
      margin: 0 auto;
      max-width: 540px;
      font-size: clamp(16px, 1.5vw, 20px);
      line-height: 1.4;
      color: #333;
    }

    /* ============================================================
       SECTION ROOT
       ============================================================ */
    .rdkd-scroll {
      position: relative;
      background: var(--canvas);
    }

    /* ============================================================
       TITLE
       Two lines. First sits flush LEFT, second flush RIGHT (≥1000px).
       Each inner span translates by 50% of its OWN width so the
       motion scales with viewport.
       ============================================================ */
    .rdkd-title-wrap {
      position: relative;
      z-index: 4;
      min-height: 50vh;
      display: flex;
      align-items: center;
      padding: 1vh var(--container-pad);
    }

    .rdkd-title {
      position: relative;
      width: 100%;
      margin: 0;
      font-family: 'Playfair Display', serif;
      font-size: clamp(48px, 6vw, 120px);
      line-height: .92;
      letter-spacing: -0.035em;
      text-transform: lowercase;
      font-weight: 500;
    }

    .rdkd-title-line {
      display: block;
      position: relative;
      overflow: visible;
    }

    .rdkd-title-line--first {
      text-align: left;
      color: var(--accent);
    }

    .rdkd-title-line--last {
      color: var(--ink);
    }

    /* The line container is full-width; its inner span sits at the
       respective edge and translates inward by half its own width. */
    .rdkd-title-line-inner {
      display: inline-block;
      will-change: transform;
    }

    @media (min-width: 1000px) {
      .rdkd-title-line--last { text-align: right; }

      .rdkd-title-line--first .rdkd-title-line-inner {
        transform: translate3d(calc(var(--title-progress) * 50%), 0, 0);
      }
      .rdkd-title-line--last .rdkd-title-line-inner {
        transform: translate3d(calc(var(--title-progress) * -50%), 0, 0);
      }
    }

    /* ============================================================
       SEQUENCE CONTAINER
       Wraps perks, content, and the sticky background. Rounded at
       the bottom only (matches original).
       ============================================================ */
    .rdkd-container {
      position: relative;
      clip-path: inset(0 0 0 0 round 0 0 var(--radius-large) var(--radius-large));
    }

    /* ============================================================
       PERKS — credits-roll layer
       Naturally scrolls past the sticky background. Visual-area is
       an absolutely-positioned trigger element used to drive the
       image clip-path reveal. Its top is set to ~40% of perks
       height (matches original), bottom anchored to perks bottom.
       ============================================================ */
    .rdkd-perks {
      position: relative;
      z-index: 3;
      padding: 1vh var(--container-pad) 30vh;
      pointer-events: none;
    }

    .rdkd-visual-area {
      position: absolute;
      top: var(--perks-top, 40%);
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
    }

    .rdkd-perk-list {
      list-style: none;
      margin: 0px auto;
      padding: 0;
      max-width: 345px;
      pointer-events: auto;
    }

    .rdkd-perk-item {
      margin-bottom: clamp(48px, 5vw, 88px);
    }

    .rdkd-perk-item:last-child { margin-bottom: 0; }

    .rdkd-perk-icon {
      width: 50px;
      height: 50px;
      margin-bottom: 14px;
      color: var(--ink);
      transform: rotate(20deg) scale(0);
      opacity: 0;
      transition:
        transform .6s cubic-bezier(.38, .005, .215, 1),
        opacity .6s cubic-bezier(.38, .005, .215, 1);
    }

    .rdkd-perk-icon svg {
      width: 100%;
      height: 100%;
      display: block;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      stroke-linecap: square;
      stroke-linejoin: round;
    }

    .rdkd-perk-item.is-inview .rdkd-perk-icon {
      transform: rotate(0) scale(1);
      opacity: 1;
    }

    .rdkd-perk-label {
      margin: 0 0 8px;
      font-family: 'Playfair Display', serif;
      font-size: clamp(28px, 2vw, 44px);
      line-height: 1.1;
      letter-spacing: -0.02em;
      text-transform: lowercase;
      font-weight: 500;
    }

    .rdkd-perk-text {
      margin: 0;
      font-size: clamp(16px, 1.2vw, 19px);
      line-height: 1.45;
    }

    .rdkd-perk-text sup {
      font-size: .65em;
      vertical-align: super;
    }

    /* ============================================================
       CONTENT — final phase (orbit ring on cream/gray panel)
       180vh tall on desktop. Holds the sticky orbit composition.
       The dark scroll-driven overlay was removed — to be revisited
       once the section's visual treatment is finalized.
       ============================================================ */
    .rdkd-content {
      position: relative;
      z-index: 3;
      height: 180vh;
      margin-top: 10vh;
    }

    .rdkd-content-sticky {
      position: sticky;
      top: 0;
      min-height: 100vh;
      height: 100vh;
      overflow: visible;
    }



    /* ============================================================
       RADIAL COMPRESSION + ORBIT LAYER
       Ported from third_inline_section.html and layered inside the
       final sticky content stage.
       ============================================================ */
    .ring-section {
      position: absolute;
      inset: 0;
      z-index: 2;
      min-height: 100vh;
      height: 100vh;
      overflow: visible;
      pointer-events: auto;
    }

    .ring-anchor {
      position: absolute;
      left: 50%;
      top: 40%;
      transform: translate(-50%, -50%);
      width: 0;
      height: 0;
    }

    .center-text {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 0;
      pointer-events: none;
      white-space: nowrap;
      opacity: 0;
      transition: opacity 0.1s linear;
    }

    .center-text h2 {
      margin: 0;
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.4rem, 3vw, 5.5rem);
      font-weight: 500;
      line-height: 1.05;
      letter-spacing: -0.02em;
      /* Was #fff (read against the dark overlay). Without the overlay,
         the headline now reads against the gray bg-halves (#f4f4f4),
         so we switch to ink. Revisit if/when the overlay returns. */
      color: var(--ink, #15131a);
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    .orbit-wrapper {
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      will-change: transform;
    }

    .avatar {
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 50%;
      overflow: hidden;
      will-change: transform;
      z-index: 1;
      background: #ddd;
    }

    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    @keyframes idleFloat {
      0%, 100% { transform: translate(0, 0); }
      25%      { transform: translate(3px, -2px); }
      50%      { transform: translate(-2px, 3px); }
      75%      { transform: translate(2px, 1px); }
    }

    .ring-section[data-float-mode="float"] .avatar.settled {
      animation: idleFloat var(--float-dur, 5s) ease-in-out var(--float-delay, 0s) infinite;
    }

    /* ============================================================
       BACKGROUND IMAGE
       Sticky behind the perks. Two halves; each is 50% wide and
       contains a 200%-wide image wrapper. The LEFT wrapper is
       anchored left:0; the RIGHT wrapper is anchored right:0. Both
       <img> show the same source — clip-paths reveal each half.
       ============================================================ */
    .rdkd-background {
      position: absolute;
      inset: 0;
      z-index: 1;
      clip-path: inset(0 0 0 0 round 0 0 var(--radius-large) var(--radius-large));
      pointer-events: none;
    }

    .rdkd-background-sticky-area {
      position: absolute;
      top: -100vh;
      bottom: -100vh;
      left: 0;
      width: 100%;
    }

    .rdkd-background-sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
    }

    .rdkd-bg-half {
      position: absolute;
      top: 0;
      height: 100%;
      width: calc(50% + 1px);
      overflow: hidden;
      will-change: clip-path;
    }

    .rdkd-bg-half--left  { left: 0; background-color: #f4f4f4; }
    .rdkd-bg-half--right { right: 0; background-color: #f4f4f4; }

    /* ============================================================
       MOBILE FALLBACK
       Drop title transform; collapse the split-image to a single
       half with 9/5 aspect ratio (matches original).
       ============================================================ */
    @media (max-width: 999px) {
      :root { --radius-large: 30px; }

      .rdkd-title { font-size: clamp(48px, 6vw, 120px); }
      .rdkd-title-line--first,
      .rdkd-title-line--last { text-align: left; }
      .rdkd-title-line-inner { transform: none !important; }

      /* When the split-title animation is disabled, keep the phrase as one
         continuous sentence while preserving the two-color treatment. */
      .rdkd-title-line { display: inline; }
      .rdkd-title-line--first::after { content: " "; }

      .rdkd-perks { padding: 16vh 5vw 24vh; }
      .rdkd-perk-list { max-width: 92vw; }

      .rdkd-content { height: 160vh; }

      .rdkd-background-sticky { height: auto; aspect-ratio: 9 / 5; }
      .rdkd-bg-half { width: 100%; will-change: auto; }
      .rdkd-bg-half--right { display: none; }
      /* Mobile: skip the corner-clip reveal — single full-width half shows
         as a solid panel. JS also short-circuits via matchMedia. */
      .rdkd-bg-half--left { clip-path: none !important; }
    }

    /* ============================================================
       REDUCED MOTION
       Honor the OS-level user preference. Snap to end states.
       ============================================================ */
    @media (prefers-reduced-motion: reduce) {
      .rdkd-title-line-inner,
      .rdkd-perk-icon,
      .center-text h2 {
        transition: none !important;
      }
    }



    /* ============================================================
       FOUNDING CIRCLE BRIDGE
       Adds explanatory copy and CTA below the orbit while preserving
       the grey placeholder circles behind rotating avatar images.
       ============================================================ */
    .rdkd-orbit-copy {
      position: absolute;
      left: 50%;
      bottom: clamp(3.5rem, 8vh, 6rem);
      transform: translateX(-50%);
      z-index: 5;
      width: min(86vw, 560px);
      text-align: center;
      color: var(--ink, #15131a);
    }

    .rdkd-orbit-copy p {
      margin: 0;
      font-size: clamp(1rem, 1.35vw, 1.16rem);
      line-height: 1.55;
      letter-spacing: -0.01em;
      color: rgba(21, 19, 26, 0.74);
    }

    .rdkd-orbit-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      margin: clamp(1.25rem, 2.5vh, 1.75rem) auto 0;
      min-height: 52px;
      padding: 0 1.65rem;
      border-radius: 999px;
      background: var(--ink, #15131a);
      color: #f4f4f4;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-decoration: none;
      transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.25s ease;
    }

    .rdkd-orbit-cta:hover,
    .rdkd-orbit-cta:focus-visible {
      transform: translateY(-2px);
      background: #000;
    }

    .avatar {
      background: #ddd;
    }

    .avatar img {
      opacity: 0;
      transition: opacity 1.05s ease;
    }

    .avatar.is-visible img {
      opacity: 1;
    }

    @media (max-width: 768px) {
      .rdkd-orbit-copy {
        width: min(88vw, 420px);
        bottom: clamp(2rem, 7vh, 4rem);
      }

      .rdkd-orbit-copy p {
        font-size: clamp(0.95rem, 4vw, 1.05rem);
        line-height: 1.52;
      }

      .rdkd-orbit-cta {
        width: 100%;
        min-height: 54px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .avatar img,
      .rdkd-orbit-cta {
        transition: none !important;
      }
    }


  /* ════════════════════════════════════════════════════════════════════════════
     RDKD FAQ ACCORDION
     Inserted above the founding application form. Mirrors the source behavior:
     wrapper rows reveal on scroll, each accordion question toggles an expander
     height animation, and .is-open drives the arrow state.
     ════════════════════════════════════════════════════════════════════════════ */
  .rdkd-faq-section {
    --faq-bg: #f4f4f4;
    --faq-ink: #15131a;
    --faq-muted: rgba(21, 19, 26, 0.62);
    --faq-line: rgba(21, 19, 26, 0.16);
    --faq-line-strong: rgba(21, 19, 26, 0.9);
    --faq-pill: #15131a;
    --faq-pill-ink: #f4f4f4;

    position: relative;
    background: var(--faq-bg);
    color: var(--faq-ink);
    padding: clamp(82px, 13vh, 150px) clamp(24px, 6vw, 80px) clamp(78px, 12vh, 140px);
    font-family: 'Inter', -apple-system, sans-serif;
    overflow: hidden;
  }

  .rdkd-faq-container {
    width: min(100%, 980px);
    margin: 0 auto;
  }

  .rdkd-faq-eyebrow {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(0.7rem, 1vw, 0.78rem);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faq-ink);
    opacity: 0.6;
    margin-bottom: 1.25rem;
  }

  .rdkd-faq-title {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    line-height: 0.95;
    letter-spacing: -0.035em;
    margin: 0 0 clamp(2.8rem, 7vh, 5rem);
    color: var(--faq-ink);
  }

  .rdkd-faq-list {
    position: relative;
    border-top: 1px solid var(--faq-line);
  }

  .rdkd-faq-item {
    position: relative;
    border-bottom: 1px solid var(--faq-line);
    opacity: 1;
  }

  .rdkd-faq-item::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--faq-line-strong);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(.51,.01,.2,1);
    pointer-events: none;
  }

  .rdkd-faq-item.is-open::after {
    transform: scaleX(1);
  }

  .rdkd-faq-question {
    width: 100%;
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    padding: clamp(1.3rem, 3.2vw, 2.35rem) 0;
    text-align: left;
    font: inherit;
  }

  .rdkd-faq-question:focus-visible {
    outline: 2px solid var(--faq-ink);
    outline-offset: 6px;
    border-radius: 4px;
  }

  .rdkd-faq-question-text {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.35rem, 1.7vw, 2.45rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.025em;
    padding-right: 0.5rem;
  }

  .rdkd-faq-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(42px, 5vw, 58px);
    height: clamp(42px, 5vw, 58px);
    border-radius: 999px;
    background: var(--faq-pill);
    color: var(--faq-pill-ink);
    flex-shrink: 0;
    transition: transform 0.45s cubic-bezier(.51,.01,.2,1), background-color 0.35s ease;
  }

  .rdkd-faq-arrow {
    width: 42%;
    height: 42%;
    display: block;
    transform: rotate(90deg);
    transition: transform 0.5s cubic-bezier(.51,.01,.2,1);
  }

  .rdkd-faq-item.is-open .rdkd-faq-arrow {
    transform: rotate(-90deg);
  }

  .rdkd-faq-answer {
    overflow: hidden;
    height: 0;
  }

  .rdkd-faq-answer-inner {
    max-width: 760px;
    padding: 0 clamp(56px, 7vw, 82px) clamp(1.6rem, 4vw, 2.7rem) 0;
  }

  .rdkd-faq-answer-inner p {
    margin: 0 0 1rem;
    color: var(--faq-muted);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.58;
    letter-spacing: -0.01em;
  }

  .rdkd-faq-answer-inner p:last-child {
    margin-bottom: 0;
  }

  .rdkd-faq-answer-inner a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }

  .rdkd-faq-answer-inner code {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.92em;
    color: var(--faq-ink);
    background: rgba(21, 19, 26, 0.06);
    border-radius: 0.35em;
    padding: 0.06em 0.28em;
  }

  @media (max-width: 700px) {
    .rdkd-faq-question {
      gap: 1rem;
    }

    .rdkd-faq-answer-inner {
      padding-right: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .rdkd-faq-item,
    .rdkd-faq-item::after,
    .rdkd-faq-icon,
    .rdkd-faq-arrow,
    .rdkd-faq-answer {
      transition: none !important;
    }
  }

  /* ════════════════════════════════════════════════════════════════════════════
     RDKD FOUNDING APPLICATION FORM
     Lives in the bottom .rdkd-form-section. Variables scoped to the section.
     Visual grammar borrowed from matelibre.com / Lutz: pill-shaped fields,
     dark-fill on hover/focus with text inversion, custom checkbox circle,
     pill submit with translate-label-up effect.
     ════════════════════════════════════════════════════════════════════════════ */
  .rdkd-form-section {
    /* Section-scoped tokens — easy to swap palette without touching descendants */
    --form-section-bg: #f4f4f4;
    --form-section-ink: #15131a;
    --form-section-cream: #f4f4f4;
    --form-field-bg: #e4e4e4;
    --form-field-ink: #15131a;
    --form-field-placeholder: rgba(21, 19, 26, 0.55);
    --form-field-bg-active: #15131a;
    --form-field-ink-active: #f4f4f4;
    --form-field-placeholder-active: rgba(244, 244, 244, 0.55);
    --form-error: #d64545;
    --form-success: #2d7a57;
    --form-pill-radius: 999px;
    --form-field-h: clamp(56px, 6vh, 72px);

    position: relative;
    background: var(--form-section-bg);
    color: var(--form-section-ink);
    padding: clamp(80px, 14vh, 160px) clamp(24px, 6vw, 80px) clamp(64px, 10vh, 120px);
    font-family: 'Inter', -apple-system, sans-serif;
    overflow: hidden;
  }

  .rdkd-form-container {
    max-width: 720px;
    margin: 0 auto;
  }

  .rdkd-form-eyebrow {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(0.7rem, 1vw, 0.78rem);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--form-section-ink);
    opacity: 0.6;
    margin-bottom: 1.25rem;
  }

  .rdkd-form-title {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 1rem;
    color: var(--form-section-ink);
  }

  .rdkd-form-intro {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.5;
    color: var(--form-section-ink);
    opacity: 0.7;
    margin: 0 0 clamp(2.5rem, 5vh, 4rem);
    max-width: 52ch;
  }

  .rdkd-form {
    position: relative;
  }

  .rdkd-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(0.875rem, 1.6vw, 1.25rem);
    margin-bottom: clamp(1.5rem, 3vh, 2.25rem);
  }

  @media (max-width: 700px) {
    .rdkd-form-grid {
      grid-template-columns: 1fr;
    }
  }

  .rdkd-form-item {
    position: relative;
  }

  .rdkd-form-item--full {
    grid-column: 1 / -1;
  }

  /* ─── Pill input ───────────────────────────────────────────────────────── */
  .rdkd-form-input {
    width: 100%;
    height: var(--form-field-h);
    border-radius: var(--form-pill-radius);
    background: var(--form-field-bg);
    color: var(--form-field-ink);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    line-height: 1;
    padding: 0 clamp(20px, 2.5vw, 32px);
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    transition:
      background-color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
      color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
      border-color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .rdkd-form-input::placeholder {
    color: var(--form-field-placeholder);
    opacity: 1;
    transition: color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.3s;
  }

  .rdkd-form-input:hover,
  .rdkd-form-input:focus {
    background: var(--form-field-bg-active);
    color: var(--form-field-ink-active);
  }

  .rdkd-form-input:hover::placeholder,
  .rdkd-form-input:focus::placeholder {
    color: var(--form-field-placeholder-active);
  }

  .rdkd-form-input:focus::placeholder {
    opacity: 0;
  }

  .rdkd-form-input.is-invalid {
    border-color: var(--form-error);
  }

  /* Cross-browser autofill polish — keep our dark-fill aesthetic */
  .rdkd-form-input:-webkit-autofill,
  .rdkd-form-input:-webkit-autofill:hover,
  .rdkd-form-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--form-field-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--form-field-bg) inset;
    transition: background-color 5000s ease-in-out 0s;
  }

  /* ─── X handle: prefix INSIDE the same pill ────────────────────────────── */
  .rdkd-form-prefixed {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--form-field-h);
    border-radius: var(--form-pill-radius);
    background: var(--form-field-bg);
    color: var(--form-field-ink);
    border: 1px solid transparent;
    overflow: hidden;
    transition:
      background-color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
      color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
      border-color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .rdkd-form-prefixed:hover,
  .rdkd-form-prefixed:focus-within {
    background: var(--form-field-bg-active);
    color: var(--form-field-ink-active);
  }

  .rdkd-form-prefixed.is-invalid {
    border-color: var(--form-error);
  }

  .rdkd-form-prefix {
    flex-shrink: 0;
    padding: 0 0.35rem 0 clamp(20px, 2.5vw, 32px);
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    line-height: 1;
    color: var(--form-field-placeholder);
    user-select: none;
    pointer-events: none;
    transition: color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    /* nudge for optical alignment with the input baseline */
    transform: translateY(-0.5px);
  }

  .rdkd-form-prefixed:hover .rdkd-form-prefix,
  .rdkd-form-prefixed:focus-within .rdkd-form-prefix {
    color: var(--form-field-placeholder-active);
  }

  /* The input nested inside .rdkd-form-prefixed inherits the pill's bg/color
     so the prefix and input visually merge into one continuous pill. */
  .rdkd-form-prefixed > .rdkd-form-input {
    flex: 1;
    height: 100%;
    background: transparent !important;
    color: inherit;
    border: 0;
    padding: 0 clamp(20px, 2.5vw, 32px) 0 0;
    border-radius: 0;
  }

  .rdkd-form-prefixed > .rdkd-form-input:hover,
  .rdkd-form-prefixed > .rdkd-form-input:focus {
    background: transparent !important;
    color: inherit;
  }

  /* ─── Honeypot — visually hidden but reachable to bots ─────────────────── */
  .rdkd-form-hp {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }

  /* ─── Inline field error ───────────────────────────────────────────────── */
  .rdkd-form-error {
    display: block;
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    padding-left: clamp(20px, 2.5vw, 32px);
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--form-error);
    transition: max-height 0.3s ease, margin-top 0.3s ease;
  }

  .rdkd-form-item.is-invalid .rdkd-form-error {
    max-height: 3em;
    margin-top: 0.5rem;
  }

  /* ─── Custom checkbox: cream-bordered circle, fills with ink on check ─── */
  .rdkd-form-consent {
    margin-bottom: 1.25rem;
  }

  .rdkd-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    cursor: pointer;
    user-select: none;
  }

  .rdkd-checkbox input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    margin: 0;
  }

  .rdkd-checkbox-box {
    flex-shrink: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--form-section-ink);
    background: transparent;
    margin-top: 0.15rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .rdkd-checkbox input[type="checkbox"]:checked + .rdkd-checkbox-box {
    background: var(--form-section-ink);
  }

  .rdkd-checkbox input[type="checkbox"]:focus-visible + .rdkd-checkbox-box {
    outline: 2px solid var(--form-section-ink);
    outline-offset: 3px;
  }

  .rdkd-form-consent.is-invalid .rdkd-checkbox-box {
    border-color: var(--form-error);
  }

  .rdkd-checkbox-label {
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    line-height: 1.5;
    color: var(--form-section-ink);
  }

  .rdkd-form-consent .rdkd-form-error {
    padding-left: calc(20px + 0.875rem);
  }

  /* ─── Supporting note (smaller copy) ───────────────────────────────────── */
  .rdkd-form-note {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--form-section-ink);
    opacity: 0.55;
    margin: 0 0 clamp(2rem, 4vh, 3rem);
    max-width: 60ch;
  }

  /* ─── Turnstile widget slot (rendered when sitekey is configured) ──────── */
  .rdkd-form-turnstile {
    margin-bottom: clamp(1.5rem, 3vh, 2.25rem);
    min-height: 0;
    transition: min-height 0.3s ease;
  }

  .rdkd-form-turnstile:not(:empty) {
    min-height: 65px;
  }

  /* ─── Submit button: pill, scale on hover, translate-label-up ──────────── */
  .rdkd-form-submit {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    min-width: clamp(220px, 30vw, 320px);
    height: var(--form-field-h);
    position: relative;
    padding: 0 clamp(28px, 3vw, 40px);
    color: var(--form-section-cream);
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    font-weight: 500;
    letter-spacing: -0.005em;
    cursor: pointer;
    box-sizing: border-box;
    transform: translateZ(0);
    -webkit-tap-highlight-color: transparent;
  }

  .rdkd-form-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--form-pill-radius);
    z-index: -1;
    transform-origin: 50% 50%;
    background: var(--form-section-ink);
    transition:
      transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
      background-color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform-style: preserve-3d;
  }

  .rdkd-form-submit:hover::before,
  .rdkd-form-submit:focus-visible::before {
    transform: scale(1.04) translateZ(0);
  }

  .rdkd-form-submit:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .rdkd-form-submit:disabled:hover::before {
    transform: none;
  }

  .rdkd-form-submit-label {
    position: relative;
    display: inline-block;
    overflow: hidden;
    line-height: 1;
  }

  .rdkd-form-submit-label > span {
    display: block;
    transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition-delay: 0.01s;
  }

  .rdkd-form-submit-label > span:nth-child(2) {
    position: absolute;
    inset: 0;
    transform: translate3d(0, calc(100% + 0.2em), 0);
  }

  .rdkd-form-submit:hover .rdkd-form-submit-label > span:nth-child(1),
  .rdkd-form-submit:focus-visible .rdkd-form-submit-label > span:nth-child(1) {
    transform: translate3d(0, calc(-100% - 0.2em), 0);
  }

  .rdkd-form-submit:hover .rdkd-form-submit-label > span:nth-child(2),
  .rdkd-form-submit:focus-visible .rdkd-form-submit-label > span:nth-child(2) {
    transform: translate3d(0, 0, 0);
  }

  /* ─── Status line (success / error after submit) ───────────────────────── */
  .rdkd-form-status {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.4;
    white-space: pre-line;
    color: var(--form-section-ink);
    opacity: 0;
    min-height: 1.4em;
    transition: opacity 0.4s ease;
  }

  .rdkd-form-status.is-visible {
    opacity: 1;
  }

  .rdkd-form-status.is-success {
    color: var(--form-success);
  }

  .rdkd-form-status.is-error {
    color: var(--form-error);
  }

  .rdkd-form-success {
    display: none;
    margin-top: 0.5rem;
    padding: clamp(24px, 3vw, 36px);
    border-radius: 24px;
    background: rgba(13, 13, 11, 0.04);
    color: var(--form-section-ink);
    white-space: pre-line;
  }

  .rdkd-form-success.is-visible {
    display: block;
  }

  .rdkd-form-success-title {
    display: block;
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.6rem, 2.8vw, 2.3rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }

  .rdkd-form-success-copy {
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.7;
    color: rgba(13, 13, 11, 0.84);
  }

  .rdkd-form.is-submitted .rdkd-form-grid,
  .rdkd-form.is-submitted .rdkd-form-consent,
  .rdkd-form.is-submitted .rdkd-form-note,
  .rdkd-form.is-submitted .rdkd-form-turnstile,
  .rdkd-form.is-submitted .rdkd-form-submit,
  .rdkd-form.is-submitted .rdkd-form-status {
    display: none !important;
  }

  /* ─── Reveal-on-scroll ─────────────────────────────────────────────────── */
  .rdkd-form-fx {
    opacity: 0;
    transform: translateY(40px);
    transition:
      opacity 0.7s cubic-bezier(0.215, 0.61, 0.355, 1),
      transform 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .rdkd-form-fx.is-inview {
    opacity: 1;
    transform: translateY(0);
  }

  .rdkd-form-fx:nth-child(1) { transition-delay: 0s; }
  .rdkd-form-fx:nth-child(2) { transition-delay: 0.06s; }
  .rdkd-form-fx:nth-child(3) { transition-delay: 0.12s; }
  .rdkd-form-fx:nth-child(4) { transition-delay: 0.18s; }
  .rdkd-form-fx:nth-child(5) { transition-delay: 0.24s; }
  .rdkd-form-fx:nth-child(6) { transition-delay: 0.3s; }
  .rdkd-form-fx:nth-child(7) { transition-delay: 0.36s; }
  .rdkd-form-fx:nth-child(8) { transition-delay: 0.42s; }
  .rdkd-form-turnstile.rdkd-form-fx,
  .rdkd-form-submit.rdkd-form-fx {
    transition-delay: 0.36s;
  }

  @media (prefers-reduced-motion: reduce) {
    .rdkd-form-fx,
    .rdkd-form-input,
    .rdkd-form-prefixed,
    .rdkd-form-prefix,
    .rdkd-form-submit,
    .rdkd-form-submit::before,
    .rdkd-form-submit-label > span,
    .rdkd-checkbox-box,
    .rdkd-form-status {
      transition: none !important;
    }
    .rdkd-form-fx {
      opacity: 1;
      transform: none;
    }
  }

  /* ════════════════════════════════════════════════════════════════════════════
     UNIFIED MOBILE — spacing + display-scale tightening
     Last in the style block so it wins the cascade vs. earlier section
     rules. Targets the ≤768px breakpoint as the primary mobile boundary;
     the earlier ≤999px and ≤700px rules handle their specific concerns
     (orbit collapse, form grid collapse, etc.).
     ════════════════════════════════════════════════════════════════════════════ */
  @media (max-width: 768px) {
    /* Section padding — bring all sections to a consistent rhythm */
    .scroll-handoff__sticky {
      padding: 4rem 1.25rem;
    }
    .scroll-handoff .demo-wrap {
      padding: 0;
    }

    .rdkd-title-wrap {
      min-height: 40vh;
      padding: 8vh 1.25rem 2vh;
    }

    .rdkd-perks {
      padding: 8vh 1.25rem 16vh;
    }
    .rdkd-perk-list {
      gap: 14vh;
    }

    .rdkd-faq-section {
      padding: clamp(56px, 9vh, 80px) 1.25rem clamp(48px, 8vh, 72px);
    }

    .rdkd-form-section {
      padding: clamp(56px, 10vh, 96px) 1.25rem clamp(48px, 8vh, 80px);
    }

    /* Display-scale tightening — Playfair gets very tall at large sizes,
       which crowds mobile viewports. Pull peaks down at the breakpoint. */
    .rdkd-title { font-size: clamp(40px, 11vw, 72px); }
    .rdkd-faq-title { font-size: clamp(2rem, 4.5vw, 3.5rem); margin-bottom: clamp(2rem, 5vh, 3rem); }
    .rdkd-faq-question-text { font-size: clamp(1.15rem, 4.6vw, 1.6rem); }
    .rdkd-form-title { font-size: clamp(1.7rem, 7vw, 2.4rem); }
    .center-text h2 { font-size: clamp(2rem, 8vw, 3rem); }

    /* Form spacing tightening */
    .rdkd-form-grid {
      gap: 0.75rem;
      margin-bottom: 1.25rem;
    }
    .rdkd-form-intro {
      margin-bottom: clamp(1.75rem, 4vh, 2.5rem);
    }

    /* Orbit avatars get tight on small screens — drop ring radius
       proportionally so the compact orbit isn't oversized */
    .center-text {
      max-width: 88vw;
      white-space: normal;
    }
  }


  /* ════════════════════════════════════════════════════════════════════════════
     RDKD PATCH — mobile/tablet layout fixes, 2026-04-28
     Scope: preserve desktop behavior while stabilizing the mobile and tablet
     ranges independently. Desktop rules remain untouched above 1279px.
     ════════════════════════════════════════════════════════════════════════════ */

  @media (max-width: 1023px) {
    .line-mask.desktop-hero-line { display: none; }
    .line-mask.mobile-hero-line { display: block; }

    .hero-headline {
      font-size: clamp(2rem, 8.5vw, 2.65rem);
      line-height: 1.05;
      margin-bottom: 1.35rem;
    }

    .line-inner.has-pill {
      max-width: 100%;
      min-width: 0;
    }

    .word-pill {
      max-width: calc(100vw - 7rem);
      flex: 0 1 auto;
    }

    .word-pill__inner {
      min-width: 0;
      padding: 0 0.45em;
      gap: 0.3em;
    }

    .word-pill__text-wrap {
      font-size: 0.26em;
      letter-spacing: -0.01em;
    }

    .word-pill__globe svg {
      width: 0.36em;
      height: 0.36em;
    }
  }

  @media (min-width: 769px) and (max-width: 1279px) {
    .scroll-handoff {
      margin-top: 0;
      height: auto;
      min-height: auto;
    }

    .scroll-handoff__sticky {
      position: relative;
      height: auto;
      min-height: auto;
      overflow: visible;
      display: block;
      padding: clamp(4rem, 8vh, 6rem) clamp(2rem, 6vw, 4rem);
    }

    .scroll-handoff__track {
      height: auto;
      transform: none !important;
      display: block;
    }

    .scroll-handoff .demo-wrap {
      width: 100%;
      max-width: 720px;
      margin: 0 auto;
      padding: 0;
    }

    .scroll-handoff .demo-header {
      width: 100%;
      max-width: 640px;
      margin: 0 auto 2rem;
      text-align: center;
    }

    .scroll-handoff .demo-header h2 {
      max-width: 30ch;
      margin-left: auto;
      margin-right: auto;
      white-space: normal;
    }

    .scroll-handoff .demo-header h2 .heading-break--tablet {
      display: block;
    }

    .scroll-handoff .cards-row {
      width: 100%;
      min-width: 0;
      flex-direction: column;
      align-items: center;
      gap: 2.75rem;
    }

    .scroll-handoff .page-card {
      flex: none;
      width: 100%;
      max-width: 640px;
      padding: 2rem;
      overflow: visible;
    }

    .scroll-handoff .page-card .tile-slot {
      width: 100%;
      max-width: 350px;
      margin-left: auto;
      margin-right: auto;
      overflow: visible;
    }

    .scroll-handoff .tile {
      width: 350px;
      max-width: 100%;
      height: 300px;
    }

    .scroll-handoff .page-card h3,
    .scroll-handoff .page-card p {
      max-width: 350px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 0;
      padding-right: 0;
    }
  }

  @media (min-width: 769px) and (max-width: 999px) {
    /* Prevent the orbit-section mobile fallback background layer from painting
       behind the perks on tablet widths. The persistent grey treatment is
       phone-only below; tablets should stay visually neutral until the
       Founders section proper. */
    .rdkd-background {
      display: none !important;
    }

    .rdkd-content,
    .rdkd-content-sticky,
    .ring-section {
      background: transparent;
      border-radius: 0;
    }
  }

  @media (max-width: 768px) {
    .scroll-handoff .page-card {
      width: 100%;
      max-width: 420px;
      padding-left: clamp(1rem, 4vw, 2rem);
      padding-right: clamp(1rem, 4vw, 2rem);
      overflow: visible;
    }

    .scroll-handoff .page-card .tile-slot {
      width: 100%;
      max-width: 350px;
      overflow: visible;
    }

    .scroll-handoff .tile {
      width: 100%;
      max-width: 350px;
      height: 300px;
    }

    .scroll-handoff .demo-header,
    .scroll-handoff .page-card h3,
    .scroll-handoff .page-card p {
      padding-left: 0;
      padding-right: 0;
    }

    .rdkd-container {
      clip-path: none;
    }

    .rdkd-background {
      display: none !important;
    }

    .rdkd-content,
    .rdkd-content-sticky,
    .ring-section {
      background: #f4f4f4;
      border-radius: 0;
    }

    .center-text {
      opacity: 1 !important;
      transition: none !important;
    }
  }

  @media (max-width: 380px) {
    .scroll-handoff__sticky {
      padding-left: 0;
      padding-right: 0;
    }

    .scroll-handoff .demo-wrap {
      width: 100%;
      max-width: 100vw;
      padding-left: 0;
      padding-right: 0;
    }

    .scroll-handoff .page-card {
      max-width: 100vw;
      padding-left: 0;
      padding-right: 0;
      border-radius: 0;
    }

    .scroll-handoff .page-card .tile-slot {
      width: min(350px, 100vw);
      max-width: 100vw;
    }

    .scroll-handoff .tile {
      width: min(350px, 100vw);
      max-width: 100vw;
    }

    .scroll-handoff .demo-header,
    .scroll-handoff .page-card h3,
    .scroll-handoff .page-card p {
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
  }



  /* CoS v4 mobile emulator containment fix.
     The debugger showed no active document-level horizontal overflow, but
     mobile emulators can expose the root canvas beside sections when the
     visual viewport differs from the layout viewport. Keep the root/page light
     and prevent the orbit section's intentionally offscreen avatars from
     contributing internal horizontal scroll width on phone widths. */
  @media (max-width: 768px) {
    html,
    body {
      background: var(--page-bg, #fafafa);
    }

    .rdkd-scroll,
    .rdkd-container,
    .rdkd-content,
    .rdkd-content-sticky,
    .ring-section {
      max-width: 100%;
      overflow-x: clip;
    }
  }


  /* RDKD FLOATING MENU WITH PERSISTENT BRAND PILL */
  .rdkd-menu-shell {
    --menu-ink: #15131a; --menu-paper: #ffffff; --menu-paper-soft: rgba(255, 255, 255, 0.62);
    --menu-paper-line: rgba(255, 255, 255, 0.14); --menu-paper-line-strong: rgba(255, 255, 255, 0.24);
    --menu-accent: #f4f4f4; --menu-accent-soft: rgba(244, 244, 244, 0.72);
    --menu-size: 56px; --menu-radius: 22px; --menu-closed-w: 260px;
    --menu-shadow: 0 14px 32px rgba(0, 0, 0, 0.18), 0 3px 10px rgba(0, 0, 0, 0.10);
    position: fixed; top: 18px; right: 18px; z-index: 9999; width: var(--menu-closed-w); height: var(--menu-size);
    border-radius: 999px; overflow: hidden; background: var(--menu-ink); color: var(--menu-paper); box-shadow: var(--menu-shadow);
    transform: translateZ(0); will-change: width, height, border-radius; font-family: 'Inter', -apple-system, sans-serif;
  }
  .rdkd-menu-shell.is-open { border-radius: var(--menu-radius); }
  .rdkd-brand-mark {
    display: block;
    object-fit: contain;
    flex: 0 0 auto;
  }
  .rdkd-brand-mark--menu {
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
  }
  .rdkd-brand-mark--footer {
    width: 60px;
    height: 60px;
    max-width: 60px;
    max-height: 60px;
  }
  .rdkd-menu-collapsed-brand {
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    z-index: 3; pointer-events: none; font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--menu-paper); white-space: nowrap;
    opacity: 0.92; transition: opacity 0.22s ease;
    display: inline-flex; align-items: center; gap: 0.75rem;
    max-width: calc(100% - var(--menu-size) - 24px);
    overflow: visible;
  }
  .rdkd-menu-collapsed-brand > span { min-width: 0; overflow: visible; white-space: nowrap; }
  .rdkd-menu-shell.is-open .rdkd-menu-collapsed-brand { opacity: 0; }
  .rdkd-menu-toggle {
    position: absolute; top: 0; right: 0; width: var(--menu-size); height: var(--menu-size);
    border: 0; border-radius: 999px; padding: 0; cursor: pointer; background: var(--menu-paper); color: var(--menu-ink);
    display: grid; place-items: center; z-index: 4; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(21, 19, 26, 0.08);
  }
  .rdkd-menu-toggle__inner { width: 100%; height: 100%; border-radius: 999px; display: grid; place-items: center; transform: translateZ(0); will-change: transform; }
  .rdkd-menu-toggle__lines { position: relative; width: 22px; height: 16px; overflow: hidden; }
  .rdkd-menu-line { position: absolute; left: 0; width: 22px; height: 1.5px; border-radius: 999px; background: currentColor; transform-origin: center; will-change: transform, top, opacity; }
  .rdkd-menu-line.top { top: 1px; } .rdkd-menu-line.mid { top: 7.25px; } .rdkd-menu-line.bot { top: 13.5px; }
  .rdkd-menu-inner { display: none; opacity: 0; min-height: 100%; padding: 22px 80px 22px 22px; color: var(--menu-paper); }
  .rdkd-menu-brand { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--menu-accent); margin-bottom: 22px; padding-top: 4px; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.75rem; }
  .rdkd-menu-list { display: grid; gap: 2px; padding: 16px 0 12px; border-top: 1px solid var(--menu-paper-line); border-bottom: 1px solid var(--menu-paper-line); }
  .rdkd-menu-link { position: relative; display: flex; align-items: baseline; min-height: 46px; color: var(--menu-paper); text-decoration: none; font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 400; letter-spacing: -0.005em; line-height: 1.05; padding: 0 4px 0 0; }
  .rdkd-menu-link .num { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; color: var(--menu-accent-soft); margin-right: 14px; transform: translateY(-3px); }
  .rdkd-menu-link .arr { width: 14px; flex: 0 0 14px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; color: var(--menu-accent); opacity: 0; transform: translateX(-10px); margin-left: 8px; }
  .rdkd-menu-link .txt { display: inline-block; transform: translateX(0); will-change: transform; }
  .rdkd-menu-cta { position: relative; margin-top: 18px; display: inline-flex; align-items: center; width: max-content; min-height: 50px; padding: 13px 54px 13px 20px; color: var(--menu-paper); text-decoration: none; border-radius: 999px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden; font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; }
  .rdkd-menu-cta .cta-arr { position: absolute; top: 50%; right: 6px; width: 38px; height: 38px; margin-top: -19px; border-radius: 999px; background: var(--menu-accent); display: grid; place-items: center; overflow: hidden; }
  .rdkd-menu-cta .cta-arr span { display: block; font-size: 16px; line-height: 1; color: var(--menu-ink); will-change: transform; }
  .rdkd-menu-lang { margin-top: 20px; display: flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; color: var(--menu-paper-soft); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; }
  .rdkd-menu-lang button { border: 1px solid var(--menu-paper-line-strong); border-radius: 999px; background: transparent; color: var(--menu-paper); padding: 6px 9px 4px; font-family: inherit; font-size: inherit; letter-spacing: inherit; line-height: 1; cursor: pointer; }
  .rdkd-menu-lang button[aria-current="true"] { background: var(--menu-accent); color: var(--menu-ink); border-color: var(--menu-accent); }
  .rdkd-menu-lang button[disabled] { cursor: not-allowed; opacity: 0.42; }
  @media (max-width: 680px) { .rdkd-menu-shell { --menu-size: 52px; --menu-closed-w: min(260px, calc(100vw - 24px)); top: 12px; right: 12px; } .rdkd-menu-collapsed-brand { left: 14px; font-size: 9px; letter-spacing: 0.12em; gap: 0.55rem; max-width: calc(100% - var(--menu-size) - 24px); } .rdkd-menu-inner { padding: 18px 70px 18px 18px; } .rdkd-menu-link { font-size: 18px; } .rdkd-brand-mark--menu { width: 40px; height: 40px; max-width: 40px; max-height: 40px; } .rdkd-brand-mark--footer { width: 44px; height: 44px; max-width: 44px; max-height: 44px; } .rdkd-site-footer__brand-lockup { gap: 0.85rem; } }
  @media (prefers-reduced-motion: reduce) { .rdkd-menu-shell, .rdkd-menu-line, .rdkd-menu-link .arr, .rdkd-menu-link .txt, .rdkd-menu-cta .cta-arr span { transition: none !important; animation: none !important; } }

  .lang-overlay {
    position: fixed; inset: 0; z-index: 10050;
    display: grid; place-items: center;
    background: rgba(21, 19, 26, 0.12);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.32s ease;
  }
  .lang-overlay.is-open {
    opacity: 1; pointer-events: auto;
  }
  .lang-modal {
    position: relative;
    width: min(440px, 86vw);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    color: var(--ink);
    box-shadow:
      0 2px 10px rgba(0, 0, 0, 0.1),
      0 2px 2px rgba(0, 0, 0, 0.18),
      inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    transform: scale(0.92);
    opacity: 0;
    transition: transform 0.42s cubic-bezier(.2, .9, .3, 1.2), opacity 0.32s ease;
    display: grid;
    place-items: center;
    padding: clamp(36px, 5vw, 56px);
  }
  .lang-overlay.is-open .lang-modal {
    transform: scale(1);
    opacity: 1;
  }
  .lang-modal__inner {
    width: 100%;
    max-width: 280px;
    text-align: center;
    display: grid;
    gap: 14px;
  }
  .lang-modal__eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .lang-modal__title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(20px, 2.6vw, 24px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink);
  }
  .lang-modal__bar {
    display: flex;
    border: 1px solid rgba(21, 19, 26, 0.18);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 4px;
  }
  .lang-opt {
    flex: 1;
    appearance: none; -webkit-appearance: none;
    cursor: pointer;
    background: #fff;
    color: var(--ink-soft);
    border: 0;
    border-right: 1px solid rgba(21, 19, 26, 0.18);
    padding: 11px 6px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.005em;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: normal;
    min-height: 44px;
  }
  .lang-opt:last-child { border-right: 0; }
  .lang-opt:hover[aria-pressed="false"] {
    background: #f4f4f4;
    color: var(--ink);
  }
  .lang-opt[aria-pressed="true"] {
    background: var(--ink);
    color: #fff;
    font-weight: 600;
  }
  .lang-cta {
    appearance: none; -webkit-appearance: none;
    cursor: pointer;
    background: var(--ink);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 12px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.005em;
    transition: opacity 0.15s ease, transform 0.12s ease;
    margin-top: 4px;
  }
  .lang-cta:hover { opacity: 0.92; }
  .lang-cta:active { transform: scale(0.985); }
  .lang-cta:disabled {
    cursor: not-allowed;
    opacity: 0.32;
    background: var(--ink);
  }
  .lang-modal__note {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    line-height: 1.5;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 6px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(21, 19, 26, 0.10);
  }
  .lang-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s ease;
  }
  .lang-modal__close:hover { background: #f4f4f4; }
  .lang-modal__close svg { display: block; width: 16px; height: 16px; }
  @media (max-width: 390px) {
    .lang-modal {
      aspect-ratio: auto;
      width: min(340px, 92vw);
      height: auto;
      border-radius: 26px;
      padding: 48px 24px 28px;
    }
    .lang-modal__inner { max-width: none; }
    .lang-modal__close { top: 10px; right: 10px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .lang-overlay, .lang-modal { transition: opacity 0.001s, transform 0.001s; }
  }



  /* ════════════════════════════════════════════════════════════════════════════
     RDKD FOOTER — disabled legal/contact links until policy pages are live
     ════════════════════════════════════════════════════════════════════════════ */
  .rdkd-site-footer {
    --footer-bg: #15131a;
    --footer-ink: #f4f4f4;
    --footer-muted: rgba(244, 244, 244, 0.58);
    --footer-line: rgba(244, 244, 244, 0.14);

    background: var(--footer-bg);
    color: var(--footer-ink);
    padding: clamp(48px, 8vh, 84px) clamp(24px, 6vw, 80px);
    font-family: 'Inter', -apple-system, sans-serif;
  }

  .rdkd-site-footer__inner {
    width: min(100%, 1180px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.6fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
  }

  .rdkd-site-footer__brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  .rdkd-site-footer__brand {
    margin: 0 0 1rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--footer-ink);
  }
  .rdkd-site-footer__brand-lockup .rdkd-site-footer__brand {
    margin: 0;
  }

  .rdkd-site-footer__copy {
    margin: 0;
    max-width: 42ch;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.55;
    color: var(--footer-muted);
  }

  .rdkd-site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.85rem 1.2rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .rdkd-site-footer__link[aria-disabled="true"] {
    color: var(--footer-muted);
    cursor: not-allowed;
    opacity: 0.72;
    text-decoration: none;
  }

  .rdkd-site-footer__meta {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: clamp(1.5rem, 4vh, 2.5rem);
    border-top: 1px solid var(--footer-line);
    color: var(--footer-muted);
    font-size: 0.78rem;
    line-height: 1.5;
  }

  @media (max-width: 760px) {
    .rdkd-site-footer__inner {
      grid-template-columns: 1fr;
    }

    .rdkd-site-footer__links {
      justify-content: flex-start;
    }

    .rdkd-site-footer__meta {
      flex-direction: column;
    }
  }



  /* PT-BR + ES hero tuning: keep the animated URL pill and final phrase on one natural line. */
  @media (max-width: 1023px) {
    body.pt-br-page .word-pill,
    body.es-latam-page .word-pill { max-width: calc(100vw - 11rem); }
    body.pt-br-page .word-is,
    body.es-latam-page .word-is { white-space: nowrap; }
  }
  @media (max-width: 380px) {
    body.pt-br-page .word-pill,
    body.es-latam-page .word-pill { max-width: calc(100vw - 10rem); }
    body.pt-br-page .word-pill__text-wrap,
    body.es-latam-page .word-pill__text-wrap { font-size: 0.24em; }
  }