/* Aurith — aurith.ca
   The same laboratory notebook the dashboard is drawn on, opened at a different page.

   Navy owns the field. Gold is the only accent. Nothing is rounded. Rules separate;
   boxes do not. Every colour token below is copied verbatim from web/css/aurith.css so
   the site and the instrument cannot drift apart. */

@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/publicsans.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Sometype Mono';
  src: url('../fonts/sometype.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --void: #060E1C;
  --page: #0A1830;
  --page-2: #0C1D3A;

  --rule: rgba(184, 205, 235, 0.085);
  --rule-2: rgba(184, 205, 235, 0.17);
  --rule-3: rgba(184, 205, 235, 0.30);

  --gold: #D9A93C;
  --gold-lit: #F0C868;
  --gold-ghost: rgba(217, 169, 60, 0.14);
  --gold-rule: rgba(217, 169, 60, 0.42);

  --ink: #E9EFF8;
  --ink-2: #B7C5D8;
  --ink-3: #94A6C0;

  --sans: 'Public Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Sometype Mono', ui-monospace, 'Cascadia Mono', monospace;

  --lamp: rgba(128, 168, 224, 0.075);

  /* The ruled margin of the notebook. Decoration here, not navigation: the dashboard
     puts its index tabs in this rail and a marketing page has no views to index. */
  --rail: 88px;
  --gutter: clamp(20px, 3.4vw, 52px);
  --sheet-max: 1180px;
  --step: clamp(56px, 7vw, 104px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--page);
  background-image:
    radial-gradient(120% 70% at 50% -12%, var(--lamp), transparent 62%),
    repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px 28px);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* The browser's own surfaces belong to the design too. */
::selection { background: var(--gold); color: var(--void); }
:focus-visible { outline: 2px solid var(--gold-lit); outline-offset: 3px; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--rule-2); border: 3px solid var(--void); }
::-webkit-scrollbar-thumb:hover { background: var(--rule-3); }
* { scrollbar-color: var(--rule-2) var(--void); scrollbar-width: thin; }

a { color: inherit; text-decoration-color: var(--gold-rule); text-underline-offset: 4px; }
a:hover { text-decoration-color: var(--gold); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 90;
  background: var(--gold); color: var(--void); padding: 12px 18px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase;
}
.skip:focus { left: 0; }

/* ─── The type voice ────────────────────────────────────────────────── */

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

/* The printed label on a lab form. Copied from the dashboard's .field-name. */
.label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.label-gold { color: var(--gold); }

.plain {
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 68ch;
}
.plain + .plain { margin-top: 15px; }
.plain strong { color: var(--ink); font-weight: 600; }
.lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }

/* ─── The sheet ─────────────────────────────────────────────────────── */

.sheet {
  max-width: var(--sheet-max);
  margin: 0 auto;
  padding-left: var(--rail);
  padding-right: var(--gutter);
  position: relative;
}
/* The ruled margin itself — one gold hairline down the page, as on the instrument. */
.sheet::before {
  content: '';
  position: fixed;
  top: 0; bottom: 0;
  left: max(var(--gutter), calc(50vw - (var(--sheet-max) / 2) + var(--rail) - 28px));
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--gold-rule) 12%, var(--gold-rule) 88%, transparent);
  pointer-events: none;
  z-index: 1;
}

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

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(to bottom, var(--void) 62%, rgba(6, 14, 28, 0.86));
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--rule);
}
.masthead-in {
  max-width: var(--sheet-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  min-height: 62px;
}
.mark { display: flex; align-items: center; gap: 11px; color: var(--gold); text-decoration: none; }
.mark svg { width: 26px; height: 26px; display: block; }
.mark-word {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--ink);
}

.masthead-draw {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--gold-rule);
  transform-origin: left center;
  pointer-events: none;
  /* `forwards`, so the rule ends drawn whatever the browser did with the frames between.
     This was a GSAP tween and froze at six-tenths of the way across in a background tab. */
  animation: draw-rule 950ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes draw-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .masthead-draw { animation: none; transform: scaleX(1); }
}

.index { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
/* The gummed index tab, laid on its side. Same anatomy as the dashboard's rail tab. */
.tab {
  position: relative;
  display: block;
  padding: 20px 13px 19px;
  color: var(--ink-3);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: color 140ms ease-out, background-color 140ms ease-out;
}
.tab:hover { color: var(--ink-2); background: rgba(184, 205, 235, 0.045); }
.tab[aria-current='page'] { color: var(--gold); background: var(--gold-ghost); }
.tab[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 6px; right: 6px; bottom: -1px;
  height: 3px;
  background: var(--gold);
  transform-origin: left center;
}

/* ─── Plates — the ruled sections of the sheet ──────────────────────── */

.plate { padding: var(--step) 0; border-top: 1px solid var(--rule); position: relative; }
.plate:first-of-type { border-top: none; }
/* The opening already ends on a full step. Another one below it is dead sheet rather than
   separation, and separation is the thing the space is meant to be doing. */
.opening + .plate { padding-top: calc(var(--step) * 0.5); }
.plate-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 30px; }
.plate-head .label { flex: none; }
.plate-head::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

h2.plate-title {
  font-size: clamp(23px, 2.5vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
  margin-bottom: 14px;
}
h3.sub-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 8px;
}

/* ─── The masthead claim ────────────────────────────────────────────── */

.opening { padding: clamp(52px, 8vw, 104px) 0 var(--step); }

h1.claim {
  font-size: clamp(38px, 7.2vw, 84px);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.038em;
  text-wrap: balance;
  max-width: 15ch;
}
h1.claim em { font-style: normal; color: var(--gold); }

.opening .lead { margin-top: 26px; }

/* A measured figure, quoted the way the record quotes one. */
.measure {
  margin-top: clamp(34px, 4.5vw, 54px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 26px;
  padding-top: 22px;
  border-top: 1px solid var(--gold-rule);
  max-width: 640px;
}
.measure-figure {
  font-family: var(--mono);
  font-size: clamp(38px, 5.2vw, 58px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gold);
}
.measure-figure .unit { font-size: 0.36em; letter-spacing: 0.06em; color: var(--ink-3); margin-left: 3px; }
.measure-of { flex: 1 1 250px; }
.measure-of .plain { font-size: 13.5px; max-width: 46ch; }

/* ─── The specimen: the product, shown rather than described ────────── */

.specimen { border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.specimen-bar {
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}
.langs { display: flex; gap: 1px; flex-wrap: wrap; margin-left: auto; }
.lang {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 7px 11px;
  cursor: pointer;
  transition: color 140ms ease-out, background-color 140ms ease-out;
}
.lang:hover { color: var(--ink-2); background: rgba(184, 205, 235, 0.05); }
.lang[aria-pressed='true'] { color: var(--gold); background: var(--gold-ghost); border-color: var(--gold-rule); }

.specimen-body { padding: 26px 0 24px; }
.specimen-headline {
  font-size: clamp(19px, 2.1vw, 25px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
  text-wrap: balance;
  margin-bottom: 13px;
  max-width: 34ch;
}
.specimen-text { font-size: 15px; line-height: 1.62; color: var(--ink-2); max-width: 66ch; }
.specimen-text + .specimen-text { margin-top: 13px; }
[lang='pa'] .specimen-headline, [lang='pa'] .specimen-text,
.specimen-headline[lang='pa'], .specimen-text[lang='pa'] { line-height: 1.7; }

.specimen-credit {
  margin-top: 22px;
  padding-top: 13px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  align-items: baseline;
}
.specimen-credit .label { color: var(--ink-3); }
.specimen-credit .value { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }

/* The one authored moment, taken from the instrument: ink laid onto the page. */
@keyframes ink-in {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.written > * { animation: ink-in 560ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.written > *:nth-child(2) { animation-delay: 70ms; }
.written > *:nth-child(3) { animation-delay: 140ms; }
.written > *:nth-child(4) { animation-delay: 200ms; }

/* ─── The pipeline, as a ruled sequence ─────────────────────────────── */

.sequence { display: grid; gap: 0; margin-top: 6px; }
.stage {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 8px 22px;
  padding: 19px 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.stage:last-child { border-bottom: 1px solid var(--rule); }
.stage-when { font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.02em; }
.stage[data-measured] .stage-when { color: var(--gold); }
.stage-what { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.stage-note { font-size: 14px; color: var(--ink-2); margin-top: 4px; max-width: 60ch; line-height: 1.55; }

/* ─── Two columns of plain statement ────────────────────────────────── */

.columns { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* A ruled list — the shape the record uses everywhere. */
.ruled > li {
  padding: 15px 0;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 4px;
}
.ruled > li:last-child { border-bottom: 1px solid var(--rule); }
.ruled .item-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.004em; }
.ruled .item-note { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; max-width: 58ch; }
.ruled .item-mono { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }

/* The exclusions are set in full record ink, never dimmed: what is refused is
   as much of the offer as what is given. Same rule as the dashboard's refusals. */
.ruled[data-never] .item-name { color: var(--ink); }
.ruled[data-never] > li { border-left: 1px solid var(--gold-rule); padding-left: 15px; }

/* ─── The index of sources ──────────────────────────────────────────── */

.filter-bar { display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; padding-bottom: 16px; }
.count { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-left: auto; }

.source-row {
  display: grid;
  grid-template-columns: minmax(140px, 190px) 1fr minmax(84px, auto);
  gap: 6px 22px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.source-row:last-child { border-bottom: 1px solid var(--rule); }
.source-name { font-family: var(--mono); font-size: 13px; color: var(--ink); letter-spacing: 0.01em; }
.source-why { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.source-cadence { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); text-align: right; white-space: nowrap; }

/* ─── Code, for the docs ────────────────────────────────────────────── */

.code {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--void);
  border: 1px solid var(--rule-2);
  padding: 18px 20px;
  overflow-x: auto;
  margin: 0;
  tab-size: 2;
}
.code b { color: var(--gold); font-weight: 500; }
.code i { color: var(--ink-3); font-style: normal; }
.code-cap {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); padding: 10px 0 9px; border-top: 1px solid var(--rule);
}

.field-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.field-table th, .field-table td { text-align: left; padding: 12px 16px 12px 0; border-top: 1px solid var(--rule); vertical-align: baseline; }
.field-table th {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  border-top: none; padding-top: 0;
}
.field-table tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.field-table code { font-family: var(--mono); font-size: 12.5px; color: var(--ink); }
.field-table .t { font-family: var(--mono); font-size: 12px; color: var(--gold); white-space: nowrap; }
.field-table td:last-child { color: var(--ink-2); padding-right: 0; }
.table-scroll { overflow-x: auto; }

.button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--void);
  background: var(--gold);
  border: 1px solid var(--gold);
  padding: 14px 22px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out;
}
.button:hover { background: var(--gold-lit); border-color: var(--gold-lit); }
.button:disabled { opacity: 0.5; cursor: not-allowed; }
.button-quiet { color: var(--gold); background: transparent; }
.button-quiet:hover { color: var(--void); background: var(--gold); }

.note { font-size: 13px; color: var(--ink-3); line-height: 1.5; max-width: 52ch; }

/* ─── Status ────────────────────────────────────────────────────────── */

.state-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 20px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.state-row:last-child { border-bottom: 1px solid var(--rule); }
.state-name { font-size: 14.5px; font-weight: 600; }
.state-note { font-size: 13.5px; color: var(--ink-2); grid-column: 1; max-width: 60ch; }
/* No red and no green anywhere: money owns those two, and this is not money. */
.state-mark {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--rule-2); padding: 5px 9px; color: var(--ink-3);
  white-space: nowrap;
}
.state-mark[data-on] { color: var(--gold); border-color: var(--gold-rule); }

/* ─── Foot ──────────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--gold-rule);
  margin-top: var(--step);
  padding: 34px 0 46px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: flex-start;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot a {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none;
}
.foot a:hover { color: var(--gold); }
.foot-say { margin-left: auto; text-align: right; }
.foot-say .label { display: block; margin-bottom: 5px; }
.foot-say .plain { font-size: 12.5px; max-width: 34ch; }

/* ─── Narrow ────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  :root { --rail: 0px; }
  .sheet { padding-left: var(--gutter); }
  .sheet::before { display: none; }
  .masthead-in { min-height: 54px; flex-wrap: wrap; gap: 0 14px; }
  /* The index scrolls sideways rather than wrapping to two rows. `min-width: 0` is what
     lets it: without it the flex child claims its full intrinsic width and pushes the
     whole document wider instead of scrolling inside itself. The mask on the right edge
     is the only thing that says there is more of it — a row that is quietly cut off looks
     like a row that ends. */
  .index {
    width: 100%; margin-left: 0; min-width: 0;
    overflow-x: auto; flex-wrap: nowrap;
    border-top: 1px solid var(--rule);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  }
  .index::-webkit-scrollbar { display: none; }
  .tab { flex: none; }
  .tab { padding: 14px 11px 13px; }
  .stage { grid-template-columns: 1fr; gap: 3px; }
  .source-row { grid-template-columns: 1fr; gap: 3px; }
  .source-cadence { text-align: left; }
  .foot-say { margin-left: 0; text-align: left; }
}

/* The price table on a phone. Five columns in 350px squeezed "What it reads" to one word a
   line, so under 560px each key is its own ruled block: the name and the labelled numbers on
   one line, what it reads beneath. Fixed number columns keep both keys on one grid. Scoped to
   #pricing; the docs tables still scroll. */
@media (max-width: 560px) {
  #pricing .field-table, #pricing .field-table tbody { display: block; }
  #pricing .field-table thead { display: none; }
  #pricing .field-table tr {
    display: grid; grid-template-columns: 1fr 76px 64px 52px; column-gap: 18px; row-gap: 10px;
    align-items: end; padding: 16px 0; border-top: 1px solid var(--rule);
  }
  #pricing .field-table tbody tr:last-child { border-bottom: 1px solid var(--rule); }
  #pricing .field-table td { border: 0; padding: 0; }
  #pricing .field-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  #pricing .field-table td.t::before {
    display: block; margin-bottom: 4px;
    font-family: var(--mono); font-size: 10.5px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  }
  #pricing .field-table td:nth-child(3)::before { content: "Rate"; }
  #pricing .field-table td:nth-child(4)::before { content: "Monthly"; }
  #pricing .field-table td:nth-child(5)::before { content: "Yearly"; }
}

@media (prefers-reduced-motion: reduce) {
  .written > * { animation: none !important; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ═══ Job W2 — pricing builder, account pages, sample ═══════════════════
   The same notebook, with forms ruled like the record and controls that never round.
   Everything here is additive: no rule above is touched. */

/* ─── Forms ──────────────────────────────────────────────────────────── */

input[type='email'], input[type='password'], input[type='text'],
input[type='number'], input[type='time'], select, textarea, .input {
  appearance: none;
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--void);
  border: 1px solid var(--rule-2);
  border-radius: 0;
  padding: 12px 13px;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus { border-color: var(--gold-rule); }
input:disabled, select:disabled, textarea:disabled, textarea[disabled] { opacity: 0.5; cursor: not-allowed; }

input[type='checkbox'], input[type='radio'] { accent-color: var(--gold); width: 17px; height: 17px; }

.field { display: grid; gap: 7px; margin-bottom: 18px; max-width: 430px; }
.field > .label { display: block; }

.check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-2); cursor: pointer; }
.check input { flex: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }
.button-sm { padding: 9px 14px; font-size: 10.5px; }
.button-danger { color: var(--gold); background: transparent; border-color: var(--rule-2); }
.button-danger:hover { color: var(--void); background: var(--gold); border-color: var(--gold); }

.link-btn {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--gold-rule); text-underline-offset: 4px;
}
.link-btn:hover { text-decoration-color: var(--gold); }

.err { color: var(--gold-lit); font-size: 13.5px; line-height: 1.5; margin-top: 14px; max-width: 60ch; }
.ok { color: var(--ink); font-size: 13.5px; line-height: 1.5; margin-top: 14px; max-width: 60ch; }
.muted { color: var(--ink-3); }

.notice-plain {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-rule);
  background: var(--gold-ghost);
  padding: 14px 16px;
  margin: 0 0 28px;
}

/* ─── The builder: Or build your own ─────────────────────────────────── */

.build-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.build-table th, .build-table td { text-align: left; padding: 10px 14px 10px 0; border-top: 1px solid var(--rule); vertical-align: top; }
.build-table thead th {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  border-top: none; padding-top: 0; white-space: nowrap;
}
.build-table tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.build-cat { font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; }
.build-cell { display: inline-flex; align-items: baseline; gap: 8px; cursor: pointer; color: var(--ink-2); }
.build-cell input { flex: none; }
.build-cell .price { font-family: var(--mono); font-size: 12px; color: var(--gold); white-space: nowrap; }
.build-cell.off { opacity: 0.45; cursor: not-allowed; }
.build-cell.off .price { color: var(--ink-3); }
.coming { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }

.build-total {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--gold-rule);
}
.build-total .amount { font-family: var(--mono); font-size: clamp(26px, 4vw, 36px); font-weight: 500; color: var(--gold); letter-spacing: -0.02em; }
.build-total .per { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.build-full { margin-top: 16px; font-size: 14px; color: var(--ink-2); max-width: 66ch; }
.build-full[data-cheaper] { color: var(--ink); border-left: 2px solid var(--gold); padding-left: 14px; }
.build-full[data-cheaper] strong { color: var(--gold); }

/* ─── The account: one view at a time ────────────────────────────────── */

.acct { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.acct-nav { position: sticky; top: 84px; display: grid; gap: 1px; }
.acct-tab {
  display: block; padding: 11px 13px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none;
  border-left: 1px solid var(--rule);
  transition: color 140ms ease-out, background-color 140ms ease-out;
}
.acct-tab:hover { color: var(--ink-2); background: rgba(184, 205, 235, 0.045); }
.acct-tab[aria-current='true'] { color: var(--gold); border-left-color: var(--gold); background: var(--gold-ghost); }
.acct-body { min-width: 0; }
.acct-view[hidden] { display: none; }
.acct-view-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; }
.acct-view-head h2 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; letter-spacing: -0.02em; }
.acct-view-head .label { flex: none; }
.acct-view-head::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

@media (max-width: 860px) {
  .acct { grid-template-columns: 1fr; gap: 22px; }
  .acct-nav {
    position: static; display: flex; overflow-x: auto; gap: 1px;
    border-bottom: 1px solid var(--rule); scrollbar-width: none;
  }
  .acct-nav::-webkit-scrollbar { display: none; }
  .acct-tab { flex: none; border-left: 0; border-bottom: 2px solid transparent; padding: 12px 13px; }
  .acct-tab[aria-current='true'] { border-bottom-color: var(--gold); border-left-color: transparent; }
}

/* ─── Feed ───────────────────────────────────────────────────────────── */

.feed-item { border-top: 1px solid var(--rule); }
.feed-item:last-of-type { border-bottom: 1px solid var(--rule); }
.feed-item > summary { list-style: none; cursor: pointer; padding: 17px 0; display: grid; gap: 5px; }
.feed-item > summary::-webkit-details-marker { display: none; }
.feed-head { font-size: 15.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); }
.feed-item[open] .feed-head { color: var(--gold); }
.feed-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; }
.feed-body { font-size: 14.5px; line-height: 1.62; color: var(--ink-2); padding: 0 0 18px; max-width: 68ch; }
.feed-body p + p { margin-top: 12px; }

/* ─── Keys ───────────────────────────────────────────────────────────── */

.key-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--rule); }
.key-row:last-of-type { border-bottom: 1px solid var(--rule); }
.key-label { font-size: 14.5px; font-weight: 600; }
.key-facts { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
.key-actions { display: flex; gap: 12px; align-items: center; }
.key-actions .button { white-space: nowrap; }
.key-secret {
  font-family: var(--mono); font-size: 13px; color: var(--gold);
  background: var(--void); border: 1px solid var(--gold-rule);
  padding: 14px 16px; margin: 14px 0 6px;
  word-break: break-all; line-height: 1.5;
}
.key-warn { font-size: 13px; color: var(--ink-2); margin-top: 8px; max-width: 60ch; }

/* ─── Settings groups ────────────────────────────────────────────────── */

.ent-group { padding: 16px 0; border-top: 1px solid var(--rule); }
.ent-group:last-of-type { border-bottom: 1px solid var(--rule); }
.ent-title { display: block; margin-bottom: 12px; }
.ent-list { display: flex; flex-wrap: wrap; gap: 9px 24px; }
.times { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: end; }
.times .field { margin-bottom: 0; max-width: 150px; }

/* ─── Plan & billing ─────────────────────────────────────────────────── */

.plan-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--rule); }
.plan-row:last-of-type { border-bottom: 1px solid var(--rule); }
.plan-name { font-size: 14.5px; font-weight: 600; }
.plan-note { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.plan-when { font-family: var(--mono); font-size: 11.5px; color: var(--gold); white-space: nowrap; }

/* ─── The sample page ────────────────────────────────────────────────── */

.sample-tabs { display: flex; flex-wrap: wrap; gap: 1px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.sample-tab {
  appearance: none; background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  padding: 14px 13px; cursor: pointer;
  transition: color 140ms ease-out;
}
.sample-tab:hover { color: var(--ink-2); }
.sample-tab[aria-selected='true'] { color: var(--gold); border-bottom-color: var(--gold); }
.sample-item { padding: 20px 0; border-top: 1px solid var(--rule); }
.sample-item:last-child { border-bottom: 1px solid var(--rule); }
.sample-head { font-size: clamp(17px, 2vw, 21px); font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.sample-summary { font-size: 14.5px; line-height: 1.62; color: var(--ink-2); margin-top: 9px; max-width: 66ch; }
.sample-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.stage-empty { font-size: 14.5px; color: var(--ink-3); padding: 24px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }