/* ═══════════════════════════════════════════════════════════════════════════
   BELLOFATTO — design system

   Palette: "Prosecco Hills at Dusk". Every competitor in this category lands on
   black + white + blush with Playfair or Baskerville. This one takes its colours
   from the corridor itself — lagoon green, limestone, Prosecco brass, Valpolicella
   terracotta — and its display face from Bodoni, cut in Parma in 1798.

   Motif: the arch. Repeated on hero, venue cards, quiz results and portraits.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Colour */
  --ink: #12312c;          /* Laguna — deep lagoon green */
  --ink-deep: #0b1f1b;
  --ink-soft: #1d443d;
  --paper: #fcfaf6;
  --stone: #f1ebe1;        /* Pietra — warm limestone */
  --stone-2: #e4dbcc;
  --line: #ddd4c3;
  --text: #1d2b27;
  /* Secondary copy — leads, card bodies, tier descriptions, step detail.
     This is the text that sells, so it is the last place to be timid. The
     old #5c6b65 cleared AA on paper at 5.4:1 and failed outright on stone-2
     at 4.1:1. Same hue, one step deeper: 6.7:1 on paper, 5.1:1 on stone-2. */
  --muted: #4e5d57;
  /* The same role on a dark ground. .lead and .card p already had dark
     overrides further down; .cta-note did not, so the reassurance line under
     every primary CTA — "9 questions, 90 seconds, no card" — was rendering
     --muted on --ink-deep at 3.06:1 in all three languages. Same value as the
     existing dark overrides, so nothing in a dark section goes out of step. */
  --muted-on-dark: rgba(255, 255, 255, 0.88);
  --gold: #b98b3e;         /* Prosecco — on dark only */
  /* Prosecco on light grounds. Carries eyebrows, links and step numbers — all
     small, several uppercase and letter-spaced, which are the hardest shapes
     to read. Deepened from #7e5c20: 7.5:1 on paper, 6.6:1 on stone. */
  --gold-ink: #6b4d1a;
  --gold-soft: #e7d3a8;
  --cotto: #a64b34;        /* Cotto — reserved for primary CTAs */
  --cotto-dark: #8a3d2a;
  --amarone: #5b1f2e;
  --white: #ffffff;

  /* Type */
  --display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, "Times New Roman", serif;
  --sans: "Libre Franklin", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Scale — fluid, clamped */
  --fs-hero: clamp(2.6rem, 1.2rem + 5.6vw, 6rem);
  --fs-h1: clamp(2.2rem, 1.3rem + 3.6vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.15rem + 2.4vw, 2.9rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  --fs-body: clamp(1.0625rem, 1rem + 0.3vw, 1.15rem);
  --fs-lead: clamp(1.08rem, 0.98rem + 0.5vw, 1.32rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.72rem;

  /* Space */
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --section: clamp(4rem, 9vw, 8.5rem);
  --wrap: 1220px;
  --wrap-narrow: 760px;

  --radius: 4px;
  /* The motif: a segmental arch, shallow enough to read as architecture rather
     than as a dome. The y-radius stays small so it behaves on wide images too. */
  --arch: 50% 50% var(--radius) var(--radius) / 13% 13% 0 0;
  --shadow: 0 1px 2px rgba(18, 49, 44, 0.05), 0 12px 32px -12px rgba(18, 49, 44, 0.16);
  --shadow-lg: 0 2px 4px rgba(18, 49, 44, 0.06), 0 32px 64px -24px rgba(18, 49, 44, 0.28);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  /* 450, not 400. Libre Franklin is a text face and holds up better at 400 than
     Manrope did, but 450 still gives paragraphs more presence at 17px. The
     variable font spans 300–700, so this costs nothing. */
  font-weight: 450;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--cotto);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--gold-soft); color: var(--ink-deep); }

/* ── Typography ────────────────────────────────────────────────────────── */
/* Bodoni is a didone: thick stems, hairline thins. That contrast is the whole
   reason it looks the way it does, and it is also why a long headline set in
   it shimmers and reads slowly.

   Two things were making it worse than it had to be.

   First, Bodoni Moda carries an optical-size axis from 6 to 96, and browsers
   track it to the font size automatically. A 64px headline was therefore
   being drawn with the 64pt DISPLAY cut, whose hairlines are at their
   thinnest — around a single pixel, which shimmers on any screen and
   disappears on some. Pinning opsz to 20 asks for the subhead cut instead:
   same face, same character, materially sturdier thin strokes. This is the
   one number to tune if it still feels off — lower is sturdier, higher is
   more glamorous and less legible.

   Second, -0.015em of negative tracking on a didone at display size closes up
   the counters and crowds the thick stems together. Didones want air.

   Weight 500 rather than 400 thickens everything, hairlines included. The
   variable font covers 400–600, so it costs nothing. */
h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 500;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 20;
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }

p { text-wrap: pretty; }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 1.1rem;
  display: block;
}
.on-dark .eyebrow, .dark .eyebrow, .hero .eyebrow { color: var(--gold); }

.lead { font-size: var(--fs-lead); color: var(--muted); line-height: 1.58; }

/* Secondary copy on a dark ground that nothing else covers. .lead and .card p
   already have their own dark rules below; .cta-note had none and inherited
   the light-ground --muted at 3.06:1 on 69 CTA bands across the site. */
.dark, .on-dark, .hero { font-weight: 500; }
.dark .muted, .on-dark .muted, .hero .muted,
.dark .tier-desc, .dark .step-detail,
.dark .cta-note, .on-dark .cta-note, .hero .cta-note { color: var(--muted-on-dark); }
.dark .lead, .on-dark .lead { color: rgba(255, 255, 255, 0.88); font-weight: 500; }

.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }

/* ── Layout ────────────────────────────────────────────────────────────── */
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap-narrow { width: min(var(--wrap-narrow), 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding-block: var(--section); }
.section-sm { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

.dark { background: var(--ink); color: rgba(255, 255, 255, 0.9); }
.dark h1, .dark h2, .dark h3 { color: var(--white); }
.stone { background: var(--stone); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.section-head { max-width: 44ch; margin-bottom: clamp(2.2rem, 4vw, 3.5rem); }
.section-head.center { max-width: 52ch; margin-inline: auto; text-align: center; }
.section-head p { margin-top: 1.1rem; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--white); padding: 0.8rem 1.2rem;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--cotto);
  --btn-fg: var(--white);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 1rem 1.9rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: 0.94rem; font-weight: 600; letter-spacing: 0.015em;
  text-decoration: none; border: 1px solid transparent; border-radius: var(--radius);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  will-change: transform;
}
.btn:hover { --btn-bg: var(--cotto-dark); transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(166, 75, 52, 0.6); }
.btn:active { transform: translateY(0); }

.btn-lg { padding: 1.18rem 2.4rem; font-size: 1rem; }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); }
.btn-ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--white); border-color: var(--ink); box-shadow: none; }
/* .hero is a dark context too — it just gets its darkness from a photograph
   and a scrim rather than from a background colour. */
.dark .btn-ghost, .on-dark .btn-ghost, .hero .btn-ghost { --btn-fg: var(--white); border-color: rgba(255, 255, 255, 0.32); }
.dark .btn-ghost:hover, .on-dark .btn-ghost:hover, .hero .btn-ghost:hover { --btn-bg: var(--white); --btn-fg: var(--ink); border-color: var(--white); }

.btn-arrow::after { content: "→"; font-size: 1.05em; transition: transform 0.25s var(--ease); }
.btn:hover .btn-arrow::after, .btn-arrow:hover::after { transform: translateX(4px); }

.cta-group { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.cta-note { font-size: var(--fs-small); color: var(--muted); margin-top: 1rem; }
.dark .cta-note, .on-dark .cta-note, .hero .cta-note { color: rgba(255, 255, 255, 0.68); }

.link-u {
  color: var(--gold-ink); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.link-u:hover { color: var(--cotto); }
.dark .link-u, .on-dark .link-u, .hero .link-u { color: var(--gold); }

/* ── Header ────────────────────────────────────────────────────────────── */
/* The blur lives on a pseudo-element, not on .header itself. A backdrop-filter
   makes its element a containing block for position:fixed descendants, which
   would trap the fixed mobile menu inside the 74px-tall header. */
.header {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
}
.header.scrolled { border-bottom-color: var(--line); }
.header-inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 74px;
}
.logo {
  font-family: var(--display); font-size: 1.45rem; font-weight: 500;
  letter-spacing: 0.02em; text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: baseline; gap: 0.45rem; white-space: nowrap;
}
.logo span { font-family: var(--sans); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-ink); }

.nav { display: flex; align-items: center; gap: 1.75rem; margin-left: auto; }
/* :not(.btn) matters — without it these rules outrank .btn's own colour and
   the header's primary call to action renders dark ink on terracotta. */
.nav a:not(.btn) {
  font-size: 0.9rem; font-weight: 500; text-decoration: none; color: var(--text);
  position: relative; padding-block: 0.4rem; white-space: nowrap;
}
.nav a { text-decoration: none; }
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold-ink); transform: scaleX(0); transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav a:not(.btn):hover::after, .nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.nav + .header-actions { margin-left: 0; }

/* Language switcher */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em;
  padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color 0.2s, background 0.2s;
}
.lang-btn:hover { border-color: var(--ink); }
.lang-btn::after { content: "▾"; font-size: 0.7em; opacity: 0.6; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 0.45rem); min-width: 148px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 0.3rem; display: none; z-index: 70;
}
.lang[data-open="true"] .lang-menu { display: block; }
.lang-menu a {
  display: block; padding: 0.55rem 0.75rem; font-size: 0.88rem;
  text-decoration: none; border-radius: 2px;
}
.lang-menu a:hover { background: var(--stone); }
.lang-menu a[aria-current="true"] { color: var(--gold-ink); font-weight: 600; }

.burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.burger span { display: block; width: 22px; height: 1.5px; background: var(--ink); position: relative; transition: background 0.2s; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 1.5px; background: var(--ink);
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }
body.menu-open .burger span { background: transparent; }
body.menu-open .burger span::before { top: 0; transform: rotate(45deg); }
body.menu-open .burger span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .burger { display: flex; }
  .nav {
    position: fixed; inset: 74px 0 0; background: var(--paper);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 1.5rem var(--gutter) 3rem; overflow-y: auto;
    transform: translateX(100%); transition: transform 0.38s var(--ease);
    margin-left: 0;
  }
  body.menu-open .nav { transform: translateX(0); }
  body.menu-open { overflow: hidden; }
  .nav a:not(.btn) { font-family: var(--display); font-size: 1.6rem; padding-block: 0.85rem; border-bottom: 1px solid var(--line); }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: 1.5rem; font-family: var(--sans); font-size: 0.95rem; border-bottom: 0; }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { position: relative; background: var(--ink-deep); color: var(--white); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
/* Tuned so the photograph still reads on a short hero while the copy column
   (the left ~42%) never drops below 5:1 against white, whatever the image. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(11, 31, 27, 0.9) 0%, rgba(11, 31, 27, 0.68) 42%, rgba(11, 31, 27, 0.2) 100%),
    linear-gradient(to top, rgba(11, 31, 27, 0.78) 0%, transparent 50%);
}
/* On a narrow screen the left-to-right scrim lands on empty background and the
   subject sits off-canvas, so switch to a bottom-up wash and nudge the crop. */
@media (max-width: 820px) {
  .hero-media img { object-position: 62% center; }
  .hero-media::after {
    background: linear-gradient(to top, rgba(11, 31, 27, 0.95) 28%, rgba(11, 31, 27, 0.72) 64%, rgba(11, 31, 27, 0.45) 100%);
  }
}

.hero-inner {
  position: relative; z-index: 2;
  padding-block: clamp(5rem, 14vh, 9rem) clamp(3.5rem, 8vh, 6rem);
  max-width: 46rem;
}
.hero h1 {
  font-size: var(--fs-hero); color: var(--white);
  letter-spacing: -0.025em; line-height: 1.02; margin-bottom: 1.6rem;
}
.hero .lead { max-width: 40ch; color: rgba(255, 255, 255, 0.9); font-weight: 500; }
.hero .cta-group { margin-top: 2.4rem; }

.trust-row {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;
  margin-top: 2.6rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.88rem; color: rgba(255, 255, 255, 0.86);
}
.trust-row li { display: flex; align-items: center; gap: 0.5rem; }
.trust-row li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: none; }

/* Stats strip */
.stats { background: var(--ink); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat { padding: clamp(1.6rem, 3vw, 2.4rem) 1.2rem; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.1); }
.stat:last-child { border-right: 0; }
.stat b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(2.1rem, 4vw, 3.1rem); line-height: 1; color: var(--gold); margin-bottom: 0.5rem;
}
.stat span { font-size: 0.86rem; line-height: 1.5; color: rgba(255, 255, 255, 0.88); font-weight: 500; display: block; max-width: 20ch; margin-inline: auto; }
@media (max-width: 640px) {
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
}
.card h3 { margin-bottom: 0.7rem; }
.card p { color: var(--muted); font-size: 1.02rem; line-height: 1.58; }
.dark .card { background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.12); }
.dark .card p { color: rgba(255, 255, 255, 0.88); font-weight: 500; }

a.card:hover, .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--stone-2); }

.num {
  font-family: var(--display); font-size: 2.5rem; line-height: 1;
  color: var(--gold-ink); display: block; margin-bottom: 1rem;
}
.dark .num { color: var(--gold); }

/* Image card with the arch motif */
.imgcard { position: relative; overflow: hidden; border-radius: var(--radius); text-decoration: none; display: block; }
.imgcard img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.75s var(--ease); }
.imgcard:hover img { transform: scale(1.05); }
.imgcard::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11, 31, 27, 0.9) 4%, rgba(11, 31, 27, 0.28) 44%, transparent 72%);
}
.imgcard-body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(1.2rem, 2.4vw, 1.9rem); color: var(--white); }
.imgcard-body h3 { color: var(--white); margin-bottom: 0.35rem; }
.imgcard-body p { color: rgba(255, 255, 255, 0.92); font-size: 0.96rem; line-height: 1.55; font-weight: 500; }
.imgcard-body .tag {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-soft); display: block; margin-bottom: 0.55rem;
}

.arch { border-radius: var(--arch); overflow: hidden; }
.arch img { width: 100%; height: 100%; object-fit: cover; }

/* ── Split (image + text) ──────────────────────────────────────────────── */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.wide-media { grid-template-columns: 1.15fr 1fr; }
  .split.reverse > :first-child { order: 2; }
}
.split-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split-media.tall img { aspect-ratio: 3 / 4; }
.split-media.wide img { aspect-ratio: 4 / 3; }

/* ── Steps ─────────────────────────────────────────────────────────────── */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid; gap: clamp(0.8rem, 2vw, 2.5rem); align-items: start;
  padding-block: clamp(1.8rem, 3.5vw, 2.8rem);
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 780px) { .step { grid-template-columns: 5.5rem 1fr 1fr; } }
.step-n { font-family: var(--display); font-size: 1.9rem; color: var(--gold-ink); line-height: 1; }
.dark .step { border-color: rgba(255, 255, 255, 0.14); }
.dark .step-n { color: var(--gold); }
.step h3 { margin-bottom: 0.6rem; }
.step-detail { font-size: 0.98rem; line-height: 1.55; color: var(--muted); padding-top: 0.2rem; }
.dark .step-detail { color: rgba(255, 255, 255, 0.66); }

/* ── Pricing ───────────────────────────────────────────────────────────── */
.tiers { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); } }

.tier {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.6rem, 2.6vw, 2.2rem); display: flex; flex-direction: column; height: 100%;
  position: relative;
}
.tier.featured {
  border-color: var(--ink); border-width: 1.5px;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 900px) { .tier.featured { transform: translateY(-14px); padding-block: 2.6rem; } }
.tier-flag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--ink); color: var(--white); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; padding: 0.42rem 0.95rem; border-radius: 999px;
  white-space: nowrap;
}
.tier h3 { font-size: 1.7rem; margin-bottom: 0.5rem; }
.tier-desc { color: var(--muted); font-size: 1rem; line-height: 1.55; min-height: 3.4em; }
.tier-price {
  font-family: var(--display); font-size: clamp(2.6rem, 4.5vw, 3.4rem); line-height: 1;
  margin: 1.4rem 0 0.2rem; color: var(--ink); letter-spacing: -0.02em;
}
.tier-price .alt { display: block; font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0; color: var(--muted); margin-top: 0.55rem; font-weight: 500; }
.tier-per { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.tier ul { margin: 1.6rem 0 2rem; display: grid; gap: 0.7rem; }
.tier li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.65rem; font-size: 0.97rem; line-height: 1.55; align-items: start; }
.tier li::before { content: "✓"; color: var(--gold-ink); font-weight: 700; font-size: 0.9rem; line-height: 1.5; }
.tier .btn { margin-top: auto; width: 100%; }
.tier:not(.featured) .btn { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); }
.tier:not(.featured) .btn:hover { --btn-bg: var(--ink); --btn-fg: var(--white); border-color: var(--ink); }
/* Risk-reversal microcopy under each package CTA. Sits between the button and
   the card edge, so it is read in the same glance as the price. */
.tier-note {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
}
.tier.featured .tier-note { color: var(--gold-ink); }

.callout {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--stone); padding: clamp(1.4rem, 3vw, 2.2rem);
}
.callout.gold { background: linear-gradient(135deg, rgba(185, 139, 62, 0.1), rgba(185, 139, 62, 0.03)); border-color: rgba(185, 139, 62, 0.35); }
.dark .callout { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); }

/* ── Accordion (FAQ) ───────────────────────────────────────────────────── */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  list-style: none; cursor: pointer; padding: 1.35rem 3rem 1.35rem 0;
  font-family: var(--display); font-size: clamp(1.1rem, 1.9vw, 1.35rem); line-height: 1.3;
  position: relative; transition: color 0.2s;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; position: absolute; right: 0.35rem; top: 50%; width: 12px; height: 12px;
  border-right: 1.5px solid var(--gold-ink); border-bottom: 1.5px solid var(--gold-ink);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.3s var(--ease);
}
.acc details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.acc summary:hover { color: var(--gold-ink); }
.acc-body { padding: 0 3rem 1.6rem 0; color: var(--muted); max-width: 68ch; }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.field { display: grid; gap: 0.42rem; margin-bottom: 1.1rem; }
.field label { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text); }
.field .hint { font-size: 0.85rem; color: var(--muted); font-weight: 400; line-height: 1.45; }
.input, .field input, .field textarea, .field select {
  width: 100%; padding: 0.86rem 1rem; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input:focus, .field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(18, 49, 44, 0.09);
}
.field textarea { min-height: 110px; resize: vertical; }
.check { display: grid; grid-template-columns: 1.15rem 1fr; gap: 0.7rem; align-items: start; font-size: 0.93rem; color: var(--muted); line-height: 1.5; cursor: pointer; }
.check input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--cotto); }
.form-note { font-size: 0.84rem; line-height: 1.5; color: var(--muted); margin-top: 0.9rem; }
.form-error { color: var(--cotto-dark); font-size: 0.86rem; font-weight: 600; margin-top: 0.8rem; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* ── Quiz ──────────────────────────────────────────────────────────────── */
.quiz-shell { min-height: 64vh; }
.quiz-progress { height: 3px; background: var(--stone-2); border-radius: 999px; overflow: hidden; margin-bottom: 2.2rem; }
.quiz-progress i { display: block; height: 100%; background: var(--gold-ink); width: 0; transition: width 0.45s var(--ease); }
.quiz-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; font-weight: 600; }

.quiz-step { display: none; }
.quiz-step.active { display: block; animation: fadeUp 0.42s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.quiz-q { font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin-bottom: 0.7rem; }
.quiz-h { color: var(--muted); margin-bottom: 2rem; max-width: 52ch; }

.opts { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.opt {
  display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: center;
  text-align: left; padding: 1.05rem 1.15rem; width: 100%;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease);
}
.opt:hover { border-color: var(--ink-soft); transform: translateY(-2px); }
.opt b { font-weight: 600; font-size: 1rem; }
.opt small { grid-column: 1 / -1; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.opt .tick {
  width: 20px; height: 20px; border: 1.5px solid var(--line); border-radius: 50%;
  display: grid; place-items: center; font-size: 0.7rem; color: transparent; flex: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.opt[aria-pressed="true"] { border-color: var(--ink); background: var(--stone); }
.opt[aria-pressed="true"] .tick { background: var(--ink); border-color: var(--ink); color: var(--white); }

.quiz-nav { display: flex; gap: 0.8rem; align-items: center; margin-top: 2.2rem; flex-wrap: wrap; }
.quiz-back { font-size: 0.88rem; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.quiz-back:hover { color: var(--ink); border-color: var(--ink); }

/* The gate's teaser: the matched venue image, veiled rather than hidden, so a
   visitor can see the answer exists before paying for it with an address. */
.locked { position: relative; overflow: hidden; }
.locked img { filter: blur(9px) saturate(0.85); transform: scale(1.06); }
.locked-veil {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(to top, rgba(11, 31, 27, 0.72), rgba(11, 31, 27, 0.34));
}
.locked-badge {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white); background: rgba(11, 31, 27, 0.66); border: 1px solid rgba(231, 211, 168, 0.45);
  padding: 0.6rem 1rem; border-radius: 999px; text-align: center; max-width: 82%; line-height: 1.4;
}

.result-hero { display: grid; gap: clamp(1.6rem, 4vw, 3rem); }
@media (min-width: 860px) { .result-hero { grid-template-columns: 1fr 1fr; align-items: center; } }
.result-name { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 0.6rem; }
.result-facts { display: grid; gap: 1rem; margin-top: 1.8rem; }
.fact { border-top: 1px solid var(--line); padding-top: 0.85rem; }
.fact dt { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 0.3rem; }
.fact dd { font-family: var(--display); font-size: 1.5rem; margin: 0; }
.dark .fact { border-color: rgba(255, 255, 255, 0.16); }
.dark .fact dt { color: rgba(255, 255, 255, 0.6); }

/* ── Calculator ────────────────────────────────────────────────────────── */
.calc-grid { display: grid; gap: clamp(1.8rem, 4vw, 3.5rem); }
@media (min-width: 940px) { .calc-grid { grid-template-columns: 0.85fr 1.15fr; align-items: start; } }
.slider { width: 100%; accent-color: var(--cotto); height: 2rem; }
.calc-value { font-family: var(--display); font-size: 2rem; line-height: 1; }
.calc-total { font-family: var(--display); font-size: clamp(2.4rem, 5.5vw, 3.8rem); line-height: 1; letter-spacing: -0.02em; }
.calc-rows { margin-top: 1.6rem; }
.calc-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 0.72rem 0; border-bottom: 1px solid var(--line); font-size: 0.94rem; }
.calc-row b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; flex-wrap: wrap; }
.seg button { padding: 0.6rem 0.95rem; font-size: 0.85rem; font-weight: 600; border-right: 1px solid var(--line); transition: background 0.2s, color 0.2s; }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--white); }

/* ── Journal ───────────────────────────────────────────────────────────── */
.prose { max-width: 64ch; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2.6rem 0 0.9rem; }
.prose p { margin-bottom: 1.25rem; }
.prose ul { margin: 0 0 1.4rem; display: grid; gap: 0.65rem; }
.prose ul li { display: grid; grid-template-columns: 0.9rem 1fr; gap: 0.8rem; }
.prose ul li::before { content: ""; width: 6px; height: 6px; margin-top: 0.65em; border-radius: 50%; background: var(--gold-ink); }
.article-head { max-width: 24ch; }
.meta-row { display: flex; gap: 1.2rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.footer { background: var(--ink-deep); color: rgba(255, 255, 255, 0.85); font-weight: 500; padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.footer a:hover { color: var(--gold); }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer h4 { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; }
.footer ul { display: grid; gap: 0.7rem; font-size: 0.95rem; }
.footer .logo { color: var(--white); font-size: 1.6rem; margin-bottom: 0.9rem; }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; justify-content: space-between;
  font-size: 0.82rem; color: rgba(255, 255, 255, 0.66);
}
.social { display: flex; gap: 1rem; }

/* ── Sticky mobile CTA ─────────────────────────────────────────────────── */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: var(--ink); border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 0.65rem var(--gutter) calc(0.65rem + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: 1rem;
  transform: translateY(110%); transition: transform 0.35s var(--ease);
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .txt { color: var(--white); font-size: 0.9rem; font-weight: 600; line-height: 1.2; }
.sticky-cta .txt small { display: block; font-weight: 400; font-size: 0.74rem; color: rgba(255, 255, 255, 0.6); }
.sticky-cta .btn { margin-left: auto; padding: 0.8rem 1.3rem; font-size: 0.86rem; white-space: nowrap; }
@media (max-width: 860px) { .sticky-cta { display: flex; } body { padding-bottom: 0; } }

/* ── Exit-intent modal ─────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 90; display: none;
  align-items: center; justify-content: center; padding: var(--gutter);
  background: rgba(11, 31, 27, 0.6); backdrop-filter: blur(4px);
}
.modal[data-open="true"] { display: flex; animation: fadeIn 0.3s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background: var(--paper); border-radius: var(--radius); max-width: 460px; width: 100%;
  padding: clamp(1.8rem, 4vw, 2.6rem); position: relative; box-shadow: var(--shadow-lg);
  animation: fadeUp 0.4s var(--ease) both;
}
.modal-close { position: absolute; top: 0.7rem; right: 0.9rem; font-size: 1.5rem; line-height: 1; color: var(--muted); }
.modal-card h3 { margin-bottom: 0.7rem; }

/* ── Cookie consent ────────────────────────────────────────────────────────
 * Deliberately not a full-screen blocker: it sits at the bottom, the two
 * buttons carry equal weight, and nothing behind it is obscured. */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  padding: var(--gutter);
  padding-bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
  background: var(--ink-deep); color: rgba(255, 255, 255, 0.86);
  border-top: 1px solid rgba(231, 211, 168, 0.28);
  animation: fadeUp 0.4s var(--ease) both;
}
.consent[hidden] { display: none; }
.consent-card {
  width: min(var(--wrap), 100%); margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
}
.consent h2 { font-size: 1.15rem; color: var(--white); margin-bottom: 0.35rem; }
.consent p { font-size: 0.88rem; max-width: 68ch; line-height: 1.5; }
.consent a { color: var(--gold); }
.consent-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }
/* Both buttons are deliberately identical. The Garante's cookie guidelines
   require reject to be as easy and as prominent as accept; a terracotta
   "Accept" beside a ghost "Reject" is exactly the nudge they fine for. */
.consent-actions .btn {
  padding: 0.8rem 1.6rem; font-size: 0.88rem; min-width: 8.5rem;
  --btn-fg: var(--white); border-color: rgba(255, 255, 255, 0.45);
}
.consent-actions .btn:hover { --btn-bg: var(--white); --btn-fg: var(--ink); border-color: var(--white); box-shadow: none; }
/* Keep the sticky CTA out from under the banner. */
.consent:not([hidden]) ~ .sticky-cta { display: none; }

.linkish {
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
  font-size: inherit; padding: 0;
}
.linkish:hover { color: var(--gold); }

/* ── Reveal on scroll ──────────────────────────────────────────────────────
 * Scoped to .js so that a failed script, a blocked module or a text-mode
 * crawler never leaves the page's content invisible. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ── Utilities ─────────────────────────────────────────────────────────── */
.center { text-align: center; }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.75rem; } .mt-4 { margin-top: 2.5rem; }
.mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.75rem; } .mb-4 { margin-bottom: 2.5rem; }
.hide { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pill {
  display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 0.35rem 0.75rem; border-radius: 999px;
  background: var(--stone); color: var(--gold-ink); border: 1px solid var(--line);
}
.dark .pill { background: rgba(255, 255, 255, 0.08); color: var(--gold); border-color: rgba(255, 255, 255, 0.16); }
.rule { height: 1px; background: var(--line); border: 0; margin-block: clamp(2.5rem, 5vw, 4rem); }
.dark .rule { background: rgba(255, 255, 255, 0.14); }

/* Language chooser (root index) */
.chooser { min-height: 100dvh; display: grid; place-items: center; text-align: center; background: var(--ink-deep); color: var(--white); padding: var(--gutter); }
.chooser .logo { color: var(--white); font-size: 2.4rem; }
/* --muted is a light-background colour; on --ink-deep it reads at 3.1:1. */
.chooser .lead { color: rgba(255, 255, 255, 0.72); }
.chooser-links { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }
/* This is a dark surface that is not a .section.dark, so it does not inherit
   the dark-context ghost rule above — without this, .btn-ghost keeps its
   light-background --ink label and lands at 1.2:1 on --ink-deep. */
.chooser .btn-ghost {
  --btn-bg: rgba(255, 255, 255, 0.07);
  --btn-fg: var(--white);
  border-color: rgba(255, 255, 255, 0.38);
  min-width: 9.5rem;
}
.chooser .btn-ghost:hover,
.chooser .btn-ghost:focus-visible { --btn-bg: var(--white); --btn-fg: var(--ink); border-color: var(--white); }