/* ==========================================================================
   Funded Profit System — stylesheet
   Plain CSS. No build step, no framework, no preprocessor.
   Order: tokens › base › layout › components › sections › footer › motion › responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ink & surfaces */
  --ink: #052b29;
  --ink-soft: #3d605c;
  --ink-faint: #6b8783;
  --paper: #ffffff;
  --paper-warm: #fbfaf7;
  --line: #e2e8e5;
  --line-strong: #cfdad6;

  /* Brand */
  --green: #12694a;
  --green-dark: #0d5238;
  --green-glow: #d9f9c6;
  --marker: #ffe45e;
  --lime-pop: #cbf358;

  /* Pastel palette (section identity) */
  --aqua: #b7eee7;
  --lime: #ecf7c2;
  --pink: #f9e2f4;
  --yellow: #fff3c7;
  --purple: #ece5f9;

  /* Dark surface */
  --night: #04211f;
  --night-2: #0a3733;

  /* Rhythm
     One gutter drives every side margin on the page:
       --gutter        content inset from the viewport edge (outside a panel)
       --gutter-panel  the colour panel's own inset from the viewport edge
       --gutter-in     content inset from the edge of the panel it sits in
     --gutter-panel + --gutter-in is kept equal to --gutter, so every block of
     copy on the page starts on the same vertical line, panel or not. */
  --gutter: 1.5rem;
  --gutter-panel: 1.25rem;
  --gutter-in: 1.5rem;
  --shell: min(1180px, 100% - var(--gutter) * 2);
  --reading: min(760px, 100% - var(--gutter) * 2);
  --radius: 24px;
  --panel-radius: clamp(20px, 2.2vw, 34px);
  --radius-sm: 14px;
  --gap-section: clamp(3.5rem, 5.5vw, 5.5rem);

  /* Type
     --font-scale is the single global knob for text size: it drives the root
     font-size, so every rem-based value in the sheet scales with it.
     It is raised on smaller viewports (see § 21). */
  --font-scale: 1.09;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Elevation */
  --lift-1: 0 1px 2px rgba(5, 43, 41, .05), 0 8px 24px rgba(5, 43, 41, .06);
  --lift-2: 0 2px 4px rgba(5, 43, 41, .06), 0 18px 48px rgba(5, 43, 41, .10);
  --lift-3: 0 30px 80px rgba(5, 43, 41, .16);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: calc(16px * var(--font-scale));
  scroll-behavior: smooth;
  /* keep anchored sections clear of the sticky bar */
  scroll-padding-top: 8.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* room for the mobile sticky bar */
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .96;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2.75rem, 6.2vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); letter-spacing: -.028em; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
strong, b { font-weight: 650; }

:focus-visible {
  outline: 3px solid #7b5cf0;
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--marker); color: var(--ink); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -6rem;
  z-index: 200;
  padding: .75rem 1.25rem;
  border-radius: 0 0 12px 12px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Marker highlight, echoing the source document */
.mark {
  background: linear-gradient(180deg, transparent 58%, var(--marker) 58%);
  padding: 0 .06em;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.shell { width: var(--shell); margin-inline: auto; }
.reading { width: var(--reading); margin-inline: auto; }

.section { padding-block: var(--gap-section); }
.section--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }

/* Wide colour panel: near-full width, rounded, with a side gutter. Inside it
   the shell only needs the remaining inset, so its content lines up with the
   content of every other section. */
.panel {
  --shell: min(1180px, 100% - var(--gutter-in) * 2);
  --reading: min(760px, 100% - var(--gutter-in) * 2);
  width: min(1720px, 100% - var(--gutter-panel) * 2);
  margin-inline: auto;
  margin-block: 1.25rem;
  border-radius: var(--panel-radius);
  overflow: hidden;
}
/* A colour panel already reads as its own block: the section right above it
   doesn't need to spend its full bottom rhythm on top of the panel's margin. */
.section:has(+ .panel) { padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }

/* A closing CTA block already carries its own breathing room: the section it
   ends and the one right after it don't need to spend the full rhythm too. */
.section:has(> :is(.reading, .shell) > .cta-block:last-child) {
  padding-bottom: clamp(2rem, 3vw, 2.75rem);
}
.section:has(> :is(.reading, .shell) > .cta-block:last-child) + .section {
  padding-top: clamp(2rem, 3vw, 2.75rem);
}

.section__head { max-width: 44rem; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.section__head--center { max-width: 42rem; margin-inline: auto; text-align: center; }
.section__head p { margin-top: 1.1rem; font-size: 1.0625rem; color: var(--ink-soft); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.1rem;
  padding: .4rem .85rem .45rem;
  border-radius: 999px;
  background: var(--green-glow);
  color: var(--green-dark);
  font-size: .8125rem;
  font-weight: 650;
  letter-spacing: .01em;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #e0483f;
  box-shadow: 0 0 0 0 rgba(224, 72, 63, .55);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 8px rgba(224, 72, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 72, 63, 0); }
}

/* --------------------------------------------------------------------------
   4. Announcement strip (scrolls away) + sticky logo header
   -------------------------------------------------------------------------- */
.topstrip {
  background: var(--green-glow);
}
.topstrip::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #6bdccf, #d6f66f 38%, #f4afd0 69%, #aaa8f3);
}
/* Announcement strip above the logo row */
.announce {
  margin: 0;
  padding: .55rem 1.25rem .6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: var(--green-glow);
  color: var(--green-dark);
  font-size: .875rem;
  font-weight: 650;
  letter-spacing: -.005em;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}
.announce__dot {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #e0483f;
  box-shadow: 0 0 0 0 rgba(224, 72, 63, .55);
  animation: pulse 2.2s ease-out infinite;
}

/* Only the logo row stays pinned */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .3s ease, box-shadow .35s ease, border-color .3s ease;
  animation: topbar-in .55s cubic-bezier(.2, .7, .3, 1) both;
}
/* Condensed state, toggled by script.js once the page is scrolled */
.topbar.is-stuck {
  background: rgba(255, 255, 255, .93);
  border-bottom-color: transparent;
  box-shadow: 0 10px 30px -18px rgba(11, 32, 26, .45);
}

.topbar__inner {
  width: var(--shell);
  margin-inline: auto;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: .4rem;
  transition: min-height .3s ease, padding-block .3s ease;
}
.topbar.is-stuck .topbar__inner {
  min-height: 48px;
  padding-block: .25rem;
}

/* Scroll progress hairline along the bottom edge */
.topbar__progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #6bdccf, #d6f66f 38%, #f4afd0 69%, #aaa8f3);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.topbar.is-stuck .topbar__progress { opacity: 1; }

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.03em;
  font-size: 1.0625rem;
  text-decoration: none;
  white-space: nowrap;
}
/* Logo lockup in the header — shrinks when the bar condenses */
.brand img {
  display: block;
  height: 34px;
  width: auto;
  transition: height .3s ease, transform .3s ease;
}
.topbar.is-stuck .brand img { height: 27px; }
.brand:hover img { transform: translateY(-1px) scale(1.03); }
.brand__dot {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--green);
  color: var(--green-glow);
  display: grid;
  place-items: center;
  font-size: .8125rem;
}
.topbar__meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

@keyframes topbar-in {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar { animation: none; }
  .topbar, .topbar__inner, .brand img, .topbar__progress { transition: none; }
}

/* Countdown */
.countdown {
  display: flex;
  transform-origin: right center;
  transition: transform .3s ease;
  align-items: center;
  gap: .4rem;
  font-variant-numeric: tabular-nums;
}
.topbar.is-stuck .countdown { transform: scale(.9); }
.countdown__label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: .25rem;
}
.countdown__unit {
  min-width: 2.6rem;
  padding: .3rem .35rem .25rem;
  border-radius: 9px;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  text-align: center;
  line-height: 1.05;
}
.countdown__num {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.02em;
}
.countdown__unit small {
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--green);
  --btn-bg-hover: var(--green-dark);
  --btn-fg: #eaffe1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 54px;
  padding: .9rem 1.5rem;
  border: 0;
  border-radius: 14px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-family: var(--display);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 10px 24px rgba(18, 105, 74, .25);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover { background: var(--btn-bg-hover); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 16px 32px rgba(18, 105, 74, .3); }
.btn:active { transform: translateY(0); }
.btn--block { width: 100%; }
.btn--lg { min-height: 60px; font-size: 1.0625rem; padding-inline: 1.75rem; }
/* The repeated event CTA — same copy everywhere, in caps, on exactly two
   lines. Each line is locked to one row and script.js scales .btn__label
   until the widest one fits the button. */
.btn--cta {
  display: flex;
  width: min(100%, 40rem);
  margin-inline: auto;
  gap: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .005em;
  padding: 1.25rem 1.5rem;
}
.btn--cta .btn__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fit-size, clamp(1.25rem, 5.4vw, 2.75rem));
  line-height: 1.14;
}
.btn--cta .btn__arrow {
  flex: 0 0 auto;
  font-size: 2.25rem;
  line-height: 1;
}
.fitline { display: block; white-space: nowrap; }
.btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: rgba(255, 255, 255, .08);
  --btn-fg: currentColor;
  border: 1.5px solid currentColor;
  box-shadow: none;
}
.btn__arrow { transition: transform .18s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Repeated inline call-to-action block */
.cta-block { margin-top: clamp(2.25rem, 4vw, 3.25rem); text-align: center; }
.cta-block__sub { margin: .8rem auto .3rem; max-width: 30rem; font-size: .8125rem; font-weight: 500; text-align: center; }
.cta-block__sub--form { margin-top: .8rem; }
.cta-block__scarcity {
  margin: 0;
  text-align: center;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60rem 40rem at 78% -10%, rgba(183, 238, 231, .55), transparent 60%),
    radial-gradient(50rem 36rem at 8% 10%, rgba(236, 229, 249, .6), transparent 62%),
    var(--paper);
}
.hero__inner {
  width: var(--shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .82fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(.75rem, 1.6vw, 1.5rem) clamp(3.5rem, 6vw, 5.5rem);
}
/* Query container for the headline: it sizes itself off this column's width. */
.hero__copy { container-type: inline-size; }
.hero__kicker {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: .9rem;
}
.hero h1 { margin-bottom: 1.5rem; }
.hero h1 em {
  font-style: normal;
  display: inline-block;
  background: linear-gradient(180deg, transparent 62%, var(--marker) 62%);
}
/* The headline is authored as two explicit lines, each locked to one row.
   Its font-size is derived from the width of .hero__copy (the query container)
   so the pair always fills the column: exactly two rows, full width, at every
   viewport — no JS measuring, no reflow on resize.
   6.9027 is the measured width, in em, of the wider of the two lines
   ("Ottieni 50.000€") set in Inter Tight with the h1 letter-spacing; 99.5cqw
   instead of 100 leaves a hair of slack so sub-pixel rounding never overflows.
   The clamp is the fallback for browsers without container query units — it is
   overridden by the declaration below wherever cqw is understood. */
.headline__line { display: block; white-space: nowrap; }
.headline {
  font-size: clamp(2.75rem, 6.2vw, 4.6rem);
  font-size: min(calc(99.5cqw / 6.9027), 6rem);
}

/* Highlighted phrase in the lead — the marker sweeps in on reveal */
.hl {
  background: none;
  color: inherit;
  font-weight: 700;
  position: relative;
  display: inline;
  padding: 0 .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background-image: linear-gradient(180deg, transparent 58%, var(--marker) 58%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .7s cubic-bezier(.2, .7, .3, 1) .15s;
}
.hl.is-visible { background-size: 100% 100%; }

/* Variante su fondo scuro: il marker è lime pieno e l'inchiostro si scurisce
   quando la sweep lo raggiunge. */
.hl--dark {
  background-image: linear-gradient(180deg, var(--lime-pop) 0%, var(--lime-pop) 100%);
  border-radius: .24em;
  padding: .1em .3em;
  margin-inline: -.08em;
  color: #e7f4f1;
  font-weight: 800;
  transition: background-size .7s cubic-bezier(.2, .7, .3, 1) .15s,
              color .3s ease .38s;
}
.hl--dark.is-visible { color: #04211f; }
.hero__lead {
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  line-height: 1.38;
  letter-spacing: -.015em;
  font-weight: 500;
  margin-bottom: 1.1rem;
}
.hero__support { font-size: 1.0625rem; color: var(--ink-soft); margin-bottom: 1rem; }
.hero__fine { font-size: .9375rem; line-height: 1.5; color: var(--ink-faint); }
.hero__event-mockup {
  width: 100%;
  margin-top: 1.25rem;
  object-fit: contain;
}

.ticks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem .9rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.ticks li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 550;
}
.ticks li::before {
  content: "";
  flex: 0 0 20px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--green-glow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d5238' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Opt-in card */
.optin {
  container-type: inline-size;
  position: sticky;
  top: 8.5rem;
  padding: clamp(1.5rem, 2.4vw, 2rem) clamp(1.1rem, 1.8vw, 1.5rem);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--lift-3);
}
.optin::before {
  content: "";
  display: block;
  height: 5px;
  width: 44px;
  margin-bottom: 1.15rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #6bdccf, #d6f66f 45%, #f4afd0);
}
.optin__title {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-bottom: .5rem;
}
.optin__note { font-size: .875rem; color: var(--ink-soft); margin-bottom: 1.35rem; }

/* Fine print under the form CTA: one line each, shrinking with the card
   (container query units) so it never wraps — same treatment as the modal. */
.optin .cta-block__sub,
.optin .cta-block__scarcity {
  max-width: none;
  white-space: nowrap;
}
.optin .cta-block__sub { font-size: min(.8125rem, 4cqw); }
.optin .cta-block__scarcity { font-size: min(.6875rem, 4.1cqw); letter-spacing: .08em; }

.field { margin-bottom: .85rem; }
.field label {
  display: block;
  margin-bottom: .35rem;
  font-size: .8125rem;
  font-weight: 650;
  letter-spacing: .01em;
}
.field input {
  width: 100%;
  min-height: 50px;
  padding: .75rem .9rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  background: var(--paper-warm);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.field input::placeholder { color: #9db1ad; }
.field input:hover { border-color: #b6c6c1; }
.field input:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(18, 105, 74, .13);
}
.field input:user-invalid {
  border-color: #d0453c;
  box-shadow: 0 0 0 4px rgba(208, 69, 60, .12);
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 1.1rem 0 1.25rem;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.consent input {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: .15rem 0 0;
  accent-color: var(--green);
}

/* --------------------------------------------------------------------------
   7. Proof bar
   -------------------------------------------------------------------------- */
.proofbar {
  border-block: 1px solid var(--line);
  background: var(--paper-warm);
}
.proofbar__inner {
  width: var(--shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}
.stat__num {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
}
.stat__label {
  display: block;
  margin-top: .45rem;
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   8. Media
   -------------------------------------------------------------------------- */
.slot {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 1.5rem 1.15rem;
  border-radius: var(--radius-sm);
  border: 1.5px dashed var(--line-strong);
  background: var(--paper-warm);
  color: var(--ink-faint);
  font-size: .8125rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
}
.slot--aqua { background: var(--aqua); border-color: rgba(5, 43, 41, .12); color: #1d514c; }
.slot--lime { background: var(--lime); border-color: rgba(5, 43, 41, .12); color: #4a5b1f; }
.slot--pink { background: var(--pink); border-color: rgba(5, 43, 41, .1); color: #7b3a6d; }
.slot--yellow { background: var(--yellow); border-color: rgba(5, 43, 41, .1); color: #765c15; }
.slot--tall { min-height: 420px; }
.slot--wide { aspect-ratio: 16 / 10; min-height: 0; }

/* Browser-chrome frame around a slot */
.frame {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--lift-2);
  overflow: hidden;
}
.frame__bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  height: 40px;
  padding-inline: 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper-warm);
}
.frame__bar span { width: 9px; height: 9px; border-radius: 50%; background: #d7b2f3; }
.frame__bar span:nth-child(2) { background: #ecc3df; }
.frame__bar span:nth-child(3) { background: #bce6e5; }
.frame__body { padding: clamp(.75rem, 1.6vw, 1.25rem); }

/* --------------------------------------------------------------------------
   9. Section: results
   -------------------------------------------------------------------------- */
.results {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 85%, rgba(196, 239, 255, .7), transparent 38%),
    radial-gradient(circle at 70% 30%, rgba(239, 204, 255, .68), transparent 36%),
    linear-gradient(135deg, #f8f8ff, #fdf3ff 55%, #fff7fb);
}
/* The panel's own rounded top edge already reads as a break: the head doesn't
   need the full section rhythm above it. */
.results.section--tight { padding-top: clamp(1.5rem, 2.6vw, 2.5rem); }
.results .shell { width: min(920px, 100% - var(--gutter-in) * 2); }
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.65rem, 1.5vw, 1rem);
}
.testimonial-video-card {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(5, 43, 41, .2);
  border-radius: 10px;
  background: var(--night);
  box-shadow: 0 8px 20px -16px rgba(5, 43, 41, .65);
}
.testimonial-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--night);
}
.testimonial-play { display: none; }
.testimonial-grid.is-enhanced .testimonial-play {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
}
.testimonial-grid.is-enhanced .testimonial-play span { display: none; }
.testimonial-grid.is-enhanced .testimonial-play:focus-visible {
  outline: 4px solid var(--green-glow);
  outline-offset: -4px;
}
.testimonial-video-card.is-playing .testimonial-play { display: none; }

/* Trustpilot review box (white card, separate from the video frame above) */
.tp {
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
  padding: clamp(1.25rem, 2.6vw, 2rem) clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--lift-2);
}
.tp__sprite { position: absolute; width: 0; height: 0; }
.tp__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding-bottom: 1rem;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--line);
}
.tp__title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -.02em;
}
.tp__brand {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}
.tp__brand-star { width: 1.05em; height: 1.05em; }

.tp__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
}
.tp-card { min-width: 0; }
.tp-card__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .65rem;
  margin-bottom: .6rem;
}
.tp-card__avatar {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
  background: var(--paper-warm);
}
.av--yellow { background: var(--yellow); }
.av--pink   { background: var(--pink); }
.av--aqua   { background: var(--aqua); }
.av--lime   { background: var(--lime); }
.tp-card__who { display: grid; min-width: 0; }
.tp-card__name {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-card__meta { font-size: .8125rem; color: var(--ink-faint); }
.tp-card__date { font-size: .8125rem; color: var(--ink-faint); white-space: nowrap; }

.tp-stars { display: flex; gap: 2px; color: #00b67a; }
.tp-stars svg { width: 1.4rem; height: 1.4rem; display: block; }

.tp-card__title {
  margin: .7rem 0 .4rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.tp-card__body {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.tp-card__exp {
  margin: .75rem 0 0;
  font-size: .875rem;
  color: var(--ink-soft);
}
.tp-card__exp strong { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------------------------
   10. Section: argument (soft purple)
   -------------------------------------------------------------------------- */
.argument {
  background: var(--purple);
}
.argument .reading { text-align: left; }
.argument h2 { max-width: 24ch; }
.argument p { color: #35504c; }
.argument p strong { color: var(--ink); }


/* --------------------------------------------------------------------------
   11. Infografiche editoriali
   Due schede grafiche che spezzano i blocchi di testo lunghi:
     .infog--flow   il percorso del capitale (broker › quota › profitto)
     .infog--scale  quanto pesa la stessa percentuale su conti diversi
   Le animazioni partono quando la figura entra in viewport (.is-visible).
   -------------------------------------------------------------------------- */
.infog {
  --c: var(--green);
  --c-soft: #bfd8cf;
  margin: clamp(2.25rem, 4vw, 3.25rem) 0;
  padding: clamp(1.25rem, 2.8vw, 1.9rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--lift-2);
}
.argument .infog { border-color: rgba(5, 43, 41, .09); }

.infog__cap { display: grid; gap: .55rem; margin: 0 0 clamp(1.25rem, 2.4vw, 1.75rem); }
.infog__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
}
.infog__eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--green);
}
.infog__title {
  font-family: var(--display);
  font-size: clamp(1.0625rem, 2.4vw, 1.3125rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.025em;
  color: var(--ink);
  text-wrap: balance;
}
.infog__foot {
  position: relative;
  margin: clamp(1.1rem, 2.2vw, 1.5rem) 0 0;
  padding: .85rem 1rem .85rem 2.85rem;
  border-radius: var(--radius-sm);
  background: var(--paper-warm);
  border: 1px solid var(--line);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.infog__foot::before {
  content: "";
  position: absolute;
  top: .95rem;
  left: 1rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--green-glow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d5238' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.infog__foot b { color: var(--ink); font-weight: 700; }

/* — micro-visualizzazioni condivise — */
.infog svg { display: block; width: 100%; height: auto; overflow: visible; }
.infog .v-base { stroke: var(--line-strong); stroke-width: 1.4; stroke-linecap: round; }
.infog .v-bar { fill: var(--c-soft); }
.infog .v-bar.is-key { fill: var(--c); }
.infog .v-dot { fill: var(--c-soft); }
.infog .v-dot.is-key { fill: var(--c); }
.infog .v-halo { fill: var(--c); opacity: .2; }
.infog .v-trend {
  fill: none;
  stroke: var(--c);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.infog .v-bar { transform-box: fill-box; transform-origin: bottom center; }
.infog.is-visible .v-bar {
  animation: infog-grow .55s cubic-bezier(.2, 1.1, .35, 1) both;
  animation-delay: calc(var(--i, 0) * 65ms + 140ms);
}
.infog.is-visible .v-dot {
  animation: viz-pop .45s cubic-bezier(.2, 1.4, .4, 1) both;
  animation-delay: calc(var(--i, 0) * 22ms + 120ms);
}
.infog.is-visible .v-halo {
  animation: viz-pop .5s cubic-bezier(.2, 1.4, .4, 1) both .75s;
}
.infog.is-visible .v-trend {
  animation: viz-draw .9s cubic-bezier(.3, .8, .3, 1) both .25s;
}

/* — 11.1 infografica flusso — */
.flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.flow__step {
  position: relative;
  display: grid;
  align-content: start;
  gap: .3rem;
  padding: 1.1rem 1rem 1.15rem;
  border-radius: 18px;
  background: var(--tint);
  border: 1px solid var(--tint-line);
}
.flow__step:nth-child(1) { --c: #1f8f8a; --c-soft: #a8ddd8; --tint: #eefaf8; --tint-line: #cbeae6; }
.flow__step:nth-child(2) { --c: #7355c9; --c-soft: #cdc0ee; --tint: #f5f2fd; --tint-line: #ded4f5; }
.flow__step:nth-child(3) { --c: #12694a; --c-soft: #b3dbc6; --tint: #eef8f2; --tint-line: #c9e6d6; }

/* freccia di raccordo, disegnata nel gutter tra due schede */
.flow__step::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -.625rem;
  width: 1.7rem;
  height: 1.7rem;
  transform: translate(50%, -50%);
  border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: 0 0 0 4px var(--paper);
}
.flow__step:last-child::after { content: none; }

.flow__viz { margin-bottom: .85rem; }
.flow__num {
  font-family: var(--display);
  font-size: clamp(1.25rem, 3.1vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.1;
  color: var(--ink);
}
.flow__label {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--c);
}
.flow__note {
  margin: .35rem 0 0;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.argument .flow__note { color: var(--ink-soft); }

/* — 11.2 infografica scala — */
.scale {
  display: grid;
  gap: .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  --col-cap: 8.75rem;
  --col-val: 9.25rem;
}
.scale__row {
  display: grid;
  grid-template-columns: var(--col-cap) minmax(0, 1fr) var(--col-val);
  align-items: center;
  gap: .9rem;
}
.scale__cap {
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--ink-soft);
}
.scale__cap b {
  display: block;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ink);
}
.scale__track {
  position: relative;
  height: 22px;
  border-radius: 999px;
  background: var(--paper-warm);
  border: 1px solid var(--line);
  overflow: hidden;
}
.scale__bar {
  display: block;
  width: var(--w, 0%);
  min-width: 7px;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8d68a, #f0c94a);
  transform-origin: left center;
  transform: scaleX(0);
}
.infog.is-visible .scale__bar {
  transform: scaleX(1);
  transition: transform .95s cubic-bezier(.22, .9, .28, 1);
  transition-delay: calc(var(--i, 0) * 140ms + 200ms);
}
.scale__val {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
.scale__val span {
  display: block;
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.scale__row--hero .scale__track {
  height: 30px;
  border-color: rgba(18, 105, 74, .28);
  background: #eef8f2;
}
.scale__row--hero .scale__bar { background: linear-gradient(90deg, var(--green) 10%, #2f9d63 70%, var(--lime-pop)); }
.scale__row--hero .scale__cap b,
.scale__row--hero .scale__val { color: var(--green-dark); }
.scale__row--hero .scale__val { font-size: 1.1875rem; }
.scale__flag {
  display: inline-block;
  margin-top: .3rem;
  padding: .12rem .45rem;
  border-radius: 999px;
  background: var(--green-glow);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--green-dark);
}
.scale__axis {
  display: grid;
  grid-template-columns: var(--col-cap) minmax(0, 1fr) var(--col-val);
  gap: .9rem;
  margin-top: .7rem;
  --col-cap: 8.75rem;
  --col-val: 9.25rem;
}
.scale__axis > span i { font-style: normal; }
.scale__axis > span {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  padding-top: .45rem;
  border-top: 1px dashed var(--line-strong);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-faint);
}

@media (max-width: 720px) {
  .flow { grid-template-columns: 1fr; gap: 1.6rem; }
  .flow__viz { max-width: 230px; }
  .flow__step::after {
    top: auto;
    right: auto;
    bottom: -.8rem;
    left: 50%;
    transform: translate(-50%, 50%) rotate(90deg);
  }
  .scale { --col-cap: 1fr; --col-val: auto; }
  .scale__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "cap val" "bar bar";
    gap: .45rem .9rem;
  }
  .scale__cap { grid-area: cap; }
  .scale__val { grid-area: val; }
  .scale__track { grid-area: bar; margin-top: .15rem; }
  .scale__cap b { display: inline; }
  .scale__axis { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .infog.is-visible .v-bar,
  .infog.is-visible .v-dot,
  .infog.is-visible .v-halo,
  .infog.is-visible .v-trend { animation: none; }
  .infog.is-visible .scale__bar { transition: none; }
}

@keyframes infog-grow { from { transform: scaleY(0); opacity: 0; } }

/* --------------------------------------------------------------------------
   12. Section: fit cards
   -------------------------------------------------------------------------- */
.fit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.15rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.fit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: .9375rem;
  line-height: 1.55;
  box-shadow: var(--lift-1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Hairline highlight along the top edge - keeps the white card from reading
   flat against the white page. */
.fit-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.fit-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  background: var(--paper-warm);
  transform: scale(1.001);
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.fit-card__body {
  position: relative;
  z-index: 1;
  display: block;
  flex: 1;
  /* Top padding clears the badge, which straddles the image edge. */
  padding: 1.55rem 1.05rem 1.4rem;
  color: var(--ink);
  letter-spacing: -.004em;
  background: var(--paper);
  border-radius: 22px 22px 0 0;
  margin-top: -14px;
}
.fit-card__body::before {
  content: "";
  position: absolute;
  left: 1.4rem;
  top: -16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--green-glow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d5238' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 17px no-repeat;
  box-shadow: 0 0 0 4px var(--paper), 0 6px 14px rgba(5, 43, 41, .14);
}
.fit-card:nth-child(4n+2) .fit-card__body::before { background-color: var(--aqua); }
.fit-card:nth-child(4n+3) .fit-card__body::before { background-color: var(--pink); }
.fit-card:nth-child(4n+4) .fit-card__body::before { background-color: var(--yellow); }
.fit-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--lift-2);
  border-color: var(--line-strong);
}
.fit-card:hover .fit-card__image { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .fit-card:hover .fit-card__image { transform: none; }
}

@media (max-width: 720px) {
  .fit-grid { gap: 1rem; }
  .fit-card { font-size: .9063rem; }
  .fit-card__image { aspect-ratio: 3 / 2; }
  .fit-card__body { padding: 1.45rem .95rem 1.25rem; }
  .fit-card__body::before { left: 1.25rem; width: 30px; height: 30px; background-size: 16px; }
}

/* --------------------------------------------------------------------------
   13. Section: bio (dark)
   -------------------------------------------------------------------------- */
.bio {
  color: #e7f4f1;
  background:
    radial-gradient(45rem 30rem at 85% 0%, rgba(18, 105, 74, .5), transparent 60%),
    radial-gradient(38rem 28rem at 0% 100%, rgba(123, 92, 240, .28), transparent 62%),
    var(--night);
}
.bio h2, .bio h3 { color: #fff; }
.bio p { color: #a9c6c1; }
.bio p strong { color: #fff; }
.bio__intro {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.bio .slot {
  background: linear-gradient(150deg, rgba(183, 238, 231, .16), rgba(123, 92, 240, .16));
  border-color: rgba(255, 255, 255, .18);
  color: #cfe6e2;
}
/* Portrait — the source is square, cropped to a portrait ratio and framed */
.bio__photo {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(150deg, rgba(183, 238, 231, .16), rgba(123, 92, 240, .16));
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .65);
}
.bio__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .16);
  pointer-events: none;
}
.bio__photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
}
.creds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  margin: clamp(2.5rem, 4vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.cred {
  padding: 1.4rem 1.05rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .045);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.cred:hover { background: rgba(255, 255, 255, .075); border-color: rgba(255, 255, 255, .2); transform: translateY(-3px); }
.cred__kpi {
  display: block;
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.035em;
  color: #d6f66f;
  margin-bottom: .1rem;
}
.cred__title {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7fa8a1;
  margin-bottom: .7rem;
}
.cred p { margin: 0; font-size: .9375rem; line-height: 1.5; }

/* Parola in evidenza dentro la sezione scura: lime + velo di marker basso */
.bio .pop {
  color: #e9ff9c;
  font-weight: 700;
  padding: 0 .1em;
  background-image: linear-gradient(180deg, transparent 58%, rgba(203, 243, 88, .20) 58%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.bio__intro .pop { color: #f2ffc0; }

/* --------------------------------------------------------------------------
   13b. Infografiche delle card credenziali
   Ogni card apre con una micro-visualizzazione SVG disegnata su misura.
   Le animazioni partono quando la card entra in viewport (.is-visible).
   -------------------------------------------------------------------------- */
.cred__viz {
  --viz-1: #cbf358;
  --viz-2: #74dbe7;
  --viz-3: #a892ff;
  --viz-neg: #ff8f7a;
  --viz-dim: rgba(255, 255, 255, .16);
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
  overflow: visible;
}

/* — primitive condivise — */
.cred__viz .v-grid path,
.cred__viz .v-grid line { stroke: var(--viz-dim); stroke-width: 1; stroke-dasharray: 2 5; }
.cred__viz .v-line { stroke: var(--viz-1); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cred__viz .v-node { fill: var(--viz-1); }
.cred__viz .v-node--dim { fill: rgba(255, 255, 255, .22); }
.cred__viz .v-node--alt { fill: var(--viz-2); }
.cred__viz .v-halo { fill: var(--viz-1); opacity: .22; }
.cred__viz .v-neg rect { fill: var(--viz-neg); opacity: .55; }

/* stati d'arrivo (se il JS non gira resta tutto visibile) */
.cred__viz .v-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.cred__viz .v-area { transform-box: fill-box; transform-origin: left center; }

.cred.is-visible .v-draw { animation: viz-draw 1.05s cubic-bezier(.3, .8, .3, 1) both; }
.cred.is-visible .v-area { animation: viz-wipe 1s cubic-bezier(.3, .8, .3, 1) both; }
.cred.is-visible .v-pop { animation: viz-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i, 0) * 26ms + 120ms); }
.cred.is-visible .v-neg { animation: viz-fade .6s ease both .35s; }
.cred.is-visible .v-edge { animation: viz-edge 1.2s ease both; animation-delay: calc(var(--i, 0) * 55ms); }
.cred.is-visible .v-cell { animation: viz-cell .5s ease both; animation-delay: calc(var(--i, 0) * 22ms); }
.cred.is-visible .v-candle { animation: viz-rise .5s cubic-bezier(.2, 1.2, .4, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.cred.is-visible .v-tick { animation: viz-tick .45s ease both; animation-delay: calc(var(--i, 0) * 65ms + 200ms); }
.cred.is-visible .v-ring { animation: viz-draw .9s cubic-bezier(.3, .8, .3, 1) both; animation-delay: calc(var(--i, 0) * 110ms); }
.cred.is-visible .v-flow { animation: viz-flow 2.4s linear infinite; animation-delay: calc(var(--i, 0) * 320ms); }
.cred.is-visible .v-pulse { animation: viz-radar 3.2s ease-out infinite; }
.cred.is-visible .v-arc { animation: viz-draw 1.2s cubic-bezier(.3, .8, .3, 1) both .15s; }

@keyframes viz-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes viz-wipe { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes viz-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes viz-fade { from { opacity: 0; } }
@keyframes viz-edge { 0% { opacity: 0; } 60% { opacity: .85; } 100% { opacity: .3; } }
@keyframes viz-cell { from { opacity: 0; transform: scale(.4); } }
@keyframes viz-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes viz-tick { from { opacity: 0; transform: scale(.55); } }
@keyframes viz-flow { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }
@keyframes viz-radar { 0% { opacity: .55; transform: scale(.25); } 70% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }

/* le trasformazioni devono agire sul box del singolo elemento SVG */
.cred__viz .v-pop,
.cred__viz .v-cell,
.cred__viz .v-candle,
.cred__viz .v-tick,
.cred__viz .v-pulse { transform-box: fill-box; transform-origin: center; }
.cred__viz .v-candle { transform-origin: bottom; }

/* — 3. rete neurale — */
.cred__viz .v-edge { stroke: var(--viz-2); stroke-width: .8; opacity: .3; }

/* — 4. radar community — */
.cred__viz .v-ring { stroke: rgba(255, 255, 255, .24); stroke-width: 1.2; }
.cred__viz .v-pulse { stroke: var(--viz-1); stroke-width: 1.6; opacity: 0; }
.cred__viz .v-core { fill: #fff; }

/* — 5. gauge 9 su 10 — */
.cred__viz .v-track { stroke: var(--viz-dim); stroke-width: 2; }
.cred__viz .v-arc { stroke: var(--viz-1); stroke-width: 3; stroke-linecap: round; }
.cred__viz .v-tick { stroke: var(--viz-1); stroke-width: 6.5; stroke-linecap: round; }
.cred__viz .v-tick--off { stroke: rgba(255, 255, 255, .18); }

/* — 6. globo e flussi — */
.cred__viz .v-globe { stroke: var(--viz-1); stroke-width: 1.6; fill: rgba(203, 243, 88, .07); }
.cred__viz .v-grid-s { stroke: var(--viz-dim); stroke-width: 1; }
.cred__viz .v-flow { stroke: var(--viz-2); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 5 12; opacity: .85; }

/* — 7. candele — */
.cred__viz .v-candle rect { fill: var(--viz-1); }
.cred__viz .v-candle line { stroke: var(--viz-1); stroke-width: 1.6; stroke-linecap: round; }
.cred__viz .v-candle--down rect { fill: var(--viz-neg); }
.cred__viz .v-candle--down line { stroke: var(--viz-neg); }

/* — 8. heatmap dell'operatività — */
.cred__viz .v-cell { fill: var(--viz-1); }
.cred__viz .v-cell--0 { fill: rgba(255, 255, 255, .09); }
.cred__viz .v-cell--1 { fill: rgba(203, 243, 88, .3); }
.cred__viz .v-cell--2 { fill: rgba(203, 243, 88, .58); }
.cred__viz .v-cell--3 { fill: var(--viz-1); }

@media (prefers-reduced-motion: reduce) {
  .cred.is-visible .v-draw,
  .cred.is-visible .v-area,
  .cred.is-visible .v-pop,
  .cred.is-visible .v-neg,
  .cred.is-visible .v-edge,
  .cred.is-visible .v-cell,
  .cred.is-visible .v-candle,
  .cred.is-visible .v-tick,
  .cred.is-visible .v-ring,
  .cred.is-visible .v-flow,
  .cred.is-visible .v-pulse,
  .cred.is-visible .v-arc { animation: none; }
  .cred__viz .v-pulse { opacity: 0; }
}

/* --------------------------------------------------------------------------
   14. Section: FAQ
   -------------------------------------------------------------------------- */
/* Gradient panel the cards float on */
.faq-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(30rem 24rem at 2% 8%, rgba(247, 205, 236, .95), transparent 62%),
    radial-gradient(28rem 22rem at 99% 2%, rgba(203, 243, 88, .95), transparent 60%),
    radial-gradient(32rem 26rem at 100% 96%, rgba(116, 219, 231, .95), transparent 60%),
    radial-gradient(28rem 22rem at 12% 99%, rgba(224, 213, 247, .95), transparent 60%),
    linear-gradient(120deg, #fdf6f2, #f8fbe9 48%, #eaf9fb);
}
.faq-section .reading { width: min(880px, 100% - var(--gutter-in) * 2); position: relative; }

.faq-list { display: grid; gap: .7rem; }

/* One card per question */
.faq {
  border-radius: 18px;
  background: var(--paper);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 1px 2px rgba(5, 43, 41, .04), 0 10px 28px rgba(5, 43, 41, .07);
  overflow: hidden;
  transition: box-shadow .22s ease, transform .22s ease;
}
.faq:hover { box-shadow: 0 2px 4px rgba(5, 43, 41, .05), 0 16px 38px rgba(5, 43, 41, .1); transform: translateY(-1px); }
.faq[open] { box-shadow: 0 2px 4px rgba(5, 43, 41, .05), 0 18px 44px rgba(5, 43, 41, .11); }
.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.1rem, 2vw, 1.5rem);
  cursor: pointer;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -.02em;
  transition: color .16s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--green); }
.faq__icon {
  position: relative;
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--paper-warm);
  border: 1px solid var(--line-strong);
  transition: transform .22s ease, background .22s ease;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% 5px auto;
  height: 1.8px;
  margin-top: -.9px;
  background: currentColor;
  border-radius: 2px;
}
.faq__icon::after { transform: rotate(90deg); transition: transform .22s ease; }
.faq[open] .faq__icon { transform: rotate(135deg); background: var(--green-glow); }
.faq__body {
  padding: 0 clamp(1.1rem, 2vw, 1.5rem) clamp(1.5rem, 2.5vw, 2rem);
  max-width: 62ch;
  color: var(--ink-soft);
}
.faq__body p { margin-bottom: .6em; font-size: .9688rem; }

/* --------------------------------------------------------------------------
   15. Final call
   -------------------------------------------------------------------------- */
.final {
  text-align: center;
  color: #eefaf6;
  background:
    radial-gradient(40rem 26rem at 50% 0%, rgba(18, 105, 74, .55), transparent 65%),
    var(--night-2);
}
.final h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.final p { color: #a9c6c1; }
.final .btn { --btn-bg: #d6f66f; --btn-bg-hover: #c6ec52; --btn-fg: #04211f; }
.final .cta-block__scarcity { color: #7fa8a1; }

/* --------------------------------------------------------------------------
   16. Mobile sticky CTA
   -------------------------------------------------------------------------- */
/* Floating CTA — hidden until the hero scrolls out of view. */
.cta-dock {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 70;
  display: none;
  width: min(440px, calc(100% - 1.75rem));
  transform: translate(-50%, 160%) scale(.94);
  opacity: 0;
  visibility: hidden;
  transition:
    transform .55s cubic-bezier(.18, .89, .32, 1.22),
    opacity .3s ease,
    visibility 0s linear .55s;
}
.cta-dock.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition:
    transform .55s cubic-bezier(.18, .89, .32, 1.22),
    opacity .3s ease,
    visibility 0s;
}

.cta-dock__btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0 .9rem;
  padding: .8rem 1.1rem .85rem 1.25rem;
  border-radius: 999px;
  text-decoration: none;
  color: #eaffe1;
  background: linear-gradient(135deg, var(--green-dark), var(--green) 55%, #2f7d5b);
  box-shadow:
    0 18px 38px -14px rgba(6, 60, 44, .65),
    0 2px 0 0 rgba(255, 255, 255, .18) inset;
  transition: transform .2s ease, box-shadow .25s ease;
}
.cta-dock__btn:hover { transform: translateY(-2px); }
.cta-dock__btn:active { transform: translateY(0) scale(.99); }
.cta-dock__label {
  grid-column: 1;
  font-family: var(--display);
  font-weight: 700;
  font-size: .9375rem;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1.15;
  text-wrap: balance;
}
.cta-dock__arrow {
  grid-column: 2;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  font-size: 1rem;
  animation: dock-nudge 2.4s ease-in-out infinite;
}
/* Light sweep across the pill */
.cta-dock__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .3) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: dock-shine 4.5s ease-in-out 1.2s infinite;
}
/* Soft halo that breathes behind the pill */
.cta-dock::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: radial-gradient(60% 120% at 50% 50%, rgba(45, 138, 98, .35), transparent 70%);
  filter: blur(10px);
  z-index: -1;
  animation: dock-halo 3.2s ease-in-out infinite;
}

@keyframes dock-shine {
  0%, 55% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}
@keyframes dock-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}
@keyframes dock-halo {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: .95; transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .cta-dock, .cta-dock__btn { transition: opacity .2s ease; }
  .cta-dock.is-visible, .cta-dock:not(.is-visible) { transform: translate(-50%, 0); }
  .cta-dock__arrow, .cta-dock__btn::after, .cta-dock::before { animation: none; }
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.footer {
  padding-block: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  background: var(--paper-warm);
  font-size: .8125rem;
  color: var(--ink-faint);
}
.footer__brand img {
  display: block;
  height: 30px;
  width: auto;
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ink); text-decoration: underline; }
.footer__legal { max-width: 90ch; line-height: 1.6; }
.footer__legal p { margin-bottom: .8em; }

/* --------------------------------------------------------------------------
   18. Motion
   -------------------------------------------------------------------------- */
/* Il fade-in allo scroll è stato rimosso: il contenuto è sempre visibile.
   L'attributo [data-reveal] resta solo come gancio per il marker .hl. */
[data-reveal], [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; }
  /* Stacked hero: hold the copy to roughly the width of the desktop column so
     the headline keeps its scale and the lead keeps a readable measure. */
  .hero__copy { max-width: 36rem; }
  .optin { position: static; max-width: 560px; }
  .bio__intro { grid-template-columns: 1fr; }
  .bio__photo { max-width: 380px; margin-inline: auto; }
  /* Stacked bio: the photo becomes the first, full-width element of the panel,
     so the panel carries the inset itself — the same gutter on all four sides
     instead of the shell gutter on the sides and the section padding on top. */
  .bio.section--tight { padding: var(--gutter-in); }
  .bio > .shell { width: 100%; }
  .proofbar__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.5rem; }
}

@media (max-width: 860px) {
  .topbar__meta .countdown__label { display: none; }
}

@media (max-width: 480px) {
  .brand img { height: 28px; }
  .topbar.is-stuck .brand img { height: 24px; }
  .announce { font-size: .75rem; padding: .5rem .9rem .55rem; gap: .45rem; }
}

@media (max-width: 720px) {
  /* Phone: the colour panels run nearly edge to edge (3px) and spend the rest
     of the gutter internally, so panel copy and page copy share the same 12px
     margin from the screen edge. */
  :root { --gutter: 12px; --gutter-panel: 3px; --gutter-in: 9px; }
  .grid-2, .testimonial-grid { grid-template-columns: 1fr; }
  /* Phone: the review card spends the width it gains on internal padding, so
     the review text keeps a comfortable inset from the white edge. */
  .tp { padding-inline: 1.125rem; }
  .tp__grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .tp-card + .tp-card { padding-top: 1.25rem; border-top: 1px solid var(--line); }
  .tp__head { flex-direction: row; align-items: center; }
  .cta-dock { display: block; }
  body { padding-bottom: 5rem; }
  .panel { margin-block: .75rem; }
  /* Phone: the portrait fills the panel column, so it keeps the same gutter as
     every other block instead of leaving its cap's slack on the right. */
  .bio__photo { max-width: none; }
  h1, h2 { text-wrap: pretty; }
  .steps { grid-template-columns: 1fr; }
  .topbar__meta .countdown { display: none; }
  /* Centred heads read as ragged blocks on a narrow column - flush them left. */
  .section__head--center { margin-inline: 0; text-align: left; }
}

@media (max-width: 420px) {
  .ticks { grid-template-columns: 1fr; }
  .cta-dock__label { font-size: .875rem; }
}

/* --------------------------------------------------------------------------
   20. Thank-you page
   -------------------------------------------------------------------------- */
.thanks {
  position: relative;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(40rem 30rem at 80% 110%, rgba(249, 226, 244, .9), transparent 60%),
    radial-gradient(36rem 26rem at 5% -10%, rgba(255, 243, 199, .9), transparent 60%),
    var(--purple);
}
.thanks__inner { padding-block: clamp(3.5rem, 7vw, 6rem); }
/* Il pannello di conferma e i 4 passaggi sono un blocco unico: la sezione
   subito sotto non ha bisogno del ritmo verticale pieno. */
.thanks + .section { padding-top: clamp(1.25rem, 2.2vw, 1.75rem); }
.thanks__check {
  width: 64px; height: 64px;
  margin: 0 auto 1.5rem;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: var(--green);
  color: var(--green-glow);
  box-shadow: 0 14px 30px rgba(18, 105, 74, .28);
  animation: pop .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.thanks h1 { margin-bottom: 1.25rem; }
.thanks__lead {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.35;
  font-weight: 600;
  max-width: 32ch;
  margin-inline: auto;
  margin-bottom: 1.5rem;
}
.thanks__copy { max-width: 52ch; margin-inline: auto; color: #3d5b57; font-size: .9688rem; }

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.step {
  counter-increment: step;
  position: relative;
  padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.1rem, 2vw, 1.5rem);
  border-radius: var(--radius);
  background: var(--aqua);
  border: 1px solid rgba(5, 43, 41, .07);
}
.step:nth-child(2) { background: var(--pink); }
.step:nth-child(3) { background: var(--yellow); }
.step:nth-child(4) { background: #dff5d7; }
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-bottom: 1rem;
  border-radius: 11px;
  background: rgba(5, 43, 41, .84);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: .9375rem;
}
.step h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin-bottom: .8rem; }
.step p { font-size: .9375rem; line-height: 1.5; }
.step .note { font-size: .75rem; font-style: italic; color: #4a6a66; }
.step .slot { background: rgba(255, 255, 255, .68); border-color: rgba(5, 43, 41, .12); }
.step__email-shot {
  width: 100%;
  height: auto;
  margin-block: 1.25rem 1rem;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(5, 43, 41, .12);
}

.step--wide { grid-column: 1 / -1; }
.thanks-final {
  margin-top: 1.15rem;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.25rem);
  border-radius: var(--radius);
  text-align: center;
  color: #eefaf6;
  background: var(--night-2);
}
.thanks-final h2 { color: #fff; }
.thanks-final p { color: #a9c6c1; margin-top: .8rem; }

/* Thank-you page: stack the steps on small screens.
   Declared last so it wins over the .steps rule above. */
@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   20b. Opt-in modal
   Hidden with [hidden] so it stays out of the way without JS; script.js drops
   the attribute and then adds .is-open on the next frame so the fade runs.
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem) 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal[hidden] { display: none; }

.modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 33, 31, .58);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .22s ease;
}

.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: auto;
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity .22s ease, transform .22s cubic-bezier(.2, .8, .3, 1);
}

.modal__dialog:focus { outline: none; }

.modal.is-open .modal__backdrop { opacity: 1; }
.modal.is-open .modal__dialog { opacity: 1; transform: none; }

.modal__close {
  position: absolute;
  top: -.6rem;
  right: -.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--lift-1);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease;
}
.modal__close svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.modal__close:hover { background: var(--paper-warm); transform: scale(1.06); }
.modal__close:active { transform: scale(.96); }
.modal__close:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* The cloned card sits in flow inside the dialog — no sticky, no page offset. */
.modal .optin {
  position: static;
  top: auto;
  max-width: none;
  width: 100%;
}

/* Fine print under the modal CTA: one line each, shrinking with the viewport
   so it never wraps on narrow phones. */
.modal .cta-block__sub,
.modal .cta-block__scarcity {
  max-width: none;
  white-space: nowrap;
}
.modal .cta-block__sub { font-size: min(.8125rem, 3.2vw); }
.modal .cta-block__scarcity { font-size: min(.6875rem, 2.9vw); letter-spacing: .08em; }

/* Page behind the modal is frozen; script.js pads for the lost scrollbar.
   The floating dock is redundant while the form is on screen. */
html.has-modal,
body.has-modal { overflow: hidden; }
body.has-modal .cta-dock { opacity: 0; pointer-events: none; }

@media (max-width: 480px) {
  .modal { padding: 1rem .75rem; align-items: flex-start; }
  .modal__close { top: -.35rem; right: -.35rem; width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .modal__backdrop,
  .modal__dialog { transition: none; }
  .modal__dialog { transform: none; }
}

/* --------------------------------------------------------------------------
   21. Type scale by viewport
   One knob, --font-scale, drives the root font-size, so every rem value in
   the sheet (body copy, headings, buttons, labels) grows together.
   Declared last, largest breakpoint first, so the smallest match wins.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) { :root { --font-scale: 1.11; } }
@media (max-width: 720px)  { :root { --font-scale: 1.15; } }
@media (max-width: 480px)  { :root { --font-scale: 1.18; } }