/* ══════════════════════════════════════════════════════════════════════════
   Biiggle — the platform's interface
   ══════════════════════════════════════════════════════════════════════════

   ─── why this file exists ────────────────────────────────────────────────

   Eight pages each carried their own :root block and their own idea of what
   a button looked like. Between them they used nineteen font sizes — 10.5,
   11, 11.5, 12, 12.5, 13.5, 14, 14.5, 16.5, 17 — seven corner radii and
   forty-odd spacing values, none of which were multiples of anything.

   Nothing was individually wrong. Together they read as a page assembled
   from parts rather than designed, which is exactly what it was.

   So: three scales — type, space, radius — and everything is built from
   them. A value that is not on a scale is a decision somebody has to defend.

   ─── no gradients ───────────────────────────────────────────────────────

   Every button, badge, avatar and chip used to be a 135° two-stop gradient.
   One gradient is a choice; thirty is a texture, and it is the texture that
   makes a page look like it was generated rather than drawn. Flat colour,
   one weight of border, one elevation. Where depth is needed it comes from
   a border and a very quiet shadow, never from a colour ramp.

   ─── the type scale ─────────────────────────────────────────────────────

   A fifth apart, rounded to whole pixels, with the line-height and the
   letter-spacing that size actually wants. Large text is set tighter
   because it looks loose otherwise; small text is set looser because it
   looks cramped. Those two facts are the whole of typographic polish and
   they are built into the scale rather than left to each page.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── ink and paper ────────────────────────────────────────────────────── */
  --ink:        #0b1020;   /* headings, and anything that must be read */
  --ink-2:      #333d52;   /* body text */
  --mute:       #68748c;   /* captions, labels, the second line of a card */
  --faint:      #93a0b5;   /* placeholder, disabled */
  --line:       #e3e8f0;   /* every border on the site */
  --line-2:     #eef1f6;   /* a divider inside a card */
  --bg:         #f7f8fb;   /* the page */
  --surface:    #ffffff;   /* a card on the page */
  --surface-2:  #f2f4f9;   /* an input, a quiet chip */

  /* ── brand and status ─────────────────────────────────────────────────── */
  --brand:      #6d28d9;
  --brand-ink:  #5b21b6;   /* the same, darker — for text on pale ground */
  --brand-wash: #f4f1fe;   /* the palest tint, for a selected chip */
  --good:       #15803d;
  --good-wash:  #eafaf0;
  --warn:       #b45309;
  --warn-wash:  #fdf4e7;
  --bad:        #be3d2a;
  --bad-wash:   #fdf2f0;

  /* ── type ─────────────────────────────────────────────────────────────── */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;

  --t-11: 11px;   --t-12: 12px;   --t-13: 13px;   --t-14: 14px;
  --t-15: 15px;   --t-16: 16px;   --t-18: 18px;   --t-20: 20px;
  --t-24: 24px;   --t-30: 30px;   --t-38: 38px;   --t-48: 48px;

  /* ── space: a four-pixel rhythm, nothing between the steps ────────────── */
  --s-1:  4px;    --s-2:  8px;    --s-3: 12px;    --s-4: 16px;
  --s-5: 20px;    --s-6: 24px;    --s-8: 32px;    --s-10: 40px;
  --s-12: 48px;   --s-16: 64px;   --s-20: 80px;   --s-24: 96px;

  /* ── radius ───────────────────────────────────────────────────────────── */
  --r-sm: 8px;    --r:   12px;    --r-lg: 16px;   --r-xl: 20px;
  --r-pill: 999px;

  /* ── one elevation, used rarely ───────────────────────────────────────── */
  --lift:  0 1px 2px rgba(11, 16, 32, .04), 0 4px 12px -4px rgba(11, 16, 32, .08);
  --lift-2:0 8px 28px -8px rgba(11, 16, 32, .18);

  /* ── controls: three heights and nothing else ─────────────────────────── */
  --h-sm: 34px;   --h:   40px;    --h-lg: 48px;

  --page: 1080px;          /* the one content width */
  --gutter: var(--s-5);

  /* One duration, one curve. Four different easings on one page reads as
     four different hands. */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --fast: .15s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:       #eaeefa;
    --ink-2:     #c4cde0;
    --mute:      #8d9ab4;
    --faint:     #66738c;
    --line:      #222b42;
    --line-2:    #1a2236;
    --bg:        #090d19;
    --surface:   #111829;
    --surface-2: #171f33;
    --brand:     #8b5cf6;
    --brand-ink: #c4b5fd;
    --brand-wash:#1c1836;
    --good:      #4ade80;  --good-wash: #0e2a1a;
    --warn:      #fbbf24;  --warn-wash: #2a2109;
    --bad:       #fca5a5;  --bad-wash:  #2a1512;
    --lift:   0 1px 2px rgba(0,0,0,.5), 0 4px 14px -6px rgba(0,0,0,.6);
    --lift-2: 0 10px 34px -10px rgba(0,0,0,.75);
  }
}

/* ══ base ═══════════════════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--t-16);
  line-height: 1.6;
  /* Switched on deliberately: the system stack's default figures are
     proportional, so a column of prices does not line up. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 760;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-38); line-height: 1.1;  letter-spacing: -.028em; }
h2 { font-size: var(--t-30); line-height: 1.18; letter-spacing: -.022em; }
h3 { font-size: var(--t-18); line-height: 1.3;  letter-spacing: -.012em; }
h4 { font-size: var(--t-15); line-height: 1.4;  letter-spacing: -.006em; }
p  { margin: 0; }

a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* One focus ring for the whole platform, and it is visible. A keyboard user
   who cannot see where they are is a keyboard user who cannot use the site. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--brand); color: #fff; }

/* ══ layout ═════════════════════════════════════════════════════════════ */

.wrap { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }

/* Sections are spaced by one of three sizes, never by a number somebody
   typed. The run of near-identical paddings — 54, 46, 62, 38 — is what made
   the old page feel arbitrary from one block to the next. */
.sec        { padding-block: var(--s-16); }
.sec--tight { padding-block: var(--s-12); }
.sec--wide  { padding-block: var(--s-20); }
.sec--alt   { background: var(--surface); border-block: 1px solid var(--line); }

@media (max-width: 760px) {
  :root { --gutter: var(--s-4); }
  .sec        { padding-block: var(--s-12); }
  .sec--tight { padding-block: var(--s-10); }
  .sec--wide  { padding-block: var(--s-12); }
  h1 { font-size: var(--t-30); }
  h2 { font-size: var(--t-24); }
}

/* The heading and the line under it are one unit, so the gap between them is
   set once and the gap below the pair is set once.
   Named `sec-head`, not `head`: the artisan dashboard already has a `.head`
   and it is a profile photograph beside a name, which a 62ch cap would have
   quietly squashed. */
.sec-head      { margin-bottom: var(--s-8); max-width: 62ch; }
.sec-head > h2 { margin-bottom: var(--s-2); }
.sec-head > p  { color: var(--mute); font-size: var(--t-16); }
.sec-head--mid { margin-inline: auto; text-align: center; }

/* ══ the top bar ════════════════════════════════════════════════════════ */

.bar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar__in {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: 60px;
}
.bar__nav {
  display: flex; align-items: center; gap: var(--s-1);
  margin-left: auto;
  /* NEVER wraps. On a narrow screen it scrolls sideways instead — two rows
     of navigation pushing the page down is the single clearest sign that
     nobody opened the site on a phone. */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Room for the scroll to end cleanly against the gutter. */
  margin-right: calc(var(--gutter) * -1);
  padding-right: var(--gutter);
}
.bar__nav::-webkit-scrollbar { display: none; }
.bar__nav a {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  height: var(--h-sm); padding-inline: var(--s-3);
  border-radius: var(--r-sm);
  color: var(--mute); font-size: var(--t-14); font-weight: 600;
  white-space: nowrap;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.bar__nav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.bar__nav a.on    { color: var(--ink); background: var(--surface-2); }

/* ══ buttons ════════════════════════════════════════════════════════════ */
/* One shape, three weights, three sizes. Every button on the platform is one
   of these; a button that needed its own padding was how the old pages ended
   up with controls of six different heights sitting beside each other. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--h); padding-inline: var(--s-5);
  border: 1px solid transparent; border-radius: var(--r);
  font: inherit; font-size: var(--t-15); font-weight: 650; line-height: 1;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
              color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn--go    { background: var(--brand); color: #fff; }
.btn--go:hover { background: var(--brand-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--go:hover { background: #7c4dee; }
}
.btn--line  { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn--line:hover { border-color: var(--faint); background: var(--surface); }
.btn--quiet { background: transparent; color: var(--ink-2); }
.btn--quiet:hover { background: var(--surface-2); }
.btn--bad   { background: var(--surface); color: var(--bad); border-color: var(--line); }
.btn--bad:hover { border-color: var(--bad); }

.btn--sm { height: var(--h-sm); padding-inline: var(--s-3); font-size: var(--t-13); border-radius: var(--r-sm); }
.btn--lg { height: var(--h-lg); padding-inline: var(--s-6); font-size: var(--t-16); }
.btn--wide { width: 100%; }

/* ══ cards ══════════════════════════════════════════════════════════════ */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.sec--alt .card { background: var(--bg); }
.card--pad { padding: var(--s-6); }

/* ══ chips, pills and badges ════════════════════════════════════════════ */

.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: var(--h-sm); padding-inline: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2);
  font-size: var(--t-13); font-weight: 620; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease),
              color var(--fast) var(--ease);
}
.chip:hover { border-color: var(--faint); color: var(--ink); text-decoration: none; }
.chip.on {
  /* Selected is a tint and a border, not a gradient and white text. It reads
     as "this one", which is all a filter has to say. */
  background: var(--brand-wash); border-color: var(--brand); color: var(--brand-ink);
}
.chip__i { width: 16px; height: 16px; flex: 0 0 16px; }

.tag {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 2px var(--s-2); border-radius: var(--r-pill);
  font-size: var(--t-11); font-weight: 700; letter-spacing: .01em;
  background: var(--surface-2); color: var(--mute);
}
.tag--brand { background: var(--brand-wash); color: var(--brand-ink); }
.tag--good  { background: var(--good-wash);  color: var(--good); }
.tag--warn  { background: var(--warn-wash);  color: var(--warn); }
.tag--bad   { background: var(--bad-wash);   color: var(--bad); }

/* ══ forms ══════════════════════════════════════════════════════════════ */

.field { display: block; margin-bottom: var(--s-4); }
.field > span {
  display: block; margin-bottom: var(--s-2);
  font-size: var(--t-13); font-weight: 650; color: var(--ink);
}
.field > small { display: block; margin-top: var(--s-2); font-size: var(--t-12); color: var(--mute); }

/* Every text-like input, however it was written.
   `input[type=text]` does NOT match `<input name=x>` — a bare input has no
   type attribute to select on, it only behaves as one. Five pages were full
   of browser-default 22px-tall boxes because of it, which is exactly the
   "assembled from parts" look this file exists to end. */
/* Wrapped in :where(), which makes the whole list weigh nothing at all.
   Without it `input:not([type])` outranks a plain class, so `.seek__q` —
   which deliberately has no border because it sits inside a pill that does —
   was given one, and the front page's search box grew a box inside a box.
   A base layer that a component cannot override is not a base layer. */
:where(.input,
  input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=url],
  input[type=number], input[type=password], input[type=search], input[type=date],
  input[type=time], input[type=month], input[type=week], input[type=datetime-local],
  select, textarea) {
  width: 100%; min-height: var(--h-lg);
  padding: 0 var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--t-15);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
textarea { padding: var(--s-3); min-height: 96px; line-height: 1.55; resize: vertical; }
select { appearance: none; padding-right: var(--s-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2368748c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s-3) center; }
::placeholder { color: var(--faint); }

/* A file picker is a button, not a box — it gets the height and the border
   but never the padding, which would push the browser's own control out. */
input[type=file] {
  width: 100%; min-height: var(--h-lg); padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: var(--t-13);
}
input[type=checkbox], input[type=radio] {
  width: 17px; height: 17px; min-height: 0; margin: 0;
  accent-color: var(--brand); flex: 0 0 auto;
}

:where(.input, input, select, textarea):focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}

/* ══ notices ════════════════════════════════════════════════════════════ */

.note {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3) var(--s-4); border-radius: var(--r);
  font-size: var(--t-14); line-height: 1.5;
  border: 1px solid transparent;
}
.note--ok  { background: var(--good-wash); color: var(--good); border-color: color-mix(in srgb, var(--good) 22%, transparent); }
.note--bad { background: var(--bad-wash);  color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 22%, transparent); }
.note--say { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }

/* ══ tables ═════════════════════════════════════════════════════════════ */

.table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.table th, .table td {
  padding: var(--s-3) var(--s-4); text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--line-2); font-size: var(--t-14);
}
.table th {
  background: var(--surface-2); color: var(--mute);
  font-size: var(--t-12); font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}
.table tr:last-child td { border-bottom: 0; }

/* ══ a row of things that scrolls on a phone ════════════════════════════ */
/* Used by the category filter and the featured strip. The padding either
   side is what stops the first and last card being clipped against the
   gutter — the fault visible in every screenshot of the old page. */

.rail {
  display: flex; gap: var(--s-2);
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-block: 2px var(--s-2);
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 auto; scroll-snap-align: start; }
@media (min-width: 900px) {
  .rail { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}

/* ══ small helpers, each earning its place ══════════════════════════════ */

.muted { color: var(--mute); }
.small { font-size: var(--t-13); }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.row   { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.grow  { flex: 1 1 auto; min-width: 0; }

/* Anything that must not be seen but must be read aloud.
   `.sr-only`, not `.sr`: the directory already calls a search result row
   `.sr`, and because its stylesheet loads second its `width:100%` won a
   silent fight with this rule's `width:1px`. A hidden heading was then 1440
   pixels wide and the whole front page scrolled sideways. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══ a single card on a page ════════════════════════════════════════════ */
/* Sign up, join, sign in, get verified, pay. Five pages that are one form in
   the middle of an empty screen, and five copies of the same forty lines —
   which is how they came to disagree about how tall a button is.
   Opted into with <body class="pane">, so it cannot leak into the directory
   or the console, which are laid out quite differently. */

.pane { padding: var(--s-6) var(--s-4); }
.pane .wrap { max-width: 520px; }
.pane .wrap--wide { max-width: 760px; }

/* The mark, centred above the card. */
.pane .mark, .pane .mk {
  display: flex; justify-content: center;
  margin: var(--s-2) 0 var(--s-6); font-size: var(--t-20);
}

.pane .card { padding: var(--s-6); box-shadow: var(--lift); }
.pane h1 { font-size: var(--t-24); margin: 0 0 var(--s-1); }
.pane .lede { margin: 0 0 var(--s-5); color: var(--mute); font-size: var(--t-14); }

.pane label { display: block; margin: 0 0 var(--s-4); }
.pane label > span {
  display: block; margin: 0 0 var(--s-2);
  font-size: var(--t-13); font-weight: 650; color: var(--ink);
}
/* An aside inside a label — "optional", "we never show this" — is a note,
   not a second heading. */
.pane label > span small { font-weight: 500; color: var(--mute); }
.pane .hint { margin: calc(var(--s-3) * -1) 0 var(--s-4); font-size: var(--t-12); color: var(--mute); }

/* The one button on the page is the primary action, so it is the full width
   of the card and the tallest control on it. */
/* `<button>Sign in</button>` inside a form submits it but carries no type
   attribute to select on — the same trap as a bare <input>. The form
   selector is what catches it. */
.pane button[type=submit],
.pane form button:not([type=button]):not(.pin-btn),
.pane .card > button, .pane .go {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--h-lg); margin-top: var(--s-2);
  padding-inline: var(--s-5);
  border: 0; border-radius: var(--r);
  background: var(--brand); color: #fff;
  font: inherit; font-size: var(--t-15); font-weight: 650;
  cursor: pointer; text-decoration: none;
  transition: background var(--fast) var(--ease);
}
.pane button[type=submit]:hover, .pane .card > button:hover { background: var(--brand-ink); }
.pane button[disabled] { opacity: .6; cursor: progress; }
/* A secondary full-width action — "open your dashboard" after signing up. */
.pane .go--line { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.pane .go--line:hover { background: var(--surface-2); }

.pane .two   { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-3); }
.pane .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--s-3); }
@media (max-width: 460px) { .pane .two, .pane .three { grid-template-columns: 1fr; } }

.pane .fault { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r);
  font-size: var(--t-14); background: var(--bad-wash); color: var(--bad);
  border: 1px solid color-mix(in srgb, var(--bad) 22%, transparent); }
.pane .warn { margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r);
  font-size: var(--t-13); line-height: 1.5; background: var(--warn-wash); color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); }
.pane .standing { margin: 0 0 var(--s-5); padding: var(--s-3) var(--s-4); border-radius: var(--r);
  font-size: var(--t-13); line-height: 1.55; background: var(--brand-wash); color: var(--brand-ink);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.pane .standing b { display: block; margin: 0 0 2px; font-size: var(--t-14); }

.pane .foot { margin: var(--s-4) 0 0; text-align: center; font-size: var(--t-13); color: var(--mute); }

/* A row of facts after something worked: the address, the PIN, the password. */
.pane .keys { margin: var(--s-4) 0 0; border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; }
.pane .keys div { display: flex; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); font-size: var(--t-14); }
.pane .keys div + div { border-top: 1px solid var(--line-2); }
.pane .keys b { font-weight: 700; word-break: break-all; text-align: right; color: var(--ink); }
.pane .pin { font-size: var(--t-20); letter-spacing: .14em; font-weight: 760; color: var(--brand-ink); }

.pane .ok__tick { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  margin: 0 auto var(--s-3); background: var(--good-wash); color: var(--good); font-size: var(--t-24); }

/* Choosing between two or three things before filling a form in. */
.pane .who { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin: 0 0 var(--s-5); }
@media (max-width: 460px) { .pane .who { grid-template-columns: 1fr; } }
.pane .who a { display: block; padding: var(--s-3) var(--s-4); border: 1px solid var(--line);
  border-radius: var(--r); text-decoration: none; color: var(--ink); background: var(--surface-2); }
.pane .who a:hover { border-color: var(--faint); text-decoration: none; }
.pane .who a.on { border-color: var(--brand); background: var(--brand-wash); }
.pane .who b { display: block; font-size: var(--t-14); margin: 0 0 2px; }
.pane .who i { font-style: normal; font-size: var(--t-12); color: var(--mute); line-height: 1.45; }

/* A grid of things to tick. */
.pane .svc { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: var(--s-2); margin: 0 0 var(--s-2); }
.pane .svc label { display: flex; align-items: center; gap: var(--s-2); margin: 0;
  padding: var(--s-2) var(--s-3); cursor: pointer; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface-2); font-size: var(--t-13); min-height: var(--h); }
.pane .svc label:has(input:checked) { border-color: var(--brand); background: var(--brand-wash); }
.pane .svc input { width: auto; min-height: 0; margin: 0; accent-color: var(--brand); }
.pane .svc__i { width: 18px; height: 18px; flex: 0 0 18px; color: var(--brand); stroke-width: 1.75; }
.pane .grp { margin: var(--s-4) 0 var(--s-2); font-size: var(--t-12); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.pane .grp:first-of-type { margin-top: 0; }

/* The PIN control, shared by both sign-ups. */
.pane .pin-box { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.pane .pin-box.is-set { border-color: color-mix(in srgb, var(--good) 45%, transparent); background: var(--good-wash); }
.pane .pin-box.is-bad { border-color: color-mix(in srgb, var(--bad) 35%, transparent); background: var(--bad-wash); }
.pane .pin-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
/* It is excluded from the submit rule above (it must not submit the form),
   so it has to say what it looks like itself — otherwise it renders as the
   browser's own grey button in the middle of a styled card, which is exactly
   what happened. */
.pane .pin-btn { width: auto; margin: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--h); padding-inline: var(--s-4);
  border: 0; border-radius: var(--r-sm);
  background: var(--brand); color: #fff;
  font: inherit; font-size: var(--t-14); font-weight: 650; cursor: pointer;
  transition: background var(--fast) var(--ease); }
.pane .pin-btn:hover { background: var(--brand-ink); }
.pane .pin-box.is-set .pin-btn { background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); }
.pane .pin-state { flex: 1 1 150px; font-size: var(--t-13); font-weight: 650; }
.pane .pin-box.is-set .pin-state { color: var(--good); }
.pane .pin-box.is-bad .pin-state { color: var(--bad); }
.pane .pin-why { margin: var(--s-2) 0 0; font-size: var(--t-12); line-height: 1.5; color: var(--mute); }

/* An address being built: a box and the domain it will sit under. */
.pane .addr { display: flex; align-items: stretch; }
.pane .addr input { border-radius: var(--r) 0 0 var(--r); border-right: 0; text-align: right; }
.pane .addr .host { display: flex; align-items: center; padding: 0 var(--s-3);
  font-size: var(--t-14); color: var(--mute); background: var(--surface-2);
  border: 1px solid var(--line); border-left: 0;
  border-radius: 0 var(--r) var(--r) 0; white-space: nowrap; }