/* The house palette, type and elevation — the layer every Gatehouse surface shares.
   Primitives (--m-*) feed semantic roles; retune a primitive and every role follows.

   ADMISSION RULE: a token belongs here only if a surface with NO policy domain would
   still need it. The console's rules/kind/action/subject triads stay in packages/web;
   a buyer console has no verdicts to colour. Consumers add their own layer on top —
   they never redefine a role, because two surfaces disagreeing about --accent is the
   drift this file exists to prevent. */

:root {
  /* ── Structure ── */
  --r-1: 9px;          /* general radius — buttons, inputs, badges, chips */
  --r-card: 15px;      /* cards & panels — the softer surface radius */
  --r-pill: 999px;     /* status pills, capsule chips */
  --r-dot: 50%;        /* true circles: status dots, pulses */

  /* ── Type — Clash Grotesk display over Inter body; mono for identifiers ── */
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Clash Grotesk', 'Inter', system-ui, sans-serif;
  --serif: var(--display);   /* legacy alias — now points at the display face */
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* ── PALETTE — warm paper ground, earthy status hues ── */
  --m-purple: #5C4DB3;
  --m-purple-mid: #6A5BC9;
  --m-purple-deep: #352155;
  --m-lavender: #DCD3F2;
  --m-lavender-soft: #EFEAFA;
  --m-lavender-mid: #C9BDF0;

  --m-ink: #23211D;
  --m-muted: #7E7A71;
  --m-muted-2: #6d6a67;

  --m-paper: #f5f2eb;       /* warm grey-beige canvas */
  --m-paper-2: #EFEDE6;     /* recessed / code / track */
  --m-white: #FAF9F6;       /* warm off-white card surface */
  --m-line: #E5E3DD;
  --m-line-2: #D7D3CA;

  --m-orange: #B25B27;      /* warn / high — warm sienna */
  --m-success: #357C52;     /* allowed — muted green */
  --m-critical: #C23A34;    /* blocked — muted red */
  --m-coral: #C23A34;
  --m-peri: #3D4DC2;        /* info — indigo, distinct from the accent purple */
  --m-peri-deep: #3741A8;   /* info text */

  --ok-dim: #2E6B47;
  --warn-ink: #9A4E1E;      /* warn text — darker sienna, legible on paper */
  --accent-soft: rgba(92,77,179,.14);

  --el-1: 0 1px 2px rgba(60,56,48,.04);
  --el-2: 0 1px 2px rgba(60,56,48,.04), 0 14px 32px -22px rgba(60,56,48,.26);
  --el-3: 0 2px 6px rgba(60,56,48,.06), 0 26px 50px -30px rgba(60,56,48,.32);

  /* ── Semantic roles — THE canonical vocabulary every rule speaks.
        ok=success · warn=high · bad=critical · info=held/pending. ── */
  --bg: var(--m-paper);
  --panel: var(--m-white);
  --panel-2: var(--m-paper-2);
  --inset: var(--m-paper-2);
  --line: var(--m-line);
  --line-bright: var(--m-line-2);
  --text: var(--m-ink);
  --muted: var(--m-muted);
  --faint: var(--m-muted-2);
  --ok: var(--m-success);
  --warn: var(--m-orange);
  --bad: var(--m-critical);
  --info: var(--m-peri-deep);
  --info-bright: var(--m-peri);          /* info fills / dots / borders */
  --accent: var(--m-purple);
  --accent-hover: var(--m-purple-mid);   /* primary-button / link hover */
  --accent-wash: var(--m-lavender-soft); /* active-nav / avatar / tint surfaces */
}

/* The buyer surface. Served concatenated after @gatehouse/design-foundation/foundation.css,
   which owns the palette, the type stack and the semantic roles — nothing here redefines one.

   This layer is the console's vocabulary at a LOWER DENSITY. The console packs a working
   surface; this one is read a handful of times by someone deciding whether to trust us with a
   card, so it trades rows-per-screen for scale and air. Mono appears only on things that are
   genuinely identifiers — a hostname, a support id — because mono on a plan name is what made
   the old page read as an internal tool. */

@font-face {
  font-family: 'Clash Grotesk';
  src: url('ClashGrotesk-Variable.ttf') format('truetype-variations'),
       url('ClashGrotesk-Variable.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
}

:root {
  --measure: 34rem;        /* comfortable reading column */
  --page: 60rem;           /* the shell's outer width */
  --gap: 1.5rem;
  --step: clamp(1rem, .6rem + 1.4vw, 1.5rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.0625rem; letter-spacing: -.005em; }

p { margin: 0; }
p + p { margin-top: .75em; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent-hover); }

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

/* Identifiers — hostnames, support ids. The ONLY mono on the surface. */
.ident { font-family: var(--mono); font-size: .8125em; letter-spacing: -.01em; }

.muted { color: var(--muted); }
.small { font-size: .875rem; }
.measure { max-width: var(--measure); }

/* ── Masthead ─────────────────────────────────────────────────────────── */

.masthead { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 55%, transparent); }

.masthead__inner,
.footer__inner,
.main {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--step);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
  text-decoration: none;
}
.wordmark .mark { width: 1.25rem; height: 1.25rem; color: var(--accent); }

.account { display: flex; align-items: center; gap: .875rem; font-size: .875rem; }
.account__email { color: var(--muted); }
.account form { margin: 0; }

.linkish {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--accent); text-decoration: underline;
  text-underline-offset: .18em;
}
.linkish:hover { color: var(--accent-hover); }

/* ── Page rhythm ──────────────────────────────────────────────────────── */

.main {
  flex: 1;
  padding-block: clamp(2rem, 1rem + 4vw, 4rem) 4rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.page-head { display: flex; flex-direction: column; gap: .625rem; }
.page-head p { color: var(--muted); max-width: var(--measure); font-size: 1.0625rem; }
.page-head--centred { align-items: center; text-align: center; }

.eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Narrow, centred column — sign-in and other single-purpose pages. `margin: auto` centres it in
   BOTH axes inside the flex column, so a one-form page sits in the middle of the viewport rather
   than clinging to the masthead above a screen of empty paper. */
.slab {
  width: 100%;
  max-width: 27rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.slab--centred { text-align: center; align-items: center; }
.slab--centred .field { text-align: left; width: 100%; }

/* ── Cards ────────────────────────────────────────────────────────────── */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--el-2);
  padding: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.card--quiet { box-shadow: none; background: transparent; border-style: dashed; }

.stack { display: flex; flex-direction: column; gap: 1.125rem; }
.stack--tight { gap: .625rem; }
.row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  --btn-bg: var(--panel);
  --btn-fg: var(--text);
  --btn-line: var(--line-bright);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.25rem;
  border: 1px solid var(--btn-line);
  border-radius: var(--r-1);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.btn:hover { border-color: var(--muted); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  --btn-line: var(--accent);
  box-shadow: var(--el-2);
}
.btn--primary:hover { --btn-bg: var(--accent-hover); --btn-line: var(--accent-hover); color: #fff; }

.btn--lg { padding: .9375rem 1.75rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.btn-note { color: var(--muted); font-size: .875rem; }

/* ── Fields ───────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: .375rem; }
.field > label { font-size: .875rem; font-weight: 500; }
.field__hint { color: var(--muted); font-size: .8125rem; }

.input {
  width: 100%;
  padding: .6875rem .8125rem;
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line-bright);
  border-radius: var(--r-1);
}
.input:focus-visible { outline-offset: 0; border-color: var(--accent); }
.input::placeholder { color: var(--faint); }

/* Optional extras that shouldn't compete with the primary action. */
.tuck > summary {
  cursor: pointer;
  font-size: .875rem;
  color: var(--accent);
  list-style: none;
  width: fit-content;
}
.tuck > summary::-webkit-details-marker { display: none; }
.tuck > summary::before { content: '+ '; }
.tuck[open] > summary::before { content: '– '; }
.tuck[open] > summary { margin-bottom: .625rem; }

/* ── Plan / price ─────────────────────────────────────────────────────── */

.price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.price__amount {
  font-family: var(--display);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1;
}
.price__unit { color: var(--muted); font-size: .9375rem; }

.plan-name {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -.01em;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .1875rem .625rem;
  border-radius: var(--r-pill);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
  background: var(--accent-wash);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.badge--ok { background: color-mix(in srgb, var(--ok) 10%, var(--panel)); color: var(--ok-dim); border-color: color-mix(in srgb, var(--ok) 26%, transparent); }
.badge--warn { background: color-mix(in srgb, var(--warn) 10%, var(--panel)); color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn) 26%, transparent); }
.badge--bad { background: color-mix(in srgb, var(--bad) 9%, var(--panel)); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 26%, transparent); }
.badge--info { background: color-mix(in srgb, var(--info-bright) 9%, var(--panel)); color: var(--info); border-color: color-mix(in srgb, var(--info-bright) 24%, transparent); }

/* ── What's included ──────────────────────────────────────────────────── */

.includes { display: grid; gap: .625rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 0; padding: 0; list-style: none; }
.includes li { display: flex; gap: .5rem; align-items: baseline; font-size: .9375rem; }
.includes li::before {
  content: '';
  flex: none;
  width: .375rem; height: .375rem;
  border-radius: var(--r-dot);
  background: var(--accent);
  transform: translateY(-.15em);
}
.includes b { font-weight: 600; font-variant-numeric: tabular-nums; }
.includes .includes__note { color: var(--muted); }

/* ── Seat stepper + running total ─────────────────────────────────────── */

.buybar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line-bright); border-radius: var(--r-1); background: var(--panel); overflow: hidden; width: fit-content; }
.stepper button {
  border: 0; background: none; cursor: pointer;
  padding: 0 .875rem;
  font-size: 1.125rem; line-height: 1; color: var(--muted);
  font-family: var(--sans);
}
.stepper button:hover { background: var(--inset); color: var(--text); }
.stepper input {
  width: 3.5rem; border: 0; background: none;
  text-align: center; font: inherit; font-variant-numeric: tabular-nums;
  padding: .625rem .25rem; color: var(--text);
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.total { text-align: right; }
.total__amount { font-family: var(--display); font-size: 1.75rem; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.total__unit { color: var(--muted); font-size: .875rem; }

/* ── Provisioning steps ───────────────────────────────────────────────── */

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.steps li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: .875rem;
  padding-bottom: 1.25rem;
  position: relative;
}
.steps li:last-child { padding-bottom: 0; }
/* the connector, drawn from each dot down to the next */
.steps li:not(:last-child)::before {
  content: '';
  position: absolute;
  left: .6875rem;
  top: 1.5rem;
  bottom: .25rem;
  width: 1px;
  background: var(--line-bright);
}

.steps__dot {
  width: 1.5rem; height: 1.5rem;
  border-radius: var(--r-dot);
  border: 1px solid var(--line-bright);
  background: var(--panel);
  display: grid; place-items: center;
  font-size: .6875rem; color: var(--faint);
  position: relative; z-index: 1;
}
.steps__label { font-weight: 500; }
.steps__detail { color: var(--muted); font-size: .875rem; }

.steps li[data-state='done'] .steps__dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.steps li[data-state='done'] .steps__label { color: var(--muted); font-weight: 400; }
.steps li[data-state='now'] .steps__dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.steps li[data-state='now'] .steps__label { color: var(--text); }
.steps li[data-state='todo'] .steps__label { color: var(--faint); }
.steps li[data-state='bad'] .steps__dot { background: var(--bad); border-color: var(--bad); color: #fff; }

.pulse { display: inline-block; width: .5rem; height: .5rem; border-radius: var(--r-dot); background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; opacity: .8; } }

/* ── The address — the hero of a live gateway ─────────────────────────── */

.address { display: flex; flex-direction: column; gap: .5rem; }
.address__link {
  font-family: var(--mono);
  font-size: clamp(1.0625rem, .9rem + .8vw, 1.4rem);
  letter-spacing: -.02em;
  word-break: break-all;
  text-decoration: none;
  color: var(--text);
  border-bottom: 2px solid var(--accent-wash);
  width: fit-content;
  padding-bottom: .125rem;
}
.address__link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Notices ──────────────────────────────────────────────────────────── */

/* Block, not flex: a notice's content is a SENTENCE, and flex turns every inline element inside it
   (a <strong>, a link) into a column of its own. */
.notice {
  padding: .875rem 1rem;
  border-radius: var(--r-1);
  border: 1px solid color-mix(in srgb, var(--info-bright) 24%, transparent);
  background: color-mix(in srgb, var(--info-bright) 7%, var(--panel));
  color: var(--info);
  font-size: .9375rem;
}
.notice--warn { border-color: color-mix(in srgb, var(--warn) 28%, transparent); background: color-mix(in srgb, var(--warn) 9%, var(--panel)); color: var(--warn-ink); }
.notice--bad { border-color: color-mix(in srgb, var(--bad) 28%, transparent); background: color-mix(in srgb, var(--bad) 8%, var(--panel)); color: var(--bad); }
.notice--ok { border-color: color-mix(in srgb, var(--ok) 28%, transparent); background: color-mix(in srgb, var(--ok) 9%, var(--panel)); color: var(--ok-dim); }
.notice strong { font-weight: 600; }

/* ── Definition rows (billing facts) ──────────────────────────────────── */

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.facts dt { font-size: .8125rem; color: var(--muted); margin-bottom: .1875rem; }
.facts dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ── Footer ───────────────────────────────────────────────────────────── */

.footer { border-top: 1px solid var(--line); padding-block: 1.5rem 2.5rem; }
.footer__inner { display: flex; flex-direction: column; gap: 1rem; }
.footer__legal { color: var(--faint); font-size: .8125rem; }

.support { font-size: .8125rem; }
.support > summary { cursor: pointer; color: var(--muted); width: fit-content; }
.support__list { display: flex; flex-wrap: wrap; gap: .875rem 2rem; margin: .875rem 0 0; }
.support__list dt { color: var(--faint); font-size: .75rem; }
.support__list dd { margin: 0; color: var(--muted); }
.support__hint { color: var(--faint); margin-top: .75rem; }