/* makeeng money — the public site. Generated by site/build.mjs from the design system's
   tokens (web/src/styles/makeeng.css), the self-hosted fonts and site/src/site.css. Do not
   edit: a change belongs in site/src/site.css. */

@font-face {
  font-family: "Noto Sans Display";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  src: url(/site/fonts/noto-sans-display-latin-standard-normal.woff2) format("woff2") tech("variations"), url(/site/fonts/noto-sans-display-latin-standard-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Noto Sans Display";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  src: url(/site/fonts/noto-sans-display-latin-ext-standard-normal.woff2) format("woff2") tech("variations"), url(/site/fonts/noto-sans-display-latin-ext-standard-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Noto Sans Display";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  src: url(/site/fonts/noto-sans-display-latin-standard-italic.woff2) format("woff2") tech("variations"), url(/site/fonts/noto-sans-display-latin-standard-italic.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Noto Sans Display";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  src: url(/site/fonts/noto-sans-display-latin-ext-standard-italic.woff2) format("woff2") tech("variations"), url(/site/fonts/noto-sans-display-latin-ext-standard-italic.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/site/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/site/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/site/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/site/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/site/fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/site/fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* makeeng — colour tokens */
:root {
  /* Anchor & complement */
  --accent: #00A0B0;        /* Peacock Blue — the hook colour */
  --accent-deep: #0A6E7C;   /* links, focus, text-on-light accent */
  --comp: #C25A42;          /* Terracotta — single counter-accent, emphasis/highlights only */
  --comp-deep: #9E4632;     /* deeper terracotta for borders/contrast */

  /* Peacock monochromatic ramp — bg/panels 50-200 · anchor 500 · text/rules 700-900 */
  --peacock-50:  #EAF6F8;
  --peacock-100: #CFEBF0;
  --peacock-200: #A6DAE2;
  --peacock-300: #6CC3CF;
  --peacock-400: #22ABBC;
  --peacock-500: #00A0B0;
  --peacock-600: #00889A;
  --peacock-700: #0A6E7C;
  --peacock-800: #0E5560;
  --peacock-900: #0C3D45;

  /* Analogous */
  --sea-green: #159C86;   /* hue 162° */
  --cerulean:  #2E77B0;   /* hue 215° */

  /* Data-series (categorical) — use in this order. Terracotta last = reserved highlight. */
  --series-1: #00A0B0;    /* Peacock */
  --series-2: #C0893C;    /* Amber */
  --series-3: #159C86;    /* Sea Green */
  --series-4: #9B4A6B;    /* Mulberry */
  --series-5: #2E77B0;    /* Cerulean */
  --series-6: #C25A42;    /* Terracotta (reserved) */
  --series-7: #6A5ACD;    /* Violet (v3.24) */
  --series-8: #4F7A2E;    /* Moss */
  --series-9: #A89400;    /* Gold */
  --series-10: #2E3A4A;   /* Graphite */

  /* Neutrals — faint cool cast; never pure #000/#FFF */
  --paper:     #FCFDFD;
  --panel:     #F4F7F7;
  --panel-2:   #E9EFF0;
  --line:      #DBE3E4;
  --line-soft: #EBF0F0;
  --ink-faint: #7C898C;
  --ink-dim:   #4A585B;
  --ink:       #0F1719;
  --ink-body:  #1A2325;

  /* Semantic roles */
  --text-title: #0F1719;
  --text-body:  #1A2325;
  --text-meta:  #7C898C;
  --link:       #0A6E7C;
  --link-hover: #00A0B0;
  --ref:        #6FB4BF;   /* reference [##] marks */
  --highlight:  #C25A42;
  --ok:         #159C86;   /* positive / success */
  --warn:       #C0893C;   /* caution / critical */

  /* Brand lockup — the sub-brand half of `makeeng <name>`. The constant half follows the
     page's ink via currentColor; this is the one part of the mark that does not, so it is
     a token rather than a baked value. Changing the lockup's colour everywhere is this one
     line: the generated SVGs carry it only as a var() fallback, for the case of a .svg
     opened on its own. See the readme's Brand lockup section. */
  --mk-suffix:  var(--peacock-700);   /* = --accent-deep, the system's existing teal */
}

/* makeeng — typography tokens.
   Noto Sans Display is always set with explicit font-variation-settings.
   A variation `wght` overrides CSS font-weight — set the axis, don't rely on font-weight.
   Minimum text size anywhere is 9px (body, labels, pills, and every part of a figure —
   axis ticks, series labels, legends). Never render text smaller than 9px. */
:root {
  --font-display: "Noto Sans Display", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* The three variation registers — the heart of the system */
  --var-title: "wght" 520, "wdth" 65;  /* display + all headings + title spans */
  --var-body:  "wght" 350, "wdth" 74;  /* body, lists, tables, captions — page default */
  --var-bold:  "wght" 640, "wdth" 74;  /* <b>/<strong> inline emphasis in body */

  /* Type scale — size / line-height */
  --fs-display: 64px;  --lh-display: 0.96;
  --fs-h1: 34px;       --lh-h1: 1.05;
  --fs-h2: 26px;
  --fs-h3: 15px;       /* UPPERCASE, +5% ls, bottom rule */
  --fs-lead: 17px;     --lh-lead: 1.6;
  --fs-body: 15px;     --lh-body: 1.6;
  --fs-list: 15px;     --lh-list: 1.7;
  --fs-caption: 12.5px; --lh-caption: 1.5;
  --fs-overline: 10.5px; /* mono, UPPERCASE, +12% ls */
  --fs-numeral: 18px;    /* mono, tabular */

  /* Tracking */
  --ls-display: -0.02em;
  --ls-h3: 0.05em;
  --ls-overline: 0.12em;
}

/* makeeng — spacing, layout & surface tokens */
:root {
  /* Page structure */
  --container-max: 1140px;
  --container-pad: 40px;
  --section-pad-y: 80px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-11: 44px;   /* sub-section rhythm */
  --space-20: 80px;   /* section rhythm */

  /* Surfaces — flat, hairline borders, no drop shadows */
  --radius: 2px;      /* pills, chips; otherwise square */
  --border-width: 1px;
  --hairline: 1px solid var(--line);
  --hairline-soft: 1px solid var(--line-soft);
  --grid-gap-hairline: 1px;  /* 1px grid gap over --line bg draws separators */
}

/* makeeng — APPLICATION surface tokens (v3.0)

   v3.0 (2026-09-23, makeeng money 2.0-b): the geometry of the approved 2.0
   mockups — 10px cards, 8px controls, pill switches, filled delta chips — as
   tokens; the dark palette FILLED IN (it was drafted and commented here since
   v2.0); the six data series re-picked for near-black. Everything else below
   is v2.0's, unchanged.

   The third surface, beside memo and artículo. Memo and artículo are documents:
   text first, figures subordinate, a printable page. An application is the
   inverse — it is charts, tables, filters and controls, and it is *operated*
   rather than read.

   WHAT CARRIES OVER FROM THE BRAND, UNCHANGED
     colour (Peacock anchor, Terracotta counter-accent, the ramp, the six data
     series), type (Noto Sans Display + IBM Plex Mono, the three variation
     registers, mono for numerals and labels), the 9px text floor, cool
     neutrals, flat surfaces, 2px radius, no emoji.

   WHAT DOES NOT
     the 1140px measure, the document type scale (a 64px display and 15px body),
     prose-never-boxed, figure title + caption, the continuous/A4 toggle. None
     of it means anything on a surface with no pages.

   EVERY COLOUR HERE IS A ROLE, NOT A VALUE. `--app-surface`, not `#FCFDFD`.
   That is what makes a dark palette a second block of role definitions rather
   than a rewrite of every screen — and at v3.0 that is exactly what dark was:
   the block at the foot of this file, and not one component touched for it.

   Requires tokens/colors.css, typography.css and spacing.css. Load through
   `app.css` at the folder root, which pulls in the foundations first. */

:root {
  /* The browser's own parts — scrollbars, a date picker, a checkbox — drawn
     for the theme the page is in, not the one the operating system is in. */
  color-scheme: light;

  /* ---- surfaces ---------------------------------------------------------
     Two background colours on a page and no more, which is the brand rule.
     Here they are: the ground the app sits on, and the paper a card is made
     of. `sunken` is not a third background — it is used only *inside* a card
     (a table head, an inert field), never as page furniture. */
  --app-ground:        var(--panel);      /* behind everything */
  --app-surface:       var(--paper);      /* cards, the bar, popovers */
  --app-surface-sunken: var(--panel-2);   /* table heads, wells, inert fields */
  --app-surface-tint:  var(--peacock-50); /* hover / selected fill */
  --app-surface-tint-strong: var(--peacock-100); /* pressed */
  /* v3.0: the chosen pill of a switch, lifted off its sunken track. The card
     surface in light; in dark the card surface is barely lighter than the
     track, so dark gives it a step of its own. */
  --app-surface-raised: var(--paper);

  /* ---- lines ------------------------------------------------------------
     Structure comes from hairlines, exactly as it does on paper. */
  --app-border:        var(--line);
  --app-border-soft:   var(--line-soft);
  --app-border-strong: var(--peacock-200);
  --app-border-accent: var(--accent);

  /* ---- text -------------------------------------------------------------*/
  --app-text:          var(--ink-body);
  --app-text-strong:   var(--ink);
  --app-text-dim:      var(--ink-dim);
  --app-text-faint:    #627176;           /* v3.24: AA on paper and panel; --ink-faint stays the documents' */
  --app-text-accent:   var(--peacock-800);
  --app-text-on-accent: #FFFFFF;          /* the one near-white, on a filled button */
  --app-text-link:     var(--link);
  --app-text-link-hover: var(--link-hover);

  /* ---- meaning ----------------------------------------------------------
     The brand's semantic roles, re-pointed so a screen never reaches past
     this layer for a colour. */
  --app-accent:        var(--accent);
  --app-accent-deep:   var(--accent-deep);
  --app-ok:            #0E7C6A;           /* v3.24: --ok darkened, the same hue, AA as text */
  --app-warn:          #8F6420;           /* v3.24: --warn darkened, the same hue, AA as text */
  --app-critical:      var(--comp-deep);
  --app-critical-tint: #FCF6F3;           /* the brand's callout wash */

  /* ---- verdicts, filled (v3.0) ------------------------------------------
     A delta chip is a filled pill: a tint and a text colour that reads on it.
     GOOD and BAD, never UP and DOWN — the screen decides which a movement is.
     `flat` is "no change worth a colour". */
  --app-good-tint:     #E2F4EF;
  --app-good-text:     #0F6F5F;
  --app-bad-tint:      #F8EAE6;
  --app-bad-text:      #8E3F2B;
  --app-flat-tint:     var(--panel-2);
  --app-flat-text:     var(--ink-dim);

  /* ---- what only the admin sees (v3.16) ----------------------------------
     A card that only the platform's administrator is shown wears a wash of
     the cerulean (series 5, hue 215°) — a hue no state already uses: not the
     peacock tint of hover and selected, not the terracotta of an error, not
     the amber of a warning — so "this is not something a household sees"
     reads before a word of it does. Its border and its mark's text are the
     same hue, deeper. */
  --app-admin-tint:    #EEF3F9;
  --app-admin-border:  #C9D8EA;
  --app-admin-text:    #24557F;

  /* ---- the six data series, as roles (v3.0) -----------------------------
     The brand's six, in the brand's order. As roles so the dark block can
     re-pick them; `--series-1…6` themselves are re-pointed there too, so the
     charts (which read them) and `.cat-dot` follow without a second name. */
  --app-series-1: var(--series-1);
  --app-series-2: var(--series-2);
  --app-series-3: var(--series-3);
  --app-series-4: var(--series-4);
  --app-series-5: var(--series-5);
  --app-series-6: var(--series-6);
  --app-series-7: var(--series-7);
  --app-series-8: var(--series-8);
  --app-series-9: var(--series-9);
  --app-series-10: var(--series-10);

  /* ---- elevation --------------------------------------------------------
     The readme carves out ONE permitted shadow in the whole brand, for
     interactive screen surfaces. `--app-elev-1` is that shadow, verbatim.

     `--app-elev-2` is v2.0's extension of it, and it is deliberate rather
     than a drift: a menu that opens over a card has to read as being above
     the card, and on a system with no other depth cue there is nothing else
     to say it with. Same construction, one step deeper. There is no level 3.

     BOTH ARE SCREEN-ONLY. Print and any paged view drop them and fall back
     to a flat 1px border — see the `@media print` block at the foot. */
  --app-elev-0: none;
  --app-elev-1:
    0 0 0 1px var(--line-soft),
    0 1px 2px rgba(15, 23, 25, .04),
    0 6px 18px rgba(15, 23, 25, .04);
  --app-elev-2:
    0 0 0 1px var(--line),
    0 2px 4px rgba(15, 23, 25, .06),
    0 12px 32px rgba(15, 23, 25, .08);

  /* The wash behind the folded rail when it is open (v2.9). It is a role and
     not a hex at the point of use for the usual reason — the dark palette at
     the foot of this file has to be able to answer it — and it is here rather
     than in the component because a scrim is a statement about depth, which is
     what this section of the file is. Ink at 38%: enough that the page behind
     reads as out of reach, little enough that it still reads as the page. */
  --app-scrim: rgba(15, 23, 25, .38);

  /* ---- type: the compressed scale ---------------------------------------
     The document scale runs 64 → 34 → 26 → 15 with a 15px body, sized for
     reading one column at a time. An application shows six things at once and
     is read at arm's length on a laptop, so everything comes down a register
     and the mono numerals come up relative to the prose.

     The 9px floor still applies and is not close: the smallest token here is
     10px. `--app-fs-micro` is the one to watch — if a screen ever wants
     something smaller than a table header, the answer is fewer things on the
     screen, not smaller type. */
  --app-fs-page-title: 22px;  --app-lh-page-title: 1.2;   /* one per screen */
  --app-fs-section:    16px;  --app-lh-section: 1.3;      /* card / group heading */
  --app-fs-body:       13px;  --app-lh-body: 1.5;         /* the app's reading size */
  --app-fs-nav:        13px;
  --app-fs-control:    13px;                              /* buttons, inputs, tabs */
  --app-fs-numeral:    13px;                              /* mono, tabular, in tables */
  --app-fs-kpi:        26px;  --app-lh-kpi: 1.05;         /* the one big number */
  --app-fs-kpi-hero:   34px;                              /* v3.0: the one a screen is about */
  --app-fs-small:      12px;                              /* v3.0: pill switches, chips, notes */
  --app-fs-label:      11px;                              /* mono UPPER, +12% — the overline role */
  --app-fs-micro:      10px;                              /* mono — table heads, chips, meta */

  /* Registers are the brand's three, unchanged. Noto Sans Display must always
     be set with font-variation-settings — a CSS font-weight is ignored. */
  --app-var-title: var(--var-title);
  --app-var-body:  var(--var-body);
  --app-var-bold:  var(--var-bold);
  --app-ls-label:  var(--ls-overline);
  --app-ls-section: .01em;

  /* ---- density ----------------------------------------------------------
     ONE density, decided rather than offered. A density toggle is two layouts
     to keep correct forever, and the reason to want one — a table with two
     hundred rows on screen at once — is a screen that should be paginated or
     filtered instead.

     32px controls and 34px rows sit between a marketing site (44px+, touch)
     and a trading terminal (24px, unreadable at a glance). This is a
     household's money looked at on a laptop for a few minutes at a time. */
  --app-control-h:     32px;
  --app-control-h-sm:  26px;    /* segmented controls, chips, table-header buttons */
  /* v3.21 (makeeng money S-579): where a finger is the only pointer, a box takes 16px text — an
     iPhone zooms the page in on a smaller one and never zooms back — in a 40px box, and a tick
     in a form is a 44px row to tap. With a mouse attached nothing changes size. */
  --app-control-h-touch:  40px;
  --app-fs-control-touch: 16px;
  --app-tap-min:          44px;
  --app-row-h:         34px;    /* table body row */
  --app-row-h-head:    30px;    /* table header row */
  --app-bar-h:         52px;    /* the top bar */
  --app-nav-w:         216px;   /* the side rail */
  --app-nav-w-collapsed: 56px;
  --app-tabbar-h:      56px;    /* v3.0: the phone's bottom bar, ≤900px */
  --app-drawer-w:      420px;   /* v3.0: a form or the filters, beside the page */
  --app-popover-w:     320px;   /* v3.0: the `i`, a small form */

  /* Padding and gaps come from the brand's spacing scale — there is no second
     scale here, only the choice of which steps this surface uses. */
  --app-pad-page:      var(--space-6);   /* 24 — page gutter */
  --app-pad-card:      var(--space-5);   /* 20 — inside a card */
  --app-pad-cell:      var(--space-3);   /* 12 — table cell, x */
  --app-pad-control:   var(--space-3);   /* 12 — inside a button/input, x */
  --app-gap:           var(--space-4);   /* 16 — between cards */
  --app-gap-tight:     var(--space-2);   /* 8  — between controls */

  /* ---- measure ----------------------------------------------------------
     NOT 1140px. That number is a reading measure — the width at which a line
     of prose stays comfortable — and it has no meaning for a table, which
     wants every pixel it can have. The app fills the window; the cap exists
     only so a 34" monitor does not stretch a twelve-column table into
     something nobody can follow across. */
  --app-max: 1680px;

  /* ---- radius, focus, motion --------------------------------------------*/
  --app-radius:        var(--radius);    /* 2px, or square — tables, meters, wells */
  /* v3.0, the approved mockups' geometry. The document surfaces keep the
     brand's 2px; an operated surface is touched, and a softer corner is what
     says "this is a thing you press" before the pointer arrives. */
  --app-radius-card:    10px;
  --app-radius-control: 8px;
  --app-radius-pill:    999px;
  --app-focus-ring:    2px solid var(--accent);
  --app-focus-offset:  2px;

  /* The brand's animation rule is "minimal — the only interactive rule is
     link hover". This surface adds exactly two things and nothing else:
     a colour transition short enough to read as instant rather than as
     motion, and the loading pulse. No transforms, no scale, no bounce,
     nothing decorative. Both are dropped under prefers-reduced-motion. */
  --app-transition-dur: 120ms;              /* the duration on its own */
  --app-transition: var(--app-transition-dur) linear;
  --app-pulse:      1600ms;
}

/* ---- dark (v3.0) ----------------------------------------------------------
   Built for since v2.0 and built at v3.0: this block was drafted and
   commented here from the start, and dark arrived as exactly what the note
   promised — every role redefined once, and not one component touched for it.
   If a colour ever appears in a component that is not a role above, this block
   stops being sufficient, which is the whole reason the roles exist.

   HOW IT IS SWITCHED. The application sets `data-theme="dark"` or `"light"` on
   `<html>` (the person's choice, or the system's while they have not made one).
   A page that sets neither — a specimen, a page opened without its script —
   follows `prefers-color-scheme`. So the block is written twice, once per
   door: CSS has no mixins, and a shared custom property cannot carry a set of
   declarations. KEEP THE TWO COPIES IDENTICAL; `sync_design_tokens.py`
   does not check it, so read them side by side after any change.

   WHAT HAD TO BE RE-PICKED, not merely darkened:
   - the ACCENT that fills things (`--app-accent-deep`, a primary button, a
     pressed scope) — the light surface's deep teal is too dark to carry white
     text *and* to read on near-black, so it becomes a light teal with dark text
     on it (`--app-text-on-accent`);
   - the CRITICAL and the VERDICTS — terracotta at #9E4632 disappears into
     #121D20, so the text colours come up and the tints go down;
   - the SIX DATA SERIES (the note v2.0 left here): six hues legible on paper
     are not six hues legible on #0C1416. Same hues, same order, lifted:
     peacock #3BC2D0, amber #D8A257, sea #2FB89F, mulberry #C0729A, cerulean
     #5E9AD0, terracotta #D97B63;
   - the lockup's `money` (`--mk-suffix`), which is the deep teal too. */

:root[data-theme="dark"] {
  color-scheme: dark;
  --app-ground:        #0C1416;
  --app-surface:       #121D20;
  --app-surface-sunken: #0F1A1C;
  --app-surface-tint:  #0E3239;
  --app-surface-tint-strong: #114049;
  --app-surface-raised: #1F3034;
  --app-border:        #223438;
  --app-border-soft:   #1A292C;
  --app-border-strong: #2F5A61;
  --app-border-accent: #3BC2D0;
  --app-text:          #D7E1E2;
  --app-text-strong:   #F1F6F6;
  --app-text-dim:      #9BAAAD;
  --app-text-faint:    #7A8B8E;
  --app-text-accent:   var(--peacock-300);
  --app-text-on-accent: #04191C;
  --app-text-link:     var(--peacock-300);
  --app-text-link-hover: #9ADBE3;
  --app-accent:        #5CCBD7;
  --app-accent-deep:   #3BB3C1;
  --app-ok:            #2FB89F;
  --app-warn:          #D8A257;
  --app-critical:      #E0876F;
  --app-critical-tint: #2A1B17;
  --app-good-tint:     #103129;
  --app-good-text:     #5FD3BA;
  --app-bad-tint:      #34201B;
  --app-bad-text:      #F0A08A;
  --app-flat-tint:     #1A2629;
  --app-flat-text:     #9BAAAD;
  --app-admin-tint:    #121C27;
  --app-admin-border:  #27394D;
  --app-admin-text:    #8DB8E0;
  --app-elev-1: 0 0 0 1px #1E2E32, 0 6px 18px rgba(0,0,0,.35);
  --app-elev-2: 0 0 0 1px #26383C, 0 12px 32px rgba(0,0,0,.5);
  --app-scrim: rgba(0, 0, 0, .58);
  --series-1: #3BC2D0;
  --series-2: #D8A257;
  --series-3: #2FB89F;
  --series-4: #C0729A;
  --series-5: #5E9AD0;
  --series-6: #D97B63;
  --series-7: #9A8CE6;
  --series-8: #86B65A;
  --series-9: #D9C63A;
  --series-10: #C9D2DA;
  --mk-suffix: var(--peacock-300);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --app-ground:        #0C1416;
    --app-surface:       #121D20;
    --app-surface-sunken: #0F1A1C;
    --app-surface-tint:  #0E3239;
    --app-surface-tint-strong: #114049;
    --app-surface-raised: #1F3034;
    --app-border:        #223438;
    --app-border-soft:   #1A292C;
    --app-border-strong: #2F5A61;
    --app-border-accent: #3BC2D0;
    --app-text:          #D7E1E2;
    --app-text-strong:   #F1F6F6;
    --app-text-dim:      #9BAAAD;
    --app-text-faint:    #7A8B8E;
    --app-text-accent:   var(--peacock-300);
    --app-text-on-accent: #04191C;
    --app-text-link:     var(--peacock-300);
    --app-text-link-hover: #9ADBE3;
    --app-accent:        #5CCBD7;
    --app-accent-deep:   #3BB3C1;
    --app-ok:            #2FB89F;
    --app-warn:          #D8A257;
    --app-critical:      #E0876F;
    --app-critical-tint: #2A1B17;
    --app-good-tint:     #103129;
    --app-good-text:     #5FD3BA;
    --app-bad-tint:      #34201B;
    --app-bad-text:      #F0A08A;
    --app-flat-tint:     #1A2629;
    --app-flat-text:     #9BAAAD;
    --app-admin-tint:    #121C27;
    --app-admin-border:  #27394D;
    --app-admin-text:    #8DB8E0;
    --app-elev-1: 0 0 0 1px #1E2E32, 0 6px 18px rgba(0,0,0,.35);
    --app-elev-2: 0 0 0 1px #26383C, 0 12px 32px rgba(0,0,0,.5);
    --app-scrim: rgba(0, 0, 0, .58);
    --series-1: #3BC2D0;
    --series-2: #D8A257;
    --series-3: #2FB89F;
    --series-4: #C0729A;
    --series-5: #5E9AD0;
    --series-6: #D97B63;
  --series-7: #9A8CE6;
  --series-8: #86B65A;
  --series-9: #D9C63A;
  --series-10: #C9D2DA;
    --mk-suffix: var(--peacock-300);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --app-transition-dur: 0ms;
    --app-transition: 0ms;
    --app-pulse: 0ms;
  }
}

/* Print drops every shadow, brand-wide and without exception. An application
   is not a printable surface — there is no A4 view here — but a browser's
   Print will still reach it, and a shadow on paper is the one thing the brand
   has never allowed. */
@media print {
  :root {
    --app-elev-1: none;
    --app-elev-2: none;
    --app-ground: #FFFFFF;
  }
}

/* makeeng — PUBLIC WEB surface tokens (v3.14)

   v3.14 (2026-10-22, makeeng money v2.1.9, S-233): the fourth surface, «web
   pública», ported from the platform's `docs/public-web.md` §4, where the
   cloud stream that built the site wrote its rules (DL-214, DL-215). The
   site's own stylesheet (`web/site/src/site.css` in makeeng money) is the
   component layer; this file is what it reads and could not define itself.

   The public web is the page a stranger sees before signing in: C's head on
   B's body — a deep Peacock band with the copy and the one screenshot, then
   white cards on a very light ground. It is read, like a document, and it
   moves, unlike anything else in the brand (see MOTION below).

   WHAT CARRIES OVER FROM THE BRAND, UNCHANGED
     colour (Peacock anchor, Terracotta for emphasis only, the ramp, the six
     data series), type (Noto Sans Display + IBM Plex Mono, the three
     variation registers, mono for numerals, labels and overlines), the 9px
     text floor, cool neutrals, no gradients, no textures, no emoji; and the
     application's colour ROLES (`--app-*`, tokens/app.css), through which
     this surface follows the device's light or dark mode with no toggle.

   WHAT DOES NOT
     the 1140px measure (a landing page is wider: 1180), the document type
     scale (a 70px display, a 17px body), the 2px radius (12px cards, 8px
     buttons, pill switches, as the application since v3.0), the application's
     density and its eight states (there is nothing to operate here), the
     brand's "no decorative motion" (this surface is the one exception).

   Requires tokens/colors.css, typography.css, spacing.css and tokens/app.css.
   Load through `site.css` at the folder root. The application's components
   (components/app.css) are NOT part of this surface. */

:root {
  /* ---- the band -----------------------------------------------------------
     The head is a band of deep Peacock in BOTH themes — it is the one place
     where light mode shows light text on a dark ground, so the `--app-*`
     roles cannot answer it (in light they resolve to ink on paper). The five
     values below are the dark palette's, written here as values so they hold
     whichever theme the page is in: `--site-band-text` is dark's
     `--app-text-strong`, `-faint` its `--app-text-dim`, `-line` its
     `--app-border-strong` and `-hover` its `--app-surface-tint-strong`;
     `-dim` is new, picked for the lead. Contrast on `--peacock-900`
     (#0C3D45): text 10.9:1, dim 6.8:1, faint 4.9:1 — AA everywhere. */
  --site-band:            var(--peacock-900);
  --site-band-text:       #F1F6F6;   /* titles and the strong text on the band */
  --site-band-text-dim:   #B9C6C8;   /* the lead on the band */
  --site-band-text-faint: #9BAAAD;   /* small print, the section links */
  --site-band-line:       #2F5A61;   /* hairlines, the outlined button's border */
  --site-band-hover:      #114049;   /* the outlined button's and a link's hover fill */
  /* The filled button on the band is light teal with dark text, as dark
     mode's primary button is; the lockup's `money` turns the same teal. */
  --site-band-accent:     var(--peacock-300);
  --site-band-accent-hover: var(--peacock-200);
  --site-band-text-on-accent: var(--peacock-900);

  /* ---- measure ------------------------------------------------------------
     1180px with 40px gutters — wider than the document's 1140 because the
     head sets copy beside a screenshot and the tools set copy beside a
     graphic; narrower than the application's 1680 because it is read.
     Sections 120px apart. Below 900px the gutter is 20 and the sections 88,
     one column; the phone rules begin at 560. No horizontal scroll from 360. */
  --site-wrap:        1180px;
  --site-pad:         40px;
  --site-section-y:   120px;
  --site-side-w:      240px;   /* the reading pages' sticky side column */

  /* ---- geometry -----------------------------------------------------------
     B's body: rounded cards and buttons, pill chips and switches. The 12px
     card is two steps past the application's 10 — a card here is looked at,
     not pressed, and a softer corner reads as calm rather than as a control. */
  --site-radius-card: 12px;
  --site-radius-btn:  8px;
  --site-pill:        var(--app-radius-pill);

  /* ---- motion: THIS SURFACE ONLY ------------------------------------------
     The brand's rule is "no decorative motion anywhere", and it stands on the
     documents and the application. The public web is the exception, and the
     exception has a shape: a graphic DRAWS ITSELF ONCE when it scrolls into
     view (bars fill, a line draws, a figure counts up, pieces appear in
     order), small cards float a few pixels, and the one switch that shows
     two readings alternates on its own. Every motion says what its sentence
     says; none is ornament.
       - ease-out, no bounce, no scale;
       - everything is static under prefers-reduced-motion (the durations
         below fall to 0 and the component layer drops every animation and
         transition, never hiding a starting state);
       - the page is complete without JavaScript: a hidden starting state
         applies only under `html.js`, set first thing by the site's script. */
  --site-ease:        cubic-bezier(.2, .7, .2, 1);
  --site-dur-reveal:  .6s;     /* a piece fades and lifts in */
  --site-dur-fill:    1s;      /* a bar fills (scaleX) */
  --site-dur-arc:     1.2s;    /* a donut's arc grows */
  --site-dur-rise:    1.4s;    /* a shape fills from the ground; a figure counts up */
  --site-dur-draw:    1.6s;    /* a line draws itself (stroke-dashoffset) */
  --site-stagger:     70ms;    /* between pieces that appear in order */
  --site-float:       7s;      /* a floating card, ±6px, alternate; variants 6–9.5s */
  --site-float-amp:   6px;
  --site-switch:      3.2s;    /* the self-switching scope, in the script */
}

@media (max-width: 900px) {
  :root {
    --site-pad:       20px;
    --site-section-y: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --site-dur-reveal: 0s;
    --site-dur-fill:   0s;
    --site-dur-arc:    0s;
    --site-dur-rise:   0s;
    --site-dur-draw:   0s;
    --site-stagger:    0ms;
    --site-float:      0s;
    --site-float-amp:  0px;
  }
}

/* makeeng money — the public site: the fourth surface of the design system, «web pública»
   (docs/public-web.md; design system v3.14, readme → Public Web Layout). site/build.mjs
   writes, above this file, the self-hosted fonts' @font-face rules and the token sections of
   web/src/styles/makeeng.css (the generated copy of the design system, without its Google
   Fonts import and without the application's components); nothing here names a hex value
   that a token or an --app-* role already carries. The light body is B's (white cards on a
   very light ground); the head is C's (a deep Peacock band that stays dark in both themes).
   Dark mode follows the device through the --app-* roles, as the application does, with no
   toggle and nothing stored.

   Every --site-* value this file reads is a token of the design system (tokens/site.css,
   since v3.14): the band and its text, lines and hover fill (--site-band-*), the measure
   (--site-wrap, --site-pad, --site-section-y, --site-side-w), the geometry (--site-radius-card,
   --site-radius-btn, --site-pill) and the motion (--site-ease, the --site-dur-* durations,
   --site-stagger, --site-float, --site-float-amp), which fall to zero under reduced motion.
   The one value defined here is the header's height, a measure of this page alone.
   The floor is the brand's: no text under 9px, here or inside a graphic. */

:root {
  --site-header-h: 70px;
}

/* ---- the page ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  font-family: var(--font-display);
  font-variation-settings: var(--var-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--app-text);
  background: var(--app-ground);
  -webkit-text-size-adjust: 100%;
}
b, strong { font-variation-settings: var(--var-bold); font-weight: normal; }
em { font-style: italic; }
a { color: var(--app-text-link); text-decoration: none; }
a:hover { color: var(--app-text-link-hover); text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: var(--app-focus-ring); outline-offset: var(--app-focus-offset); }
.wrap { max-width: var(--site-wrap); margin: 0 auto; padding: 0 var(--site-pad); }
[id] { scroll-margin-top: calc(var(--site-header-h) + 12px); }

h1, h2, h3 { font-variation-settings: var(--var-title); font-weight: normal; color: var(--app-text-strong); margin: 0; }
h1 { font-size: 70px; line-height: .97; letter-spacing: -.02em; }
h2 { font-size: 46px; line-height: 1.02; letter-spacing: -.015em; }
h3 { font-size: 32px; line-height: 1.06; letter-spacing: -.01em; }
p { margin: 0; }
.overline { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--app-text-accent); margin: 0; }
.overline + h1, .overline + h2, .overline + h3 { margin-top: 14px; }
.lead { font-size: 19px; line-height: 1.55; color: var(--app-text-dim); }
.body { font-size: 17px; line-height: 1.6; color: var(--app-text-dim); }
.fine { font-family: var(--font-mono); font-size: 12px; color: var(--app-text-faint); }
.note { font-size: 14px; color: var(--app-text-dim); margin-top: 8px; }
.label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--app-text-faint); }
.line { font-family: var(--font-mono); font-size: 13px; color: var(--app-text-strong); margin-top: 8px; }
.kpi { font-family: var(--font-mono); font-size: 28px; line-height: 1.1; color: var(--app-text-strong); font-weight: 500; letter-spacing: -.01em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi-sm { font-size: 22px; }
.mt6 { margin-top: 6px; }
.centre { text-align: center; max-width: 780px; margin: 0 auto; }
.centre .lead { margin-top: 18px; }
.sec { padding: var(--site-section-y) 0; }

/* ---- buttons, chips, cards ------------------------------------------------------------ */
.btn {
  display: inline-block;
  font-variation-settings: var(--var-bold);
  font-size: 16px;
  line-height: 1.3;
  padding: 13px 24px;
  background: var(--app-accent-deep);
  color: var(--app-text-on-accent);
  border: 1px solid transparent;
  border-radius: var(--site-radius-btn);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--app-text-accent); color: var(--app-text-on-accent); text-decoration: none; }
.btn-lg { padding: 15px 28px; }
.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn-ghost { background: transparent; color: var(--app-text-strong); border-color: var(--app-border); }
.btn-ghost:hover { background: var(--app-surface-tint); color: var(--app-text-strong); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.4;
  padding: 3px 9px; border-radius: var(--site-pill);
  background: var(--app-flat-tint); color: var(--app-flat-text); white-space: nowrap;
}
.chip.good { background: var(--app-good-tint); color: var(--app-good-text); }
.chip.bad { background: var(--app-bad-tint); color: var(--app-bad-text); }
.card { background: var(--app-surface); border-radius: var(--site-radius-card); box-shadow: var(--app-elev-2); padding: 18px 20px; }
.card-tight { padding: 10px 14px; }
.card-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.w200 { width: 200px; }

/* ---- the header ----------------------------------------------------------------------- */
.top-wrap { background: var(--app-surface); }
.page .top-wrap, html.js .home .top-wrap { position: sticky; top: 0; z-index: 30; }
.home .top-wrap { background: var(--site-band); }
.top-wrap.scrolled, .top-wrap.solid { background: var(--app-surface); box-shadow: var(--app-elev-1); }
.top { display: flex; align-items: center; gap: 28px; padding: 20px 0; min-height: var(--site-header-h); }
.brand { display: block; color: var(--app-text-strong); }
/* On hover the whole lockup takes `money`'s own colour (Martín, 22 October 2026: the link's
   hover tint was too light); the rule is restated below for the band and the footer, whose
   colour rules would otherwise win. */
.brand:hover { color: var(--mk-suffix, var(--peacock-700)); text-decoration: none; }
.top .mk-lockup { height: 22px; width: auto; }
.top-nav { display: flex; gap: 24px; margin-left: auto; font-size: 15px; }
.top-nav a { color: var(--app-text-dim); padding: 6px 10px; margin: -6px -2px; border-radius: var(--site-radius-btn); }
.top-nav a:hover { color: var(--app-text-strong); background: var(--app-surface-tint); text-decoration: none; }
.top-actions { display: flex; gap: 10px; align-items: center; }
/* Over the band: light text, the lockup's `money` in the light teal, the buttons re-coloured. */
.home .top-wrap:not(.scrolled) { --mk-suffix: var(--site-band-accent); }
.home .top-wrap:not(.scrolled) .brand { color: var(--site-band-text); }
.home .top-wrap:not(.scrolled) .brand:hover { color: var(--mk-suffix); }
.home .top-wrap:not(.scrolled) .top-nav a { color: var(--site-band-text-dim); }
.home .top-wrap:not(.scrolled) .top-nav a:hover { color: var(--site-band-text); background: var(--site-band-hover); }
.home .top-wrap:not(.scrolled) .btn-ghost { color: var(--site-band-text); border-color: var(--site-band-line); }
.home .top-wrap:not(.scrolled) .btn-ghost:hover { background: var(--site-band-hover); }
.home .top-wrap:not(.scrolled) .btn:not(.btn-ghost) { background: var(--site-band-accent); color: var(--site-band-text-on-accent); }
.home .top-wrap:not(.scrolled) .btn:not(.btn-ghost):hover { background: var(--site-band-accent-hover); }

/* ---- the head: C's dark band ---------------------------------------------------------- */
.band { background: var(--site-band); color: var(--site-band-text); }
.band { --mk-suffix: var(--site-band-accent); }
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; padding: 56px 0 120px; }
.hero h1 { color: var(--site-band-text); }
.hero .overline { color: var(--site-band-accent); }
.hero .lead { color: var(--site-band-text-dim); margin-top: 22px; max-width: 30em; }
.hero .fine { color: var(--site-band-text-faint); }
.hero .cta { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.fine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; line-height: 1.5; }
.note-star { margin-top: 14px; max-width: 30em; }
.hero .btn { background: var(--site-band-accent); color: var(--site-band-text-on-accent); }
.hero .btn:hover { background: var(--site-band-accent-hover); color: var(--site-band-text-on-accent); }
.mark { text-decoration: underline; text-decoration-color: var(--comp); text-decoration-thickness: 4px; text-underline-offset: .12em; text-decoration-skip-ink: none; }
.hero-visual { position: relative; padding: 36px 0 56px 28px; }
.shot-frame { background: var(--app-surface); border-radius: var(--site-radius-card); box-shadow: var(--app-elev-2); overflow: hidden; border: 1px solid var(--site-band-line); }
.shot-frame .chrome { display: flex; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--app-border-soft); background: var(--app-surface-sunken); }
.shot-frame .chrome i { width: 8px; height: 8px; border-radius: 50%; background: var(--app-border); }
.shot-frame img { width: 100%; height: auto; }
.floaters { position: absolute; inset: 0; pointer-events: none; }
.floater { position: absolute; z-index: 2; box-shadow: var(--app-elev-2); }
.floater.f1 { left: 0; bottom: 0; width: 230px; }
.floater.f2 { right: -18px; top: 0; width: 200px; }
.floater.f3 { right: 24px; bottom: 18px; padding: 8px 12px; }

/* ---- the drawn graphics ----------------------------------------------------------------- */
.bar2 { display: flex; height: 10px; border-radius: var(--site-pill); overflow: hidden; background: var(--app-surface-sunken); margin-top: 10px; }
.bar2 i { display: block; height: 100%; width: var(--w); }
.p1 { background: var(--series-1); } .p2 { background: var(--series-2); }
.who { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11.5px; color: var(--app-text-dim); margin-top: 6px; }
.gbar { height: 8px; background: var(--app-surface-sunken); border-radius: var(--site-pill); margin-top: 12px; overflow: hidden; }
.gbar-lg { height: 10px; }
.gbar i { display: block; height: 100%; width: var(--w); background: var(--series-3); border-radius: var(--site-pill); }
.gbar i.s1 { background: var(--series-1); } .gbar i.s2 { background: var(--series-2); }
.gbar i.s3 { background: var(--series-3); } .gbar i.s4 { background: var(--series-4); }
.gbar i.s5 { background: var(--series-5); }
.moves { display: grid; gap: 10px; margin-top: 14px; }
.move { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; font-size: 14px; color: var(--app-text-strong); padding-bottom: 10px; border-bottom: 1px solid var(--app-border-soft); }
.move-concept { font-family: var(--font-mono); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.move-amount { font-family: var(--font-mono); font-size: 12.5px; color: var(--app-text-dim); font-variant-numeric: tabular-nums; }

.stage { position: relative; background: var(--app-surface-tint); border-radius: var(--site-radius-card); padding: 48px 40px; display: grid; place-items: center; }
.panel .stage { min-height: 420px; }
.stage > .card:not(.mini) { width: 100%; max-width: 420px; }
.mini { position: absolute; z-index: 2; width: auto; }
.mini.tl { left: -10px; top: 24px; } .mini.br { right: -12px; bottom: 28px; }
.mini.tr { right: -8px; top: 22px; } .mini.bl { left: -12px; bottom: 30px; }

.seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--app-surface-sunken); border-radius: var(--site-pill); }
.seg span, .seg button { font-size: 13px; line-height: 1.4; padding: 5px 12px; border-radius: var(--site-pill); color: var(--app-text-dim); background: transparent; border: 0; }
.seg button { cursor: pointer; }
.seg .on, .seg button[aria-pressed="true"] { background: var(--app-accent-deep); color: var(--app-text-on-accent); font-variation-settings: var(--var-bold); }
.rows { display: grid; gap: 14px; margin-top: 18px; }
.row-name { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--app-text-strong); }
.row-name small { font-family: var(--font-mono); font-size: 11.5px; color: var(--app-text-faint); }

.meters { position: relative; display: grid; gap: 14px; margin-top: 30px; --m-name: 96px; --m-pct: 46px; --m-gap: 12px; }
.meter { display: grid; grid-template-columns: var(--m-name) minmax(0, 1fr) var(--m-pct); gap: var(--m-gap); align-items: center; font-size: 14px; }
.track { position: relative; height: 10px; background: var(--app-surface-sunken); border-radius: var(--site-pill); overflow: hidden; }
.track i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: var(--site-pill); background: var(--app-accent); }
.track i.over { background: var(--series-6); }
.meter .pct { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--app-text-dim); }
.meter .pct.over { color: var(--app-critical); }
.today { position: absolute; top: -8px; bottom: -4px; width: 0; border-left: 1px dashed var(--app-text-faint); left: calc(var(--m-name) + var(--m-gap) + (100% - var(--m-name) - var(--m-pct) - 2 * var(--m-gap)) * var(--at)); }
.today span { position: absolute; top: -18px; left: 0; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10.5px; color: var(--app-text-faint); white-space: nowrap; }

/* the portfolio: a donut of three arcs (pathLength 100), the figure at its centre, a table */
.donut-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 12px; }
.donut { position: relative; width: 132px; height: 132px; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut .arc { fill: none; stroke-width: 14; stroke-dasharray: var(--arc) 100; stroke-dashoffset: var(--off); }
.donut .arc.s1 { stroke: var(--series-1); } .donut .arc.s2 { stroke: var(--series-2); } .donut .arc.s3 { stroke: var(--series-3); }
.donut-centre { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.donut-centre .kpi { margin: 0; font-size: 17px; }
.legend-col { flex-direction: column; gap: 8px; margin-top: 0; }
.legend-col span { display: flex; align-items: center; }
.legend-col small { margin-left: auto; padding-left: 10px; color: var(--app-text-faint); font-size: 11px; }
.positions { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
.positions th { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--app-text-faint); font-weight: normal; text-align: right; padding: 0 0 6px; border-bottom: 1px solid var(--app-border-soft); }
.positions th:first-child, .positions td:first-child { text-align: left; }
.positions td { padding: 7px 0; border-bottom: 1px solid var(--app-border-soft); text-align: right; color: var(--app-text-strong); }
.positions .ret { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.positions .ret.good { color: var(--app-good-text); } .positions .ret.bad { color: var(--app-bad-text); }

/* the home: a house that fills from the ground as the mortgage is paid */
.house-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: center; margin-top: 12px; }
.house { width: 150px; height: auto; }
.house-ground { fill: var(--app-surface-sunken); }
.house-paid { fill: var(--series-3); }
.house-line { fill: none; stroke: var(--app-text-dim); stroke-width: 2; stroke-linejoin: round; }
.house-door { fill: var(--app-surface); stroke: var(--app-text-dim); stroke-width: 1.5; }
.house-window { fill: var(--app-surface); stroke: var(--app-text-dim); stroke-width: 1.5; }
.house-figures { display: grid; gap: 14px; }
.house-figures .label { display: block; }
.house-figures .line, .house-figures .kpi { margin-top: 2px; }

/* the net worth: three stacked bands, the purchase marked */
.stack { position: relative; }
.spark-stack .band { stroke: none; }
.spark-stack .band.s1 { fill: var(--series-1); opacity: .85; }
.spark-stack .band.s2 { fill: var(--series-2); opacity: .8; }
.spark-stack .band.s3 { fill: var(--series-3); opacity: .8; }
.buy-line { stroke: var(--app-text-faint); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.buy-tag { position: absolute; top: 8px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10.5px; color: var(--app-text-dim); background: var(--app-surface); padding: 2px 6px; border-radius: var(--site-pill); border: 1px solid var(--app-border-soft); white-space: nowrap; }
.legend span[title] { cursor: help; border-bottom: 1px dotted var(--app-text-faint); }
.spark { display: block; width: 100%; height: 130px; margin-top: 12px; }
.spark .area { fill: var(--app-surface-tint); }
.spark .ln { fill: none; stroke: var(--app-accent); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; color: var(--app-text-dim); margin-top: 12px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.legend .s1 { background: var(--series-1); } .legend .s2 { background: var(--series-2); }
.legend .s3 { background: var(--series-3); } .legend .s4 { background: var(--series-4); }

.words { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.words span { font-family: var(--font-mono); font-size: 13px; padding: 9px 8px; border: 1px solid var(--app-border); border-radius: var(--site-pill); color: var(--app-text-faint); background: var(--app-surface); white-space: nowrap; overflow: hidden; }
.words b { color: var(--app-text-accent); font-variation-settings: normal; font-weight: 500; margin-right: 6px; }
.code6 { display: flex; gap: 6px; margin-top: 14px; }
.code6 span { width: 30px; height: 38px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 18px; color: var(--app-text-strong); border: 1px solid var(--app-border); border-radius: var(--site-pill); background: var(--app-surface); }

.zeros { display: grid; gap: 10px; margin-top: 6px; }
.zeros div { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--app-border-soft); padding: 8px 0; font-size: 15px; }
.zeros strong { font-family: var(--font-mono); font-size: 26px; font-weight: 500; font-variation-settings: normal; color: var(--app-text-accent); font-variant-numeric: tabular-nums; }

.eu { position: relative; width: 190px; height: 190px; }
.eu svg { width: 100%; height: 100%; }
.eu .dot { fill: var(--app-accent); }
.eu .spin { transform-origin: 75px 75px; }
.eu-centre { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 16px; color: var(--app-text-accent); }
.eu-c1 { left: 28px; top: 36px; } .eu-c2 { right: 28px; bottom: 40px; } .eu-c3 { right: 36px; top: 52px; }

.pay { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; }
.pay .link { height: 0; border-top: 2px dashed var(--app-border-strong); }

.flow { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.1fr); gap: 14px; align-items: center; width: 100%; }
.files { display: grid; gap: 9px; }
.file { font-family: var(--font-mono); font-size: 12.5px; padding: 9px 12px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--site-pill); box-shadow: var(--app-elev-1); }
.arrow { height: 2px; background: var(--app-accent); position: relative; }
.arrow::after { content: ""; position: absolute; right: -1px; top: -5px; border: 6px solid transparent; border-left-color: var(--app-accent); border-right: 0; }
.currencies { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }

/* ---- the tools, as tabs ------------------------------------------------------------------ */
.tools { padding-top: 0; }
.tabs { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 48px 0 0; }
html:not(.js) .tabs { display: none; }
.tabs button { font-size: 15px; padding: 9px 18px; border-radius: var(--site-pill); border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-text-dim); cursor: pointer; }
.tabs button:hover { background: var(--app-surface-tint); }
.tabs button[aria-selected="true"] { background: var(--app-accent-deep); border-color: var(--app-accent-deep); color: var(--app-text-on-accent); font-variation-settings: var(--var-bold); }
.panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; margin-top: 56px; }
html.js .panel:not(.on) { display: none; }
.panel .body { margin-top: 18px; max-width: 30em; }

/* ---- privacy and Hecha en España: alternating rows -------------------------------------- */
.privacy { background: var(--app-surface); border-top: 1px solid var(--app-border); border-bottom: 1px solid var(--app-border); }
.privacy .centre { margin-bottom: 96px; }
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.feature + .feature { margin-top: 112px; }
.feature.flip .f-copy { order: 2; }
.feature .body { margin-top: 18px; max-width: 30em; }

/* ---- prices ------------------------------------------------------------------------------ */
.trial-note { margin-top: 22px; font-size: 17px; }
.prices { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; margin-top: 56px; }
.card-extra { border: 1px dashed var(--app-border-strong); box-shadow: none; }
.extra-title { font-variation-settings: var(--var-title); font-size: 22px; line-height: 1.15; color: var(--app-text-strong); margin-top: 10px; }
.monthlies { display: grid; gap: 20px; }
.card-price { padding: 24px; }
.price { font-family: var(--font-mono); font-size: 36px; color: var(--app-text-strong); font-weight: 500; margin-top: 6px; font-variant-numeric: tabular-nums; }
.price small { font-size: 13px; color: var(--app-text-faint); font-weight: 400; }
.annual { padding: 28px; }
.annual .seg { margin: 16px 0 20px; }
.annual .seg button { font-size: 14px; padding: 6px 14px; }
.annual .amount { font-family: var(--font-mono); font-size: 60px; line-height: 1; color: var(--app-text-strong); font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.annual .per { font-family: var(--font-mono); font-size: 12.5px; color: var(--app-text-faint); margin-top: 10px; }
.annual .rail { margin: 26px 0 6px; }
.annual input[type="range"] { width: 100%; accent-color: var(--app-accent-deep); margin: 0; cursor: pointer; }
.annual .marks { position: relative; height: 26px; font-family: var(--font-mono); font-size: 11px; color: var(--app-text-faint); }
.annual .marks span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.annual .marks span.first { transform: none; }
.annual .marks span.last { transform: translateX(-100%); }
.levels { list-style: none; padding: 0; margin: 10px 0 0; }
.levels li { display: flex; gap: 12px; align-items: flex-start; padding: 7px 0; font-size: 15px; color: var(--app-text-faint); }
.levels li small { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--app-text-faint); }
.tick { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; }
.tick circle { fill: none; stroke: var(--app-border); }
.tick path { fill: none; stroke: var(--app-border); stroke-width: 1.6; }
.levels li.on { color: var(--app-text); }
.levels li.on .tick circle { fill: var(--app-accent-deep); stroke: var(--app-accent-deep); }
.levels li.on .tick path { stroke: var(--app-text-on-accent); }

/* ---- the line to the questions, the close, the footer ----------------------------------- */
.faq-line { padding-top: 0; }
.close { padding-top: 0; }
.final { text-align: center; background: var(--app-surface); border-radius: var(--site-radius-card); box-shadow: var(--app-elev-2); padding: 88px 24px; }
.final .lead { margin: 18px auto 0; max-width: 30em; }
.final .btn { margin-top: 30px; }
.foot { border-top: 1px solid var(--app-border); padding: 32px 0 48px; font-family: var(--font-mono); font-size: 12px; color: var(--app-text-faint); }
.foot .brand { color: var(--app-text-strong); }
.foot .brand:hover { color: var(--mk-suffix, var(--peacock-700)); }
.foot .mk-lockup { height: 16px; width: auto; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; }
.foot-copy { margin-top: 18px; }

/* ---- the other pages: a head across the width, then a side column and the reading column -- */
.page-head { padding: 72px 0 24px; border-bottom: 1px solid var(--app-border); }
.page-head h1 { font-size: 46px; line-height: 1.02; letter-spacing: -.015em; max-width: 24em; }
/* The lead and the reading column run the container's full width (Martín, 22 October 2026:
   a column stopping at three quarters looked unbalanced under the head). */
.page-head .lead { margin-top: 20px; }
.page-head .fine { margin-top: 14px; }
.reading-sec { padding: 40px 0 120px; }
.page-grid { display: grid; grid-template-columns: var(--site-side-w) minmax(0, 1fr); gap: 56px; align-items: start; }
.side { position: sticky; top: calc(var(--site-header-h) + 16px); display: grid; gap: 22px; }
.side > .label { margin: 0 0 -12px; }
.side-toc, .side-nav { display: grid; gap: 2px; }
.side-toc a, .side-nav a { display: block; padding: 7px 10px; border-radius: var(--site-radius-btn); color: var(--app-text-dim); font-size: 14px; line-height: 1.35; }
.side-toc a:hover, .side-nav a:hover { background: var(--app-surface-tint); color: var(--app-text-strong); text-decoration: none; }
.side-nav { padding-top: 16px; border-top: 1px solid var(--app-border); }
.side-nav a[aria-current="page"] { color: var(--app-text-accent); font-variation-settings: var(--var-bold); }
.side-search { display: grid; gap: 8px; }
html:not(.js) .side-search { display: none; }
.search { font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--app-border); border-radius: var(--site-radius-btn); background: var(--app-surface); color: var(--app-text); width: 100%; }
.search:focus-visible { border-color: var(--app-border-accent); }
.reading { min-width: 0; }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group h2 { font-size: 30px; padding-bottom: 12px; border-bottom: 1px solid var(--app-border); }
.faq-item { border-bottom: 1px solid var(--app-border-soft); }
.faq-item[hidden] { display: none; }
/* while searching, the groups dissolve and the matching questions line up by rank */
.reading.searching { display: flex; flex-direction: column; }
.reading.searching .faq-group { display: contents; }
.reading.searching .faq-group h2 { display: none; }
.reading.searching .card-contact { order: 9999; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 18px 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-mono); font-size: 20px; color: var(--app-text-accent); flex: 0 0 auto; }
.faq-item[open] summary::after { content: "–"; }
.faq-item summary:hover h3 { color: var(--app-text-accent); }
.faq-item h3 { font-size: 21px; line-height: 1.25; }
.faq-answer { padding-bottom: 22px; }
.faq-answer p:first-child { margin-top: 0; }
.card-contact { margin-top: 48px; padding: 24px; display: grid; gap: 16px; justify-items: start; }
.faq-item p, .prose p { font-size: 17px; line-height: 1.65; color: var(--app-text); margin-top: 14px; }
.prose h2 { font-size: 30px; margin-top: 48px; }
.prose h3 { font-size: 22px; margin-top: 32px; }
.prose ul { margin: 14px 0 0; padding-left: 1.2em; font-size: 17px; line-height: 1.65; color: var(--app-text); }
.prose li + li { margin-top: 6px; }
.prose p em { color: var(--app-text-dim); }
.pieces { display: grid; gap: 20px; }
.piece { display: block; color: inherit; padding: 24px; }
.piece:hover { text-decoration: none; box-shadow: var(--app-elev-2), 0 0 0 1px var(--app-border-strong); }
.piece h2 { font-size: 26px; }
.piece .body { margin-top: 10px; }
.piece .fine { margin-top: 12px; }
.card-note { padding: 24px; }
.card-note p + p { margin-top: 12px; }
/* the notice that the platform is still being built, above the reading column of the guides
   and the comparisons; and the page *Crear cuenta* opens until the alta */
.card-building { margin-bottom: 32px; border-left: 4px solid var(--app-accent); }
.soon-sec { padding: 40px 0 120px; }
.soon-card { padding: 28px; display: grid; gap: 20px; }
.soon-links { display: flex; flex-wrap: wrap; gap: 10px; }
.soon-invite { margin-top: 24px; font-size: 14px; color: var(--app-text-dim); }

/* ---- the legal texts (step 12, 12.2.6): aviso legal, privacidad, condiciones -------------
   Their Markdown is wider than a guide's (content.mjs legalDoc()): `####`, numbered and nested
   lists, `code`, tables. A table sits in .table-wrap, which scrolls sideways on a phone rather
   than squeezing a column to a word per line. */
.legal-page .side { max-height: calc(100vh - var(--site-header-h) - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 2px 2px; }
.legal-page .side > .side-nav:first-child { border-top: 0; padding-top: 0; }
.side-toc a.toc-sub { padding-left: 24px; font-size: 13px; }
.prose h4 { font-variation-settings: var(--var-title); font-weight: normal; color: var(--app-text-strong); font-size: 18px; line-height: 1.3; margin: 28px 0 0; }
.prose h2 + h3, .prose h3 + h4 { margin-top: 20px; }
.prose ol { margin: 14px 0 0; padding-left: 1.5em; font-size: 17px; line-height: 1.65; color: var(--app-text); }
.prose li > ul { margin-top: 6px; padding-left: 1.2em; font-size: inherit; list-style-type: circle; }
.prose code { font-family: var(--font-mono); font-size: 14px; padding: 1px 6px; border-radius: var(--site-radius-btn); background: var(--app-surface-sunken); color: var(--app-text-strong); }
.prose blockquote { margin: 18px 0 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--app-border-strong); }
.prose blockquote p { color: var(--app-text-dim); margin-top: 0; }
.prose .table-wrap { margin-top: 18px; overflow-x: auto; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--site-radius-btn); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; color: var(--app-text); }
.prose th { text-align: left; vertical-align: bottom; font-family: var(--font-mono); font-size: 12px; font-weight: normal; letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--app-text-faint); background: var(--app-surface-sunken); padding: 10px 14px; border-bottom: 1px solid var(--app-border); }
.prose td { vertical-align: top; min-width: 7.5em; padding: 10px 14px; border-bottom: 1px solid var(--app-border-soft); overflow-wrap: break-word; }
.prose th + th, .prose td + td { border-left: 1px solid var(--app-border-soft); }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose td code { font-size: 13px; }
/* A datum that exists only once registration opens (the NIF, the address, the phone): it
   reads as one quiet phrase, not as a gap (DL-227). */
.al-abrir { font-style: italic; color: var(--app-text-dim); }

/* ---- motion: allowed on this surface only (design system v3.14, the brand's one licence),
   and only with the script and without a reduced-motion preference. The hidden starting
   states apply once `js` is on <html>, so a page without the script shows everything at rest;
   under reduced motion nothing moves and everything is there. The ease and the durations are
   the design system's tokens (tokens/site.css). Ease-out, no bounce, no scale. ---------------- */
@keyframes float { from { transform: translateY(calc(-1 * var(--site-float-amp))); } to { transform: translateY(var(--site-float-amp)); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  html.js .fade { opacity: 0; transform: translateY(10px); }
  html.js .in .fade { opacity: 1; transform: none; transition: opacity var(--site-dur-reveal) var(--site-ease), transform var(--site-dur-reveal) var(--site-ease); transition-delay: calc(var(--i, 0) * var(--site-stagger)); }
  html.js .fillx { transform: scaleX(0); transform-origin: left center; }
  html.js .in .fillx { transform: scaleX(1); transition: transform var(--site-dur-fill) var(--site-ease); transition-delay: var(--d, 0s); }
  html.js .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
  html.js .in .draw { stroke-dashoffset: 0; transition: stroke-dashoffset var(--site-dur-draw) var(--site-ease); }
  html.js .donut .arc { stroke-dasharray: 0 100; }
  html.js .in .donut .arc { stroke-dasharray: var(--arc) 100; transition: stroke-dasharray var(--site-dur-arc) var(--site-ease); transition-delay: var(--d, 0s); }
  html.js .fill-up { transform: scaleY(0); transform-origin: center bottom; transform-box: fill-box; }
  html.js .in .fill-up { transform: scaleY(1); transition: transform var(--site-dur-rise) var(--site-ease) .2s; }
  html.js .spark .area { opacity: 0; }
  html.js .in .spark .area { opacity: 1; transition: opacity var(--site-dur-arc) var(--site-ease) .5s; }
  .float { animation: float var(--site-float) ease-in-out infinite alternate; }
  .float.d1 { animation-duration: 8.5s; animation-delay: -2s; }
  .float.d2 { animation-duration: 6.2s; animation-delay: -4s; }
  .float.d3 { animation-duration: 9.4s; animation-delay: -1s; }
  .eu .spin { animation: spin 60s linear infinite; }
  .top-wrap { transition: background .2s, box-shadow .2s; }
  .seg span, .seg button { transition: background .3s, color .3s; }
  .levels li, .tick circle, .tick path { transition: color .3s, fill .3s, stroke .3s; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- narrow: tablet, then phone ---------------------------------------------------------- */
@media (max-width: 900px) {
  /* the gutter (20px) and the sections (88px) step down in tokens/site.css */
  .top-nav { display: none; }
  .top-actions { margin-left: auto; }
  h1 { font-size: 48px; }
  h2, .page-head h1 { font-size: 36px; }
  h3 { font-size: 27px; }
  .hero, .feature, .prices, .panel { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .feature.flip .f-copy { order: 0; }
  .feature + .feature { margin-top: 88px; }
  .privacy .centre { margin-bottom: 72px; }
  .page-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .side { position: static; }
  .side-nav { display: flex; flex-wrap: wrap; gap: 4px 10px; }
  .side-toc { display: flex; flex-wrap: wrap; gap: 4px 6px; }
  /* above the text, a legal page lists its parts only (condiciones has 21 numbered sections) */
  .legal-page .side { max-height: none; overflow-y: visible; padding: 0; }
  .side-toc a.toc-sub { display: none; }
}
@media (max-width: 560px) {
  :root { --site-header-h: 62px; }
  h1 { font-size: 40px; }
  h2, .page-head h1 { font-size: 32px; }
  .top { padding: 14px 0; gap: 16px; }
  .top .mk-lockup { height: 19px; }
  .btn-sm { padding: 7px 12px; font-size: 13px; }
  .hero { padding: 24px 0 72px; }
  .hero-visual { padding: 24px 0 92px; }
  .floater.f1 { width: 190px; left: 0; bottom: 0; }
  .floater.f2 { width: 170px; right: -6px; top: -4px; }
  .floater.f3 { display: none; }
  .stage { padding: 22px 16px; }
  .panel .stage { min-height: 0; }
  .mini { display: none; }
  .tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .tabs button { flex: 0 0 auto; }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .arrow { width: 2px; height: 26px; margin: 0 auto; }
  .arrow::after { right: auto; left: -5px; top: auto; bottom: -1px; border: 6px solid transparent; border-top-color: var(--app-accent); border-bottom: 0; }
  .pay { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pay .link { width: 2px; height: 40px; border-top: 0; border-left: 2px dashed var(--app-border-strong); margin: 0 auto; }
  .meters { --m-name: 84px; --m-pct: 42px; --m-gap: 10px; }
  .words { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .eu { width: 150px; height: 150px; }
  .annual { padding: 22px 18px; }
  .annual .amount { font-size: 48px; }
  .kpi { font-size: 24px; }
  .final { padding: 64px 20px; }
  .faq-item h3 { font-size: 21px; }
}

/* ---- a legal text on paper: the sign-up's «Descargar las condiciones que has aceptado (PDF)»
   opens /legal/condiciones/?imprimir, which prints itself (site.js). Only the text: no bar, no
   footer, no side column; ink on paper whatever the device's theme; a table, a heading with
   the lines under it and a list item kept whole where the page allows. ----------------------- */
@media print {
  :root:not([data-theme="light"]), :root {
    color-scheme: light;
    --app-ground: var(--paper);
    --app-surface: var(--paper);
    --app-surface-sunken: var(--paper);
    --app-border: var(--ink-faint);
    --app-border-soft: var(--line);
    --app-text: var(--ink);
    --app-text-strong: var(--ink);
    --app-text-dim: var(--ink-dim);
    --app-text-faint: var(--ink-dim);
    --app-text-link: var(--ink);
  }
  .legal-page { background: var(--paper); color: var(--ink); font-size: 13px; }
  .legal-page .top-wrap, .legal-page .foot, .legal-page .side { display: none; }
  .legal-page .wrap { max-width: none; padding: 0; }
  .legal-page .page-grid { display: block; }
  .legal-page .page-head { padding: 0 0 10px; }
  .legal-page .page-head h1 { font-size: 26px; max-width: none; }
  .legal-page .reading-sec { padding: 14px 0 0; }
  .legal-page .prose p, .legal-page .prose ul, .legal-page .prose ol { font-size: 13px; line-height: 1.5; margin-top: 8px; }
  .legal-page .prose li + li { margin-top: 3px; }
  .legal-page .prose h2 { font-size: 20px; margin-top: 22px; }
  .legal-page .prose h3 { font-size: 16px; margin-top: 16px; }
  .legal-page .prose h4 { font-size: 14px; margin-top: 12px; }
  .legal-page .prose h2, .legal-page .prose h3, .legal-page .prose h4 { break-after: avoid; page-break-after: avoid; }
  .legal-page .prose .table-wrap { overflow: visible; border-color: var(--ink-faint); margin-top: 10px; }
  .legal-page .prose table { font-size: 12px; }
  .legal-page .prose th { font-size: 12px; padding: 5px 8px; }
  .legal-page .prose td { padding: 5px 8px; min-width: 0; }
  .legal-page .prose .table-wrap, .legal-page .prose tr, .legal-page .prose li { break-inside: avoid; page-break-inside: avoid; }
  .legal-page .prose a { text-decoration: none; }
  .legal-page .al-abrir { color: var(--ink-dim); }
}