/* Loaded last: snaps every block (home, footer, pricing, CTA, widgets, blog) onto the system tokens at the top of home.css. */

/* Type: one H1, one H2 size, body sizes from the 12/13/14/16/18 set */
.site .h1 { font-size: calc(var(--h1) * 1px); }
.site :is(.h2, .wg-h2, .cta-h, .closing .h2) { font-size: var(--t-36); line-height: 1.12; letter-spacing: -0.02em; }
@media (max-width: 860px) { .site .h1 { font-size: var(--t-56); } }

/* Hero: 56 px from the nav to the H1; TrustScore and press sit under the CTAs on desktop (inside 900 px), after the product on phones */
.site .hero-copy { padding-block: 56px 20px; }
.site .hero-ui { padding-bottom: 40px; }
.hero-proof { order: 0; margin-bottom: 28px; }
.hp-in { display: grid; justify-items: start; gap: 6px; max-width: 720px; font-size: var(--t-14); line-height: 1.4; }
.hp-tp { display: inline-flex; align-items: baseline; gap: 8px; color: inherit; text-decoration: none; }
.hp-tp > b { font-weight: 500; font-size: var(--t-14); }
.hp-tp > span { color: var(--ink-2); }
.hero:not(.light) .hp-tp > span, .hero:not(.light) .hp-k, .hero:not(.light) .hp-logos li { color: rgb(255 255 255 / 0.72); }
.hp-press { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.hp-k { color: var(--ink-2); }
.hp-logos { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.hp-logos li { color: var(--ink-2); white-space: nowrap; }
.hp-logos { gap: 4px 0; }
.hp-logos li:not(:last-child)::after { content: ","; margin-right: 6px; }
@media (hover: hover) and (pointer: fine) { .hp-tp:hover > b { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 860px) {
  .site .hero-copy { padding-block: 32px 20px; }
  .site .hero-ui { padding-bottom: 20px; }
  .hero-proof { order: 3; margin: 0 0 28px; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / 0.12); }
  .hero.light .hero-proof { border-top-color: var(--line); }
}

/* A full-width breath before the stories: one real photograph, warm, no faces */
.respiro { position: relative; height: clamp(240px, 30vw, 450px); overflow: hidden; background: #2a1a10; }
.respiro img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }

/* Real stories: people on sand, the measured result first */
.site:not([data-ritmo="prodotto"]) #casi.st { background: var(--sand, #eee8de); }
.st-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.st-item article { display: grid; align-content: start; gap: 20px; height: 100%; padding: 28px; border-radius: var(--r-card); background: var(--card, #fff); box-shadow: var(--card-shadow); }
.st-who b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: var(--t-28); line-height: 1.1; letter-spacing: -0.015em; }
.st-who span { display: block; margin-top: 4px; font-size: var(--t-14); color: var(--ink-2); }
.st-big { display: block; font-family: var(--font-serif); font-weight: 400; font-size: var(--t-36); line-height: 1.1; letter-spacing: -0.02em; color: var(--brand); }
.st-res p, .st-was p { font-size: var(--t-16); line-height: 1.5; }
.st-res p { margin-top: 6px; }
.st-k { font-size: var(--t-13); font-weight: 500; color: var(--ink-2); margin-bottom: 4px; }
.st-was { padding-top: 16px; border-top: 1px solid var(--line); }
.st-was p:not(.st-k) { color: var(--ink-2); }
.st-link { justify-self: start; align-self: end; min-height: 44px; display: inline-flex; align-items: center; }
.st-note { margin-top: 16px; font-size: var(--t-13); color: var(--ink-3); }
@media (max-width: 860px) { .st-list { grid-template-columns: minmax(0, 1fr); gap: var(--m-card-gap); } .st-item article { padding: var(--m-card-pad); gap: 16px; } }

/* Closing A: the consultant's signature is the last image of the page */
.site .cta-a .cta-a-stage.cta-sign, .site .cta-a .cta-a-stage { height: auto; overflow: visible; }
.site .cta-a .cta-a-stage::before, .site .cta-a .cta-a-stage::after, .site .cta-a .cta-a-node { display: none; }
.site .sg { width: min(560px, 100%); margin-inline: auto; display: grid; border-radius: var(--r-card); background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 24px 60px -30px rgb(2 125 250 / 0.5); color: #fff; font-size: var(--t-14); }
.sg-sec { padding: 20px 24px; }
.sg-sec + .sg-sec { border-top: 1px solid rgb(255 255 255 / 0.1); }
.sg-k { font-size: var(--t-13); color: rgb(255 255 255 / 0.72); margin-bottom: 12px; }
.sg-person { display: flex; align-items: center; gap: 12px; }
.sg-person img { width: 40px; height: 40px; border-radius: var(--r-round); object-fit: cover; }
.sg-person b { display: block; font-weight: 500; font-size: var(--t-16); }
.sg-person span { display: block; font-size: var(--t-13); color: rgb(255 255 255 / 0.72); }
.sg-date { margin-top: 12px; font-size: var(--t-13); color: rgb(255 255 255 / 0.72); }
.sg-act { display: grid; gap: 12px; }
.sg-act li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.sg-av { width: 24px; height: 24px; border-radius: var(--r-round); object-fit: cover; }
.sg-act b { font-weight: 500; }
.sg-act time { font-size: var(--t-13); color: rgb(255 255 255 / 0.72); }
.sg-move { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: var(--r-ctl); background: rgb(255 255 255 / 0.1); font-size: var(--t-13); }
.cta-js .sg .sg-act li { opacity: 0; transform: translateY(4px); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.cta-js .sg.is-in .sg-act li { opacity: 1; transform: none; }
.cta-js .sg.is-in .sg-act li:nth-child(2) { transition-delay: 60ms; }
.cta-js .sg.is-in .sg-act li:nth-child(3) { transition-delay: 120ms; }

/* Chi legge i tuoi numeri: two columns on one top line */
.chi-g { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: calc(100% / 12); align-items: start; }
.chi-g-text .sec-head { margin-bottom: 24px; }
.chi-g-k { font-size: var(--t-13); font-weight: 500; color: var(--ink-2); margin-bottom: 8px; }
.chi-g-list { border-top: 1px solid var(--line-2); margin-bottom: 20px; }
.chi-g-list li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--t-16); font-weight: 500; }
.chi-g-photo img { display: block; width: 100%; max-width: 400px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-card); background: var(--surface-2); }
.chi-g-photo figcaption { margin-top: 10px; font-size: var(--t-13); color: var(--ink-2); }
@media (max-width: 860px) {
  .chi-g { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .chi-g-photo img { max-width: none; aspect-ratio: 4 / 3; object-position: 50% 30%; }
}

/* Stories: the single note sits next to the title */
.st-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.st-tag { font-size: var(--t-13); color: var(--ink-2); }
/* Come funziona: three plain steps in a row, then the price in one line with the button */
.site #come-funziona .how { grid-template-columns: minmax(0, 1fr); }
.site #come-funziona .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.how-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-size: var(--t-16); }
.how-offer b { font-weight: 500; }
@media (max-width: 860px) { .site #come-funziona .steps { grid-template-columns: minmax(0, 1fr); gap: 24px; } .how-offer .btn { width: 100%; justify-content: center; } }
/* (kept for /roadmap parity) */
.site .step { grid-template-columns: minmax(0, 1fr); }
.site .step > * { grid-column: 1; }
.site .steps { gap: 28px; align-self: center; }
.how-card { display: grid; gap: 20px; padding: 28px; border-radius: var(--r-card); background: var(--card, #fff); box-shadow: var(--card-shadow), 0 24px 48px -32px rgb(2 55 108 / 0.25); }
.how-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.how-card-name { font-size: var(--t-18); font-weight: 500; }
.how-price { display: flex; align-items: baseline; gap: 8px; }
.how-price b { font-family: var(--font-serif); font-weight: 400; font-size: var(--t-36); letter-spacing: -0.02em; line-height: 1; }
.how-price span { font-size: var(--t-13); color: var(--ink-2); }
.how-inc { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.how-inc li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; font-size: var(--t-14); line-height: 1.45; color: var(--ink-2); }
.how-inc b { font-weight: 500; color: var(--fg); }
.how-tick { width: 16px; height: 16px; margin-top: 2px; color: var(--brand); }
.how-buy { width: 100%; justify-content: center; }
@media (max-width: 860px) { .how-card { padding: var(--m-card-pad); } }

/* Pricing: a visible hover on the columns; on phones only the Roadmap card keeps its preview */
@media (hover: hover) and (pointer: fine) {
  .site .pr-a-plan { transition: background-color var(--dur-2) var(--ease-out); border-radius: var(--r-card); }
  .site .pr-a-plan:hover { background-color: #f7f9fc; }
}
@media (max-width: 640px) { .site .pr-a-plan:not(:has(.is-primary)) .pv { display: none; } }

/* Mobile menu: full width under the nav, a veil on the page, the CTA at the bottom; mobile bar themed like the nav */
@media (max-width: 860px) {
  .site .menu-panel { position: fixed; left: 0; right: 0; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); width: auto; padding: 8px var(--gutter) 16px; border-radius: 0 0 var(--r-card) var(--r-card); box-shadow: 0 16px 40px -16px rgb(1 26 83 / 0.35); z-index: 2; }
  .site .menu-panel a:not(.btn) { min-height: 48px; display: flex; align-items: center; padding: 0 4px; border-bottom: 1px solid #e1e7ef; border-radius: 0; font-size: var(--t-16); }
  .site .menu-panel .menu-cta { margin-top: 16px; width: 100%; height: var(--btn-h-site); justify-content: center; }
  .site .menu[open] > summary::before { content: ""; position: fixed; inset: calc(var(--nav-h) + env(safe-area-inset-top, 0px)) 0 0 0; background: rgb(2 12 40 / 0.4); z-index: 1; cursor: default; }
  .site .menu[open] .menu-panel { animation: menu-in var(--dur-2) var(--ease-out); }
  /* one CTA in view on phones (mbar.js): the bar takes the night on dark chapters, the nav CTA stays in the menu */
  .mbar[data-theme="dark"] { background: color-mix(in srgb, #071846 92%, transparent); box-shadow: 0 -1px 0 rgb(255 255 255 / 0.1); }
  .mbar[data-theme="dark"] .btn { background: #ffffff; color: #02376c; }
  .site .gnav .head-actions > .btn { display: none; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .site .menu[open] .menu-panel { animation: none; } .cta-js .sg .sg-act li { transition: none; } }

/* Small text: at least 4.5:1 on white and sand */
.site :is(.cs-note, .st-note, .wg-note, .pr-fit, .fa-col-h, .ff, .src span) { color: var(--ink-2); }
/* backdrop-filter would make the nav the containing block of the fixed menu and veil */
@media (max-width: 860px) { .gnav:has(.menu[open]) { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--night) 100%, transparent); } .gnav[data-theme="light"]:has(.menu[open]) { background: #ffffff; } }

/* Snap the blocks onto the 12/13/14/16/18 + 28/36/56 set */
.site .btn { font-size: var(--t-14); }
.site .fa a, .site .fb a, .site .fc a, .site .fd a { font-size: var(--t-14); }
.site footer .tag { font-size: var(--t-12); }
.site :is(.pr-ds, .pr-btn) { font-size: var(--t-14); }
.site .pr-price b { font-size: var(--t-28); }
.site :is(.pr-price small, .pr-fit, .pr-k, .pr-k b) { font-size: var(--t-13); }
.site .pr-badge { font-size: var(--t-12); }
.site .pv, .site .pv :is(span, b, p, small, i) { font-size: var(--t-12); }
.site .pv .pv-big { font-size: var(--t-18); }
.site :is(.t-out, .t-in) { font-size: var(--t-12); border-radius: var(--r-ctl); }
.site .pr-a-plan b, .site .pr-d b { font-size: inherit; }
.site .pr-a-plan .pr-price b, .site .pr-d .pr-price b { font-size: var(--t-28); }
.site .bl-t { font-size: var(--t-18); }
.site .bl-cover :is(.bl-c-cat, .bl-c-n) { font-size: var(--t-12); }

/* Four radii: 6 controls and chips, 8 buttons, 12 cards and windows, round avatars and bars */
.site .bl-card, .site .bl-cover { border-radius: var(--r-card); }
.site :is(.pv-bar, .pv-bar i, .pv-prog, .pv-prog i) { border-radius: var(--r-round); }

/* Two button heights: 40 (44 on phones) on the page, 32 in the nav and inside the UI */
.site .pr-btn { height: var(--btn-h-site); min-height: 0; }
.site .gnav .btn-sm { position: relative; height: var(--btn-h-ui); }
.site .gnav .btn-sm::before { content: ""; position: absolute; inset: -6px -4px; }
@media (max-width: 860px) { .site .gnav .btn-sm { height: var(--btn-h-ui); } }
.site .pv-inst li b { border-radius: var(--r-ctl); }
.site .ext { font-size: var(--t-12); }
.chi-g-photo { justify-self: end; width: 100%; max-width: 440px; } .chi-g-photo img { max-width: none; }
.site .ext { opacity: 1; }
/* Pricing on phones in two screens: the scale reads as a scale, three lines per plan, the Roadmap keeps its preview */
@media (max-width: 640px) {
  .site .pr-a-grid { gap: 12px; }
  .site .pr-a-plan { padding: 16px; }
  .site .pr-a-plan .pv { max-height: 150px; overflow: hidden; margin-bottom: 12px; }
  .site .pr-a-plan:not(.is-on) .pr-list > li:nth-child(n + 4), .site .pr-a-plan:not(.is-on) .pr-k { display: none; }
  .site .pr-a-plan .pr-list { margin-top: 12px; padding-top: 12px; gap: 6px; }
  .site .pr-a-plan .pr-btn { margin-top: 12px; }
  .site .pr-a-plan .pr-ds { margin-top: 2px; }
  .site .pr-a-plan .pr-fit:empty { display: none; }
}
.site main > section.cta-dark:not(#x-none) { background: var(--night); color: #fff; }

/* Menu CTA always reads as the primary, whatever the header theme */
.site .gnav .menu-panel .menu-cta { background: var(--brand); color: #ffffff; box-shadow: none; }
.site .pr-d .pr-btn.is-primary { color: #02376c; }
.site .cta .btn.cta-btn-light { color: #02376c; }
.site:not([data-ritmo="prodotto"]) :is(.pr-badge, .t-in, .pv-months li.s) { color: var(--brand-press); }
.site[data-ritmo="prodotto"] :is(.pr-badge, .t-in, .pv-months li.s) { color: var(--sky); }
.site #come-funziona .step { align-content: start; }
/* The «Esempio» chip in the closing signature, same chip as the Roadmap UI */
.sg-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 24px; border-bottom: 1px solid rgb(255 255 255 / 0.12); font-size: var(--t-13); line-height: 18px; color: rgb(255 255 255 / 0.78); }
.sg-bar .sg-example { margin-left: 0; }
.sg-example { margin-left: 6px; padding: 0 6px; border-radius: var(--r-ctl); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22); font-size: var(--t-12); line-height: 18px; color: rgb(255 255 255 / 0.72); white-space: nowrap; }
/* calculator: the button closes the input column on the last line of the receipt */
.site #costi .wg-costi-cta { margin-top: auto; padding-top: 20px; }

/* Press caption under the Roadmap window, closing the hero */
.hero-press { order: 4; padding: 0 0 32px; font-size: var(--t-14); line-height: 1.4; }
.hero-press .hp-press { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.hero:not(.light) .hero-press :is(.hp-k, .hp-logos li) { color: rgb(255 255 255 / 0.72); }
.h-vita .hero-press { padding-inline: var(--gutter); max-width: calc(var(--col) + 2 * var(--gutter)); margin-inline: auto; }

/* Closing B: Bosio as a small portrait beside his name, as decided on 7/10 until the shoot */
.site .cta-b-art { padding-bottom: 0; justify-items: start; gap: 16px; }
.site .cta-b-photo { width: auto; aspect-ratio: auto; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; overflow: visible; border-radius: 0; box-shadow: none; }
.site .cta-b-photo img { width: 72px; height: 72px; border-radius: var(--r-card); }
.site .cta-b-photo::after { display: none; }
.site .cta-b-photo figcaption { position: static; }
.site .cta-b-art .cta-rev { position: relative; left: auto; bottom: auto; width: auto; }

/* Footer B on the night: 13 px text at 4.5:1 or more, the OCF mark in white */
.site .fb :is(.fb-band, .fb-band p, .fb-band li, .fb-band small, .ff, .ff p) { color: rgb(255 255 255 / 0.78); }
.site .fb img[src*="ocf-notte"], .site .fb img[src*="assoscf-notte"] { filter: brightness(0) invert(1); opacity: 0.85; }

/* Middle of the home: the product is the visual, nothing sits in a card on a flat ground. Head anatomy, scale and padding follow the kind of section. /roadmap (.rl) keeps its own. */

/* Come funziona: three steps on one line, each icon with its title 16 px below as one block */
.site:not(.rl) #come-funziona .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
@media (max-width: 860px) { .site:not(.rl) #come-funziona .steps { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Stories as two clean cards on the sand, the measured result at display size (8/10 mattina, 7); reviews are their own section */
.site:not(.rl) #casi .st-big { font-size: var(--t-36); line-height: 1; letter-spacing: -0.025em; }
.site:not(.rl) #casi .st-was { border-top-color: var(--line-2); }
/* the FAQ's divider runs edge to edge; after a band of another colour the colour change already divides */
.site:not(.rl) #faq:not(#_) { border-top: 1px solid var(--line-2); }
.site:not(.rl) #prezzi + #faq:not(#_) { border-top: 0; }
.site:not(.rl) #recensioni .h2 { font-size: var(--t-28); }
.site:not(.rl) #recensioni .tp-score { padding: 0; box-shadow: none; }
.site .rev-head .sec-head { margin-bottom: 0; }
.site .rev-head { align-items: last baseline; row-gap: var(--sp-title-lede); margin-bottom: var(--sp-head-content); }
.site:not(.rl) #recensioni .revs { gap: 48px; }
.site:not(.rl) #recensioni .rev { padding: 0; border-radius: 0; background: none; box-shadow: none; }
@media (min-width: 861px) {
}
@media (max-width: 860px) {
  .site:not(.rl) #recensioni .revs { gap: 0; }
  .site:not(.rl) #recensioni .tp-score { flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  .site:not(.rl) #recensioni .rev + .rev { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
}

/* Pricing: only the Roadmap keeps an outline; the other plans read as open columns aligned on the same rows */
.site:not(.rl) #prezzi .pr-a-plan:not(.is-on) { box-shadow: none; }

/* Guides and FAQ are service sections: smaller title, shorter padding, a rule where two white sections meet */
.site:not(.rl) :is(#guide, #faq) { padding-block: calc(var(--sec-y) * 0.8); }
@media (max-width: 860px) { .site:not(.rl) :is(#guide, #faq) { padding-block: var(--m-sec); } }
.site:not(.rl) :is(#guide, #faq) .h2 { font-size: var(--t-28); }
.site:not(.rl) #guide .bl-more { color: var(--brand-press); }
.site footer .tag { opacity: 1; }

/* Pricing: the open plans' mini-UI sits straight in the column, no grey well; card edges on the text's left edge */
.site:not(.rl) #prezzi .pr-a-plan .pv { padding: 14px 10px; background: transparent; overflow: visible; }

/* Small text at 5:1 or more on the final sRGB colour, home and landing. The 55% grey of the UI mocks, the dark tooltip's second line and the landing's blue step labels go one step darker, in hex so every checker reads the same value. */
:root { --brand-text: #024a92; }
.site plannix-roadmap { --prm-gray-500: #63636c; }
.site plannix-roadmap:not([theme="dark"]) { --prm-tip-bg: #18181b; }
.site plannix-roadmap[theme="dark"] { --prm-tip-fg-2: #97a3b9; }
.site .rl-doc { --d-fg-3: #63636c; }
.site.rl .rl-step-k { color: var(--brand-text); }
.site .gnav:not([data-theme="dark"]) .site-nav a { color: rgb(2 55 108 / 0.86); }

/* On phones the sticky bar already carries "Scopri da dove partire": the pyramid's text link with the same label would show twice */
@media (max-width: 860px) { .site:not(.rl) #piramide .wg-win:not(.wg-ess) .wg-link[href="roadmap.html"] { display: none; } }

/* Press: the five marks, one weight, equal gaps, white at 60% on the night */
.hero-press .hp-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.hero-press .hp-logos li::after { content: none; }
.hero-press .hp-logos .lg { display: block; width: var(--w); height: var(--h); background: currentColor; opacity: 0.6; -webkit-mask: var(--src) no-repeat center / contain; mask: var(--src) no-repeat center / contain; }
.hero:not(.light) .hero-press .hp-logos li { color: #ffffff; }
.hero:not(.light) .hero-press .hp-logos .lg { opacity: 1; }
/* the logos sit on the dawn glow: a soft night halo keeps the white readable there (on the li, since the mask would clip it on .lg) */
.hero:not(.light) .hero-press .hp-logos li { filter: drop-shadow(0 1px 8px rgb(6 22 54 / 0.4)); }
.hero:not(.light) .hero-press .hp-k { color: rgb(255 255 255 / 0.88); }
.hero.light .hero-press .hp-logos li { color: var(--navy); }
.hero-press .hp-press { align-items: center; gap: 12px 24px; }
@media (max-width: 860px) { .hero-press .hp-logos { gap: 14px 28px; } .hero-press .hp-logos .lg { width: calc(var(--w) * 0.85); height: calc(var(--h) * 0.85); } }

/* Chi legge i tuoi numeri: one group, Luca first; avatar, name and role for everyone */
.tm-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; }
.tm-card { display: grid; justify-items: start; align-content: start; gap: 4px; }
.tm-av { display: block; width: 64px; height: 64px; margin-bottom: 12px; border-radius: var(--r-round); object-fit: cover; background: var(--surface-2); }
.tm-ini { display: grid; place-items: center; background: var(--sand, #eee8de); color: var(--ink-2); font-family: var(--font-sans); font-size: var(--t-16); font-weight: 500; letter-spacing: 0.02em; }
.tm-name { font-size: var(--t-16); font-weight: 500; color: var(--fg); }
.tm-role { font-size: var(--t-14); line-height: 1.4; color: var(--ink-2); }
.tm-foot { margin-top: 32px; }
@media (max-width: 1000px) { .tm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .tm-grid { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
  .tm-card { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .tm-av { grid-row: span 2; width: 48px; height: 48px; margin: 0; }
  .tm-name, .tm-role { grid-column: 2; }
}

/* Come funziona: a timeline, three markers on one connecting line, then number, title and line */
.site #come-funziona .steps.tl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; counter-reset: none; }
.tl-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; }
.tl-step > * { grid-column: 1; }
.tl-mark { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-round); background: var(--bg, #fff); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--brand); }
.tl-ico { width: 22px; height: 22px; }
.tl-step:not(:last-child)::before { content: ""; position: absolute; top: 24px; left: 56px; right: -24px; height: 1px; background: var(--line-2); }
.tl-txt { display: grid; gap: 6px; max-width: 34ch; }
.tl-txt b { font-size: var(--t-18); font-weight: 500; line-height: 1.3; color: var(--fg); }
.tl-txt p { font-size: var(--t-14); line-height: 1.5; color: var(--ink-2); }
.tl-cta { margin-top: 48px; }
@media (max-width: 860px) {
  .site #come-funziona .steps.tl { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tl-step { grid-template-columns: minmax(0, 1fr); }
  .tl-step > * { grid-column: 1; }
  .tl-step:not(:last-child)::before { display: none; }
  .tl-cta { margin-top: 32px; }
  .tl-cta .btn { width: 100%; justify-content: center; }
}



/* Reviews are their own section again, on white, after the sand of the stories */
.site:not([data-ritmo="prodotto"]) #recensioni { background: #ffffff; }

/* Closing A: title, buttons and the signature on one grid; buttons under the title, never floating right */
.site .cta-a { padding-block: clamp(72px, 8vw, 112px); }
.site .cta-a > .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
.site .cta-a .cta-a-head { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 28px; }
.site .cta-a .cta-a-head .cta-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 16px 24px; }
.site .cta-a .cta-a-stage { margin-top: 0; }
.site .cta-a .sg { width: 100%; margin-inline: 0; }
@media (max-width: 860px) { .site .cta-a > .wrap { grid-template-columns: minmax(0, 1fr); } .site .cta-a .cta-a-head .cta-acts { flex-direction: column; align-items: stretch; } .site .cta-a .cta-a-head .cta-acts .btn { justify-content: center; } }


/* Closing A: title and buttons in the first column, the signature panel level with the title */
@media (min-width: 861px) {
  .site .cta-a .cta-a-head { display: contents; }
  .site .cta-a .cta-h { grid-column: 1; grid-row: 1; }
  .site .cta-a .cta-a-head .cta-acts { grid-column: 1; grid-row: 2; align-self: start; }
  .site .cta-a .cta-a-stage { grid-column: 2; grid-row: 1 / span 3; }
}

/* Stories: three cards in a row when the third is there, the link at the foot of each card */
.site .st-list:has(> li:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site #casi .st-item article { grid-template-rows: auto auto 1fr auto; }
@media (max-width: 1000px) { .site .st-list:has(> li:nth-child(3)) { grid-template-columns: minmax(0, 1fr); } }

/* Type weights and vertical rhythm (8/10 audit): the larger the size, the lighter the serif. See team/out/tipografia-audit.md. */
:root {
  --w-display: 400; --w-heading: 400; --w-title: 500; --w-quote: 400; --w-quote-lg: 350;
  --sp-mark-title: 20px; --sp-display-lede: 24px; --sp-title-lede: 16px; --sp-title-lede-sm: 16px;
  --sp-head-content: 40px; --sp-lede-cta: 32px; --sp-content-cta: 40px; --sp-cover-title: 16px; --sp-quote-by: 20px;
}
/* Phone spacing scale on a 4 px grid: section, card and stack spacing below 861 px read from these, and the --sp-* rhythm maps onto them. */
@media (max-width: 860px) {
  :root {
    --m-gutter: 20px; --m-sec: 56px; --m-sec-lg: 72px;
    --m-title-lede: 12px; --m-display-lede: 16px; --m-lede-content: 32px; --m-stack: 24px;
    --m-card-pad: 20px; --m-ui-pad: 16px; --m-card-gap: 12px; --m-btn-gap: 12px;
    --m-hero-top: calc(52px + var(--m-lede-content));
    --m-h2: 28px; --m-h2-sm: 24px;
    --gutter: max(var(--m-gutter), 4.5vw);
  }
  .site { --sec-y: calc(var(--m-sec) * var(--dens)); }
  :root { --w-display: 400; --sp-display-lede: var(--m-display-lede); --sp-title-lede: var(--m-title-lede); --sp-title-lede-sm: var(--m-title-lede); --sp-head-content: var(--m-lede-content); --sp-lede-cta: var(--m-stack); --sp-content-cta: var(--m-lede-content); --sp-quote-by: 16px; }
}

.site .h1 { font-weight: var(--w-display); line-height: 1.04; letter-spacing: -0.022em; }
.site :is(.h2, .wg-h2, .cta-h, .st-who b, .st-big, .how-price b, .rl-card-name) { font-weight: var(--w-heading); }
.site .bl-cover .bl-c-t { font-weight: var(--w-title); }
.site .bl-card .bl-t { font-weight: var(--w-title); line-height: 1.3; letter-spacing: 0; }
.site .rev blockquote { font-weight: var(--w-quote); }
.site .rl-story-q { font-weight: var(--w-quote-lg); }

/* Covers keep the cqi sizes of blog.css, so breaks match at every width; with overflow hidden, 0.1em under the last line keeps the 0.226em descenders */
.site .bl-cover .bl-c-t { line-height: 1.1; letter-spacing: -0.015em; padding-bottom: 0.1em; }
.site .bl-cover[data-len="xl"] .bl-c-t { line-height: 1.02; }

.site :is(.sec-head, .wg-head) { gap: 0; }
.site :is(.sec-head, .wg-head) { margin-bottom: var(--sp-head-content); }
.site .rl-close .sec-head { margin-bottom: 0; }
.site .sec-head::before { margin-bottom: var(--sp-mark-title); }
.site :is(.sec-head .h2 + :is(.lead, p), .wg-head .wg-h2 + .wg-lead, .cta-h + p) { margin-top: var(--sp-title-lede); }
.site .bl-home-h + .bl-home-lead { margin-top: var(--sp-title-lede-sm); margin-bottom: var(--sp-head-content); }
.site .hero-aside { margin-top: var(--sp-display-lede); }
.site .ctas { margin-top: var(--sp-lede-cta); }
.site .rl-hero-copy { gap: 0; }
.site .rl-hero-copy .h1 + .sub { margin-top: var(--sp-display-lede); }
.site .rl-hero-copy .sub + * { margin-top: var(--sp-lede-cta); }
.site .rl-story-head { gap: 0; }
.site .rl-story-head .h2 + .rl-story-who { margin-top: var(--sp-title-lede-sm); }
.site .rl-story-q { margin: var(--sp-head-content) 0 0; }
.site .rl-story-q + .link { margin-top: var(--sp-quote-by); }
.site .cta-a .cta-a-head { gap: var(--sp-head-content); }
@media (min-width: 861px) { .site .cta-a > .wrap { row-gap: var(--sp-head-content); } }
.site .tl-cta { margin-top: var(--sp-content-cta); }
.site #recensioni .wrap > .link { margin-top: var(--sp-content-cta); }
.site .rev .src { margin-top: var(--sp-quote-by); }
.site .bl-card { gap: var(--sp-cover-title); }
.site footer h3, .site footer .tag { letter-spacing: 0; }
/* Footer A: logo plus five columns (Servizi, Risorse, Guide, Plannix, Seguici) on one row */
@media (min-width: 1101px) { .site .fa .fa-nav { grid-template-columns: minmax(0, 1.2fr) repeat(5, minmax(0, 1fr)); column-gap: 24px; } .site .fa .fa-nav > * { grid-column: auto; } }

/* Type v2 (8/10 tarda mattina, 5): one tracking curve per family, the serif's STYL axis tied to size, harmonious breaks. See team/out/tipografia-audit.md § v2. */
:root {
  /* letter-spacing = A·em + B·px: the em share shrinks as the size grows, so large type tightens and small type stays near 0 */
  --tr-sans: clamp(-0.025em, calc(-0.035em + 0.56px), 0.01em);
  --tr-serif: clamp(-0.025em, calc(-0.04em + 0.63px), 0em);
  --tr-italic: clamp(-0.015em, calc(-0.02em + 0.28px), 0em);
  /* STYL = 100 × (32 − size) / 14, clamped 0–100: display cut from 32 px, Text cut at 18 px and below */
  --o-56: 0; --o-36: 0; --o-28: 30; --o-cover: 30; --o-20: 85; --o-18: 100;
}
@media (max-width: 860px) {
  :root { --o-36: 30; --o-28: 55; --o-cover: 85; --o-20: 100; }
}

/* Tracking: every element computes its own value from its own size; !important retires the 67 per-component values */
.site, .site *, .site *::before, .site *::after, .mbar, .mbar * { letter-spacing: var(--tr, var(--tr-sans)) !important; }
.site :is(.h1, .h2, .wg-h2, .cta-h, .st-who b, .st-big, .how-price b, .rl-card-name, .bl-c-t, .bl-t, .g-t, .cs-h, .cs-key-v, .cta-score-num, .cta-card-price, .fa-payoff, .fc-t, .pr-panel-tx h3, .cs-real-h, .cs-real-res b, .cost-out dd, .d1-h3, .d1-step-n, .d1-tab-txt b, .d1-st-tab b, .d1-panel-h, .d1-kpis dd, .d1-st-big, .d1-alba-h, .d1-pv-h, .d1-cmp-name, .d1-cmp-price b, .d1-cmp .d1-cmp-group th) { --tr: var(--tr-serif); }
.site :is(.rev blockquote, .cta-rev blockquote, .cs-adv blockquote, .cs-d-q, .rl-story-q, .d1-prove-q blockquote, .d1-prove-more blockquote) { --tr: var(--tr-italic); }
.site .dt { --tr: 0.04em; }
.site .pr-price b { --tr: -0.022em; }

/* Optical style: Timeless Serif has no opsz axis, its STYL axis (0 display, 100 Text) interpolates linearly */
.site :is(.h1, .cs-key-v, .fa-payoff) { font-variation-settings: "STYL" var(--o-56); }
.site :is(.h2, .wg-h2, .cta-h, .st-big, .how-price b, .cost-out dd, .cta-score-num) { font-variation-settings: "STYL" var(--o-36); }
.site:not(.rl) :is(#recensioni, #guide, #faq) .h2, .site :is(.st-who b, .rl-card-name, .cs-h, .fc-t, .cta-card-price, .pr-panel-tx h3, .cs-real-h, .cs-real-res b) { font-variation-settings: "STYL" var(--o-28); }
.site .bl-cover .bl-c-t { font-variation-settings: "STYL" var(--o-cover); }
.site .g-t { font-variation-settings: "STYL" var(--o-20); }
.site :is(.bl-t, .chi-ini, .t-ini, .cs-real-av) { font-variation-settings: "STYL" var(--o-18); }

/* Breaks: pretty is inherited by every text, titles balance; longhands keep white-space: nowrap where it is set */
.site, .mbar { text-wrap-style: pretty; hyphens: manual; }
.site :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .wg-h2, .cta-h, .bl-t, .bl-c-t, .st-who b, .cs-h, .fc-t, .g-t, .rl-story-q, .cs-d-q, summary, legend, .tl-txt b, .tm-name) { text-wrap-style: balance; }

@media (max-width: 860px) { .site .faq { row-gap: var(--sp-head-content); } }


/* Diagonale: the copy and the sign take the first screen; the Roadmap window, with the pyramid standing on it, starts 96 px above the fold */
@media (min-width: 861px) {
  .site .h-diagonale .hero-in { padding-top: clamp(72px, 9vh, 112px); }
  .site .h-diagonale .hero-copy { min-height: calc(100svh - 96px - clamp(72px, 9vh, 112px) - 120px); display: flex; flex-direction: column; justify-content: center; }
}

/* Closings and the landing's first H2 on the same 16/40 system as every other head */
.site .rl-demo-head { margin-bottom: var(--sp-title-lede); }
@media (max-width: 860px) { .site .rl-close-in { row-gap: var(--sp-head-content); } }

/* Le domande a cui risponde la Roadmap: four quiet columns, each under a hairline with its title 16 px below (Come funziona above already carries the icons) */
.site .qs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.site .qs-item { display: grid; align-content: start; padding-top: var(--sp-title-lede); border-top: 1px solid var(--line-2); }
.site .qs-txt { display: grid; gap: 6px; }
.site .qs-txt b { font-size: var(--t-18); font-weight: 500; line-height: 1.3; color: var(--fg); }
.site .qs-txt p { font-size: var(--t-14); line-height: 1.5; color: var(--ink-2); }
@media (max-width: 1100px) { .site .qs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .site .qs { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
/* it follows Come funziona on the same ground: a hairline instead of a second full section padding */
.site:not(.rl) #domande { padding-top: 0; }
.site:not(.rl) #domande > .wrap::before { content: ""; display: block; height: 1px; margin-bottom: calc(var(--sec-y) * 0.8); background: var(--line-2); }
.site[data-ritmo="prodotto"] main > #domande { --bg: var(--night-2); --card: var(--night-3); }

/* Pyramid chapter: same vertical rhythm as every other section; the inner .wg-sec adds no padding of its own (motion.css made it a full-viewport stage) */
.site #piramide.chapter { min-height: 0; display: block; padding-block: var(--sec-y); }
.site #piramide > .wg-sec { padding-block: 0; }
.site #piramide .wg-head { margin-bottom: var(--sp-head-content); }
.site #piramide .wg-h2 + .wg-lead { margin-top: var(--sp-title-lede); }

/* Phones: no text under 13 px (DECISIONI 13-14); widgets.css and pricing.css hold their own floor */
@media (max-width: 639px) {
  .site .sg-example, .site .fa :is(.tag, .note) { font-size: 13px; }
  .site .fa .ext { font-size: 13px; }
}

/* Photo band: the real portrait (5/12) beside a real review that names him; night ground, the frame on the --r-card radius */
.site #voce { --bg: var(--night); --fg: #ffffff; --line-2: rgba(255, 255, 255, 0.22); --ink-2: rgb(255 255 255 / 0.72); background: var(--bg); color: var(--fg); }
.site .pb-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 6vw, 96px); align-items: center; }
.site .pb-fig { margin: 0; }
.site .pb-photo { aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; }
.site .pb-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 45% 30%; }
.site .pb-q { margin: 0; font-family: var(--font-serif); font-style: italic; font-weight: var(--w-quote-lg, 350); font-size: var(--t-28); line-height: 1.3; color: var(--fg); max-width: 30ch; }
.site .pb-by { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: var(--sp-title-lede); font-size: var(--t-14); color: var(--ink-2); }
.site .pb-by b { font-weight: 500; color: var(--fg); }
.site .pb-by a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / 0.35); }
.site .pb-who { display: grid; gap: 2px; margin-top: var(--sp-title-lede); }
.site .pb-who b { font-weight: 500; font-size: var(--t-16); }
.site .pb-who span { font-size: var(--t-14); color: var(--ink-2); }
.site :is(.pb-q) { --tr: var(--tr-italic); text-wrap-style: pretty; }
@media (max-width: 860px) {
  .site .pb-grid { grid-template-columns: minmax(0, 1fr); }
  .site .pb-q { font-size: 22px; }
}
.site [data-banda][hidden] { display: none; }
@media (max-width: 639px) {
  /* phones: a 4:3 crop on the face keeps photo, caption and quote within one screen */
  .site .pb-photo { aspect-ratio: 4 / 3; }
  .site .pb-photo img { object-position: 50% 26%; }
}

/* One chip, the app's Tag (Primer proportions): 20px, the same air on every side, a real 1px border, radius 6, never a pill. */
.site :is(.pr-badge, .wg-chip) { box-sizing: border-box; height: 20px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; font-size: 12px; line-height: 18px; font-weight: 500; }

/* A client's words: large guillemets, the opening one hanging inside the column so the lines keep their edge, and the source under them */
.site .px-q blockquote { text-indent: 0; }
.site .px-q blockquote p { margin: 0; padding-left: 0.92em; text-indent: -0.92em; }
.site .px-q-m { font-size: 2.1em; line-height: 0; vertical-align: -0.2em; font-style: normal; color: var(--brand); }
.site .px-q-by { margin-top: 14px; font: 500 var(--t-14, 14px)/20px var(--sans); font-style: normal; letter-spacing: 0; color: var(--ink-2); }
.site .nx-alba-q .px-q-m { color: var(--sky); }
.site .nx-alba-q .px-q-by { color: rgb(255 255 255 / 0.7); }

/* Brand grain: a fixed, very low-contrast noise over every page. */
:root { --grain-opacity: .11; }
html::after {
  content: ""; position: fixed; inset: 0; z-index: 2147482000; pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 1 0  0 0 0 1 0  0 0 0 1 0  0 0 0 0 .6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
@media print { html::after { display: none; } }

/* Page transitions: cross-document View Transitions; the header and the launch banner keep their place, only the content changes */
@view-transition { navigation: auto; }
.site > .gnav { view-transition-name: site-head; }
.px-banner { view-transition-name: px-banner; }
::view-transition-old(root) { animation: 160ms cubic-bezier(0.4, 0, 1, 1) both px-vt-out; }
::view-transition-new(root) { animation: 280ms cubic-bezier(0.32, 0.72, 0, 1) both px-vt-in; }
::view-transition-group(site-head), ::view-transition-group(px-banner) { animation-duration: 280ms; animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes px-vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes px-vt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}