/* GENERATED by packages/site/build.mjs - do not edit.
   design/tokens.css followed by packages/site/src/styles/site.css.
   Edit either source, not this file. */
/* ─────────────────────────────────────────────────────────────────────────
   Leadgible design tokens
   ─────────────────────────────────────────────────────────────────────────
   Extracted 2026-08-23 by `/design ingest` from the 25 approved Claude Design
   screens in `design/screens/`. Every value here is a value those mockups
   actually use — nothing is aspirational and nothing was invented.

   This file and `design/screens/` are the visual source of truth (CLAUDE.md
   §Source of Truth). Never hardcode a colour, size, radius or duration in a
   component; if a value you need is missing here, that is a design question,
   not a licence to invent one.

   Names follow `design/direction-brief.md` (approved Checkpoint 2a) with an
   `--mdx-` prefix. Divergences between the brief, the authored COMPONENT
   SPECS and what the screens actually built are recorded in
   `design/DESIGN-SYSTEM.md`.

   Light theme only — the brief defers dark mode as a later decision.
   ───────────────────────────────────────────────────────────────────────── */

:root {

  /* ── Brand ──────────────────────────────────────────────────────────────
     Identity and interaction. Never used to mean a band. */
  --mdx-brand:            #1A6FE0;  /* primary buttons, links, focus, avatars */
  --mdx-brand-deep:       #1355B4;  /* hover, link text                       */
  --mdx-brand-tint:       #E7EFFC;  /* ghost buttons, active nav, tinted rows  */

  /* ── Bands ──────────────────────────────────────────────────────────────
     Semantic. These carry meaning and never change colour.
     The ladder runs nurture → review → hot: grey → amber → green.
     THERE IS NO RED IN THE LADDER — red is reserved for errors. */
  --mdx-hot:              #1FA97A;
  --mdx-hot-ink:          #15795A;  /* pill text on hot-tint                   */
  --mdx-hot-tint:         #E4F5EE;  /* pill background                         */
  --mdx-review:           #F0A526;
  --mdx-review-ink:       #8A5F0B;
  --mdx-review-tint:      #FDF1DC;
  --mdx-nurture:          #8D958F;
  --mdx-nurture-ink:      #5C646E;  /* nurture pills use slate, not a own ink  */
  --mdx-nurture-tint:     #EFF1EF;

  /* Band strokes — darker variants for thin lines (4–9px SVG flow strokes),
     where the flat band colour is too light to read on white.
     Currently used only by the funnel editor's branch diagram. */
  --mdx-hot-stroke:       #2F7D50;
  --mdx-review-stroke:    #B8801C;
  --mdx-nurture-stroke:   #9BA6B2;

  /* ── Neutrals ───────────────────────────────────────────────────────── */
  --mdx-ink:              #1A1D21;  /* primary text                            */
  --mdx-slate:            #5C646E;  /* secondary text, placeholders, eyebrows  */
  --mdx-ground:           #F4F6F8;  /* page background, tinted rows, row hover */
  --mdx-white:            #FFFFFF;  /* card surfaces                           */
  --mdx-line:             #E2E7EC;  /* borders, empty-state shapes             */
  --mdx-line-soft:        #EDF1F4;  /* internal dividers, skeleton blocks      */
  --mdx-line-strong:      #C3CBD4;  /* dashed drop targets, muted control edges*/

  /* ── Feedback ───────────────────────────────────────────────────────── */
  --mdx-error:            #D93B3B;  /* errors and destructive actions only     */

  /* ── Type ───────────────────────────────────────────────────────────────
     DM Sans throughout. No second family, no monospace anywhere — tabular
     figures come from DM Sans itself. Load the face explicitly; the fallback
     stack is not decorative, it is what ships when the CDN is slow. */
  --mdx-font:             "DM Sans", "Helvetica Neue", Arial, sans-serif;

  --mdx-text-11:          11px;     /* dense meta, chart axis labels           */
  --mdx-text-12:          12px;     /* eyebrow (with 700 / .1em / uppercase)   */
  --mdx-text-13:          13px;     /* table meta, helper text, small buttons  */
  --mdx-text-14:          14px;     /* field labels, points columns            */
  --mdx-text-15:          15px;     /* secondary body, controls, nav, rows     */
  --mdx-text-16:          16px;     /* body                                     */
  --mdx-text-17:          17px;     /* H3, card titles                          */
  --mdx-text-18:          18px;     /* auth sub-heading, lead-in paragraph       */
  --mdx-text-19:          19px;     /* the wordmark                              */
  --mdx-text-20:          20px;     /* modal titles                             */
  --mdx-text-22:          22px;     /* section heads inside a card               */
  --mdx-text-28:          28px;     /* panel headings below H2                   */
  --mdx-text-25:          25px;     /* H2                                       */
  --mdx-text-32:          32px;     /* the embed's question heading             */
  --mdx-text-h1:          clamp(31px, 4.8vw, 44px);  /* display H1              */
  --mdx-text-verdict:     clamp(27px, 3.6vw, 36px);  /* the Verdict; auth H1    */

  --mdx-weight-regular:   400;
  --mdx-weight-medium:    500;
  --mdx-weight-semibold:  600;
  --mdx-weight-bold:      700;

  --mdx-leading-tight:    1.07;     /* H1                                       */
  --mdx-leading-verdict:  1.13;     /* the Verdict block                        */
  --mdx-leading-heading:  1.16;     /* H2                                       */
  --mdx-leading-reason:   1.55;     /* the reason line under a verdict          */
  --mdx-leading-body:     1.6;

  --mdx-track-h1:        -0.032em;
  --mdx-track-verdict:   -0.034em;
  --mdx-track-h3:        -0.018em;
  --mdx-track-title:     -0.024em;  /* modal + dialogue titles; the embed's H2  */
  --mdx-track-eyebrow:    0.1em;    /* with 12px / 700 / uppercase              */

  /* ── Spacing — gaps on 2px, control padding on 1px ──────────────────── */
  /* The number IS the pixel value.
     GAPS are on a 2px scale (DECISION-038): 10px is the most-used gap in the
     whole system at 815 occurrences, with 6px, 2px and 14px close behind. An
     index scale meaning N x 4px cannot express 10px at all, which is how they
     were dropped from the first extraction.
     CONTROL PADDING IS ON 1px (DECISION-041). DECISION-038 measured `gap:` and
     was right about it; it never measured `padding:`, which is where the odd
     numbers live. Counted by property across all 25 screens: padding 9px x 392,
     padding 5px x 360, width/height 7px x 385, padding 3px x 90, top 11px x 54.
     Rounding 9px to 10px would change the height of every nav item and every
     button in the product, on 392 elements.                                   */
  --mdx-space-1-5:       1.5px;     /* drawn-icon hairline — bar, gap, border   */
  --mdx-space-2:           2px;     /* icon-to-label, meter bar gaps            */
  --mdx-space-3:           3px;     /* dense chip padding, tight insets         */
  --mdx-space-4:           4px;
  --mdx-space-5:           5px;     /* badge horizontal padding                 */
  --mdx-space-6:           6px;     /* label to field                           */
  --mdx-space-7:           7px;     /* the plan-usage pill, 7px 12px            */
  --mdx-space-8:           8px;
  --mdx-space-9:           9px;     /* nav item and ghost button, 9px 12px      */
  --mdx-space-10:         10px;     /* THE default gap — 815 uses               */
  --mdx-space-11:         11px;     /* badge and popover offsets                */
  --mdx-space-12:         12px;
  --mdx-space-14:         14px;
  --mdx-space-16:         16px;
  --mdx-space-18:         18px;
  --mdx-space-20:         20px;
  --mdx-space-22:         22px;     /* strength-meter bar, feature list stack */
  --mdx-space-24:         24px;
  --mdx-space-28:         28px;     /* auth card stack                          */
  --mdx-space-32:         32px;     /* 443 uses — page gutters, card stacks     */
  --mdx-space-40:         40px;     /* the 40px shape in an empty state          */
  --mdx-space-48:         48px;     /* empty / error state vertical padding     */
  --mdx-space-64:         64px;
  --mdx-space-56:         56px;     /* auth panel horizontal padding            */
  --mdx-space-72:         72px;     /* auth panel vertical padding              */
  /* Off-grid values the screens use deliberately and often: 2px (list-row gap),
     5px / 6px / 9px / 10px / 14px (control padding). Kept out of the scale on
     purpose — reach for a named component spec, not an arbitrary step. */

  /* ── Radius ─────────────────────────────────────────────────────────── */
  /* Below 6px the brief named nothing. Every step here was found by counting a
     property across all 25 screens, so the names ARE the values — there is no
     t-shirt size left between 2px and 5px, and inventing one would rank 4px
     below 5px (DECISION-072). This is the mark-internal range: the bars, lock
     shackles, bell squares and thumbnail rules drawn INSIDE an icon mark.
     Never a control — a control starts at --mdx-radius-sm. */
  --mdx-radius-1:          1px;     /* bars drawn inside a mark                 */
  --mdx-radius-2:          2px;     /* band swatches, lock bodies — 140 uses    */
  --mdx-radius-3:          3px;     /* small lock shackle — 49 uses, 9 screens  */
  --mdx-radius-4:          4px;     /* lock shackle, bell square, thumbnail
                                       rules — 75 uses, 12 screens              */
  --mdx-radius-5:          5px;     /* 16-18px mark and icon squares — 162 uses */
  --mdx-radius-sm:         6px;     /* icon slots, inline chips                 */
  --mdx-radius-control-sm: 8px;     /* small buttons, 26px evidence-row icons   */
  --mdx-radius-control:   10px;     /* buttons, inputs, rows, nav items         */
  --mdx-radius-card:      16px;     /* cards, modals, drawers                   */
  --mdx-radius-pill:     999px;     /* band tags and dots ONLY — never a button */

  /* ── Border ─────────────────────────────────────────────────────────── */
  --mdx-border:           1px solid var(--mdx-line);
  --mdx-border-soft:      1px solid var(--mdx-line-soft);
  --mdx-border-error:     1px solid var(--mdx-error);
  --mdx-border-dashed:    1px dashed var(--mdx-line-strong);

  /* ── Depth ──────────────────────────────────────────────────────────────
     Cards get the soft shadow. Everything else gets a border. */
  --mdx-shadow-card:      0 1px 2px rgba(20, 22, 25, .05),
                          0 8px 24px -12px rgba(20, 22, 25, .16);
  --mdx-shadow-modal:     0 24px 64px -16px rgba(20, 22, 25, .28);
  --mdx-shadow-drawer:  -16px 0 48px -16px rgba(20, 22, 25, .20);
  --mdx-backdrop:         rgba(20, 22, 25, .45);

  /* ── Opacity ────────────────────────────────────────────────────────
     Three steps inside 0.15, which reads like an accident and is not. The
     census counts them at 17, 20 and 3 screens, and they are not three amounts
     of recession — they are three REASONS a thing is receded, which is why
     they are named by reason and not by depth (DECISION-075):

       recessed  the control cannot be used — `disabled:`, a tab not yet
                 available — AND a control at rest that comes forward on hover.
                 One value, two meanings, so the name commits to neither: a
                 `--mdx-opacity-disabled` would make every at-rest affordance
                 in the system announce itself as disabled.
       muted     content that is not there yet. `--mdx-dur-pulse` already named
                 this step ("opacity 1 -> .55 -> 1") without defining it.
       withheld  present, complete, and held back by the PLAN rather than by
                 state — the locked "Powered by Leadgible" switch, and the
                 over-cap lead row whose band reads Hidden (DECISION-015).

     `recessed` and `withheld` are near-identical to the eye and opposite to a
     keyboard: one is unreachable, the other is reachable and refuses. */
  --mdx-opacity-recessed: .45;      /* cannot be used, or at rest until hover   */
  --mdx-opacity-muted:    .55;      /* skeletons; a not-yet-started step        */
  --mdx-opacity-withheld: .6;       /* present, and held back by the plan       */

  /* ── Focus — visible on every interactive element, no exceptions ────── */
  --mdx-focus-outline:    2px solid var(--mdx-brand);
  --mdx-focus-offset:     2px;
  --mdx-focus-ring:       0 0 0 3px var(--mdx-brand-tint);  /* inputs, instead
                                                               of an outline   */

  /* ── Motion ─────────────────────────────────────────────────────────────
     Transform and opacity only. Exits are faster than entrances.
     `prefers-reduced-motion` collapses durations — it does not remove them. */
  --mdx-ease-swift:       cubic-bezier(.4, 0, .2, 1);
  --mdx-ease-enter:       cubic-bezier(.05, .7, .1, 1);
  --mdx-ease-exit:        cubic-bezier(.3, 0, .8, .15);
  --mdx-ease-reveal:      cubic-bezier(.16, 1, .3, 1);
  --mdx-dur-swift:        150ms;    /* hover, press, focus                      */
  --mdx-dur-enter:        320ms;    /* step-in, drawer, reveal                  */
  --mdx-dur-exit:         200ms;    /* dismissals                               */
  --mdx-dur-reveal:       520ms;    /* score reveal / outcome page only         */
  --mdx-dur-pulse:        1.4s;     /* skeleton pulse, opacity 1 → .55 → 1      */
  --mdx-dur-spin:         700ms;    /* inline button spinner                    */

  /* ── Geometry — component dimensions the screens hold to ────────────── */
  --mdx-sidebar-width:   240px;
  --mdx-topbar-height:    60px;
  --mdx-menu-width:      196px;     /* the user menu, _system-sheet §05         */
  --mdx-drawer-width:    560px;     /* full width under 640px                   */
  --mdx-modal-width:     520px;     /* max-width                                */
  --mdx-input-height:     42px;
  --mdx-textarea-min:     96px;
  --mdx-avatar-lg:        38px;     /* headers · 14px initials                  */
  --mdx-avatar-sm:        32px;     /* rows · 12px initials                     */
  /* Measured by property across all 25 screens, DECISION-041's method.
     34px: the square row control (⋯, 107 wide / 84 high, radius 8 on 45 of
     them) AND the gutter a row select leaves for its chevron — the same slot,
     which is why it is one token. 38px is the WIDE select's gutter (19 uses);
     it shares a value with --mdx-avatar-lg and means something else, so
     collapsing the two would tie a chevron's inset to an avatar's diameter. */
  --mdx-icon-button:      34px;     /* square row control · row-select gutter   */
  --mdx-select-gutter:    38px;     /* the wide select's chevron gutter         */
  --mdx-meta-column:      96px;     /* right-aligned row meta — 44 min-width    */
  /* Flex BASES for a list row's two flexible columns, measured the same way.
     `flex: 1 1 200px` is the most common row basis in the system at 94 uses;
     `flex: 1 1 210px` is the control beside it at 26. They are what keeps a row
     on one line at 1440 and lets it wrap at 375 — one rule, both widths. */
  --mdx-row-identity:    200px;     /* name over email, and its siblings         */
  --mdx-row-control:     210px;     /* the select or control beside it           */
  --mdx-header-column:   320px;     /* a page heading and its subtitle — 7 uses    */
  /* The same two columns inside a 520px modal, where 200/210 do not fit.
     `flex: 1 1 130px` 23 uses, `flex: 1 1 170px` 16. */
  --mdx-row-identity-sm: 130px;     /* name over email, in a modal row           */
  --mdx-row-control-sm:  170px;     /* the select beside it                      */
  /* The room an input leaves for a badge sitting INSIDE it — the "✓ Verified"
     on `settings-profile.html`'s email field, which is the only one in the 25
     screens. Named rather than left arbitrary because the padding and the badge
     have to move together, and a second one of these is coming with billing. */
  --mdx-field-badge:     108px;
  /* The enrolment QR. No screen draws one — Q-023 — so this is the smallest
     square a phone camera reads reliably at arm's length, and it is a named
     geometry token rather than a literal for the same reason every other
     dimension here is. */
  --mdx-qr:              176px;
  --mdx-filter-column:   220px;     /* a labelled filter select — 34 uses       */
  --mdx-icon:             18px;     /* nav and inline icon slots                */
  --mdx-evidence-icon:    26px;     /* evidence-row square, radius 8px          */
  --mdx-auth-column:     420px;     /* the auth form column — 18 uses           */
  --mdx-auth-card:       480px;     /* the centred card on reset and verify     */
  --mdx-wordmark-mark:    28px;     /* the logo square beside the wordmark      */
  /* Reading measures. The comment on --mdx-measure already said "52–64ch" and
     only 64ch was extracted — the same gap DECISION-038 found in the spacing
     scale. Counted across the screens: 52ch 45 uses, 44ch 28, 60ch 27,
     56ch 25, 64ch 21, 34ch 13. Named by value, like the spacing steps.        */
  --mdx-measure-34:       34ch;     /* a ticked reassurance line                */
  --mdx-measure-44:       44ch;
  --mdx-measure-48:       48ch;     /* the message inside a callout             */
  --mdx-measure-52:       52ch;     /* the reason under a Verdict               */
  --mdx-measure-56:       56ch;     /* legal and consent copy                   */
  --mdx-measure-60:       60ch;
  --mdx-measure:          64ch;     /* the default reading measure              */
}

/* ─────────────────────────────────────────────────────────────────────────
   Embed runtime — the respondent-facing surface
   ─────────────────────────────────────────────────────────────────────────
   This is the ONLY surface that does not wear the Leadgible brand. It renders
   inside someone else's page and must look like part of it, not like a widget
   pasted on top. The values below are the STANDALONE FALLBACK, used when a
   funnel has no host to inherit from.

   In "inherit" mode — the default for embeds — font, ink, slate, accent and
   radius are all read from the host page at boot and these are overwritten.
   Deliberately absent: --mdx-brand and DM Sans. The Leadgible brand appears
   exactly once on this surface, in the "Powered by Leadgible" badge.

   See PRD §3.7 and `design/screens/embed-runtime.html`.
   ───────────────────────────────────────────────────────────────────────── */

[data-mdx-surface="embed"] {
  --mdx-embed-font:       -apple-system, BlinkMacSystemFont, "Segoe UI",
                          Helvetica, Arial, sans-serif;
  --mdx-embed-ink:        #14161A;
  --mdx-embed-slate:      #5B636D;
  --mdx-embed-accent:     #0F62CB;  /* progress, selection, buttons             */
  --mdx-embed-accent-deep:#0B4EA2;
  --mdx-embed-line:       #E3E6EA;
  --mdx-embed-line-strong:#C9CFD6;
  --mdx-embed-surface:    #FFFFFF;  /* the base — page AND option card          */
  --mdx-embed-ground:     #F6F7F9;  /* option hover                             */
  --mdx-embed-ground-alt: #EEF0F3;  /* progress track, option chip, divider     */
  --mdx-embed-accent-tint:#E8F0FB;  /* the focus ring — #0F62CB's own tint,     */
                                    /* NOT the dashboard's --mdx-brand-tint     */
  --mdx-embed-dur-spin:   900ms;

  /* Geometry and type this surface owns. The column is px and not a `ch`
     measure because in inherit mode the embed wears the HOST's font, and a
     `ch` column would resolve differently on every host (DECISION-047).
     The option title tracks looser than --mdx-track-h3 at the same 17px
     for the same reason: a system font stack is not DM Sans. */
  --mdx-embed-column:     640px;    /* the funnel column                        */
  --mdx-embed-input-height: 48px;   /* taller than the dashboard's 42px —       */
                                    /* a respondent's thumb, not a mouse        */
  --mdx-embed-track-option: -0.012em;  /* card-select option title, 17px/600    */
  --mdx-embed-mark:       26px;     /* the option's state chip                  */
  --mdx-embed-focus-offset: 2px;    /* the ring's gap from the control          */

  /* Composites, mirroring `:root`'s. The surface cannot use --mdx-border or
     --mdx-focus-* because those resolve to brand colours, which by design
     never reach here. */
  --mdx-embed-border:     1px solid var(--mdx-embed-line);
  --mdx-embed-focus-outline: 2px solid var(--mdx-embed-accent);
  --mdx-embed-focus-ring: 0 0 0 3px var(--mdx-embed-accent-tint);
}

/* Reduced motion: collapse durations, keep the transitions.
   Every screen ships this rule; it belongs with the tokens. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mdx-dur-swift:  40ms;
    --mdx-dur-enter:  40ms;
    --mdx-dur-exit:   40ms;
    --mdx-dur-reveal: 40ms;
    --mdx-dur-pulse:  2.8s;
  }
}

/* -------------------------------------------------------------------------
   Leadgible marketing site - the shell and the surfaces it wraps
   -------------------------------------------------------------------------
   Story 13.1 - DECISION-097.

   Every colour, radius, shadow, weight and motion value here is a
   `var(--mdx-*)` from `design/tokens.css`. The build concatenates that file
   ahead of this one, so the cascade resolves without an @import waterfall.

   THE ONE BLOCK THAT IS NOT A TOKEN, AND WHY.
   `--mdx-site-*` below holds page-layout geometry and display type that the
   six marketing mockups use and `design/tokens.css` does not name. It was
   MEASURED from `design/screens/marketing-*.html`, never invented, and it is
   scoped to this surface exactly as `[data-mdx-surface="embed"]` scopes the
   embed runtime's own column and input height inside tokens.css itself.

   tokens.css was extracted from the 25 PRODUCT screens on 2026-08-23. The six
   marketing screens were ingested 2026-08-30 with "tokens conformed, not
   re-extracted" (b9227c1) - a deliberate refusal to redefine a 25-screen
   design system from its newest surface. So these values have no token by
   construction, not by oversight, and `design/token-census.md` already flags
   several of them as untokenised candidates: `height: 80px` (14 uses, 7
   screens), `height: 52px` (12 uses, 6 screens), `opacity: .82` (12 uses, 6
   screens). Promoting one is a `/decide` call (DECISION-073) - Q-066 asks for
   it. Until then they live here, named and sourced, rather than loose in a
   rule.
   ------------------------------------------------------------------------- */

:root {
  /* Page frame - every marketing surface centres on the same column. */
  --mdx-site-container:      1200px;  /* max-width, all six screens          */
  --mdx-site-header-height:    80px;  /* census: 14 uses, 7 screens          */
  --mdx-site-logo:             52px;  /* census: 12 uses, 6 screens          */
  --mdx-site-logo-footer:      48px;  /* the footer wordmark                 */
  --mdx-site-menu-button:      40px;  /* the narrow-viewport menu control    */

  /* Display type. The marketing H1 is larger than the product's
     `--mdx-text-h1` clamp(31px, 4.8vw, 44px) - a landing page's headline is
     not a dashboard page title, and the mockup is the visual source of truth
     for this surface. */
  --mdx-site-text-h1:      clamp(34px, 5vw, 50px);
  --mdx-site-leading-h1:   1.05;
  --mdx-site-text-lead:    20px;      /* the sentence under the H1           */
  --mdx-site-text-price:   24px;      /* the plan strip's figures            */

  /* Section rhythm - fluid, so one rule serves 375px and 1440px. */
  --mdx-site-pad-hero-top:    clamp(44px, 5.5vw, 84px);
  --mdx-site-pad-hero-bottom: clamp(52px, 6vw, 104px);
  --mdx-site-pad-section:     clamp(40px, 5vw, 72px);
  --mdx-site-pad-section-sm:  clamp(32px, 4vw, 56px);
  --mdx-site-pad-footer:      clamp(36px, 4vw, 56px);
  --mdx-site-gap-hero:        clamp(36px, 4.5vw, 72px);
  --mdx-site-space-36:        36px;   /* hero rule offset; footer grid row   */

  /* Grid minimums - what makes each grid reflow rather than break. */
  --mdx-site-col-hero:     min(400px, 100%);
  --mdx-site-col-card:     260px;
  --mdx-site-col-claim:    300px;
  --mdx-site-col-snippet:  280px;
  --mdx-site-col-plan:     150px;
  --mdx-site-col-footer:   220px;

  /* Odds and ends the mockups draw and tokens.css does not name. */
  --mdx-site-opacity-hover:  .82;     /* census: 12 uses, 6 screens          */
  --mdx-site-rule:           28px;    /* the eyebrow's leading rule          */
  --mdx-site-rule-height:     3px;
  --mdx-site-dot:             6px;    /* the reassurance dots under the CTA  */
  --mdx-site-dot-live:        7px;    /* the "Live" and band-pill dots       */
  --mdx-site-step:           28px;    /* the numbered step chip              */
  --mdx-site-claim-bar:       4px;    /* the brand rule beside each claim    */
  --mdx-site-dur-dot:        3.2s;    /* the "Live" dot's slow pulse         */
  --mdx-site-lift:            3px;    /* card hover translate                */
  --mdx-site-press:           1px;    /* button active translate             */
  --mdx-site-tick:           20px;    /* the evidence row's scored tick      */
  /* The embed-weight page - `marketing-embed-weight.html`. */
  --mdx-site-meter:          14px;    /* the budget meter bar                */
  --mdx-site-meter-key:      10px;    /* its legend swatch                   */
  --mdx-site-hatch:           6px;    /* the not-yet-measured hatch pitch    */
  --mdx-site-cmp-measure:   220px;    /* the comparison table's label column */
  --mdx-site-cmp-col:       160px;    /* each product column                 */
  --mdx-site-cmp-plan:      130px;    /* each PLAN column, pricing table     */
  --mdx-site-col-price:     200px;    /* a price card - five fit on one row  */
  --mdx-site-text-weight: clamp(34px, 4.4vw, 44px);  /* the headline figure  */
  /* The evidence card overlaps the verdict card and is inset from it. Per
     cent, not pixels: the inset has to hold as the column reflows from 1440
     to 375, and the mockup writes it that way. */
  --mdx-site-evidence-lift:  14px;
  --mdx-site-evidence-left:   11%;
  --mdx-site-evidence-right:   6%;

  /* The docs shell - `marketing-docs.html`. Three columns at 1440, one below
     900px, both sidebars sticky under the header. */
  --mdx-site-docs-shell:   1440px;  /* wider than the marketing column        */
  --mdx-site-docs-side:     240px;
  --mdx-site-docs-anchors:  220px;
  --mdx-site-docs-sticky:   104px;  /* header height plus its own 24px        */
  --mdx-site-docs-measure:   72ch;  /* the article's reading measure          */
  --mdx-site-docs-leading:   1.7;   /* code blocks                            */
  --mdx-site-docs-track:  -0.006em; /* code blocks                            */
}

/* -- Reset and page ------------------------------------------------------ */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--mdx-ground);
}

body {
  font-family: var(--mdx-font);
  font-size: var(--mdx-text-16);
  line-height: var(--mdx-leading-body);
  color: var(--mdx-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--mdx-brand-deep); text-decoration: none }
a:hover { color: var(--mdx-brand) }

/* Focus is visible on every interactive element, no exceptions - tokens.css
   Focus block. One rule, so nothing on this site can opt out of it. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: var(--mdx-focus-outline);
  outline-offset: var(--mdx-focus-offset);
}

img { max-width: 100% }

/* The column every surface centres on. */
.wrap {
  max-width: var(--mdx-site-container);
  margin: 0 auto;
  padding-left: var(--mdx-space-24);
  padding-right: var(--mdx-space-24);
}

/* -- Type ---------------------------------------------------------------- */

.eyebrow {
  margin: 0 0 var(--mdx-space-10);
  display: flex;
  align-items: center;
  gap: var(--mdx-space-10);
  font-size: var(--mdx-text-12);
  font-weight: var(--mdx-weight-bold);
  letter-spacing: var(--mdx-track-eyebrow);
  text-transform: uppercase;
  color: var(--mdx-slate);
}

/* Only the hero's eyebrow carries the leading rule. */
.eyebrow--rule { margin-bottom: var(--mdx-space-20) }

.eyebrow--rule::before {
  content: "";
  display: block;
  width: var(--mdx-site-rule);
  height: var(--mdx-site-rule-height);
  border-radius: var(--mdx-radius-pill);
  background: var(--mdx-brand);
}

h2.section-title {
  margin: 0 0 var(--mdx-space-32);
  font-size: var(--mdx-text-25);
  line-height: var(--mdx-leading-heading);
  font-weight: var(--mdx-weight-bold);
  letter-spacing: var(--mdx-track-title);
  color: var(--mdx-ink);
}

h2.section-title--wide { margin-bottom: var(--mdx-site-space-36) }

h3.card-title {
  margin: 0 0 var(--mdx-space-8);
  font-size: var(--mdx-text-17);
  font-weight: var(--mdx-weight-semibold);
  letter-spacing: var(--mdx-track-h3);
  color: var(--mdx-ink);
}

.body {
  margin: 0;
  font-size: var(--mdx-text-15);
  line-height: var(--mdx-leading-body);
  color: var(--mdx-slate);
  text-wrap: pretty;
}

/* -- Buttons and links --------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mdx-text-15);
  font-weight: var(--mdx-weight-semibold);
  color: var(--mdx-white);
  background: var(--mdx-brand);
  padding: var(--mdx-space-12) var(--mdx-space-24);
  border-radius: var(--mdx-radius-control);
  border: 0;
  cursor: pointer;
  transition: background var(--mdx-dur-swift) var(--mdx-ease-swift),
              transform var(--mdx-dur-swift) var(--mdx-ease-swift);
}

.btn:hover { background: var(--mdx-brand-deep); color: var(--mdx-white) }
.btn:active { transform: translateY(var(--mdx-site-press)) }

.btn--hero { padding: var(--mdx-space-14) var(--mdx-space-28) }

.btn--compact {
  font-size: var(--mdx-text-13);
  padding: var(--mdx-space-8) var(--mdx-space-16);
  border-radius: var(--mdx-radius-control-sm);
}

/* The underlined secondary action beside a primary button. */
.link-arrow {
  font-size: var(--mdx-text-15);
  font-weight: var(--mdx-weight-semibold);
  color: var(--mdx-brand-deep);
  padding: var(--mdx-space-14) var(--mdx-space-4);
  border-radius: var(--mdx-radius-control-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--mdx-space-8);
  border-bottom: var(--mdx-space-2) solid transparent;
  transition: color var(--mdx-dur-swift) var(--mdx-ease-swift),
              border-color var(--mdx-dur-swift) var(--mdx-ease-swift);
}

.link-arrow:hover {
  color: var(--mdx-brand);
  border-bottom-color: var(--mdx-brand);
}

.link-arrow--tight { padding: var(--mdx-space-4) }

.link-arrow .arrow { font-size: var(--mdx-text-16); line-height: 1 }

/* -- Header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--mdx-white);
  border-bottom: var(--mdx-border);
}

.site-header > .wrap {
  height: var(--mdx-site-header-height);
  display: flex;
  align-items: center;
  gap: var(--mdx-space-24);
}

.brand {
  display: flex;
  align-items: center;
  padding: var(--mdx-space-4);
  border-radius: var(--mdx-radius-control);
  flex: 0 0 auto;
  transition: opacity var(--mdx-dur-swift) var(--mdx-ease-swift);
}

.brand:hover { opacity: var(--mdx-site-opacity-hover) }
.brand img { height: var(--mdx-site-logo); width: auto; display: block }

.site-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--mdx-space-8);
}

.site-nav a,
.nav-ghost {
  font-size: var(--mdx-text-15);
  font-weight: var(--mdx-weight-medium);
  color: var(--mdx-slate);
  padding: var(--mdx-space-8) var(--mdx-space-12);
  border-radius: var(--mdx-radius-control);
  transition: color var(--mdx-dur-swift) var(--mdx-ease-swift),
              background var(--mdx-dur-swift) var(--mdx-ease-swift);
}

.site-nav a:hover { color: var(--mdx-ink); background: var(--mdx-ground) }

.site-nav a[aria-current="page"] {
  color: var(--mdx-ink);
  background: var(--mdx-brand-tint);
}

.nav-ghost { color: var(--mdx-ink) }
.nav-ghost:hover { background: var(--mdx-ground); color: var(--mdx-ink) }

.header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--mdx-space-8);
}

/* The narrow-viewport disclosure. `<details>` rather than a scripted button:
   this page must render and WORK with scripting disabled (Story 13.1 AC 4),
   and a menu control that needs JS to open is a control that does nothing.

   The `Start free` button sits OUTSIDE the `<details>`, in a wrapper. HTML
   requires `<summary>` to be the FIRST child; an element before it is treated
   as ordinary content and the browser draws its own marker instead. */
.menu {
  display: none;
  flex: 1 1 auto;
  justify-content: flex-end;
  align-items: center;
  gap: var(--mdx-space-10);
}

.menu-toggle > summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--mdx-space-4);
  width: var(--mdx-site-menu-button);
  height: var(--mdx-site-menu-button);
  padding: 0 var(--mdx-space-10);
  background: var(--mdx-white);
  border: var(--mdx-border);
  border-radius: var(--mdx-radius-control);
  cursor: pointer;
  list-style: none;
  transition: background var(--mdx-dur-swift) var(--mdx-ease-swift);
}

.menu-toggle > summary::-webkit-details-marker { display: none }
.menu-toggle > summary:hover { background: var(--mdx-ground) }

.menu-toggle > summary > span {
  display: block;
  height: var(--mdx-space-1-5);
  border-radius: var(--mdx-radius-1);
  background: var(--mdx-ink);
}

/* Positioned against `.site-header`, which is `position: sticky` and therefore
   the containing block. `top` is explicit: without it the panel would take its
   static position, which is halfway up the header row. */
.menu-panel {
  position: absolute;
  top: var(--mdx-site-header-height);
  left: 0;
  right: 0;
  background: var(--mdx-white);
  border-bottom: var(--mdx-border);
  padding: var(--mdx-space-12) var(--mdx-space-24) var(--mdx-space-20);
  display: flex;
  flex-direction: column;
  gap: var(--mdx-space-4);
  box-shadow: var(--mdx-shadow-card);
  animation: lg-menu var(--mdx-dur-enter) var(--mdx-ease-enter) both;
}

.menu-panel a {
  font-size: var(--mdx-text-15);
  font-weight: var(--mdx-weight-medium);
  color: var(--mdx-ink);
  padding: var(--mdx-space-9) var(--mdx-space-12);
  border-radius: var(--mdx-radius-control);
}

.menu-panel a:hover { background: var(--mdx-ground) }

/* -- Hero ---------------------------------------------------------------- */

.hero {
  background: var(--mdx-white);
  border-bottom: var(--mdx-border);
  overflow: hidden;
}

.hero > .wrap {
  padding-top: var(--mdx-site-pad-hero-top);
  padding-bottom: var(--mdx-site-pad-hero-bottom);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--mdx-site-col-hero), 1fr));
  gap: var(--mdx-site-gap-hero);
  align-items: center;
}

.hero h1 {
  margin: 0;
  font-size: var(--mdx-site-text-h1);
  line-height: var(--mdx-site-leading-h1);
  font-weight: var(--mdx-weight-bold);
  letter-spacing: var(--mdx-track-h1);
  text-wrap: balance;
  color: var(--mdx-ink);
}

.hero h1 em { font-style: normal; color: var(--mdx-brand-deep) }

.hero-lead {
  margin: var(--mdx-space-22) 0 0;
  font-size: var(--mdx-site-text-lead);
  line-height: 1.5;
  font-weight: var(--mdx-weight-regular);
  color: var(--mdx-ink);
  max-width: var(--mdx-measure-34);
  text-wrap: pretty;
}

.hero-actions {
  margin-top: var(--mdx-space-32);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mdx-space-20);
}

.reassurance {
  margin-top: var(--mdx-site-space-36);
  padding-top: var(--mdx-space-24);
  border-top: var(--mdx-border-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdx-space-12) var(--mdx-space-32);
}

.reassurance > span {
  display: flex;
  align-items: center;
  gap: var(--mdx-space-10);
  font-size: var(--mdx-text-15);
  color: var(--mdx-slate);
}

.reassurance > span::before {
  content: "";
  width: var(--mdx-site-dot);
  height: var(--mdx-site-dot);
  border-radius: var(--mdx-radius-pill);
  background: var(--mdx-hot);
}

/* -- The verdict panel --------------------------------------------------- */

.verdict-frame { position: relative }

.verdict-frame::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--mdx-space-28)) calc(-1 * var(--mdx-space-40))
         var(--mdx-space-24) var(--mdx-space-32);
  background: var(--mdx-brand-tint);
  border-radius: var(--mdx-radius-card);
  display: block;
}

.card {
  background: var(--mdx-white);
  border: var(--mdx-border);
  border-radius: var(--mdx-radius-card);
  padding: var(--mdx-space-28);
  box-shadow: var(--mdx-shadow-card);
}

.verdict {
  position: relative;
  z-index: 1;
}

.verdict-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mdx-space-16);
  margin-bottom: var(--mdx-space-20);
}

.verdict-head .eyebrow { margin: 0 }

.live {
  display: inline-flex;
  align-items: center;
  gap: var(--mdx-space-6);
  font-size: var(--mdx-text-13);
  color: var(--mdx-slate);
}

.live::before {
  content: "";
  width: var(--mdx-site-dot-live);
  height: var(--mdx-site-dot-live);
  border-radius: var(--mdx-radius-pill);
  background: var(--mdx-hot);
  animation: lg-dot var(--mdx-site-dur-dot) var(--mdx-ease-swift) infinite;
}

.verdict h2 {
  margin: 0;
  font-size: var(--mdx-text-verdict);
  line-height: var(--mdx-leading-verdict);
  font-weight: var(--mdx-weight-bold);
  letter-spacing: var(--mdx-track-verdict);
  color: var(--mdx-ink);
  text-wrap: balance;
}

.verdict-reason {
  margin: var(--mdx-space-14) 0 var(--mdx-space-24);
  font-size: var(--mdx-text-18);
  line-height: var(--mdx-leading-reason);
  color: var(--mdx-slate);
  max-width: var(--mdx-measure-52);
  text-wrap: pretty;
}

.lead-rows { display: flex; flex-direction: column; gap: var(--mdx-space-8) }

.lead-row {
  display: flex;
  align-items: center;
  gap: var(--mdx-space-16);
  background: var(--mdx-ground);
  border-radius: var(--mdx-radius-control);
  padding: var(--mdx-space-14) var(--mdx-space-16);
  transition: background var(--mdx-dur-swift) var(--mdx-ease-swift),
              transform var(--mdx-dur-swift) var(--mdx-ease-swift);
}

.lead-row:hover {
  background: var(--mdx-line-soft);
  transform: translateY(calc(-1 * var(--mdx-site-press)));
}

.avatar {
  flex: 0 0 auto;
  width: var(--mdx-avatar-sm);
  height: var(--mdx-avatar-sm);
  border-radius: var(--mdx-radius-pill);
  background: var(--mdx-brand);
  color: var(--mdx-white);
  font-size: var(--mdx-text-12);
  font-weight: var(--mdx-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar--slate { background: var(--mdx-slate) }

.lead-identity {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mdx-space-2);
}

.lead-name {
  font-size: var(--mdx-text-15);
  font-weight: var(--mdx-weight-semibold);
  color: var(--mdx-ink);
}

.lead-reason {
  font-size: var(--mdx-text-13);
  color: var(--mdx-slate);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-score {
  flex: 0 0 auto;
  font-size: var(--mdx-text-18);
  font-weight: var(--mdx-weight-bold);
  color: var(--mdx-ink);
  font-variant-numeric: tabular-nums;
}

/* Band pills. RULE-001 vocabulary; the ladder's colours never change. */
.band {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--mdx-space-6);
  border-radius: var(--mdx-radius-pill);
  padding: var(--mdx-space-5) var(--mdx-space-12);
  font-size: var(--mdx-text-13);
  font-weight: var(--mdx-weight-semibold);
}

.band::before {
  content: "";
  width: var(--mdx-site-dot-live);
  height: var(--mdx-site-dot-live);
  border-radius: var(--mdx-radius-pill);
  background: currentcolor;
}

.band--hot { background: var(--mdx-hot-tint); color: var(--mdx-hot-ink) }
.band--review { background: var(--mdx-review-tint); color: var(--mdx-review-ink) }
.band--nurture { background: var(--mdx-nurture-tint); color: var(--mdx-nurture-ink) }

.verdict-foot {
  margin: var(--mdx-space-16) 0 0;
  font-size: var(--mdx-text-13);
  color: var(--mdx-slate);
}

/* The quoted answer and its scoring evidence.
   A SEPARATE card that overlaps the verdict's lower edge and is inset from it
   on both sides - `margin: -14px 6% 0 11%` in the mockup. It sits above the
   verdict in the stack, which is what makes the overlap read as one object. */
.evidence {
  position: relative;
  z-index: 2;
  margin: calc(-1 * var(--mdx-site-evidence-lift)) var(--mdx-site-evidence-right)
          0 var(--mdx-site-evidence-left);
  padding: var(--mdx-space-20) var(--mdx-space-24);
}

.evidence-quote {
  margin: 0 0 var(--mdx-space-14);
  font-size: var(--mdx-text-16);
  line-height: var(--mdx-leading-reason);
  color: var(--mdx-ink);
  text-wrap: pretty;
}

.evidence-rows { display: flex; flex-wrap: wrap; gap: var(--mdx-space-8) }

.evidence-rows > span {
  display: inline-flex;
  align-items: center;
  gap: var(--mdx-space-8);
  font-size: var(--mdx-text-14);
  color: var(--mdx-slate);
  background: var(--mdx-ground);
  border-radius: var(--mdx-radius-control);
  padding: var(--mdx-space-8) var(--mdx-space-12);
}

.evidence-rows .tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--mdx-site-tick);
  height: var(--mdx-site-tick);
  border-radius: var(--mdx-radius-sm);
  background: var(--mdx-hot);
  color: var(--mdx-white);
  font-size: var(--mdx-text-12);
  font-weight: var(--mdx-weight-bold);
  line-height: 1;
}

.evidence-rows .points {
  font-weight: var(--mdx-weight-semibold);
  color: var(--mdx-ink);
  font-variant-numeric: tabular-nums;
}

/* -- Sections ------------------------------------------------------------ */

.section {
  padding-top: var(--mdx-site-pad-section);
  padding-bottom: var(--mdx-site-pad-section);
}

.section--sm {
  padding-top: var(--mdx-site-pad-section-sm);
  padding-bottom: var(--mdx-site-pad-section-sm);
}

.section--tail { padding-top: 0 }

.band-white {
  background: var(--mdx-white);
  border-top: var(--mdx-border);
  border-bottom: var(--mdx-border);
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--mdx-site-col-card), 1fr));
  gap: var(--mdx-space-20);
}

.step {
  transition: transform var(--mdx-dur-swift) var(--mdx-ease-swift),
              box-shadow var(--mdx-dur-swift) var(--mdx-ease-swift);
}

.step:hover {
  transform: translateY(calc(-1 * var(--mdx-site-lift)));
  box-shadow: var(--mdx-shadow-card);
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--mdx-site-step);
  height: var(--mdx-site-step);
  border-radius: var(--mdx-radius-control-sm);
  background: var(--mdx-brand);
  color: var(--mdx-white);
  font-size: var(--mdx-text-13);
  font-weight: var(--mdx-weight-bold);
  font-variant-numeric: tabular-nums;
}

.step h3 { margin-top: var(--mdx-space-18) }

.soon {
  margin: var(--mdx-space-20) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mdx-space-10);
  font-size: var(--mdx-text-15);
  color: var(--mdx-slate);
}

.claim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--mdx-site-col-claim), 1fr));
  gap: var(--mdx-space-28) var(--mdx-space-48);
}

.claim { display: flex; gap: var(--mdx-space-16) }

.claim::before {
  content: "";
  flex: 0 0 auto;
  width: var(--mdx-site-claim-bar);
  border-radius: var(--mdx-radius-pill);
  background: var(--mdx-brand);
}

.claim p { max-width: var(--mdx-measure-56) }

/* The embed snippet panel. */
.snippet-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--mdx-site-col-snippet), 1fr));
  gap: var(--mdx-space-24) var(--mdx-space-40);
  align-items: center;
}

.snippet {
  background: var(--mdx-ground);
  border: var(--mdx-border);
  border-radius: var(--mdx-radius-control);
  padding: var(--mdx-space-14) var(--mdx-space-16);
  overflow-x: auto;
}

.snippet pre {
  margin: 0;
  overflow-x: auto;
}

/* `white-space: pre`, not the mockup's `nowrap`: the snippet `snippet.ts`
   generates is three lines - a comment, the mount element and the script - and
   collapsing them would print a snippet that does not work. */
.snippet code {
  font-family: var(--mdx-font);
  font-size: var(--mdx-text-14);
  font-weight: var(--mdx-weight-medium);
  line-height: 1.5;
  color: var(--mdx-ink);
  white-space: pre;
}

/* The plan strip. */
.plans-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mdx-space-16);
  margin-bottom: var(--mdx-space-24);
}

.plans-head h3 { margin: 0 }

.plan-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--mdx-site-col-plan), 1fr));
  gap: var(--mdx-space-2);
}

.plan {
  background: var(--mdx-ground);
  border-radius: var(--mdx-radius-control);
  padding: var(--mdx-space-16);
}

.plan--featured { background: var(--mdx-brand-tint) }

.plan-name {
  margin: 0 0 var(--mdx-space-6);
  font-size: var(--mdx-text-13);
  font-weight: var(--mdx-weight-semibold);
  color: var(--mdx-slate);
}

.plan--featured .plan-name { color: var(--mdx-brand-deep) }

.plan-price {
  margin: 0;
  font-size: var(--mdx-site-text-price);
  font-weight: var(--mdx-weight-bold);
  letter-spacing: var(--mdx-track-title);
  color: var(--mdx-ink);
  font-variant-numeric: tabular-nums;
}

.plans-foot {
  margin: var(--mdx-space-16) 0 0;
  font-size: var(--mdx-text-13);
  color: var(--mdx-slate);
}

/* -- Footer -------------------------------------------------------------- */

.site-footer { background: var(--mdx-white); border-top: var(--mdx-border) }

.site-footer > .wrap {
  padding-top: var(--mdx-site-pad-footer);
  padding-bottom: var(--mdx-site-pad-footer);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--mdx-site-col-footer), 1fr));
  gap: var(--mdx-space-32) var(--mdx-space-40);
}

.site-footer img { height: var(--mdx-site-logo-footer); width: auto; display: block }

.footer-blurb {
  margin: var(--mdx-space-16) 0 0;
  font-size: var(--mdx-text-15);
  line-height: var(--mdx-leading-body);
  color: var(--mdx-slate);
  max-width: var(--mdx-measure-34);
  text-wrap: pretty;
}

.footer-heading {
  margin: 0 0 var(--mdx-space-12);
  font-size: var(--mdx-text-12);
  font-weight: var(--mdx-weight-bold);
  letter-spacing: var(--mdx-track-eyebrow);
  text-transform: uppercase;
  color: var(--mdx-slate);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--mdx-space-8);
  align-items: flex-start;
}

.footer-links a {
  font-size: var(--mdx-text-15);
  color: var(--mdx-ink);
  border-radius: var(--mdx-radius-sm);
}

.footer-links a:hover { color: var(--mdx-brand-deep) }

.colophon { border-top: var(--mdx-border-soft) }

.colophon > .wrap {
  padding-top: var(--mdx-space-20);
  padding-bottom: var(--mdx-space-20);
  font-size: var(--mdx-text-13);
  color: var(--mdx-slate);
}

/* -- Motion -------------------------------------------------------------- */

@keyframes lg-rise {
  from { opacity: 0; transform: translateY(var(--mdx-space-14)) }
  to   { opacity: 1; transform: translateY(0) }
}

@keyframes lg-reveal {
  from { opacity: 0; transform: translateY(var(--mdx-space-22)) }
  to   { opacity: 1; transform: translateY(0) }
}

@keyframes lg-score {
  from { opacity: 0; transform: translateY(var(--mdx-space-8)) }
  to   { opacity: 1; transform: translateY(0) }
}

@keyframes lg-menu {
  from { opacity: 0; transform: translateY(calc(-1 * var(--mdx-space-8))) }
  to   { opacity: 1; transform: translateY(0) }
}

@keyframes lg-dot {
  0%, 100% { opacity: 1 }
  50%      { opacity: var(--mdx-opacity-recessed) }
}

/* Entrances are `both`, so the element ENDS at opacity 1 whatever happens to
   the animation - a page that renders without scripting must not depend on an
   animation completing to become readable. */
.rise   { animation: lg-rise var(--mdx-dur-enter) var(--mdx-ease-enter) both }
.reveal { animation: lg-reveal var(--mdx-dur-reveal) var(--mdx-ease-reveal) both }
.score  { animation: lg-score var(--mdx-dur-reveal) var(--mdx-ease-reveal) both }

.delay-1 { animation-delay: var(--mdx-dur-swift) }
.delay-2 { animation-delay: var(--mdx-dur-exit) }
.delay-3 { animation-delay: var(--mdx-dur-enter) }

/* -- Narrow viewport ----------------------------------------------------- */

@media (max-width: 860px) {
  .site-nav, .header-actions { display: none }
  .menu { display: flex }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}

/* -- The docs page ------------------------------------------------------- */
/* Story 13.3. `marketing-docs.html`: a three-column shell that collapses to
   one below 900px, with the sidebar becoming a disclosure. */

.docs-shell {
  max-width: var(--mdx-site-docs-shell);
  padding-top: 0;
  padding-bottom: var(--mdx-site-pad-section);
  display: grid;
  grid-template-columns: var(--mdx-site-docs-side) minmax(0, 1fr) var(--mdx-site-docs-anchors);
  gap: var(--mdx-space-40);
  align-items: start;
}

.docs-sidebar,
.docs-anchors {
  position: sticky;
  top: var(--mdx-site-docs-sticky);
  padding: var(--mdx-space-32) 0;
  align-self: start;
}

.docs-main { padding: var(--mdx-space-32) 0 }

.docs-nav {
  display: flex;
  flex-direction: column;
  gap: var(--mdx-space-2);
  align-items: stretch;
}

.docs-nav a,
.docs-nav-soon {
  font-size: var(--mdx-text-15);
  color: var(--mdx-slate);
  padding: var(--mdx-space-8) var(--mdx-space-12);
  border-radius: var(--mdx-radius-control);
  transition: color var(--mdx-dur-swift) var(--mdx-ease-swift),
              background var(--mdx-dur-swift) var(--mdx-ease-swift);
}

.docs-nav a:hover { color: var(--mdx-ink); background: var(--mdx-ground) }

.docs-nav a[aria-current="page"] {
  color: var(--mdx-brand-deep);
  background: var(--mdx-brand-tint);
  font-weight: var(--mdx-weight-semibold);
}

/* A section that has no page yet is NOT a link. It is listed, because the
   sidebar is the map of the docs and a one-item map is a worse lie than an
   honest "not written yet" - and it is unclickable, because a link to a 404
   is the thing this site does not do. `recessed` is the token for a control
   that cannot be used. */
.docs-nav-soon {
  opacity: var(--mdx-opacity-recessed);
  cursor: default;
}

.docs-subnav {
  display: flex;
  flex-direction: column;
  gap: var(--mdx-space-2);
  padding-left: var(--mdx-space-12);
  margin: var(--mdx-space-2) 0;
  border-left: var(--mdx-border);
}

.docs-subnav a {
  font-size: var(--mdx-text-14);
  color: var(--mdx-slate);
  padding: var(--mdx-space-6) var(--mdx-space-12);
  border-radius: var(--mdx-radius-control);
}

.docs-subnav a:hover { color: var(--mdx-ink); background: var(--mdx-ground) }

/* The narrow-viewport sidebar, a native disclosure for the same reason the
   header's menu is one. */
.docs-menu { display: none; margin-bottom: var(--mdx-space-24) }

.docs-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--mdx-space-8);
  font-size: var(--mdx-text-15);
  font-weight: var(--mdx-weight-medium);
  color: var(--mdx-ink);
  background: var(--mdx-white);
  border: var(--mdx-border);
  border-radius: var(--mdx-radius-control);
  padding: var(--mdx-space-9) var(--mdx-space-12);
  cursor: pointer;
  list-style: none;
}

/* The caret is a numeric HTML entity in `docs.mjs`, NOT a CSS escape.
   A CSS hex escape for U+25BE, written here originally, went through a shell
   heredoc, a Python string and the CSS parser on its way to disk and arrived
   as the control character 0x15 — it rendered as mojibake on the docs menu
   button, and nothing caught it: not lint, not the token gate, not typecheck,
   not the unit suite. A screenshot did. An entity in the markup has one layer
   of escaping instead of three.
   (Written twice, because the first attempt at THIS COMMENT reproduced the
   bug inside the warning about it. tests/site-shell.test.ts now asserts no
   control character reaches this file at all.) */
.docs-menu > summary::-webkit-details-marker { display: none }

.docs-menu-caret { font-size: var(--mdx-text-12); line-height: 1 }
.docs-menu > summary:hover { background: var(--mdx-ground) }
.docs-menu .docs-nav { margin-top: var(--mdx-space-10) }

.docs-article { max-width: var(--mdx-site-docs-measure) }

.docs-article h1 {
  margin: 0;
  font-size: var(--mdx-text-h1);
  line-height: var(--mdx-leading-tight);
  font-weight: var(--mdx-weight-bold);
  letter-spacing: var(--mdx-track-h1);
  color: var(--mdx-ink);
  text-wrap: balance;
}

.docs-lead {
  margin: var(--mdx-space-20) 0 0;
  font-size: var(--mdx-text-18);
  line-height: var(--mdx-leading-reason);
  color: var(--mdx-ink);
  text-wrap: pretty;
}

.docs-article h2 {
  margin: var(--mdx-space-40) 0 var(--mdx-space-12);
  font-size: var(--mdx-text-25);
  line-height: var(--mdx-leading-heading);
  font-weight: var(--mdx-weight-bold);
  letter-spacing: var(--mdx-track-title);
  color: var(--mdx-ink);
  scroll-margin-top: var(--mdx-site-docs-sticky);
}

.docs-article p {
  margin: 0 0 var(--mdx-space-16);
  font-size: var(--mdx-text-16);
  line-height: var(--mdx-leading-body);
  color: var(--mdx-ink);
  text-wrap: pretty;
}

.docs-article b { font-weight: var(--mdx-weight-semibold) }

.docs-steps {
  margin: 0;
  padding-left: var(--mdx-space-24);
  display: flex;
  flex-direction: column;
  gap: var(--mdx-space-12);
}

.docs-steps li {
  font-size: var(--mdx-text-16);
  line-height: var(--mdx-leading-body);
  color: var(--mdx-ink);
  text-wrap: pretty;
}

.docs-code {
  background: var(--mdx-ground);
  border: var(--mdx-border);
  border-radius: var(--mdx-radius-control);
  padding: var(--mdx-space-16);
}

.docs-code pre { margin: 0; overflow-x: auto }

.docs-code code {
  font-family: var(--mdx-font);
  font-size: var(--mdx-text-15);
  line-height: var(--mdx-site-docs-leading);
  letter-spacing: var(--mdx-site-docs-track);
  font-variant-numeric: tabular-nums;
  color: var(--mdx-ink);
  white-space: pre-wrap;
  word-break: break-word;
}

.docs-callout {
  margin: var(--mdx-space-40) 0 0;
  background: var(--mdx-brand-tint);
  border-radius: var(--mdx-radius-card);
  padding: var(--mdx-space-28);
  scroll-margin-top: var(--mdx-site-docs-sticky);
}

.docs-callout .eyebrow { color: var(--mdx-brand-deep) }

.docs-callout p:last-child {
  margin: 0;
  font-size: var(--mdx-text-17);
  line-height: var(--mdx-leading-reason);
  font-weight: var(--mdx-weight-medium);
  color: var(--mdx-ink);
}

@media (max-width: 900px) {
  .docs-shell { grid-template-columns: 1fr }
  .docs-sidebar, .docs-anchors { display: none }
  .docs-menu { display: block }
}

/* -- The embed-weight page ----------------------------------------------- */
/* Story 13.5. Every figure it shows is measured by `src/measure.mjs`. */

.weight-h1 {
  margin: 0;
  font-size: var(--mdx-text-h1);
  line-height: var(--mdx-leading-tight);
  font-weight: var(--mdx-weight-bold);
  letter-spacing: var(--mdx-track-h1);
  color: var(--mdx-ink);
  text-wrap: balance;
}

.weight-number {
  margin: 0;
  font-size: var(--mdx-site-text-weight);
  font-weight: var(--mdx-weight-bold);
  letter-spacing: var(--mdx-track-h1);
  line-height: var(--mdx-leading-tight);
  color: var(--mdx-ink);
  font-variant-numeric: tabular-nums;
}

.weight-sub {
  margin: 0;
  font-size: var(--mdx-text-18);
  color: var(--mdx-slate);
}

.meter {
  margin-top: var(--mdx-space-24);
  height: var(--mdx-site-meter);
  border-radius: var(--mdx-radius-pill);
  background: var(--mdx-line-soft);
  overflow: hidden;
  display: flex;
}

/* `--meter-fill` is set inline, per element, because it IS the measurement:
   the artefact's size as a share of the budget. The declaration stays here. */
.meter-fill {
  display: block;
  width: var(--meter-fill);
  background: var(--mdx-brand);
  border-radius: var(--mdx-radius-pill);
}

.meter-legend {
  margin-top: var(--mdx-space-12);
  margin-bottom: var(--mdx-space-24);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--mdx-space-8) var(--mdx-space-24);
}

.meter-key {
  display: flex;
  align-items: center;
  gap: var(--mdx-space-10);
  font-size: var(--mdx-text-15);
  color: var(--mdx-slate);
}

.meter-key::before {
  content: "";
  width: var(--mdx-site-meter-key);
  height: var(--mdx-site-meter-key);
  border-radius: var(--mdx-radius-3);
  background: var(--mdx-brand);
}

.meter-key--rest::before { background: var(--mdx-line-soft) }

.tick-list {
  display: flex;
  flex-direction: column;
  gap: var(--mdx-space-10);
  margin: var(--mdx-space-16) 0;
}

.tick-list > div {
  display: flex;
  align-items: center;
  gap: var(--mdx-space-10);
  font-size: var(--mdx-text-15);
  color: var(--mdx-ink);
}

.tick-list .tick {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--mdx-site-tick);
  height: var(--mdx-site-tick);
  border-radius: var(--mdx-radius-sm);
  background: var(--mdx-hot);
  color: var(--mdx-white);
  font-size: var(--mdx-text-12);
  font-weight: var(--mdx-weight-bold);
  line-height: 1;
}

/* Absence, not failure: nurture grey, never the error red. tokens.css is
   explicit that red is reserved for errors and is not in the band ladder. */
.tick-list .tick--out { background: var(--mdx-nurture) }

/* The comparison table. A grid rather than a table element: the columns are
   fixed-width and the whole thing scrolls sideways at 375px, which a table
   fights. */
.cmp-scroll {
  margin-top: var(--mdx-space-24);
  overflow-x: auto;
  border: var(--mdx-border);
  border-radius: var(--mdx-radius-card);
  background: var(--mdx-white);
}

.cmp-table { min-width: max-content }

.cmp-row {
  display: grid;
  grid-template-columns:
    var(--mdx-site-cmp-measure)
    repeat(4, minmax(var(--mdx-site-cmp-col), 1fr));
  border-bottom: var(--mdx-border-soft);
}

.cmp-row:last-child { border-bottom: 0 }

.cmp-row--head {
  background: var(--mdx-ground);
  font-size: var(--mdx-text-13);
  font-weight: var(--mdx-weight-bold);
  letter-spacing: var(--mdx-track-eyebrow);
  text-transform: uppercase;
  color: var(--mdx-slate);
}

.cmp-row--head > span { padding: var(--mdx-space-12) var(--mdx-space-14) }

.cmp-measure {
  padding: var(--mdx-space-14);
  font-size: var(--mdx-text-15);
  color: var(--mdx-ink);
}

.cmp-ours {
  display: flex;
  align-items: center;
  padding: var(--mdx-space-14);
  font-size: var(--mdx-text-15);
  font-weight: var(--mdx-weight-semibold);
  color: var(--mdx-ink);
  background: var(--mdx-brand-tint);
  font-variant-numeric: tabular-nums;
}

.cmp-cell { display: flex; align-items: center; padding: var(--mdx-space-14) }

/* The honest cell. Hatched and dashed so it reads as absent at a glance and
   cannot be mistaken for a value — PRD Q-K, and this page's own promise that
   a reader can see how much of the table is evidence and how much is not. */
.unmeasured {
  display: inline-flex;
  align-items: center;
  gap: var(--mdx-space-8);
  width: 100%;
  border: var(--mdx-border-dashed);
  border-radius: var(--mdx-radius-control);
  padding: var(--mdx-space-8) var(--mdx-space-12);
  font-size: var(--mdx-text-14);
  color: var(--mdx-slate);
  background: repeating-linear-gradient(
    135deg,
    var(--mdx-white),
    var(--mdx-white) var(--mdx-site-hatch),
    var(--mdx-ground) var(--mdx-site-hatch),
    var(--mdx-ground) calc(var(--mdx-site-hatch) * 2)
  );
}

.unmeasured::before {
  content: "";
  flex: 0 0 auto;
  width: var(--mdx-site-dot-live);
  height: var(--mdx-site-dot-live);
  border-radius: var(--mdx-radius-pill);
  background: var(--mdx-nurture);
}

.cmp-note {
  margin-top: var(--mdx-space-20);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mdx-space-12);
  font-size: var(--mdx-text-15);
  color: var(--mdx-slate);
}

.cmp-note .unmeasured { width: auto; flex: 0 0 auto }
.cmp-note > span:last-child { flex: 1 1 var(--mdx-row-identity) }

.cmp-scroll-hint { margin-top: var(--mdx-space-12) }

/* The methodology block, Story 13.5. */

.method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--mdx-site-col-claim), 1fr));
  gap: var(--mdx-space-20);
  align-items: start;
}

.method { margin: 0; display: flex; flex-direction: column; gap: var(--mdx-space-16) }

.method > div {
  display: flex;
  flex-direction: column;
  gap: var(--mdx-space-4);
  padding-bottom: var(--mdx-space-16);
  border-bottom: var(--mdx-border-soft);
}

.method > div:last-child { padding-bottom: 0; border-bottom: 0 }

.method dt {
  font-size: var(--mdx-text-12);
  font-weight: var(--mdx-weight-bold);
  letter-spacing: var(--mdx-track-eyebrow);
  text-transform: uppercase;
  color: var(--mdx-slate);
}

.method dd {
  margin: 0;
  font-size: var(--mdx-text-15);
  line-height: var(--mdx-leading-body);
  color: var(--mdx-ink);
  text-wrap: pretty;
}

/* -- The template gallery ------------------------------------------------ */
/* Story 13.4. Cards and detail rows; all data from 0009_curated_library.sql. */

.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--mdx-site-col-claim), 1fr));
  gap: var(--mdx-space-20);
  margin-bottom: var(--mdx-space-32);
}

.tpl-card {
  display: flex;
  flex-direction: column;
  gap: var(--mdx-space-8);
  background: var(--mdx-white);
  border: var(--mdx-border);
  border-radius: var(--mdx-radius-card);
  padding: var(--mdx-space-24);
  box-shadow: var(--mdx-shadow-card);
  color: var(--mdx-ink);
  transition: transform var(--mdx-dur-swift) var(--mdx-ease-swift),
              box-shadow var(--mdx-dur-swift) var(--mdx-ease-swift);
}

.tpl-card:hover {
  transform: translateY(calc(-1 * var(--mdx-site-lift)));
  color: var(--mdx-ink);
}

.tpl-archetype {
  font-size: var(--mdx-text-12);
  font-weight: var(--mdx-weight-bold);
  letter-spacing: var(--mdx-track-eyebrow);
  text-transform: uppercase;
  color: var(--mdx-brand-deep);
}

.tpl-name {
  font-size: var(--mdx-text-17);
  font-weight: var(--mdx-weight-semibold);
  letter-spacing: var(--mdx-track-h3);
  color: var(--mdx-ink);
}

.tpl-meta {
  font-size: var(--mdx-text-13);
  color: var(--mdx-slate);
  font-variant-numeric: tabular-nums;
}

.tpl-bands { display: flex; flex-wrap: wrap; gap: var(--mdx-space-6) }

.tpl-honest { max-width: var(--mdx-measure-60) }
.tpl-honest .body { margin-bottom: var(--mdx-space-12) }
.tpl-honest .body:last-child { margin-bottom: 0 }

/* What a template asks. */
.ask-list {
  display: flex;
  flex-direction: column;
  gap: var(--mdx-space-2);
  margin-top: var(--mdx-space-20);
}

.ask {
  display: grid;
  grid-template-columns: var(--mdx-row-control-sm) minmax(0, 1fr) var(--mdx-filter-column);
  gap: var(--mdx-space-16);
  align-items: baseline;
  background: var(--mdx-white);
  border: var(--mdx-border);
  border-radius: var(--mdx-radius-control);
  padding: var(--mdx-space-14) var(--mdx-space-16);
}

.ask-type {
  font-size: var(--mdx-text-12);
  font-weight: var(--mdx-weight-bold);
  letter-spacing: var(--mdx-track-eyebrow);
  text-transform: uppercase;
  color: var(--mdx-slate);
}

.ask-q { font-size: var(--mdx-text-15); color: var(--mdx-ink) }
.ask-note { font-size: var(--mdx-text-13); color: var(--mdx-slate) }

/* Criteria, weights and bands. */
.crit-list,
.band-list {
  display: flex;
  flex-direction: column;
  gap: var(--mdx-space-12);
  margin-top: var(--mdx-space-16);
}

.crit {
  display: grid;
  grid-template-columns: var(--mdx-row-control-sm) minmax(0, 1fr) var(--mdx-space-40);
  gap: var(--mdx-space-12);
  align-items: center;
}

.crit-label { font-size: var(--mdx-text-15); color: var(--mdx-ink) }

.crit-bar {
  height: var(--mdx-space-8);
  border-radius: var(--mdx-radius-pill);
  background: var(--mdx-line-soft);
  overflow: hidden;
  display: flex;
}

/* `--crit-fill` is set inline: it IS the weight, read from the rubric. */
.crit-fill {
  display: block;
  width: var(--crit-fill);
  background: var(--mdx-brand);
  border-radius: var(--mdx-radius-pill);
}

.crit-weight {
  font-size: var(--mdx-text-15);
  font-weight: var(--mdx-weight-semibold);
  color: var(--mdx-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.band-row {
  display: grid;
  grid-template-columns: var(--mdx-row-control-sm) var(--mdx-space-64) minmax(0, 1fr);
  gap: var(--mdx-space-12);
  align-items: center;
}

.band-range {
  font-size: var(--mdx-text-15);
  font-weight: var(--mdx-weight-semibold);
  color: var(--mdx-ink);
  font-variant-numeric: tabular-nums;
}

.dq {
  display: flex;
  flex-direction: column;
  gap: var(--mdx-space-4);
  margin-top: var(--mdx-space-16);
  padding: var(--mdx-space-14) var(--mdx-space-16);
  background: var(--mdx-ground);
  border-radius: var(--mdx-radius-control);
}

.dq-label {
  font-size: var(--mdx-text-15);
  font-weight: var(--mdx-weight-semibold);
  color: var(--mdx-ink);
}

/* -- The pricing page ---------------------------------------------------- */
/* Story 13.2. Limits from the seed, prices from PRD 4.5, milestones from
   PRD 7.4 and the credential registry that enforces it. */

.price-grid {
  display: grid;
  /* 200px, not the 260px the other card grids use: five cards have to fit on
     one row at 1200px, and 260 wraps Agency onto a line of its own. */
  grid-template-columns: repeat(auto-fit, minmax(var(--mdx-site-col-price), 1fr));
  gap: var(--mdx-space-16);
  align-items: stretch;
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--mdx-space-6);
  background: var(--mdx-white);
  border: var(--mdx-border);
  border-radius: var(--mdx-radius-card);
  padding: var(--mdx-space-24);
  box-shadow: var(--mdx-shadow-card);
}

.price-card--featured {
  border-color: var(--mdx-brand);
  background: var(--mdx-brand-tint);
}

.price-flag {
  margin: 0 0 var(--mdx-space-4);
  font-size: var(--mdx-text-12);
  font-weight: var(--mdx-weight-bold);
  letter-spacing: var(--mdx-track-eyebrow);
  text-transform: uppercase;
  color: var(--mdx-brand-deep);
}

.price-plan {
  margin: 0;
  font-size: var(--mdx-text-15);
  font-weight: var(--mdx-weight-semibold);
  color: var(--mdx-slate);
}

.price-figure {
  margin: 0;
  font-size: var(--mdx-site-text-price);
  font-weight: var(--mdx-weight-bold);
  letter-spacing: var(--mdx-track-title);
  color: var(--mdx-ink);
  font-variant-numeric: tabular-nums;
}

.price-period { margin: 0; font-size: var(--mdx-text-13); color: var(--mdx-slate) }

.price-annual {
  margin: 0;
  font-size: var(--mdx-text-13);
  line-height: var(--mdx-leading-body);
  color: var(--mdx-slate);
}

/* PRD 4.5's sentence, said on every card rather than only where it applies —
   "no overage" is the reassurance on Free and Starter, and its absence would
   be the thing a buyer had to notice. */
.price-overage {
  margin: var(--mdx-space-6) 0 var(--mdx-space-12);
  font-size: var(--mdx-text-13);
  line-height: var(--mdx-leading-body);
  color: var(--mdx-slate);
  flex: 1 1 auto;
}

.price-card .btn { width: 100% }

/* The quiet variant: the four cards that are not the recommended one. */
.btn--quiet {
  background: var(--mdx-white);
  color: var(--mdx-ink);
  border: var(--mdx-border);
}

.btn--quiet:hover { background: var(--mdx-ground); color: var(--mdx-ink) }

/* The comparison table reuses the embed-weight grid, with six columns. */
.cmp-table--pricing .cmp-row {
  grid-template-columns:
    var(--mdx-site-cmp-measure)
    repeat(5, minmax(var(--mdx-site-cmp-plan), 1fr));
}

.cmp-table--pricing .cmp-row > span:not(.cmp-measure) {
  padding: var(--mdx-space-12) var(--mdx-space-14);
  font-size: var(--mdx-text-15);
  color: var(--mdx-ink);
}

.cmp-table--pricing .cmp-measure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mdx-space-8);
}

/* A row that does not ship yet says so, beside its own label. */
.soon-flag {
  display: inline-flex;
  align-items: center;
  border-radius: var(--mdx-radius-pill);
  padding: var(--mdx-space-3) var(--mdx-space-8);
  background: var(--mdx-nurture-tint);
  color: var(--mdx-nurture-ink);
  font-size: var(--mdx-text-11);
  font-weight: var(--mdx-weight-bold);
  letter-spacing: var(--mdx-track-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
}