/* Subtick - the public pages: the home page and sign-in.
 *
 * ---------------------------------------------------------------------------
 * WHY THIS FILE EXISTS, AND WHY IT IS NOT app.css
 * ---------------------------------------------------------------------------
 * The control panel is a tool somebody sits in front of for nine hours. It is warm
 * paper, one deep teal, and nothing louder than the overlay being built inside it,
 * and it should stay exactly that.
 *
 * The front door is a different job. It has about four seconds to say what this is,
 * and what it is is broadcast equipment: a clock that must not lie, wired to a
 * stream. Wearing the panel's quiet admin palette on the front door made the first
 * impression of the product "a settings screen" - which is the note that started
 * this pass.
 *
 * So the public pages get their own direction, loaded only by /, /signin and the
 * dev outbox. app.css still ships underneath for the components - buttons, inputs,
 * cards, the focus ring, the toast strip - and this file re-points the tokens those
 * components read. Nothing is restyled twice; the same button is a different button
 * because the palette under it changed.
 *
 * ---------------------------------------------------------------------------
 * THE DIRECTION: A RACK IN A STUDIO, PAINTED MXNGO
 * ---------------------------------------------------------------------------
 * The layout, the structure and the type below are the critic-picked pass and are
 * unchanged. What changed is the paint: the front door now wears the MXNGO brand,
 * sampled off public/mxngo-logo.png rather than invented. The logo is a mango -
 * red shoulder, orange cheek, gold wordmark, olive leaf, dark plum-brown outline -
 * so the page is built out of a mango rather than out of concrete and amber.
 *
 * The eight colours the logo actually contains, and what each one is for here:
 *
 *   #cf4838  mango red      the error hue, and nothing decorative
 *   #d0761e  mango orange   THE accent: the fill under the primary call to action
 *   #dda848  gold           the accent on the dark wall, where orange goes muddy
 *   #f1da9e  butter         the raised steps of the light wall
 *   #f9f2e7  cream          the light wall itself, and the ink on the dark one
 *   #332930  plum-brown     the ink on the light wall, and the dark wall itself
 *   #a4662f  shadow brown   hairlines and the warm cast under every shadow
 *   #a0a234  olive leaf     the ok hue (the logo's own leaf, sampled: it reads
 *                           olive rather than the leaf-green a mango implies)
 *
 * Two materials, and the page is built by alternating them.
 *
 *   The wall   the room the gear is in. Mango cream in light, deep plum-brown in
 *              dark. This is the only thing the colour scheme changes, which is
 *              the point: a studio is the same studio with the lights off.
 *   The rack   dark plum panels bolted to it. The hero stage, the theme rack and
 *              the rundown table are rack panels, and they are the same slab in
 *              both schemes - because that is what the overlay itself is, and
 *              six of the seven overlay themes are light-on-transparent and have
 *              to sit on something dark to be themselves.
 *
 * One accent: mango. Orange on the cream wall, gold on the plum one, used for time
 * being added and for nothing else. It is never a gradient and never glows.
 *
 * Every bright brand hue is a FILL, a large display colour or a decoration. None of
 * them is body text, because none of them can be: #d0761e is 3.00:1 on cream and
 * #dda848 is 1.93:1, so as text they are stains. Each one therefore has a darkened
 * sibling for the text job - that split is what `--signal-fill` vs `--signal-ink`
 * is, and test/home-theme.test.js fails if it ever collapses back into one token.
 *
 * Three faces, each with one job:
 *   Saira Condensed 700/900, uppercase, tight   headlines and panel legends
 *   Chivo Mono 400/700                          every number, every label, the clock
 *   Inter                                       prose, inherited from app.css
 *
 * What this direction deliberately is not: no gradient blobs, no glassmorphism, no
 * glow, no emoji standing in for icons, no three-feature card grid, no centred dark
 * card with a progress bar, and nothing on the page that a reader cannot check from
 * the page itself.
 */

@font-face { font-family: "Saira Condensed"; font-weight: 600 749; font-display: swap; src: url(/fonts/sairacond-700.woff2) format("woff2"); }
@font-face { font-family: "Saira Condensed"; font-weight: 750 900; font-display: swap; src: url(/fonts/sairacond-900.woff2) format("woff2"); }
@font-face { font-family: "Chivo Mono"; font-weight: 100 500; font-display: swap; src: url(/fonts/chivomono-400.woff2) format("woff2"); }
@font-face { font-family: "Chivo Mono"; font-weight: 501 900; font-display: swap; src: url(/fonts/chivomono-700.woff2) format("woff2"); }

/* ---------------------------------------------------------------- the wall
   Light: mango cream, the #f9f2e7 off the lightest part of the logo. Deliberately
   not app.css's warm bone (#f5f4f1) - the two pages are a step apart in hue as well
   as in everything else, so landing on the panel after the home page reads as
   walking from the studio into the gallery. The steps up off the wall run cream ->
   butter (#f1da9e), so a raised surface is a riper part of the same fruit rather
   than a grey. */
:root {
  --shell: #f9f2e7;
  --surface: #fffdf8;
  --surface-head: #f6ecdb;
  --raise: #f2e3cd;
  --raise-2: #e9d6b7;
  --line: #e2cfb2;
  /* The logo has no mid-tone, so the hairline that has to be *findable* (3:1, WCAG
     1.4.11) is the plum-brown ink lifted until it clears cream - a desaturated
     plum, not a grey, so the form borders stay in the family. */
  --line-2: #8a7378;
  --line-hover: #4a3b44;
  --ink: #332930;
  --ink-dim: #574651;
  --ink-faint: #6a5661;

  /* The accent in two forms, because one mango cannot do both jobs on cream.
     `--signal-fill` draws it: the rule over a step, the underline on a table head,
     the tally dot, the focus ring on a theme strip. `--signal-ink` is the accent
     as text: the rundown figures, the step numbers, the live theme name.

     On this wall both are stepped down the hue until they clear what they have to
     clear - 3:1 for a rule, which WCAG asks of non-text UI that carries meaning,
     and 4.5:1 for text. The logo's own mango orange #d0761e is 3.00:1 on cream,
     which is exactly a rule and nowhere near a word, and the gold #dda848 is
     1.93:1, which is a stain. On the plum wall and on a rack panel the gold clears
     everything and both tokens go back to being one colour.

     The two are stepped down by different amounts because they are drawn on
     different things. `--signal-fill` only ever lands on the wall or on a card, so
     it clears 3:1 there (3.22 and 3.52) and stays recognisably the logo's orange.
     `--signal-ink` is held to 4.5:1 against all five light surfaces including the
     butter step at #e9d6b7, where it is 4.58 - that step is the tightest backdrop
     on the page, and an accent figure that is legible on cream but smears on a
     raised row is the bug that is worth spending a shade on. */
  --signal-fill: #cb7019;
  --signal-ink: #8b4f14;
  --signal-on-fill: #241a22;

  /* The primary call to action is the mango cheek itself, carrying plum-brown ink
     rather than white: white on #cb7019 is 3.4:1, the dark plum is 5.2:1, and the
     orange gets to stay the bright orange off the logo instead of being darkened
     into a brick to carry a white label. `--brand-hi` therefore goes *up* on hover
     - a dark-ink button lights up rather than dimming. */
  --brand: #cb7019;
  --brand-hi: #de8933;
  --brand-ink: #241a22;

  /* The leaf and the red shoulder, each darkened until it is readable as text. */
  --ok: #60772d;
  --warn: #89682d;
  --bad: #c14334;
  --ok-ink: #ffffff;
  --warn-ink: #6b4f0d;
  --bad-ink: #9e2419;
  --ok-soft: rgba(96, 119, 45, 0.1);
  --ok-line: rgba(96, 119, 45, 0.4);
  --warn-soft: rgba(137, 104, 45, 0.1);
  --warn-line: rgba(137, 104, 45, 0.4);
  --bad-soft: rgba(193, 67, 52, 0.09);
  --bad-line: rgba(193, 67, 52, 0.38);

  --input-bg: #fffdf8;
  --input-well: inset 0 1px 2px rgba(51, 41, 48, 0.07);
  --focus-ring: rgba(139, 79, 20, 0.32);
  --knob-on: #fffdf8;
  --scrim: rgba(28, 21, 26, 0.5);
  /* Warm-tinted and layered: the shadow under a card is the logo's shadow brown
     (#a4662f) pulled most of the way to the plum ink, so nothing on this page casts
     a grey shadow onto a cream wall. */
  --shadow-1: 0 1px 1px rgba(68, 46, 33, 0.06), 0 2px 6px -3px rgba(68, 46, 33, 0.12);
  --shadow-2: 0 1px 2px rgba(68, 46, 33, 0.08), 0 18px 44px -14px rgba(51, 35, 25, 0.32);
  --check-a: #ead9bd;
  --check-b: #f4e8d4;
  --mini-bg: #2b2129;

  /* Square-ish. The panel is a 10px-radius paper product; a rack panel is milled. */
  --r: 4px;
  --r-sm: 3px;
  --r-xs: 2px;
  --btn-radius: 3px;

  --font-ui: "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-display: "Saira Condensed", "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Chivo Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* Headlines are set in condensed caps, so the tracking opens up rather than
     closing in: tight tracking on condensed capitals welds the letters together. */
  --display-track: 0.005em;
  --display-case: uppercase;

  color-scheme: light;
}

/* ---- Dark: the lights off ----
   The same room, and the wall is now the logo's outline colour: #332930 taken down
   to #1b141a so there is somewhere above it for a card to sit. The ink inverts to
   the cream, so the dark wall is the light wall's two extremes swapped and not a
   second unrelated palette. The accent moves orange -> gold, because mango orange
   on plum-brown is 2.0:1 and two mid-tone warm browns an inch apart is mud: the
   gold is 8.4:1 on this wall and is the only hue in the logo that can be the accent
   here without being darkened out of recognition. */
@media (prefers-color-scheme: dark) {
  :root {
    --shell: #1b141a;
    --surface: #241c23;
    --surface-head: #2a212a;
    --raise: #312731;
    --raise-2: #3c303b;
    --line: #372c37;
    --line-2: #917b84;
    --line-hover: #bda9b3;
    --ink: #f9f2e7;
    --ink-dim: #d9c8b6;
    --ink-faint: #bcab9d;

    /* On the plum wall the gold is already legible as text, so both tokens are the
       same colour and the accent is one thing again. */
    --signal-ink: #dda848;
    --signal-fill: #dda848;
    --signal-on-fill: #241a22;

    --brand: #dda848;
    --brand-hi: #ecc47d;
    --brand-ink: #241a22;

    /* The leaf and the red shoulder, each lifted this time rather than darkened. */
    --ok: #a8c455;
    --warn: #dda848;
    --bad: #e8827a;
    --ok-ink: #1f2409;
    --warn-ink: #f0cf8e;
    --bad-ink: #f6bdb7;
    --ok-soft: rgba(168, 196, 85, 0.13);
    --ok-line: rgba(168, 196, 85, 0.36);
    --warn-soft: rgba(221, 168, 72, 0.13);
    --warn-line: rgba(221, 168, 72, 0.36);
    --bad-soft: rgba(232, 130, 122, 0.13);
    --bad-line: rgba(232, 130, 122, 0.36);

    --input-bg: #151015;
    --input-well: inset 0 1px 2px rgba(0, 0, 0, 0.4);
    --focus-ring: rgba(221, 168, 72, 0.32);
    --knob-on: #241a22;
    --scrim: rgba(10, 6, 9, 0.7);
    --shadow-1: 0 1px 1px rgba(0, 0, 0, 0.4), 0 2px 6px -3px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 44px -14px rgba(0, 0, 0, 0.7);
    --check-a: #2b2129;
    --check-b: #241c23;
    --mini-bg: #2b2129;

    color-scheme: dark;
  }
}

/* ---------------------------------------------------------------- the rack
   A dark plum panel, the same slab in both colour schemes, carrying its own
   complete palette so every app.css component inside one is legible without
   knowing it is there. Same device as the panel's `.deck`; different metal.

   It sits one step *above* the dark wall (#2b2129 against #1b141a) rather than
   below it, which is the opposite of what it did as anodized aluminium: a slab that
   went darker than a plum wall disappeared into it, and a mango's skin is the lit
   part of the fruit. On the cream wall the same slab is still the darkest thing on
   the page by a mile, so one value serves both. */
.rack {
  --surface: #2b2129;
  /* The edge is what makes a panel a panel. On the cream wall the slab's own value
     does that work; on the plum wall it does not, and without a milled edge the
     rundown and the call to action read as slightly-lighter rectangles rather than
     as something bolted on. A border rather than a shadow: `.stage-panel` and
     `.cta-panel` both set box-shadow of their own, and a token that half the users
     of it overwrite is a token that does not work. */
  border: 1px solid #40333e;
  --surface-head: #2b2129;
  --raise: #352a33;
  --raise-2: #40333e;
  --line: #3a2e38;
  --line-2: #a08992;
  --line-hover: #c2aeb8;
  --ink: #f9f2e7;
  --ink-dim: #d5c3b0;
  --ink-faint: #c0aea1;
  --signal-ink: #dda848;
  --signal-fill: #dda848;
  --brand: #dda848;
  --brand-hi: #ecc47d;
  --brand-ink: #241a22;
  --input-bg: #1d161c;
  --input-well: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  --focus-ring: rgba(221, 168, 72, 0.32);
  --shadow-1: none;
  background: #2b2129;
  color: var(--ink);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- shell */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* Numbers and labels are mono everywhere on these pages, including inside the
   components app.css draws, because a timer's numerals lining up is the whole
   argument and a proportional 8 is a different width from a proportional 1. */
.lbl {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
}

/* ---------------------------------------------------------------- station bar
   The strip across the top of a rack: wordmark, what this is, and the way in. A
   hairline under it rather than a box around it. */
.station {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; min-height: 60px;
  border-bottom: 1px solid var(--line);
}
.station .mark { margin-right: auto; }
/* A tally light. It is on because the demo overlay above really is running, which
   is the only reason it is allowed to be on. */
.tally {
  display: none; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim);
}
@media (min-width: 760px) { .tally { display: inline-flex; } }
.tally::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--signal-fill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal-fill) 20%, transparent);
}

/* ---------------------------------------------------------------- masthead
   The claim on the left, the product running on the right, and nothing between
   them. At 1100 and up the headline column is narrow on purpose: a 46ch measure
   in condensed caps is about nine words a line, which is a headline, and the
   width it gives back goes to the stage. */
/* Three children, in reading order on a phone: the claim, the thing itself, then
   the small print. That order matters more on a phone than the layout does - with
   the small print second, a five-line paragraph about billing sits between the
   headline and the running overlay and pushes the one thing worth scrolling to off
   the first screen. At 1100 and up the same three parts fold into two columns,
   with the small print dropped to the foot of the left one. */
.mast { display: grid; gap: 26px; padding: 40px 0 8px; align-items: start; }
@media (min-width: 1100px) {
  .mast {
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "copy stage" "under stage";
    column-gap: 52px; row-gap: 0;
  }
  .mast-copy { grid-area: copy; }
  .mast-stage { grid-area: stage; }
  .mast-under { grid-area: under; align-self: start; }
}
.mast h1 {
  font-size: clamp(42px, 5.4vw, 68px); line-height: 0.94; letter-spacing: 0.004em;
  text-wrap: balance; margin: 0;
}
/* The one line that is not in caps: a lowercase italic-weight line inside a block
   of condensed capitals is where the eye stops, so it carries the accent and the
   actual promise. */
.mast h1 .said {
  display: block; color: var(--signal-ink);
}
.mast .lede {
  font-size: 17px; line-height: 1.55; color: var(--ink-dim); max-width: 44ch; margin-top: 20px;
}
.mast .cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.mast-under {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.6; color: var(--ink-faint); max-width: 44ch;
}
.mast-under b { color: var(--ink-dim); font-weight: 600; }

/* ---------------------------------------------------------------- the stage
   A real overlay in an iframe: the same browser source OBS loads, in demo mode,
   ticking. Not a drawing of one in divs - a mock-up here is a promise the product
   then has to keep, and this one cannot drift from it.

   The whole 16:9 is shown rather than a crop. The seven themes sit in four
   different corners of the canvas, so a crop would hide three of them, and the
   empty part is not waste: it is the transparent part of the browser source,
   which is the single hardest thing about an overlay to explain in words. */
.stage-panel { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-2); }
.stage-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: #231b22;
}
.stage-head .now { margin-right: auto; font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); }
.stage-head .now b { color: var(--signal-ink); font-weight: 700; }
.stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  /* The darkest stop of the backdrop gradient, so there is no pale flash between
     the iframe being sized and the overlay painting. */
  background: #180f16;
}
.stage.transparent {
  background: repeating-conic-gradient(#342936 0% 25%, #251d24 0% 50%) 50% / 24px 24px;
}
.stage iframe {
  /* 1920, not a convenient fraction of it. The overlay lays itself out in absolute
     px from the viewport edges, so the iframe's own width is what decides the
     composition: at 960 the clock would sit twice as far in from the corner, in
     proportion, as it does on a 1080p stream. Laying the frame out at broadcast
     size and scaling the whole thing down is the only transform that leaves the
     composition alone. */
  --stage-w: 1920;
  position: absolute; top: 0; left: 0; border: 0;
  width: calc(var(--stage-w) * 1px); height: calc(var(--stage-w) * 9 / 16 * 1px);
  transform-origin: top left; pointer-events: none;
}

/* The row that drives it. Each button fires the event the rundown two sections
   down says it fires, at the seconds that table prints, into the overlay above -
   so the demo and the documentation cannot disagree. */
.drive {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 14px; border-top: 1px solid var(--line); background: #231b22;
}
.drive .btn { font-family: var(--font-mono); font-weight: 400; font-size: 12.5px; letter-spacing: 0; }
.drive .btn b { font-family: var(--font-mono); font-weight: 700; color: var(--signal-ink); }
.stage-foot { font-size: 12.5px; line-height: 1.55; color: var(--ink-faint); margin-top: 10px; max-width: 70ch; }

/* ---------------------------------------------------------------- sections
   One amber rule, one legend, one head. The rule is 2px and short rather than a
   full-width hairline: it reads as a label on equipment instead of as a divider
   in a document, and it is the only ornament any section gets. */
.sec { margin-top: 76px; }
.sec > .lbl { display: flex; align-items: center; gap: 10px; }
.sec > .lbl::before { content: ""; width: 26px; height: 2px; background: var(--signal-fill); flex: none; }
.sec > h2 {
  font-size: clamp(27px, 3vw, 38px); line-height: 1.02; margin-top: 12px;
}
.sec > .sub { font-size: 15px; line-height: 1.6; color: var(--ink-dim); margin-top: 12px; max-width: 64ch; }

/* ---------------------------------------------------------------- theme rack
   Seven live overlays, not seven pictures of them. A screenshot of a theme is a
   thing that can go stale; this cannot, because it is the theme. Picking one swaps
   the stage above, so the rack is also the switch - a second control listing the
   same seven names would be two things to keep in step. */
.rack-strip {
  margin-top: 26px; padding: 14px; border-radius: var(--r);
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px;
}
@media (max-width: 1000px) {
  .rack-strip {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(168px, 1fr);
    overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  }
}
.look {
  display: grid; gap: 8px; padding: 0; border: 0; background: none; text-align: left;
  scroll-snap-align: start; min-width: 0; color: var(--ink-dim); cursor: pointer;
}
.look .thumb {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-xs);
  background: var(--mini-bg); box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow var(--t) var(--ease);
}
.look .thumb iframe {
  /* Deliberately not 1920. A tile is about 150px wide, and a true-to-broadcast
     overlay inside one is 9 pixels tall - a smudge. Laying the frame out at 760
     zooms the overlay 2.5x against its own canvas, which is what a swatch is for:
     the colours, the type and the shape are what this rack is asked to show, and
     the stage above is what shows the real proportions.
     The zoom is why these run without ?backdrop=1: the backdrop puts the overlay
     inside a stage fixed at 1920x1080, so in a 760px frame the four themes that
     sit along the bottom or the right edge fall outside it entirely. */
  --thumb-w: 760;
  position: absolute; top: 0; left: 0; border: 0;
  width: calc(var(--thumb-w) * 1px); height: calc(var(--thumb-w) * 9 / 16 * 1px);
  transform-origin: top left; pointer-events: none;
}
.look .name {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  /* Each strip is a tap target in its own right; the label is where the height
     comes from on a phone, since the thumbnail above it is a fixed ratio. */
  display: flex; align-items: center; min-height: 24px;
}
.look:hover .thumb { box-shadow: inset 0 0 0 1px var(--line-hover); }
.look[aria-pressed="true"] { color: var(--signal-ink); }
.look[aria-pressed="true"] .thumb { box-shadow: inset 0 0 0 2px var(--signal-fill); }
.look:focus-visible { outline: 2px solid var(--signal-fill); outline-offset: 3px; }
.look-note { font-size: 14px; line-height: 1.6; color: var(--ink-dim); margin-top: 18px; max-width: 80ch; }
.look-note b { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- rundown
   The real defaults, printed, on a rack panel. A broadcast rundown: the event on
   the left, the seconds on the right, every number mono and tabular so the column
   reads as a column. The figures match RULE_DEFAULTS in public/rules.js exactly. */
.rundown-grid { display: grid; gap: 28px; margin-top: 26px; align-items: start; }
@media (min-width: 960px) { .rundown-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; } }
.rundown { border-radius: var(--r); padding: 6px 18px 14px; }
table.rules { border-collapse: collapse; width: 100%; font-size: 14.5px; }
table.rules caption {
  text-align: left; padding: 12px 0 10px; color: var(--ink-faint);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
table.rules th {
  text-align: left; padding: 0 0 9px; color: var(--ink-faint);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  border-bottom: 2px solid var(--signal-fill);
}
table.rules th.num, table.rules td.num { text-align: right; }
table.rules td {
  padding: 11px 0; border-top: 1px solid var(--line); color: var(--ink-dim); vertical-align: baseline;
}
table.rules td.what { color: var(--ink); }
table.rules td.num {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--signal-ink); font-weight: 700; white-space: nowrap; padding-left: 18px;
}
/* The rows whose value is a sentence rather than a count stay in the text face:
   mono and tabular figures are for things that line up as a column. */
table.rules td.num.txt { font-family: var(--font-ui); font-weight: 400; color: var(--ink-dim); }
table.rules tr.off td, table.rules tr.off td.num { color: var(--ink-faint); font-weight: 400; }
.rundown-note { display: grid; gap: 13px; font-size: 14.5px; line-height: 1.65; color: var(--ink-dim); }
.rundown-note h3 { font-size: 15px; }
.rundown-note ul { margin: 0; padding-left: 18px; display: grid; gap: 9px; }

/* ---------------------------------------------------------------- steps
   Numbered because the order matters. A rack unit each: a mono index, an amber
   rule, and one short paragraph. Not three cards - a card per step is three boxes
   holding one sentence each, which is the shape this page is trying not to be. */
.steps { display: grid; gap: 24px; margin-top: 28px; counter-reset: step; }
@media (min-width: 880px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.step { display: grid; gap: 10px; align-content: start; padding-top: 16px; border-top: 2px solid var(--signal-fill); }
.step h3 { font-size: 19px; display: flex; align-items: baseline; gap: 11px; }
.step h3::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--signal-ink); letter-spacing: 0.06em;
}
.step p { font-size: 14px; line-height: 1.6; color: var(--ink-dim); }
/* Its own line, not inside the sentence: a full origin plus a path is wider than a
   third of the page, and an inline one drags the paragraph out of its column. */
.step .code { display: block; word-break: break-all; line-height: 1.5; }

/* ---------------------------------------------------------------- CTA
   One rack panel, the width of the page, with the one thing the page is for in it.
   The only centred thing on the page, which is what makes centring mean something. */
.cta-panel {
  margin-top: 76px; border-radius: var(--r); padding: 44px 28px;
  display: grid; gap: 18px; justify-items: center; text-align: center;
  box-shadow: var(--shadow-2);
}
.cta-panel h2 { font-size: clamp(27px, 3.2vw, 40px); line-height: 1.02; }
.cta-panel p { font-size: 15px; line-height: 1.6; color: var(--ink-dim); max-width: 52ch; }
.cta-panel .row { justify-content: center; }
.cta-panel .lbl { color: var(--signal-ink); }

/* ---------------------------------------------------------------- questions */
.faq { display: grid; gap: 26px; margin-top: 28px; }
@media (min-width: 800px) { .faq { grid-template-columns: 1fr 1fr; gap: 28px 48px; } }
.faq > div { display: grid; gap: 7px; align-content: start; }
/* The one place on these pages a display heading is not in capitals. Caps are
   this page's voice for labels and headlines; a question set in them is shouting,
   and the distinction between "a label" and "something somebody asked" is worth a
   rule. */
.faq h3 { font-size: 17.5px; text-transform: none; letter-spacing: 0.002em; }
.faq p { font-size: 14px; line-height: 1.65; color: var(--ink-dim); }

/* ---------------------------------------------------------------- signed in
   What the page becomes once there is an account behind it: the runs this person
   owns, the create form, and the invite box. Signed out, none of it is here and
   the page ends at the call to action. */
.mine { display: grid; gap: 8px; margin-top: 22px; }
.mine a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); text-decoration: none; color: var(--ink);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.mine a:hover { border-color: var(--line-hover); background: var(--raise); }
.mine .meta { display: flex; align-items: center; gap: 12px; }
.mine code { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.mine .role {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal-ink);
}
.start { display: grid; gap: 16px; max-width: 560px; margin-top: 26px; }
.who { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.who img, .who .who-fallback {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  background: var(--raise-2); display: grid; place-items: center; font-size: 11px; color: var(--ink-dim);
}
.inp.code-inp { font-family: var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------------------------------------------------------------- footer */
footer {
  margin-top: 76px; padding: 18px 0 40px; border-top: 1px solid var(--line);
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-faint);
}
/* An 18px link is not a tap target on a phone. The row keeps its height instead of
   the link growing a visible box around itself. */
footer > * { display: inline-flex; align-items: center; min-height: 44px; }
footer a { color: var(--ink-dim); }

/* The MXNGO lockup: whose product this is, in the one place on the page where that
   is the question being answered. The logo goes here rather than in the station bar
   because the station bar already carries a wordmark - Subtick's - and two marks
   eighteen pixels apart is a co-branding accident rather than a masthead.

   The PNG is a 400x400 mango on transparency, so it needs no frame, no card and no
   border; at 22px it is a fruit-shaped full stop at the end of the page. `width`
   and `height` are both set so the row does not reflow when it decodes, and the
   decorative/semantic split is in the markup: the image is aria-hidden and the word
   MXNGO is real text, which means the brand name is still there for a screen reader
   and still searchable with the image blocked. */
.by-mxngo { gap: 8px; color: var(--ink-faint); }
.by-mxngo img { width: 22px; height: 22px; display: block; }
.by-mxngo b {
  font-weight: 700; letter-spacing: 0.1em; color: var(--ink-dim);
}

/* The sign-in page is short, so without a floor its footer floats in the middle of
   the viewport with a third of the window empty under it. Flex column on the body,
   footer pushed down: the page ends where the window does. */
body.page-signin { display: flex; flex-direction: column; min-height: 100dvh; }
body.page-signin .signin-wrap { flex: 1; display: flex; flex-direction: column; }
body.page-signin .signin-grid { flex: 1; }

/* ---------------------------------------------------------------- sign-in page
   The same materials, one column, and the form is the page. Not a centred card
   floating on a dark field - that is the single most recognisable AI-generated
   login screen there is. It is a rack panel at the top of a page that then
   explains what signing in is for. */
.signin-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.signin-grid { display: grid; gap: 40px; padding: 44px 0 0; align-items: start; }
@media (min-width: 980px) { .signin-grid { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); column-gap: 64px; } }
.signin-panel { border-radius: var(--r); padding: 28px; display: grid; gap: 20px; box-shadow: var(--shadow-2); }
.signin-panel h1 { font-size: clamp(30px, 3.4vw, 40px); line-height: 1.02; }
.signin-panel .sub { font-size: 14.5px; line-height: 1.6; color: var(--ink-dim); }
#step-choose { display: grid; gap: 20px; }
.providers { display: grid; gap: 9px; }
.providers .btn { width: 100%; justify-content: center; }
/* A rule with a word in it, rather than a bare line: the two halves of this panel
   are two different ways in, and the reader needs to be told that once. */
.or {
  display: flex; align-items: center; gap: 14px; color: var(--ink-faint);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.or::before, .or::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.email-form { display: grid; gap: 12px; }
.code-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.code-row .inp {
  font-family: var(--font-mono); font-size: 22px; font-weight: 700;
  letter-spacing: 0.3em; text-align: center; height: 52px; max-width: 220px;
}
.signin-side { display: grid; gap: 26px; align-content: start; }
.signin-side h2 { font-size: 21px; }
.signin-side p { font-size: 14px; line-height: 1.65; color: var(--ink-dim); }
.signin-side .point { display: grid; gap: 7px; padding-top: 14px; border-top: 2px solid var(--signal-fill); }
.sent { display: grid; gap: 14px; }
.sent .to { font-family: var(--font-mono); font-size: 13px; color: var(--signal-ink); word-break: break-all; }

/* ---------------------------------------------------------------- narrow */
@media (max-width: 680px) {
  .wrap, .signin-wrap { padding: 0 16px; }
  .mast { padding-top: 26px; gap: 24px; }
  .sec { margin-top: 54px; }
  .cta-panel { margin-top: 54px; padding: 32px 20px; }
  footer { margin-top: 54px; }
  .rack-strip { margin-left: -16px; margin-right: -16px; border-radius: 0; padding: 14px 16px; }
  .signin-panel { padding: 20px; }
  .signin-grid { padding-top: 26px; gap: 32px; }
}