/* Shared chrome for Tone's static pages: dial-prototype's marketing header
   (public/tone-research/site-shell.css) plus the footer's wordmark and appearance switch.
   Supplies the tokens the shell needs that these pages don't define, in both looks. */
:root {
  --paper-raised: rgba(115, 95, 72, .06);
  --paper-inset: rgba(80, 76, 71, .1);
  --tone-focus: #89847e;
  --tone-accent: #88603b;
  --tone-nav: rgba(248, 245, 239, .86);
  --tone-panel: #f3efe8;
  --tone-button-hover: #413e3a;
  --tone-button-active: #54514c;
  --tone-scrim: rgba(42, 34, 26, .24);
}
:root[data-look="dark"] {
  --paper-raised: rgba(245, 245, 244, .04);
  --paper-inset: rgba(245, 245, 244, .08);
  --tone-focus: #d5b997;
  --tone-accent: #d5b997;
  --tone-nav: rgba(25, 22, 20, .78);
  --tone-panel: #24211e;
  --tone-button-hover: #e5ded6;
  --tone-button-active: #d7d0c8;
  --tone-scrim: rgba(25, 22, 20, .64);
}

/* The header and menu set type in the page's own Inter at the page's tracking, so its
   buttons match the hero's; the shell otherwise uses its own Inter Medium file, untracked. */
.tone-site-shell { --font-marketing-body: Inter; }
.tone-site-shell :is(.text-button, .pill.small) { letter-spacing: -0.28px; }

/* These pages flow below the header instead of sliding under it. */
.tone-site-shell.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; }

/* The wordmark, symbol and menu artwork are white; darken them on the light look. */
:root:not([data-look="dark"]) :is(.tone-site-shell .brand img, .tone-site-shell .menu-toggle img) { filter: brightness(.15); }

/* Speak to Sales always shows; Sign up joins it once the row has room (wordmark, both
   actions and the menu need about 330px at the narrowest gutters). */
.tone-site-shell .contact-button { display: block; }
.tone-site-shell [data-header-account] { display:contents; }
.tone-site-shell .nav-actions button { min-height:0; min-width:0; }
/* Show the full navigation only when the logo, links and actions fit comfortably. */
@media (min-width: 1100px) {
  .tone-site-shell.site-header .nav-shell { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:32px; }
  .tone-site-shell.site-header .brand { margin-right:0; }
  .tone-site-shell.site-header .desktop-nav { display:flex; justify-content:center; align-items:center; gap:clamp(18px,2vw,28px); }
  .tone-site-shell.site-header .nav-actions { justify-self:end; margin-left:0; }
  .tone-site-shell.site-header .desktop-nav a { min-width:0; white-space:nowrap; color:var(--shell-muted); }
  .tone-site-shell.site-header .desktop-nav a:hover { color:var(--shell-text); }
  .tone-site-shell.site-header .desktop-nav a:focus-visible { outline:2px solid var(--tone-focus); outline-offset:5px; }
  .tone-site-shell.site-header .menu-toggle { display:none; }
}
@media (max-width: 359px) { .tone-site-shell .nav-actions .pill.small { display: none; } }

/* Tone's panel has six main links; stagger the sixth like the rest. */
.tone-nav-preview.is-open .nav-preview-primary :nth-child(6) { transition-delay: 355ms; }
.tone-nav-preview .nav-preview-cta[hidden] { display:none; }
@media(max-width:767px) { .tone-nav-preview .nav-preview-cta { display:none; } }

/* Footer wordmark. */
footer .brand { display: inline-flex; align-items: center; height: 32px; color: var(--ink); }
footer .brand .wordmark { display: block; width: 67px; height: 21px; fill: currentColor; }

/* Appearance switch (look.js): System, Light or Dark, after dial's theme toggle. */
.look-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.look-switch button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink-3); cursor: pointer; transition: background-color .2s, color .2s; }
.look-switch button:hover { color: var(--ink); }
.look-switch button[aria-pressed="true"] { background: var(--paper-inset); color: var(--ink); }
.look-switch button:focus-visible { outline: 2px solid var(--tone-focus); outline-offset: 2px; }
.look-switch svg { width: 16px; height: 16px; }
body.agent-bar-open { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }