:root {
    --ink: #0a0907;
    --ink-2: #14110d;
    --ink-3: #1f1a14;
    --bone: #efe6d8;
    --bone-2: #b9ad9c;
    --mute: #6f655a;
    --amber: #f2a93b;
    --amber-2: #ffc24a;
    --blue: #3896ff;
    --line: rgba(239, 230, 216, 0.10);
    --display: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
    --serif: "Instrument Serif", Georgia, serif;
    --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  }
  * { box-sizing: border-box; }
  html { background: var(--ink); color-scheme: dark; }
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  body {
    margin: 0; background: var(--ink); color: var(--bone);
    font-family: var(--display); font-size: 17px; line-height: 1.5;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }
  img, video { max-width: 100%; display: block; }
  ::selection { background: var(--amber); color: var(--ink); }

  /* ---------- curtain ---------- */
  #curtain {
    position: fixed; inset: 0; z-index: 100; background: var(--ink);
    display: grid; place-items: center; pointer-events: none;
  }
  #curtain .mark { font-family: var(--mono); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--bone-2); opacity: 0; }
  #curtain .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--amber); transform: scaleX(0); transform-origin: left; }

  /* ---------- nav ---------- */
  .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px clamp(20px, 4vw, 56px); mix-blend-mode: difference;
  }
  .nav .brand { font-weight: 600; letter-spacing: -0.01em; font-size: 15px; }
  .nav .brand span { color: var(--bone-2); font-weight: 400; }
  .nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; font-size: 13px; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
  .nav ul a { opacity: .75; transition: opacity .3s; }
  .nav ul a:hover { opacity: 1; }
  @media (max-width: 720px) { .nav ul { display: none; } }

  /* ---------- hero ---------- */
  .hero {
    position: relative; min-height: 100svh; display: grid; place-items: center;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden; isolation: isolate;
  }
  .hero .bg {
    position: absolute; inset: -10%; z-index: -3;
    background-image: url("assets/venue.png"); background-size: cover; background-position: center;
    filter: brightness(.38) saturate(.85); transform: scale(1.08);
  }
  .hero .vignette { position: absolute; inset: 0; z-index: -2;
    background:
      radial-gradient(60% 50% at 50% 60%, rgba(242,169,59,.16), transparent 70%),
      linear-gradient(180deg, rgba(10,9,7,.55) 0%, rgba(10,9,7,.15) 40%, rgba(10,9,7,.95) 100%);
  }
  #embers { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
  .hero .inner { text-align: center; padding: 120px 20px 160px; perspective: 1400px; width: 100%; max-width: 1200px; }
  @media (max-height: 700px) { .hero .scroll-hint { display: none !important; } .hero .inner { padding-bottom: 80px; } }
  .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--amber); }
  .hero h1 {
    margin: 22px 0 0; font-weight: 500; letter-spacing: -0.035em; line-height: .96;
    font-size: clamp(44px, 8.6vw, 128px); text-wrap: balance;
  }
  .hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--amber-2); letter-spacing: -0.01em; }
  /* The mask is padded and the padding cancelled with negative margins, so the
     clipping box is taller and wider than the line box without shifting layout.
     Without this the 0.96 line-height cuts the tails off g and y, and the italic
     serif's swashes off the left and right. The translate is raised past the new
     padding edge so no sliver of the line shows before the intro animates it up. */
  .hero h1 .line { display: block; overflow: hidden; padding: .12em .1em .26em; margin: -.12em -.1em -.26em; }
  .hero h1 .line span { display: block; transform: translateY(135%); }
  .hero p.lede { max-width: min(34em, 100%); margin: 26px auto 0; color: var(--bone-2); font-size: clamp(16px, 1.5vw, 20px); opacity: 0; }
  .hero .cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 36px; padding: 16px 22px 16px 26px; border: 1px solid rgba(239,230,216,.28); border-radius: 4px; font-size: 14px; letter-spacing: .02em; opacity: 0; transition: border-color .3s, background .3s; }
  .hero .cta:hover { border-color: var(--amber); background: rgba(242,169,59,.08); }
  .hero .cta i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 18px var(--amber); }
  .scroll-hint { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .scroll-hint b { display: block; width: 1px; height: 46px; background: linear-gradient(var(--amber), transparent); animation: drop 1.8s ease-in-out infinite; }
  @keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

  /* ---------- the tablet (CSS 3D) ---------- */
  .stage { position: relative; height: 340vh; }
  .stage .pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; perspective: 1600px; }
  .stage .glow { position: absolute; width: 60vmin; height: 60vmin; border-radius: 50%; background: radial-gradient(circle, rgba(242,169,59,.28), transparent 65%); filter: blur(30px); }
  /*
   * The device is the SAME assembly as rikabigroup.com: the photograph of a real
   * unit with its glass punched out, and the 800x1280 slide drawn behind the
   * hole through a projective matrix measured off the photo. Everything inside
   * .dev is in the photograph's own pixels (556x992) and the whole thing is
   * scaled to the column, exactly as TabletDemo.tsx does it.
   */
  .tablet {
    position: relative; width: min(46vh, 340px); aspect-ratio: 556 / 992;
    filter: drop-shadow(0 42px 60px rgba(0,0,0,.6)) drop-shadow(0 0 70px rgba(242,169,59,.16));
    will-change: transform;
  }
  .tablet .dev { position: absolute; top: 0; left: 0; width: 556px; height: 992px; transform-origin: 0 0; visibility: hidden; }
  .tablet .photo { position: absolute; top: 0; left: 0; width: 556px; height: 992px; pointer-events: none; }
  .tablet .scr {
    position: absolute; top: 0; left: 0; width: 800px; height: 1280px; transform-origin: 0 0;
    transform: matrix3d(0.459859, 0.006242, 0, -0.000031, -0.029410, 0.602892, 0, -0.000002, 0, 0, 1, 0, 52.6, 30.6, 0, 1);
    background: #000; color: #fff; overflow: hidden; font-family: var(--display);
  }
  .scr .prog { position: absolute; top: 0; left: 0; right: 0; height: 10px; background: rgba(255,255,255,.14); z-index: 2; }
  .scr .prog i { display: block; height: 100%; width: 0; background: var(--amber-2); }
  .scr .slide { position: absolute; inset: 0; }
  .scr .slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
  .scr .slide img.on { opacity: 1; }
  .scr .ripple { position: absolute; border: 6px solid #fff; border-radius: 68px; opacity: 0; pointer-events: none; }
  /* The bar copied out of the player (OrderingUi.kt), 1dp = 1.25px. */
  .scr .bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; gap: 17.5px; padding: 12.5px 20px; background: rgba(0,0,0,.8); }
  .scr .bar button { flex: 1; height: 85px; border: 0; border-radius: 17.5px; font: 600 37.5px/1 var(--display); color: #fff; cursor: pointer; }
  .scr .bar .order { background: #2f6fed; }
  .scr .bar .staff { background: #3a4048; }
  /* "These are real buttons." A breathing glow plus a light sweep, only while the
     bar is the thing on screen (class set from JS): never under an open menu or
     claim panel, never when the device is scrolled away. */
  .scr .bar button { position: relative; overflow: hidden; }
  .scr .bar button::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -70%; width: 45%; transform: skewX(-22deg); background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 100%); opacity: 0; pointer-events: none; }
  .scr .bar.hint .order { animation: glow-order 2.4s ease-in-out infinite; }
  .scr .bar.hint .staff { animation: glow-staff 2.4s ease-in-out .6s infinite; }
  .scr .bar.hint button::after { opacity: 1; animation: sheen 3.2s ease-in-out infinite; }
  .scr .bar.hint .staff::after { animation-delay: .6s; }
  @keyframes glow-order { 0%, 100% { box-shadow: 0 0 0 0 rgba(47,111,237,0), 0 0 0 rgba(47,111,237,0); } 50% { box-shadow: 0 0 0 10px rgba(47,111,237,.32), 0 0 48px 8px rgba(47,111,237,.65); } }
  @keyframes glow-staff { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } 50% { box-shadow: 0 0 0 10px rgba(255,255,255,.14), 0 0 40px 6px rgba(255,255,255,.28); } }
  @keyframes sheen { 0% { left: -70%; } 40% { left: 130%; } 100% { left: 130%; } }
  @media (prefers-reduced-motion: reduce) { .scr .bar.hint button, .scr .bar.hint button::after { animation: none; } }
  .scr .panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: #0a0a0f; border-top: 6px solid var(--amber-2); padding: 40px 50px 44px; display: none; gap: 40px; align-items: center; }
  .scr .panel.on { display: flex; animation: rise .4s cubic-bezier(.2,.7,.3,1) both; }
  .scr .panel p { margin: 0; }
  .scr .panel .t { font-weight: 700; font-size: 40px; color: #f4f1ee; }
  .scr .panel .s { font-size: 30px; color: #9c98ab; margin-top: 14px; line-height: 1.35; }
  @keyframes rise { from { transform: translateY(100%); opacity: 0; } }
  /* Customer screens: the player's own palette. */
  .scr .cust { position: absolute; inset: 0; z-index: 4; background: #0b0d10; color: #fff; display: none; flex-direction: column; }
  .scr .cust.on { display: flex; animation: swap .42s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes swap { from { opacity: 0; transform: translateY(10px); } }
  .cust p { margin: 0; }
  .cust .hd { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 34px 34px 24px; border-bottom: 2px solid #262b33; }
  .cust .hd .n { font-size: 40px; font-weight: 700; } .cust .hd .tb { font-size: 28px; color: #9aa3af; margin-top: 6px; }
  .cust .x { flex: none; width: 76px; height: 76px; border-radius: 999px; border: 2px solid #262b33; background: #16191f; color: #fff; cursor: pointer; font-size: 40px; line-height: 1; }
  .cust .list { flex: 1; overflow: hidden; padding: 22px 34px; }
  .cust .g { font-size: 26px; letter-spacing: .1em; text-transform: uppercase; color: #9aa3af; margin: 0 0 14px; }
  .cust .it { display: flex; justify-content: space-between; gap: 20px; background: #16191f; border: 2px solid #262b33; border-radius: 18px; padding: 22px 26px; margin-bottom: 12px; font-size: 34px; }
  .cust .it b { font-weight: 600; } .cust .it span { color: #9aa3af; }
  .cust .ft { padding: 30px; border-top: 2px solid #262b33; }
  .cust .review { height: 96px; border-radius: 20px; background: #2f6fed; display: grid; place-items: center; font-size: 38px; font-weight: 700; }
  .cust .note { font-size: 26px; color: #9aa3af; text-align: center; margin-top: 16px; }
  .cust .stf { flex: 1; display: flex; flex-direction: column; padding: 40px; gap: 20px; }
  .cust .stf .q { font-size: 46px; font-weight: 700; margin-top: 40px; } .cust .stf .sub { font-size: 30px; color: #9aa3af; margin-bottom: 20px; }
  .cust .stf button.r { height: 118px; border-radius: 20px; border: 2px solid #262b33; background: #16191f; color: #fff; font: 600 38px var(--display); cursor: pointer; }
  .cust .stf button.nm { margin-top: auto; height: 96px; border: 0; background: transparent; color: #9aa3af; font: 34px var(--display); cursor: pointer; }
  .cust .ack { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 50px; text-align: center; }
  .cust .ack .q { font-size: 46px; font-weight: 700; } .cust .ack .sub { font-size: 30px; color: #9aa3af; }
  /* The charging port, 85.97% / 62.20% of the frame, measured off the photo. */
  .tablet .port { position: absolute; left: 85.97%; top: 62.2%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(242,169,59,.6), 0 0 18px var(--amber); opacity: 0; }
  .tablet .port.on { opacity: 1; animation: portpulse 1.6s ease-out infinite; }
  @keyframes portpulse { 0% { box-shadow: 0 0 0 0 rgba(242,169,59,.6), 0 0 18px var(--amber); } 100% { box-shadow: 0 0 0 22px rgba(242,169,59,0), 0 0 18px var(--amber); } }
  .stage .under { position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(16px, 4vh, 40px); font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--mute); white-space: nowrap; }
  .stage .under.live { color: #37e0a0; }

  .stage .caption {
    position: absolute; left: clamp(20px, 6vw, 96px); bottom: clamp(48px, 10vh, 120px);
    width: min(30em, calc(100vw - 40px)); height: 42vh;
  }
  .stage .caption .step { top: auto; }
  .stage .caption .k { font-family: var(--mono); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--amber); }
  .stage .caption h2 { margin: 12px 0 0; font-size: clamp(30px, 4.6vw, 64px); line-height: 1; letter-spacing: -0.03em; font-weight: 500; }
  .stage .caption h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--amber-2); }
  .stage .caption p { margin: 14px 0 0; color: var(--bone-2); max-width: 26em; }
  .stage .caption .step { position: absolute; inset: 0; opacity: 0; }
  .stage .counter { position: absolute; right: clamp(20px, 6vw, 96px); top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--mute); writing-mode: vertical-rl; }
  /*
   * On a phone the device and the caption STACK instead of overlapping. Both used
   * to be placed independently, the device from the top and the caption from the
   * bottom, and on most phone heights the caption started above the device's base.
   *
   * The caption gets a fixed height (its steps crossfade, so it must fit the
   * longest one) and the device takes whatever height is left. The device is sized
   * by HEIGHT with aspect-ratio supplying the width, because width is what the
   * ResizeObserver in index.html scales the photograph by.
   */
  @media (max-width: 720px) {
    .stage .counter { display: none; }
    .stage .pin {
      display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
      padding: 72px 20px 18px;
    }
    .tablet {
      width: auto; flex: 0 0 auto; margin-top: 6px;
      height: clamp(150px, calc(100svh - 72px - 6px - 18px - 38px - 10px - 215px - 18px), 430px);
    }
    .stage .under {
      position: relative; left: auto; bottom: auto; transform: none;
      margin-top: 18px; min-height: 2.8em; line-height: 1.4;
      white-space: normal; text-align: center; max-width: 100%;
    }
    .stage .caption {
      position: relative; left: auto; right: auto; bottom: auto;
      width: 100%; height: 215px; margin-top: 10px; flex: 0 0 auto;
    }
    .stage .caption h2 { font-size: 27px; line-height: 1.05; }
    .stage .caption p { margin-top: 10px; font-size: 15px; line-height: 1.45; }
  }
  /* Short phones: give the device back some of the caption's room. */
  @media (max-width: 720px) and (max-height: 700px) {
    .stage .pin { padding-top: 64px; }
    .stage .caption { height: 190px; }
    .stage .caption h2 { font-size: 23px; }
    .stage .caption p { font-size: 14px; }
    .tablet { height: clamp(140px, calc(100svh - 64px - 6px - 18px - 38px - 10px - 190px - 16px), 430px); }
  }

  /* ---------- chapters ---------- */
  .chapter { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
  .chapter .img { position: absolute; inset: -12% 0; z-index: -2; background-size: cover; background-position: center; filter: brightness(.55) saturate(.9); will-change: transform; }
  .chapter .shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,9,7,.7) 0%, rgba(10,9,7,.05) 45%, rgba(10,9,7,.92) 100%); }
  .chapter .copy { padding: 20vh clamp(20px, 6vw, 96px) clamp(60px, 10vh, 120px); max-width: 1200px; }
  .chapter .num { font-family: var(--mono); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--amber); }
  .chapter h2 { margin: 16px 0 0; font-size: clamp(40px, 7vw, 112px); line-height: .94; letter-spacing: -0.035em; font-weight: 500; max-width: 9em; text-wrap: balance; }
  .chapter h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--amber-2); }
  .chapter p { margin: 22px 0 0; max-width: 32em; color: var(--bone-2); font-size: clamp(16px, 1.4vw, 20px); }
  .chapter .facts { display: flex; flex-wrap: wrap; gap: 10px 36px; margin-top: 30px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-2); }
  .chapter .facts span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-right: 10px; vertical-align: 2px; }
  .chapter.blue { --amber: var(--blue); --amber-2: #8cc2ff; }
  .chapter.blue .img { filter: brightness(.5) saturate(1.1) hue-rotate(-8deg); }
  /* The mask is padded and the padding cancelled with negative margins, so the
     box around each word is bigger than the word's line box without moving the
     layout. Without this the tight line-height clips descenders (g, y) and the
     italic serif's swashes on the left and right. */
  .reveal .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .14em .12em .22em; margin: -.14em -.12em -.22em; }
  .reveal .w > span { display: inline-block; transform: translateY(115%); }

  /* ---------- horizontal strip ---------- */
  .strip { position: relative; background: var(--ink-2); }
  /* Heading and cards are pinned TOGETHER, and the cards are sized from the
     viewport height, so a whole card is always on screen while the row moves.
     Pinning only the row left the heading eating the top of the screen and the
     bottom of every card cut off until the very end of the scroll. */
  .strip { position: relative; }
  .strip .track-wrap { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3vh, 36px); overflow: hidden; padding-top: 60px; }
  .strip .head { padding: 0 clamp(20px, 6vw, 96px); display: flex; justify-content: space-between; align-items: end; gap: 12px 24px; flex-wrap: wrap; }
  .strip h2 { margin: 0; font-size: clamp(30px, 4.6vw, 64px); letter-spacing: -0.03em; line-height: .96; font-weight: 500; }
  .strip h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--amber-2); }
  .strip .head p { margin: 0; max-width: 26em; color: var(--bone-2); font-size: 15px; }
  .strip .track { display: flex; gap: 20px; padding: 0 clamp(20px, 6vw, 96px); will-change: transform; }
  .card {
    flex: 0 0 auto; width: min(78vw, 400px); height: clamp(330px, 56vh, 520px); padding: 24px; border-radius: 10px;
    background: linear-gradient(160deg, var(--ink-3), var(--ink-2)); border: 1px solid var(--line);
    display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
  }
  .card::after { content: ""; position: absolute; inset: auto -30% -40% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--c, var(--amber)) 0%, transparent 65%); opacity: .22; filter: blur(20px); }
  .card .k { font-family: var(--mono); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--bone-2); }
  .card h3 { margin: 0; font-size: clamp(24px, 3.6vh, 38px); line-height: 1; letter-spacing: -0.03em; font-weight: 500; }
  .card h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--c, var(--amber-2)); }
  .card p { margin: 10px 0 0; color: var(--bone-2); font-size: 14px; line-height: 1.45; max-width: 22em; }
  .card .big { font-size: clamp(56px, 11vh, 104px); line-height: .9; letter-spacing: -0.05em; font-weight: 400; color: var(--c, var(--amber)); font-variant-numeric: tabular-nums; }
  .strip .spacer { height: 100vh; }

  /* ---------- proof ---------- */
  .proof { position: relative; padding: clamp(100px, 16vh, 200px) clamp(20px, 6vw, 96px); text-align: center; overflow: hidden; }
  .proof .halo { position: absolute; left: 50%; top: 50%; width: 120vmin; height: 120vmin; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(242,169,59,.14), transparent 60%); pointer-events: none; }
  .proof .k { font-family: var(--mono); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--amber); }
  .proof h2 { margin: 26px auto 0; max-width: 12em; font-size: clamp(36px, 6.4vw, 104px); line-height: .96; letter-spacing: -0.035em; font-weight: 500; text-wrap: balance; }
  .proof h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--amber-2); }
  .proof .timeline { position: relative; margin: 70px auto 0; max-width: 900px; height: 2px; background: var(--line); }
  .proof .timeline .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--amber); box-shadow: 0 0 20px var(--amber); }
  .proof .timeline .dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--ink); border: 2px solid var(--amber); }
  .proof .timeline .dot.a { left: 0; } .proof .timeline .dot.b { left: 100%; }
  .proof .timeline .lbl { position: absolute; top: 22px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-2); white-space: nowrap; }
  .proof .timeline .lbl.a { left: 0; } .proof .timeline .lbl.b { right: 0; }
  .proof .secs { margin-top: 90px; font-size: clamp(80px, 16vw, 220px); line-height: .85; letter-spacing: -0.06em; font-weight: 300; font-variant-numeric: tabular-nums; }
  .proof .secs small { display: block; margin-top: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--mute); }

  /* ---------- cta ---------- */
  .final { position: relative; min-height: 100svh; display: grid; place-items: center; grid-template-columns: minmax(0, 1fr); text-align: center; padding: 120px 20px; overflow: hidden; }
  .final > div { max-width: 100%; }
  .final .bg { position: absolute; inset: -10%; z-index: -2; background-image: url("assets/tap.png"); background-size: cover; background-position: center; filter: brightness(.35); }
  .final .shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 50%, rgba(10,9,7,.2), rgba(10,9,7,.96)); }
  .final h2 { margin: 0; font-size: clamp(44px, 9vw, 150px); line-height: .92; letter-spacing: -0.04em; font-weight: 500; }
  .final h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--amber-2); }
  .final p { margin: 26px auto 0; max-width: 30em; color: var(--bone-2); }
  .final .btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
  .btn { display: inline-flex; align-items: center; gap: 10px; padding: 18px 28px; border-radius: 4px; font-size: 15px; letter-spacing: .01em; transition: transform .3s, background .3s, border-color .3s; }
  .btn.solid { background: var(--amber); color: var(--ink); font-weight: 600; }
  .btn.solid:hover { background: var(--amber-2); transform: translateY(-2px); }
  .btn.ghost { border: 1px solid rgba(239,230,216,.28); }
  .btn.ghost:hover { border-color: var(--bone); }

  footer { padding: 40px clamp(20px, 6vw, 96px) 48px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--mute); text-transform: uppercase; }
  footer a:hover { color: var(--bone); }

  @media (prefers-reduced-motion: reduce) {
    .scroll-hint b { animation: none; }
  }

/* ======================= inner pages (venues, advertisers) ======================= */
.hero .stats { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 40px; opacity: 0; }
.stat { min-width: 160px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 8px; background: rgba(10,9,7,.45); backdrop-filter: blur(6px); text-align: left; }
.stat b { display: block; font-size: 34px; font-weight: 400; letter-spacing: -.03em; line-height: 1; color: var(--amber-2); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-2); }
.hero .cta { opacity: 0; }
.band { padding: clamp(90px, 14vh, 160px) clamp(20px, 6vw, 96px) 0; max-width: 1200px; }
.band .k { font-family: var(--mono); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--amber); }
.band h2 { margin: 14px 0 0; font-size: clamp(36px, 5.6vw, 84px); line-height: .96; letter-spacing: -.035em; font-weight: 500; max-width: 11em; text-wrap: balance; }
.band h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--amber-2); }
.band p.lead { margin: 22px 0 0; max-width: 34em; color: var(--bone-2); font-size: clamp(16px, 1.4vw, 20px); }
.steps { padding: 40px clamp(20px, 6vw, 96px) clamp(90px, 14vh, 160px); max-width: 1200px; }
.step-row { display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding: 34px 0; border-top: 1px solid var(--line); }
.step-row:last-child { border-bottom: 1px solid var(--line); }
.step-row .n { font-family: var(--serif); font-style: italic; font-size: 44px; color: var(--amber-2); line-height: 1; }
.step-row h3 { margin: 0; font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -.02em; font-weight: 500; line-height: 1.1; }
.step-row p { margin: 10px 0 0; color: var(--bone-2); max-width: 40em; }
.grid { padding: 40px clamp(20px, 6vw, 96px) clamp(90px, 14vh, 160px); max-width: 1300px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 28px 40px; }
.grid .cell { padding: 26px 0 0; border-top: 1px solid var(--line); }
.grid h3 { margin: 0; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.02em; font-weight: 500; line-height: 1.15; }
.grid h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--amber-2); }
.grid p { margin: 10px 0 0; color: var(--bone-2); font-size: 15.5px; }
.faq { padding: 40px clamp(20px, 6vw, 96px) clamp(90px, 14vh, 160px); max-width: 900px; }
.faq .g { font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); margin: 34px 0 6px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-size: clamp(18px, 1.8vw, 24px); font-weight: 500; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--serif); font-size: 32px; color: var(--amber-2); line-height: 1; transition: transform .3s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; color: var(--bone-2); max-width: 40em; }
.price { padding: 40px clamp(20px, 6vw, 96px) clamp(90px, 14vh, 160px); max-width: 1200px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 40px; align-items: start; }
.price .range b { display: block; font-size: clamp(56px, 8vw, 120px); font-weight: 300; letter-spacing: -.05em; line-height: .9; color: var(--amber-2); font-variant-numeric: tabular-nums; }
.price .range span { display: block; margin-top: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--bone-2); }
.price .range p { color: var(--bone-2); margin: 18px 0 0; max-width: 30em; }
.terms { margin: 0; border-top: 1px solid var(--line); }
.terms div { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.terms dt { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-2); }
.terms dd { margin: 0; text-align: right; }
.cross { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin: 0 clamp(20px, 6vw, 96px) clamp(90px, 14vh, 160px); padding: 28px 30px; border: 1px solid var(--line); border-radius: 10px; max-width: 1200px; transition: border-color .3s; }
.cross:hover { border-color: var(--amber); }
.cross b { font-weight: 500; font-size: 20px; letter-spacing: -.01em; display: block; }
.cross span { color: var(--bone-2); }
.cross i { font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); white-space: nowrap; }
.nav ul a.on { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 720px) { .step-row { grid-template-columns: 56px 1fr; } .step-row .n { font-size: 34px; } .hero .stats { gap: 10px; } .stat { min-width: 0; flex: 1 1 140px; } }
.chapter .more { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber-2); border-bottom: 1px solid rgba(242,169,59,.35); padding-bottom: 6px; transition: border-color .3s, gap .3s; }
.chapter .more:hover { border-color: var(--amber-2); gap: 16px; }

/* v2: low-commitment door for visitors who are not ready to contact anyone */
.final .notready{margin-top:22px;font-size:.92rem;opacity:.62;letter-spacing:.01em}
.final .notready a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.final .notready a:hover{opacity:1}