/* ============================================================================
   selectiveentry.css — styles for /selectiveentry.html (platform resources for
   Selective Entry preparation). Base typography, buttons and the xl-* layout
   primitives come from style.css + home_v5.css; everything page-specific lives
   here under the `sep-` prefix.
   ========================================================================== */

/* ---------- Hero ---------- */
.sep-hero {
    background: linear-gradient(135deg, #312e81 0%, #4f46e5 55%, #7c3aed 100%);
    color: #fff;
    padding: 76px 0 68px;
    text-align: center;
}
.sep-hero__badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
}
.sep-hero h1 {
    font-size: clamp(30px, 4.5vw, 46px);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 auto 18px;
}
.sep-hero__sub {
    font-size: 19px;
    line-height: 1.6;
    color: #ddd6fe;
    max-width: 640px;
    margin: 0 auto 28px;
}
.sep-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}
/* On-dark button variants.
   Not scoped to .sep-hero: the same pair is reused in the closing .sep-band,
   where a .sep-hero-scoped rule never matched and the buttons fell back to a
   bare .xl-btn with no background. These names only exist on this page.
   The `a.` duplicate is required, not decorative: home_v5.css neutralises every
   anchor with `.xl a { color: inherit }` (0,1,1), which outranks a plain class
   (0,1,0) and would paint this button's label white on its white face. Matching
   that specificity and loading later is how home_v5.css re-asserts its own
   button colours, so these follow the same pattern. */
.xl-btn--onhero, a.xl-btn--onhero {
    background: #fff;
    color: #312e81;
}
.xl-btn--onhero:hover, a.xl-btn--onhero:hover { background: #ede9fe; color: #312e81; }
.xl-btn--heroghost, a.xl-btn--heroghost {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
}
.xl-btn--heroghost:hover, a.xl-btn--heroghost:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* ---------- Section coverage cards ---------- */
.sep-sections {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
.sep-sectioncard {
    background: var(--card, #fff);
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
}
.sep-sectioncard__ic { font-size: 28px; margin-bottom: 10px; }
.sep-sectioncard h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.sep-sectioncard p { font-size: 15px; line-height: 1.5; color: var(--muted, #6b7280); margin: 0; }

/* ---------- Demonstration panel ---------- */
.sep-demo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}
.sep-democard {
    background: var(--card, #fff);
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.sep-democard__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: #f8fafc;
    border-bottom: 1px solid var(--line, #e5e7eb);
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
}
.sep-democard__stamp { color: #059669; white-space: nowrap; }
.sep-democard__body { padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; }

.sep-rank {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.sep-rank__label { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #9ca3af; }
.sep-rank__val { font-size: 28px; font-weight: 800; color: #4f46e5; }

.sep-bar { margin-top: 2px; }
.sep-bar__top { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 6px; }
.sep-bar__name { color: #374151; font-weight: 500; }
.sep-bar__val { font-weight: 700; color: #111827; }
.sep-bar__track { height: 8px; border-radius: 99px; background: #f3f4f6; overflow: hidden; }
.sep-bar__fill { display: block; height: 100%; border-radius: 99px; background: #4f46e5; }
.sep-bar__fill--a { width: 84%; }
.sep-bar__fill--b { width: 71%; background: #7c3aed; }
.sep-bar__fill--c { width: 62%; background: #f59e0b; }

.sep-rubric__score {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.sep-rubric__num { font-size: 36px; font-weight: 800; color: #059669; line-height: 1; }
.sep-rubric__max { font-size: 17px; font-weight: 600; color: #9ca3af; }
.sep-rubric__tag {
    align-self: flex-start;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #6d28d9;
    background: #ede9fe;
    border-radius: 999px;
    padding: 4px 10px;
}
.sep-note {
    border-left: 3px solid #4f46e5;
    background: #f5f6ff;
    border-radius: 0 10px 10px 0;
    padding: 12px 14px;
    font-size: 15.5px;
    line-height: 1.55;
    color: #4b5563;
    margin: 0;
}
.sep-note--good { border-left-color: #059669; background: #f0fdf4; }
.sep-note strong { color: #111827; }

/* ---------- Preparation journey ---------- */
.sep-journey {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    counter-reset: sepstep;
}
.sep-journey__step {
    position: relative;
    background: var(--card, #fff);
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 14px;
    padding: 22px 18px 20px;
}
.sep-journey__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #4f46e5;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
}
.sep-journey__step h3 { font-size: 17.5px; font-weight: 700; margin-bottom: 6px; }
.sep-journey__step p { font-size: 15.5px; line-height: 1.55; color: var(--muted, #6b7280); margin: 0; }

/* ---------- Encouragement band ---------- */
.sep-band {
    background: linear-gradient(120deg, #312e81, #4f46e5);
    border-radius: 18px;
    color: #fff;
    padding: 36px 28px;
    text-align: center;
}
.sep-band h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin-bottom: 10px; }
.sep-band p { color: #ddd6fe; font-size: 17.5px; line-height: 1.6; max-width: 600px; margin: 0 auto 22px; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
    .sep-sections { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sep-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .sep-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sep-demo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    .sep-sections, .sep-journey { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   FULL-WIDTH SECTION HEADS
   home_v5.css caps .xl-sectionhead at 640px - barely half of the 1140px
   content column - so every heading on this page wrapped onto two lines with
   the right-hand half of the row left empty. This page has the room, so the
   head spans the column and the headings sit on one line.

   The lede is widened too, but stops at 90ch: a measure that runs the full
   1084px would be ~130 characters per line, which is past the point where
   prose stays comfortable to read.
   ========================================================================== */
.sep-page .xl-sectionhead { max-width: none; }
.sep-page .xl-sectionhead .xl-h2 { text-wrap: balance; }
.sep-page .xl-sectionhead .xl-lede { max-width: 90ch; }

/* The closing band is centred, so its copy gets a wider measure as well. */
.sep-band p { max-width: 74ch; }

/* Hero gets the extra width too. The h1 still wraps - at 44px that sentence is
   wider than any viewport - but it now breaks onto two balanced lines instead
   of being squeezed into an 820px column. */
.sep-hero h1 { text-wrap: balance; }
.sep-hero__sub { max-width: 76ch; }

/* ============================================================================
   CENTRING FIX, WIDER COLUMN, LARGER TYPE
   ========================================================================== */

/* home_v5.css resets every paragraph with `.xl p { margin: 0 }` (0,1,1), which
   outranks a single-class rule and wiped out the `margin: 0 auto` that centres
   these blocks - so the hero standfirst sat flush left under a centred heading
   while its own text-align kept the lines centred within the box, which is what
   made the misalignment look so odd. Two classes restores the auto margins. */
.sep-page .sep-hero__sub { margin: 0 auto 34px; }
.sep-page .sep-band p { margin: 0 auto 26px; }

/* The content column was 1140px inside a much wider viewport, leaving a wide
   empty margin each side. Match the home page's measure instead. */
.sep-page .xl-wrap { max-width: min(1400px, 94vw); }

/* Type scale: roughly +2px on everything home_v5.css sizes, so the page reads
   comfortably at arm's length. The page's own sep-* rules are bumped at source
   above; these are the shared xl-* rules, which must stay scoped to this page. */
.sep-page .xl-h2 { font-size: clamp(27px, 3vw, 36px); }
.sep-page .xl-lede { font-size: 18.5px; }
.sep-page .xl-eyebrow { font-size: 13px; }
.sep-page .xl-feat h3 { font-size: 18px; }
.sep-page .xl-feat p { font-size: 16px; }
.sep-page .xl-btn { font-size: 16px; padding: 13px 22px; }