/* All brand values are generated from assets/brand/tokens.json into tokens.css. */
:root {
  font-family: var(--type-body-font-family);
  color: var(--color-text);
  background: var(--color-canvas);
  font-synthesis: none;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--space-24);
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { font: var(--type-body); margin: 0; padding-bottom: calc(var(--space-80) * 2); }
html:has(.prereg-dialog[open]) { overflow: hidden; }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
.article-body a, .evidence-note a, .prereg-consent a, .prereg-page p a, .prereg-dialog p a, main > p a {
  display: inline-flex; align-items: center; min-height: var(--interaction-min-target); min-width: var(--interaction-min-target); max-width: 100%;
}
:focus-visible {
  outline: var(--interaction-focus-width) solid var(--color-focus);
  outline-offset: var(--spacing-unit);
}
.site-header :focus-visible {
  outline-color: var(--color-focus);
  box-shadow: 0 0 0 calc(var(--interaction-focus-width) + var(--spacing-unit)) var(--color-header-text);
}
h1, h2, h3, p, li, summary, label, button, a, td, th, dd, dt {
  overflow-wrap: anywhere;
  hyphens: auto;
}
h1, h2, h3 { text-wrap: pretty; }
h1 { font: var(--type-brand-heading); margin: var(--space-16) 0 var(--space-24); }
/* Fraunces upstream has no Greek/Cyrillic. Keep these scripts in the brand's Inter. */
:lang(el), :lang(bg) {
  --type-display-font-family: "Inter", "Inter Fallback", sans-serif;
  --type-brand-heading-font-family: "Inter", "Inter Fallback", sans-serif;
  --type-screen-title-font-family: "Inter", "Inter Fallback", sans-serif;
}
h2 { font: var(--type-screen-title); margin: var(--space-40) 0 var(--space-16); }
h3 { font: var(--type-section-title); margin: var(--space-24) 0 var(--space-12); }
p { margin: var(--space-16) 0; }
strong, b { font-weight: var(--type-body-strong-font-weight); }
small, .small { font: var(--type-caption); color: var(--color-text-secondary); }
small { display: block; }
img { max-width: 100%; height: auto; }
svg.icon { width: var(--icon-default); height: var(--icon-default); flex: 0 0 var(--icon-default); vertical-align: middle; stroke-width: var(--icon-stroke-width); stroke-linecap: var(--icon-linecap); stroke-linejoin: var(--icon-linejoin); }
.shell, .header-inner { width: 100%; max-width: 1120px; margin-inline: auto; padding: var(--space-24); }
/* Full column measure, including preregistration; no prose-specific max-width. */
p, .standfirst, .article-body, .prereg-page { max-width: none; }
.article, .prereg-page { width: 100%; min-width: 0; }
.site-header { position: relative; z-index: 30; color: var(--color-header-text); background: var(--header-gradient); }
.header-inner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-16); }
.brand { display: inline-flex; align-items: center; gap: var(--space-12); margin-inline-end: auto; min-height: var(--interaction-min-target); color: var(--color-header-text); font: var(--type-screen-title); text-decoration: none; }
.brand picture { display: flex; flex: 0 0 var(--space-32); }
.brand img { width: var(--space-32); height: var(--space-40); object-fit: contain; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); min-height: var(--interaction-primary-height); min-width: var(--interaction-min-target); padding: var(--space-12) var(--space-20); border: 0; box-shadow: var(--shadow-button); border-radius: var(--radius-button); background: var(--color-primary); color: var(--color-on-primary); font: var(--type-button); text-align: center; text-decoration: none; cursor: pointer; }
.button:hover { text-decoration: underline; }
.button:disabled { opacity: var(--interaction-disabled-opacity); cursor: wait; }
.header-download .button, .app-banner .button, [data-preregister-form] > .button { background: var(--color-accent); color: var(--color-on-accent); }
.cta-buttons, .store-links { display: flex; align-items: stretch; flex-wrap: wrap; gap: var(--space-8); }
.header-download { justify-content: flex-end; flex: 0 1 auto; }
.header-download .button { flex: 1; }
.country-switcher summary { display: flex; align-items: center; gap: var(--space-8); min-height: var(--interaction-min-target); padding: var(--space-8); cursor: pointer; font: var(--type-label); list-style: none; }
.country-switcher summary::-webkit-details-marker { display: none; }
.country-switcher summary .chevron { transition: transform .15s ease; }
.country-switcher[open] summary .chevron { transform: rotate(180deg); }
.country-switcher ul { position: absolute; inset-inline-end: var(--space-24); top: 100%; z-index: 40; width: min(500px, calc(100vw - var(--space-32))); max-height: 65dvh; overflow: auto; margin: 0; padding: var(--space-16); list-style: none; border: 0; border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sheet); }
.country-switcher li { box-shadow: var(--shadow-card); border-radius: var(--radius-input); margin-block: var(--space-8); padding: var(--space-4) var(--space-8); }
.country-switcher li:last-child { border: 0; }
.country-switcher li a { display: flex; align-items: center; min-height: var(--interaction-min-target); }
.country-switcher li > span { display: block; padding-block: var(--space-8); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-8); list-style: none; padding: 0; margin: 0 0 var(--space-24); color: var(--color-text-secondary); font: var(--type-label); }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: var(--interaction-min-target); }
.breadcrumbs li { display: flex; align-items: center; gap: var(--space-8); min-width: 0; }
.breadcrumbs li + li::before { content: '/'; }
.article-header { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-16); }
.standfirst { font: var(--type-body); color: var(--color-text-secondary); }
.review-date { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); color: var(--color-text-secondary); font: var(--type-label); }
.article-body { margin-block: var(--space-32); }
.article-body p { margin-block: var(--space-24); }
.article-body li { margin-block: var(--space-8); }
.article-body a { text-decoration-thickness: 2px; }
.demo-notice, .evidence-note, .callout, .scope { padding: var(--space-16); border: 0; box-shadow: var(--shadow-card);  border-radius: var(--radius-input); }
.callout, .scope, .callout-info, .info { color: var(--status-info-foreground); background: var(--status-info-background); }
.demo-notice, .evidence-note, .callout-warning, .warning { color: var(--status-warning-foreground); background: var(--status-warning-background); }
.callout-success, .success { color: var(--status-success-foreground); background: var(--status-success-background); }
.callout-danger, .danger, .calculator [data-error]:not(:empty) { color: var(--status-danger-foreground); background: var(--status-danger-background); }
.notice-heading { display: inline-flex; align-items: center; gap: var(--space-8); }
pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: var(--space-16); background: var(--color-surface-muted); border-radius: var(--radius-input); }
pre, code { font-family: var(--type-body-font-family); }
table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin-block: var(--space-24); background: var(--color-surface); }
td, th { padding: var(--space-12) var(--space-16); border: 0; border-bottom: 1px solid var(--color-border); text-align: start; vertical-align: top; min-width: 8rem; }
th { background: var(--color-surface-muted); font: var(--type-body-strong); }
blockquote { margin: var(--space-24) 0; padding: var(--space-8) var(--space-20); box-shadow: var(--shadow-card); border-radius: var(--radius-input); background: var(--color-surface-muted); }
.app-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-24); margin-block: var(--space-40); padding: var(--space-24); border: 0; box-shadow: var(--shadow-card); border-radius: var(--radius-card); background: var(--color-surface-muted); color: var(--color-text); }
.app-cta > div { flex: 1 1 16rem; min-width: 0; }
.app-cta .cta-title { display: flex; align-items: center; gap: var(--space-12); }
.app-cta strong { font: var(--type-screen-title); }
.app-cta p { margin: var(--space-8) 0 0; }
.app-cta .cta-buttons { justify-content: flex-end; }
.app-cta .button { flex: 1 1 10rem; }
.compact { margin: 0; padding: var(--space-12) var(--space-24); border: 0; border-radius: 0; }
.compact > div { flex: 0 1 auto; }
.compact .cta-buttons { flex: 1 1 auto; }
.compact strong { font: var(--type-section-title); }
.app-banner { position: fixed; bottom: 0; inset-inline: 0; z-index: 25; max-height: 40dvh; overflow: auto; padding-bottom: env(safe-area-inset-bottom); box-shadow: var(--shadow-banner); background: var(--color-surface-muted); }
.app-banner .app-cta { max-width: 1120px; margin: auto; }
.app-banner .button { flex: 0 1 auto; }
.sources, .related, .faq { border-top: 1px solid var(--color-border); margin-top: var(--space-32); padding-top: var(--space-8); }
.sources li { margin-block: var(--space-16); }
.sources a, .related a, .site-footer nav a { display: inline-flex; align-items: center; min-height: var(--interaction-min-target); }
.faq details { padding: var(--space-12) var(--space-20); margin-block: var(--space-16); border: 0; box-shadow: var(--shadow-card); border-radius: var(--radius-card); background: var(--color-surface); }
.faq summary { min-height: var(--interaction-min-target); padding-block: var(--space-12); font: var(--type-body-strong); cursor: pointer; }
.site-footer { margin-top: var(--space-64); padding-block: var(--space-32); border-top: 1px solid var(--color-border); background: var(--color-surface-muted); color: var(--color-text); }
.footer-wordmark { display: flex; align-items: center; gap: var(--space-12); font: var(--type-screen-title); }
.footer-wordmark img { border-radius: var(--radius-input); }
.site-footer p { margin-block: var(--space-12); }
.site-footer h2 { font: var(--type-screen-title); }
.store-links { margin-block: var(--space-24); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-16); font: var(--type-label); }
.country-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-16); padding: 0; list-style: none; }
.country-grid li, .article-list li { padding: var(--space-24); border: 0; box-shadow: var(--shadow-card); border-radius: var(--radius-card); background: var(--color-surface); }
.country-grid a, .article-list a { display: flex; align-items: center; gap: var(--space-12); min-height: var(--interaction-min-target); font: var(--type-body-strong); }
.country-grid small { margin-top: var(--space-8); }
.article-list { display: grid; gap: var(--space-16); padding: 0; list-style: none; }
.hero { position: relative; isolation: isolate; overflow: hidden; padding: var(--space-32); margin-bottom: var(--space-32); border-radius: var(--radius-sheet); background: var(--color-surface-muted); }
.hero h1 { font: var(--type-display); }
.hero .hero-icons { display: flex; gap: var(--space-24); color: var(--brand-sage); margin-bottom: var(--space-24); }
.hero .hero-icons .icon { width: var(--space-48); height: var(--space-48); flex-basis: var(--space-48); }
/* Only the hero has the brand-book's 8px field grid. Header stays undecorated. */
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: var(--shadow-card-opacity); background-image: linear-gradient(var(--brand-sage) 1px, transparent 1px), linear-gradient(90deg, var(--brand-sage) 1px, transparent 1px); background-size: var(--gradient-grid-size) var(--gradient-grid-size); }
.app-intro { display: flex; flex-wrap: wrap; gap: var(--space-24); align-items: center; }
.app-intro .app-cta { flex: 1 1 16rem; }
.downloads { display: flex; flex-wrap: wrap; gap: var(--space-16); margin-block: var(--space-32); }
.downloads h2 { flex-basis: 100%; }
.calculator { padding: var(--space-24); margin-block: var(--space-32); border: 0; box-shadow: var(--shadow-card); border-radius: var(--radius-card); background: var(--color-surface-muted); }
.calculator h2 { display: flex; align-items: center; gap: var(--space-12); margin-top: 0; }
.calculator form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-16); }
.calculator label { display: grid; gap: var(--space-8); font: var(--type-label); }
input, select, textarea { font: var(--type-body); color: var(--color-text); background: var(--color-surface); }
.calculator input, [data-preregister-form] input[type=email], [data-preregister-form] select { width: 100%; min-width: 0; min-height: var(--interaction-primary-height); padding: var(--space-12); border: 1px solid var(--color-control-border); border-radius: var(--radius-input); }
.calculator [data-results], .calculator [data-error] { grid-column: 1 / -1; }
.calculator [data-error]:empty { display: none; }
.calculator [data-error]:not(:empty) { border-radius: var(--radius-input); padding: var(--space-16); }
.calculator [data-results] { padding: var(--space-16); border-radius: var(--radius-input); background: var(--status-success-background); color: var(--status-success-foreground); }
.calculator dd { font: var(--type-body-strong); margin: var(--space-8) 0 var(--space-24); }
.skip { position: fixed; top: var(--space-16); inset-inline-start: var(--space-16); z-index: 99; min-height: var(--interaction-min-target); padding: var(--space-12) var(--space-16); border-radius: var(--radius-button); background: var(--color-surface); color: var(--color-text); transform: translateY(-200%); }
.skip:focus { transform: none; }
.prereg-dialog { width: min(48rem, calc(100% - var(--space-32))); max-height: calc(100dvh - var(--space-32)); overflow: auto; padding: var(--space-24); border: 0; border-radius: var(--radius-sheet); background: var(--color-canvas); color: var(--color-text); box-shadow: var(--shadow-sheet); overscroll-behavior: contain; }
.prereg-dialog::backdrop { background: color-mix(in srgb, var(--brand-ink) 70%, transparent); }
.prereg-dialog:not([open]) { display: none; }
.prereg-dialog h2 { margin: 0 var(--space-48) var(--space-16) 0; }
.prereg-close { position: absolute; top: var(--space-8); inset-inline-end: var(--space-8); display: flex; align-items: center; justify-content: center; width: var(--interaction-min-target); height: var(--interaction-min-target); padding: var(--space-8); border: 0; box-shadow: var(--shadow-button); border-radius: var(--radius-button); color: inherit; background: transparent; cursor: pointer; }
[data-preregister-form] { position: relative; display: grid; gap: var(--space-12); margin-top: var(--space-24); }
[data-preregister-form] > label, [data-preregister-form] legend { font: var(--type-label); }
[data-preregister-form] fieldset { display: flex; flex-wrap: wrap; gap: var(--space-24); min-width: 0; padding: var(--space-12); border: 0; border-radius: var(--radius-input); }
[data-preregister-form] fieldset label { display: flex; align-items: center; gap: var(--space-8); min-height: var(--interaction-min-target); }
[data-preregister-form] input[type=checkbox], [data-preregister-form] input[type=radio] { flex-shrink: 0; width: var(--space-24); height: var(--space-24); accent-color: var(--color-primary); }
[data-preregister-form] .prereg-consent { display: flex; align-items: flex-start; gap: var(--space-12); min-height: var(--interaction-min-target); padding-block: var(--space-12); font: var(--type-body); cursor: pointer; }
.prereg-honeypot { position: absolute; inset-inline-start: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.prereg-status { min-height: calc(var(--type-body-line-height) * 3); margin: var(--space-8) 0 0; }
.prereg-status:not(:empty) { padding: var(--space-16); border-radius: var(--radius-input); color: var(--status-info-foreground); background: var(--status-info-background); }
@media (max-width: 800px) {
  .prereg-dialog, .prereg-dialog * { hyphens: manual; }
  .header-inner { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-8); }
  .header-download { display: block; flex: 0 1 auto; min-width: 0; }
  .header-download .button { max-width: 100%; min-height: var(--interaction-min-target); padding-inline: var(--space-12); white-space: nowrap; }
  .brand { margin: 0 auto 0 0; white-space: nowrap; hyphens: none; }
}
@media (max-width: 640px) {
  body { padding-bottom: calc(var(--space-80) * 1.4); }
  .shell, .header-inner { padding: var(--space-16); }
  .header-download { max-width: 46%; }
  .header-download .button { white-space: normal; text-align: center; line-height: 1.15; padding-block: var(--space-8); hyphens: auto; overflow-wrap: anywhere; }
  h1, .hero h1 { font: var(--type-screen-title); }
  .brand { font: var(--type-screen-title); font-size: 1.35rem; }
  h1, .hero h1 { font-size: clamp(1.5rem, 6.4vw, 1.95rem); }
  .app-banner .cta-title, .app-banner .app-cta p { display: none; }
  .app-banner .app-cta { padding: var(--space-8) var(--space-16); }
  .country-switcher summary { max-width: none; font-size: 0; gap: 0; }
  .country-switcher summary .icon { width: var(--icon-small); flex-basis: var(--icon-small); }
  .country-switcher summary .chevron { display: none; }
  .app-cta { padding: var(--space-20); gap: var(--space-16); }
  .app-cta .cta-buttons { width: 100%; justify-content: stretch; }
  .app-banner .app-cta { gap: var(--space-8); padding: var(--space-12) var(--space-16); }
  .app-banner .button { flex: 1 1 0; }
  .compact > div { flex-basis: 100%; }
  .compact .cta-title .icon { display: none; }
  .hero, .calculator, .prereg-dialog { padding: var(--space-20); }
  .calculator form { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 360px) {

  .country-switcher summary { max-width: none; }
  .app-banner .button { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .app-banner, .app-cta, .site-footer, .prereg-dialog, .skip { display: none !important; }
  body { padding: 0; }
  .shell { max-width: none; padding: 0; }
  .faq details { break-inside: avoid; }
}

/* Footnote markers stay small and do not change line height; the touch target is an invisible 44px area. */
.citation { white-space: nowrap; font: var(--type-caption); font-size: .75em; line-height: 0; vertical-align: super; margin-left: .1em; }
.article-body .citation a, .faq .citation a { position: relative; display: inline; font: inherit; font-weight: 600; text-decoration: none; padding: 0 .15em; }
.article-body .citation a::after, .faq .citation a::after { content: ""; position: absolute; left: 50%; top: 50%; width: var(--interaction-min-target); height: var(--interaction-min-target); transform: translate(-50%, -50%); }
.article-body .citation a:hover, .faq .citation a:hover { text-decoration: underline; }
.sources li { scroll-margin-top: var(--space-24); }
.sources li:target { background: var(--color-surface-muted); border-radius: var(--radius-input); box-shadow: var(--shadow-card); }
hr { border: 0; border-bottom: 1px solid var(--color-border); }