/*
 * Marketing site (templates/site/*): home, how it works, guides, FAQ, about,
 * for schools. Loaded after consumer-tokens.css and uses its --ec-* tokens;
 * the few extra neutrals the approved mockups use are defined here.
 *
 * Contrast on white unless noted (WCAG AA 4.5:1 for small text):
 *   --ec-text-2 #5f5f5f 6.39 (5.82 on --site-alt-bg, ~5.3 over a faint SVG line)
 *   --ec-text-muted #757575 4.61 on white only -- never on --site-alt-bg or
 *     over the decorative SVGs (it drops under 4.5 there)
 *   --ec-accent #b4492a 5.35 on white, 5.13 on --site-alt-bg
 *   --site-band-text-2 #bbbbbb on --ec-text 9.6
 */

:root {
    --site-alt-bg:       #fafafa;  /* alternating section background */
    --site-rule:         #eeeeee;  /* header / section borders */
    --site-rule-strong:  #dddddd;  /* step top rules */
    --site-pill-bg:      #f2f2f2;
    --site-num-bg:       #fff4ef;  /* numbered circle behind --ec-accent-text */
    --site-band-text-2:  #bbbbbb;  /* secondary text on the black band */
    --site-max:          1180px;
    --site-gutter:       24px;

    /* Founder photo treatment. Set to `none` to show the original color. */
    --founder-photo-filter: grayscale(1) contrast(1.02);

    --ease-out-soft: cubic-bezier(0.22, 0.8, 0.25, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--ec-bg);
    color: var(--ec-text);
    line-height: 1.5;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
img, svg { display: block; }
a { color: inherit; }
ul, ol { list-style: none; }

a:focus-visible, button:focus-visible {
    outline: 2px solid var(--ec-text);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 20;
    background: var(--ec-text);
    color: var(--ec-btn-text);
    padding: 10px 14px;
    border-radius: var(--ec-btn-radius);
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus { top: 12px; }

.container {
    max-width: var(--site-max);
    margin: 0 auto;
    padding: 0 var(--site-gutter);
}

h1, h2, h3, .serif { font-family: var(--ec-font-serif); font-weight: 400; color: var(--ec-text); }

.eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ec-accent);
}
.page-title {
    font-size: clamp(36px, 8.5vw, 54px);
    line-height: 1.08;
    letter-spacing: -1px;
}
.section-title {
    font-size: clamp(30px, 6.5vw, 40px);
    line-height: 1.15;
}
.lede {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ec-text-2);
}
.muted { color: var(--ec-text-2); }

.link-accent {
    color: var(--ec-accent-text);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}
.link-accent:hover { color: var(--ec-accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 18px;
    border-radius: var(--ec-btn-radius);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.btn-lg { padding: 16px 24px; font-size: 16px; }
.btn-primary { background: var(--ec-btn-bg); color: var(--ec-btn-text); border-color: var(--ec-btn-bg); }
.btn-primary:hover { background: var(--ec-btn-hover); border-color: var(--ec-btn-hover); color: var(--ec-btn-text); }
.btn-light { background: var(--ec-surface); color: var(--ec-text); border-color: var(--ec-surface); }
.btn-light:hover { background: var(--ec-btn-2-hover-bg); color: var(--ec-text); }
.btn-secondary { background: transparent; color: var(--ec-text); border-color: var(--ec-input-border); }
.btn-secondary:hover { background: var(--ec-btn-2-hover-bg); color: var(--ec-text); }
.btn .arrow { transition: transform 200ms ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ── Cards / pills ── */
.card {
    background: var(--ec-surface);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-card-radius);
}
.card-lift { box-shadow: 0 12px 32px rgba(0,0,0,0.06); }
.pill {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ec-text-2);
    background: var(--site-pill-bg);
    border-radius: 999px;
    padding: 4px 10px;
    white-space: nowrap;
}
.pill.pill-dark { background: var(--ec-text); color: var(--ec-btn-text); font-weight: 600; }

/* ── Sections ── */
.section { padding: 80px 0; }
.section-alt {
    background: var(--site-alt-bg);
    border-top: 1px solid var(--site-rule);
    border-bottom: 1px solid var(--site-rule);
}
.section-alt + .section-alt { border-top: 0; }

/* Decorative line art (track lanes, diamond): aria-hidden, behind content. */
.art-host { position: relative; overflow: hidden; }
.art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.art-host > .container { position: relative; z-index: 1; }

/* Page hero for inner pages */
.page-hero { border-bottom: 1px solid var(--site-rule); }
.page-hero .container { padding-top: 72px; padding-bottom: 64px; }
.page-hero .page-title { margin-top: 16px; max-width: 760px; }
.page-hero .lede { margin-top: 20px; max-width: 620px; }
.page-hero .art { opacity: 0.07; }

/* ── Header / nav ── */
.site-header { border-bottom: 1px solid var(--site-rule); background: var(--ec-bg); position: relative; z-index: 10; }
.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.site-nav .brand-name { font-size: 22px; }
.menu-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--ec-text);
    background: transparent;
    border: 1px solid var(--ec-input-border);
    border-radius: var(--ec-btn-radius);
    cursor: pointer;
}
.menu-toggle:hover { background: var(--ec-btn-2-hover-bg); }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; font-size: 15px; }
.nav-list a:not(.btn) { color: var(--ec-text-2); text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid transparent; }
.nav-list a:not(.btn):hover { color: var(--ec-text); }
.nav-list a[aria-current="page"] { color: var(--ec-text); font-weight: 600; border-bottom-color: var(--ec-accent); }

/* Phones and small tablets: the menu collapses behind a button. Without JS
   (no html.js) the list simply stays visible and wraps. */
@media (max-width: 959px) {
    .js .menu-toggle { display: inline-flex; }
    .js .nav-list { display: none; }
    .js .nav-list.is-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        font-size: 17px;
    }
    .js .nav-list.is-open li + li { border-top: 1px solid var(--site-rule); }
    .js .nav-list.is-open a:not(.btn) {
        display: block;
        padding: 14px 0;
        border-bottom: 0;
    }
    .js .nav-list.is-open a[aria-current="page"] {
        text-decoration: underline;
        text-decoration-color: var(--ec-accent);
        text-decoration-thickness: 2px;
        text-underline-offset: 6px;
    }
    .js .nav-list.is-open .nav-cta { padding: 16px 0 4px; }
    .js .nav-list.is-open .btn { width: 100%; }
}

/* ── Closing band ── */
.band { background: var(--ec-text); color: var(--ec-btn-text); }
.band .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding-top: 72px;
    padding-bottom: 72px;
}
.band-text { flex: 1 1 480px; min-width: 0; }
.band h2 { color: var(--ec-btn-text); }
.band p { margin-top: 12px; font-size: 16px; color: var(--site-band-text-2); }
.band .btn-light:focus-visible { outline-color: var(--ec-btn-text); }

/* ── Footer ── */
.site-footer .container { padding-top: 40px; padding-bottom: 48px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 14px; }
.footer-links a { color: var(--ec-text-2); text-decoration: none; }
.footer-links a:hover { color: var(--ec-text); text-decoration: underline; text-underline-offset: 3px; }
.footer-fine { margin-top: 24px; font-size: 13px; line-height: 1.6; color: var(--ec-text-muted); max-width: 760px; }

/* ── Shared bits ── */
.check-list { display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.5; }
.check-list li { display: flex; gap: 12px; }
.check-list li::before { content: "✓"; color: var(--ec-accent); font-weight: 700; flex-shrink: 0; }

@media (max-width: 599px) {
    :root { --site-gutter: 20px; }
    .section { padding: 64px 0; }
    .page-hero .container { padding-top: 48px; padding-bottom: 48px; }
    .band .container { padding-top: 56px; padding-bottom: 56px; }
    .band .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn .arrow { transition: none; }
}