/* ============ KitchenSink4 · beta checkout, same dark register ============
   Tokens, masthead, laser rules, section heads and footer are lifted from
   the corporate landing page and /contact/ so the surfaces are one surface.
   Blue and cyan carry structure, acid green carries headings, ember stays
   in the linework, volt is rationed. One face: Oxanium, all of it.
   Self-contained: no external request of any kind, no analytics. */

@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{ 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)}

/* ---------- step rail ---------- */
.railsec{padding:clamp(26px,4vh,40px) 0 0}
.rail{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--hairline); border:1px solid var(--hairline);
  list-style:none;
}
.rail li{
  background:var(--panel); padding:14px 16px 13px 18px;
  position:relative; display:flex; align-items:baseline; gap:12px;
  transition:background .18s, box-shadow .18s;
}
.rail li:before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:3px;
  background:var(--hairline-2); opacity:.5; transition:opacity .18s, background .18s, box-shadow .18s;
}
.rail-n{font-weight:700; font-size:12px; letter-spacing:.24em; color:var(--ink-dim); transition:color .18s}
.rail-t{
  font-weight:600; font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-dim); transition:color .18s, text-shadow .18s;
}
.rail li[data-state="done"]:before{background:var(--green); opacity:.75; box-shadow:0 0 8px rgba(57,255,20,.45)}
.rail li[data-state="done"] .rail-n,
.rail li[data-state="done"] .rail-t{color:var(--ink-soft)}
.rail li[data-state="now"]{background:var(--panel-2); box-shadow:inset 0 0 0 1px rgba(0,252,254,.28), inset 0 0 24px -10px rgba(0,252,254,.55)}
.rail li[data-state="now"]:before{background:var(--laser); opacity:1; box-shadow:0 0 10px rgba(0,252,254,.6)}
.rail li[data-state="now"] .rail-n{color:var(--laser)}
.rail li[data-state="now"] .rail-t{color:var(--ink); text-shadow:0 0 10px rgba(0,252,254,.3)}
@media (max-width:640px){
  .rail{grid-template-columns:1fr}
  .rail li{padding:11px 14px 10px 16px}
}

/* ---------- the checkout ---------- */
.buysec{padding:clamp(30px,5vh,52px) 0 clamp(60px,9vh,96px)}
.step[hidden]{display:none}
.step-head{display:flex; align-items:baseline; gap:18px; margin-bottom:8px; flex-wrap:wrap}
.step-head h2{
  font-weight:700; font-size:clamp(24px,3.1vw,36px);
  color:var(--green); text-shadow:0 0 18px rgba(57,255,20,.28);
}
.step-head .no{font-weight:600; font-size:12px; letter-spacing:.26em; color:var(--ink)}
.step-rule{
  height:1px; border:none; margin:0 0 30px;
  background:linear-gradient(90deg, var(--laser), transparent 80%);
  box-shadow:0 0 8px rgba(0,252,254,.45);
}
.q{font-size:clamp(17px,1.4vw,19px); color:var(--ink); margin-bottom:20px; max-width:62ch}
.help{font-size:13.5px; font-weight:400; color:var(--ink-dim); max-width:72ch; margin-top:18px}

/* The band table at the top of step 1. Compact on purpose: it is a price list,
   not the plan chooser, which is still step 2. It collapses to one column per
   row at phone width rather than scrolling sideways. */
.pricestrip{border-collapse:collapse; width:100%; max-width:46rem; margin:4px 0 0 0;
  font-size:14.5px; line-height:1.5}
.ps-cap{text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--green); padding-bottom:8px}
.pricestrip th,.pricestrip td{text-align:left; padding:7px 14px 7px 0;
  border-bottom:1px solid var(--hairline); vertical-align:baseline}
.pricestrip thead th{font-size:11.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-dim); white-space:nowrap}
.pricestrip tbody th{font-weight:600; color:var(--ink); white-space:nowrap}
.pricestrip tbody td{color:var(--ink-soft)}
.pricestrip td.ps-p{color:var(--ink); font-weight:600; white-space:nowrap}
.ps-note{margin-top:10px; font-size:13px; line-height:1.55; color:var(--ink-dim); max-width:62ch}
@media (max-width:460px){
  .pricestrip,.pricestrip tbody,.pricestrip tr,.pricestrip th,.pricestrip td{display:block}
  .pricestrip thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .pricestrip tr{border-bottom:1px solid var(--hairline); padding:7px 0}
  .pricestrip th,.pricestrip td{border:0; padding:1px 0}
  .pricestrip tbody th{font-size:15px}
}

/* fields, lifted from /contact/ */
.fields{display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; max-width:820px}
.field{display:flex; flex-direction:column; gap:8px}
.field.wide{grid-column:1 / -1}
.f-l{
  font-weight:600; font-size:11.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-dim);
}
/* the legal-entity label carries its own parenthetical, so it loses some
   tracking rather than wrapping into three lines on a phone */
.f-l.long{letter-spacing:.14em}
input[type=text], input[type=email], input[type=tel]{
  font-family:var(--ox); font-weight:400; font-size:16px; line-height:1.55;
  color:var(--ink); background:var(--panel); width:100%;
  border:1px solid var(--hairline-2); border-radius:4px;
  padding:12px 14px; transition:border-color .16s, box-shadow .16s;
}
input[type=text]:hover, input[type=email]:hover, input[type=tel]:hover{border-color:rgba(0,252,254,.34)}
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus{
  outline:none; border-color:var(--laser);
  box-shadow:0 0 0 1px var(--laser), inset 0 0 16px rgba(0,252,254,.08);
}
input[aria-invalid="true"]{
  border-color:var(--ember);
  box-shadow:0 0 0 1px var(--ember), inset 0 0 16px rgba(255,74,28,.1);
}
::placeholder{color:var(--ink-dim); opacity:1}
.ferr{
  font-size:13.5px; font-weight:500; letter-spacing:.02em;
  color:var(--ember); text-shadow:0 0 10px rgba(255,74,28,.25);
}
.ferr:empty{display:none}

/* band cards, the /contact/ category pattern */
.bands{
  display:grid; grid-template-columns:1fr;
  gap:1px; background:var(--hairline); border:1px solid var(--hairline);
}
@media (min-width:780px){ .bands{grid-template-columns:1fr 1fr} }
@media (min-width:1040px){ .bands{grid-template-columns:1fr 1fr 1fr} }
.cat{
  background:var(--panel); padding:22px 22px 20px 24px; position:relative;
  cursor:pointer; transition:background .16s, box-shadow .16s;
  --sign:var(--laser); --signglow:rgba(0,252,254,.55); --signsoft:rgba(0,252,254,.30);
  --edge:var(--sign);
}
.cat.a-green{--sign:var(--green); --signglow:rgba(57,255,20,.55); --signsoft:rgba(57,255,20,.30)}
.cat.a-volt {--sign:var(--volt);  --signglow:rgba(255,225,0,.55); --signsoft:rgba(255,225,0,.30)}
.cat.a-cyan {--sign:var(--laser); --signglow:rgba(0,252,254,.55); --signsoft:rgba(0,252,254,.30)}
.cat:before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:3px;
  background:var(--edge); opacity:.5;
  transition:opacity .16s, box-shadow .16s;
}
.cat:hover{
  background:var(--panel-2);
  box-shadow:inset 0 0 0 1px var(--signsoft), inset 0 0 22px -8px var(--signglow);
}
.cat:hover:before{opacity:1; box-shadow:0 0 10px var(--signglow)}
.cat:hover .cat-l{text-shadow:0 0 10px var(--signsoft)}
.cat input{position:absolute; opacity:0; width:1px; height:1px; top:22px; left:24px; margin:0}
.cat label{display:block; cursor:pointer}
.cat-d{display:block; margin-top:7px; font-size:14.5px; color:var(--ink-soft)}
.cat:has(input:checked) .cat-d{color:var(--ink)}
.cat-l{
  display:block; font-weight:600; font-size:14px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--sign);
  transition:color .16s, text-shadow .16s;
}
.cat:has(input:checked){
  background:var(--panel-2); z-index:1;
  box-shadow:inset 0 0 0 1px var(--sign), inset 0 0 30px -6px var(--signglow),
             0 0 16px -4px var(--signglow);
}
.cat:has(input:checked):before{opacity:1; box-shadow:0 0 8px var(--signglow), 0 0 20px var(--signglow)}
.cat:has(input:checked) .cat-l{text-shadow:0 0 7px var(--signglow), 0 0 18px var(--signsoft)}
.cat:has(input:focus-visible){outline:2px solid var(--laser); outline-offset:-2px}
.bands[data-invalid="true"]{border-color:var(--ember); box-shadow:0 0 0 1px var(--ember), 0 0 18px rgba(255,74,28,.18)}

/* the hint under the legal entity field: quieter than an error, always there */
.fhint{margin-top:7px; font-size:13.5px; line-height:1.5; color:var(--ink-dim); max-width:62ch}
.opt{font-weight:400; letter-spacing:.1em; color:var(--ink-dim); text-transform:none}

/* the administrator sub-heading: smaller than a step head, louder than a label */
.sub-h{
  margin-top:clamp(24px,3.4vh,34px); font-weight:600; font-size:12px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--green);
}
.sub-h-d{margin-top:6px; margin-bottom:16px; font-size:14.5px; color:var(--ink-soft); max-width:70ch}

/* the over-ceiling line: one sentence, one link, no card */
.over{margin-top:18px; font-size:15px; color:var(--ink-soft)}
.over a{font-weight:600}

/* "Who counts as a user?", an expander beside the plan choice */
.who{
  margin-top:clamp(18px,2.6vh,26px); max-width:78ch;
  border:1px solid var(--hairline); border-left:2px solid var(--laser);
  border-radius:4px; background:var(--panel);
}
.who summary{
  padding:13px 18px; cursor:pointer; font-weight:600; font-size:14.5px;
  color:var(--ink); list-style:none;
}
.who summary::-webkit-details-marker{display:none}
.who summary:before{content:"+ "; color:var(--laser); font-weight:700}
.who[open] summary:before{content:"‘2 "}
.who summary:hover{color:var(--green)}
.who summary:focus-visible{outline:2px solid var(--laser); outline-offset:-2px}
.who-p{padding:0 18px 16px; font-size:14.5px; line-height:1.62; color:var(--ink-soft)}

/* "Before you buy": the requirements, above the form rather than after it.
   Same box as the certification panel below, in cyan rather than green,
   because it is something to read and not something that was chosen. */
.reqbox{
  max-width:78ch; padding:20px 24px; background:var(--panel);
  border:1px solid var(--hairline-2); border-left:3px solid var(--laser);
  border-radius:4px; margin-top:clamp(18px,2.6vh,26px);
}
.reqbox h2{
  font-size:16px; font-weight:700; letter-spacing:.02em; color:var(--green);
  text-shadow:0 0 10px rgba(57,255,20,.25); margin-bottom:10px;
}
.reqbox ul{list-style:none; display:flex; flex-direction:column; gap:10px}
.reqbox li{font-size:14.5px; line-height:1.62; color:var(--ink-soft)}
.reqbox li b{color:var(--ink); font-weight:700}
@media (max-width:560px){ .reqbox{padding:16px 16px} }

/* the certification panel: what they picked, restated in their own step */
.cert{
  max-width:620px; padding:20px 24px; background:var(--panel-2);
  border:1px solid var(--hairline-2); border-left:3px solid var(--green);
  border-radius:4px;
}
.cert-k{
  font-weight:600; font-size:11.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-dim); margin-bottom:6px;
}
.cert-v{font-size:19px; color:var(--ink)}
.cert-v b{color:var(--green); font-weight:600}
.cert-k2{margin-top:18px}
.cert-v2{font-size:16px; color:var(--ink-soft); word-break:break-word}

/* review + issue */
.summary{
  max-width:820px; border:1px solid var(--hairline-2); border-radius:6px;
  background:var(--panel-2); padding:clamp(22px,3vw,30px);
  position:relative; overflow:hidden;
}
.summary:before{
  content:""; position:absolute; top:0; left:0; height:2px; width:64px;
  background:var(--laser); box-shadow:var(--glow-c);
}
.sum-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px 28px}
@media (max-width:640px){ .sum-grid{grid-template-columns:1fr} }
.sum-k{
  display:block; font-weight:600; font-size:11.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-dim); margin-bottom:5px;
}
.sum-v{font-size:16.5px; color:var(--ink); word-break:break-word; min-height:1.66em}
.term-line{margin-top:22px; font-size:15.5px; color:var(--ink-soft); max-width:74ch}
.term-line b{color:var(--ink); font-weight:600}
.terms{
  display:flex; align-items:flex-start; gap:13px;
  margin-top:clamp(22px,3vh,30px); max-width:74ch;
}
.terms input[type=checkbox]{
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto; width:19px; height:19px; margin-top:5px;
  background:var(--panel); border:1px solid var(--hairline-2); border-radius:3px;
  cursor:pointer; position:relative; transition:border-color .16s, box-shadow .16s;
}
.terms input[type=checkbox]:hover{border-color:rgba(0,252,254,.42)}
.terms input[type=checkbox]:focus-visible{outline:2px solid var(--laser); outline-offset:3px}
.terms input[type=checkbox]:checked{border-color:var(--green); box-shadow:0 0 10px rgba(57,255,20,.35)}
.terms input[type=checkbox]:checked:after{
  content:""; position:absolute; left:5px; top:1px; width:6px; height:11px;
  border:solid var(--green); border-width:0 2px 2px 0; transform:rotate(42deg);
}
.terms label{font-size:15.5px; color:var(--ink-soft); cursor:pointer}

/* buttons, the /contact/ send pattern */
.nav-row{display:flex; flex-wrap:wrap; gap:14px 16px; align-items:center; margin-top:clamp(26px,4vh,36px)}
.send{
  font-family:var(--ox); font-weight:600; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); background:transparent; cursor:pointer;
  border:1px solid var(--hairline-2); border-radius:4px;
  padding:13px 20px; transition:border-color .18s, color .18s, box-shadow .18s, opacity .18s;
}
.send:hover{border-color:var(--laser); color:var(--laser); box-shadow:var(--glow-c), inset 0 0 14px rgba(0,252,254,.1)}
.send:focus-visible{outline:2px solid var(--laser); outline-offset:3px}
.send.ghost{color:var(--ink-soft); border-color:var(--hairline)}
.send.ghost:hover{color:var(--laser); border-color:var(--laser)}
.send.go{border-color:rgba(57,255,20,.45); color:var(--green)}
.send.go:hover{border-color:var(--green); color:var(--green); box-shadow:var(--glow-g), inset 0 0 14px rgba(57,255,20,.1)}
.send[disabled]{opacity:.4; cursor:not-allowed; color:var(--ink-dim); border-color:var(--hairline)}
.send[disabled]:hover{color:var(--ink-dim); border-color:var(--hairline); box-shadow:none}

/* 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}
}
@media (max-width:640px){
  .fields{grid-template-columns:1fr}
  .nav-row{flex-direction:column-reverse; align-items:stretch}
  .send{width:100%; text-align:center}
}

/* The four field-error gaps that used to be inline style attributes. They are
   classes now so style-src on this page does not need 'unsafe-inline': a CSP
   that allows inline styles allows every injected one too, and these are four
   margins. */
.ferr-gap-11 { margin-top: 11px; }
.ferr-gap-12 { margin-top: 12px; }
.ferr-gap-16 { margin-top: 16px; }