/* Site-wide button and link style (Michele, 2026-11-13): the Hero 3a button
   style on every action. One shared rule set for all pages and the calculator
   iframe; load it after the page's other stylesheets. The Hero is out of
   scope: the Hero 3a draft brings its own buttons, so every rule skips #top
   (Hero 3a's live talk reuses #startDemo and the restart button there).

   Why a cascade layer: older page rules use !important and very specific
   selectors (ids, :where(), inline styles). An !important declaration inside a
   layer wins over every unlayered !important declaration, whatever its
   specificity, so this file needs no specificity race. It only sets colour,
   border, radius, height, horizontal padding, weight, case, underline and
   focus. It never sets display, position or opacity, so hidden and
   state rules keep working. Selectors use :where() (zero specificity), so
   inside this layer the later rule wins: shape, then primary, then the
   secondary overrides. */
@layer site-buttons {

:root {
  --sb-blue: #7CA2F6;          /* primary fill; outline and link blue on dark */
  --sb-blue-hover: #95B4F8;
  --sb-blue-pressed: #6A92EE;
  --sb-ink: #25231C;           /* primary label */
  --sb-action-light: #254EBC;  /* outline and link blue on paper */
  --sb-action-light-hover: #1439A6;
  --sb-accent: var(--sb-action-light);
  --sb-accent-hover: var(--sb-action-light-hover);
  --sb-text: #25231C;          /* facts and labels on paper */
  --sb-muted: #656158;
  --sb-rule: #DCD9D2;
  --sb-tint: #F0EDE6;          /* neutral panel, replaces the pale blue washes */
  --sb-radius: 2px;
  --sb-height: 52px;
  --sb-height-header: 44px;
  --sb-pad: 24px;
  --sb-border: 1.5px;
}
@media (max-width: 600px) { :root { --sb-height: 48px; } }

/* Dark grounds: outlines, links and focus rings use the light blue.
   (Hero 3a also puts the navigation on dark.) */
:where(#video, #interaction, #how, #avatars, #developers, .toda-footer, #footer, .dev-agent,
       html[data-hero=grid] .site-nav) {
  --sb-accent: var(--sb-blue);
  --sb-accent-hover: var(--sb-blue-hover);
  --sb-text: #FAF8F3;
  --sb-muted: #B9B4A9;
}
/* The demo's email gate sits on a paper panel inside the dark band. */
#interaction .toda-demo-consent.is-email { --sb-accent: var(--sb-action-light); --sb-accent-hover: var(--sb-action-light-hover); --sb-text: #25231C; --sb-muted: #656158; }

/* ---- Shape: every button ------------------------------------------------- */
:where(
  .site-signup,
  .demo-carousel-talk, #startDemo, .toda-demo-restart, #demoEmailSubmit,
  .toda-demo-signup, .toda-demo-talk, .toda-demo-retry, .toda-demo-end,
  .avatar-gallery-cta, .avatar-gallery-pause,
  .v2-btn, .v2-sdk-copy,
  .pr-button, .pm-cta,
  .toda-btn, .toda-btn-ghost,
  .company-primary, .company-featured-cta,
  .dev-btn,
  .talk-form-send, .beta-report-primary, .beta-report-secondary,
  .cx-cta
):not(:where(#top *)) {
  min-height: var(--sb-height) !important;
  padding: 0 var(--sb-pad) !important;
  border-radius: var(--sb-radius) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
/* Header: 44px. */
.site-signup:not(:where(#top *)) { min-height: var(--sb-height-header) !important; }
/* Exception: the plan-comparison table on /ai-avatar-pricing has six narrow
   columns; at 52px and 24px padding "Talk to the founding team" wraps to
   three lines. It keeps the 44px header size and its 14px padding. */
.pm-cta { min-height: var(--sb-height-header) !important; padding: 0 14px !important; }
/* "Copy prompt" sits inside the command field: it keeps its original 44px
   size so the field does not grow (Michele, 2026-11-13). */
.v2-sdk-copy { min-height: 44px !important; padding: 0 16px !important; }

/* ---- Primary (filled), same on dark and light ---------------------------- */
:where(
  .site-signup,
  .demo-carousel-talk, #startDemo, .toda-demo-restart, #demoEmailSubmit,
  .toda-demo-signup, .toda-demo-retry,
  .avatar-gallery-cta,
  .v2-btn,
  .pr-card.is-featured .pr-button,
  .toda-btn,
  .company-primary, .company-featured-cta,
  .dev-btn-light,
  .talk-form-send, .beta-report-primary,
  .cx-cta
):not(:where(#top *)) {
  background: var(--sb-blue) !important;
  color: var(--sb-ink) !important;
  border: var(--sb-border) solid var(--sb-blue) !important;
}
@media (hover: hover) and (pointer: fine) {
  :where(.site-signup, .demo-carousel-talk, #startDemo, .toda-demo-restart, #demoEmailSubmit,
      .toda-demo-signup, .toda-demo-retry, .avatar-gallery-cta, .v2-btn, .pr-card.is-featured .pr-button, .toda-btn,
      .company-primary, .company-featured-cta, .dev-btn-light, .talk-form-send, .beta-report-primary, .cx-cta):not(:where(#top *)):hover {
    background: var(--sb-blue-hover) !important; border-color: var(--sb-blue-hover) !important; color: var(--sb-ink) !important;
  }
}
:where(.site-signup, .demo-carousel-talk, #startDemo, .toda-demo-restart, #demoEmailSubmit,
    .toda-demo-signup, .toda-demo-retry, .avatar-gallery-cta, .v2-btn, .pr-card.is-featured .pr-button, .toda-btn,
    .company-primary, .company-featured-cta, .dev-btn-light, .talk-form-send, .beta-report-primary, .cx-cta):not(:where(#top *)):active {
  background: var(--sb-blue-pressed) !important; border-color: var(--sb-blue-pressed) !important; color: var(--sb-ink) !important;
}

/* ---- Secondary (outline): dark blue on paper, light blue on dark --------- */
:where(
  .toda-demo-talk, .toda-demo-end,
  .avatar-gallery-pause,
  .v2-sdk-copy,
  .pr-button,
  .pm-cta,
  .toda-btn-ghost,
  .dev-btn-ghost,
  .beta-report-secondary
):not(.pr-card.is-featured .pr-button):not(:where(#top *)) {
  background: transparent !important;
  color: var(--sb-accent) !important;
  border: var(--sb-border) solid var(--sb-accent) !important;
}
@media (hover: hover) and (pointer: fine) {
  :where(.toda-demo-talk, .toda-demo-end, .avatar-gallery-pause, .v2-sdk-copy,
      .pr-button, .pm-cta, .toda-btn-ghost, .dev-btn-ghost, .beta-report-secondary):not(.pr-card.is-featured .pr-button):not(:where(#top *)):hover {
    background: transparent !important; color: var(--sb-accent-hover) !important; border-color: var(--sb-accent-hover) !important;
  }
}

/* Demo end panel: "Start free" is the one primary; the restart talk stays a
   text link under the two buttons, as before. */
:where(.toda-demo-consent.is-ended .toda-demo-restart):not(:where(#top *)) {
  min-height: 44px !important; padding: 0 12px !important;
  background: transparent !important; border: 0 !important; color: var(--sb-accent) !important;
  font-weight: 600 !important; text-decoration-line: underline !important; text-underline-offset: 3px !important;
}
@media (hover: hover) and (pointer: fine) {
  :where(.toda-demo-consent.is-ended .toda-demo-restart):not(:where(#top *)):hover { background: transparent !important; border: 0 !important; color: var(--sb-accent-hover) !important; }
}
:where(.toda-demo-consent.is-ended .toda-demo-restart):not(:where(#top *)):active { background: transparent !important; border: 0 !important; color: var(--sb-accent) !important; }

/* ---- Header links (Michele, 2026-11-13, "White, as on board") ------------
   Page links and "Sign in" in the navigation bar: no underline, 15px, weight
   500; ink on light headers, paper on the dark Hero 3a header; blue on hover.
   The phone menu panel is paper on every page, so its rows stay ink.
   The current company sub-page keeps its underline: it marks the selected page. */
:root { --sb-nav: var(--sb-ink); --sb-nav-hover: var(--sb-action-light); }
html[data-hero=grid] .site-nav { --sb-nav: #FAF8F3; --sb-nav-hover: var(--sb-blue); }
html[data-hero=grid] .site-nav .site-mobile-menu-links { --sb-nav: var(--sb-ink); --sb-nav-hover: var(--sb-action-light); }
:where(.site-navlink, .site-signin, .company-navlink, .company-subnav a, .company-product-link, .toda-back,
       .site-mobile-menu-links > a) {
  color: var(--sb-nav) !important;
  text-decoration-line: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
:where(.company-subnav a[aria-current]) { text-decoration-line: underline !important; text-underline-offset: 3px !important; }
@media (hover: hover) and (pointer: fine) {
  :where(.site-navlink, .site-signin, .company-navlink, .company-subnav a, .company-product-link, .toda-back,
         .site-mobile-menu-links > a):hover {
    color: var(--sb-nav-hover) !important;
  }
}

/* The phone menu's highlighted "Try the live demo" row is a filled action:
   primary colours. (Language links in the menu are controls; untouched.) */
:where(.site-mobile-menu-links .site-mobile-menu-demo) { background: var(--sb-blue) !important; color: var(--sb-ink) !important; border-radius: var(--sb-radius) !important; }
@media (hover: hover) and (pointer: fine) {
  :where(.site-mobile-menu-links .site-mobile-menu-demo):hover { background: var(--sb-blue-hover) !important; color: var(--sb-ink) !important; }
}
:where(.site-mobile-menu-links .site-mobile-menu-demo):active { background: var(--sb-blue-pressed) !important; }

/* ---- Footer links (Michele, 2026-11-13): text-link style ------------------ */
:where(.toda-footer-column a, .toda-foot-link, body > footer a, main ~ footer a):not(:where(.toda-brand, .toda-footer-brand, .company-brand, .company-product-brand, .toda-wordmark)) {
  color: var(--sb-accent) !important;
  text-decoration-line: underline !important;
  text-underline-offset: 3px !important;
}
@media (hover: hover) and (pointer: fine) {
  :where(.toda-footer-column a, .toda-foot-link, body > footer a, main ~ footer a):not(:where(.toda-brand, .toda-footer-brand, .company-brand, .company-product-brand, .toda-wordmark)):hover {
    color: var(--sb-accent-hover) !important;
  }
}

/* ---- Text links ----------------------------------------------------------- */
:where(
  .v2-link, .v2-more-link a, .v2-dev-hint a,
  .company-read-link:not(.company-featured-cta), .company-next-links a:not(.company-primary),
  .cmp-ref, .toda-demo-email-privacy,
  :where(main, #main-content, .company-essay, #talkDialog, #home-calculator)
    :where(p, li, dd, figcaption, td, small) a:not([class])
):not(:where(#top *)) {
  color: var(--sb-accent) !important;
  text-decoration-line: underline !important;
  text-underline-offset: 3px !important;
}
@media (hover: hover) and (pointer: fine) {
  :where(.v2-link, .v2-more-link a, .v2-dev-hint a, .company-read-link:not(.company-featured-cta),
      .company-next-links a:not(.company-primary), .cmp-ref, .toda-demo-email-privacy,
      :where(main, #main-content, .company-essay, #talkDialog, #home-calculator)
        :where(p, li, dd, figcaption, td, small) a:not([class])):not(:where(#top *)):hover {
    color: var(--sb-accent-hover) !important;
  }
}

/* ---- Focus: 2px ring in the ground's blue, 2px away. Never removed. ------ */
:where(a, button, [role=button], [role=tab], summary, input, select, textarea):not(:where(#top *)):focus-visible {
  outline: 2px solid var(--sb-accent) !important;
  outline-offset: 2px !important;
}

/* ---- Icons: the microphone only on "Talk with [name]" -------------------- */
:where(.demo-carousel-talk, #startDemo, .toda-demo-restart):not(:where(#top *))::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center/contain no-repeat !important;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

/* ---- Only clickable things are blue -------------------------------------- */
/* Facts, numbers and status labels: ink on paper, paper on dark, no box. */
:where(#pricing .pr-v5-benefits strong, #pricing .pr-byo strong, #pricing .pr-byo-plus,
       .mesh-cell, .why-fold-label, .row-num, .v2-num, .v2-step-of, .dev-step, .cx-head-value,
       .toda-section-kicker, .pr-kicker, .avatar-gallery-kicker, .company-eyebrow, .company-note-label, .dev-kicker, .cx-kicker,
       #interaction .hw-on,
       :where(main, #main-content) :where(h1, h2, h3) em:not(:where(#top *))) {
  color: var(--sb-text) !important;
}
:where(#pricing .pr-byo > div > span) { color: var(--sb-muted) !important; }
:where(#pricing .pr-byo) { color: var(--sb-text) !important; border-color: var(--sb-rule) !important; }
:where(#pricing .pr-byo-plus) { background: transparent !important; }
:where(#pricing .pr-check path, .pm-check path) { stroke: var(--sb-text) !important; }
:where(.dev-step) { border-color: transparent !important; background: transparent !important; }
:where(.result) { background: transparent !important; border-color: transparent !important; }
:where(.result.yes) { color: var(--sb-text) !important; }
/* Pale blue panels become a neutral tint (not clickable). */
:where(#pricing .pr-enterprise) { background: var(--sb-tint) !important; border-color: var(--sb-rule) !important; }
:where(.mesh-cell, #why .why-fold-card.is-mesh) { background: var(--sb-tint) !important; }
:where(#pricing .pr-card.is-featured) { border-color: var(--sb-ink) !important; }
/* "Most popular" sits in a gap of the card edge, unboxed, like a legend. */
:where(#pricing .pr-card.is-featured .pr-tag) { background: #fff !important; color: var(--sb-ink) !important; border: 0 !important; border-radius: 0 !important; }
:where(.is-ours .cx-row.is-accent .cx-row-v) { color: var(--on-dark, #FAF8F3) !important; }
/* Calculator: the MeshLite card is dark, so its label takes the card's own ground. */
:where(.is-ours .cx-tag) { background: var(--dark, #1C1B19) !important; color: var(--on-dark, #FAF8F3) !important; border: 0 !important; }

/* Windows high contrast: keep a visible edge on filled buttons. */
@media (forced-colors: active) {
  :where(.site-signup, .demo-carousel-talk, #startDemo, .toda-demo-restart, #demoEmailSubmit, .toda-demo-signup,
      .toda-demo-retry, .avatar-gallery-cta, .v2-btn, .pr-button, .toda-btn, .company-primary, .company-featured-cta,
      .dev-btn, .talk-form-send, .beta-report-primary, .cx-cta) { border: 1px solid ButtonText !important; }
}

}