/* Will's Websites shared design system, 23 August 2026.
*
* Every colour, size, radius, shadow and gap comes from assets/ww-tokens.css,
* which every page links first. This file only uses them.
*
* Rules the whole system depends on:
* - One typeface. Hierarchy is weight (400 against 600) and size, never
* colour. Text is #2b2b2b, headings are black, meta is #5e5e5e.
* - Depth is the 1px hairline, not the shadow. Every shadow is a near-white
* tint, 10px of blur at most, and no shadow anywhere uses black or alpha.
* - The logo blue is rationed: primary actions, links, ticks and focus rings.
* - Radius is 10px by default, 15px on feature cards, 22px on buttons, round
* on numerals, the portrait and the arrow disc.
* - Section headings nest three deep with descending gaps: block 30, then
* pill to text 10, then heading to paragraph 12. Tighter as you go in.
*
* Extracted from index.html so the funnel pages (start, get-started, welcome)
* and the long-form pages carry the same language without duplicating it.
*/
/* --- foundations --- */
html { scroll-behavior: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
margin: 0;
background: var(--ww-paper);
color: var(--ww-ink);
font-family: var(--ww-sans);
font-size: var(--ww-body);
line-height: 1.4;
}
* { box-sizing: border-box; }
::selection { background: var(--ww-ink-strong); color: var(--ww-paper); }
:focus-visible { outline: 3px solid var(--ww-focus); outline-offset: 2px; }
main:focus { outline: none; }
section[id] { scroll-margin-top: 84px; }
img { max-width: 100%; }
.ww-skip-link {
position: fixed; left: 16px; top: 12px; z-index: 1000;
padding: 12px 18px; border-radius: var(--ww-r-btn);
background: var(--ww-steel); color: var(--ww-on-dark);
font-size: var(--ww-ui); font-weight: 500; text-decoration: none;
transform: translateY(-160%);
}
.ww-skip-link:focus { transform: none; }
.ww-site-shell { min-height: 100vh; background: var(--ww-paper); color: var(--ww-ink); }
/* No scroll reveals. The data-reveal attributes stay in the markup so the
shared script keeps working, but they do nothing: content is visible on
arrival, which is what a sceptical visitor on a slow phone needs. */
.js [data-reveal],
[data-reveal].is-revealed { opacity: 1; transform: none; transition: none; }
/* --- navigation ---
Fixed, full bleed, sitting in a white-to-transparent gradient so it
dissolves as the page scrolls under it. The inner row is held to the 1280px
shell with the padding trick below rather than a wrapper, because the same
markup is shared by every page. The full link row only appears from 1200px;
below that the menu is behind the toggle, which is also what stops the row
wrapping to two lines on a tablet. */
.ww-nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 200;
display: flex; align-items: center; justify-content: space-between;
gap: 14px;
padding: 13px max(var(--ww-gutter), calc((100% - var(--ww-shell)) / 2 + var(--ww-gutter)));
background: linear-gradient(180deg, var(--ww-plate) 0%, rgba(255,255,255,0) 100%);
}
.ww-nav__brand { display: flex; align-items: center; min-height: 44px; gap: 10px; text-decoration: none; color: var(--ww-ink-strong); min-width: 0; }
.ww-nav__mark { display: block; width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }
.ww-nav__word {
font-family: var(--ww-display); font-weight: 700; font-size: 18px;
letter-spacing: -.01em; white-space: nowrap; color: var(--ww-ink-strong);
}
.ww-nav__place {
display: none; font-size: var(--ww-ui); font-weight: 400; letter-spacing: var(--ww-track-ui);
color: var(--ww-ink-2); white-space: nowrap;
}
@media (min-width: 480px) { .ww-nav__place { display: inline; } }
.ww-nav__right { display: flex; align-items: center; gap: 10px; }
.ww-nav__toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; padding: 0; cursor: pointer;
background: var(--ww-plate); border: 1px solid var(--ww-rule); border-radius: var(--ww-r-badge);
box-shadow: var(--ww-sh-badge);
}
.ww-nav__bars { position: relative; width: 18px; height: 12px; display: block; }
.ww-nav__bars span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--ww-ink-strong); transition: transform .25s ease, opacity .2s ease; }
.ww-nav__bars span:nth-child(1) { top: 0; }
.ww-nav__bars span:nth-child(2) { top: 5px; }
.ww-nav__bars span:nth-child(3) { top: 10px; }
.ww-nav__toggle[aria-expanded="true"] .ww-nav__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.ww-nav__toggle[aria-expanded="true"] .ww-nav__bars span:nth-child(2) { opacity: 0; }
.ww-nav__toggle[aria-expanded="true"] .ww-nav__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
/* The dropdown is a card: the nav itself has no solid ground to sit on. */
.ww-nav__menu {
position: absolute; top: calc(100% + 2px); right: var(--ww-gutter); left: var(--ww-gutter);
display: flex; flex-direction: column; gap: 2px;
padding: 8px;
background: var(--ww-plate); border: 1px solid var(--ww-rule); border-radius: var(--ww-r-feature);
box-shadow: var(--ww-sh-soft), var(--ww-sh-card);
}
.ww-nav__menu[hidden] { display: none; }
.js .ww-nav__menu:not(.is-open) { display: none; }
.ww-nav__menu a {
display: flex; align-items: center; min-height: 44px; padding: 10px 14px;
border-radius: var(--ww-r-control);
font-size: var(--ww-label); font-weight: 500; letter-spacing: -.01em; line-height: 1.3;
color: var(--ww-ink); text-decoration: none;
}
.ww-nav__menu a:hover, .ww-nav__menu a:focus-visible { background: var(--ww-wash-solid); outline-offset: -2px; }
.ww-nav__menu a.ww-nav__book {
justify-content: center; margin: 0 0 6px;
background: var(--ww-signal); color: var(--ww-on-dark); border-radius: var(--ww-r-btn);
font-weight: 400; letter-spacing: var(--ww-track-ui);
}
.ww-nav__menu a.ww-nav__book:hover, .ww-nav__menu a.ww-nav__book:focus-visible { background: var(--ww-signal-hover); }
@media (min-width: 1200px) {
.ww-nav__toggle { display: none; }
.ww-nav__menu, .ww-nav__menu[hidden], .js .ww-nav__menu:not(.is-open) {
position: static; display: flex; flex-direction: row; align-items: center; gap: 22px;
padding: 0; border: 0; background: none; box-shadow: none;
}
.ww-nav__menu a { min-height: 0; padding: 6px 0; border-radius: 0; font-size: var(--ww-ui); font-weight: 400; letter-spacing: var(--ww-track-ui); line-height: 1.2; }
.ww-nav__menu a:hover, .ww-nav__menu a:focus-visible { background: none; color: var(--ww-ink-strong); }
.ww-nav__menu a.ww-nav__book { order: 9; margin: 0 0 0 8px; min-height: 40px; padding: 10px 20px; box-shadow: var(--ww-sh-btn); }
}
/* No JavaScript: the menu is simply visible, in a row, under the brand. */
html:not(.js) .ww-nav { position: relative; flex-wrap: wrap; }
html:not(.js) .ww-nav__toggle { display: none; }
html:not(.js) .ww-nav__right { width: 100%; }
html:not(.js) .ww-nav__menu { position: static; width: 100%; display: flex; flex-flow: row wrap; border: 0; padding: 0; box-shadow: none; }
/* --- the application journey lockup ---
Inside the form journey there is no fixed navigation bar to wander off
into. The brand sits centred in the flow above the form content, the same
on every step and on every page of the journey, and the one way back is the
quiet text link that sits under the primary button. */
.ww-journey-brand {
display: flex; align-items: center; justify-content: center; gap: 10px;
margin: 0 0 var(--ww-s-9);
}
.ww-journey-brand__mark { display: block; width: 32px; height: 32px; object-fit: contain; flex: 0 0 auto; }
.ww-journey-brand__word {
font-family: var(--ww-display); font-weight: 700; font-size: 18px;
letter-spacing: -.01em; white-space: nowrap; color: var(--ww-ink-strong);
}
@media (max-width: 600px) {
.ww-journey-brand { margin-bottom: var(--ww-s-8); }
}
.ww-journey-back { margin: var(--ww-s-7) 0 0; text-align: center; }
.ww-journey-back a {
display: inline-block; min-height: 24px;
font-size: var(--ww-ui); letter-spacing: var(--ww-track-ui);
color: var(--ww-ink-2); text-decoration: none;
border-bottom: 1px solid var(--ww-rule); padding-bottom: 2px;
transition: color .2s ease, border-color .2s ease;
}
.ww-journey-back a:hover { color: var(--ww-ink-strong); border-bottom-color: var(--ww-ink-strong); }
.ww-journey-back a:focus-visible { outline: 3px solid var(--ww-focus); outline-offset: 3px; border-radius: 2px; }
/* --- section furniture --- */
/* The eyebrow is a pill, and it appears above every section heading. The
padding is asymmetric on purpose, 1px more on top than bottom, which
optically centres the x-height. */
.ww-eyebrow {
display: inline-flex; align-items: center; justify-content: center; gap: var(--ww-s-2);
padding: 9px 14px 8px 12px;
border: 1px solid var(--ww-rule); border-radius: var(--ww-r-pill);
background: var(--ww-wash); box-shadow: var(--ww-sh-badge);
font-family: var(--ww-sans); font-weight: 400; font-size: var(--ww-ui); line-height: 1.2;
letter-spacing: var(--ww-track-eyebrow); text-transform: none; color: var(--ww-ink);
margin: 0; white-space: nowrap;
}
.ww-eyebrow svg { width: 15px; height: 15px; flex: none; }
.ww-h1 {
font-family: var(--ww-display); font-weight: var(--ww-w-display);
font-size: var(--ww-h1); line-height: var(--ww-lh-h1); letter-spacing: var(--ww-track-h1);
margin: 0; color: var(--ww-ink); text-wrap: balance;
}
.ww-h2 {
font-family: var(--ww-display); font-weight: var(--ww-w-display);
font-size: var(--ww-h2); line-height: var(--ww-lh-h2); letter-spacing: var(--ww-track-h2);
margin: 0; color: var(--ww-ink-strong); text-wrap: balance;
}
.ww-h3 {
font-family: var(--ww-display); font-weight: var(--ww-w-display);
font-size: var(--ww-h3); line-height: var(--ww-lh-h3); letter-spacing: var(--ww-track-h3);
margin: 0; color: var(--ww-ink-strong);
}
.ww-h4 {
font-family: var(--ww-display); font-weight: var(--ww-w-display);
font-size: var(--ww-h4); line-height: var(--ww-lh-h4); letter-spacing: var(--ww-track-h4);
margin: 0; color: var(--ww-ink-strong); text-wrap: balance;
}
.ww-h6 {
font-family: var(--ww-display); font-weight: var(--ww-w-display);
font-size: var(--ww-h6); line-height: 1.2; letter-spacing: 0;
margin: 0; color: var(--ww-ink);
}
/* The descending ladder, for pages that lay the heading out in flow rather
than in a .ww-stack: pill to heading 10, heading to paragraph 12. */
.ww-eyebrow + .ww-h1, .ww-eyebrow + .ww-h2, .ww-eyebrow + .ww-h3 { margin-top: var(--ww-s-3); }
.ww-lead { color: var(--ww-ink); font-size: var(--ww-lead); line-height: 1.5; margin: var(--ww-s-4) 0 0; text-wrap: balance; }
.ww-body { color: var(--ww-ink); font-size: var(--ww-body); line-height: 1.4; margin: var(--ww-s-4) 0 0; }
.ww-small { color: var(--ww-ink-2); font-size: var(--ww-small); line-height: 1.45; }
.ww-label { font-size: var(--ww-label); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--ww-ink-strong); }
.ww-ui { font-size: var(--ww-ui); font-weight: 400; line-height: 1.2; letter-spacing: var(--ww-track-ui); }
.ww-section { padding: var(--ww-sec) var(--ww-gutter); max-width: var(--ww-shell); margin: 0 auto; }
.ww-section--narrow { max-width: calc(var(--ww-content) + 2 * var(--ww-gutter)); }
.ww-section--tall { padding-top: var(--ww-sec-tall); padding-bottom: var(--ww-sec-tall); }
.ww-section--tight { padding-top: var(--ww-sec-tight); padding-bottom: var(--ww-sec-tight); }
.ww-centre { text-align: center; }
/* The stack: one centred column, gaps narrowing as you nest inward.
block 30px heading group to buttons
group 10px pill to text
text 12px heading to paragraph
Nothing inside a stack sets a margin. Change a gap, not a margin. */
.ww-stack { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.ww-stack > * { margin: 0; }
.ww-stack--block { gap: var(--ww-s-8); }
.ww-stack--group { gap: var(--ww-s-3); max-width: var(--ww-measure); }
.ww-stack--text { gap: var(--ww-s-4); }
.ww-stack--left { align-items: flex-start; text-align: left; }
.ww-stack .ww-lead, .ww-stack .ww-body { max-width: var(--ww-prose); }
@media (max-width: 809.98px) {
.ww-stack--block { gap: var(--ww-s-6); }
.ww-stack--group { gap: var(--ww-s-5); }
}
/* Sections are separated by their own rhythm now, not by a rule. The bar
stays in the markup so nothing has to be unpicked; it simply draws nothing. */
.ww-bar { display: none; height: 0; border: 0; margin: 0; }
/* The visible qualifier that sits under a claim. */
.ww-qualifier { color: var(--ww-ink-2); font-size: var(--ww-small); line-height: 1.45; margin: 14px 0 0; }
/* --- buttons ---
Two variants across the whole site, both 22px radius. The primary uses the
logo blue with a tint shadow; the ghost is white with the hairline. The label is set
at the UI size with open tracking, which is what makes it sit still inside
the pill. min-height holds the 44px touch target the reference does not. */
.ww-pill {
display: inline-flex; align-items: center; justify-content: center; gap: var(--ww-s-3);
min-height: 48px; padding: 12px 20px;
text-align: center; text-decoration: none; white-space: nowrap;
font-family: var(--ww-sans); font-weight: 400; font-size: var(--ww-ui); line-height: 1.2; letter-spacing: var(--ww-track-ui);
color: var(--ww-on-dark); background: var(--ww-signal);
border: 0; border-radius: var(--ww-r-btn); cursor: pointer;
box-shadow: var(--ww-sh-btn);
transition: background var(--ww-press) linear, transform var(--ww-press) linear;
}
.ww-pill:hover:not(:disabled) { background: var(--ww-signal-hover); }
.ww-pill:active:not(:disabled) { transform: translateY(1px); }
.ww-pill:disabled { background: var(--ww-ink-faint); box-shadow: none; cursor: not-allowed; }
/* 48 and 50 are the heights the arrow disc produces (12 + 24 + 12, 13 + 24 + 13),
and the min-heights hold a disc-less ghost to the same line. */
.ww-pill--large { min-height: 50px; padding: 13px 24px; font-size: var(--ww-label); }
.ww-pill--ghost {
background: var(--ww-plate); color: var(--ww-ink);
border: 1px solid var(--ww-rule); box-shadow: var(--ww-sh-ghost);
padding: 11px 19px;
}
.ww-pill--large.ww-pill--ghost { padding: 12px 23px; }
.ww-pill--ghost:hover:not(:disabled) { background: var(--ww-wash-solid); }
/* For use on the dark panel only. */
.ww-pill--inverse { background: var(--ww-signal); color: var(--ww-on-dark); box-shadow: none; }
.ww-pill--inverse:hover:not(:disabled) { background: var(--ww-signal-hover); }
/* The trailing disc. The short right padding makes room for it. */
.ww-pill--arrow { padding-right: 8px; }
.ww-pill--large.ww-pill--arrow { padding-right: 10px; }
.ww-pill__arrow {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 24px; height: 24px; border-radius: var(--ww-r-badge);
background: var(--ww-plate); overflow: hidden;
}
.ww-pill__arrow svg { width: 12px; height: 12px; display: block; stroke: var(--ww-ink-strong); transition: transform .35s var(--ww-ease); }
.ww-pill:hover .ww-pill__arrow svg { transform: translateX(2px); }
.ww-pill--inverse .ww-pill__arrow { background: var(--ww-steel); }
.ww-pill--inverse .ww-pill__arrow svg { stroke: var(--ww-on-dark); }
/* --- cards ---
The single most repeated object: white fill, 1px hairline, 10px radius, and
a shadow so pale it reads as a tint rather than depth. */
.ww-card {
background: var(--ww-plate); border: 1px solid var(--ww-rule);
border-radius: var(--ww-r-panel); box-shadow: var(--ww-sh-card);
padding: var(--ww-s-7);
}
.ww-card--feature, .ww-card--strong { border-radius: var(--ww-r-feature); padding: var(--ww-s-8); }
.ww-card--media { border-radius: var(--ww-r-media); padding: 0; overflow: hidden; }
.ww-card--soft { background: var(--ww-wash); box-shadow: none; }
.ww-grid { display: grid; gap: var(--ww-s-6); }
.ww-grid--2 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.ww-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* --- the price card ---
The build fee and the monthly price are set at the SAME size and the SAME
weight. compliance/advertising-claims.md section 1 requires equal prominence,
so this is a compliance rule, not a styling preference. */
.ww-price { display: grid; gap: 6px; justify-items: center; text-align: center; }
.ww-price__free,
.ww-price__then {
font-family: var(--ww-display); font-weight: var(--ww-w-display);
font-size: var(--ww-h4); line-height: 1; letter-spacing: var(--ww-track-h4);
color: var(--ww-ink-strong); font-variant-numeric: tabular-nums;
}
.ww-price__note { color: var(--ww-ink-2); font-size: var(--ww-small); line-height: 1.45; max-width: 440px; margin: 12px auto 0; }
/* --- numbered steps --- */
.ww-steps { list-style: none; margin: var(--ww-s-8) 0 0; padding: 0; display: grid; gap: var(--ww-s-3); text-align: left; }
.ww-steps li {
display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: start;
background: var(--ww-plate); border: 1px solid var(--ww-rule);
border-radius: var(--ww-r-panel); box-shadow: var(--ww-sh-card); padding: 20px 22px;
}
.ww-steps b {
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: var(--ww-r-badge);
background: var(--ww-wash); border: 1px solid var(--ww-rule); color: var(--ww-ink-strong);
font-family: var(--ww-display); font-size: var(--ww-body); font-weight: var(--ww-w-display);
}
.ww-steps .ww-h3 { font-size: var(--ww-h6); line-height: 1.2; letter-spacing: 0; }
.ww-steps p { margin: 6px 0 0; color: var(--ww-ink); font-size: var(--ww-body); line-height: 1.4; }
/* --- tick list. the one place the accent is a mark rather than a link --- */
.ww-ticks { list-style: none; margin: var(--ww-s-6) 0 0; padding: 0; display: grid; gap: var(--ww-s-3); text-align: left; }
.ww-ticks li { position: relative; padding-left: 28px; color: var(--ww-ink); font-size: var(--ww-body); line-height: 1.4; }
.ww-ticks li::before {
content: ""; position: absolute; left: 1px; top: .38em; width: 13px; height: 7px;
border-left: 2px solid var(--ww-confirm); border-bottom: 2px solid var(--ww-confirm);
transform: rotate(-45deg);
}
/* --- FAQ. plain rows on hairlines, no boxes --- */
.ww-faq { display: grid; gap: 0; margin-top: var(--ww-s-8); text-align: left; border-top: 1px solid var(--ww-rule); }
.ww-faq details { border-bottom: 1px solid var(--ww-rule); }
.ww-faq summary {
cursor: pointer; list-style: none; padding: 20px 0;
font-family: var(--ww-display); font-weight: var(--ww-w-display); font-size: var(--ww-h6); line-height: 1.2;
color: var(--ww-ink); display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.ww-faq summary::-webkit-details-marker { display: none; }
.ww-faq summary::after {
content: "+"; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: var(--ww-r-badge);
border: 1px solid var(--ww-rule); background: var(--ww-wash);
font-weight: 400; font-size: 18px; line-height: 1; color: var(--ww-ink-2);
}
.ww-faq details[open] summary::after { content: "\2212"; color: var(--ww-ink-strong); }
.ww-faq p { margin: 0 0 22px; color: var(--ww-ink); font-size: var(--ww-body); line-height: 1.4; max-width: var(--ww-prose); }
.ww-faq a { color: var(--ww-signal); font-weight: 500; }
/* --- forms --- */
.ww-field { display: grid; gap: 8px; margin: 0 0 20px; text-align: left; }
.ww-field > label, .ww-fieldset > legend { font-weight: 500; font-size: var(--ww-label); letter-spacing: -.01em; color: var(--ww-ink-strong); }
.ww-field__hint { color: var(--ww-ink-2); font-size: var(--ww-small); line-height: 1.45; margin: 0; }
.ww-input, .ww-textarea, .ww-select {
width: 100%; font-family: var(--ww-sans); font-size: var(--ww-body); color: var(--ww-ink);
background: var(--ww-plate); border: 1px solid var(--ww-field-border); border-radius: var(--ww-r-control);
padding: 14px 16px;
}
.ww-textarea { min-height: 118px; resize: vertical; line-height: 1.5; }
.ww-input:focus, .ww-textarea:focus, .ww-select:focus { outline: 3px solid var(--ww-focus); outline-offset: 2px; border-color: var(--ww-ink-strong); }
.ww-input::placeholder, .ww-textarea::placeholder { color: var(--ww-ink-faint); }
/* A drawn chevron, not two gradients. */
.ww-select {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-position: right 16px center; background-size: 14px 9px; background-repeat: no-repeat;
padding-right: 44px;
}
.ww-fieldset { border: 0; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.ww-choice {
display: flex; gap: 12px; align-items: flex-start;
background: var(--ww-plate); border: 1px solid var(--ww-rule);
border-radius: var(--ww-r-control); box-shadow: var(--ww-sh-card); padding: 14px 16px; cursor: pointer;
}
.ww-choice:hover { border-color: var(--ww-field-border); }
.ww-choice input { margin: 3px 0 0; accent-color: var(--ww-ink-strong); width: 18px; height: 18px; flex: 0 0 auto; }
.ww-choice span { font-size: var(--ww-body); line-height: 1.4; color: var(--ww-ink); }
.ww-choice span b { display: block; color: var(--ww-ink-strong); font-weight: 600; }
.ww-choice span a { color: var(--ww-signal); font-weight: 500; }
.ww-choice:has(input:checked) { border: 2px solid var(--ww-ink-strong); padding: 13px 15px; }
.ww-error { margin: 0; color: var(--ww-signal); font-size: var(--ww-small); font-weight: 500; }
.ww-error:empty { display: none; }
.ww-input[aria-invalid="true"], .ww-textarea[aria-invalid="true"], .ww-select[aria-invalid="true"] { border: 2px solid var(--ww-ink-strong); }
/* Honeypot. Off-screen rather than display:none so a bot filling everything
still trips it, and hidden from assistive technology so nobody real sees it. */
.ww-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* --- multi-step progress --- */
.ww-progress { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 0 0 var(--ww-s-8); flex-wrap: wrap; }
.ww-progress__dot { display: flex; align-items: center; gap: 8px; font-size: var(--ww-ui); font-weight: 400; letter-spacing: var(--ww-track-ui); color: var(--ww-ink-2); }
.ww-progress__dot i { display: block; width: 10px; height: 10px; border-radius: var(--ww-r-badge); background: var(--ww-rule); font-style: normal; }
.ww-progress__dot.is-current { color: var(--ww-ink-strong); font-weight: 500; }
.ww-progress__dot.is-current i, .ww-progress__dot.is-done i { background: var(--ww-ink-strong); }
.ww-progress__dot.is-done { color: var(--ww-ink); }
@media (max-width: 720px) { .ww-progress__dot span { display: none; } }
.ww-step[hidden] { display: none; }
.ww-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.ww-actions .ww-pill { flex: 1 1 auto; min-width: 150px; }
/* --- notices. a soft panel on the wash, one hairline --- */
.ww-note { border: 1px solid var(--ww-rule); border-radius: var(--ww-r-panel); padding: 16px 18px; font-size: var(--ww-body); line-height: 1.4; background: var(--ww-wash); color: var(--ww-ink); }
.ww-note strong { color: var(--ww-ink-strong); font-weight: 600; }
.ww-note a { color: var(--ww-signal); font-weight: 500; }
.ww-note--info { background: var(--ww-wash); }
.ww-note--warn { border-left: 3px solid var(--ww-signal); }
/* --- footer. white, a hairline above, the same 14px the nav uses --- */
.ww-footer { background: var(--ww-paper); color: var(--ww-ink-2); padding: 0 var(--ww-gutter); border-top: 1px solid var(--ww-rule); }
.ww-footer__inner {
max-width: var(--ww-shell); margin: 0 auto;
padding: var(--ww-s-10) 0 var(--ww-s-10);
display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
font-size: var(--ww-ui); letter-spacing: var(--ww-track-ui); line-height: 1.2;
}
.ww-footer__links { display: flex; gap: 0 22px; flex-wrap: wrap; align-items: center; justify-content: center; }
/* Footer links are the smallest tap targets on the site. A bare inline at
14px gives an ~17px hit box, well under the 44px minimum, and the footer is
thumb-height on a phone. inline-flex plus min-height fixes it without
changing how the row looks. */
.ww-footer-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--ww-ink); text-decoration: none; font-weight: 400; }
.ww-footer-link:hover, .ww-footer-link:focus-visible { color: var(--ww-ink-strong); text-decoration: underline; text-underline-offset: 3px; }
.ww-footer__email { display: inline-flex; align-items: center; min-height: 44px; color: var(--ww-ink-strong); font-size: var(--ww-body); font-weight: 600; letter-spacing: 0; text-decoration: none; }
.ww-footer__email:hover, .ww-footer__email:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.ww-foot__book { color: var(--ww-ink-strong); font-weight: 500; }
.ww-footer__meta { color: var(--ww-ink-2); }
.ww-footer__entity { color: var(--ww-ink-2); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
.ww-pill, .ww-pill__arrow svg, .ww-nav__bars span { transition: none; }
}