/* D1 «Attuale», loaded last on the home only: the chapters, the thread in «Come funziona», the night areas, the stories, one proof, the dawn closing.
   The subpages never load it, so the shared stylesheets stay as they are. */

/* Rhythm: night hero, sand costs, white how, night areas, sand stories, white proof, sand prices, white guides and FAQ, dawn */
.site[data-ritmo] #prezzi {
  --bg: var(--sand); --surface: var(--sand); --card: #ffffff;
  --card-shadow: 0 1px 2px rgb(2 55 108 / 0.06), 0 8px 24px -12px rgb(2 55 108 / 0.14);
  --line: color-mix(in oklab, var(--sand), #02376c 10%); --line-2: color-mix(in oklab, var(--sand), #02376c 18%);
  background: var(--bg);
}

/* Chapter titles: one size up from the service sections, serif drawn tight */
.site :is(.d1-h2, #costi .wg-h2), .site:not(.rl) #recensioni .d1-h2 { font-size: 42px; line-height: 1.1; letter-spacing: -0.022em; }
.site #costi .wg-head { margin-bottom: 40px; }
.d1-head { margin-bottom: 48px; }
.d1-h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; }
.d1-k { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-2); }
@media (max-width: 860px) {
  .site :is(.d1-h2, #costi .wg-h2), .site:not(.rl) #recensioni .d1-h2 { font-size: var(--m-h2); line-height: 1.12; }
  .d1-head { margin-bottom: var(--m-lede-content); }
  .d1-h3 { font-size: 22px; }
}
.site main :is(#come-funziona, #casi, #recensioni) { padding-block: clamp(72px, 8vw, 120px); }
@media (max-width: 860px) { .site main :is(#come-funziona, #casi, #recensioni) { padding-block: var(--m-sec); } }

/* ---------- The thread (home, Il problema): the knot becomes the plan's straight line, drawn whole ---------- */
.d1-filo { position: relative; color: var(--cobalt, #1b49c2); margin: 0 0 8px; }
.d1-filo svg { display: block; width: 100%; height: auto; overflow: visible; }
.d1-filo-path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.d1-node circle { fill: var(--brand); stroke: #ffffff; stroke-width: 3; vector-effect: non-scaling-stroke; paint-order: stroke; }
.d1-tag { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, calc(-100% - 14px)); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--fg); white-space: nowrap; }
.d1-filo-mob { display: none; }
.d1-tag-end { transform: translate(-100%, calc(-100% - 14px)); }

.d1-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; counter-reset: none; }
.d1-steps li { display: grid; align-content: start; gap: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.d1-step-n { font-family: var(--serif); font-size: 28px; line-height: 1; color: var(--brand); margin-bottom: 8px; }
.d1-steps h3 { font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: -0.005em; text-wrap: balance; max-width: 22em; }
.d1-steps p { font-size: 16px; line-height: 24px; color: var(--ink-2); max-width: 26em; }


@media (max-width: 860px) {
  .d1-filo-desk { display: none; }
  .d1-filo-mob { display: block; margin-bottom: 16px; }
  .d1-tag { transform: translate(-50%, 12px); }
  .d1-filo-mob .d1-tag-end { transform: translate(-100%, 12px); }
  .d1-filo-mob .d1-tag-start { transform: translate(-6px, 12px); }
  .d1-filo-mob { padding-bottom: 28px; }
  .d1-steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .d1-steps li { grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; padding-top: 16px; }
  .d1-step-n { grid-row: span 2; font-size: 24px; margin: 0; }
}

/* ---------- Cosa guarda la Roadmap: four areas, the open one on the right ---------- */
.d1-aree-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 48px; align-items: start; }
.d1-tabs { display: grid; gap: 4px; }
.d1-tab { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; width: 100%; padding: 16px; border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: left; cursor: pointer; transition: background-color 180ms ease; }
.d1-glyph { display: block; width: 16px; height: 14px; }
.d1-tab-txt b { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; }
.d1-tab-txt span { display: block; margin-top: 4px; font-size: 15px; line-height: 22px; color: rgb(255 255 255 / 0.68); }
.d1-tab[aria-selected="true"] { background: rgb(255 255 255 / 0.08); }
.d1-js .d1-tab[aria-selected="false"] .d1-tab-txt b { color: rgb(255 255 255 / 0.72); }
@media (hover: hover) and (pointer: fine) { .d1-tab[aria-selected="false"]:hover { background: rgb(255 255 255 / 0.04); } }
.d1-panel-h { margin-bottom: 12px; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; }
.d1-panels { display: grid; gap: 24px; }
.d1-js .d1-panels { gap: 0; }
.d1-js .d1-panel { grid-area: 1 / 1; transition: opacity 240ms var(--ease-out); }
.d1-js .d1-panel:not(.is-on) { visibility: hidden; opacity: 0; transition: opacity 120ms ease, visibility 0s 120ms; }
.d1-js .d1-panel-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the mini window: same skin as the hero Roadmap (white, hairlines, 12 px outside, 8 px inside) */
.d1-mini { overflow: hidden; border-radius: 12px; background: #ffffff; color: #02376c; box-shadow: 0 24px 64px -24px rgb(0 8 30 / 0.6); }
.d1-mini-body { display: grid; gap: 20px; padding: 20px; }
.d1-who { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; }
.d1-who b { font-weight: 500; }
.d1-who span { color: #4d6584; }
.d1-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; border-radius: 8px; background: #f6f8fb; }
.d1-kpis div { padding: 14px 16px; }
.d1-kpis div + div { box-shadow: inset 1px 0 0 #e6ebf2; }
.d1-kpis dt { font-size: 13px; line-height: 18px; color: #4d6584; }
.d1-kpis dd { margin: 4px 0 0; font-family: var(--serif); font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; }
.d1-act { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: start; padding-top: 16px; border-top: 1px solid #e6ebf2; }
.d1-act-t { font-size: 15px; line-height: 22px; font-weight: 500; }
.d1-act-d { font-size: 14px; line-height: 20px; color: #4d6584; }
.d1-act-meta { display: grid; gap: 4px; font-size: 14px; line-height: 20px; color: #02376c; }
.d1-lv, .d1-when { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.d1-lv .d1-glyph rect { fill: #9db2cc; opacity: 1; }
.d1-lv .d1-glyph rect.on { fill: var(--brand); }
.d1-when i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--brand); }
.d1-when-full { background: radial-gradient(circle, var(--brand) 0 3.4px, transparent 3.6px); }
.d1-when-half { background: linear-gradient(90deg, transparent 50%, var(--brand) 50%); background-size: 7px 7px; background-position: center; background-repeat: no-repeat; border-radius: 50%; }
.d1-act-amt { text-align: right; font-size: 15px; line-height: 22px; font-weight: 500; white-space: nowrap; }
.d1-act-amt span { display: block; font-size: 13px; line-height: 18px; font-weight: 400; color: #4d6584; }
/* the live reserve widget in a narrower column: sliders left, result stacked right */
.d1-aree .wg-ess-wrap { margin: 0; }
.d1-aree .wg-ess { box-shadow: 0 24px 64px -24px rgb(0 8 30 / 0.6); }
@media (min-width: 1024px) {
  .d1-aree .wg-ess { grid-template-columns: 260px minmax(0, 1fr); }
  .d1-aree .wg-ess-res { grid-template-columns: minmax(0, 1fr); grid-template-areas: "score" "first" "foot"; }
  .d1-aree .wg-ess .wg-ck-score { flex-direction: row; gap: 18px; }
}
@media (max-width: 1100px) and (min-width: 861px) { .d1-aree-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 32px; } }
@media (max-width: 860px) {
  .d1-aree-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .d1-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .d1-tab { align-items: center; min-height: 48px; padding: 10px 12px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16); border-radius: 8px; }
  .d1-tab-txt b { font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: 0; }
  .d1-tab-txt span { display: none; }
  .d1-tab[aria-selected="true"] { background: #ffffff; color: #02376c; box-shadow: none; }
  .d1-act { grid-template-columns: minmax(0, 1fr) auto; }
  .d1-act-main { grid-column: 1 / -1; }
  .d1-act-amt { text-align: right; }
  .d1-kpis { grid-template-columns: minmax(0, 1fr); }
  .d1-kpis div + div { box-shadow: inset 0 1px 0 #e6ebf2; }
  .d1-kpis dd { font-size: 24px; }
}


/* ---------- Recensioni: the head row; the grid lives in narrativa.css ---------- */
.d1-prove-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.d1-prove-head .tp-score { flex: none; padding: 0; box-shadow: none; }
.d1-prove :is(.src, figcaption) { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.d1-prove :is(.src, figcaption) b { font-weight: 500; color: var(--fg); }
@media (max-width: 860px) {
  .d1-prove-head { display: grid; justify-content: start; gap: 12px; margin-bottom: 32px; }
  .d1-prove-head .tp-score { flex-wrap: wrap; gap: 4px 12px; }
}

/* ---------- Chiusura: the dawn rises across the whole width to the section's bottom edge, where it meets the light footer as day ---------- */
.d1-alba { position: relative; isolation: isolate; overflow: hidden; background-color: #061636; color: #ffffff; }
/* the light reaches about 320 px above the copy's last line; the copy itself stays on night */
.site #chiusura.d1-alba { padding: clamp(96px, 9vw, 128px) 0 360px; }
.d1-alba-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(in oklab 180deg, #040c24 0%, #061636 42%, #0a1e4c 100%); }
/* a fine grain over the whole sky breaks the steps a smooth gradient leaves on an 8-bit screen */
.d1-alba-sky::after { content: ""; position: absolute; inset: 0; opacity: 0.1; mix-blend-mode: overlay;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* the hero's order, from the edge up: peach, pale sky, brand, cobalt, then night */
.d1-dawn { position: absolute; left: 0; right: 0; bottom: 0; height: 680px; transform-origin: 50% 100%;
  background:
    radial-gradient(75% 26% at 56% 100%, hsl(38 92% 88% / 0.75), hsl(34 85% 80% / 0.25) 55%, transparent 100%),
    linear-gradient(in oklab to top, hsl(33 80% 82%) 0%, hsl(30 72% 76% / 0.9) 4%, hsl(28 62% 68% / 0.55) 10%, hsl(28 62% 68% / 0.18) 18%, transparent 26%),
    linear-gradient(in oklab to top, rgb(150 220 255 / 0) 2%, rgb(150 220 255 / 0.4) 13%, rgb(150 220 255 / 0.14) 24%, transparent 36%),
    linear-gradient(in oklab to top, rgb(3 115 226 / 0.55) 8%, rgb(3 115 226 / 0.3) 26%, rgb(3 115 226 / 0.08) 46%, transparent 58%),
    linear-gradient(in oklab to top, rgb(27 73 194 / 0.45) 16%, rgb(27 73 194 / 0.2) 50%, rgb(27 73 194 / 0.06) 72%, transparent 88%);
  transition: transform 2000ms cubic-bezier(0.22, 1, 0.36, 1), opacity 2000ms cubic-bezier(0.22, 1, 0.36, 1); }
/* no horizon line is drawn: .d1-horizon only marks where the light comes up, for d1.js's scroll rise */
.d1-horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 0; }
.d1-js .d1-alba:not(.is-in) .d1-dawn { transform: scaleY(0.3); opacity: 0.4; }
/* d1.js drives the rise with the scroll: no easing of its own between frames */
.d1-alba.is-scrub .d1-dawn { transition: none; }

.d1-alba-who { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; font-size: 15px; line-height: 22px; color: rgb(226 235 250 / 0.82); }
.d1-alba-faces { display: inline-flex; flex: none; }
.d1-alba-faces img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #050f2c; }
.d1-alba-faces img + img { margin-left: -10px; }
.d1-alba-h { font-family: var(--serif); font-weight: 400; font-size: 48px; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; max-width: 12em; }
.d1-alba-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 36px; }
.d1-alba-link { color: #ffffff; }
@media (max-width: 860px) {
  .site #chiusura.d1-alba { padding: var(--m-sec-lg) 0 300px; }
  .d1-alba-h { font-size: 32px; line-height: 1.08; }
  .d1-alba-acts .btn { width: 100%; }
  .d1-alba-who { gap: 12px; margin-bottom: 20px; }
  .d1-dawn { height: 560px; }
}

/* Reduced motion: every state final, nothing travels */
@media (prefers-reduced-motion: reduce) {
  .d1-dawn { transition: none; }
  .d1-js .d1-alba:not(.is-in) .d1-dawn { transform: none; opacity: 1; }
  .d1-js .d1-panel { transition: none; }
}

/* the mini windows end like the Roadmap: who reviewed it, and when */
.d1-acts { display: grid; }
.d1-acts .d1-act + .d1-act { margin-top: 16px; }
.d1-rev { display: flex; flex-wrap: wrap; gap: 4px 8px; padding-top: 12px; border-top: 1px solid #e6ebf2; background: none; font-size: 14px; line-height: 20px; color: #4d6584; }
.d1-rev b { font-weight: 500; color: #02376c; }
.d1-rev-date { margin-left: auto; }

/* ---------- r11: one drawing hand, a real photograph, a price list led by the Roadmap ---------- */

/* guides: one large cover and two small; FAQ title at chapter size, two columns as before */
.site:not(.rl) :is(#guide, #faq) .d1-h2 { font-size: 42px; line-height: 1.1; letter-spacing: -0.022em; }
.d1-guide .bl-path { row-gap: 0; }
.d1-guide .bl-cards { gap: 32px; }
.d1-guide .bl-card { gap: 16px; }
.d1-guide .bl-meta { gap: 4px; }
.d1-guide .bl-t { font-size: 20px; line-height: 1.3; }
@media (max-width: 860px) {
  .site:not(.rl) :is(#guide, #faq) .d1-h2 { font-size: var(--m-h2-sm); line-height: 1.12; }
  .d1-guide .bl-cards { gap: 14px; }
  .d1-guide .bl-t { font-size: 18px; }
}

/* ---------- r12: the cover objects live in the open panel, filled, as illustrations ---------- */
.d1-tab { grid-template-columns: minmax(0, 1fr); }
.d1-mini-body { position: relative; }
.d1-ill { width: 120px; height: 120px; margin: 0; border-radius: 12px; background: var(--f); overflow: hidden; }
.d1-ill svg { display: block; width: 100%; height: 100%; padding: 14px; }
.d1-mini-body > .d1-ill { position: absolute; top: 20px; right: 20px; }
.d1-mini-body > .d1-ill ~ :is(.d1-who, .d1-kpis) { margin-right: 140px; }
.d1-aree .wg-ess-q > .d1-ill { align-self: end; justify-self: start; margin-top: 8px; }
@media (max-width: 860px) {
  .d1-ill { display: none; }
  .d1-mini-body > .d1-ill ~ :is(.d1-who, .d1-kpis) { margin-right: 0; }
}
/* phones: the figures stay in one row, one review fewer */
@media (max-width: 860px) {
  .d1-kpis, .d1-kpis:has(div:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .d1-kpis div { padding: 10px 10px; }
  .d1-kpis div + div { box-shadow: inset 1px 0 0 #e6ebf2; }
  .d1-kpis dt { font-size: 13px; line-height: 16px; }
  .d1-kpis dd { font-size: 18px; }
}
@media (max-width: 860px) {
  .d1-steps { gap: 16px; }
}

/* ---------- r13: prices in two views, the plans as before and a comparison table ---------- */
.d1-pv-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(24px, 3vw, 40px); }
.site .d1-pv-top .sec-head { margin-bottom: 0; }
.d1-pv-switch { display: none; flex: none; gap: 4px; padding: 4px; border-radius: 12px; background: color-mix(in oklab, var(--sand), #02376c 8%); }
.d1-pv-switch [role="tab"] { height: 40px; padding: 0 20px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 500 15px/1 var(--sans); cursor: pointer; transition: background-color 120ms ease, color 120ms ease; }
.d1-pv-switch [role="tab"][aria-selected="true"] { background: #ffffff; color: var(--fg); box-shadow: 0 1px 2px rgb(2 55 108 / 0.12); }
@media (hover: hover) and (pointer: fine) { .d1-pv-switch [role="tab"][aria-selected="false"]:hover { color: var(--fg); } }
.d1-pv-h { margin-bottom: 16px; font-family: var(--serif); font-weight: 400; font-size: 24px; }
.d1-pv-panel + .d1-pv-panel { margin-top: 56px; }
.d1-pv-panel:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; border-radius: 12px; }
.d1-js .d1-pv-panel:not(.is-on) { display: none; }
.d1-js .d1-pv-panel + .d1-pv-panel { margin-top: 0; }
.d1-js .d1-pv-h, .d1-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.d1-js .d1-pv-switch { display: inline-flex; }

/* the table: plan, price and CTA at the head of each column (sticky under the nav), grouped rows, ticks and short values */
.d1-cmp-scroll { border-radius: 16px; background: #ffffff; box-shadow: 0 1px 2px rgb(2 55 108 / 0.06), 0 24px 48px -28px rgb(2 55 108 / 0.3); }
.d1-cmp { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.d1-cmp thead :is(th, td) { position: sticky; top: 56px; z-index: 2; padding: 24px 20px 20px; background: #ffffff; text-align: left; vertical-align: top; border-bottom: 1px solid #e1e7ef; }
.d1-cmp thead td.c-k { border-top-left-radius: 16px; }
.d1-cmp thead th.c-priv { border-top-right-radius: 16px; }
.d1-cmp-name { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.15; color: var(--fg); }
.d1-cmp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 8px; }
.d1-cmp-price b { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; letter-spacing: -0.015em; color: var(--fg); }
.d1-cmp-price small { font-size: 13px; color: var(--ink-2); }
.d1-cmp-fit { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-2); }
.d1-cmp-btn { margin-top: 16px; }
.d1-cmp-link { display: inline-flex; align-items: center; height: 40px; margin-top: 16px; font: 500 14px/1 var(--sans); color: var(--fg); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.d1-cmp th.c-k, .d1-cmp td.c-k { width: 28%; }
.d1-cmp tbody :is(th, td) { padding: 14px 20px; border-bottom: 1px solid #eef1f5; text-align: left; vertical-align: top; }
.d1-cmp tbody th[scope="row"] { font-weight: 400; color: var(--fg); }
.d1-cmp .d1-cmp-group th { padding: 28px 20px 10px; border-bottom: 1px solid #e1e7ef; font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--fg); }
.d1-cmp tbody:first-of-type .d1-cmp-group th { padding-top: 20px; }
.d1-cmp tbody:last-of-type tr:last-child :is(th, td) { border-bottom: 0; padding-bottom: 24px; }
.d1-cmp .c-rm { background: color-mix(in srgb, var(--brand) 5%, #ffffff); }
.d1-cmp thead th.c-rm { box-shadow: inset 0 3px 0 var(--brand); }
.d1-yes { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; background: var(--brand); -webkit-mask: var(--pr-check) center / 18px no-repeat; mask: var(--pr-check) center / 18px no-repeat; }
.d1-no { display: inline-block; width: 12px; height: 1.5px; vertical-align: 5px; background: #9db2cc; }
.d1-val { color: var(--fg); }
.d1-cmp-picker { display: none; }

@media (max-width: 860px) {
  .d1-pv-top { display: grid; justify-content: stretch; gap: 20px; }
  .d1-js .d1-pv-switch { display: grid; grid-template-columns: 1fr 1fr; }
  /* without the script the whole table scrolls inside its box; with it, one plan at a time next to the rows */
  .d1-cmp-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
  .d1-cmp { min-width: 720px; }
  .d1-js .d1-cmp-scroll { overflow: visible; }
  .d1-js .d1-cmp { min-width: 0; }
  .d1-js .d1-cmp-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-bottom: 12px; padding: 4px; border-radius: 12px; background: color-mix(in oklab, var(--sand), #02376c 8%); }
  .d1-cmp-pick { height: 40px; padding: 0 4px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 500 14px/1 var(--sans); cursor: pointer; }
  .d1-cmp-pick[aria-pressed="true"] { background: #ffffff; color: var(--fg); box-shadow: 0 1px 2px rgb(2 55 108 / 0.12); }
  .d1-js .d1-cmp[data-plan="free"] :is(.c-rm, .c-prem, .c-priv),
  .d1-js .d1-cmp[data-plan="rm"] :is(.c-free, .c-prem, .c-priv),
  .d1-js .d1-cmp[data-plan="prem"] :is(.c-free, .c-rm, .c-priv),
  .d1-js .d1-cmp[data-plan="priv"] :is(.c-free, .c-rm, .c-prem) { display: none; }
  .d1-js .d1-cmp :is(th, td).c-k { width: 46%; }
  .d1-js .d1-cmp thead th { border-top-right-radius: 16px; }
  .d1-js .d1-cmp .c-rm { background: #ffffff; }
  .d1-js .d1-cmp thead th.c-rm { box-shadow: none; }
  .d1-cmp thead :is(th, td) { padding: 16px 14px; }
  .d1-cmp tbody :is(th, td) { padding: 12px 14px; font-size: 14px; line-height: 20px; }
  .d1-cmp .d1-cmp-group th { padding: 20px 14px 8px; font-size: 18px; }
  .d1-cmp-name { font-size: 20px; }
  .d1-cmp-price b { font-size: 24px; }
}

/* nav: the light/dark switch is a cut, never a fade (a fade between white and night passes through grey) */
.gnav { transition: box-shadow 180ms ease; }
.gnav :is(a, .btn, summary) { transition: none; }

/* prices, «Piani»: the cards get their own white ground on the sand; the preview sits inset with concentric radii
   (card = preview + inset, preview = inner card + padding) */
:root #prezzi.d1-prezzi-v:not(#_) .pr-a-plan {
  --pv-pad: 8px; --pv-inset: 6px; --pv-r-inner: 8px;
  --pv-r-outer: calc(var(--pv-r-inner) + var(--pv-pad));
  border-radius: calc(var(--pv-r-outer) + var(--pv-inset));
  background: #ffffff;
  box-shadow: 0 0 0 1px rgb(2 55 108 / 0.09), 0 1px 2px rgb(2 55 108 / 0.04), 0 16px 32px -24px rgb(2 55 108 / 0.22);
}
:root #prezzi.d1-prezzi-v:not(#_) .pr-a-plan .pv { margin: var(--pv-inset) var(--pv-inset) 18px; border-radius: var(--pv-r-outer); }
:root #prezzi.d1-prezzi-v:not(#_) .pr-a-plan.is-on { box-shadow: 0 0 0 1px var(--brand), 0 24px 48px -24px rgb(3 115 226 / 0.42); }

/* «Confronta» on phones, one plan at a time: the fixed layout keeps the widths of the hidden columns, so the auto layout takes over and the plan column fills what is left */
@media (max-width: 860px) {
  .d1-js .d1-cmp { table-layout: auto; }
  .d1-js .d1-cmp :is(th, td):not(.c-k) { width: auto; }
}

/* type review (tipografia/SPEC.md §3 D1): phones get a 17 px lede and step titles; 14 px texts sit on a 20 px line; medium, not bold, outside the Trustpilot mark */
@media (max-width: 860px) {
  .site .hero .sub { font-size: 17px; }
  .d1-steps h3 { font-size: 17px; line-height: 23px; }
}
.site :is(.head-login, .site-nav a, .hp-in, .src, .d1-adv-role, .d1-rev, .wg-total-sub) { line-height: 20px; }
.site #prezzi .pr-a-head h3, .site .wg-range-value, .site .wg-alt-title, .site .wg-line.is-gain dd, .site .hp-tp > b, .site footer .fd-legal a b, .site footer a:is([href*="ocf"], [href*="acf"]) { font-weight: 500; }
.site .tp-score b, .site footer .tag, .mbar .btn { font-weight: 500; }

/* phones: more of the hero Roadmap above the fold, the CTA still above it: no Score (a number without its context on a small screen), 24 px from the CTA to the case tabs */
@media (max-width: 860px) {
  .site .hx-hero[data-hx-sign="groviglio"] .hero-ui { margin-top: 24px; }
  plannix-roadmap[variant="hero"] .prm-panel { display: none; }
}

/* the launch offer as a ribbon on the Roadmap card's top edge, so the card body lines up with the others */
:root #prezzi.d1-prezzi-v:not(#_) .pr-a-plan[data-tier="roadmap"] { position: relative; }
:root #prezzi.d1-prezzi-v:not(#_) .pr-ribbon { position: absolute; z-index: 2; top: 0; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 5px 12px; border-radius: 999px; background: linear-gradient(90deg, hsl(33 86% 84%), hsl(28 78% 78%)); color: #061636; font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 3px #ffffff, 0 6px 14px -8px rgb(2 55 108 / 0.35); }
:root #prezzi.d1-prezzi-v:not(#_) .pr-ribbon[hidden] { display: none; }
@media (max-width: 860px) { :root #prezzi.d1-prezzi-v:not(#_) .pr-ribbon { font-size: 12px; padding: 4px 10px; } }