/* ==========================================================================
   Zeus Deal Maker — the public site.

   THE WORLD: a dealership lot after close. Sodium light on dark paint.

   This is not invented. The app's own stylesheet has carried --storm1
   (#0b1224), --storm2 (#060912), --gold1 and --gold2 since the interface
   direction was approved, and the favicon is a gold bolt on storm navy —
   a night palette the app itself never spends, because inside the product
   the rule is "the bar is black and gold means action". Out here there is
   no bar and no desk to protect, so the storm gets built.

   ONE LAW, carried over from the app and applied harder: GOLD IS LIVE.
   It marks the thing that is happening, the thing that fits, and the thing
   you can press. Nothing decorative is gold. Everything else is glass and
   cold light, so when the gold arrives it reads as current, not as branding.

   Single theme on purpose. This is a committed world — a night — not a
   surface that should flip. So there are no theme blocks, and every colour
   including the ground is painted explicitly, so the page holds whatever
   the host is doing behind it.
   ========================================================================== */

:root {
  /* Ground and glass */
  --void:      #04060b;   /* the lot, unlit */
  --storm:     #0a1120;   /* a panel with light behind it */
  --steel:     #111a2c;   /* a raised surface */
  --edge:      #1c2740;   /* a hairline, cold */

  /* Light */
  --ice:       #dee7f6;   /* instrument glass: primary text */
  --ice-dim:   #9fb0cb;   /* secondary */
  --mute:      #7b89a3;   /* tertiary, labels -- AA on the ground at 11px */

  /* The arc. The app's own gold, unchanged. */
  --arc:       #E89A12;
  --arc-hot:   #FFDE7A;
  --arc-deep:  #8a5c07;
  --arc-glow:  rgba(232,154,18,.34);

  /* The verdicts, echoing the board inside the product */
  --fits:      #3ddc84;
  --close:     #E89A12;
  --over:      #ff6b6b;

  --display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --tech: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --data: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  --gut: clamp(20px, 5vw, 64px);
  --max: 1240px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--void);
  color: var(--ice);
  font: 400 17px/1.6 var(--tech);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The lot at night: a cold horizon glow, and a warm one where Zeus is.
   Fixed, so it sits behind the page like light behind glass rather than
   scrolling past as a decoration. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120vw 70vh at 50% -10vh, #101c36 0%, rgba(16,28,54,0) 62%),
    radial-gradient(60vw 40vh at 88% 8vh, rgba(232,154,18,.10) 0%, rgba(232,154,18,0) 60%),
    var(--void);
}

a { color: inherit; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

/* ---------- type ---------------------------------------------------------- */

h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }

/* The display face appears on the page perhaps six times in total. Its whole
   job is the hairline: on near-black, Bodoni's thin strokes read like a
   highlight running along chrome. Spent anywhere else it would stop meaning
   anything. */
.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.04;
}

/* Instrument-cluster labels: small, wide, cold. */
.label {
  font: 600 11px/1 var(--tech);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mute);
}
.label.lit { color: var(--ice-dim); }   /* an eyebrow is not a live thing */

.lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--ice-dim); max-width: 60ch; }
p { max-width: 66ch; }

.num { font-family: var(--data); font-variant-numeric: tabular-nums; }

/* ---------- the bar ------------------------------------------------------- */

.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: rgba(4,6,11,0);
  border-bottom: 1px solid transparent;
  transition: background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
}
.bar.stuck {
  background: rgba(4,6,11,.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--edge);
}
.bar .wrap { display: flex; align-items: center; justify-content: space-between; height: 74px; }

.mark {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--ice);
  font: 700 15px/1 var(--tech); letter-spacing: .3em;
}
.mark svg { width: 21px; height: 21px; overflow: visible; }
.mark .bolt { fill: var(--arc); filter: drop-shadow(0 0 7px var(--arc-glow)); }

.bar nav { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 34px); }
.bar nav a {
  text-decoration: none; color: var(--ice-dim);
  font: 500 13px/1 var(--tech); letter-spacing: .1em; text-transform: uppercase;
  transition: color .2s;
}
.bar nav a:hover { color: var(--ice); }
.bar nav a.login {
  color: var(--void); background: var(--arc);
  padding: 10px 18px; border-radius: 2px; font-weight: 700;
}
.bar nav a.login:hover { background: var(--arc-hot); color: var(--void); }

/* ---------- shared section furniture -------------------------------------- */

section { position: relative; }

.act { padding: clamp(96px, 13vh, 168px) 0; }

/* The numbering is the deal's own sequence -- the up walks in, you work the
   numbers, you present, it funds -- not decoration counting boxes. */
.act-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 14px; }
.act-num {
  font: 500 12px/1 var(--data); letter-spacing: .18em; color: var(--mute);
  padding-bottom: 3px; border-bottom: 1px solid var(--edge);
}
.act h2 { font-size: clamp(30px, 4.4vw, 56px); margin-bottom: 18px; }
/* The display face is the emphasis. Colouring the phrase as well was gold
   spent on decoration, four times in a row, which is a template. */
.act h2 em { font-style: normal; color: var(--ice); }

.rule { height: 1px; background: linear-gradient(90deg, var(--edge), transparent); border: 0; margin: 0; }

/* ---------- hero ---------------------------------------------------------- */

.hero { padding: clamp(104px, 13vh, 140px) 0 clamp(56px, 7vh, 84px); }

.hero h1 {
  font-size: clamp(38px, 6.2vw, 82px);
  margin-bottom: 20px;
}
.hero h1 .thin { font-weight: 400; }
.hero h1 .lit {
  color: var(--arc);
  text-shadow: 0 0 42px var(--arc-glow);
}
.hero .lede { margin: 0 0 28px; font-size: clamp(16px, 1.35vw, 18px); }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; border-radius: 2px; border: 0;
  background: var(--arc); color: var(--void);
  font: 700 13px/1 var(--tech); letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 0 0 0 var(--arc-glow);
  transition: box-shadow .3s, background .2s, transform .12s;
}
.btn:hover { background: var(--arc-hot); box-shadow: 0 0 34px 0 var(--arc-glow); }
.btn:active { transform: translateY(1px); }
.btn.ghost {
  background: transparent; color: var(--ice);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--arc); color: var(--arc); background: transparent; }

/* ---------- the desk: the working hero ------------------------------------ */

/* Not a screenshot. The thing the product does, doing it. */
.desk {
  position: relative;
  margin-top: clamp(34px, 4.5vh, 54px);
  background: linear-gradient(180deg, rgba(17,26,44,.92), rgba(10,17,32,.92));
  border: 1px solid var(--edge);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 40px 120px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.desk::before {   /* the light source, top-left, like a lamp over a desk */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 12% 0%, rgba(255,255,255,.05), transparent 70%);
}

.desk-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 15px clamp(16px, 2.4vw, 26px);
  border-bottom: 1px solid var(--edge);
  background: rgba(4,6,11,.35);
}
.desk-title { display: flex; align-items: center; gap: 12px; }
.desk-live {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 10px/1 var(--tech); letter-spacing: .18em; text-transform: uppercase;
  color: var(--arc);
}
.dot-live {
  width: 6px; height: 6px; border-radius: 50%; background: var(--arc);
  box-shadow: 0 0 0 0 var(--arc-glow); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(232,154,18,.5); }
  70%  { box-shadow: 0 0 0 9px rgba(232,154,18,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,154,18,0); }
}

/* the controls: an instrument panel, not a form */
.desk-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--edge);
  border-bottom: 1px solid var(--edge);
}
.ctl { background: var(--storm); padding: 16px clamp(14px, 2vw, 22px) 18px; }
.ctl label { display: block; margin-bottom: 9px; }
.ctl .field { display: flex; align-items: baseline; gap: 6px; }
.ctl .pre { font: 500 20px/1 var(--data); color: var(--mute); }
.ctl input[type="number"], .ctl select {
  width: 100%; min-width: 0;
  background: transparent; border: 0; padding: 0;
  color: var(--ice); font: 500 clamp(24px, 2.6vw, 34px)/1 var(--data);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.ctl input::-webkit-outer-spin-button,
.ctl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ctl input:focus-visible, .ctl select:focus-visible {
  color: var(--arc-hot);
  outline: 2px solid var(--arc); outline-offset: 6px; border-radius: 2px;
}
.ctl select {
  font-family: var(--tech);
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ice);
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 26px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mute) 50%),
    linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position: right 10px center, right 5px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.ctl select:hover { color: var(--arc); }
.ctl select option { background: var(--storm); color: var(--ice); }
.ctl .suf { font: 500 13px/1 var(--tech); color: var(--mute); letter-spacing: .1em; }

/* the slider is the toy: it invites the drag that makes the board move */
.ctl input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; margin: 16px 0 0;
  background: linear-gradient(90deg, var(--arc) var(--pct, 40%), var(--edge) var(--pct, 40%));
  border-radius: 3px; cursor: pointer;
}
.ctl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--arc); border: 3px solid var(--void);
  box-shadow: 0 0 14px var(--arc-glow); cursor: grab;
}
.ctl input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--arc); border: 3px solid var(--void);
  box-shadow: 0 0 14px var(--arc-glow); cursor: grab; border-color: var(--void);
}
.ctl input[type="range"]:focus-visible { outline: 2px solid var(--arc); outline-offset: 6px; }

/* the board */
.board-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.arc-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3;
}
.board { width: 100%; border-collapse: collapse; font-size: 14px; position: relative; z-index: 2; }
.board thead th {
  font: 600 10px/1 var(--tech); letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute); text-align: right; padding: 13px 10px;
  background: rgba(4,6,11,.5);
  border-bottom: 1px solid var(--edge);
  position: sticky; top: 0;
}
.board thead th.l, .board tbody td.l { text-align: left; }
.board tbody td {
  padding: 13px 10px; text-align: right;
  border-bottom: 1px solid rgba(28,39,64,.55);
  color: var(--ice-dim);
  font-variant-numeric: tabular-nums;
}
.board tbody tr { transition: background .25s ease; }
.board tbody tr.on { background: rgba(232,154,18,.045); }
.board tbody tr.on td { color: var(--ice); }
.board tbody td:first-child { padding-left: clamp(14px, 2vw, 22px); }
.board tbody td:last-child { padding-right: clamp(14px, 2vw, 22px); }
.board .car { color: var(--ice); font-weight: 500; }
.board .stock { font-family: var(--data); font-size: 12px; color: var(--mute); }
.board .pmt { font-family: var(--data); font-size: 16px; color: var(--ice); font-weight: 500; }
.board tr.on .pmt { color: var(--arc-hot); }

/* Fits is filled, Over is outlined -- the app's own rule, so the row still
   answers for anyone who does not see red and green apart. */
.verdict {
  display: inline-block; min-width: 62px; text-align: center;
  padding: 5px 9px; border-radius: 2px;
  font: 600 10px/1 var(--tech); letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid transparent;
}
.v-fits  { background: rgba(61,220,132,.14); color: var(--fits); }
.v-close { background: rgba(232,154,18,.14); color: var(--close); }
.v-over  { background: transparent; color: var(--over); border-color: rgba(255,107,107,.4); }
/* The money already covers it -- not a $0 payment, and not a fit. */
.v-cash  { background: transparent; color: var(--ice-dim); border-color: var(--edge); }
.board .gross.neg { color: var(--over); }

.desk-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; padding: 15px clamp(16px, 2.4vw, 26px);
  border-top: 1px solid var(--edge); background: rgba(4,6,11,.35);
  font-size: 13px; color: var(--mute);
}
.desk-foot strong { color: var(--ice); font-weight: 600; }
.desk-foot .num { color: var(--arc); }

.desk-note { margin: 14px 0 0; font-size: 13px; color: var(--mute); max-width: none; }

/* ---------- the acts ------------------------------------------------------ */

.act-grid {
  display: grid; gap: clamp(30px, 5vw, 70px);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 900px) {
  .act-grid { grid-template-columns: 0.92fr 1.08fr; }
  .act-grid.flip .shot { order: -1; }
}

.act ul { margin: 22px 0 0; padding: 0; list-style: none; }
.act ul li {
  position: relative; padding-left: 26px; margin-bottom: 13px;
  color: var(--ice-dim); max-width: 58ch;
}
.act ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 1px; background: var(--arc);
}

/* A screenshot is a piece of evidence, so it is framed like one: on glass,
   lit from the top left, held slightly off-square so it reads as an object
   in the room rather than a rectangle pasted on the page. */
.shot {
  position: relative;
  border: 1px solid var(--edge); border-radius: 3px;
  background: var(--steel); overflow: hidden;
  box-shadow: 0 40px 90px -34px rgba(0,0,0,.95);
}
.shot img { display: block; width: 100%; height: auto; }
.shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.07), transparent 42%);
}
.shot figcaption {
  padding: 13px clamp(14px, 2vw, 20px);
  border-top: 1px solid var(--edge);
  font-size: 13px; color: var(--mute); background: rgba(4,6,11,.4);
}

/* ---------- the rest ------------------------------------------------------ */

.more-grid { display: grid; gap: clamp(26px, 4vw, 48px); margin-top: clamp(30px, 4vw, 48px);
             grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.more-grid h3 { font-size: 17px; font-weight: 600; color: var(--ice); margin-bottom: 9px;
                letter-spacing: .01em; }
.more-grid p { font-size: 15px; color: var(--ice-dim); margin: 0; }

/* ---------- pricing ------------------------------------------------------- */

.price-card {
  margin-top: clamp(30px, 4vw, 46px);
  border: 1px solid var(--edge); border-radius: 3px;
  background: linear-gradient(180deg, rgba(17,26,44,.8), rgba(4,6,11,.5));
  padding: clamp(30px, 4.4vw, 58px);
  position: relative; overflow: hidden;
}
.price-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--arc), transparent);
}
.price-headline { font-size: clamp(28px, 4vw, 46px); margin-bottom: 20px; }
.price-list { list-style: none; margin: 26px 0 0; padding: 0;
              display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%,240px),1fr)); }
.price-list li { position: relative; padding-left: 26px; color: var(--ice-dim); font-size: 15px; }
.price-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 1px; background: var(--edge);
}

/* ---------- close --------------------------------------------------------- */

.close { text-align: center; padding: clamp(90px, 14vh, 170px) 0; }
.close h2 { font-size: clamp(32px, 5.6vw, 70px); margin: 0 auto 26px; max-width: 18ch; }
.close p { margin: 0 auto 34px; }
.close .hero-actions { justify-content: center; }

/* ---------- footer -------------------------------------------------------- */

footer { border-top: 1px solid var(--edge); padding: 40px 0; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
               justify-content: space-between; }
footer, footer a { color: var(--mute); font-size: 13px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ice); }
footer .dot { opacity: .4; margin: 0 6px; }

/* ---------- contact / privacy pages --------------------------------------- */

.page { padding: clamp(130px, 18vh, 190px) 0 clamp(80px, 10vh, 120px); }
.page h1 { font-size: clamp(36px, 5.4vw, 64px); margin-bottom: 20px; }

.contact-grid { display: grid; gap: clamp(34px, 5vw, 68px); align-items: start;
                grid-template-columns: minmax(0,1fr); }
@media (min-width: 880px) { .contact-grid { grid-template-columns: 0.85fr 1.15fr; } }

form.zeus {
  background: linear-gradient(180deg, rgba(17,26,44,.8), rgba(4,6,11,.4));
  border: 1px solid var(--edge); border-radius: 3px;
  padding: clamp(24px, 3.4vw, 40px);
  position: relative; overflow: hidden;
}
form.zeus::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--arc), transparent);
}
form.zeus .two { display: grid; gap: 18px; grid-template-columns: minmax(0,1fr); }
@media (min-width: 560px) { form.zeus .two { grid-template-columns: 1fr 1fr; } }
form.zeus label { display: block; margin-bottom: 18px; }
form.zeus .lab { display: block; margin-bottom: 8px; }
form.zeus input, form.zeus textarea {
  width: 100%; background: rgba(4,6,11,.55);
  border: 1px solid var(--edge); border-radius: 2px;
  padding: 13px 14px; color: var(--ice);
  font: 400 16px/1.5 var(--tech);
  transition: border-color .2s, box-shadow .2s;
}
form.zeus textarea { resize: vertical; min-height: 130px; }
form.zeus input:focus, form.zeus textarea:focus {
  outline: 0; border-color: var(--arc); box-shadow: 0 0 0 3px rgba(232,154,18,.13);
}
form.zeus .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form.zeus .err {
  color: var(--over); font-size: 14px; margin: 0 0 14px;
  border-left: 2px solid var(--over); padding-left: 12px;
}
form.zeus .done { color: var(--fits); font-size: 17px; margin: 0; }
form.zeus .send { margin: 6px 0 0; }
.note { font-size: 13px; color: var(--mute); }
.note a { color: var(--ice-dim); }

.prose h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 42px 0 12px; }
.prose p, .prose li { color: var(--ice-dim); }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 8px; }

/* ---------- entrances ----------------------------------------------------- */

/* Everything is readable at rest -- the reveal only lifts it the last few
   pixels, and never gates content on the observer firing. */
.rise { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.rise.seen { opacity: 1; transform: none; }

:focus-visible { outline: 2px solid var(--arc); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .dot-live { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ---------- narrow -------------------------------------------------------- */

@media (max-width: 720px) {
  .bar nav a:not(.login) { display: none; }
  .board .hide-s { display: none; }
  .desk-controls { grid-template-columns: 1fr 1fr; }
  .ctl.wide { grid-column: 1 / -1; }
  .board tbody td, .board thead th { padding: 12px 7px; }
  .board { font-size: 13px; }
  .board .pmt { font-size: 15px; }
}

/* A phone cannot use a stock number it cannot tap, and the verdict chip does
   not need its label spelled out when the colour and the fill already say it.
   What survives is what the desk would read aloud: the car, the payment, and
   whether it fits. */
@media (max-width: 480px) {
  .desk-controls { grid-template-columns: 1fr; }
  .board .hide-xs { display: none; }
  .verdict { min-width: 0; padding: 5px 7px; letter-spacing: .06em; }
  .board tbody td:first-child { padding-left: 16px; }
  .board tbody td:last-child { padding-right: 16px; }
}

/* ---------- added after critique -------------------------------------- */

/* Announced, not displayed: the board re-sorts twelve rows and rewrites two
   dozen figures on every drag, and a screen reader was told none of it. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* The call to action belongs at the moment of interest -- under the board a
   visitor is already touching -- not only at the top where they were not. */
.desk-cta {
  margin: 18px 0 0; font-size: 14px; color: var(--mute); max-width: none;
}
.desk-cta a {
  color: var(--arc); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.desk-cta a:hover { border-bottom-color: var(--arc); }

/* Spec looks like spec: the display face is not spent on a list of extras. */
.spec-h2 {
  font: 500 clamp(20px, 2.2vw, 26px)/1.3 var(--tech);
  color: var(--ice); margin-bottom: 6px; letter-spacing: -.01em;
}

.direct { color: var(--arc); text-decoration: none; border-bottom: 1px solid var(--arc-deep); }
.direct:hover { border-bottom-color: var(--arc); }

/* A screenshot sits IN the night or it punches a hole in it. */
.shot img {
  filter: brightness(.82) saturate(.92) contrast(1.02);
  transition: filter .4s ease;
}
.shot:hover img { filter: none; }

/* ---------- the feature run --------------------------------------------
   The structural borrow from the operational-software sites that work: a
   long run of small, specifically named things in the operator's own
   shorthand, under a heading naming a moment they recognise. Hairline
   dividers rather than cards -- sixteen boxes would read as a pricing
   table, and these are not choices, they are what is in the box.
   ---------------------------------------------------------------------- */
.run {
  display: grid; gap: 1px; margin-top: clamp(30px, 4vw, 48px);
  background: var(--edge);
  border: 1px solid var(--edge);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
}
.run-item {
  background: var(--void); padding: clamp(20px, 2.4vw, 28px);
  transition: background .3s ease;
}
.run-item:hover { background: #070b14; }
.run-item h3 {
  font: 600 15px/1.35 var(--tech); color: var(--ice);
  margin-bottom: 7px; letter-spacing: -.005em;
}
.run-item p { font-size: 14.5px; line-height: 1.55; color: var(--ice-dim); margin: 0; max-width: none; }

/* The demo credentials are the point of the page, so they are set as
   something you copy rather than something you read past. */
.cred {
  font: 500 .92em/1 var(--data); color: var(--arc);
  background: rgba(232,154,18,.09); border: 1px solid rgba(232,154,18,.24);
  padding: 3px 7px; border-radius: 2px; white-space: nowrap;
}
.hero-note {
  margin: 18px 0 0; font-size: 14px; color: var(--ice-dim); max-width: 62ch;
}

.price-list li strong { color: var(--ice); font-weight: 600; }