/* Landing Elisir × SerenEtà — un solo foglio di stile.
   Palette campionata dal logo SerenEtà (profilo della Pagina Meta): crema, petrolio, corallo.
   Il corallo è un accento (sole del logo, disco-freccia, sottolineatura): mai testo piccolo, mai campitura grande.
   Corpo a 19 px: il pubblico è over 50. */

@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/sourcesans3-wght.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }

:root {
  --creme: #fcf4ec;
  --sabbia: #f5e9dc;
  --foglia: #e3eeea;
  --petrolio: #1c645c;
  --petrolio-2: #12453f;
  --encre: #17302d;
  --gris: #475c58;
  --corallo: #ec745c;
  --corallo-testo: #b4452d;
  --erreur: #b3261e;
  --linea: rgb(23 48 45 / 0.14);
  --linea-forte: rgb(23 48 45 / 0.34);
  --linea-inverse: rgb(252 244 236 / 0.28);

  --display: "Alegreya Sans", "Trebuchet MS", system-ui, sans-serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs: 0.9375rem;
  --fs-s: 1rem;
  --fs-m: 1.1875rem;
  --fs-l: 1.375rem;
  --fs-xl: clamp(1.6rem, 3vw, 2rem);

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 28px;
  --r-pill: 999px;
  --gutter: clamp(20px, 5vw, 40px);
  --maxw: 1180px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 0.18s;
  --t-med: 0.45s;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; accent-color: var(--petrolio); caret-color: var(--petrolio); }
body {
  margin: 0; background: var(--creme); color: var(--encre);
  font-family: var(--sans); font-size: var(--fs-m); font-weight: 400; line-height: 1.6;
  font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.012em; line-height: 1.06; text-wrap: balance; color: var(--petrolio-2); }
.num { font-variant-numeric: lining-nums tabular-nums; }
::selection { background: var(--petrolio); color: var(--creme); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--petrolio); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible { outline-color: var(--creme); }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -64px; z-index: 100; background: var(--petrolio-2); color: var(--creme); padding: 12px 18px; border-radius: var(--r-s); transition: top var(--t-fast) var(--ease-out); }
.skip-link:focus { top: 12px; }
.container { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }

/* rivelazione allo scroll: nasconde SOLO se il JS è attivo */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease-out) var(--d, 0ms), transform 0.9s var(--ease-out) var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- pulsanti: petrolio su crema (7:1), disco-freccia corallo ---------- */
.btn {
  --bg: var(--petrolio-2); --fg: var(--creme);
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 64px; padding: 8px 8px 8px 30px; border: 0; border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg); cursor: pointer; text-decoration: none;
  font-size: 1.125rem; font-weight: 600; letter-spacing: 0.002em; line-height: 1.2; text-align: left;
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn::after {
  content: ""; flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: var(--corallo) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312453F' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center / 24px no-repeat;
  transition: transform var(--t-med) var(--ease-out);
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgb(18 69 63 / 0.6); }
  .btn:hover::after { transform: translateX(3px) rotate(-6deg); }
}
.btn:active { transform: scale(0.985); }
.btn[disabled], .btn[aria-busy="true"] { cursor: progress; opacity: 0.9; }
.btn--block { width: 100%; }
.btn--small { min-height: 52px; font-size: 1rem; padding-left: 24px; }
.btn--small::after { width: 38px; height: 38px; background-size: 20px; }
.btn--light { --bg: var(--creme); --fg: var(--petrolio-2); }
.btn[aria-busy="true"]::after { background-image: none; border: 3px solid rgb(18 69 63 / 0.3); border-top-color: var(--petrolio-2); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.link-quiet { color: var(--petrolio-2); font-weight: 600; font-size: var(--fs-s); }

/* ---------- testata ---------- */
.top { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--creme) 97%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--t-med); }
.top.is-scrolled { border-bottom-color: var(--linea); }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 42px; width: auto; }
.top__cta { display: none; }
@media (min-width: 720px) { .top__cta { display: inline-flex; } .brand img { height: 46px; } }
.js .top { animation: fade-in 0.8s var(--ease-out) both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- sezioni ---------- */
.sec { padding-block: clamp(64px, 9vw, 120px); }
.sec__head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.sec h2 { font-size: clamp(2.1rem, 4.8vw, 3.5rem); }
.sec__lead { margin-top: 18px; font-size: var(--fs-l); line-height: 1.5; color: var(--gris); max-width: 56ch; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(20px, 4vw, 56px) clamp(48px, 7vw, 96px); }
.hero__grid { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.hero__h1 { font-size: clamp(2.5rem, 6vw, 3.95rem); line-height: 1.02; letter-spacing: -0.022em; }
.hl { display: block; }
.hl--2 { margin-top: 0.08em; }
.u { position: relative; display: inline-block; white-space: nowrap; }
.u__line { position: absolute; left: 0; bottom: -0.2em; width: 100%; height: 0.3em; overflow: visible; }
.u__line path { fill: none; stroke: var(--corallo); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hero__lead { margin-top: clamp(26px, 3vw, 34px); max-width: 52ch; font-size: var(--fs-l); line-height: 1.5; color: var(--encre); }
.hero__buy { margin-top: clamp(26px, 3vw, 36px); display: grid; gap: 20px; justify-items: start; }
.hero__price { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; }
.hero__from { font-size: var(--fs-l); line-height: 1.2; color: var(--gris); }
.hero__amount { font-family: var(--display); font-weight: 500; font-size: clamp(3rem, 6vw, 4.25rem); line-height: 1; letter-spacing: -0.02em; color: var(--petrolio-2); }
.hero__note { font-size: var(--fs-s); color: var(--gris); flex-basis: 100%; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.hero__seller { margin-top: 28px; font-size: var(--fs-xs); color: var(--gris); max-width: 52ch; }
.hero__seller strong { color: var(--encre); font-weight: 600; }

.hero__media { position: relative; width: 100%; max-width: 520px; justify-self: center; }
.sun { position: absolute; z-index: 0; right: -9%; top: -5%; width: 44%; aspect-ratio: 1; border-radius: 50%; background: var(--corallo); }
.hero__arch { position: relative; z-index: 1; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 50% 50% 32px 32px / 34% 34% 32px 32px; background: var(--sabbia); }
.hero__arch img { width: 100%; height: 100%; object-fit: cover; }
.hero__chip {
  position: absolute; z-index: 2; left: -2%; bottom: 7%; display: flex; align-items: center; gap: 12px;
  padding: 12px 20px 12px 14px; border-radius: var(--r-pill); background: var(--creme); border: 1px solid var(--linea);
  box-shadow: 0 18px 36px -18px rgb(18 69 63 / 0.55); font-size: var(--fs-s); font-weight: 600; line-height: 1.25; color: var(--petrolio-2);
}
.hero__chip svg { width: 30px; height: 30px; flex: none; }
.hero__chip small { display: block; font-weight: 400; font-size: 0.875rem; color: var(--gris); }
@media (max-width: 520px) { .hero__chip { left: 8px; } .sun { right: -4%; } }

/* sequenza d'ingresso: UN momento orchestrato */
.js .hl { opacity: 0; transform: translateY(0.45em); transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out); }
.js .hl--2 { transition-delay: 0.14s; }
.js .hero__lead, .js .hero__buy, .js .hero__seller { opacity: 0; transform: translateY(16px); transition: opacity 0.9s var(--ease-out) 0.38s, transform 0.9s var(--ease-out) 0.38s; }
.js .hero__arch { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease-out) 0.12s; }
.js .hero__arch img { transform: scale(1.14); transition: transform 2s var(--ease-out) 0.12s; }
.js .sun { opacity: 0; transform: scale(0.35); transition: opacity 0.6s ease 0.6s, transform 1.2s var(--spring) 0.6s; }
.js .hero__chip { opacity: 0; transform: translateY(14px) scale(0.96); transition: opacity 0.7s ease 1.05s, transform 0.9s var(--spring) 1.05s; }
.js .u__line path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-out) 0.85s; }
.js.is-ready .hl, .js.is-ready .hero__lead, .js.is-ready .hero__buy, .js.is-ready .hero__seller, .js.is-ready .hero__chip, .js.is-ready .sun { opacity: 1; transform: none; }
.js.is-ready .hero__arch { clip-path: inset(0 0 0 0); }
.js.is-ready .hero__arch img { transform: none; }
.js.is-ready .u__line path { stroke-dashoffset: 0; }

/* ---------- fatti ---------- */
.facts { border-block: 1px solid var(--linea); background: var(--creme); }
.facts__in { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linea); }
@media (min-width: 900px) { .facts__in { grid-template-columns: repeat(4, 1fr); } }
.fact { display: flex; gap: 14px; align-items: flex-start; padding: 24px 18px; background: var(--creme); }
.fact svg { width: 34px; height: 34px; flex: none; stroke: var(--petrolio); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fact b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.15; color: var(--petrolio-2); }
.fact span { display: block; margin-top: 3px; font-size: var(--fs-xs); line-height: 1.4; color: var(--gris); }
@media (min-width: 900px) { .fact { padding: 30px 28px; } }

/* ---------- prodotto + diagramma ---------- */
.product { background: var(--creme); }
.product__grid { display: grid; gap: clamp(36px, 5vw, 80px); align-items: center; }
@media (min-width: 960px) { .product__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
.diagram { max-width: 460px; justify-self: center; width: 100%; }
.diagram svg { width: 100%; height: auto; overflow: visible; }
.diagram figcaption { margin-top: 8px; text-align: center; color: var(--gris); font-size: var(--fs-s); }
.diagram figcaption b { display: block; font-family: var(--display); font-weight: 500; font-size: 3rem; line-height: 1; color: var(--petrolio-2); letter-spacing: -0.02em; }
.layer { transition: transform 0.55s var(--ease-out), opacity 0.3s ease; }
.mk circle { fill: var(--corallo); transition: transform 0.4s var(--spring); transform-box: fill-box; transform-origin: center; }
.mk text { font-family: var(--display); font-weight: 700; font-size: 17px; fill: var(--petrolio-2); text-anchor: middle; dominant-baseline: central; }
.mk line { stroke: var(--petrolio-2); stroke-width: 1.4; opacity: 0.55; }
.diagram[data-hot] .layer { opacity: 0.35; }
.diagram[data-hot="1"] .layer[data-layer="1"], .diagram[data-hot="2"] .layer[data-layer="2"], .diagram[data-hot="3"] .layer[data-layer="3"], .diagram[data-hot="4"] .layer[data-layer="2"] { opacity: 1; }
.diagram[data-hot="1"] .layer[data-layer="1"] { transform: translateY(-10px); }
.diagram[data-hot="2"] .layer[data-layer="2"] { transform: translateY(-8px); }
.diagram[data-hot="4"] .layer[data-layer="2"] { transform: translateY(-8px); }
.diagram[data-hot="3"] .layer[data-layer="3"] { transform: translateY(-6px); }
.diagram[data-hot="1"] .mk[data-n="1"] circle, .diagram[data-hot="2"] .mk[data-n="2"] circle, .diagram[data-hot="3"] .mk[data-n="3"] circle, .diagram[data-hot="4"] .mk[data-n="4"] circle { transform: scale(1.25); }
.js .diagram.is-in .layer { animation: layer-in 0.9s var(--ease-out) backwards; }
.js .diagram.is-in .layer[data-layer="3"] { animation-delay: 0ms; }
.js .diagram.is-in .layer[data-layer="2"] { animation-delay: 160ms; }
.js .diagram.is-in .layer[data-layer="1"] { animation-delay: 320ms; }
.js .diagram .mk { opacity: 0; transition: opacity 0.6s ease 0.8s; }
.js .diagram.is-in .mk { opacity: 1; }
@keyframes layer-in { from { opacity: 0; transform: translateY(-46px); } to { opacity: 1; transform: none; } }

.feat { display: grid; }
.feat li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--linea); cursor: default; transition: padding var(--t-med) var(--ease-out); }
.feat li:last-child { border-bottom: 1px solid var(--linea); }
.feat__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--corallo); color: var(--petrolio-2); font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1; }
.feat h3 { font-size: 1.65rem; }
.feat p { margin-top: 6px; color: var(--gris); max-width: 46ch; }
@media (hover: hover) { .feat li:hover { padding-left: 8px; } }

.wide { position: relative; margin-top: clamp(48px, 7vw, 88px); border-radius: var(--r-l); overflow: hidden; background: var(--sabbia); }
.wide img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 900px) { .wide img { aspect-ratio: 21 / 9; object-position: 50% 42%; } }
.wide figcaption { position: absolute; left: clamp(14px, 3vw, 32px); bottom: clamp(14px, 3vw, 32px); max-width: min(30ch, calc(100% - 28px)); padding: 14px 20px; border-radius: var(--r-m); background: var(--creme); font-family: var(--display); font-weight: 500; font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.15; color: var(--petrolio-2); }

/* ---------- misure ---------- */
.sizes { background: var(--sabbia); }
.sizes__grid { display: grid; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (min-width: 960px) { .sizes__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } .sizes__intro { position: sticky; top: 120px; } }
.sizes__note { margin-top: 22px; font-size: var(--fs-s); color: var(--gris); max-width: 42ch; }
.sizelist { display: grid; gap: 12px; }
.size {
  display: grid; grid-template-columns: 26px 64px minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; min-height: 92px; padding: 14px 20px;
  background: transparent; border: 1.5px solid var(--linea-forte); border-radius: var(--r-m); text-align: left; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-med) var(--ease-out), transform var(--t-fast) var(--spring);
  -webkit-tap-highlight-color: transparent;
}
.size:active { transform: scale(0.992); }
@media (hover: hover) { .size:hover { border-color: var(--petrolio); } }
.size[aria-checked="true"] { background: #fff; border-color: var(--petrolio); box-shadow: 0 0 0 4px rgb(28 100 92 / 0.13); }
.size__radio { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linea-forte); display: grid; place-items: center; transition: border-color var(--t-fast); }
.size__radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--petrolio); transform: scale(0); transition: transform var(--t-med) var(--spring); }
.size[aria-checked="true"] .size__radio { border-color: var(--petrolio); }
.size[aria-checked="true"] .size__radio::after { transform: scale(1); }
.size__foot { width: 64px; height: 64px; display: grid; place-items: center; }
.size__foot svg { height: 60px; width: auto; }
.size__foot rect { fill: #fff; stroke: var(--petrolio); stroke-width: 2; }
.size__foot path { stroke: var(--petrolio); stroke-width: 1.5; fill: none; opacity: 0.55; }
.size__name { display: block; font-family: var(--display); font-weight: 500; font-size: 1.55rem; line-height: 1.1; color: var(--petrolio-2); }
.size__dims { display: block; margin-top: 3px; font-size: var(--fs-s); color: var(--gris); }
.size__price { font-family: var(--display); font-weight: 500; font-size: 2rem; line-height: 1; letter-spacing: -0.015em; color: var(--petrolio-2); white-space: nowrap; }
.size__price--text { font-size: 1rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; color: var(--gris); white-space: normal; text-align: right; line-height: 1.2; max-width: 6.2em; }
.size__tag { display: block; width: fit-content; margin-bottom: 5px; padding: 1px 10px; border-radius: var(--r-pill); background: var(--corallo); color: var(--encre); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.7; }
.size--custom .size__foot rect { stroke-dasharray: 5 4; }
.sizes__cta { margin-top: 28px; }
@media (max-width: 520px) {
  .size { grid-template-columns: 26px 44px minmax(0, 1fr) auto; gap: 12px; padding: 14px 14px; }
  .size__foot { width: 44px; } .size__foot svg { height: 44px; }
  .size__price { font-size: 1.65rem; }
  .size__price--text { font-size: 0.9375rem; }
  .size__name { font-size: 1.4rem; }
}

/* ---------- come funziona ---------- */
.how__grid { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (min-width: 960px) { .how__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
.how__photo { overflow: hidden; border-radius: var(--r-l); background: var(--sabbia); }
.how__photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 960px) { .how__photo img { aspect-ratio: 4 / 4.4; object-position: 30% 50%; } }
.steps { margin-top: 32px; display: grid; }
.steps li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding-bottom: 32px; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { content: ""; position: absolute; left: 27px; top: 58px; bottom: 6px; width: 2px; background: var(--linea-forte); }
.steps li:last-child::before { display: none; }
.steps__n { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--petrolio-2); color: var(--creme); font-family: var(--display); font-weight: 500; font-size: 1.75rem; line-height: 1; }
.steps h3 { font-size: 1.6rem; padding-top: 4px; }
.steps p { margin-top: 6px; color: var(--gris); max-width: 46ch; }
.how__fine { margin-top: 28px; font-size: var(--fs-xs); color: var(--gris); max-width: 52ch; }

/* ---------- FAQ ---------- */
.faq-sec { background: var(--creme); border-top: 1px solid var(--linea); }
.faq__grid { display: grid; gap: clamp(28px, 5vw, 80px); }
@media (min-width: 960px) { .faq__grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); } }
.faq { border-top: 1px solid var(--linea-forte); }
.faq details { border-bottom: 1px solid var(--linea-forte); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 500; font-size: 1.5rem; line-height: 1.2; color: var(--petrolio-2); -webkit-tap-highlight-color: transparent; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 2px solid var(--petrolio); border-bottom: 2px solid var(--petrolio); transform: rotate(45deg) translateY(-3px); transition: transform var(--t-med) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq__body { padding: 0 0 26px; max-width: 60ch; color: var(--gris); }
.faq details[open] .faq__body { animation: faq-in 0.5s var(--ease-out); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- ordine ---------- */
.order-sec { background: var(--petrolio-2); color: var(--creme); }
.order-sec h2 { color: var(--creme); }
.order__grid { display: grid; gap: clamp(36px, 5vw, 72px); align-items: start; }
@media (min-width: 960px) { .order__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } .order__side { position: sticky; top: 110px; } }
.order__lead { margin-top: 18px; font-size: var(--fs-l); line-height: 1.5; color: rgb(252 244 236 / 0.86); max-width: 40ch; }
.summary { margin-top: 32px; padding: 24px 26px; border: 1px solid var(--linea-inverse); border-radius: var(--r-l); background: rgb(252 244 236 / 0.05); }
.summary dl { display: grid; gap: 12px; }
.summary dl > div { display: flex; justify-content: space-between; gap: 18px; font-size: var(--fs-s); }
.summary dt { color: rgb(252 244 236 / 0.72); }
.summary dd { font-weight: 600; text-align: right; }
.summary__total { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--linea-inverse); font-size: var(--fs-s); color: rgb(252 244 236 / 0.8); }
.summary__amount { font-family: var(--display); font-weight: 500; font-size: 3rem; line-height: 1; letter-spacing: -0.02em; color: var(--creme); }
.summary__amount { display: inline-flex; align-items: baseline; }
.summary__amount--text { font-size: 1.5rem; }
.od__d { position: relative; display: inline-block; height: 1.1em; overflow: hidden; vertical-align: top; }
.od__s { display: block; visibility: hidden; line-height: 1.1em; }
.od__col { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; transform: translateY(calc(var(--n, 0) * -1.1em)); transition: transform 0.8s var(--ease-out); will-change: transform; }
.od__col > span { display: block; height: 1.1em; line-height: 1.1em; }
.order__photo { display: none; margin-top: 32px; max-width: 360px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 50% 50% 28px 28px / 34% 34% 28px 28px; }
.order__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 960px) { .order__photo { display: block; } }

.form-card { background: var(--creme); color: var(--encre); border-radius: var(--r-l); padding: clamp(22px, 4vw, 40px); box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.5); }
.form-card h3 { font-size: 1.75rem; }
.form-card__sub { margin-top: 6px; color: var(--gris); font-size: var(--fs-s); }
.form { margin-top: 26px; display: grid; gap: 20px; }
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form legend, .field__label { padding: 0; font-size: var(--fs-s); font-weight: 600; color: var(--encre); }
.field { display: grid; gap: 7px; }
.field__input {
  width: 100%; min-height: 58px; padding: 14px 16px; border-radius: var(--r-m); border: 1.5px solid var(--linea-forte); background: #fff;
  font-size: 1.125rem; line-height: 1.3; color: var(--encre); appearance: none; -webkit-appearance: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field__input::placeholder { color: rgb(71 92 88 / 0.6); }
@media (hover: hover) { .field__input:hover { border-color: var(--petrolio); } }
.field__input:focus { outline: none; border-color: var(--petrolio); box-shadow: 0 0 0 4px rgb(28 100 92 / 0.16); }
.field.is-invalid .field__input { border-color: var(--erreur); box-shadow: 0 0 0 4px rgb(179 38 30 / 0.12); }
.field__error { font-size: var(--fs-s); color: var(--erreur); font-weight: 500; }
.field__error:empty { display: none; }
.field__hint { font-size: var(--fs-xs); color: var(--gris); }
.row2 { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 520px) { .row2 { grid-template-columns: 1.7fr 1fr; } }
.field--hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.seg { margin-top: 10px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.seg__btn {
  display: grid; align-content: center; gap: 1px; min-height: 64px; padding: 8px 14px; border-radius: var(--r-m); border: 1.5px solid var(--linea-forte); background: #fff; text-align: left; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-med) var(--ease-out), transform var(--t-fast) var(--spring);
  -webkit-tap-highlight-color: transparent;
}
.seg__btn:active { transform: scale(0.98); }
.seg__btn b { font-weight: 600; font-size: 1.0625rem; line-height: 1.2; }
.seg__btn span { font-size: 0.9375rem; color: var(--gris); }
@media (hover: hover) { .seg__btn:hover { border-color: var(--petrolio); } }
.seg__btn[aria-checked="true"] { background: var(--petrolio-2); border-color: var(--petrolio-2); box-shadow: 0 0 0 4px rgb(28 100 92 / 0.18); }
.seg__btn[aria-checked="true"] b { color: var(--creme); }
.seg__btn[aria-checked="true"] span { color: rgb(252 244 236 / 0.8); }
.seg.is-invalid .seg__btn { border-color: var(--erreur); }

.check { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; cursor: pointer; }
.check__box { appearance: none; -webkit-appearance: none; width: 28px; height: 28px; margin: 0; border-radius: 8px; border: 1.8px solid var(--linea-forte); background: #fff; display: grid; place-content: center; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--spring); }
.check__box::before { content: ""; width: 16px; height: 16px; transform: scale(0); background: var(--creme); clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 20%, 86% 7%, 38% 72%); transition: transform var(--t-med) var(--spring); }
.check__box:checked { background: var(--petrolio-2); border-color: var(--petrolio-2); }
.check__box:checked::before { transform: scale(1); }
.check__box:active { transform: scale(0.92); }
.check.is-invalid .check__box { border-color: var(--erreur); box-shadow: 0 0 0 4px rgb(179 38 30 / 0.12); }
.check__text { font-size: var(--fs-s); line-height: 1.5; color: var(--gris); }
.check__text a { color: var(--petrolio-2); font-weight: 600; }
.alert { padding: 14px 16px; border-radius: var(--r-m); font-size: var(--fs-s); background: rgb(179 38 30 / 0.08); color: var(--erreur); border: 1px solid rgb(179 38 30 / 0.3); font-weight: 500; }
.alert:empty { display: none; }
.form__after { font-size: var(--fs-xs); color: var(--gris); text-align: center; }
.form__after b { color: var(--encre); }

/* ---------- piè di pagina ---------- */
.foot { padding-block: 56px 64px; background: var(--creme); font-size: var(--fs-xs); color: var(--gris); }
.foot__grid { display: grid; gap: 28px; }
@media (min-width: 860px) { .foot__grid { grid-template-columns: 1fr 1.4fr; gap: 56px; } }
.foot img { height: 40px; width: auto; }
.foot img + p { margin-top: 14px; }
.foot p + p { margin-top: 10px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 18px; font-size: var(--fs-s); }
.foot__links a { color: var(--petrolio-2); font-weight: 600; }
.foot strong { color: var(--encre); font-weight: 600; }
@media (max-width: 899px) { .foot { padding-bottom: 120px; } }

/* ---------- barra CTA mobile ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--creme) 96%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--linea); transform: translateY(110%); transition: transform var(--t-med) var(--ease-out); }
.sticky-cta.is-on { transform: none; }
.sticky-cta .btn { width: 100%; }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* ---------- pagine interne (grazie, privacy) ---------- */
.page { padding-block: clamp(48px, 8vw, 104px); }
.page h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.thanks { max-width: 720px; }
.thanks__lead { margin-top: 20px; font-size: var(--fs-l); line-height: 1.5; color: var(--gris); }
.thanks__box { margin-top: 36px; padding: 26px; border-radius: var(--r-l); background: var(--sabbia); }
.thanks__box dl { display: grid; gap: 10px; }
.thanks__box dl > div { display: flex; justify-content: space-between; gap: 18px; }
.thanks__box dt { color: var(--gris); }
.thanks__box dd { font-weight: 600; text-align: right; }
.thanks .steps { margin-top: 40px; }
.thanks__back { margin-top: 40px; }
.prose { max-width: 70ch; }
.prose h2 { font-size: 1.9rem; margin: 40px 0 12px; }
.prose p, .prose li { color: var(--gris); }
.prose p + p, .prose ul { margin-top: 12px; }
.prose ul { list-style: disc; padding-left: 1.3em; }
.prose a { color: var(--petrolio-2); font-weight: 600; }
.prose address { font-style: normal; margin: 12px 0; color: var(--gris); }

/* ---------- movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .js [data-reveal], .js .hl, .js .hero__lead, .js .hero__buy, .js .hero__seller, .js .sun, .js .hero__chip { opacity: 1; transform: none; }
  .js .hero__arch { clip-path: none; } .js .hero__arch img { transform: none; } .js .u__line path { stroke-dashoffset: 0; }
  .js .diagram .mk { opacity: 1; }
}