/* ══════════════════════════════════════════════════════════════════════
   Marketing pages · Signal base (subject, teach, teacher resources)
   ----------------------------------------------------------------------
   Replaces marketing-base.css on the redesigned pages. Carries the token
   names the shared nav (_marketing_nav.html → marketing-nav.css, topnav.css)
   resolves — --card, --border, --border-2, --text-2, --text-3, --accent-text,
   --indigo-muted, --shadow-hover, --font-ui — re-pointed at the Signal
   palette, plus the page chrome both pages share. Load after ds.css.
   ══════════════════════════════════════════════════════════════════════ */

:root {
    --bg: var(--ds-bg);
    --bg-soft: var(--ds-bg-2);
    --card: var(--ds-surface);
    --indigo: #5b50e8;
    --indigo-dark: #4a3fd0;
    --indigo-light: #9b8ff7;
    --indigo-muted: rgba(91, 80, 232, .07);
    --violet: var(--indigo);
    --text: var(--ds-ink);
    --text-2: var(--ds-ink-2);
    --text-3: var(--ds-ink-3);
    --text-primary: var(--text);
    --text-secondary: var(--text-2);
    --text-muted: var(--text-3);
    --accent-text: var(--ds-accent-ink);
    --border: var(--ds-line);
    --border-2: var(--ds-line-2);
    --green: #16a34a;
    --amber: #d97706;
    --red: #dc2626;
    --shadow: var(--ds-shadow-1);
    --shadow-hover: var(--ds-shadow-2);
    --r: 16px;
    --font-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: var(--font-ui);
}
[data-dark] {
    --violet-text: #a99dff;
    --surface-0: #111113;
    --surface-1: #18181b;
    --surface-2: #222226;
    --surface-3: #2a2a2f;
    --line: rgba(255, 255, 255, .08);
    --line-strong: #38383f;
    --text-muted-raised: #9ba2bd;
    --indigo-light: #a99dff;
    --indigo-muted: rgba(169, 157, 255, .1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.ds-page { overflow-x: hidden; }
:where(body.ds-page a) { color: inherit; }

.skip-link {
    position: fixed; top: -64px; left: 16px; z-index: 3000;
    padding: 10px 16px; border-radius: 10px;
    background: var(--ds-violet-600); color: #fff !important; font-weight: 700; text-decoration: none;
    transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* Mobile: 16px form fields stop iOS focus-zoom. */
@media (max-width: 640px) {
    body.ds-page :is(input, select, textarea) { font-size: 16px; }
}

/* ── The solid button the shared chrome (sticky CTA) still uses ────── */
body.ds-page .btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: 13px;
    background: var(--ds-violet-600); color: #fff;
    font: 650 .9375rem var(--ds-font-text);
    text-decoration: none; cursor: pointer;
    box-shadow: 0 1px 2px rgba(14, 18, 32, .16);
    transition: background-color .2s ease, transform .3s var(--ds-ease-out);
}
body.ds-page .btn-primary:hover { background: #5046e0; }
body.ds-page .btn-primary:active { transform: scale(.97); }

/* ── Floating phone CTA + back-to-top ─────────────────────────────── */
body.ds-page .sticky-cta {
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 10px 10px 10px 16px;
    border: 1px solid var(--ds-line-2);
    border-radius: 20px;
    background: color-mix(in srgb, var(--ds-surface) 86%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: var(--ds-shadow-3);
    transform: translateY(calc(100% + 24px));
    transition: transform .6s var(--ds-ease-out);
}
body.ds-page .sticky-cta.show { transform: translateY(0); }
body.ds-page .sticky-cta-copy { font-size: .75rem; font-weight: 500; color: var(--ds-ink-3); line-height: 1.35; }
body.ds-page .sticky-cta-copy b { font-size: .9375rem; font-weight: 700; color: var(--ds-ink); }
body.ds-page .sticky-cta .btn-primary { min-height: 46px; padding: 0 18px; }
body.ds-page .to-top {
    width: 44px; height: 44px;
    border: 1px solid var(--ds-line-2);
    background: color-mix(in srgb, var(--ds-surface) 82%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    color: var(--ds-ink);
    box-shadow: var(--ds-shadow-2);
    transition: opacity .3s ease, transform .5s var(--ds-ease-out), visibility .3s, bottom .5s var(--ds-ease-out), background-color .2s ease;
}
body.ds-page .to-top:hover { background: var(--ds-violet-600); color: #fff; border-color: transparent; }
body.ds-page .to-top svg { width: 18px; height: 18px; }
@media (max-width: 768px) {
    body.ds-page .sticky-cta.show ~ .to-top { bottom: 92px; }
}