/* ═══════════════════════════════════════════════════════════════════
   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: none; color: #fff;
  position: relative; z-index: 0;
  box-shadow: 0 8px 30px rgba(187, 64, 106, 0.35);
}
/* The resting gradient lives on its own pseudo-element, exactly like the
   hover gradient below and for the same reason: painted directly on the
   button, GSAP's magnetic transform promotes the element to a GPU layer
   (inside a backdrop-filter ancestor) and Chromium mis-rasterizes the
   gradient at the pill's caps — thin bars of the wrong end's colour.
   On a pseudo the gradient is painted and clipped in its own box, which
   sidesteps it. inset:-1px covers the .btn transparent border area the
   old border-box background used to fill. */
.btn-primary::after {
  content: ''; position: absolute; inset: -1px; z-index: -2;
  border-radius: inherit;
  background: var(--grad);
}
.btn-primary::before {
  content: ''; position: absolute; inset: -1px; 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 (docs): stack label over description. Scoped away from
     .dev-table, which uses its own card-per-row layout below — this rule
     turns every th/td into an unrelated block, detaching multi-column
     headers from their data. */
  .spec-table:not(.dev-table) tr { display: block; border-bottom: 1px solid var(--line); padding: 10px 0; }
  .spec-table:not(.dev-table) th, .spec-table:not(.dev-table) td {
    display: block; width: auto; border-bottom: 0; padding: 2px 4px;
    white-space: normal;
  }
  .spec-table:not(.dev-table) th { color: var(--pink-hi); }

  /* Dev tools tables: wide multi-column tables become one card per row,
     each cell showing its column label above the value. No side-scroll. */
  .dev-table thead { display: none; }
  .dev-table tbody tr {
    display: block; border: 1px solid var(--line-strong); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 10px;
  }
  .dev-table tbody tr:last-child { margin-bottom: 0; }
  .dev-table tbody td,
  .dev-table tbody td.c,
  .dev-table tbody td.clip {
    display: block; width: auto; max-width: none; border-bottom: 1px solid var(--line);
    padding: 6px 2px; white-space: normal !important; text-align: left !important;
    overflow: visible; text-overflow: clip; word-break: break-word;
  }
  .dev-table tbody td:last-child { border-bottom: 0; }
  .dev-table tbody td::before {
    content: attr(data-label); display: block; color: var(--faint);
    font-size: 0.62rem; text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: 3px; font-family: var(--font-display);
  }
  .dev-table tbody td:empty::before { margin-bottom: 0; }
  .dev-table tbody tr.empty-row { border: 0; padding: 0; }
  .dev-table tbody tr.empty-row td::before { content: none; }

  .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; }


/* ── App icons ────────────────────────────────────────────────────
   The exact PNGs the desktop app draws in its sidebar. Fixed box and a
   single tint so every row lines up — the old mix of emoji and geometry
   glyphs rendered at different widths and colours. */
.app-icon, .big-icon img {
  width: 18px; height: 18px; display: inline-block; vertical-align: -3px;
  object-fit: contain; flex: 0 0 auto;
  /* Icons ship near-white; tint them to the muted UI grey like the app. */
  opacity: 0.78;
}
a:hover .app-icon, .tab-card:hover .app-icon { opacity: 1; }
.app-icon-glyph { display: inline-block; width: 18px; text-align: center; }
.tab-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; }
.big-icon img { width: 34px; height: 34px; opacity: 0.9; vertical-align: middle; }

/* ── Styled dropdowns ─────────────────────────────────────────────────
   A native <select> can be styled closed, but the OPEN list is drawn by
   the OS and ignores every rule here — which is how a grey Windows menu
   ended up in the middle of a dark page. select.js swaps in this markup
   and keeps the real <select> for submitting. */
.sel { position: relative; display: inline-block; }
.sel-native {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; margin: -1px; overflow: hidden;
}
.sel-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: transparent;
  color: var(--text); font: inherit; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.sel-btn:hover { border-color: rgba(255, 255, 255, 0.28); }
.sel.open .sel-btn { border-color: var(--purple); }
.sel-label { white-space: nowrap; }
.sel-caret { color: var(--faint); font-size: 0.75em; line-height: 1;
  transition: transform .15s; }
.sel.open .sel-caret { transform: rotate(180deg); }
.sel-list {
  /* FIXED, and portalled to <body> by select.js while open: the filters
     live inside .card, which sets overflow:hidden for its glow, and that
     clipped an in-flow dropdown at the card edge whatever its z-index. */
  position: fixed; z-index: 200;
  max-height: 320px; overflow-y: auto;
  padding: 6px; border-radius: 10px;
  border: 1px solid var(--line-strong);
  /* opaque, not translucent: this floats over arbitrary page content */
  background: var(--panel);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.sel-opt {
  padding: 9px 12px; border-radius: 7px; white-space: nowrap;
  color: var(--text); cursor: pointer;
}
.sel-opt:hover, .sel-opt.hot { background: var(--panel-2); }
.sel-opt.on { background: rgba(139, 92, 246, 0.22); color: #fff; }
.sel-opt[aria-disabled="true"] { color: var(--faint); cursor: default; }
.sel-opt[aria-disabled="true"]:hover { background: transparent; }

/* Activity-log chips carry the app they came from in their outline:
   pink = R-Flow, purple = LightFlow, default = site/staff events. */
.chip-rflow { border-color: rgba(212, 88, 127, 0.55); color: var(--pink-hi); }
.chip-lightflow { border-color: rgba(139, 92, 246, 0.55); color: #c084fc; }