/* =============================================================================
   bakicheck.com — the website stylesheet. Standalone, zero dependencies.
   =============================================================================

   COLOUR
   Every colour value below was COPIED from the product's own design tokens at
   app/public/css/tokens.css, Eucalyptus palette, light and dark. Nothing is
   imported, nothing is linked: this file stands alone so the site can be hosted
   anywhere on its own. NO NEW COLOURS were introduced, in this pass or any
   earlier one. The eucalyptus restyle MOVED colour; it added none.

   THE THREE SURFACES, which is the whole design (04d sections 2 and 3)
   Green  --nav-bg   the company's own voice: the site header, the hero, the
                     honesty block, the head of every inner page, the footer,
                     the language bar.
   Paper  --paper    objects: a table, a phone, the steps, the price cards.
   Ground --ground   running prose and lists, and white cards standing on it.
   A band is one surface, full bleed, straight horizontal joints. There is no
   fourth surface.

   THE HEADER, AND WHY IT IS GREEN  (LD, 2 October 2026)
   It was --paper until LD asked why the top bar was white. A white header, then
   the yellow trial strip, then the green hero read as three unrelated bands
   stacked on each other. The header now carries `on-green` in the markup, so it
   is the same field as the hero below it and reaches that colour through the one
   mechanism rather than a background of its own. `.site-head` therefore sets NO
   background; tools/build.mjs fails the build if it ever sets one again.

   The header now sits straight on the hero, so two green bands ARE adjacent.
   That is the intended end state and the one exception to "two green bands are
   never adjacent": the yellow trial strip that used to separate them was there
   only to say the trial link was missing, and LD supplied it on 2 October 2026.
   The joint between header and hero is therefore
   the --nav-edge hairline the app's rail uses, not a change of surface, and
   nothing in this file has to change for it.

   HOW ON-GREEN TYPE WORKS, so nobody undoes it
   The real palette lives in the *-base tokens. The working tokens (--ink,
   --text-2, --text-3, --pine, --focus, --rule, --hairline, --hover) point at
   them.
   `.on-green` REMAPS those working tokens to the white-on-green set, so every
   paragraph, list and link inside a green band turns white with no per element
   rule. Objects that must keep the paper palette on a green band (a card, a
   table, a button, a pill, a marker) point the working tokens back at the
   *-base values. That is the only mechanism; there are no colour overrides
   scattered through the file.

   THE YELLOW RULE, CARRIED OVER FROM THE PRODUCT
   A solid yellow fill (#FFD43B) is always an ACTION. A pale yellow tint
   (#FFEFA8 with #5A4300 text) is always a STATUS. So the "LD SUPPLY" markers on
   this site are the pale tint, never the solid fill: a missing fact is a status,
   not a button. The "LAWYER" markers take the grey "no info" tint, because
   "a lawyer has not read this yet" is the same kind of answer as "we do not
   know". On a green band the markers keep their own tints and become MORE
   visible, which is correct and deliberate.

   THE MATTE RULE
   The credit answer, pill and strip alike, carries no gradient, no highlight
   and no shadow, at any size, on any surface, including inside a green band.

   THEME
   Eucalyptus light is the default, as in the product. Dark is opt in through
   the operating system only, never the default: this page is read at a counter
   in daylight.

   TYPE
   Plus Jakarta Sans, the same face and the same weights the app requests, with
   a full system fallback so the site reads correctly with no network. Devanagari
   falls to the platform's own face: no second webfont is requested. Sizes are a
   marketing page's sizes, not the app's dense ones. Nothing is below 13px.

   MOBILE FIRST
   Everything below the first media query is the phone. 390px was the width this
   was built and checked at. Widths widen at 560px, 760px and 880px.
   ============================================================================= */

/* ----------------------------------------------------------------- tokens -- */
:root {
  color-scheme: light;

  /* surfaces */
  --ground: #F5F4EC;
  --paper: #FFFFFF;
  --control-edge-base: #848A82;
  --control-edge: var(--control-edge-base);

  /* the real palette. Never remapped. `.on-green` leaves these alone. */
  --ink-base: #14231C;
  --text-2-base: #5D6A62;
  --text-3-base: #63706A;
  --pine-base: #2F5E4A;
  --focus-base: #2F5E4A;
  --hairline-base: #E4E2D6;
  --rule-base: #EDEBE0;
  --hover-base: #FAF9F2;

  /* the working palette. `.on-green` points these at the white-on-green set. */
  --ink: var(--ink-base);
  --text-2: var(--text-2-base);
  --text-3: var(--text-3-base);
  --pine: var(--pine-base);
  --focus: var(--focus-base);
  --hairline: var(--hairline-base);
  --rule: var(--rule-base);
  --hover: var(--hover-base);

  --on-ink: #FFFFFF;

  /* the dark green field, the mark */
  --nav-bg: #305D4A;
  --nav-ink: #FFFFFF;
  --nav-ink-2: rgba(255, 255, 255, .80);
  --nav-edge: rgba(255, 255, 255, .16);
  --nav-hover: rgba(255, 255, 255, .10);
  --nav-focus: #FFFFFF;
  --nav-mark-green: #8FE3B8;

  --price: #2F5E4A;
  --gold: #FFD43B;
  --gold-bright: #FFE170;

  /* the credit palette. Always matte: no gradient, no shadow, ever. */
  --ok: #0C5A3A;     --ok-bg: #DCEFE3;
  --warn: #5A4300;   --warn-bg: #FFEFA8;
  --stop: #A8200D;   --stop-bg: #FDE7E4;
  --muted: #3F4A44;  --muted-bg: #EAEAE4;
  --edge-overdue: #D92D12;

  /* the glossy finish */
  --btn-primary-bg: #FFD43B;
  --btn-primary-top: #FFE170;
  --btn-primary-bottom: #F0C21E;
  --btn-primary-ink: #14231C;
  --btn-primary-edge: #B08400;
  --btn-primary-hover-top: #FFE895;
  --btn-primary-hover-bottom: #F5CE3C;

  --ctrl-top: #FFFFFF;
  --ctrl-bottom: #F4F2E8;
  --ctrl-hover-bottom: #ECEADD;
  --gloss-top: rgba(255, 255, 255, .55);
  --gloss-bottom: rgba(20, 35, 28, .20);
  --card-gloss: rgba(255, 255, 255, .95);

  --sh-btn: 0 1px 2px rgba(20, 35, 28, .16);
  --sh-btn-hover: 0 2px 4px rgba(20, 35, 28, .18);
  --sh-card: 0 1px 2px rgba(20, 35, 28, .05), 0 10px 24px rgba(20, 35, 28, .06);

  /* type */
  --font-latin: 'Plus Jakarta Sans', system-ui, -apple-system,
                'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue',
                Arial, sans-serif;
  --font-indic: 'Noto Sans Devanagari', 'Nirmala UI', var(--font-latin);

  /* space and shape */
  --sp-2: 0.125rem;
  --sp-4: 0.25rem;
  --sp-6: 0.375rem;
  --sp-8: 0.5rem;
  --sp-12: 0.75rem;
  --sp-16: 1rem;
  --sp-20: 1.25rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-40: 2.5rem;
  --r-6: 0.375rem;
  --r-8: 0.5rem;
  --r-12: 0.75rem;
  --r-pill: 999px;

  --gutter: 1rem;
  --shell: 68rem;
  --measure: 62ch;      /* three paragraphs or more: prose */
  --measure-sub: 54ch;  /* one or two sentences: a statement, at lede size */
  --measure-list: 68ch;
  --amount-col: 5.5rem; /* the app's money column floor, app.css line 950 */
  --tap-min: 2.75rem;
  --dur: 140ms;
  --ease-out: cubic-bezier(.2, .8, .3, 1);

  /* band padding. Separation is generous, interiors are tight (04d 9.2). */
  --band: clamp(2.75rem, 9vw, 5rem);
  --band-green: clamp(3rem, 10vw, 5.5rem);
  --band-hero: clamp(2.5rem, 7vw, 5rem);
  --band-head: clamp(2.5rem, 7vw, 4.5rem);
  --band-tight: clamp(1.5rem, 4vw, 2.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --ground: #101A15;
    --paper: #17241E;
    --hover-base: #1D2C25;
    --control-edge-base: #7E8A82;

    --ink-base: #EDF2EE;
    --text-2-base: #A8B6AE;
    --text-3-base: #93A199;
    --pine-base: #7FD2A8;
    --focus-base: #7FD2A8;
    --hairline-base: #2A3B33;
    --rule-base: #223128;

    --on-ink: #101A15;

    --nav-bg: #1B342A;
    --nav-ink-2: rgba(255, 255, 255, .80);
    --nav-edge: rgba(255, 255, 255, .14);
    --nav-hover: rgba(255, 255, 255, .08);

    --price: #7FD2A8;

    --ok: #55D6A0;     --ok-bg: #0E2E22;
    --warn: #F2C75B;   --warn-bg: #33270A;
    --stop: #FF9A8A;   --stop-bg: #3A1714;
    --muted: #B4BDB7;  --muted-bg: #242D28;
    --edge-overdue: #FF6A4D;

    --btn-primary-edge: #C79A14;
    --ctrl-top: #1F3128;
    --ctrl-bottom: #17241E;
    --ctrl-hover-bottom: #1D2C25;
    --gloss-top: rgba(255, 255, 255, .18);
    --gloss-bottom: rgba(0, 0, 0, .40);
    --card-gloss: rgba(255, 255, 255, .06);

    --sh-btn: 0 1px 2px rgba(0, 0, 0, .55);
    --sh-btn-hover: 0 2px 4px rgba(0, 0, 0, .6);
    --sh-card: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .45);
  }
}

/* ------------------------------------------------------------------ reset -- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-latin);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  overflow-wrap: break-word;
}

/* Devanagari is harder to read than Latin at the same size in daylight, so the
   Hindi pages take 17px and a taller line, per Herald's rule. The Devanagari
   stack ends in --font-latin, so the Latin words inside Hindi copy (BakiCheck,
   WhatsApp, GSTIN, every figure) still set in Plus Jakarta Sans with no
   per word markup. */
html[lang="hi"] body {
  font-family: var(--font-indic);
  font-size: 1.0625rem;
  line-height: 1.62;
}
html[lang="hi"] :is(h1, h2, h3, h4) { font-family: var(--font-indic); }

img, svg { max-width: 100%; }
svg { display: block; }

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-12);
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
h1 { font-size: clamp(1.875rem, 6.4vw, 3rem); font-weight: 800; line-height: 1.1; max-width: 24ch; }
h2 { font-size: clamp(1.5rem, 4.8vw, 2.25rem); font-weight: 700; max-width: 24ch; margin-bottom: var(--sp-16); }
h3 { font-size: clamp(1.125rem, 3.2vw, 1.25rem); font-weight: 700; line-height: 1.25; margin-bottom: var(--sp-8); }
h4 { font-size: 1rem; font-weight: 700; }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 var(--sp-16); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--pine); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--ink); }

strong, b { font-weight: 700; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-4, 2px);
}

/* the skip link: off screen until focused, then real */
.skip {
  position: absolute; left: var(--sp-8); top: var(--sp-8); z-index: 60;
  transform: translateY(-200%);
  background: var(--paper); color: var(--ink-base);
  border: 1px solid var(--control-edge); border-radius: var(--r-6);
  padding: var(--sp-8) var(--sp-12); font-weight: 600; text-decoration: none;
}
.skip:focus-visible { transform: translateY(0); }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ frame -- */
.wrap {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-16); }

/* --------------------------------------------------------------- the bands --
   Every gap of 40px or more on this site is a band joint. Nothing inside a band
   is ever 40px or more. That is the entire rhythm (04d 9.3).
   -------------------------------------------------------------------------- */
section { padding-block: var(--band); }
section.tight { padding-block: var(--band-tight); }
.on-paper { background: var(--paper); border-block: 1px solid var(--hairline); }
.on-ground { background: var(--ground); }

/* THE GREEN BAND. The one class that carries the whole restyle. */
.on-green {
  background: var(--nav-bg);
  color: var(--nav-ink);
  border-block: 1px solid var(--nav-edge);
  /* the remap: every working token points at the white-on-green set */
  --ink: var(--nav-ink);
  --text-2: var(--nav-ink-2);
  --text-3: var(--nav-ink-2);
  --pine: var(--nav-ink);
  --focus: var(--nav-focus);
  --hairline: var(--nav-edge);
  --rule: var(--nav-edge);
  /* --hover joined the remap when the header went green. A hover tint of
     #FAF9F2 under white text is a near white pill with a white label on it,
     which is how the wide nav's links would have read on the green header. */
  --hover: var(--nav-hover);
}
section.on-green { padding-block: var(--band-green); }

/* Objects keep the paper palette on a green band: a card is a white object on
   the rail, exactly as in the app. Without this the remap would bleach them.
   This rule only puts the working tokens back; it sets no colour of its own. */
.on-green :is(.card, .phone, .block, .plan, .quote, .box, table, .btn,
              .pill, .credit, .menu, .working) {
  --ink: var(--ink-base);
  --text-2: var(--text-2-base);
  --text-3: var(--text-3-base);
  --pine: var(--pine-base);
  --focus: var(--focus-base);
  --hairline: var(--hairline-base);
  --rule: var(--rule-base);
  --hover: var(--hover-base);
}

/* Then the objects whose text colour is INHERITED take ink back explicitly.
   Two things are deliberately absent from this list and must stay absent:
   `.credit` and `.pill`. They set their own colour from the credit palette
   (--ok, --warn, --stop, --muted), which is never remapped, and a `color`
   declaration here would beat `.credit.is-stop` and silently turn the red
   credit answer inside the hero card into ordinary ink. Readable, and wrong:
   the one object on the page whose colour IS its meaning would have lost it.
   For the same reason every selector in both lists is a plain class. A single
   compound argument such as `details.working` raises the whole `:is()` to
   (0,2,1) and starts overriding the state classes again.
   `.menu` and not `.menu-panel`: on the green header the panel was already
   covered, but the `<summary>` that opens it is a light glossy control whose
   label INHERITS, so it was white on near white. `.menu` is the whole object,
   summary and panel, and the panel needs no separate entry inside it. */
.on-green :is(.card, .phone, .block, .plan, .quote, .box, table,
              .menu, .working) {
  color: var(--ink-base);
}
/* a lede on green is full white, not 80 percent: three sentences read at a
   counter in daylight (04d section 4) */
.on-green > .wrap .lede, .on-green .lede { color: var(--nav-ink); }
.on-green :is(.card, .block, .plan, .quote, .box, table) .lede { color: var(--text-2-base); }
/* `:not(.btn)` is load bearing, not tidiness. A link on a green band goes white;
   a BUTTON that happens to be an anchor must keep the colour its own class
   gives it. Without the guard, `.on-green a` at (0,1,1) beats `.btn-primary` at
   (0,1,0) and paints the hero's gold button and the chooser's हिन्दी button
   with white labels on a light fill: 1.69:1, which is a label nobody can read.
   Any new rule here that targets a bare element must carry the same guard. */
.on-green a:not(.btn) { color: var(--nav-ink); }
.on-green a:not(.btn):hover { color: var(--nav-ink); }
.on-green :is(.card, .block, .plan, .quote, .box, table) a:not(.btn) { color: var(--pine-base); }

/* The menu panel is the third case and it needed saying out loud. `:not(.btn)`
   carries its argument's weight, so `.on-green a:not(.btn)` is (0,2,1) and beats
   `.menu-panel a` at (0,1,1): the moment the header became a green band, every
   link in the open menu went white on a white panel and only the current page
   was still visible. Putting the working tokens back does not fix it, because
   the links were never reading --ink in the first place.
   These two are (0,3,1) and sit in this order on purpose: the panel's links are
   INK, and the one green item in it is the page you are on. A pine rule for all
   of them, which is what the object list above would have given, would have
   erased the only distinction the panel has. */
.on-green .menu a:not(.btn) { color: var(--ink-base); }
.on-green .menu a[aria-current="page"] { color: var(--pine-base); }

.eyebrow {
  margin: 0 0 var(--sp-12);
  font-size: 0.875rem; font-weight: 600; line-height: 1.3; color: var(--text-2);
}
.lede { font-size: 1.0625rem; line-height: 1.5; color: var(--text-2); max-width: var(--measure-sub); }
.note { font-size: 0.8125rem; line-height: 1.4; color: var(--text-3); }
.indic { font-family: var(--font-indic); font-weight: 500; line-height: 1.45; color: var(--text-2); }
.money, .num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.rs { font-size: 0.9em; }

/* a statement of one or two sentences is set at lede size on a 54ch measure.
   A two sentence statement as 16px body across 62ch is the exact thing that
   made this page read as a document (04d 9.4). */
.statement {
  font-size: 1.0625rem; line-height: 1.5; max-width: var(--measure-sub);
  color: var(--ink);
}
.lead-out { margin-top: var(--sp-24); }
.after-text { margin-top: var(--sp-24); }

/* --------------------------------------------------------------- wordmark -- */
.wordmark {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  font: 800 1.125rem/1.2 var(--font-latin); letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.wordmark .mark { width: 1.625rem; height: 1.625rem; flex: 0 0 1.625rem; color: var(--pine); }
.wordmark .baki { color: var(--gold); }
.wordmark .check { color: var(--pine); }
.wordmark:hover { color: var(--ink); }
/* on the dark green field both the glyph and "Check" take the lighter green */
.on-green .wordmark { color: var(--nav-ink); }
.on-green .wordmark .mark, .on-green .wordmark .check { color: var(--nav-mark-green); }

/* The mark now sits on green in the header on every page, so the wordmark's own
   two colours are measured against the green field rather than against paper.
   Checked 2 October 2026, and these are the lowest ratios anywhere in the
   header, which is why they are written down:
     "Baki"  --gold #FFD43B      on #305D4A light  5.28:1,  on #1B342A dark 9.38:1
     "Check" --nav-mark-green    #8FE3B8 on #305D4A 4.96:1, on #1B342A 8.81:1
   4.96:1 is the floor and it clears AA for normal text. Everything else in the
   header is white or 80 percent white: 7.53:1 and 5.53:1 on the light green. */

/* --------------------------------------------------------------- controls -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); padding: var(--sp-12) var(--sp-20);
  border-radius: var(--r-8); border: 1px solid var(--control-edge);
  font: 600 0.9375rem/1 var(--font-latin);
  text-decoration: none; cursor: pointer;
  background-image: linear-gradient(var(--ctrl-top), var(--ctrl-bottom));
  color: var(--ink);
  box-shadow: var(--sh-btn);
  transition: box-shadow var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}
.btn:hover {
  color: var(--ink);
  background-image: linear-gradient(var(--ctrl-top), var(--ctrl-hover-bottom));
  box-shadow: var(--sh-btn-hover);
}
/* the primary: a solid yellow fill with dark text, so it is always an action */
.btn-primary {
  border-color: var(--btn-primary-edge);
  color: var(--btn-primary-ink);
  background-image: linear-gradient(var(--btn-primary-top), var(--btn-primary-bottom));
  box-shadow: inset 0 1px 0 var(--gloss-top), var(--sh-btn);
}
.btn-primary:hover {
  color: var(--btn-primary-ink);
  background-image: linear-gradient(var(--btn-primary-hover-top), var(--btn-primary-hover-bottom));
  box-shadow: inset 0 1px 0 var(--gloss-top), var(--sh-btn-hover);
}
.btn-lg { padding: var(--sp-16) var(--sp-24); font-size: 1rem; min-height: 3rem; }
.btn-sm { padding: var(--sp-8) var(--sp-12); min-height: var(--tap-min); font-size: 0.875rem; }
.btn-block { width: 100%; }

.link-plain { font-weight: 600; min-height: var(--tap-min); display: inline-flex; align-items: center; }

.cta-row {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-12);
}
.cta-sub { margin-top: var(--sp-12); font-size: 0.8125rem; color: var(--text-3); }

/* --------------------------------------------------- THE LD / LAWYER MARKS --
   Unmistakable, in palette, and never confusable with real copy. The pale
   yellow tint is a STATUS in this product, so a missing fact wears it. The grey
   "no info" tint carries the lawyer items, because an unreviewed clause is the
   same kind of answer as "we do not know yet".

   The 1px inset edge is LOAD BEARING and is never removed. The tint alone is
   1.05:1 against the ground band and 1.09:1 against green in dark mode; the
   edge, at 8.12:1 and 8.34:1 against its own fill, is what finds the marker.
   -------------------------------------------------------------------------- */
mark.ld, mark.lw {
  display: inline;
  padding: 0.1em 0.4em;
  border-radius: var(--r-6);
  font-weight: 600;
  font-size: 0.9375em;
  line-height: 1.4;
  text-decoration: none;
  font-family: var(--font-latin);
}
mark.ld {
  background: var(--warn-bg); color: var(--warn);
  box-shadow: inset 0 0 0 1px var(--warn);
}
mark.lw {
  background: var(--muted-bg); color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--muted);
}
mark.ld::before { content: "LD SUPPLY: "; font-weight: 800; }
mark.lw::before { content: "LAWYER: "; font-weight: 800; }
mark.ld.block, mark.lw.block { display: block; padding: var(--sp-12); }
/* on a green band the markers keep their own tints, so they are the most
   visible object in the band. That is intended, not a defect. */
.on-green mark.ld { background: var(--warn-bg); color: var(--warn); }
.on-green mark.lw { background: var(--muted-bg); color: var(--muted); }

/* ----------------------------------------------------------------- header --
   A green band that happens to be sticky. The colour, the white type and the
   paper palette for the controls inside it all arrive through `on-green` in the
   markup, which is why there is no colour of any kind in this rule: the band
   mechanism is the one home for the green and this must never become a second.
   The only thing overridden is the band's top border, because a band carries a
   hairline on both edges and this band's top edge is the top of the page. A line
   there is a line along the browser's own chrome, which is nothing.
   -------------------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 30;
  border-block-width: 0 1px;
}
.head-row {
  position: relative;            /* the menu panel hangs off the header, not off
                                    the small button, so it can never run off the
                                    left edge of a narrow phone */
  display: flex; align-items: center; gap: var(--sp-8);
  min-height: 3.5rem;
}
.head-row .wordmark { margin-right: auto; }

/* the permanent language toggle. 44px target, visible on a phone without
   opening the menu (07c 1.4). */
.lang-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); min-width: var(--tap-min);
  padding: 0 var(--sp-8);
  font-weight: 600; font-size: 0.9375rem;
  color: var(--ink); text-decoration: underline; text-underline-offset: 0.15em;
  white-space: nowrap;
}
.lang-toggle[lang="hi"] { font-family: var(--font-indic); }
.lang-toggle[lang="en"] { font-family: var(--font-latin); }

.menu { position: static; }
.menu > summary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); min-width: var(--tap-min);
  padding: 0 var(--sp-12);
  border: 1px solid var(--control-edge);
  border-radius: var(--r-8);
  font-weight: 600; font-size: 0.875rem;
  cursor: pointer; list-style: none;
  background-image: linear-gradient(var(--ctrl-top), var(--ctrl-bottom));
  transition: box-shadow var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background-image: linear-gradient(var(--ctrl-top), var(--ctrl-hover-bottom)); }
.menu-panel {
  position: absolute; right: var(--gutter); top: calc(100% + var(--sp-8)); z-index: 40;
  /* sized to its longest link, never wider than the screen it drops onto */
  width: max-content; min-width: 11rem; max-width: calc(100vw - 2rem);
  background: var(--paper);
  border: 1px solid var(--hairline); border-radius: var(--r-12);
  box-shadow: var(--sh-card);
  padding: var(--sp-8);
}
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-panel a {
  display: flex; align-items: center; min-height: var(--tap-min);
  padding: var(--sp-8) var(--sp-12); border-radius: var(--r-6);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.9375rem;
}
.menu-panel a:hover { background: var(--hover); }
.menu-panel a[aria-current="page"] { color: var(--pine); }

.nav-wide { display: none; }

/* ------------------------------------------------------------------- hero --
   A plain green band, the product's own rail colour, with the words on the left
   and the white order card on a pale tray on the right. No gradient, no
   pattern, no second device, nothing crossing the band's edge.
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--band-hero); border-top: 0; }
.hero h1 { margin-bottom: var(--sp-12); }
.hero .lede { max-width: var(--measure-sub); font-size: 1.0625rem; }
.hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.hero .shot { margin-top: var(--sp-32); }

/* the head of every inner page. The app puts its rail on every screen; the
   site puts this green band at the top of every page. */
.hero.inner { padding-block: var(--band-head); }
.hero.inner h1 { font-size: clamp(1.75rem, 5.6vw, 2.5rem); }
.hero.inner .lede { max-width: var(--measure); }
.hero.inner .prose { max-width: var(--measure); }

/* --------------------------------------------------------------- the card --
   A rendering of the product's own order card, built from the product's own
   tokens, with sample data. Captioned as sample data wherever it appears.
   This markup is the SPECIFICATION for the owner app's phone order screen
   (04d section 8): five regions, top to bottom, and nothing else.
   -------------------------------------------------------------------------- */
.phone {
  width: 100%; max-width: 22rem; margin-inline: auto;
  border: 1px solid var(--control-edge); border-radius: 1.75rem;
  padding: var(--sp-12);
  background: var(--ground);
  box-shadow: var(--sh-card);
}
/* On the green hero the tray is already 6.82:1 against the band, so it drops
   its border and its shadow: a shadow on a dark field is invisible anyway. On
   a paper band --ground is 1.07:1, so there the border IS the tray. */
.on-green .phone { border: 0; box-shadow: none; }

.card {
  background: var(--paper);
  border: 1px solid var(--hairline); border-radius: var(--r-12);
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.card.alert { border-top: 4px solid var(--edge-overdue); }
.card-pad { padding: var(--sp-16); }

/* region 1: who and when */
.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-8); padding: var(--sp-16) var(--sp-16) var(--sp-8);
}
.card-head h3 { margin: 0; font-size: 1rem; line-height: 1.3; max-width: none; }
/* the app's .order-header__ref is --text-2. The global .note stays --text-3. */
.card-head .note { white-space: nowrap; color: var(--text-2); }

/* region 2: what he asked for. Three row forms, which are the whole
   explanation. The money column is fixed so it can never be compressed by
   whatever is to its left: that is the app's own rule and the fix for the
   clipping LD photographed. */
/* one quiet sentence under the card's title, where the app prints one. Sits
   inside the head's padding, not in the list, so it is not mistaken for a row */
.card-note {
  margin: calc(var(--sp-8) * -1) 0 0;
  padding: 0 var(--sp-16) var(--sp-12);
}

.lines { list-style: none; margin: 0; padding: 0; }
.lines li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--amount-col);
  gap: var(--sp-4) var(--sp-8);
  padding: var(--sp-12) var(--sp-16);
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.lines .l-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.lines .l-amt {
  font-weight: 600; font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}
.lines .l-meta {
  grid-column: 1 / -1; font-size: 0.8125rem; font-weight: 400;
  color: var(--text-2); overflow-wrap: anywhere;
}
.lines li.flagged { border-left: 3px solid var(--ink); }

/* region 3: the total. One row, one figure. Its edge is the hairline, one step
   stronger than the rules inside the list, because it closes the list. */
.card-total {
  display: flex; justify-content: space-between; gap: var(--sp-8);
  padding: var(--sp-12) var(--sp-16);
  border-top: 1px solid var(--hairline);
  font-size: 0.9375rem; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* region 4: the credit answer. MATTE, always: no gradient, no shadow, no
   border, at any size, on any surface, including inside a green band.
   The pill is NOT used in here: .pill.is-stop and .credit.is-stop are both
   --stop-bg, so a pill inside the strip is about 1:1 against its own fill and
   is invisible as a pill. The word is the strip's own 18px heading with the
   state glyph in front of it, which is what the app draws. */
.credit {
  display: flex; align-items: flex-start; gap: var(--sp-8);
  margin: 0; padding: var(--sp-12) var(--sp-16);
  background: var(--muted-bg); color: var(--muted);
  background-image: none !important; box-shadow: none !important;
  border: 0; border-top: 1px solid var(--hairline);
  font-size: 0.875rem;
}
.credit.is-stop { background: var(--stop-bg); color: var(--stop); }
.credit.is-ok { background: var(--ok-bg); color: var(--ok); }
.credit.is-warn { background: var(--warn-bg); color: var(--warn); }
.credit.is-muted { background: var(--muted-bg); color: var(--muted); }
.credit-glyph {
  width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem;
  margin-top: var(--sp-2); color: inherit;
}
.credit-body { min-width: 0; }
.credit-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sp-4) var(--sp-8); margin: 0;
}
.credit-word { font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
.credit-fig {
  font-size: 1.5rem; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
/* the Hindi twin. The app has printed both words since creditWording.js
   existed; the mockup was missing one of them. Devanagari is never set smaller
   than the Latin beside it, and here it sits beneath, not beside. */
.credit-hindi {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-indic); font-size: 0.8125rem; font-weight: 500;
  line-height: 1.45;
}
.credit-facts {
  margin: var(--sp-4) 0 0;
  font-size: 0.8125rem; font-weight: 500; line-height: 1.4;
}
/* a gloss list under the tray on the Hindi page: the English words printed on
   the card, said once in Hindi. It is honest, because the app's interface is
   in English and this says so plainly. */
.card-gloss {
  margin: var(--sp-12) auto 0; max-width: 32ch; list-style: none; padding: 0;
  font-size: 0.8125rem; color: var(--text-2); text-align: left;
}
.card-gloss li + li { margin-top: var(--sp-4); }
.on-green .card-gloss { color: var(--nav-ink-2); }

/* region 5: the actions */
.card-actions {
  display: flex; gap: var(--sp-8); padding: var(--sp-12) var(--sp-16);
  border-top: 1px solid var(--hairline); flex-wrap: wrap;
}
/* a blocked primary keeps its gold fill and its edge underneath. It is never
   greyed, never recoloured, never relabelled, never hidden: a blocked gold
   button is the argument, a missing button is a dead end. */
.btn[aria-disabled="true"], .btn.is-off {
  opacity: 0.55; box-shadow: none; cursor: not-allowed;
}
figure.shot { margin: 0; }
figure.shot figcaption {
  margin-top: var(--sp-12); text-align: center;
  max-width: 32ch; margin-inline: auto;
}

/* ------------------------------------------------------------- the pills --
   Four answers, four shapes. The shape channel the product uses to separate
   them exists on the site too, so colour is never the only carrier.
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--sp-6);
  padding: 0 var(--sp-12); min-height: 1.75rem;
  border-radius: var(--r-pill);
  background: var(--muted-bg); color: var(--muted);
  background-image: none !important; box-shadow: none !important;
  border: 0;
  font: 600 0.875rem/1 var(--font-latin); white-space: nowrap;
}
.pill svg { width: 1rem; height: 1rem; flex: 0 0 1rem; color: inherit; }
.pill.is-ok { background: var(--ok-bg); color: var(--ok); }
.pill.is-warn { background: var(--warn-bg); color: var(--warn); }
.pill.is-stop { background: var(--stop-bg); color: var(--stop); }
.pill.is-muted { background: var(--muted-bg); color: var(--muted); }

/* ------------------------------------------------------------------ cards -- */
.grid { display: grid; gap: var(--sp-16); }
.block {
  background: var(--paper);
  border: 1px solid var(--hairline); border-radius: var(--r-12);
  box-shadow: var(--sh-card);
  padding: var(--sp-20);
}
.block h3 { margin-bottom: var(--sp-8); }
.block.plain { box-shadow: none; }

.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.steps > li {
  counter-increment: s;
  position: relative;
  padding: 0 0 var(--sp-24) var(--sp-40);
  border-left: 1px solid var(--hairline);
  margin-left: 0.9375rem;
}
.steps > li::before {
  content: counter(s);
  position: absolute; left: -1rem; top: 0;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--nav-bg); color: var(--nav-ink);
  display: flex; align-items: center; justify-content: center;
  font: 700 0.875rem/1 var(--font-latin);
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps h3 { margin-bottom: var(--sp-4); }

.plain-list { list-style: none; margin: 0; padding: 0; max-width: var(--measure-list); }
.plain-list > li {
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--rule);
}
.plain-list > li:first-child { border-top: 1px solid var(--rule); }
/* the honesty list: four statements, so each one gets 16px each side and the
   rules between them are --nav-edge, never --rule, which on green would show
   as a bright line */
.on-green .plain-list > li { padding-block: var(--sp-16); }

.tick-list { margin: 0; padding-left: 1.25rem; max-width: var(--measure-list); }
.tick-list > li { margin-bottom: var(--sp-8); }

/* ----------------------------------------------------------------- tables --
   Real tables with hairline rules, never cards pretending to be tables. On a
   phone each row stacks and every cell carries its own column head, written
   into the markup as data-h, so the table is still a table to a screen reader.
   Tables are always white objects and never sit on a green band.
   -------------------------------------------------------------------------- */
table {
  width: 100%; border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--hairline); border-radius: var(--r-8);
  font-size: 0.9375rem;
}
caption {
  caption-side: top; text-align: left;
  font-weight: 700; padding-bottom: var(--sp-8);
}
th, td { text-align: left; padding: var(--sp-12); vertical-align: top; line-height: 1.4; }
th { font-weight: 700; }
/* the row head drops to 600 so the total row at 700 is the only heavy row */
tbody th[scope="row"] { font-weight: 600; }
thead th { border-bottom: 1px solid var(--hairline); }
tbody tr + tr > * { border-top: 1px solid var(--rule); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
tfoot td, tr.total > * { font-weight: 700; border-top: 1px solid var(--hairline); }
tr.total td.num, tr.total th[scope="row"] { font-weight: 700; }
tr.total td.num { font-size: 1.125rem; line-height: 1.2; }

@media (max-width: 759px) {
  table.stack { border: 0; background: none; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.stack tr {
    display: block; background: var(--paper);
    border: 1px solid var(--hairline); border-radius: var(--r-8);
    margin-bottom: var(--sp-12); padding: var(--sp-4) var(--sp-12);
  }
  table.stack tbody tr + tr > * { border-top: 0; }
  table.stack td, table.stack th {
    display: block; padding: var(--sp-8) 0; text-align: left;
    border-bottom: 1px solid var(--rule);
  }
  table.stack tr > *:last-child { border-bottom: 0; }
  table.stack td[data-h]::before, table.stack th[data-h]::before {
    content: attr(data-h);
    display: block; font-size: 0.8125rem; font-weight: 600; color: var(--text-3);
  }
  /* the row's own name needs no column head above it: it IS the row */
  table.stack th[scope="row"][data-h]::before { content: none; }
  table.stack th[scope="row"] { font-size: 1rem; padding-top: var(--sp-12); }
  table.stack td.num { text-align: left; }
}

/* a table that must keep its shape scrolls inside its own box, never the page */
.scroll-x { overflow-x: auto; }

/* ---------------------------------------------------------------- pricing -- */
.plans { display: grid; gap: var(--sp-16); }
.plan {
  background: var(--paper);
  border: 1px solid var(--hairline); border-radius: var(--r-12);
  box-shadow: var(--sh-card);
  padding: var(--sp-20);
  display: flex; flex-direction: column; gap: var(--sp-12);
}
/* the only thing marking the recommended plan is this border and its gold
   button. No tag, no ribbon, no tinted cap. */
.plan.lead { border-color: var(--control-edge); }
.plan h3 { margin: 0; }
.plan .tag { font-size: 0.8125rem; color: var(--text-2); font-weight: 600; }
.plan .amount {
  font: 800 clamp(1.5rem, 6vw, 2rem)/1.1 var(--font-latin);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  color: var(--price);
}
.plan .amount span { font-size: 0.875rem; font-weight: 600; color: var(--text-2); }
.plan dl { margin: 0; display: grid; gap: var(--sp-8); }
.plan dl > div {
  display: flex; justify-content: space-between; gap: var(--sp-12);
  padding-bottom: var(--sp-8); border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
}
.plan dt { color: var(--text-2); }
.plan dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
/* on a phone the answer goes under the question rather than fighting it for width */
@media (max-width: 559px) {
  .plan dl > div { flex-direction: column; gap: var(--sp-4); }
  .plan dd { text-align: left; }
}
.plan .btn { margin-top: auto; }

.box {
  background: var(--paper);
  border: 1px solid var(--hairline); border-left: 3px solid var(--ink);
  border-radius: var(--r-8);
  padding: var(--sp-16);
  max-width: var(--measure-list);
}

/* --------------------------------------------------------------- the FAQ  -- */
.qa { border-top: 1px solid var(--rule); padding: var(--sp-16) 0; max-width: var(--measure-list); }
.qa h3 { margin-bottom: var(--sp-4); }

details.working {
  background: var(--paper);
  border: 1px solid var(--hairline); border-radius: var(--r-8);
  padding: var(--sp-12) var(--sp-16);
}
details.working > summary {
  font-weight: 700; cursor: pointer; min-height: var(--tap-min);
  display: flex; align-items: center;
}
details.working > summary::marker { color: var(--text-3); }
details.working > *:not(summary) { margin-top: var(--sp-16); }

blockquote.quote {
  margin: 0; padding: var(--sp-16);
  background: var(--paper);
  border: 1px solid var(--hairline); border-left: 3px solid var(--pine);
  border-radius: var(--r-8);
  font-size: 0.9375rem;
}
/* a white object on the green, as the card is on the hero */
.on-green blockquote.quote { border-left-color: var(--pine-base); }

/* ------------------------------------------------------------------ anchor -- */
/* on a green inner head this reads as the app's own menu: a list of white
   links on the rail. Each one is a block with a 44px tap target. */
.toc { list-style: none; margin: 0; padding: 0; columns: 1; }
.toc li { break-inside: avoid; }
.toc a {
  display: flex; align-items: center; min-height: var(--tap-min);
  font-weight: 600; font-size: 0.9375rem;
}
.toc-label { font-size: 0.8125rem; font-weight: 700; color: var(--text-3); margin-bottom: var(--sp-8); }
.on-green .toc-label { color: var(--nav-ink-2); }
h2[id], h3[id] { scroll-margin-top: 4.5rem; }

/* ------------------------------------------------------------------ footer -- */
.site-foot { padding-block: clamp(2rem, 5vw, 3rem); }
.site-foot .foot-grid { display: grid; gap: var(--sp-24); }
.site-foot h2 {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0;
  color: var(--nav-ink); margin-bottom: var(--sp-8); max-width: none;
}
.site-foot p, .site-foot ul { font-size: 0.875rem; color: var(--nav-ink-2); }
.site-foot a { color: var(--nav-ink); text-decoration: underline; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li a { display: inline-flex; align-items: center; min-height: var(--tap-min); }
.foot-fine {
  margin-top: var(--sp-24); padding-top: var(--sp-16);
  border-top: 1px solid var(--nav-edge);
  font-size: 0.8125rem; color: var(--nav-ink-2);
}
.foot-fine p + p { margin-top: var(--sp-8); }

/* ------------------------------------------------- THE LANGUAGE CHOOSER --
   A question, not a gate. The page is fully visible and fully usable behind
   it: nothing is dimmed, nothing is blocked, no focus is trapped.

   It is a fixed bar at the BOTTOM of the viewport, because on a phone that is
   the thumb's half of the screen and the top of the first screen belongs to
   the h1 and the button. It is FIRST in DOM order after the skip link, so the
   first Tab press reaches it; position: fixed decouples the two.

   The 1px WHITE top edge is load bearing and is never removed: the bar can
   come to rest over the green footer, and green on green at 1.50:1 would merge.
   White on green is 7.52:1.
   -------------------------------------------------------------------------- */
/* Hidden unless <html> carries .has-chooser, which the inline script sets
   before the first paint. So the bar is in the first frame or it is not there
   at all. With JavaScript off it stays hidden, and the header's language link
   is the way across; nothing is lost and nothing half works. */
.chooser { display: none; }
html.has-chooser .chooser {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: 8.5rem;
  display: flex; align-items: center;
  border-top: 1px solid var(--paper);
  border-bottom: 0;
  padding-block: var(--sp-16);
}
.chooser .wrap { display: flex; flex-direction: column; gap: var(--sp-12); }
.chooser-row { display: flex; align-items: flex-start; gap: var(--sp-8); }
.chooser-q {
  margin: 0; max-width: 32ch;
  font-size: 1.0625rem; font-weight: 600; line-height: 1.3;
  color: var(--nav-ink);
}
.chooser-q span { display: block; }
.chooser-q span[lang="hi"] { font-family: var(--font-indic); }
.chooser-q span[lang="en"] { font-family: var(--font-latin); }
/* The bar's height is FIXED, because there is no JavaScript measuring it: two
   lines of question at 17px (44px) plus 12px plus a 48px button row plus 32px
   of padding is exactly 8.5rem. Nothing else fits, so nothing else is in it.
   No sub line, no tick box, no "we use cookies" sentence, no accept button:
   it must read as a question, never as a consent bar. */
.chooser-pick { display: flex; gap: var(--sp-12); }
.chooser-pick .btn { flex: 1 1 0; min-height: 3rem; font-size: 1.0625rem; }
/* neither choice is the gold primary. A solid gold fill is the action on this
   site, and these two are equal choices. */
.chooser-pick .btn[lang="hi"] { font-family: var(--font-indic); }
.chooser-pick .btn[lang="en"] { font-family: var(--font-latin); }
.chooser-x {
  margin-left: auto; flex: 0 0 var(--tap-min);
  width: var(--tap-min); height: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--nav-ink);
}
.chooser-x svg { width: 1.25rem; height: 1.25rem; }
/* The page is never covered. 10rem is the bar's 136px plus 24px of clear space,
   so the footer's last link ends well above the bar's white edge, and
   scroll-padding keeps an in page anchor from landing underneath it. */
html.has-chooser body { padding-bottom: 10rem; }
html.has-chooser { scroll-padding-bottom: 10rem; }

/* ============================================================== 560px up == */
@media (min-width: 560px) {
  :root { --gutter: 1.5rem; }
  .cta-row { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .cta-sub { width: 100%; }
  .grid.two { grid-template-columns: repeat(2, 1fr); }
  .site-foot .foot-grid { grid-template-columns: repeat(2, 1fr); }

  html.has-chooser .chooser { height: 5rem; }
  .chooser .wrap { flex-direction: row; align-items: center; gap: var(--sp-16); }
  .chooser-row { flex: 1 1 auto; }
  .chooser-q span { display: inline; }
  .chooser-q span + span::before { content: " · "; }
  .chooser-pick .btn { flex: 0 0 auto; min-width: 9rem; }
  .chooser-x { order: 3; }
  html.has-chooser body { padding-bottom: 6.5rem; }
  html.has-chooser { scroll-padding-bottom: 6.5rem; }
}

/* ============================================================== 760px up == */
@media (min-width: 760px) {
  .grid.three { grid-template-columns: repeat(3, 1fr); }
  .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  /* Growth sits first in the markup because the phone is the primary case.
     On a wide screen the three run low to high. */
  .plan.starter { order: 1; }
  .plan.lead { order: 2; }
  .plan.scale { order: 3; }
  .toc { columns: 2; column-gap: var(--sp-24); }
}

/* ============================================================== 880px up == */
@media (min-width: 880px) {
  body { font-size: 1.0625rem; }
  html[lang="hi"] body { font-size: 1.0625rem; }
  .lede, .statement { font-size: 1.125rem; }
  .hero .lede { font-size: 1.125rem; }
  .note, .cta-sub { font-size: 0.8125rem; }

  .menu { display: none; }
  .nav-wide {
    display: flex; align-items: center; gap: var(--sp-4);
    margin-right: var(--sp-12);
  }
  .nav-wide a {
    display: inline-flex; align-items: center; min-height: var(--tap-min);
    padding: 0 var(--sp-12); border-radius: var(--r-6);
    color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.9375rem;
  }
  .nav-wide a:hover { background: var(--hover); }
  .nav-wide a[aria-current="page"] { color: var(--pine); text-decoration: underline; }

  .hero-grid { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
  .hero .shot { margin-top: 0; }
  .hero .phone { max-width: 24rem; }
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
  .site-foot .foot-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .site-foot .foot-grid > :last-child { grid-column: 1 / -1; }

  /* card to card inside a grid, and text to its object (04d 9.3) */
  .grid { gap: var(--sp-20); }
  .after-text, .lead-out { margin-top: var(--sp-32); }
}

/* ------------------------------------------------------------------ motion --
   The only transition on the site is a 140ms hover on a control, so honouring
   the preference costs nothing and removes everything. No @keyframes exist.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ------------------------------------------------------------------- print -- */
@media print {
  .site-head, .site-foot, .skip, .chooser { display: none; }
  body { background: #FFFFFF; color: #000000; padding-bottom: 0; }
  a { color: #000000; }
}