/* PayNinja design system · HECKTO 2026
   Lettura: landing trust-first per titolari di piccole imprese UK, linguaggio fintech (inversione a due colori stile Wise),
   Archivo 900 compresso per i titoli, Geist per il testo, movimento sobrio. Manopole: VARIANCE 6 · MOTION 5 · DENSITY 4. */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* fallback locali con size-adjust: meno salto quando arrivano i woff2 */
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 101%; ascent-override: 92%; descent-override: 22%; }
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 98%; }

:root {
  /* ink */
  --ink: #0e1512; --ink-2: #44504a; --ink-3: #5f6c65;
  /* pagina */
  --bg: #ffffff; --bg-soft: #f3f7f4; --surface: #ffffff;
  /* verde del brand (dal logo) e sue declinazioni */
  --brand: #54bf8b; --brand-deep: #1f7a55; --mint: #dff6ea; --bright: #a9efc8;
  --forest: #0f2e1f; --forest-2: #184029; --forest-ink: #e4f8ec; --forest-muted: #9fc9b2;
  --line: rgba(14, 21, 18, .12); --line-strong: rgba(14, 21, 18, .22);
  --shadow-card: 0 10px 32px rgba(15, 46, 31, .12), 0 40px 40px rgba(15, 46, 31, .04);
  --shadow-soft: 0 1px 2px rgba(15, 46, 31, .06), 0 8px 24px rgba(15, 46, 31, .06);
  --wa: #25d366; --wa-ink: #073b1c;
  /* forme */
  --r-10: .625rem; --r-16: 1rem; --r-24: 1.5rem; --r-32: 2rem; --r-full: 9999px;
  /* ritmo */
  --gutter: clamp(1rem, 4vw, 2.5rem); --max: 75rem; --section: clamp(5rem, 10vw, 9rem);
  --ease: cubic-bezier(.2, .7, .2, 1); --ease-nav: cubic-bezier(.8, .05, .2, .95);
  --font-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --font-body: "Geist", "Geist Fallback", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #eef5f0; --ink-2: #b4c2b9; --ink-3: #8a9a90; --brand-deep: #7fd8ac;
    --bg: #0c1410; --bg-soft: #101b15; --surface: #142219;
    --mint: #163626; --line: rgba(238, 245, 240, .12); --line-strong: rgba(238, 245, 240, .24);
    --shadow-card: 0 10px 32px rgba(0, 0, 0, .45), 0 40px 40px rgba(0, 0, 0, .2);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #eef5f0; --ink-2: #b4c2b9; --ink-3: #8a9a90; --brand-deep: #7fd8ac;
  --bg: #0c1410; --bg-soft: #101b15; --surface: #142219;
  --mint: #163626; --line: rgba(238, 245, 240, .12); --line-strong: rgba(238, 245, 240, .24);
  --shadow-card: 0 10px 32px rgba(0, 0, 0, .45), 0 40px 40px rgba(0, 0, 0, .2);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
/* scroll-behavior:smooth solo senza JS: con GSAP attivo falsa le misure di ScrollTrigger quando la pagina si ri-misura gia' scrollata (cambio scheda, resize) e i widget in loop non partono piu'. Lenis fa gia' gli anchor morbidi. */
html.no-js { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.55; letter-spacing: .002em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
p { margin: 0 0 1em; max-width: 65ch; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 800; font-stretch: 92%; letter-spacing: -.025em; line-height: .95; text-wrap: balance; }
h1 { font-weight: 900; font-stretch: 90%; font-size: clamp(2.75rem, 7.6vw, 6rem); line-height: .9; letter-spacing: -.03em; }
h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); }
h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); letter-spacing: -.02em; line-height: 1.1; font-stretch: 96%; }
h4 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.lead { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.45; color: var(--ink-2); max-width: 38em; text-wrap: pretty; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-deep); margin-bottom: 1rem; }
.eyebrow::before { content: ""; width: 1.25rem; height: 2px; background: var(--brand); border-radius: 2px; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.muted { color: var(--ink-3); }
.small { font-size: .9375rem; }
.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; }
:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--bright); color: var(--forest); }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--forest); color: var(--forest-ink); padding: .75rem 1rem; border-radius: var(--r-full); transition: top .2s; }
.skip:focus { top: 1rem; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.section-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 46rem; }
.section-head.split { max-width: none; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 60rem) { .section-head.split { grid-template-columns: 1.3fr 1fr; gap: 3rem; } .section-head.split .lead { margin-bottom: .35rem; } }

/* ---------- icone ---------- */
.ic { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
.ic-lg { width: 1.75rem; height: 1.75rem; }
.icon-tile { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: var(--r-16); background: var(--mint); color: var(--brand-deep); }
.on-forest .icon-tile { background: rgba(169, 239, 200, .14); color: var(--bright); }

/* ---------- bottoni (pill, 52px) ---------- */
.btn { --btn-bg: var(--forest); --btn-ink: var(--forest-ink); display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; padding: .85rem 1.5rem; border-radius: var(--r-full); background: var(--btn-bg); color: var(--btn-ink); font-weight: 600; font-size: 1rem; letter-spacing: -.011em; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .18s var(--ease), background-color .15s ease-in-out, color .15s ease-in-out, box-shadow .2s var(--ease); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(15, 46, 31, .18); }
.btn:active { transform: translateY(1px) scale(.985); box-shadow: none; }
.btn .ic { width: 1.25rem; height: 1.25rem; }
.btn-wa { --btn-bg: var(--wa); --btn-ink: var(--wa-ink); }
.btn-wa:hover { --btn-bg: #20c25c; }
.btn-ghost { --btn-bg: transparent; --btn-ink: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { --btn-bg: var(--bg-soft); box-shadow: none; }
.btn-text { --btn-bg: transparent; --btn-ink: var(--ink); padding-inline: .5rem; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1.5px; }
.btn-text:hover { box-shadow: none; transform: none; color: var(--brand-deep); }
.on-bright .btn { --btn-bg: var(--forest); --btn-ink: var(--forest-ink); }
.on-bright .btn-text { --btn-bg: transparent; --btn-ink: var(--forest); }
.on-forest .btn { --btn-bg: var(--bright); --btn-ink: var(--forest); }
.on-forest .btn-text { --btn-bg: transparent; --btn-ink: var(--forest-ink); }
.on-forest .btn-ghost { --btn-bg: transparent; --btn-ink: var(--forest-ink); border-color: rgba(228, 248, 236, .3); }
.btn-lg { min-height: 3.75rem; padding: 1rem 2rem; font-size: 1.0625rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }

/* ---------- fasce colorate ---------- */
.on-bright { background: var(--bright); color: var(--forest); --ink: var(--forest); --ink-2: #1c4a33; --ink-3: #2f5f45; --line: rgba(15, 46, 31, .16); --eyebrow: #0f2e1f; }
.on-bright .eyebrow { color: var(--forest); } .on-bright .eyebrow::before { background: var(--forest); }
.on-forest { background: var(--forest); color: var(--forest-ink); --ink: var(--forest-ink); --ink-2: #bfdccb; --ink-3: var(--forest-muted); --line: rgba(228, 248, 236, .14); --line-strong: rgba(228, 248, 236, .28); --surface: var(--forest-2); --bg-soft: var(--forest-2); }
.on-forest .eyebrow { color: var(--bright); } .on-forest .eyebrow::before { background: var(--bright); }
.on-forest ::selection { background: var(--bright); color: var(--forest); }
.on-soft { background: var(--bg-soft); }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.nav.is-stuck { border-color: var(--line); }
.nav-in { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; }
.logo { display: inline-flex; align-items: center; margin-right: auto; }
.logo img { height: 2rem; width: auto; }
.logo .logo-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo .logo-light { display: none; } :root:not([data-theme="light"]) .logo .logo-dark { display: block; } }
:root[data-theme="dark"] .logo .logo-light { display: none; } :root[data-theme="dark"] .logo .logo-dark { display: block; }
.on-forest .logo .logo-light { display: none; } .on-forest .logo .logo-dark { display: block; }
.nav-links { display: none; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.nav-links a { display: inline-block; padding: .55rem .8rem; border-radius: var(--r-full); font-weight: 500; font-size: .9375rem; text-decoration: none; color: var(--ink-2); transition: background-color .15s, color .15s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); background: var(--bg-soft); }
.nav .btn { min-height: 2.75rem; padding: .6rem 1.1rem; font-size: .9375rem; }
.nav-toggle { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-full); border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; }
.nav-toggle span { display: block; width: 1.1rem; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .25s var(--ease), background-color .25s; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s var(--ease), top .25s var(--ease); }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
.nav-drawer { display: none; border-top: 1px solid var(--line); padding: .75rem 0 1.25rem; }
.nav-drawer[data-open="true"] { display: block; }
.nav-drawer ul { list-style: none; margin: 0; padding: 0; display: grid; }
.nav-drawer a { display: block; padding: .8rem .25rem; font-size: 1.125rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line); }
@media (min-width: 64rem) { .nav-links { display: flex; } .nav-toggle, .nav-drawer { display: none !important; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: clip; padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 7vw, 6rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.hero-grid > *, .stack > *, .calc > * { min-width: 0; }
@media (max-width: 30rem) { .calc-head { flex-wrap: wrap; } .calc-field.freq { grid-template-columns: 1fr; } .calc-field.freq .seg { display: flex; width: 100%; } .calc-field.freq .seg button { flex: 1; padding-inline: .4rem; } }
@media (min-width: 64rem) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 4rem; min-height: min(calc(100dvh - 4.5rem), 56rem); align-items: start; } .hero-grid > div:first-child { position: sticky; top: 7rem; padding-top: 1.5rem; } }
.hero h1 { max-width: 11ch; }
.hero .lead { margin-top: 1.5rem; color: var(--ink-2); }
.hero .btn-row { margin-top: 2rem; }
.hero-note { margin-top: 1.5rem; font-size: .9375rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.hero-note span { display: inline-flex; align-items: center; gap: .4rem; }
.hero-note .ic { color: var(--forest); }
.hero-bg { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(60rem 30rem at 85% -10%, rgba(255, 255, 255, .55), transparent 60%),
  radial-gradient(40rem 24rem at 0% 110%, rgba(84, 191, 139, .35), transparent 60%); }
.hero-bg::after { content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* carta del calcolatore (la mossa di Wise: prodotto vivo nel hero) */
.stack { position: relative; display: grid; gap: 1rem; }
.calc { position: relative; z-index: 2; background: #fff; color: var(--ink); --surface: #fff; --bg-soft: #f3f7f4; --mint: #dff6ea; --line-strong: rgba(14, 21, 18, .22); color-scheme: light; border-radius: var(--r-32); padding: clamp(1.25rem, 2.5vw, 2rem); box-shadow: var(--shadow-card); --ink: #0e1512; --ink-2: #44504a; --ink-3: #5f6c65; --line: rgba(14, 21, 18, .12); }
.on-bright .calc { background: #fff; }
.calc-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.calc-head h2 { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border-radius: var(--r-full); background: var(--mint); color: var(--brand-deep); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.calc-field { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-16); background: var(--bg-soft); margin-bottom: .75rem; }
.calc-field label { display: block; font-size: .8125rem; color: var(--ink-3); margin-bottom: .15rem; }
.calc-field strong { font-size: 1.0625rem; font-weight: 600; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-full); background: var(--surface); }
.stepper button { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: transparent; border: 0; color: var(--ink); cursor: pointer; border-radius: var(--r-full); transition: background-color .15s; }
.stepper button:hover { background: var(--mint); }
.stepper output { min-width: 2.25rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; padding: .2rem; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line-strong); }
.seg button { border: 0; background: transparent; color: var(--ink-2); padding: .45rem .8rem; border-radius: var(--r-full); font: inherit; font-weight: 600; font-size: .875rem; cursor: pointer; transition: background-color .15s, color .15s; }
.seg button[aria-pressed="true"] { background: var(--forest); color: var(--forest-ink); }
.calc-rows { margin: 1rem 0 .25rem; border-top: 1px dashed var(--line-strong); padding-top: .9rem; display: grid; gap: .5rem; font-size: .9375rem; }
.calc-rows div { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink-2); }
.calc-rows div strong { color: var(--ink); font-weight: 600; }
.calc-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: .75rem 0 1rem; }
.calc-total .price { font-family: var(--font-display); font-weight: 900; font-stretch: 90%; font-size: clamp(2.5rem, 5vw, 3.5rem); letter-spacing: -.03em; line-height: 1; }
.calc-total .price small { font-family: var(--font-body); font-weight: 500; font-size: 1rem; letter-spacing: 0; color: var(--ink-3); margin-left: .35rem; }
.calc-hint { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--brand-deep); font-weight: 500; margin-bottom: 1rem; }
.calc .btn { width: 100%; }
.calc-foot { margin-top: .9rem; font-size: .8125rem; color: var(--ink-3); text-align: center; }

/* ---------- tracker del pay run (hero) ----------
   Stato di default = tutto completato (nessun JS, reduced motion, GSAP assente). L'animazione parte da html:not(.no-js):not(.reduced). */
.tracker { position: relative; z-index: 3; background: var(--forest); color: var(--forest-ink); border-radius: var(--r-32); padding: clamp(1.35rem, 2.5vw, 2rem); box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(169, 239, 200, .14); display: grid; gap: 1.35rem; }
.tracker-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem .75rem; min-height: 2.4rem; }
.tracker-title { font-family: var(--font-body); font-size: clamp(1.1875rem, 1.6vw, 1.375rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.tr-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.tr-step { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1.1rem; align-items: start; padding-bottom: 1.4rem; }
.tr-step:last-child { padding-bottom: 0; }
.tr-text { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.4; padding-top: .4rem; }
.tr-dot { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 2px solid rgba(228, 248, 236, .3); }
.tr-dot i { position: absolute; border-radius: 50%; }
.tr-fill { inset: -2px; background: var(--bright); }
.tr-core { width: .5rem; height: .5rem; background: rgba(228, 248, 236, .55); opacity: 0; }
.tr-halo { inset: -2px; border: 2px solid var(--bright); opacity: 0; }
.tr-check { position: relative; width: 1.3rem; height: 1.3rem; fill: none; stroke: var(--forest); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tr-seg { position: absolute; left: calc(1.125rem - 1.5px); top: calc(2.25rem + 4px); bottom: 4px; width: 3px; border-radius: 3px; background: rgba(228, 248, 236, .16); }
.tr-seg i { position: absolute; inset: 0; border-radius: 3px; background: var(--bright); transform-origin: 50% 0; }
.tr-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem .5rem .75rem; border-radius: var(--r-full); background: rgba(169, 239, 200, .16); color: var(--bright); font-size: .9375rem; font-weight: 600; white-space: nowrap; }
.tr-chip .ic { width: 1.25rem; height: 1.25rem; }
/* partenza dell'animazione: i passi sono "da fare" finché GSAP non li completa */
html:not(.no-js):not(.reduced) .tracker:not(.is-static) .tr-seg i { transform: scaleY(0); }
html:not(.no-js):not(.reduced) .tracker:not(.is-static) .tr-fill { transform: scale(0); }
html:not(.no-js):not(.reduced) .tracker:not(.is-static) .tr-core { opacity: 1; }
html:not(.no-js):not(.reduced) .tracker:not(.is-static) .tr-check { opacity: 0; }
html:not(.no-js):not(.reduced) .tracker:not(.is-static) .tr-text { opacity: .55; }
html:not(.no-js):not(.reduced) .tracker:not(.is-static) .tr-chip { opacity: 0; }
.illustrative { font-size: .75rem; color: var(--ink-3); text-align: right; }

/* ---------- striscia di prove (fatti, non recensioni) ---------- */
.strip { border-block: 1px solid var(--line); }
.strip ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); }
.strip li { display: flex; gap: .85rem; align-items: flex-start; padding: 1.5rem 1.25rem 1.5rem 0; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; }
.strip li .ic { color: var(--brand-deep); margin-top: .15rem; }
@media (min-width: 60rem) { .strip ul { grid-template-columns: repeat(4, 1fr); } .strip li { padding-block: 1.75rem; } .strip li + li { border-left: 1px solid var(--line); padding-left: 1.5rem; } }
@media (max-width: 59.99rem) { .strip li:nth-child(odd) { border-right: 1px solid var(--line); } .strip li:nth-child(even) { padding-left: 1.25rem; } .strip li:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* ---------- processo (timeline) ---------- */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-weight: 900; font-stretch: 90%; font-size: 1.75rem; letter-spacing: -.03em; color: var(--brand-deep); line-height: 1; padding-top: .15rem; }
.steps h3 { margin-bottom: .35rem; }
.steps p { color: var(--ink-2); max-width: 52ch; }
@media (min-width: 60rem) { .steps { grid-template-columns: repeat(5, 1fr); border-top: 0; gap: 1.5rem; } .steps li { grid-template-columns: 1fr; border-bottom: 0; border-top: 2px solid var(--line); padding-top: 1.25rem; } .steps.four { grid-template-columns: repeat(4, 1fr); } }

/* ---------- bento dei servizi ---------- */
.bento { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(16rem, auto); } .bento .big { grid-column: span 2; grid-row: span 2; } .bento .big ~ .tile:nth-child(4):last-child { grid-column: 1 / -1; grid-row: auto; min-height: 0; } }
.tile { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.5rem, 2.5vw, 2.25rem); border-radius: var(--r-24); background: var(--bg-soft); text-decoration: none; color: inherit; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.tile:hover .tile-link { color: var(--brand-deep); }
.tile h3 { margin-top: auto; }
.tile p { color: var(--ink-2); }
.tile-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9375rem; }
.tile.big { background: var(--forest); color: var(--forest-ink); --ink-2: #bfdccb; }
.tile.big .icon-tile { background: rgba(169, 239, 200, .14); color: var(--bright); }
.tile.big h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.tile.big .price-tag { font-family: var(--font-display); font-weight: 900; font-stretch: 90%; font-size: clamp(3rem, 6vw, 5rem); letter-spacing: -.03em; line-height: 1; color: var(--bright); }
.tile.big .price-tag small { font-family: var(--font-body); font-weight: 500; font-size: 1rem; letter-spacing: 0; color: var(--forest-muted); }
.tile.mint { background: var(--mint); }


/* tile dentro la fascia forest: contrasto corretto */
.on-forest .tile { background: var(--forest-2); color: var(--forest-ink); --ink-2: #bfdccb; }
.on-forest .tile .icon-tile { background: rgba(169, 239, 200, .14); color: var(--bright); }
.on-forest .tile.mint { background: var(--bright); color: var(--forest); --ink-2: #1c4a33; }
.on-forest .tile.mint .icon-tile { background: rgba(15, 46, 31, .1); color: var(--forest); }
.on-forest .tile.big { background: #0a2217; }
.on-forest .tile.big .example-slip { background: rgba(255, 255, 255, .05); }
.on-forest .tile:hover .tile-link { color: var(--bright); }
.on-forest .tile.mint:hover .tile-link { color: var(--forest); }

/* ---------- prezzi ---------- */
.plans { display: grid; gap: 1rem; }
@media (min-width: 60rem) { .plans { grid-template-columns: 1.1fr 1.1fr 1fr; align-items: stretch; } }
.plan { display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r-32); background: var(--surface); border: 1px solid var(--line); }
.plan.hot { background: var(--forest); color: var(--forest-ink); border-color: transparent; --ink-2: #bfdccb; --ink-3: var(--forest-muted); --line: rgba(228, 248, 236, .14); }
.plan .eyebrow { margin-bottom: 0; }
.plan.hot .eyebrow { color: var(--bright); } .plan.hot .eyebrow::before { background: var(--bright); }
.plan h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.plan .price { display: flex; align-items: baseline; gap: .5rem; font-family: var(--font-display); font-weight: 900; font-stretch: 90%; font-size: clamp(3.5rem, 7vw, 5.5rem); letter-spacing: -.035em; line-height: 1; }
.plan .price small { font-family: var(--font-body); font-weight: 500; font-size: 1rem; letter-spacing: 0; color: var(--ink-3); }
.plan .covers { font-weight: 600; letter-spacing: -.01em; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.plan li { display: flex; gap: .65rem; align-items: flex-start; color: var(--ink-2); font-size: .9875rem; }
.plan li .ic { color: var(--brand-deep); margin-top: .2rem; }
.plan.hot li .ic { color: var(--bright); }
.plan .btn { margin-top: auto; width: 100%; }
.plan.hot .btn { --btn-bg: var(--bright); --btn-ink: var(--forest); }
.plan .fine { font-size: .8125rem; color: var(--ink-3); }

/* ---------- righe divise (persone, regole) ---------- */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rows li { display: grid; gap: .5rem 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 48rem) { .rows li { grid-template-columns: 14rem 1fr auto; align-items: center; } }
.rows h3 { font-size: 1.25rem; }
.rows p { color: var(--ink-2); }
.rows a.more { font-weight: 600; font-size: .9375rem; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.two-col { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 60rem) { .two-col { grid-template-columns: 1fr 1.4fr; gap: 4rem; } .two-col .sticky { position: sticky; top: 6rem; } }

/* ---------- guide ---------- */
.cards { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .cards { grid-template-columns: repeat(3, 1fr); } .cards.two { grid-template-columns: repeat(2, 1fr); } }
.card { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; border-radius: var(--r-24); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: transparent; }
.card .eyebrow { margin-bottom: 0; }
.card h3 { font-size: 1.25rem; }
.card p { color: var(--ink-2); font-size: .9875rem; }
.card .tile-link { margin-top: auto; padding-top: .5rem; }

/* ---------- FAQ (disclosure) ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.25rem 0; font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--brand-deep); transition: transform .25s var(--ease); }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq .faq-a { padding: 0 0 1.5rem; color: var(--ink-2); max-width: 60ch; }
.faq .faq-a a { color: var(--brand-deep); }
.faq-src { display: block; margin-top: .5rem; font-size: .8125rem; color: var(--ink-3); }

/* ---------- CTA finale ---------- */
.cta-band { text-align: center; padding-block: clamp(5rem, 12vw, 9rem); }
.cta-band h2 { font-size: clamp(2.5rem, 7vw, 5.5rem); font-weight: 900; font-stretch: 90%; letter-spacing: -.03em; line-height: .9; margin-inline: auto; max-width: 14ch; }
.cta-band .lead { margin: 1.5rem auto 2rem; }
.cta-band .btn-row { justify-content: center; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 3.5rem 0 7rem; font-size: .9375rem; }
@media (min-width: 64rem) { .footer { padding-bottom: 3rem; } }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer h4 { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .9rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer a { text-decoration: none; color: var(--ink-2); } .footer a:hover { color: var(--ink); text-decoration: underline; }
.footer-brand p { color: var(--ink-2); margin-top: 1rem; }
.footer-legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; color: var(--ink-3); font-size: .8125rem; }
.footer-legal p { max-width: none; }

/* barra WhatsApp fissa (telefono) */
.wa-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.wa-bar .btn { width: 100%; }
@media (min-width: 64rem) { .wa-bar { display: none; } }

/* ---------- pagine interne ---------- */
.page-hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); }
.page-hero h1 { font-size: clamp(2.5rem, 6vw, 4.75rem); max-width: 16ch; }
.page-hero .lead { margin-top: 1.25rem; }
.page-hero .btn-row { margin-top: 1.75rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0 0 1.5rem; padding: 0; font-size: .875rem; color: var(--ink-3); }
.crumbs a { text-decoration: none; color: var(--ink-2); } .crumbs a:hover { text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: .35rem; opacity: .5; }
.prose { max-width: 42rem; }
.prose h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); margin: 2.5rem 0 1rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.75rem 0 .6rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { padding-left: 1.25rem; margin: 0 0 1.25rem; display: grid; gap: .4rem; }
.prose a { color: var(--brand-deep); }
.prose .lead { color: var(--ink-2); }
.article-grid { display: grid; gap: 3rem; }
@media (min-width: 64rem) { .article-grid { grid-template-columns: minmax(0, 1fr) 20rem; gap: 4rem; } }
.aside { display: grid; gap: 1rem; align-self: start; position: sticky; top: 6rem; }
.aside-box { padding: 1.5rem; border-radius: var(--r-24); background: var(--bg-soft); }
.aside-box h3 { font-size: 1.125rem; margin-bottom: .75rem; }
.aside-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .9375rem; }
.aside-box li { display: flex; gap: .5rem; align-items: flex-start; color: var(--ink-2); }
.aside-box li .ic { color: var(--brand-deep); margin-top: .2rem; }
.aside-box.forest { background: var(--forest); color: var(--forest-ink); --ink-2: #bfdccb; }
.aside-box.forest .btn { --btn-bg: var(--bright); --btn-ink: var(--forest); width: 100%; margin-top: .75rem; }
.aside-box.forest li .ic { color: var(--bright); }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.facts li { display: grid; gap: .25rem; padding: 1rem 1.25rem; border-radius: var(--r-16); background: var(--bg-soft); color: var(--ink-2); font-size: .9875rem; }
.facts li a { font-size: .8125rem; color: var(--ink-3); text-decoration: none; }
.facts li a:hover { text-decoration: underline; }
.benefits { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .benefits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .benefits { grid-template-columns: repeat(3, 1fr); } }
.benefit { display: grid; gap: .75rem; padding: 1.5rem; border-radius: var(--r-24); background: var(--bg-soft); }
.benefit h3 { font-size: 1.25rem; }
.benefit p { color: var(--ink-2); font-size: .9875rem; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.checklist li { display: flex; gap: .65rem; align-items: flex-start; color: var(--ink-2); }
.checklist li .ic { color: var(--brand-deep); margin-top: .2rem; }
.on-forest .checklist li .ic { color: var(--bright); }
.notice { padding: 1rem 1.25rem; border-radius: var(--r-16); background: var(--mint); color: var(--brand-deep); font-size: .9375rem; font-weight: 500; }
.tbc { outline: 2px dashed #d08a00; outline-offset: 2px; border-radius: 4px; }


/* ---------- payslip di esempio dentro il tile grande ---------- */
.example-slip { background: rgba(255, 255, 255, .06); border: 1px solid rgba(228, 248, 236, .14); border-radius: var(--r-16); padding: 1rem 1.25rem; margin-top: .5rem; }
.example-slip .eyebrow { margin-bottom: .5rem; }
.slip { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.slip td { padding: .45rem 0; border-bottom: 1px solid rgba(228, 248, 236, .1); color: var(--ink-2); }
.slip td:last-child { text-align: right; color: var(--ink); font-weight: 500; }
.slip tr.total td { border-bottom: 0; padding-top: .7rem; font-weight: 700; color: var(--bright); font-size: 1.0625rem; }
.example-slip .illustrative { margin-top: .5rem; text-align: left; color: var(--forest-muted); }
.tile.big .example-slip + h3 { margin-top: 1.25rem; }

/* ---------- card delle date (fascia verde chiaro) ---------- */
.bento.dates { grid-auto-rows: auto; }
@media (min-width: 64rem) { .bento.dates { grid-template-columns: repeat(4, 1fr); } }
.date-card { display: grid; gap: .5rem; align-content: start; padding: 1.75rem; border-radius: var(--r-24); background: rgba(255, 255, 255, .55); color: var(--forest); text-decoration: none; border: 1px solid rgba(15, 46, 31, .08); transition: transform .25s var(--ease), background-color .25s; }
.date-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .8); }
.date-card .big-num { font-family: var(--font-display); font-weight: 900; font-stretch: 90%; font-size: clamp(2.75rem, 5vw, 4rem); letter-spacing: -.035em; line-height: .95; }
.date-card strong { font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.3; }
.date-card span:last-child { font-size: .9375rem; color: var(--ink-2); }
.on-bright .small { color: var(--ink-2); margin-top: 1.5rem; }

/* ---------- hub FAQ ---------- */
.faq-group + .faq-group { margin-top: clamp(2.5rem, 5vw, 4rem); }
.faq-group h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); margin-bottom: 1rem; }
.toc a { text-decoration: none; color: var(--ink-2); } .toc a:hover { color: var(--brand-deep); text-decoration: underline; }
.aside .aside-box p { font-size: .9375rem; }
.rows li span:last-child { display: none; }

/* ---------- hero: titolo spezzato in parole (SplitText) ---------- */
/* maschere del titolo: il ritaglio si allarga con clip-path (nessun effetto sul layout, i discendenti non vengono tagliati) */
.hl-mask { overflow: visible !important; clip-path: inset(-.14em -.08em); }

/* ---------- Payroll over WhatsApp (chat animata) ---------- */
.section.wa-section { padding-block: var(--section); }
.wa-grid { display: grid; gap: 2.5rem; align-items: center; }
.wa-grid > * { min-width: 0; }
@media (min-width: 60rem) { .wa-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.wa-copy .lead { margin-top: 1.25rem; }
.wa-copy .btn-row { margin-top: 2rem; }
.chat { width: 100%; max-width: 30rem; justify-self: center; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-32); box-shadow: var(--shadow-card); overflow: hidden; }
@media (min-width: 60rem) { .chat { justify-self: end; } }
.chat-head { display: flex; align-items: center; gap: .75rem; padding: .95rem 1.25rem; background: var(--forest); color: var(--forest-ink); }
.chat-head strong { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.chat-avatar { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--wa); color: var(--wa-ink); }
.chat-body { list-style: none; margin: 0; padding: 1.25rem; display: grid; gap: .65rem; }
.msg { position: relative; max-width: 86%; }
.msg.out { justify-self: end; }
.msg.in { justify-self: start; }
.msg.out .bubble { transform-origin: 100% 100%; }
.msg.in .bubble { transform-origin: 0 100%; }
.bubble { max-width: none; margin: 0; padding: .7rem .95rem; border-radius: 1.1rem; font-size: .9875rem; line-height: 1.4; text-wrap: pretty; }
.msg.out .bubble { background: var(--bright); color: var(--forest); border-bottom-right-radius: .35rem; }
.msg.in .bubble { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: .35rem; }
.attach { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; padding: .35rem .7rem .35rem .55rem; border-radius: var(--r-full); background: var(--mint); color: var(--brand-deep); font-size: .8125rem; font-weight: 600; }
.attach .ic { width: 1rem; height: 1rem; }
.bubble .attach { display: flex; width: max-content; }
.typing { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: .3rem; padding: .95rem 1rem; border-radius: 1.1rem; border-bottom-left-radius: .35rem; background: var(--surface); border: 1px solid var(--line); opacity: 0; pointer-events: none; }
.typing i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--ink-3); }
.chat .illustrative { margin: 0; padding: 0 1.25rem 1rem; text-align: left; }
/* partenza dell'animazione: bolle nascoste finché la chat non entra in vista */
html:not(.no-js):not(.reduced) .chat:not(.is-static) .bubble { opacity: 0; }

/* ---------- scadenza PAYE: anello con il conto alla rovescia ---------- */
.dl-ring[hidden], .dl-next[hidden] { display: none; }
.date-live.is-live .big-num { display: none; }
.dl-ring { position: relative; width: 7.5rem; height: 7.5rem; }
.dl-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.dl-ring circle { fill: none; stroke-width: 9; }
.dl-track { stroke: rgba(15, 46, 31, .14); }
.dl-bar { stroke: var(--forest); stroke-linecap: round; }
.dl-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: .1rem; }
.dl-num { font-family: var(--font-display); font-weight: 900; font-stretch: 90%; font-size: 2.75rem; letter-spacing: -.03em; line-height: .9; }
.dl-cap { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.dl-next { font-style: normal; font-weight: 600; font-size: .9375rem; line-height: 1.35; }

/* ---------- motion ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); will-change: transform, opacity; }
.no-js [data-reveal], .reduced [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}