/* 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. */
@layer section-system {

:root {
  --ss-edge: 56px;
  --ss-rail: 1328px;
  --ss-pad: 120px;
  --ss-head-gap: 48px;
  --ss-title: 48px;
  --ss-intro: 19px;
  --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: 40px; }
}
@media (max-width: 900px) {
  :root { --ss-edge: 16px; --ss-pad: 72px; --ss-head-gap: 32px; --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(--ss-pad) !important;
  padding-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 ---------------------------------------------------------- */
:is(#main-content :is(.toda-section-kicker, .avatar-gallery-kicker, .pr-kicker), .cx-head .cx-kicker) {
  display: block !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  font: 600 13px/1.2 Archivo, system-ui, sans-serif !important;
  font-stretch: 75% !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ss-muted-paper) !important;
  background: none !important;
  border: 0 !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: 700 !important;
  font-style: normal !important;
  font-stretch: normal !important;
  line-height: 1.05 !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: 16px 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; }
#main-content #closing .toda-closing-mail { text-align: left !important; justify-content: flex-start !important; margin-left: 0 !important; margin-right: 0 !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(.toda-section-kicker, .avatar-gallery-kicker, .how-intro, .v2-lead) {
  color: var(--ss-muted-ink) !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 13px/1.2 Archivo, system-ui, sans-serif !important;
  font-stretch: 75% !important;
  letter-spacing: .14em !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; }
}

}