/* ═══════════════════════════════════════════════════════════════════════════
   IQ Test — Landing page
   This was 350 lines of CSS inside a <style> tag in the middle of a PHP file:
   not cacheable on its own, not reusable, and carrying a third palette.
   ═══════════════════════════════════════════════════════════════════════════ */

.lp-section { padding: var(--s10) 0; }
.lp-section--alt { background: var(--surface); border-block: 1px solid var(--line); }
.lp-head { max-width: 46ch; margin-bottom: var(--s8); }
.lp-head h2 { font-size: var(--fs-xl); margin: var(--s3) 0 var(--s3); }
.lp-head p  { color: var(--ink-2); }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.lp-hero { padding: var(--s10) 0 var(--s9); }
.lp-hero__grid {
    display: grid; gap: var(--s9);
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
}
.lp-hero h1 {
    font-size: var(--fs-2xl); font-weight: 400;
    margin: var(--s4) 0 var(--s5); max-width: 16ch;
}
.lp-hero h1 em { font-style: italic; color: var(--brand); }
.lp-hero__sub { font-size: var(--fs-md); color: var(--ink-2); max-width: 46ch; }
.lp-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s7); }

.lp-facts {
    display: flex; flex-wrap: wrap; gap: var(--s7);
    margin-top: var(--s8); padding-top: var(--s6);
    border-top: 1px solid var(--line);
}
.lp-fact__n {
    display: block; font-family: var(--font-display); font-size: var(--fs-lg);
    font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
}
.lp-fact__l { font-size: var(--fs-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: var(--track-caps); }

/* Specimen: a real question, not a stock illustration */
.lp-specimen {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--shadow-2);
}
.lp-specimen__fig {
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: var(--s5);
    display: flex; justify-content: center;
}
.lp-specimen__fig svg { max-height: 260px; width: auto; max-width: 100%; }
.lp-specimen__cap {
    display: flex; justify-content: space-between; gap: var(--s4);
    margin-top: var(--s4); font-size: var(--fs-xs); color: var(--ink-3);
}

@media (max-width: 900px) {
    .lp-hero__grid { grid-template-columns: 1fr; gap: var(--s8); }
}

/* ── Three question families: attemptable, not illustrated ─────────────────
   This was three cards, each a fixed 178px figure well above a paragraph. The
   three item kinds are nothing alike in shape, so the wells never read as a
   set: the matrix filled its box, the number series was one line of type
   floating in an empty one, and the analogy sat small and pale in the third.
   Capping the figure at 150px is also why the matrix looked cramped and dark —
   it is drawn for a stage several times that size.

   Under the styling sat a worse problem. The most interesting thing on this
   page is that the items are real, and all a reader could do was look at them.
   The two competitors worth learning from sit at opposite extremes: Riot IQ
   shows no items at all until you have paid, while 123test hands over all ten
   of its question types as fully answerable samples — its single best asset,
   and also most of its page. A rail of families beside one stage takes that
   idea, gives the figure the width it was drawn for, and spends a section on
   it rather than a page. */
/* The rail shares the heading's column (see .lp-split above). Given a column of
   its own it left most of the section empty, which is the exact hole the method
   and FAQ blocks used to have. */
.lp-try__cue {
    margin-top: var(--s7); padding-top: var(--s5);
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm); color: var(--ink-2);
}
.lp-try__nav { display: grid; gap: var(--s1); margin-top: var(--s4); }

.lp-tab {
    display: grid; gap: 2px;
    font: inherit; text-align: left; cursor: pointer;
    padding: var(--s3) var(--s4);
    background: transparent; border: 0;
    border-left: 3px solid var(--line);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.lp-tab__name { font-size: var(--fs-md); color: var(--ink-2); }
.lp-tab__n    { font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lp-tab:hover { background: var(--surface); }
.lp-tab.is-on { background: var(--surface); border-left-color: var(--tab-accent, var(--brand)); }
.lp-tab.is-on .lp-tab__name { color: var(--ink); font-weight: 600; }

/* One hue per family, the same three the rest of the site uses for the three
   ability domains. The stripe is never the only thing marking the open tab —
   ground, weight and aria-selected all move together. */
.lp-tab--matrix  { --tab-accent: var(--d3); }
.lp-tab--series  { --tab-accent: var(--d2); }
.lp-tab--analogy { --tab-accent: var(--d1); }

.lp-try__stage {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: var(--s6);
    box-shadow: var(--shadow-1);
}
.lp-try__blurb {
    color: var(--ink-2); font-size: var(--fs-sm); max-width: 62ch;
    margin-bottom: var(--s5); padding-bottom: var(--s5);
    border-bottom: 1px solid var(--line);
}
.lp-try__stem   { font-size: var(--fs-md); color: var(--ink); max-width: 56ch; }
.lp-try__series {
    font-family: var(--font-mono); font-size: var(--fs-lg); color: var(--ink);
    letter-spacing: .05em; font-variant-numeric: tabular-nums; margin-top: var(--s4);
}
.lp-try__fig {
    display: flex; justify-content: center;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: var(--s5); margin-top: var(--s5);
}
.lp-try__fig svg, .lp-try__fig img { max-height: 300px; width: auto; max-width: 100%; }
.lp-try__none { color: var(--ink-2); font-size: var(--fs-sm); }
.lp-try__note {
    margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line);
    font-size: var(--fs-xs); color: var(--ink-3); max-width: 70ch;
}

/* Options, deliberately the same shape as the real ones in take.css. The whole
   point of the panel is to show what the test looks like, so it must not look
   like something else. take.css is not loaded on this page, which is why these
   are a second set of rules rather than a shared one. */
.lp-opts { display: grid; gap: var(--s3); margin-top: var(--s5); }
.lp-opts--fig { grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); }
.lp-opt {
    display: flex; align-items: center; gap: var(--s4);
    width: 100%; padding: var(--s4); text-align: left; font: inherit;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease);
}
.lp-opt:hover:not(:disabled) { border-color: var(--brand-line); background: var(--surface-2); }
.lp-opt:disabled { cursor: default; }
.lp-opt__key {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: var(--r-pill);
    border: 1px solid var(--line-strong);
    font-family: var(--font-mono); font-size: .72rem; color: var(--ink-2);
}
.lp-opt__text { font-size: var(--fs-md); }
.lp-opt__fig  { flex: 1; display: flex; justify-content: center; align-items: center; min-width: 0; }
.lp-opt__fig svg, .lp-opt__fig img { max-height: 96px; width: auto; max-width: 100%; }
.lp-opts--fig .lp-opt { flex-direction: column; align-items: stretch; gap: var(--s2); padding: var(--s3); }
.lp-opts--fig .lp-opt__key { width: 24px; height: 24px; }

/* Marked. Colour never carries the verdict alone (WCAG 1.4.1): a marked option
   also gains a word, and the line underneath names the option that was right. */
.lp-opt__tag { display: none; font-size: var(--fs-xs); }
.lp-opt.is-correct { border-color: var(--good); background: var(--good-wash); }
.lp-opt.is-correct .lp-opt__key { background: var(--good); color: var(--surface); border-color: var(--good); }
.lp-opt.is-correct .lp-opt__tag { display: block; color: var(--good); }
.lp-opt.is-wrong { border-color: var(--danger); background: var(--danger-wash); }
.lp-opt.is-wrong .lp-opt__key { background: var(--danger); color: var(--surface); border-color: var(--danger); }
.lp-opt.is-wrong .lp-opt__tag { display: block; color: var(--danger); }

/* The rule. A <details> so the section still works with scripting off: the
   options cannot be marked then, but the answer is still one click away. With
   JS the summary becomes the verdict and opens itself. */
.lp-try__rule {
    margin-top: var(--s5); padding: var(--s4) var(--s5);
    background: var(--surface-2);
    border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
    border-radius: 0 var(--r-md) var(--r-md) 0;
}
.lp-try__rule summary {
    cursor: pointer; list-style: none;
    font-weight: 600; font-size: var(--fs-sm); color: var(--ink);
}
.lp-try__rule summary::-webkit-details-marker { display: none; }
.lp-try__rule p { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--ink-2); max-width: 62ch; }
.lp-try__rule.is-right { border-left-color: var(--good); }
.lp-try__rule.is-right summary { color: var(--good); }
.lp-try__rule.is-wrong { border-left-color: var(--danger); }
.lp-try__rule.is-wrong summary { color: var(--danger); }

@media (max-width: 900px) {
    /* The rail becomes a scrolling row. Three stacked tabs above the stage
       would push the item itself off the bottom of a phone screen. */
    .lp-try__nav {
        grid-auto-flow: column; grid-auto-columns: minmax(148px, 1fr);
        /* overflow-x here is what keeps the rail from widening the page: it
           resolves the grid item's min-width:auto to 0. Measured at 320-414px. */
        overflow-x: auto; gap: var(--s2); scrollbar-width: thin;
    }
    .lp-tab {
        border-left: 0; border-bottom: 3px solid var(--line);
        border-radius: var(--r-sm) var(--r-sm) 0 0;
    }
    .lp-tab.is-on { border-bottom-color: var(--tab-accent, var(--brand)); }
    .lp-try__stage { padding: var(--s5); }
    .lp-try__fig svg, .lp-try__fig img { max-height: 220px; }
}

/* ── Explanatory sections: heading left, content right ─────────────────────
   The method and FAQ blocks were a single column of text inside a 1120px wrap,
   so on a desktop they left half the section empty and read as a broken layout
   rather than as a deliberately narrow measure. Moving the heading into its own
   column fills that space with something worth reading and lets the content use
   the width it was given.

   The heading is not sticky. Making it stick would need an extra wrapper: the
   heading IS the grid item here, so it is its own containing block and
   position: sticky has no room to travel — measured, it just scrolls away.
   Not worth new markup for a decorative effect on a section this short. */
.lp-split {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: var(--s9);
    align-items: start;
}
.lp-split > .lp-head { max-width: none; margin-bottom: 0; }
@media (max-width: 900px) {
    /* minmax(0, 1fr), not 1fr: a plain 1fr track keeps min-width:auto, and the
       scrolling tab rail inside .lp-head then widens the whole page instead of
       scrolling in its own box. Measured with the rail removed and restored:
       86px of horizontal overflow at 390px, 116px at 360px. */
    .lp-split { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
    .lp-split > .lp-head { position: static; margin-bottom: var(--s2); }
}

/* ── How scoring works ─────────────────────────────────────────────────── */
.lp-steps { display: grid; gap: 0; }
.lp-step {
    display: grid; grid-template-columns: 44px 1fr; gap: var(--s5);
    padding: var(--s6) 0; border-top: 1px solid var(--line);
}
.lp-step:last-child { border-bottom: 1px solid var(--line); }
.lp-step__k {
    font-family: var(--font-mono); font-size: var(--fs-xs);
    color: var(--ink-3); padding-top: 4px;
}
.lp-step h3 { font-size: var(--fs-md); margin-bottom: var(--s2); }
.lp-step p  { color: var(--ink-2); max-width: 62ch; font-size: var(--fs-sm); }

/* ── The curve ─────────────────────────────────────────────────────────── */
.lp-curve { margin-top: var(--s7); }
.lp-curve canvas { width: 100%; height: 200px; }
.lp-bands {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px; background: var(--line);
    border: 1px solid var(--line); border-radius: var(--r-md);
    overflow: hidden; margin-top: var(--s6);
}
.lp-band { background: var(--surface); padding: var(--s4); }
.lp-band__n { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.lp-band__l { font-size: var(--fs-sm); color: var(--ink-2); }
.lp-band__p { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--s1); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.lp-faqs { display: grid; gap: var(--s2); }
.lp-faq {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.lp-faq summary {
    padding: var(--s4) var(--s5); cursor: pointer; list-style: none;
    font-weight: 600; font-size: var(--fs-sm); color: var(--ink);
    display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
    content: "+"; font-family: var(--font-mono); color: var(--ink-3); flex-shrink: 0;
}
.lp-faq[open] summary::after { content: "\2212"; }
.lp-faq__a { padding: 0 var(--s5) var(--s5); color: var(--ink-2); font-size: var(--fs-sm); max-width: 62ch; }

/* ── Closing call to action ────────────────────────────────────────────── */
.lp-final {
    background: var(--band); color: var(--band-ink);
    padding: var(--s10) 0; text-align: center;
}
.lp-final h2 { font-size: var(--fs-xl); color: var(--band-ink); margin-bottom: var(--s4); }
.lp-final p  { color: var(--band-ink-2); max-width: 46ch; margin-inline: auto; }
.lp-final .btn--primary {
    background: var(--band-btn); color: var(--band-btn-ink); margin-top: var(--s7);
}
.lp-final .btn--primary:hover:not(:disabled) {
    background: var(--band-ink); color: var(--band-btn-ink);
}
.lp-final__note { font-size: var(--fs-xs); margin-top: var(--s5); color: var(--band-ink-2); }