/* ============================================================================
   PUBLIC SURFACE TOKENS — the marketing and legal pages, on the console's canvas.
   ----------------------------------------------------------------------------
   MinMax Pro had two products' worth of visual identity. Everything BEHIND the
   sign-in — the console, and the six pre-auth doors that assets/preauth.css
   already brought into line with it — is a LIGHT paper canvas with a graphite
   chrome bar and cyan as the one accent. Everything in FRONT of it — the
   landing page, the long-form page, privacy, terms, 404, the onboarding
   invite — was a dark near-black field left over from an earlier era, two of
   them still carrying the emerald accent that the product replaced with cyan
   and two carrying the FIRM's Nanum Myeongjo lockup rather than the product's.

   A visitor read the landing page, signed in, and arrived somewhere that did
   not look like the thing they had just been sold.

   This file is the single place the public pages read their colour, type and
   texture from, and every value in it is the console's own — lifted from
   assets/theme.css, not re-invented next to it. See the paper-step and `-tx`
   reasoning in theme.css itself; the short version is below where it bites.

   ── WHAT IS AND IS NOT IN HERE ─────────────────────────────────────────────
   TOKENS, the base element rules, and the canvas atmosphere. Nothing else.

   The public pages each carry a large inline <style> of bespoke components (the
   mode rail and capability wall on index, the document chrome on privacy and
   terms) which are tuned per page and have no business being shared. Those keep
   living in their pages and simply CONSUME what is declared here. If this file
   also defined `.btn` or `.band`, every page's inline block would silently win
   the cascade — it comes after the <link> — and the shared rule would be a lie
   that only shows up when someone deletes the page's copy.

   So: a colour, a font, a radius or a texture goes here. A component does not.

   Pages that link this file: index.html, more.html, privacy.html, terms.html,
   404.html, onboard.html. privacy and terms are GENERATED — edit
   scripts/build-policy-pages.cjs, never the output.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ── The canvas ───────────────────────────────────────────────────────────
     --ink kept its name because it is what every public page already writes for
     its page background, and re-pointing beats a rename across six files. Note
     that this is the OPPOSITE of what --ink means in theme.css, where the page
     is --paper and --ink is the chrome near-black. Both names are declared here
     with the console's meaning as the primary one, and --ink aliased onto the
     canvas for the pages that still say it.

     THE PAPER STEP. --paper #e4ecf4 against a #ffffff card is 1.14:1. It was
     #eff5f9 (1.06:1), which is below what an eye resolves as an edge at all, so
     cards floated on nothing and the 1px --line did the entire job of saying
     "this is a tile". Do not close this gap again: a surface that needs to be
     nearly white wants --card or --card-2, never --paper. */
  --paper:      #e4ecf4;
  --ink:        var(--paper);   /* alias — the page canvas */
  --card:       #ffffff;
  --card-2:     #f2f7fb;
  --band:       #edf3f9;        /* the alternating section fill, between the two */
  --chrome:     #20242c;        /* the graphite bar — the console's rail, laid flat */
  --chrome-2:   #2a2f39;
  --head-ink:   #0d1b20;        /* heading ink and the toast/tooltip surface */

  /* ── Rules ────────────────────────────────────────────────────────────────
     Borders carry the tile edge on top of the paper step, so they moved with
     it: a hairline tuned against the old paper is fainter over the new one. */
  --line:      #d2dfea;
  --line-soft: #e0e9f2;
  --line-acc:  color-mix(in srgb, var(--acc) 22%, transparent);
  /* The chrome bar's own rules, which are the light ones — inside the bar the
     polarity is inverted and every relationship along with it. */
  --chrome-line: rgba(255, 255, 255, .10);
  --chrome-tx:   #eef0f5;
  --chrome-dim:  rgba(238, 240, 245, .68);

  /* ── Ink ──────────────────────────────────────────────────────────────────
     Deliberately dark. Half of the console's "too bright" note was that type
     sat too close to its surface — correct by the numbers and still washed out
     at 13–14px on near-white. Each rung sits one step lower than arithmetic
     would put it. --tx-mute is the 11–12px rung, where AA wants 4.5:1, and
     measures ~5.8:1 on white.

     --tx-2 and --tx-3 are the names the public pages already use for the second
     and third rungs; they alias onto the console's --tx-soft and --tx-mute so
     the two vocabularies cannot drift apart. */
  --tx:      #151b21;
  --tx-soft: #454d58;
  --tx-mute: #5a6068;
  --tx-dim:  #9aa1ad;   /* placeholders and disabled glyphs — decorative only */
  --tx-2:    var(--tx-soft);
  --tx-3:    var(--tx-mute);
  --head:    var(--head-ink);

  /* ── Accent ───────────────────────────────────────────────────────────────
     THE SPLIT THAT MATTERS ON A LIGHT PAGE. A brand colour drawn to be seen as
     a FILL cannot also be TEXT. #00E5FF is the brand cyan and it is gorgeous as
     a glow, a rule, a chart mark or a 3px strap; as a word on white it measures
     about 1.8:1 and is the least legible thing on the page. So every accent
     here is a PAIR:

       --acc       the accent AS TEXT   — links, eyebrows, active labels, icons
       --acc-fill  the accent AS A FILL — glows, straps, washes, hairlines
       --acc-deep  darker still         — hover, pressed, and small mono capitals
                                          on the canvas rather than on a card

     Write var(--acc) the moment the colour becomes a glyph or a number, and
     var(--acc-fill) the moment it becomes a shape. This is the same pair the
     console runs as --teal / --teal-bright and the brand engine derives as
     --brand-primary-text / --brand-primary. Getting them the wrong way round is
     what turns a lit page muddy and an unlit one illegible.

     --acc2 is the mint second thread (#2EE0A8), also paired. The brand is cyan
     AND mint — the mint is the second thread, never half of the primary. */
  --acc:       #007c89;
  --acc-deep:  #00626d;
  --acc-fill:  #00E5FF;
  --acc2:      #1b8261;
  --acc2-fill: #2EE0A8;
  --on-acc:    #ffffff;   /* white on #007c89 is 4.7:1 */
  --on-fill:   #0d1b20;   /* ink on #00E5FF — a bright fill takes DARK type */

  --gold: #f4b03e;  --gold-tx: #8e6624;
  --coral:#f4744e;  --coral-tx:#b05438;
  --ok:   #1f9d57;  --ok-tx:   #187a44;

  /* ── Type — the console's four families ─────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  /* The wordmark face, and ONLY the wordmark — see src/core/brand-name.js. It
     falls back to the heading face so a blocked Google Fonts request degrades
     to exactly the lockup these pages used to ship. */
  --font-word:    'Sora', 'Bricolage Grotesque', Georgia, serif;
  /* Figures — every stat value, price and count. Deliberately NOT the display
     face: a display face at 800 has to carry "$14,040.00" at 30px, and a brand
     serif renders that with stroke contrast, proportional figures and, when the
     800 weight never loaded, a synthesised bold. */
  --font-num:     'Inter Tight', 'Inter', system-ui, sans-serif;

  --ease: cubic-bezier(.25, .46, .45, .94);

  /* ── Geometry, lifted from the console ──────────────────────────────────── */
  --r-xs: 7px; --r-sm: 10px; --r: 13px; --r-lg: 18px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(16, 21, 28, .05), 0 1px 3px rgba(16, 21, 28, .04);
  --sh-2: 0 8px 22px -14px rgba(16, 21, 28, .30);
  --sh-3: 0 26px 56px -28px rgba(16, 21, 28, .34);

  /* ── Texture ──────────────────────────────────────────────────────────────
     --grain is fractal noise rendered once by the SVG filter and then tiled. It
     is what stops a large flat fill from reading as a sticker: two flat
     gradients meeting on a near-white page is what makes a light UI read as
     glare, and a few percent of noise gives the eye something to land on
     without moving a single colour.

     IT IS BLACK-ON-ALPHA HERE, and it is white-on-alpha in the dark original.
     That polarity is exactly why it is a token and not a literal in a rule: an
     SVG data URI cannot read a custom property, so the flip has to be a whole
     new image. The feColorMatrix zeroes RGB and moves the noise's luminance
     into ALPHA, so the tile is transparent rather than a grey slab and needs no
     blend mode — and a blend mode is the wrong tool anyway, because it quietly
     dies inside any ancestor that isolates. The feFuncA gamma pushes most of
     that alpha to zero, leaving a sparse speckle instead of an even fog.
     `opacity` on the rect is the strength knob and the only number worth
     touching. `stitchTiles` makes the 160px tile seamless.

     --weave is a 3px 45° hairline: a milled surface up close, tone at arm's
     length, and it rhymes with the blueprint grid behind the hero. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .21 .72 .07 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.14'/%3E%3C/svg%3E");
  --weave: repeating-linear-gradient(45deg, rgba(13, 27, 32, .045) 0 1px, transparent 1px 3px);
  --grid-ln: color-mix(in srgb, var(--head-ink) 4.5%, transparent);
}

/* ── ONE ACCENT. THE MODES NO LONGER CARRY A HUE. ────────────────────────────
   index.html used to crossfade a different atmosphere per industry — mint for
   trades, iris for consulting, marine blue, hi-vis amber — and every accent,
   glow, column head and pill downstream retuned with it.

   Jeremy scrapped that on 2026-08-12: "now that all modes are on the same color
   we can scrap the multiple colors and simply display them along with the
   theme… we can scrap that and focus on cyan."

   That is more than tidying. Four hues meant the same claim was drawn four
   different ways depending on which pill happened to be pressed, so nothing on
   the page could be relied on to mean anything by its colour — and two of the
   four had to be dragged so far down to pass as TEXT on paper that they arrived
   as plum and mud rather than as iris and amber. With one accent, colour is
   free to mean something again: cyan is the product, mint is the second thread,
   everything else is ink.

   The html[data-mode] blocks are DELETED rather than flattened to four
   identical copies. A selector that exists and changes nothing is a trap for
   whoever reads it next. The attribute itself stays — the mode rail still
   writes it and the industry chart keys its emphasis off it — it just no longer
   carries a palette. */
:root {
  --acc: #007c89; --acc-deep: #00626d; --acc-fill: #00E5FF;
  --acc2: #1b8261; --acc2-fill: #2EE0A8; --on-fill: #0d1b20;
}

/* ============================================================================
   THE CHROME BAR — the one component in this file, and the reason for it
   ----------------------------------------------------------------------------
   Everything else here is a token, because a component declared here AND in a
   page's inline <style> loses the cascade to the page and becomes a lie. This
   one is declared here and DELETED from the three pages that used to carry
   their own copy (index.html, more.html, and the generator behind privacy and
   terms), so there is nothing left to lose to. It earns that because it is the
   one thing every public page shows in the same place at the same size, and
   because it had already drifted three ways.

   IT IS THE CONSOLE'S RAIL, LAID FLAT. Jeremy, 2026-08-12: the post-login nav
   has "a more textured feel… the transition to the cyan". That texture is three
   specific things, and the public bar had none of them:

     1. A CYAN BLOOM OFF THE LEADING EDGE. The rail runs
        `radial-gradient(120% 36% at 50% -8%, glow 16%)` — wide, shallow, rising
        from just outside its top edge. Rotate a vertical panel into a
        horizontal one and that same gesture arrives from just outside the LEFT
        edge, which is where the lockup sits. This is the "transition to the
        cyan" and it is the whole difference between a lit panel and a black
        stripe.
     2. A THREE-STOP GRAPHITE, not a two-stop. The rail goes bg-2 → bg → bg-2
        along its length: lifted at both ends, deeper through the middle. Flat
        ends are what make a bar read as a printed band.
     3. GRAIN. A few percent of noise so the graphite has tooth. White-on-alpha,
        never greyscale — a greyscale tile needs a blend mode, and blend modes
        die inside any ancestor that isolates.

   The bar stays OPAQUE from the first frame. The old dark pages could fade a
   bar in on scroll because it sat on more darkness; over paper, a transparent
   bar leaves a white lockup on a white page above the fold. */
.topbar {
  position: sticky; top: 0; z-index: 40;
  color: var(--chrome-tx);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E") 0 0 / 160px 160px,
    radial-gradient(54% 240% at -4% 50%, color-mix(in srgb, var(--acc-fill) 17%, transparent), transparent 78%),
    linear-gradient(90deg, var(--chrome-2), var(--chrome) 54%, var(--chrome-2));
  border-bottom: 1px solid var(--chrome-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 10px 30px -18px rgba(12, 16, 22, .55);
  transition: box-shadow .3s ease;
}
.topbar.scrolled { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 14px 34px -18px rgba(12, 16, 22, .7); }
/* The accent thread along the bottom edge — the same one the console runs along
   the top of its rail, and the reason the bar reads as lit rather than as a
   black strip laid on the page. */
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--acc-fill) 62%, transparent),
    color-mix(in srgb, var(--acc-fill) 30%, transparent) 38%,
    color-mix(in srgb, var(--acc-fill) 12%, transparent) 72%,
    transparent);
}

/* ============================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* [hidden] is a UA rule of display:none and ANY author display beats it. These
   pages set display:flex and display:grid on most things, so without this a
   node the page's own script hides stays on screen. hidden has to mean hidden. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 96px; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--tx);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

/* ── Focus ──────────────────────────────────────────────────────────────────
   The ring is the accent AS TEXT (#007c89), never the brand cyan: #00E5FF on a
   white card is about 1.8:1, which made the one indicator a keyboard user has
   the least visible thing on the page. Inside the graphite bar the relationship
   inverts and the bright cyan is the readable one, so the bar states its own. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 4px;
}
.topbar :where(a, button):focus-visible { outline-color: var(--acc-fill); }

::selection { background: color-mix(in srgb, var(--acc-fill) 34%, transparent); color: var(--tx); }

/* ── Print ──────────────────────────────────────────────────────────────────
   privacy.html and terms.html get printed and filed, and a person doing that is
   holding a contract, not looking at a website. Flatten the canvas to white,
   drop the chrome, and let the ink be ink. */
@media print {
  :root { --paper: #fff; --card: #fff; --band: #fff; --tx: #111; --tx-soft: #333; }
  body { background: #fff; }
  .bg, .topbar, .grain, .vignette { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}