/* The Lanes look, the same as merlinos.uk/get/ and /invite/, which send organisations
   here: the void, the cyan and periwinkle glow and the faint grid of the Lanes window
   (web/plugins/dev-lanes/src/DevLanes.css tokens) as the ground, with white cards on it so
   the form reads as friendly rather than as a terminal. One look on purpose, so a stranger
   meets one MERLIN across all three pages. */

/* The two faces, served from this origin. The CSP (nginx.conf) is 'self' only, which is
   right for this page, so Google Fonts cannot load here. Latin subsets, SIL OFL (fonts/). */
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("fonts/space-grotesk-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/jetbrains-mono-500-latin.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  /* The ground: what sits outside a card (the masthead, the heading above the form, the footer). */
  --bg:#04060C; --field:rgba(4,6,12,.72);
  --ink:#DBE6FF; --muted:#93A0BD; --faint:#6B7690;
  --line:rgba(120,145,200,.18); --line-2:rgba(120,145,200,.10); --line-hot:rgba(95,224,255,.45);
  --accent:#5FE0FF; --accent-soft:rgba(95,224,255,.10); --accent-ink:#04060C;
  --periwinkle:#A9B2FF;
  --pos:#7EE0B8; --neg:#FF6B7A; --warn:#FFBE5C;
  /* The Lanes cyan button, the same inside a white card as on the ground. */
  --button:#5FE0FF; --button-ink:#04060C; --button-hover:#8FEAFF;
  --radius:14px;
  --mono:"JetBrains Mono", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }

/* `hidden` must win. Both .card and form set `display`, and a class selector beats
   the [hidden] attribute's UA rule — so the success panel rendered under the form
   it was supposed to replace, and hiding the form on submit would have done
   nothing either. Caught in a render check; it is invisible when reading the CSS. */
[hidden] { display: none !important; }

html { background: var(--bg); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  color: var(--ink);
  background:
    radial-gradient(620px 340px at 22% 0%, rgba(95,224,255,.16), transparent 70%),
    radial-gradient(560px 320px at 82% 6%, rgba(169,178,255,.14), transparent 70%),
    var(--bg);
  font: 16px/1.6 "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* The grid, fading out down the page. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%);
}
.masthead, main, .foot { position: relative; }

.shell {
  max-width: 46rem;
  margin: 0 auto;
  padding-inline: 20px;
}

/* --- masthead --- */
.masthead {
  background: rgba(4,6,12,.55);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.masthead .shell {
  display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
  padding-block: 12px;
}
.mark { width: 28px; height: 28px; border-radius: 7px; display: block; flex: none; }
.wordmark { font-weight: 600; letter-spacing: .08em; font-size: .95rem; }
.masthead-note {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}

/* --- intro --- */
main { padding-block: 28px 56px; display: block; }
.intro { margin-bottom: 22px; }
h1 { font-size: clamp(1.6rem, 5.5vw, 2.1rem); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; margin: 0 0 8px; text-wrap: balance; }
.lede { margin: 0; color: var(--muted); max-width: 38rem; }

/* --- cards --- */
form { display: flex; flex-direction: column; gap: 18px; }
/* A white card. It redefines the palette for everything inside it, so the rules below
   read the same tokens whether they sit on the ground or in a card. The text accent is a
   deep cyan here, because the Lanes cyan cannot be read on white. */
.card {
  color-scheme: light;
  --ink:#0F1626; --muted:#566178; --faint:#8A94A8;
  --line:rgba(15,22,38,.22); --line-2:rgba(15,22,38,.06); --line-hot:rgba(0,119,163,.55);
  --field:#FFFFFF;
  --accent:#0077A3; --accent-soft:rgba(95,224,255,.18); --accent-ink:#FFFFFF;
  --pos:#0E7F57; --neg:#C62F3B; --warn:#9A5B0C;
  background: #FFFFFF;
  color: var(--ink);
  border: 1px solid rgba(95,224,255,.45);
  border-radius: var(--radius);
  box-shadow: 0 30px 100px -30px rgba(95,224,255,.35), 0 24px 60px rgba(0,0,0,.6);
  padding: 22px;
  display: flex; flex-direction: column; gap: 18px;
}
.card-head { display: flex; flex-direction: column; gap: 3px; }
.step {
  font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
h2 { font-size: 1.15rem; font-weight: 600; margin: 0; }

/* --- fields --- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
fieldset.field { border: 0; padding: 0; margin: 0; }
legend { padding: 0; font-weight: 500; font-size: .9rem; margin-bottom: 6px; }
label, .label-as-text { font-weight: 500; font-size: .9rem; }
.optional { font-weight: 400; color: var(--faint); font-size: .82rem; }

input[type=text], input[type=email], input[type=tel], input[type=number] {
  font: inherit;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
  min-width: 0;
}
input::placeholder { color: var(--faint); }
input:focus { border-color: var(--line-hot); }
input[type=radio], input[type=checkbox] { accent-color: var(--accent); }
input:focus-visible, button:focus-visible, summary:focus-visible,
.choice:focus-within, .addon:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
input[aria-invalid="true"] { border-color: var(--neg); }

.hint { margin: 0; font-size: .82rem; color: var(--muted); }
.hint.centred { text-align: center; }
.error { margin: 0; font-size: .82rem; color: var(--neg); font-weight: 500; }
.status { margin: 0; font-size: .82rem; color: var(--muted); min-height: 1.3em; }
.status.ok  { color: var(--pos); font-weight: 500; }
.status.bad { color: var(--neg); font-weight: 500; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- slug --- */
.slug-row { display: flex; align-items: stretch; gap: 0; min-width: 0; }
.slug-row input { border-radius: 10px 0 0 10px; border-right: 0; }
.slug-suffix {
  display: flex; align-items: center;
  padding: 0 10px;
  background: var(--line-2);
  border: 1px solid var(--line);
  border-radius: 0 10px 10px 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .76rem;
  white-space: nowrap;
}
@media (max-width: 430px) {
  .slug-row { flex-direction: column; }
  .slug-row input { border-radius: 10px; border-right: 1px solid var(--line); }
  .slug-suffix { border-radius: 10px; margin-top: 6px; padding-block: 6px; justify-content: center; }
}

/* --- choices and add-ons --- */
.choice, .addon {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 8px;
  background: var(--field);
}
.choice:last-child, .addon:last-child { margin-bottom: 0; }
.choice input, .addon input { margin: 3px 0 0; flex: none; }
.choice span, .addon span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.choice strong, .addon strong { font-weight: 600; }
.choice em, .addon em { font-style: normal; font-size: .84rem; color: var(--muted); }
.choice:hover, .addon:hover { border-color: var(--line-hot); }
.choice:has(input:checked), .addon:has(input:checked) {
  border-color: var(--line-hot);
  background: var(--accent-soft);
}

.core-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; margin: 0; padding: 0;
}
.core-list li {
  font-size: .8rem; color: var(--ink);
  background: var(--line-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
}

/* --- contact grid --- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-2 .span-2 { grid-column: 1 / -1; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }

.billing summary {
  cursor: pointer; font-weight: 500; font-size: .9rem;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.billing summary::marker { color: var(--accent); }
.billing[open] summary { margin-bottom: 12px; }

/* --- summary --- */
.summary { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.summary > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.summary > div:last-child { border-bottom: 0; padding-bottom: 0; }
.summary dt { color: var(--muted); font-size: .88rem; flex: none; }
.summary dd {
  margin: 0; font-weight: 600; text-align: right;
  overflow-wrap: anywhere; min-width: 0;
}

.estimate {
  background: var(--accent-soft);
  border: 1px solid var(--line-hot);
  border-radius: 10px;
  padding: 14px 15px;
  display: flex; flex-direction: column; gap: 6px;
}
.estimate-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.estimate-row > span { font-weight: 500; font-size: .92rem; }
.estimate-total { font-family: var(--mono); font-weight: 500; font-size: 1.4rem; color: var(--accent); font-variant-numeric: tabular-nums; }

.form-error { padding: 10px 12px; background: var(--field); border: 1px solid var(--neg); border-radius: 10px; }

.submit {
  font: inherit; font-weight: 600; letter-spacing: .01em;
  background: var(--button); color: var(--button-ink);
  border: 0; border-radius: 10px;
  padding: 13px 18px;
  box-shadow: inset 0 0 0 1px rgba(0,119,163,.18), 0 10px 26px -12px rgba(0,119,163,.55);
  cursor: pointer;
  width: 100%;
}
.submit:hover { background: var(--button-hover); }
.submit[disabled] { opacity: .55; cursor: not-allowed; background: var(--button); }

.done p { margin: 0; }
.done code { font-family: var(--mono); background: var(--field); border: 1px solid var(--line); padding: .1em .4em; border-radius: 4px; font-size: .88em; }

.foot { padding-block: 0 40px; color: var(--faint); font-size: .84rem; }
.foot a { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* An add-on's price sits on its name line, quieter than the name. */
/* `.addon span` above makes every span a flex column; this one stays inline. */
.addon .addon-price { display: inline; font-weight: 400; color: var(--muted); }