/* ============================================================
ordersup.ai v8 - shared stylesheet
Lineage: mockup M4 (design/2026-08-20-mockup-round/
m4-angie-structure-loan-choices.html @ d4e15c1), stripped of the
review bar, the annotation chips and the dark palette toggle.
Palette: hospitality/knowledge/brand_palette_proposed_2026-08-07,
light expression, with Todd's 21 Aug ruling applied - accent and
accent-deep swapped so the deep green is primary, re-picked rather than
exchanged blind (see the token block below).
============================================================ */
:root{
--paper:#FCFAF6; --paper2:#F6F3EC; --paper3:#EFE9E0; --rule:#DCD9D1;
--ink:#201D14; --ink2:#4D4A42; --muted:#66635B;
/* Todd, 21 Aug (transcript L1609): "let's switch accent and accent deep around."
Applied as a deliberate re-pick, NOT a blind token swap: three things keyed
off the old values and a straight exchange would have broken all three.
Every ratio below is computed, not quoted.
--accent #094120 11.26:1 on paper, 10.59 on paper2, 9.73 on paper3.
--on-accent on it: 11.26:1. Todd's promoted deep green.
--accent-2 #196537 6.81:1 on paper, 5.88 on paper3. Small labels and
eyebrows only: at 11.26:1 the deep green reads as
near-black on small text and stops looking like an
accent. Todd gives latitude at L1604-1606.
--accent-hover #0D5429 label contrast 8.69:1. A LITERAL swap would have made
hover the old mid-green (6.81:1), a big jump that
inverts the hierarchy. This is a deliberate, subtle
lift instead.
--accent-line #8FA796 2.48:1, re-derived as a 45% tint of the NEW accent.
The old #7EAB89 (2.50:1) was a tint of the OLD accent
and stopped reading as the same family.
The palette record's load-bearing rule is that the brand accent and the `pass`
green must not separate by colour alone. The swap IMPROVES that separation,
from 1.20:1 to 1.99:1. Status is still never carried by colour alone. */
--accent:#094120; --accent-2:#196537; --accent-hover:#0D5429; --accent-line:#8FA796;
/* --rule is a decorative hairline (1.35:1) and is fine for dividers. Interactive
component boundaries need 3:1 under WCAG 1.4.11, which --rule fails, so ghost
buttons and controls use --rule-ui. It has to clear 3:1 against EVERY surface a
control can sit on, not just paper: the first value (#949086) cleared paper at
3.06:1 but fell to 2.80:1 on .tint2 and 2.64:1 on paper3, which the gate caught.
#868278 measures paper 3.68, paper2 3.46, paper3 3.18, tint2 3.37. */
--rule-ui:#868278;
--on-accent:#FCFAF6;
/* --band-ink2 measures 9.86:1 on --band; it is the secondary text colour
inside the dark takeaway strip of the market-stats visual (v9.2). */
--band:#1B261C; --band-ink:#F3F1EA; --band-ink2:#C9CFC6;
/* status colours: Todd's one hard palette constraint is that a green,
an orange and a red survive for reporting. Untouched. */
--pass:#207400; --warn:#AC6100; --fail:#9C1216; --neutral:#77736A;
/* v9.4: --warn is a MARK colour and clears 4.5:1 on paper, but the older
pages set amber TEXT on their own tinted grounds, where it measured 4.25
(#FDF3D7) and 4.38 (#F4F7FC). --warn-ink is the same hue carried to text
weight: 7.06:1 and 7.26:1 on those two, 8.31:1 on paper. Nothing that
existed before this line uses it, so no page moved when it was added. */
--warn-ink:#7A4400;
--font-display:"Plus Jakarta Sans", system-ui, sans-serif;
--font-body:"Source Sans 3", system-ui, sans-serif;
--wrap:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:84px}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
margin:0; background:var(--paper); color:var(--ink);
font-family:var(--font-body); font-size:17px; line-height:1.62;
}
h1,h2,h3,h4{font-family:var(--font-display); line-height:1.18; letter-spacing:-0.015em; margin:0 0 .5em}
h1{font-size:clamp(2rem,5.2vw,3.35rem); font-weight:700}
h2{font-size:clamp(1.5rem,3.4vw,2.25rem); font-weight:700}
h3{font-size:clamp(1.1rem,2vw,1.32rem); font-weight:600; letter-spacing:-0.01em}
p{margin:0 0 1rem}
a{color:var(--accent)}
img{max-width:100%; height:auto; display:block}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
section{padding:clamp(3rem,7vw,5.5rem) 0; border-top:1px solid var(--rule)}
section:first-of-type{border-top:0}
.eyebrow{font-family:var(--font-display); font-size:.76rem; font-weight:600; letter-spacing:.14em;
text-transform:uppercase; color:var(--accent-2); margin:0 0 .9rem}
.lede{font-size:clamp(1.02rem,1.7vw,1.16rem); color:var(--ink2); max-width:62ch}
.small{font-size:.9rem; color:var(--muted)}
.tiny{font-size:.82rem; color:var(--muted)}
.tint2{background:color-mix(in srgb, var(--accent) 5%, var(--paper))}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
clip:rect(0 0 0 0); white-space:nowrap; border:0}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:4px}
/* ---------- buttons ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
font-family:var(--font-display); font-weight:600; font-size:.98rem;
padding:.82rem 1.35rem; border-radius:8px; text-decoration:none;
border:1.5px solid transparent; min-height:44px; cursor:pointer;
}
.btn-primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--rule-ui)}
.btn-ghost:hover{border-color:var(--ink2)}
.btnrow{display:flex; flex-wrap:wrap; gap:.7rem; margin:1.4rem 0 0}
/* ---------- grids and cards ---------- */
.grid{display:grid; gap:1.15rem}
@media(min-width:640px){.g2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.g3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--paper2); border:1px solid var(--rule); border-radius:12px; padding:1.35rem 1.3rem}
.card h3{margin-bottom:.4rem}
.card p{margin:0; color:var(--ink2); font-size:.97rem}
/* ---------- site header ----------
Moved to /assets/nav/sitenav.css on 22 Aug 2026 (v9.2). Todd ruled the
same hamburger onto every page, and nine of the sixteen pages under
public/ do not load this file, so the header had to become a component
with its own tokens rather than a section of the v8 stylesheet. There is
exactly one definition of it now; do not re-add rules for .sitehead,
.navlinks, .dd, .ddmenu, .mobnav, .mobpanel or .mobsub here. */
/* ---------- market stats visual (v9.2, Todd's fold-in B, 22 Aug 2026) ----------
Replaces the three RAG figures under the carousel. Todd saw two treatments on
a Todd-only hub page and ruled: the infographic (vertical flow) on mobile,
something like the 16:9 slide (ONLY 14.5% | BUT 85%, takeaway strip) on
desktop, one responsive block rather than two DOM copies, and the slide must
not be a fixed 960px box inside the page.
So this is ONE piece of markup in ONE reading order, and a container query
turns it from a poster into a slide. A container query, not a viewport query:
the block answers to the width of the column it is in, which is what "scale
with the column width" means and what keeps it honest inside the imagery
variant's narrower panels.
Every figure, caption and the source line come from STAT_TRIO and
STAT_SOURCES in the content module, never retyped here: Todd's rule is that
the numbers and the sources are the site's, unchanged.
Colour is not the carrier. ONLY, BUT, "for those that do" and "And in F&B"
carry the argument in words; the two bars carry the F&B gap as a mark on one
shared scale. Measured: band-ink2 9.86:1 and accent-line 6.07:1 on the band,
warn 4.51:1 and muted 5.75:1 on paper, the bar fill 3.66:1 on its track. */
.statviz{
container-type:inline-size;
margin-top:1.9rem;
background:var(--paper);
border:1px solid var(--rule);
border-radius:16px;
padding:clamp(1.3rem,4vw,2.2rem) clamp(1.1rem,3.4vw,2rem);
}
.sv-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
border-bottom:1px solid var(--rule); padding-bottom:.7rem; margin-bottom:1.05rem}
.sv-brand{font-family:var(--font-display); font-weight:700; font-size:1.02rem;
color:var(--ink); letter-spacing:-0.02em}
.sv-brand .dot{color:var(--accent)}
.sv-eyebrow{font-family:var(--font-display); font-size:.68rem; font-weight:600;
letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2); margin:0}
.sv-half{text-align:center}
.sv-kick{font-family:var(--font-display); font-weight:700; line-height:1;
text-transform:uppercase; letter-spacing:.16em; margin:0 0 .45rem}
.sv-kick-only{font-size:clamp(1.25rem,4.2vw,1.8rem); color:var(--warn)}
.sv-kick-those{font-size:clamp(.78rem,2vw,.9rem); letter-spacing:.12em; color:var(--muted);
text-transform:none; font-weight:600}
.sv-fig{display:block; font-family:var(--font-display); font-weight:700; line-height:.92;
letter-spacing:-0.04em; margin:0 0 .45rem; font-size:clamp(3rem,12.5vw,4.6rem)}
.sv-fig-gap{color:var(--ink)}
.sv-fig-win{color:var(--accent)}
/* On a phone the caption gets the whole column: a 24ch measure there costs a
whole extra line per caption, and this block already runs long. */
.sv-cap{font-family:var(--font-display); font-weight:600; font-size:clamp(.95rem,2.6vw,1.05rem);
line-height:1.28; color:var(--ink2); margin:0 auto; letter-spacing:-0.01em}
.sv-pivot{display:flex; align-items:center; gap:.85rem; margin:1.05rem 0}
.sv-pivot .ln{flex:1 1 auto; height:1px; background:var(--rule)}
.sv-pivot .word{flex:0 0 auto; font-family:var(--font-display); font-weight:700;
font-size:clamp(.95rem,2.8vw,1.2rem); letter-spacing:.14em;
color:var(--on-accent); background:var(--accent); border-radius:999px;
padding:.4rem 1.1rem; line-height:1}
.sv-take{background:var(--band); color:var(--band-ink); border-radius:12px;
padding:clamp(.95rem,3vw,1.5rem) clamp(.95rem,3vw,1.4rem);
margin-top:1.2rem; display:flex; flex-direction:column; gap:.8rem}
.sv-blab{font-family:var(--font-display); font-size:.7rem; font-weight:700; letter-spacing:.14em;
text-transform:uppercase; color:var(--accent-line); margin:0 0 .5rem}
.sv-fbfig{display:block; font-family:var(--font-display); font-weight:700; line-height:1;
letter-spacing:-0.035em; font-size:clamp(2.2rem,7.6vw,3.4rem); color:var(--band-ink)}
.sv-fblab{display:block; font-size:.85rem; line-height:1.35; color:var(--band-ink2); margin-top:.3rem}
.sv-txt p{margin:0}
.sv-ctx{font-size:clamp(.95rem,2.4vw,1.02rem); line-height:1.45; color:var(--band-ink2)}
.sv-txt .sv-close{font-family:var(--font-display); font-weight:700; color:var(--accent-line);
font-size:clamp(1.05rem,3.1vw,1.3rem); line-height:1.25; letter-spacing:-0.01em; margin-top:.5rem}
.sv-cmp{display:grid; gap:.5rem}
.sv-cmp-row{display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:.35rem .8rem}
.sv-cmp-name{font-size:.83rem; color:var(--band-ink2); grid-column:1}
.sv-cmp-val{font-family:var(--font-display); font-weight:700; font-size:.93rem;
color:var(--band-ink); grid-column:2}
.sv-cmp-track{display:block; grid-column:1 / -1; height:9px; border-radius:5px;
background:#3A4A3C; overflow:hidden}
.sv-cmp-fill{display:block; height:100%; min-width:3px; border-radius:5px; background:var(--accent-line)}
.sv-cmp-note{font-size:.76rem; line-height:1.45; color:var(--band-ink2); margin:.15rem 0 0}
.sv-src{border-top:1px solid var(--rule); margin-top:1.15rem; padding-top:.7rem;
font-size:.74rem; line-height:1.5; color:var(--muted)}
/* Slide shape once the COLUMN is wide enough, not the window. */
@container (min-width:640px){
.statviz{padding:clamp(1.8rem,3.4cqw,2.6rem) clamp(1.6rem,3cqw,2.4rem)}
.sv-head{margin-bottom:clamp(1.4rem,3cqw,2.2rem)}
.sv-body{display:flex; align-items:center; gap:clamp(1.4rem,3.4cqw,3rem)}
.sv-half{flex:1 1 0; min-width:0}
/* Both kickers reserve the SAME box so 14.5% and 85% sit on one baseline.
It has to be an absolute length: an em here is each kicker's own font-size,
and the two kickers are deliberately different sizes, so em reserved two
different boxes and the 85% floated above the 14.5%. */
.sv-kick{min-height:clamp(2.2rem,3.6cqw,3.1rem);
display:flex; align-items:flex-end; justify-content:center}
.sv-kick-only{font-size:clamp(1.4rem,3.2cqw,2.1rem)}
.sv-kick-those{font-size:clamp(.82rem,1.5cqw,1rem)}
.sv-fig{font-size:clamp(3.6rem,12cqw,6.6rem)}
.sv-cap{font-size:clamp(.95rem,1.9cqw,1.18rem); max-width:22ch; line-height:1.32}
.sv-pivot{flex:0 0 auto; flex-direction:column; align-self:stretch;
justify-content:center; gap:1rem; margin:0}
.sv-pivot .ln{width:1px; height:auto; flex:1 1 auto}
.sv-pivot .word{font-size:clamp(.9rem,1.6cqw,1.1rem); padding:.5rem 1.1rem}
.sv-take{
display:grid; align-items:center;
grid-template-columns:minmax(0,auto) minmax(0,1fr);
grid-template-areas:"fb txt" "cmp cmp";
gap:clamp(1rem,2.2cqw,1.6rem) clamp(1.4rem,3cqw,2.4rem);
margin-top:clamp(1.4rem,3cqw,2.2rem);
padding:clamp(1.2rem,2.6cqw,1.9rem) clamp(1.3rem,2.8cqw,2rem);
}
.sv-fb{grid-area:fb; text-align:center}
.sv-txt{grid-area:txt}
.sv-cmp{grid-area:cmp; grid-template-columns:1fr 1fr; gap:.7rem clamp(1.2rem,3cqw,2.4rem)}
.sv-cmp-note{grid-column:1 / -1}
.sv-fbfig{font-size:clamp(2.8rem,6cqw,4.4rem)}
.sv-ctx{font-size:clamp(.95rem,1.6cqw,1.1rem)}
.sv-txt .sv-close{font-size:clamp(1.15rem,2.1cqw,1.5rem); color:var(--band-ink)}
.sv-src{margin-top:clamp(1.3rem,2.6cqw,2rem)}
}
/* ---------- hero ---------- */
.heroband{
background:
/* The ombre Angie liked ("the colour looks good", L989). It is a color-mix on
--accent, so promoting the deep green shifts it slightly: the 24% stop moves
#C6D6C8 -> #C2CEC3 and the 13% stop #DEE7DD -> #DCE2DA. Small enough that the
thing she liked survives. Ink on the darkest stop measures 10.35:1. */
radial-gradient(120% 90% at 88% 0%, color-mix(in srgb, var(--accent) 24%, var(--paper)) 0%, transparent 62%),
linear-gradient(170deg, color-mix(in srgb, var(--accent) 13%, var(--paper)) 0%, var(--paper) 78%);
border-bottom:1px solid var(--rule);
}
.hero{padding-top:clamp(2.6rem,6vw,4.6rem)}
/* M4 held the h1 to 19ch because it sat in a two-column hero beside the activity
ticker. Both animations are gone (Todd's ruling), so the hero is single-column
and 19ch reads as a broken column rather than a measure. */
.hero h1{max-width:27ch}
.hero h1 .hl{color:var(--accent)}
/* the trust line: bold, smaller than h1, above the lede (Angie, 21 Aug) */
.herotrust{font-family:var(--font-display); font-weight:700; font-size:clamp(1.12rem,2.2vw,1.42rem);
color:var(--accent); margin:.9rem 0 .2rem; max-width:34ch; line-height:1.3}
.hero .lede{margin-top:.6rem; max-width:56ch}
/* v9.4 ruling 1: the trust statement is a claim plus its evidence. The claim is
the display weight the line already had; the evidence reads at body weight in
the same paragraph, so one statement stays one statement. */
.herotrust .cont{font-weight:500; color:var(--ink2); font-size:.86em}
/* ---------- the six things ---------- */
.solgrid{display:grid; gap:1.15rem; grid-template-columns:1fr; margin-top:1.8rem}
@media(min-width:640px){.solgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.solgrid{grid-template-columns:repeat(3,1fr)}}
.solcard{
position:relative; display:flex; gap:.95rem; align-items:flex-start; text-decoration:none;
background:var(--paper2); border:1px solid var(--rule); border-radius:12px;
padding:1.35rem 1.3rem; color:var(--ink); overflow:hidden; isolation:isolate;
}
.solcard:hover{border-color:var(--accent-line)}
.solcard .num{
flex:0 0 auto; width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center;
background:var(--paper3); color:var(--accent); font-family:var(--font-display);
font-weight:700; font-size:.85rem;
}
.solcard h3,.solcard h4{margin-bottom:.35rem; color:var(--ink); font-size:1.05rem}
.solcard p{margin:0 0 .6rem; color:var(--ink2); font-size:.97rem}
.solcard .go{font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--accent)}
/* ---------- imagery variant: photo behind a card ----------
The scrim is opaque enough that card text keeps its measured ratio;
the image is decorative and never the contrast path. */
.photocard{color:var(--ink); min-height:170px}
.photocard .shot{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover}
/* Todd asked for the images as card BACKGROUNDS, not as a header strip. A flat
scrim heavy enough for 4.5:1 everywhere turned every dish into a grey smudge,
which defeats the point of the variant. So the scrim is directional: fully
opaque behind the text on the left, falling away to the top right where the
dish reads. Measured per image by the render gate, not eyeballed. */
.photocard::after{
content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(115deg,
color-mix(in srgb, var(--paper2) 99%, transparent) 0%,
color-mix(in srgb, var(--paper2) 98%, transparent) 46%,
color-mix(in srgb, var(--paper2) 82%, transparent) 68%,
color-mix(in srgb, var(--paper2) 34%, transparent) 100%);
}
.photocard > div, .photocard .num{position:relative; z-index:1}
.photocard h3, .photocard p, .photocard .fn, .photocard .go{max-width:23ch}
.uccard.photocard{min-height:210px; padding-top:7.6rem}
.uccard.photocard .shot{position:absolute; top:0; left:0; right:0; height:6.6rem;
width:100%; object-fit:cover; z-index:-2}
.uccard.photocard::after{
content:""; position:absolute; inset:6.6rem 0 0 0; z-index:-1;
background:var(--paper2); border-top:1px solid var(--rule);
}
/* The real screen capture is a wide product screen, so it needs less band height
than a 4:5 dish photo. Kept shallow on purpose: this card sets the height of
every other card in the row, and a deep band leaves the text-only cards with a
large dead gap above their CTA. */
.uccard.realcard{padding-top:5.2rem}
.uccard.realcard .shot{height:4.3rem; object-position:center top}
.uccard.realcard::after{inset:4.3rem 0 0 0}
.uccard.photocard h3,.uccard.photocard p,.uccard.photocard .fn,.uccard.photocard .go{max-width:none}
/* A card carrying a REAL screen capture says so on the card, in words, because the
annotation chips that used to carry that vocabulary are gone. */
.uccard.realcard::before{
content:"Real screen"; position:absolute; top:.55rem; left:.55rem; z-index:2;
font-family:var(--font-display); font-size:.66rem; font-weight:700; letter-spacing:.09em;
text-transform:uppercase; color:var(--on-accent); background:var(--accent);
padding:.2rem .45rem; border-radius:4px;
}
/* A whole section carrying a photograph behind it (fold-in 3 demonstration).
The scrim is opaque enough for body copy; the scrim probe measures the real
composited pixels rather than trusting this number. */
.photopanel{position:relative; isolation:isolate; overflow:hidden}
.photopanel>.shot{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover}
.photopanel::after{content:""; position:absolute; inset:0; z-index:-1;
background:color-mix(in srgb, var(--paper) 93%, transparent)}
.photopanel.tint2::after{background:color-mix(in srgb, var(--paper2) 94%, transparent)}
.photopanel-dark::after{background:color-mix(in srgb, var(--band) 92%, transparent)}
.imagery-hero{position:relative; isolation:isolate; overflow:hidden}
.imagery-hero .shot{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover}
.imagery-hero::after{
content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(105deg,
color-mix(in srgb, var(--paper) 94%, transparent) 0%,
color-mix(in srgb, var(--paper) 88%, transparent) 52%,
color-mix(in srgb, var(--paper) 72%, transparent) 100%);
}
/* Slim version strip for pages sent out for comment (fold-in 4). */
.verstrip{background:var(--band); color:var(--band-ink); font-size:.86rem; padding:.5rem 0}
.verstrip .wrap{display:flex; flex-wrap:wrap; gap:.2rem .8rem; align-items:baseline}
.verstrip strong{font-family:var(--font-display)}
.verstrip span{color:#C9CFC6}
/* the honesty banner the imagery variant carries, and the plain one does not */
.genbanner{background:#3A2A06; color:#FFF4DE; font-size:.92rem; padding:.75rem 0; line-height:1.45}
.genbanner .wrap{display:flex; gap:.6rem; align-items:flex-start}
.genbanner strong{color:#FFD98A; font-family:var(--font-display)}
.genbanner p{margin:0}
/* The banner is preview chrome sitting above the hero, so on a phone it competes
with the hero for the first screen. It must stay fully legible and fully
present (it is the page's honesty statement), so it is tightened rather than
truncated or collapsed, and the imagery hero gives back the rest. Measured:
without this both hero CTAs sat below the fold at 375x812. */
@media(max-width:40rem){
.genbanner{font-size:.8rem; padding:.55rem 0; line-height:1.38}
.imagery-hero.hero{padding-top:1.3rem}
.imagery-hero .herotrust{font-size:1.02rem; margin:.7rem 0 .2rem}
.imagery-hero .lede{font-size:.98rem}
.imagery-hero .btnrow{margin-top:1rem}
}
/* ---------- carousel ---------- */
.carousel{margin-top:1.6rem}
/* v10.4 fold-in 2 W1 (Todd, 24 Aug): at rest you saw a border sliver of the
next card and "it actually looks like a design issue". MEASURED: at 1280 the
track shows 1080px, four 255px cards plus three 16px gaps is 1068px, and the
fifth card starts at 1084px. Peek was literally ZERO, so the row read as
complete and the carousel read as a mistake.
The card width is the lever and the GAP IS UNTOUCHED, per the instruction:
shrinking gaps reads cramped and does not guarantee a peek. Measured after,
on both carousels (they are the same component):
1280 4 full cards + 56px of the fifth = 23% of a card, 4.3 on screen
390 1 full card + 54px of the second = 19% of a card, 1.2 on screen
Both inside the 15-25% Todd asked for. No edge fade needed: 23% of a card is
not a sliver, it is obviously another card.
THE TRACK SIZE MUST BE FIXED, not a minmax with a zero floor. `minmax(0,
240px)` lets the grid COLLAPSE the tracks to fit the container instead of
overflowing it, and it measured as ten 93px cards on one screen. The old
`minmax(255px, 300px)` worked because of its 255px MINIMUM, not its maximum. */
.cartrack{
display:grid; grid-auto-flow:column; grid-auto-columns:min(80%, 300px);
gap:1rem; overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory; scroll-padding-inline:20px;
padding:.35rem .35rem 1.1rem; margin:0 -.35rem;
scrollbar-width:thin;
}
.cartrack::-webkit-scrollbar{height:8px}
.cartrack::-webkit-scrollbar-thumb{background:var(--rule); border-radius:4px}
.uccard{
scroll-snap-align:start; position:relative; isolation:isolate; overflow:hidden;
display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
background:var(--paper2); border:1px solid var(--rule); border-radius:12px;
padding:1.15rem 1.1rem; min-height:100%;
}
.uccard:hover{border-color:var(--accent-line)}
.uccard .fn{font-family:var(--font-display); font-size:.72rem; font-weight:700; letter-spacing:.1em;
text-transform:uppercase; color:var(--accent-2); margin:0 0 .5rem}
.uccard h3{font-size:1.08rem; margin-bottom:.4rem; color:var(--ink)}
.uccard p{margin:0 0 .9rem; color:var(--ink2); font-size:.94rem}
.uccard .go{margin-top:auto; font-family:var(--font-display); font-weight:600;
font-size:.88rem; color:var(--accent)}
.carctl{display:flex; gap:.5rem; align-items:center; margin-top:.2rem}
.carctl button{
width:44px; height:44px; border-radius:8px; border:1px solid var(--rule-ui);
background:var(--paper); color:var(--ink); cursor:pointer; font-size:1.1rem; line-height:1;
display:grid; place-items:center;
}
.carctl button:hover{border-color:var(--accent); color:var(--accent)}
.carctl button[disabled]{opacity:.4; cursor:default}
.carctl .pos{font-size:.86rem; color:var(--muted); margin-left:.4rem}
/* W1, the laptop half. 240px puts 4.3 cards on the 1080px track, so the fifth
is a clear partial rather than a sliver or a fifth full card. */
@media(min-width:1000px){.cartrack{grid-auto-columns:240px}}
@media(prefers-reduced-motion:reduce){.cartrack{scroll-behavior:auto}}
@media(prefers-reduced-motion:no-preference){.cartrack{scroll-behavior:smooth}}
/* ---------- market stat trio ----------
Back on the page for fold-in 2. Angie presented these as three figures on
20 August and asked only for the wording to change, so they are figures
again rather than a footnote. */
.stattrio{display:grid; gap:1rem; grid-template-columns:1fr; margin-top:1.8rem}
/* ---------- v10.1 fold-in 2: the alternate hero ----------
Todd, 23 Aug: "the stats infographic inserted into the first strip, next to
the 'OrdersUp takes care of' in that right space". One alternate page only.
The visual is the same .statviz block, which carries container-type:
inline-size, so it composes itself for the narrower column with no second
set of rules. Below 900px it stacks under the text, full width, and the two
CTAs stay exactly where they are in the text column. */
.heroalt .heroaltgrid{display:grid; gap:1.6rem; grid-template-columns:1fr}
.heroalt .heroalt-text, .heroalt .heroalt-vis{min-width:0}
.heroalt .heroalt-vis .statviz{margin-top:0}
@media(min-width:900px){
.heroalt .heroaltgrid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
gap:2.4rem; align-items:center}
}
/* ---------- v10.1 fold-in 2B: where the lines break ----------
Todd, 23 Aug: "several other places on the home page where the text has
linebreaks". There is no forced
on the page, in any variant: what he is
seeing is a heading that drops one or two words onto a second line, and a
paragraph that ends on a single word. `balance` evens a heading's lines
instead of leaving a runt; `pretty` stops a paragraph ending on one word.
Both degrade to ordinary wrapping where they are not supported, and nothing
is hard-coded into the copy, so a wording change cannot leave a stale break
behind the way a
would.
SCOPED TO THE HOMEPAGE. This is a copy round and the rest of the tree does
not move; the same class rides the alternate page, because it is built from
the same function. */
.homepage h1, .homepage h2, .homepage h3{text-wrap:balance}
.homepage p, .homepage li, .homepage .sv-cap, .homepage figcaption{text-wrap:pretty}
/* ---------- v10.2 fold-in 6: the six cards grouped under four pillars ----------
Loan's positioning, on the ALTERNATE homepage only, labelled a mock-up. The
cards themselves are unchanged: .solgrid is reused inside each group, so a
card looks and behaves exactly as it does on the default page and only its
surroundings are new. Nothing outside a page that sets SOLUTION_PILLARS uses
any of this. */
.pillar{margin-top:2.2rem}
.pillar:first-of-type{margin-top:1.6rem}
.pillar > h3{font-family:var(--font-display); font-size:clamp(1.08rem,1.9vw,1.28rem);
margin:0 0 .25rem; color:var(--ink)}
.pillar .pillarlede{color:var(--ink2); max-width:62ch; margin:0}
/* v10.2 fold-in 8: a pillar's strapline, between its heading and its
paragraph. Loan's is two fragments with a beat between them, so it is set
as a strapline rather than folded into the sentence after it. Additive:
a pillar with no strapline emits no element. */
/* fold-in 10: Loan numbers her pillars 01 to 05. Her numbering, on her
mock-up, set quietly so it labels the group rather than competing with the
heading. aria-hidden, because "01" read aloud before every heading is noise
to a screen reader and the order is already in the document. */
.pillar .pillarnum{font-family:var(--font-display); font-weight:700; font-size:.78em;
color:var(--muted); margin-right:.5rem; letter-spacing:.04em}
.pillar .pillarstrap{font-family:var(--font-display); font-weight:600;
color:var(--accent); margin:.1rem 0 .45rem; font-size:1.02rem; line-height:1.35}
.pillar .solgrid{margin-top:1rem}
/* A card in a pillar carries no number badge: the 1-to-6 order is what the
pillars replace, and 1 2 3 5 6 4 reads as a fault rather than a regroup.
.solcard is a flexbox and the badge is simply not emitted, so the layout
needs no rule of its own. */
/* the mock-up label: the same idiom as .needshot, which is the site's existing
way of saying "this is not finished, and here is why". */
.mocknote{display:block; border:1px solid var(--rule); border-left:4px solid var(--warn);
border-radius:9px; background:var(--paper2); padding:.75rem .95rem; margin:1.1rem 0 0;
max-width:72ch; font-size:.9rem; color:var(--ink2)}
.mocknote .lab{display:block; font-family:var(--font-display); font-size:.7rem; font-weight:700;
letter-spacing:.09em; text-transform:uppercase; color:var(--warn-ink); margin-bottom:.25rem}
@media(min-width:760px){.stattrio{grid-template-columns:repeat(3,1fr)}}
.stat{border:1px solid var(--rule); border-radius:12px; padding:1.25rem 1.2rem;
background:var(--paper2)}
.stat .fig{display:block; font-family:var(--font-display);
font-size:clamp(2rem,4.6vw,2.6rem); font-weight:700; line-height:1;
letter-spacing:-0.03em; color:var(--accent); margin-bottom:.4rem}
/* RAG. The figure is large text, so the 3:1 floor applies and all three clear it
on this card (pass 5.32:1, warn 4.25:1, fail 7.54:1 on paper2, computed).
The ThatsQuality defaults are dark-theme values and would NOT: Emerald reads
2.29:1 and Amber 1.94:1 here, so the light-tuned brand semantics are used. */
.stat.s-pass .fig{color:var(--pass)}
.stat.s-warn .fig{color:var(--warn)}
.stat.s-fail .fig{color:var(--fail)}
/* the word is dark, not the status colour: at .8rem the status hues would not
clear 4.5:1. Colour lives on the figure and the shape; the word carries meaning. */
.stat .word{display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-display);
font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
color:var(--ink2); margin:0 0 .55rem}
.stat p{margin:0; font-size:.95rem; color:var(--ink2)}
/* ---------- promises ---------- */
.pgrid{display:grid; gap:.8rem; grid-template-columns:1fr; margin-top:1.6rem}
@media(min-width:700px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.pgrid{grid-template-columns:repeat(3,1fr)}}
.pcard{border:1px solid var(--rule); border-radius:11px; padding:.95rem; background:var(--paper)}
.pcard strong{display:block; font-family:var(--font-display); font-size:.98rem; margin-bottom:.25rem}
.pcard p{margin:0; font-size:.85rem; color:var(--muted)}
/* ---------- product frames and the live embed ---------- */
.frame{border:1px solid var(--rule); border-radius:12px; background:var(--paper); overflow:hidden}
.frame-bar{
display:flex; align-items:center; justify-content:space-between; gap:.6rem;
padding:.6rem .9rem; background:var(--paper3); border-bottom:1px solid var(--rule);
font-size:.78rem; color:var(--muted); font-family:var(--font-display); font-weight:600; letter-spacing:.03em;
}
.embedwrap{border:1px solid var(--rule); border-radius:12px; overflow:hidden; background:var(--paper2)}
.embedwrap iframe{width:100%; height:620px; border:0; display:block; background:#fff}
@media(max-width:640px){.embedwrap iframe{height:540px}}
.shotcap{font-size:.86rem; color:var(--muted); margin:.6rem 0 0}
/* ---------- a media slot that is not filled yet ----------
Described in words rather than drawn as a fake screen or a dashed box. */
.needshot{border:1px solid var(--rule); border-left:4px solid var(--warn); border-radius:9px;
background:var(--paper2); padding:.9rem 1rem; margin:1rem 0 0; max-width:64ch}
.needshot .lab{display:block; font-family:var(--font-display); font-size:.7rem; font-weight:700;
letter-spacing:.09em; text-transform:uppercase; color:var(--warn); margin-bottom:.3rem}
.needshot p{margin:0; font-size:.92rem; color:var(--ink2)}
/* ---------- a mock-up of the OrdersUp console (v10.1, R17) ----------
Todd asked for the campaign view drawn "using the current brand palette" of
the operator console. The console's own values are declared HERE, scoped to
the block, in the same way the shared header scopes its --nv-* values: this
site's --ink and --accent cannot reach in, and these cannot reach out.
Every ratio computed, not quoted. On --cm-bg #081C33: --cm-ink 15.04:1,
--cm-ink2 7.50:1, --cm-teal 7.41:1. On the header row --cm-navy #0A2540:
--cm-ink 13.52:1, --cm-ink2 6.74:1. --cm-ink2 is an OPAQUE hex rather than
the console's rgba(...,0.68), so a contrast probe reads a colour rather than
an alpha, and the background-color is declared rather than left to a
gradient, which is the measurement lesson of v10. */
.consolemock{
--cm-bg:#081C33; --cm-navy:#0A2540; --cm-teal:#00BFA6;
--cm-ink:#E9F0F7; --cm-ink2:#A1ACB8; --cm-line:rgba(233,240,247,0.14);
background-color:var(--cm-bg); color:var(--cm-ink); border:1px solid var(--rule);
border-radius:12px; overflow:hidden; margin:1.4rem 0 0; font-size:.9rem; line-height:1.5;
}
.consolemock .cm-bar{display:flex; align-items:center; gap:.9rem; padding:.6rem .95rem;
background-color:var(--cm-navy); border-bottom:1px solid var(--cm-line)}
.consolemock .cm-mark{font-family:var(--font-display); font-weight:700; font-size:.95rem;
letter-spacing:.02em; color:var(--cm-ink)}
.consolemock .cm-mark span{color:var(--cm-teal)}
.consolemock .cm-tab{font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
color:var(--cm-ink2)}
.consolemock .cm-body{padding:.95rem}
.consolemock .cm-h{font-family:var(--font-display); font-weight:700; font-size:1.05rem;
color:var(--cm-ink); margin:0}
.consolemock .cm-sub{color:var(--cm-ink2); font-size:.82rem; margin:.15rem 0 .8rem}
.consolemock .cm-tile{display:inline-flex; flex-direction:column; gap:.1rem;
border:1px solid var(--cm-line); border-radius:9px; padding:.55rem .8rem; margin:0 0 .85rem}
.consolemock .cm-k{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
color:var(--cm-ink2)}
.consolemock .cm-v{font-family:var(--font-display); font-weight:700; font-size:1.5rem;
color:var(--cm-teal); line-height:1.1}
.consolemock .cm-d{font-size:.78rem; color:var(--cm-ink2)}
.consolemock table{width:100%; border-collapse:collapse}
.consolemock th,.consolemock td{text-align:left; padding:.45rem .55rem;
border-bottom:1px solid var(--cm-line)}
.consolemock th{background-color:var(--cm-navy); color:var(--cm-ink2); font-weight:600;
font-size:.75rem; letter-spacing:.06em; text-transform:uppercase}
.consolemock td{color:var(--cm-ink)}
.consolemock .n{text-align:right}
.consolemock tr:last-child td{border-bottom:0}
/* ---------- an example exchange with the agent (v10.1, R18) ----------
Todd: the held capture of a bookable page shows the product but not the
agent. This is the exchange he dictated, set as a conversation and labelled
an example. Guest bubbles take --accent with --on-accent (11.26:1); the
agent's take --paper3 with --ink (13.9:1). */
.chatex{margin:1.2rem 0 0; max-width:52ch}
.chatex .cx-lab{font-family:var(--font-display); font-size:.7rem; font-weight:700;
letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:0 0 .6rem}
.chatex .cx{margin:0 0 .5rem; padding:.6rem .85rem; border-radius:13px; font-size:.92rem;
max-width:88%}
.chatex .cx-a{background:var(--paper3); color:var(--ink); border:1px solid var(--rule);
border-bottom-left-radius:4px}
.chatex .cx-g{background:var(--accent); color:var(--on-accent); margin-left:auto;
border-bottom-right-radius:4px}
.chatex .shotcap{margin-top:.7rem}
/* ---------- people ---------- */
.person{display:flex; gap:1rem; align-items:flex-start}
.mono{
flex:0 0 auto; width:3.4rem; height:3.4rem; border-radius:12px; display:grid; place-items:center;
background:var(--accent); color:var(--on-accent); font-family:var(--font-display);
font-weight:700; font-size:1.35rem;
}
.person h3{margin-bottom:.1rem}
.person .role{font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
font-family:var(--font-display); font-weight:600; margin:0 0 .4rem}
/* ---------- detail pages ---------- */
.crumb{font-size:.88rem; color:var(--muted); margin:0 0 1rem}
.crumb a{color:var(--muted)}
.statusline{display:inline-flex; align-items:center; gap:.5rem; font-size:.88rem;
font-family:var(--font-display); font-weight:600; margin:0 0 1rem}
.dotmark{width:.62rem; height:.62rem; border-radius:50%; flex:0 0 auto}
.sq{border-radius:2px}
.tri{width:0; height:0; border-left:.36rem solid transparent; border-right:.36rem solid transparent;
border-bottom:.62rem solid currentColor; border-radius:0}
.is-pass{background:var(--pass); color:var(--pass)}
.is-warn{background:var(--warn); color:var(--warn)}
.is-hold{background:var(--fail); color:var(--fail)}
.siblings{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem}
.siblings a{border:1px solid var(--rule-ui); border-radius:20px; padding:.4rem .85rem;
font-size:.88rem; color:var(--ink2); background:var(--paper); text-decoration:none}
.siblings a:hover{border-color:var(--accent); color:var(--accent)}
/* ---------- band and footer ---------- */
.band{background:var(--band); color:var(--band-ink); border-top:0}
.band h2,.band h3{color:var(--band-ink)}
.band .lede,.band p{color:#C9CFC6}
.band .card{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14)}
.band .card p{color:#C9CFC6}
.band .card h3{color:var(--band-ink)}
.band a{color:#A7D8B6}
.band .btn-ghost{color:var(--band-ink); border-color:rgba(255,255,255,.34)}
footer{background:var(--paper3); border-top:1px solid var(--rule); padding:2.6rem 0 3rem; font-size:.93rem}
footer a{color:var(--ink2)}
.footgrid{display:grid; gap:1.4rem; grid-template-columns:1fr}
@media(min-width:760px){.footgrid{grid-template-columns:repeat(4,1fr)}}
.footgrid .footh{font-size:.76rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
color:var(--muted); margin:0 0 .6rem; line-height:1.4}
.footgrid a{display:block; padding:.22rem 0; text-decoration:none}
.footgrid a:hover{color:var(--accent)}
.footbase{margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--rule); color:var(--muted)}
@media(prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}
/* ---------------------------------------------------------------- v10.3
Todd, 23 Aug 16:50. Three additive blocks. Nothing that existed before them
uses any of these selectors, so every page already built renders unchanged.
1. .flow the site's body measure, applied to the two build-page sections
whose paragraphs ran the full 1,080px container and left a stub second
line. Same 62ch as .lede, without .lede's size and colour, because these
are body paragraphs rather than a section's opening statement. */
.flow{max-width:62ch}
/* 2. .faqcard the use-case card with no image slot. It IS .uccard: only the
question's line-height and the group label's colour differ, so the
carousel, the snapping, the 44px controls and the keyboard behaviour are
the ones already built and already measured. */
.faqcard h3{line-height:1.32; text-wrap:balance}
.faqcard .fn{color:var(--muted)}
.faqcard p{font-size:.92rem}
/* 3. the /faq/ accordion. Native , so it opens with scripting
blocked. The marker is drawn by us because the platform's default
triangle cannot be given a 44px target. */
/* an inner block, not the .wrap itself: putting the measure on .wrap
would shrink the container and centre the whole column, which is the
one thing no other page on this site does. */
.accordion{max-width:74ch}
.acgroup{margin-top:2.2rem}
.acgroup:first-child{margin-top:0}
.acgroup h2{font-size:1.15rem; letter-spacing:.01em; padding-bottom:.5rem;
border-bottom:1px solid var(--rule); margin-bottom:.2rem}
.acitem{border-bottom:1px solid var(--rule)}
.acitem summary{
list-style:none; cursor:pointer; display:flex; gap:1rem; align-items:flex-start;
justify-content:space-between; padding:.95rem 0; min-height:44px;
font-family:var(--font-display); font-weight:600; font-size:1.02rem; color:var(--ink);
}
.acitem summary::-webkit-details-marker{display:none}
.acitem summary::after{
content:""; flex:0 0 auto; width:11px; height:11px; margin-top:.42rem;
border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
transform:rotate(45deg); transition:transform .18s ease;
}
.acitem[open] summary::after{transform:rotate(225deg)}
.acitem summary:hover{color:var(--accent)}
.acitem summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.acbody{padding:0 0 1.1rem}
.acbody p{color:var(--ink2); max-width:66ch; margin:0 0 .8rem}
.acbody p:last-child{margin-bottom:0}
/* the homepage carousel links here with #q-; give the opened item room
under the sticky header rather than putting it behind it */
.faqpage .acitem{scroll-margin-top:5.5rem}
.faqpage .crumbs{margin-bottom:.6rem}
/* v10.4 R1 (Todd, 24 Aug): *"I like ordersup-v10-3-design-sprints-wide - let's
implement it."* This WAS the ruling-6 comparison render, built so he could
judge the other reading of "not full width" rather than take the argument on
trust, and carrying a note here that it must never reach a candidate page.
He judged it, and it won, so the note is wrong now: it is the Design sprints
page. The switch is unchanged (build.py's BUILD_WIDE); what changed is which
side of the comparison ships. width-sweep.json is re-baselined against it:
the capped page recorded 4 MISMATCH findings, the wide page records 0. */
.buildwide .lede, .buildwide p, .buildwide .flow{max-width:none}
/* ---------- v10.3 fold-in 3 ----------
A5 (Todd, 23 Aug): "I'm changing it so that that all just goes wide."
`text-wrap:balance` equalises a heading's lines, which on the longest heading
on the page leaves both lines short of the width and reads as a narrow stack
in the middle of a full-width section. This heading opts out and fills. */
.homepage h2.widehead{text-wrap:wrap; max-width:none}
/* A4b (Angie): the hero's two columns "level a little bit more" now the text
column is a paragraph shorter. The VISUAL IS NOT RESCALED: it carries its own
container query and redrawing figures to fit a column is how a figure stops
matching its source. The text column is centred against the visual instead,
and the visual is capped at the text column's own comfortable height so the
pair reads as one band rather than as a tall card beside a short one. */
@media(min-width:900px){
.heroalt .heroaltgrid.heroalt-level{align-items:center}
.heroalt .heroaltgrid.heroalt-level .heroalt-text{align-self:center}
/* one restrained step down in scale, plus the visual's own internal rhythm
tightened. Measured before and after; see the fold-in 3 summary for the
numbers and for why full levelling is not on the table: the block's height
is driven by its CONTENT, not by its scale (it sizes in container-query
units), so narrowing it makes it TALLER, and the only remaining lever would
be taking one of Angie's own sourced figures out. Measured: 865px before
this round, 815px with the scale step, 799px with the rhythm tightened,
against a 443px text column. Centred is as level as the pair can be
without changing what the visual says. */
.heroalt .heroaltgrid.heroalt-level .heroalt-vis .statviz{font-size:.9em}
.heroalt .heroaltgrid.heroalt-level .heroalt-vis .sv-head{margin-bottom:1.15rem}
.heroalt .heroaltgrid.heroalt-level .heroalt-vis .sv-pivot{margin:.72rem 0}
.heroalt .heroaltgrid.heroalt-level .heroalt-vis .statviz{
padding-top:clamp(1.4rem,2.6cqw,2rem); padding-bottom:clamp(1.4rem,2.6cqw,2rem);
}
}
/* ---------- v10.4 R2: the hero visual, 30% less tall ----------
Todd, 24 Aug: *"make the infographic embedded in the top section a bit
smaller (i.e. less tall) so that it's closer to the height of the content on
the left. 30% reduction would be about right."*
WHY IT WAS SO TALL, which is the whole fix. .statviz is a container-query
block and the slide layout above turns on at a 640px CONTAINER. In the hero's
right-hand column the container is 510px, so the visual was rendering in its
PHONE form inside a laptop hero: the two halves stacked one above the other
and the bottom card stacked again. That is where the height came from, and it
is why the v10.3 round measured it getting TALLER as the column narrowed.
So the fix is not to shrink a design, it is to give the hero the slide the
design already has, at the width it actually gets. The rules below are the
640px block's own, at a 420px threshold, scoped to the hero instance: nothing
outside .heroalt-level can see them, so the standalone renders of this visual
on every earlier variant are byte-identical.
ONE THING IS RESCALED, and it is a change of position from the v10.3 note
directly above, so it is stated rather than slipped in. .sv-fig's floor is
3.6rem, which at these column widths puts "14.5%" under the BUT pill: the
figures collide. The floor is lowered for the hero instance only. Recorded as
a decision (D5) because "the VISUAL IS NOT RESCALED" was the v10.3 position
and this is a narrow, measured exception to it, not its abandonment: the
figures, the captions and the sources are untouched and the block still says
exactly what it said.
MEASURED at 1280 with the sweep venv, hero visual against the text column
beside it:
799.3px -> 554.5px, against a 442.8px text column. -30.6%
At 390 the container is 350px, below the threshold, so the phone keeps the
stacked form: 688.6px -> 708.5px, the difference being R3's longer closing
line, not this rule. */
@container (min-width:420px){
.heroalt .heroaltgrid.heroalt-level .heroalt-vis .sv-body{
display:flex; align-items:center; gap:clamp(1.4rem,3.4cqw,2.4rem)}
.heroalt .heroaltgrid.heroalt-level .heroalt-vis .sv-half{flex:1 1 0; min-width:0}
.heroalt .heroaltgrid.heroalt-level .heroalt-vis .sv-pivot{
flex:0 0 auto; flex-direction:column; align-self:stretch;
justify-content:center; gap:.8rem; margin:0}
.heroalt .heroaltgrid.heroalt-level .heroalt-vis .sv-pivot .ln{
width:1px; height:auto; flex:1 1 auto}
/* the collision fix, and the one rescale */
.heroalt .heroaltgrid.heroalt-level .heroalt-vis .sv-fig{font-size:clamp(2.4rem,10.5cqw,3.3rem)}
.heroalt .heroaltgrid.heroalt-level .heroalt-vis .sv-fbfig{font-size:clamp(2rem,5.6cqw,2.9rem)}
/* both kickers reserve the same box so the two figures sit on one baseline,
which is what the 640px block does and why it uses an absolute length */
.heroalt .heroaltgrid.heroalt-level .heroalt-vis .sv-kick{
min-height:2rem; display:flex; align-items:flex-end; justify-content:center}
.heroalt .heroaltgrid.heroalt-level .heroalt-vis .sv-take{
display:grid; align-items:center;
grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);
grid-template-areas:"fb txt";
gap:clamp(1rem,2.2cqw,1.6rem) clamp(1.2rem,3cqw,2rem);
margin-top:1.15rem; padding:1.05rem 1.2rem}
.heroalt .heroaltgrid.heroalt-level .heroalt-vis .sv-fb{grid-area:fb; text-align:center}
.heroalt .heroaltgrid.heroalt-level .heroalt-vis .sv-txt{grid-area:txt}
.heroalt .heroaltgrid.heroalt-level .heroalt-vis .sv-fblab{font-size:.78rem}
.heroalt .heroaltgrid.heroalt-level .heroalt-vis .sv-txt .sv-close{
font-size:1.12rem; line-height:1.3}
.heroalt .heroaltgrid.heroalt-level .heroalt-vis .sv-head{margin-bottom:1rem}
.heroalt .heroaltgrid.heroalt-level .heroalt-vis .sv-src{margin-top:1.2rem; padding-top:.65rem}
}
/* .statviz's own padding is NOT in the block above, and this is the reason
rather than an oversight: .statviz IS the query container (it carries the
only container-type in this file), and a container query cannot match the
element that establishes it. A rule for it inside @container is dead, and a
dead rule that describes an intention is worse than no rule, because the
next person measures the page and believes the comment. Its padding stays
the value the v10.3 block sets, measured at 32px, and the -30.6% is reached
without touching it. */
/* ---------- v10.2 fold-in 11: Loan's diagram, on her mock-up only ----------
The intro block and her diagram share a row on a laptop and stack on a phone,
which is the arrangement the hero already uses for the market visual. A
section with no figure gets `nofig` and is a single column, so every earlier
build of this section is byte-identical in its rendering.
The image is capped rather than allowed to fill its column: it is square, so
an uncapped 520px column would make a 520px-tall block beside a ~300px intro
and the pillars would start below the fold of the section. Measured both. */
.pillarintro{display:grid; gap:1.6rem; grid-template-columns:1fr; margin-bottom:2rem}
.pillarintro.nofig{display:block; margin-bottom:0}
.pillarintro-text > :first-child{margin-top:0}
.pillarfig{margin:0; align-self:start}
.pillarfig img{
width:100%; max-width:440px; height:auto; border-radius:12px;
border:1px solid var(--rule); background:var(--paper2);
}
.pillarfig figcaption{
margin-top:.55rem; font-size:.82rem; color:var(--muted); max-width:440px;
line-height:1.45;
}
@media(min-width:900px){
.pillarintro{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:2.4rem;
align-items:start}
.pillarfig{justify-self:end}
.pillarfig img{max-width:100%}
.pillarfig figcaption{max-width:100%}
}