/* Section system (Michele, 2026-11-14): every section below the Hero uses one
   header and spacing system taken from the Hero.
   Header order: label -> title -> optional intro line. Left edge = the Hero
   headline's edge (56px wide screens, 40px laptop, 16px phone; content
   column max 1328px, like the Hero rail).

   Why a cascade layer, linked BEFORE site-buttons.css: for !important
   declarations the earliest layer wins. This layer therefore wins over the
   site-buttons layer (label colour, footer links) and over every unlayered
   rule, including inline styles and older !important page rules, without a
   specificity race. It sets type, colour, spacing and alignment only.

   v2 (2026-11-14): the spacing and type audit (meshlite-audit-checklist.md,
   items P1-P3) on top of v1. The calculator iframe links this file too, so
   its rules live here, scoped to the calculator's own classes. No rule here
   touches an animation, a transition or a keyframe. */
@layer section-system {

/* ---- Tokens (audit checklist) -------------------------------------------
   Layered and not !important: where the site already defines the same name
   (--paper is #FAF8F3 on the site, --gutter, --card, --sans, --radius in the
   calculator), the site's value stays in force. The rules below use the
   names that are new. */
:root {
  --ink: #25231C; --ink-raised: #2F2E27;
  --paper: #F3F1EC; --paper-alt: #FAF8F3; --card: #FFFFFF;
  --primary: #7CA2F6; --primary-text: #2444B8;
  /* One competitor hue, production's terracotta: light terracotta on dark
     grounds (How diagram), #B0603A on light grounds, peach chip fill. */
  --competitor: #E39A78; --competitor-on-light: #B0603A; --competitor-tint: #F1D9CB;
  --gutter: 56px;
  /* W3 (v2.3): production's section rhythm, 96 / 80 / 72px. */
  --section-y: 96px;
  --eyebrow-to-h2: 24px; --h2-to-lead: 24px; --head-to-content: 56px;
  /* W1 (v2.3): one page container, 1200px of content between gutters that
     grow with the screen (80-120px wide, 48px tablet, 24px phone). */
  --ml-max: 1200px; --ml-gutter: clamp(80px, 8.33vw, 120px);
  /* W4 (v2.3): section labels and light-ground buttons in deep blue. */
  --ml-blue: #2444B8; --ml-blue-hover: #1C3796; --ml-blue-dark-ground: #7CA2F6;
  /* R3 (v2.2): one small radius for every non-circular corner: cards, frames,
     media, inputs, switches, chips, banners and buttons. Icon circles keep 999px. */
  --ml-radius: 2px;
  --radius: var(--ml-radius); --radius-icon: 999px; --control-h: 52px;
  --sans: Archivo, system-ui, sans-serif; --sans-condensed: Archivo, system-ui, sans-serif;
}
@media (max-width: 1023px) { :root { --section-y: 80px; --ml-gutter: 48px; } }
@media (max-width: 600px) { :root { --gutter: 16px; --section-y: 72px; --head-to-content: 32px; --control-h: 48px; --ml-gutter: 24px; } }

/* Type roles. The same values are applied to the existing elements below. */
.t-h2     { font: 600 48px/1.04 var(--sans); letter-spacing: -.03em; }
.t-h3     { font-weight: 500; letter-spacing: -.01em; }
.t-title  { font: 500 16px/1.5 var(--sans); }
.t-lead   { font: 400 18px/1.45 var(--sans); }
.t-body   { font: 400 15px/1.55 var(--sans); }
.t-small  { font: 400 14px/1.43 var(--sans); }
.t-label  { font: 600 12px/1 var(--sans-condensed); font-stretch: 75%; letter-spacing: .12em; text-transform: uppercase; }
.t-num    { font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.t-button { font: 600 16px/1 var(--sans); }
@media (max-width: 900px) { .t-h2 { font-size: 32px; } }

:root {
  /* W1 (v2.3): the section edge is the page gutter; the content rail is 1200px.
     --ss-edge-v22 keeps the v2.2 edge for the avatar gallery (see W1-3). */
  --ss-edge: var(--ml-gutter);
  --ss-edge-v22: 56px;
  --ss-rail: var(--ml-max);
  --ss-pad: var(--section-y);
  --ss-head-gap: var(--head-to-content);
  --ss-title: 48px;
  --ss-intro: 18px;
  --ss-muted-paper: #5A574D;
  --ss-muted-ink: #C9C5BA;
  --ss-text-ink: #FAF8F3;
}
@media (max-width: 1359px), (max-height: 780px) and (min-width: 901px) {
  :root { --ss-edge-v22: 40px; }
}
@media (max-width: 900px) {
  :root { --ss-edge-v22: 16px; --ss-title: 32px; --ss-intro: 16px; }
}

/* ---- Sections: one vertical rhythm, one left edge ---------------------- */
#main-content :is(#video, #interaction, #why, #how, #uses, #avatars, #custom, #developers, #pricing, #calculator, #faq, #closing) {
  padding-top: var(--ml-pad-top, var(--ss-pad)) !important;
  padding-bottom: var(--ml-pad-bottom, var(--ss-pad)) !important;
  padding-left: var(--ss-edge) !important;
  padding-right: var(--ss-edge) !important;
  text-align: left !important;
}
#main-content :is(#video > .v2-rail, #interaction > .toda-proof-grid, #why > .toda-page-shell, #how > .toda-page-shell,
    #uses .toda-page-shell, #custom > .v2-rail, #developers > .v2-rail, #pricing > .pr-shell, #calculator > .v2-rail,
    #faq > .v2-rail, #closing > div, #avatars > .avatar-gallery-copy) {
  box-sizing: border-box !important;
  width: auto !important;
  max-width: var(--ss-rail) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---- 1. Label (P1-2: one label style, 12px condensed, .12em) ------------ */
:is(#main-content :is(.toda-section-kicker, .avatar-gallery-kicker, .pr-kicker), .cx-head .cx-kicker) {
  display: block !important;
  margin: 0 0 var(--eyebrow-to-h2) !important;
  padding: 0 !important;
  /* X6-1 (v2.4): section eyebrows 13px (other labels stay 12px). */
  font: 600 13px/1 Archivo, system-ui, sans-serif !important;
  font-stretch: 75% !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--ml-blue) !important;
  background: none !important;
  border: 0 !important;
}

/* The label's own margin is the only space above the title. */
#main-content :is(#avatars .avatar-gallery-heading, #faq .v2-split-head) { display: block !important; }
.cx-head { gap: 0 !important; }

/* Other labels: scene kickers, "+ Bring your own", "Most popular", the Hero
   figures, the Why table heads, the calculator's card tags. Same style; the
   footer column heads follow in the footer block. The ticker is exempt. */
:is(#main-content :is(#uses .toda-scene-num, #pricing .pr-byo strong, #pricing .pr-tag, #why .why-head > *), #top.hero-grid .hg-stat dt, .cx-card .cx-tag) {
  font: 600 12px/1 Archivo, system-ui, sans-serif !important;
  font-stretch: 75% !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

/* ---- 2. Title: the Hero headline's style, section size ----------------- */
:is(#main-content :is(#video-title, #interaction h2, #whyHeadline, #how-heading, #uses h2.toda-section-heading,
    #avatar-gallery-title, #custom-title, #developers-title, #pricing-title, #faq-title, #closing h2), .cx-head #hc-title) {
  max-width: 760px !important;
  margin: 0 !important;
  font-family: Archivo, system-ui, sans-serif !important;
  font-size: var(--ss-title) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-stretch: normal !important;
  line-height: 1.04 !important;
  letter-spacing: -.03em !important;
  text-align: left !important;
  text-wrap: balance;
}
/* No italics and no mixed weights inside a title; the words stay. */
:is(#main-content :is(#video-title, #interaction h2, #whyHeadline, #how-heading, #uses h2.toda-section-heading,
    #avatar-gallery-title, #custom-title, #developers-title, #pricing-title, #faq-title, #closing h2), .cx-head #hc-title)
  :is(em, i, span:not(.demo-swap):not(.hw-on):not(.hw-off), .toda-section-statement) {
  font: inherit !important;
  font-size: 1em !important;
  letter-spacing: inherit !important;
  color: inherit !important;
}

/* ---- 3. Intro line ----------------------------------------------------- */
#main-content :is(#how .how-intro, #pricing .pr-intro > p, #developers .v2-lead, #faq .v2-lead, #closing h2 + p) {
  max-width: 760px !important;
  margin: var(--h2-to-lead) 0 0 !important;
  font: 400 var(--ss-intro)/1.45 Archivo, system-ui, sans-serif !important;
  color: var(--ss-muted-paper) !important;
  text-align: left !important;
}

/* ---- Header block -> section content ----------------------------------- */
#main-content :is(#video .presentation-video-head, #interaction .toda-proof-grid > .reveal:first-child,
    #pricing .pr-intro, #avatars > .avatar-gallery-copy, #how .how-intro, #uses h2.toda-section-heading,
    #custom-title, #developers .v2-lead, #closing h2 + p) {
  margin-bottom: var(--ss-head-gap) !important;
}
.cx-head { margin-bottom: var(--ss-head-gap) !important; }
/* The header block stacks: label, title, intro, left-aligned (no side intro). */
#main-content :is(#pricing .pr-intro, #video .presentation-video-head) {
  display: block !important;
  max-width: 760px !important;
  margin-left: 0 !important;
  text-align: left !important;
}
#main-content #how .toda-page-shell { display: block !important; }
#main-content #how .how-intro { margin-left: 0 !important; margin-right: 0 !important; }

/* Custom avatars: header column first, so it starts on the shared left edge. */
#main-content #custom .v2-custom-copy { order: -1 !important; }

/* Closing: left-aligned like every other header. */
#main-content #closing > div > div { justify-content: flex-start !important; }
/* The pricing tabs follow the header block's 48px, with no extra margin. */
#main-content #pricing .pr-intro + .pr-navigation { margin-top: 0 !important; }

/* ---- Ink grounds (Demo, How, Faces, Developers): muted colour on dark ---- */
html body #main-content :is(#interaction, #how, #avatars, #developers) :is(.how-intro, .v2-lead) {
  color: var(--ss-muted-ink) !important;
}
/* W4-1 (v2.3): section labels are light blue on ink grounds. */
html body #main-content :is(#interaction, #how, #avatars, #developers) :is(.toda-section-kicker, .avatar-gallery-kicker) {
  color: var(--ml-blue-dark-ground) !important;
}
#main-content #interaction .toda-section-kicker * { color: inherit !important; }

/* ---- Links: navigation is text colour, underline on hover/focus only --- */
.site-shell .site-nav .toda-navlinks > a:not(.site-signup):is(:hover, :focus-visible),
.toda-footer :is(.toda-footer-column a, .toda-footer-legal a):is(:hover, :focus-visible) {
  text-decoration-line: underline !important;
  text-underline-offset: 3px !important;
}

/* ---- Footer ------------------------------------------------------------ */
.toda-footer#footer {
  padding-left: var(--ss-edge) !important;
  padding-right: var(--ss-edge) !important;
}
.toda-footer .toda-footer-inner { max-width: var(--ss-rail) !important; }
.toda-footer .toda-footer-column h2 {
  margin: 0 0 16px !important;
  font: 600 12px/1 Archivo, system-ui, sans-serif !important;
  font-stretch: 75% !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--ss-muted-ink) !important;
}
.toda-footer .toda-footer-column a {
  min-height: 0 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--ss-text-ink) !important;
  text-decoration-line: none !important;
}
.toda-footer .toda-footer-column li + li { margin-top: 12px !important; }
.toda-footer .toda-footer-bottom,
.toda-footer .toda-footer-bottom p,
.toda-footer .toda-footer-legal a {
  font-size: 13px !important;
  color: var(--ss-muted-ink) !important;
  text-decoration-line: none !important;
}
.toda-footer :is(.toda-footer-column a, .toda-footer-legal a):hover { color: inherit; }
.toda-footer .toda-footer-column a:hover { color: var(--ss-text-ink) !important; }
.toda-footer .toda-footer-legal a:hover { color: var(--ss-muted-ink) !important; }
@media (max-width: 900px) {
  .toda-footer .toda-footer-column a { min-height: 44px !important; }
  .toda-footer .toda-footer-column li + li { margin-top: 0 !important; }
}

/* ======================================================================
   v2: spacing and type audit (meshlite-audit-checklist.md, 2026-11-14)
   ====================================================================== */

/* ---- P1-1 Radius, set by R3 (v2.2) to one value, --ml-radius (2px), on
   cards, frames, images, inputs, switches, chips, banners and buttons.
   Round icons keep --radius-icon (play button, FAQ "+", slider handle,
   compare knob, step numbers, tick marks, arrow buttons, menu button). The
   demo carousel and the avatar gallery are animated surfaces and stay as
   they are. */
#main-content :is(
  #video .presentation-video-frame, #video .presentation-video-duration,
  #why .why-matrix, #why .why-fold-card,
  #uses .toda-scene-art, #uses .uses-tabs, #uses .uses-tabs > button,
  #custom .v2-custom-art, #custom .v2-compare-tag, #custom .v2-cards > li,
  #developers .v2-sdk, #developers .v2-dev-steps > li, #developers .v2-dev-tabs, #developers .v2-dev-tabs > button,
  #pricing .pr-audience, #pricing .pr-billing, #pricing .pr-audience > button, #pricing .pr-billing > button,
  #pricing .pr-card, #pricing .pr-enterprise, #pricing .pr-lite, #pricing .pr-plan-buttons > button, #pricing .pr-tag
) { border-radius: var(--ml-radius) !important; }
/* Calculator iframe: boxes, cards, selects, the audience and minute switches, chips, bill tiles, phone gauges and bill tabs. */
:root:has(#home-calculator) { --radius: var(--ml-radius) !important; }
:is(.cx-box, .cx-controls, .cx-card, .cx-band, .cx-seg, .cx-seg > button, .cx-select, .cx-lengths, .cx-lengths > button,
    .cx-tag, .cx-tiles i, .m-gauge, .m-rival, .m-bills, .m-bills > button) { border-radius: var(--ml-radius) !important; }
.cx-select option, .m-rival-mid select { border-radius: var(--ml-radius) !important; }
/* The sliding highlight of the two-option switches (segment-thumb.js) keeps its motion; only its corners change. */
.segment-thumb.is-ready::before { border-radius: var(--ml-radius) !important; }
@supports (appearance: base-select) { .cx-select::picker(select) { border-radius: var(--ml-radius) !important; } }
/* Buttons (site-buttons.css, the Hero's own buttons), the header language
   switch and the skip link take the same token, so the page has one value. */
:root { --sb-radius: var(--ml-radius) !important; }
:is(#top.hero-grid :is(.hg-btn, .hg-talk), .site-nav :is(.site-signup, details.site-language, .site-language-toggle), .toda-skip-link) { border-radius: var(--ml-radius) !important; }

/* ---- P1-3 Numerals: prices, totals and the Hero figures. Sizes unchanged. */
:is(#main-content #pricing .pr-price strong, #top.hero-grid .hg-stat dd, .cx-row-v, .cx-total-value, .cx-keep-value, .m-bills b, .m-text b) {
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  font-variant-numeric: tabular-nums !important;
}

/* ---- P1-4 Button text: 16px / 600 ("Try a conversation" was 14px, the
   calculator's "Start with Creator" 15px on wide screens). ---- */
:is(#main-content #avatars .avatar-gallery-cta, .cx-band .cx-cta) { font-size: 16px !important; }

/* ---- P1-5 Palette ------------------------------------------------------ */
/* Pricing ground #F7F6F2 -> #FAF8F3, ink #1C1B19 -> #25231C. */
html body #main-content #pricing { background: #FAF8F3 !important; color: #25231C !important; }
#main-content #pricing :is(.pr-intro h2, .pr-intro h3, .pr-price-note strong, .pr-enterprise, .pr-carousel-controls button) { color: #25231C !important; }
/* Pressed option of the two-option switches (was #1C1B19). */
.segment-thumb.is-ready > button[aria-pressed=true] { color: #25231C !important; }
/* "More than 150" banner and the Why table's MeshLite column: #F0EDE6 -> #F3F1EC. */
:root { --sb-tint: #F3F1EC !important; }
/* Calculator: the MeshLite card #1C1B19 -> #25231C, its text #F7F6F2 -> #FAF8F3,
   and one competitor hue (was orange #B0603A with a peach chip). */
:root:has(#home-calculator) {
  --ink: #25231C !important;
  --dark: #25231C !important;
  --on-dark: #FAF8F3 !important;
  --theirs: var(--competitor-on-light) !important;
  --tile-line: var(--competitor) !important;
  --tile-fill: var(--competitor-tint) !important;
}

/* ---- P2-2 Custom avatars: the text column starts at the image's top edge. */
@media (min-width: 901px) {
  #main-content #custom .v2-custom { align-items: start !important; }
}

/* ---- P2-3 Calculator: label -> title 24px (label margin, no flex gap); on
   wide screens the form card starts level with the title. */
@media (min-width: 961px) {
  html[data-embedded="true"] .cx-controls { margin-top: calc(12px + var(--eyebrow-to-h2)) !important; }
}

/* ---- P2-4 Difference: last caption -> ticker 120px. The diagram keeps 36px
   of empty drawing below its last caption; the section's bottom padding takes
   that back. Wide layout only (the phone layout ends on the tab bar). */
@media (min-width: 1041px) {
  #main-content #how { padding-bottom: calc(var(--section-y) - 36px) !important; }
}

/* ---- P2-5 Pricing stack (wide screens): switches -> cards 32px, cards ->
   banner 16px, banner -> "Compare every plan feature" 32px; banner body in
   muted ink, not link blue. */
@media (min-width: 901px) {
  #main-content #pricing .pr-cards { margin-top: 20px !important; }
  #main-content #pricing .pr-enterprise { margin-top: 16px !important; }
  #main-content #pricing > .pr-shell > .v2-more-link { margin-top: 32px !important; }
}
#main-content #pricing .pr-enterprise p { color: var(--ss-muted-paper) !important; }

/* ---- P2-6 Phone Hero: 74px below "From $5/mo" instead of filling the screen. */
@media (max-width: 600px) {
  #top.hero-grid { min-height: 0 !important; padding-bottom: 53px !important; }
}

/* ---- P2-8 Phone plan tabs: the selected tab is ink with paper text. ---- */
#main-content #pricing .pr-plan-buttons button { color: #25231C !important; }
#main-content #pricing .pr-plan-buttons button[aria-pressed=true] { background: #25231C !important; border-color: #25231C !important; color: #FAF8F3 !important; }

/* ---- P3-1 H3: weight 500, -.01em. Sizes unchanged. --------------------- */
#main-content :is(#uses .toda-scene h3, #developers .v2-dev-steps h3, #pricing .pr-card h3, #pricing .pr-enterprise h3, #pricing .pr-lite h3) {
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
}

/* ---- P3-2 Item titles: 16px / 500 / 1.5. ------------------------------- */
#main-content :is(#custom .v2-cards li > strong, #faq .v2-faq-item > summary, #why .why-row h3, #why .why-fold > summary) {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

/* ---- P3-3 Lead: 18px (the intro rule above, --ss-intro). ---------------- */

/* ---- P3-4 Body: pricing feature lists 16px -> 15px. -------------------- */
#main-content #pricing .pr-features li span { font-size: 15px !important; line-height: 1.55 !important; }

/* ---- P3-5 Small: calculator captions at least 14px (the voice pill was 13px). */
@media (min-width: 961px) {
  html[data-embedded="true"] .cx-select.is-pill { font-size: 14px !important; }
}

/* ---- P3-6 Use cases: title -> body 12px. On wide screens each scene's words
   form one block under its picture, so a one-line title no longer waits for
   the longest title in the row. */
@media (min-width: 901px) {
  html body #main-content #uses .toda-scene { grid-row: span 2 !important; }
  html body #main-content #uses .toda-scene-copy { display: block !important; padding: 0 !important; }
}
html body #main-content #uses .toda-scene-copy p { margin-top: 12px !important; }

/* ---- P3-7 Hero figures: all 36px in the wide Hero (were 38/28/38/30). -- */
@media (min-width: 1024px) {
  #top.hero-grid .hg-stat dd { font-size: 36px !important; }
}

/* ======================================================================
   v2.3: wider margins (meshlite-audit-checklist-v2.3.md, 2026-11-14)
   Production's page width, rhythm, phone gutter, blue labels and single
   button blue, on the v2.2 design. No rule touches an animation, a
   transition or a keyframe.
   ====================================================================== */

/* ---- W1-2 / W2-1 Header and Hero on the container. The Hero's own rail and
   gutter tokens take the page values, so the header and the Hero keep their
   formula max(gutter, (100% - rail) / 2); the laptop and phone layouts used
   fixed 40px and 16px sides. */
html { --hg-rail: var(--ml-max) !important; --hg-gutter: var(--ml-gutter) !important; }
html[data-hero=grid] body .site-shell .site-nav.site-nav,
#top.hero-grid {
  padding-left: max(var(--ml-gutter), calc((100% - var(--ml-max)) / 2)) !important;
  padding-right: max(var(--ml-gutter), calc((100% - var(--ml-max)) / 2)) !important;
}

/* ---- W2 Hero, wide layout (the four figures in a 260px column): the window
   keeps the v2.2 proportion (1066 x 518 inside its border), so at 1440 the
   stage is 1200 x 458 instead of filling the screen height. The Hero is then
   as tall as its content (no one-screen minimum), so the gap under the
   window stays 48px. */
/* v2.5 Y1 replaces this wide-layout block (see the v2.5 section below). */
/* ---- W2-2 Hero, laptop layout (window right of the text), now only
   901-1023px wide: the window is at min(520px, 58vh) tall and sits centred
   beside the text. */
@media (min-width: 901px) and (max-width: 1023px) {
  #top.hero-grid .hg-stage { height: min(520px, 58vh) !important; align-self: center !important; }
  /* The figure strip is narrower at 1024px: "< 25 ms" stays on one line (as
     in v2.2), so the strip keeps its height and clears "Start talking". */
  #top.hero-grid .hg-stat dd { white-space: nowrap !important; }
}
/* Below 1200px the strip is too narrow for four equal columns ("Unlimited"
   crossed the window edge at 1024px): each figure takes its own width. */
@media (min-width: 901px) and (max-width: 1023px) {
  #top.hero-grid .hg-stat { flex: 1 1 auto !important; }
}

/* ---- W1-3 Full-bleed. Section grounds, the Hero grid and the ticker already
   run edge to edge. The demo carousel centres on the screen and its cards
   overflow its box, so it is unchanged. The avatar gallery is a 3D dome
   sized from its own box: it keeps its v2.2 box (56 / 40 / 16px from the
   screen edge), past the new gutter, so the animation does not change. */
#main-content #avatars > .avatar-gallery-stage {
  margin-left: calc(var(--ss-edge-v22) - var(--ss-edge)) !important;
  margin-right: calc(var(--ss-edge-v22) - var(--ss-edge)) !important;
}

/* ---- W4-2 One button blue on light grounds: primary = deep-blue fill with
   white text, secondary = 1px deep-blue outline with deep-blue text. The
   light-blue fill stays on dark grounds (header, Hero, Demo, Faces,
   Developers). Hover only changes the colour, as before. */
:is(#main-content :is(#custom .v2-btn, #pricing .pr-card.is-featured .pr-button, #closing .toda-btn), .cx-band .cx-cta) {
  background: var(--ml-blue) !important;
  border: 1px solid var(--ml-blue) !important;
  color: #FFFFFF !important;
}
@media (hover: hover) and (pointer: fine) {
  :is(#main-content :is(#custom .v2-btn, #pricing .pr-card.is-featured .pr-button, #closing .toda-btn), .cx-band .cx-cta):hover {
    background: var(--ml-blue-hover) !important; border-color: var(--ml-blue-hover) !important; color: #FFFFFF !important;
  }
}
:is(#main-content :is(#custom .v2-btn, #pricing .pr-card.is-featured .pr-button, #closing .toda-btn), .cx-band .cx-cta):active {
  background: var(--ml-blue-hover) !important; border-color: var(--ml-blue-hover) !important; color: #FFFFFF !important;
}
#main-content :is(#pricing .pr-button:not(.pr-card.is-featured .pr-button), #closing .toda-btn-ghost) {
  background: transparent !important;
  border: 1px solid var(--ml-blue) !important;
  color: var(--ml-blue) !important;
}
@media (hover: hover) and (pointer: fine) {
  #main-content :is(#pricing .pr-button:not(.pr-card.is-featured .pr-button), #closing .toda-btn-ghost):hover {
    background: transparent !important; border-color: var(--ml-blue-hover) !important; color: var(--ml-blue-hover) !important;
  }
}

/* ---- W5-1 Why table: production's tinted MeshLite column and its markers,
   a deep-blue disc with a white check and a white disc with a muted cross. */
#main-content #why :is(.mesh-cell, .why-fold-card.is-mesh) { background: #EEF2FC !important; }
#main-content #why .result {
  display: inline-grid !important; place-items: center !important; flex: none !important;
  width: 24px !important; height: 24px !important; border-radius: 50% !important;
  font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important;
}
#main-content #why .result.yes { background: var(--ml-blue) !important; color: #FFFFFF !important; border: 0 !important; }
#main-content #why .result:not(.yes) { background: #FFFFFF !important; color: #6B6860 !important; border: 1px solid #DCD9D2 !important; }

/* ---- W5-3 Calculator heading: the H2 token, like every section. The frame is
   the page width minus two gutters, so on a 901-1023px screen it is only
   805-927px wide and its own 900px breakpoint gave 32px. Inside the frame,
   805px and up is a wide page (48px). */
@media (min-width: 805px) and (max-width: 900px) {
  html[data-embedded="true"] { --ss-title: 48px; }
}

/* ======================================================================
   v2.4: spacing by relationship, one button blue, polish
   (meshlite-audit-checklist-v2.4.md, 2026-11-14). No rule touches an
   animation, a transition or a keyframe.
   ====================================================================== */

/* ---- X1 Spacing by relationship. A section says how it relates to the one
   above with data-gap-top; the section above takes the same space at its
   bottom, so each seam is symmetric.
     (none)      ground changes (light <-> dark): --ml-gap-break each side
     shift       same light family, new topic: --ml-gap-shift each side and a
                 1px hairline across the container (data-gap-line="full"
                 keeps the section's own full-width line instead)
     continue    same ground, same story: --ml-gap-continue, no line
     after-hero  below the Hero, whose own 48px bottom padding counts */
:root {
  --ml-gap-break: var(--section-y);
  --ml-gap-shift: 64px;
  --ml-gap-continue: 48px;
  --ml-gap-after-hero: 72px;
  --ml-hairline: #D8D4CA;
}
@media (max-width: 600px) { :root { --ml-gap-shift: 48px; --ml-gap-continue: 32px; } }
#main-content [data-gap-top="continue"] { --ml-pad-top: var(--ml-gap-continue); }
#main-content :has(+ [data-gap-top="continue"]) { --ml-pad-bottom: var(--ml-gap-continue); }
#main-content [data-gap-top="shift"] { --ml-pad-top: var(--ml-gap-shift); }
#main-content :has(+ [data-gap-top="shift"]) { --ml-pad-bottom: var(--ml-gap-shift); }
#main-content [data-gap-top="after-hero"] { --ml-pad-top: var(--ml-gap-after-hero); }
#main-content [data-gap-top="shift"]:not([data-gap-line="full"]) {
  background-image: linear-gradient(var(--ml-hairline), var(--ml-hairline)) !important;
  background-size: min(100% - 2 * var(--ml-gutter), var(--ml-max)) 1px !important;
  background-position: 50% 0 !important;
  background-repeat: no-repeat !important;
}

/* ---- X2 Product video beside its heading on wide screens: 12 columns,
   heading 1-4, video 5-12, top-aligned; the frame keeps 16:9. */
@media (min-width: 1024px) {
  #main-content #video > .v2-rail { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 48px; align-items: start; }
  #main-content #video .presentation-video-head { grid-column: 1 / 5; margin-bottom: 0 !important; max-width: none !important; }
  #main-content #video .presentation-video-frame { grid-column: 5 / 13; }
}

/* ---- X3 One button blue: primary = light-blue fill with ink text on every
   ground; on light grounds an ink edge. Secondary = 1px outline: ink on
   light grounds, light blue on dark. Hover changes colour only. This
   replaces the v2.3 deep-blue buttons (W4-2). */
:root { --sb-blue-hover: #8EAFF8 !important; --sb-action-light: var(--ml-blue) !important; }
:is(#main-content :is(#custom .v2-btn, #pricing .pr-card.is-featured .pr-button, #closing .toda-btn), .cx-band .cx-cta) {
  background: #7CA2F6 !important;
  border: 1px solid #25231C !important;
  color: #25231C !important;
  font-weight: 600 !important;
}
@media (hover: hover) and (pointer: fine) {
  :is(#main-content :is(#custom .v2-btn, #pricing .pr-card.is-featured .pr-button, #closing .toda-btn), .cx-band .cx-cta):hover {
    background: #8EAFF8 !important; border-color: #25231C !important; color: #25231C !important;
  }
}
:is(#main-content :is(#custom .v2-btn, #pricing .pr-card.is-featured .pr-button, #closing .toda-btn), .cx-band .cx-cta):active {
  background: #8EAFF8 !important; border-color: #25231C !important; color: #25231C !important;
}
#main-content :is(#pricing .pr-button:not(.pr-card.is-featured .pr-button), #closing .toda-btn-ghost) {
  background: transparent !important;
  border: 1px solid #25231C !important;
  color: #25231C !important;
}
@media (hover: hover) and (pointer: fine) {
  #main-content :is(#pricing .pr-button:not(.pr-card.is-featured .pr-button), #closing .toda-btn-ghost):hover {
    background: #25231C !important; border-color: #25231C !important; color: #FAF8F3 !important;
  }
}
#main-content #developers .v2-sdk-copy { border: 1px solid #7CA2F6 !important; color: #8EAFF8 !important; }
/* The video's round play button is a button too: light blue with an ink
   triangle (its hover scale is unchanged). */
#main-content #video .presentation-video-button { background: #7CA2F6 !important; color: #25231C !important; }
#main-content #video .presentation-video-play:hover .presentation-video-button { background: #8EAFF8 !important; }

/* ---- X4 (v2.4) calculator layout overrides removed in v2.6 Z3-1: the
   calculator keeps production's layout behaviour. */

/* ---- X5 Closing: one centred block, 720px wide. (The :not() parts only
   outrank the left-aligned v1 header rules above.) */
#main-content #closing > div:not(.x5) { max-width: 720px !important; text-align: center !important; }
#main-content #closing h2:not(.x5):not(.x6) { margin-left: auto !important; margin-right: auto !important; text-align: center !important; }
#main-content #closing h2 + p:not(.x5) { margin-left: auto !important; margin-right: auto !important; text-align: center !important; }
#main-content #closing > div > div { justify-content: center !important; }
/* v2.8 A1: no margin override here, so the 600px email line keeps its auto margins
   (homepage-polish.css) and sits centred in the 720px block. */
#main-content #closing .toda-closing-mail { text-align: center !important; justify-content: center !important; }

/* ---- X7 Phones. X7-1: the Hero price on one line, "Compare your cost" on
   the next, never broken. X7-3: plan cards take their own height, and the
   heading and price blocks drop the fixed heights that aligned them across
   cards (60-70px of empty space in the Free card). */
@media (max-width: 600px) {
  #top.hero-grid .hg-price { flex-wrap: wrap !important; }
  #top.hero-grid .hg-price-head { flex: 1 1 100% !important; }
  #top.hero-grid .hg-price a { white-space: nowrap !important; }
  #main-content #pricing.pr-ready .pr-cards { align-items: flex-start !important; }
  #main-content #pricing .pr-card :is(.pr-card-heading, .pr-price-block) { min-height: 0 !important; }
  /* X7-2: the plan tabs are equal columns inside the gutters; 13px labels
     fit "Business" down to a 360px screen. */
  #main-content #pricing .pr-plan-buttons { display: grid !important; grid-auto-flow: column !important; grid-auto-columns: minmax(0, 1fr) !important; gap: 4px !important; }
  #main-content #pricing .pr-plan-buttons > button { min-width: 0 !important; padding: 8px 1px !important; font-size: 13px !important; }
}

/* ======================================================================
   v2.5: section-height hierarchy (meshlite-audit-checklist-v2.5.md rev 2,
   2026-11-14). The Hero fills the first screen and is the tallest
   image-led dark scene; Halloween, the face gallery and the Difference
   diagram sit below it. No rule touches an animation, a transition or a
   keyframe.
   ====================================================================== */

/* ---- Y1 Hero, 1024px and up: one stacked layout (headline row, then the
   demo row). Header 76 -> 56 -> headline row -> 40 -> demo row -> 64.
   Header + Hero fill the screen; the demo row takes what is left, at
   least 380px. The window stops at 600px and sits at the foot of its row. */
@media (min-width: 1024px) {
  #top.hero-grid {
    padding-top: 56px !important;
    padding-bottom: 64px !important;
    row-gap: 40px !important;
    min-height: calc(100vh - 76px) !important;
    min-height: calc(100svh - 76px) !important;
    grid-template-rows: auto minmax(380px, 1fr) !important;
  }
  #top.hero-grid .hg-title { font-size: clamp(56px, 5vw, 76px) !important; line-height: 1 !important; }
  #top.hero-grid .hg-stage { align-self: end !important; height: 100% !important; max-height: 600px !important; }
  #top.hero-grid .hg-screen { aspect-ratio: auto !important; max-height: none !important; }
  /* Columns 48px apart. The four figures lose 6px of padding top and bottom
     so the rail fits a 380px window; it still matches the window height and
     the cells share it evenly. */
  #top.hero-grid { column-gap: 48px !important; }
  #top.hero-grid .hg-stat { padding-top: 12px !important; padding-bottom: 12px !important; }
}
/* Y1-1 At 76px the headline needs a wider column to stay on 3 lines. */
@media (min-width: 1600px) {
  #top.hero-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) !important; }
}
/* 1024-1359px: the right column keeps the laptop sizes it had in v2.4
   (lead 18, price 15/18), so the price fits on one line at 1280. */
@media (min-width: 1024px) and (max-width: 1359px) {
  #top.hero-grid .hg-lede { font-size: 18px !important; }
  #top.hero-grid .hg-price { font-size: 15px !important; }
  #top.hero-grid .hg-price strong { font-size: 18px !important; }
}
/* Y1-3 Nina's framing: the button sits 6% of the window height above the
   bottom edge (at least 16px) and her line 12px above the button, so both
   stay under her chin at every window height (380-600px). On short screens
   (window near 380px) the button is 52px tall and her line 20px. */
@media (min-width: 1024px) {
  #top.hero-grid .hg-talk { bottom: max(16px, 6%) !important; }
  #top.hero-grid .hg-subtitle { bottom: calc(max(16px, 6%) + 72px) !important; }
}
@media (min-width: 1024px) and (max-height: 860px) {
  #top.hero-grid .hg-talk { min-height: 52px !important; font-size: 17px !important; }
  #top.hero-grid .hg-subtitle { bottom: calc(max(16px, 6%) + 64px) !important; padding: 8px 16px !important; }
  #top.hero-grid .hg-subtitle-line { font-size: 20px !important; }
}
/* Y1-4 Phone Hero: 48px under the price line. */
@media (max-width: 600px) {
  #top.hero-grid { padding-bottom: 48px !important; }
}

/* ---- Y2-1 Halloween demo (1024px and up): the centre card is
   clamp(320px, 44vh, 440px) tall and keeps its 4:5 shape; the side cards
   follow, because the carousel spaces them from the card width. Its name
   sits 16px under the card. The title -> cards gap is the heading token
   alone (56): the 24px column gap and 16px carousel margin go. The tilt,
   depth and motion are unchanged. */
@media (min-width: 1024px) {
  #main-content #interaction > .toda-proof-grid { row-gap: 0 !important; }
  #main-content #interaction .demo-carousel { --h: clamp(320px, 44vh, 440px) !important; --w: calc(var(--h) * .8) !important; margin-top: 0 !important; }
  #main-content #interaction .demo-carousel-name { margin-top: 16px !important; }
}

/* ---- Y2-2 Face gallery (1024px and up): the dome window is
   clamp(360px, 48vh, 460px) tall (it was clamp(420px, 34.7vw, 580px)), the
   hint line 24px under it. The dome's radius follows the window width, so
   the sphere and its motion are unchanged; less of it shows. */
@media (min-width: 1024px) {
  html body #main-content #avatars.is-dome .avatar-gallery-stage,
  html.has-js body #main-content #avatars.avatar-gallery:not(.is-interactive) .avatar-gallery-stage { height: clamp(360px, 48vh, 460px) !important; }
  html body #main-content #avatars.is-dome .avatar-gallery-controls { margin-top: 24px !important; }
}

/* ---- Y2-3 (v2.5) diagram scale removed in v2.6 Z2-1: at 80% its smallest
   text fell below 12px. The Difference is exempt from the Hero-height rule. */

/* ======================================================================
   v2.6: final polish (meshlite-audit-checklist-v2.6.md, 2026-11-14).
   No rule touches an animation, a transition or a keyframe.
   ====================================================================== */

/* ---- Z2-1 The Difference at full size: the diagram fills the 1200px
   container (it stopped at 1100px). It is drawn on a 1200px canvas, so at
   1440 and wider its smallest text renders at its true 12px (11px at 1100). */
html body #main-content #how #how-diagram { max-width: var(--ml-max) !important; }

/* ---- Z1-1 Hero price row below 1440px, every language: the price on one
   line, "Compare your cost" on its own line under it (the phone pattern).
   The link never wraps inside. The right column's items sit 12px apart
   (were 18) so the Hero keeps its height at 1280. */
#top.hero-grid .hg-price a { white-space: nowrap !important; }
@media (max-width: 1439px) {
  #top.hero-grid .hg-price { flex-wrap: wrap !important; }
  #top.hero-grid .hg-price-head { flex: 1 1 100% !important; }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  #top.hero-grid .hg-side { gap: 12px !important; padding-bottom: 0 !important; }
  #top.hero-grid .hg-price { padding-top: 10px !important; row-gap: 4px !important; }
}

/* ---- Z1-2 French headline one step down. v2.9 (2026-11-15): Michele approved the
   shorter French line (A3 option 2); 4.3vw keeps it on 3 lines from 1280px
   (4.4vw broke "de l'utilisateur." onto a 4th line at 1280 and 1440). */
@media (min-width: 1024px) {
  html[lang="fr"] #top.hero-grid .hg-title { font-size: clamp(52px, 4.3vw, 64px) !important; }
}

/* ---- Z3 Calculator: production's layout behaviour, v2 style only.
   Z3-4: the controls card starts level with the label and the title sits
   16px above the audience switch, as in production. */
@media (min-width: 961px) {
  html[data-embedded="true"] .cx-controls { margin-top: 0 !important; }
}
html[data-embedded="true"] .cx-head { margin-bottom: 0 !important; }
/* Page spacing, not calculator layout: where the frame is 721-960px wide
   (1024 screens) it drops its 32px top inset, so Pricing -> Calculator keeps
   the v2.4 "continue" gap (96). */
@media (min-width: 721px) and (max-width: 960px) {
  html[data-embedded="true"] .cx-box { padding-top: 0 !important; }
}
/* Z3-5: production's colour meaning in v2 tokens. Competitor = production's
   terracotta #B0603A on a peach chip; MeshLite plan price #7CA2F6 on the dark
   card; the MeshLite chip #7CA2F6 with ink text. */
:root:has(#home-calculator) {
  --theirs: #B0603A !important;
  --tile-line: #D9A88B !important;
  --tile-fill: #F1D9CB !important;
}
.is-ours .cx-row.is-accent .cx-row-v { color: #7CA2F6 !important; }
.is-ours .cx-tag { background: #7CA2F6 !important; color: #25231C !important; border: 0 !important; }
/* v2.7 A3-1: the competitor chip keeps its peach fill and edge; only its
   label is a deeper terracotta so it reads at 4.5:1 or more. Prices stay #B0603A. */
.is-theirs .cx-tag { color: #8A4526 !important; }

}