/* ==========================================================================
   Overclocked. Design system, third cut: "Redline, paced".
   Ported from the Claude Design project, option 2a (turn 2).

   The argument is speed, so the page is built like industrial signage: the
   vibration bar across the top, display type at full bleed, mono for anything a
   machine would print (labels, timestamps, money, counts), and one idea per
   screen. Yellow appears once per surface and never twice in the same viewport.
   The night teal returns as hard bands (the stats bar, the payback board,
   who-we-are, the footer) rather than a gradient.

   Colours and type follow brand/GUIDE.md sections 3 and 4. The diagonal hazard
   tape the earlier cuts used is rejected outright by section 1b: it reads as
   under-construction, not overclocking. Rubik carries Latin and Arabic; Sometype
   Mono is machine output only.
   ========================================================================== */

:root {
  --night: #062021;
  --night-deep: #04191a;
  --night-lift: #172f2f;
  --ink: #eaf2f2;
  --muted: #a2b6b6;
  --faint: #7f9090;
  --rule: #1f3a3a;

  --day: #f1f6f6;
  --day-lift: #ffffff;
  --day-ink: #031a1a;
  --day-muted: #4b5f5f;
  --day-faint: #5c7070;
  --day-rule: #d0dad9;
  --day-edge: #788685;
  --day-bar: #c3cfce;

  --signal: #f4ce23;

  --sans: "Rubik", system-ui, "Segoe UI", sans-serif;
  --mono: "Sometype Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* display scale: signage at the top, quiet at the bottom */
  --t-xs: 0.78rem;
  --t-s: 0.9rem;
  --t-m: 1.0625rem;
  --t-l: clamp(1.1rem, 1rem + 0.45vw, 1.32rem);
  --t-xl: clamp(1.45rem, 1.2rem + 1.2vw, 2rem);
  --t-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
  --t-3xl: clamp(2.6rem, 1.5rem + 5.2vw, 7.25rem);

  --gut: clamp(1.15rem, 4vw, 2.5rem);
  --col: min(100% - (var(--gut) * 2), 80rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  background: var(--day);
  color: var(--day-ink);
  font: 400 var(--t-m)/1.5 var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--day-ink); outline-offset: 2px; }
.night :focus-visible, .board :focus-visible, footer :focus-visible { outline-color: var(--signal); }
::selection { background: var(--signal); color: var(--day-ink); }

.shell { width: var(--col); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- language: both languages ship, CSS shows one ---------------------------- */
.l.ar { display: none; }
html[lang="ar"] .l.en { display: none; }
html[lang="ar"] .l.ar { display: inline; }
/* Only literal machine output stays in the mono face and reads left to right. */
html[lang="ar"] time.mono, html[lang="ar"] .num { direction: ltr; unicode-bidi: isolate; }
html[lang="ar"] body, html[lang="ar"] p { line-height: 1.9; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing: 0; line-height: 1.28; }
/* GUIDE.md section 4: "Arabic copy sets in Rubik too". Sometype Mono carries no Arabic at all,
   so a label holding Arabic prose falls back to a system monospace and the joins come apart.
   Those labels return to Rubik, to RTL, and to zero tracking, which is also a Latin setting:
   any tracking on Arabic separates letters that are supposed to join. */
html[lang="ar"] .eyebrow, html[lang="ar"] .label, html[lang="ar"] .when, html[lang="ar"] .caps,
html[lang="ar"] .legend, html[lang="ar"] .fine, html[lang="ar"] .status,
html[lang="ar"] .running .shell {
  font-family: var(--sans); letter-spacing: 0; direction: rtl;
}

/* --- the vibration bar: the brand's one piece of pure signage ----------------
   GUIDE.md section 1b, built from the layer table rather than eyeballed. One solid
   bar the full width, then yellow double-strikes from 44% in, denser and more opaque
   toward the right until the last stretch is solid yellow: a still image of a bar
   shaking under load. In a row of 2H the base sits at H/2, and the strikes at
   44/56/68/80% offset up H/3, down H/3, up 2H/3 and centred, at .35/.45/.6/1.
   Background layers paint first-on-top, so strike 4 is listed first and the base last.
   The offsets are physical, so the shake still runs left to right in Arabic. */
.vbar {
  --h: 10px;
  height: calc(var(--h) * 2);
  overflow: hidden;
  background:
    linear-gradient(var(--signal), var(--signal)) no-repeat right calc(var(--h) / 2) / 20% var(--h),
    linear-gradient(rgb(244 206 35 / 0.6), rgb(244 206 35 / 0.6)) no-repeat right calc(var(--h) / -6) / 32% var(--h),
    linear-gradient(rgb(244 206 35 / 0.45), rgb(244 206 35 / 0.45)) no-repeat right calc(var(--h) * 5 / 6) / 44% var(--h),
    linear-gradient(rgb(244 206 35 / 0.35), rgb(244 206 35 / 0.35)) no-repeat right calc(var(--h) / 6) / 56% var(--h),
    linear-gradient(var(--vbar-ink), var(--vbar-ink)) no-repeat right calc(var(--h) / 2) / 100% var(--h);
}
.vbar { --vbar-ink: var(--day-ink); }          /* light surface */
.night .vbar, .vbar.on-ink { --vbar-ink: var(--ink); }

/* --- masthead ---------------------------------------------------------------- */
.mast { border-bottom: 1px solid var(--day-rule); background: var(--day); }
.mast .shell { display: flex; align-items: center; gap: 1rem 1.75rem; padding: 1.15rem 0; flex-wrap: wrap; }
/* Wordmark per brand/GUIDE.md §5: the mark IS the O, so the lockup is a fixed Latin object
   and carries direction:ltr; without it RTL swings the ring to the end and it reads VERCLOCKEDO. Ring = 0.837em, dropped 0.0815em onto the
   cap-height band, with -0.027em side margins closing the optical sidebearing. No needle: at
   header size the mark is under the 32px floor, and a needle inside a letter reads as a hair. */
.wordmark { font: 900 1.875rem/1 var(--sans); letter-spacing: -0.02em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: flex-start; direction: ltr; }
.mk { width: 0.837em; height: 0.837em; margin: 0.0815em -0.027em 0; flex: none; }
.mast nav { margin-inline-start: auto; display: flex; align-items: center; gap: 0.6rem 1.6rem; font-size: var(--t-s); flex-wrap: wrap; }
.mast nav a { color: var(--day-muted); text-decoration: none; font-weight: 500; }
.mast nav a:hover { color: var(--day-ink); }
.mast nav a.act { color: var(--signal); }
.lang {
  background: transparent; border: 1px solid var(--day-edge); color: var(--day-ink);
  font: 500 var(--t-xs)/1 var(--mono); padding: 0.55rem 0.75rem; cursor: pointer;
}
.lang:hover { border-color: var(--day-ink); }
@media (max-width: 780px) { .mast nav a:not(.act) { display: none; } }

/* --- hero: display type, one yellow mark ------------------------------------- */
.eyebrow { font: 500 var(--t-xs)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--day-faint); margin: 0 0 1.5rem; }
.hero { padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2.5rem, 6vw, 6rem); }
h1 {
  /* GUIDE.md section 4: headlines are Rubik 800, sentence case, -0.025em to -0.03em.
     Only the wordmark is 900 and all caps. Line-height is the one number the guide
     does not set; 1.06 is the floor that keeps descenders clear at this size. */
  font: 800 var(--t-3xl)/1.06 var(--sans);
  letter-spacing: -0.03em;
  margin: 0 0 clamp(1.4rem, 3vw, 2.1rem); max-width: 18ch; text-wrap: balance;
}
h1 .hit { background: var(--signal); padding: 0.02em 0.1em; display: inline-block; }
.hero .tail { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; }
@media (max-width: 860px) { .hero .tail { grid-template-columns: minmax(0, 1fr); } }
.lede { font: 400 clamp(1.05rem, 0.95rem + 0.6vw, 1.45rem)/1.5 var(--sans); color: var(--day-muted); max-width: 44ch; margin: 0; text-wrap: pretty; }

/* --- buttons: filled is dark with a yellow face, hover flips ----------------- */
.act {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--day-ink); color: var(--signal);
  font: 600 var(--t-m)/1 var(--sans); padding: 1.15rem 1.65rem;
  border: 1px solid var(--day-ink); text-decoration: none; cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.act:hover { background: var(--signal); color: var(--day-ink); }
.act.ghost { background: transparent; color: var(--day-ink); }
.act.ghost:hover { background: var(--signal); border-color: var(--signal); }
.act.lit { background: var(--signal); color: var(--day-ink); border-color: var(--signal); }
.act.lit:hover { background: var(--day-ink); color: var(--signal); }
.acts { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.tlink { color: inherit; text-decoration: none; border-bottom: 2px solid var(--signal); font-weight: 500; }
.tlink:hover { background: var(--signal); }

/* --- the running bar: four facts, dark, mono -------------------------------- */
.running { background: var(--day-ink); color: var(--ink); }
.running .shell { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.7rem 1.75rem; padding: 1.5rem 0; font: 500 var(--t-s)/1 var(--mono); letter-spacing: 0.06em; }
.running .hot { color: var(--ink); }
.running .dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--signal); display: inline-block; margin-inline-end: 0.5rem; animation: pulse 2.6s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--signal) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 0.55rem transparent; } }

/* --- sections ---------------------------------------------------------------- */
section { padding: clamp(3rem, 8vw, 6.5rem) 0; }
h2 { font: 800 var(--t-2xl)/1.04 var(--sans); letter-spacing: -0.03em; margin: 0 0 0.85rem; text-wrap: balance; }
h3 { font: 800 var(--t-l)/1.15 var(--sans); letter-spacing: -0.03em; margin: 0 0 0.55rem; }
p { margin: 0 0 1rem; }
.sub { font-size: var(--t-l); color: var(--day-muted); max-width: 62ch; margin: 0 0 clamp(2rem, 4vw, 3.5rem); text-wrap: pretty; }
.night { background: var(--night); color: var(--ink); }
.night h2, .night h3 { color: var(--ink); }
.night p, .night .sub { color: var(--muted); }
.pale { background: var(--day-lift); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* --- the clock moment: a gauge, and what it costs to keep hours ------------- */
.clock { display: grid; grid-template-columns: 26rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 900px) { .clock { grid-template-columns: minmax(0, 1fr); } }
.gauge { width: min(26rem, 100%); }

/* The dial is a real instrument and the scale is a day: the dark band is the nine hours
   the shop is open, the red is the late stretch, and the needle lands on 23:51, the
   timestamp of the order in the list beside it. Geometry generated by site/tools/gauge.mjs. */
.dial { width: 100%; height: auto; display: block; }
.dial .ring path { fill: none; stroke: var(--signal); stroke-width: 3; }
.dial .base { stroke: var(--day-rule); stroke-width: 1; }
.dial .face { fill: none; stroke: var(--day-rule); stroke-width: 1; }
.dial .track path { fill: none; stroke-width: 24; }
.dial .track .closed { stroke: var(--day-bar); }
.dial .track .open { stroke: var(--day-ink); }
.dial .ticks line { stroke: var(--day-edge); stroke-width: 1.5; }
.dial .ticks .maj { stroke-width: 2.5; stroke: var(--day-ink); }
.dial .num { font: 500 12px var(--mono); fill: var(--day-faint); text-anchor: middle; }
.dial .end.s { text-anchor: start; }
.dial .end.e { text-anchor: end; }
.dial .needle path, .dial .hub { fill: var(--day-ink); }
.dial .pin { fill: var(--signal); }

/* The needle is drawn pointing at noon, so rotation is the offset from 12. It rests on
   23:51 and sweeps opening to closing to that, which is the argument in one movement. */
.dial .needle { transform-origin: 200px 196px; rotate: 88.88deg; }
@media (prefers-reduced-motion: no-preference) {
  .dial .needle { animation: sweep 7s cubic-bezier(.34, 1.1, .32, 1) infinite; }
}
@keyframes sweep {
  0%, 7% { rotate: -22.5deg; }
  38%, 47% { rotate: 45deg; }
  76%, 94% { rotate: 88.88deg; }
  100% { rotate: -22.5deg; }
}

.legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: 1rem 0 0; font: 500 var(--t-xs)/1.5 var(--mono); color: var(--day-faint); }
.legend > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.legend .k { width: 0.7rem; height: 0.7rem; flex: none; }
.legend .k.open { background: var(--day-ink); }
.legend .k.tip { width: 1.1rem; height: 0.18rem; background: var(--day-ink); }
.stamp { border-top: 1px solid var(--day-rule); padding-top: 1.6rem; margin-top: 2rem; max-width: 42rem; }
.stamp .label { font: 500 var(--t-xs)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--day-faint); margin-bottom: 1.1rem; }
.stamp ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.stamp li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; font-size: var(--t-s); color: var(--day-muted); }
.stamp time { font: 600 var(--t-s)/1.4 var(--mono); color: var(--day-ink); }
.stamp li.win time { color: var(--day-ink); font-weight: 700; }

/* --- what we automate: numbered rows, the actual jobs as chips -------------- */
.rows { border-top: 2px solid var(--day-ink); }
.rows > li { list-style: none; display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: 1rem 2.75rem; padding: clamp(1.5rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--day-rule); }
.rows > li:last-child { border-bottom: 2px solid var(--day-ink); }
@media (max-width: 900px) { .rows > li { grid-template-columns: minmax(0, 1fr); } }
.rows h3 { font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.9rem); font-weight: 800; }
.rows p { margin: 0; font-size: var(--t-s); color: var(--day-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; align-content: flex-start; padding-top: 0.25rem; }
.chips > span { border: 1px solid var(--day-edge); padding: 0.5rem 0.8rem; font: 500 var(--t-s)/1.2 var(--sans); }
.chips.lit > span { border-color: var(--signal); background: var(--signal); }

/* the founding strip under the rows */
.founding { margin-top: 2rem; background: var(--day-lift); border: 1px solid var(--day-rule); border-top: 0; padding: clamp(1.3rem, 3vw, 1.85rem); display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
@media (max-width: 900px) { .founding { grid-template-columns: minmax(0, 1fr); } }
.founding .label { font: 500 var(--t-xs)/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--day-faint); margin-bottom: 0.6rem; text-wrap: balance; }
.founding h3 { margin: 0; font-size: var(--t-xl); }
.founding .menu { display: grid; gap: 0.9rem; }
.founding .note { font-size: var(--t-s); color: var(--day-muted); margin: 0; max-width: 62ch; }

/* --- how it works: a rail and three stops ----------------------------------- */
.rail { position: relative; padding-top: 2.4rem; }
.rail::before { content: ""; position: absolute; top: 0.85rem; inset-inline: 0; height: 4px; background: var(--day-rule); }
.rail::after { content: ""; position: absolute; top: 0.85rem; inset-inline-start: 0; height: 4px; width: 66%; background: var(--signal); }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.rail .when { font: 500 var(--t-xs)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--day-faint); margin-bottom: 0.75rem; }
.rail .when.hot { color: var(--day-ink); }
.rail h3 { font-size: var(--t-xl); }
.rail p { margin: 0; font-size: var(--t-s); color: var(--day-muted); }

/* --- the payback board ------------------------------------------------------- */
.calc { display: grid; gap: 1.8rem; }
.calc label { display: block; }
.calc label > span { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: var(--t-s); color: var(--muted); margin-bottom: 0.7rem; }
.calc output { font: 700 1.25rem/1 var(--mono); color: var(--signal); direction: ltr; }
.calc input[type="range"] { width: 100%; height: 1.6rem; margin: 0; accent-color: var(--signal); cursor: pointer; }
.calc .more { border-top: 1px solid var(--rule); padding-top: 1.6rem; display: grid; gap: 1.8rem; }
.calc .label { font: 500 var(--t-xs)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.calc .fine { margin: 0; }
.fine { font: 400 var(--t-xs)/1.7 var(--mono); color: var(--faint); }

.board { border: 1px solid var(--rule); background: var(--night-deep); }
.board .head { padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.3rem, 3vw, 2.1rem) 1.6rem; border-bottom: 1px solid var(--rule); }
.board .label { font: 500 var(--t-xs)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); margin-bottom: 1.1rem; }
.board .big { display: flex; align-items: baseline; gap: 1.15rem; flex-wrap: wrap; }
.board .num { font: 700 clamp(3.6rem, 2rem + 7vw, 8.25rem)/0.8 var(--mono); letter-spacing: -0.06em; color: var(--signal); direction: ltr; }
.board .u { font: 500 var(--t-l)/1.25 var(--sans); color: var(--ink); max-width: 13ch; }
.board .big.nopay .num { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); line-height: 1; }
.board .big.nopay .u { max-width: 34ch; font-size: var(--t-s); color: var(--muted); }
.bars { padding: 1.6rem clamp(1.3rem, 3vw, 2.1rem); display: grid; gap: 1.35rem; border-bottom: 1px solid var(--rule); }
.bars .row > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: var(--t-s); color: var(--muted); margin-bottom: 0.6rem; }
.bars .row b { font: 600 var(--t-s)/1 var(--mono); color: var(--ink); }
.bars i { display: block; height: 1.4rem; width: 100%; background: var(--signal); transform: scaleX(var(--w, 1)); transform-origin: left center; transition: transform 0.35s var(--ease); }
html[lang="ar"] .bars i { transform-origin: right center; }
.bars i.fee { background: var(--faint); }
.tri { padding: 1.5rem clamp(1.3rem, 3vw, 2.1rem); display: flex; flex-wrap: wrap; gap: 1.5rem 2.4rem; border-bottom: 1px solid var(--rule); }
.tri b { display: block; font: 700 1.75rem/1 var(--mono); color: var(--ink); direction: ltr; }
.tri span { display: block; font: 400 var(--t-xs)/1.4 var(--mono); color: var(--faint); margin-top: 0.4rem; }
.board .foot { padding: 1.4rem clamp(1.3rem, 3vw, 2.1rem) 1.75rem; }
.board .foot .act { margin-top: 1.15rem; }

/* --- prices: prose left, a stack of cards right ----------------------------- */
.stack { border: 1px solid var(--day-ink); }
.stack .top { background: var(--signal); padding: clamp(1.4rem, 3vw, 1.9rem); }
.stack .line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0.4rem 1rem; }
.stack .cost { justify-self: end; white-space: nowrap; }
.stack .top .name { font: 800 clamp(1.5rem, 1.2rem + 1vw, 1.9rem)/1 var(--sans); letter-spacing: -0.03em; }
.stack .top .cost { font: 700 clamp(1.5rem, 1.2rem + 1vw, 1.9rem)/1 var(--mono); direction: ltr; }
.stack .row { padding: clamp(1.2rem, 3vw, 1.7rem); border-top: 1px solid var(--day-ink); background: var(--day-lift); }
.stack .row .name { font: 700 clamp(1.3rem, 1.05rem + 0.8vw, 1.56rem)/1.15 var(--sans); letter-spacing: -0.02em; }
.stack .row .cost { font: 700 clamp(1.3rem, 1.05rem + 0.8vw, 1.56rem)/1 var(--mono); direction: ltr; }
.stack s { font-weight: 400; font-size: 0.62em; color: var(--day-faint); text-decoration-thickness: 1px; }
.stack small { font-weight: 400; font-size: 0.6em; color: var(--day-muted); }
.stack p { margin: 0.75rem 0 0; font-size: var(--t-s); color: var(--day-muted); }
.stack .top p { color: var(--day-ink); }
.stack .top .act { margin-top: 1.2rem; }
.caps { font: 500 var(--t-xs)/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--day-faint); margin: 0; }

/* --- who we are, and the questions ------------------------------------------ */
.claims { display: grid; gap: 0.9rem; margin: 1.6rem 0 0; padding: 0; list-style: none; font-size: var(--t-s); color: var(--muted); }
.claims b { color: var(--signal); font-weight: 600; }
.faq details { border-top: 1px solid var(--rule); padding: 1rem 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 1rem; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 500 1.2rem/1 var(--mono); color: var(--faint); }
.faq details[open] summary::after { content: "\2212"; color: var(--signal); }
.faq p { margin: 0.75rem 0 0; font-size: var(--t-s); color: var(--muted); max-width: 58ch; }

/* --- the yellow closing band ------------------------------------------------- */
.close { background: var(--signal); color: var(--day-ink); }
.close p { color: var(--day-ink); }
.close .caps { color: var(--day-ink); }
.close .act { background: var(--day-ink); color: var(--signal); border-color: var(--day-ink); }
.close .act:hover { background: var(--day-lift); color: var(--day-ink); }
form#lead { display: grid; gap: 0.9rem; max-width: 34rem; }
form#lead label { display: grid; gap: 0.35rem; font-size: var(--t-s); }
input, select, textarea {
  font: 400 var(--t-m) var(--sans); color: var(--day-ink); background: var(--day);
  border: 1px solid var(--day-ink); padding: 0.95rem 1rem; width: 100%;
}
textarea { min-height: 7rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--day-faint); }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--day-ink); outline-offset: 1px; }
.pot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.status { font: 500 var(--t-s)/1.5 var(--mono); min-height: 1.5em; }
.status.bad { color: var(--day-ink); font-weight: 700; }

footer { background: var(--day-ink); color: var(--faint); font: 400 var(--t-s)/1.5 var(--mono); }
footer .shell { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.7rem 1.75rem; padding: 1.75rem 0 2.25rem; }
footer a { color: var(--signal); text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
/* GUIDE.md section 7: the small mark, no needle, 18px, beside the studio line. */
footer .sig { display: inline-flex; align-items: center; gap: 0.6rem; }
.fmk { width: 18px; height: 18px; flex: none; }

/* --- secondary pages (demo, legal) keep the same furniture ------------------- */
.prose { max-width: 66ch; text-wrap: pretty; }
.prose p { color: var(--day-muted); }
.prose h3 { margin-top: 1.8rem; }