/* =====================================================================
   My Cellarium — shared landing stylesheet
   ---------------------------------------------------------------------
   Linked by the MARKETING pages only:
     index-hu.html, index-en.html, index-de.html, index-fr.html,
     partner.html
   Nothing else links this file: the landing is five marketing pages plus the
   internal design-system page, which carries its own styling.

   Load order contract
     <link rel="stylesheet" href="/styles/landing.css">   <-- this file
     <style> … page-specific rules … </style>             <-- comes AFTER
   Everything here is written at the lowest specificity that still works,
   so a page's own inline <style> can override it. The single documented
   exception is the narrow-viewport grid collapse in §6, which carries
   !important because it has to beat a legacy inline style="" attribute
   (see the note there).

   BREAKPOINTS — the only four thresholds this file uses, mobile-first.
     sm   600px   phone -> large phone / small tablet
     md   768px   the layout switch: 1 column -> multi column
     lg  1024px   the desktop switch: mobile menu -> horizontal nav
     xl  1280px   content reaches --container-max; gutters at their widest
   These four were chosen over a 600/900/1200 set because md/lg/xl are the
   thresholds the current pages already lay out on, so tablet (768) and
   desktop (1440) rendering is preserved bit-for-bit while the stray 700 /
   800 / 899 / 900 thresholds that had crept into the pages are gone.
   Nothing below should introduce a fifth breakpoint — fluidity between
   these four is expressed with clamp(), not with more media queries.

   COLOUR — every colour in this file is var(--token) or a color-mix() of
   one. Literal colour values appear only inside the two :root blocks in
   §1, so both themes work by construction.
   ===================================================================== */

/* =====================================================================
   1. DESIGN TOKENS
   ---------------------------------------------------------------------
   1a. Colour tokens. Carried over verbatim from index-hu.html — the
   canonical source. The theme is selected by a data-theme attribute that
   an inline pre-paint script stamps on <html>.

   Contrast note (Phase 09 WCAG check): --accent-gold and
   --accent-gold-bright on a light background are decorative-only —
   illustration strokes and large display type. Body copy never uses them
   on light surfaces. Card and offer headings are gold in the dark theme
   only; the light theme repaints them --terracotta (5.6:1 on white),
   because --accent-gold-bright measures 1.7:1 there.
   ===================================================================== */

:root[data-theme="dark"] {
  --bg: #1a1410;
  --surface-2: #2a1f1a;
  --surface-3: #363434;
  --text-primary: #e8ddd0;
  --text-secondary: #9a8b7a;
  --accent-gold: #b8956a;
  --accent-gold-bright: #e9c176;
  --action: #6b2d3e;
  --action-hover: #8a3950;
  --action-text: #e8ddd0;
  --terracotta: #8b5e3c;
  /* Taupe. Same value in both themes, like --terracotta and --accent-gold:
     it is a brand hue, not a ground. Added for the homepage hero panel, whose
     photograph makes it a dark island in BOTH themes — so its panel needs a
     colour that is dark either way, and neither --bg (near-black on dark,
     cream on light) nor a --terracotta/--action mix could reach the hue the
     design called for while holding AA. Derived, not picked: it is the
     designer's #8f7658 scaled to 0.62, the point where the hero's 12px gold
     eyebrow still measures 4.5:1 against the panel at 95% alpha over the
     brightness-capped photograph. Measured in place: 4.81:1 dark, 4.67:1
     light. Re-measure the hero if this value moves. */
  --taupe: #594935;
  --border-subtle: rgba(184, 149, 106, 0.15);
  --error: #ffb4ab;
}

:root[data-theme="light"] {
  --bg: #fbf9f4;
  --surface-2: #f5f3ee;
  --surface-3: #ffffff;
  --text-primary: #2a0002;
  --text-secondary: #544341;
  --accent-gold: #b8956a;
  --accent-gold-bright: #e9c176;
  --action: #4a0e0e;
  --action-hover: #6b2d3e;
  --action-text: #fbf9f4;
  --terracotta: #8b5e3c;
  /* Taupe. Same value in both themes, like --terracotta and --accent-gold:
     it is a brand hue, not a ground. Added for the homepage hero panel, whose
     photograph makes it a dark island in BOTH themes — so its panel needs a
     colour that is dark either way, and neither --bg (near-black on dark,
     cream on light) nor a --terracotta/--action mix could reach the hue the
     design called for while holding AA. Derived, not picked: it is the
     designer's #8f7658 scaled to 0.62, the point where the hero's 12px gold
     eyebrow still measures 4.5:1 against the panel at 95% alpha over the
     brightness-capped photograph. Measured in place: 4.81:1 dark, 4.67:1
     light. Re-measure the hero if this value moves. */
  --taupe: #594935;
  --border-subtle: rgba(74, 14, 14, 0.1);
  --error: #b3261e;
}

/* ---------------------------------------------------------------------
   1b. Non-colour tokens. Theme-independent, so they live on a plain
   :root (specificity 0,1,0) and never collide with the two blocks above.
   --------------------------------------------------------------------- */

:root {
  /* Families */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "DM Mono", "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Type scale — see §3 for the derivation of each ramp. */
  --fs-h1: clamp(2rem, 1.17rem + 4.26vw, 5rem);
  --fs-h2: clamp(1.625rem, 1.17rem + 2.04vw, 3rem);
  --fs-h3: clamp(1.3125rem, 1rem + 1.39vw, 2.25rem);
  --fs-h4: clamp(1.0625rem, 1rem + 0.28vw, 1.125rem);
  --fs-body: 1.0625rem;
  --fs-sub: clamp(1rem, 0.9rem + 0.44vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-h1: 1.05;
  --lh-h2: 1.1;
  --lh-h3: 1.2;
  --lh-h4: 1.3;
  --lh-body: 1.65;
  --lh-sub: 1.6;

  --tracking-eyebrow: clamp(0.18em, 0.06em + 0.5vw, 0.3em);

  /* Layout */
  --container-max: 1280px;
  --container-narrow: 46rem;
  /* One padding system for every marketing page. Hits 25px at 360,
     48px at 768 and 64px from ~1143 up — i.e. it reproduces the old
     7vw / 48px / 64px steps as a continuous ramp with no jumps. */
  --container-pad: clamp(1.25rem, 0.32rem + 5.6vw, 4rem);
  /* Full-bleed media reaches slightly past the container and is clipped
     by the section (§4). Deliberately >= --container-pad at every width;
     never a raw 100vw, which includes the scrollbar. */
  --bleed-inline: clamp(3rem, 0.32rem + 7vw, 6.5rem);

  /* Vertical rhythm: 80px at 360 -> 128px from 768 up. */
  --section-pad-block: clamp(4.5rem, 2.36rem + 11.76vw, 8rem);

  /* Grid gaps: the two step values the pages already used. */
  --gap-2: 1.5rem;
  --gap-3: 2rem;

  /* Sticky-header height, used for anchor scroll offsets. */
  --header-offset: 5.25rem;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =====================================================================
   2. RESET & BASE
   ===================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  /* Belt: the viewport never scrolls sideways. Braces are the per-section
     overflow clip in §4 and the min-width:0 rules on every grid child. */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

ul {
  list-style: none;
}

::selection {
  background: color-mix(in srgb, var(--accent-gold) 35%, transparent);
  color: var(--text-primary);
}

:focus-visible {
  outline: 2px solid var(--accent-gold-bright);
  outline-offset: 2px;
}

/* Anchor targets must clear the sticky header. */
section[id],
main[id],
[id].form-card,
[id].form-wrap {
  scroll-margin-top: var(--header-offset);
}

/* Theme cross-fade. Paint-only properties, so it never causes layout. */
:root,
:root * {
  transition:
    background-color 300ms var(--ease),
    color 300ms var(--ease),
    border-color 300ms var(--ease),
    fill 300ms var(--ease),
    stroke 300ms var(--ease);
}

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

  html {
    scroll-behavior: auto;
  }
}

/* =====================================================================
   3. TYPE SCALE
   ---------------------------------------------------------------------
   Every ramp is a straight line through two anchor points — the 360px
   phone and the 1440px desktop — expressed as clamp(min, rem + vw, max).
   The desktop end reproduces the previous design exactly; the phone end
   is where the fix lives. The old scale bottomed out on its clamp minimum
   below ~830px, which is why an h1 rendered at 44px on a 360px screen
   (issue #672) and then did not move at all between 320 and 830.

     selector      360px      768px      1440px     old desktop
     h1            34px       51px       80px       80px   (unchanged)
     h2            26px       34px       48px       48px   (unchanged)
     h3            21px       26px       36px       36px   (unchanged)
     h4            17px       18px       18px       18px   (unchanged)
     body          17px       17px       17px       17px   (unchanged)
     .sub          16px       17px       17px       17px   (unchanged)
     .eyebrow      12px       12px       12px       12px   (tracking only)
     .small-note   14px       14px       14px       14px   (unchanged)

   Playfair (display) runs tighter line-heights than Inter (body): 1.05
   at h1 up to 1.3 at h4, against 1.65 for running text.
   .eyebrow keeps its size but loosens its tracking with the viewport —
   0.3em of letter-spacing is what makes a 12px label wrap on a phone, so
   it tightens to ~0.21em at 360 and is back to the design's 0.3em from
   576px up.
   ===================================================================== */

.serif {
  font-family: var(--font-display);
}

.mono {
  font-family: var(--font-mono);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  /* Long compound words (de) and long French headings must break rather
     than push the layout wide. */
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.015em;
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: -0.01em;
  font-weight: 600;
}

h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}

p {
  color: var(--text-primary);
}

p + p {
  margin-top: 1rem;
}

.sub {
  color: var(--text-secondary);
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-secondary);
  display: inline-block;
}

.eyebrow-gold {
  color: var(--accent-gold);
}

.small-note {
  margin-top: var(--gap-2);
  font-size: var(--fs-small);
  line-height: var(--lh-sub);
  font-style: normal;
  color: var(--text-secondary);
}

.urgent {
  color: var(--accent-gold);
  font-style: italic;
}

.stanza {
  margin-top: 1.75rem;
}

/* Monospaced ordinal used by both the index step blocks and the
   /partner join steps. */
.step-num {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--accent-gold);
  letter-spacing: 0.1em;
}

/* =====================================================================
   4. LAYOUT PRIMITIVES
   ===================================================================== */

/* --- 4a. Container --------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Prose width — long-form copy, form cards, centred lead paragraphs. */
.container--narrow {
  max-width: calc(var(--container-narrow) + 2 * var(--container-pad));
}

/* --- 4b. Section rhythm ---------------------------------------------- */

section {
  padding-block: var(--section-pad-block);
  /* The overflow guarantee. A section is always exactly the width of the
     page, so clipping here can never hide wanted content, but it makes it
     impossible for a bleeding child (§4c), a wide table or an oversized
     decoration to push the document wider than the viewport.
     overflow-x: clip (not hidden) does not create a scroll container, so
     position: sticky elsewhere on the page keeps working. */
  overflow-x: clip;
}

.section-alt {
  background: var(--surface-2);
}

/* --- 4c. Full-bleed media -------------------------------------------- */

.section-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-2);
}

/* A <picture> is inline by default, which would strand .section-media's
   aspect-ratio and its overflow: hidden — the box would collapse to the
   intrinsic image and the 4/5 crop would never happen. The .step-photo slots
   have carried this as a page-local rule since their WebP <source>s went in;
   it belongs here now that all four homepages use a <picture> in the
   hedonism slot too. */
picture.section-media {
  display: block;
}

.section-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

:root[data-theme="dark"] .section-media img {
  filter: saturate(0.9) brightness(0.95);
}

/* Was .is-muted, a grayscale(0.5)/(0.55) desaturation, and it had exactly one
   user: the hedonism slot. Its photograph is a backlit sunset — measured p50
   luminance 0.083, p99 0.928, an 11.2x dynamic range with 2.4% of pixels
   genuinely blown (the sun disc and its glint through the wine). The peak is
   what needs holding; the colour is the reason the frame was chosen at all.
   So this is a tone-hold, not a desaturation: saturation stays near 1.0 and
   brightness takes the sun down. Dark drops a further 0.10 — the same delta
   .hero-photo (0.7 -> 0.6) and .problem-band (0.98 -> 0.88) already use. */
.section-media.is-toned img {
  filter: saturate(0.95) brightness(0.92);
}

:root[data-theme="dark"] .section-media.is-toned img {
  filter: saturate(0.9) brightness(0.82);
}

@media (min-width: 768px) {
  .section-media {
    max-height: 560px;
  }

  /* The old rule was margin-right: -7vw. vw includes the scrollbar, so at
     768px the image reached 5.8px past the body box and the document
     scrolled sideways (issue #672, audit item 4). --bleed-inline is a
     scrollbar-free ramp, and the section's overflow-x: clip above turns
     any remainder into a clean flush edge instead of overflow. */
  .section-media.bleed-right {
    margin-right: calc(-1 * var(--bleed-inline));
  }

  .section-media.bleed-left {
    margin-left: calc(-1 * var(--bleed-inline));
  }

  .section-media.tall {
    aspect-ratio: 3 / 4;
    max-height: 600px;
  }
}

/* --- 4d. Grid primitives --------------------------------------------- */
/* Every grid below is single column by default and only ever opts into
   more tracks at a breakpoint, so the collapse is a property of the
   primitive rather than something each page has to remember. Track sizes
   use minmax(0, 1fr) and children get min-width: 0 — without that, a
   grid child's min-content width (a long word, a wide button) is the
   track's floor and the row overflows the viewport. */

.card-grid,
.access-row,
.compare,
.duties,
.stat-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.card-grid > *,
.access-row > *,
.compare > *,
.duties > *,
.stat-band > *,
.offer-list > *,
.steps > *,
.checklist > * {
  min-width: 0;
}

/* Auto-fitting card grid. min(100%, 16.25rem) is what keeps it at one
   column below 260px instead of overflowing. */
.card-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.25rem), 1fr));
  gap: var(--gap-2);
  margin-top: 2.5rem;
}

.card {
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  padding: 1.75rem 1.5rem;
}

.card h3,
.card h4 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  margin-bottom: 0.625rem;
  color: var(--accent-gold-bright);
}

.card p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: var(--lh-sub);
}

/* Three-up tile row. .access-row--2 and --4 are the other counts; use a
   modifier rather than an inline grid-template-columns override. */
.access-row {
  gap: var(--gap-2);
  margin-top: var(--gap-3);
}

@media (min-width: 768px) {
  .access-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-3);
  }

  .access-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Four-up goes two-up first: at 768 a quarter of the container is 170px,
     and the labels here are single Hungarian compounds ("partnerpincészetben")
     that cannot break across a box that narrow. */
  .access-row--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .access-row--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Even at lg a tile is ~280px, which is under the widest label. Hyphenate
     rather than let the display face break mid-word ("partnerpincészetb|en"). */
  .access-row--4 .access-tile h3 {
    hyphens: auto;
  }
}

.access-tile {
  padding: var(--gap-3);
  background: var(--surface-3);
}

.access-tile .icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--accent-gold);
  margin-bottom: 1rem;
}

.access-tile h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* "This / not this" contrast pair. */
.compare {
  gap: var(--gap-2);
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  .compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-3);
  }
}

.compare-col {
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  padding: 1.75rem 1.5rem;
}

.compare-col h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  margin-bottom: 1.125rem;
}

.compare-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.compare-col li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 1rem;
  line-height: 1.55;
}

.compare-col li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
}

.compare-yes {
  border-color: var(--accent-gold);
}

.compare-yes h3 {
  color: var(--accent-gold-bright);
}

.compare-yes li::before {
  content: "✓";
  color: var(--accent-gold-bright);
}

.compare-no {
  background: var(--surface-2);
  opacity: 0.75;
}

.compare-no h3,
.compare-no li {
  color: var(--text-secondary);
}

.compare-no li::before {
  content: "×";
  color: var(--text-secondary);
}

/* Who-does-what pair. */
.duties {
  gap: var(--gap-2);
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  .duties {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-3);
  }
}

.duties-col {
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  padding: 1.75rem 1.5rem;
}

.duties-col h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  margin-bottom: 0.75rem;
  color: var(--accent-gold);
}

.duties-col ul {
  display: flex;
  flex-direction: column;
}

.duties-col li {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.5rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 1rem;
  line-height: 1.55;
}

.duties-col li:first-child {
  border-top: none;
}

.duties-col li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0.75rem;
  color: var(--accent-gold);
}

/* Number band. */
.stat-band {
  gap: 1.75rem;
  margin-top: 2.5rem;
  padding-block: var(--gap-3);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

@media (min-width: 768px) {
  .stat-band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-3);
  }

  .stat + .stat {
    border-left: 1px solid var(--border-subtle);
  }
}

.stat {
  text-align: center;
}

.stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  /* Same shape as --fs-h1 but topping out a touch lower; a bare number
     can afford to run larger relative to the viewport than a headline. */
  font-size: clamp(2.25rem, 1.4rem + 4.4vw, 4.5rem);
  line-height: var(--lh-h1);
  letter-spacing: -0.02em;
  color: var(--accent-gold);
}

.stat-label {
  display: block;
  margin-top: 0.625rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: clamp(0.14em, 0.05em + 0.4vw, 0.24em);
  color: var(--text-secondary);
}

/* --- 4e. Stacked list primitives ------------------------------------- */
/* These are flex columns at every width, so they are single column by
   construction. */

.offer-list {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  margin-top: 2.5rem;
}

.offer-item {
  background: var(--surface-3);
  border-left: 3px solid var(--accent-gold);
  padding: 1.25rem 1.375rem;
}

.offer-item h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  margin-bottom: 0.375rem;
  color: var(--accent-gold-bright);
}

/* Gold reads as brand emphasis on the dark ground but collapses to 1.7:1
   on the light theme's white cards, inverting the hierarchy against the
   body copy underneath. --terracotta is the light theme's warm accent and
   measures 5.6:1 on #fff. */
:root[data-theme="light"] .card h3,
:root[data-theme="light"] .card h4,
:root[data-theme="light"] .offer-item h3 {
  color: var(--terracotta);
}

/* The same substitution, for the rest of the gold TEXT. §1 says gold on a
   light ground is decorative only and body copy never uses it — these
   selectors were the exceptions that had slipped through, all measured on
   the light theme before the swap:
     .eyebrow-gold ..... 2.65:1 on --bg, 2.51:1 on --surface-2 (12px label)
     .urgent ........... 2.65:1 (italic body copy)
     .step-num ......... 2.78:1 on --surface-3
     .duties-col h3 .... 2.51:1 (partner.html)
     .stat-num ......... 2.65:1 — large type, so the bar is 3:1, still under
   --terracotta takes every one of them to 5.0:1 or better. Icons, rules,
   borders and the ::before dashes keep the gold: those are decoration, and
   §1 governs text. */
:root[data-theme="light"] .eyebrow-gold,
:root[data-theme="light"] .urgent,
:root[data-theme="light"] .step-num,
:root[data-theme="light"] .duties-col h3,
:root[data-theme="light"] .stat-num {
  color: var(--terracotta);
}

/* Text the four homepages paint gold on a light ground. They each carry
   their own copy of these components in a page-local <style>, so the fix
   belongs here — one rule reaches all four — and the theme prefix gives it
   the specificity to win over the page block regardless of source order.
   Measured on the light theme before the swap: .triplet's closing line and
   .free-anchor .lead 2.65:1, .advantage-item .num 2.51:1, .closing-line's
   second line 2.65:1, .access-coda 2.65:1. --terracotta clears 5:1 on both
   --bg and --surface-2. */
:root[data-theme="light"] .triplet p:last-child,
:root[data-theme="light"] .advantage-item .num,
:root[data-theme="light"] .free-anchor .lead,
:root[data-theme="light"] .closing-line p + p,
:root[data-theme="light"] .access-coda {
  color: var(--terracotta);
}

/* The photo band's closing lines. The colour has to land on the <p>: the
   bare `p { color: var(--text-primary) }` in §3 has 0,0,1 specificity and
   so beats inheritance from the .below wrapper the pages style. In the dark
   theme --text-primary is cream and the bug hides; in the light theme it is
   #2a0002 on the band's #4a0e0e ground — 1.24:1, invisible. */
.concept-highlight .below p {
  color: var(--action-text);
}

/* Was an inline style on that same paragraph in all four homepages, which
   no theme rule can override without !important. */
.access-coda {
  margin-top: 32px;
  font-style: italic;
  color: var(--accent-gold);
}

/* Dark theme, the mirror problem. .access-tile is the one card that sits on
   --surface-3, and in the dark theme that is #363434 — light enough to drag
   the muted pair under AA on it: --text-secondary measures 3.74:1 and
   --accent-gold 4.44:1. Same remedy the hero already uses for the gold (the
   -bright ramp), plus the primary ink for the tile copy. */
:root[data-theme="dark"] .access-tile p {
  color: var(--text-primary);
}
:root[data-theme="dark"] .access-tile .step-num {
  color: var(--accent-gold-bright);
}

.offer-item p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: var(--lh-sub);
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 1.125rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}

.step:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* Inside .steps the ordinal becomes a badge rather than a mono label. */
.steps .step-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid var(--accent-gold);
  background: color-mix(in srgb, var(--accent-gold) 14%, transparent);
  color: var(--accent-gold-bright);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
}

/* The badge fill is a 14% gold tint over --bg, which on the light theme
   leaves the terracotta numeral at 4.4966:1 — under AA by six ten-thousandths
   of a luminance point. Thinning the tint is invisible next to the 1px gold
   ring the badge already carries, and clears the bar. */
:root[data-theme="light"] .steps .step-num {
  background: color-mix(in srgb, var(--accent-gold) 9%, transparent);
}

.step h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  margin-bottom: 0.25rem;
}

.step p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: var(--lh-sub);
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: var(--gap-3);
}

.checklist li {
  position: relative;
  padding-left: 2rem;
  font-size: var(--fs-body);
  line-height: var(--lh-sub);
  color: var(--text-primary);
}

.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: var(--accent-gold-bright);
}

/* =====================================================================
   5. COMPONENTS
   ===================================================================== */

/* --- 5a. Skip link ---------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--action);
  color: var(--action-text);
  padding: 0.75rem 1.25rem;
  z-index: 100;
  font-weight: 600;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* --- 5b. Header ------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  /* The gap shrinks with the viewport; a fixed 24px was ~7% of a 360px
     screen and part of why the header row did not fit. */
  gap: clamp(0.5rem, 3vw, 1.5rem);
  /* 16px at 360 -> 20px from 768 up: the previous two steps, ramped. */
  padding-block: clamp(1rem, 0.78rem + 0.98vw, 1.25rem);
  padding-inline: var(--container-pad);
  max-width: var(--container-max);
  margin-inline: auto;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  /* The logo is the flex item that yields. .header-tools is fixed-size
     and must always fit; if anything has to be trimmed at 320px it is the
     wordmark, which ellipsises rather than pushing the row wide. */
  flex: 0 1 auto;
  min-width: 1.75rem;
  overflow: hidden;
  white-space: nowrap;
}

.logo svg {
  color: var(--accent-gold);
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}

.logo span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-nav {
  display: none;
  gap: var(--gap-3);
  align-items: center;
  min-width: 0;
}

.main-nav a {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.main-nav a:hover {
  color: var(--text-primary);
}

@media (min-width: 1024px) {
  .main-nav {
    display: flex;
  }
}

/* The cluster that overflowed at 360-414px (issue #672, audit item 1):
   language switcher + theme toggle + hamburger. It is never allowed to
   wrap and never allowed to grow — it sizes to its content, the gap
   tightens with the viewport, and min-width: 0 lets its own children
   (the switcher, owned by its own rules) shrink inside it. */
.header-tools {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  min-width: 0;
  gap: clamp(0.375rem, 2vw, 1rem);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  flex-shrink: 0;
}

.theme-toggle:hover {
  filter: brightness(1.08);
}

.theme-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

:root[data-theme="light"] .theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}

.menu-btn {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .menu-btn {
    display: none;
  }
}

.mobile-nav {
  display: none;
  flex-direction: column;
  padding: 1rem var(--container-pad) var(--gap-3);
  gap: 1.125rem;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg);
}

.mobile-nav.open {
  display: flex;
}

.mobile-nav a {
  font-size: 1rem;
  color: var(--text-primary);
  /* 44px tap target. */
  padding-block: 0.625rem;
}

/* --- 5c. Buttons ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  max-width: 100%;
  padding: 1rem var(--gap-3);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
}

.btn:active {
  transform: scale(0.98);
  transition: transform 80ms;
}

.btn-primary {
  background: var(--action);
  color: var(--action-text);
}

.btn-primary:hover {
  background: var(--action-hover);
  filter: brightness(1.05);
}

/* .btn-ghost is the canonical name for the outlined variant;
   .btn-secondary is the legacy name the index pages still use. Identical
   by design — keep both until the markup is migrated. */
.btn-ghost,
.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

.btn-ghost:hover,
.btn-secondary:hover {
  background: var(--surface-2);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn-row > * {
  min-width: 0;
}

/* --- 5d. Forms -------------------------------------------------------- */

.form-wrap {
  max-width: 35rem;
  margin-inline: auto;
}

.form-wrap h2 {
  margin-bottom: 1rem;
}

.form-wrap .sub {
  margin-bottom: 2.5rem;
}

.form-wrap button[type="submit"] {
  width: 100%;
}

.form-field {
  position: relative;
  margin-bottom: var(--gap-3);
}

.form-field input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: var(--font-body);
  /* >= 1rem so iOS does not zoom the viewport on focus. */
  font-size: var(--fs-body);
  padding: 1.75rem 0 1rem;
  outline: none;
}

.form-field label {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  pointer-events: none;
}

.form-field input:focus {
  border-bottom: 1.5px solid var(--accent-gold-bright);
}

.form-field input:focus + label {
  color: var(--text-primary);
}

.form-consent {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: var(--gap-2);
}

.form-consent a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-consent a:hover {
  color: var(--text-primary);
}

.form-error {
  color: var(--error);
  font-size: var(--fs-small);
  margin: 0 0 1rem;
}

.reserve-success h2,
.reserve-success h3 {
  font-size: clamp(1.5rem, 1.05rem + 1.85vw, 2rem);
  line-height: 1.15;
}

.reserve-success .sub:last-child {
  margin-bottom: 0;
}

/* --- 5e. Footer ------------------------------------------------------- */

.site-footer {
  background: var(--surface-2);
  padding: 4rem 0 3rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-3);
  align-items: start;
}

@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 4rem;
  }
}

.footer-brand {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.footer-brand .logo {
  margin-bottom: 1rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem var(--gap-3);
  font-size: var(--fs-small);
}

.footer-links a {
  color: var(--text-secondary);
}

.footer-links a:hover {
  color: var(--text-primary);
}

.footer-bottom {
  margin-top: 3rem;
  padding-top: var(--gap-2);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

/* --- 5f. Scroll reveal ------------------------------------------------ */

.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 800ms var(--ease),
    transform 800ms var(--ease);
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
  }
}

/* =====================================================================
   6. RESPONSIVE — cross-cutting overrides
   ---------------------------------------------------------------------
   Everything above is mobile-first and already carries its own min-width
   query at 768 or 1024. What is left here is the narrow end: the rules
   that only make sense as "below sm" and cannot be expressed as an
   opt-in.
   ===================================================================== */

@media (max-width: 599px) {
  /* Hard collapse. Belt-and-braces on top of the single-column defaults
     in §4d: these five primitives must be one column on a phone no
     matter what, and !important is the only thing that beats a legacy
     style="grid-template-columns: repeat(2, 1fr)" attribute in the
     markup — which is exactly what kept .access-row two-up on index-hu
     at 360px while en/de/fr collapsed (issue #672, audit item 2).
     Once the inline attributes are gone this rule is a no-op that
     restates the default; it is cheap insurance against regression. */
  .access-row,
  .card-grid,
  .compare,
  .duties,
  .stat-band {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Compact the header wordmark so the logo, the language switcher, the
     theme toggle and the hamburger all fit on one line at 320px. */
  .logo {
    font-size: 1.0625rem;
  }

  .logo svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* Full-width primary actions read better than half-width ones and
     remove the ragged right edge the user reported as misalignment. */
  .btn-row > .btn {
    width: 100%;
  }
}

/* =====================================================================
   7. PRINT
   ===================================================================== */

@media print {
  .site-header,
  .mobile-nav,
  .skip-link,
  .theme-toggle,
  .menu-btn,
  .section-media,
  .fade-in {
    display: none !important;
  }

  /* No colour overrides here on purpose: every colour on the page comes
     from a theme token, and browsers drop backgrounds when printing
     unless the user opts in. Restating light values would mean literal
     colours outside the two :root blocks. */
  body {
    font-size: 11pt;
  }

  section {
    padding-block: 1.5rem;
    overflow: visible;
  }

  h1,
  h2,
  h3,
  h4 {
    break-after: avoid;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
}
