/* =========================================================================
   GDL Office - site styles
   One file for the whole site. Sections:
   1. Fonts  2. Design tokens (colours, type, spacing)  3. Base
   4. Layout helpers  5. Components (buttons, cards, forms...)
   6. Header & footer  7. Page sections  8. Utilities
   Colour rule: ONE accent colour (the GDL teal). #00a8a8 is the logo colour;
   text and buttons use a darker teal so they stay readable (WCAG AA).
   Corner rule: buttons & badges fully round, inputs 12px, cards & photos 28px.
   ========================================================================= */

/* 1. Fonts (Outfit, self-hosted; the second file adds ő, ű) -------------- */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Design tokens ------------------------------------------------------- */
:root {
  /* colours: light */
  --canvas: #fdfdfc;
  --surface: #eef4f3;          /* soft teal-tinted panels */
  --surface-strong: #dfeceb;
  --card: #ffffff;
  --ink: #1b2323;              /* headings */
  --text: #3d4949;             /* body text */
  --muted: #5f6b6b;            /* small print, captions */
  --line: #d9e3e2;
  --brand: #00a8a8;            /* logo teal: decoration only */
  --accent: #007575;           /* links, buttons (5.5:1 on white) */
  --accent-hover: #005f5f;
  --accent-ink: #ffffff;       /* text on accent buttons */
  --accent-soft: #d4ecea;
  --deep: #0b4f50;             /* dark teal band (final CTA) */
  --accent-bright: #5fd0cd;    /* teal on dark backgrounds (hero) */
  --on-deep: #f3f8f8;
  --star: #b25e00;             /* rating star, 4.6:1 on white */
  --danger: #b3261e;
  --success: #1e6b3a;
  --shadow: 0 1px 2px rgb(11 79 80 / 0.06), 0 8px 24px rgb(11 79 80 / 0.08);
  --shadow-lift: 0 2px 4px rgb(11 79 80 / 0.06), 0 24px 48px -12px rgb(11 79 80 / 0.22);
  --card-edge: transparent;
  --input-border: #748483;     /* 3.9:1 on white */
  --blob-opacity: 0.9;
  color-scheme: light;

  /* type */
  --font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.6rem);
  --fs-h3: clamp(1.15rem, 1.08rem + 0.3vw, 1.3rem);
  --fs-lead: clamp(1.1rem, 1.04rem + 0.3vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;

  /* spacing (4px steps) */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;
  --section: clamp(4rem, 2.8rem + 5vw, 7rem);
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --maxw: 1200px;

  /* shape */
  --r-control: 12px;
  --r-card: 28px;
  --r-pill: 999px;

  --header-h: 68px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark colours. Used when the visitor picks dark with the header switch,
   or when their device is set to dark and they have not picked light.
   The two blocks below must stay identical. */
:root[data-theme="dark"] {
    --canvas: #101617;
    --surface: #182122;
    --surface-strong: #202b2c;
    --card: #1a2425;
    --ink: #eef3f3;
    --text: #c5d0cf;
    --muted: #9aa8a7;
    --line: #2a3637;
    --accent: #33c2c0;
    --accent-hover: #5fd0cd;
    --accent-ink: #0d1414;
    --accent-soft: #173a3a;
    --deep: #0e3a3b;
    --accent-bright: #5fd0cd;
    --on-deep: #eef6f6;
    --star: #f2b33d;
    --danger: #ff8a80;
    --success: #7fd69b;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.25);
    --shadow-lift: 0 24px 48px -12px rgb(0 0 0 / 0.5);
    --card-edge: var(--line);
    --input-border: #6b7b7c;
    --blob-opacity: 0.55;
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
      --canvas: #101617;
      --surface: #182122;
      --surface-strong: #202b2c;
      --card: #1a2425;
      --ink: #eef3f3;
      --text: #c5d0cf;
      --muted: #9aa8a7;
      --line: #2a3637;
      --accent: #33c2c0;
      --accent-hover: #5fd0cd;
      --accent-ink: #0d1414;
      --accent-soft: #173a3a;
      --deep: #0e3a3b;
      --accent-bright: #5fd0cd;
      --on-deep: #eef6f6;
      --star: #f2b33d;
      --danger: #ff8a80;
      --success: #7fd69b;
      --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.25);
      --shadow-lift: 0 24px 48px -12px rgb(0 0 0 / 0.5);
      --card-edge: var(--line);
      --input-border: #6b7b7c;
      --blob-opacity: 0.55;
      color-scheme: dark;
  }
}

/* 3. Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;              /* long e-mail addresses never break the layout */
  -webkit-tap-highlight-color: transparent;
}
a, button, input, select, textarea, label { touch-action: manipulation; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.12; margin: 0; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--fs-display); letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--s4); }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
strong { color: var(--ink); font-weight: 600; }
ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent-soft); color: var(--ink); }

/* 4. Layout helpers ------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.section { padding-block: var(--section); }
.section-tint { background: var(--surface); }
.stack > * + * { margin-top: var(--s4); }
.measure { max-width: 62ch; }
.section-head { max-width: 40rem; margin-bottom: var(--s7); }
.section-head p { margin-top: var(--s4); font-size: var(--fs-lead); }
.lead { font-size: var(--fs-lead); line-height: 1.55; }

/* 5. Components ---------------------------------------------------------- */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0.75rem 1.4rem;
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  font: 600 1rem/1.2 var(--font); letter-spacing: 0; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:disabled { opacity: 0.7; cursor: progress; }
.btn .icon { width: 1.15em; height: 1.15em; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-on-deep { background: var(--on-deep); color: var(--deep); }
.btn-on-deep:hover { background: #ffffff; color: var(--deep); }
.btn-sm { min-height: 42px; padding: 0.55rem 1rem; font-size: 0.9375rem; }
.btn-lg { min-height: 54px; padding: 0.9rem 1.7rem; font-size: 1.0625rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Text link with arrow */
.link-arrow { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; text-decoration: none; }
.link-arrow .icon { width: 1.1em; height: 1.1em; transition: transform .2s var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }

/* Icons */
.icon { width: 1.5rem; height: 1.5rem; flex: none; }

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 0.3rem 0.75rem; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--ink);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.01em;
}

/* Card */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s6); }

/* Photo frame */
.photo { border-radius: var(--r-card); overflow: hidden; background: var(--surface-strong); }
.photo picture { width: 100%; height: 100%; }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* Placeholder for missing photos (clearly marked TODO) */
.placeholder {
  display: grid; place-items: center; min-height: 220px; height: 100%;
  border-radius: var(--r-card); border: 2px dashed var(--line);
  background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 12px, var(--surface-strong) 12px, var(--surface-strong) 24px);
  color: var(--muted); font-size: var(--fs-small); font-weight: 600; text-align: center; padding: var(--s5);
}
.placeholder span { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }

/* Rating */
.stars { display: inline-flex; gap: 2px; color: var(--star); }
.stars .icon { width: 1.1rem; height: 1.1rem; }

/* FAQ accordion (native <details>, works without JavaScript) */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  padding: var(--s5) 0; cursor: pointer; list-style: none;
  color: var(--ink); font-weight: 600; font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 1.25rem; height: 1.25rem; color: var(--accent); transition: transform .25s var(--ease); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq .answer { padding: 0 0 var(--s5); max-width: 62ch; }

/* Forms (used from the Próbanap page on) */
.field { display: grid; gap: var(--s2); }
.field label { color: var(--ink); font-weight: 600; font-size: var(--fs-small); }
.field .hint { color: var(--muted); font-size: var(--fs-xs); }
.field .error { color: var(--danger); font-size: var(--fs-small); }
.input {
  width: 100%; min-height: 48px; padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--input-border); border-radius: var(--r-control);
  background: var(--card); color: var(--ink); font: 400 1rem/1.4 var(--font);
}
.input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.input[aria-invalid="true"] { border-color: var(--danger); }

/* Notice (info / success / error boxes) */
.notice { display: flex; gap: var(--s3); padding: var(--s4) var(--s5); border-radius: var(--r-control); background: var(--surface); color: var(--ink); }
.notice-success { background: color-mix(in srgb, var(--success) 12%, var(--card)); }
.notice-error { background: color-mix(in srgb, var(--danger) 10%, var(--card)); }

/* 6. Header & footer ----------------------------------------------------- */
.skip-link { position: absolute; left: var(--s4); top: -100px; z-index: 100; background: var(--ink); color: var(--canvas); padding: var(--s3) var(--s4); border-radius: var(--r-control); }
.skip-link:focus { top: var(--s3); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--canvas) 92%, transparent);
  backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: var(--s4); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: var(--s3); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; margin-right: auto; }
.brand img { width: 44px; height: 44px; }
.site-nav ul { list-style: none; display: flex; gap: var(--s1); }
.site-nav a { display: block; padding: 0.55rem 0.85rem; border-radius: var(--r-control); color: var(--text); text-decoration: none; font-weight: 500; }
.site-nav a:hover { color: var(--ink); background: var(--surface); }
.site-nav a[aria-current="page"] { color: var(--ink); background: var(--surface); }
.menu-toggle { display: none; }
.theme-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text); cursor: pointer;
}
.theme-toggle:hover { background: var(--surface); color: var(--ink); }
.theme-toggle .icon { width: 1.35rem; height: 1.35rem; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

@media (max-width: 800px) {
  :root { --header-h: 60px; }
  .brand img { width: 40px; height: 40px; }
  .brand-name { font-size: 1.05rem; }
  .menu-toggle {
    display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: calc(var(--s2) * -1);
    border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink); cursor: pointer;
  }
  .menu-toggle .menu-close { display: none; }
  .menu-toggle[aria-expanded="true"] .menu-open { display: none; }
  .menu-toggle[aria-expanded="true"] .menu-close { display: block; }
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--canvas); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); display: none; }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; padding: var(--s3) var(--gutter) var(--s5); }
  .site-nav a { padding: 0.9rem 0.5rem; font-size: 1.125rem; border-radius: 0; border-bottom: 1px solid var(--line); }
  .site-nav li:last-child a { border-bottom: 0; }
  /* Without JavaScript the menu cannot open: the footer links stay available. */
}
@media (max-width: 440px) { .brand-name { display: none; } .header-inner { gap: var(--s2); } }

.site-footer { background: var(--surface); padding-block: var(--s8) var(--s5); margin-top: 0; font-size: var(--fs-small); }
.footer-grid { display: grid; gap: var(--s6); grid-template-columns: 1fr; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.footer-name { color: var(--ink); font-weight: 600; font-size: 1.125rem; margin-bottom: var(--s2); }
.footer-title { font-size: var(--fs-small); font-weight: 600; margin-bottom: var(--s3); letter-spacing: 0; }
.footer-links { list-style: none; display: grid; gap: var(--s2); }
.footer-links a, .site-footer address { color: var(--text); }
.footer-links a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--line); margin-top: var(--s7); padding-top: var(--s5); color: var(--muted); font-size: var(--fs-xs); }


/* Header over the hero photo: see-through with white text until you scroll.
   Only with JavaScript (class "js"), so without it the header stays solid. */
.site-header { transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.js .has-hero .site-header:not(.is-solid) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.js .has-hero .site-header:not(.is-solid) .brand,
.js .has-hero .site-header:not(.is-solid) .menu-toggle,
.js .has-hero .site-header:not(.is-solid) .theme-toggle { color: #fff; }
.js .has-hero .site-header:not(.is-solid) .theme-toggle:hover { background: rgb(255 255 255 / 0.12); }
@media (min-width: 801px) {
  .js .has-hero .site-header:not(.is-solid) .site-nav a { color: rgb(255 255 255 / 0.9); }
  .js .has-hero .site-header:not(.is-solid) .site-nav a:hover { color: #fff; background: rgb(255 255 255 / 0.1); }
}
.js .has-hero .site-header:not(.is-solid) .header-cta { background: var(--accent-bright); color: #0d1414; }
.site-header.is-solid { box-shadow: 0 1px 0 var(--line); }

/* 7. Page sections ------------------------------------------------------- */

/* Hero: full-width photo as a darkened background; header, logo and text sit on it */
.hero {
  position: relative; isolation: isolate; color: #fff;
  margin-top: calc(var(--header-h) * -1);            /* slide under the see-through header */
  padding-top: calc(var(--header-h) + var(--s7));
  padding-bottom: calc(var(--proof-hely, 3.75rem) + var(--s7)); /* room for the overlapping fact card */
  min-height: min(78svh, 760px);
  display: flex; align-items: center;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--deep); }
.hero-bg picture, .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgb(6 38 39 / 0.9) 0%, rgb(6 38 39 / 0.75) 45%, rgb(6 38 39 / 0.55) 100%),
    linear-gradient(0deg, rgb(6 38 39 / 0.55) 0%, transparent 40%);
}
.hero-copy { max-width: 40rem; }
.hero h1 { color: #fff; margin-bottom: var(--s5); }
.hero h1 .accent { color: var(--accent-bright); }
.hero .lead { color: rgb(255 255 255 / 0.88); margin-bottom: var(--s6); max-width: 34rem; }
@media (min-width: 900px) { .hero h1 { font-size: clamp(2.6rem, 1.2rem + 2.4vw, 3.5rem); } }
@media (max-width: 899px) {
  .hero { padding-top: calc(var(--header-h) + var(--s7)); padding-bottom: 5.5rem; min-height: 0; }
  .hero-bg::after { background: linear-gradient(0deg, rgb(6 38 39 / 0.92) 0%, rgb(6 38 39 / 0.72) 55%, rgb(6 38 39 / 0.55) 100%); }
}

.hero-short { min-height: min(62svh, 600px); padding-bottom: var(--s8); }

/* Buttons on the dark hero */
.btn-bright { background: var(--accent-bright); color: #0d1414; }
.btn-bright:hover { background: #7ddad7; color: #0d1414; }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.55); }
.btn-ghost-light:hover { border-color: #fff; color: #fff; background: rgb(255 255 255 / 0.08); }

/* Fact card that overlaps the hero and the next section */
/* The card overlaps the photo by about half its own height (set per screen size) */
.proof { position: relative; z-index: 2; --proof-overlap: 3.75rem; margin-top: calc(var(--proof-overlap) * -1); }
@media (min-width: 600px) and (max-width: 999px) { .proof { --proof-overlap: 4.75rem; } }
@media (min-width: 600px) and (max-width: 899px) { .hero { padding-bottom: calc(4.75rem + var(--s6)); } }
.proof-card { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-lift); border: 1px solid var(--card-edge); padding: var(--s2) var(--s5); }
.proof-list { list-style: none; display: grid; grid-template-columns: 1fr; }
.proof-list li { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s2); color: var(--ink); font-weight: 500; line-height: 1.3; }
.proof-list li + li { border-top: 1px solid var(--line); }
.proof-list .icon { color: var(--accent); }
.proof-list a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: var(--s3); }
.proof-list a:hover { color: var(--accent); }
@media (min-width: 600px) {
  .proof-list { grid-template-columns: repeat(2, 1fr); column-gap: var(--s5); }
  .proof-list li:nth-child(2) { border-top: 0; }
}
@media (min-width: 1000px) {
  .proof-card { padding: var(--s3) var(--s6); }
  .proof-list { grid-template-columns: repeat(4, 1fr); column-gap: 0; }
  .proof-list li { padding: var(--s5) var(--s4); }
  .proof-list li + li { border-top: 0; border-left: 1px solid var(--line); padding-left: var(--s5); }
}
@media (max-width: 599px) { .proof { --proof-overlap: 3rem; } }
@media (max-width: 599px) { .proof-list li { padding-block: var(--s3); } }

/* Blobs: soft organic shapes that reach in from the page edge */
.has-blob { position: relative; isolation: isolate; overflow-x: clip; }
.blob { position: absolute; z-index: -1; pointer-events: none; width: clamp(220px, 30vw, 420px); height: auto; }
.blob-brand { color: var(--brand); opacity: var(--blob-opacity); }
.blob-soft { color: var(--brand); opacity: 0.22; }
.blob-right { right: clamp(-210px, -12vw, -90px); top: 12%; }
.blob-left { left: clamp(-230px, -13vw, -100px); bottom: 8%; }
@media (max-width: 699px) { .blob { width: 200px; } .blob-right { right: -130px; top: 2%; } .blob-left { left: -140px; } }
.blob { will-change: transform; } /* moved gently while scrolling by site.js */

/* How it works: three steps joined by a line */
.steps { list-style: none; display: grid; gap: var(--s6); counter-reset: step; }
.steps li { position: relative; padding-left: 4rem; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -0.2rem; width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--accent-soft); color: var(--ink); font-weight: 600; font-size: 1.125rem;
}
.steps h3 { margin-bottom: var(--s2); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s7); }
  .steps li { padding-left: 0; padding-top: 4.25rem; }
  .steps li::after { content: ""; position: absolute; top: 1.375rem; left: 3.5rem; right: calc(var(--s7) * -1 + 0.75rem); height: 2px; background: var(--line); }
  .steps li:last-child::after { display: none; }
}

/* What's included: bento grid (photo tiles + fact tiles) */
.bento { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
.tile { border-radius: var(--r-card); padding: var(--s6); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s3); }
.tile .icon { width: 2rem; height: 2rem; color: var(--accent); }
.tile h3 { margin-top: var(--s2); }
.tile p { font-size: var(--fs-small); }
.tile-tint { background: var(--accent-soft); border-color: transparent; }
.tile-tint .icon { color: var(--ink); }
.tile-deep { background: var(--deep); border-color: transparent; color: var(--on-deep); }
.tile-deep h3, .tile-deep .icon { color: var(--on-deep); }
.tile-photo { padding: 0; overflow: hidden; position: relative; min-height: 280px; border: 0; }
.tile-photo picture, .tile-photo .placeholder { position: absolute; inset: 0; }
.tile-photo img { width: 100%; height: 100%; object-fit: cover; }
.tile-photo .tile-caption {
  position: absolute; left: var(--s4); right: var(--s4); bottom: var(--s4);
  background: color-mix(in srgb, var(--card) 94%, transparent); border-radius: 18px;
  padding: var(--s4) var(--s5); color: var(--ink);
}
.tile-photo .tile-caption h3 { margin: 0 0 var(--s1); }
.tile-photo .tile-caption p { font-size: var(--fs-small); color: var(--text); }
@media (min-width: 700px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile-photo.tall { grid-row: span 2; min-height: 420px; }
}
@media (min-width: 1000px) {
  .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(210px, auto); }
  .bento .span-2 { grid-column: span 2; }
  .tile-photo.tall { grid-row: span 2; }
}

/* Home office vs GDL Office */
.versus { display: grid; gap: var(--s4); }
.versus-col { border-radius: var(--r-card); padding: var(--s6); }
.versus-col h3 { margin-bottom: var(--s5); }
.versus-col ul { list-style: none; display: grid; gap: var(--s4); }
.versus-col li { display: flex; gap: var(--s3); align-items: flex-start; }
.versus-col li .icon { width: 1.35rem; height: 1.35rem; margin-top: 0.15rem; }
.versus-home { background: var(--surface); }
.versus-home .icon { color: var(--muted); }
.versus-gdl { background: var(--card); border: 2px solid var(--accent); box-shadow: var(--shadow); }
.versus-gdl .icon { color: var(--accent); }
@media (min-width: 800px) { .versus { grid-template-columns: 1fr 1fr; gap: var(--s5); } }

/* Prices */
.prices { display: grid; gap: var(--s5); align-items: stretch; }
.price-card { display: flex; flex-direction: column; gap: var(--s4); border-radius: var(--r-card); padding: var(--s6); background: var(--card); border: 1px solid var(--line); }
.price-card.featured { border: 2px solid var(--accent); box-shadow: var(--shadow); }
.price-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.price, .cal-day, .fact strong, .compare td, .admin-table td { font-variant-numeric: tabular-nums; }
.price { font-size: clamp(2.25rem, 1.9rem + 1.5vw, 3rem); font-weight: 600; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
.price small { font-size: 1rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.price-card ul { list-style: none; display: grid; gap: var(--s3); margin-block: var(--s2) var(--s4); }
.price-card li { display: flex; gap: var(--s3); font-size: var(--fs-small); }
.price-card li .icon { width: 1.2rem; height: 1.2rem; color: var(--accent); margin-top: 0.15rem; }
.price-card .btn { margin-top: auto; align-self: flex-start; }
.price-note { margin-top: var(--s5); color: var(--muted); font-size: var(--fs-small); }
@media (min-width: 800px) { .prices { grid-template-columns: 1fr 1.25fr; } }

/* Testimonials: one large quote + two smaller */
.quotes { display: grid; gap: var(--s5); }
.quote { margin: 0; display: flex; flex-direction: column; gap: var(--s4); }
.quote blockquote { margin: 0; color: var(--ink); }
.quote-main blockquote { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem); line-height: 1.35; letter-spacing: -0.015em; font-weight: 500; }
.quote-mark { color: var(--brand); }
.quote-mark .icon { width: 3.25rem; height: 3.25rem; }
.quote-main { border-left: 3px solid var(--brand); padding-left: var(--s6); }
.quote-side { padding: var(--s5) var(--s6); border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); }
.quote-side blockquote { font-size: 1.0625rem; line-height: 1.5; }
.quote figcaption { color: var(--muted); font-size: var(--fs-small); }
.quote figcaption strong { display: block; color: var(--ink); }
.rating-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s6); color: var(--ink); font-weight: 500; }
@media (min-width: 900px) {
  .quotes { grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; column-gap: var(--s8); }
  .quote-main { grid-row: span 2; align-self: start; padding-top: var(--s5); }
}

/* Photo strip: four photos in an uneven grid */
.gallery { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
.gallery .photo { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .gallery { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 240px 240px; gap: var(--s4); }
  .gallery .photo { aspect-ratio: auto; }
  .gallery .photo:first-child { grid-row: span 2; }
  .gallery .photo:last-child { grid-column: span 2; }
}
@media (max-width: 899px) { .gallery .photo:first-child { grid-column: span 2; aspect-ratio: 16 / 10; } }

/* Feature card: photo + short text side by side (podcast on the home page) */
.feature-card { display: grid; gap: var(--s5); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3); align-items: center; }
.feature-card .photo { aspect-ratio: 16 / 10; border-radius: calc(var(--r-card) - 8px); }
.feature-body { padding: var(--s4) var(--s4) var(--s5); display: grid; gap: var(--s4); }
.h2-sm { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }
@media (min-width: 800px) { .feature-card { grid-template-columns: 1fr 1.2fr; gap: var(--s7); } .feature-body { padding: var(--s5) var(--s6) var(--s5) 0; } }

/* FAQ teaser */
.faq-layout { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .faq-layout { grid-template-columns: 1fr 1.6fr; gap: var(--s8); } }

/* Final call to action band */
.cta-band { background: var(--deep); color: var(--on-deep); border-radius: var(--r-card); padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); display: grid; gap: var(--s5); }
.cta-band h2 { color: var(--on-deep); max-width: 22ch; }
.cta-band p { max-width: 52ch; font-size: var(--fs-lead); }
@media (min-width: 900px) { .cta-band { grid-template-columns: 1.4fr auto; align-items: end; } .cta-band .btn-row { justify-content: flex-end; } }



/* Inner page top band */
.page-head { background: var(--surface); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(3rem, 2rem + 3vw, 4.5rem); }
.page-head h1 { max-width: 20ch; }
.page-head .lead { margin-top: var(--s5); max-width: 40rem; }
.page-head .btn-row { margin-top: var(--s6); }
.blob-head { right: clamp(-200px, -10vw, -80px); top: -60px; width: clamp(200px, 26vw, 360px); }
@media (max-width: 699px) { .blob-head { right: -120px; top: -70px; width: 190px; } }

/* Two-column text + side content */
.split { display: grid; gap: var(--s7); }
@media (min-width: 900px) { .split { grid-template-columns: 1.2fr 1fr; gap: var(--s8); align-items: start; } .split.reverse > :first-child { order: 2; } }

/* Simple check list */
.checklist { list-style: none; display: grid; gap: var(--s4); }
.checklist li { display: flex; gap: var(--s3); align-items: flex-start; }
.checklist .icon { width: 1.35rem; height: 1.35rem; color: var(--accent); margin-top: 0.15rem; }

/* Timeline (how the trial day goes) */
.timeline { list-style: none; display: grid; gap: 0; border-left: 2px solid var(--line); margin-left: 0.6rem; }
.timeline li { position: relative; padding: 0 0 var(--s6) var(--s6); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -0.55rem; top: 0.35rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--canvas); border: 3px solid var(--accent); }
.timeline .time { display: block; color: var(--accent); font-weight: 600; font-size: var(--fs-small); margin-bottom: var(--s1); }
.timeline h3 { margin-bottom: var(--s2); }

/* Rule cards (booking deadlines) */
.rules { display: grid; gap: var(--s4); }
@media (min-width: 700px) { .rules { grid-template-columns: repeat(2, 1fr); } }
.rule { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s6); }
.rule .icon { color: var(--accent); width: 2rem; height: 2rem; margin-bottom: var(--s4); }
.rule h3 { margin-bottom: var(--s2); }

/* Booking area placeholder (the real form arrives with the booking system) */
.booking-box { background: var(--card); border: 2px solid var(--accent); border-radius: var(--r-card); padding: clamp(1.5rem, 1rem + 3vw, 3rem); box-shadow: var(--shadow); }
.booking-box h2 { margin-bottom: var(--s4); }


/* Booking form */
.booking-form { display: grid; gap: var(--s6); }
.booking-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.booking-form legend { color: var(--ink); font-weight: 600; font-size: 1.0625rem; margin-bottom: var(--s3); padding: 0; }
.choice-row { display: grid; gap: var(--s3); }
@media (min-width: 560px) { .choice-row { grid-template-columns: 1fr 1fr; } }
.choice { position: relative; display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4) var(--s5); border: 1.5px solid var(--input-border); border-radius: var(--r-control); background: var(--card); cursor: pointer; }
.choice input { width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; accent-color: var(--accent); flex: none; }
.choice strong { display: block; }
.choice small { display: block; color: var(--muted); font-size: var(--fs-small); }
.choice:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: color-mix(in srgb, var(--accent-soft) 45%, var(--card)); }
.choice:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.form-grid { display: grid; gap: var(--s5); }
@media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: span 2; } }
.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.booking-form .hint, .booking-box .hint { color: var(--muted); font-size: var(--fs-xs); }
.booking-box .notice p { margin: 0; }
.mb-5 { margin-bottom: var(--s5); }
.mt-3 { margin-top: var(--s3); }

/* Calendar */
.cal { max-width: 30rem; min-width: 0; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s3); }
.cal-title { color: var(--ink); font-weight: 600; font-size: 1.0625rem; }
.cal-nav { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.cal-nav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cal-nav:disabled { opacity: 0.35; cursor: default; }
.cal-nav .icon { width: 1.1rem; height: 1.1rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; padding-block: var(--s2); }
.cal-day {
  aspect-ratio: 1; min-height: 44px; display: grid; place-items: center; align-content: center; gap: 0;
  border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--muted);
  font: 500 1rem/1.1 var(--font); cursor: default; padding: 2px;
}
.cal-day small { font-size: 0.6875rem; font-weight: 500; line-height: 1.1; }
@media (max-width: 480px) {
  .cal-day { aspect-ratio: auto; min-height: 50px; min-width: 0; border-radius: 10px; }
  .cal-grid { gap: 3px; }
  .booking-box { padding: var(--s5) var(--s4); border-radius: 22px; }
}
.cal-day.is-open { background: var(--card); border-color: var(--line); color: var(--ink); cursor: pointer; }
.cal-day.is-open small { color: var(--accent); }
.cal-day.is-open:hover { border-color: var(--accent); }
.cal-day.is-full { text-decoration: line-through; }
.cal-day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cal-day[aria-pressed="true"] small { color: var(--accent-ink); }
.cal-day:disabled { opacity: 0.55; }
.cal-legend { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s3); font-size: var(--fs-xs); color: var(--muted); }
.cal-status { margin: var(--s3) 0 0; color: var(--ink); font-weight: 500; min-height: 1.5em; }
.has-cal .date-select { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Booking success */
.booking-done { display: grid; gap: var(--s4); }
.booking-done > .icon { width: 3rem; height: 3rem; color: var(--accent); }
.booking-done:focus { outline: none; }

/* Comparison table (Árak) */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; font-size: var(--fs-small); }
.compare th, .compare td { padding: var(--s4) var(--s5); text-align: left; vertical-align: top; }
.compare thead th { background: var(--surface); color: var(--ink); font-size: var(--fs-body); }
.compare tbody tr + tr > * { border-top: 1px solid var(--line); }
.compare tbody tr { border-top: 0; }
.compare tbody th { color: var(--ink); font-weight: 500; width: 40%; }
.compare .icon { width: 1.25rem; height: 1.25rem; color: var(--accent); }
.compare .no { color: var(--muted); }
.table-scroll { overflow-x: auto; border-radius: var(--r-card); }
@media (max-width: 640px) {
  .compare thead { display: none; }
  .compare tr { display: grid; grid-template-columns: 1fr 1fr; }
  .compare tbody tr + tr > * { border-top: 0; }
  .compare tbody tr + tr { border-top: 1px solid var(--line); }
  .compare tbody th { grid-column: 1 / -1; width: auto; padding-bottom: 0; }
  .compare td::before { content: attr(data-label); display: block; color: var(--muted); font-size: var(--fs-xs); margin-bottom: var(--s1); }
}

/* Big number facts */
.facts { display: grid; gap: var(--s4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { padding: var(--s5); border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); }
.fact strong { display: block; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: var(--s2); }
.fact span { font-size: var(--fs-small); color: var(--muted); }

/* Founders */
.people { display: grid; gap: var(--s5); }
@media (min-width: 700px) { .people { grid-template-columns: repeat(2, 1fr); } }
.person { display: flex; gap: var(--s5); align-items: flex-start; padding: var(--s5); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); }
.person picture, .person img { width: 96px; height: 96px; border-radius: 50%; flex: none; object-fit: cover; }
.person h3 { margin-bottom: var(--s1); }
.person-role { color: var(--accent); font-weight: 600; font-size: var(--fs-small); margin-bottom: var(--s2); }
.person p + p { margin-top: 0; }
.section-tight { padding-block: clamp(3rem, 2.2rem + 3vw, 4.5rem); }
.section-head-tight { margin-bottom: var(--s5); }
@media (min-width: 900px) { .split.split-center { align-items: center; } }

/* Photo grid (Rólunk) */
.photo-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
.photo-grid .photo { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .photo-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
  .photo-grid .photo:nth-child(1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .photo-grid .photo:nth-child(6) { grid-column: 1 / -1; aspect-ratio: 21 / 8; }
}

/* Contact */
.contact-grid { display: grid; gap: var(--s7); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.1fr; gap: var(--s8); } }
.contact-list { list-style: none; display: grid; gap: var(--s5); }
.contact-list li { display: flex; gap: var(--s4); }
.contact-list .icon { color: var(--accent); margin-top: 0.1rem; }
.contact-list strong { display: block; }
.map { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; background: var(--surface-strong); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.route-grid { display: grid; gap: var(--s4); }
@media (min-width: 800px) { .route-grid { grid-template-columns: repeat(3, 1fr); } .route-grid.route-2 { grid-template-columns: repeat(2, 1fr); max-width: 52rem; } }
.form { display: grid; gap: var(--s5); }
textarea.input { min-height: 150px; resize: vertical; }
textarea.input.input-short { min-height: 90px; }
.check { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--fs-small); }
.check input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--accent); flex: none; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Legal and long text pages */
.prose { max-width: 70ch; }
.prose h2 { font-size: var(--fs-h3); margin: var(--s7) 0 var(--s3); }
.prose h3 { font-size: 1.05rem; margin: var(--s5) 0 var(--s2); }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--s4); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: var(--s2); }
.legal-todo { margin-bottom: var(--s7); padding: var(--s5); border-radius: var(--r-control); border: 2px dashed var(--star); background: color-mix(in srgb, var(--star) 8%, var(--card)); color: var(--ink); font-size: var(--fs-small); max-width: 70ch; }
.rules-list { list-style: none; counter-reset: r; display: grid; gap: var(--s4); max-width: 70ch; }
.rules-list li { counter-increment: r; display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--s3); }
.rules-list li::before { content: counter(r); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-soft); color: var(--ink); font-weight: 600; font-size: var(--fs-small); }

/* 404 */
.notfound { min-height: 60vh; display: grid; align-content: center; }
.notfound .big { font-size: clamp(4rem, 3rem + 6vw, 8rem); font-weight: 600; color: var(--accent); line-height: 1; letter-spacing: -0.04em; }


/* Admin pages */
.admin { background: var(--surface); }
.admin-head { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.admin-head-inner { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: var(--s4); }
.admin-head .brand img { width: 36px; height: 36px; }
.admin-nav { display: flex; gap: var(--s1); overflow-x: auto; padding-bottom: var(--s2); scrollbar-width: none; }
.admin-nav a { flex: none; padding: 0.5rem 0.9rem; border-radius: var(--r-pill); color: var(--text); text-decoration: none; font-weight: 500; font-size: var(--fs-small); }
.admin-nav a:hover { background: var(--surface); color: var(--ink); }
.admin-nav a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.admin-main { padding-block: var(--s6) var(--s8); }
.admin-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: var(--s5); }
.admin-narrow { max-width: 28rem; margin: var(--s7) auto; }
.admin-grid { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .admin-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.admin-stats { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); margin-bottom: var(--s6); }
@media (min-width: 700px) { .admin-stats { grid-template-columns: repeat(4, 1fr); } }
.admin-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s4); margin-bottom: var(--s5); }
.admin-day { margin-bottom: var(--s6); }
.admin-day-title { font-size: 1.0625rem; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.admin-day-title .muted { font-weight: 500; font-size: var(--fs-small); }
.admin-booking { display: grid; gap: var(--s3); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: var(--s4) var(--s5); margin-bottom: var(--s3); }
@media (min-width: 800px) { .admin-booking { grid-template-columns: 1fr auto; align-items: center; } }
.admin-booking.is-cancelled { opacity: 0.6; }
.admin-booking.is-cancelled .admin-booking-name strong { text-decoration: line-through; }
.admin-booking-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.admin-booking-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s2); font-size: var(--fs-small); }
.admin-booking-meta a, .admin-booking-meta span { display: inline-flex; align-items: center; gap: var(--s1); }
.admin-booking-meta .icon { width: 1rem; height: 1rem; color: var(--muted); }
.admin-booking-extra { font-size: var(--fs-small); margin-top: var(--s1); }
.admin-warning { display: flex; gap: var(--s2); align-items: center; color: var(--danger); font-size: var(--fs-small); font-weight: 600; margin-top: var(--s2); }
.admin-warning .icon { width: 1rem; height: 1rem; }
.admin-cancel-box > summary { list-style: none; cursor: pointer; }
.admin-cancel-box > summary::-webkit-details-marker { display: none; }
.admin-cancel-box[open] { grid-column: 1 / -1; }
.admin-cancel-box[open] > summary { margin-bottom: var(--s3); }
.admin-cancel { display: grid; gap: var(--s3); max-width: 40rem; padding: var(--s4); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.admin-note { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--fs-small); margin-top: var(--s2); padding: var(--s2) var(--s3); border-radius: 10px; background: var(--surface); }
.admin-note .icon { width: 1rem; height: 1rem; margin-top: 0.2rem; color: var(--accent); flex: none; }
.admin-list { list-style: none; display: grid; }
.admin-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.admin-list li:last-child { border-bottom: 0; }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.admin-table th, .admin-table td { text-align: left; padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table th { color: var(--muted); font-weight: 600; }
.admin-error { color: var(--danger); }
.admin-code { margin-top: var(--s2); padding: var(--s3); background: var(--surface); border-radius: 10px; overflow-x: auto; font-size: var(--fs-xs); }
.admin-code code { white-space: nowrap; }
.badge-strong { background: var(--accent); color: var(--accent-ink); }
.badge-muted { background: var(--surface-strong); color: var(--muted); }
.badge-danger { background: color-mix(in srgb, var(--danger) 15%, var(--card)); color: var(--danger); }

/* Scroll reveal: elements rise in gently once, when they come into view.
   Needs JavaScript; people who ask their phone for less motion see no animation. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
}

/* 8. Utilities ----------------------------------------------------------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.nw { white-space: nowrap; }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.pt-0 { padding-top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}