/* =========================================================================
LegalAdviceNow — marketing site
Design: "counsel blue" — a precision instrument for reading contracts.
Deep blue on warm paper, one brass accent (the scales in the mark), and a
five-step severity ramp that is the ONE place the palette goes beyond a
single accent — because this product's whole output is graded risk.
Signature = the clause under review: a contract paragraph with three
reviewers threading onto one finding.
Sibling to mylifeguardian.app by design: same bones (1160 wrap, warm paper,
mono eyebrows, pill buttons, dark punctuation bands, scroll reveals, the
same two Google faces), rotated from pine to blue. They should read as one
company's two products.
Change the look by editing the tokens below, not by hunting values.
========================================================================= */
:root {
/* ---- palette ---------------------------------------------------------
`paper` is warm, not white: a page of legal text on a cold ground reads
as a scan. `mist` is the blue tint used for section grounds, and is the
only place blue appears at low saturation. */
--paper: #FBFAF7;
--paper-2: #F3F2ED;
--mist: #EAF0F6;
--blue: #10508C;
--blue-600: #0E4881;
--blue-800: #0A3660;
--blue-900: #072744;
--ink: #141C24;
--ink-soft: #55636F;
--line: #E4E5E0;
--brass: #C08A2E; /* the accent — from the scales in the mark */
--sky: #4E86BD;
--slate: #8492A0;
--white: #ffffff;
/* ---- severity ramp ---------------------------------------------------
Five steps, deliberately desaturated so "critical" never fights the blue
it sits next to. The legacy report carries three incompatible scales
(risk 0-3, importance 0-3, deviationScore 0-10) and renders 0 as the word
"Low" in a grey chip labelled "Info". One ramp, one vocabulary, here. */
--sev-critical: #A33A2C;
--sev-high: #C46A22;
--sev-medium: #C08A2E;
--sev-low: #4E86BD;
--sev-ok: #2F7D62;
--sev-critical-bg: #FBEFEC;
--sev-high-bg: #FCF2E8;
--sev-medium-bg: #FBF5E7;
--sev-low-bg: #EDF3F9;
--sev-ok-bg: #EAF4EF;
/* ---- type ------------------------------------------------------------
Same pair as MyLifeGuardian. Mono is promoted to a real role here:
contracts have clause numbers, and `§ 8.2` set in mono is the cheapest
credibility on the page. */
--f-display: "Bricolage Grotesque", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
--f-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--f-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
/* ---- metrics ---------------------------------------------------------- */
--wrap: 1160px;
--pad: clamp(20px, 5vw, 56px);
--measure: 820px; /* prose inside a container */
--radius: 18px;
--radius-sm: 12px;
--shadow: 0 1px 2px rgba(20,28,36,.04), 0 18px 40px -24px rgba(20,28,36,.22);
--shadow-sm: 0 1px 2px rgba(20,28,36,.05), 0 8px 24px -18px rgba(20,28,36,.20);
}
/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--f-sans);
color: var(--ink);
background: var(--paper);
font-size: 17px;
line-height: 1.62;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.06; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
em { font-style: normal; color: var(--blue-600); }
strong { font-weight: 600; }
.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.sr-only, .skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; top: 12px; left: 12px; width: auto; height: auto; clip: auto; z-index: 100; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 10px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.eyebrow {
font-family: var(--f-mono);
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 12px;
color: var(--blue-600);
margin: 0 0 18px;
}
.eyebrow--light { color: #9fc4e4; }
/* A clause reference. The one typographic tic that says "this is about contracts". */
.clause { font-family: var(--f-mono); font-size: .86em; color: var(--blue-600); white-space: nowrap; }
/* ---------- buttons ---------- */
.btn {
--btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: transparent;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--f-sans); font-weight: 600; font-size: 15.5px;
padding: 11px 18px; border-radius: 999px;
background: var(--btn-bg); color: var(--btn-fg);
border: 1.5px solid var(--btn-bd);
cursor: pointer;
transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--solid { --btn-bg: var(--blue); --btn-fg: #fff; box-shadow: 0 10px 22px -12px rgba(16,80,140,.65); }
.btn--solid:hover { --btn-bg: var(--blue-600); box-shadow: 0 14px 26px -12px rgba(16,80,140,.75); }
.btn--ghost { --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn--ghost:hover { --btn-bd: var(--blue); --btn-fg: var(--blue-600); }
.btn--quiet { --btn-fg: var(--blue-600); padding-inline: 6px; }
.btn--quiet:hover { color: var(--blue-800); }
.btn--onDark { --btn-bg: var(--paper); --btn-fg: var(--blue-900); }
.btn--onDark:hover { --btn-bg: #fff; }
.btn--lg { padding: 14px 26px; font-size: 16.5px; }
/* =========================================================================
NAV
========================================================================= */
.nav {
position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--paper) 82%, transparent);
backdrop-filter: saturate(1.4) blur(12px);
border-bottom: 1px solid transparent;
transition: border-color .3s ease, background .3s ease;
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; gap: 20px; height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); }
.brand__mark { display: grid; place-items: center; width: 32px; height: 32px; flex: none; }
.brand__mark svg { width: 100%; height: 100%; }
.brand__accent { color: var(--blue); }
.nav__links { display: flex; gap: 26px; margin-left: auto; font-weight: 500; font-size: 15.5px; color: var(--ink-soft); }
.nav__links a { position: relative; padding: 4px 0; white-space: nowrap; }
.nav__links a:hover { color: var(--ink); }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--blue); transition: right .25s ease; }
.nav__links a:hover::after { right: 0; }
.nav__cta { display: flex; align-items: center; gap: 10px; }
.nav__toggle { display: none; }
.nav__mobile { display: none; }
/* :not(.btn) matters — this rule is more specific than .btn, so without it the
grey divider border paints across the top edge of the solid CTA button. */
.nav__mobile a:not(.btn) { padding: 14px 4px; border-top: 1px solid var(--line); font-weight: 600; font-size: 17px; }
.nav__mobile .btn { margin: 18px 0 4px; justify-content: center; }
.langsel {
appearance: none; -webkit-appearance: none;
font-family: var(--f-sans); font-size: 13px; font-weight: 600; color: var(--ink-soft);
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2355636F' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
border: 1.5px solid var(--line); border-radius: 999px;
padding: 7px 26px 7px 12px; cursor: pointer;
}
.langsel:hover { border-color: var(--blue); color: var(--ink); }
.langsw { display: flex; gap: 6px; padding-top: 14px; }
.langsw a { flex: 1; text-align: center; padding: 8px 0; border: 1.5px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.langsw a[data-lang="en"] { border-radius: 999px; }
.langsw[data-active="en"] a[data-lang="en"],
.langsw[data-active="es"] a[data-lang="es"],
.langsw[data-active="it"] a[data-lang="it"] { background: var(--blue); border-color: var(--blue); color: #fff; }
/* =========================================================================
HERO
========================================================================= */
.hero { position: relative; padding-top: clamp(48px, 8vw, 92px); padding-bottom: clamp(20px, 3vw, 40px); overflow: hidden; }
.hero__glow {
position: absolute; inset: -20% 0 auto 0; height: 640px; pointer-events: none; z-index: 0;
background:
radial-gradient(58% 70% at 80% 6%, rgba(192,138,46,.14), transparent 60%),
radial-gradient(56% 80% at 16% 0%, rgba(16,80,140,.16), transparent 62%),
radial-gradient(90% 60% at 50% -10%, var(--mist), transparent 70%);
}
.hero__inner { position: relative; z-index: 1; text-align: center; max-width: 980px; margin-inline: auto; }
.hero__title { font-size: clamp(2.5rem, 6.2vw, 4.4rem); font-weight: 600; margin-bottom: 22px; }
.hero__lede { font-size: clamp(1.06rem, 1.6vw, 1.26rem); color: var(--ink-soft); max-width: var(--measure); margin: 0 auto 30px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 16px; }
.hero__trust { font-size: .92rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; }
.hero__trust svg { width: 15px; height: 15px; color: var(--sev-ok); flex: none; }
/* ---- the hero-as-hub: three real choices, each icon alive on its own ----
A single badge cycling through three scenes shipped first and got reverted
the same day: it read as a slideshow, not three choices, and made whichever
audience was "off stage" wait its turn. Each card's own icon carries a small
shine sweep (`::after`, a soft diagonal highlight that crosses the box every
few seconds) plus two twinkling sparkles (`.hc-spark`) — enough motion to
feel alive without competing with the name/body/"Continue" a visitor is
actually here to read. Staggered per card (nth-of-type) so the row doesn't
flash in unison. */
.herochoices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 20px);
max-width: 980px; margin-inline: auto; text-align: left; }
.herochoice {
display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 26px);
background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.herochoice:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow); }
.herochoice__icon {
position: relative; overflow: hidden; width: 60px; height: 60px; border-radius: 16px;
display: flex; align-items: center; justify-content: center; background: var(--mist); flex: none;
}
.herochoice__icon > svg:not(.hc-spark) { width: 40px; height: 40px; }
.herochoice--families .herochoice__icon { color: var(--blue); }
.herochoice--business .herochoice__icon { color: var(--sev-high); }
.herochoice--firm .herochoice__icon { color: var(--blue-800); }
/* the shine: a soft diagonal bar that sweeps once every 6s, holds off-stage
the rest of the loop (0–82%) rather than sweeping continuously. */
.herochoice__icon::after {
content: ""; position: absolute; top: -60%; bottom: -60%; width: 34%;
background: linear-gradient(115deg, transparent, rgba(255,255,255,.85), transparent);
transform: translateX(-260%) rotate(12deg); animation: hc-shine 6s ease-in-out infinite;
}
@keyframes hc-shine {
0%, 78% { transform: translateX(-260%) rotate(12deg); opacity: 0; }
86% { opacity: .8; }
100% { transform: translateX(260%) rotate(12deg); opacity: 0; }
}
.herochoice--business .herochoice__icon::after { animation-delay: -2s; }
.herochoice--firm .herochoice__icon::after { animation-delay: -4s; }
/* the sparkles: two small four-point stars, twinkling on their own clock */
.hc-spark { position: absolute; width: 10px; height: 10px; opacity: 0; animation: hc-twinkle 4.5s ease-in-out infinite; }
.hc-spark--1 { top: 4px; right: 5px; animation-delay: .3s; }
.hc-spark--2 { bottom: 6px; left: 6px; width: 7px; height: 7px; animation-delay: 1.9s; }
.herochoice--business .hc-spark--1 { animation-delay: 1.1s; }
.herochoice--business .hc-spark--2 { animation-delay: 2.8s; }
.herochoice--firm .hc-spark--1 { animation-delay: 2s; }
.herochoice--firm .hc-spark--2 { animation-delay: .6s; }
@keyframes hc-twinkle {
0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
50% { opacity: .9; transform: scale(1) rotate(25deg); }
}
@media (prefers-reduced-motion: reduce) {
.herochoice__icon::after, .hc-spark { animation: none; opacity: 0; }
}
.herochoice__name { font-family: var(--f-display); font-size: 1.1rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.herochoice__body { color: var(--ink-soft); font-size: .93rem; }
.herochoice__go { margin-top: auto; padding-top: 6px; font-family: var(--f-mono); font-size: .78rem; font-weight: 600;
letter-spacing: .04em; color: var(--blue-600); }
@media (max-width: 760px) {
.herochoices { grid-template-columns: 1fr; }
}
/* ---- the signature: one clause, under review ---- */
.panelcard {
position: relative; z-index: 1;
/* Symmetric now: this card sits between a header and a three-up grid on the front page, not only
below a hero, so it needs space on both sides. `.heroart.panelcard` still zeroes this out where
it sits beside a subpage hero instead. */
margin: clamp(30px, 5vw, 56px) 0;
padding: clamp(16px, 2.4vw, 26px) clamp(10px, 2vw, 22px);
background: linear-gradient(180deg, #fff, var(--paper));
border: 1px solid var(--line);
border-radius: 22px;
box-shadow: var(--shadow);
}
.panelcard__svg { width: 100%; height: auto; }
/* the document fragment */
.rv-page { fill: #fff; stroke: var(--line); stroke-width: 1; }
.rv-ln { stroke: #DCDDD7; stroke-width: 5; stroke-linecap: round; }
.rv-ln--dim{ stroke: #E9EAE4; }
.rv-mark { fill: var(--blue); font-family: var(--f-mono); font-size: 11px; }
.rv-hi { fill: rgba(192,138,46,.16); stroke: var(--brass); stroke-width: 1; }
.rv-hiln { stroke: #C7B287; stroke-width: 5; stroke-linecap: round; }
.rv-conn { stroke: var(--line); stroke-width: 1.5; fill: none; }
/* the finding, and the two critiques threading onto it */
.rv-card { fill: #fff; stroke: var(--line); stroke-width: 1; filter: drop-shadow(0 8px 18px rgba(20,28,36,.08)); }
.rv-sev { fill: var(--sev-critical); }
.rv-sevbg { fill: var(--sev-critical-bg); }
.rv-t { font-family: var(--f-sans); font-size: 13px; font-weight: 600; fill: var(--ink); }
.rv-t--sm { font-size: 11.5px; font-weight: 400; fill: var(--ink-soft); }
.rv-t--sev { font-family: var(--f-mono); font-size: 10px; fill: var(--sev-critical); letter-spacing: .08em; }
.rv-mono { font-family: var(--f-mono); font-size: 10.5px; fill: var(--ink-soft); }
.rv-who { fill: var(--blue); }
.rv-who--2 { fill: var(--sky); }
.rv-who--3 { fill: var(--brass); }
.rv-init { font-family: var(--f-display); font-size: 12px; font-weight: 600; fill: #fff; }
.rv-chip { fill: var(--paper-2); stroke: var(--line); stroke-width: 1; }
/* the triage toolbar at the end of the thread */
.rv-tri { fill: none; stroke: var(--line); stroke-width: 1.2; }
.rv-tri--on{ fill: var(--sev-ok-bg); stroke: var(--sev-ok); }
.rv-trit { font-family: var(--f-sans); font-size: 10.5px; font-weight: 600; fill: var(--ink-soft); }
.rv-trit--on { fill: var(--sev-ok); }
/* entrance — each stage waits for the one before, so it reads as a sequence */
.rv-stage { opacity: 0; transform: translateY(8px); }
.panelcard.is-in .rv-stage { animation: pop .55s ease forwards; animation-delay: var(--d); }
.rv-sweep { stroke-dasharray: 300; stroke-dashoffset: 300; }
.panelcard.is-in .rv-sweep { animation: draw 1.1s .15s ease forwards; }
.panelcard.is-in .rv-hi { transform-box: fill-box; transform-origin: left center; animation: wipe .7s .35s ease forwards; transform: scaleX(0); }
@keyframes pop { to { opacity: 1; transform: translateY(0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes wipe { to { transform: scaleX(1); } }
/* =========================================================================
SUBPAGE HERO — same glow and rhythm as the front page, left-aligned.
Centred display type needs a short measure to work; a subpage hero carries
a breadcrumb and a longer, more specific lede, and both read better ranged
left against the container's edge.
========================================================================= */
.hero--sub { padding-bottom: clamp(28px, 4vw, 56px); }
.hero__inner--left { text-align: left; max-width: none; }
.hero__title--sub { font-size: clamp(2.1rem, 4.6vw, 3.4rem); max-width: 20ch; }
.hero__lede--left { margin-inline: 0; max-width: 60ch; }
.hero__actions--left { justify-content: flex-start; }
/* The left-aligned text column above is capped at 20ch/60ch on purpose (a long
title/lede reads badly at full container width), which used to leave the
right two-thirds of every hero--sub page blank. .heroart fills it — see
build.mjs's heroArt() for what's inside. */
.hero__row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 56px); align-items: center; }
.heroart { max-width: 440px; }
.heroart.panelcard { margin: 0; } /* .panelcard's own top margin assumes it sits BELOW a centered hero; here it sits beside one */
.heroart__svg { width: 100%; height: auto; display: block; }
.crumb {
position: relative; z-index: 1;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em;
text-transform: uppercase; color: var(--slate);
margin-bottom: clamp(20px, 3vw, 34px);
}
.crumb a { color: var(--blue-600); }
.crumb a:hover { text-decoration: underline; }
.crumb [aria-current] { color: var(--ink-soft); }
/* =========================================================================
THE EMBEDDED APP (/analyze/)
The analyzer is the app, in an iframe. This is the rectangle it gets.
========================================================================= */
/* A jump target: links elsewhere point at /analyze/#analyze, which should land
on the app rather than under the sticky nav. */
.widget { padding-block: clamp(20px, 3vw, 38px); scroll-margin-top: 90px; }
.widget__card {
max-width: 820px; margin-inline: auto; padding: clamp(22px, 3vw, 34px);
border: 1px solid var(--line); border-radius: var(--radius);
background: #fff; box-shadow: var(--shadow-sm);
}
/* Holding the live app and nothing else. No panel of its own — the frame inside
already is one, and two nested borders read as a mistake. And no 820px measure
either: that width is for prose, and this is a form, a table and a report.
Full container width lines the frame up with the nav above it. */
.widget__card--bare { border: 0; box-shadow: none; background: transparent; padding: 0; max-width: none; }
/* Sized by site.js from the app's own measurement. This height is what somebody
sees before that arrives — and what they keep if it never does, because a
frame that collapses to nothing is worse than one that is too tall. */
.widget__frame {
display: block; width: 100%; min-height: 680px;
border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2);
color-scheme: light;
}
/* The "not open yet" state. Deliberately inert: no drop handler, no . */
.widget__slot {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
padding: clamp(26px, 5vw, 42px) 18px; margin-bottom: 16px;
border: 2px dashed var(--line); border-radius: 14px;
background: var(--paper-2); color: var(--slate);
font-size: .95rem; text-align: center;
}
.widget__badge {
display: inline-block; margin-bottom: 12px; padding: 4px 11px; border-radius: 999px;
background: var(--mist); color: var(--blue-800);
font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
}
.widget__title { font-family: var(--f-display); font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 10px; }
.widget__lede { color: var(--ink-soft); margin-bottom: 18px; }
.widget__note { color: var(--ink-soft); font-size: .95rem; }
/* =========================================================================
PRICE STRIP — the compact pricing reminder on subpages. The real pricing
table lives once, on the front page; repeating it on twelve pages would be
twelve places to update the day a price changes.
========================================================================= */
.pricestrip { padding-block: clamp(48px, 6vw, 76px); }
.pricestrip__inner {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 24px;
background: linear-gradient(180deg, #fff, var(--paper));
border: 1px solid var(--line); border-radius: 22px;
padding: clamp(26px, 3.4vw, 40px);
box-shadow: var(--shadow-sm);
}
.pricestrip__price { font-family: var(--f-display); font-size: clamp(2.2rem, 4vw, 2.9rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.pricestrip__note { color: var(--ink-soft); font-size: .95rem; margin-top: 10px; }
/* =========================================================================
PROOF STRIP — real counts against the law, not a claim about it. See
features.template.html's PROOF section.
========================================================================= */
.proof__grid {
/* auto-fit rather than a fixed column count: it holds any number of cards without a hand-picked
breakpoint, and collapses on its own once a card would be narrower than 230px — never a fixed
column count fighting the viewport. 230px is sized to the four cards this ships with today (the
container's own width caps out at 1048px, so four fit with room to spare); a fifth card pushes
everything to two rows automatically rather than overflowing. No max-width of its own — the
container already bounds it. */
display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: clamp(16px, 2.4vw, 24px);
}
.proof__card {
background: linear-gradient(180deg, #fff, var(--paper));
border: 1px solid var(--line); border-radius: var(--radius);
padding: clamp(22px, 2.4vw, 30px); box-shadow: var(--shadow-sm);
container-type: inline-size; /* lets .proof__num size itself off THIS card's width, not the viewport */
}
.proof__num {
/* Sized to the widest figure this card ever shows (seven digits, two commas) rather than to the
section's own viewport width — a number this long must not measure itself against a 1487px
screen and then try to fit inside a 230px card. */
font-family: var(--f-display); font-size: clamp(1.7rem, 6cqi, 2.4rem);
font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--blue-800);
}
.proof__label { font-size: .98rem; font-weight: 600; margin: 10px 0 12px; }
.proof__body { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }
/* =========================================================================
SECTION SHELL
========================================================================= */
.section { padding-block: clamp(72px, 11vw, 124px); }
.section--tint { background: linear-gradient(180deg, var(--paper), var(--mist)); border-top: 1px solid var(--line); }
.section--paper2 { background: var(--paper-2); border-block: 1px solid var(--line); }
.section__head { max-width: var(--measure); margin: 0 auto clamp(40px, 6vw, 64px); text-align: center; }
.section__head--left { text-align: left; margin-inline: 0; }
.section__title { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.section__lede { color: var(--ink-soft); font-size: 1.06rem; max-width: 62ch; margin: 16px auto 0; }
.section__head--left .section__lede { margin-inline: 0; }
/* reveal-on-scroll (script.js adds .is-in; a no-IntersectionObserver fallback shows all) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.panelcard.is-in .rv-stage,
.panelcard.is-in .rv-sweep,
.panelcard.is-in .rv-hi,
.wf-stage, .loop-stage { animation: none !important; opacity: 1; transform: none; stroke-dashoffset: 0; }
html { scroll-behavior: auto; }
}
/* =========================================================================
HOW IT WORKS — four panels, one animated figure
========================================================================= */
.workflow { margin: 0; }
.workflow__svg { width: 100%; height: auto; }
.wf-card { fill: #fff; stroke: var(--line); stroke-width: 1; }
.wf-step { font-family: var(--f-mono); font-size: 11px; fill: var(--blue); letter-spacing: .06em; }
.wf-title { font-family: var(--f-sans); font-size: 13.5px; font-weight: 600; fill: var(--ink); }
.wf-zone { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 5 4; }
.wf-doc__card { fill: var(--paper); stroke: var(--line); stroke-width: 1; }
.wf-doc__page { fill: #fff; stroke: var(--sky); stroke-width: 1; }
.wf-doc__ln { stroke: var(--sky); stroke-width: 1.2; stroke-linecap: round; }
.wf-doc__name { font-family: var(--f-mono); font-size: 10.5px; fill: var(--ink-soft); }
.wf-row rect { fill: var(--paper); stroke: var(--line); stroke-width: 1; }
.wf-row text { font-family: var(--f-sans); font-size: 11.5px; fill: var(--ink); }
.wf-row .wf-k { font-family: var(--f-mono); font-size: 10px; fill: var(--ink-soft); }
.wf-arrow { stroke: var(--slate); stroke-width: 1.4; fill: none; opacity: .6; }
.wf-who { r: 9; }
.wf-who--1{ fill: var(--blue); }
.wf-who--2{ fill: var(--sky); }
.wf-who--3{ fill: var(--brass); }
.wf-init { font-family: var(--f-display); font-size: 10px; font-weight: 600; fill: #fff; text-anchor: middle; }
.wf-pill { fill: var(--sev-ok-bg); stroke: var(--sev-ok); stroke-width: 1; }
.wf-pillt { font-family: var(--f-sans); font-size: 10.5px; font-weight: 600; fill: var(--sev-ok); }
.wf-stage { opacity: 0; }
.workflow.is-in .wf-stage { animation: fade .5s ease forwards; animation-delay: var(--d); }
@keyframes fade { to { opacity: 1; } }
/* =========================================================================
THE PANEL — Aden / Sara / Liam, as monograms
========================================================================= */
.panel__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 26px); }
.lawyer {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: clamp(22px, 2.6vw, 30px); box-shadow: var(--shadow-sm);
}
.lawyer__mark {
width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
font-family: var(--f-display); font-size: 24px; font-weight: 600; color: #fff;
margin-bottom: 18px; letter-spacing: -0.02em;
}
.lawyer--1 .lawyer__mark { background: var(--blue); }
.lawyer--2 .lawyer__mark { background: var(--sky); }
.lawyer--3 .lawyer__mark { background: var(--brass); }
.lawyer__name { font-family: var(--f-display); font-size: 1.24rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 4px; }
/* The segment pages reuse this card without a role line, so the 14px the role
contributed has to come from somewhere or the body sits on the title. */
.lawyer__name + .lawyer__body { margin-top: 14px; }
.lawyer__role { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); margin-bottom: 14px; }
.lawyer--1 .lawyer__role { color: var(--blue-600); }
.lawyer--2 .lawyer__role { color: var(--sky); }
.lawyer--3 .lawyer__role { color: var(--brass); }
.lawyer__body { color: var(--ink-soft); font-size: .98rem; }
.panel__note {
margin: clamp(28px, 4vw, 44px) auto 0; max-width: 60ch; text-align: center;
font-family: var(--f-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35;
font-size: clamp(1.1rem, 2vw, 1.32rem); color: var(--blue-800);
}
/* =========================================================================
THE REVIEW LOOP — the gated triage mechanic
========================================================================= */
.loop__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(36px, 6vw, 80px); }
.loop__copy .section__title { margin-bottom: 16px; }
.loop__lede { color: var(--ink-soft); font-size: 1.06rem; max-width: 54ch; margin: 0 0 24px; }
.loop__list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; }
.loop__list li { position: relative; padding-left: 34px; color: var(--ink-soft); }
.loop__list li strong { color: var(--ink); font-weight: 600; }
.loop__n {
position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 7px;
background: var(--mist); color: var(--blue-600);
font-family: var(--f-mono); font-size: 11px; font-weight: 600;
display: grid; place-items: center;
}
.loop__gate {
margin: 0 0 26px; padding: 12px 16px; border-left: 3px solid var(--brass);
background: color-mix(in srgb, var(--brass) 8%, transparent);
border-radius: 0 10px 10px 0; font-size: .93rem; color: var(--ink-soft); max-width: 54ch;
}
.loop__art { width: 100%; height: auto; }
.lp-card { fill: #fff; stroke: var(--line); stroke-width: 1; filter: drop-shadow(0 10px 22px rgba(20,28,36,.07)); }
.lp-rail { fill: var(--paper-2); }
.lp-fill { fill: var(--blue); }
.lp-t { font-family: var(--f-sans); font-size: 12.5px; font-weight: 600; fill: var(--ink); }
.lp-t--sm { font-size: 11px; font-weight: 400; fill: var(--ink-soft); }
.lp-mono { font-family: var(--f-mono); font-size: 11px; fill: var(--ink-soft); }
/* ONE SHAPE FOR ALL FIVE, and the colour went with the count.
The three actions used to be tinted amber / blue / green, which is what the app
did at the time. It does not any more, and the reason is in FindingCard.tsx: a
green "Fine by me" beside a plain "Not relevant" reads as the recommended
answer, and the entire point of the gate is that the reader decides. The
--amb / --blu / --ok modifiers were deleted rather than left unused — this is a
token system, and a modifier nothing applies is one somebody reapplies later. */
.lp-btn { fill: #fff; stroke: var(--line); stroke-width: 1.2; }
.lp-btnt { font-family: var(--f-sans); font-size: 10.5px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
/* The lens chip, beside the severity chip. Outlined with a dot rather than filled,
so it cannot be mistaken for a second severity — the ramp is the one vocabulary
for how bad a thing is, and "Red flag" answers a different question. */
.lp-lens { fill: none; stroke: var(--line); stroke-width: 1.2; }
.lp-lensdot { fill: var(--sev-critical); }
/* The drafting figure's chips name a SEAT, not a severity. The dot is the same
shape, and red on "Drafter" would borrow the one vocabulary this site keeps
for how bad a thing is — see the note above and `.find--blue` in #more. */
.lp-lensdot--blue { fill: var(--blue); }
.lp-lenst { font-family: var(--f-sans); font-size: 10.5px; font-weight: 600; fill: var(--ink-soft); }
/* The quote a finding rests on, and the way back into the document. The rule down
the left is the app's own treatment and it is doing real work: it marks where the
model stops paraphrasing and starts citing. */
.lp-quoterule { fill: var(--line-strong, var(--line)); }
.lp-quote { font-family: var(--f-sans); font-size: 11px; font-style: italic; fill: var(--ink-soft); }
.lp-link { font-family: var(--f-sans); font-size: 11px; font-weight: 600; fill: var(--blue); }
.loop-stage { opacity: 0; }
.loop__art.is-in .loop-stage { animation: fade .5s ease forwards; animation-delay: var(--d); }
.loop__art.is-in .lp-fill { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: wipe 1.4s .5s cubic-bezier(.4,0,.2,1) forwards; }
/* =========================================================================
WORKFLOW — the one loop a document goes round (partials/workflow.html)
The tokens and glows are SMIL; CSS only draws, and flows the dashes.
========================================================================= */
.flow__art { margin: 44px 0 0; overflow-x: auto; }
.flow__art svg { display: block; width: 100%; min-width: 680px; height: auto; }
.wfl-ring { fill: none; stroke: var(--slate); stroke-opacity: .45; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 8; animation: wfl-ring 2s linear infinite; }
.wfl-arrow { fill: var(--slate); }
.wfl-link { fill: none; stroke: var(--slate); stroke-width: 1.6; stroke-dasharray: 4 5; animation: wfl-link 1.2s linear infinite; }
.wfl-link--ok { stroke: var(--sev-ok); }
.wfl-head-mk { fill: var(--slate); }
.wfl-card { fill: #fff; stroke: var(--line); stroke-width: 1.2; filter: drop-shadow(0 10px 22px rgba(20,28,36,.07)); }
.wfl-glow { fill: none; stroke: var(--blue); stroke-width: 2.5; }
.wfl-glow--you { stroke: var(--brass); }
.wfl-glow--ok { stroke: var(--sev-ok); }
.wfl-title { font-family: var(--f-sans); font-size: 13.5px; font-weight: 600; fill: var(--ink); }
.wfl-sub { font-family: var(--f-sans); font-size: 11px; fill: var(--ink-soft); }
.wfl-mono { font-family: var(--f-mono); font-size: 11px; fill: var(--ink-soft); }
.wfl-legend{ font-family: var(--f-sans); font-size: 11.5px; fill: var(--ink-soft); }
.wfl-tag { fill: var(--blue); }
.wfl-tag--you { fill: var(--brass); }
.wfl-tagt { font-family: var(--f-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; fill: #fff; text-anchor: middle; }
.wfl-who { fill: var(--blue); stroke: #fff; stroke-width: 2; }
.wfl-who--2{ fill: var(--sky); }
.wfl-who--3{ fill: var(--brass); }
.wfl-ico { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.wfl-head { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; fill: var(--brass); text-anchor: middle; }
.wfl-opt { font-family: var(--f-sans); font-size: 12.5px; font-weight: 600; fill: var(--ink); }
.wfl-dot { fill: var(--brass); }
.wfl-dot--ok { fill: var(--sev-ok); }
.wfl-exit { fill: var(--sev-ok-bg); stroke: var(--sev-ok); stroke-width: 1.2; }
.wfl-exitt { font-family: var(--f-sans); font-size: 12.5px; font-weight: 600; fill: var(--sev-ok); }
.wfl-okc { fill: var(--sev-ok); }
.wfl-okm { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wfl-token { fill: var(--blue); stroke: #fff; stroke-width: 2.5; }
.wfl-token--you { fill: var(--brass); }
.wfl-token--ok { fill: var(--sev-ok); }
@keyframes wfl-ring { to { stroke-dashoffset: -20; } }
@keyframes wfl-link { to { stroke-dashoffset: -18; } }
.flow__steps { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.flow__step { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 20px 22px; }
.flow__steptitle { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-family: var(--f-display); font-size: 1.08rem; font-weight: 600; color: var(--ink); }
.flow__n { width: 22px; height: 22px; border-radius: 7px; background: var(--mist); color: var(--blue-600); font-family: var(--f-mono); font-size: 11px; font-weight: 600; display: grid; place-items: center; flex: none; }
.flow__stepbody { margin: 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.55; }
@media (max-width: 900px) { .flow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .flow__steps { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
.wfl-token, .wfl-glow { display: none; }
.wfl-ring, .wfl-link { animation: none; }
}
/* =========================================================================
WHAT YOU GET — the seven finding types
========================================================================= */
/* 236px, not 250: there are exactly SEVEN finding types, and at 250 the container's
1048px of content resolves to three columns — which leaves Readability alone on a
row of its own. Four columns give 4 + 3, which reads as a deliberate shape. */
.finds { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: clamp(14px, 2vw, 20px); }
.find {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: 24px 24px 22px; box-shadow: var(--shadow-sm);
display: flex; flex-direction: column; gap: 10px;
}
/* flex-start, not center: when a finding name wraps to two lines, centring
floats the dot into the gap between them. The nudge puts it on the optical
centre of the FIRST line, which is where a bullet belongs. */
.find__top { display: flex; align-items: flex-start; gap: 10px; }
.find__dot { margin-top: 8px; }
.find__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.find__name { font-family: var(--f-display); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.015em; }
.find__body { color: var(--ink-soft); font-size: .96rem; }
.find__scale { font-family: var(--f-mono); font-size: 10.5px; color: var(--slate); letter-spacing: .06em; text-transform: uppercase; margin-top: auto; padding-top: 8px; }
.find--critical .find__dot { background: var(--sev-critical); }
.find--high .find__dot { background: var(--sev-high); }
.find--medium .find__dot { background: var(--sev-medium); }
.find--low .find__dot { background: var(--sev-low); }
.find--ok .find__dot { background: var(--sev-ok); }
.find--blue .find__dot { background: var(--blue); }
.find--sky .find__dot { background: var(--sky); }
.find--slate .find__dot { background: var(--slate); }
/* platform.template.html's capability/audience cards: an in-card link, sized
and cased like .find__scale (which it sits inside of) so it reads as part of
the same mono/uppercase accent language the rest of the site uses for small
labels, rather than a plain blue hyperlink dropped into a minimal card. */
.find__link { color: var(--blue-600); }
.find__link:hover { text-decoration: underline; }
/* the ramp legend */
.ramp { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: clamp(26px, 4vw, 40px); }
.ramp__step {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
}
.ramp__swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
/* =========================================================================
COMPARISON TABLE (/why.html)
A real — this is tabular data, and a screen reader should be able to
say "Turnaround, Lawyer, days to weeks". The wrapper scrolls rather than the
page: three columns of prose do not fit a phone, and shrinking the type until
they do is how comparison tables become unreadable.
========================================================================= */
.compare__wrap { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.compare {
width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
overflow: hidden; box-shadow: var(--shadow-sm);
}
.compare th, .compare td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th {
font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-soft); font-weight: 400; background: var(--paper-2); white-space: nowrap;
}
.compare tbody th { font-weight: 600; font-size: .96rem; width: 26%; }
.compare td { color: var(--ink-soft); font-size: .95rem; }
/* The "ours" column is highlighted, but the claim it makes still has to be true —
the honest row (accountable advice) is a loss, and it stays a loss. */
.compare .is-ours { background: color-mix(in srgb, var(--mist) 55%, transparent); color: var(--ink); }
.compare thead .is-ours { background: var(--mist); color: var(--blue-800); font-weight: 600; }
.compare__note { color: var(--slate); font-size: .87rem; margin-top: 20px; text-align: center; }
/* =========================================================================
FEATURE ROWS (/features.html) — alternating full-width blocks
========================================================================= */
.frow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.frow + .frow { margin-top: clamp(56px, 8vw, 96px); }
.frow:nth-child(even) .frow__copy { order: 2; }
.frow__n {
font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
color: var(--blue-600); margin-bottom: 14px;
}
.frow__title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 16px; }
.frow__body { color: var(--ink-soft); margin-bottom: 20px; max-width: 52ch; }
.frow__scale {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
}
.frow__swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
/* the sample-finding card that illustrates each one */
.sample { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 26px); box-shadow: var(--shadow-sm); }
.sample__top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.sample__sev {
font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
padding: 4px 11px; border-radius: 999px;
}
.sample--critical .sample__sev { background: var(--sev-critical-bg); color: var(--sev-critical); }
.sample--high .sample__sev { background: var(--sev-high-bg); color: var(--sev-high); }
.sample--medium .sample__sev { background: var(--sev-medium-bg); color: var(--sev-medium); }
.sample--low .sample__sev { background: var(--sev-low-bg); color: var(--sev-low); }
.sample--ok .sample__sev { background: var(--sev-ok-bg); color: var(--sev-ok); }
.sample__clause { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-soft); }
.sample__h { font-family: var(--f-display); font-size: 1.06rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; }
.sample__p { color: var(--ink-soft); font-size: .94rem; }
.sample__by { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.sample__mark { width: 24px; height: 24px; border-radius: 8px; flex: none; display: grid; place-items: center; font-family: var(--f-display); font-size: 11px; font-weight: 600; color: #fff; background: var(--blue); }
.sample__who { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
/* =========================================================================
DOCUMENT TYPE CARDS (/document-types.html)
========================================================================= */
.dtypes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(14px, 2vw, 20px); }
.dtype { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.dtype__name { font-family: var(--f-display); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 10px; }
.dtype__body { color: var(--ink-soft); font-size: .95rem; margin-bottom: 12px; }
.dtype__watch { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.dtype__watch b { color: var(--blue-600); font-weight: 400; }
/* =========================================================================
NUMBERED STEPS (/guide.html)
========================================================================= */
.steps { max-width: var(--measure); margin-inline: auto; display: grid; gap: clamp(28px, 4vw, 44px); }
.step { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 20px; align-items: start; }
.step__n {
width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
background: var(--mist); color: var(--blue-800);
font-family: var(--f-display); font-size: 17px; font-weight: 600;
}
.step__title { font-size: 1.24rem; margin-bottom: 10px; }
.step__body { color: var(--ink-soft); }
.step__body + .step__body { margin-top: 10px; }
/* =========================================================================
LEGAL PROSE (/privacy.html, /terms.html)
========================================================================= */
.legal { max-width: var(--measure); margin-inline: auto; }
.legal h2 { font-size: 1.4rem; margin: clamp(34px, 4vw, 48px) 0 14px; }
.legal h3 { font-size: 1.06rem; margin: 26px 0 8px; }
.legal p { color: var(--ink-soft); margin-bottom: 14px; }
.legal ul, .legal ol { color: var(--ink-soft); margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--blue-600); text-decoration: underline; }
.legal strong { color: var(--ink); }
.legal__updated { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.legal table { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: .94rem; }
.legal th, .legal td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; color: var(--ink-soft); }
.legal th { background: var(--paper-2); color: var(--ink); font-weight: 600; }
/* =========================================================================
CONTACT FORM
========================================================================= */
.form { max-width: 560px; margin-inline: auto; display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 600; font-size: .94rem; }
.field input, .field select, .field textarea {
font-family: var(--f-sans); font-size: 16px; color: var(--ink);
background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
padding: 12px 14px; width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent); }
.form .btn { justify-self: start; }
.form__status { font-size: .95rem; min-height: 1.4em; }
.form__status--ok { color: var(--sev-ok); }
.form__status--err { color: var(--sev-critical); }
.form__note { color: var(--slate); font-size: .87rem; }
/* =========================================================================
MODAL — "Join our network" on hire-a-lawyer.html. One instance on the whole
site, so it lives here rather than getting its own stylesheet. Plain
show/hide via [hidden] (see join.js), not