/* Hallmark · shape: Showcase (home), Banner + content (inner pages) · genre: modern-minimal · theme: brand · redesign: full
 * paper: oklch(97.8% 0.004 265) · accent: oklch(50.7% 0.253 263) · display: Schibsted Grotesk 500 · body: Schibsted Grotesk 400/600 · hero: Stage (/), Stage (/en), Banner (/usluge.html), Banner (/o-nama.html), Banner (/kviz.html), Banner (/faq.html), Banner (/kontakt.html), Banner (/en/services.html), Banner (/en/about.html), Banner (/en/quiz.html), Banner (/en/faq.html), Banner (/en/contact.html) · nav: a glass bar, the navy wordmark, five links, language and the phone as a quiet pill · footer: a quiet mast on porcelain under a navy closing card · signature: the deadline ledger, a navy object counting the days to the next 15th live under the headline
 * axes: light/grotesk-sans/chromatic-blue · posture: committed (porcelain and mist carry the page; the logo navy appears as a few objects: the ledger, the reminder tile, the closing card; the logo blue is the one action colour) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V5 · weakest: P, a calm accountant is everyone's pitch; the page argues one mechanism (the warning before the 15th) and proves the firm with its own APR record, and spends its only boldness on the ledger */
/* Hallmark · round 2 at the owner's request: hairline broadsheet rows and the oversized phone numbers removed; one grotesk family; content set on tiles with generous padding; the navy reduced to objects */
/* Hallmark · dropped en/, en/usluge.html, en/o-nama.html, en/kviz.html, en/kontakt.html · the English pages exist under English names; every language switch points at its counterpart */
/* Hallmark · dropped mailto:[EMAIL], tel:[TELEFON_ZA_LINK] · placeholders replaced by the registered phone 065 696 0655 and email from the APR record */
/* Hallmark · dropped logo-white-300.png from the markup · the header and footer take the navy wordmark and the full navy logo on porcelain */
/* Hallmark · dismissed 25 · every flagged measure is a one-line lede or a statement beside or under its head */
/* Hallmark · waive 77 · Ukratko, pre nego što pozoveš: four pitanja set as an 820px reading column on / and /en · an accordion reads best at one measure, the full list lives on the faq page */
/* Hallmark · waive 78 · the inner pages head their content inside cards (Pozovi nas, Ili nam pošalji poruku, Dva broja koja odlučuju) and the footer column heads count toward the median · each page head and group head renders at 40px or more */
/* Hallmark · waive 44c · the hero is navy down to y 880 at 1440 and holds the count and the next rokovi (Coming up) · its measured end stops at Pozovi nas (Call us), above the count */
/* Hallmark · waive 79 · below Pozovi nas sits the live count (dana do sledećeg roka) and the three next rokovi, so no band is empty on screen · the linter reads the count as a figure outside the hero */
/* Hallmark · dismissed F4 · the selected switcher segment is a state of a tablist, not a second primary action */
/* Hallmark · dismissed 77 · the section count on /usluge.html, /kviz.html, /faq.html, /kontakt.html and their English pages · each is a single-purpose page (the service list, the quiz, the questions, the phone and form) under the shared navy close */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- Page ---------- */
body { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-2); font-optical-sizing: auto; }
h1, h2, h3 { color: var(--color-ink); }
h1 { line-height: 1.02; letter-spacing: var(--tracking-display); }
h2 { line-height: 1.06; letter-spacing: -0.03em; }
h3 { font-weight: 600; letter-spacing: -0.012em; line-height: 1.25; }
strong, b { font-weight: 600; color: var(--color-ink); }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-sm); }
.skip:focus-visible { top: var(--space-md); }
.icon { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------- Controls: press feedback on pointer-down ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-md)/1 var(--font-body); letter-spacing: -0.005em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn .icon { width: 18px; height: 18px; }
.btn--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-paper-3); }
.btn--quiet:hover { background: var(--color-paper-2); border-color: var(--color-paper-3); }
.btn--light { background: var(--color-on-field); border-color: var(--color-on-field); color: var(--color-ink); }
.btn--light:hover { background: var(--color-paper-2); border-color: var(--color-paper-2); }
.on-field .btn:focus-visible { outline-color: var(--color-focus-on-field); }
.link { color: var(--color-accent); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--color-accent) 30%, transparent); text-decoration-thickness: 1px; text-underline-offset: 0.25em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.link:hover { text-decoration-color: currentColor; }
.on-field .link { color: var(--color-on-field); text-decoration-color: var(--color-accent-on-field); }
.on-field a:focus-visible, .on-field button:focus-visible { outline-color: var(--color-focus-on-field); }
@media (prefers-reduced-motion: reduce) { .btn, .link { transition: none; } .btn:active { transform: none; } }

.on-field { background: var(--color-field); color: var(--color-on-field-2); }
.on-field h1, .on-field h2, .on-field h3, .on-field strong, .on-field b { color: var(--color-on-field); }

/* ---------- Header: a glass bar the page scrolls under ---------- */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-glass); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 1px 0 transparent; transition: box-shadow var(--dur-short) var(--ease-out); }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--color-glass-edge); }
@media (prefers-reduced-transparency: reduce) { .site-header { background: var(--color-paper); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.header-inner { display: flex; align-items: center; gap: var(--space-xl); min-height: 72px; }
.logo { display: inline-flex; flex-shrink: 0; }
.logo img { width: 118px; height: auto; }
.main-nav { display: flex; align-items: center; gap: var(--space-xl); margin-left: auto; }
.main-nav ul { display: flex; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.main-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.main-nav a:hover { color: var(--color-ink); background: var(--color-paper-2); }
.main-nav a[aria-current="page"] { color: var(--color-ink); background: var(--color-paper-2); font-weight: 600; }
.lang { display: flex; gap: var(--space-3xs); padding: var(--space-3xs); border-radius: var(--radius-pill); background: var(--color-paper-2); font-size: var(--text-xs); }
.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 32px; padding: 0 var(--space-xs); border-radius: var(--radius-pill); color: var(--color-muted); font-weight: 600; text-decoration: none; }
.lang a:hover { color: var(--color-ink); }
.lang a[aria-current="true"] { background: var(--color-card); color: var(--color-ink); box-shadow: var(--shadow-chip); }
.header-phone { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-on-field); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.header-phone:hover { background: var(--color-field-2); }
.header-phone:active { transform: scale(0.97); }
.header-phone .icon { width: 15px; height: 15px; }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); cursor: pointer; }
.nav-toggle:active { transform: scale(0.94); }
.nav-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 68rem) {
  .nav-toggle { display: inline-flex; }
  .header-phone { display: none; }
  .main-nav { flex-direction: column; align-items: stretch; gap: var(--space-lg); margin: 0; }
  .js .main-nav { position: absolute; inset: 100% 0 auto 0; padding: var(--space-md) var(--gutter) var(--space-xl); background: var(--color-paper); box-shadow: var(--shadow-menu); opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-spring), visibility 0s linear var(--dur-short); }
  .js .main-nav.is-open { opacity: 1; transform: none; visibility: visible; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-long) var(--ease-spring); }
  html:not(.js) .main-nav { width: 100%; padding-bottom: var(--space-lg); }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .header-inner { flex-wrap: wrap; padding-block: var(--space-sm); }
  .main-nav ul { flex-direction: column; gap: var(--space-2xs); }
  .main-nav ul a { width: 100%; min-height: 52px; padding: 0 var(--space-md); font-size: var(--text-lg); color: var(--color-ink); border-radius: var(--radius-md); }
  .lang { align-self: flex-start; font-size: var(--text-sm); }
  .lang a { min-height: 40px; min-width: 52px; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section-gap); }
.section--s { padding-block: var(--section-gap-s); }
.section + .section { padding-top: 0; }
.section--s + .section { padding-top: var(--section-gap-s); }
.head { display: grid; gap: var(--space-md); align-content: start; margin-bottom: var(--space-2xl); }
.head h2 { max-width: 20ch; }
.head > p { font-size: var(--text-lead); line-height: 1.5; max-width: 46ch; color: var(--color-ink-2); }
.head--center { justify-items: center; text-align: center; }
.head--center h2 { margin-inline: auto; }
.head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-3xl); align-items: end; }
.head--split > p { justify-self: end; max-width: 40ch; }

/* ---------- Hero: a navy field cut on the slope of the logo's A, the live count as its object ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--space-3xl) calc(var(--space-3xl) + 7vw); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7vw), 0 100%); }
.hero::before { content: ""; position: absolute; z-index: -1; right: -6vw; top: 8%; width: min(64vw, 1000px); aspect-ratio: 1.15 / 1; background: var(--color-field-2); clip-path: polygon(52% 0, 100% 100%, 0 100%); opacity: 0.55; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: end; }
.hero h1 { max-width: 13ch; font-size: clamp(2.5rem, 3.6vw + 1rem, 4.75rem); line-height: 1; }
.hero .lead { margin-top: var(--space-lg); max-width: 36ch; color: var(--color-on-field-2); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xl); }
.count { position: relative; margin: 0; justify-self: end; text-align: right; }
.count[data-slot] { background: none; overflow: visible; }
.count-num { color: var(--color-on-field); font-size: clamp(9rem, 20vw, 21rem); font-weight: 600; line-height: 0.78; letter-spacing: -0.07em; font-variant-numeric: tabular-nums; margin-right: -0.04em; }
.count figcaption { margin-top: var(--space-lg); color: var(--color-on-field-2); font-size: var(--text-lg); line-height: 1.45; }
.count figcaption b { color: var(--color-on-field); }
.count time { font-family: var(--font-outlier); font-size: 0.9em; color: var(--color-accent-on-field); }
.next { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); gap: var(--space-xl); align-items: baseline; margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-on-field-rule); }
.next-h { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; color: var(--color-on-field); }
.next-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.next-list li { display: grid; gap: var(--space-2xs); }
.next-list time { font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-accent-on-field); }
.next-list span { color: var(--color-on-field); font-size: var(--text-sm); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.hero h1, .hero .lead, .hero-actions, .count, .next { animation: rise 1000ms var(--ease-out) both; }
.hero .lead { animation-delay: 80ms; }
.hero-actions { animation-delay: 160ms; }
.count { animation-delay: 120ms; animation-duration: 1300ms; }
.next { animation-delay: 380ms; }
@media (prefers-reduced-motion: reduce) { .hero h1, .hero .lead, .hero-actions, .count, .next { animation: none; } }

/* ---------- Kod drugih / Kod Valida: one switch rewrites the list ---------- */
.head-line { margin-top: var(--space-md); font-size: var(--text-lead); line-height: 1.5; max-width: 40ch; }
.vs-section { padding-top: var(--space-3xl); }
.vs-switch { justify-self: end; display: inline-flex; gap: var(--space-2xs); padding: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-paper-2); }
.vs-switch button { min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-muted); font: 600 var(--text-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.vs-switch button:hover { color: var(--color-ink); }
.vs-switch button:active { transform: scale(0.97); }
.vs-switch button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-on-field); }
.vs-switch button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
html:not(.js) .vs-switch { display: none; }
.vs { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: vs; }
.vs li { counter-increment: vs; display: grid; grid-template-columns: 64px minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl); align-items: baseline; padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.vs li:last-child { border-bottom: 1px solid var(--color-rule); }
.vs li::before { content: counter(vs, decimal-leading-zero); font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-muted); }
.vs-q { color: var(--color-ink); font-size: clamp(1.5rem, 1.4vw + 1rem, 2.25rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.025em; transition: color var(--dur-long) var(--ease-out); }
.vs-q span { background-image: linear-gradient(var(--color-accent), var(--color-accent)); background-repeat: no-repeat; background-position: 0 58%; background-size: 0% 3px; transition: background-size 700ms var(--ease-spring); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.vs-a { color: var(--color-ink); font-size: var(--text-lg); font-weight: 500; transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-spring); }
.vs[data-mode="us"] .vs-q { color: var(--color-muted); }
.vs[data-mode="us"] .vs-q span { background-size: 100% 3px; }
.js .vs[data-mode="others"] .vs-a { opacity: 0; transform: translateX(-16px); }
.vs li:nth-child(2) .vs-q span, .vs li:nth-child(2) .vs-a { transition-delay: 50ms; }
.vs li:nth-child(3) .vs-q span, .vs li:nth-child(3) .vs-a { transition-delay: 100ms; }
.vs li:nth-child(4) .vs-q span, .vs li:nth-child(4) .vs-a { transition-delay: 150ms; }
.vs li:nth-child(5) .vs-q span, .vs li:nth-child(5) .vs-a { transition-delay: 200ms; }
.vs li:nth-child(6) .vs-q span, .vs li:nth-child(6) .vs-a { transition-delay: 250ms; }
@media (prefers-reduced-motion: reduce) { .vs-q, .vs-q span, .vs-a, .vs-switch button { transition: none; } }
.turn { margin-top: var(--section-gap-s); }
.turn p:first-child { color: var(--color-ink); font-size: clamp(3rem, 6vw + 1rem, 7.5rem); font-weight: 600; line-height: 0.92; letter-spacing: -0.055em; max-width: 12ch; }
.turn p + p { margin-top: var(--space-xl); max-width: 40ch; margin-left: auto; font-size: var(--text-lead); line-height: 1.5; }

/* ---------- The limit calculator ---------- */
.calc-section { position: relative; isolation: isolate; overflow: hidden; padding-block: calc(var(--section-gap) + 5vw); clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%); }
.calc-section::before { content: ""; position: absolute; z-index: -1; left: -10vw; bottom: -20%; width: min(54vw, 820px); aspect-ratio: 1.15 / 1; background: var(--color-field-2); clip-path: polygon(52% 0, 100% 100%, 0 100%); opacity: 0.5; }
.section + .calc-section { padding-top: calc(var(--section-gap) + 5vw); margin-top: var(--space-2xl); }
.calc-section + .section { padding-top: var(--section-gap); }
.calc-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); align-items: start; }
.calc-grid .head { margin-bottom: 0; }
.calc-grid .head-line { color: var(--color-on-field-2); }
.calc { display: grid; gap: var(--space-md); padding: var(--space-2xl); border-radius: var(--radius-xl); background: var(--color-field-2); }
.calc-label { color: var(--color-on-field-2); font-size: var(--text-sm); }
.calc-month { color: var(--color-on-field); font-family: var(--font-outlier); font-size: clamp(2.5rem, 3vw + 1rem, 4rem); font-weight: 500; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.calc-range { width: 100%; height: 44px; margin: var(--space-xs) 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.calc-range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-pill); background: var(--color-on-field-rule); }
.calc-range::-moz-range-track { height: 4px; border-radius: var(--radius-pill); background: var(--color-on-field-rule); }
.calc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: calc(-1 * var(--space-sm)); border: 0; border-radius: var(--radius-pill); background: var(--color-on-field); box-shadow: var(--shadow-thumb); transition: transform var(--dur-micro) var(--ease-out); }
.calc-range::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: var(--radius-pill); background: var(--color-on-field); box-shadow: var(--shadow-thumb); }
.calc-range:active::-webkit-slider-thumb { transform: scale(1.15); }
.calc-range:focus-visible { outline: 2px solid var(--color-focus-on-field); outline-offset: 4px; border-radius: var(--radius-sm); }
.calc-bar { position: relative; height: 64px; margin-top: var(--space-lg); border-radius: var(--radius-sm); background: var(--color-field); }
.calc-fill { position: absolute; inset: 0; border-radius: var(--radius-sm); background: var(--color-accent); transform-origin: left; transform: scaleX(0.48); transition: transform 600ms var(--ease-spring), background-color var(--dur-long) var(--ease-out); }
.calc-bar[data-state="near"] .calc-fill { background: var(--color-warn); }
.calc-bar[data-state="over"] .calc-fill { background: var(--color-error); }
.calc-mark { position: absolute; top: 0; bottom: 0; display: flex; align-items: flex-end; padding: 0 0 var(--space-xs) var(--space-xs); color: var(--color-on-field); font-size: var(--text-xs); white-space: nowrap; }
.calc-mark i { position: absolute; left: 0; top: -8px; bottom: -8px; width: 2px; background: var(--color-on-field); }
.calc-mark--limit { left: 60%; }
.calc-mark--vat { left: 80%; }
.calc-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); margin: var(--space-lg) 0 0; }
.calc-out dt { color: var(--color-on-field-2); font-size: var(--text-sm); }
.calc-out dd { margin: var(--space-2xs) 0 0; color: var(--color-on-field); font-family: var(--font-outlier); font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.calc-verdict { min-height: 3lh; padding-top: var(--space-md); border-top: 1px solid var(--color-on-field-rule); color: var(--color-on-field); font-size: var(--text-lg); line-height: 1.45; }
.calc noscript p { color: var(--color-on-field); }
@media (prefers-reduced-motion: reduce) { .calc-fill, .calc-range::-webkit-slider-thumb { transition: none; } }

/* ---------- The year in deadlines: a rail ---------- */
.year { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(17rem, 22%); gap: var(--space-md); margin: 0; padding: var(--space-xs) max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) var(--space-lg); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); overscroll-behavior-x: contain; scrollbar-width: thin; }
.year:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.year > li { scroll-snap-align: start; display: grid; align-content: start; gap: var(--space-lg); min-height: 300px; padding: var(--space-xl); border-radius: var(--radius-lg); background: var(--color-paper-2); transition: opacity var(--dur-long) var(--ease-out); }
.year h3 { font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.03em; }
.year ul { display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.year ul li { display: grid; gap: var(--space-3xs); color: var(--color-ink); font-size: var(--text-sm); line-height: 1.4; }
.year ul time { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-accent); }
.year ul .is-annual { padding: var(--space-sm); border-radius: var(--radius-sm); background: var(--color-card); font-weight: 600; }
.year > li.is-now { background: var(--color-field); }
.year > li.is-now h3, .year > li.is-now ul li { color: var(--color-on-field); }
.year > li.is-now ul time { color: var(--color-accent-on-field); }
.year > li.is-now .is-annual { background: var(--color-field-2); }
.year-now { display: inline-block; margin-left: var(--space-sm); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0; vertical-align: middle; }
.year > li.is-past { opacity: 0.45; }
@media (prefers-reduced-motion: reduce) { .year > li { transition: none; } }

/* ---------- Process: a staircase on the A's slope ---------- */
.stairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.stairs li { counter-increment: step; display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-xl); border-radius: var(--radius-lg); background: var(--color-paper-2); }
.stairs li:nth-child(1) { min-height: 260px; }
.stairs li:nth-child(2) { min-height: 330px; }
.stairs li:nth-child(3) { min-height: 400px; }
.stairs li:nth-child(4) { min-height: 470px; background: var(--color-field); }
.stairs li:nth-child(4) h3 { color: var(--color-on-field); }
.stairs li:nth-child(4) p { color: var(--color-on-field-2); }
.stairs li::before { content: counter(step, decimal-leading-zero); margin-bottom: auto; padding-bottom: var(--space-xl); font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-accent); }
.stairs li:nth-child(4)::before { color: var(--color-accent-on-field); }
.stairs h3 { font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.02em; }
.switching .btn { justify-self: start; }

/* ---------- The seal on the registry document ---------- */
.doc { position: relative; }
.seal { position: absolute; right: -36px; bottom: -48px; width: 148px; height: 148px; color: var(--color-accent); opacity: 0.85; transform: rotate(-14deg); mix-blend-mode: multiply; }
.faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); }
.faq-wrap .head { margin-bottom: 0; }
.faq-wrap .head .link { justify-self: start; }
.faq-wrap .faq { max-width: none; margin: 0; }

/* ---------- Inner page hero ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--space-3xl) calc(var(--space-lg) + 5vw); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%); }
.page-hero::before { content: ""; position: absolute; z-index: -1; right: -8vw; top: 10%; width: min(48vw, 760px); aspect-ratio: 1.15 / 1; background: var(--color-field-2); clip-path: polygon(52% 0, 100% 100%, 0 100%); opacity: 0.55; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-3xl); align-items: end; }
.page-hero h1 { max-width: 16ch; font-size: var(--text-display-s); }
.page-hero .lead { margin-top: var(--space-lg); max-width: 46ch; color: var(--color-on-field-2); }
.page-hero-aside { display: grid; gap: var(--space-xs); padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--color-field-2); font-size: var(--text-sm); color: var(--color-on-field); }
.page-hero + .section { padding-top: var(--space-xl); }

/* ---------- Who it is for: a segmented control and one panel ---------- */
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-paper-2); }
.seg-thumb { position: absolute; z-index: 0; top: var(--space-2xs); bottom: var(--space-2xs); left: var(--space-2xs); width: calc((100% - var(--space-xs)) / 2); border-radius: var(--radius-pill); background: var(--color-card); box-shadow: var(--shadow-thumb); transition: transform var(--dur-long) var(--ease-spring); }
.seg[data-index="1"] .seg-thumb { transform: translateX(100%); }
.seg button { position: relative; z-index: 1; min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-muted); font: 600 var(--text-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.seg button:hover, .seg button[aria-selected="true"] { color: var(--color-ink); }
.seg button:active { transform: scale(0.97); }
.seg button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
html:not(.js) .seg { display: none; }
@media (prefers-reduced-motion: reduce) { .seg-thumb, .seg button { transition: none; } }
.switch-panels { margin-top: var(--space-xl); }
html:not(.js) .switch-panel + .switch-panel { margin-top: var(--gap-columns); }
.switch-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); padding: var(--space-2xl); border-radius: var(--radius-xl); background: var(--color-card); box-shadow: var(--shadow-card); text-align: left; }
.switch-panel h3 { font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.025em; line-height: 1.12; max-width: 14ch; }
.switch-panel h3 + p { margin-top: var(--space-md); max-width: 34ch; }
.switch-panel .link { display: inline-block; margin-top: var(--space-xl); }
.js .switch-panel[hidden] { display: none; }
.checks { display: grid; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.checks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-md); font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink); }
.checks .icon { width: 22px; height: 22px; margin-top: var(--space-2xs); color: var(--color-accent); }

/* ---------- How it goes ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--space-lg); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font-weight: 600; font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: var(--text-lg); }
.steps p { margin-top: var(--space-xs); }
.switching { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); margin-top: var(--space-3xl); padding: var(--space-2xl); border-radius: var(--radius-xl); background: var(--color-paper-2); align-items: center; }
.switching h3 { font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.025em; }
.switching p { font-size: var(--text-lg); line-height: 1.55; max-width: 52ch; }

/* ---------- Quiz invitation ---------- */
.invite { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl) var(--space-3xl); align-items: center; padding: var(--space-2xl); border-radius: var(--radius-xl); background: var(--color-paper-2); }
.invite h2 { max-width: 14ch; }
.invite p { margin-top: var(--space-md); max-width: 44ch; font-size: var(--text-lead); line-height: 1.5; }

/* ---------- The registry: an official-looking document ---------- */
.registry { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.registry .head { margin-bottom: 0; }
.registry .head .link { justify-self: start; }
.doc { padding: var(--space-2xl); border-radius: var(--radius-lg); background: var(--color-card); box-shadow: var(--shadow-card); }
.doc-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding-bottom: var(--space-lg); margin-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.doc-top img { width: 88px; height: auto; }
.doc-top span { color: var(--color-muted); font-size: var(--text-sm); }
.doc dl { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 0 var(--space-lg); margin: 0; }
.doc dt, .doc dd { margin: 0; padding-block: var(--space-sm); }
.doc dt { color: var(--color-muted); font-size: var(--text-sm); padding-top: calc(var(--space-sm) + var(--space-3xs)); }
.doc dd { color: var(--color-ink); }

/* ---------- Questions ---------- */
.faq { display: grid; gap: var(--space-xs); max-width: 820px; margin-inline: auto; }
.faq details { border-radius: var(--radius-md); background: var(--color-paper-2); transition: background-color var(--dur-short) var(--ease-out); }
.faq details[open] { background: var(--color-card); box-shadow: var(--shadow-card); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); min-height: 68px; padding: var(--space-md) var(--space-lg); color: var(--color-ink); font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.01em; cursor: pointer; list-style: none; border-radius: var(--radius-md); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq summary::after { content: ""; flex-shrink: 0; width: 10px; height: 10px; border-right: 2px solid var(--color-ink); border-bottom: 2px solid var(--color-ink); transform: translateY(-3px) rotate(45deg); transition: transform var(--dur-long) var(--ease-spring); }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq .answer { padding: 0 var(--space-lg) var(--space-lg); }
.faq details:not([open]) > .answer { display: none; }
.faq .answer p { max-width: 64ch; }
.faq-more { margin-top: var(--space-xl); text-align: center; }
.answer .link { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .faq summary::after, .faq details { transition: none; } }

/* ---------- The close: one navy card, the phone at reading size ---------- */
.close { padding-block: 0 var(--section-gap-s); }
.close-card { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--space-3xl); align-items: end; padding: var(--space-3xl) var(--space-2xl) var(--space-2xl); border-radius: var(--radius-xl); }
.close-card::before { content: ""; position: absolute; z-index: -1; right: -8%; bottom: -55%; width: 46%; aspect-ratio: 1.15 / 1; background: var(--color-field-2); clip-path: polygon(52% 0, 100% 100%, 0 100%); opacity: 0.55; }
.close-card h2 { max-width: 14ch; }
.close-card .lead { margin-top: var(--space-lg); max-width: 42ch; color: var(--color-on-field-2); }
.close-actions { display: grid; gap: var(--space-lg); justify-items: start; }
.close-actions dl { display: grid; grid-template-columns: auto auto; gap: var(--space-2xs) var(--space-xl); margin: 0; }
.close-actions dt { grid-row: 1; font-size: var(--text-sm); color: var(--color-on-field-2); }
.close-actions dd { grid-row: 2; margin: 0; color: var(--color-on-field); }
.close-actions dd a { color: var(--color-on-field); font-weight: 600; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.close-actions dd a:hover { text-decoration: underline; text-decoration-color: var(--color-accent-on-field); }

/* ---------- Services ---------- */
.service-group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); }
.service-group + .service-group { margin-top: var(--section-gap-s); }
.service-group > .head { margin-bottom: 0; }
.service-group > .head h2 { font-size: clamp(2rem, 1.6vw + 1rem, 2.75rem); max-width: 10ch; }
.service-group > .head p { font-size: var(--text-md); max-width: 30ch; }
.service-group > .head .btn { justify-self: start; margin-top: var(--space-xs); }
.sticky-head { position: sticky; top: calc(72px + var(--space-xl)); align-self: start; }
.service-list { display: grid; gap: var(--gap-columns); }
.service { padding: var(--space-2xl); border-radius: var(--radius-xl); background: var(--color-card); box-shadow: var(--shadow-card); scroll-margin-top: calc(72px + var(--space-lg)); }
.service h3 { font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.025em; line-height: 1.12; }
.service-for { margin-top: var(--space-sm); max-width: 60ch; }
.term { margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); background: var(--color-paper); font-size: var(--text-sm); max-width: 66ch; }
.service ul { display: grid; gap: var(--space-sm); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.service ul li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-sm); color: var(--color-ink); }
.service ul .icon { width: 18px; height: 18px; margin-top: var(--space-2xs); color: var(--color-accent); }
.solves { display: flex; gap: var(--space-sm); align-items: baseline; margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.solves b { flex-shrink: 0; font-size: var(--text-sm); color: var(--color-muted); font-weight: 600; }
.solves p { color: var(--color-ink); }

/* ---------- About ---------- */
.story { max-width: 760px; margin-inline: auto; }
.story h2 { margin-bottom: var(--space-xl); }
.story-body { display: grid; gap: var(--space-lg); }
.story-body > p:first-child { color: var(--color-ink); font-size: var(--text-xl); font-weight: 500; line-height: 1.4; letter-spacing: -0.015em; }
.story-body > p:not(:first-child) { font-size: var(--text-lg); line-height: 1.65; }
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.people li { display: flex; flex-direction: column; gap: var(--space-sm); min-height: 260px; padding: var(--space-xl); border-radius: var(--radius-lg); background: var(--color-paper-2); }
.people h3 { font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.02em; }
.people .role { color: var(--color-muted); font-size: var(--text-sm); }
.people li > p:last-child { margin-top: auto; padding-top: var(--space-xl); }

/* ---------- Quiz ---------- */
.quiz-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: start; }
.quiz-card { padding: var(--space-2xl); border-radius: var(--radius-xl); background: var(--color-card); box-shadow: var(--shadow-card); }
.progress { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-xl); }
.progress-track { flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--color-paper-2); overflow: hidden; }
.progress-bar { height: 100%; width: 100%; background: var(--color-accent); transform-origin: left; transition: transform var(--dur-long) var(--ease-spring); }
.progress-label { color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.quiz fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.quiz legend { padding: 0; color: var(--color-ink); font-size: var(--text-2xl); font-weight: 500; line-height: 1.15; letter-spacing: -0.025em; }
.quiz legend:focus { outline: none; }
.quiz legend:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.q-help { margin-top: var(--space-sm); }
.options { display: grid; gap: var(--space-xs); margin-top: var(--space-xl); }
.options--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.option { position: relative; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option label { display: flex; align-items: center; gap: var(--space-sm); min-height: 60px; padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-md); background: var(--color-paper-2); color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.option label::before { content: ""; flex-shrink: 0; width: 20px; height: 20px; border: 1.5px solid var(--color-muted); border-radius: var(--radius-pill); background: var(--color-card); transition: border-width var(--dur-short) var(--ease-spring), border-color var(--dur-short) var(--ease-out); }
.option label:hover { background: var(--color-paper-3); }
.option label:active { transform: scale(0.985); }
.option input:checked + label { border-color: var(--color-accent); background: var(--color-card); }
.option input:checked + label::before { border: 6px solid var(--color-accent); }
.option input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.quiz-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); }
.btn-text { min-height: 44px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-ink-2); font-weight: 600; cursor: pointer; }
.btn-text:hover { color: var(--color-ink); background: var(--color-paper-2); }
.btn-text:active { transform: scale(0.97); }
.btn-text:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.result h2 { font-size: var(--text-display-s); }
.result h2:focus { outline: none; }
.result > p { margin-top: var(--space-md); font-size: var(--text-lg); max-width: 56ch; }
.result-label { display: block; margin-bottom: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
.result h3 { margin-top: var(--space-xl); font-size: var(--text-md); }
.result .checks { margin-top: var(--space-md); gap: var(--space-sm); }
.result .checks li { font-size: var(--text-md); }
.notes { display: grid; gap: var(--space-xs); margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); background: var(--color-paper-2); }
.disclaimer { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); max-width: 62ch; }
.result-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.quiz-aside { padding: var(--space-xl); border-radius: var(--radius-xl); background: var(--color-paper-2); }
.quiz-aside h2 { font-size: clamp(1.75rem, 1vw + 1.1rem, 2.5rem); letter-spacing: -0.03em; }
.quiz-aside dl { display: grid; gap: var(--space-lg); margin: var(--space-lg) 0; }
.quiz-aside dt { color: var(--color-muted); font-size: var(--text-sm); }
.quiz-aside dd { margin: var(--space-2xs) 0 0; color: var(--color-ink); font-weight: 600; }
.quiz-aside p { font-size: var(--text-sm); }
@media (prefers-reduced-motion: reduce) { .progress-bar, .option label, .option label::before { transition: none; } }

/* ---------- FAQ page ---------- */
.faq-topics { position: sticky; top: calc(72px + var(--space-md)); z-index: var(--z-raised); display: flex; justify-content: center; margin-bottom: var(--space-2xl); }
.faq-topics ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs); margin: 0; padding: var(--space-2xs); list-style: none; border-radius: var(--radius-pill); background: var(--color-glass); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 0 0 1px var(--color-glass-edge); }
.faq-topics a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-md); border-radius: var(--radius-pill); color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.faq-topics a:hover { background: var(--color-paper-2); color: var(--color-ink); }
@media (prefers-reduced-transparency: reduce) { .faq-topics ul { background: var(--color-paper); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.faq-group { max-width: 820px; margin-inline: auto; scroll-margin-top: calc(72px + var(--space-3xl)); }
.faq-group + .faq-group { margin-top: var(--space-3xl); }
.faq-group h2 { margin-bottom: var(--space-lg); font-size: clamp(1.75rem, 1.2vw + 1rem, 2.5rem); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: stretch; }
.contact-direct { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: start; gap: var(--space-md); padding: var(--space-2xl); border-radius: var(--radius-xl); }
.contact-direct::before { content: ""; position: absolute; z-index: -1; right: -20%; bottom: -24%; width: 80%; aspect-ratio: 1.15 / 1; background: var(--color-field-2); clip-path: polygon(52% 0, 100% 100%, 0 100%); opacity: 0.55; }
.contact-direct h2, .form-card h2 { font-size: clamp(2rem, 1.2vw + 1.25rem, 2.5rem); letter-spacing: -0.03em; }
.contact-direct .phone-line { justify-self: start; margin-top: var(--space-md); color: var(--color-on-field); font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.contact-direct .phone-line:hover { text-decoration: underline; text-decoration-color: var(--color-accent-on-field); text-underline-offset: 0.2em; }
.contact-direct .btn { justify-self: start; }
.facts { display: grid; gap: var(--space-lg); margin: var(--space-xl) 0 0; }
.facts dt { font-size: var(--text-sm); color: var(--color-on-field-2); }
.facts dd { margin: var(--space-2xs) 0 0; color: var(--color-on-field); }
.form-card { padding: var(--space-2xl); border-radius: var(--radius-xl); background: var(--color-card); box-shadow: var(--shadow-card); }
.form-card > p { margin-top: var(--space-xs); }
.form { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); }
.field { display: grid; gap: var(--space-xs); }
.field label { color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
.field .hint { font-weight: 400; color: var(--color-muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-field-edge); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: 1px; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.field textarea { min-height: 136px; padding-block: var(--space-sm); resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-muted); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-color: var(--color-focus); background: var(--color-card); }
.field input[aria-invalid="true"] { border-color: var(--color-error); }
.form .btn { justify-self: start; }
.form-status { min-height: 1lh; font-size: var(--text-sm); }
.form-status:empty { min-height: 0; }
.form-status.is-ok { color: var(--color-success); }
.form-status.is-error { color: var(--color-error); }
.form-note { color: var(--color-muted); font-size: var(--text-sm); }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.map-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); align-items: center; }
.map-wrap .head { margin-bottom: 0; }
.map-wrap .head .link { justify-self: start; }
.map { aspect-ratio: 16 / 10; width: 100%; border-radius: var(--radius-xl); overflow: hidden; background: var(--color-paper-2); }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (prefers-reduced-motion: reduce) { .field input, .field select, .field textarea, .main-nav a, .header-phone, .site-header, .faq details { transition: none; } }

/* ---------- Footer: navy, cut on the slope of the A, with copy buttons ---------- */
.site-footer { position: relative; isolation: isolate; overflow: hidden; padding-block: calc(var(--space-3xl) + 5vw) var(--space-xl); clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%); font-size: var(--text-sm); }
.site-footer::before { content: ""; position: absolute; z-index: -1; right: -10vw; bottom: -30%; width: min(60vw, 900px); aspect-ratio: 1.15 / 1; background: var(--color-field-2); clip-path: polygon(52% 0, 100% 100%, 0 100%); opacity: 0.5; }
.footer-top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); gap: var(--space-xl); padding-bottom: var(--space-2xl); }
.footer-mark img { width: 200px; height: auto; }
.footer-mark p { margin-top: var(--space-lg); max-width: 32ch; color: var(--color-on-field-2); }
.site-footer h2 { margin-bottom: var(--space-md); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; color: var(--color-on-field); }
.site-footer ul { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.site-footer a { color: var(--color-on-field-2); text-decoration: none; }
.site-footer a:hover { color: var(--color-on-field); text-decoration: underline; text-decoration-color: var(--color-accent-on-field); }
.copy-list { gap: var(--space-2xs); }
.copy-list li { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: var(--space-sm); }
.copy-list span { color: var(--color-on-field-2); font-size: var(--text-xs); }
.copy-list button { position: relative; justify-self: start; min-height: 44px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-on-field); font: 500 var(--text-sm)/1.2 var(--font-outlier); text-align: left; cursor: copy; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.copy-list button:hover { background: var(--color-field-2); }
.copy-list button:active { transform: scale(0.97); }
.copy-list button:focus-visible { outline: 2px solid var(--color-focus-on-field); outline-offset: 2px; }
.copy-list button::after { content: attr(data-done); position: absolute; left: calc(100% + var(--space-xs)); top: 50%; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-xs)/1.4 var(--font-body); white-space: nowrap; opacity: 0; transform: translate(-6px, -50%); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-spring); pointer-events: none; }
.copy-list button.is-copied::after { opacity: 1; transform: translate(0, -50%); }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-xs) var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-on-field-rule); color: var(--color-on-field-2); font-size: var(--text-xs); }
.to-top { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-field-2); font-size: var(--text-sm); font-weight: 600; }
.close { padding-bottom: var(--space-2xl); }
@media (prefers-reduced-motion: reduce) { .copy-list button, .copy-list button::after { transition: none; } }

/* ---------- Section index: where am I, jump anywhere ---------- */
.toc { position: fixed; right: var(--space-lg); top: 50%; z-index: var(--z-raised); transform: translateY(-50%); display: none; transition: opacity var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short); }
.toc.is-hidden { opacity: 0; visibility: hidden; }
.toc ol { display: grid; gap: var(--space-2xs); margin: 0; padding: var(--space-xs); list-style: none; border-radius: var(--radius-lg); background: var(--color-glass); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 0 0 1px var(--color-glass-edge); }
.toc a { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-xs); min-height: 32px; padding: 0 var(--space-xs); border-radius: var(--radius-sm); color: var(--color-muted); font: 500 var(--text-xs)/1 var(--font-outlier); text-decoration: none; }
.toc a span { max-width: 0; overflow: hidden; white-space: nowrap; font-family: var(--font-body); opacity: 0; transition: max-width var(--dur-long) var(--ease-spring), opacity var(--dur-short) var(--ease-out); }
.toc:hover a span, .toc:focus-within a span { max-width: 240px; opacity: 1; }
.toc a:hover { color: var(--color-ink); background: var(--color-paper-2); }
.toc a[aria-current="true"] { color: var(--color-on-field); background: var(--color-ink); }
.toc a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
@media (min-width: 90rem) { .toc { display: block; } }
@media (prefers-reduced-motion: reduce) { .toc a span { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .toc ol { background: var(--color-paper); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---------- Mobile call bar ---------- */
.call-bar { display: none; }
@media (max-width: 40rem) {
  .call-bar { position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky); display: block; padding: var(--space-sm) var(--gutter) calc(var(--space-sm) + env(safe-area-inset-bottom)); background: var(--color-glass); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 -1px 0 var(--color-glass-edge); }
  .call-bar .btn { width: 100%; }
  body { padding-bottom: 84px; }
}
@media (max-width: 40rem) and (prefers-reduced-transparency: reduce) { .call-bar { background: var(--color-paper); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---------- Under 60rem ---------- */
@media (max-width: 60rem) {
  .copy-list button { font-size: var(--text-xs); padding: 0 var(--space-xs); }
  :root { --section-gap: 112px; --section-gap-s: 80px; }
  .ledger, .bento, .switch-panel, .switching, .invite, .registry, .close-card, .service-group, .contact-grid, .map-wrap, .page-hero-grid, .quiz-layout, .head--split { grid-template-columns: minmax(0, 1fr); }
  .head--split > p { justify-self: start; }
  .ledger { gap: var(--space-xl); padding: var(--space-xl); }
  .bento > .bento-lead { grid-row: auto; min-height: 380px; }
  .tiles, .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .switch-panel, .switching, .invite, .close-card { gap: var(--space-xl); padding: var(--space-xl); }
  .registry, .service-group, .map-wrap { gap: var(--space-xl); }
  .sticky-head { position: static; }
  .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .copy-list li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .footer-mark { grid-column: 1 / -1; }
  .faq-topics { position: static; }
  .hero-grid, .calc-grid, .faq-wrap, .next { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { gap: var(--space-xl); }
  .calc-grid, .faq-wrap { gap: var(--space-xl); }
  .count { justify-self: start; text-align: left; }
  .vs-switch { justify-self: start; }
  .vs li { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-sm) var(--space-md); }
  .vs-a { grid-column: 2; }
  .stairs { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .stairs li:nth-child(n) { min-height: 0; }
  .stairs li::before { padding-bottom: var(--space-md); }
  .turn p + p { margin-left: 0; }
  .seal { right: -12px; bottom: -36px; width: 112px; height: 112px; }
}
@media (max-width: 40rem) {
  :root { --section-gap: 88px; --section-gap-s: 64px; }
  .tiles, .people, .steps, .options--2, .form-row { grid-template-columns: minmax(0, 1fr); }
  .said li, .people li { min-height: 0; }
  .ledger { padding: var(--space-lg); border-radius: var(--radius-lg); }
  .ledger-list li { padding: var(--space-sm) var(--space-md); }
  .bento > div, .switch-panel, .switching, .invite, .close-card, .doc, .service, .quiz-card, .form-card, .contact-direct, .quiz-aside { padding: var(--space-lg); border-radius: var(--radius-lg); }
  .close-card { padding-top: var(--space-xl); }
  .doc dl { grid-template-columns: minmax(0, 1fr); }
  .doc dt { padding-bottom: 0; }
  .doc dd { padding-top: var(--space-2xs); }
  .seg { display: grid; width: 100%; }
  .seg button { padding: 0 var(--space-sm); }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .close-actions dl { grid-template-columns: minmax(0, 1fr); }
  .close-actions dt, .close-actions dd { grid-row: auto; }
  .close-actions dd + dt { margin-top: var(--space-sm); }
  .map { aspect-ratio: 4 / 3; }
  .hero { padding-top: var(--space-xl); }
  .hero-actions .btn { display: none; }
  .count-num { font-size: clamp(7rem, 38vw, 10rem); }
  .next-list, .stairs, .calc-out { grid-template-columns: minmax(0, 1fr); }
  .next-list { gap: var(--space-md); }
  .next { margin-top: var(--space-2xl); }
  .calc { padding: var(--space-lg); border-radius: var(--radius-lg); }
  .calc-month { font-size: clamp(2rem, 10vw, 2.5rem); }
  .calc-mark { font-size: 0.6875rem; }
  .calc-mark--limit { align-items: flex-start; padding-top: var(--space-xs); }
  .vs li { padding-block: var(--space-lg); }
  .vs-q { font-size: var(--text-xl); }
  .year { grid-auto-columns: 78%; }
}

/* ==========================================================================
   Round 5: section dividers on the section, services rails, team, contact, FAQ filter, mobile
   ========================================================================== */

/* Section dividers: drawn on the section itself, never inside a grid */
.section + .section { position: relative; padding-top: var(--space-3xl); }
.section + .section::before { content: ""; position: absolute; top: 0; left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); height: 1px; background: var(--color-rule); transform-origin: left; transform: scaleX(var(--draw, 1)); transition: transform 1200ms var(--ease-out); }
.js .section + .section:not(.is-seen) { --draw: 0; }
@media (prefers-reduced-motion: reduce) { .section + .section::before { transition: none; } }

/* The closing card: the header carries the phone on desktop */
@media (min-width: 68.01rem) { .close-call { display: none; } }

/* ---------- Services: three bands, each a rail ---------- */
.service-band { padding-block: var(--section-gap-s); border-top: 2px solid var(--color-ink); }
.page-hero + .service-band { border-top: 0; padding-top: var(--space-2xl); }
.service-band--tint { background: var(--color-paper-2); }
.band-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-xl); margin-bottom: var(--space-xl); }
.band-head h2 { font-size: var(--text-section); }
.band-head p { margin-top: var(--space-sm); max-width: 46ch; font-size: var(--text-lead); line-height: 1.5; }
.rail-ctrl { display: flex; gap: var(--space-xs); flex-shrink: 0; }
.rail-ctrl button { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--color-field-edge); border-radius: var(--radius-pill); background: var(--color-card); color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.rail-ctrl button:hover { background: var(--color-ink); color: var(--color-on-field); }
.rail-ctrl button:active { transform: scale(0.94); }
.rail-ctrl button:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.rail-ctrl button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.rail-ctrl svg { width: 20px; height: 20px; }
html:not(.js) .rail-ctrl { display: none; }
.svc-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(19rem, 30%); gap: var(--space-md); padding: var(--space-xs) max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); overscroll-behavior-x: contain; scrollbar-width: none; scroll-behavior: smooth; }
.svc-rail::-webkit-scrollbar { display: none; }
.svc-rail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.svc-rail .service { scroll-snap-align: start; display: flex; flex-direction: column; padding: var(--space-xl); border-radius: var(--radius-lg); }
.svc-rail .service h3 { font-size: var(--text-xl); }
.svc-rail .service-for { font-size: var(--text-sm); }
.svc-rail .service ul { margin-top: var(--space-lg); gap: var(--space-xs); font-size: var(--text-sm); }
.svc-rail .solves { margin-top: auto; padding-top: var(--space-md); flex-direction: column; gap: var(--space-2xs); font-size: var(--text-sm); }
.svc-rail .solves p { margin-top: 0; }
.service--call { justify-content: center; align-items: center; gap: var(--space-sm); background: var(--color-field); color: var(--color-on-field); font-size: var(--text-xl); font-weight: 500; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.service--call:hover { background: var(--color-field-2); }
.service--call .icon { width: 28px; height: 28px; color: var(--color-accent-on-field); }
.service--call:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .svc-rail { scroll-behavior: auto; } .rail-ctrl button, .service--call { transition: none; } }

/* ---------- About: the team as plain text ---------- */
.team { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); }
.team .head { margin-bottom: 0; }
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); margin: 0; }
.people > div { padding-top: var(--space-md); border-top: 2px solid var(--color-ink); }
.people dt { color: var(--color-ink); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
.people dd { margin: var(--space-2xs) 0 0; font-size: var(--text-sm); }
.people dd.role { color: var(--color-accent); font-weight: 600; }

/* ---------- Contact ---------- */
.contact-direct { display: flex; flex-direction: column; }
.contact-direct .facts { margin-top: var(--space-xl); }
.contact-direct .facts dd a { color: var(--color-on-field); text-decoration: none; }
.contact-direct .facts dd a:hover { text-decoration: underline; text-decoration-color: var(--color-accent-on-field); }
.contact-call { align-self: flex-end; margin-top: auto; }
.contact-direct .facts + .contact-call { margin-top: var(--space-xl); }
.map-card { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); align-items: center; }
.map-info { display: grid; gap: var(--space-md); justify-items: start; }
.map-info h2 { font-size: var(--text-section); }
.map-info p { font-size: var(--text-lead); line-height: 1.5; }
.map-card .map { aspect-ratio: 16 / 9; }

/* ---------- FAQ: a filter you can read ---------- */
.faq-page { max-width: 860px; }
.faq-filter { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); padding: var(--space-lg); border-radius: var(--radius-xl); background: var(--color-paper-2); }
.faq-select-label, .faq-select { display: none; }
.faq-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.faq-chips button { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-xs) 0 var(--space-md); border: 1px solid var(--color-field-edge); border-radius: var(--radius-pill); background: var(--color-card); color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.faq-chips button span { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-2); font: 500 var(--text-xs)/1 var(--font-outlier); }
.faq-chips button:hover { border-color: var(--color-ink); }
.faq-chips button:active { transform: scale(0.97); }
.faq-chips button[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-field); }
.faq-chips button[aria-pressed="true"] span { background: var(--color-accent); color: var(--color-accent-ink); }
.faq-chips button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq-count { color: var(--color-muted); font-size: var(--text-sm); }
html:not(.js) .faq-filter { display: none; }
.faq-group[hidden] { display: none; }
.faq-page .faq-group { max-width: none; }
@media (prefers-reduced-motion: reduce) { .faq-chips button { transition: none; } }

/* questions open and close with motion (driven by main.js) */
.faq .answer { overflow: hidden; }

/* ---------- Quiz: shorter on phones ---------- */
@media (max-width: 60rem) { .quiz-aside { display: none; } }

/* ---------- Mobile ---------- */
.main-nav .nav-phone { display: none; color: var(--color-accent-ink); background: var(--color-accent); padding: 0 var(--space-lg); }
.main-nav .nav-phone:hover { color: var(--color-accent-ink); background: var(--color-accent-hover); }
@media (max-width: 68rem) {
  .js .main-nav { opacity: 1; transform: none; visibility: hidden; transition: visibility 0s linear var(--dur-long); }
  .js .main-nav.is-open { visibility: visible; transition: none; }
  .main-nav { align-items: flex-end; text-align: right; }
  .main-nav ul { width: 100%; }
  .main-nav ul a { justify-content: flex-end; }
  .js .main-nav ul li, .js .main-nav .nav-phone, .js .main-nav .lang { transform: translateX(-110vw); transition: transform var(--dur-long) var(--ease-spring); }
  .js .main-nav.is-open ul li, .js .main-nav.is-open .nav-phone, .js .main-nav.is-open .lang { transform: none; }
  .js .main-nav.is-open ul li:nth-child(2) { transition-delay: 40ms; }
  .js .main-nav.is-open ul li:nth-child(3) { transition-delay: 80ms; }
  .js .main-nav.is-open ul li:nth-child(4) { transition-delay: 120ms; }
  .js .main-nav.is-open ul li:nth-child(5) { transition-delay: 160ms; }
  .js .main-nav.is-open .nav-phone { transition-delay: 200ms; }
  .js .main-nav.is-open .lang { transition-delay: 240ms; }
  .main-nav .nav-phone { display: inline-flex; align-self: flex-end; min-height: 52px; }
  .lang { align-self: flex-end; }
  .people { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .team, .map-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}
@media (max-width: 68rem) and (prefers-reduced-motion: reduce) { .js .main-nav ul li, .js .main-nav .nav-phone, .js .main-nav .lang { transition: none; } }
@media (max-width: 40rem) {
  body { padding-bottom: 0; }
  .hero-actions .btn { display: inline-flex; }
  .band-head { flex-direction: column; align-items: flex-start; }
  .rail-ctrl { display: none; }
  .svc-rail { grid-auto-columns: 84%; }
  .service-band { padding-block: var(--space-2xl); }
  .faq-filter { padding: var(--space-md); border-radius: var(--radius-lg); }
  .faq-chips { display: none; }
  .faq-select-label { display: block; color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
  .faq-select { display: block; width: 100%; min-height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-field-edge); border-radius: var(--radius-sm); background: var(--color-card); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); }
  .faq-select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .page-hero { padding-block: var(--space-xl) calc(var(--space-md) + 5vw); }
  .page-hero h1 { font-size: clamp(2.125rem, 9vw, 2.75rem); }
  .page-hero-aside { display: none; }
  .contact-direct, .form-card { padding: var(--space-lg); }
  .form { gap: var(--space-md); margin-top: var(--space-lg); }
  .field textarea { min-height: 104px; }
  .map-card .map { aspect-ratio: 4 / 3; }
  .quiz-card { padding: var(--space-md); }
  .quiz legend { font-size: var(--text-xl); }
  .options { margin-top: var(--space-lg); }
  .option label { min-height: 52px; }
  .story-body > p:first-child { font-size: var(--text-lg); }
  .story-body > p:not(:first-child) { font-size: var(--text-md); }
  /* footer, cleaned up */
  .site-footer { padding-top: calc(var(--space-2xl) + 5vw); }
  .footer-top { gap: var(--space-xl); padding-bottom: var(--space-xl); }
  .footer-mark img { width: 150px; }
  .footer-mark p { margin-top: var(--space-md); }
  .site-footer nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); }
  .copy-list li { grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-xs); }
  .footer-legal { flex-direction: column-reverse; align-items: flex-start; gap: var(--space-md); }
}

/* ==========================================================================
   Round 6: services as a grid on desktop, the team as a roster, tighter about
   ========================================================================== */
@media (min-width: 40.01rem) {
  .svc-rail { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); max-width: var(--container); margin-inline: auto; padding: 0 var(--gutter); overflow: visible; scroll-snap-type: none; }
  .band-head { justify-content: flex-start; }
}

/* the team: one roster card, a row per entry */
.roster { margin: 0; border-radius: var(--radius-xl); background: var(--color-card); box-shadow: var(--shadow-card); overflow: hidden; }
.roster > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 6fr); gap: var(--space-xl); align-items: baseline; padding: var(--space-xl) var(--space-2xl); }
.roster > div + div { border-top: 1px solid var(--color-rule); }
.roster > div:first-child { background: var(--color-field); }
.roster > div:first-child dt { color: var(--color-on-field); }
.roster > div:first-child dd { color: var(--color-on-field-2); }
.roster > div:first-child dd.role { color: var(--color-accent-on-field); }
.roster dt { color: var(--color-ink); font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.02em; }
.roster dd { margin: 0; font-size: var(--text-sm); }
.roster dd.role { color: var(--color-accent); font-weight: 600; }
.team { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.team .head { margin-bottom: 0; }
.story + * { margin-top: 0; }
section[aria-labelledby="tim-naslov"] { padding-top: var(--space-2xl); }
section[aria-labelledby="tim-naslov"]::before { display: none; }
@media (max-width: 60rem) {
  .roster > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); padding: var(--space-lg); }
}
section[aria-labelledby="prica-naslov"] { padding-bottom: var(--space-2xl); }
/* about: the story matches the team below it */
.story { max-width: none; margin: 0; }
.story h2 { font-size: var(--text-section); margin-bottom: var(--space-xl); }
.story-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-2xl); padding: var(--space-2xl); border-radius: var(--radius-xl); background: var(--color-card); box-shadow: var(--shadow-card); }
.story-body > p:first-child { grid-column: 1 / -1; max-width: 40ch; }
@media (max-width: 60rem) { .story-body { grid-template-columns: minmax(0, 1fr); padding: var(--space-lg); } }
/* quiz: the aside stands as tall as the quiz */
.quiz-layout { align-items: stretch; }
.quiz-aside { display: flex; flex-direction: column; }
.quiz-aside > p { margin-top: auto; }
.quiz, .quiz .quiz-card { height: 100%; }
/* section titles, centred everywhere */
.head, .head--split { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.head h2, .head > p, .head .head-line, .head--split > p { margin-inline: auto; justify-self: center; }
.head .link, .head .vs-switch, .head .seg { justify-self: center; }
.calc-grid, .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.band-head { flex-direction: column; align-items: center; text-align: center; }
.band-head p { margin-inline: auto; }
.story h2, .faq-group h2 { text-align: center; margin-inline: auto; }
.turn p:first-child { margin-inline: auto; text-align: center; }
.turn p + p { margin-inline: auto; text-align: center; }
.faq-wrap .faq { width: 100%; max-width: 860px; margin-inline: auto; }
.calc { width: 100%; max-width: 860px; margin-inline: auto; }
/* section titles, centred everywhere except the map */
.head, .head--split { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.head h2, .head > p, .head .head-line, .head--split > p { margin-inline: auto; justify-self: center; }
.head .link, .head .vs-switch, .head .seg { justify-self: center; }
.calc-grid, .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.band-head { flex-direction: column; align-items: center; text-align: center; }
.band-head p { margin-inline: auto; }
.story h2, .faq-group h2 { text-align: center; margin-inline: auto; }
.turn p:first-child, .turn p + p { margin-inline: auto; text-align: center; }
.faq-wrap .faq, .calc { width: 100%; max-width: 860px; margin-inline: auto; }
/* Kod drugih / Kod Valida: a thumb that slides between the two */
.vs-switch { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.vs-switch::before { content: ""; position: absolute; top: var(--space-2xs); bottom: var(--space-2xs); left: var(--space-2xs); width: calc(50% - var(--space-2xs)); border-radius: var(--radius-pill); background: var(--color-ink); transition: transform 520ms var(--ease-spring); }
.vs-switch[data-mode="us"]::before { transform: translateX(100%); }
.vs-switch button { position: relative; z-index: 1; }
.vs-switch button[aria-pressed="true"] { background: transparent; color: var(--color-on-field); transition: color 300ms var(--ease-out) 120ms; }
html:not(.js) .vs-switch::before { display: none; }
@media (prefers-reduced-motion: reduce) { .vs-switch::before, .vs-switch button[aria-pressed="true"] { transition: none; } }
/* the year rail: arrows, drag, no scrollbar */
.year { scrollbar-width: none; cursor: grab; scroll-behavior: smooth; user-select: none; }
.year::-webkit-scrollbar { display: none; }
.year.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.year-section .rail-ctrl { justify-self: center; margin-top: var(--space-xs); }
@media (min-width: 40.01rem) { .year-section .rail-ctrl { display: flex; } }
@media (prefers-reduced-motion: reduce) { .year { scroll-behavior: auto; } }
/* map: back beside its title and line, at a sensible size */
@media (min-width: 68.01rem) {
  .map-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); }
  .map-card .map { aspect-ratio: 16 / 10; max-height: 380px; }
}
.map-info { justify-items: start; text-align: left; }