/* Katlin landing: layout and look. Values from tokens.css only (no literal colours). Design v1 (branch innovation/design-v1):
   deep-green hero with the photo as the dominant element, rising steps as the one motif (hero, the fact block, the results list),
   one accent (terracotta) for the action. Round 2 (14.10): sticky compact header, one fact block, native FAQ accordions, shorter rhythm. */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --c-on-dark-soft: color-mix(in srgb, var(--c-bg) 72%, transparent);
  --c-on-dark-muted: color-mix(in srgb, var(--c-bg) 86%, var(--c-accent-2)); /* solid, so the pixel contrast probe can measure it */
  --c-dark-line: color-mix(in srgb, var(--c-bg) 28%, transparent);
  --c-hair: color-mix(in srgb, var(--c-line) 35%, var(--c-bg));
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out for entrances and press feedback */
  --c-img-edge: oklch(0 0 0 / 0.1); /* 1px image outline: pure black at 10 % (never a tinted neutral) */
  --step-h: 2.5rem;
  --photo-overlap: 0rem;
  --header-h: 3.5rem; /* sticky header, 56 px: also the offset of every anchor jump */
  --icon-stroke: 2px; /* ONE line-icon style: the same stroke for the plus and minus, the arrows and the back-to-top chevron */
  --sticky-cta-h: 5.5rem;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-padding-bottom: 10rem; /* a focused control is scrolled clear of the sticky CTA and the back-to-top link (WCAG 2.4.11) */
}
@media (min-width: 768px) { html { scroll-padding-bottom: 7rem; } }
/* an anchor jump and a keyboard focus never put the heading or the control under the sticky header */
[id], a, button, input, select, textarea, summary, [tabindex] { scroll-margin-top: calc(var(--header-h) + var(--s-3)); }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font: var(--t-m) / var(--lh-body) var(--font-body);
  font-weight: var(--w-regular);
  overflow-wrap: break-word;
  accent-color: var(--c-accent);
  caret-color: var(--c-accent);
}
::selection { background: var(--c-accent); color: var(--c-accent-text); }
img, picture, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--w-bold); line-height: var(--lh-head); margin: 0 0 var(--s-4); text-wrap: balance; letter-spacing: -0.015em; }
p:not(.lead), li, figcaption { text-wrap: pretty; }
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
p, ul, ol, figure, blockquote { margin: 0 0 var(--s-4); }
ul, ol { padding-left: 1.25em; }
a { color: var(--c-accent); text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
strong { font-weight: var(--w-bold); }
.nw { white-space: nowrap; } /* a numeral and its word stay on one line */

/* one visible, calm focus system: 3 px ring in the action colour on light, in cream on the green blocks */
:focus-visible { outline: var(--focus-width) solid var(--c-focus); outline-offset: var(--focus-offset); border-radius: var(--r-1); }
[tabindex="-1"]:focus { outline: none; }
[tabindex="-1"]:focus-visible { outline: var(--focus-width) solid var(--c-focus); outline-offset: 0.25em; }
.on-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--c-bg); }

.container { width: min(100% - 2 * var(--pad), var(--container)); margin-inline: auto; }
.narrow { max-width: none; }
.narrow > * { max-width: var(--measure); }
.section { padding-block: calc(var(--section-gap) / 2); } /* the gap between two blocks is the token --section-gap (mobile s-8, desktop s-9) */
.section--tint { background: var(--c-surface); }
.on-dark { background: var(--c-accent-2); color: var(--c-bg); }
.on-dark a:not(.btn) { color: inherit; }

.skip-link {
  position: absolute; left: var(--s-2); top: var(--s-2);
  padding: var(--s-2) var(--s-4); background: var(--c-bg); color: var(--c-text);
  border: 2px solid var(--c-text); border-radius: var(--r-1);
  transform: translateY(-300%); z-index: 30;
}
.skip-link:focus { transform: none; }

/* header: sticky and compact (56 px), on the same green as the hero, so the first screen is one piece */
.site-header { position: sticky; top: 0; background: var(--c-accent-2); color: var(--c-bg); z-index: 20; }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: var(--s-3); }
.brand { color: var(--c-bg); text-decoration: none; min-height: var(--target); display: inline-flex; align-items: center; gap: var(--s-3); }
.brand img { display: block; height: 2.25rem; width: auto; } /* the mark, 36 px high on a phone */
.brand-word { display: inline-flex; align-items: baseline; gap: 0.3em; white-space: nowrap; line-height: 1; }
.brand-name { font-family: var(--font-display); font-weight: var(--w-bold); font-size: 1.375rem; letter-spacing: -0.01em; }
.brand-sub { font-family: var(--font-body); font-weight: var(--w-regular); font-size: 1.125rem; color: var(--c-on-dark-muted); }
@media (min-width: 768px) { .brand img { height: 2.75rem; } .brand-name { font-size: 1.625rem; } .brand-sub { font-size: 1.3125rem; } } /* 44 px mark, a larger wordmark on a desktop */
.nav-toggle { /* plain text, no box */
  display: inline-flex; align-items: center; min-height: var(--target); padding-inline: var(--s-2); margin-right: calc(-1 * var(--s-2));
  color: var(--c-bg); font-weight: var(--w-medium); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.25em;
}
.site-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--c-accent-2); border-block: 1px solid var(--c-dark-line); visibility: hidden; }
.site-nav:target, .site-nav.is-open { visibility: visible; }
.site-nav ul { list-style: none; margin: 0; padding: var(--s-2) var(--pad) var(--s-4); }
.site-nav a { display: flex; align-items: center; min-height: var(--target); text-decoration: none; color: var(--c-bg); }
.site-nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 0.14em; text-underline-offset: 0.3em; font-weight: var(--w-medium); }
/* the labels sit in one row only where they fit beside the logo (1100 px and up); below that the plain-text Menu button opens the same list */
@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .site-nav { position: static; visibility: visible; border: 0; background: none; }
  .site-nav ul { display: flex; gap: var(--s-6); padding: 0; }
  .site-nav a { white-space: nowrap; }
}

/* buttons: terracotta on light, cream on green; the only filled accent on the page */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 3.25rem; padding: var(--s-3) var(--s-6);
  background: var(--c-accent); color: var(--c-accent-text);
  border: 2px solid var(--c-accent); border-radius: var(--r-pill);
  font: inherit; font-weight: var(--w-bold); text-decoration: none; cursor: pointer; text-align: center;
}
a.btn::after { content: ""; width: 0.6rem; height: 0.6rem; margin-right: 0.2rem; border-top: var(--icon-stroke) solid currentColor; border-right: var(--icon-stroke) solid currentColor; transform: rotate(45deg); flex: none; }
.btn:active { background: var(--c-accent-2); border-color: var(--c-accent-2); color: var(--c-bg); }
.btn--light, .btn--light:visited { background: var(--c-bg); color: var(--c-accent-2); border-color: var(--c-bg); }
.btn--light:active { background: var(--c-surface); border-color: var(--c-surface); color: var(--c-accent-2); }
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-thickness: 0.16em; }
  .nav-toggle:hover { text-decoration-thickness: 0.16em; }
  .site-nav a:hover { text-decoration: underline; text-decoration-thickness: 0.14em; }
  .btn:hover { background: var(--c-accent-2); border-color: var(--c-accent-2); color: var(--c-bg); }
  .btn--light:hover { background: var(--c-surface); border-color: var(--c-surface); color: var(--c-accent-2); }
  .field input[type="text"]:hover, .field input[type="email"]:hover, .choice:hover { border-color: var(--c-text); }
  .faq-item summary:hover { color: var(--c-accent); }
  .to-top:hover { background: var(--c-accent-2); border-color: var(--c-accent-2); color: var(--c-bg); }
  .brand:hover img { transform: translateY(-1px); }
}
.btn:disabled { background: var(--c-text-muted); border-color: var(--c-text-muted); color: var(--c-accent-text); cursor: progress; }

/* hero */
.hero { position: relative; z-index: 2; margin-bottom: -1px; padding-block: var(--s-5) calc(var(--s-5) + var(--step-h)); }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--step-h); background: var(--c-bg);
  clip-path: polygon(0 100%, 0 84%, 16.66% 84%, 16.66% 67%, 33.33% 67%, 33.33% 50%, 50% 50%, 50% 34%, 66.66% 34%, 66.66% 17%, 83.33% 17%, 83.33% 0, 100% 0, 100% 100%);
}
.hero-grid { position: relative; z-index: 1; display: grid; gap: var(--s-5); }
.hero h1 { font-size: clamp(1.875rem, 8.2vw, 2.5rem); line-height: 1.12; margin-bottom: var(--s-4); max-width: 18em; }
.hero .lead { font-size: var(--t-m); max-width: 34rem; margin-bottom: var(--s-5); }
.hero-cta { margin: 0; }
.hero-note { margin: var(--s-3) 0 0; max-width: 28rem; font-size: var(--t-s); line-height: 1.5; color: var(--c-on-dark-muted); }
.hero-photo { margin: 0; width: 100%; max-width: 26rem; position: relative; z-index: 3; }
.photo-frame { position: relative; isolation: isolate; }
.photo-frame::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border: 2px solid var(--c-dark-line); border-radius: var(--r-2);
  transform: translate(0.75rem, 0.75rem);
}
.hero-photo img, .about-photo img, .materials img { outline: 1px solid var(--c-img-edge); outline-offset: -1px; }
.hero-photo img, .about-photo img, .materials img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-2); background: var(--c-surface); }
.name-tag { /* inside the image, on the image's own grid: one step in from the left and the bottom edge */
  position: absolute; left: var(--s-4); bottom: var(--s-4); max-width: calc(100% - 2 * var(--s-4));
  background: var(--c-bg); color: var(--c-text); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-1);
}
.person-name { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-l); line-height: 1.15; margin: 0; }
.person-role { margin: 0; font-size: var(--t-s); color: var(--c-text); }
@media (min-width: 768px) {
  .hero { padding-block: var(--s-6) calc(var(--s-6) + var(--step-h)); --step-h: 3.5rem; }
  .hero h1 { font-size: var(--t-xl); }
  .hero .lead { font-size: var(--t-l); }
  .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; gap: var(--s-7); }
  .hero-photo { max-width: none; }
}
@media (min-width: 1100px) {
  :root { --photo-overlap: 0rem; }
  .hero { padding-block: var(--s-6) calc(var(--s-6) + var(--step-h)); --step-h: 4.5rem; }
  .hero h1 { font-size: clamp(2.25rem, 3.3vw, 3rem); max-width: 14em; }
  .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: var(--s-7); }
}

/* fact strip (only variants that list the slot; the default page has ONE fact block, in S11) */
.facts { position: relative; z-index: 1; background: var(--c-surface); padding-block: var(--s-4) var(--s-7); }
.facts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fact { margin: 0; padding-block: var(--s-4); border-bottom: 1px solid var(--c-hair); }
.fact p { margin: 0 0 var(--s-1); overflow-wrap: normal; hyphens: manual; }
.fact p:last-child { margin-bottom: 0; }
.facts-list, .schedule, .form-intro, .group-list { font-variant-numeric: tabular-nums lining-nums; }
.facts-list strong { font-family: var(--font-display); font-size: 1.4em; line-height: 1; font-variant-numeric: lining-nums; letter-spacing: -0.02em; }
.fact--price { font-size: var(--t-l); }
.fact--price strong { font-size: var(--t-xxl); }
.fact--dates p:first-child strong { font-family: var(--font-body); font-size: var(--t-m); line-height: var(--lh-normal); letter-spacing: 0; }
.fact--dates p:last-child strong { font-size: var(--t-xl); }
.fact--deadline { border-bottom: 0; font-weight: var(--w-medium); }
.fact--deadline strong { font-family: var(--font-body); font-size: inherit; letter-spacing: 0; }
@media (min-width: 768px) {
  .facts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
  .fact--price, .fact--deadline { grid-column: 1 / -1; }
  .fact--price { padding-top: var(--s-5); }
}

/* shared editorial rhythm: head (left, calm sticky) + body (right) */
.split { display: grid; gap: var(--s-5); }
.split > * { min-width: 0; }
.split-head h2 { margin: 0; }
.split-body > :last-child { margin-bottom: 0; }
@media (min-width: 1100px) {
  .split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s-8); }
  .split-head { align-self: start; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .split--form .split-head { position: static; }
}
.statement { font-size: var(--t-l); line-height: 1.4; }
.after-list { margin-top: var(--s-5); }

/* S4: a framed lead block on the surface colour with one dot; the SAME type size as her body text (Katlin 14.10), the areas carry the emphasis by weight only */
.intro { padding-block: var(--s-5) calc(var(--section-gap) / 2); }
.lead-block { margin: 0; max-width: 40rem; padding: var(--s-5); background: var(--c-surface); border-radius: var(--r-2); font-size: var(--t-m); line-height: var(--lh-body); }
.lead-block::before { content: ""; display: block; width: 0.75rem; height: 0.75rem; margin-bottom: var(--s-3); border-radius: 50%; background: var(--c-accent-2); }
.lead-block strong { font-weight: var(--w-bold); }
@media (min-width: 768px) { .lead-block { padding: var(--s-6); max-width: 44rem; } }
/* the rising steps beside S4 (decoration only, aria-hidden, no text): the brand's own motif in green tints and one terracotta step, with the small dots of the fact block;
   shown only where the page grid has a left column (1100 px and up), so on a phone S4 stays first */
.intro-art { display: none; }
.steps-art { display: block; width: 13.75rem; height: auto; }
.art-step { fill: color-mix(in srgb, var(--c-accent-2) 22%, var(--c-bg)); }
.art-s2 { fill: color-mix(in srgb, var(--c-accent-2) 34%, var(--c-bg)); }
.art-s3 { fill: color-mix(in srgb, var(--c-accent-2) 48%, var(--c-bg)); }
.art-s4 { fill: color-mix(in srgb, var(--c-accent-2) 66%, var(--c-bg)); }
.art-s5 { fill: var(--c-accent); }
.art-dot { fill: var(--c-bg); }
.art-arrow { fill: none; stroke: var(--c-accent-2); stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } /* the same thin line as the plus/minus and the back-to-top chevron; ink green on the cream ground is far above 3:1 */
@media (min-width: 1100px) { .intro-art { display: block; align-self: center; position: static; } }

/* S5: a calm pull quote in italic (1.35 x body, at most 60 characters wide); no portrait, name or caption (user 14.10) */
.quote-band { padding-block: var(--s-6); }
.quote-stack { display: grid; gap: var(--s-5); justify-items: start; }
.quote { margin: 0; }
.quote p { font-family: var(--font-body); font-style: italic; font-weight: var(--w-regular); font-size: calc(var(--t-m) * 1.35); line-height: 1.45; margin: 0; max-width: 60ch; text-wrap: pretty; }
@media (min-width: 768px) { .quote-band { padding-block: var(--s-7); } }

/* IMG-2: beside the group info (head column) on desktop, full width up to 22 rem on a phone; a separate slot block only in variants that list it */
.materials { margin: var(--s-5) 0 0; max-width: 22rem; }
.materials-wrap { padding-block: calc(var(--section-gap) / 2); }
.materials-wrap .materials { margin-top: 0; max-width: 28rem; }
@media (min-width: 1100px) { .materials-wrap .materials { margin-left: calc((100% - var(--s-8)) / 3 + var(--s-8)); } }

/* lists: neutral dots (a tick reads as "correct"); the rising bars belong to the results list and the fact block only */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.checks li { display: flex; gap: var(--s-4); align-items: baseline; margin: 0; padding: var(--s-3) var(--s-4); background: var(--c-bg); border-radius: var(--r-2); font-size: var(--t-m); }
.check-mark { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-accent-2); font-size: 0; line-height: 0; overflow: hidden; transform: translateY(-0.15em); } /* the glyph stays in the text, only the dot shows */
.plain-list { list-style: none; padding: 0; margin: 0 0 var(--s-5); }
.plain-list li { position: relative; margin: 0; padding: var(--s-2) 0 var(--s-2) var(--s-6); border-top: 1px solid var(--c-hair); }
.plain-list li:last-child { border-bottom: 1px solid var(--c-hair); }
.plain-list li::before { content: ""; position: absolute; left: 0.1rem; top: 1.15em; width: 0.5rem; height: 0.5rem; background: var(--c-accent-2); border-radius: 50%; }
.results-list li { font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem); line-height: 1.4; padding-block: var(--s-4); } /* one step below the headline size (user 14.10): 20 px on a phone, 24 px on a desktop, still larger than the body text */
.results-list li::before { top: 1.45em; left: 0; width: 0.9rem; height: 0.4rem; border-radius: 0; }
.results-list li:nth-child(2)::before { height: 0.6rem; }
.results-list li:nth-child(3)::before { height: 0.8rem; }
.results-list li:nth-child(4)::before { height: 1rem; }
.results-list li:nth-child(5)::before { height: 1.2rem; top: 1.3em; }
.note-strong { margin-top: var(--s-5); }
@media (min-width: 768px) { .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .checks li { padding: var(--s-4) var(--s-5); } .plain-list li { padding-block: var(--s-3); } }

/* S11, the one fact block: one column on a path (a line and a dot per fact), the dates last and largest, the six weeks as rising steps */
.path-list { list-style: none; margin: 0 0 var(--s-4); padding: 0 0 0 var(--s-6); position: relative; font-variant-numeric: tabular-nums lining-nums; }
.path-list::before { content: ""; position: absolute; left: 0.3rem; top: 1rem; bottom: 1rem; border-left: var(--path-stroke) solid var(--c-accent-2); }
.path-list li { position: relative; margin: 0; padding-block: var(--s-3); border-bottom: 1px solid var(--c-hair); }
.path-list li:last-child { border-bottom: 0; }
.path-list li::before { content: ""; position: absolute; left: calc(-1 * var(--s-6) + 0.05rem); top: 1.35em; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--c-accent-2); }
.path-list li:last-child::before { background: var(--c-accent); }
/* the numerals of the group info at display size (user 14.10: the price filters leads): 6, 12, the price and the 6 of "6-nädalase"; the price row is the strongest;
   the deadline line is a little larger than the body text, its date bold (size and weight only: no colour, no urgency styling) */
.group-list strong { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-xl); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: lining-nums; }
.group-list .path-price strong { font-size: var(--t-xxl); color: var(--c-accent); }
.group-list .path-deadline { font-size: calc(var(--t-m) * 1.15); line-height: 1.5; }
.group-list .path-deadline strong { font-family: var(--font-body); font-size: inherit; line-height: inherit; letter-spacing: 0; white-space: normal; }
.facts-organiser { margin: 0 0 var(--s-4); color: var(--c-text-muted); font-size: var(--t-s); }
.schedule { margin-top: var(--s-5); padding: var(--s-5); border-radius: var(--r-2); }
.schedule p { margin: 0; }
.schedule-label { font-size: var(--t-m); }
.schedule-dates { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-xl); line-height: 1.1; margin: var(--s-2) 0 var(--s-5); letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: lining-nums; }
.path-12 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); align-items: end; height: 5rem; margin: 0; }
.path-12 .week { display: flex; justify-content: center; align-items: flex-start; gap: var(--s-1); padding-top: var(--s-2); background: var(--c-dark-line); border-radius: var(--r-1) var(--r-1) 0 0; height: 30%; }
.path-12 .week:nth-child(2) { height: 42%; }
.path-12 .week:nth-child(3) { height: 54%; }
.path-12 .week:nth-child(4) { height: 66%; }
.path-12 .week:nth-child(5) { height: 82%; }
.path-12 .week:nth-child(6) { height: 100%; }
.path-12 .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-bg); }
@media (min-width: 768px) { .schedule { padding: var(--s-6); } .schedule-dates { font-size: var(--t-xxl); } .path-12 { height: 7rem; gap: var(--s-3); } }

/* how it starts (S14, only in non-release builds) */
.steps { list-style: none; padding: 0 0 0 var(--s-6); margin: 0; position: relative; }
.steps::before { content: ""; position: absolute; left: 0.45rem; top: 0.5rem; bottom: 0.5rem; border-left: var(--path-stroke) solid var(--path-color); transform-origin: top; }
.steps li { position: relative; margin-bottom: var(--s-5); }
.steps li::before { content: ""; position: absolute; left: calc(-1 * var(--s-6) + 0.1rem); top: 0.45rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--path-color); }
.steps p { margin: 0 0 var(--s-1); max-width: var(--measure); }

/* S16 cards (render only from the permission record): compact, two side by side from 768 px, the quote at body size, the first sentences visible and the rest behind "Loe edasi" */
.cards { display: grid; gap: var(--s-4); align-items: start; }
.card { margin: 0; padding: var(--s-5); background: var(--c-surface); border-radius: var(--r-2); }
.card blockquote { margin: 0 0 var(--s-3); }
.card blockquote p { font-size: var(--t-m); line-height: 1.5; margin: 0; } /* body face: a quote of 750 characters must read as a letter, not as a headline */
.card .read-more { margin-top: var(--s-2); }
.card .read-more p { margin-top: var(--s-2); }
.card .read-more summary { display: inline-flex; align-items: center; min-height: var(--target); font-weight: var(--w-medium); color: var(--c-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 0.25em; }
.card figcaption { font-weight: var(--w-medium); font-size: var(--t-s); color: var(--c-text-muted); }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } }

/* CTAs */
.cta { padding-block: var(--s-5); }
.cta p { margin: 0; }
.cta-end .cta { padding-block: var(--s-5); }

/* S15 about (before the proof) */
.about-grid { display: grid; gap: var(--s-6); }
.about-photo { margin: 0; max-width: 22rem; }
.about-photo .photo-frame::before { border-color: var(--c-line); transform: translate(-0.75rem, 0.75rem); }
.about-text h2 { margin-bottom: var(--s-5); }
.about-text p { max-width: var(--measure); }
@media (min-width: 768px) {
  .about-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; gap: var(--s-8); }
  .about-photo { position: sticky; top: calc(var(--header-h) + var(--s-5)); max-width: none; }
}
@media (min-width: 1100px) { .about-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* form: a quiet card, fields unchanged */
.form { display: grid; gap: var(--s-4); max-width: 36rem; padding: var(--s-5); background: var(--c-surface); border-radius: var(--r-2); }
@media (min-width: 768px) { .form { padding: var(--s-6); } }
.field { margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label, .field > legend { display: block; font-weight: var(--w-bold); margin-bottom: var(--s-2); padding: 0; }
.field input[type="text"], .field input[type="email"] {
  width: 100%; min-height: 3.25rem; padding: var(--s-2) var(--s-4);
  font: inherit; color: var(--c-text); background: var(--c-bg);
  border: 2px solid var(--c-border-ui); border-radius: var(--r-1);
}
.field input[type="text"]:focus, .field input[type="email"]:focus { border-color: var(--c-focus); }
.field:has(input[name="grade"]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-2); }
@media (min-width: 520px) { .field:has(input[name="grade"]) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.field:has(input[name="grade"]) > legend, .field:has(input[name="grade"]) > .note, .field:has(input[name="grade"]) > .field-error { grid-column: 1 / -1; }
.field:has(input[name="grade"]) .choice { justify-content: center; padding-inline: var(--s-2); }
.field:has(input[name="grade"]) .choice label { flex: none; }
.choice { display: flex; align-items: center; gap: var(--s-3); min-height: var(--target); padding-inline: var(--s-3); background: var(--c-bg); border: 2px solid var(--c-line); border-radius: var(--r-1); margin-bottom: var(--s-1); }
.choice:has(input:checked) { border-color: var(--c-accent); }
.choice input { width: 1.5rem; height: 1.5rem; flex: none; accent-color: var(--c-accent); }
.choice label { flex: 1; min-height: var(--target); display: flex; align-items: center; }
.field--consent .choice { background: none; border: 0; padding-inline: 0; }
.field-error { margin: var(--s-2) 0 0; color: var(--c-error); font-weight: var(--w-medium); }
.field-error:empty { display: none; }
.field-error::before { content: "!" / ""; display: inline-block; width: 1.25em; height: 1.25em; margin-right: var(--s-2); border: 2px solid var(--c-error); border-radius: 50%; text-align: center; line-height: 1.1; font-weight: var(--w-bold); }
.field [aria-invalid="true"] { border-color: var(--c-error); }
.error-summary { border: 3px solid var(--c-error); border-radius: var(--r-2); padding: var(--s-4) var(--s-5); margin-block: var(--s-5); max-width: 36rem; overflow-wrap: anywhere; }
.error-summary h2 { font-size: var(--t-l); color: var(--c-error); }
.note { max-width: var(--measure); }
.form-intro { margin-top: var(--s-5); }
.form-intro p { margin: 0 0 var(--s-3); max-width: var(--measure); }
.field--consent { border-top: 1px solid var(--c-hair); padding-top: var(--s-5); margin-top: var(--s-3); }
.field .note { margin: 0 0 var(--s-2); color: var(--c-text); }
.form button + .note { margin-top: var(--s-4); }
.hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.status-page { padding-block: var(--s-8); }
main > .container.narrow > h1:first-child { padding-top: var(--s-6); }

/* FAQ: native details, closed; the answers stay in the HTML */
.faq-item { border-top: 1px solid var(--c-hair); }
.faq-item:last-child { border-bottom: 1px solid var(--c-hair); }
.faq-item summary {
  position: relative; display: flex; align-items: center; cursor: pointer; list-style: none;
  min-height: 3rem; padding-block: var(--s-3); padding-right: calc(24px + var(--s-4));
  font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-m); line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* the icon: a 24 px area at the right, two bars of 14 px; the second bar stands upright (a plus) and lies down when the entry is open (a minus) */
.faq-item summary::before, .faq-item summary::after {
  content: ""; position: absolute; right: 5px; top: 50%; width: 14px; height: var(--icon-stroke); margin-top: calc(var(--icon-stroke) / -2); background: currentColor;
}
.faq-item summary::after { transform: rotate(90deg); }
.faq-item[open] summary::after { transform: rotate(0deg); }
.faq-answer { padding-bottom: var(--s-4); }
.faq-answer p, .faq-answer ol { margin: 0 0 var(--s-3); max-width: var(--measure); }
.faq-answer ol { padding-left: 1.5em; }

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: var(--s-3) var(--pad) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--c-bg); border-top: 1px solid var(--c-line);
  visibility: hidden; opacity: 0; display: flex; justify-content: center;
}
.sticky-cta .btn { width: 100%; max-width: 28rem; }
.sticky-cta.is-visible { visibility: visible; opacity: 1; }
@media (min-width: 768px) { .sticky-cta { display: none; } }

/* back to top: a small link in the bottom corner after the first screen, above the sticky CTA on a phone (JS shows it; without JS it stays out) */
.to-top {
  position: fixed; right: var(--s-3); bottom: calc(var(--sticky-cta-h) + var(--s-3) + env(safe-area-inset-bottom)); z-index: 9;
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--target); padding: var(--s-2) var(--s-4);
  background: var(--c-bg); color: var(--c-text); border: 2px solid var(--c-text); border-radius: var(--r-pill);
  font-size: var(--t-s); font-weight: var(--w-medium); line-height: 1.2; text-decoration: none; visibility: hidden; opacity: 0;
}
.to-top::before { content: ""; width: 0.5rem; height: 0.5rem; border-top: var(--icon-stroke) solid currentColor; border-left: var(--icon-stroke) solid currentColor; transform: translateY(0.1rem) rotate(45deg); flex: none; }
.to-top.is-visible { visibility: visible; opacity: 1; }
.to-top.is-visible.is-dodging { visibility: hidden; opacity: 0; } /* never over an AI caption: it steps aside while one is next to it */
.to-top:focus-visible { outline: 3px solid var(--c-bg); outline-offset: 0; box-shadow: 0 0 0 6px var(--c-text); } /* a double ring (cream, then dark): readable on the cream and on the green blocks, and kept in forced-colours mode */
@media (min-width: 768px) { .to-top { right: var(--s-5); bottom: var(--s-5); } }

/* AI caption (Legal D57): small and discreet, but legible: one line directly under the photo, 13 px, AA against the ground it sits on */
.ai-label { margin: var(--s-2) 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--c-text-muted); }
.on-dark .ai-label { color: var(--c-on-dark-muted); }
.ai-figcaption { margin: 0; }
.photo-frame + .ai-figcaption { margin-top: calc(0.75rem + var(--s-2)); } /* below the offset frame line, so no line runs through the caption */
.materials .ai-figcaption { margin: var(--s-2) 0 0; }
.materials .ai-label { margin: 0; }

/* footer on the same green */
.site-footer { background: var(--c-accent-2); color: var(--c-bg); padding-block: var(--s-6) 10rem; font-size: var(--t-s); } /* clear of the sticky CTA and the back-to-top link on a phone */
.cta-end + .site-footer { border-top: 1px solid var(--c-dark-line); }
.site-footer p { margin: 0 0 var(--s-2); max-width: 60ch; }
.site-footer a { color: var(--c-bg); }
.site-footer p:nth-child(2) a { display: inline-flex; align-items: center; min-height: var(--target); }
@media (min-width: 768px) { .site-footer { padding-bottom: var(--s-6); } }

/* motion: only under no-preference; the final static state is the default */
@media (prefers-reduced-motion: no-preference) {
  /* hover and focus: colour only, 150 ms (these fire often); press: a 0.96 scale, 120 ms in, released at the same speed */
  .btn, .site-nav a, .choice, .field input[type="text"], .field input[type="email"], .to-top {
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  }
  .btn { transition-property: background-color, color, border-color, transform; transition-duration: var(--dur-1), var(--dur-1), var(--dur-1), 120ms; transition-timing-function: var(--ease), var(--ease), var(--ease), var(--ease-out); }
  .btn:active { transform: scale(0.96); }
  .brand img { transition: transform var(--dur-1) var(--ease-out); }
  .faq-item summary::after { transition: transform 160ms var(--ease-out); } /* the plus becomes a minus in 160 ms; reduced motion: instant */
  /* hero: transform-only entrance on load, 260 ms, strong ease-out, 50 ms stagger (no opacity, so the largest paint is never delayed; content is visible without it) */
  @keyframes slide-in { from { transform: translateY(14px); } to { transform: none; } }
  .hero-text > * { animation: slide-in calc(var(--dur-2) - 60ms) var(--ease-out) both; }
  .hero-text > .lead { animation-delay: 50ms; }
  .hero-text > .hero-cta { animation-delay: 100ms; }
  @keyframes reveal { from { transform: translateY(12px); } to { transform: none; } }  /* transform only: text is never faded at rest */
  @keyframes draw-y { from { transform: scaleY(0.15); } to { transform: scaleY(1); } }
  @keyframes rise { from { transform: scaleY(0.55); } to { transform: scaleY(1); } }
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal var(--dur-2) var(--ease) both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    .steps::before {
      animation: draw-y linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 60%;
    }
    .path-12 .week {
      transform-origin: bottom;
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 45%;
    }
  }
}