/* Arrow Escape — styles.css
   Modern, minimal, premium mobile puzzle aesthetic
   Mobile-first, no dependencies, respects prefers-reduced-motion
*/

/* ── Tokens ───────────────────────────────────────── */
:root{
  --navy:#0f2040;
  --navy-2:#162d5a;
  --navy-3:#1a3568;
  --indigo:#3b5bdb;
  --indigo-2:#4263eb;
  --violet:#7048e8;
  --cyan:#15aabf;
  --teal:#0ea5a0;
  --amber:#f59f0a;
  --rose:#e64980;
  --lime:#40c057;
  --bg:#f8f9fc;
  --bg-2:#ffffff;
  --bg-3:#eef1f8;
  --surface:#ffffff;
  --line:#e6e9f2;
  --line-2:#dfe3f0;
  --text:#10162a;
  --muted:#5b6583;
  --muted-2:#7a85a6;
  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow-sm:0 2px 12px rgba(15,32,64,.07);
  --shadow:0 12px 40px rgba(15,32,64,.10);
  --shadow-lg:0 20px 60px rgba(15,32,64,.14);
  --max:1120px;
  --pad:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--indigo-2); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--indigo-2); outline-offset:2px; border-radius:4px}
.skip{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{left:12px; top:12px; width:auto; height:auto; background:#fff; padding:10px 14px; border-radius:10px; box-shadow:var(--shadow); z-index:9999}

/* ── Layout helpers ───────────────────────────────── */
.container{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
.section{padding:72px 0}
.section-tight{padding:48px 0}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--indigo-2);
  background:#eef1ff; border:1px solid #dde3ff; padding:6px 10px; border-radius:999px;
}
.h1{
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:clamp(36px, 6vw, 64px); line-height:.95; letter-spacing:-.03em; font-weight:700;
  margin:14px 0 14px;
}
.h2{
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:clamp(28px, 4.2vw, 42px); line-height:1.05; letter-spacing:-.02em; font-weight:700; margin:0 0 12px;
}
.h3{font-family:"Space Grotesk",system-ui,sans-serif; font-size:18px; line-height:1.25; margin:0 0 6px; letter-spacing:-.01em}
.lead{font-size:clamp(16px, 2.2vw, 19px); color:var(--muted); max-width:58ch; margin:0}
.muted{color:var(--muted)}
.small{font-size:13px}
.grid{display:grid; gap:18px}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px; box-shadow:var(--shadow-sm);
}
.divider{height:1px; background:var(--line); margin:0}
.btn{
  appearance:none; border:1px solid transparent; border-radius:999px;
  font:700 15px/1 "Plus Jakarta Sans",system-ui,sans-serif;
  padding:15px 22px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  text-decoration:none; white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--navy); color:#fff; box-shadow:0 10px 24px rgba(15,32,64,.22)}
.btn-primary:hover{background:var(--navy-2); text-decoration:none; box-shadow:0 12px 28px rgba(15,32,64,.26)}
.btn-ghost{background:#fff; border-color:var(--line-2); color:var(--text); box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:#c9d0e8; text-decoration:none}
.btn small{font-weight:600; opacity:.85}
.pill{
  display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border-radius:999px;
  background:#fff; border:1px solid var(--line); font-size:12px; font-weight:700; color:var(--muted);
}

/* ── Nav ──────────────────────────────────────────── */
.header{
  position:sticky; top:0; z-index:40;
  background:rgba(248,249,252,.82); backdrop-filter:saturate(1.2) blur(12px);
  border-bottom:1px solid rgba(230,233,242,.9);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 0;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text)}
.brand:hover{text-decoration:none}
.brand-mark{
  width:36px; height:36px; border-radius:10px;
  background:var(--navy); display:grid; place-items:center; color:#fff; font-weight:800; letter-spacing:-.02em;
  box-shadow:0 6px 18px rgba(15,32,64,.18);
  position:relative; overflow:hidden;
}
.brand-mark::after{
  content:""; position:absolute; inset:-20% -30% auto auto; width:70%; height:70%;
  background:radial-gradient(300px 200px at 30% 30%, rgba(255,255,255,.18), transparent 60%);
  pointer-events:none;
}
.brand-logo{width:40px; height:40px; border-radius:10px; overflow:hidden; flex:0 0 auto; display:block; background:#fff; border:1px solid var(--line); box-shadow:0 6px 18px rgba(15,32,64,.12)}
.brand-logo img{width:100%; height:100%; object-fit:cover; display:block}
.brand-name{font-family:"Space Grotesk",system-ui,sans-serif; font-weight:700; letter-spacing:-.02em}
.brand-sub{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); font-weight:700; margin-top:-2px}
.beta-logo{width:44px; height:44px; border-radius:12px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); flex:0 0 auto}
.beta-logo img{width:100%; height:100%; object-fit:cover; display:block}
.nav-links{display:flex; align-items:center; gap:6px}
.nav-links a{
  padding:9px 12px; border-radius:999px; font-size:14px; font-weight:600; color:var(--muted);
}
.nav-links a:hover{background:#fff; color:var(--text); text-decoration:none; border:1px solid var(--line); padding:8px 11px}
.nav-links a[aria-current="page"]{background:var(--navy); color:#fff; border-color:var(--navy)}
.nav-cta{display:flex; align-items:center; gap:10px}
.menu-btn{
  display:none; width:42px; height:42px; border-radius:999px; border:1px solid var(--line);
  background:#fff; place-items:center; cursor:pointer;
}
.menu-btn svg{width:18px; height:18px}
.mobile-panel{
  display:none; padding:12px 0 16px; border-top:1px solid var(--line);
}
.mobile-panel.open{display:block}
.mobile-panel a{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px; border-radius:14px; background:#fff; border:1px solid var(--line); margin-bottom:8px;
  font-weight:600; color:var(--text);
}
.mobile-panel a:hover{text-decoration:none; border-color:#c9d0e8}
@media (max-width: 880px){
  .nav-links, .nav-cta .btn-ghost{display:none}
  .menu-btn{display:grid}
}

/* ── Hero ─────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(700px 500px at 75% 20%, rgba(112,72,232,.12), transparent 60%),
    radial-gradient(700px 500px at 20% 15%, rgba(59,91,219,.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
  border-bottom:1px solid var(--line);
}
.hero-inner{
  display:grid; grid-template-columns: 1.02fr .92fr; gap:28px;
  padding:28px 0 18px; align-items:center;
}
.hero-copy{padding:18px 0 10px}
.hero-badges{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}
.hero-trust{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; align-items:center;
  color:var(--muted); font-size:13px; font-weight:600;
}
.hero-trust .dot{width:6px; height:6px; border-radius:999px; background:var(--lime); display:inline-block}

/* Phone / board visual */
.hero-visual{
  position:relative; display:grid; place-items:center; padding:14px 0 8px;
}
.phone-wrap{
  position:relative; width:min(360px, 92vw); aspect-ratio: 9 / 18.2;
  background:linear-gradient(180deg, #0f2040 0%, #162d5a 55%, #0f2040 100%);
  border-radius:36px; padding:14px; box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.10);
}
.phone-notch{
  position:absolute; left:50%; top:10px; transform:translateX(-50%);
  width:92px; height:22px; background:#0b1730; border-radius:999px; border:1px solid rgba(255,255,255,.08);
}
.phone-screen{
  height:100%; background:#f7f8fc; border-radius:26px; overflow:hidden; position:relative;
  display:flex; flex-direction:column;
}
.phone-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 14px 10px; background:#ffffff; border-bottom:1px solid #eef1f8;
}
.phone-topbar b{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--navy)}
.phone-stats{display:flex; gap:8px; align-items:center}
.stat{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800;
  padding:6px 8px; border-radius:999px; border:1px solid var(--line); background:#fff;
}
.board{
  flex:1; padding:12px; display:grid; place-items:center; background:
    radial-gradient(400px 300px at 50% 0%, rgba(59,91,219,.08), transparent 60%),
    #f7f8fc;
}
.board-grid{
  width:100%; max-width:300px; aspect-ratio:1; background:#ffffff;
  border-radius:18px; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  padding:10px; display:grid; grid-template-columns:repeat(5,1fr); gap:8px; position:relative; overflow:hidden;
}
.cell{
  border-radius:12px; background:#f1f3f9; border:1px solid #e8ebf5; position:relative; display:grid; place-items:center;
}
.cell.block{ background: repeating-linear-gradient( -45deg, #eef1f8 0 6px, #e6e9f2 6px 12px); }
.arrow{
  width:68%; height:68%; border-radius:12px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:14px;
  box-shadow:0 6px 16px rgba(15,32,64,.18); position:relative;
}
.arrow svg{width:22px; height:22px; display:block}
.a-navy{background:var(--navy)}
.a-indigo{background:var(--indigo-2)}
.a-violet{background:var(--violet)}
.a-teal{background:var(--teal)}
.a-amber{background:var(--amber); color:#10162a}
.a-rose{background:var(--rose)}
.path{
  position:absolute; pointer-events:none;
}
.path line, .path path{stroke-linecap:round; stroke-linejoin:round}
.floating{
  position:absolute; right:-14px; top:18%; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:10px 12px; box-shadow:var(--shadow); display:flex; align-items:center; gap:10px; font-weight:700; font-size:13px;
}
.floating .ico{width:34px; height:34px; border-radius:999px; display:grid; place-items:center; background:#eef1ff; color:var(--indigo-2)}
.floating-2{left:-14px; right:auto; top:auto; bottom:14%}

@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr; gap:10px; padding:10px 0 0}
  .hero-visual{order:-1}
  .phone-wrap{width:min(340px, 90vw)}
}

/* ── How to play ─────────────────────────────────── */
.steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px;
}
.step{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.step-num{
  width:34px; height:34px; border-radius:999px; display:grid; place-items:center;
  background:var(--navy); color:#fff; font-weight:800; font-size:13px; margin-bottom:10px;
}
.step-ill{
  height:92px; border-radius:14px; background:linear-gradient(180deg, #f7f8fc, #eef1f8); border:1px solid var(--line);
  display:grid; place-items:center; margin-bottom:12px; overflow:hidden; position:relative;
}
@media (max-width: 900px){ .steps{grid-template-columns:1fr} }

/* ── Features ─────────────────────────────────────── */
.features{
  display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:18px;
}
.feat{grid-column: span 4; display:flex; gap:14px; align-items:flex-start}
.feat .ico{
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center; flex:0 0 auto;
  background:#eef1ff; border:1px solid #dde3ff; color:var(--indigo-2);
}
.feat .ico.teal{background:#e6f7f6; border-color:#c9ecea; color:var(--teal)}
.feat .ico.amber{background:#fff4db; border-color:#ffe9b3; color:#a66a00}
.feat .ico.rose{background:#ffe8ef; border-color:#ffd0dd; color:var(--rose)}
.feat .ico.navy{background:var(--navy); color:#fff; border-color:var(--navy)}
.feat p{margin:4px 0 0; color:var(--muted); font-size:14px}
@media (max-width: 980px){ .feat{grid-column: span 6} }
@media (max-width: 640px){ .feat{grid-column: span 12} }

/* ── Hint / Lives split ───────────────────────────── */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px;
}
.split-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:12px;
}
.split-ill{
  height:140px; border-radius:16px; border:1px solid var(--line); background:linear-gradient(180deg, #ffffff, #f3f5fb);
  display:grid; place-items:center; overflow:hidden; position:relative;
}
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}
.badge-amber{background:#fff4db; border:1px solid #ffe9b3; color:#7a4d00}
.badge-rose{background:#ffe8ef; border:1px solid #ffd0dd; color:#8a1236}
.badge-navy{background:var(--navy); color:#fff}
.list{margin:0; padding-left:18px; color:var(--muted)}
.list li{margin:6px 0}
@media (max-width: 860px){ .split{grid-template-columns:1fr} }

/* ── Motion demo ─────────────────────────────────── */
.motion{
  background:var(--navy); color:#fff; border-radius:var(--radius-xl); overflow:hidden; border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-lg); position:relative;
}
.motion::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(600px 400px at 20% 0%, rgba(112,72,232,.30), transparent 60%),
    radial-gradient(600px 400px at 90% 20%, rgba(21,170,191,.22), transparent 60%);
  pointer-events:none;
}
.motion-inner{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:18px; padding:22px}
.motion-copy{padding:10px 6px}
.motion-copy .eyebrow{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.16); color:#cbd5ff}
.motion-copy p{color:#cbd5ff}
.mini-board{
  background:#ffffff; border-radius:20px; padding:14px; border:1px solid rgba(255,255,255,.0);
  box-shadow:0 18px 40px rgba(0,0,0,.22); color:var(--text);
}
.mini-grid{
  aspect-ratio:1; border-radius:16px; border:1px solid var(--line); background:#f7f8fc; padding:10px;
  display:grid; grid-template-columns:repeat(5,1fr); gap:8px; position:relative; overflow:hidden;
}
.motion-legend{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; color:var(--muted); font-size:12px; font-weight:700}
.motion-legend span{display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--line); padding:6px 8px; border-radius:999px}
.motion-legend i{width:10px; height:10px; border-radius:999px; display:inline-block}
@media (max-width: 900px){ .motion-inner{grid-template-columns:1fr} }

/* ── Privacy strip ───────────────────────────────── */
.strip{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-sm);
}
.strip-logos{display:flex; flex-wrap:wrap; gap:8px}
.strip-logos span{
  padding:7px 10px; border-radius:999px; background:#f7f8fc; border:1px solid var(--line); font-size:12px; font-weight:800; letter-spacing:.02em;
}

/* ── Support CTA ─────────────────────────────────── */
.support-cta{
  display:grid; grid-template-columns:1.2fr .8fr; gap:16px; align-items:center;
  background:linear-gradient(180deg, #ffffff, #f3f5fb); border:1px solid var(--line); border-radius:var(--radius-xl); padding:18px; box-shadow:var(--shadow-sm);
}
@media (max-width: 860px){ .support-cta{grid-template-columns:1fr} }

/* ── Footer ───────────────────────────────────────── */
.footer{
  background:var(--navy); color:#dbe4ff; border-top:1px solid rgba(255,255,255,.08);
}
.footer a{color:#dbe4ff}
.footer a:hover{color:#fff}
.footer-top{display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:22px; padding:28px 0}
.footer-brand{color:#fff}
.footer-brand p{color:#9fb0d9; margin:8px 0 0; font-size:14px}
.footer-col h4{margin:0 0 10px; color:#fff; font-size:13px; letter-spacing:.10em; text-transform:uppercase}
.footer-col a{display:block; padding:6px 0; font-size:14px; color:#cbd5ff}
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  padding:16px 0; border-top:1px solid rgba(255,255,255,.10); font-size:13px; color:#9fb0d9;
}
.footer-bottom strong{color:#fff}
@media (max-width: 820px){ .footer-top{grid-template-columns:1fr 1fr} }
@media (max-width: 520px){ .footer-top{grid-template-columns:1fr} }

/* ── Docs / prose ─────────────────────────────────── */
.prose{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl); padding:28px; box-shadow:var(--shadow-sm);
}
.prose h2{font-size:20px; margin:26px 0 8px}
.prose h3{font-size:16px; margin:20px 0 8px}
.prose p, .prose li{color:#2c3656}
.prose a{word-break:break-word}
.prose ul{padding-left:20px}
.kv{display:grid; grid-template-columns:160px 1fr; gap:10px; padding:12px; background:#f7f8fc; border:1px solid var(--line); border-radius:14px}
.kv b{color:var(--muted); font-size:13px}
.toc{
  position:sticky; top:76px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:var(--shadow-sm);
  max-height:calc(100dvh - 100px); overflow:auto;
}
.toc a{display:block; padding:7px 10px; border-radius:10px; font-size:13px; font-weight:600; color:var(--muted)}
.toc a:hover{background:#f7f8fc; color:var(--text); text-decoration:none}
.doc-layout{display:grid; grid-template-columns:220px 1fr; gap:18px; align-items:start}
@media (max-width: 900px){ .doc-layout{grid-template-columns:1fr} .toc{position:static; max-height:none} }

/* ── Utilities ────────────────────────────────────── */
.mt-8{margin-top:8px} .mt-12{margin-top:12px} .mt-18{margin-top:18px} .mt-24{margin-top:24px}
.center{text-align:center}
.shimmer{position:relative; overflow:hidden}
.shimmer::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation:shimmer 2.2s infinite;
}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ── Motion & accessibility ───────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{animation:none !important; transition:none !important}
}

/* ── Beta badge ─────────────────────────────────── */
.beta-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:800;
  color:var(--indigo-2); background:#eef1ff; border:1px solid #dde3ff;
  padding:6px 12px; border-radius:999px;
}
.beta-badge i{width:8px; height:8px; border-radius:999px; background:var(--amber); display:inline-block; box-shadow:0 0 0 4px rgba(245,159,10,.14)}
.beta-note{font-size:13px; color:var(--muted); font-weight:600; margin-top:10px}

/* ── Beta modal ─────────────────────────────────── */
.beta-overlay{
  position:fixed; inset:0; z-index:100;
  display:none; place-items:center;
  padding:16px;
  background:rgba(15,32,64,.48);
  backdrop-filter:saturate(1.2) blur(10px);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);
}
.beta-overlay.open{display:grid}
.beta-dialog{
  position:relative;
  width:min(520px, 100%);
  max-height:calc(100dvh - 32px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 24px 60px rgba(15,32,64,.22), 0 8px 24px rgba(15,32,64,.14);
  padding:0;
  animation:betaIn .28s cubic-bezier(.22,1,.36,1);
}
@keyframes betaIn{from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)}}
.beta-head{
  position:relative; overflow:hidden;
  padding:22px 22px 18px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(420px 220px at 85% 0%, rgba(112,72,232,.12), transparent 60%),
    radial-gradient(420px 220px at 10% 0%, rgba(59,91,219,.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
}
.beta-head-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.beta-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:800;
  color:var(--indigo-2); background:#eef1ff; border:1px solid #dde3ff; padding:5px 9px; border-radius:999px;
}
.beta-close{
  width:36px; height:36px; border-radius:999px; border:1px solid var(--line);
  background:#fff; display:grid; place-items:center; cursor:pointer; flex:0 0 auto;
  color:var(--muted); transition:background .15s ease, border-color .15s ease;
}
.beta-close:hover{background:#f7f8fc; border-color:#c9d0e8; color:var(--text)}
.beta-close:focus-visible{outline:2px solid var(--indigo-2); outline-offset:2px}
.beta-title{font-family:"Space Grotesk",system-ui,sans-serif; font-size:22px; line-height:1.15; letter-spacing:-.02em; margin:0; color:var(--navy)}
.beta-sub{margin:8px 0 0; color:var(--muted); font-size:14px; line-height:1.55}
.beta-visual{
  margin-top:14px; height:56px; border-radius:14px; border:1px solid var(--line);
  background:linear-gradient(180deg, #fff, #f3f5fb); display:grid; place-items:center; overflow:hidden; position:relative;
}
.beta-body{padding:18px 22px 22px; display:grid; gap:14px}
.beta-label{font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:800; color:var(--muted)}
.beta-input{
  width:100%; appearance:none;
  font:600 15px/1.2 "Plus Jakarta Sans",system-ui,sans-serif;
  padding:14px 14px; border-radius:14px; border:1px solid var(--line-2); background:#fff; color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.beta-input::placeholder{color:#9aa4c7}
.beta-input:focus{outline:none; border-color:#b9c2e8; box-shadow:0 0 0 4px rgba(59,91,219,.12)}
.beta-input[aria-invalid="true"]{border-color:#ffb3c8; box-shadow:0 0 0 4px rgba(230,73,128,.12)}
.beta-error{min-height:18px; font-size:13px; font-weight:600; color:var(--rose)}
.beta-error:empty{display:none}
.beta-actions{display:flex; gap:10px; flex-wrap:wrap}
.beta-actions .btn{flex:1 1 160px}
.beta-success{
  display:none; gap:12px; padding:16px; border-radius:16px; background:#f7f8fc; border:1px solid var(--line);
}
.beta-success.open{display:grid}
.beta-success h4{margin:0; font-family:"Space Grotesk",system-ui,sans-serif; font-size:16px; color:var(--navy)}
.beta-success p{margin:0; font-size:13px; color:var(--muted)}
.beta-plain{font-size:12px; color:var(--muted-2); word-break:break-all}
@media (max-width:520px){
  .beta-overlay{padding:12px; align-items:end}
  .beta-dialog{width:100%; max-height:calc(100dvh - 16px); border-radius:20px}
  .beta-actions .btn{flex:1 1 100%}
}

/* ── Animations for hero/motion (JS-enhanced but CSS-driven) ── */
.arrow-move{transition:transform 520ms cubic-bezier(.22,1,.36,1), opacity 220ms ease}
.path-trace{stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 720ms ease}
.path-trace.on{stroke-dashoffset:0}
.pulse{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.02)}}
.floaty{animation:floaty 3.2s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}