/* design\components.css: the CSS of the components in design\components.md, the director's: the header, the footer,
   the exit popup, the call bar, the stop icon, and each section pattern, card, form box and call-to-action block as the
   home page built them. Every page loads it (the build copies it to site\assets\css\components.css). Every page uses these
   classes as they are; a page's own CSS only places and sizes its parts, with the tokens of system.css. */

/* ---------- base type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: var(--ls-display); line-height: var(--lh-tight); margin: 0; color: var(--c-ink); text-wrap: balance; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; line-height: 1.15; }
p { margin: 0; }
a { color: var(--c-brand-text); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--c-brand-text); outline-offset: 3px; border-radius: 6px; }
main { display: block; }
.wrap { box-sizing: border-box; width: 100%; max-width: calc(var(--max-w) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- the header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--space-4); box-sizing: border-box; min-height: 76px; padding: 12px max(var(--gutter), calc((100vw - var(--max-w)) / 2)); background: color-mix(in srgb, var(--c-paper) 94%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--c-line); }
.site-header__logo { display: block; flex: none; line-height: 0; }
.site-header__logo img { width: auto; height: 36px; }
.site-header__nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__item a { display: block; padding: 10px 14px; border-radius: 999px; font: 600 var(--fs-ui)/1 var(--font-ui); color: var(--c-ink); text-decoration: none; transition: background var(--dur-fast); }
.nav__item a:hover { background: var(--c-paper-alt); }
.nav__item a[aria-current="page"] { background: var(--c-brand-light); }
.nav__item a[data-planned] { color: var(--c-ink); }
.site-header__cta { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--c-ink); color: var(--c-paper); font: 700 var(--fs-ui)/1 var(--font-ui); text-decoration: none; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast); }
.site-header__cta:hover { background: color-mix(in srgb, var(--c-ink) 86%, var(--c-reviewed)); transform: translateY(-1px); }
.site-header__menu { display: none; }
@media (max-width: 960px) {
  .site-header { gap: var(--space-2); min-height: 64px; }
  .site-header__logo img { height: 28px; }
  .site-header__menu { display: inline-flex; align-items: center; margin-left: auto; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--c-line); border-radius: 999px; background: var(--c-paper); color: var(--c-ink); font: 700 var(--fs-ui)/1 var(--font-ui); cursor: pointer; }
  .site-header__cta { display: none; }
  .site-header__nav { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: var(--space-2) var(--gutter) var(--space-4); background: var(--c-paper); border-bottom: 1px solid var(--c-line); box-shadow: var(--shadow-m); }
  .site-header[data-open] .site-header__nav { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; }
  .nav__item a { padding: 14px 12px; font-size: 1.125rem; }
}

/* ---------- buttons and the line under them ---------- */
.btn { box-sizing: border-box; max-width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: 999px; font: 700 1.0625rem/1 var(--font-ui); text-decoration: none; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), background var(--dur-fast); }
.btn--main { background: var(--c-brand); color: var(--c-on-brand); box-shadow: 0 2px 0 var(--c-brand-dark), 0 10px 24px color-mix(in srgb, var(--c-brand) 32%, transparent); }
.btn--main:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--c-brand-dark), 0 14px 28px color-mix(in srgb, var(--c-brand) 36%, transparent); }
.btn--main:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--c-brand-dark); }
.btn__arrow { width: 20px; height: 20px; flex: none; }
.cta-note { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font: 600 var(--fs-small)/1.3 var(--font-ui); color: var(--c-ink-soft); }
.cta-note span { display: inline-flex; align-items: center; gap: 6px; }
.cta-note span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-found); box-shadow: 0 0 0 3px var(--c-found-light); }
.cta-row { display: flex; flex-direction: column; align-items: center; margin-top: var(--space-5); text-align: center; }
.cta-row .cta-note { justify-content: center; }

/* ---------- the clients picker: the logo's rising bars ---------- */
/* The choices stand as bars rising like the logo's chart (--k: each bar's step), their tops joined by its dot-line; the
   chosen bar fills cyan and its node lights. On white, with no box around it. */
.picker { box-sizing: border-box; display: grid; gap: 16px; }
.picker__set { margin: 0; padding: 0; border: 0; min-width: 0; }
.picker__legend { padding: 0; margin-bottom: 14px; font: 700 var(--fs-ui)/1.25 var(--font-ui); color: var(--c-ink); }
.picker__choices { --bar: 50px; --rise: 9px; --gap: 8px; position: relative; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: var(--gap); align-items: end; box-sizing: border-box; height: calc(var(--bar) + (var(--n, 5) - 1) * var(--rise) + 8px); padding-top: 8px; }
.picker__line { position: absolute; z-index: 1; top: 8px; left: calc((100% - (var(--n, 5) - 1) * var(--gap)) / var(--n, 5) / 2); width: calc(100% - (100% - (var(--n, 5) - 1) * var(--gap)) / var(--n, 5)); height: calc((var(--n, 5) - 1) * var(--rise)); overflow: visible; pointer-events: none; }
.picker__line line { fill: none; stroke: color-mix(in srgb, var(--c-ink) 32%, transparent); stroke-width: 3; stroke-dasharray: 0 8; stroke-linecap: round; }
.picker__choice { position: relative; display: block; height: calc(var(--bar) + var(--k, 0) * var(--rise)); }
.picker__choice::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 0; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--c-ink) 34%, var(--c-paper)); background: var(--c-paper); transform: translate(-50%, -50%); pointer-events: none; transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-spring); }
.picker__choice input { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.picker__choice span { display: flex; align-items: flex-end; justify-content: center; box-sizing: border-box; height: 100%; padding-bottom: 12px; border-radius: 14px 14px 8px 8px; background: color-mix(in srgb, var(--c-brand) 14%, var(--c-paper)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-brand) 42%, transparent); font: 700 1.0625rem/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c-ink); transition: background var(--dur-fast), box-shadow var(--dur-fast); }
.picker__choice:hover span { background: color-mix(in srgb, var(--c-brand) 34%, var(--c-paper)); }
.picker__choice:has(input:checked) span { background: var(--c-brand); box-shadow: inset 0 0 0 1.5px var(--c-brand), 0 8px 18px color-mix(in srgb, var(--c-brand) 30%, transparent); }
.picker__choice:has(input:checked)::before { border-color: var(--c-paper); background: var(--c-ink); transform: translate(-50%, -50%) scale(1.15); }
.picker__choice input:focus-visible + span { outline: 3px solid var(--c-brand-text); outline-offset: 2px; }
.picker__button { width: 100%; }
.picker__note { margin-top: 0; justify-content: center; }

/* ---------- the stop icon ---------- */
.stop { position: absolute; z-index: 6; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1.5px solid var(--c-line); border-radius: 50%; background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-s); cursor: pointer; transition: transform var(--dur-fast) var(--ease-out); }
.stop:hover { transform: scale(1.06); }
.stop--on-media { border-color: transparent; background: color-mix(in srgb, var(--c-paper) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ---------- section patterns ---------- */
section { position: relative; }
.sec-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: var(--space-5); }
.sec-head h2 { font-size: var(--fs-h2); }
.sec-head p { font-size: 1.1875rem; line-height: 1.5; color: var(--c-ink-soft); max-width: 600px; }
.mark { width: 24px; height: 24px; fill: currentColor; }

/* ---------- the FAQ ---------- */
.faq__list { display: grid; gap: 10px; }
details[data-faq] { border: 1.5px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-paper); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
details[data-faq][open] { border-color: color-mix(in srgb, var(--c-brand) 45%, var(--c-line)); box-shadow: var(--shadow-s); }
details[data-faq] summary { position: relative; list-style: none; padding: 20px 60px 20px 22px; font: 700 1.1875rem/1.3 var(--font-ui); color: var(--c-ink); cursor: pointer; }
details[data-faq] summary::-webkit-details-marker { display: none; }
details[data-faq] summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--c-paper-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23202225' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform var(--dur-med) var(--ease-out), background-color var(--dur-fast); }
details[data-faq][open] summary::after { transform: rotate(45deg); background-color: var(--c-brand-light); }
details[data-faq] p { padding: 0 22px 22px; color: var(--c-ink-soft); max-width: 680px; }

/* ---------- the other pages' shared parts (the home page's own are in pages\home.css) ---------- */
.tone--brand { --tone: var(--c-brand); --tone-ink: var(--c-ink); }
.tone--found { --tone: var(--c-found); --tone-ink: var(--c-ink); }
.tone--answered { --tone: var(--c-answered); --tone-ink: var(--c-ink); }
.tone--booked { --tone: var(--c-booked); --tone-ink: var(--c-paper); }
.tone--reviewed { --tone: var(--c-reviewed); --tone-ink: var(--c-paper); }
/* the designed ground: the motif's dot field on the pale panel */
.ground { position: relative; border-radius: var(--radius-xl); background-color: var(--c-paper-alt); background-image: radial-gradient(circle, color-mix(in srgb, var(--c-ink) 12%, transparent) 1.3px, transparent 1.8px); background-size: 22px 22px; }
/* the dot-line: from a button to what it connects, its nodes in the four colors (placed by --link-*) */
.link-dots { position: absolute; z-index: 3; left: var(--link-x0, 0); top: var(--link-y, 50%); width: var(--link-w, 0); height: 0; border-top: 3px dotted color-mix(in srgb, var(--c-ink) 34%, transparent); pointer-events: none; }
.link-dots i { position: absolute; top: -1.5px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--c-paper); box-shadow: var(--shadow-s); transform: translate(-50%, -50%); }
.link-dots i:nth-child(1) { left: 18%; background: var(--c-found); }
.link-dots i:nth-child(2) { left: 39%; background: var(--c-answered); }
.link-dots i:nth-child(3) { left: 60%; background: var(--c-booked); }
.link-dots i:nth-child(4) { left: 81%; background: var(--c-reviewed); }
/* a list of services inside a chapter's picture: its name and one line, its node in the chapter's color */
.svc-list { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.svc-list li { position: relative; display: grid; gap: 1px; padding-left: 24px; }
.svc-list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 22%, transparent); }
.svc-list b { font: 700 1.0625rem/1.25 var(--font-ui); color: var(--c-ink); }
.svc-list span { font-size: var(--fs-small); line-height: 1.4; color: var(--c-ink-soft); }
/* a chapter: its words and services in a white card over full-bleed footage, or in one big panel beside its framed footage */
.chapter { position: relative; }
.chapter__clip { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; }
.chapter__slot { position: absolute; z-index: 2; }
.chapter__slot > [data-scene] { height: 100%; }
.chapter__stop { top: 16px; right: 16px; }
.chapter__stop--left { right: auto; left: 16px; }
.chapter--bleed { display: flex; align-items: center; box-sizing: border-box; min-height: 820px; padding: 48px max(var(--gutter), calc((100vw - var(--max-w)) / 2)); overflow: hidden; background: var(--c-paper-alt); }
.chapter__media { position: absolute; inset: 0; overflow: hidden; }
.chapter__media img, .chapter__media video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; }
.chapter__card { position: relative; z-index: 2; display: grid; gap: 14px; box-sizing: border-box; width: min(440px, 100%); padding: 32px 30px 30px; border-top: 8px solid var(--tone); border-radius: var(--radius-l); background: var(--c-paper); box-shadow: var(--shadow-l); }
.chapter__card h2, .chapter__words h2 { font-size: clamp(1.9rem, 1.3rem + 1.7vw, 2.75rem); }
.chapter__card > p, .chapter__words > p { color: var(--c-ink-soft); font-size: 1.0625rem; line-height: 1.45; }
.chapter__card .svc-list { margin-top: 6px; }
.chapter--flip { justify-content: flex-end; }
.chapter--panel { padding-block: var(--section-y); }
.chapter__panel { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-5); padding: clamp(18px, 2.4vw, 32px); border-top: 8px solid var(--tone); border-radius: var(--radius-xl); background: var(--c-paper-alt); }
.chapter__words { display: grid; gap: 14px; align-content: center; padding: 12px 8px; }
.chapter__words .svc-list { margin-top: 8px; }
.chapter__stage { position: relative; min-height: 600px; border-radius: var(--radius-l); overflow: hidden; background: var(--c-line); }
.chapter--swap .chapter__panel { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.chapter--swap .chapter__stage { order: -1; }
@media (max-width: 960px) {
  .chapter--bleed { display: block; min-height: 0; padding: 0; background: var(--c-paper); }
  .chapter__card { width: auto; margin: 20px var(--gutter) var(--space-5); box-shadow: var(--shadow-m); }
  .chapter__media { position: relative; inset: auto; }
  .chapter__panel, .chapter--swap .chapter__panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .chapter--swap .chapter__stage { order: 0; }
}
/* the closing band: full-bleed footage, a white card with the headline and the main button */
.band { position: relative; display: flex; align-items: center; box-sizing: border-box; min-height: 680px; padding-block: 56px; overflow: hidden; background: var(--c-paper-alt); }
.band__media { position: absolute; inset: 0; overflow: hidden; }
.band__media video, .band__media img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; }
.band__wrap { position: relative; z-index: 2; }
.band__card { display: grid; justify-items: start; gap: 14px; box-sizing: border-box; width: min(500px, 100%); padding: 34px 32px; border-radius: var(--radius-l); background: var(--c-paper); box-shadow: var(--shadow-l); }
.band__card h2 { font-size: clamp(2rem, 1.35rem + 2vw, 3rem); }
.band__card > p { color: var(--c-ink-soft); font-size: 1.125rem; }
.band__stop { top: 20px; right: 20px; }
.band--right .band__wrap { display: flex; justify-content: flex-end; }
@media (max-width: 760px) {
  .band { display: block; min-height: 0; padding: 0; background: var(--c-paper); }
  .band__media { position: relative; inset: auto; height: 300px; }
  .band__wrap { padding-block: 0 var(--space-5); }
  .band__card { width: auto; margin-top: -40px; }
}
/* an inner page's FAQ: the home page's, on the pale band */
.faq--inner { padding-block: var(--section-y); background: var(--c-paper-alt); }
.faq__wrap { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--space-6); align-items: start; }
.faq__head { margin-bottom: 0; }
@media (max-width: 900px) { .faq__wrap { grid-template-columns: 1fr; gap: var(--space-4); } }

/* ---------- the footer ---------- */
.site-footer { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.7fr)); gap: var(--space-5) var(--space-5); box-sizing: border-box; padding: var(--space-6) max(var(--gutter), calc((100vw - var(--max-w)) / 2)) var(--space-4); background: var(--c-paper-alt); border-top: 1px solid var(--c-line); }
.site-footer__logo { display: inline-block; line-height: 0; }
.site-footer__logo img { width: auto; height: 34px; }
.site-footer__line { margin-top: var(--space-3); max-width: 420px; font-size: var(--fs-small); color: var(--c-ink-soft); }
.site-footer__title { margin-bottom: 12px; font: 800 var(--fs-ui)/1.2 var(--font-display); color: var(--c-ink); }
.site-footer__col ul, .site-footer__legal ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li + li { margin-top: 8px; }
.site-footer__col a, .site-footer__legal a { color: var(--c-ink); font-size: var(--fs-small); font-weight: 600; text-decoration: none; }
.site-footer__col a:hover, .site-footer__legal a:hover { color: var(--c-brand-text); text-decoration: underline; }
.site-footer__contact:empty { display: none; }
.site-footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: var(--space-4); border-top: 1px solid var(--c-line); font-size: var(--fs-small); color: var(--c-ink-soft); }
.site-footer__legal ul { display: flex; gap: 20px; }
@media (max-width: 760px) { .site-footer { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }

/* ---------- the exit popup ---------- */
.exit { box-sizing: border-box; width: min(880px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); margin: auto; padding: 0; border: 0; border-radius: var(--radius-xl); background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-l); overflow: auto; }
.exit::backdrop { background: rgb(32 34 37 / 0.45); backdrop-filter: blur(4px); }
.exit[data-kit-on] { animation: exit-in var(--dur-med) var(--ease-out); }
@keyframes exit-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.exit__in { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.exit__pic { position: relative; min-height: 100%; overflow: hidden; }
.exit__pic img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; }
.exit__card { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-m); background: var(--c-paper); box-shadow: var(--shadow-l); }
.exit__card b { display: block; font: 700 1rem/1.2 var(--font-ui); }
.exit__card small { display: block; font: 500 0.875rem/1.3 var(--font-ui); color: var(--c-ink-soft); }
.exit__node { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--c-booked); color: var(--c-paper); }
.exit__mark { width: 22px; height: 22px; fill: currentColor; }
.exit__body { display: grid; gap: 14px; align-content: center; padding: 40px 36px 32px; }
.exit__headline { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem); }
.exit__line { color: var(--c-ink-soft); }
.picker--exit { padding: 0; border: 0; box-shadow: none; }
.exit__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--c-paper-alt); color: var(--c-ink); cursor: pointer; }
.exit__close svg { width: 18px; height: 18px; }
html[data-kit-modal] { overflow: hidden; }
@media (max-width: 720px) { .exit__in { grid-template-columns: 1fr; } .exit__pic { min-height: 200px; } .exit__body { padding: 24px 20px 22px; } }

/* ---------- the call bar on the phone (only with a phone number) ---------- */
.callbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: flex; gap: 8px; padding: 8px; border-radius: 999px; background: var(--c-paper); box-shadow: var(--shadow-l); transform: translateY(140%); transition: transform var(--dur-med) var(--ease-out); }
.callbar[data-kit-on] { transform: none; }
.callbar a { flex: 1; display: grid; place-items: center; min-height: 48px; border-radius: 999px; font: 700 var(--fs-ui)/1 var(--font-ui); text-decoration: none; }
.callbar__call { background: var(--c-paper-alt); color: var(--c-ink); }
.callbar__cta { background: var(--c-brand); color: var(--c-on-brand); }

/* ---------- the thank-you page, the 404, the legal pages ---------- */
.thanks { box-sizing: border-box; display: grid; justify-items: center; gap: var(--space-3); max-width: calc(720px + 2 * var(--gutter)); margin-inline: auto; padding: calc(var(--section-y) * 1.2) var(--gutter); text-align: center; }
.thanks::before { content: ""; width: 72px; height: 72px; border-radius: 24px; background: var(--c-found) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23202225' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 36px no-repeat; box-shadow: 0 0 0 10px var(--c-found-light); margin-bottom: var(--space-3); }
.thanks__headline { font-size: var(--fs-h1); }
.thanks__body { max-width: 560px; font-size: 1.1875rem; color: var(--c-ink-soft); }
.thanks__next { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.thanks__next a { display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--c-line); font: 700 var(--fs-ui)/1 var(--font-ui); color: var(--c-ink); text-decoration: none; }
.thanks__next li:first-child a { border-color: var(--c-brand); background: var(--c-brand); color: var(--c-on-brand); }
.not-found__headline { font-size: var(--fs-h1); }
.not-found__body { color: var(--c-ink-soft); }
.not-found__cta { display: grid; justify-items: start; }
.not-found__home { font-weight: 700; }
.legal h1 { font-size: var(--fs-h1); }
.legal h2 { font-size: 1.5rem; }
.legal__note { border-radius: var(--radius-m); }