/* ==========================================================================
   Red 10 — site styles.
   The site borrows the app's design system (DESIGN.md): pure-black ground,
   glass surfaces, #EE463E accent, gold/mint semantics, and the signature
   rounded-800 card glyph. Cards are drawn by the site itself — the visual
   identity is the game's own cards, not store screenshots.
   ========================================================================== */

:root {
  --bg: #000000;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-hi: rgba(255, 255, 255, 0.10);
  --stroke: rgba(255, 255, 255, 0.09);
  --stroke-hi: rgba(255, 255, 255, 0.16);
  --ink: #f5f5f7;
  --ink-2: rgba(245, 245, 247, 0.64);
  --ink-3: rgba(245, 245, 247, 0.40);
  --red: #ee463e;
  --red-deep: #b53a34;
  --red-glow: #ff5f50;
  --gold: #e8b54a;
  --gold-soft: #f0d07a;
  --mint: #34d399;
  --blue: #60a5fa;
  --card-face: #fafafa;
  --card-ink: #0a0a0c;
  --card-red: #c23a31;

  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --font-round: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", -apple-system, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --shell: 1140px;
  --pad: clamp(20px, 4.5vw, 40px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* No overflow-x guard on html/body: `hidden` promotes body to its own scroll
   container and `clip` forces the paired visible axis to clip on the root,
   truncating the page at one viewport. Horizontal overflow is contained where
   it originates instead (.hero clips its floating cards). */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; }
::selection { background: rgba(238, 70, 62, 0.85); color: #fff; }
:focus-visible { outline: 2px solid var(--red-glow); outline-offset: 3px; border-radius: 6px; }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }
.narrow { max-width: 780px; }

/* --------------------------------------------------------------------------
   Playing card — the site's identity element. Mirrors the app's card spec:
   center glyph only (no corner pips — deliberate), rounded 800, radius 12%
   of width, off-white face so shadows read.
   -------------------------------------------------------------------------- */
.pcard {
  --w: 74px;
  width: var(--w);
  aspect-ratio: 5 / 7;
  border-radius: calc(var(--w) * 0.12);
  background: linear-gradient(178deg, #ffffff 0%, #f4f4f5 100%);
  color: var(--card-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-round);
  font-weight: 800;
  font-size: calc(var(--w) * 0.56);
  letter-spacing: -0.045em;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 12px 28px rgba(0, 0, 0, 0.45);
  user-select: none;
  flex: none;
}
.pcard.red { color: var(--card-red); }
.pcard.ten { font-size: calc(var(--w) * 0.46); letter-spacing: -0.06em; }
.pcard.back {
  background:
    radial-gradient(circle at 50% 42%, rgba(238, 70, 62, 0.16), rgba(238, 70, 62, 0) 62%),
    linear-gradient(178deg, #1a1a1d, #101013);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 0 0 5px rgba(0, 0, 0, 0.35),
    0 12px 28px rgba(0, 0, 0, 0.55);
  color: transparent;
}

/* Stamp chips — the game's spoken moments (Cha! Go!) as tinted glass pills. */
.stamp {
  display: inline-flex; align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  font-family: var(--font-round);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  border: 1px solid;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  user-select: none;
}
.stamp.gold { color: var(--gold-soft); background: rgba(232, 181, 74, 0.13); border-color: rgba(232, 181, 74, 0.38); }
.stamp.mint { color: var(--mint); background: rgba(52, 211, 153, 0.11); border-color: rgba(52, 211, 153, 0.36); }
.stamp.redc { color: var(--red-glow); background: rgba(238, 70, 62, 0.13); border-color: rgba(238, 70, 62, 0.40); }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--stroke);
}
.nav .shell { display: flex; align-items: center; gap: 8px; height: 64px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: 8px; }
.brand .mini-card {
  width: 27px; height: 37px; border-radius: 7px;
  background: linear-gradient(178deg, #ffffff, #f2f2f3);
  color: var(--card-red);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-round); font-weight: 800; font-size: 14px; letter-spacing: -0.06em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  transform: rotate(-6deg);
}
.brand b { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.nav .links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav .links a {
  text-decoration: none; color: var(--ink-2);
  font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: 10px;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav .links a:hover { color: var(--ink); background: var(--surface); }
.nav .links a[aria-current="page"] { color: var(--ink); }
.nav .links a.get {
  color: #fff; font-weight: 600;
  background: linear-gradient(180deg, var(--red), var(--red-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 14px rgba(238, 70, 62, 0.28);
  padding: 8px 16px; margin-left: 8px; border-radius: 999px;
}
.nav .links a.get:hover { filter: brightness(1.08); background: linear-gradient(180deg, var(--red), var(--red-deep)); }
@media (max-width: 620px) {
  .nav .links a:not(.get) { display: none; }
  .nav .shell { height: 58px; }
}

/* --------------------------------------------------------------------------
   App Store badge (official Apple artwork, self-hosted)
   -------------------------------------------------------------------------- */
.appstore { display: inline-block; line-height: 0; border-radius: 13px; transition: transform 0.18s ease, filter 0.18s ease; }
.appstore img { height: 56px; width: auto; display: block; }
.appstore:hover { transform: translateY(-2px); filter: brightness(1.12); }
.appstore:active { transform: translateY(0); }
@media (max-width: 620px) { .appstore img { height: 50px; } }

.under-badge { margin: 16px 0 0; font-size: 14px; color: var(--ink-3); letter-spacing: 0.01em; }

/* --------------------------------------------------------------------------
   Hero — editorial two-column: statement left, framed product right.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(64px, 9vw, 120px) 0 clamp(40px, 6vw, 84px);
  /* Contains the glow and the floating cards so narrow viewports never grow
     a horizontal scrollbar. `clip` (not hidden) — no scroll container. */
  overflow: clip;
}
.hero-glow {
  position: absolute; inset: -180px 0 auto 0; height: 720px;
  background:
    radial-gradient(560px 420px at 24% 30%, rgba(238, 70, 62, 0.17), transparent 70%),
    radial-gradient(640px 480px at 82% 62%, rgba(238, 70, 62, 0.10), transparent 72%);
  pointer-events: none;
}
.hero .shell {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.hero-copy .eyebrow { margin-bottom: 22px; }
/* Sized so the longest line ("No one says which.") fits its column without
   wrapping at every width — never force nowrap, which overflows the layout
   the moment a viewport lands between breakpoints. Two regimes: single
   column below 861px, the narrower grid column above. */
.hero h1 {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(36px, 10vw, 64px);
  line-height: 1.01;
  font-weight: 800;
  letter-spacing: -0.045em;
}
@media (min-width: 861px) {
  .hero h1 { font-size: clamp(34px, 4.6vw, 64px); }
}
.hero h1 .accent { color: var(--red); }
.hero .tagline {
  margin: 0 0 36px; max-width: 440px;
  font-size: clamp(17px, 2vw, 19px); line-height: 1.55; color: var(--ink-2);
}
.hero-ctas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero-ctas .alt { font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.hero-ctas .alt:hover { color: var(--ink); }
.hero-ctas .alt::after { content: " →"; }

/* Device frame — the site's own, drawn around raw app captures. */
.device {
  position: relative;
  border-radius: clamp(38px, 4.6vw, 52px);
  padding: clamp(8px, 1vw, 11px);
  background: linear-gradient(178deg, #232326, #121214);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.16),
    inset 0 -1px 1px rgba(0, 0, 0, 0.7),
    0 2px 6px rgba(0, 0, 0, 0.5),
    0 42px 90px rgba(0, 0, 0, 0.66);
}
.device::after {
  /* Dynamic Island */
  content: "";
  position: absolute; top: calc(clamp(8px, 1vw, 11px) + 11px); left: 50%;
  transform: translateX(-50%);
  width: 26%; height: 3.1%;
  background: #000; border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.06);
}
.device img { display: block; width: 100%; height: auto; border-radius: clamp(30px, 3.7vw, 42px); }

.hero-stage { position: relative; max-width: 380px; margin: 0 auto; }
.hero-stage .device { transform: rotate(2.5deg); }
.hero-stage .float-card {
  position: absolute; z-index: 2;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.6));
}
.hero-stage .fc-ten {
  --w: clamp(66px, 8vw, 84px);
  top: -26px; left: -34px;
  transform: rotate(-11deg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 2.5px var(--red),
    0 0 34px rgba(238, 70, 62, 0.55),
    0 18px 40px rgba(0, 0, 0, 0.5);
}
.hero-stage .fc-two {
  --w: clamp(52px, 6vw, 66px);
  bottom: 42px; right: -26px;
  transform: rotate(9deg);
}
.hero-stage .fc-stamp { position: absolute; z-index: 2; right: -14px; top: 96px; transform: rotate(7deg); font-size: 15px; padding: 9px 15px; }

@media (max-width: 860px) {
  .hero .shell { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero .tagline { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .hero-stage { max-width: 300px; margin-top: 26px; }
  .hero-stage .fc-ten { left: -22px; }
  .hero-stage .fc-two { right: -16px; }
}

/* --------------------------------------------------------------------------
   Rank ladder — the deck itself as a band. Low → high, red 10 lifted.
   -------------------------------------------------------------------------- */
.ladder { padding: clamp(30px, 5vw, 56px) 0 clamp(16px, 3vw, 36px); border-top: 1px solid var(--stroke); }
.ladder-rail {
  display: flex; align-items: flex-end; gap: 10px;
  overflow-x: auto; padding: 34px var(--pad) 18px;
  max-width: calc(var(--shell) + 60px); margin: 0 auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ladder-rail::-webkit-scrollbar { display: none; }
.ladder-rail .pcard { --w: clamp(56px, 6vw, 72px); }
.ladder-rail .lift { transform: translateY(-16px); box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.9),
  0 0 0 2.5px var(--red),
  0 0 30px rgba(238, 70, 62, 0.5),
  0 14px 30px rgba(0, 0, 0, 0.5); }
.ladder-caption { text-align: center; margin: 14px 0 0; font-size: 14px; color: var(--ink-3); }
.ladder-caption b { color: var(--ink-2); font-weight: 600; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
section.block { padding: clamp(72px, 10vw, 128px) 0 0; }
.eyebrow {
  margin: 0 0 14px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red-glow);
}
.headline {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.04; font-weight: 800; letter-spacing: -0.035em;
  max-width: 620px;
}
.subhead { margin: 0 0 44px; max-width: 560px; color: var(--ink-2); font-size: 17px; line-height: 1.6; }

/* Mechanics — each tile opens with a staged card scene, not an icon. */
.mech { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .mech { grid-template-columns: 1fr; } }
.mech-tile {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 26px;
  padding: 28px 28px 30px;
}
.mech-tile::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px 200px at 20% 0%, rgba(255, 255, 255, 0.05), transparent 70%);
  pointer-events: none;
}
.mech-scene {
  height: 148px; display: flex; align-items: center; justify-content: center;
  gap: 0; position: relative; margin-bottom: 22px;
}
.mech-scene .pcard { --w: 66px; }
.mech-scene .overlap { margin-left: -26px; }
.mech-scene .tilt-l { transform: rotate(-9deg) translateY(4px); }
.mech-scene .tilt-r { transform: rotate(9deg) translateY(4px); }
.mech-scene .raise { transform: translateY(-10px); z-index: 2; }
.mech-scene .scene-stamp { position: absolute; }
.mech-tile h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
}
.mech-tile p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

/* Multiplier chips for the stakes scene */
.multi {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 52px; padding: 0 14px;
  border-radius: 16px;
  font-family: var(--font-round); font-weight: 800; font-size: 21px; letter-spacing: -0.02em;
  color: #2b1d04;
  background: linear-gradient(180deg, var(--gold-soft), #d9a84a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 24px rgba(232, 181, 74, 0.25);
}
.multi.ghost {
  color: var(--gold-soft);
  background: rgba(232, 181, 74, 0.10);
  border: 1px solid rgba(232, 181, 74, 0.34);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Screens rail — framed raw captures, swipeable.
   -------------------------------------------------------------------------- */
.screens {
  /* Column width chosen so all four devices fit the 1200px rail on desktop
     (4 × 258 + 3 × 28 = 1116) — the rail still scrolls below that. */
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(216px, 19vw, 258px);
  gap: clamp(18px, 2.4vw, 28px);
  overflow-x: auto; padding: 12px var(--pad) 26px;
  max-width: calc(var(--shell) + 60px); margin: 0 auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.screens::-webkit-scrollbar { display: none; }
.screen { scroll-snap-align: center; }
.screen figure { margin: 0; }
.screen .device { border-radius: 40px; padding: 8px; }
.screen .device::after { top: 19px; }
.screen .device img { border-radius: 32px; }
.screen figcaption { margin-top: 16px; text-align: center; font-size: 14.5px; color: var(--ink-2); }
.screen figcaption b { display: block; color: var(--ink); font-weight: 600; font-size: 15px; margin-bottom: 2px; }

/* --------------------------------------------------------------------------
   Journey — numbered editorial rows.
   -------------------------------------------------------------------------- */
.journey { max-width: 720px; }
.journey li { list-style: none; display: flex; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--stroke); }
.journey li:last-child { border-bottom: 0; }
.journey ol, ol.journey { margin: 0; padding: 0; }
.j-num {
  flex: none; width: 44px;
  font-family: var(--font-round); font-weight: 800; font-size: 30px;
  color: var(--ink-3); line-height: 1.15;
}
.j-body h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.j-body p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.j-body .pill-row { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--stroke); border-radius: 999px; padding: 5px 11px;
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */
.close-cta { position: relative; text-align: center; padding: clamp(88px, 12vw, 150px) 0 clamp(72px, 9vw, 110px); overflow: hidden; }
.close-cta .glow {
  position: absolute; left: 50%; bottom: -320px; transform: translateX(-50%);
  width: 900px; height: 620px;
  background: radial-gradient(closest-side, rgba(238, 70, 62, 0.16), transparent 74%);
  pointer-events: none;
}
.close-cta .shell { position: relative; }
.close-cta .fan { display: flex; justify-content: center; margin-bottom: 34px; }
.close-cta .fan .pcard { --w: 64px; }
.close-cta .fan .pcard + .pcard { margin-left: -24px; }
.close-cta .fan .f1 { transform: rotate(-14deg) translateY(8px); }
.close-cta .fan .f2 { transform: rotate(-5deg); }
.close-cta .fan .f3 { transform: rotate(5deg); z-index: 2; box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.9),
  0 0 0 2.5px var(--red), 0 0 30px rgba(238, 70, 62, 0.5), 0 14px 30px rgba(0, 0, 0, 0.5); }
.close-cta .fan .f4 { transform: rotate(14deg) translateY(8px); }
.close-cta h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(34px, 5.4vw, 58px);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1.02;
}
.close-cta .sub { margin: 0 auto 34px; max-width: 430px; color: var(--ink-2); font-size: 17px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer { border-top: 1px solid var(--stroke); padding: 38px 0 54px; }
footer .shell { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
footer nav { display: flex; gap: 4px; flex-wrap: wrap; }
footer a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; padding: 6px 10px; border-radius: 8px; }
footer a:hover { color: var(--ink); background: var(--surface); }
footer .copy { margin-left: auto; color: var(--ink-3); font-size: 13.5px; }
@media (max-width: 620px) {
  footer .shell { flex-direction: column; align-items: center; gap: 10px; }
  footer .copy { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Inner pages (rules / support / privacy)
   -------------------------------------------------------------------------- */
.page-head { padding: clamp(56px, 8vw, 92px) 0 clamp(28px, 4vw, 44px); }
.page-head h1 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 62px);
  line-height: 1.02; font-weight: 800; letter-spacing: -0.04em;
}
.page-head .intro { margin: 0; color: var(--ink-2); font-size: 18px; max-width: 560px; }
.stamp-date { margin: 12px 0 0; font-size: 14px; color: var(--ink-3); }

main.prose { padding-bottom: 40px; }
.prose h2 {
  margin: 52px 0 14px;
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700; letter-spacing: -0.025em;
}
.prose h3 { margin: 28px 0 8px; font-size: 17px; font-weight: 650; }
.prose p, .prose li { color: var(--ink-2); font-size: 16px; line-height: 1.65; }
.prose p { margin: 0 0 15px; }
.prose ul { margin: 0 0 15px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--red-glow); text-decoration: none; }
.prose a:hover { text-decoration: underline; }

.note {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 20px 22px;
  margin: 0 0 22px;
}
.note p:last-child { margin-bottom: 0; }

/* Rules: the ranking rendered as actual cards. */
.rank-cards {
  display: flex; align-items: flex-end; gap: 7px;
  overflow-x: auto; padding: 24px 2px 12px;
  scrollbar-width: none;
}
.rank-cards::-webkit-scrollbar { display: none; }
.rank-cards .pcard { --w: 46px; border-radius: 8px; }
.rank-cards .lift { transform: translateY(-9px); box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.9),
  0 0 0 2px var(--red), 0 0 20px rgba(238, 70, 62, 0.45), 0 10px 22px rgba(0, 0, 0, 0.5); }
.rank-note { font-size: 14px; color: var(--ink-3); margin: 6px 0 0; }

table.plays { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
table.plays th, table.plays td {
  text-align: left; padding: 14px 0; border-bottom: 1px solid var(--stroke);
  font-size: 15.5px; vertical-align: top;
}
table.plays th { color: var(--ink); font-weight: 650; width: 32%; padding-right: 18px; }
table.plays td { color: var(--ink-2); }
table.plays tr:last-child th, table.plays tr:last-child td { border-bottom: 0; }

/* FAQ */
.faq { border-top: 1px solid var(--stroke); margin-top: 24px; }
.faq.landing-faq { max-width: 720px; margin-top: 8px; }
.faq.landing-faq details p { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.faq.landing-faq details p strong { color: var(--ink); font-weight: 600; }
.faq.landing-faq details p a { color: var(--red-glow); text-decoration: none; }
.faq details { border-bottom: 1px solid var(--stroke); padding: 18px 0; }
.faq summary {
  cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--ink-3);
  font-size: 22px; font-weight: 300; line-height: 1;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 12px 0 2px; }

/* Contact card */
.contact {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  padding: 24px 26px;
  margin-bottom: 10px;
}
.contact p { margin: 0; color: var(--ink-2); font-size: 16px; }
.contact p b { color: var(--ink); font-weight: 650; display: block; font-size: 17px; margin-bottom: 2px; }
.contact a.mail {
  flex: none;
  display: inline-block;
  background: #fff; color: #000;
  text-decoration: none;
  padding: 12px 22px; border-radius: 999px;
  font-size: 15.5px; font-weight: 600;
  transition: transform 0.15s ease;
}
.contact a.mail:hover { transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   Reveal-on-scroll (JS adds .in; without JS everything stays visible)
   -------------------------------------------------------------------------- */
html.js .rv { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
html.js .rv.in { opacity: 1; transform: none; }
html.js .rv.d1 { transition-delay: 0.08s; }
html.js .rv.d2 { transition-delay: 0.16s; }
html.js .rv.d3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .rv { opacity: 1; transform: none; transition: none; }
  .appstore, .contact a.mail { transition: none; }
}