/* ══════════════════════════════════════════════════════════════
   OFFICIAL — officialapp.net landing
   Monochrome. Coolvetica display / Space Grotesk in-app UI.
   ══════════════════════════════════════════════════════════════ */

/* ── fonts ───────────────────────────────────────────────────── */
@font-face{
  font-family:'Coolvetica';
  src:local('Coolvetica'), local('Coolvetica Rg'),
      url('assets/fonts/coolvetica.woff2') format('woff2');
  font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Coolvetica Cond';
  src:local('Coolvetica Rg Cond'),
      url('assets/fonts/coolvetica-cond.woff2') format('woff2');
  font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('assets/fonts/space-grotesk-400.woff2') format('woff2');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('assets/fonts/space-grotesk-500.woff2') format('woff2');
  font-weight:500; font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('assets/fonts/space-grotesk-700.woff2') format('woff2');
  font-weight:700; font-display:swap;
}

/* ── tokens ──────────────────────────────────────────────────── */
:root{
  --ink:#0b0b0c;
  --ink-2:#56565a;
  --ink-3:#8b8b90;
  --line:#e6e6e3;
  --line-2:#d3d3cf;
  --paper:#ffffff;
  --paper-2:#f4f4f2;
  --paper-3:#ebebe8;

  /* The page is monochrome by design; the ONLY colour on it comes from the phone
     screens, and it is the app's own default accent (--accent in the app's
     styles.css). Money, the OFFICIAL. wordmark and an under-filled crew meter
     are the things allowed to use it — same rule as the app. */
  --acc:#0A6CFF;
  --acc-soft:rgba(10,108,255,.10);
  --acc-line:rgba(10,108,255,.34);
  --emoji:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Twemoji Mozilla',sans-serif;

  --display:'Coolvetica','Coolvetica Rg','Helvetica Neue',Helvetica,Arial,sans-serif;
  --ui:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;

  --gut:clamp(20px,5vw,64px);
  --maxw:1360px;
  --ease:cubic-bezier(.22,.75,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--display);
  font-size:17px; line-height:1.45; letter-spacing:.002em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
svg{display:block}

::selection{background:var(--ink);color:#fff}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;
}
.skip:focus{left:0}

/* Grain. Sits BELOW the phones (z-index 6 vs the hero's 7) — multiplied over a
   phone screen it read as a compression artefact and was the single biggest
   reason the mockups looked like low-res photos rather than a live UI. */
.noise{
  position:fixed;inset:0;z-index:6;pointer-events:none;opacity:.04;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── shared type ─────────────────────────────────────────────── */
.eyebrow{
  font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.24em;color:var(--ink-3);
  display:flex;align-items:center;gap:14px;
}
.eyebrow::after{content:'';flex:1;height:1px;background:var(--line);max-width:120px}
.eyebrow--inv{color:rgba(255,255,255,.5)}
.eyebrow--inv::after{background:rgba(255,255,255,.22)}

.sec{padding-block:clamp(72px,9vw,150px)}
.sechead{margin-bottom:clamp(34px,4.4vw,64px)}
.sec__h2{
  font-size:clamp(40px,6.4vw,84px);line-height:.95;
  letter-spacing:-.035em;margin-top:20px;
}

/* ── buttons ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:#fff;border-radius:999px;
  padding:11px 20px;font-size:14px;font-weight:400;letter-spacing:.01em;
  transition:transform .35s var(--ease),opacity .3s;
}
.btn:hover{transform:translateY(-2px)}
.btn__arw{font-size:12px;opacity:.7;transition:transform .3s var(--ease)}
.btn:hover .btn__arw{transform:translate(2px,-2px)}

.store{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--ink);color:#fff;border-radius:14px;
  padding:11px 22px 12px 20px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  box-shadow:0 2px 0 rgba(0,0,0,.04);
}
.store:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.store__apple{fill:currentColor;flex:none;margin-bottom:2px}
.store__txt{display:flex;flex-direction:column;line-height:1;text-align:left}
.store__txt small{font-size:11px;letter-spacing:.04em;opacity:.82;margin-bottom:3px}
.store__txt b{font-size:22px;font-weight:400;letter-spacing:-.01em}
.store--inv{background:#fff;color:var(--ink)}
.store--inv:hover{box-shadow:0 14px 34px -14px rgba(0,0,0,.9)}

.ghost{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 4px;font-size:16px;color:var(--ink-2);
  border-bottom:1px solid var(--line-2);
  transition:color .3s,border-color .3s;
}
.ghost:hover{color:var(--ink);border-color:var(--ink)}

/* ══════════════════════════ NAV ══════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  transition:background .4s var(--ease),border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--line);
}
.nav__in{
  max-width:var(--maxw);margin-inline:auto;padding:16px var(--gut);
  display:flex;align-items:center;gap:28px;
}
.nav__brand img{height:17px;width:auto}
.nav__links{display:flex;gap:26px;margin-left:auto;font-size:15px;color:var(--ink-2)}
.nav__links a{position:relative;transition:color .3s}
.nav__links a::after{
  content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .4s var(--ease);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1)}

/* ══════════════════════════ HERO ══════════════════════════ */
.hero{position:relative;padding-top:120px;padding-bottom:70px;overflow:hidden}
.rules{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gut);
}
.rules::before{
  content:'';position:absolute;inset:0 var(--gut);
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 70%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 70%,transparent);
}
.hero__in{
  position:relative;z-index:7;          /* above .noise (6), below .nav (80) */
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(18px,2.4vw,44px);
  align-items:center;
}
.hero__copy{padding-block:20px}
.hero__h1{
  font-size:clamp(46px,6.6vw,92px);line-height:.92;letter-spacing:-.04em;
  margin:24px 0 26px;
}
.hero__sub{
  font-size:clamp(17px,1.3vw,20px);line-height:1.5;color:var(--ink-2);
  max-width:37ch;letter-spacing:.004em;
}
.hero__cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:38px}
.hero__note{
  margin-top:26px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}

.scrollcue{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  transition:color .3s;
}
.scrollcue:hover{color:var(--ink)}
.scrollcue svg{fill:currentColor;animation:bob 2.4s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}

/* ══════════════════════════ STAGE + PHONES ══════════════════════════ */
.stage{
  --k:1;
  position:relative;aspect-ratio:1/1.14;min-height:580px;
  /* NOT preserve-3d. With a shared 3D context the browser depth-sorts the phones
     by geometry and ignores z-index — and the back phone's ry:-23deg swings its
     right edge toward the camera, so it drew OVER the Find-games phone that is
     supposed to be in front. Flat keeps perspective on the children (that comes
     from `perspective` here, not from transform-style) while letting z-index
     decide who overlaps whom. */
  perspective:2400px;perspective-origin:50% 44%;
}
.stage__floor{
  position:absolute;left:4%;right:2%;bottom:5%;height:32%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.17),transparent 72%);
  filter:blur(16px);
}

.phone{
  --s:1; --rx:5deg; --ry:-15deg; --rz:6deg;
  --px:0px; --py:0px;                     /* parallax, written by script.js   */
  --lx:0px; --ly:0px; --lz:0px;           /* pull-forward offset when "live"  */
  position:absolute;width:414px;height:868px;
  transform-origin:50% 50%;
  transform:translate(-50%,-50%)
            translate3d(var(--px),var(--py),0)
            translate3d(var(--lx),var(--ly),var(--lz))
            rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(var(--s));
  border-radius:58px;padding:11px;
  background:
    linear-gradient(148deg,#3a3a3d 0%,#0d0d0f 18%,#000 52%,#101012 78%,#39393c 100%);
  box-shadow:
    0 2px 3px rgba(0,0,0,.5),
    0 44px 70px -34px rgba(0,0,0,.55),
    0 90px 120px -60px rgba(0,0,0,.45);
  transition:transform .85s var(--ease),box-shadow .85s var(--ease),opacity .5s var(--ease);
}
.phone::after{ /* bezel inner ring */
  content:'';position:absolute;inset:7px;border-radius:50px;
  border:1px solid rgba(255,255,255,.09);pointer-events:none;z-index:4;
}
.phone__screen{
  position:relative;width:392px;height:846px;border-radius:48px;overflow:hidden;
  background:#f1f1ef;
}
.island{
  position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:118px;height:34px;border-radius:999px;background:#08080a;z-index:6;
}
.phone__btn{position:absolute;background:linear-gradient(90deg,#2a2a2d,#0a0a0c);border-radius:2px}
.phone__btn--mute{left:-2px;top:150px;width:3px;height:30px}
.phone__btn--up  {left:-2px;top:205px;width:3px;height:56px}
.phone__btn--dn  {left:-2px;top:275px;width:3px;height:56px}
.phone__btn--pwr {right:-2px;top:230px;width:3px;height:92px;background:linear-gradient(270deg,#2a2a2d,#0a0a0c)}

/* The two hero phones deliberately overlap by roughly half the front phone's
   width, and are turned to DIFFERENT angles — matching angles read as one flat
   sticker, the mismatch is what gives the pair depth. */
.phone--back{
  left:35%;top:41%;
  --s:calc(.76 * var(--k)); --rx:7deg; --ry:-23deg; --rz:9deg;
  z-index:2;
}
.phone--front{
  left:60%;top:63%;
  --s:calc(.70 * var(--k)); --rx:3deg; --ry:-11deg; --rz:3.5deg;
  z-index:3;
}
.phone--lone{
  left:50%;top:50%;
  --s:calc(.66 * var(--k)); --rx:4deg; --ry:-14deg; --rz:5deg;
}

/* ── hover: bring forward, square up, become scrollable ──
   Rotation goes to zero and the scale climbs toward 1:1, which is what actually
   makes the screen readable — a rotated, downscaled screen can only ever be a
   suggestion of the UI. z rises above both siblings and the shadow deepens so
   the phone reads as lifted off the stage rather than just bigger. */
.phone--live{
  --rx:0deg; --ry:0deg; --rz:0deg;
  /* .88 rather than a full 1:1 — a pulled-forward phone still has to fit inside
     a 900px-tall viewport without its tab bar dropping below the fold. */
  --s:calc(.88 * var(--k));
  z-index:30;
  box-shadow:
    0 3px 5px rgba(0,0,0,.5),
    0 60px 90px -40px rgba(0,0,0,.6),
    0 130px 170px -70px rgba(0,0,0,.5);
}
/* Each phone travels toward the middle of the stage as it comes forward, so the
   pair doesn't just grow apart. The front phone also rides UP, because it starts
   low enough that scaling it in place would push its tab bar off screen. */
.phone--back.phone--live { --lx:46px;  --ly:14px;  }
.phone--front.phone--live{ --lx:-40px; --ly:-88px; }
.phone--lone.phone--live { --lx:0px;   --ly:0px;   }

/* the phone that ISN'T live steps back rather than competing for attention */
.stage.has-live .phone:not(.phone--live),
.sides__phone.has-live .phone:not(.phone--live){opacity:.42}

/* while dragging, the screen must track the pointer 1:1 — no easing */
.phone.is-dragging{transition:none}
.phone--live .scr__pad{cursor:grab}
.phone.is-dragging .scr__pad{cursor:grabbing}

/* interaction hint (sits in the hero copy column) */
.stage__hint{
  display:flex;align-items:center;gap:9px;margin-top:16px;
  font-family:var(--ui);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  pointer-events:none;
}
.stage__hint svg{fill:currentColor;flex:none}
/* pointer-only affordance — there is no hover to offer on a touch screen */
@media (hover:none){ .stage__hint{display:none} }

/* ── in-phone app UI ─────────────────────────────────────────────────
   Authored at the app's own logical width (392px) using the app's type scale,
   so this is the real UI at 1:1 and the CSS transform only changes its size.
   Colour follows the app's rule exactly: --acc is reserved for money, the
   OFFICIAL. wordmark, and a crew that still needs officials. Everything else
   stays monochrome. */
.scr{
  position:absolute;inset:0;display:flex;flex-direction:column;
  font-family:var(--ui);color:#0c0c0d;font-size:14.5px;line-height:1.35;
  letter-spacing:-.005em;background:#f1f1ef;
  font-variant-numeric:tabular-nums;
  text-rendering:optimizeLegibility;
}
.scr__pad{
  flex:1;min-height:0;padding:0 16px;overflow:hidden;
  overscroll-behavior:contain;
  scrollbar-width:none;-ms-overflow-style:none;
}
.scr__pad::-webkit-scrollbar{display:none}
.phone--live .scr__pad{overflow-y:auto}
.scr__end{height:20px}                 /* breathing room at the end of a scroll */

.sb{
  flex:none;display:flex;justify-content:space-between;align-items:center;
  padding:19px 25px 6px;font-size:15px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:0;
}
.sb__ic{display:flex;align-items:center;gap:6px}
.sb__ic svg{fill:currentColor}

.homebar{
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  width:134px;height:5px;border-radius:999px;background:rgba(0,0,0,.28);z-index:7;
}
.homebar--dark{background:rgba(0,0,0,.35)}

/* ── app bar (large title + subtitle + wordmark) ── */
.appbar{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:10px 0 16px;
}
.appbar__t{font-size:33px;font-weight:700;letter-spacing:-.035em;line-height:1}
.appbar__s{
  margin-top:7px;font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:.1em;color:#8e8e92;
}
.appbar__right{display:flex;align-items:flex-end;gap:11px}
.appbar__icons{display:flex;gap:8px}
.appbar__mark{
  font-size:14px;font-weight:700;letter-spacing:.14em;line-height:1;color:var(--acc);
}

/* ── sport tag: colour emoji + three-letter code, exactly as in the app ── */
.sport{
  display:inline-flex;align-items:center;gap:4px;flex:none;
  font-size:11px;font-weight:700;letter-spacing:.06em;color:#0c0c0d;
}
.sport-glyph{
  font-family:var(--emoji);font-size:1.2em;line-height:1;
  font-variant-numeric:normal;
}

/* ── cards ── */
.card{
  background:#fff;border:1px solid #e6e6e3;border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.card--season{padding:17px;margin-bottom:12px}
.card__lbl{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;
  color:#8e8e92;
}
.card__lbl .chev{fill:#a9a9ad}
.bignum{
  margin-top:9px;font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1;
  color:var(--acc);
}
.card__sub{margin-top:9px;font-size:11px;letter-spacing:.02em;color:#8e8e92}

.statrow{display:flex;gap:12px;margin-bottom:4px}
.card--stat{flex:1;min-width:0;padding:13px}
.stat2{margin-top:7px;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1}
.stat2--accent{color:var(--acc)}

.seclbl{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:18px 0 9px;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:#8e8e92;
}
.seclbl__act{
  font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--acc);
}

/* payout list */
.card--rows{padding:0;overflow:hidden}
.prow{display:flex;align-items:center;gap:10px;padding:11px 13px;border-top:1px solid #e6e6e3}
.prow:first-child{border-top:0}
.prow__mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.prow__mid b{
  font-size:12.5px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.prow__mid i{font-style:normal;font-size:11px;color:#8e8e92}
.prow__end{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.prow__end b{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.prow__end i{
  font-style:normal;font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:.06em;color:#a9a9ad;
}
.prow__end .is-pending{color:var(--acc)}

.claimline{margin:13px 0 2px;text-align:center;font-size:12.5px;line-height:1.4;color:var(--acc)}

.chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:5px 10px;border-radius:999px;
  border:1px solid #e6e6e3;background:#fff;color:#3a3a3d;white-space:nowrap;
}
.sportwrap{display:flex;flex-wrap:wrap;gap:7px}

/* ── filter row ── */
.frow{display:flex;align-items:center;gap:7px;margin-bottom:13px}
.pill{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  height:38px;padding:0 13px;border-radius:999px;
  border:1px solid #e0e0dd;background:#fff;color:#3a3a3d;
  font-size:12.5px;font-weight:700;letter-spacing:.04em;white-space:nowrap;
}
.pill svg{fill:currentColor}
.pill .sport-glyph{font-size:14px}
.pill--on{background:#0c0c0d;border-color:#0c0c0d;color:#fff}
.pill--ic{width:38px;padding:0;justify-content:center;color:#0c0c0d;margin-left:auto}
.iconbtn{
  width:32px;height:32px;border-radius:999px;flex:none;
  border:1px solid #e0e0dd;background:#fff;color:#0c0c0d;
  display:inline-flex;align-items:center;justify-content:center;
}
.iconbtn svg{fill:currentColor}

/* ── game card ── */
.gcards{display:flex;flex-direction:column;gap:10px}
.gcard{
  background:#fff;border:1px solid #e6e6e3;border-radius:12px;padding:14px 15px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.gcard__tag{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.lvl{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#8e8e92}
.gcard__sp{flex:1}
.badge-urgent{
  display:inline-flex;align-items:center;gap:4px;flex:none;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--acc);background:var(--acc-soft);border:1px solid var(--acc-line);
  border-radius:999px;padding:3px 9px;white-space:nowrap;
}
.badge-urgent svg{fill:currentColor}
.gcard__row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.gcard__match{min-width:0}
.gcard__match h4{font-size:16.5px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.gcard__match h4 i{font-style:normal;font-weight:500;color:#8e8e92}
.gcard__when{margin-top:5px;font-size:12.5px;color:#8e8e92}
.pay{
  flex:none;font-size:16.5px;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;color:var(--acc);
}
.pay span{font-size:11px;font-weight:400;color:#8e8e92}
.gcard__where{display:flex;align-items:center;gap:5px;margin-top:12px;font-size:12.5px;color:#8e8e92}
.gcard__where svg{fill:currentColor;flex:none}
.gcard__foot{display:flex;align-items:center;gap:12px;margin-top:12px}
.meter{flex:1;height:6px;border-radius:999px;background:#e6e6e3;overflow:hidden}
.meter i{display:block;height:100%;border-radius:999px;background:#0c0c0d}
.meter--warn i{background:var(--acc)}
.crew{flex:none;font-size:11px;font-weight:700;letter-spacing:.06em;color:#5c5c5f}
.crew--warn{color:var(--acc)}
.chev{fill:#a9a9ad;flex:none}

/* ── pinned primary action (coach screen) ── */
.scr__cta{
  flex:none;padding:12px 16px 26px;
  background:linear-gradient(180deg,rgba(241,241,239,0),#f1f1ef 38%);
}
.ob__cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:52px;border-radius:12px;background:#0c0c0d;color:#fff;
  font-size:16.5px;font-weight:700;letter-spacing:-.01em;
}
.ob__cta svg{fill:currentColor}

/* ── tab bar ── */
.tabbar{
  flex:none;display:flex;align-items:stretch;
  background:#fff;border-top:1px solid #e6e6e3;
  padding:9px 4px 22px;
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#a4a4a8;
}
.tab svg[fill="none"]{stroke:currentColor}          /* outline icons */
.tab svg:not([fill="none"]){fill:currentColor}      /* solid icons   */
.tab--on{color:#0c0c0d}

/* ══════════════════════════ MARQUEE ══════════════════════════ */
.marq{
  border-block:1px solid var(--line);
  overflow:hidden;padding-block:22px;background:var(--paper);
}
.marq__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.marq__set{display:flex;align-items:center;flex:none}
.marq__set span,.marq__set em{
  font-family:'Coolvetica Cond',var(--display);
  font-size:clamp(30px,4vw,54px);line-height:1;letter-spacing:.005em;
  padding-inline:clamp(14px,1.6vw,26px);font-style:normal;
  text-transform:uppercase;
}
.marq__set em{color:var(--line-2)}
@keyframes slide{to{transform:translateX(-50%)}}
.marq:hover .marq__track{animation-play-state:paused}

/* ══════════════════════════ HOW IT WORKS — THE LOOP ══════════════════════════
   Two needs facing each other with the app in the middle. The mirrored layout is
   the argument: neither column works on its own. */
.sec__lede{
  margin-top:24px;font-size:clamp(17px,1.35vw,20px);line-height:1.55;
  color:var(--ink-2);max-width:52ch;
}

.loop{
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:clamp(20px,3vw,48px);align-items:stretch;
  border-top:1px solid var(--line);padding-top:clamp(30px,3.4vw,52px);
}
.loop__side{display:flex;flex-direction:column}
.loop__who{
  display:flex;align-items:center;gap:10px;
  font-family:var(--ui);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;color:var(--ink-3);
}
.loop__dot{
  width:9px;height:9px;border-radius:999px;background:var(--ink);flex:none;
}
.loop__dot--b{background:transparent;border:2px solid var(--ink)}
.loop__t{
  font-size:clamp(27px,2.9vw,40px);letter-spacing:-.035em;line-height:1.02;
  margin:18px 0 16px;
}
.loop__d{font-size:16.5px;line-height:1.55;color:var(--ink-2);max-width:38ch;margin-bottom:32px}

/* The hairlines between steps are the --line background showing through 1px grid
   gaps — so this box must carry NO padding of its own, or the gap above the
   first step renders as a grey band. The breathing room lives on .loop__d, and
   margin-top:auto bottom-aligns the two lists no matter how the copy wraps. */
.loop__steps{
  margin-top:auto;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:2px;
}
.loop__steps li{
  display:flex;gap:16px;align-items:baseline;
  background:var(--paper);padding:16px 18px;
}
.loop__steps b{
  font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.16em;
  color:var(--ink-3);flex:none;
}
.loop__steps span{font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.loop__steps em{font-style:normal;color:var(--ink)}

/* the connector: two rules with the app's bolt between them */
.loop__link{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding-top:6px;
}
.loop__rule{flex:1;width:1px;background:var(--line)}
.loop__bolt{
  width:46px;height:46px;border-radius:999px;flex:none;
  border:1px solid var(--line-2);background:var(--paper);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.loop__bolt svg{fill:currentColor}

.loop__foot{
  margin-top:clamp(26px,3vw,44px);text-align:center;
  font-size:clamp(19px,1.9vw,26px);letter-spacing:-.02em;color:var(--ink);
}

/* ══════════════════════════ TWO SIDES ══════════════════════════ */
.sides{background:var(--paper-2);border-block:1px solid var(--line)}
.sides__in{
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,60px);
  align-items:center;
}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,56px)}
.col__t{
  font-size:24px;letter-spacing:-.02em;padding-bottom:14px;margin-bottom:18px;
  border-bottom:1px solid var(--line-2);
}
.ticks li{
  position:relative;padding-left:26px;margin-bottom:13px;
  font-size:16px;line-height:1.5;color:var(--ink-2);
}
.ticks li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:11px;height:6px;border-left:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);
  transform:rotate(-45deg);
}
.sides__phone{
  --k:1;                       /* the phone inherits this; without it --s is invalid */
  position:relative;z-index:7; /* above .noise, so the screen stays grain-free */
  aspect-ratio:.72/1;min-height:560px;
  perspective:2400px;perspective-origin:50% 45%;
}

/* ══════════════════════════ FEATURES ══════════════════════════ */
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.cell{
  padding:34px 32px 40px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background .4s var(--ease);
}
.cell:hover{background:var(--paper-2)}
.cell__ic{width:30px;height:30px;color:var(--ink);margin-bottom:24px}
.cell h3{font-size:23px;letter-spacing:-.025em;margin-bottom:11px}
.cell p{font-size:15.5px;line-height:1.55;color:var(--ink-2)}

/* ══════════════════════════ STAT STRIP ══════════════════════════ */
.strip{padding-block:clamp(52px,6vw,86px);border-bottom:1px solid var(--line)}
.strip__in{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{border-left:1px solid var(--line);padding-left:22px}
.stat__n{font-size:clamp(44px,5vw,68px);line-height:.9;letter-spacing:-.045em}
.stat__l{
  margin-top:12px;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.15em;color:var(--ink-3);
}

/* ══════════════════════════ DOWNLOAD ══════════════════════════ */
.get{background:var(--ink);color:#fff;padding-block:clamp(72px,9vw,140px)}
.get__in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(34px,5vw,80px);align-items:center}
.get__h2{font-size:clamp(48px,7vw,96px);line-height:.9;letter-spacing:-.04em;margin:22px 0 22px}
.get__sub{font-size:18px;line-height:1.5;color:rgba(255,255,255,.62);max-width:40ch}
.hownow{margin:40px 0 42px;display:grid;gap:22px;max-width:46ch}
.hownow li{display:flex;gap:18px;align-items:flex-start}
.hownow b{
  flex:none;width:30px;height:30px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:400;font-family:var(--ui);
}
.hownow h4{font-size:19px;letter-spacing:-.02em;margin-bottom:4px}
.hownow p{font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.55)}

.qr{display:flex;flex-direction:column;align-items:center;gap:18px}
.qr__card{
  background:#fff;border-radius:22px;padding:22px;
  width:min(290px,72vw);aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
}
.qr__card svg{width:100%;height:auto;shape-rendering:crispEdges}
.qr figcaption{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.19em;
  color:rgba(255,255,255,.45);text-align:center;
}

/* ══════════════════════════ FOOTER ══════════════════════════ */
.foot{padding-block:clamp(56px,6vw,90px) 34px;overflow:hidden}
.foot__mark{
  width:100%;max-width:1180px;height:auto;margin-bottom:clamp(38px,5vw,70px);
  opacity:.94;
}
.foot__grid{
  display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:34px;
  padding-top:34px;border-top:1px solid var(--line);
}
.foot__line{font-size:clamp(20px,2vw,26px);line-height:1.25;letter-spacing:-.02em}
.foot__col{display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--ink-2)}
.foot__col h4{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  color:var(--ink);margin-bottom:6px;
}
.foot__col a{transition:color .25s}
.foot__col a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.foot__base{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:52px;padding-top:20px;border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-3);
}

/* ══════════════════════════ "NOT YET" MODAL ══════════════════════════
   Shown when anything App-Store-shaped is clicked. Above .nav (80) so it can't
   be tabbed behind the sticky header. */
.modal{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.modal[hidden]{display:none}
.modal__veil{
  position:absolute;inset:0;background:rgba(11,11,12,.6);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:veil-in .3s var(--ease) both;
}
.modal__card{
  position:relative;z-index:1;width:min(432px,100%);
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:44px 38px 34px;text-align:center;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55);
  animation:modal-in .4s var(--ease) both;
}
.modal__x{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-3);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:color .25s,border-color .25s;
}
.modal__x:hover{color:var(--ink);border-color:var(--line-2)}
.modal__x svg{fill:currentColor}
.modal__eyebrow{
  font-family:var(--ui);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;color:var(--ink-3);
}
.modal__t{font-size:clamp(30px,4.2vw,40px);line-height:1;letter-spacing:-.035em;margin-top:16px}
.modal__b{
  margin-top:16px;font-size:16.5px;line-height:1.55;color:var(--ink-2);
  max-width:34ch;margin-inline:auto;
}
.modal__ok{margin-top:28px;padding:13px 34px;font-size:15px}

@keyframes veil-in{from{opacity:0}to{opacity:1}}
@keyframes modal-in{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to{opacity:1;transform:none}
}

/* ══════════════════════════ REVEAL ══════════════════════════ */
.reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.reveal.in{opacity:1;transform:none}
.phone{
  opacity:0;
  transition:opacity .9s var(--ease) .1s,
             transform .85s var(--ease),
             box-shadow .85s var(--ease);
}
.stage.in .phone,.sides__phone.in .phone{opacity:1}
/* Entrance: the phones settle in from slightly small. These re-declare the whole
   transform, so they must carry the --l* pull-forward offsets too — leave them
   out and hovering a hero phone silently loses its forward travel. */
.stage .phone{transform:translate(-50%,-50%)
  translate3d(var(--px),var(--py),0) translate3d(var(--lx),var(--ly),var(--lz))
  rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(calc(var(--s) * .94))}
.stage.in .phone{transform:translate(-50%,-50%)
  translate3d(var(--px),var(--py),0) translate3d(var(--lx),var(--ly),var(--lz))
  rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(var(--s))}

/* ══════════════════════════ RESPONSIVE ══════════════════════════ */
@media (max-width:1240px){
  .stage{--k:.88}
  .sides__phone{--k:.88}
  .hero__in{grid-template-columns:1.04fr .96fr}
}
@media (max-width:1080px){
  .stage{--k:.74}
  .sides__phone{--k:.76}
  .nav__links{display:none}
  .grid{grid-template-columns:repeat(2,1fr)}
  .get__in{grid-template-columns:1fr}
  .qr{align-items:flex-start}
  .loop{grid-template-columns:1fr;gap:0}
  .loop__side{padding-bottom:34px}
  .loop__side--b{padding-bottom:0}
  .loop__d{margin-bottom:26px}
  .loop__link{flex-direction:row;padding:0 0 34px;width:100%}
  .loop__link .loop__rule{flex:1;width:auto;height:1px}
}
@media (max-width:900px){
  .hero{padding-top:96px}
  .hero__in{grid-template-columns:1fr;gap:0}
  .stage{order:2;--k:.64;aspect-ratio:1/1;min-height:0;margin-top:18px}
  .hero__copy{order:1}
  .hero__h1{font-size:clamp(44px,10vw,64px)}
  .scrollcue{display:none}
  .sides__in{grid-template-columns:1fr}
  .sides__phone{order:-1;aspect-ratio:1/.92;min-height:0;margin-bottom:14px;--k:.6}
  .strip__in{grid-template-columns:1fr 1fr;gap:34px 24px}
  .foot__grid{grid-template-columns:1fr;gap:30px}
}
@media (max-width:640px){
  .rules::before{background-size:calc(100% / 3) 100%}
  .stage{--k:.56;aspect-ratio:1/1.06}
  .sides__phone{aspect-ratio:1/1;--k:.54}
  .cols{grid-template-columns:1fr;gap:34px}
  .grid{grid-template-columns:1fr}
  .cell{padding:28px 24px 34px}
  .hero__cta{gap:16px}
  .store{padding:10px 18px 11px 16px}
  .store__txt b{font-size:20px}
  .marq{padding-block:16px}
  .loop__steps li{padding:14px 15px}
}
@media (max-width:420px){
  .stage{--k:.46}
  .sides__phone{--k:.46}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  .phone{opacity:1}
  .marq__track{animation:none}
}

@media print{
  .noise,.nav,.scrollcue,.stage,.sides__phone{display:none}
  body{color:#000}
}