/* Guide pages (/struggling-with-math, /how-to-get-better-at-math).
   Loaded after site_main.css so the header/footer/graph-paper background come
   from there; blog.css is loaded too but only .blog-* rules live in it, so it
   does not touch anything here. Everything is namespaced .guide-* so the two
   pages can share one file without colliding with the site's own h1/table/button
   rules.

   Rhythm: light (graph paper) → tinted → light → DARK (the widget) → light →
   tinted → CORAL (closing CTA). The dark and coral bands carry the weight that
   stops the page reading as one long scroll of prose. */

:root {
    --guide-ink:     #24272b;
    --guide-text:    #2f333a;
    --guide-muted:   #4b5563;
    --guide-soft:    #6b7280;
    --guide-rule:    #e7e9ee;
    --guide-accent:  #FF7A44;
    --guide-link:    #c2531f;
    --guide-flag:    #d32f2f;   /* "check this line" — the app's error red */
    --guide-good:    #4CAF50;   /* "this holds up"  — the site's checkmark green */
    --guide-card:    rgba(255, 255, 255, 0.92);
    --guide-measure: 62ch;

    /* Dark band: the questionnaire's near-black (#1A1A1A is its selected-button
       colour), so the widget reads as continuous with what comes one tap later.
       Neutral rather than warm so white type and hairlines stay crisp. */
    --guide-dark:        #1a1a1a;
    --guide-dark-2:      #26272c;
    --guide-dark-rule:   #44474f;
    --guide-dark-text:   #f4f4f6;
    --guide-dark-muted:  #c3c6cd;
    --guide-dark-soft:   #8e939c;
    --guide-dark-flag:   #ff6b6b;   /* the red, lifted for contrast on dark */
    --guide-dark-good:   #86d9a3;   /* the green, likewise */
}

.guide-body { color: var(--guide-text); }

/* The reading column. Everything text-led shares this left edge, including the hero. */
.guide-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }

.guide-band { padding: 52px 0; }
.guide-band--tint {
    background: #fff9f5;
    background-image:
        linear-gradient(rgba(255, 122, 68, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 122, 68, 0.06) 1px, transparent 1px);
    background-size: 20px 20px;
    border-top: 1px solid var(--guide-rule);
    border-bottom: 1px solid var(--guide-rule);
}

/* ---------- type ---------- */

.guide-body h1 {
    font-size: clamp(2.1rem, 4.6vw, 3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.022em;
    color: var(--guide-ink);
    margin: 0 0 20px;
    text-wrap: balance;
}

.guide-body h2 {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--guide-ink);
    margin: 0 0 18px;
    max-width: 26ch;
}

.guide-body h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--guide-ink);
    margin: 0 0 10px;
}

.guide-body p {
    font-size: 1.12rem;
    line-height: 1.75;
    max-width: var(--guide-measure);
    margin: 0 0 20px;
}
.guide-body p:last-child { margin-bottom: 0; }

.guide-body strong { color: var(--guide-ink); font-weight: 700; }

/* Scoped to running text so the site header/footer keep their own link styles */
.guide-body p a,
.guide-body li a,
.guide-body td a {
    color: var(--guide-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.guide-body p a:hover,
.guide-body li a:hover,
.guide-body td a:hover { color: var(--guide-accent); }
.guide-body a:focus-visible,
.guide-body button:focus-visible { outline: 2px solid var(--guide-accent); outline-offset: 3px; }

.guide-standfirst {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--guide-muted);
    margin: 0;
}

.guide-pull {
    margin: 26px 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--guide-accent);
    color: var(--guide-muted);
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.45;
    max-width: 38ch;
}

.guide-tell {
    background: rgba(255, 122, 68, 0.06);
    border-left: 3px solid var(--guide-accent);
    border-radius: 0 10px 10px 0;
    padding: 14px 20px;
    font-size: 1.05rem;
    margin: 0 0 6px;
}
.guide-tell b { font-weight: 700; color: var(--guide-ink); }

/* Buttons: the site's gradient pill */
.guide-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #FF7A44, #e66a3a);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 15px 30px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(255, 122, 68, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.guide-btn::after { content: "→"; font-weight: 400; }
.guide-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(255, 122, 68, 0.36);
}
.guide-btn:active { transform: scale(0.97); opacity: 0.9; }

/* ---------- hero ---------- */

.guide-hero { padding: 52px 0 56px; border-bottom: 1px solid var(--guide-rule); }
/* Text column starts on the reading column's left edge (50% − 356px is where a
   centred 712px column begins); the paper takes the space to its right. */
.guide-hero .grid {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 400px);
    gap: 56px;
    align-items: center;
    padding-left: max(24px, calc(50% - 356px));
    padding-right: 24px;
}

/* The worked-solution "sheet": magic paper with one line circled in red pen */
.guide-sheet {
    background: #fff;
    border: 1px solid var(--guide-rule);
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
    padding: 28px 26px 22px;
    position: relative;
    overflow: hidden;
}
.guide-sheet::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(229, 231, 235, 0.7) 1px, transparent 1px),
        linear-gradient(90deg, rgba(229, 231, 235, 0.7) 1px, transparent 1px);
    background-size: 20px 20px;
}
.guide-sheet .l {
    position: relative;
    z-index: 1;
    /* min-height rather than height, and wrapping, so a long line drops its
       annotation onto a second row instead of pushing it under the sheet's
       `overflow: hidden`. The sheet column is capped at 400px and the longest
       line here -- precalculus' (2 sin x - 1)(sin x + 1) = 0 -- needs more than
       that with a note beside it, so the note was being clipped mid-word.
       Wrapping is the fix rather than a narrower gap or a smaller font because
       it needs no guess about how wide the text actually measures: it stays
       inline wherever it fits, and moves down only where it doesn't. */
    min-height: 42px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Clears the circling ellipse, which is absolutely positioned and reaches
       10px below the expression it rings -- a smaller gap puts a wrapped note
       under the stroke. Only a row that actually wraps pays this. */
    row-gap: 14px;
}
.guide-sheet .n {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px;
    color: #a8aeb8;
    flex: none;
    width: 26px;
}
.guide-sheet .expr {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 17px;
    letter-spacing: 0.02em;
    color: var(--guide-ink);
    position: relative;
    white-space: nowrap;
}
.guide-sheet .circled { color: var(--guide-flag); }
.guide-sheet .circled::after {
    content: "";
    position: absolute;
    left: -15px; right: -15px; top: -10px; bottom: -10px;
    border: 2px solid var(--guide-flag);
    border-radius: 52% 48% 50% 50% / 50% 52% 48% 50%;
    transform: rotate(-1.6deg);
    opacity: 0.9;
    pointer-events: none;
}
.guide-sheet .note {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--guide-flag);
    white-space: nowrap;
    margin-left: 26px;
    transform: rotate(-2.5deg);
    position: relative;
}
/* The leader is an inline em dash rather than an absolutely-positioned 16px
   rule. Absolute positioning was anchored to the note's left edge, so once the
   note wrapped to its own row the dash would have been left hanging in the line
   gutter; inline, it travels with the text and reads the same either way. */
.guide-sheet .note::before {
    content: "\2014";
    margin-right: 7px;
    opacity: 0.65;
}
.guide-sheet .origin {
    position: relative;
    z-index: 1;
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--guide-rule);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--guide-soft);
    font-style: italic;
    background: #fff;
}

/* Inline fractions used in the sheet and widgets */
.frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    position: relative;
    top: -0.06em;
    line-height: 1.04;
    font-size: 0.74em;
    margin: 0 0.12em;
}
.frac b { font-weight: inherit; padding: 0 0.32em; border-bottom: 1.5px solid currentColor; }
.frac i { font-style: normal; padding: 0 0.32em; }
.guide-body sup { font-size: 0.68em; vertical-align: 0.5em; line-height: 0; }

/* ---------- numbered blocks (reasons / moves) ---------- */

.guide-item { border-top: 1px solid var(--guide-rule); padding: 34px 0 6px; }
.guide-item:first-of-type { border-top: 0; padding-top: 0; }
.guide-item .head { display: flex; gap: 18px; align-items: flex-start; margin: 0 0 12px; }
.guide-item .glyph {
    flex: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #FF7A44, #e66a3a);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 6px 14px rgba(255, 122, 68, 0.25);
}
.guide-item h3 { margin: 7px 0 0; }

.guide-list { max-width: var(--guide-measure); padding: 0; list-style: none; margin: 0 0 22px; }
.guide-list li {
    display: flex;
    gap: 13px;
    margin: 0 0 14px;
    font-size: 1.08rem;
    line-height: 1.6;
}
.guide-list li .b {
    flex: none;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--guide-accent);
    margin-top: 12px;
}

/* ---------- eyebrows: what a section is for, before the h2 makes its claim ---------- */

.guide-eyebrow {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--guide-accent);
    margin: 0 0 10px;
}
.guide-cta .guide-eyebrow { color: rgba(255, 255, 255, 0.78); }

/* ---------- summary cards: the scannable version a reader can stop at ---------- */

.guide-cards { display: grid; gap: 14px; margin: 24px 0 30px; }
.guide-cards--2 { grid-template-columns: repeat(2, 1fr); }
.guide-cards--3 { grid-template-columns: repeat(3, 1fr); }
.guide-card {
    background: var(--guide-card);
    border: 1px solid var(--guide-rule);
    border-radius: 14px;
    padding: 18px 18px 16px;
}
.guide-card .n {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--guide-accent);
    margin: 0 0 8px;
}
.guide-card h4 { font-size: 1.08rem; font-weight: 700; line-height: 1.3; color: var(--guide-ink); margin: 0 0 8px; }
.guide-card .said-sm { font-style: italic; color: var(--guide-muted); font-size: 0.98rem; line-height: 1.4; margin: 0 0 8px; }
.guide-card p { font-size: 0.98rem; line-height: 1.5; color: var(--guide-muted); margin: 0; max-width: none; }
.guide-card p b { color: var(--guide-ink); font-weight: 700; }
/* Inside the product section's narrow text column, three cards stack */
.guide-product .guide-cards { margin-bottom: 0; }
.guide-product .guide-cards--3 { grid-template-columns: 1fr; }

/* ---------- related guides ---------- */

.guide-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0 0; }
.guide-related a {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--guide-card);
    border: 1px solid var(--guide-rule);
    border-radius: 16px;
    padding: 22px 20px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.guide-related a:hover {
    transform: translateY(-2px);
    border-color: var(--guide-accent);
    box-shadow: 0 12px 30px rgba(255, 122, 68, 0.12);
}
.guide-related h3 { font-size: 1.1rem; line-height: 1.3; margin: 0 0 8px; }
.guide-related p { font-size: 0.98rem; line-height: 1.5; color: var(--guide-muted); margin: 0; max-width: none; }
.guide-related .go { display: block; margin-top: 14px; font-size: 0.92rem; font-weight: 600; color: var(--guide-link); }
.guide-related a:hover .go { color: var(--guide-accent); }

/* ---------- prerequisite chain diagram ---------- */

.guide-chain { margin: 30px 0 10px; overflow-x: auto; }
.guide-chain svg { display: block; min-width: 600px; width: 100%; height: auto; }
.guide-chain-cap {
    font-size: 1rem;
    color: var(--guide-soft);
    font-style: italic;
}

/* ---------- DARK BAND: the interactive widget ---------- */

.guide-dark {
    scroll-margin-top: 80px;   /* the site header is sticky */
    background: var(--guide-dark);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 20px 20px;
    color: var(--guide-dark-text);
    padding: 64px 0 68px;
}
.guide-dark h2 { color: #fff; max-width: none; }
.guide-dark h3 { color: #fff; }
.guide-dark .lede { color: var(--guide-dark-muted); margin-bottom: 34px; }
.guide-dark strong { color: #fff; }
.guide-dark p a { color: #fff; }

/* One question of the self-check */
.guide-q { max-width: 620px; margin: 0 0 32px; padding: 0 0 30px; border-bottom: 1px solid var(--guide-dark-rule); }
.guide-q:last-of-type { border-bottom: 0; padding-bottom: 6px; }
.guide-q .qrow { display: flex; gap: 14px; align-items: baseline; margin: 0 0 16px; }
.guide-q .qnum {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--guide-accent);
    flex: none;
    width: 2ch;
}
.guide-q .qt { font-size: 1.2rem; line-height: 1.35; font-weight: 700; color: #fff; margin: 0; }
.guide-q .opts { list-style: none; margin: 0; padding: 0 0 0 calc(2ch + 14px); display: grid; gap: 8px; }

/* Option buttons mirror the questionnaire's answer cards (rounded, hairline;
   selected = solid fill), inverted for the dark band. */
.guide-opt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: 1.02rem;
    line-height: 1.45;
    color: var(--guide-dark-text);
    background: transparent;
    border: 1.5px solid var(--guide-dark-rule);
    border-radius: 0.75rem;
    padding: 12px 16px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.guide-opt .dot {
    flex: none;
    width: 17px; height: 17px;
    border-radius: 50%;
    border: 1.5px solid var(--guide-dark-soft);
    margin-top: 3px;
    position: relative;
}
.guide-opt:hover { border-color: var(--guide-accent); background: var(--guide-dark-2); }
.guide-opt[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--guide-ink); }
.guide-opt[aria-pressed="true"] .dot { border-color: var(--guide-accent); }
.guide-opt[aria-pressed="true"] .dot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--guide-accent);
}

.guide-hint { font-size: 0.95rem; color: var(--guide-dark-soft); margin: 18px 0 0; }

/* Result panel */
.guide-result {
    margin: 16px 0 0;
    padding: 28px 30px;
    background: var(--guide-dark-2);
    border-left: 4px solid var(--guide-accent);
    border-radius: 0 14px 14px 0;
    max-width: 640px;
    display: none;
}
.guide-result.on { display: block; }
.guide-result h3 { margin: 0 0 12px; }
.guide-result p { max-width: none; margin: 0 0 14px; font-size: 1.06rem; line-height: 1.65; color: var(--guide-dark-text); }
.guide-result .igni {
    border-top: 1px solid var(--guide-dark-rule);
    padding-top: 16px;
    margin-top: 6px;
    color: var(--guide-dark-muted);
    font-size: 1.02rem;
}
.guide-result .igni b { color: #fff; }
.guide-result .rcta { margin-top: 8px; }
.guide-result .rnote { font-size: 0.95rem; color: var(--guide-dark-soft); margin: 14px 0 0; }

/* Course explorer */
.guide-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }
.guide-pick {
    font: inherit;
    font-size: 0.98rem;
    color: var(--guide-dark-text);
    background: transparent;
    border: 1.5px solid var(--guide-dark-rule);
    border-radius: 999px;
    padding: 9px 16px;
    cursor: pointer;
    line-height: 1.3;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.guide-pick:hover { border-color: var(--guide-accent); }
.guide-pick[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--guide-ink); font-weight: 600; }

.guide-chainbox { margin: 0 0 24px; overflow-x: auto; padding-bottom: 6px; }
.guide-chainrow { display: flex; align-items: stretch; min-width: 560px; }
.guide-node {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 104px;
    padding: 14px 14px;
    background: var(--guide-dark-2);
    border: 1.5px solid var(--guide-dark-rule);
    border-radius: 0.75rem;
    color: var(--guide-dark-text);
    font: inherit;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.guide-node:hover { border-color: var(--guide-accent); }
.guide-node .yr { display: block; font-size: 0.8rem; font-weight: 400; color: var(--guide-dark-soft); margin-top: 4px; }
.guide-node .state { display: block; font-size: 0.8rem; font-weight: 500; color: var(--guide-accent); margin-top: auto; padding-top: 10px; }
.guide-node[aria-expanded="true"] { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18); }
.guide-node.shaky { border-color: var(--guide-dark-flag); background: rgba(255, 107, 107, 0.12); }
.guide-node.shaky .state { color: var(--guide-dark-flag); }
.guide-node.solid { border-color: var(--guide-dark-good); background: rgba(134, 217, 163, 0.12); }
.guide-node.solid .state { color: var(--guide-dark-good); }
.guide-node.now {
    border-style: dashed;
    border-color: var(--guide-dark-rule);
    background: transparent;
    cursor: default;
    color: var(--guide-dark-muted);
}
.guide-node.now:hover { border-color: var(--guide-dark-rule); }
.guide-arrow { flex: none; width: 26px; display: grid; place-items: center; color: var(--guide-dark-soft); font-size: 15px; }

.guide-testpanel {
    background: var(--guide-dark-2);
    border-left: 4px solid #fff;
    border-radius: 0 14px 14px 0;
    padding: 24px 28px;
    margin: 0 0 24px;
    max-width: 660px;
    display: none;
}
.guide-testpanel.on { display: block; }
.guide-testpanel h3 { margin: 0 0 6px; }
.guide-testpanel .what { color: var(--guide-dark-muted); font-size: 1.02rem; margin: 0 0 16px; max-width: none; }
.guide-testpanel .prob {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    font-size: 1.15rem;
    line-height: 2.1;
    color: #fff;
    background: var(--guide-dark);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    border-radius: 12px;
    padding: 16px 20px;
    margin: 0 0 12px;
    max-width: none;
    overflow-x: auto;
}
.guide-testpanel .ask { font-size: 1.02rem; line-height: 1.9; color: var(--guide-dark-muted); margin: 0 0 14px; max-width: none; }
.guide-reveal {
    background: none;
    border: 0;
    color: var(--guide-dark-muted);
    font: inherit;
    font-size: 0.98rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    padding: 0;
    margin: 0 0 16px;
}
.guide-reveal:hover { color: #fff; }
.guide-ans {
    display: none;
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--guide-dark-good);
    background: rgba(134, 217, 163, 0.1);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 18px;
    max-width: none;
}
.guide-ans.on { display: block; }
.guide-verdict { display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--guide-dark-rule); padding-top: 18px; }
.guide-vb {
    font: inherit;
    font-size: 0.98rem;
    background: transparent;
    border: 1.5px solid var(--guide-dark-rule);
    border-radius: 999px;
    color: var(--guide-dark-text);
    padding: 9px 18px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.guide-vb:hover { border-color: var(--guide-accent); }
.guide-vb.solid[aria-pressed="true"] { background: rgba(134, 217, 163, 0.16); border-color: var(--guide-dark-good); color: var(--guide-dark-good); }
.guide-vb.shaky[aria-pressed="true"] { background: rgba(255, 107, 107, 0.16); border-color: var(--guide-dark-flag); color: var(--guide-dark-flag); }

.guide-finding {
    padding: 24px 28px;
    background: var(--guide-dark-2);
    border-left: 4px solid var(--guide-dark-rule);
    border-radius: 0 14px 14px 0;
    max-width: 660px;
}
.guide-finding.done { border-left-color: var(--guide-dark-flag); }
.guide-finding.clear { border-left-color: var(--guide-dark-good); }
.guide-finding h3 { margin: 0 0 10px; }
.guide-finding p { margin: 0 0 14px; max-width: none; font-size: 1.06rem; line-height: 1.65; color: var(--guide-dark-text); }
.guide-finding p:last-child { margin-bottom: 0; }
.guide-finding .rcta { margin-top: 4px; }
.guide-finding .rnote { font-size: 0.95rem; color: var(--guide-dark-soft); margin: 14px 0 0; }

/* ---------- product section ---------- */

.guide-product .grid {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 400px);
    gap: 56px;
    align-items: center;
    padding-left: max(24px, calc(50% - 356px));
    padding-right: 24px;
}

.guide-check {
    background: #fff;
    border: 1px solid var(--guide-rule);
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
    padding: 24px 24px 22px;
    position: relative;
    overflow: hidden;
}
.guide-check::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(229, 231, 235, 0.55) 1px, transparent 1px),
        linear-gradient(90deg, rgba(229, 231, 235, 0.55) 1px, transparent 1px);
    background-size: 20px 20px;
}
.guide-check > * { position: relative; z-index: 1; }
.guide-check .step {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 16px;
    color: var(--guide-ink);
    padding: 12px 0;
    border-bottom: 1px solid var(--guide-rule);
}
.guide-check .step:last-of-type { border-bottom: 0; }
.guide-check .badge {
    flex: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.guide-check .ok { background: rgba(76, 175, 80, 0.14); color: #2e7d32; }
.guide-check .no { background: rgba(211, 47, 47, 0.10); color: var(--guide-flag); }
.guide-check .cap {
    margin: 18px 0 0;
    font-size: 0.95rem;
    color: var(--guide-soft);
    font-style: italic;
    line-height: 1.55;
    max-width: none;
    background: #fff;
    border-top: 1px solid var(--guide-rule);
    padding-top: 14px;
}

/* ---------- triage table ---------- */

.guide-table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0 8px;
    font-size: 1.02rem;
    max-width: var(--guide-measure);
    background: var(--guide-card);
    border: 1px solid var(--guide-rule);
    border-radius: 14px;
    overflow: hidden;
}
.guide-table th {
    text-align: left;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--guide-soft);
    padding: 14px 16px;
    border-bottom: 1px solid var(--guide-rule);
    background: rgba(255, 122, 68, 0.06);
}
.guide-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--guide-rule);
    vertical-align: top;
    line-height: 1.55;
}
.guide-table tr:last-child td { border-bottom: 0; }
.guide-table td:first-child { font-weight: 600; color: var(--guide-ink); width: 42%; }

/* ---------- FAQ ---------- */

.guide-qa { border-top: 1px solid var(--guide-rule); padding: 30px 0 4px; }
.guide-qa:first-of-type { border-top: 0; padding-top: 0; }

/* ---------- CORAL BAND: closing CTA ---------- */

.guide-cta {
    background: linear-gradient(135deg, #FF7A44, #e66a3a);
    color: #fff;
    padding: 60px 0 64px;
}
.guide-cta h2 { color: #fff; margin: 0 0 14px; }
.guide-cta p { color: rgba(255, 255, 255, 0.88); max-width: 54ch; }
/* The trial is the strongest friction-reducer on the page: it sits directly
   above the button, in white, at body size — not in grey fine print. */
.guide-cta .trial {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 14px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}
.guide-cta .trial::before {
    content: "";
    flex: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e66a3a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/14px no-repeat;
}
.guide-cta .guide-btn {
    background: #fff;
    color: var(--guide-link) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}
.guide-cta .guide-btn:hover { background: #fff9f5; }

/* Header CTA: keep the label on one line while it swaps between texts. On phones
   the long label overflows the header, so a short one takes over, and "Sign in"
   is dropped — a reader arriving from search has no account to sign in to, and
   the header needs the room for the one button that matters here. */
#guide-nav-cta { white-space: nowrap; }
#guide-nav-cta .lbl-short { display: none; }
@media (max-width: 620px) {
    #guide-nav-cta .lbl-full { display: none; }
    #guide-nav-cta .lbl-short { display: inline; }
    .guide-body .auth-buttons a[href="/sign_in"] { display: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
    .guide-hero .grid,
    .guide-product .grid { grid-template-columns: 1fr; gap: 36px; padding: 0 24px; max-width: 760px; margin: 0 auto; }
    /* With the product section single-column there is room for cards side by side again */
    .guide-product .guide-cards--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
    .guide-cards--2, .guide-cards--3, .guide-product .guide-cards--3 { grid-template-columns: 1fr; }
    .guide-related { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .guide-band { padding: 44px 0; }
    .guide-hero { padding: 36px 0 44px; }
    .guide-hero .grid,
    .guide-product .grid { padding: 0 18px; }
    .guide-dark { padding: 48px 0 52px; }
    .guide-cta { padding: 48px 0 52px; }
    .guide-body p { font-size: 1.06rem; }
    .guide-pull { font-size: 1.15rem; }
    .guide-sheet { padding: 22px 18px; }
    /* The expression is `white-space: nowrap`, so on a narrow phone the longest
       line here -- precalculus' (2 sin x - 1)(sin x + 1) = 0, 28 characters --
       is wider than the sheet and gets cut off by its `overflow: hidden`.
       Measured: 43px over on a 320px phone, 30px over on a 360px one, fine from
       ~390px up. Scaling with the viewport across that range fixes all of them
       and leaves tablets (where the sheet is full width) at the 15px ceiling. */
    .guide-sheet .expr { font-size: clamp(11.5px, 3.4vw, 15px); }
    /* margin-left was 30px here, which became LARGER than the 26px base when the
       leader dash moved inline. */
    .guide-sheet .note { font-size: 11px; margin-left: 20px; }
    .guide-q .opts { padding-left: 0; }
    .guide-q .qt { font-size: 1.08rem; }
    .guide-result, .guide-testpanel, .guide-finding { padding: 20px 18px; }
    .guide-table td:first-child { width: 48%; }
    .guide-wrap { padding: 0 18px; }
    .guide-cta .trial { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
    .guide-body * { transition: none !important; }
}


/* ---------- static twins of the widgets (#four-results, #prerequisites) ----------

   The widgets build themselves in JS on click, so their copy reached neither
   Google (which renders JS but does not click) nor the AI crawlers (which run
   no JS at all). These sections carry the same strings, rendered server-side
   from src/utils_guides.py, on a light band rather than the dark widget one.
   Always visible on purpose — collapsing them behind a <details> would put the
   text back behind an interaction, which is the problem being fixed. */

.guide-ref .prob {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    font-size: 1.1rem;
    line-height: 2;
    color: var(--guide-ink);
    background: var(--guide-card);
    background-image:
        linear-gradient(rgba(36, 39, 43, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(36, 39, 43, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    border: 1px solid var(--guide-rule);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 0 0 12px;
    max-width: none;
    overflow-x: auto;
}
.guide-ref .ask { color: var(--guide-muted); margin: 0 0 12px; }

/* The self-check's answer options, listed statically. Plain discs rather than
   the .guide-list flex rows, which are built for an icon beside each item. */
.guide-ref .opts-static { margin: 0; padding-left: 1.2em; max-width: var(--guide-measure); }
.guide-ref .opts-static li {
    color: var(--guide-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 7px;
}
.guide-ref .ans {
    border-left: 3px solid var(--guide-good);
    background: rgba(76, 175, 80, 0.07);
    border-radius: 0 10px 10px 0;
    padding: 12px 16px;
    margin: 0;
}

@media (max-width: 768px) {
    .guide-ref .prob { font-size: 1rem; padding: 12px 14px; }
}

/* ---------- /is-precalculus-hard ----------

   The four checks reuse .guide-ref, plus a hand-off button to the app and a
   collapsed answer. The answer sits in <details> because trying the problem
   first is the point -- and unlike a JS-built widget, <details> content ships in
   the initial HTML, so crawlers still read it. */

.guide-btn--sm { padding: 11px 20px; font-size: 1rem; }

.try-igni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 0 0 16px;
    max-width: none;
}
.try-igni .hint { font-size: 0.95rem; line-height: 1.45; color: var(--guide-soft); }

.guide-details { border-top: 1px dashed var(--guide-rule); padding-top: 12px; }
.guide-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--guide-link);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.guide-details summary::-webkit-details-marker { display: none; }
.guide-details summary::before {
    content: "+";
    display: inline-grid;
    place-items: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(255, 122, 68, 0.14);
    font-weight: 700;
    line-height: 1;
}
.guide-details[open] summary::before { content: "\2212"; }
.guide-details .ans { margin: 12px 0 0; }

.nowrap { white-space: nowrap; }

/* The "if you got X, this is your step" line under an answer. Muted, because it
   is a diagnosis of a wrong answer rather than part of the right one. */
.guide-details .ans-wrong {
    margin: 10px 0 0;
    color: var(--guide-soft);
    font-size: 0.98rem;
    line-height: 1.6;
}

/* A prompt above a .guide-check block ("Is this the same as that? Try x = 2."). */
.guide-check .task {
    margin: 0 0 14px;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--guide-muted);
    max-width: none;
}

/* "Reading this for your child?" under the closing CTA on the course pages. */
.guide-cta-aside {
    margin: 22px auto 0;
    font-size: 1rem;
    line-height: 1.6;
}

/* Links inside the coral closing band.
   The running-text rule near the top of this file paints every <p> link
   --guide-link (#c2531f), which measures 1.44:1 against this band's background --
   unreadable -- and hovers it --guide-accent, which IS the background. Both have
   to be overridden here, at a specificity that beats `.guide-body p a`.
   .guide-btn is untouched: it is not inside a <p> and carries its own
   !important colour. */
.guide-body .guide-cta p a {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.55);
    text-decoration-thickness: 1px;
}
.guide-body .guide-cta p a:hover {
    color: #fff;
    text-decoration-color: #fff;
}

/* log<sub>2</sub> and friends. guides.css styled sup but never sub, because no
   page needed one until the Algebra 2 logarithm example. */
.guide-body sub { font-size: 0.68em; vertical-align: -0.25em; line-height: 0; }

/* Headings the on-this-page nav jumps to. The site header is sticky, so without
   this the target lands underneath it -- same 80px as .guide-dark. */
.guide-body h2[id], .guide-body section[id] { scroll-margin-top: 80px; }

/* ---------- on-this-page nav (templates/_guide_toc.html) ---------- */

.guide-toc {
    max-width: var(--guide-measure);
    margin: 0 auto;
    padding: 18px 22px;
    background: var(--guide-card);
    border: 1px solid var(--guide-rule);
    border-radius: 16px;
}
.guide-toc-label {
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--guide-soft);
    max-width: none;
}
.guide-toc ol { margin: 0; padding-left: 20px; }
.guide-toc li { margin: 0 0 5px; font-size: 1rem; line-height: 1.5; }
.guide-toc li:last-child { margin-bottom: 0; }
.guide-toc a { color: var(--guide-link); text-decoration: none; }
.guide-toc a:hover { text-decoration: underline; }

/* The nav sits between the hero and the first band, so it needs its own gutter --
   it is not inside a .guide-wrap. */
.guide-body > .guide-toc,
.guide-body main .guide-toc { margin: 8px auto 36px; }

@media (max-width: 768px) {
    .guide-toc { margin: 4px 16px 28px; padding: 16px 18px; border-radius: 14px; }
    .guide-toc li { font-size: 0.96rem; }
}

@media (max-width: 768px) {
    .try-igni { gap: 8px 12px; }
    .try-igni .hint { font-size: 0.9rem; }
}