/* ═══════════════════════════════════════════════════════════════════
   R-Flow website design system
   Palette mirrors the desktop app (ModernTheme): near-black stage,
   magenta primary, purple/blue accents.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg: #08080a;
  --bg-2: #0e0e12;
  --panel: #141419;
  --panel-2: #1a1a21;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #e4e4e7;
  --muted: #9a9aa6;
  --faint: #85858f;   /* WCAG-safe on the near-black bg */
  --pink: #bb406a;
  --pink-hi: #d4587f;
  --purple: #8b5cf6;
  --blue: #3b82f6;
  --green: #22c55e;
  --amber: #f59e0b;
  --red: #ef4444;
  --grad: linear-gradient(100deg, var(--pink-hi), var(--purple) 55%, var(--blue));
  --radius: 14px;
  --radius-lg: 22px;
  --nav-h: 72px;
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(139, 92, 246, 0.45); }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 6.5vw, 4.6rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--pink-hi); text-decoration: none; }
a:hover { color: #fff; }
img, svg, canvas { max-width: 100%; display: block; }
code, .mono { font-family: 'Cascadia Code', Consolas, monospace; }

.wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.section { padding: 96px 0; position: relative; }
.section.tight { padding: 56px 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--grad); border-radius: 2px; }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.lead { font-size: 1.16rem; color: var(--muted); max-width: 62ch; }

/* ── Nav ─────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h);
  display: flex; align-items: center;
  transition: background 0.35s, border-color 0.35s, backdrop-filter 0.35s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(8, 8, 10, 0.78);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 28px; width: min(1280px, calc(100% - 48px)); margin: 0 auto; }
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo img { height: 34px; width: auto; }
.nav-logo span {
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  color: #fff; letter-spacing: 0.02em;
}
.nav-links { display: flex; gap: 22px; margin-right: auto; margin-left: 10px; }
.nav-links a {
  color: var(--muted); font-size: 0.95rem; font-weight: 500;
  padding: 6px 2px; position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--grad); transition: right 0.25s ease; border-radius: 2px;
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }
.nav-links a.active { color: var(--text); }
.nav-cta { display: flex; align-items: center; gap: 14px; }

.cart-link { position: relative; color: var(--text); font-size: 1.25rem; padding: 4px 6px; }
.cart-badge {
  position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px;
  border-radius: 9px; background: var(--pink); color: #fff;
  font-size: 0.68rem; font-weight: 700; display: flex; align-items: center;
  justify-content: center; padding: 0 5px; font-family: var(--font-display);
}

.nav-burger { display: none; background: none; border: 0; color: var(--text); font-size: 1.5rem; cursor: pointer; }

@media (max-width: 900px) {
  .nav-links {
    display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; gap: 0; background: rgba(8, 8, 10, 0.97);
    border-bottom: 1px solid var(--line); padding: 12px 24px 20px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; font-size: 1.05rem; }
  .nav-burger { display: block; margin-left: auto; }
  .nav-cta .btn { display: none; }
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.98rem;
  padding: 13px 26px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: box-shadow 0.25s, background 0.25s, border-color 0.25s;
  white-space: nowrap; line-height: 1;
  /* transform intentionally NOT transitioned — GSAP owns it (magnetic effect) */
}
/* Hover shift done as a second gradient fading in on a pseudo-element:
   no oversized background, no background-position animation, no overflow
   clipping — those all produce corner/seam artifacts in Chromium when the
   button is transformed inside a backdrop-filter ancestor. */
.btn-primary {
  background: var(--grad); color: #fff;
  position: relative; z-index: 0;
  box-shadow: 0 8px 30px rgba(187, 64, 106, 0.35);
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: linear-gradient(100deg, var(--purple), var(--blue) 60%, var(--purple));
  opacity: 0; transition: opacity 0.25s;
}
.btn-primary:hover { color: #fff; box-shadow: 0 10px 38px rgba(139, 92, 246, 0.45); }
.btn-primary:hover::before { opacity: 1; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--pink-hi); color: #fff; }
.btn-dark { background: var(--panel-2); color: var(--text); border-color: var(--line); }
.btn-dark:hover { border-color: var(--line-strong); color: #fff; }
.btn-sm { padding: 9px 18px; font-size: 0.88rem; }
.btn-lg { padding: 16px 34px; font-size: 1.08rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  overflow: hidden; padding-top: var(--nav-h);
}
#hero3d {
  position: absolute; inset: 0; z-index: 0;
  /* brand gradient behind/instead of the 3D wall (loading + no-WebGL fallback) */
  background:
    radial-gradient(70% 80% at 30% 30%, rgba(139, 92, 246, 0.28), transparent 60%),
    radial-gradient(70% 80% at 75% 60%, rgba(212, 88, 127, 0.24), transparent 60%),
    var(--bg);
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 45%, transparent 0%, rgba(8, 8, 10, 0.25) 62%, var(--bg) 100%),
    linear-gradient(to top, var(--bg) 0%, transparent 22%);
}
.hero-content { position: relative; z-index: 2; padding: 60px 0; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px; font-size: 0.85rem;
  color: var(--muted); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 7px 16px; margin-bottom: 26px; backdrop-filter: blur(6px);
  background: rgba(14, 14, 18, 0.5);
}
.hero-kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.hero h1 { max-width: 13ch; }
.hero .lead { margin: 18px 0 34px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
/* ── Cards ───────────────────────────────────────────────────────── */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px; position: relative; overflow: hidden;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.card:hover { border-color: rgba(212, 88, 127, 0.4); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
/* (The 3D card tilt is gone site-wide — Firefox mis-rasterized text on
   3D-transformed layers. .no-tilt in templates is a harmless leftover.) */
.card .card-glow {
  position: absolute; inset: -1px; border-radius: inherit; opacity: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(139, 92, 246, 0.16), transparent 55%);
  transition: opacity 0.3s;
}
.card:hover .card-glow { opacity: 1; }

.tab-card { display: flex; flex-direction: column; min-height: 220px; color: var(--text); }
.tab-card:hover { color: var(--text); }
.tab-card .tab-icon {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center;
  justify-content: center; font-size: 1.5rem; margin-bottom: 18px;
  background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.25);
}
.tab-card h3 { display: flex; align-items: center; gap: 10px; }
.tab-card p { color: var(--muted); font-size: 0.95rem; flex: 1; }
.tab-card .tab-more { font-family: var(--font-display); font-size: 0.88rem; font-weight: 600; color: var(--pink-hi); }
.badge-free {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green); border: 1px solid rgba(34, 197, 94, 0.4); border-radius: 999px;
  padding: 3px 10px; background: rgba(34, 197, 94, 0.08);
}
.badge-price {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
  color: var(--pink-hi); border: 1px solid rgba(212, 88, 127, 0.4); border-radius: 999px;
  padding: 3px 10px; background: rgba(212, 88, 127, 0.08); font-family: var(--font-display);
}

/* ── Feature list on tab pages ───────────────────────────────────── */
.feature-row { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; }
.feature-row .fnum {
  width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: #fff;
  background: linear-gradient(140deg, rgba(212, 88, 127, 0.9), rgba(139, 92, 246, 0.9));
  font-size: 0.95rem;
}
.feature-row h3 { margin-bottom: 4px; }
.feature-row p { color: var(--muted); font-size: 0.97rem; }

/* ── Docs steps ──────────────────────────────────────────────────── */
.steps { counter-reset: step; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.step {
  counter-increment: step; position: relative; padding: 0 0 34px 66px;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  color: var(--pink-hi); background: var(--panel); border: 1px solid rgba(212, 88, 127, 0.45);
}
.step::after {
  content: ''; position: absolute; left: 22px; top: 48px; bottom: 6px; width: 1px;
  background: linear-gradient(var(--line-strong), transparent);
}
.step:last-child::after { display: none; }
.step h3 { margin-bottom: 6px; font-size: 1.1rem; }
.step p { color: var(--muted); }

/* ── Info tables / chips / notes ─────────────────────────────────── */
.spec-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.spec-table th, .spec-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { color: var(--text); font-family: var(--font-display); white-space: nowrap; width: 220px; font-weight: 600; }
.spec-table td { color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-size: 0.85rem; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--muted); background: var(--panel);
}
.chip.on { border-color: rgba(34, 197, 94, 0.5); color: var(--green); background: rgba(34, 197, 94, 0.07); }

.note {
  border: 1px solid var(--line); border-left: 3px solid var(--amber);
  background: var(--panel); border-radius: 10px; padding: 14px 18px;
  color: var(--muted); font-size: 0.95rem; margin-bottom: 12px;
}
.note.tip { border-left-color: var(--blue); }

/* ── Buy box ─────────────────────────────────────────────────────── */
.buybox {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: 26px; position: sticky; top: calc(var(--nav-h) + 20px);
}
.buybox .price { font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; }
.buybox .price small { font-size: 1rem; color: var(--muted); font-weight: 500; }
.buybox form { margin: 0; }
.buybox .btn { width: 100%; margin-top: 14px; }
.buybox ul { margin: 14px 0 0; padding-left: 18px; color: var(--muted); font-size: 0.92rem; }

/* ── Store ───────────────────────────────────────────────────────── */
.product-card { display: flex; flex-direction: column; }
.product-card .p-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.product-card .p-price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: #fff; }
.product-card p { color: var(--muted); font-size: 0.94rem; flex: 1; }
.product-card .p-actions { display: flex; gap: 10px; align-items: center; }
.in-cart { color: var(--green); font-size: 0.88rem; font-weight: 600; }

.bundle-card {
  border: 1px solid transparent; border-radius: var(--radius-lg); padding: 2px;
  background: var(--grad); position: relative;
}
.bundle-inner {
  background: var(--bg-2); border-radius: calc(var(--radius-lg) - 2px);
  padding: 30px; display: flex; flex-wrap: wrap; gap: 26px; align-items: center;
}
.bundle-inner h3 { font-size: 1.6rem; }
.bundle-inner .p-price { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; }

.cart-panel { background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 26px; position: sticky; top: calc(var(--nav-h) + 20px); }
.cart-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.cart-line .x-btn { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; padding: 2px 6px; }
.cart-line .x-btn:hover { color: var(--red); }
.cart-total { display: flex; justify-content: space-between; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; padding-top: 16px; }
.cart-line.redundant { opacity: 0.55; text-decoration: line-through; }

/* ── Forms ───────────────────────────────────────────────────────── */
.form-card { max-width: 460px; margin: 0 auto; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 34px; }
.form-card h2 { margin-bottom: 20px; }
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 7px; font-family: var(--font-display); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 12px 15px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--bg-2); color: var(--text); font-size: 0.98rem; font-family: var(--font-body);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-field input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18); }
.form-field .helptext, .form-field .helptext ul { color: var(--faint); font-size: 0.8rem; margin: 6px 0 0; padding-left: 16px; }
.form-field .helptext { display: block; padding-left: 0; }
.errorlist { color: var(--red); font-size: 0.85rem; margin: 6px 0 0; padding-left: 16px; }

/* ── License key box ─────────────────────────────────────────────── */
.keybox {
  background: var(--bg-2); border: 1px solid rgba(34, 197, 94, 0.4); border-radius: var(--radius);
  padding: 18px 20px; display: flex; gap: 14px; align-items: center; overflow-x: auto;
}
.keybox code { font-size: 0.9rem; color: var(--green); word-break: break-all; white-space: normal; }

/* ── Toasts / messages ───────────────────────────────────────────── */
.toasts { position: fixed; top: calc(var(--nav-h) + 14px); right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--panel-2); border: 1px solid var(--line-strong); border-left: 3px solid var(--purple);
  color: var(--text); border-radius: 12px; padding: 13px 40px 13px 18px; font-size: 0.93rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); max-width: 340px; position: relative;
}
.toast.success { border-left-color: var(--green); }
.toast.error { border-left-color: var(--red); }
.toast .t-close { position: absolute; right: 8px; top: 8px; background: none; border: 0; color: var(--faint); cursor: pointer; }

/* ── Docs sidebar layout ─────────────────────────────────────────── */
.docs-layout { display: grid; grid-template-columns: 250px 1fr; gap: 44px; align-items: start; }
.docs-side { position: sticky; top: calc(var(--nav-h) + 20px); }
.docs-side h4 { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin: 18px 0 8px; }
.docs-side a { display: block; color: var(--muted); font-size: 0.92rem; padding: 5px 0 5px 12px; border-left: 2px solid var(--line); }
.docs-side a:hover { color: var(--text); border-left-color: var(--pink-hi); }
.docs-side a.active { color: var(--text); border-left-color: var(--pink-hi); }
@media (max-width: 900px) { .docs-layout { grid-template-columns: 1fr; } .docs-side { position: static; } }

/* ── Footer ──────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); background: var(--bg-2); padding: 56px 0 34px; margin-top: 40px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
footer h4 { font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
footer a { display: block; color: var(--muted); font-size: 0.93rem; padding: 4px 0; }
footer a:hover { color: var(--text); }
.foot-brand img { height: 30px; margin-bottom: 12px; }
.foot-brand p { color: var(--faint); font-size: 0.9rem; max-width: 34ch; }
.foot-bottom { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: var(--faint); font-size: 0.85rem; border-top: 1px solid var(--line); margin-top: 40px; padding-top: 22px; }

/* ── Reveal (JS-gated so no-JS users see everything) ──────────────
   The [data-revealed] override matters: reveal tweens clearProps on
   completion (so hover effects get a clean element), and without it the
   base hidden rule would re-apply and blank the element again. */
html.js .reveal { opacity: 0; transform: translateY(28px); }
html.js .reveal-l { opacity: 0; transform: translateX(-36px); }
html.js .reveal-r { opacity: 0; transform: translateX(36px); }
html.js .reveal[data-revealed], html.js .reveal-l[data-revealed],
html.js .reveal-r[data-revealed] { opacity: 1; transform: none; }

/* ── CTA band ────────────────────────────────────────────────────── */
.cta-band { border-radius: var(--radius-lg); padding: 2px; background: var(--grad); }
.cta-band-inner {
  border-radius: calc(var(--radius-lg) - 2px); background: var(--bg-2);
  padding: 54px 40px; text-align: center;
}
.cta-band-inner p { color: var(--muted); max-width: 52ch; margin-inline: auto; }

/* ── Page hero (subpages) ────────────────────────────────────────── */
.page-hero { padding: calc(var(--nav-h) + 70px) 0 40px; position: relative; overflow: hidden; }
.page-hero .big-icon {
  width: 74px; height: 74px; border-radius: 20px; font-size: 2.1rem;
  display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
  background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.3);
}
.page-hero::before {
  content: ''; position: absolute; top: -220px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 480px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139, 92, 246, 0.14), transparent);
  pointer-events: none;
}

.two-col { display: grid; grid-template-columns: 1fr 340px; gap: 44px; align-items: start; }
@media (max-width: 980px) { .two-col { grid-template-columns: 1fr; } .buybox { position: static; } }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ── UI screenshots (browser-frame style) ────────────────────────── */
.shot-frame {
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--panel);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.shot-frame .shot-bar {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.shot-frame .shot-bar i {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.shot-frame .shot-bar i:nth-child(1) { background: #ef4444; }
.shot-frame .shot-bar i:nth-child(2) { background: #f59e0b; }
.shot-frame .shot-bar i:nth-child(3) { background: #22c55e; }
.shot-frame .shot-bar span {
  margin-left: 10px; color: var(--faint); font-size: 0.78rem;
  font-family: var(--font-display);
}
.shot-frame img { width: 100%; display: block; aspect-ratio: 3440 / 1369; object-fit: cover; }
/* Illustration inside a how-to step. Unlike .shot-frame (ultrawide app
   screenshots) this keeps the image's own proportions — these are usually
   tall dialog windows, so cropping them to a letterbox loses the point. */
.step-shot { margin: 14px 0 0; max-width: 420px; }
.step-shot img {
  width: 100%; height: auto; display: block; border-radius: 12px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.shot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .shot-grid { grid-template-columns: 1fr; } }

/* ── Liquid glass (iOS-style frosted panels) ─────────────────────── */
.glass {
  background: rgba(18, 18, 24, 0.42);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 24px 70px rgba(0, 0, 0, 0.45);
  border-radius: 28px;
}
.hero-glass {
  max-width: 820px;
  padding: clamp(28px, 4vw, 52px);
}
.hero-glass h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }
.hero-glass .lead { color: #c6c6d0; }

.nav.scrolled {
  background: rgba(10, 10, 14, 0.55);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
}
.buybox, .cart-panel, .form-card, .toast {
  background: rgba(20, 20, 27, 0.55);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 50px rgba(0, 0, 0, 0.4);
}

/* ── Custom cursor accent (desktop only) ─────────────────────────── */
@media (pointer: fine) {
  .cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none;
    border-radius: 50%; will-change: transform;
  }
  .cursor-dot { width: 8px; height: 8px; background: var(--pink-hi); }
  .cursor-ring {
    width: 38px; height: 38px; border: 1.5px solid rgba(212, 88, 127, 0.55);
    transition: width 0.25s, height 0.25s, border-color 0.25s, background 0.25s;
  }
  .cursor-ring.is-hover {
    width: 58px; height: 58px; border-color: rgba(139, 92, 246, 0.9);
    background: rgba(139, 92, 246, 0.08);
  }
}
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* ── Scroll progress bar ─────────────────────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 90;
  background: var(--grad); transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* ── Film grain ──────────────────────────────────────────────────── */
body::after {
  content: ''; position: fixed; inset: -50%; z-index: 150; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Stats band ──────────────────────────────────────────────────── */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 800px) { .stats-band { grid-template-columns: repeat(2, 1fr); } }
.stat { text-align: center; padding: 30px 10px; }
.stat .num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.stat .lbl { color: var(--muted); font-size: 0.92rem; margin-top: 8px; }

/* ── Screenshot clip reveal + split-line masks (JS-gated) ────────── */
html.js .shot-frame.clip-reveal { clip-path: inset(0 100% 0 0 round var(--radius-lg)); }
.split-line-mask { overflow: hidden; display: block; }

/* ── Focus visibility (keyboard users) ───────────────────────────── */
:is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
  /* no border-radius override here — it would square off pill buttons */
}

/* ── Account / avatar ────────────────────────────────────────────── */
.nav-account { display: flex; align-items: center; gap: 9px; color: var(--text); }
.nav-account:hover { color: #fff; }
.nav-account-name { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--line-strong); flex: none;
}
.avatar-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff; font-family: var(--font-display);
  font-weight: 700; font-size: 0.95rem;
}
.avatar-lg { width: 64px; height: 64px; font-size: 1.5rem; }

/* Avatar upload row: the form must be allowed to shrink (min-width: 0),
   and file inputs need an explicit width or they overflow their flex cell */
.avatar-row { display: flex; align-items: center; gap: 14px; margin: 10px 0; flex-wrap: wrap; }
.avatar-form { flex: 1; min-width: 0; }
.avatar-form input[type="file"] {
  display: block; width: 100%; max-width: 100%;
  font-size: 0.82rem; color: var(--muted);
}
.avatar-form .btn { margin-top: 8px; }

/* ── Mobile-menu-only links ──────────────────────────────────────── */
.nav-mobile-only { display: none !important; }
@media (max-width: 900px) {
  .nav-links.open .nav-mobile-only { display: block !important; }
  .nav-links .nav-mobile-only { display: block !important; }
  .nav-account-name { display: none; }
}

/* ── Hero FOUC guard: hidden until GSAP animates (JS-gated) ──────── */
html.js .hero-kicker, html.js .hero .lead, html.js .hero-ctas,
html.js .hero h1[data-split] { visibility: hidden; }
html.no-motion .hero-kicker, html.no-motion .hero .lead,
html.no-motion .hero-ctas, html.no-motion .hero h1[data-split] { visibility: visible; }

/* ── Custom cursor hidden until JS takes over (CDN-failure guard) ── */
.cursor-dot, .cursor-ring { opacity: 0; }
html.cursor-ready .cursor-dot, html.cursor-ready .cursor-ring { opacity: 1; }

/* ── Legal pages ─────────────────────────────────────────────────── */
.legal-body h3 { color: var(--text); margin-top: 28px; }
.legal-body p { margin-bottom: 14px; }

/* ── Mobile overflow safety ──────────────────────────────────────── */
/* Grid/flex children may not shrink below content size without this */
.grid > *, .two-col > *, .docs-layout > *, .foot-grid > *,
.stats-band > *, .bundle-inner > * { min-width: 0; }

/* Long tokens in docs content (file paths, key strings) must break */
p, li, td, th, h1, h2, h3, h4, .chip, .note, .cart-line, .lbl {
  overflow-wrap: break-word;
}

@media (max-width: 640px) {
  /* Pill buttons: let long labels wrap instead of forcing overflow */
  .btn { white-space: normal; text-align: center; }
  .hero-ctas .btn { width: 100%; }
  .hero-ctas { flex-direction: column; align-items: stretch; }

  /* Settings tables: stack label over description */
  .spec-table tr { display: block; border-bottom: 1px solid var(--line); padding: 10px 0; }
  .spec-table th, .spec-table td {
    display: block; width: auto; border-bottom: 0; padding: 2px 4px;
    white-space: normal;
  }
  .spec-table th { color: var(--pink-hi); }

  .section { padding: 64px 0; }
  .wrap { width: calc(100% - 32px); }
  .hero-glass { padding: 22px; border-radius: 20px; }
  .buybox, .cart-panel { position: static; }
  .step { padding-left: 56px; }
  .toasts { left: 16px; right: 16px; }
  .toast { max-width: none; }
}

/* reduced motion: kill the fancy stuff */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .reveal-l, html.js .reveal-r { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  html { scroll-behavior: auto; }
}

/* Optional manual ad placement (partials/ad_unit.html). Auto ads doesn't use
   this — it's here for when a specific slot is wanted in a specific spot. */
.ad-slot { display: block; margin: 28px auto; max-width: 970px; text-align: center; }
.ad-slot .ad-label {
  display: block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 6px;
}

/* ── Click a screenshot to enlarge ────────────────────────────────
   Docs images are deliberately cropped tight to the control they
   explain, which makes some of them small. Clicking opens the full
   image over the page. */
.step-shot img, .shot-frame img { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center; padding: 4vmin;
  background: rgba(6, 6, 9, 0.92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 96vw; max-height: 92vh;
  border-radius: 10px; border: 1px solid var(--line-strong);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7);
  /* Crisp at any zoom: these are UI screenshots, not photos. */
  image-rendering: -webkit-optimize-contrast;
}
.lightbox .lb-close {
  position: absolute; top: 18px; right: 22px; font-size: 1.6rem;
  color: var(--muted); background: none; border: 0; cursor: pointer;
  line-height: 1; padding: 6px 10px;
}
.lightbox .lb-close:hover { color: #fff; }
.lightbox .lb-cap {
  position: absolute; bottom: 18px; left: 0; right: 0; text-align: center;
  color: var(--muted); font-size: 0.85rem; padding: 0 20px;
}

/* ── Tooltips ──────────────────────────────────────────────────────────
   Replaces the browser's native title= bubble (unstyleable, slow to appear,
   and visually off-brand). JS moves any title into data-tip at hover time,
   so it also covers content added after load (e.g. localised timestamps). */
.rf-tip {
  position: fixed; z-index: 200; max-width: 300px;
  padding: 8px 11px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--line-strong);
  color: var(--text); font-size: 0.82rem; line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.rf-tip[data-show] { opacity: 1; transform: translateY(0); }
.rf-tip::after {           /* little arrow, flipped when shown above */
  content: ''; position: absolute; left: var(--tip-arrow, 50%); margin-left: -5px;
  border: 5px solid transparent;
}
.rf-tip[data-side="top"]::after { bottom: -10px; border-top-color: var(--line-strong); }
.rf-tip[data-side="bottom"]::after { top: -10px; border-bottom-color: var(--line-strong); }
@media (prefers-reduced-motion: reduce) {
  .rf-tip { transition: none; }
}


/* ── Arrow game HUD (download page) ──────────────────────────────── */
#arrow-hud {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: 40; width: 208px; padding: 14px 16px;
  background: rgba(14, 14, 18, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong); border-radius: 14px;
  font-size: 0.82rem; color: var(--muted); pointer-events: none;
}
#arrow-hud .hud-stats { display: flex; justify-content: space-between; gap: 8px;
  font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.08em; }
#arrow-hud .hud-stats b { color: var(--text); font-size: 0.95rem; }
#arrow-hud .hud-lives { color: var(--pink-hi); letter-spacing: 2px; }
#arrow-hud .hud-power { margin-top: 8px; color: var(--green);
  font-family: var(--font-display); font-size: 0.78rem; }
#arrow-hud .hud-over { margin-top: 10px; color: var(--pink-hi);
  font-family: var(--font-display); }
#arrow-hud .hud-best { display: block; color: var(--green); font-size: 0.75rem; }
#arrow-hud h4 { margin: 12px 0 6px; font-size: 0.72rem; letter-spacing: 0.14em;
  color: var(--faint); text-transform: uppercase; }
#arrow-hud ol { list-style: none; margin: 0; padding: 0; }
#arrow-hud ol li { display: flex; justify-content: space-between; gap: 8px;
  padding: 2px 0; font-size: 0.78rem; }
#arrow-hud ol li b { color: var(--text); }
#arrow-hud .hud-empty span { color: var(--faint); font-style: italic; }
#arrow-hud .hud-tip { margin: 10px 0 0; font-size: 0.7rem; color: var(--faint); line-height: 1.4; }
/* While a run is live the backdrop stops being scenery. */
body.arrow-game #page-bg { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 860px) { #arrow-hud { display: none; } }

/* ── Hide the browser scrollbar ────────────────────────────────────────
   The page still scrolls normally (wheel, keys, touch, scrollbar drag on
   trackpads) — only the visual bar is gone. The gradient .scroll-progress
   strip at the top of the viewport carries the position feedback the bar
   would have given, so nothing is lost. Inner scroll areas keep their own
   bars so those regions still read as scrollable. */
html {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* legacy Edge/IE */
}
html::-webkit-scrollbar { width: 0; height: 0; display: none; }  /* Chromium/WebKit */


/* While sweeping the clip grid, don't let the drag select page text. */
body.bg-painting, body.bg-painting * { user-select: none; -webkit-user-select: none; }
body.bg-painting { cursor: crosshair; }