/* Shell for the public content pages: topics, courses, about, industries,
 * corporate training, FAQ and contact.
 *
 * ONE stylesheet for all of them rather than an inline <style> per template.
 * Eight pages sharing one hashed, immutable file means a reader who lands on
 * the service-excellence page and then opens the CSEO course pays for these
 * rules once. The same reasoning that moved the shell out of base_learn.html.
 *
 * Everything here is layout and rhythm. Colour tokens come from base.css and
 * are not redefined: a second definition of --brand is how two pages end up
 * almost the same blue.
 */

/* ── Section rules ───────────────────────────────────────────────────────
 * The grey line between two sections spans the CONTENT column, not the
 * viewport: it starts under the logo and ends under Sign out, matching the
 * header.
 *
 * It used to sit on .pg-section itself, which is full-bleed, so on a 1280px
 * window the rule ran the whole 1280 while everything it divided ran 104-1176.
 * The section looked wider than the page it was on.
 *
 * Done with a ::before rather than a border on .learn-shell, because a border
 * there would land on the shell's PADDING edge (80-1200) and overshoot the
 * content by the 1.5rem gutter on each side. Insetting the pseudo-element by
 * that same gutter is what makes the line agree with the header, and it stays
 * agreed if the gutter ever changes -- both read 1.5rem.
 */
.pg-section > .learn-shell,
.pg-hero > .learn-shell { position: relative; }
.pg-section + .pg-section { border-top: 0; padding-top: 0; }
.pg-section + .pg-section > .learn-shell { padding-top: 2.4rem; }
.pg-section + .pg-section > .learn-shell::before,
.pg-hero > .learn-shell::after {
    content: '';
    position: absolute;
    left: 1.5rem; right: 1.5rem;
    border-top: 1px solid var(--line);
}
.pg-section + .pg-section > .learn-shell::before { top: 0; }
.pg-hero > .learn-shell::after { bottom: 0; }

/* ── Page head ───────────────────────────────────────────────────────── */
.pg-hero { padding: 3rem 0 0; }
.pg-hero > .learn-shell { padding-bottom: 2.2rem; }
.pg-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--brand); margin-bottom: .9rem;
}
.pg-hero h1 {
    font-size: clamp(1.9rem, 4.4vw, 2.9rem);
    line-height: 1.15; letter-spacing: -.02em; color: var(--ink);
}
/* The lede is the paragraph Google most often quotes and the one an answer
   engine lifts, so it is sized to be read rather than skimmed past.

   NO max-width. See the note on .pg-prose below: a 62ch cap stopped this
   paragraph 390px short of the rule beneath it, which is the single thing that
   made these pages look unbalanced. */
.pg-lede {
    margin-top: 1rem;
    font-size: 1.12rem; line-height: 1.65; color: var(--ink-soft);
    text-wrap: pretty;
}

/* ── Prose ───────────────────────────────────────────────────────────── */
.pg-section { padding: 2.4rem 0; }
/* NO max-width, deliberately, and this has been settled twice.
 *
 * A 68ch cap resolves to about 680px inside the 1072px content column, so
 * every paragraph stopped ~390px short of the section rule above it and ran
 * several lines longer than it needed to: a narrow column pasted into a wide
 * page, with a permanent empty gutter down the right of every content page.
 * The same defect was found and fixed on the home page's FAQ answers on
 * 2026-08-18 (.faq-item p, which carries the same pair of declarations) and
 * was reintroduced here by a later pass that capped the parent instead.
 *
 * `text-wrap: pretty`, NEVER `balance`: balance shortens every line to equalise
 * them, which reintroduces the same right-hand gap by another route. Pretty
 * keeps lines full and only prevents a stranded last word.
 *
 * The ONE exception on the site is .cert-hero p on the home page, which is a
 * centred hero: symmetric on both sides, so not this defect. Leave it alone.
 */
.pg-prose { text-wrap: pretty; }
.pg-prose h2 {
    font-size: clamp(1.3rem, 2.6vw, 1.6rem);
    line-height: 1.25; color: var(--ink); margin-bottom: .9rem;
}
.pg-prose h3 { font-size: 1.08rem; color: var(--ink); margin: 1.4rem 0 .5rem; }
.pg-prose p { margin-bottom: 1rem; line-height: 1.7; color: var(--ink-soft); }
.pg-prose p:last-child { margin-bottom: 0; }
.pg-prose a { color: var(--brand); }
.pg-prose ul { margin: 0 0 1rem 1.1rem; }
.pg-prose li { margin-bottom: .5rem; line-height: 1.65; color: var(--ink-soft); }

/* ── Ordered steps ───────────────────────────────────────────────────
 * The guide whose answer is a sequence (how to improve customer service).
 *
 * list-style:none and padding:0 are load-bearing rather than cosmetic. A
 * default <ol> indents its content by ~2.5rem, which would put every step
 * heading and every step paragraph on a different left edge from the H1 and
 * from every other heading on the site: exactly the defect the layout audit
 * exists to catch, introduced deliberately by a marker nobody needs to see
 * twice.
 *
 * The number is a counter in ::before, rendered as a block ABOVE the heading,
 * so it reads as a step label and costs the heading no horizontal position.
 * The <ol> carries role="list" in the template because Safari drops list
 * semantics from a list with no markers, and the order is the meaning here.
 */
.pg-steps { list-style: none; margin: 0; padding: 0; counter-reset: pg-step; }
.pg-steps > li { counter-increment: pg-step; }
.pg-steps > li + li { margin-top: 2.4rem; }
.pg-steps > li::before {
    content: "Step " counter(pg-step);
    display: block; margin-bottom: .5rem;
    font-size: .76rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--brand);
}

/* Inline "read more about this" row under a section. */
.pg-jumps { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.pg-jump {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .45rem .85rem; border: 1px solid var(--line);
    border-radius: 999px; background: var(--surface);
    font-size: .88rem; font-weight: 600; color: var(--brand);
    text-decoration: none;
}
.pg-jump:hover { border-color: var(--brand); background: var(--surface-alt); }

/* ── Cards ───────────────────────────────────────────────────────────── */
.pg-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pg-card {
    display: flex; flex-direction: column; gap: .55rem;
    padding: 1.3rem; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--surface);
    text-decoration: none; color: inherit;
}
a.pg-card:hover { border-color: var(--brand); box-shadow: 0 6px 24px rgba(23,48,122,.09); }
.pg-card h2, .pg-card h3 { font-size: 1.06rem; color: var(--ink); line-height: 1.3; }
.pg-card p { font-size: .93rem; line-height: 1.6; color: var(--ink-soft); }
/* ── Badges ──────────────────────────────────────────────────────────────
   The foot of a card, as a row of small pills rather than a line of
   icon-and-text fragments.

   The old .pg-card-meta was a sentence in disguise: "-> Requirements" and
   "book Syllabus" side by side in muted 13px, each a bare link with a glyph in
   front of it. At a glance it read as one run of grey text, and the two things
   you could actually DO from the card were the least visible part of it.

   Two kinds, and the difference matters:

     .pg-chip   a FACT about the thing -- 21 modules, about 14 hours, CSEO.
                Not a link, no hover, no border. It states.
     .pg-badge  an ACTION -- Requirements, Syllabus. A link, bordered, and it
                responds to the pointer. It goes somewhere.

   Named .pg-chip, NOT .pg-fact: .pg-fact was already taken further down this
   file by the <dl> on the syllabus page, and because that rule is declared
   after this one it won -- the pills came out 46px tall with a square left
   edge and no radius, which looks like a broken badge rather than like a
   name collision.

   Keeping the two visually distinct is the whole point. A row where a fact and
   a link look identical teaches a reader to click the facts. */
.pg-badges {
    margin-top: auto; padding-top: .8rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
}
.pg-chip, .pg-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .26rem .6rem; border-radius: 999px;
    font-size: .78rem; font-weight: 600; line-height: 1.35;
    white-space: nowrap;
}
.pg-chip {
    background: var(--surface-alt);
    color: var(--ink-muted);
}
.pg-badge {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--brand);
    text-decoration: none;
}
.pg-badge:hover, .pg-badge:focus-visible {
    border-color: var(--brand);
    background: var(--surface-alt);
}
/* The level tag. Takes the certification's own tier colour where the page has
   one to give it, and falls back to the neutral fact pill where it does not,
   so it never depends on a variable that may not be set. */
.pg-chip-tier {
    background: var(--paper, var(--surface-alt));
    color: var(--tier-ink, var(--ink-muted));
    box-shadow: inset 0 0 0 1px var(--metal, transparent);
}

/* The "Who:" line on a card. Quieter and one size down from the positioning
   above it: on a card the positioning is the claim and this is the qualifier,
   and at the same weight the two competed and the card read as three equal
   paragraphs. */
.pg-who { font-size: .86rem; color: var(--ink-muted); }
.pg-who strong { color: var(--ink-soft); font-weight: 700; }

.pg-card-meta {
    margin-top: auto; padding-top: .5rem;
    font-size: .82rem; color: var(--ink-muted);
    display: flex; flex-wrap: wrap; gap: .9rem;
}
.pg-card-meta span { display: inline-flex; align-items: center; gap: .35rem; }

/* ── Syllabus ────────────────────────────────────────────────────────── */
.pg-modules { display: grid; gap: .7rem; counter-reset: mod; }
.pg-module {
    display: grid; grid-template-columns: 2.6rem 1fr; gap: .9rem;
    padding: 1rem 1.1rem; border: 1px solid var(--line);
    border-radius: 12px; background: var(--surface);
}
.pg-module-no {
    display: flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    background: var(--surface-alt); color: var(--brand);
    font-weight: 700; font-size: .92rem;
}
.pg-module h3 { font-size: 1rem; color: var(--ink); margin-bottom: .3rem; }
.pg-module p { font-size: .91rem; line-height: 1.6; color: var(--ink-soft); }
.pg-module-time { font-size: .8rem; color: var(--ink-muted); margin-top: .35rem; }

/* ── Facts strip ─────────────────────────────────────────────────────── */
.pg-facts {
    display: grid; gap: 1rem; margin-top: 1.6rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.pg-fact {
    padding: .9rem 1rem; border-left: 3px solid var(--brand);
    background: var(--surface-alt); border-radius: 0 10px 10px 0;
}
.pg-fact dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); }
.pg-fact dd { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-top: .2rem; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
/* <details>, not a JS accordion. The answers are in the DOM whether or not
   the summary is open, which is what both a crawler and a reader with
   JavaScript disabled need, and it costs no script at all. */
.pg-faq { display: grid; gap: .6rem; }
.pg-faq details {
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); padding: .2rem .2rem;
}
.pg-faq summary {
    cursor: pointer; list-style: none; padding: .85rem 1rem;
    font-weight: 600; color: var(--ink); line-height: 1.45;
    display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
}
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after {
    content: "\002B"; color: var(--ink-muted); font-weight: 400;
    font-size: 1.2rem; line-height: 1; flex-shrink: 0;
}
.pg-faq details[open] summary::after { content: "\2212"; }
.pg-faq summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 10px; }
.pg-faq details > p {
    padding: 0 1rem 1rem; line-height: 1.7; color: var(--ink-soft); margin: 0;
    text-wrap: pretty;
}

/* ── Call to action ──────────────────────────────────────────────────── */
.pg-cta {
    margin-top: 2rem; padding: 1.6rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface-alt);
}
.pg-cta h2 { font-size: 1.2rem; color: var(--ink); margin-bottom: .5rem; }
.pg-cta p {
    color: var(--ink-soft); line-height: 1.65; margin-bottom: 1rem;
    text-wrap: pretty;
}
/* a.pg-btn, not .pg-btn.
   Every one of these buttons is an <a> inside .pg-prose, and `.pg-prose a`
   above sets color:var(--brand) at specificity (0,1,1) -- one higher than a
   bare .pg-btn. The primary button was therefore rendering brand navy text on
   a brand navy background: a solid block with an invisible label, on the main
   call to action of the corporate page and the course pages. Qualifying the
   selector with the element name matches that specificity, and since this rule
   comes later in the file it wins the tie.
   Do not drop the `a`. */
a.pg-btn, .pg-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .7rem 1.3rem; border-radius: 10px;
    background: var(--brand); color: #fff; font-weight: 600;
    text-decoration: none;
}
a.pg-btn:hover, .pg-btn:hover { background: var(--brand-dark); }
a.pg-btn-ghost, .pg-btn-ghost {
    background: transparent; color: var(--brand); border: 1px solid var(--line);
}
a.pg-btn-ghost:hover, .pg-btn-ghost:hover {
    background: var(--surface); border-color: var(--brand);
}
.pg-btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }

/* The way in, on the pages that describe a course.

   Courses -> a course -> the certification page -> a button in a sidebar was
   four screens to reach an action a reader is ready for on the first one. Both
   pages now carry it: the index under every card, the syllabus in the hero and
   again at the foot.

   .pg-card-stack is the grid item, so the card and its button sit in one cell
   and the button lines up across a row however unequal the descriptions are:
   the card takes the slack, the button keeps its height. */
.pg-card-stack { display: flex; flex-direction: column; gap: .7rem; }

/* Course titles on one line, always, without moving the cards.

   The titles are the certification names now -- "Certified Service Excellence
   Professional" is 41 characters and needs 20.3em -- so at three cards across a
   1280px screen two of the three wrapped and the third did not, and the cards
   stopped lining up with each other.

   The type gives way, not the layout. Each title is sized against its own card
   with a container query, so it shrinks to whatever still lands on one line
   instead of wrapping: 17px where there is room, about 14.5px in a third of a
   1280px screen, smaller again on a phone. 4.8cqi is the measured fit -- the
   longest title is 20.3em wide and a card is about 4% wider than the text
   column inside it, so a little under 1/20.3 of the card is the largest size
   that still fits.

   The ellipsis is for a browser too old for container queries, where the
   font-size declaration is dropped and nowrap would otherwise run the title out
   of its card. It should never be reached. */
/* Three across on a computer screen. The cards are a set and they belong on one
   row; widening them to two across to fit the longest title made the page look
   like two courses and an afterthought.

   min(300px, 100%), not a bare 300px: a bare minimum is a floor the column
   cannot go under, so on a narrow phone the card stayed 300px wide inside a
   gutter and pushed the whole page into a horizontal scroll. The min() lets the
   single column fall back to the width it actually has. */
.pg-grid-courses { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.pg-grid-courses .pg-card { container-type: inline-size; }
.pg-grid-courses .pg-card h2 {
    /* The floor is .7rem so that even a 320px phone, where the text column is
       about 228px, still lands the longest title on one line rather than
       wrapping or clipping it. One row is the rule at every width; the type is
       what gives way. */
    font-size: clamp(.7rem, 4.8cqi, 1.06rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The summary follows the title down. The title is the one thing here forced
   onto a single line, so in a narrow card it is the title that shrinks -- and a
   card whose heading ends up SMALLER than the paragraph under it has stopped
   being a heading. Scaled from the same container, at a slightly gentler slope,
   so the summary stays a step below the title at every width and still reaches
   its normal size wherever the card is wide enough. */
.pg-grid-courses .pg-card p { font-size: clamp(.75rem, 4.3cqi, .93rem); }

/* On the narrowest phones the card gives up some padding rather than the title
   giving up another point of type. 1.3rem each side costs 42px of a 272px card,
   and those 42px are the difference between an 11px title and a readable one. */
@media (max-width: 379px) {
    .pg-grid-courses .pg-card { padding: 1.1rem .9rem; }
}

.pg-card-stack > .pg-card { flex: 1 1 auto; }
.pg-card-go { justify-content: center; }
.pg-hero-actions { margin-top: 1.4rem; }

/* The study-time figure, taken apart. Quiet: it is the footnote to the facts
   above it, not a fifth fact. */
/* The study-time breakdown: a strip of parts under the facts, not a paragraph.
   As a sentence it restated the total immediately above it and wrapped across
   two lines; as four short spans it reads as what it is, the addition behind
   the figure. */
.pg-workload {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    margin-top: .7rem;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--ink-muted);
    /* No measure limit here, deliberately. 62ch is the right column width for
       prose somebody reads paragraph after paragraph, and the wrong one for a
       single sentence of figures: it broke the line before "120-minute
       written examination" with half the hero still empty beside it, so the
       sentence read as though it had stopped and started again. This one runs
       to the width it is given. */
}
.pg-workload span { display: inline-flex; align-items: center; }
/* Hairline separators between the parts, drawn rather than typed, so no bullet
   character is left dangling at the end of a wrapped row. */
.pg-workload span + span::before {
    content: ""; width: 1px; height: .85em; margin-right: .9rem;
    background: var(--line);
}

/* ── Definition list for contact ─────────────────────────────────────── */
.pg-contact { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pg-contact div { padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pg-contact h2 { font-size: 1rem; color: var(--ink); margin-bottom: .4rem; }
.pg-contact p { font-size: .93rem; line-height: 1.6; color: var(--ink-soft); }
.pg-contact a { color: var(--brand); }

/* The contact block on /contact/.

   Three tiles rather than a list, because the page had been cut back to a
   heading and three lines of text and read as unfinished. These carry the same
   information with the weight the page's only job deserves: one tile per way of
   reaching the institute, the whole card a link, so the tap target on a phone
   is a card and not a line of text. */
/* Location, email, phone: one row of three. They are the same kind of thing and
   they read as a set; stacked down a column beside the form they read as three
   unrelated boxes. min(260px, 100%) rather than a bare 260px so a narrow phone
   drops to one column instead of pushing the page sideways. */
.pg-reach {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
/* Icon beside the text, not above it. Stacked, each tile spent 50px on an
   icon and its margin before the first word, and the row stood 216px tall to
   carry an address, an email and a phone number. This is the same content in
   about half the height. */
.pg-reach-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start; gap: .1rem .85rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); color: inherit; text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* The icon spans both text rows on its own column. */
.pg-reach-tile > .pg-reach-icon { grid-row: 1 / span 3; }
.pg-reach-tile:hover {
    border-color: var(--brand);
    box-shadow: 0 6px 24px rgba(23, 48, 122, .09);
    transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) { .pg-reach-tile { transition: none; } }
.pg-reach-tile:hover .pg-reach-icon { background: var(--brand); color: #fff; }

.pg-reach-icon {
    display: grid; place-items: center; align-self: center;
    width: 2.3rem; height: 2.3rem;
    border-radius: 999px; background: var(--paper, #eef2ff); color: var(--brand);
    font-size: .9rem;
    transition: background .15s ease, color .15s ease;
}
.pg-reach-label {
    font-size: .76rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-muted);
}
/* The value is the point of the tile, so it is the biggest thing in it. Wraps
   rather than clipping: an address has to stay readable, and unlike a course
   title these three are short enough that a wrap costs nothing. */
.pg-reach-value {
    font-size: 1rem; font-weight: 700; line-height: 1.4;
    color: var(--ink); font-style: normal; overflow-wrap: anywhere;
}
.pg-reach-go {
    margin-top: .3rem;
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .82rem; font-weight: 700; color: var(--brand);
}
.pg-reach-go i { font-size: .8em; }

/* Two columns on a desktop: how to reach us, and the form. The form is the
   wider one because it is the only thing on the page somebody has to type
   into. One column on a phone, tiles first, because a reader who wants to
   phone should not scroll past a form to find the number. */
.pg-contact-grid {
    display: grid; gap: 1.6rem;
    grid-template-columns: 1fr;
    margin-top: 1.6rem;
}
@media (min-width: 900px) {
    /* Map and form share the row, the form the wider of the two because it is
       the only thing on the page somebody has to type into. */
    .pg-contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.6rem; }
}

/* The map. A flex column so the iframe grows to whatever height the form
   beside it gives the row, rather than sitting short with white under it. */
.pg-map {
    display: flex; min-height: 220px;
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    /* Tinted while the iframe is still blank. A third party's map cannot be
       made instant, so the second before it draws should read as a map coming
       rather than as a hole in the page. */
    background: var(--paper, #eef2ff);
}
.pg-map iframe { flex: 1; display: block; width: 100%; border: 0; }

/* The form. */
.pg-form-card {
    padding: 1.2rem 1.25rem 1.3rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface);
}
.pg-form-card h2 { font-size: 1.05rem; color: var(--ink); margin-bottom: .8rem; }

/* Two columns once there is room for them. Name and address are short and sit
   side by side; organisation and the message take the full width. Four fields
   stacked was four rows of label-plus-box for two lines of actual typing, and
   it made the card taller than the three tiles above it put together. */
.pg-form-card form { display: grid; gap: 0 .9rem; }
@media (min-width: 560px) {
    .pg-form-card form { grid-template-columns: 1fr 1fr; }
    .pg-field-organisation, .pg-field-message, .pg-form-card form > button {
        grid-column: 1 / -1;
    }
}
.pg-field { margin-bottom: .8rem; }
.pg-field label {
    display: block; margin-bottom: .3rem;
    font-size: .84rem; font-weight: 700; color: var(--ink);
}
.pg-field label span {
    font-weight: 600; color: var(--ink-muted); text-transform: none;
}
.pg-field input, .pg-field textarea, .pg-field select {
    width: 100%; padding: .6rem .75rem;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface-alt, #fff); color: var(--ink);
    font: inherit; font-size: .95rem;
}
.pg-field textarea { resize: vertical; min-height: 5.2rem; }
.pg-field input:focus, .pg-field textarea:focus {
    outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
}
.pg-field-error { margin-top: .35rem; font-size: .82rem; font-weight: 600; color: #991b1b; }

/* The honeypot. Off-screen rather than display:none, because some form-fillers
   skip what is not rendered, and this one is meant to be found. */
.pg-trap {
    position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.pg-form-note {
    display: flex; gap: .6rem; align-items: flex-start;
    margin-bottom: .9rem; padding: .7rem .9rem;
    border-radius: 10px; font-size: .9rem; line-height: 1.6;
}
.pg-form-ok  { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.pg-form-bad { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.pg-form-note a { color: inherit; text-decoration: underline; }
/* <address> italicises itself by default, which reads as an aside rather than
   as where the institute is. */
.pg-contact address {
    font-style: normal;
    margin-top: .5rem;
    font-size: .93rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

@media (max-width: 640px) {
    /* The hero's and the divided section's bottom/top space lives on the inner
       shell now, because that is where the rule is drawn. Setting it on the
       outer element here as well would double it. */
    .pg-hero { padding: 2.2rem 0 0; }
    .pg-hero > .learn-shell { padding-bottom: 1.7rem; }
    .pg-section { padding: 1.9rem 0; }
    .pg-section + .pg-section > .learn-shell { padding-top: 1.9rem; }
    .pg-module { grid-template-columns: 1fr; gap: .5rem; }
    .pg-module-no { width: 2.2rem; height: 2.2rem; font-size: .85rem; }
}

/* Visually hidden but announced. Used for the "Module 3:" prefix on syllabus
   headings: the number is drawn in the circle beside the title, which is
   aria-hidden because it is decoration there, so without this a screen reader
   hears twenty-one headings with no ordinal at all.
   clip-path rather than display:none, which removes it from the a11y tree
   too, and no width:0, which stops some readers announcing it. */
.learn-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   The mailing list: /offers/ and the confirmation page
   ══════════════════════════════════════════════════════════════════════

   Two columns on a laptop, one on a phone, and on the phone the FORM comes
   first. The three promises beside it are what convinces somebody who arrived
   cold; a reader who arrived from a link that already told them what this is
   should not have to scroll past an explanation to reach the field. Done with
   `order`, so the source order stays the reading order for a screen reader.

   Every surface here is light. The panel that reports success is tinted, not
   inverted: a dark card dropped into a light content area reads as a different
   site, and the one place this platform uses dark is the header and footer
   chrome. */
.sub-layout {
    display: grid;
    gap: 2.2rem;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
}
@media (max-width: 800px) {
    .sub-layout { grid-template-columns: 1fr; gap: 1.8rem; }
    .sub-form-col { order: -1; }
}

/* ── The form ────────────────────────────────────────────────────────── */
.sub-form { display: grid; gap: 1.05rem; }
.sub-field { display: grid; gap: .38rem; }
.sub-field label {
    font-size: .87rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.005em;
}
/* "optional" in the label rather than an asterisk on the required one. An
   asterisk is a convention that has to be explained by a legend somewhere
   else on the page; this is the same information said once, in place. */
.sub-opt {
    font-weight: 500;
    font-size: .78rem;
    color: var(--ink-muted);
    letter-spacing: 0;
}
.sub-field input,
.sub-field select {
    width: 100%;
    padding: .72rem .85rem;
    font: inherit;
    font-size: .95rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid #cbd5e1;
    border-radius: 10px;
}
.sub-field select { appearance: auto; }
.sub-field input:focus-visible,
.sub-field select:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
    border-color: transparent;
}
.sub-row { display: grid; gap: 1.05rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .sub-row { grid-template-columns: 1fr; } }

/* The honeypot. Off-screen rather than display:none: a bot that reads computed
   styles skips a hidden field, and the whole point is that it fills this one.
   aria-hidden on the wrapper in the template keeps it out of the a11y tree, so
   nobody using a screen reader is ever offered it. */
.sub-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sub-submit {
    justify-self: start;
    display: inline-block;
    padding: .8rem 1.4rem;
    border: none;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.sub-submit:hover { background: var(--brand-dark); color: #fff; }
.sub-note { font-size: .82rem; line-height: 1.65; color: var(--ink-muted); margin: 0; }
.sub-note a { color: var(--brand); }
.sub-error { font-size: .85rem; color: #b3261e; margin: 0; font-weight: 600; }

/* ── The panels ──────────────────────────────────────────────────────── */
.sub-panel {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    padding: 1.5rem 1.5rem 1.6rem;
    display: grid;
    gap: .85rem;
}
.sub-panel h1, .sub-panel h2 {
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
}
.sub-panel h1 { font-size: 1.45rem; }
.sub-panel p { margin: 0; font-size: .95rem; line-height: 1.7; color: var(--ink-soft); }
.sub-panel a { color: var(--brand); }
/* Tinted, never inverted. The tint is the brand at a few per cent, which is
   enough to say "this is the answer" without becoming a second colour. */
.sub-panel--done { background: #f2f6fd; border-color: #c9d8f5; }
.sub-panel--done h1, .sub-panel--done h2 { color: var(--brand-dark); }
.sub-panel--warn { background: #fdf6ec; border-color: #eddcbf; }
.sub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

/* ── What you are agreeing to ────────────────────────────────────────── */
.sub-terms h2 { font-size: 1.05rem; font-weight: 800; color: var(--ink); margin: 0 0 .9rem; }
.sub-terms-list { margin: 0; }
.sub-terms-list dt {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand);
    margin-top: 1.15rem;
}
.sub-terms-list dt:first-child { margin-top: 0; }
.sub-terms-list dd {
    margin: .35rem 0 0;
    font-size: .93rem;
    line-height: 1.65;
    color: var(--ink-soft);
}
.sub-terms-foot {
    margin: 1.5rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    font-size: .88rem;
    line-height: 1.7;
    color: var(--ink-muted);
}
.sub-terms-foot a { color: var(--brand); }

/* The confirmation page is one panel and nothing else: it is reached from a
   message, it asks one question, and anything beside it is a distraction from
   the only button on the page. */
.sub-confirm { max-width: 620px; margin: 0 auto; padding: 3.5rem 1.5rem 5rem; }
.sub-confirm form { margin: 0; }

/* ── outcome.html ──────────────────────────────────────────────────────────
 * "How did it go?" -- the sixty-day question.
 *
 * Narrow, quiet, and answerable on a phone with one thumb. It is the only
 * page on the site that asks the reader for something rather than telling
 * them something, so it gets no hero image, no second column and nothing to
 * read past: four questions, then a button.
 * ───────────────────────────────────────────────────────────────────────── */
.oc-shell { max-width: 46rem; }

.oc-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.6rem 1.6rem 1.4rem;
}
    .oc-card > p {
        font-size: .95rem; line-height: 1.7; color: var(--ink-soft);
        margin-bottom: 1rem;
    }
    .oc-card > p strong { color: var(--ink); }

.oc-note, .oc-msg {
    display: flex; gap: .6rem; align-items: flex-start;
    border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem;
    font-size: .9rem; line-height: 1.55;
}
.oc-note { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.oc-msgs { margin-bottom: 1rem; }
.oc-msg.error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.oc-msg.success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }

/* Each question is a <fieldset>, so a screen reader announces the group with
   its own legend rather than reading nine loose radios in a row. */
.oc-q { border: 0; padding: 0; margin: 0 0 1.8rem; }
    .oc-q legend {
        display: block; width: 100%; padding: 0; margin-bottom: .8rem;
        font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.45;
    }
    /* "Optional" said on the question itself. A form whose optional fields are
       not marked is a form people abandon at the first one they would rather
       not answer. */
    .oc-q legend em {
        font-style: normal; font-weight: 600; font-size: .78rem;
        color: var(--ink-muted); margin-left: .45rem;
    }
    .oc-num {
        display: inline-grid; place-items: center;
        width: 1.5rem; height: 1.5rem; margin-right: .5rem; border-radius: 50%;
        background: var(--brand); color: #fff;
        font-size: .75rem; font-weight: 800; vertical-align: 1px;
    }

.oc-opt { display: block; cursor: pointer; margin-bottom: .45rem; }
    .oc-opt input { position: absolute; opacity: 0; pointer-events: none; }
    .oc-opt span {
        display: block; padding: .75rem 1rem; border-radius: 10px;
        background: var(--surface-alt); border: 1px solid var(--line);
        font-size: .93rem; color: var(--ink-soft); line-height: 1.45;
    }
    .oc-opt:hover span { border-color: var(--brand); }
    /* A 2px inset ring rather than a border colour: on a phone in daylight the
       one-pixel difference between chosen and not was not visible, which is
       the same finding the module check's options were rebuilt on. */
    .oc-opt input:checked + span {
        background: #fff; border-color: transparent; color: var(--brand);
        font-weight: 600; box-shadow: inset 0 0 0 2px var(--brand);
    }
    .oc-opt input:focus-visible + span {
        outline: 2px solid var(--brand); outline-offset: 2px;
    }

.oc-label {
    display: block; margin: 1.1rem 0 .4rem;
    font-size: .82rem; font-weight: 700; color: var(--ink-muted);
}
.oc-input {
    width: 100%; padding: .7rem .9rem;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface); color: var(--ink);
    font-family: inherit; font-size: .93rem;
}
.oc-input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Centred, never left under the text, and one full-width thumb target on a
   phone. The same rule the course pages settled on. */
.oc-actions {
    display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
    margin-top: 1.4rem;
}
.oc-fine {
    margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line);
    font-size: .82rem; line-height: 1.6; color: var(--ink-muted);
}

@media (max-width: 720px) {
    .oc-card { padding: 1.2rem 1.1rem; }
    .oc-actions .pg-btn { width: 100%; min-height: 46px; justify-content: center; }
    .oc-opt span { padding: .85rem 1rem; }
}