/* ValueText — design tokens
   Locked 19 Sep 2026. This file is the single source of truth.
   The reference page is /Brand foundation.dc.html in the design project.
   If a value is not here, it does not go into a ValueText design.
   Prototype pages are inline styled and do not read this file; production does.

   1. TOKENS   2. BASE   3. COMPONENTS   4. RESPONSIVE
   ───────────────────────────────────────────────────────────────── */

/* ───────────────────────── 1. TOKENS ───────────────────────── */
:root {
  /* Neutral ramp — eleven steps, nothing between them */
  --white:   #ffffff;   /* page ground */
  --grey-05: #fafafa;   /* second plane, table heads, card footers */
  --grey-10: #f1f1f3;   /* inputs, code, neutral tags */
  --grey-20: #ececec;   /* every hairline and card border on white */
  --grey-30: #dcdcdc;   /* secondary button border, stronger rules */
  --grey-40: #9d9d9d;   /* mono labels, tertiary text, ALL secondary text on ink */
  --grey-50: #7a7a7a;   /* secondary copy, grey half of a two tone heading */
  --grey-55: #6b6b6b;   /* small grey text on a light ground where --grey-40 or --grey-50 fails WCAG AA (RULE 2026-09-26, contrast) */
  --grey-60: #3c3c3c;   /* body copy */
  --ink-80:  #2c2c2c;   /* borders and dividers on ink */
  --ink-90:  #1a1a1a;   /* cards and second plane on ink */
  --ink:     #121212;   /* headings, ink planes, primary button */

  /* Pink — the only accent */
  --pink-tint:  #fff1f6;      /* eyebrow pill ground */
  --pink-soft:  #f5accd;      /* link hover underline, dashed pending rules */
  --pink:       #ff5a8d;      /* the brand, exact from the logo files */
  --pink-hover: #ef4b81;      /* hover on a pink fill */
  --pink-press: #d33f6f;      /* pressed on a pink fill */
  --pink-ink:   #c8185c;      /* only where small pink text must pass 4.5:1 */
  --ink-pink:   #1d1319;      /* pink tinted ink surface: chips, icon tiles on ink */
  --pink-ring:  #ff5a8d33;    /* focus ring, 3px */

  /* Status — product interface only, never in a marketing section.
     Teal, yellow and purple are the brand's own colours, sampled from the
     shapes on the live site. Each status carries four values: the dot at
     full strength, the ink for its label (passes 4.5:1 on white), the tint
     behind it, and the bright value used on ink. */
  --success-dot: #00d8c1; --success: #0d7d6f; --success-tint: #e6fbf7; --success-on-ink: #00d8c1;
  --warning-dot: #ffce00; --warning: #8a6a00; --warning-tint: #fff8e0; --warning-on-ink: #ffce00;
  --error-dot:   #e0453d; --error:   #c2352f; --error-tint:   #fdeeed; --error-on-ink:   #ef7a74;
  --info-dot:    #8730fa; --info:    #8730fa; --info-tint:    #f2e9ff; --info-on-ink:    #b98cff;

  /* Semantic aliases */
  --bg: var(--white);
  --bg-2: var(--grey-05);
  --bg-3: var(--grey-10);
  --dark: var(--ink);
  --dark-2: var(--ink-90);
  --text: var(--grey-60);
  --muted: var(--grey-50);
  --faint: var(--grey-40);
  --on-ink: var(--grey-40);          /* nothing dimmer than this on ink */
  --line: var(--grey-20);
  --line-btn: var(--grey-30);
  --line-dark: var(--ink-80);

  /* Type */
  --font-display: 'Instrument Sans', 'Instrument Sans Fallback', sans-serif;   /* headings, buttons, figures */
  --font-body: 'Geist', 'Geist Fallback', system-ui, sans-serif;      /* every sentence */
  --font-mono: 'Geist Mono', 'Geist Mono Fallback', monospace;             /* labels, meta, numerals */

  --fs-display: 84px;    /* home hero H1 only */
  --fs-h1: 64px;
  --fs-h2: 56px;         /* every section heading; 52 and 60 are retired */
  --fs-h3: 40px;         /* panel lead */
  --fs-h4: 26px;         /* card head */
  --fs-h5: 21px;         /* card title */
  --fs-h6: 19px;         /* row title, tab name */
  --fs-figure: 24px;     /* stat figure; 44 / 60 / 132 for hero figures */
  --fs-lead: 19px;
  --fs-body: 17.5px;
  --fs-body-sm: 16.5px;
  --fs-small: 15.5px;
  --fs-ui: 15px;         /* buttons, form labels */
  --fs-eyebrow: 11px;
  --fs-meta: 10.5px;

  --lh-display: 1.0; --lh-h1: 1.02; --lh-h2: 1.05; --lh-h3: 1.08;
  --lh-h4: 1.15; --lh-h5: 1.25; --lh-h6: 1.3;
  --lh-lead: 1.6; --lh-body: 1.62; --lh-body-sm: 1.55; --lh-small: 1.5;

  --ls-display: -.04em; --ls-h1: -.038em; --ls-h2: -.038em; --ls-h3: -.035em;
  --ls-h4: -.026em; --ls-h5: -.022em; --ls-h6: -.02em; --ls-figure: -.028em;
  --ls-ui: -.01em; --ls-eyebrow: .14em; --ls-pill: .12em;

  --fw-body: 400; --fw-ui: 500; --fw-heading: 600;   /* there is no 700 */

  /* Space — 4px base, no values between the steps */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-5: 20px;
  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;  --sp-9: 48px;  --sp-10: 56px;
  --sp-11: 64px; --sp-12: 80px; --sp-13: 96px; --sp-14: 144px;

  /* Radius */
  --r-tag: 8px;
  --r-btn: 12px;      /* buttons, inputs, icon tiles */
  --r-card: 16px;
  --r-panel: 20px;    /* panels, large cards, tab cards */
  --r-pill: 999px;

  /* Lines */
  --bw-hair: 1px;     /* everything */
  --bw-rule: 2px;     /* active state only */
  --marker: 4px;      /* the 56 by 4 pink section marker */
  --stroke-glyph: 1.7;  /* line icons */
  --stroke-tick: 3;     /* ticks */

  /* Shadow — ink planes and sections never carry one */
  --shadow-card: 0 1px 2px #12121208, 0 14px 30px -22px #12121240;
  --shadow-float: 0 1px 2px #1212120a, 0 2px 6px #1212120a, 0 24px 48px -32px #8f2a4d4d;
  --shadow-focus: 0 0 0 3px var(--pink-ring);

  /* Layout */
  --max: 1400px;
  --gutter: max(48px, calc((100% - var(--max)) / 2));
  --gutter-phone: 20px;
  --header-h: 76px;
  --header-w: 780px;    /* centred section header maximum */
  --rail-w: 280px;
  --column-w: 760px;
  --section-y: var(--sp-14);       /* 144px desktop */
  --section-y-sm: 88px;            /* at and below 1024px */

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-hover: 140ms;
  --dur: 180ms;
  --dur-light: 6s;

  /* Touch */
  --tap: 44px;        /* minimum target, width and height */
  --tap-gap: 8px;     /* clear space between two targets */
  --fs-input: 16px;   /* never smaller: iOS zooms the page below this */

  /* Breakpoints (for reference; media queries cannot read variables) */
  /* tablet ≤ 1024px · phone ≤ 768px · reference phone 390px */
}

/* ───────────────────────── 2. BASE ───────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, p { margin: 0; }
h2, h3 { text-wrap: pretty; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 4px; text-decoration-thickness: 2px; }
a:hover { text-decoration-color: var(--pink-soft); }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Type roles */
.display { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-wrap: pretty; }
.h1 { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); text-wrap: pretty; }
.h2 { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); text-wrap: pretty; }
.h3 { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.h4 { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
.h5 { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); }
.h6 { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h6); line-height: var(--lh-h6); letter-spacing: var(--ls-h6); }
.figure { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-figure); line-height: 1.12; letter-spacing: var(--ls-figure); }
.heading-grey { color: var(--grey-50); }        /* the one allowed second colour in a heading */
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text); text-wrap: pretty; }
.body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--text); }
.small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text); }
.eyebrow { font-family: var(--font-mono); font-weight: var(--fw-ui); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--grey-40); }
.eyebrow--pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px 12px; border-radius: var(--r-pill); background: var(--pink-tint); color: var(--pink); letter-spacing: var(--ls-pill); }
.meta { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-pill); text-transform: uppercase; color: var(--grey-40); }

/* ───────────────────────── 3. COMPONENTS ───────────────────────── */
/* Section shell — two planes maximum */
.section { position: relative; padding: var(--section-y) var(--gutter); background: var(--bg); border-top: var(--bw-hair) solid var(--line); }
.section--alt { background: var(--bg-2); }
.section--dark { background: var(--dark); color: var(--white); border-top: 0; }
.section--dark .body, .section--dark .lead, .section--dark .small, .section--dark .eyebrow, .section--dark .meta { color: var(--on-ink); }
.section-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-6); max-width: var(--header-w); margin: 0 auto; }
.section-header--split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-12); align-items: end; max-width: none; text-align: left; }
.marker { width: 56px; height: var(--marker); background: var(--pink); border: 0; }

/* Buttons — pink is never a button fill */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 15px 26px; border-radius: var(--r-btn); border: var(--bw-hair) solid transparent; font-family: var(--font-display); font-weight: var(--fw-ui); font-size: var(--fs-ui); letter-spacing: var(--ls-ui); cursor: pointer; text-decoration: none; transition: background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); }
.btn--primary { background: var(--ink); color: var(--white); }
.btn--primary:hover { background: var(--ink-80); color: var(--white); }
.btn--secondary { background: var(--bg); color: var(--ink); border-color: var(--line-btn); }
.btn--secondary:hover { border-color: var(--ink); }
.btn--white { background: var(--white); color: var(--ink); }
.btn--white:hover { background: var(--grey-20); }
.btn--outline-light { background: transparent; color: var(--white); border-color: var(--ink-80); }
.btn--outline-light:hover { border-color: var(--white); }
.btn--sm { padding: 10px 16px; }
.chip-pink { display: inline-flex; align-items: center; white-space: nowrap; font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-ui); color: var(--white); border: var(--bw-hair) solid var(--pink); background: var(--ink-pink); border-radius: var(--r-pill); padding: 10px 18px; }

/* Cards */
.card { background: var(--bg); border: var(--bw-hair) solid var(--line); border-radius: var(--r-panel); padding: var(--sp-7); }
.card--tile { border-radius: var(--r-card); }
.card--dark { background: var(--dark-2); border-color: var(--line-dark); color: var(--white); }
.card--float { box-shadow: var(--shadow-float); }
.card-head { background: var(--ink); color: var(--white); padding: var(--sp-5) var(--sp-6); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5); }
.card-foot { background: var(--bg-2); border-top: var(--bw-hair) solid var(--line); padding: var(--sp-4) var(--sp-6); }
.icon-tile { width: 44px; height: 44px; border-radius: var(--r-btn); background: var(--bg-2); display: flex; align-items: center; justify-content: center; }
.card--dark .icon-tile { background: var(--ink-pink); }

/* Tabs — the strip is the head of its card */
.tabs { border: var(--bw-hair) solid var(--line); border-radius: var(--r-panel); overflow: hidden; background: var(--bg); }
.tabs__strip { display: grid; border-bottom: var(--bw-hair) solid var(--line); }
.tabs__tab { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-5) var(--sp-6) 18px; background: var(--bg); border-top: var(--bw-rule) solid transparent; border-left: var(--bw-hair) solid var(--line); color: var(--grey-50); cursor: pointer; }
.tabs__tab:first-child { border-left: 0; }
.tabs__tab[aria-selected="true"] { background: var(--bg-2); border-top-color: var(--pink); color: var(--ink); }
.tabs__panel { padding: var(--sp-10) 44px 58px; }

/* Table — hairlines only, no outer card */
.table { display: grid; }
.table__head { border-bottom: var(--bw-hair) solid var(--ink); }
.table__row { border-bottom: var(--bw-hair) solid var(--line); }
.table__cell { padding: var(--sp-4) var(--sp-5); font-size: var(--fs-small); }
.table__cell--ours { background: var(--bg-2); font-family: var(--font-display); font-weight: var(--fw-heading); }
.table__cell--theirs { color: var(--grey-40); }

/* Tags */
.tag { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-pill); text-transform: uppercase; border-radius: var(--r-tag); padding: 5px 10px; }
.tag--neutral { background: var(--bg-3); color: var(--grey-50); }
.tag--dark { background: var(--ink); color: var(--white); }
.tag--accent { background: var(--pink-tint); color: var(--pink); border-radius: var(--r-pill); padding: 6px 12px; }
.tag--success { background: var(--success-tint); color: var(--success); }
.tag--warning { background: var(--warning-tint); color: var(--warning); }
.tag--error { background: var(--error-tint); color: var(--error); }
.tag--info { background: var(--info-tint); color: var(--info); }

/* Forms */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label { font-size: var(--fs-ui); color: var(--ink); }
.input { border: var(--bw-hair) solid var(--line-btn); border-radius: var(--r-btn); padding: 14px 16px; font-size: var(--fs-input); background: var(--white); min-height: var(--tap); }
.input:focus { outline: none; border-color: var(--pink); box-shadow: var(--shadow-focus); }
.input[aria-invalid="true"] { border-color: var(--error); }
.field__error { font-size: 14px; color: var(--error); }

/* Accordion */
.accordion { border: var(--bw-hair) solid var(--line); border-radius: var(--r-panel); overflow: hidden; background: var(--bg); }
.accordion__row { border-bottom: var(--bw-hair) solid var(--line); }
.accordion__row:last-child { border-bottom: 0; }
.accordion__summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) 32px; gap: var(--sp-3) 14px; align-items: center; padding: var(--sp-5) var(--sp-6); cursor: pointer; list-style: none; }
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__plus { width: 32px; height: 32px; border-radius: var(--r-pill); border: var(--bw-hair) solid var(--line); display: flex; align-items: center; justify-content: center; transition: transform var(--dur) var(--ease); }
details[open] .accordion__plus { transform: rotate(45deg); }

/* Article frame (blog, about, legal, docs, best-apps, pricing changes) */
.article { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: var(--sp-12); align-items: start; }
.article__rail { position: sticky; top: calc(var(--header-h) + var(--sp-8)); display: flex; flex-direction: column; gap: var(--sp-6); }
.article__column { max-width: var(--column-w); }

/* Travelling lights — hairline layers are transparent site wide */
@keyframes vt-impulse { from { transform: translateY(-120%); opacity: 0; } 10% { opacity: 1; } to { transform: translateY(220%); opacity: 0; } }
.light { position: absolute; top: 0; width: 1px; height: 40%; background: linear-gradient(to bottom, transparent, var(--pink), transparent); animation: vt-impulse var(--dur-light) linear infinite; }
.section--dark .light { background: linear-gradient(to bottom, transparent, var(--white), transparent); }

/* ───────────────────────── 4. RESPONSIVE ─────────────────────────
   Breakpoints live here and nowhere else. In the prototype project the same
   job is done by mobile.css, which matches inline style strings and data-m
   hooks. Rules: content reorders and never disappears; the H1 comes before
   an article rail; every grid falls to two columns on tablet and one on
   phone unless it is marked keep; only the header is sticky on phone; no
   horizontal scroll between 320 and 1440.                                  */
@media (max-width: 1024px) {
  :root { --section-y: var(--section-y-sm); }
  .section { padding: var(--section-y-sm) var(--sp-7); }
  .h1, .h2 { font-size: 48px; }
  .h3 { font-size: 34px; }
  .section-header--split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .article { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .article__rail { position: static; }
}
@media (max-width: 768px) {
  .section { padding: 72px var(--gutter-phone); }
  .display { font-size: 44px; }
  .h1, .h2 { font-size: 40px; }
  .h3 { font-size: 30px; }
  .body { font-size: var(--fs-body-sm); }       /* 16.5px floor */
  .tabs__panel { padding: var(--sp-6) 18px 28px; }
  .btn, .accordion__summary, .tabs__tab { min-height: var(--tap); }
  .btn + .btn { margin-left: var(--tap-gap); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .light { display: none; }
}

/* ───────── COMPATIBILITY, added 2026-09-23 ─────────
   The 18 variable names the pre-lock sheet used that the locked sheet does not
   define. Measured, not guessed: 69 uses across the comps and design/, against
   155 var() uses in total. Without these the swap silently drops a colour, a
   size or a radius on pages that still read the old names. Each line maps an
   old name to the locked value that replaced it, so nothing here invents a
   value. Delete a line once nothing references it.                          */
:root {
  --accent: var(--pink);
  --accent-tint: var(--pink-tint);
  --accent-soft: var(--pink-soft);
  --accent-ring: var(--pink-ring);
  --ink-2: var(--ink-90);
  --faint-2: var(--grey-40);
  --fs-caption: var(--fs-small);
  --fs-h1-lg: var(--fs-h1);
  --fs-h2-lg: var(--fs-h2);
  --lh-heading: var(--lh-h2);
  --lh-relaxed: var(--lh-body);
  --lh-sub: var(--lh-lead);
  --lh-tight: var(--lh-h1);
  --line-card: var(--line);
  --line-dark-2: var(--ink-80);
  --ls-body: 0;
  --r-input: var(--r-btn);
  --r-tile: var(--r-card);
  --z: 10;
}

/* ───────── THE CHANNELS DARK BAND, REMOVED 2026-09-25 ─────────
   Ruled dark for /salesforce-sms/ only (Rosen, 2026-09-23). RULE 2026-09-24 took The
   channels off the four channel pages, and docs/build-ledger-salesforce-sms.md row 6 says
   the dark override goes with it. Left in, its unscoped [data-lib] selector painted the
   section #121212 on /, /salesforce/ and /zoho/, where it is drawn light, and hid the two
   pillar links (#121212 on #121212). The section now takes the ground each page passes.

   WHY OVERRIDES LIVE HERE, NOT IN THE COMPONENT (RULE 2026-09-09 seventh): the drift
   gate's skeleton check fails any changed declaration on a node the artboard drew, so a
   recolour in place would refuse the build. !important because the comp runtime writes
   every drawn style onto the element inline, which beats any stylesheet rule.          */


/* ───────── THE MID-PAGE CTA STRIP AS A DARK BAND, 2026-09-24 ─────────
   Ruled by: Rosen, 2026-09-24, on the /salesforce-sms/ preview: "Make the midsection uh,
   CTA the a dark section". He decides which sections are dark (RULE 2026-09-23), so that
   page carries four dark bands. Scoped to a strip the page passes ground="ink", which the
   component writes as data-ground="ink"; every other strip stays as drawn. Written here
   and not in the component for the reason the note above gives: the drift gate
   refuses a changed declaration on a drawn node. EVERY VALUE IS THE DRAWN CLOSING BAND'S
   (Lib - Final CTA, 24 Sep): #121212 ground from the component, #ffffff headline, #9d9d9d
   for the grey half and the line, the primary as #ffffff with #121212 letters and a
   #ffffff border, hovering to #ececec, and #2c2c2c hairlines.                            */
[data-lib="Mid-page CTA strip"][data-ground="ink"] {
  border-top-color: #2c2c2c !important;
  border-bottom-color: #2c2c2c !important;
}
[data-lib="Mid-page CTA strip"][data-ground="ink"] h2 { color: #ffffff !important; }
/* only the half drawn grey; the runtime wraps the first half in a span of its own */
[data-lib="Mid-page CTA strip"][data-ground="ink"] h2 span[style*="#7a7a7a"],
[data-lib="Mid-page CTA strip"][data-ground="ink"] h2 span[style*="rgb(122, 122, 122)"] { color: #9d9d9d !important; }
[data-lib="Mid-page CTA strip"][data-ground="ink"] p { color: #9d9d9d !important; }
[data-lib="Mid-page CTA strip"][data-ground="ink"] a {
  background: #ffffff !important;
  color: #121212 !important;
  border-color: #ffffff !important;
}
[data-lib="Mid-page CTA strip"][data-ground="ink"] a:hover {
  background: #ececec !important;
  border-color: #ececec !important;
}


/* ───────── HOW WE COMPARE: THE STANDFIRST AND RATING ALIGNED RIGHT, 2026-09-25 ─────────
   Ruled by: Rosen, 2026-09-25: "'How we compare' section - align this right: 'Every row
   below is a question worth asking any vendor you are looking at, including us. 4.98 / 5
   from 130 reviews On Salesforce AppExchange'". The right-hand column of the heading row
   (the standfirst and the rating line) sits against the right edge, its text right-aligned.
   From 769px only: at 768 and below mobile.css stacks the row into one column under the
   heading, where the page's left edge holds. Written here for the reason the channels note
   gives: the drift gate refuses a changed declaration on a drawn node.                    */
@media (min-width: 769px) {
  [data-lib="Compare"] > div:first-child > div:last-child {
    align-items: flex-end !important;
    text-align: right !important;
  }
}


/* ───────── THE HOMEPAGE'S FIRST SCREEN: HERO PLUS THE AT SCALE BAND, 2026-09-25 ─────────
   Ruled by: Rosen, 2026-09-25: "Hero - add the horizontal section with all the numbers and
   make it be visible fully above the fold and actually having it's bottom to the start of
   the fold." The hero's logic measures the header above it (--vt-hero-top) and the band
   under it (--vt-hero-after); the hero takes both off one screen, so hero and band together
   are exactly one screen tall. The fallbacks are the live 1440 measurements (64px header,
   134px band), so the first paint before the logic runs is already right on a laptop.
   svh, where supported, is the screen with the phone's address bar showing: the fold a
   visitor actually sees. The content row keeps its drawn centring; its vertical padding
   floor drops from the drawn 96px to 32px so the content still fits on a short laptop
   screen, and on a tall one the centring leaves the drawn space where it was.          */
[data-lib="Centered hero"] {
  min-height: calc(100vh - var(--vt-hero-top, 64px) - var(--vt-hero-after, 134px)) !important;
}
@supports (height: 100svh) {
  [data-lib="Centered hero"] {
    min-height: calc(100svh - var(--vt-hero-top, 64px) - var(--vt-hero-after, 134px)) !important;
  }
}
[data-lib="Centered hero"] > [data-m="hero2col"] {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

/* RULED OVERRIDE, 2026-09-25: the side padding. Ruled by: Rosen, "make the padding left and right on
   the whole besite but the header and footer twice of what it is right now", then (tapped) "C: 96px
   min, 1200 max" and "Keep phones at 20px". Twice the 48px floor, the content column 1400 -> 1200px,
   phones unchanged (RULE 2026-09-20). Kept as an override below the export's lines, which stay intact
   (check-library-page quarantine). scripts/side-padding.mjs points every page's inline gutter at these
   tokens, and the build fails on a gutter typed any other way. The header and the footer keep their own. */
:root {
  --max: 1200px;
  --gutter-min: 96px;
  --gutter: max(var(--gutter-min), calc((100% - var(--max)) / 2));
}
@media (max-width: 768px) {
  :root { --gutter-min: var(--gutter-phone); }
}

/* Launch 2026-09-26 (Rosen): the design runtime draws a grey, bordered box for every section while it loads;
   visitors saw them as grey stripes for a moment on each new page. They stay invisible. */
.sc-placeholder,html .sc-placeholder{background:transparent!important;border-color:transparent!important}
.sc-placeholder::before{content:none!important;animation:none!important}