/* Brandale — homepage sections
Ported verbatim from handoff/01-prototype/index.html (2026-08-10).
The prototype is the specification: do not 'tidy' these rules — several
encode contrast fixes and bug fixes recorded in the project log. */
/* ---------- HERO ---------- */
/* Centred composition + layered light field, 2026-08-10.
Five layers, back to front: wash → radial glows (::before) → glass form →
node grid → content. Everything below the content is inert and aria-hidden. */
.hero{position:relative;background:var(--wash-hero);color:var(--slate-600);overflow:hidden;border-bottom:1px solid var(--slate-200);isolation:isolate}
/* The glows. Two only: teal top-left, purple top-right — the same two-accent split
as §5.1, held at low alpha so neither reads as a coloured surface. The third stop
is white and does the job the reference images' soft bloom does. */
.hero::before{content:"";position:absolute;inset:-10% -5% auto -5%;height:120%;z-index:0;pointer-events:none;
background:
radial-gradient(48% 42% at 14% 8%, rgba(0,191,214,.22) 0%, rgba(0,191,214,0) 70%),
radial-gradient(52% 46% at 88% 4%, rgba(140,138,229,.26) 0%, rgba(140,138,229,0) 72%),
radial-gradient(60% 50% at 50% 38%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 68%);
}
/* The glass form: a flat shield, pushed off the right edge (2026-08-10).
ON THE RECORD: §5.4 lists "no floating 3D shields" among the things this design must
not do. This overrides that line at your request. It stays FLAT — no bevel, no
rendered depth — so it reads as a crest, which is not a stretch beside the Chartered
Insurance Institute mark, itself a heraldic crest. §5.4 needs amending or this needs
revisiting; it should not sit silently contradicting the spec.
Positioned with `left`, not `right`, and anchored to the CONTENT COLUMN rather than
the viewport: calc(50% + 380px) is exactly half of the 760px column, so the shield's
left edge meets the column's right edge at every width it is visible at, and it can
never drift over the centred text as the viewport changes. The rest runs off-screen
and .hero's overflow:hidden crops it.
380 and not 340: at 340 it lapped 40px into the column, and the shield's purple end
stacked with the mesh measures 4.04:1 under --slate-600 body copy. That end is almost
certainly off-screen — the gradient runs white to purple left-to-right and only the
left portion is visible — but "the dark part happens to be cropped" is not something
this can rest on, least of all with a 6deg rotation moving it. Zero overlap retires
the question instead of arguing it.
No stroke and no drop-shadow — both were edges, and this is meant to be felt rather
than seen. Gloss is carried entirely by internal gradients: a broad specular bloom
top-left and a diagonal sheen, both clipped to the shape. opacity is the single dial
for how present it is. */
.glassform{position:absolute;top:50%;left:calc(50% + 380px);width:min(560px,42vw);height:auto;z-index:0;pointer-events:none;
opacity:.5;transform:translateY(-50%) rotate(6deg)}
/* Hidden below 1024px. As a centred plate it survived to 768px; anchored to the right
of the content column it has almost nothing left to show once the column fills the
viewport. */
@media(max-width:1023px){.glassform{display:none}}
.nodegrid{position:absolute;inset:0;z-index:0;opacity:1;pointer-events:none}
/* The mesh reads across the whole band again (2026-08-10). The previous mask cut it to
fully transparent for the middle 30%, which removed it from exactly the area anyone
looks at — it was present in the file and absent on the screen.
Rebuilt 2026-08-10 to go substantially darker. The earlier cap of ~.29 node alpha
came from treating the whole band as if body copy could be anywhere on it. It cannot.
Measured ceilings against the wash, per element:
--slate-600 sub + link descriptor .... 0.32 <- the only tight one
--navy-900 headline .................. 0.95
--navy-800 link code ................. 0.95
CTA buttons, accreditation marks ..... no limit (opaque fills / images)
So the constraint is not the hero, it is two narrow horizontal bands: y .39-.47 and
y .50-.545. Every pool is positioned and sized so its falloff stops short of them,
which is why peaks can now run to .95 mask (=.60 node alpha, the pattern's own
maximum) where before they were held to .42.
Net: darkest point .297 -> .600, quiet middle .060 -> .228, and body-copy contrast
IMPROVES from 4.62:1 to 4.86:1, because the dense pools moved off the text.
§5.4's ratio is untouched — faint lines, stronger dots — because that ratio is what
makes it read as a field of nodes rather than as graph paper. */
.hero .nodegrid{opacity:1;
-webkit-mask-image:
radial-gradient(ellipse 34% 22% at 10% 10%,rgba(0,0,0,.95) 0%,rgba(0,0,0,0) 78%),
radial-gradient(ellipse 30% 20% at 90% 16%,rgba(0,0,0,.90) 0%,rgba(0,0,0,0) 75%),
radial-gradient(ellipse 36% 26% at 80% 90%,rgba(0,0,0,.85) 0%,rgba(0,0,0,0) 78%),
radial-gradient(ellipse 32% 24% at 16% 93%,rgba(0,0,0,.80) 0%,rgba(0,0,0,0) 76%),
radial-gradient(ellipse 28% 13% at 55% 3%,rgba(0,0,0,.70) 0%,rgba(0,0,0,0) 74%),
radial-gradient(ellipse 120% 100% at 50% 46%,rgba(0,0,0,.38) 0%,rgba(0,0,0,.44) 100%);
mask-image:
radial-gradient(ellipse 34% 22% at 10% 10%,rgba(0,0,0,.95) 0%,rgba(0,0,0,0) 78%),
radial-gradient(ellipse 30% 20% at 90% 16%,rgba(0,0,0,.90) 0%,rgba(0,0,0,0) 75%),
radial-gradient(ellipse 36% 26% at 80% 90%,rgba(0,0,0,.85) 0%,rgba(0,0,0,0) 78%),
radial-gradient(ellipse 32% 24% at 16% 93%,rgba(0,0,0,.80) 0%,rgba(0,0,0,0) 76%),
radial-gradient(ellipse 28% 13% at 55% 3%,rgba(0,0,0,.70) 0%,rgba(0,0,0,0) 74%),
radial-gradient(ellipse 120% 100% at 50% 46%,rgba(0,0,0,.38) 0%,rgba(0,0,0,.44) 100%)}
.hero .wrap{position:relative;z-index:1;padding-top:84px;padding-bottom:96px}
@media(min-width:1024px){.hero .wrap{padding-top:112px;padding-bottom:128px}}
.hero-grid{display:grid;gap:48px;grid-template-columns:1fr}
/* Centred 2026-08-10. 760px cap kept: it is the measure the headline was set to,
and it keeps the chip row wrapping at a readable width rather than running the full
1280px gutter-to-gutter. */
.hero-content{max-width:760px;margin-inline:auto;text-align:center}
/* To restore the course-finder quiz card: revert this rule to two columns —
@media(min-width:1024px){.hero-grid{grid-template-columns:1.15fr .85fr;align-items:center}} */
/* .rating-chip deleted 2026-08-10 — three rules with zero usages, orphaned when the
chip came out of the hero on 2026-08-03. It also defined a `.stars` descendant that
would have collided with the SVG star rules the reviews section brings in. */
h1.hero-h{color:var(--navy-900);font-size:2.375rem;font-weight:700}
@media(min-width:768px){h1.hero-h{font-size:3rem}}
@media(min-width:1024px){h1.hero-h{font-size:3.75rem;letter-spacing:-.025em}}
/* brand-700 (8.8:1), not brand-500 (2.9:1) — this is display type carrying half the headline. */
h1.hero-h .em{color:var(--brand-700)}
/* The rotating headline. Only the clause at the end changes, so there is no
grid trick holding eight sentences in one cell any more — the frame is
written once and stays exactly where it is. Every swap is matched in length
in the content array, so the line count does not change underneath it. */
.hero-swap{display:inline-block;transition:opacity .2s ease,transform .2s ease}
.hero-swap.is-out{opacity:0;transform:translateY(-4px)}
@media(prefers-reduced-motion:reduce){
.hero-swap{transition:none;transform:none}
}
.hero-sub{font-size:1.125rem;color:var(--slate-600);margin-top:22px;max-width:56ch;margin-inline:auto}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;justify-content:center}
/* .btn-secondary's slate-300 border measures 1.39:1 against the new field — it was
already failing 1.4.11 on the old wash (1.47:1), the deeper field just made it
plainer. slate-500 measures 3.78:1 where the buttons actually sit. Scoped to the
hero deliberately; the same border is on every wash band site-wide and that is a
separate change. See SUMMARIES 2026-08-10. */
.hero .btn-secondary{border-color:var(--slate-500)}
.hero .btn-secondary:hover{border-color:var(--navy-800)}
/* course links — 2026-08-10. Were pill chips for about an hour; a chip is a button
shape, and four button shapes above the CTA row read as six calls to action. These
are plain text links now: no fill, no border, no shadow, nothing but type and an
arrow, so the only two objects in the hero with button geometry are the two CTAs.
Text is navy, not teal, even though §5.1 assigns teal to text links — four teal
labels directly above a teal filled button is the competition this change is
removing. The arrow carries the teal and marks them as links. This matches the
treatment the original quicklinks card used, which was slate type + a teal arrow. */
/* "Jump straight to a course:" is body copy on its own line, not a mono eyebrow
(2026-08-10). It reads as a sentence addressed to the reader rather than as a
system label, which is what §9 asks for.
display:block gives it its own line; the 12px margin that used to sit here was
removed 2026-08-10 because the gap made it look like a separate element sitting
under the paragraph. With no margin it falls on the paragraph's own line-height and
reads as a wrapped line of the same block — which is what it is. */
.hero-jump{display:block}
.qlinks{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin-top:20px}
.qlink{display:inline-flex;align-items:baseline;gap:8px;padding:3px 2px;border-radius:4px;transition:color .16s}
.qlink .c{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:.9375rem;color:var(--navy-800);letter-spacing:-.01em;transition:color .16s}
.qlink .s{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--slate-600);transition:color .16s}
.qlink .arw{width:13px;height:13px;color:var(--accent-800);flex-shrink:0;align-self:center;transition:transform .16s}
.qlink:hover .c,.qlink:hover .s{color:var(--accent-800);text-decoration:underline}
.qlink:hover .arw{transform:translateX(3px)}
.qlink:focus-visible{outline:2px solid var(--accent-500);outline-offset:3px}
/* The status chip on a jump row. Three tones, each saying a different thing:
teal for what has just landed, purple for a shelf to browse, plain for what
is announced but not yet on sale. */
.qtag{flex:none;padding:2px 8px;border-radius:999px;
font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:9.5px;line-height:1.6;
letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.qtag.is-new{background:var(--accent-100);color:var(--accent-800)}
.qtag.is-explore{background:var(--brand-100);color:var(--brand-700)}
.qtag.is-soon{background:var(--paper-100);color:var(--slate-600)}
/* Announced, not yet purchasable: same row, no arrow, nothing to click. */
.qlink.is-dead{cursor:default}
.qlink.is-dead .c{color:var(--navy-800)}
.qlink.is-dead .s{color:var(--slate-500)}
@media(prefers-reduced-motion:reduce){.qlink:hover .arw{transform:none}}
/* below 420px the descriptor is what breaks the row onto four lines — the code alone
still identifies the course */
@media(max-width:420px){.qlink .s{display:none}.qlinks{gap:12px 22px}}
/* hero side card */
/* .hero-card / .rolechip / .finder CSS deleted 2026-08-03 with the course-finder quiz. */
/* ---------- ACCREDITATION STRIP (2026-08-10) ----------
Sits at the foot of the hero band. §5.4 makes this the signature element and says it
should appear near every primary CTA, "because accreditation IS the purchase driver
for this audience" — but it also says "a bordered, mono-labelled data strip, not
floating logo soup". Hence the hairline, the mono label and the divider rules: the
marks are contained, not scattered.
The translucent white over blur echoes the glass form behind it rather than dropping
an opaque bar across the bottom of the wash. */
/* Back INSIDE the hero, below the CTA row, with no band behind it (2026-08-10).
Three rules went with the band: the paper-50 fill, the border, and the 120px height
cap — the cap existed to stop a banner dominating the page, and there is no banner
now. The marks are free to grow; 64px is simply where they were left.
§5.4 asks for "a bordered, mono-labelled data strip, not floating logo soup". The
border is gone at your request, so the mono label and the dividers are now the only
things doing the containing. Worth watching that it still reads as one block. */
.acred{margin-top:40px}
/* The "Accredited and recognised by" label was removed 2026-08-10, and its wrapper
went with it — with nothing to sit beside, that wrapper was a flex row of one child.
The list itself is the row now.
Removing the label also closed the tightest contrast on the page: at 10.5px on the
densest part of the mesh it measured 4.62:1. Images have no such constraint, which
is part of why the marks can now be bigger. */
.acred-marks{list-style:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 28px;margin:0;padding:0}
.acred-marks li{display:flex;align-items:center;gap:28px}
.acred-marks li+li::before{content:"";width:1px;height:34px;background:var(--slate-300);flex:0 0 auto}
/* height-normalised, width auto — the three source crops have different aspect ratios.
width/height attributes are on the ![]()
so the box is reserved before load (§8, CLS). */
/* opacity:.9 dropped with the band. Over a white fill it read as restraint; sitting
directly on the wash it just made the marks look faded, and accreditation is the
purchase driver here (§5.4) — these should be crisp. */
/* 64px -> 80px, 2026-08-10. The label was taking ~200px of the row and setting the
ceiling; without it the three marks measure ~251px inside a 760px column, so the
constraint is gone. */
.acred-marks img{display:block;height:var(--acred-h,80px);width:auto}
@media(max-width:600px){
.acred-marks{gap:12px 18px}
.acred-marks img{--acred-h:56px}
/* the divider is what forces a 3-up row to overflow once the marks wrap */
.acred-marks li+li::before{display:none}
.acred-marks li{gap:18px}
}
/* ---------- TRUST STRIP ---------- */
/* ==========================================================================
THE LOGO WALL
A white card on the brand tint. The tint is what lifts the card off the page
and puts the light on the logos — a white wall on a white page is just more
page — and purple is what this site already uses for a surface nobody is
meant to click.
No grayscale. The old marquee filtered every logo to grey at 62% opacity,
which is the most reliable way to make thirty brands look like one texture,
and the colour is the entire reason a wall like this is worth the space.
========================================================================== */
.trust{position:relative;background:var(--brand-50);border-bottom:1px solid var(--slate-200);
padding:46px 0}
/* With a photograph behind it: covered, centred, and veiled in the brand tint
so the picture reads as depth rather than as competition. The card is opaque
white on top of it, so nothing on the card depends on the image at all —
including whether it loaded. */
.trust.has-bg{background-size:cover;background-position:center;background-repeat:no-repeat;
padding:58px 0}
/* Sky gradient (Oct 2026). The Lloyd's photograph read grey and stock-like
against the rest of the site, so the band now uses the hero's own language:
the blue-lavender wash with soft lavender and teal glows (no dot grid). It starts from the hero's bottom lavender so the two meet without a
seam. `!important` because the content array still names a photo, which
trust.php prints as an inline background-image; this wins over it and stops
the photo downloading. Emptying `trust.bg` in inc/home-content.php would let
this drop the !important. */
.trust,.trust.has-bg{background:
radial-gradient(60% 80% at 85% 10%,rgba(150,140,235,.35),transparent 60%),
radial-gradient(50% 70% at 10% 100%,rgba(90,240,215,.25),transparent 60%),
linear-gradient(180deg,#F1F2FC 0%,#E8F1FC 45%,#E2ECFB 75%,#ECEBFB 100%)!important}
.trust.has-bg::before{content:none}
.trust.has-bg > .wrap{position:relative;z-index:1}
.trust.has-bg .trust-card{box-shadow:0 30px 70px rgba(16,22,38,.22)}
@media(max-width:700px){.trust.has-bg{padding:38px 0}}
.trust-card{background:var(--white);border:1px solid var(--slate-200);
border-radius:var(--r-panel);padding:26px 28px 22px;box-shadow:0 18px 46px rgba(26,34,81,.10)}
@media(max-width:700px){.trust-card{padding:20px 16px 16px}}
.trust-head{max-width:74ch}
.trust-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;
letter-spacing:.13em;text-transform:uppercase;color:var(--brand-700)}
.trust-lead{margin-top:8px;font-family:'Inter Tight',sans-serif;font-weight:600;
font-size:.95rem;line-height:1.45;letter-spacing:-.012em;color:var(--navy-900)}
/* Twenty-four marks, and every column count divides into it — 2, 3, 4 and 6
across — so each row fills and none ends ragged. */
.trust-grid{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:4px;
grid-template-columns:repeat(3,1fr)}
@media(min-width:560px){.trust-grid{grid-template-columns:repeat(4,1fr)}}
/* Six across and four rows. Four columns gave the wordmarks more room but made
the section 1167px tall — taller than the hero above it — for a band whose
whole job is to be scanned in a second. Everything is scaled to the narrower
cell rather than cropped, so the marks stay in proportion to each other. */
@media(min-width:860px){.trust-grid{grid-template-columns:repeat(6,1fr)}}
.trust-grid li{display:flex;align-items:center;justify-content:center;
padding:8px 12px;border-radius:var(--r-card);transition:background .16s ease-out}
.trust-grid li:hover{background:var(--brand-50)}
/* Height comes from the template, per logo — see the note in home-content.php.
The only job left here is to stop anything outgrowing its cell, and to give
every cell the same floor so the rows stay level whatever is in them. */
.trust-grid li{min-height:82px}
.trust-grid img{max-width:143px;width:auto;object-fit:contain;display:block}
/* Scaled down together on a phone, so the relative weights survive. */
@media(max-width:520px){
.trust-grid li{padding:6px 6px;min-height:64px}
.trust-grid img{transform:scale(.72);transform-origin:center}
}
/* ---------- TWO PATHS ---------- */
.paths{display:grid;gap:24px;grid-template-columns:1fr;margin-top:44px}
@media(min-width:768px){.paths{grid-template-columns:1fr 1fr}}
.path{position:relative;border:1px solid var(--slate-200);border-radius:var(--r-panel);padding:34px;background:var(--white);box-shadow:var(--sh-rest);transition:all .18s;overflow:hidden}
.path:hover{box-shadow:var(--sh-hover);transform:translateY(-2px)}
.path::before{content:"";position:absolute;top:0;left:0;right:0;height:4px}
.path.indiv::before{background:var(--accent-500)}
.path.team::before{background:var(--brand-500)}
.path .pill{margin-bottom:18px}
.path h3{font-size:1.4rem;margin-bottom:10px}
.path p{font-size:.98rem;margin-bottom:20px}
.path ul{list-style:none;margin-bottom:26px}
.path li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--slate-600);padding:5px 0}
.path li svg{width:17px;height:17px;color:var(--accent-500);flex-shrink:0;margin-top:3px}
.path.team li svg{color:var(--brand-500)}
/* ---------- CERTIFICATION PATHWAY ---------- */
.pathway{background:var(--paper-50)}
.phase-label{display:flex;align-items:center;gap:14px;margin:0 0 24px}
.pathway .earn-wrap{margin-top:44px}
.phase-label .n{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:var(--r-pill);white-space:nowrap}
.phase-label .n.earn{color:var(--accent-800);background:var(--accent-100)}
.phase-label .n.keep{color:var(--brand-700);background:var(--brand-100)}
.phase-label .t{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:1.02rem;color:var(--navy-900)}
.phase-label .rule{flex:1;height:1px;background:var(--slate-200)}
/* earn timeline */
.steps{display:grid;grid-template-columns:1fr;gap:20px;position:relative}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr);gap:22px}
.step:not(:last-child)::after{content:"";position:absolute;top:37px;right:-16px;width:11px;height:11px;border-top:2px solid var(--slate-300);border-right:2px solid var(--slate-300);transform:rotate(45deg);z-index:2}}
.step{position:relative;z-index:1;background:var(--white);border:1px solid var(--slate-200);border-radius:var(--r-card);padding:24px;box-shadow:var(--sh-rest);transition:all .18s}
.step:hover{box-shadow:var(--sh-hover);transform:translateY(-2px)}
.step .node{width:38px;height:38px;border-radius:50%;background:var(--accent-500);color:var(--navy-900);font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:15px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 0 0 5px var(--paper-50)}
.step h4{font-size:1.05rem;margin-bottom:8px}
.step p{font-size:.9rem;color:var(--slate-600)}
/* keep-it recurring pair */
/* Inset by the pager's arrow gutter (46px .sarrow + 14px .spager gap) so these
cards share the step panels' edges in .sview above. The arrows are hidden
below 761px, where the gutter collapses back to 0. */
.keep-grid{display:grid;grid-template-columns:1fr;gap:20px;padding-inline:var(--pager-gutter,0px)}
@media(min-width:761px){.keep-grid{--pager-gutter:60px}}
@media(min-width:768px){.keep-grid{grid-template-columns:1fr 1fr}}
.kcard{position:relative;background:var(--white);border:1px solid var(--brand-300);border-radius:var(--r-card);padding:24px 24px 24px 28px;box-shadow:var(--sh-rest);overflow:hidden;transition:all .18s}
.kcard:hover{box-shadow:var(--sh-hover);transform:translateY(-2px)}
.kcard::before{content:"";position:absolute;top:0;left:0;bottom:0;width:4px;background:var(--brand-500)}
.kcard .khead{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.kcard .node{width:38px;height:38px;border-radius:50%;background:var(--white);border:2px solid var(--brand-500);color:var(--brand-700);font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kcard .khead h4{font-size:1.05rem}
.kcard .recur{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--brand-700);background:var(--brand-100);padding:4px 10px;border-radius:var(--r-pill);margin-left:auto}
.kcard .recur svg{width:12px;height:12px}
.kcard p{font-size:.92rem;color:var(--slate-600)}
/* ---------- MEMBERSHIP ---------- */
/* Membership is the brand section, so it takes the purple tint rather than plain paper —
it stays distinguishable from its light neighbours without going dark. */
.mship{position:relative;overflow:hidden;background:var(--brand-50);color:var(--slate-600);border-top:1px solid var(--slate-200);border-bottom:1px solid var(--slate-200)}
.mship .m-top{max-width:70ch;margin:0 auto;text-align:center}
.mship .eyebrow{color:var(--brand-700)}
.mship h2{color:var(--navy-900);font-size:1.875rem;margin-top:12px}
@media(min-width:768px){.mship h2{font-size:2.375rem}}
.mship .m-lead{color:var(--slate-600);font-size:1.0625rem;margin:16px auto 0;max-width:62ch}
.mship .free-badge{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-700);background:var(--white);border:1px solid var(--brand-300);padding:9px 16px;border-radius:var(--r-pill)}
.mship .free-badge svg{width:15px;height:15px;color:var(--brand-600)}
.mgrid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:52px}
@media(min-width:640px){.mgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.mgrid{grid-template-columns:repeat(4,1fr)}}
/* slate-500, not slate-300: on the brand-50 field slate-300 measures 1.47:1. */
.mitem{background:var(--white);border:1px solid var(--slate-500);border-radius:var(--r-card);padding:26px;transition:all .18s;box-shadow:var(--sh-rest)}
.mitem:hover{border-color:var(--brand-500);box-shadow:var(--sh-hover)}
.mitem .ic{width:46px;height:46px;border-radius:10px;background:var(--brand-50);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.mitem .ic svg{width:22px;height:22px;color:var(--brand-600)}
.mitem h4{color:var(--navy-900);font-size:1.02rem;margin-bottom:8px}
.mitem p{font-size:.9rem;color:var(--slate-600)}
.m-foot{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.m-foot .partner{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:1.15rem;color:var(--navy-800);max-width:58ch;line-height:1.45}
.m-foot .m-note{font-size:.95rem;color:var(--slate-600);max-width:62ch}
.m-foot .gloss{color:var(--brand-700);font-weight:600;border-bottom-color:var(--brand-300)}
.m-foot .gloss:hover{color:var(--navy-900)}
.m-foot .gloss .pop{left:50%;transform:translate(-50%,4px);text-align:left}
.m-foot .gloss:hover .pop,.m-foot .gloss:focus-visible .pop,.m-foot .gloss[aria-expanded="true"] .pop{transform:translate(-50%,0)}
/* ---------- CREDENTIAL LADDER ---------- */
.ladder{display:grid;gap:24px;grid-template-columns:1fr;margin-top:44px}
/* 3-up only from 1024: at 768 the price + two-button footer will not fit a third of the row. */
@media(min-width:1024px){.ladder{grid-template-columns:repeat(3,1fr)}}
/* Two certifications, not three, now that CIE is a course. Three columns with
two cards in them leaves a third of the row empty, which is the same hole the
certificate strip had. Two columns, centred, reads as deliberate. */
@media(min-width:1024px){.ladder.ladder-two{grid-template-columns:repeat(2,1fr);max-width:880px;margin-left:auto;margin-right:auto}}
/* NB: no overflow:hidden — it would clip the membership popover above the card. */
.ccard{min-width:0;display:flex;flex-direction:column;border:1px solid var(--slate-200);border-radius:var(--r-card);background:var(--white);box-shadow:var(--sh-rest);transition:all .18s}
.ccard:hover{box-shadow:var(--sh-hover);transform:translateY(-2px)}
.ccard.flag{border-color:var(--brand-300);box-shadow:0 8px 24px rgba(140,138,229,.14)}
.ccard-top{padding:22px 24px 0;display:flex;justify-content:space-between;align-items:flex-start}
.ccard-body{padding:16px 24px 24px;display:flex;flex-direction:column;flex:1}
.ccard .code{font-family:'Inter Tight';font-weight:700;font-size:1.6rem;color:var(--navy-900);letter-spacing:-.02em}
.ccard .cname{font-size:.95rem;font-weight:600;color:var(--navy-800);margin:2px 0 12px}
/* The name standing in for the letters: smaller than a four-character code has
to be, and allowed two lines, so it occupies the same block as CCIS plus its
subtitle rather than towering over it. */
.ccard .code.code-name{font-size:1.15rem;line-height:1.25;max-width:15ch;margin-bottom:12px}
/* "Certificate course" is the longest label any of these carry and it was
breaking across two lines against the card's name. It keeps one line now, and
gives up a little of the tracking to do it. */
.ccard-top .tag{flex:none;white-space:nowrap;letter-spacing:.05em;padding-left:9px;padding-right:9px}
.ccard-top>div{min-width:0}
.ccard .outcome{font-size:.95rem;color:var(--slate-600);margin-bottom:16px;flex:1}
.ccard .for{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.05em;color:var(--slate-500);text-transform:uppercase;margin-bottom:16px;line-height:1.7}
.ccard .meta{display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--slate-200);margin-bottom:18px}
.ccard .meta div{font-size:.8rem;color:var(--slate-500)}
.ccard .meta b{display:block;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--navy-800);font-weight:500}
.ccard .incl{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--brand-700);font-weight:500;margin-bottom:18px}
.ccard .incl svg{width:15px;height:15px;color:var(--brand-500);flex:none}
.ccard .incl .gloss{color:var(--brand-700);border-bottom-color:var(--brand-300)}
.ccard .incl .gloss:hover{border-bottom-color:var(--brand-700)}
/* card footer — price + the two-button row, matching the catalogue cards */
.ccard-foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--slate-200)}
.ccard .price{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:1.5rem;color:var(--navy-900);line-height:1.15;letter-spacing:-.02em}
/* slate-600, not slate-500: slate-500 on white measures 4.36:1 and fails AA for body text. */
.ccard .price span{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--slate-600);margin-top:5px;line-height:1.5}
.ccard .price.soon-price{font-size:1.05rem;color:var(--slate-500)}
.ccard .cta-row{display:flex;gap:8px;margin-top:16px}
.ccard .cta-row .btn{flex:1;justify-content:center;padding:11px 12px;font-size:.85rem}
.ccard .cta-row .btn svg{width:16px;height:16px}
/* micro certs */
.micro{margin-top:24px;border:1px solid var(--slate-200);border-radius:var(--r-card);background:var(--paper-50);padding:24px 28px}
.micro-h{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.micro-h h4{font-size:1.05rem}
.micro-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:640px){.micro-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.micro-grid{grid-template-columns:repeat(4,1fr)}}
.mchip{display:block;background:var(--white);border:1px solid var(--slate-200);border-radius:var(--r-btn);padding:14px 16px;transition:all .16s ease-out}
.mchip:hover{border-color:var(--accent-500);box-shadow:var(--sh-rest)}
.mchip .l{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;color:var(--brand-700);text-transform:uppercase}
.mchip .t{font-size:.92rem;font-weight:600;color:var(--navy-800);margin-top:5px}
.micro-all{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-weight:600;font-size:.9rem;color:var(--navy-800);border-bottom:2px solid var(--accent-500);padding-bottom:2px}
.micro-all:hover{border-bottom-color:var(--accent-800)}
.micro-all svg{width:16px;height:16px;color:var(--accent-800)}
/* ---------- STAT BAND ----------
Removed 2026-08-10 at your request, with its six rules. It carried 12,500+ certified,
4.9/5, 45+ CE-eligible states and "teaching since 2020" — see SUMMARIES for what that
costs against §7.1, which asks for the number of professionals trained above the fold. */
/* ---------- REVIEWS ----------
Ported from ccis.html 2026-08-10, same look and behaviour: a slow seamless marquee
of named reviews that pauses on hover and on keyboard focus, and falls back to a
static grid under prefers-reduced-motion. Pure CSS, no JS.
The single .tst testimonial that used to sit here was deleted with its eight rules —
the marquee does the same job with eight names, and §12 forbids duplicated
components. Daniel Okafor's quote survives as the first card. */
.reviews{background:var(--paper-50)}
.stars{display:inline-flex;gap:2px;line-height:0}
/* --warning (#F79009) measures 2.21:1 on light fields, under the 3:1 minimum for a
graphic, so stars are --warning-700 (5.1:1) — the same hue darkened. Every star
group carries role="img" + aria-label, so the rating is never colour alone. */
.stars svg{width:14px;height:14px;fill:var(--warning-700)}
.rmarq{position:relative;overflow:hidden;margin:34px 0 0;padding:6px 0;width:100vw;margin-left:calc(50% - 50vw)}
/* the edge fades must match the section fill exactly or they read as grey smears —
paper-50 is #F6F8FB, hence the rgba below */
.rmarq::before,.rmarq::after{content:'';position:absolute;top:0;bottom:0;width:72px;z-index:2;pointer-events:none}
.rmarq::before{left:0;background:linear-gradient(90deg,var(--paper-50) 15%,rgba(246,248,251,0))}
.rmarq::after{right:0;background:linear-gradient(270deg,var(--paper-50) 15%,rgba(246,248,251,0))}
.rtrack{display:flex;gap:20px;width:max-content;padding:0 20px;animation:rscroll 120s linear infinite}
.rmarq:hover .rtrack,.rmarq:focus-within .rtrack{animation-play-state:paused}
@keyframes rscroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 10px))}}
.rcard{flex:0 0 336px;width:336px;background:var(--white);border:1px solid var(--slate-500);border-radius:var(--r-card);padding:20px;box-shadow:var(--sh-rest);display:flex;flex-direction:column}
.rtop{display:flex;gap:12px;align-items:center}
.ravatar{width:44px;height:44px;border-radius:50%;background:var(--brand-100);color:var(--brand-700);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.ravatar svg{width:24px;height:24px}
.rid{min-width:0}
.rname{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:.95rem;color:var(--navy-900);line-height:1.3}
.rrole{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-600);margin-top:5px;line-height:1.45}
.rcard blockquote{margin-top:15px;font-size:.9rem;color:var(--slate-600);line-height:1.6}
.rdate{margin-top:auto;padding-top:14px;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--slate-600)}
@media(prefers-reduced-motion:reduce){
.rmarq{overflow:visible;width:auto;margin-left:0}
.rmarq::before,.rmarq::after{display:none}
.rtrack{animation:none;width:auto;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.rcard{flex:none;width:auto}
.rcard[aria-hidden="true"]{display:none}
}
/* ---------- COURSE FINDER MODAL (2026-08-10) ----------
Mirrors the .pkgm pattern proven on ccis.html: role="dialog" + aria-modal with a
hand-rolled focus trap, body scroll lock, full-screen sheet below 720px. Not