/* ============ KitchenSink4 Beta License Terms · KitchenSink4AI ============
   Tokens, masthead, hero, footer and reveal rules are the checkout's own,
   so this page and /buy-beta/ are one surface. Self-contained: no external
   request of any kind, no analytics, no payment code. */

@font-face { font-family:'Oxanium'; src:url('/buy/fonts/oxanium-var.woff2') format('woff2');
  font-weight:200 800; font-display:swap; }

:root{
  --ground:#050608;
  --panel:#0a0d12;
  --panel-2:#0c1017;
  --hairline:rgba(0,252,254,.10);
  --hairline-2:rgba(0,252,254,.22);
  --ink:#eef3f6;
  --ink-soft:#9aa7b2;
  --ink-dim:#5f6b76;
  --cyan:#22D3EE;          /* readable accent: links, small text */
  --laser:#00FCFE;         /* hot cyan: lines and light only */
  --green:#39FF14;
  --ember:#FF4A1C;
  --volt:#FFE100;
  --glow-c:0 0 6px rgba(0,252,254,.8), 0 0 18px rgba(0,252,254,.35);
  --glow-g:0 0 6px rgba(57,255,20,.8), 0 0 18px rgba(57,255,20,.35);
  --glow-e:0 0 6px rgba(255,74,28,.8), 0 0 18px rgba(255,74,28,.35);
  --glow-v:0 0 6px rgba(255,225,0,.8), 0 0 18px rgba(255,225,0,.35);
  --ox:'Oxanium','Segoe UI',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 500px at 50% -140px, rgba(0,252,254,.10), transparent 70%),
    radial-gradient(900px 400px at 85% 30%, rgba(57,255,20,.035), transparent 70%),
    repeating-linear-gradient(0deg, rgba(0,252,254,.035) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(0,252,254,.035) 0 1px, transparent 1px 56px),
    var(--ground);
  color:var(--ink);
  font-family:var(--ox);
  font-weight:400;
  font-size:17px; line-height:1.66;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:rgba(57,255,20,.3)}
a{color:var(--cyan); text-decoration:none}
a:hover{color:var(--laser); text-decoration:underline; text-underline-offset:4px}
a:focus-visible{outline:2px solid var(--laser); outline-offset:3px; border-radius:2px}
.wrap{max-width:1080px; margin:0 auto; padding:0 clamp(20px,4vw,48px)}
.kicker{
  font-weight:600; font-size:12.5px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--green);
  text-shadow:0 0 10px rgba(57,255,20,.4);
}

/* the brand face: display, labels, and numbers stay Oxanium */
.kicker, .wordmark, nav.top a, .hero h1, .btn-shop,
.cat-l, .cat-d, .f-l, .colophon, .addr, .send, .rail-n, .rail-t,
.sum-k, .conf h1{ font-family:var(--ox); }

/* laser rules */
.laser-h{
  height:1px; border:none;
  background:linear-gradient(90deg, transparent, var(--laser) 15%, var(--green) 40%, var(--volt) 62%, var(--ember) 85%, transparent);
  box-shadow:0 0 8px rgba(0,252,254,.55), 0 0 22px rgba(0,252,254,.2);
}

/* ---------- masthead ---------- */
header.mast{
  border-bottom:1px solid var(--hairline-2);
  box-shadow:0 1px 12px rgba(0,252,254,.12);
  background:rgba(5,6,8,.85); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:10;
}
.mast-in{display:flex; align-items:center; justify-content:space-between; height:64px}
.wordmark{
  font-weight:700; font-size:21px; letter-spacing:.01em;
  color:var(--ink); text-decoration:none !important;
}
.wordmark .four{color:var(--green); text-shadow:var(--glow-g)}
nav.top{display:flex; gap:clamp(14px,2.5vw,30px)}
nav.top a{
  font-weight:600; font-size:12.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);
}
nav.top a:hover{color:var(--laser); text-decoration:none; text-shadow:var(--glow-c)}
/* the secondary links drop before the bar runs out of room: at 640 the six
   items wrap into the wordmark, so they leave at 860 instead */
@media (max-width:860px){ nav.top a.hide-sm{display:none} }
/* six nav items minus the three that hide still outruns a phone masthead, so
   the bar scales down rather than pushing the page sideways */
@media (max-width:560px){
  .wordmark{font-size:18px}
  nav.top{gap:clamp(10px,3vw,14px)}
  nav.top a{font-size:11px; letter-spacing:.1em}
}
@media (max-width:380px){
  .wrap{padding:0 14px}
  nav.top{gap:8px}
  nav.top a{font-size:10.5px; letter-spacing:.05em}
}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,9vh,104px) 0 clamp(30px,5vh,52px); position:relative}
.hero h1{
  font-weight:700;
  font-size:clamp(38px,6.4vw,76px); line-height:1.04; letter-spacing:-.01em;
  margin:18px 0 24px; max-width:16ch;
}
.hero .sub{max-width:66ch; color:var(--ink-soft); font-weight:400; font-size:clamp(16px,1.35vw,19px)}

/* ---------- confirmation ---------- */
.conf h1{
  font-weight:700; font-size:clamp(34px,5.4vw,64px); line-height:1.05;
  letter-spacing:-.01em; margin:18px 0 24px; max-width:16ch;
}
.conf .lede{max-width:68ch; color:var(--ink-soft); font-size:clamp(16px,1.3vw,18.5px)}
.conf .lede b{color:var(--ink); font-weight:600}
.next-h{
  font-weight:600; font-size:12.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink); margin:clamp(34px,5vh,48px) 0 16px;
}
.beta-note{
  margin-top:clamp(34px,5vh,48px); padding:18px 20px; max-width:78ch;
  background:var(--panel); border:1px solid var(--hairline);
  border-left:3px solid var(--hairline-2); border-radius:4px;
  font-size:14px; color:var(--ink-dim);
}

/* footer */
footer{padding:44px 0 60px; margin-top:20px; position:relative}
footer:before{
  content:""; display:block; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--laser) 15%, var(--green) 40%, var(--volt) 62%, var(--ember) 85%, transparent);
  box-shadow:0 0 8px rgba(0,252,254,.45);
}
.foot-shop{color:var(--ink-soft); margin-bottom:26px}
.f-legal{font-size:12.5px; font-weight:400; color:var(--ink-dim); max-width:88ch; margin-bottom:18px}
.colophon{
  font-weight:600; font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-dim);
}
.colophon .led{color:var(--green); text-shadow:var(--glow-g)}

/* reveal */
.rev{opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.38s}
@keyframes rise{to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){
  .rev{opacity:1; transform:none; animation:none}
  html{scroll-behavior:auto}
  *{transition:none !important}
}


/* ---------- this page ---------- */
.conf h1{font-size:clamp(30px,4.4vw,54px); max-width:22ch}
.intro{max-width:78ch; color:var(--ink-soft); font-size:16px}
.clauses{margin-top:clamp(30px,4.5vh,44px)}
.clause{
  max-width:80ch; color:var(--ink-soft); font-size:15.5px;
  padding-left:34px; text-indent:-34px;
}
.clause + .clause{margin-top:17px}
.clause .n{
  display:inline-block; width:34px; text-indent:0;
  font-weight:700; font-size:12px; letter-spacing:.16em; color:var(--laser);
  text-shadow:0 0 10px rgba(0,252,254,.4); vertical-align:baseline;
}
.clause b{color:var(--ink); font-weight:600}
.ask{
  margin-top:clamp(34px,5vh,48px); max-width:74ch;
  color:var(--ink-soft); font-size:15.5px;
}
.ask a{color:var(--volt)}
.ask a:hover{color:var(--volt); text-shadow:var(--glow-v)}
@media (max-width:520px){
  .clause{padding-left:0; text-indent:0}
  .clause .n{width:auto; margin-right:9px}
}