:root {
  --bg: #08080a;
  --surface: #0e0e10;
  --text: #e8e4da;
  --muted: #948f86;
  --dim: #6a655d;
  --accent: #00d4ff;
  --accent-dim: #0a6f85;
  --live: #4ade80;
  --rule: #1e1e20;
  --rule-2: #2e2e31;
  --max: 1080px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --scanline: rgba(0, 212, 255, 0.07);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.22em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { width: min(100% - 2.2rem, var(--max)); margin-inline: auto; }

.prose {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.02rem; line-height: 1.7;
  color: var(--muted); max-width: 60ch;
}
.prose strong { color: var(--text); font-weight: 500; }

/* ══ HERO / STARFIELD ══ */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

#stars {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 0;
}

.hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(8,8,10,0.15), rgba(8,8,10,0.86) 72%),
    linear-gradient(180deg, rgba(8,8,10,0.5), transparent 22%, transparent 72%, var(--bg));
}

.hero-inner { position: relative; z-index: 2; padding: 6rem 0 4.5rem; width: 100%; }

.hero-flag {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--rule-2);
  background: rgba(8,8,10,0.6);
  padding: 0.35rem 0.62rem; margin-bottom: 1.8rem;
}

.led {
  width: 0.46rem; height: 0.46rem; border-radius: 50%;
  background: var(--live);
  animation: pulse 1.9s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.45); }
  70%  { box-shadow: 0 0 0 9px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

.hero h1 {
  margin: 0;
  font-size: clamp(2rem, 5.6vw, 3.9rem);
  line-height: 1.0;
  letter-spacing: -0.048em;
  font-weight: 800;
  text-transform: lowercase;
  text-shadow: 0 2px 40px rgba(8,8,10,0.9);
}
.hero h1 em { font-style: normal; color: var(--accent); }

.hero .prose { margin-top: 1.5rem; }

.actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }

.btn {
  display: inline-block; font-family: var(--mono);
  font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700;
  padding: 0.85rem 1.2rem;
  border: 1px solid var(--accent); color: var(--accent);
  background: rgba(8,8,10,0.35); cursor: pointer;
  transition: background 110ms linear, color 110ms linear, box-shadow 160ms ease;
}
.btn:hover { background: var(--accent); color: #001016; text-decoration: none; }
.btn-solid { background: var(--accent); color: #001016; }
.btn-solid:hover { box-shadow: 0 0 34px -6px var(--accent); }
.btn-quiet { border-color: var(--rule-2); color: var(--text); }
.btn-quiet:hover { background: transparent; border-color: var(--accent); color: var(--accent); }

.note { font-size: 0.75rem; color: var(--dim); }

/* ══ METRICS ══ */

.metrics { border-bottom: 1px solid var(--rule); background: var(--surface); }
.metrics-row {
  display: grid; grid-template-columns: repeat(2, 1fr);
  width: min(100% - 2.2rem, var(--max)); margin-inline: auto;
}
.metric { padding: 1.7rem 0; border-right: 1px solid var(--rule); }
.metric:last-child { border-right: 0; }
.metric b {
  display: block; font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 800; letter-spacing: -0.04em; color: var(--accent); line-height: 1;
}
.metric span {
  display: block; margin-top: 0.5rem;
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}

/* ══ PROMPT SEPARATORS ══ */

.cmd {
  padding: 4.4rem 0 1.8rem;
  font-size: 0.85rem; color: var(--dim);
}
.cmd::before { content: "$ "; color: var(--accent); }
.cmd .u { color: var(--accent-dim); }
.cmd .c { color: var(--text); }

.out { border-left: 1px solid var(--rule-2); padding-left: 1.4rem; }

h2.h {
  margin: 0 0 1rem;
  font-size: 1.28rem; font-weight: 800;
  letter-spacing: -0.03em; text-transform: lowercase;
}

/* ══ TERMINAL ══ */

.term {
  border: 1px solid var(--rule-2); background: #0b0d0e;
  position: relative; overflow-x: auto; overflow-y: hidden;
}
.term::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, var(--scanline) 4px);
  opacity: 0.4;
}
.term-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.6rem 1rem; border-bottom: 1px solid var(--rule);
  font-size: 0.65rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim);
  position: sticky; left: 0;
}
.replay {
  background: none; border: 1px solid var(--rule-2); color: var(--dim);
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 0.2rem 0.48rem; cursor: pointer;
}
.replay:hover { color: var(--accent); border-color: var(--accent-dim); }
.term-body { padding: 1rem 1.1rem 1.2rem; font-size: 0.78rem; line-height: 1.72; color: #cfe9f0; min-width: 40rem; }

.ln { opacity: 0; transform: translateY(2px); transition: opacity 200ms ease, transform 200ms ease; white-space: pre; }
.ln.on { opacity: 1; transform: none; }
.ln .t { color: #4a5a60; }
.ln .ok { color: var(--live); }
.ln .p { color: var(--accent); }
.ln.fin { color: var(--live); font-weight: 700; }

.cur { display: inline-block; width: 0.6ch; margin-left: 0.15ch; background: #eafcff; animation: blink 1s step-end infinite; vertical-align: -0.06em; }
@keyframes blink { 50% { opacity: 0; } }

/* ══ CLIENTS ══ */

.who-row {
  display: grid; grid-template-columns: 2.6rem minmax(8rem, 0.7fr) minmax(0, 1.6fr);
  gap: 1rem; align-items: center;
  padding: 1rem 0; border-bottom: 1px solid var(--rule);
}
.who-row:last-child { border-bottom: 0; }
.who-row img { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--rule-2); background: #171719; object-fit: cover; }
.who-h { font-weight: 700; }
.who-h small { display: block; font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin-top: 0.15rem; }
.who-row p { margin: 0; font-size: 0.84rem; color: var(--muted); }

/* ══ STEPS ══ */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.8rem; }
.step-n { color: var(--accent); font-size: 0.72rem; letter-spacing: 0.13em; margin-bottom: 0.7rem; }
.step h3 { margin: 0 0 0.4rem; font-size: 0.98rem; font-weight: 700; text-transform: lowercase; letter-spacing: -0.02em; }
.step p { margin: 0; font-size: 0.84rem; color: var(--muted); line-height: 1.62; }

/* ══ MANIFEST ══ */

.manifest { border: 1px solid var(--rule-2); }
.man-head, .man-row {
  display: grid;
  grid-template-columns: minmax(7rem, 0.9fr) minmax(5rem, 0.5fr) minmax(0, 2fr) minmax(8rem, 0.85fr);
  gap: 1rem; padding: 0.85rem 1.1rem; align-items: baseline;
}
.man-head {
  border-bottom: 1px solid var(--rule-2);
  font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dim); background: var(--surface);
}
.man-row { border-bottom: 1px solid var(--rule); }
.man-row:last-child { border-bottom: 0; }
.man-row:hover { background: #0c0c0e; }
.pkg { font-weight: 700; letter-spacing: -0.01em; }
.pkg small { display: block; font-weight: 400; font-size: 0.66rem; color: var(--dim); letter-spacing: 0.07em; text-transform: uppercase; margin-top: 0.2rem; }
.cost { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.03em; white-space: nowrap; }
.cost .per { font-size: 0.66rem; font-weight: 400; color: var(--dim); }
.desc { font-size: 0.82rem; color: var(--muted); line-height: 1.6; }
.desc ul { margin: 0.5rem 0 0; padding-left: 1.05rem; }
.desc li { margin-bottom: 0.18rem; }
.desc li::marker { color: var(--accent-dim); }
.act .btn { width: 100%; text-align: center; }
.sub-act { display: block; margin-top: 0.55rem; font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); text-align: center; }
.man-note { padding: 0.85rem 1.1rem; border-top: 1px solid var(--rule); font-size: 0.7rem; color: var(--dim); background: var(--surface); }

/* ══ SPECS ══ */

dl.spec { margin: 0; border: 1px solid var(--rule-2); }
.spec-r {
  display: grid; grid-template-columns: minmax(8rem, 0.34fr) minmax(0, 1fr);
  gap: 1.1rem; padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--rule); align-items: baseline;
}
.spec-r:last-child { border-bottom: 0; }
.spec-r dt { font-size: 0.65rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); }
.spec-r dd { margin: 0; font-size: 0.84rem; color: var(--muted); line-height: 1.6; }
.spec-r dd b { color: var(--text); font-weight: 500; }

/* ══ LICENSE ══ */

.lic { border: 1px solid var(--rule-2); padding: 1.6rem 1.5rem; background: var(--surface); }
.lic p { margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.72; color: var(--text); max-width: 66ch; }
.lic p:last-of-type { margin-bottom: 0; }
.lic .k { color: var(--accent); }
.lic .sig { margin-top: 1.5rem; font-size: 0.74rem; color: var(--dim); }

/* ══ FOOTER ══ */

footer { margin-top: 5rem; border-top: 1px solid var(--rule); padding: 2rem 0 3rem; font-size: 0.75rem; color: var(--dim); }
.foot-row { display: flex; flex-wrap: wrap; gap: 0.8rem 1.5rem; align-items: center; }
.foot-row a { color: var(--muted); }
.foot-row a:hover { color: var(--accent); }
.foot-legal { margin-top: 1.1rem; line-height: 1.7; max-width: 70ch; }

/* ══ RESPONSIVE ══ */

@media (max-width: 900px) {
  .man-head { display: none; }
  .man-row { grid-template-columns: 1fr; gap: 0.7rem; padding: 1.3rem 1.1rem; }
  .steps { grid-template-columns: 1fr; gap: 1.9rem; }
  .cmd { padding-top: 3.4rem; }
  .hero { min-height: 78vh; }
}

@media (max-width: 620px) {
  body { font-size: 14px; }
  .out { padding-left: 1rem; }
  .metrics-row { grid-template-columns: 1fr; }
  .metric { border-right: 0; border-bottom: 1px solid var(--rule); padding: 1.2rem 0; }
  .metric:last-child { border-bottom: 0; }
  .who-row { grid-template-columns: 2.4rem 1fr; row-gap: 0.5rem; }
  .who-row p { grid-column: 2; }
  .spec-r { grid-template-columns: 1fr; gap: 0.3rem; }
  .cmd { font-size: 0.76rem; word-break: break-word; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .ln { opacity: 1; transform: none; }
}

/* ══ CHROME ══ */

.skip {
  position: absolute; left: -999px; top: 0; z-index: 50;
  background: var(--bg); border: 1px solid var(--accent); color: var(--accent);
  padding: 0.5rem 0.8rem; font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

.site-head { border-bottom: 1px solid var(--rule); background: var(--bg); }
.head-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 0; }
.brand { font-weight: 800; letter-spacing: -0.03em; text-transform: lowercase; color: var(--text); font-size: 0.95rem; }
.brand:hover { color: var(--accent); text-decoration: none; }
.brand .tld { color: var(--accent); }
.head-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.head-nav a { color: var(--muted); }
.head-nav a:hover { color: var(--accent); text-decoration: none; }
.head-nav a[aria-current="page"] { color: var(--accent); }

/* ══ PAGE HEAD (every page except /) ══ */

.page-head { border-bottom: 1px solid var(--rule); background: var(--surface); padding: 3.4rem 0 2.8rem; }
.page-head h1 {
  margin: 0; font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.05;
  letter-spacing: -0.04em; font-weight: 800; text-transform: lowercase;
}
.page-head h1 em { font-style: normal; color: var(--accent); }
.page-head .prose { margin-top: 1rem; }
.page-head .flag {
  display: inline-block; margin-bottom: 1.2rem;
  font-size: 0.65rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--rule-2); padding: 0.3rem 0.6rem;
}

/* ══ ADMIN TABLE ══ */

table.tbl { border-collapse: collapse; width: 100%; border: 1px solid var(--rule-2); font-size: 0.78rem; }
.tbl th {
  text-align: left; font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--dim); font-weight: 400; background: var(--surface);
}
.tbl th, .tbl td { padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--rule); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.mono { font-size: 0.66rem; color: var(--dim); word-break: break-all; }

/* ══ BACKPACK STAGE (ported from reference/backpack-3d.html) ══ */

.stage{position:relative;width:100%;height:100vh;min-height:36rem;overflow:hidden;border-bottom:1px solid var(--rule)}
.stage canvas{display:block;width:100%;height:100%;cursor:grab}
.stage canvas.grabbing{cursor:grabbing}
.stage canvas.pointing{cursor:pointer}

.stage .veil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 58% at 50% 46%,transparent,rgba(8,8,10,.6) 80%)}

.hud{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;
  align-items:flex-start;gap:1rem;padding:1.1rem 1.3rem;font-size:.65rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dim);pointer-events:none}
.hud b{color:var(--text);font-weight:700;display:block;font-size:.8rem;letter-spacing:-.01em;text-transform:none}

.ctl{display:flex;gap:.4rem;pointer-events:auto}
.ctl button{background:rgba(8,8,10,.55);border:1px solid var(--rule-2);color:var(--dim);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.32rem .6rem;cursor:pointer;transition:color .12s,border-color .12s,background .12s}
.ctl button:hover,.ctl button:focus-visible{color:var(--accent);border-color:var(--accent-dim);outline:none}
.ctl button[aria-pressed="true"]{color:var(--accent);border-color:var(--accent-dim);background:rgba(0,212,255,.07)}

.labels{position:absolute;inset:0;pointer-events:none}
.lbl{position:absolute;transform:translate(0,-50%);opacity:0;
  transition:opacity .3s ease,color .15s ease;white-space:nowrap;font-size:.68rem;letter-spacing:.03em}
.lbl.on{opacity:.62}
.lbl.hot{opacity:1}
.lbl i{display:inline-block;width:1.5rem;height:1px;background:var(--accent-dim);vertical-align:middle;margin-right:.5rem;transition:background .15s,width .2s}
.lbl.hot i{background:var(--accent);width:2rem}
.lbl.flip{transform:translate(-100%,-50%);text-align:right}
.lbl.flip i{margin:0 0 0 .5rem}
.lbl b{color:var(--accent);font-weight:700}
.lbl s{display:block;text-decoration:none;color:var(--dim);font-size:.58rem;
  letter-spacing:.1em;text-transform:uppercase;margin-top:.12rem}
.lbl:not(.flip) s{padding-left:2rem}
.lbl.flip s{padding-right:2rem}

.readout{position:absolute;left:1.3rem;bottom:1.3rem;width:min(21rem,calc(100% - 2.6rem));
  border:1px solid var(--rule-2);background:rgba(11,13,14,.9);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.readout.on{opacity:1;transform:none}
.readout .rbar{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .8rem;
  border-bottom:1px solid var(--rule);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.readout .rbody{padding:.8rem}
.readout h3{margin:0 0 .35rem;font-size:.92rem;font-weight:800;letter-spacing:-.02em;color:var(--accent)}
.readout p{margin:0;font-size:.76rem;line-height:1.6;color:var(--muted)}
.readout dl{margin:.7rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;font-size:.66rem}
.readout dt{color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
.readout dd{margin:0;color:var(--text)}

.hint{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);opacity:0;
  transition:opacity .5s ease;pointer-events:none}
.hint.on{opacity:1}
.readout.on ~ .hint{opacity:0}

.fallback{width:min(100% - 2.2rem,52rem);margin:0 auto;padding:3.2rem 0 4rem}
.fallback h2{font-size:1.2rem;font-weight:800;letter-spacing:-.03em;text-transform:lowercase;margin:0 0 1.2rem}
.fallback dl{margin:0;border:1px solid var(--rule-2)}
.fallback>dl>div{display:grid;grid-template-columns:minmax(8rem,.35fr) 1fr;gap:1.1rem;
  padding:.85rem 1.1rem;border-bottom:1px solid var(--rule)}
.fallback>dl>div:last-child{border-bottom:0}
.fallback dt{font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.fallback dd{margin:0;font-size:.84rem;color:var(--muted);line-height:1.6}

@media (max-width:700px){
  .stage{height:78vh}
  .lbl{font-size:.58rem}
  .lbl s{display:none}
  .readout{left:.8rem;bottom:.8rem;width:calc(100% - 1.6rem)}
  .fallback>dl>div{grid-template-columns:1fr;gap:.3rem}
}

/* ══ PRODUCT HERO (background video) ══ */

.reel-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--rule);
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(4rem, 8vw, 6rem);
  min-height: calc(100vh - 3.5rem);
  min-height: calc(100svh - 3.5rem);
  background: var(--bg);
}

.reel-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 68% 50%;
  /* the footage is a white-cyc product render: pulled down and cooled off so
     copy stays legible on top of it */
  filter: brightness(0.62) contrast(1.08) saturate(0.85);
}

.reel-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(95deg, rgba(8,8,10,0.97) 0%, rgba(8,8,10,0.93) 30%, rgba(8,8,10,0.72) 55%, rgba(8,8,10,0.20) 100%),
    linear-gradient(180deg, rgba(8,8,10,0.8), transparent 24%, transparent 66%, var(--bg)),
    repeating-linear-gradient(to bottom, transparent 0, transparent 3px, var(--scanline) 4px);
}

.reel-hero-inner { position: relative; z-index: 2; width: min(100% - 2.2rem, var(--max)); }

.reel-hero h1 {
  margin: 0; max-width: 18ch;
  font-size: clamp(2rem, 5.2vw, 3.6rem); line-height: 1.02;
  letter-spacing: -0.048em; font-weight: 800; text-transform: lowercase;
  text-shadow: 0 2px 40px rgba(8,8,10,0.95);
}
.reel-hero h1 em { font-style: normal; color: var(--accent); }
.reel-hero .prose { margin-top: 1.5rem; max-width: 48ch; }

/* playback controls, parked in the corner of the footage */
.reel-ctl {
  position: absolute; right: clamp(1.1rem, 3vw, 2rem); bottom: clamp(1.1rem, 3vw, 2rem); z-index: 3;
  display: flex; align-items: center; gap: 0.9rem;
  font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim);
}
.reel-id { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.reel-id b {
  color: var(--muted); font-weight: 700; font-size: 0.7rem;
  letter-spacing: -0.01em; text-transform: none;
}
.reel-sub { white-space: nowrap; }

@media (max-width: 900px) {
  .reel-hero {
    min-height: 82vh; min-height: 82svh;
    padding: clamp(3rem, 9vw, 4.5rem) 0 clamp(5rem, 12vw, 6.5rem);
  }
  /* portrait crops a 16:9 clip hard, so centre it on the product */
  .reel-bg { object-position: 50% 44%; }
  .reel-scrim { background:
    linear-gradient(180deg, rgba(8,8,10,0.9) 0%, rgba(8,8,10,0.78) 45%, rgba(8,8,10,0.86) 100%),
    repeating-linear-gradient(to bottom, transparent 0, transparent 3px, var(--scanline) 4px); }
  .reel-ctl { left: clamp(1.1rem, 3vw, 2rem); justify-content: space-between; }
}
@media (max-width: 620px) {
  .reel-sub { display: none; }
}

/* ══ CHECKOUT ══ */

.co-head .flag { display: inline-block; }
.co-head h1 em { font-style: normal; color: var(--accent); }
.co-head .prose { max-width: 58ch; }

.co-wrap { padding: 2.6rem 0 4.5rem; }

.co {
  display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 22rem);
  /* left edge lines up with the page heading above it */
  justify-content: start;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}

/* ── steps ── */

.co-step { padding-bottom: 2.4rem; margin-bottom: 2.4rem; border-bottom: 1px solid var(--rule); }
.co-step:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }

.co-step-h {
  display: flex; align-items: baseline; gap: 0.8rem;
  margin: 0 0 1.3rem;
  font-size: 1.02rem; font-weight: 800;
  letter-spacing: -0.02em; text-transform: lowercase;
}
.co-n {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--accent-dim);
}

/* Stripe renders into these. A min-height keeps the page from lurching when
   the iframes finish loading. */
.co-mount { min-height: 3.2rem; }

/* ── email field ── */

.co-field label {
  display: block; margin-bottom: 0.55rem;
  font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
}

.co-field input[type="email"] {
  display: block; width: 100%;
  padding: 0.8rem 0.9rem;
  font-family: var(--mono);
  /* 16px: anything smaller makes iOS Safari zoom the page on focus */
  font-size: 16px; line-height: 1.4;
  color: var(--text);
  background: #131519;
  border: 1px solid #3d3d42; border-radius: 0;
  transition: border-color 110ms linear, box-shadow 110ms linear;
}
.co-field input[type="email"]::placeholder { color: #66615a; }
.co-field input[type="email"]:hover { border-color: #55555c; }
.co-field input[type="email"]:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent); background: #0b0d0e;
}

.co-hint { margin: 0.6rem 0 0; font-size: 0.74rem; color: var(--dim); line-height: 1.55; }

/* ── order summary ── */

.co-side { position: sticky; top: 1.6rem; }

.co-summary { border: 1px solid var(--rule-2); background: var(--surface); }

.co-sum-head {
  padding: 0.75rem 1.2rem; border-bottom: 1px solid var(--rule-2);
  font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}

.co-item { padding: 1.4rem 1.2rem 1.2rem; }
.co-item-name {
  margin: 0; font-size: 1.32rem; font-weight: 800;
  letter-spacing: -0.035em; text-transform: lowercase; line-height: 1.1;
}
.co-item-desc {
  margin: 0.6rem 0 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.86rem; line-height: 1.55; color: var(--muted);
}
.co-item-price {
  display: flex; align-items: baseline; gap: 0.5rem; margin-top: 1rem;
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.04em; color: var(--accent);
}
.co-item-price small {
  font-size: 0.62rem; font-weight: 400; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--dim);
}

.co-inc {
  margin: 0; padding: 0 1.2rem 1.3rem 2.3rem;
  font-size: 0.76rem; color: var(--muted); line-height: 1.75;
}
.co-inc li::marker { color: var(--accent-dim); }

.co-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.95rem 1.2rem;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.co-total b {
  font-size: 1.15rem; font-weight: 800; letter-spacing: -0.03em;
  text-transform: none; color: var(--text);
}

.co-act { padding: 1.2rem; }

.co-pay { display: block; width: 100%; }
.co-pay:disabled { opacity: 0.4; cursor: not-allowed; }
.co-pay:disabled:hover { box-shadow: none; background: var(--accent); }

.co-msg { margin: 0.9rem 0 0; font-size: 0.76rem; color: var(--muted); line-height: 1.55; }
.co-msg:empty { display: none; }
.co-msg.is-error { color: #ff8080; }

/* the final-sale disclosure. Legible on purpose: this is the term a buyer is
   most likely to argue about later, so it does not get to be fine print. */
.co-final {
  border: 1px solid var(--rule-2); background: #0b0d0e;
  padding: 0.9rem 1rem; margin-bottom: 1rem;
}
.co-final p { margin: 0; font-size: 0.78rem; color: var(--muted); line-height: 1.6; }
.co-final p + p { margin-top: 0.6rem; color: var(--dim); font-size: 0.74rem; }
.co-final strong { color: var(--text); font-weight: 700; }

.co-check {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin-bottom: 1rem; cursor: pointer;
  font-size: 0.76rem; color: var(--muted); line-height: 1.5;
}
.co-check input {
  flex: 0 0 auto; margin: 0.15rem 0 0;
  width: 1rem; height: 1rem; accent-color: var(--accent);
}
.co-check.is-missing { color: #ff8080; }

.co-secure { margin: 0.9rem 0 0; font-size: 0.72rem; color: var(--dim); line-height: 1.55; }

@media (max-width: 880px) {
  .co { grid-template-columns: 1fr; gap: 2.2rem; }
  /* fields first, then the order review and the pay button. Putting the
     summary on top would leave a buyer looking at a submit button before
     there is anything to submit. */
  .co-main { order: 1; }
  .co-side { order: 2; position: static; }
}