/* SmartTutor — shared stylesheet.
   Brand: Plus Jakarta Sans + Azeret Mono; terracotta / cream / ink.
   Tokens are defined once and redefined for dark mode; components only
   ever read tokens, never literals, so both themes stay consistent. */

:root {
    --accent:        #c2410c;
    --accent-soft:   #fdf0e9;
    --accent-text:   #9a3412;
    --bg:            #faf7f5;
    --surface:       #ffffff;
    --ink:           #292017;
    --ink-muted:     #6b5d4f;
    --rule:          #e6ddd5;
    --shadow:        0 1px 2px rgba(41, 32, 23, .06), 0 8px 24px -12px rgba(41, 32, 23, .12);

    /* Secondary hues, carried over from the pitch deck. Used only to
       differentiate cards and figures -- never as a second brand colour. */
    --green:  #4d7c0f;
    --teal:   #0f766e;
    --blue:   #1e3a5f;
    --plum:   #9f1239;

    --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --measure: 65ch;
    --gutter:  16px;
    --radius:  10px;

    /* One spacing scale. Every vertical gap on the page is one of these four,
       so the rhythm is the same on every page and between every pair of
       sections. Sections used to carry inline padding-top:0 overrides, which
       made the gap between them alternate 124px / 248px down the page. */
    --gap-grid:    20px;                      /* between cards and tiles */
    --gap-list:    28px;                      /* between rows of a text list */
    --space-head:  clamp(32px, 3.6vw, 46px);  /* under a section heading */
    --space-block: clamp(40px, 5.2vw, 66px);  /* a section's own padding */
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --accent:      #f97316;
        --accent-soft: #2a1a10;
        --accent-text: #fdba74;
        --bg:          #17120d;
        --surface:     #201a14;
        --ink:         #f2ece5;
        --ink-muted:   #a9998a;
        --rule:        #362c22;
        --shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
        --green:       #a3e635;
        --teal:        #5eead4;
        --blue:        #93c5fd;
        --plum:        #fda4af;
    }
}

:root[data-theme="dark"] {
    --accent:      #f97316;
    --accent-soft: #2a1a10;
    --accent-text: #fdba74;
    --bg:          #17120d;
    --surface:     #201a14;
    --ink:         #f2ece5;
    --ink-muted:   #a9998a;
    --rule:        #362c22;
    --shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --green:       #a3e635;
    --teal:        #5eead4;
    --blue:        #93c5fd;
    --plum:        #fda4af;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { text-wrap: balance; line-height: 1.15; margin: 0; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem);   font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 700; }
p  { margin: 0; max-width: var(--measure); }
a  { color: var(--accent-text); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap {
    width: 100%;
    max-width: 1060px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin: 0;
}

/* --- header ---
   A three-slot grid: wordmark | links | call to action. The links used to sit
   in the same wrapping flex row as the button, so on a narrow screen the
   button wrapped onto its own line and the header grew to three rows with the
   primary action pushed below the fold. The wordmark and the button now always
   share the top row, and the links move to their own scrollable strip. */
.site-header {
    border-bottom: 1px solid var(--rule); background: var(--bg);
    position: sticky; top: 0; z-index: 20;
}
.site-header .wrap {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px 28px;
    min-height: 68px;
}
.wordmark {
    font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em;
    color: var(--ink); text-decoration: none;
}
.wordmark em { font-style: normal; color: var(--accent); }
.nav { display: flex; gap: 22px; align-items: center; }
.nav a {
    color: var(--ink-muted); text-decoration: none;
    font-size: .93rem; font-weight: 500; white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { font-weight: 600; }
.nav-cta { padding: 9px 16px; font-size: .9rem; }

@media (max-width: 760px) {
    .site-header .wrap {
        grid-template-columns: 1fr auto;
        padding-block: 10px;
        min-height: 0;
    }
    /* Full-width strip below the wordmark. It scrolls rather than wrapping, so
       the header stays two rows tall however many links there are. */
    .nav {
        grid-column: 1 / -1; grid-row: 2;
        gap: 18px; overflow-x: auto; scrollbar-width: none;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter); padding-bottom: 2px;
    }
    .nav::-webkit-scrollbar { display: none; }
}

/* --- buttons --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px; border-radius: var(--radius);
    font: inherit; font-size: .95rem; font-weight: 600;
    text-decoration: none; cursor: pointer;
    border: 1px solid transparent; transition: background .15s, border-color .15s;
}
/* An author rule that sets display beats the UA stylesheet's
   [hidden] { display: none }, so a .btn with the hidden attribute sits there in
   plain view without this. /authorise hides two of them. */
.btn[hidden] { display: none; }
.btn-primary  { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-text); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.btn-ghost    { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--ink-muted); }

/* --- layout blocks --- */
/* Top and bottom are the same, so the gap between any two sections is
   exactly twice this and never needs an override. */
section { padding-block: var(--space-block); }
/* The header is sticky, so an anchor jump would otherwise land with the
   heading hidden underneath it. */
section[id] { scroll-margin-top: 92px; }
@media (max-width: 760px) { section[id] { scroll-margin-top: 108px; } }
.section-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--space-head); }
/* A line that closes a section off under its content, at the same remove as a
   section head sits above it. */
.section-note { margin-top: var(--space-head); color: var(--ink-muted); }

.hero { padding-top: clamp(56px, 8.5vw, 108px); padding-bottom: var(--space-block); }
.hero-grid { display: grid; gap: 16px; }
.hero p.lede { font-size: 1.2rem; line-height: 1.6; color: var(--ink-muted); margin-top: 8px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

.grid { display: grid; gap: var(--gap-grid); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card {
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--radius); padding: 28px;
    display: flex; flex-direction: column; gap: 10px;
}
.card p { color: var(--ink-muted); font-size: .95rem; }

/* --- pricing --- */
.price-card { position: relative; }
.price-card[data-featured] { border-color: var(--accent); }
.price {
    font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em;
    font-variant-numeric: tabular-nums; margin-top: 4px;
}
.price span { font-size: .95rem; font-weight: 500; color: var(--ink-muted); letter-spacing: 0; }
.price-card ul { list-style: none; margin: 16px 0 24px; padding: 0; display: grid; gap: 8px; }
.price-card li { font-size: .93rem; color: var(--ink-muted); padding-left: 20px; position: relative; }
.price-card li::before {
    content: ""; position: absolute; left: 4px; top: .62em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.price-card .btn { margin-top: auto; }

.badge {
    font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em;
    text-transform: uppercase; background: var(--accent-soft); color: var(--accent-text);
    padding: 4px 9px; border-radius: 999px; align-self: flex-start;
}

/* --- callout + footer --- */
.callout {
    background: var(--accent-soft); border: 1px solid var(--rule);
    border-radius: var(--radius); padding: 36px;
    display: flex; gap: 26px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
/* h2 and p are both margin: 0 globally, so without this the sentence starts
   immediately under the heading. The text block also needs a flex basis: left
   to size itself from the paragraph's 65ch measure it filled the row and
   pushed the button onto a line of its own. */
.callout > div { display: grid; gap: 16px; flex: 1 1 420px; }
.callout h2 + p { color: var(--ink-muted); max-width: 58ch; }
.callout .btn { flex: none; }
.site-footer { border-top: 1px solid var(--rule); padding-block: 32px; color: var(--ink-muted); font-size: .88rem; }
.site-footer .wrap { display: flex; gap: 14px; justify-content: space-between; flex-wrap: wrap; }
.site-footer a { color: var(--ink-muted); }

.steps { counter-reset: step; display: grid; gap: var(--gap-list); margin: 0; padding: 0; list-style: none; }
.steps li { counter-increment: step; padding-left: 46px; position: relative; }
.steps li::before {
    content: counter(step); position: absolute; left: 0; top: 0;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-text);
    font-family: var(--font-mono); font-size: .82rem; font-weight: 600;
    display: grid; place-items: center;
}
.steps strong { display: block; }
.steps p { color: var(--ink-muted); font-size: .95rem; }

code, .mono { font-family: var(--font-mono); font-size: .88em; }

.faq { display: grid; gap: 0; }
.faq details { border-bottom: 1px solid var(--rule); padding: 24px 0; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--accent); font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { margin-top: 10px; color: var(--ink-muted); font-size: .95rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- stat row: the time-saved figures --- */
.stats {
    display: grid; gap: var(--gap-grid);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat {
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--radius); padding: 24px;
}
.stat b {
    display: block; font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800;
    letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.stat span {
    display: block; margin-top: 6px;
    font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted);
}
.stat[data-tone="accent"] b { color: var(--accent); }
.stat[data-tone="green"]  b { color: var(--green); }
.stat[data-tone="teal"]   b { color: var(--teal); }
.stat[data-tone="blue"]   b { color: var(--blue); }

/* --- editions: the one distinction a buyer has to get right --- */
.editions { display: grid; gap: var(--gap-grid); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.edition { border-top: 3px solid var(--accent); }
.edition[data-edition="offline"] { border-top-color: var(--green); }
.edition dl { margin: 6px 0 0; display: grid; gap: 10px; }
.edition dt {
    font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted);
}
.edition dd { margin: 2px 0 0; font-size: .95rem; }

/* --- tutor modes ---
   Six modes, so the column count stays a divisor of six; auto-fit landed on
   five and stranded one on its own row. Each carries its own hue so the set
   reads as six distinct ways of working rather than six identical boxes. */
.modes { display: grid; gap: var(--gap-grid); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .modes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .modes { grid-template-columns: 1fr; } }

.mode {
    position: relative; overflow: hidden;
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: 14px; padding: 24px;
    display: grid; gap: 12px; align-content: start;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
/* A wash of the mode's own hue, bottom-right, that warms on hover. */
.mode::after {
    content: ""; position: absolute; right: -40px; bottom: -40px;
    width: 120px; height: 120px; border-radius: 50%;
    background: currentColor; opacity: .05;
    transition: opacity .18s ease, transform .18s ease;
}
.mode:hover { border-color: currentColor; transform: translateY(-3px); box-shadow: var(--shadow); }
.mode:hover::after { opacity: .1; transform: scale(1.15); }

.mode-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
    background: currentColor; color: inherit;
}
.mode-icon svg { width: 19px; height: 19px; display: block; stroke: var(--surface); }
.mode b { display: block; font-size: 1.02rem; color: var(--ink); position: relative; }
/* Scoped to its own class, not `.mode span`: the icon tile is a span too, and
   `.mode span` (0,1,1) outranks `.mode-icon` (0,1,0), so the tile inherited
   --ink-muted and every icon came out the same muddy brown. */
.mode-desc { display: block; font-size: .89rem; line-height: 1.5; color: var(--ink-muted); position: relative; }

.mode              { color: var(--accent); }
.mode:nth-child(2) { color: var(--teal); }
.mode:nth-child(3) { color: var(--green); }
.mode:nth-child(4) { color: var(--plum); }
.mode:nth-child(5) { color: var(--blue); }
.mode:nth-child(6) { color: var(--accent-text); }

/* --- privacy panel ---
   Set apart from the ordinary card sections: this is the section parents read
   hardest, so it gets its own surface, a shield, and short claims that do not
   wrap. */
.privacy {
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: 16px; padding: clamp(24px, 3.4vw, 40px);
    display: grid; gap: var(--space-head) clamp(28px, 4vw, 44px);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
}
@media (max-width: 820px) { .privacy { grid-template-columns: 1fr; } }

/* The shield used to sit alone above the headline, which read as two
   unrelated objects. Pairing it with the eyebrow makes one label. */
.privacy-eyebrow {
    display: flex; align-items: center; gap: 10px; margin: 0;
    font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
}
.privacy-shield {
    width: 30px; height: 30px; border-radius: 9px; flex: none;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue);
}
.privacy-shield svg { width: 17px; height: 17px; display: block; }
.privacy-lead p { font-size: 1.05rem; color: var(--ink-muted); }

.privacy-note {
    grid-column: 1 / -1; margin: 0; max-width: none;
    padding-top: 24px; border-top: 1px solid var(--rule);
    font-size: .87rem; color: var(--ink-muted);
}

.privacy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-list); }
.privacy-list li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; }
.privacy-list svg {
    width: 20px; height: 20px; margin-top: 3px; color: var(--green);
    stroke: currentColor; fill: none;
}
.privacy-list b { display: block; font-size: 1rem; font-weight: 700; }
.privacy-list span { display: block; margin-top: 3px; font-size: .94rem; color: var(--ink-muted); }

/* --- feature cards, tinted per column so the grid reads as a set --- */
.card[data-tone] { border-top: 3px solid var(--accent); }
.card[data-tone="teal"]  { border-top-color: var(--teal); }
.card[data-tone="green"] { border-top-color: var(--green); }
.card[data-tone="plum"]  { border-top-color: var(--plum); }
.card[data-tone="blue"]  { border-top-color: var(--blue); }

/* --- comparison table ---
   The table scrolls inside its own container so the page body never scrolls
   sideways on a phone. */
.table-wrap {
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--radius); overflow: hidden;
}
.table-scroll { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; min-width: 520px; }
.compare th {
    background: var(--bg); text-align: left; padding: 13px 18px;
    font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
    border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.compare th:last-child { color: var(--accent-text); }
.compare td { padding: 13px 18px; border-bottom: 1px solid var(--rule); font-size: .94rem; }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td:first-child { font-weight: 600; white-space: nowrap; }
.compare td:last-child { color: var(--accent-text); }

/* --- pull quote --- */
.pull {
    border-left: 3px solid var(--accent); padding: 4px 0 4px 22px; margin: 0;
    font-size: clamp(1.15rem, 2.6vw, 1.5rem); line-height: 1.4; font-weight: 500;
}
.pull cite {
    display: block; margin-top: 12px; font-style: normal;
    font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-muted);
}

/* --- phones ---
   A wider gutter and tighter section rhythm; the hero buttons go full width so
   they are thumb-sized rather than two half-width targets side by side. */
@media (max-width: 560px) {
    :root { --gutter: 20px; }
    body { font-size: 16px; }
    .hero { padding-top: clamp(44px, 11vw, 72px); }
    .hero-actions { display: grid; gap: 10px; }
    .hero-actions .btn { width: 100%; }
    .callout { padding: 24px; }
    .callout .btn { width: 100%; }
    .card { padding: 24px; }
}

/* --- feature card icons ---
   Inline SVG in a tinted tile, taking its colour from the card's own tone so
   the grid reads as a set rather than eight unrelated cards. */
.card-icon {
    width: 42px; height: 42px; border-radius: 11px;
    display: grid; place-items: center; margin-bottom: 4px;
    background: var(--accent-soft); color: var(--accent-text);
}
.card-icon svg { width: 21px; height: 21px; display: block; }
.card[data-tone="teal"]  .card-icon { background: color-mix(in srgb, var(--teal)  14%, transparent); color: var(--teal); }
.card[data-tone="green"] .card-icon { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.card[data-tone="plum"]  .card-icon { background: color-mix(in srgb, var(--plum)  14%, transparent); color: var(--plum); }
.card[data-tone="blue"]  .card-icon { background: color-mix(in srgb, var(--blue)  16%, transparent); color: var(--blue); }