/* WiseCall type scale + base elements, from the live site CSS (4 Nov 2026), now on the --color-* semantic layer
   so the same rules work in light and dark (light renders exactly as the live site).
   Load after tokens.css and fonts.css. App screens are denser than marketing pages:
   use h1-page for screen titles, h3-card for panel titles, and keep display for empty states/onboarding only. */
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;line-height:1.08;color:var(--color-heading)}
.wc-display{font-size:clamp(2.8rem,8vw,5.2rem)}        /* hero h1 */
.wc-h1{font-size:clamp(2.1rem,4vw,3.15rem)}            /* page h1 / section h2 */
.wc-h2{font-size:clamp(1.8rem,3vw,2.4rem)}             /* family h2 */
.wc-h2-prose{font-size:1.7rem}
.wc-h3-step{font-size:1.55rem}
.wc-h3{font-size:1.45rem}                              /* card h3 */
.wc-h3-small{font-size:1.35rem}
.wc-h4{font-size:1.15rem}                              /* compare h3 */
.wc-small{font-size:.82rem;color:var(--color-text-muted)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-eyebrow)}
.eyebrow.on-dark{color:var(--saffron)}
a{color:var(--color-link)} a:hover{color:var(--color-link-hover)}
.surface-dark{background:var(--color-surface-strong);color:var(--color-on-strong)}
.surface-dark h1,.surface-dark h2,.surface-dark h3{color:var(--color-on-strong)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.surface-dark :focus-visible{outline-color:var(--wc-saffron)}
::selection{background:var(--saffron);color:var(--ink)}
.wc-icon{width:1.5rem;height:1.5rem;stroke:currentColor;fill:none}

/* Buttons (live site) */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;border:1.5px solid transparent;font-family:var(--font-body);font-weight:600;font-size:.98rem;line-height:1.2;text-decoration:none;text-align:center;cursor:pointer}
.button-primary{background:var(--color-accent);color:var(--color-on-accent)} .button-primary:hover{background:var(--color-accent-hover);color:var(--color-on-accent)}
.button-secondary{background:transparent;color:var(--color-heading);border-color:var(--color-heading)} .button-secondary:hover{background:var(--color-surface-tint)}
.button-text{background:transparent;color:var(--color-link);padding-inline:12px} .button-text:hover{background:var(--color-surface-tint)}
.button-evergreen{background:var(--color-selected-bg);color:var(--color-selected-text)} .button-evergreen:hover{filter:brightness(.92)}
.button-ghost-light{background:transparent;color:var(--paper);border-color:color-mix(in srgb,var(--wc-paper) 55%,transparent)}
@media (prefers-reduced-motion:no-preference){.button{transition:transform var(--dur-ui) var(--ease-ui),background var(--dur-ui) var(--ease-ui)}.button:hover{transform:translateY(-1px)}}