/* index.html's own stylesheet. site.css carries everything shared by the
five pages that link it; these rules apply to the landing page alone, so
they load with the landing page alone -- the same split login.css,
member.css, module.css and merit.css already make. lib/content.js reads
the static directory at boot, so a new file here needs no wiring.
Below the fold, rebuilt 2026-09-24: five stacked prose sections became
seven that each hold data, a component or real tool output. The
structure is the one 5a already set: every block below is a plain
`section.wrap` with its
as a direct child, so it inherits the
marginal numbered label, the hairline top rule and the section padding
without redefining any of them. Nothing here is
full-bleed -- 5d's own bug note is what that costs inside the marginal
grid -- and nothing here sets a colour that :root does not already name. */
/* the line under a heading that carries counts, not prose */
.bf-meta,
.bf-lab{
font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-soft);font-variant-numeric:tabular-nums;
}
.bf-meta{margin-bottom:.55rem}
.bf-lab{display:block;margin-bottom:.9rem}
/* -- open now: one hairline row per live listing ------------------------- */
/* Rows, not cards: 5c already made this choice for .routes and fourteen
boxes would undo it. The rate is tabular and right-aligned so the column
reads as a column. */
.bf-board{margin-top:1.8rem;border-top:1px solid var(--rule)}
.bf-row{
display:grid;grid-template-columns:minmax(0,1fr) 9rem;
gap:.1rem 2rem;padding:1.15rem 0;
border-bottom:1px solid var(--rule);
text-decoration:none;color:inherit;
}
.bf-plat{grid-column:1;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.bf-row b{grid-column:1;font-weight:500;font-size:1.05rem;line-height:1.35}
.bf-rate{
grid-column:2;grid-row:1 / span 2;align-self:center;text-align:right;
font-size:.95rem;font-weight:500;color:var(--peri-dk);
font-variant-numeric:tabular-nums;white-space:nowrap;
}
.bf-req{grid-column:1;font-size:.82rem;color:var(--ink-soft);margin-top:.15rem}
.bf-row:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.bf-row:focus-visible{outline:2px solid var(--peri-dk);outline-offset:3px}
@media (max-width:820px){
.bf-row{grid-template-columns:1fr}
.bf-rate{grid-column:1;grid-row:auto;text-align:left;align-self:start;margin-top:.35rem}
}
/* -- four moves ---------------------------------------------------------- */
/* .wrap > ol is capped to --measure for reading text; this one is a grid
and spans the container, so it opts out explicitly. */
.wrap > .bf-moves{max-width:none}
.bf-moves{
list-style:none;margin:2rem 0 0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
gap:1.9rem 2.5rem;
}
.bf-moves li{margin:0}
/* Deliberately not the big Poppins numeral 5a gives a section: two numbering
systems at the same size on the same screen read as one broken system. */
.bf-n{
display:block;font-size:.72rem;font-weight:600;letter-spacing:.14em;
line-height:1;color:var(--peri-dk);font-variant-numeric:tabular-nums;margin-bottom:.55rem;
}
.bf-moves h3{margin-bottom:.35rem}
.bf-moves p{margin:0;font-size:.94rem;color:var(--ink-soft)}
/* -- what it pays -------------------------------------------------------- */
.bf-band{
display:flex;flex-wrap:wrap;gap:1.6rem 4rem;
margin:2rem 0 1.6rem;padding:1.9rem 0;
border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.bf-fig{
display:block;font-family:Poppins,sans-serif;font-weight:200;
font-size:clamp(2rem,5vw,2.9rem);line-height:1;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;
}
.bf-fig em{font-style:normal;font-size:.36em;color:var(--ink-soft);letter-spacing:0}
.bf-after b{font-weight:600}
/* -- Merit: the one dark plate below the fold ---------------------------- */
/* Contained, not full-bleed. 5d documents what a calc(50% - 50vw) plate
does inside 5a's marginal grid; this one has no reason to reach past its
column. Aqua, per 5e -- aqua owns the dark surfaces. */
.bf-plate{
margin-top:2rem;padding:2.2rem 2.4rem 2.4rem;
background:var(--night);color:#C8CEDE;border-radius:2px;
}
.bf-price{
margin:0 0 1.7rem;font-size:.95rem;color:var(--aqua);
font-variant-numeric:tabular-nums;
}
.bf-pro{margin:0;border-top:1px solid var(--rule-dk)}
.bf-pro > div{padding:1.05rem 0;border-bottom:1px solid var(--rule-dk)}
.bf-pro dt{font-weight:500;color:#E4E9F5;margin-bottom:.2rem}
.bf-pro dd{margin:0;font-size:.92rem;line-height:1.6;color:#8E96AB;max-width:38rem}
/* The public Merit demo is the proof, not another screenshot of proof. It is
a light working surface inside the dark product plate so the checker keeps
the same visual language a member sees after signing in. */
.bf-demo{margin-top:2rem;padding:1.35rem 1.4rem 1.5rem;background:var(--paper);color:var(--ink);border-radius:2px}
.bf-demo h3{margin:.15rem 0 .6rem;font-family:Poppins,sans-serif;font-size:clamp(1.25rem,3vw,1.65rem);font-weight:400}
.bf-demo > p{max-width:42rem}
.bf-demo .merit-step{color:var(--peri-dk)}
.bf-demo .merit-demo-cta{display:inline-block;margin-top:1rem;color:var(--peri-dk);font-weight:600;text-underline-offset:.2em}
.bf-term{margin:2rem 0 0;border:1px solid var(--rule-dk);border-radius:2px;overflow:hidden}
.bf-term figcaption{
padding:.65rem 1.1rem;border-bottom:1px solid var(--rule-dk);
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:.7rem;letter-spacing:.06em;color:#7E8698;
}
/* The strut comes from the block, so the line-height has to live on
;
setting it on alone leaves the inherited 1.7 spacing the page body
wants for prose, which is not what terminal output looks like. */
.bf-term pre{margin:0;padding:1.15rem 1.1rem;overflow-x:auto;line-height:1.45}
.bf-term code{
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:.75rem;color:#C8CEDE;white-space:pre;
}
/* Outranks `.bf-term figcaption` on purpose: this one is prose, not a chrome
label, and it is a
because a may carry only one . */
.bf-term > .bf-termnote{
margin:0;padding:.75rem 1.1rem;border-top:1px solid var(--rule-dk);
font-size:.82rem;line-height:1.55;color:#8E96AB;
}
@media (max-width:700px){
.bf-plate{padding:1.5rem 1.15rem 1.7rem}
.bf-demo{padding:1.1rem 1rem 1.25rem}
.bf-term code{font-size:.68rem}
}
/* -- two-column blocks: eligibility and candour -------------------------- */
.bf-cols{
display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
gap:1.6rem 2.4rem;margin-top:2rem;
}
.bf-check{list-style:none;margin:0;padding:0}
.bf-check li{
position:relative;padding-left:1.7rem;margin-bottom:.8rem;line-height:1.5;
}
.bf-check li:last-child{margin-bottom:0}
/* Drawn, not typed: a glyph here would depend on whichever font the reader
falls back to, and these two marks carry the whole meaning of the column. */
.bf-check li::before{
content:"";position:absolute;left:.15rem;top:.42em;
width:.55rem;height:.3rem;
border-left:1.5px solid var(--peri-dk);border-bottom:1.5px solid var(--peri-dk);
transform:rotate(-45deg);
}
.bf-no li::before{
width:.7rem;height:0;border-left:0;
border-bottom:1.5px solid var(--ink-soft);
transform:none;top:.72em;
}
.bf-candour p{margin:0;line-height:1.62}
.bf-candour b{display:block;font-weight:600}
/* -- the questions ------------------------------------------------------- */
/* Everything the five prose sections used to say and this rebuild no longer
prints in the flow is in here, so a scanner sees seven components and a
sceptic can still read the whole argument. */
.bf-faq{margin-top:1.8rem;border-top:1px solid var(--rule)}
.bf-faq details{border-bottom:1px solid var(--rule)}
.bf-faq summary{
list-style:none;cursor:pointer;padding:1.15rem 0;
display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
font-weight:500;
}
.bf-faq summary::-webkit-details-marker{display:none}
.bf-faq summary:focus-visible{outline:2px solid var(--peri-dk);outline-offset:3px}
/* The +/- is drawn for the same reason the ticks are, and because a glyph
here would be read out as stray punctuation. */
.bf-faq summary i{position:relative;flex:0 0 12px;width:12px;height:12px;align-self:center}
.bf-faq summary i::before,
.bf-faq summary i::after{content:"";position:absolute;background:var(--peri-dk)}
.bf-faq summary i::before{top:5px;left:0;width:12px;height:2px}
.bf-faq summary i::after{left:5px;top:0;width:2px;height:12px;transition:opacity .12s}
.bf-faq details[open] summary i::after{opacity:0}
.bf-faq p{margin:0 0 1.3rem;color:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){
.bf-faq summary i::after{transition:none}
}
/* ================================================================== */
/* THE HERO, REWORKED (2026-09-26) */
/* ================================================================== */
/* Five type treatments stacked up before anyone reached the button:
wordmark, tagline, live count, headline, subhead. Four different
left-hand edges too -- the logo mark at the gutter, the wordmark
indented past it, everything else back at the gutter -- which is why
the tagline read as a caption hanging off the mark rather than a line
of its own. Three changes, all of them subtraction:
1. The tagline leaves the hero for the footer. A wordplay line at 60%
opacity under a logo is a third voice speaking before anyone knows
what the company is. Re-aligning it was not the fix; it had no job
here.
2. The live count moves from above the headline to under the button.
Above the headline it answers a question nobody has asked yet.
Under the button it argues for pressing it. Same words, opposite
job. Moved in index.html rather than with CSS `order`, so the
reading order a screen reader and the tab key follow is the order
on screen.
3. The three-step sequence moves out of the hero into its own section
below it (.bf-apply), which is also the first thing under the fold.
Spacing is now one gap on a flex column instead of six separate child
margins, which is the direct fix for the placements reading as
unrelated decisions. */
.hero-copy{
display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem;
}
.hero-copy > *{margin:0}
/* Named individually because each beats the universal selector above on
specificity -- site.css sets these on .hero h1 (0,1,1) and .cta (0,1,0
inside a media query). */
.hero-copy > h1{margin:0}
.cta-row .cta{margin:0}
/* Tight to the button: it is the button's supporting line, not a
free-standing paragraph. */
.hero-copy > .readout{margin-top:-.7rem;opacity:.9}
/* site.css pulls the lockup close so the tagline could sit under it. With
the tagline gone the wordmark needs its own air before the headline. */
.lockup{margin-bottom:2rem}
/* -- the second door ----------------------------------------------------- */
/* A full-screen hero puts every reason-to-believe one scroll away, and the
only control on that screen commits you. This is the other door: small
enough not to compete with Apply, big enough to hit -- a 48px target, the
same minimum site.css already holds .cta, the inputs and the buttons to.
It needs no script: site.css sets scroll-behavior:smooth on and
section{scroll-margin-top:1.5rem}, so a plain #main href lands the first
section cleanly under the top edge.
Labelled "How it works" rather than "Learn more". A link whose text does
not name its destination is the WCAG 2.4.4 case, and it reads out with no
context in a screen reader's link list; this one also matches the heading
it lands on, so the destination confirms the promise.
Aqua because aqua owns the dark surfaces (site.css 5e), and a second
filled button would read as a second primary action. */
.cta-row{display:flex;align-items:center;gap:.4rem 1.6rem;flex-wrap:wrap}
/* Two doors, because there are two hesitations and they are not the same
one. "How it works" answers what happens if I press Apply; "Is this for
me?" answers the question this audience actually stalls on, which is
whether an active-but-not-practising licence still counts. Each lands on
the section that answers it, so the destination confirms the label.
Grouped in a span so the pair stays together when the row wraps, rather
than one door riding up beside the button and the other dropping below. */
.cta-doors{display:flex;align-items:center;gap:0 1.5rem;flex-wrap:wrap}
.cta-alt{
display:inline-flex;align-items:center;gap:.5rem;
min-height:48px;padding:.5rem .25rem;
font-family:Poppins,sans-serif;font-weight:400;font-size:.92rem;
letter-spacing:.015em;color:var(--aqua);text-decoration:none;
}
/* Drawn, not typed -- the same reason .bf-check and .bf-faq draw their marks:
a glyph would depend on whichever font the reader actually falls back to. */
.cta-alt::after{
content:"";width:.42rem;height:.42rem;flex:0 0 auto;
border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
transform:rotate(45deg) translate(-1px,-1px);
transition:transform .14s ease;
}
.cta-alt:hover{color:#9BE6DF}
.cta-alt:hover::after{transform:rotate(45deg) translate(1px,1px)}
.cta-alt:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
.cta-alt::after{transition:none}
}
/* On a phone Apply is full width, so the second door sits under it rather
than beside it, flush to the gutter. */
@media (max-width:700px){
.cta-row{width:100%}
.cta-row .cta{flex:1 1 100%}
.cta-doors{width:100%;gap:0 1.4rem}
.cta-alt{padding-left:0}
}
/* Under ~360px the two labels no longer sit on one line; stacking them keeps
both targets full-width-tappable instead of letting the second wrap into a
ragged half-line. */
@media (max-width:359px){
.cta-doors{flex-direction:column;align-items:flex-start;gap:0}
}
/* -- blue to the bottom -------------------------------------------------- */
/* The hero fills the first screen rather than handing over to paper
partway down it. svh, not vh: with vh the browser chrome showing pushes
the real fold off-screen on a phone, which is the bug that makes
full-height heroes feel broken on iOS.
Capped above phone width. A hero that keeps growing to fill a 27-inch
display pushes every reason-to-believe off the first frame, and
site.css's own note at the 1440 breakpoint already makes that argument
about width. */
.hero{min-height:100vh;min-height:100svh}
@media (min-width:701px){
.hero{min-height:min(100svh,820px)}
}
/* -- the horizon band ---------------------------------------------------- */
/* The hero already ended on a 2px spectrum rule (.hero::after in site.css:
indigo -> periwinkle -> aqua) and already contained one moving light,
the one static/phase-field.js lights the moons from. Those two facts had
nothing to do with each other. This is the seam between them.
Two halves. The ambient half drifts on its own: three lobes on
deliberately mismatched periods -- 29s, 37s, 47s -- so they never line
back up and the band never reads as a loop. Each is two to three times
wider than it is tall, so the three overlap into one graded band; at
circle proportions they stayed separable and read as blobs.
The interactive half is one more lobe, sitting under wherever the
phase-field light currently is, so dragging a finger across the hero, or
just scrolling it on a phone, pushes the brightest point along the
horizon with you.
Everything animates transform and opacity only. No blur filter and no
background repaint: a band this size repainting every frame is what
costs real battery on a mid-range phone, and site.css already un-fixes
body::before for exactly that reason. What moves here composites.
The glow rises only. It does not cross the rule onto the paper below --
the sections under the hero are #EEEBE4, and a screen-blend glow over
near-white renders as a grey smudge rather than light. The 2px rule
stays the crisp edge (z-index 3, above this at z-index 1), which is
what keeps it reading as light behind a horizon instead of a blurry
join. */
.hero .horizon{
position:absolute;left:0;right:0;bottom:0;z-index:1;
height:clamp(200px,38vh,420px);
overflow:hidden;pointer-events:none;
mix-blend-mode:screen;
background:
radial-gradient(150% 170% at 50% 136%, rgba(63,69,168,.40) 0%, rgba(63,69,168,0) 70%),
radial-gradient(110% 140% at 84% 140%, rgba(111,216,207,.20) 0%, rgba(111,216,207,0) 68%);
}
/* Wide and shallow, not round. At height:200% each lobe was roughly as tall
as it was wide -- a circle, which reads as an object sitting on the line
rather than light coming from behind it. At 124% against bottom:-62% the
vertical centre still sits exactly on the seam, but the shape is two to
three times wider than it is tall, so the three overlap into one graded
band instead of staying separable as blobs. */
.hero .horizon i{
position:absolute;left:0;bottom:-62%;height:124%;
display:block;border-radius:50%;
will-change:transform,opacity;
}
.hero .horizon .l1{
width:min(120vw,1480px);
background:radial-gradient(50% 50% at 50% 50%,
rgba(111,216,207,.34) 0%, rgba(111,216,207,.13) 42%, rgba(111,216,207,0) 72%);
}
.hero .horizon .l2{
width:min(104vw,1220px);
background:radial-gradient(50% 50% at 50% 50%,
rgba(140,147,245,.36) 0%, rgba(140,147,245,.13) 44%, rgba(140,147,245,0) 74%);
}
.hero .horizon .l3{
width:min(136vw,1680px);
background:radial-gradient(50% 50% at 50% 50%,
rgba(80,86,196,.38) 0%, rgba(96,104,214,.14) 46%, rgba(63,69,168,0) 76%);
}
/* The interactive lobe. --hgx and --hgo are written by phase-field.js from
the same light that lights the moons; both feed a transform and an
opacity, so following the light composites rather than repaints. */
.hero .horizon .light{
width:min(96vw,1000px);
transform:translate3d(calc(var(--hgx,78vw) - 50%),0,0);
opacity:var(--hgo,.16);
background:radial-gradient(50% 50% at 50% 50%,
rgba(190,246,240,.30) 0%, rgba(155,230,223,.11) 38%, rgba(155,230,223,0) 70%);
}
/* The rule, emitting. The same four stops as .hero::after, spread over
64px and faded out upward, so the 2px line reads as the visible edge of
something bright rather than a drawn border. Full width and constant --
it is the horizon itself, not the light crossing it. */
.hero .horizon::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:64px;
background:linear-gradient(90deg,
rgba(63,69,168,.66) 0%, rgba(140,147,245,.58) 40%,
rgba(111,216,207,.58) 78%, rgba(155,230,223,.66) 100%);
-webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.34) 44%,transparent 100%);
mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.34) 44%,transparent 100%);
opacity:.64;
}
@media (prefers-reduced-motion:no-preference){
.hero .horizon .l1{animation:drift1 29s ease-in-out infinite}
.hero .horizon .l2{animation:drift2 37s ease-in-out infinite}
.hero .horizon .l3{animation:drift3 47s ease-in-out infinite}
/* Percentages are of each lobe's own width, so the three travel
different real distances as well as at different rates. */
@keyframes drift1{
0%,100%{transform:translate3d(-14%,0,0) scaleX(1);opacity:.70}
50% {transform:translate3d(62%,0,0) scaleX(1.06);opacity:.94}
}
@keyframes drift2{
0%,100%{transform:translate3d(76%,1%,0) scaleX(1.05);opacity:.86}
50% {transform:translate3d(6%,0,0) scaleX(.97); opacity:.60}
}
@keyframes drift3{
0%,100%{transform:translate3d(24%,0,0) scaleX(1);opacity:.62}
50% {transform:translate3d(-18%,2%,0) scaleX(1.07);opacity:.82}
}
}
/* Reduced motion: the lobes hold at a composed resting spread rather than
vanishing, so the band still reads as a band. */
@media (prefers-reduced-motion:reduce){
.hero .horizon .l1{transform:translate3d(18%,0,0);opacity:.7}
.hero .horizon .l2{transform:translate3d(62%,0,0);opacity:.6}
.hero .horizon .l3{transform:translate3d(4%,0,0); opacity:.6}
}
@media (max-width:700px){
.hero .horizon{height:clamp(190px,34vh,340px)}
.hero .horizon::after{height:52px}
/* Tightened for a phone. The desktop lobes are wide relative to 390px, so a
29-second drift of a soft, screen-spanning wash changes almost nothing you
can see -- it read as static. Three changes together, not one:
narrower the desktop lobes run to 1480px; scaled to the screen there
is a core with somewhere to travel, and movement you can
actually follow.
faster 17s / 23s / 29s instead of 29 / 37 / 47. Still mutually
prime-ish, so they still never line back up.
vertical the desktop keyframes move almost purely sideways; on a
short band that reads as nothing. These rise and sink too,
which is what makes it look like weather rather than a
slider. */
.hero .horizon .l1{width:min(92vw,470px)}
.hero .horizon .l2{width:min(80vw,410px)}
.hero .horizon .l3{width:min(112vw,560px)}
.hero .horizon .light{width:min(120vw,560px)}
}
@media (max-width:700px) and (prefers-reduced-motion:no-preference){
.hero .horizon .l1{animation:drift1m 17s ease-in-out infinite}
.hero .horizon .l2{animation:drift2m 23s ease-in-out infinite}
.hero .horizon .l3{animation:drift3m 29s ease-in-out infinite}
@keyframes drift1m{
0% {transform:translate3d(-30%,5%,0) scaleX(1); opacity:.62}
50% {transform:translate3d(118%,-3%,0) scaleX(1.08); opacity:.96}
100% {transform:translate3d(-30%,5%,0) scaleX(1); opacity:.62}
}
@keyframes drift2m{
0% {transform:translate3d(132%,-2%,0) scaleX(1.06); opacity:.90}
50% {transform:translate3d(-16%,6%,0) scaleX(.96); opacity:.52}
100% {transform:translate3d(132%,-2%,0) scaleX(1.06); opacity:.90}
}
@keyframes drift3m{
0% {transform:translate3d(58%,3%,0) scaleX(1); opacity:.56}
50% {transform:translate3d(-24%,-5%,0) scaleX(1.09); opacity:.84}
100% {transform:translate3d(58%,3%,0) scaleX(1); opacity:.56}
}
}
@media print{.hero .horizon{display:none}}
/* Below the two-column breakpoint the deck stacks under the hero copy, and
with the count now sitting at the bottom of that copy the two ran together
-- "checked 10 hours ago" and "OPEN NOW" on consecutive lines, reading as
one block. Scoped under 960px because at and above it the deck is a grid
item in the second column, where a top margin would drop it out of line
with the headline. */
@media (max-width:959px){
.hero-aside{margin-top:2.25rem}
}
/* -- how applying works -------------------------------------------------- */
/* The three steps that used to sit in the hero. Same content, same
template variables; they are the first thing under the fold now, which
is where a sceptical reader looks for them. Numbering matches .bf-moves
rather than the big Poppins numeral a section heading gets -- two
numbering systems at the same size on one screen read as one broken
system. */
/* A vertical sequence, not a grid. auto-fit broke three items as 2 + 1 inside
the section's 40rem column -- the same break site.css already fixed for
.proof, with the same reasoning: it is a fixed set of three, and three
steps that wrap are no longer legibly three steps. Read as rows, the way
they read in the hero, so relocating them did not also restyle them. */
.bf-apply{
list-style:none;margin:1.8rem 0 0;padding:0;counter-reset:a;max-width:34rem;
}
.bf-apply li{
margin:0 0 1.05rem;counter-increment:a;position:relative;padding-left:1.9rem;
display:flex;gap:.55rem;align-items:baseline;flex-wrap:wrap;
}
.bf-apply li:last-child{margin-bottom:0}
.bf-apply li::before{
content:counter(a);position:absolute;left:0;top:.18rem;
font-family:Poppins,sans-serif;font-size:.72rem;font-weight:600;
letter-spacing:.14em;line-height:1;color:var(--peri-dk);
font-variant-numeric:tabular-nums;
}
.bf-apply b{font-weight:500;font-size:1.02rem;color:var(--ink)}
.bf-apply span{font-size:.94rem;color:var(--ink-soft)}
/* -- the tagline, in the footer ------------------------------------------ */
/* Read on the way out rather than on the way in. */
.foot-tag{
font-family:Poppins,sans-serif;font-weight:300;font-size:1.05rem;
letter-spacing:.035em;color:var(--aqua);opacity:.9;margin:0 0 1.1rem;
}
/* ================================================================== */
/* OPEN NOW, AS ITS OWN SURFACE (2026-09-26) */
/* ================================================================== */
/* The board is not an editorial section and should stop reading as one.
Every other block below the fold is something we wrote; this one is
data read off someone else's site this morning, with a date on it. It
is also the only block on the page that names other companies, and the
one every other block is pointing at.
So it gets its own surface: full-bleed, deep indigo, bracketed top and
bottom by the same four-stop spectrum the hero ends on (.hero::after).
The hero glows up to that rule from below; this is the second lit
surface, and repeating the rule is what makes the two read as one
page's language rather than as a section that lost its stylesheet.
FULL-BLEED, AND WHY IT IS SAFE HERE. 5d in site.css documents what this
normally costs: a full-bleed child that is still a grid item in the
section's second column resolves calc(50% - 50vw) against that column's
centre rather than the page's and overflows to the right -- measured at
1440 as a plate spanning 100->1540. .candid is the one element in the
codebase that escapes correctly, and it does it with two things
together rather than one. Both are reproduced here:
section.wrap:has(.bf-deep){display:block} at >=1080px, dropping the
marginal grid for this section only, and
grid-column:1 / -1 on the plate, for any context where the grid is
still in effect.
The calc then resolves against a box whose centre IS the page centre --
section.wrap carries max-width:56rem;margin-inline:auto at that width,
.wrap carries max-width:var(--wide);margin:0 auto below it -- and the
arithmetic cancels at every width: half the container minus half the
viewport, plus the container's own offset and gutter, lands the plate's
edge at viewport 0 whatever --gutter and the cap happen to be. */
@media (min-width:1080px){
section.wrap:has(.bf-deep){display:block}
}
/* The section's own hairline goes. site.css drops the dotted rule the moment
the marginal number arrives, on the grounds that two devices doing one job
is clutter; the same argument applies here with more force. A 1px rule on
parchment announcing a section, followed by a full-bleed plate with a
spectrum edge of its own, reads as a false start -- the plate IS the
division. Every other section keeps its rule, so the rhythm is unchanged
everywhere the plate is not. */
section.wrap:has(.bf-deep){border-top:0}
.bf-deep{
grid-column:1 / -1;
margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
/* The inline padding lands the board's content on the same vertical
line as every section number on the page, so the eye tracks one
edge straight through the parchment sections and the plate. It is
breakpoint-aware because the target moves: below 1080px the section
box is capped at --wide (84rem), at and above it the marginal grid
caps it at 56rem. Aligning to the section BOX instead -- the naive
calc(50vw - 28rem) -- lands one gutter to the left of the numbers,
which reads as a near-miss rather than as a decision. */
padding:3.4rem max(var(--gutter), calc(50vw - 42rem + var(--gutter))) 3.7rem;
position:relative;color:#C8CEDE;
/* Deliberately not var(--night): the Pro plate below already owns that
near-black, and two identical dark slabs on one page read as one
component used twice. This one is blue and resolves INTO night at the
bottom, so the two are related rather than interchangeable. The two
radials are the hero's own periwinkle and aqua, at a tenth of their
strength -- enough that the field is lit rather than flat, not enough
to compete with the rates. */
background:
radial-gradient(70% 55% at 86% 0%, rgba(111,216,207,.10) 0%, rgba(111,216,207,0) 62%),
radial-gradient(64% 58% at 6% 104%, rgba(140,147,245,.15) 0%, rgba(140,147,245,0) 62%),
linear-gradient(168deg,#1D2352 0%,#1A1E3C 54%,#171A2B 100%);
}
/* The two edges. Pseudo-elements rather than borders because a border
cannot carry a gradient along its length, and the gradient is the
point -- it is the same line, same four stops, as the seam the hero
ends on. */
.bf-deep::before,
.bf-deep::after{
content:"";position:absolute;left:0;right:0;height:2px;
background:linear-gradient(90deg,#3F45A8 0%,#8C93F5 40%,#6FD8CF 78%,#9BE6DF 100%);
}
.bf-deep::before{top:0}
.bf-deep::after{bottom:0}
/* The heading moves INSIDE the plate rather than being hidden. .candid
hides its own h2 with display:none and prints an h3 instead, which
takes the section's real heading out of the accessibility tree
altogether; a board is worth a heading. Moving it one level down drops
`section.wrap > h2` (the marginal column and its big Poppins numeral)
and `.wrap > h2` (the measure cap) without overriding either, because
both are direct-child selectors. The number is reprinted here from the
live counter the way visual-review ยง2 does it -- section.wrap
increments `sec` itself, so the count stays right whether or not its
heading is still a direct child. Aqua, not periwinkle: aqua owns the
dark surfaces (5e), and --peri-dk on this field is unreadable. */
.bf-deep > h2{
margin:0 0 .5rem;color:#EEF2FB;
font-family:Poppins,sans-serif;font-weight:200;
font-size:clamp(1.75rem,4.4vw,2.35rem);
letter-spacing:-.015em;line-height:1.05;
}
.bf-deep > h2::before{
content:counter(sec,decimal-leading-zero);
display:block;font-family:Poppins,sans-serif;
font-size:.72rem;font-weight:600;letter-spacing:.18em;line-height:1;
color:var(--aqua);margin-bottom:.75rem;
font-variant-numeric:tabular-nums;
}
.bf-deep .bf-meta{color:#8E96AB}
.bf-deep-intro{max-width:34rem;margin:0;color:#9AA3B8;font-size:.94rem;line-height:1.6}
/* -- the rows, on dark --------------------------------------------------- */
/* Bled a shade past the text edge so the hover wash has a margin to sit in
and reads as a row rather than as a highlighted sentence. The bleed is on
the CONTAINER, not on each row: the container draws the top hairline and
the rows draw the ones under it, so bleeding only the rows left the top
rule 1rem short of every rule below it. Row padding puts the text back on
the content line, which leaves the rules very slightly wider than the
words -- which is what a board looks like. */
.bf-deep .bf-board{
margin-top:1.7rem;margin-inline:-1rem;
border-top:1px solid var(--rule-dk);
}
.bf-deep .bf-row{
border-bottom:1px solid var(--rule-dk);
padding-inline:1rem;
transition:background-color .12s ease;
}
.bf-deep .bf-row:hover{background:rgba(140,147,245,.08)}
.bf-deep .bf-row b{color:#E9EDF7}
.bf-deep .bf-req{color:#8E96AB}
/* --peri-dk fails on this field; the focus ring has to be visible or it is
not a focus ring. */
.bf-deep .bf-row:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
/* The loudest thing on the surface, which is the whole reason the surface
exists. Poppins 300 rather than the body face: it matches .bf-fig in
"what it pays", so the two places this page states money state it the
same way. */
.bf-deep .bf-rate{
font-family:Poppins,sans-serif;font-weight:300;
font-size:1.24rem;letter-spacing:-.01em;color:var(--aqua);
}
/* Scoped above the row's own stacking breakpoint on purpose. The 820px
rule that drops .bf-row to one column is specificity 0,1,0 inside a
media query, and an unscoped .bf-deep .bf-row at 0,2,0 would outrank it
at every width and un-stack the rows on a phone. */
@media (min-width:821px){
.bf-deep .bf-row{grid-template-columns:minmax(0,1fr) 10.5rem}
}
/* At and above the marginal-grid breakpoint the section box is capped at
56rem rather than --wide, so the line the numbers sit on moves in. */
@media (min-width:1080px){
.bf-deep{padding-inline:max(var(--gutter), calc(50vw - 28rem + var(--gutter)))}
}
/* -- who it came from ----------------------------------------------------- */
/* Wordmarks in our own type, never the platforms' logos. Three reasons, in
ascending order of what they cost: twelve borrowed logos in twelve
visual styles read as a link farm beside one designed set of wordmarks;
a logo is the element that reads as affiliation, and this is a sourcing
line, not a partnership badge; and the platforms whose marks these are
are the same platforms whose listings the board is built from, so a
takedown over a mark would cost the product rather than the mark.
The glyph is drawn rather than typed -- the rule .bf-check, .bf-faq and
.cta-alt already follow -- so it depends on no font, and it is a neutral
lozenge of ours rather than anything borrowed. */
.bf-deep .bf-plat{
display:flex;align-items:center;gap:.5rem;justify-self:start;
color:#9AA3B8;letter-spacing:.14em;
}
.bf-deep .bf-plat::before{
content:"";flex:0 0 auto;width:.4rem;height:.4rem;
border:1px solid var(--peri);transform:rotate(45deg);
}
@media (prefers-reduced-motion:reduce){
.bf-deep .bf-row{transition:none}
}
@media (max-width:700px){
.bf-deep{padding-top:2.5rem;padding-bottom:2.7rem}
.bf-deep .bf-rate{font-size:1.12rem}
.bf-deep .bf-board{margin-inline:-.65rem}
.bf-deep .bf-row{padding-inline:.65rem}
}
/* Matches the print block in site.css, which flattens .candid the same way. */
@media print{
.bf-deep{background:#fff;color:#000;margin:0;padding:0}
.bf-deep::before,.bf-deep::after{display:none}
.bf-deep > h2,.bf-deep .bf-row b{color:#000}
.bf-deep > h2::before,.bf-deep .bf-rate{color:#000}
}