/* Inter variable (latin), self-hosted. Licence: assets/fonts/OFL.txt */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Colour tokens. Base colours first, then the semantic aliases site.css uses.
   The --brand-* values are redefined by dist/assets/css/brand.css, written
   from content/settings.md (brand), which loads last. */
:root {
  --color-ink-950: #0f131a;
  --color-ink-900: #181d25;
  --color-ink-800: #262b38;
  --color-ink-700: #282f3e;
  --color-white: #ffffff;
  --color-grey-300: #b3b3b3;
  --color-grey-200: #e5e7eb;
  --color-grey-600: #4b5563;
  --color-cyan-400: #00ddff;
  --color-red-500: #ef4444;
  --color-amber-500: #f59e0b;
  --color-green-500: #22c55e;
  --color-black: #000000;

  --brand-ink: var(--color-white);
  --brand-accent: var(--color-cyan-400);
  --brand-accent-ink: var(--color-ink-950);
  --brand-paper: var(--color-ink-950);
  --brand-surface: var(--color-ink-900);

  --surface-page: var(--brand-paper);
  --surface-card: var(--brand-surface);
  --surface-raised: var(--color-ink-800);
  --surface-header: color-mix(in srgb, var(--brand-paper) 90%, transparent);
  --surface-disabled: var(--color-grey-200);
  --text-body: var(--brand-ink);
  --text-muted: var(--color-grey-300);
  --text-accent: var(--brand-accent);
  --text-on-accent: var(--brand-accent-ink);
  --text-disabled: var(--color-grey-600);
  --text-on-status: var(--color-black);
  --text-on-danger: var(--color-white);
  --border-default: var(--color-ink-700);
  --border-accent: var(--brand-accent);
  --focus-ring: var(--brand-accent);
  --status-low: var(--color-red-500);
  --status-mid: var(--color-amber-500);
  --status-ok: var(--color-green-500);
  --shadow-header: 0 1px 0 var(--border-default);

  --gradient-primary-tl: linear-gradient(to bottom right, color-mix(in srgb, var(--brand-accent) 20%, transparent), transparent);
  --gradient-primary-tr: linear-gradient(to bottom left, color-mix(in srgb, var(--brand-accent) 20%, transparent), transparent);
  --gradient-primary-br: linear-gradient(to top left, color-mix(in srgb, var(--brand-accent) 20%, transparent), transparent);
  --gradient-accent-tl: linear-gradient(to bottom right, color-mix(in srgb, var(--brand-accent) 25%, transparent), transparent);
  --gradient-accent-tr: linear-gradient(to bottom left, color-mix(in srgb, var(--brand-accent) 25%, transparent), transparent);
  --gradient-promo: linear-gradient(to bottom right, var(--surface-card), var(--surface-page));
}

/* Type tokens. Inter is self-hosted (design-system/assets/fonts, OFL). */
:root {
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heading: var(--brand-heading-weight, 700);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;

  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --tracking-wide: 0.05em;
}

/* Spacing, radii, widths and sizes. */
:root {
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-32: 8rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;
  --border-width: 1px;
  --border-width-strong: 2px;
  --focus-width: 2px;

  --container-wide: 80rem;
  --container-medium: 56.25rem;
  --container-text: 56rem;
  --container-prose: 42rem;
  --container-promo: 64rem;
  --container-content: 72rem;
  --gutter: 1rem;
  --gutter-md: 1.5rem;
  --gutter-lg: 2rem;
  --header-height: 4rem;

  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 2.5rem;
  --icon-xl: 3rem;
  --icon-2xl: 3.5rem;
  --logo-header: 2.5rem;
  --logo-md: 3rem;
  --logo-lg: 4rem;
  --hero-logo-md: 5rem;
  --hero-logo-lg: 6rem;
  --illustration-row: 17rem;
  --illustration-split: 28rem;
  --avatar: 12rem;
  --textarea-min: 9.5rem;
  --menu-width: 16rem;
  --hover-lift: 1.03;
  --duration: 200ms;
}

/* Interpin site stylesheet. Reads tokens only (design-system/tokens).
   Breakpoints are the one raw value, because media queries cannot read
   custom properties: 640px (sm), 768px (md), 1024px (lg). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + var(--space-4)); }
body {
  margin: var(--space-0);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  overflow-x: hidden;
}
body.bg-gradient-primary-tl { background: var(--gradient-primary-tl), var(--surface-page); }
body.bg-gradient-primary-tr { background: var(--gradient-primary-tr), var(--surface-page); }
body.bg-gradient-primary-br { background: var(--gradient-primary-br), var(--surface-page); }
body.bg-gradient-accent-tl { background: var(--gradient-accent-tl), var(--surface-page); }
body.bg-gradient-accent-tr { background: var(--gradient-accent-tr), var(--surface-page); }

img, svg, picture { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3, h4 { margin: var(--space-0) var(--space-0) var(--space-4); line-height: var(--leading-tight); font-weight: var(--weight-heading); }
p, ul, ol { margin: var(--space-0) var(--space-0) var(--space-4); }
p:last-child, ul:last-child { margin-bottom: var(--space-0); }
a { color: var(--text-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-width); border-radius: var(--radius-sm); }

.skip-link { position: absolute; left: var(--space-4); top: calc(-1 * var(--space-20)); z-index: 100; background: var(--brand-accent); color: var(--text-on-accent); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); }
.skip-link:focus { top: var(--space-2); }

.icon { width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; }
.icon-card { width: var(--icon-xl); height: var(--icon-xl); color: var(--text-accent); margin-bottom: var(--space-4); display: block; }
.cards-sm .icon-card { width: var(--icon-lg); height: var(--icon-lg); }
.icon-feature { width: var(--icon-2xl); height: var(--icon-2xl); color: var(--text-accent); margin: var(--space-0) auto var(--space-4); display: block; }
.icon-head { width: var(--icon-lg); height: var(--icon-lg); color: var(--text-accent); }
.icon-inline { width: var(--icon-sm); height: var(--icon-sm); }
.icon-arrow { width: var(--icon-md); height: var(--icon-md); margin-left: var(--space-2); transition: transform var(--duration); }
a:hover .icon-arrow { transform: translateX(var(--space-1)); }

/* text helpers */
.muted { color: var(--text-muted); }
.accent { color: var(--text-accent); font-weight: var(--weight-semibold); font-size: var(--text-xl); }
.lead { font-size: var(--text-xl); color: var(--text-muted); }
.small { font-size: var(--text-sm); }
.kicker { color: var(--text-accent); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.center { text-align: center; }
.strong { font-weight: var(--weight-semibold); }
.stack-sm p { margin-bottom: var(--space-2); }

/* layout */
.container { width: 100%; margin: var(--space-0) auto; padding: var(--space-0) var(--gutter); }
.container-wide { max-width: var(--container-wide); }
.container-content { max-width: var(--container-content); }
.container-medium { max-width: var(--container-medium); }
.container-text { max-width: var(--container-text); }
.container-prose { max-width: var(--container-prose); }
.container-promo { max-width: var(--container-promo); }
@media (min-width: 640px) { .container { padding: var(--space-0) var(--gutter-md); } }
@media (min-width: 1024px) { .container { padding: var(--space-0) var(--gutter-lg); } }

.block { padding: var(--space-20) var(--space-0); }
.block-tight { padding: var(--space-12) var(--space-0); }
.bg-card { background: var(--surface-card); }
.border-top { border-top: var(--border-width) solid var(--border-default); }
.border-y { border-top: var(--border-width) solid var(--border-default); border-bottom: var(--border-width) solid var(--border-default); }
.block > .container > h2, .section-intro h2, .text h2 { font-size: var(--text-4xl); }
.section-intro { text-align: center; margin-bottom: var(--space-12); }
.section-intro p { max-width: var(--container-text); margin-left: auto; margin-right: auto; }
.section-intro.align-left { text-align: left; }
.section-gap { margin-top: var(--space-16); }

/* header */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--surface-header); backdrop-filter: blur(var(--space-2)); box-shadow: var(--shadow-header); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); }
.brand img { height: var(--logo-header); width: auto; }
main { padding-top: var(--header-height); }
.hero { padding-top: var(--space-16); }

.nav-desktop { display: none; align-items: center; gap: var(--space-8); }
.nav-groups { display: flex; gap: var(--space-1); list-style: none; margin: var(--space-0); padding: var(--space-0); }
.nav-group { position: relative; }
.nav-group summary, .nav-mobile summary { list-style: none; cursor: pointer; }
.nav-group summary::-webkit-details-marker, .nav-mobile summary::-webkit-details-marker { display: none; }
.nav-group summary { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.nav-group summary:hover, .nav-group details[open] summary { background: var(--surface-raised); }
.icon-chevron { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--duration); }
.nav-group details[open] .icon-chevron { transform: rotate(180deg); }
.nav-menu { position: absolute; top: calc(100% + var(--space-2)); left: 0; min-width: var(--menu-width); list-style: none; margin: var(--space-0); padding: var(--space-2); background: var(--surface-card); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-lg); }
.nav-menu a { display: block; padding: var(--space-3); border-radius: var(--radius-md); color: var(--text-body); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.nav-menu a:hover, .nav-menu a[aria-current] { background: var(--brand-accent); color: var(--text-on-accent); text-decoration: none; }

.nav-mobile summary { padding: var(--space-2); display: flex; }
.nav-mobile .icon { width: var(--icon-xl); height: var(--icon-xl); padding: var(--space-2); }
.nav-mobile .icon-close, .nav-mobile[open] .icon-open { display: none; }
.nav-mobile[open] .icon-close { display: block; }
.mobile-panel { position: absolute; left: 0; right: 0; top: var(--header-height); background: var(--surface-page); border-top: var(--border-width) solid var(--border-default); border-bottom: var(--border-width) solid var(--border-default); padding: var(--space-4); max-height: calc(100vh - var(--header-height)); overflow-y: auto; }
.mobile-group { margin-bottom: var(--space-3); }
.mobile-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-muted); margin-bottom: var(--space-2); }
.mobile-group ul { list-style: none; padding-left: var(--space-4); margin: var(--space-0); }
.mobile-group a { display: block; color: var(--text-body); font-size: var(--text-sm); padding: var(--space-1) var(--space-0); }
.mobile-panel .button { margin-top: var(--space-4); }
@media (min-width: 1024px) {
  .nav-desktop { display: flex; }
  .nav-mobile { display: none; }
}

/* buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); min-height: var(--space-10); border-radius: var(--radius-md); border: var(--border-width) solid var(--brand-accent); background: var(--brand-accent); color: var(--text-on-accent); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; text-decoration: none; transition: opacity var(--duration); }
.button:hover { opacity: 0.9; text-decoration: none; }
.button .icon-arrow { margin-left: var(--space-0); }
.button-outline { background: var(--surface-page); color: var(--text-body); border-color: var(--border-default); }
.button-outline:hover { background: var(--brand-accent); color: var(--text-on-accent); opacity: 1; }
.button-large { min-height: var(--space-12); padding: var(--space-3) var(--space-8); font-size: var(--text-base); }
.button-small { min-height: var(--space-8); padding: var(--space-1) var(--space-3); }
.button-block { width: 100%; }
.button-disabled { background: var(--surface-disabled); color: var(--text-disabled); border-color: var(--surface-disabled); cursor: not-allowed; width: 100%; margin: var(--space-0); }
.button[disabled] { opacity: 0.6; cursor: progress; }
p > .button + .button { margin-left: var(--space-3); }
.buttons, p:has(> .button) { display: flex; flex-wrap: wrap; gap: var(--space-3); }
p:has(> .button) > .button + .button { margin-left: var(--space-0); }
.hero-center p:has(> .button) { justify-content: center; }

/* hero */
.hero h1 { font-size: var(--text-4xl); }
.hero-xl h1 { font-size: var(--text-4xl); }
.hero h2 { font-size: var(--text-2xl); color: var(--text-accent); font-weight: var(--weight-semibold); }
.hero-center { text-align: center; }
.hero-center .lead, .hero-center p { margin-left: auto; margin-right: auto; }
.hero-center p { margin-bottom: var(--space-8); }
.hero-center p:last-child { margin-bottom: var(--space-0); }
.hero-split { display: grid; gap: var(--space-12); align-items: center; }
.hero-split .accent { margin-bottom: var(--space-4); }
.hero-logo { display: flex; justify-content: center; margin-bottom: var(--space-8); }
.hero-logo img { width: auto; }
.hero-logo-md img { height: var(--hero-logo-md); }
.hero-logo-lg img { height: var(--hero-logo-lg); }
.hero-logo-sm img { height: var(--logo-lg); }
@media (min-width: 768px) {
  .hero h1 { font-size: var(--text-6xl); }
  .hero-xl h1 { font-size: var(--text-7xl); }
  .hero h2 { font-size: var(--text-3xl); }
  .hero-xl .lead { font-size: var(--text-2xl); }
  .hero-split { grid-template-columns: 1fr 1fr; }
}

/* logos */
.logo-strip { list-style: none; margin: var(--space-0); padding: var(--space-0); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-8); }
.logo-strip img { width: auto; filter: grayscale(1); opacity: 0.7; transition: filter var(--duration), opacity var(--duration); }
.logo-strip li:hover img { filter: none; opacity: 1; }
.logo-md img { height: var(--logo-md); }
.logo-lg img { height: var(--logo-lg); }
@media (min-width: 768px) { .logo-strip { gap: var(--space-12); } }

/* split */
.split { display: grid; gap: var(--space-12); align-items: center; max-width: var(--container-content); margin: var(--space-0) auto; }
.split-media { display: flex; justify-content: center; }
.split-media img { width: 100%; max-width: var(--illustration-split); border-radius: var(--radius-lg); }
.split-words h2 { font-size: var(--text-4xl); }
.split-words p { color: var(--text-muted); }
.split-words p.lead { font-size: var(--text-lg); }
.split-words p.accent { color: var(--text-accent); font-size: var(--text-base); }
.split-words p:has(> .button) { margin-top: var(--space-6); }
@media (min-width: 768px) { .split { grid-template-columns: 1fr 1fr; } }

/* illustrated rows */
.rows { display: grid; gap: var(--space-10); }
.row { display: grid; gap: var(--space-6); align-items: center; }
.row-media { display: flex; justify-content: center; }
.row-media img { width: 100%; max-width: var(--illustration-row); }
.row-words h2, .row-words h3 { font-size: var(--text-2xl); }
.row-words p { color: var(--text-muted); }
@media (min-width: 768px) {
  .row { grid-template-columns: 1fr 3fr; }
  .row-reverse { grid-template-columns: 3fr 1fr; }
  .row-reverse .row-media { order: 2; }
  .row-reverse .row-words { text-align: right; }
}

/* quote */
.quote { margin: var(--space-0); text-align: center; }
.quote blockquote { margin: var(--space-0) var(--space-0) var(--space-6); font-size: var(--text-2xl); font-weight: var(--weight-medium); font-style: italic; line-height: var(--leading-snug); }
.quote figcaption { color: var(--text-muted); }

/* cards */
.cards { list-style: none; margin: var(--space-0) auto; padding: var(--space-0); display: grid; gap: var(--space-6); max-width: var(--container-content); }
.card { position: relative; background: var(--surface-card); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-8); transition: border-color var(--duration), transform var(--duration); }
.bg-card .card { background: var(--surface-card); }
.card:hover { border-color: var(--border-accent); }
.card-title { font-size: var(--text-2xl); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.card p { color: var(--text-muted); }
.cards-sm .card { padding: var(--space-6); }
.cards-sm .card-title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.cards-sm .card p { font-size: var(--text-sm); }
.card-linked .card-title { font-size: var(--text-xl); }
.card-link { color: var(--text-body); }
.card-link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.card-link:hover { text-decoration: none; }
.card-linked:hover { transform: scale(var(--hover-lift)); }
.card-linked:focus-within { border-color: var(--border-accent); }
.card-more { display: inline-block; margin-top: var(--space-4); color: var(--text-accent); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.card-linked:hover .card-more { text-decoration: underline; }
@media (min-width: 768px) {
  .cards-2, .cards-3 { grid-template-columns: repeat(2, 1fr); }
  .cards-md.cards-2 { gap: var(--space-8); }
}
@media (min-width: 1024px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }

.checks { list-style: none; padding: var(--space-0); display: grid; gap: var(--space-2); }
.checks li { display: flex; align-items: flex-start; gap: var(--space-2); }
.checks .icon-list { color: var(--text-accent); width: var(--icon-sm); height: var(--icon-sm); margin-top: var(--space-1); }
.checks-sm li { font-size: var(--text-sm); color: var(--text-muted); }
.checks-lg { gap: var(--space-3); }
.checks-lg li { font-size: var(--text-lg); gap: var(--space-3); }
.checks-lg .icon-list { width: var(--icon-md); height: var(--icon-md); margin-top: var(--space-1); }

/* pills */
.pills { list-style: none; padding: var(--space-0); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-12); }
.pills li { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border: var(--border-width) solid var(--border-accent); border-radius: var(--radius-full); font-weight: var(--weight-semibold); }
.pills-sm { gap: var(--space-3); margin-top: var(--space-10); }
.pills-sm li { padding: var(--space-2) var(--space-5); font-size: var(--text-sm); }
.pills-sm .icon { width: var(--icon-sm); height: var(--icon-sm); }
.block-pills p { color: var(--text-muted); max-width: var(--container-text); margin-left: auto; margin-right: auto; }
.block-pills p + .pills { margin-top: var(--space-10); }

/* checklist */
.checklist { list-style: none; padding: var(--space-0); display: grid; gap: var(--space-4); }
.checklist li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--text-muted); }
.checklist .icon-list { color: var(--text-accent); margin-top: var(--space-1); }
.checklist-plain li { font-size: var(--text-sm); gap: var(--space-2); }
.checklist-boxed li { padding: var(--space-4); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-lg); font-size: var(--text-sm); }
.checklist-cards li { padding: var(--space-5); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); }
@media (min-width: 640px) { .checklist { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .checklist.cols-3 { grid-template-columns: repeat(3, 1fr); } }

/* promo */
.promo { border: var(--border-width-strong) solid var(--border-accent); border-radius: var(--radius-lg); background: var(--gradient-promo); padding: var(--space-8); text-align: center; }
.promo h2 { font-size: var(--text-3xl); }
.promo p { color: var(--text-muted); font-size: var(--text-xl); max-width: var(--container-text); margin-left: auto; margin-right: auto; }
.promo p:has(> .button) { justify-content: center; margin-top: var(--space-8); }
.tags { list-style: none; padding: var(--space-0); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); }
.tags li, .tag { display: inline-block; background: var(--surface-raised); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.tag { border: var(--border-width) solid var(--border-default); background: transparent; font-size: var(--text-xs); }
@media (min-width: 768px) {
  .promo { padding: var(--space-12); }
  .promo h2 { font-size: var(--text-4xl); }
}

/* text */
.text-center { text-align: center; }
.text p { color: var(--text-muted); }
.text p.lead { font-size: var(--text-lg); }
.text p.accent { color: var(--text-accent); font-size: var(--text-xl); }
.text p + p { margin-top: var(--space-4); }
.text-center p:has(> .button) { justify-content: center; margin-top: var(--space-8); }

/* lists side by side */
.list-cols { display: grid; gap: var(--space-12); max-width: var(--container-content); margin: var(--space-0) auto; }
.list-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.list-head h2, .list-head h3 { font-size: var(--text-3xl); margin: var(--space-0); }
@media (min-width: 768px) { .list-cols { grid-template-columns: 1fr 1fr; } }

/* schedule */
.schedule { list-style: none; padding: var(--space-0); display: grid; gap: var(--space-6); }
.slot { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); transition: border-color var(--duration); }
.slot:hover { border-color: var(--border-accent); }
.slot-time { flex-shrink: 0; align-self: flex-start; padding: var(--space-2) var(--space-4); border: var(--border-width) solid var(--border-accent); border-radius: var(--radius-full); font-weight: var(--weight-semibold); margin: var(--space-0); white-space: nowrap; }
.slot-title { font-size: var(--text-xl); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.slot p, .slot .bullets { color: var(--text-muted); }
.bullets { padding-left: var(--space-5); }
@media (min-width: 640px) { .slot { flex-direction: row; } }

/* sessions and workshop details */
.session { display: flex; flex-direction: column; }
.session-body { display: flex; flex-direction: column; flex: 1; }
.session-date { color: var(--text-accent); font-size: var(--text-lg); font-weight: var(--weight-medium); }
.session-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-2) var(--space-0) var(--space-4); }
.session .button, .session .button-disabled { margin-top: auto; }
.price { font-size: var(--text-xl); font-weight: var(--weight-bold); }
.spots { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-on-status); }
.status-low { background: var(--status-low); color: var(--text-on-danger); }
.status-mid { background: var(--status-mid); }
.status-ok { background: var(--status-ok); }
.plain-list { list-style: none; padding: var(--space-0); color: var(--text-muted); display: grid; gap: var(--space-2); }
.note { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-4); padding: var(--space-3); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-lg); font-size: var(--text-xs); }
.note .icon { margin-top: var(--space-1); color: var(--text-body); }
.instructor { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-12); }
.instructor .avatar { width: var(--avatar); height: var(--avatar); border-radius: var(--radius-full); object-fit: cover; }
.instructor .accent { font-size: var(--text-base); }
@media (min-width: 768px) { .instructor { flex-direction: row; align-items: flex-start; } }
.block-instructor > .container { max-width: var(--container-text); }

/* contact form */
.contact-title { font-size: var(--text-3xl); text-align: center; margin-bottom: var(--space-8); }
.form-card { background: var(--surface-card); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-8); }
.form-title { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.form-card > p { margin-bottom: var(--space-6); }
.contact-form { display: grid; gap: var(--space-6); }
.field label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: var(--space-2); }
.field input, .field textarea { width: 100%; font: inherit; font-size: var(--text-sm); color: var(--text-body); background: var(--surface-page); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); min-height: var(--space-10); }
.field textarea { min-height: var(--textarea-min); resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); opacity: 0.7; }
.field input:focus-visible, .field textarea:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--space-0); }
.field-error { color: var(--status-low); font-size: var(--text-sm); margin: var(--space-2) var(--space-0) var(--space-0); }
.form-status:empty { display: none; }
.form-status { margin: var(--space-0); font-size: var(--text-sm); }
.form-status.is-error { color: var(--status-low); }
.form-status.is-sent { color: var(--text-accent); }

/* footer */
.site-footer { background: var(--surface-card); border-top: var(--border-width) solid var(--border-default); padding: var(--space-12) var(--space-0); }
.footer-grid { display: grid; gap: var(--space-8); }
.footer-logo { height: var(--logo-header); width: auto; margin-bottom: var(--space-4); }
.footer-title { font-size: var(--text-base); font-weight: var(--weight-semibold); margin-bottom: var(--space-4); }
.site-footer ul { list-style: none; padding: var(--space-0); display: grid; gap: var(--space-2); }
.site-footer ul a { color: var(--text-muted); font-size: var(--text-sm); }
.site-footer a:hover { color: var(--text-accent); text-decoration: none; }
.footer-bottom { border-top: var(--border-width) solid var(--border-default); margin-top: var(--space-12); padding-top: var(--space-8); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(5, 1fr); }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}