/* ============================================================
Pick One · Sub-page Design System (pick-one-ds.css)
------------------------------------------------------------
Loaded LAST on every sub-page, after that page's own sheet.
WHY THIS FILE EXISTS
Every sub-page (/family/, /365/, /about/, /quiz/, /contact/,
/terms/) grew its own private palette — forest ink, warm ochre,
terracotta, warm sand. None of those colours appear anywhere in
the client's real brand assets. The six brand colours were read
straight out of the client's own logo masters in
drive/Logo/svg/*.svg:
coral #F06858 Pick-one-logo-coral.svg
yellow #FFBD48 Pick-one-logo-yellow.svg
green #C0CB6D Pick-one-logo-green.svg
pink #FAAAB1 Pick-one-logo-pink.svg
turquoise #96CCCA Pick-one-logo-turquoise.svg
blue #94B7D5 Pick-one-logo-blue.svg
The homepage already uses exactly these (assets/pick-one.css),
which is why the homepage reads as Pick One and the sub-pages
read as a different company. This sheet re-points every invented
token at the real brand value, so existing sub-page markup
re-skins without being rewritten.
Sections:
1 · Brand token remap
2 · Type + measure discipline
3 · Flush-text guard (her 2026-08-16 rule, kept on wide copy)
4 · Section rhythm + container lock
5 · Frosted glass system (brandkit signature card)
6 · Cards, grids, equal heights, alignment
7 · Buttons, pills, eyebrows
8 · Header
9 · Footer (the sub-page markup had NO matching CSS at all)
10 · Motion + reduced motion
============================================================ */
/* ---------- 1 · Brand token remap --------------------------- */
/* Same specificity as each page's own :root, but later in source
order, so these win. Nothing else in the page has to change. */
:root {
/* --- Ink ------------------------------------------------- */
--forest-ink: #1a1a1a;
--ink-primary: #1a1a1a;
--ink-light: #302f2e;
--ink-dark: #101010;
--charcoal-body: #302f2e;
--charcoal-muted: #6e6b67;
--charcoal: #333333;
/* --- Primary accent: brand coral -------------------------- */
--terracotta: #f06858;
--terracotta-hover: #d9503f;
--terracotta-light: #fdeeeb;
--terracotta-soft: #fdeeeb;
--terracotta-border: rgba(240, 104, 88, 0.28);
--coral-accent: #f06858;
--accent-terracotta: #f06858;
--accent-coral: #f06858;
--accent-coral-deep: #d9503f;
--accent-coral-ink: #b8402d;
/* --- Secondary accent: brand yellow ----------------------- */
--warm-ochre: #fcbd4c;
--ochre-warm: #fcbd4c;
--warm-ochre-light: #fff6e3;
--ochre-soft: #fff6e3;
--ochre-hover: #f0aa2c;
--warm-ochre-dark: #7a4c00;
--accent-ochre: #fcbd4c;
/* Ochre/yellow is a surface and badge colour, never body text:
#fcbd4c on white is 1.7:1. Text that sat on ochre gets this
deep amber instead, which clears 4.5:1 on cream and white. */
--ochre-ink: #7a4c00;
/* --- Support: brand green, turquoise, pink, blue ---------- */
--sage: #cfe0a8;
--accent-sage: #cfe0a8;
--sage-accent: #cfe0a8;
--sage-tint: #eef3dd;
--sage-light: #f5f8ec;
--sage-dark: #4d5a1f;
--brand-green: #c0cb6d;
--brand-turquoise: #96ccca;
--brand-pink: #faaab1;
--brand-blue: #94b7d5;
/* --- Ground ---------------------------------------------- */
--warm-sand: #fef8ec;
--sand-warm: #fef8ec;
--sand-bg: #fef8ec;
--warm-sand-dark: #fbf0dd;
--surface-warm: #fef8ec;
--surface-tint: #fdf3e2;
--surface-peach: #fcece5;
--surface-card: #ffffff;
--sand-card: #ffffff;
--crisp-white: #ffffff;
/* --- Lines ----------------------------------------------- */
--border-subtle: rgba(26, 26, 26, 0.09);
--border-card: rgba(26, 26, 26, 0.08);
--sand-border: rgba(26, 26, 26, 0.1);
--muted-sand-border: rgba(26, 26, 26, 0.12);
/* --- Age tier chips: brand yellow / turquoise / pink ------ */
--tier-elementary-bg: #fff6e3;
--tier-elementary-text: #7a4c00;
--tier-elementary-border: #f7d99b;
--tier-middle-bg: #e9f5f4;
--tier-middle-text: #1c5a57;
--tier-middle-border: #a9d8d6;
--tier-teen-bg: #fdeef0;
--tier-teen-text: #a3364a;
--tier-teen-border: #f6c3c9;
/* --- Type ------------------------------------------------- */
--font-display: "Gabarito", "Trebuchet MS", system-ui, sans-serif;
--font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
/* --- Shape lock: one radius scale, three steps + pill ----- */
--radius-sm: 0.75rem;
--radius-md: 1.25rem;
--radius-card: 1.25rem;
--radius-lg: 1.75rem;
--radius-full: 62.5rem;
/* --- Elevation ------------------------------------------- */
--shadow-subtle: 0 1px 2px rgba(26, 26, 26, 0.04),
0 8px 20px -14px rgba(26, 26, 26, 0.14);
--shadow-card: 0 1px 2px rgba(26, 26, 26, 0.04),
0 12px 32px -12px rgba(26, 26, 26, 0.12);
--shadow-hover: 0 2px 6px rgba(26, 26, 26, 0.06),
0 22px 48px -18px rgba(26, 26, 26, 0.2);
--shadow-floating: 0 2px 6px rgba(26, 26, 26, 0.06),
0 28px 60px -22px rgba(26, 26, 26, 0.26);
/* --- Container ------------------------------------------- */
--container-max-w: 80rem;
--container-narrow: 46rem;
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* The page background follows the brand cream, not the invented sand. */
body[class*="-page"] {
background-color: var(--cream, #fef8ec);
color: var(--body, #302f2e);
}
/* Browser chrome colour matched the old terracotta on several pages. */
/* ---------- 2 · Type + measure discipline -------------------- */
/* One display family, one body family, both already loaded by
pick-one.css. Headings inherit the shared reset; these rules only
fix the sub-pages that set their own oversized/undersized steps. */
/* NOTE: deliberately no `color` here. An earlier draft set
`color: var(--ink)` on every heading, which outranked the page
rules that put WHITE headings on dark panels — the "Three months
later" banner lost its headline into its own black background.
pick-one.css already sets the default heading colour; anything on
a dark ground sets its own and must be allowed to win. */
body[class*="-page"] h1,
body[class*="-page"] h2,
body[class*="-page"] h3,
body[class*="-page"] h4 {
font-family: var(--font-display);
letter-spacing: -0.022em;
text-wrap: balance;
}
/* Italic display type with descenders clips on leading-none. */
body[class*="-page"] em,
body[class*="-page"] i {
line-height: 1.1;
padding-bottom: 0.06em;
}
/* Reading measure. Long prose lines past ~72ch are hard to track. */
body[class*="-page"] .prose,
body[class*="-page"] .lead,
body[class*="-page"] .section__lede {
max-width: 65ch;
}
/* ---------- 3 · Flush-text guard ----------------------------- */
/* Her standing rule (2026-08-16) is that running copy sits flush on
both edges, and pick-one.css sets `p, li { text-align: justify }`
site-wide to do it. That reads well on a wide column. In a narrow
one it cannot: with fewer than ~46 characters per line the browser
has too few word gaps to absorb, so it stretches the ones it has
and opens rivers of white down the card. That is what made the
sub-page card grids look broken.
So the rule is kept where it works and switched off where it
physically cannot: inside cards, chips, list rows, table cells,
captions and any column narrower than ~46ch. Wide prose stays
flush exactly as she asked. */
body[class*="-page"] :is(
.card, .feature-card, .review-card, .story-card, .pricing-card,
.spin-card, .mech-card, .tier-card, .cat-card, .qf-card, .qcard,
.framework-card, .trust-badge-card, .sidebar-card, .principle,
.glass, .q-glass, .faq-item, .faq__answer, .objection-item,
.matrix-item, .pillar-item, .metric-item, .card-3d, .topic-card,
.timeline-card, .mechanism-card, .experience-feature-item,
.pricing-feature-item, .qcard-frosted, .stat-insight-card,
.feature-box, .outcome-banner, .review-box, .price-box,
.hero-fe__floating-card, .hero-365__floating-card,
.showcase-prompt-card, .prompt-card-text, .month-info, .theme-pill-btn, .theme-showcase-panel,
figcaption, blockquote, td, th, dd, dt
) :is(p, li, span, div, h2, h3, h4),
body[class*="-page"] :is(p, li):is(
.pill, .chip, .eyebrow, .note, .caption, .meta, .footnote,
.badge-pill, .card-hint, .prompt-card-text,
/* Money page: the question cards and the category rail are cards that
happen to BE a or an
, so they need naming here rather than in
the ancestor list above. */
.qcard, .cat-card,
/* Terms page: sidebar contents rows and the contact table are all
narrow label/value pairs, not prose. */
.terms-toc__item, .terms-toc__support-title, .terms-toc__support-text,
.terms-contact-col__label, .terms-contact-col__val
) {
text-align: start;
text-align-last: auto;
-webkit-hyphens: none;
hyphens: none;
}
/* Section ledes are one or two short centred sentences. Flush text
needs word gaps to absorb the slack and a two-line sentence has
almost none, so it stretches the few it has instead. */
body[class*="-page"] :is(
.section-subtitle, .section__sub, .section-lede, .section__lede,
.tier-intro__text, .lede, .subtitle
) {
text-align: center;
text-align-last: auto;
-webkit-hyphens: manual;
hyphens: manual;
text-wrap: pretty;
}
/* ---------- 4 · Section rhythm + container lock -------------- */
/* Every sub-page invented its own section padding, so the vertical
rhythm changed from page to page and inside pages. One scale. */
/* 2026-08-31: 6.5rem top + 6.5rem bottom was 208px of the 900px viewport
spent on padding alone, and pushed a dozen blocks past one screen.
4.5rem (72px at 1440) is the standard web rhythm; the composition
inside each block carries the breathing room. */
body[class*="-page"] .section {
padding-block: clamp(3rem, 5vw, 4.5rem);
}
body[class*="-page"] .section--tight {
padding-block: clamp(2rem, 3.5vw, 3rem);
}
body[class*="-page"] .wrap,
body[class*="-page"] .container {
width: 100%;
max-width: var(--container-max-w);
margin-inline: auto;
padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
body[class*="-page"] .wrap--narrow,
body[class*="-page"] .container--narrow {
max-width: var(--container-narrow);
}
/* Alternating band colours, so section changes read as intentional
instead of as three near-identical creams stacked together. */
body[class*="-page"] .section--warm { background: var(--cream, #fef8ec); }
body[class*="-page"] .section--paper { background: #ffffff; }
body[class*="-page"] .section--ink {
background: var(--ink, #1a1a1a);
color: #f2efe9;
}
body[class*="-page"] .section--ink :is(h1, h2, h3, h4) { color: #ffffff; }
/* ---------- 5 · Frosted glass system ------------------------- */
/* The approved moodboard direction (approved.md, 2026-08-17) calls
for a "light frosted-glass question card ... translucent
white/cream surface, rounded corners, restrained backdrop blur,
subtle border and shadow, a small colour-coded category pill,
concise high-contrast copy", used ONLY at signature moments.
That is the whole glass budget for the site: heroes, key
storytelling images, product demos. Not every card. */
.glass {
background: rgba(255, 255, 255, 0.72);
-webkit-backdrop-filter: blur(20px) saturate(1.35);
backdrop-filter: blur(20px) saturate(1.35);
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: var(--radius-md);
box-shadow:
0 1px 1px rgba(26, 26, 26, 0.04),
0 18px 40px -20px rgba(26, 26, 26, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* Warmer variant for cream grounds. */
.glass--cream {
background: rgba(254, 248, 236, 0.78);
border-color: rgba(255, 255, 255, 0.7);
}
/* Dark variant for use over photography or the ink band. */
.glass--ink {
background: rgba(26, 26, 26, 0.55);
border-color: rgba(255, 255, 255, 0.18);
color: #ffffff;
box-shadow:
0 1px 1px rgba(0, 0, 0, 0.2),
0 18px 40px -18px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
/* The signature question card. */
.q-glass {
display: grid;
gap: 0.75rem;
padding: 1.25rem 1.375rem;
max-width: 24rem;
}
.q-glass__pill {
justify-self: start;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.3rem 0.7rem;
border-radius: var(--radius-full);
background: var(--brand-turquoise);
color: #14403e;
font-family: var(--font-body);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.q-glass__pill--coral { background: var(--brand-pink); color: #7d2530; }
.q-glass__pill--yellow { background: var(--warm-ochre); color: var(--ochre-ink); }
.q-glass__pill--green { background: var(--brand-green); color: #3d470f; }
.q-glass__q {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1rem, 1.5vw, 1.1875rem);
font-weight: 700;
line-height: 1.32;
color: var(--ink, #1a1a1a);
text-align: start;
}
.q-glass__meta {
margin: 0;
font-size: 0.8125rem;
color: var(--muted, #6e6b67);
text-align: start;
}
/* Fallback for browsers without backdrop-filter: stay legible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass { background: rgba(255, 255, 255, 0.95); }
.glass--ink { background: rgba(26, 26, 26, 0.9); }
}
/* ---------- 6 · Cards, grids, equal heights, alignment ------- */
/* Card image containers across all sub-pages */
body[class*="-page"] .pricing-card__img-wrap,
body[class*="-page"] .pcard__img-wrap,
body[class*="-page"] .mini-deck-card__img-wrap {
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: var(--radius-md, 12px);
margin-bottom: 1.25rem;
background: #fbf0dd;
display: block;
}
body[class*="-page"] .pricing-card__img-wrap picture,
body[class*="-page"] .pricing-card__img-wrap img,
body[class*="-page"] .pcard__img-wrap picture,
body[class*="-page"] .pcard__img-wrap img,
body[class*="-page"] .mini-deck-card__img-wrap picture,
body[class*="-page"] .mini-deck-card__img-wrap img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* NOTE ON SELECTOR SCOPE: an earlier draft matched [class*="__card"]
to catch every card in one rule. That also swallowed the hero's
floating question overlay, whose children are named
hero-fe__card-tag / __card-question / __card-footer, and blew it
apart into three stacked white boxes. Wildcards are not safe
against BEM-ish markup. Every selector below is an explicit
class, taken from a class inventory of the sub-page markup. */
/* Card ROWS become grids so neighbours share a height. */
body[class*="-page"] :is(
.card-grid, .cards, .grid-3, .features__grid, .feature-grid,
.tier-grid, .reviews__grid, .review-grid, .pricing__grid,
.pricing-grid, .spin-grid, .mech-grid, .story-grid, .matrix-grid
) {
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
align-items: stretch;
}
body[class*="-page"] .mech-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
body[class*="-page"] :is(
.card-grid, .cards, .grid-3, .features__grid, .feature-grid,
.reviews__grid, .review-grid, .pricing__grid, .pricing-grid,
.spin-grid, .story-grid, .matrix-grid
) {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}
/* A card is a column: its last child pins to the bottom, so a row
of cards shares one baseline instead of three. Named classes
only — nothing here may match a hero overlay part. */
body[class*="-page"] :is(
.feature-card, .feature-box, .review-card, .story-card,
.pricing-card, .spin-card, .mech-card, .tier-card, .cat-card,
.qf-card, .framework-card, .trust-badge-card, .sidebar-card,
.principle
) {
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid var(--border-card);
border-radius: var(--radius-card);
box-shadow: var(--shadow-subtle);
padding: clamp(1.25rem, 2vw, 1.75rem);
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
body[class*="-page"] :is(
.feature-card, .feature-box, .spin-card, .tier-card,
.cat-card, .story-card
):hover {
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
}
body[class*="-page"] :is(
.feature-card, .feature-box, .spin-card, .story-card, .review-card
) > :last-child {
margin-top: auto;
}
/* Anything clickable says so. */
body[class*="-page"] :is(a, button, summary, [role="button"], [role="tab"]) {
cursor: pointer;
}
/* ---------- 7 · Buttons, pills, eyebrows --------------------- */
/* Primary action is brand coral everywhere, matching the homepage. */
body[class*="-page"] :is(.btn--terracotta, .btn--primary, .btn--coral) {
background: var(--coral, #f06858);
color: #ffffff;
border: 1px solid transparent;
}
body[class*="-page"] :is(.btn--terracotta, .btn--primary, .btn--coral):hover {
background: var(--coral-deep, #d9503f);
}
body[class*="-page"] .btn--ochre {
background: var(--warm-ochre);
color: var(--ink, #1a1a1a);
}
body[class*="-page"] .btn--ochre:hover { background: var(--ochre-hover); }
body[class*="-page"] :is(.btn--outline, .btn--ghost) {
background: #ffffff;
color: var(--ink, #1a1a1a);
border: 1px solid var(--border-card);
}
body[class*="-page"] :is(.btn--outline, .btn--ghost):hover {
border-color: var(--coral, #f06858);
color: var(--coral-deep, #d9503f);
}
/* THE BUTTON IS NOT RE-DECLARED HERE, for the same reason the header
is not: the homepage does NOT load this sheet, so anything restyled
here silently diverges from it. An earlier draft set
`font-family: var(--font-body)` on `.btn`, which put every sub-page
button in Figtree while the homepage stayed in Gabarito. Same menu
bar, different lettering on the button.
pick-one.css owns `.btn` and sets Gabarito at 19px. That size is
load-bearing, not cosmetic: white on brand coral measures 3.08:1,
which only clears WCAG AA at the large-text threshold of 18.66px
bold. Shrinking a coral button below that fails contrast. The rules
below therefore restore the canonical size on the nav button and
only add what pick-one.css genuinely lacks. */
body[class*="-page"] .btn { white-space: nowrap; }
body[class*="-page"] .btn--block { width: 100%; white-space: normal; }
/* Every sub-page sheet re-declared `.btn` with its own font and size:
family.css and 365.css set Figtree, quiz.css hard-codes
"Figtree, sans-serif", and all three shrink `.btn--sm` to 0.9rem
(14.4px). So a button read Gabarito 19px on the homepage and
Figtree 14-15px next door.
Two problems, not one. The lettering is inconsistent, and 14.4px
white-on-coral fails the contrast floor: that pairing measures
3.08:1 and only passes WCAG AA above 18.66px bold. Both are fixed
by putting every button back on the canonical face and size. Size
variants keep their padding, so the buttons still differ in weight
on the page, just not in typeface. */
body[class*="-page"] .btn {
font-family: var(--display);
letter-spacing: -0.005em;
}
body[class*="-page"] :is(.btn, .btn--sm, .btn--lg, .nav__cta) {
font-size: 1.1875rem;
}
body[class*="-page"] .btn--sm { padding: 0.72rem 1.2rem; }
body[class*="-page"] .btn--lg { padding: 1.1rem 2.2rem; }
/* Eyebrows: the sub-pages put one above every single section, which
is the strongest single "generated page" tell there is. Only an
eyebrow explicitly marked .eyebrow--keep survives; the rest are
removed from the flow in markup, and this is the backstop. */
/* The backstop, made real (2026-08-31): an eyebrow only renders when the
markup opts in with .eyebrow--keep. Budget is one per three sections. */
body[class*="-page"] :is(.eyebrow, .section-eyebrow, .contact-eyebrow, .mv-stream__pill):not(.eyebrow--keep) {
display: none !important;
}
body[class*="-page"] .eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--coral-ink, #b8402d);
margin-bottom: 0.75rem;
}
/* An eyebrow that is a direct child of a grid or flex column gets
BLOCKIFIED: `display:inline-flex` computes to `flex` and the pill
stretches the full column width instead of hugging its label. That
is what turned the 365 badges into full-width bars. fit-content
plus a start alignment holds them to their text in every context. */
body[class*="-page"] :is(.eyebrow, .section-eyebrow, .contact-eyebrow) {
width: fit-content;
max-width: 100%;
justify-self: start;
align-self: start;
}
/* Inside a centred section header the pill centres with the header. */
body[class*="-page"] :is(.section-header, .center, [class*="__head"])
:is(.eyebrow, .section-eyebrow, .contact-eyebrow) {
margin-inline: auto;
justify-self: center;
}
/* ---------- 8 · Header --------------------------------------- */
/* THE HEADER IS NOT RESTYLED HERE. An earlier draft re-declared the
whole `.nav` component for sub-pages with its own background,
height, logo size, link size and gap. The homepage does NOT load
this sheet, so it kept the original `.nav` rules from
pick-one.css, and the result was two different header bars: white
/ 84px tall / 46px logo / 16px links on the homepage, cream /
72px / 40px logo / 15px links everywhere else. Same links, visibly
different bar.
`pick-one.css` already defines `.nav` completely and correctly.
Every page uses that one component now, so the ONLY thing this
sheet adds is the current-page indicator, which pick-one.css has
no rule for. Nothing here may change header geometry or colour. */
body[class*="-page"] .nav__links a.active {
color: var(--coral-deep, #d9503f);
border-bottom-color: var(--coral, #f06858);
}
/* ---------- 10 · Motion -------------------------------------- */
/* Transform and opacity only, so nothing triggers layout. */
@media (prefers-reduced-motion: reduce) {
body[class*="-page"] *,
body[class*="-page"] *::before,
body[class*="-page"] *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ============ Pick One 1,000+ Question Stream Enhancement ============ */
/* 2026-08-31: the stream was a dark forest-green band (#14221a) in the
middle of a white/cream page. That colour is not in the brand, and a
page that flips to dark for one section reads as two websites. The
deck's own "question wall" (slide 21) is white cards on cream. */
.mv-stream {
background: var(--cream, #fef8ec) !important;
color: var(--body, #302f2e) !important;
}
.mv-card {
background: #ffffff !important;
color: var(--ink, #1a1a1a) !important;
}
.mv-card p.mv-card__q {
font-family: var(--font-display, 'Gabarito', sans-serif) !important;
font-size: 1.12rem !important;
line-height: 1.42 !important;
color: var(--ink, #1a1a1a) !important;
font-weight: 700 !important;
}
.mv-stream__head h2,
.mv-stream__head .h-1 {
color: var(--ink, #1a1a1a) !important;
}
.mv-stream__head p.lead {
color: var(--body, #302f2e) !important;
}
/* ==========================================================================
Centered Headlines & Sub-headlines Design Standard (Reference Standard)
========================================================================== */
/* Reference standard: Centered headline with balanced text wrap and centered
sub-headline with comfortable reading measure, elegant leading, and centered alignment. */
:is(body, body[class*="-page"], .page-365, .365-page, .family-page, .about-page, .quiz-page, .contact-page, .terms-page, .money-page) :is(
.section-header,
.section-header--center,
.section-header-center,
.section-heading-center,
.section-head,
.center,
.hero__head,
.hero-365__head,
.about-hero__head,
.contact-hero__header,
.contact-card__header,
.quiz-landing__head-wrap,
.mv-stream__head
) {
text-align: center !important;
margin-inline: auto !important;
max-width: clamp(38rem, 85vw, 56rem);
}
:is(body, body[class*="-page"], .page-365, .365-page, .family-page, .about-page, .quiz-page, .contact-page, .terms-page, .money-page) :is(
.section-header,
.section-header--center,
.section-header-center,
.section-heading-center,
.section-head,
.center,
.hero__head,
.hero-365__head,
.about-hero__head,
.contact-hero__header,
.contact-card__header,
.quiz-landing__head-wrap,
.mv-stream__head
) :is(
h1, h2, h3,
.h-hero, .h-1, .h-2,
.section-title,
.hero__title, .hero-365__title, .hero-fe__title, .hero-decision__title,
.disconnection__title, .problem-editorial__title,
.manifesto-headline, .contact-hero__title, .contact-card__title,
.quiz-landing__head, .quiz-loading-title
) {
text-align: center !important;
margin-inline: auto !important;
text-wrap: balance !important;
}
:is(body, body[class*="-page"], .page-365, .365-page, .family-page, .about-page, .quiz-page, .contact-page, .terms-page, .money-page) :is(
.section-header,
.section-header--center,
.section-header-center,
.section-heading-center,
.section-head,
.center,
.hero__head,
.hero-365__head,
.about-hero__head,
.contact-hero__header,
.contact-card__header,
.quiz-landing__head-wrap,
.mv-stream__head
) :is(
.lead,
.hero__sub,
.section-lead,
.section-subtitle,
.section-lede,
.section__sub,
.contact-hero__lead,
.contact-card__subtitle,
.quiz-landing__sub,
.quiz-loading-sub,
.pivot-lead,
.problem-editorial__sub,
.matrix-subhead,
.psych-subhead,
.features-subhead
) {
text-align: center !important;
margin-inline: auto !important;
max-width: clamp(30rem, 74vw, 48rem) !important;
line-height: 1.55 !important;
text-wrap: pretty !important;
}
:is(body, body[class*="-page"], .page-365, .365-page, .family-page, .about-page, .quiz-page, .contact-page, .terms-page, .money-page) :is(
.section-header,
.section-header--center,
.section-header-center,
.section-heading-center,
.section-head,
.center,
.hero__head,
.hero-365__head,
.about-hero__head,
.contact-hero__header,
.contact-card__header,
.quiz-landing__head-wrap,
.mv-stream__head
) :is(
.eyebrow,
.section-eyebrow,
.contact-eyebrow,
.quiz-badge,
.badge-pill
) {
margin-inline: auto !important;
align-items: center !important;
justify-content: center !important;
}
/* The centred-header rule above used to force `display:inline-flex
!important` on every eyebrow inside a section header, which out-ranked
the .eyebrow--keep backstop and put the eyebrows back on the 365 page
only. Badges keep their flex box; eyebrows answer to the backstop. */
body[class*="-page"] :is(.quiz-badge, .badge-pill) { display: inline-flex; }
/* Ensure no override forces start-alignment on section headers */
:is(body, body[class*="-page"], .page-365, .365-page, .family-page, .about-page, .quiz-page, .contact-page, .terms-page, .money-page) .section-header--start {
text-align: center !important;
margin-inline: auto !important;
}
:is(body, body[class*="-page"], .page-365, .365-page, .family-page, .about-page, .quiz-page, .contact-page, .terms-page, .money-page) .section-header--start :is(h1, h2, h3, p, span) {
text-align: center !important;
margin-inline: auto !important;
}
/* ---------- 11 · Shared anti-slop blocks (2026-08-31) --------------
Two layouts every sub-page kept re-inventing as "generic AI":
the comparison (two coloured cards with red/green top borders) and
the feature grid (six identical icon boxes). They are now ONE
component each, drawn from the client's deck: the comparison is a
white stage on cream with the real app render in the middle and
pale brand chips on both sides (deck slide 16); the feature block
is a client render beside a two-column check list (deck slide 27).
Used by /family, /365 and /about. ------------------------------- */
/* The comparison stage, rebuilt 2026-08-31 (round 3) to follow the
client's family deck, slide 16: one question bubble on each side, a
dashed line down to a shield (resistance) or a heart (openness), the
outcome in caps, the app in the middle with dashed connectors. No card
around it; the section colour is the stage. Both sides share one row
grid (subgrid), so bubbles, icons and labels line up across the phone. */
.bridge-stage {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: repeat(6, auto);
column-gap: clamp(1rem, 3vw, 2.5rem);
align-items: start;
margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 56rem) {
.bridge-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 16rem) minmax(0, 1fr); }
}
.bridge-side {
display: grid;
grid-template-rows: subgrid;
grid-row: 1 / span 6;
justify-items: center;
text-align: center;
}
.bridge-side > * { margin: 0; }
.bridge-stage__phone { display: none; grid-row: 1 / span 6; align-self: center; }
@media (min-width: 56rem) { .bridge-stage__phone { display: block; } }
.bridge-stage__phone img {
display: block;
width: min(100%, 15rem);
height: auto;
margin-inline: auto;
filter: drop-shadow(0 20px 36px rgba(26, 26, 26, 0.16));
}
.bridge-chip {
grid-row: 1;
margin-bottom: 1rem;
display: inline-flex;
align-items: center;
padding: 0.35rem 0.85rem;
border-radius: var(--radius-full);
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.bridge-chip--ask { background: var(--terracotta-light); color: var(--coral-ink, #b8402d); }
.bridge-chip--card { background: var(--sage-tint); color: var(--sage-dark); }
.bridge-q {
grid-row: 2;
align-self: stretch;
justify-self: stretch;
display: flex;
align-items: center;
justify-content: center;
padding: 1.1rem 1.25rem;
border-radius: var(--radius-md);
background: #ffffff;
border: 1px solid var(--border-card);
box-shadow: var(--shadow-subtle);
font-family: var(--font-display);
font-size: clamp(1.05rem, 1.6vw, 1.3rem);
font-weight: 700;
line-height: 1.3;
color: var(--ink, #1a1a1a);
text-wrap: balance;
}
.bridge-arrow {
grid-row: 3;
display: block;
position: relative;
width: 2px;
height: 2.5rem;
margin-block: 0.4rem 0.6rem;
background: repeating-linear-gradient(to bottom, currentColor 0 4px, transparent 4px 8px);
}
.bridge-arrow::after {
content: "";
position: absolute;
left: 50%;
bottom: -1px;
width: 0.55rem;
height: 0.55rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateX(-50%) rotate(45deg);
}
.bridge-arrow--down { color: var(--coral-deep, #d9503f); }
.bridge-arrow--up { color: var(--sage-dark); }
.bridge-icon {
grid-row: 4;
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
justify-self: stretch;
}
.bridge-icon::before, .bridge-icon::after { content: ""; flex: 1 1 0; height: 0; border-top: 2px dashed transparent; }
.bridge-icon svg {
flex: none;
box-sizing: border-box;
width: 4.75rem;
height: 4.75rem;
padding: 1.25rem;
border-radius: 50%;
}
.bridge-icon--down svg { background: var(--terracotta-light); color: var(--coral-deep, #d9503f); }
.bridge-icon--up svg { background: var(--sage-tint); color: var(--sage-dark); }
@media (min-width: 56rem) {
.bridge-side--ask .bridge-icon::after { border-top-color: rgba(217, 80, 63, 0.55); }
.bridge-side--card .bridge-icon::before { border-top-color: rgba(77, 90, 31, 0.55); }
}
.bridge-result {
grid-row: 5;
margin-top: 1rem;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(0.95rem, 1.5vw, 1.2rem);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.bridge-result i { font-style: normal; margin-left: 0.3rem; }
.bridge-result--down { color: var(--coral-deep, #d9503f); }
.bridge-result--up { color: var(--sage-dark); }
.bridge-note {
grid-row: 6;
margin-top: 0.55rem;
max-width: 30ch;
font-size: 0.95rem;
line-height: 1.5;
color: var(--body, #302f2e);
-webkit-hyphens: manual;
hyphens: manual;
}
.bridge-payoff {
margin: clamp(2rem, 3.5vw, 2.75rem) auto 0;
max-width: 46rem;
text-align: center;
text-align-last: center;
font-family: var(--font-display);
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
font-weight: 600;
line-height: 1.5;
color: var(--ink, #1a1a1a);
-webkit-hyphens: manual;
hyphens: manual;
}
/* The coral sentence is the punchline, so it gets its own line and a beat of
space instead of trailing off the end of a dense block. */
.bridge-payoff strong {
display: block;
margin-top: 0.65rem;
color: var(--coral-deep, #d9503f);
}
/* The "why this works" points. Her note, 2026-09-03: "too difficult to
consume, too close to the other section". The old version ran the label and
the tail together on one line joined by an en dash, at a 9px row gap, so
four separate ideas read as one grey paragraph and the longer two wrapped
into a hanging second line with no bullet. It also sat 18px under the
diagram above it and 18px over the payoff below, so it crowded both.
Now each point is its own card: the label on its own line, the tail under
it, four equal blocks on a 2x2 grid the eye can scan one at a time. The en
dash is gone with the single line, which also settles a house rule it had
been quietly breaking (it was injected from CSS, so the dash sweep over the
markup never saw it). */
.bridge-points {
list-style: none;
margin: clamp(2.25rem, 4vw, 3.25rem) auto 0;
padding: 0;
max-width: 58rem;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.bridge-point {
position: relative;
margin: 0;
padding: 1.05rem 1.35rem 1.15rem 2.6rem;
background: #fff;
border: 1px solid var(--border-card, rgba(26, 46, 34, 0.08));
border-radius: var(--radius-md, 14px);
box-shadow: 0 1px 2px rgba(26, 46, 34, 0.04);
font-size: 0.95rem;
line-height: 1.5;
color: var(--body, #302f2e);
text-align: start;
-webkit-hyphens: manual;
hyphens: manual;
}
.bridge-point::before {
content: "";
position: absolute;
left: 1.35rem;
top: 1.5rem;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--coral, #f06858);
}
.bridge-point strong {
display: block;
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
line-height: 1.3;
color: var(--ink, #1a1a1a);
margin-bottom: 0.25rem;
}
.bridge-point span {
display: block;
font-size: 0.9rem;
line-height: 1.5;
color: var(--muted, #6e6b67);
}
/* Her note, 2026-09-03: "too close to the other section". Whichever of these
two ends the block, it gets a gap under it so the section does not run
straight into the next headline. Written on the component rather than on a
page id, so /365/ gets it too. */
.bridge-points:last-child,
.bridge-payoff:last-child {
margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
/* pick-one.css justifies every p and li; these are centred or ragged. */
.bridge-q, .bridge-note { text-align: center; text-align-last: center; }
.bridge-point { text-align: start; text-align-last: start; }
/* Tightened after measuring the three pages at 1440x900 (1,002 / 933 / 948). */
.bridge-stage { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.bridge-stage__phone img { width: min(100%, 13.5rem); }
.bridge-q { padding: 1rem 1.15rem; font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.bridge-arrow { height: 2.25rem; margin-block: 0.35rem 0.5rem; }
.bridge-icon svg { width: 4.25rem; height: 4.25rem; padding: 1.1rem; }
.bridge-result { margin-top: 0.8rem; }
.bridge-note { font-size: 0.92rem; max-width: 28ch; }
@media (max-width: 56rem) {
.bridge-chip { font-size: 0.68rem; padding: 0.3rem 0.65rem; margin-bottom: 0.75rem; }
.bridge-q { font-size: 1rem; padding: 0.85rem 0.9rem; }
.bridge-arrow { height: 1.75rem; }
.bridge-icon svg { width: 3.25rem; height: 3.25rem; padding: 0.85rem; }
.bridge-result { font-size: 0.85rem; margin-top: 0.75rem; }
.bridge-note { font-size: 0.82rem; line-height: 1.4; }
}
@media (max-width: 40rem) {
.bridge-points { grid-template-columns: 1fr; }
}
/* Features: client render beside a two-column check list. */
.features-split {
display: grid;
gap: clamp(1.5rem, 3vw, 3rem);
grid-template-columns: 1fr;
align-items: center;
}
@media (min-width: 56rem) {
.features-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.features-split__media { margin: 0; }
.features-split__media img { display: block; width: 100%; height: auto; }
.features-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1rem 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 36rem) {
.features-list { grid-template-columns: 1fr 1fr; }
}
.features-list li {
display: flex;
gap: 0.7rem;
align-items: flex-start;
text-align: start;
-webkit-hyphens: manual;
hyphens: manual;
}
.features-list li svg {
flex: none;
width: 1.4rem;
height: 1.4rem;
padding: 0.28rem;
border-radius: 0.45rem;
background: var(--coral, #f06858);
color: #ffffff;
margin-top: 0.15rem;
}
.features-list strong {
display: block;
font-family: var(--font-display);
font-size: 1.05rem;
line-height: 1.25;
color: var(--ink, #1a1a1a);
margin-bottom: 0.15rem;
}
.features-list span {
font-size: 0.9375rem;
line-height: 1.45;
color: var(--body, #302f2e);
text-align: start;
}
/* ---------- 12 · Mobile: card rows become rails (2026-08-31) --------
On a phone every card row stacks into one long column, so a block
that fits one screen on desktop runs two or three screens tall.
Below 56rem the multi-card rows scroll sideways instead, one card per
view, and the comparison stage drops its phone render. */
@media (max-width: 56rem) {
.bridge-stage__phone { display: none; }
body[class*="-page"] :is(.pricing-tiers-grid, .pricing-grid, .cards-3d-grid, .timeline-story-grid, .scenario-grid, .cost-grid) {
display: flex !important;
gap: 1rem !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 0.5rem;
-webkit-overflow-scrolling: touch;
}
body[class*="-page"] :is(.pricing-tiers-grid, .pricing-grid, .cards-3d-grid, .timeline-story-grid, .scenario-grid, .cost-grid) > * {
flex: 0 0 min(20rem, 84vw) !important;
scroll-snap-align: start;
min-width: 0;
}
body[class*="-page"] .framework-tabs { display: grid !important; grid-template-columns: 1fr 1fr !important; }
body[class*="-page"] .themes-sidebar { max-height: 14rem !important; }
body.about-page .qf-card:nth-child(n + 5) { display: none; }
body.about-page .app-stage__device { max-height: 400px !important; }
html body.money-page .category-grid { grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; }
html body.money-page .cat-card p { display: none; }
html body.money-page .cat-card h3 { font-size: 0.9rem; }
html body.money-page #story .split__media { display: none; }
}
@media (max-width: 56rem) {
/* 365: the three remaining tall blocks on a phone. */
body[class*="-page"] .science-pillars { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }
body[class*="-page"] .science-pillars article { padding: 1rem !important; }
body[class*="-page"] .themes-sidebar { max-height: 10rem !important; }
body[class*="-page"] .framework-prompt-card:nth-child(n + 3) { display: none; }
body[class*="-page"] .framework-showcase { padding: 1.25rem !important; gap: 1rem !important; }
/* About: two floating cards are enough around the phone on a small screen. */
body.about-page .qf-card:nth-child(n + 4) { display: none; }
}
/* ---------- 13 · Deck graphics + prose helpers (2026-08-31) ---------- */
.deck-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.trio-card { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: 2rem 1.75rem; text-align: left; }
.trio-card__icon { width: 1.75rem; height: 1.75rem; color: var(--accent-coral); display: block; margin-bottom: 1.25rem; }
.trio-card__title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; line-height: 1.2; color: var(--ink-primary); margin: 0 0 1.25rem; }
.trio-card__list, .trio-card__chips { list-style: none; margin: 0; padding: 0; }
.trio-card__list li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--border-subtle); font-family: var(--font-body); font-size: 1rem; color: var(--charcoal-body); }
.trio-card__meta { color: var(--charcoal-muted); font-variant-numeric: tabular-nums; }
.trio-card__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.trio-card__chips li { padding: .4rem .85rem; border-radius: var(--radius-full); background: var(--surface-warm); border: 1px solid var(--border-subtle); font-family: var(--font-body); font-size: .9375rem; color: var(--charcoal-body); }
@media (max-width: 56rem) { .deck-trio { grid-template-columns: 1fr; max-width: 32rem; margin-left: auto; margin-right: auto; } }