/* Plannix 2027 · Pricing table: four variants on top of home.css tokens. Every class is prefixed pr- (plans) or pv- (previews). */
:root {
  --pr-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pr-tint: color-mix(in srgb, var(--brand) 9%, transparent);
  --pr-night-card: #0c2459;
}

/* Harness: variant labels, never part of the design */
.pr-harness { padding: 28px 0 0; font: 13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.pr-harness .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.pr-harness b { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: #111; color: #fff; font-weight: 600; }
.pr-harness span { color: #666; max-width: 70em; }
.pr-intro { padding: 40px 0 8px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #222; }
.pr-intro h1 { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; }
.pr-intro p { margin-top: 6px; font-size: 14px; color: #555; max-width: 60em; }

/* Shared pieces */
.pr-btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border-radius: 8px; background: var(--white); color: var(--navy); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 14.5px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms var(--ease-out); }
.pr-btn:active { transform: scale(0.97); }
.pr-btn.is-primary { background: var(--brand); color: var(--white); box-shadow: none; }
.pr-btn.is-sm { height: 32px; padding: 0 12px; font-size: 13.5px; border-radius: 7px; }
@media (hover: hover) and (pointer: fine) {
  .pr-btn:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
  .pr-btn.is-primary:hover { background: var(--brand-press); box-shadow: none; }
}
.pr-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--pr-tint); color: var(--brand); font: 500 12.5px/1 var(--sans); white-space: nowrap; }
.pr-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.pr-price b { font: 500 26px/1.1 var(--sans); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; color: var(--navy); }
.pr-price small { font-size: 13.5px; color: var(--ink-3); }
.pr-price b .tbd { font-size: 0.68em; font-weight: 500; }
.pr-fit { font-size: 13.5px; color: var(--ink-3); }
.pr-list { display: grid; gap: 9px; font-size: 14px; line-height: 1.42; color: var(--ink-2); }
.pr-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; align-items: start; }
.pr-a-plan .pv-who { display: none; }
.pr-list li::before { content: ""; width: 16px; height: 16px; margin-top: 1px; background: var(--brand); -webkit-mask: var(--pr-check) center / 16px no-repeat; mask: var(--pr-check) center / 16px no-repeat; }
.pr-list b { font-weight: 500; color: var(--navy); }
.pr-list .pr-k { display: block; font-size: 13.5px; }
.pr-list .pr-k::before { display: none; }
.pr-foot { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.tbd { font-size: 0.86em; }

/* Previews: what each plan hands you, drawn as product UI at the 12-13 px scale of the Roadmap component */
.pv { position: relative; height: 196px; margin-bottom: 18px; padding: 14px; border-radius: 8px; background: var(--surface); overflow: hidden; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.pv-card { padding: 10px 12px; border-radius: 8px; background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 8px 18px -12px rgba(1, 26, 83, 0.28); }
.pv-k { font-size: 12px; color: var(--ink-3); }
.pv-t { font-weight: 500; color: var(--navy); }
.pv-big { margin-top: 2px; display: flex; align-items: baseline; gap: 5px; font: 500 22px/1.15 var(--sans); letter-spacing: -0.01em; color: var(--navy); font-variant-numeric: tabular-nums; }
.pv-big small { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.pv-bar, .pv-prog { margin-top: 8px; height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.pv-bar i, .pv-prog i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--brand); }
.pv-row { margin-top: 7px; display: flex; justify-content: space-between; }
.pv-row b { font-weight: 500; color: var(--navy); font-variant-numeric: tabular-nums; }
/* Tier identity: each preview takes its plan's material (tokens in home-mood/tiers.css, fallbacks here for the standalone blocks).
   On unless html[data-tiers="off"] (DialKit "Connotazione livelli"); buttons keep the blue/outline rule. */
:root:not([data-tiers="off"]) .pv.pv-free { background: var(--tier-free, #efe8dc); }
:root:not([data-tiers="off"]) .pv.pv-rm, :root:not([data-tiers="off"]) .pr-a-plan.is-on .pv.pv-rm { background: var(--tier-roadmap, #0373e2); }
:root:not([data-tiers="off"]) .pv.pv-app { background: var(--tier-premium, #071846); }
:root:not([data-tiers="off"]) .pv.pv-inst { background: var(--tier-private, #0c0f14); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier-private-accent, #cfc8ba) 40%, transparent); }
/* in the home, system.css clears the preview with .site:not(.rl) #prezzi .pr-a-plan .pv: :is(#prezzi, body) carries an id, so these win there and still match here */
:root:not([data-tiers="off"]) :is(#prezzi, body) .pr-a-plan .pv.pv-free { background: var(--tier-free, #efe8dc); }
:root:not([data-tiers="off"]) :is(#prezzi, body) .pr-a-plan .pv.pv-rm { background: var(--tier-roadmap, #0373e2); }
:root:not([data-tiers="off"]) :is(#prezzi, body) .pr-a-plan .pv.pv-app { background: var(--tier-premium, #071846); }
:root:not([data-tiers="off"]) :is(#prezzi, body) .pr-a-plan .pv.pv-inst { background: var(--tier-private, #0c0f14); }
/* under 640 px system.css hides every preview but the Roadmap: the card keeps its tier as a band of the same material along the top */
.pr-a-plan[data-tier="free"] { --tier: var(--tier-free, #efe8dc); }
.pr-a-plan[data-tier="roadmap"] { --tier: var(--tier-roadmap, #0373e2); }
.pr-a-plan[data-tier="premium"] { --tier: var(--tier-premium, #071846); }
.pr-a-plan[data-tier="private"] { --tier: var(--tier-private, #0c0f14); }
@media (max-width: 640px) { :root[data-prezzi-v="anteprime"]:not([data-tiers="off"]) :is(#prezzi, body) .pr-a-plan[data-tier] { background-image: linear-gradient(var(--tier) 0 0); background-size: 100% 8px; background-repeat: no-repeat; } }
:root:not([data-tiers="off"]) .pv:is(.pv-rm, .pv-app, .pv-inst) .pv-card { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 10px 24px -14px rgb(0 0 0 / 0.6); }
/* Premium preview: the app's dashboard, the consultant one card under it (the calendar of sessions is gone) */
.pv-app { display: grid; gap: 8px; align-content: start; }
.pv-dist { margin-top: 8px; display: flex; gap: 2px; height: 5px; border-radius: 3px; overflow: hidden; }
.pv-dist i { width: var(--w); background: var(--brand); }
.pv-dist i:first-child { background: var(--sky); }
.pv-dist i:last-child { background: var(--cobalt-deep); }
.pv-ok { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: #e6f5ee; color: #0b7a4b; font-size: 11.5px; font-weight: 500; }
.pv-adv { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; }
.pv-adv p { display: grid; }
.pv-adv b { font-weight: 500; color: var(--navy); }
.pv-adv p span { font-size: 12px; color: var(--ink-3); }
.pv-lesson { margin-top: 8px; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; }
.pv-lesson .pv-prog { margin-top: 5px; }
.pv-play { width: 26px; height: 26px; border-radius: 50%; background: var(--navy); position: relative; }
.pv-play::after { content: ""; position: absolute; left: 10px; top: 8px; border-left: 8px solid var(--white); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.pv-months { margin-top: 8px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
.pv-months li { display: grid; justify-items: center; gap: 4px; font-size: 10.5px; color: var(--ink-3); }
.pv-months li::after { content: ""; width: 100%; height: 4px; border-radius: 2px; background: var(--surface-2); }
.pv-months li.s { color: var(--brand); font-weight: 600; }
.pv-months li.s::after { background: var(--brand); }
.pv-sess { margin-top: 8px; display: grid; gap: 3px; }
.pv-sess li { display: flex; justify-content: space-between; }
.pv-sess b { font-weight: 500; color: var(--navy); }
.pv-who { margin-top: 8px; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; }
.pv-who p { display: grid; }
.pv-who b { font-weight: 500; color: var(--navy); }
.pv-who span { font-size: 12px; color: var(--ink-3); }
.pv-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--pr-tint); color: var(--brand); font-weight: 600; font-size: 12px; }
.pv-inst ul { margin-top: 6px; display: grid; }
.pv-inst li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.pv-inst li:first-child { border-top: 0; }
.pv-inst li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--navy); }
.pv-inst li b { flex: none; height: 20px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 5px; background: var(--surface); color: var(--ink-2); font-weight: 500; font-size: 11.5px; }
.pv-inst li b.t-in { background: var(--pr-tint); color: var(--brand); }
.pv-inst li b.t-out { background: var(--surface-2); color: var(--navy); }
.pv-rm { padding: 12px 12px 0; -webkit-mask: linear-gradient(180deg, #000 72%, transparent); mask: linear-gradient(180deg, #000 72%, transparent); }
.pv-rm plannix-roadmap { display: block; }

/* A · Colonne con anteprima: subgrid so preview, names, prices, buttons and lists line up across cards */
.pr-a-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); gap: 0 12px; }
.pr-a-plan { grid-row: span 7; display: grid; grid-template-rows: subgrid; row-gap: 0; padding: 8px 8px 20px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); }
.pr-a-plan > :not(.pv) { min-width: 0; margin-inline: 10px; }
.pr-a-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.pr-a-head h3 { font: 600 16px/1.2 var(--sans); }
.pr-a-plan .pr-ds { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.pr-a-plan .pr-price { margin-top: 16px; }
.pr-a-plan .pr-fit { margin-top: 4px; min-height: 1.4em; }
.pr-a-plan .pr-btn { margin-top: 16px; }
.pr-a-plan .pr-list { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); align-content: start; }
/* the price comes straight under the name, then the description: prices share a row across cards, and a longer description only pushes its own button row, never opens a hole above the price */
:root[data-prezzi-v="anteprime"] .pr-a-plan > .pr-price { order: 1; margin-top: 8px; }
:root[data-prezzi-v="anteprime"] .pr-a-plan > :is(.pr-fit, .pr-fits) { order: 2; }
/* Roadmap's threshold and its launch offer share one row */
.pr-a-plan > .pr-fits { display: grid; gap: 2px; margin-top: 4px; }
.pr-a-plan > .pr-fits > .pr-fit { margin: 0; }
:root[data-prezzi-v="anteprime"] .pr-a-plan > .pr-ds { order: 3; margin-top: 12px; }
:root[data-prezzi-v="anteprime"] .pr-a-plan > :is(.pr-btn, .pr-list) { order: 4; }
/* every row is named, so cards share them whatever they hold: a plan with no threshold keeps its empty row, and the launch offer shares the threshold's */
@media (min-width: 721px) {
  :root[data-prezzi-v="anteprime"] .pr-a-plan > .pv { grid-row: 1; }
  :root[data-prezzi-v="anteprime"] .pr-a-plan > .pr-a-head { grid-row: 2; }
  :root[data-prezzi-v="anteprime"] .pr-a-plan > .pr-price { grid-row: 3; }
  :root[data-prezzi-v="anteprime"] .pr-a-plan > :is(.pr-fit, .pr-fits) { grid-row: 4; display: block; }
  :root[data-prezzi-v="anteprime"] .pr-a-plan > .pr-ds { grid-row: 5; }
  :root[data-prezzi-v="anteprime"] .pr-a-plan > .pr-btn { grid-row: 6; }
  :root[data-prezzi-v="anteprime"] .pr-a-plan > .pr-list { grid-row: 7; }
}
.pr-a-plan.is-on { box-shadow: inset 0 0 0 1.5px var(--brand), 0 12px 32px -18px rgba(3, 115, 226, 0.45); }
.pr-a-plan.is-on .pv { background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }

/* B · Esploratore: plan tabs on the left, what you get and when next to its large preview */
.pr-x { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.pr-tabs { display: grid; gap: 6px; }
.pr-tab { display: grid; gap: 4px; padding: 14px 16px; border: 0; border-radius: 10px; background: transparent; color: var(--navy); text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color 120ms ease, box-shadow 120ms ease; }
.pr-tab-n { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 15.5px/1.2 var(--sans); }
.pr-tab-p .pr-price b { font-size: 18px; }
.pr-tab-d { font-size: 13.5px; color: var(--ink-3); }
.pr-tab[aria-selected="true"] { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--brand), 0 10px 24px -18px rgba(1, 26, 83, 0.4); }
@media (hover: hover) and (pointer: fine) { .pr-tab[aria-selected="false"]:hover { background: color-mix(in srgb, var(--bg) 60%, transparent); } }
.pr-panels { display: grid; gap: 16px; }
.pr-panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-radius: 14px; background: var(--bg); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.pr-panel[hidden] { display: none; }
.pr-panel-pv { padding: 10px; }
.pv-lg { height: 100%; min-height: 440px; margin: 0; padding: 40px 32px; display: grid; align-content: center; border-radius: 10px; }
.pv-lg:not(.pv-rm-lg) > .pv-card { width: min(100%, 340px); margin-inline: auto; zoom: 1.28; }
.pv-lg.pv-free, .pv-lg.pv-year { gap: 0; }
.pv-lg .pv-lesson, .pv-lg .pv-who { width: min(100%, 340px); margin-inline: auto; zoom: 1.28; }
.pv-rm-lg { padding: 18px 18px 0; align-content: start; -webkit-mask: linear-gradient(180deg, #000 82%, transparent); mask: linear-gradient(180deg, #000 82%, transparent); }
.pv-rm-lg plannix-roadmap { display: block; }
.pv-rm-lg { max-height: 560px; }
.pr-panel-tx { display: grid; align-content: start; gap: 4px; padding: 28px 28px 28px 20px; }
.pr-panel-tx h3 { font: 400 26px/1.15 var(--serif); letter-spacing: -0.015em; }
.pr-panel-tx .pr-price { margin-top: 6px; }
.pr-when { margin-top: 18px; display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; }
.pr-when-g { display: grid; gap: 6px; }
.pr-when dt { font: 500 13px/1.3 var(--sans); color: var(--brand); }
.pr-when dd { margin: 0; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; font-size: 14.5px; line-height: 1.42; color: var(--navy); }
.pr-when dd::before { content: ""; width: 16px; height: 16px; margin-top: 2px; background: var(--brand); -webkit-mask: var(--pr-check) center / 16px no-repeat; mask: var(--pr-check) center / 16px no-repeat; }
.pr-panel-tx .pr-btn { margin-top: 22px; justify-self: start; }
.pr-x:not(.is-tabs) { grid-template-columns: minmax(0, 1fr); }
.pr-x:not(.is-tabs) .pr-tabs { display: none; }

/* C · Cosa ricevi, voce per voce: rows are deliverables, cells say them in words */
.pr-c-pick { display: none; }
.pr-c-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; }
.pr-c-table col.pr-c-lab { width: 16%; }
.pr-c-table thead th { position: sticky; top: 0; z-index: 2; padding: 16px 16px 18px; background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; font-weight: 400; }
.pr-c-table thead td { border-bottom: 1px solid var(--line-2); }
.pr-c-table thead .pr-c-plan { display: grid; gap: 4px; }
.pr-c-table thead h3 { display: flex; align-items: center; gap: 8px; font: 600 15.5px/1.2 var(--sans); }
.pr-c-table thead .pr-price b { font-size: 20px; }
.pr-c-table thead .pr-btn { margin-top: 10px; justify-self: start; }
.pr-c-table tbody th, .pr-c-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; line-height: 1.42; }
.pr-c-table tbody th { color: var(--ink-3); padding-left: 0; font-size: 13.5px; }
.pr-c-table tbody td { color: var(--navy); }
.pr-c-table .pr-c-group th { padding: 28px 0 10px; border-bottom: 1px solid var(--line-2); font: 600 14px/1.3 var(--sans); color: var(--navy); }
.pr-c-table td:nth-child(3), .pr-c-table thead th:nth-child(3) { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.pr-no { display: inline-block; width: 10px; height: 0; margin: 9px 3px 0; vertical-align: top; border-top: 1.5px solid var(--line-2); }

/* D · Scura: the Roadmap in front with the real component, the other three plans below */
.pr-d { position: relative; isolation: isolate; background: var(--night); color: var(--on-dark); overflow: clip; }
.pr-d::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -260px; width: min(1300px, 150vw); height: 620px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(3, 115, 226, 0.34), rgba(3, 115, 226, 0)); pointer-events: none; }
.pr-d .h2 { color: var(--white); }
.pr-d-feat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); margin-bottom: 12px; border-radius: 14px; background: var(--pr-night-card); box-shadow: inset 0 0 0 1px rgba(226, 235, 250, 0.16), 0 30px 70px -40px rgba(0, 0, 0, 0.7); overflow: hidden; }
.pr-d-pv { padding: 18px 18px 0; -webkit-mask: linear-gradient(180deg, #000 80%, transparent); mask: linear-gradient(180deg, #000 80%, transparent); max-height: 470px; overflow: hidden; }
.pr-d-pv plannix-roadmap { display: block; }
.pr-d-tx { display: grid; align-content: start; padding: 28px 28px 28px 32px; }
.pr-d-tx .pr-ds { margin-top: 6px; font-size: 15px; color: var(--on-dark-2); }
.pr-d-tx .pr-price { margin-top: 16px; }
.pr-d-tx .pr-list { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(226, 235, 250, 0.12); }
.pr-d-tx .pr-btn { margin-top: 22px; justify-self: start; }
.pr-d-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr-d .pr-a-plan { background: var(--pr-night-card); box-shadow: inset 0 0 0 1px rgba(226, 235, 250, 0.14); }
.pr-d .pv { background: rgba(226, 235, 250, 0.07); }
.pr-d .pr-a-head h3, .pr-d .pr-price b, .pr-d .pr-list b { color: var(--white); }
.pr-d .pr-ds, .pr-d .pr-list { color: var(--on-dark-2); }
.pr-d .pr-price small, .pr-d .pr-fit { color: rgba(226, 235, 250, 0.6); }
.pr-d .pr-list li::before { background: var(--sky); }
.pr-d .pr-a-plan .pr-list { border-top-color: rgba(226, 235, 250, 0.12); }
.pr-d .pr-btn { background: rgba(255, 255, 255, 0.08); color: var(--white); box-shadow: inset 0 0 0 1px rgba(226, 235, 250, 0.2); }
.pr-d .pr-btn.is-primary { background: var(--white); color: var(--navy); box-shadow: none; }
.pr-d .pr-badge { background: rgba(98, 206, 254, 0.14); color: var(--sky); }
.pr-d .link { color: var(--white); }
.pr-d :focus-visible { outline-color: var(--white); }
@media (hover: hover) and (pointer: fine) {
  .pr-d .pr-btn:hover { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(226, 235, 250, 0.32); }
  .pr-d .pr-btn.is-primary:hover { background: #e6eefb; box-shadow: none; }
}

@media (max-width: 1080px) {
  .pr-a-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pr-d-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-x { grid-template-columns: minmax(0, 1fr); }
  .pr-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pr-tab-d { display: none; }
  .pr-panel, .pr-d-feat { grid-template-columns: minmax(0, 1fr); }
  .pv-lg { min-height: 340px; }
}
@media (max-width: 720px) {
  /* one column: the seven shared rows of the desktop grid would stay as empty tracks, each with its gap, under the last card */
  .pr-a-grid, .pr-d-three { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .pr-a-plan { grid-row: auto; grid-template-rows: none; }
  .pr-a-plan .pr-fit:empty { display: none; }
  .pr-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-tab { padding: 12px; }
  .pr-tab-n .pr-badge { display: none; }
  .pr-panel-tx { padding: 22px 18px; }
  .pv-lg { min-height: 0; padding: 24px 14px; }
  .pv-lg:not(.pv-rm-lg) > .pv-card, .pv-lg .pv-lesson, .pv-lg .pv-who { zoom: 1; }
  .pv-rm-lg, .pr-d-pv { max-height: 360px; }
  .pr-d-pv { padding: 14px 0 0 14px; }
  .pr-d-tx { padding: 22px 18px; }
  .pr-c-pick { display: flex; position: sticky; top: 0; z-index: 3; gap: 2px; margin-bottom: 4px; padding: 3px; border-radius: 10px; background: var(--surface-2); }
  .pr-c-pick label { flex: 1; display: grid; place-items: center; height: 34px; border-radius: 8px; font: 500 13.5px/1 var(--sans); color: var(--ink-2); cursor: pointer; }
  .pr-c-pick input { position: absolute; opacity: 0; pointer-events: none; }
  .pr-c-pick input:checked + label { background: var(--bg); color: var(--navy); box-shadow: 0 1px 2px rgba(1, 26, 83, 0.12); }
  .pr-c-pick input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 1px; }
  .pr-c-table { table-layout: auto; }
  .pr-c-table col.pr-c-lab { width: 38%; }
  .pr-c-table thead th { position: static; padding: 14px 10px 16px; }
  .pr-c-table tbody td { padding: 12px 10px; }
  .pr-c-table td:nth-child(3), .pr-c-table thead th:nth-child(3) { background: none; }
  .pr-c:has(#pc-1:checked) :is(td, th):is(:nth-child(3), :nth-child(4), :nth-child(5)),
  .pr-c:has(#pc-2:checked) :is(td, th):is(:nth-child(2), :nth-child(4), :nth-child(5)),
  .pr-c:has(#pc-3:checked) :is(td, th):is(:nth-child(2), :nth-child(3), :nth-child(5)),
  .pr-c:has(#pc-4:checked) :is(td, th):is(:nth-child(2), :nth-child(3), :nth-child(4)) { display: none; }
}

/* Concentric previews: radius outside = radius inside + the distance between the two edges, so the values are tokens and the outer one is a calc.
   The well sits flush with the card's top and sides (its top corners are the card's); the panels sit --pv-pad from every side of the well and from each other.
   :not(#_) adds an id to the selector: system.css styles #prezzi .pr-a-plan .pv after this file, and must not win here. */
:root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan {
  --pv-pad: 10px;
  --pv-r-inner: var(--r-ctl, 6px);
  --pv-r-outer: calc(var(--pv-r-inner) + var(--pv-pad));
  --pv-text-x: 18px;
  position: relative;
  border-radius: var(--pv-r-outer);
  padding: 0 0 20px;
}
:root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan > :not(.pv) { margin-inline: var(--pv-text-x); }
:root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pv {
  display: flex; flex-direction: column; gap: var(--pv-pad);
  margin: 0 0 18px; padding: var(--pv-pad);
  border-radius: var(--pv-r-outer) var(--pv-r-outer) 0 0;
  overflow: hidden; -webkit-mask: none; mask: none;
}
:root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pv > * { flex: none; margin: 0; }
:root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pv > :last-child { flex: 1 1 auto; min-height: 0; }
:root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pv .pv-card { border-radius: var(--pv-r-inner); }
/* Roadmap: the window is the panel, whole and white; its cut fades to white inside it, so the blue well keeps a clean edge and the window its own corners */
:root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pv-rm plannix-roadmap { position: relative; overflow: hidden; border-radius: var(--pv-r-inner); background: #ffffff; }
:root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pv-rm plannix-roadmap::after { content: ""; position: absolute; inset: auto 0 0; height: 44%; background: linear-gradient(180deg, rgb(255 255 255 / 0), #ffffff 88%); pointer-events: none; }
:root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pv-rm .prm-window { border-radius: var(--pv-r-inner); }
/* the highlighted card's outline is drawn over the well, on the same radius */
:root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan.is-on { box-shadow: 0 12px 32px -18px rgba(3, 115, 226, 0.45); }
:root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan.is-on::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--brand); pointer-events: none; z-index: 1; }
@media (max-width: 640px) {
  :root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan { --pv-text-x: var(--m-card-pad); padding: 0 0 var(--m-card-pad); }
  :root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pv { height: 150px; max-height: none; margin-bottom: 12px; }
  /* without a preview the text starts from the card's top, with the band above it */
  :root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan:not(:has(.is-primary)) { padding-top: 22px; }
  :root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan:not(:has(.is-primary)) .pv { display: none; }
}

/* Tier identity with the previews: the tier's material lives in the preview well only. Every card keeps the same light body and hairline, and only the Roadmap carries the brand ring. */
:root[data-prezzi-v="anteprime"]:not([data-tiers="off"]) .site:not(.rl) #prezzi .pr-a-plan:not(.is-on) { box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- Simple cards: the default (DialKit "Prezzi: con anteprime" brings the previews back, html[data-prezzi-v="anteprime"]) ----------
   One structure for every plan: a header in the tier's material with name and price, then the promise, the threshold, the button, the list.
   The rows are the grid's (subgrid), so prices and buttons sit at the same height in all four cards. Only the Roadmap has a filled button. */
:root:not([data-prezzi-v="anteprime"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan { grid-row: span 6; padding: 0 0 20px; overflow: hidden; }
:root:not([data-prezzi-v="anteprime"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pv { display: none; }
/* every child in the one column: with the header painted on rows 1-2, auto-placement would open a second column beside it */
:root:not([data-prezzi-v="anteprime"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan > * { grid-column: 1; }
:root:not([data-prezzi-v="anteprime"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pr-a-head { grid-row: 1; margin-top: 0; padding-top: 18px; position: relative; z-index: 1; }
:root:not([data-prezzi-v="anteprime"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pr-price { grid-row: 2; margin-top: 10px; padding-bottom: 18px; position: relative; z-index: 1; }
:root:not([data-prezzi-v="anteprime"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pr-ds { grid-row: 3; margin-top: 16px; }
:root:not([data-prezzi-v="anteprime"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan > :is(.pr-fit, .pr-fits) { grid-row: 4; }
:root:not([data-prezzi-v="anteprime"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pr-btn { grid-row: 5; }
:root:not([data-prezzi-v="anteprime"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pr-list { grid-row: 6; }
/* the header: rows 1-2 painted in the tier's material, edge to edge, under the card's top corners */
:root:not([data-prezzi-v="anteprime"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan::before { content: ""; grid-row: 1 / 3; grid-column: 1; background: var(--tier-head, var(--surface)); }
:root:not([data-prezzi-v="anteprime"]):not([data-tiers="off"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan[data-tier="free"] { --tier-head: var(--tier-free, #efe8dc); }
:root:not([data-prezzi-v="anteprime"]):not([data-tiers="off"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan[data-tier="roadmap"] { --tier-head: var(--tier-roadmap-deep, #0262c2); }
:root:not([data-prezzi-v="anteprime"]):not([data-tiers="off"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan[data-tier="premium"] { --tier-head: var(--tier-premium, #071846); }
:root:not([data-prezzi-v="anteprime"]):not([data-tiers="off"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan[data-tier="private"] { --tier-head: var(--tier-private, #0c0f14); }
/* light text on the three dark headers (deep blue 5,95:1 and 4,74:1 for the small line; night and ink above 9:1) */
:root:not([data-prezzi-v="anteprime"]):not([data-tiers="off"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan:is([data-tier="roadmap"], [data-tier="premium"], [data-tier="private"]) :is(.pr-a-head, .pr-price) { --navy: #ffffff; --ink-3: rgb(255 255 255 / 0.85); color: #ffffff; }
:root:not([data-prezzi-v="anteprime"]):not([data-tiers="off"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan[data-tier="roadmap"] .pr-badge { background: #ffffff; color: var(--brand-press, #0262c2); }
:root:not([data-prezzi-v="anteprime"]):not([data-tiers="off"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan[data-tier="private"]::before { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--tier-private-accent, #cfc8ba) 45%, transparent); }
@media (max-width: 640px) {
  :root:not([data-prezzi-v="anteprime"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan,
  :root:not([data-prezzi-v="anteprime"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan:not(:has(.is-primary)) { padding: 0 0 16px; background-image: none; }
  :root:not([data-prezzi-v="anteprime"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pr-a-head { padding-top: 16px; }
  :root:not([data-prezzi-v="anteprime"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pr-price { padding-bottom: 14px; }
  :root:not([data-prezzi-v="anteprime"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pr-ds { margin-top: 12px; }
}
/* one column under 720 px: the card leaves the shared rows (pricing.css resets them there), so the spanning goes too */
@media (max-width: 720px) { :root:not([data-prezzi-v="anteprime"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan { grid-row: auto; } }
/* the Roadmap a step above the others: elevation by shadow only, so its price and button stay on the shared rows */
:root:not([data-prezzi-v="anteprime"]) :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan.is-on { box-shadow: 0 24px 48px -20px rgb(3 115 226 / 0.45), 0 2px 8px rgb(2 55 108 / 0.08); }
/* phones: the badge at the 13 px minimum (system.css sets it to 12 after this file) */
@media (max-width: 640px) { :root :is(#prezzi, #prezzi-d, body):not(#_) .pr-badge { font-size: var(--t-13, 13px); } }
/* the Roadmap preview answers the free card's figure: the case's "In sintesi" (the same 4.600 € of Roberto's costs) in place of the persona */
:root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pv-rm plannix-roadmap[stage="reduced"] :is(.prm-title, .prm-persona) { display: none; }
:root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pv-rm plannix-roadmap::after { height: 22%; }
:root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pv-rm plannix-roadmap[stage="reduced"] .prm-summary { display: block !important; margin-top: 0; }
:root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pv-rm .prm-summary-long { display: none; }
:root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pv-rm .prm-summary-short { display: inline; }
@media (max-width: 640px) { :root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pv-rm plannix-roadmap::after, :root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pv-rm .prm-list { display: none; } :root :is(#prezzi, #prezzi-d, body):not(#_) .pr-a-plan .pv.pv-rm { height: auto; } }

/* previews in the four hero materials (tiers.css); later and equally specific, so they win over the solid fills above */
:root:not([data-tiers="off"]) :is(#prezzi, body) .pr-a-plan .pv.pv-free { background: var(--tier-free-bg); }
:root:not([data-tiers="off"]) :is(#prezzi, body) .pr-a-plan .pv.pv-rm { background: var(--tier-roadmap-bg); }
:root:not([data-tiers="off"]) :is(#prezzi, body) .pr-a-plan .pv.pv-app { background: var(--tier-premium-bg); }
:root:not([data-tiers="off"]) :is(#prezzi, body) .pr-a-plan .pv.pv-inst { background: var(--tier-private-bg); }