/* Landing Premium and Private (premium.html, private.html): blocks A (year), B (app tour), C (comparison), the plan card, hero, boundary and closing. Tokens from home.css and system.css. */


.pm .sec-head { margin-bottom: 32px; }
.pm .lead { margin-top: 4px; }
.pm-k { font-size: var(--t-13); color: var(--ink-2); }

/* Product UI, shared by all three proposals: app scale (13-14 px, 40-48 px rows) */
.pm-ui { --ui-fg: #02376c; --ui-2: #4d6584; --ui-line: #e1e7ef; --ui-bg: #ffffff; --ui-soft: #f4f7fb; --pm-card-r: 10px; font-size: var(--t-13); line-height: 1.4; color: var(--ui-fg); }
.pm-card { background: var(--ui-bg); border-radius: var(--pm-card-r, 10px); box-shadow: 0 0 0 1px var(--ui-line), 0 10px 24px -16px rgb(2 55 108 / 0.35); }
.pm-ui .pm-k { color: var(--ui-2); }
.pm-num { font-variant-numeric: tabular-nums; font-weight: 500; }
.pm-ok { color: #0b7a4b; }
.pm-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-round); background: var(--ui-soft); color: var(--ui-2); font-size: var(--t-12); font-weight: 500; white-space: nowrap; }
.pm-pill.is-ok { background: #e6f5ee; color: #0b7a4b; }
.pm-pill.is-blue { background: #e6f0fd; color: var(--brand-press); }
.pm-av { width: 24px; height: 24px; border-radius: var(--r-round); object-fit: cover; flex: none; }
.pm-bar { height: 6px; border-radius: var(--r-round); background: var(--ui-soft); overflow: hidden; }
.pm-bar > i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--brand); }
.pm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.pm-row + .pm-row { border-top: 1px solid var(--ui-line); }

/* A. Un anno con Plannix: a horizontal track, people nodes carry the consultant's face, app nodes the Plannix mark */
.pm-year { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px; }
.pm-year::before { content: ""; position: absolute; top: 15px; left: 16px; right: 16px; height: 1px; background: var(--line-2); }
.pm-step { position: relative; display: grid; align-content: start; gap: 6px; }
.pm-node { position: relative; width: 32px; height: 32px; margin-bottom: 14px; border-radius: var(--r-round); background: var(--bg); box-shadow: 0 0 0 1px var(--line-2); display: grid; place-items: center; }
.pm-node img { width: 32px; height: 32px; border-radius: inherit; object-fit: cover; }
.pm-node.is-app img { width: 18px; height: 18px; border-radius: 0; }
.pm-node.is-person { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--brand); }
.pm-step h3 { font: 500 var(--t-16)/1.3 var(--sans); }
.pm-step p { font-size: var(--t-14); line-height: 1.45; color: var(--ink-2); }
.pm-step .pm-ui { margin-top: 12px; }
.pm-chip { padding: 10px 12px; }
.pm-chip .pm-row { min-height: 32px; }
.pm-year-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.pm-year-foot p { font-size: var(--t-14); color: var(--ink-2); }
@media (max-width: 960px) {
  .pm-year { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: 48px; }
  .pm-year::before { top: 16px; bottom: 16px; left: 15px; right: auto; width: 1px; height: auto; }
  .pm-node { position: absolute; left: -48px; top: -4px; margin: 0; }
  .pm-step .pm-ui { max-width: 360px; }
}

/* B. La piattaforma: a night chapter, tabs on the left, the real app frame on the right */
.pm-night { --bg: var(--night); --fg: #ffffff; --surface: var(--night-2); --line: rgba(255, 255, 255, 0.12); --line-2: rgba(255, 255, 255, 0.22); background: var(--bg); color: var(--fg); }
.pm-night, .pm-night .wrap { --ink-2: color-mix(in oklab, #ffffff 74%, var(--night)); }
.pm-tour { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
.pm-tabs { display: grid; border-top: 1px solid var(--line); }
.pm-tab { all: unset; box-sizing: border-box; display: grid; gap: 4px; padding: 14px 0 14px 16px; border-bottom: 1px solid var(--line); cursor: pointer; position: relative; }
.pm-tab::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: transparent; transition: background-color var(--dur-2) ease; }
.pm-tab b { font: 500 var(--t-16)/1.3 var(--sans); color: var(--ink-2); transition: color var(--dur-2) ease; }
.pm-tab span { display: none; font-size: var(--t-14); line-height: 1.45; color: var(--ink-2); }
.pm-tab[aria-selected="true"]::before { background: var(--sky); }
.pm-tab[aria-selected="true"] b { color: #ffffff; }
.pm-tab[aria-selected="true"] span { display: block; }
.pm-tab:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .pm-tab:hover b { color: #ffffff; } }
.pm-tour-cta { margin-top: 24px; }
.pm-tour-cta .link { color: #ffffff; }

.pm-app { --pm-main-pad: 20px; --pm-app-r: 14px; display: grid; grid-template-columns: 168px minmax(0, 1fr); min-height: 432px; border-radius: var(--pm-app-r); background: #f7f9fc; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14), 0 40px 80px -40px rgb(0 0 0 / 0.7); overflow: hidden; }
.pm-side { padding: 14px 10px; background: #ffffff; border-right: 1px solid var(--ui-line); display: grid; align-content: start; gap: 2px; }
.pm-side .pm-logo { display: flex; align-items: center; gap: 8px; padding: 2px 8px 12px; font-weight: 600; font-size: var(--t-14); }
.pm-side .pm-logo img { width: 18px; height: 18px; }
.pm-side p { padding: 10px 8px 4px; font-size: var(--t-12); color: var(--ui-2); }
.pm-side a { display: block; padding: 6px 8px; border-radius: 6px; font-size: var(--t-13); color: var(--ui-fg); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-side a.is-on { background: #e6f0fd; color: var(--brand); font-weight: 500; }
.pm-main { padding: var(--pm-main-pad, 20px); display: grid; align-content: start; gap: 14px; min-width: 0; }
.pm-main h4 { font: 500 var(--t-18)/1.2 var(--sans); }
.pm-panel { display: grid; gap: 12px; }
.pm-js .pm-panel[hidden] { display: none; }
.pm-panel-intro { display: none; }
.pm-g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pm-pad { padding: 14px 16px; }
.pm-big { font: 400 28px/1.1 var(--serif); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.pm-dist { display: flex; height: 8px; border-radius: var(--r-round); overflow: hidden; gap: 2px; margin: 12px 0 10px; }
.pm-dist i { display: block; width: var(--w); background: var(--c); }
.pm-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.pm-legend li { display: flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--ui-2); }
.pm-legend li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.pm-legend b { margin-left: auto; color: var(--ui-fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.pm-ring { width: 64px; height: 64px; flex: none; transform: rotate(-90deg); }
.pm-ring circle { fill: none; stroke-width: 5; }
.pm-ring .t { stroke: var(--ui-soft); }
.pm-ring .a { stroke: #19a463; stroke-linecap: round; }
.pm-score { display: flex; align-items: center; gap: 14px; }
.pm-score .pm-big { font-size: 32px; }
.pm-adv { display: flex; align-items: center; gap: 12px; }
.pm-adv img { width: 44px; height: 44px; border-radius: var(--r-round); object-fit: cover; }
.pm-adv b { display: block; font-size: var(--t-14); font-weight: 500; }
.pm-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pm-ubtn { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-ctl); background: var(--brand); color: #ffffff; font-size: var(--t-13); font-weight: 500; white-space: nowrap; }
.pm-ulink { font-size: var(--t-13); color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) {
  .pm-tour { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pm-tabs { display: flex; gap: 8px; overflow-x: auto; border: 0; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .pm-tabs::-webkit-scrollbar { display: none; }
  .pm-tab { flex: none; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: var(--r-round); }
  .pm-tab::before { content: none; }
  .pm-tab b { font-size: var(--t-14); }
  .pm-tab[aria-selected="true"] { background: #ffffff; border-color: #ffffff; }
  .pm-tab[aria-selected="true"] b { color: var(--night); }
  .pm-tab[aria-selected="true"] span { display: none; }
  .pm-panel-intro { display: block; font-size: var(--t-14); line-height: 1.45; color: var(--ink-2); }
  .pm-js .pm-intros > p[hidden] { display: none; }
  /* the cards reach the window's bottom corners here: window radius = card radius + inset */
  .pm-app { --pm-main-pad: 14px; --pm-app-r: calc(var(--pm-card-r, 10px) + var(--pm-main-pad)); grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pm-side { display: none; }
  .pm-g2 { grid-template-columns: minmax(0, 1fr); }
}

/* C. Una volta, tutto l’anno: the comparison as rows of things you receive, Premium column lit */
.pm-cmp { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); border-top: 1px solid var(--line-2); }
.pm-cmp > * { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); font-size: var(--t-14); line-height: 1.45; }
.pm-cmp .pm-c-l { font-weight: 500; font-size: var(--t-14); }
.pm-cmp .pm-c-r { color: var(--ink-2); }
.pm-cmp .pm-c-p { padding-left: 16px; background: color-mix(in srgb, var(--brand) 6%, var(--bg)); }
.pm-cmp .pm-c-h { padding-block: 18px 14px; border-bottom-color: var(--line-2); }
.pm-cmp .pm-c-h b { display: block; font: 400 var(--t-28)/1.1 var(--serif); letter-spacing: -0.015em; }
.pm-cmp .pm-c-h span { display: block; margin-top: 4px; font-size: var(--t-13); color: var(--ink-2); }
.pm-cmp .pm-c-hp { border-radius: 10px 10px 0 0; }
.pm-cmp .pm-c-last { border-radius: 0 0 10px 10px; border-bottom: 0; }
.pm-cmp-foot { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); padding-top: 20px; }
.pm-cmp-foot > div:nth-child(3) { padding-left: 16px; }
@media (max-width: 860px) {
  .pm-cmp, .pm-cmp-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pm-cmp .pm-c-l { grid-column: 1 / -1; padding: 16px 0 4px; border-bottom: 0; }
  .pm-cmp .pm-c-r { padding-right: 12px; }
  .pm-cmp .pm-c-p { padding-inline: 12px; }
  .pm-cmp .pm-c-blank, .pm-cmp-foot > .pm-c-blank { display: none; }
  .pm-cmp .pm-c-hp { border-radius: 10px 10px 0 0; }
  .pm-cmp .pm-c-h b { font-size: var(--t-28); }
  .pm-cmp-foot > div:nth-child(3) { padding-left: 12px; }
}

/* C2. The Premium card for the pricing table: the app preview replaces "Il tuo anno" */
.pm-plan-wrap { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line); }
.pm-plan { display: grid; gap: 0; padding: 8px 8px 20px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); }
.pm-pv { height: 196px; margin-bottom: 18px; padding: 12px; border-radius: 8px; background: var(--surface); overflow: hidden; display: grid; gap: 8px; align-content: start; }
.pm-pv .pm-card { padding: 10px 12px; }
.pm-plan h3 { padding: 0 12px; font: 500 var(--t-18)/1.2 var(--sans); }
.pm-plan .pm-ds { padding: 6px 12px 0; font-size: var(--t-14); color: var(--ink-2); }
.pm-plan .pm-price { padding: 14px 12px 0; font: 400 var(--t-28)/1 var(--serif); }
.pm-plan .pm-price small { margin-left: 6px; font: 400 var(--t-13) var(--sans); color: var(--ink-2); }
.pm-plan .pm-fit { padding: 6px 12px 0; font-size: var(--t-13); color: var(--ink-2); }
.pm-plan .pm-pbtn { margin: 16px 12px 0; display: flex; justify-content: center; align-items: center; height: 40px; border-radius: var(--r-btn); box-shadow: inset 0 0 0 1px var(--line-2); font-size: var(--t-14); font-weight: 500; text-decoration: none; color: var(--fg); }
.pm-groups { display: grid; gap: 14px; padding: 18px 12px 0; }
.pm-groups p { font-size: var(--t-13); color: var(--ink-2); margin-bottom: 4px; }
.pm-groups li { font-size: var(--t-14); line-height: 1.45; padding: 2px 0; }
.pm-groups li b { font-weight: 500; }
@media (max-width: 860px) { .pm-plan-wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

@media (prefers-reduced-motion: reduce) { .pm * { transition: none !important; } }
.pm-stage { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 961px) { .pm-intros { display: none; } }
.pm-row { padding-block: 6px; }
.pm-main > .pm-panel > h4 { margin-top: -2px; }
@media (max-width: 960px) {
  .pm-tour > div:first-child { display: contents; }
  .pm-tabs { order: 1; } .pm-stage { order: 2; } .pm-tour-cta { order: 3; margin-top: 0; }
}
.pm-legend b, .pm-num { white-space: nowrap; }
.pm-panel > h4 { margin: 0; }
@media (max-width: 960px) { .pm-legend { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Landing shell, shared by premium.html and private.html ---------- */
.pm-sand { --bg: var(--sand); --surface: var(--sand); --card: #ffffff; --line: color-mix(in oklab, var(--sand), #02376c 10%); --line-2: color-mix(in oklab, var(--sand), #02376c 18%); background: var(--bg); }
/* Light dawn for the reviews band, the same as the home and the Roadmap page */
.site main > .sec.pm-dawn, .site main > #recensioni.pm-dawn { --bg: #fdf4ea; --surface: #fdf4ea; --card: #ffffff; --line: color-mix(in oklab, #fdf4ea, #02376c 10%); --line-2: color-mix(in oklab, #fdf4ea, #02376c 18%); background: linear-gradient(180deg, #ffffff 0%, #fdf4ea 30%, #f8e6d4 100%); }

/* Hero: night, copy left, the product right; 56 px of nav plus 56 px of air above the H1 */
.pm-hero { --bg: var(--night); --fg: #ffffff; --line: rgba(255, 255, 255, 0.12); --line-2: rgba(255, 255, 255, 0.22); position: relative; isolation: isolate; overflow: clip; background: var(--bg); color: var(--fg); padding-bottom: 72px; }
.pm-hero, .pm-hero .wrap { --ink-2: color-mix(in oklab, #ffffff 74%, var(--night)); }
.pm-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 40% at 80% 20%, rgb(27 73 194 / 0.34), transparent 70%); pointer-events: none; }
.pm-hero-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 56px; align-items: center; padding-top: 112px; }
.pm-hero-copy { display: grid; justify-items: start; gap: 18px; }
.pm-hero .h1 { max-width: 12em; text-wrap: balance; }
.pm-hero .sub { font-size: var(--t-18); line-height: 1.5; color: var(--ink-2); max-width: 30em; text-wrap: pretty; }
.pm-offer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 6px; }
.pm-offer b { font: 500 var(--t-28)/1 var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pm-offer span { font-size: var(--t-14); color: var(--ink-2); }
.pm-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 4px; }
.pm-hero .btn, #chiusura .btn { background: #ffffff; color: #02376c; }
.pm-hero .link, #chiusura .link { color: #ffffff; }
@media (hover: hover) and (pointer: fine) { .pm-hero .btn:hover, #chiusura .btn:hover { background: #e6eefb; } }
.pm-hero-ui { min-width: 0; }
@media (max-width: 960px) {
  .pm-hero { padding-bottom: var(--m-sec, 48px); }
  .pm-hero-in { grid-template-columns: minmax(0, 1fr); padding-top: var(--m-hero-top, 88px); gap: var(--m-lede-content, 32px); }
}

/* The dashboard frame ("Il mio Plannix"): the real dashboard widgets, at product scale */
.pm-dash { display: grid; gap: 12px; }
.pm-dash-head p:first-child { font: 500 var(--t-18)/1.2 var(--sans); }
.pm-dash-g { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; }
.pm-dash-g > .pm-card:last-child { grid-column: 1 / -1; }
.pm-adv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 960px) { .pm-dash-g { grid-template-columns: minmax(0, 1fr); } }

/* What is included: three groups, the Superpower "What's included" layout */
.pm-inc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line-2); background: var(--card, #fff); }
.pm-inc > div { padding: 24px; display: grid; align-content: start; gap: 14px; }
.pm-inc > div + div { border-left: 1px solid var(--line); }
.pm-inc h3 { font: 500 var(--t-18)/1.25 var(--sans); }
.pm-inc ul { display: grid; gap: 12px; }
.pm-inc li { display: grid; gap: 2px; }
.pm-inc li b { font-weight: 500; font-size: var(--t-16); }
.pm-inc li span { font-size: var(--t-14); line-height: 1.45; color: var(--ink-2); }
.pm-ico { width: 24px; height: 24px; display: grid; place-items: center; color: var(--cobalt, #1b49c2); }
.pm-ico svg { width: 24px; height: 24px; }
@media (max-width: 860px) { .pm-inc { grid-template-columns: minmax(0, 1fr); } .pm-inc > div + div { border-left: 0; border-top: 1px solid var(--line); } .pm-inc > div { padding: var(--m-card-pad); } }

/* Price block: the plan card next to how you pay */
.pm-price-g { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 32px 64px; align-items: start; }
.pm-pay { display: grid; border-top: 1px solid var(--line-2); }
.pm-pay li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--t-14); line-height: 1.45; }
.pm-pay b { font-weight: 500; }
.pm-pay span { color: var(--ink-2); }
.pm-plan .pm-pbtn.is-primary { background: var(--brand); color: #ffffff; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .pm-plan .pm-pbtn.is-primary:hover { background: var(--brand-press); } }
@media (max-width: 860px) { .pm-price-g { grid-template-columns: minmax(0, 1fr); } .pm-pay li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* Where Premium ends and Private begins: two cards side by side (Braintrust) */
.pm-edge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pm-edge article { display: grid; align-content: start; gap: 8px; padding: 24px; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line-2); }
.pm-edge article.is-here { background: color-mix(in srgb, var(--brand) 5%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, var(--line-2)); }
.pm-edge h3 { font: 400 var(--t-28)/1.1 var(--serif); letter-spacing: -0.015em; }
.pm-edge .pm-k { font-size: var(--t-13); }
.pm-edge p:not(.pm-k) { font-size: var(--t-16); line-height: 1.5; color: var(--ink-2); }
.pm-edge .link { margin-top: 8px; justify-self: start; }
@media (max-width: 860px) { .pm-edge { grid-template-columns: minmax(0, 1fr); gap: var(--m-card-gap); } .pm-edge article { padding: var(--m-card-pad); } }

/* Closing: night, title left, price and button right */
.pm-close-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.pm-close-in .sec-head { margin: 0; max-width: 34rem; }
.pm-close-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.pm-close-buy .pm-offer { margin: 0; }
#chiusura .pm-offer span { color: rgb(255 255 255 / 0.72); }

/* Mobile bar: name and price left, button right */
.pm-mbar { display: none; }
@media (max-width: 860px) {
  .pm-mbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .pm-mbar .btn { width: auto; flex: none; }
  .pm-mbar-p { display: grid; line-height: 1.25; font-size: var(--t-13); color: #44546c; }
  .pm-mbar-p b { font-size: var(--t-14); font-weight: 600; color: #02376c; }
  .pm-mbar[data-theme="dark"] .pm-mbar-p { color: rgb(255 255 255 / 0.72); }
  .pm-mbar[data-theme="dark"] .pm-mbar-p b { color: #ffffff; }
  .pm main { padding-bottom: 72px; }
}

/* Section rhythm on these pages: light sections get a hairline only between two light ones of the same tone */
.pm .sec + .sec:not(.pm-night, .pm-sand, .pm-dawn, #chiusura) { border-top: 0; }
.pm-inline { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }

/* Home teaser under the pricing table: copy left, the dashboard right */
.pm-teaser-g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 56px; align-items: center; }
@media (max-width: 960px) { .pm-teaser-g { grid-template-columns: minmax(0, 1fr); } }
.pm .pm-pv { height: auto; }
.pm-price-g .pm-plan { background: var(--card, #fff); }
/* On phones the hero keeps patrimonio and consultant; the score is in the app tour below */
@media (max-width: 960px) { .pm-hero .pm-dash-g > .pm-card:nth-child(2) { display: none; } }
/* Type v2 (system.css): the serif figures and titles of these pages join the serif tracking curve and the STYL scale */
.site :is(.pm-big, .pm-cmp .pm-c-h b, .pm-plan .pm-price, .pm-edge h3) { --tr: var(--tr-serif); }
.site :is(.pm-cmp .pm-c-h b, .pm-plan .pm-price, .pm-edge h3) { font-variation-settings: "STYL" var(--o-28); }
.site .pm-big { font-variation-settings: "STYL" 30; }
.site .pm-score .pm-big { font-variation-settings: "STYL" 0; }

/* ---------- R11 ---------- */
/* No ruler over the closings: the landings already dropped it, and home.css draws it with an id-level selector */
.site.pm #chiusura .sec-head::before { content: none !important; }
/* Active sidebar item at 5,17:1 (brand on the tint was 4,01:1) */
.pm-side a.is-on { color: var(--brand-press); }
/* The mocks are pictures: mbar.js samples the colour under its edge, and must read the section, not a light mock on a night chapter */
.pm-app { pointer-events: none; }

/* The year in the home's "Come funziona" scheme: five moments, one marker type, chips in one row of equal height */
@media (min-width: 961px) {
  .pm .steps.pm-tl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0 24px; }
  .pm .pm-tl .tl-step { grid-row: span 3; grid-template-rows: subgrid; row-gap: 16px; }
  .pm .pm-tl .tl-step:not(:last-child)::before { right: -16px; }
  .pm .pm-tl .pm-ui { display: grid; }
  .pm .pm-tl .pm-chip { height: 100%; }
  .site.pm #come-funziona .steps.tl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; }
  .site.pm #come-funziona .tl-step:not(:last-child)::before { right: -16px; }
}
@media (max-width: 960px) {
  .pm .steps.pm-tl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pm .pm-tl .tl-step::before { display: none; }
  .pm .pm-tl .pm-ui { max-width: 360px; }
}
.pm .tl-txt .pm-k { font-size: var(--t-13); }
.pm .pm-tl .tl-txt b { font-size: var(--t-16); }

/* Who follows you: one row of avatars, the names and the link */
.pm-who-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px 64px; align-items: center; }
.pm-who .sec-head { margin: 0; }
.pm-who-side { display: grid; justify-items: start; gap: 12px; }
.pm-avs { display: flex; }
.pm-avs li + li { margin-left: -10px; }
.pm-avs img { width: 48px; height: 48px; border-radius: var(--r-round); object-fit: cover; box-shadow: 0 0 0 3px var(--bg); background: var(--surface); }
.pm-who-names { font-size: var(--t-14); line-height: 1.5; color: var(--ink-2); }
@media (max-width: 860px) { .pm-who-in { grid-template-columns: minmax(0, 1fr); } }

/* The price: one box, the offer left and what you get right, at the same height */
.pm-pricebox { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-radius: var(--r-card); background: var(--card, #fff); box-shadow: inset 0 0 0 1px var(--line-2); }
.pm-pb-main { display: grid; justify-items: start; align-content: start; gap: 8px; padding: 32px; border-right: 1px solid var(--line); }
.pm-pb-main h3 { font: 500 var(--t-18)/1.2 var(--sans); }
.pm-pb-main .pm-ds { font-size: var(--t-16); line-height: 1.5; color: var(--ink-2); }
.pm-pb-main .pm-offer { margin-top: 8px; }
.pm-pb-main .btn { margin-top: 16px; }
.pm-pricebox .pm-pay { align-content: center; padding: 12px 32px; border-top: 0; }
.pm-pricebox .pm-pay li:last-child { border-bottom: 0; }
@media (max-width: 860px) {
  .pm-pricebox { grid-template-columns: minmax(0, 1fr); }
  .pm-pb-main { padding: 24px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .pm-pb-main .btn { width: 100%; justify-content: center; }
  .pm-pricebox .pm-pay { padding: 8px 20px; }
}

/* Private closing: the first step said plainly, one review beside it */
.pm-close-g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: center; }
.pm-close-main { display: grid; justify-items: start; gap: 24px; }
.pm-close-main .sec-head { margin: 0; }
.pm-quote { display: grid; gap: 12px; padding: 24px; 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); }
@media (max-width: 860px) { .pm-quote { padding: var(--m-card-pad); } }
.pm-quote blockquote { font-size: var(--t-16); line-height: 1.55; color: #ffffff; text-wrap: pretty; }
.pm-quote figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--t-13); color: rgb(255 255 255 / 0.72); }
.pm-quote figcaption b { color: #ffffff; font-weight: 500; }
@media (max-width: 860px) { .pm-close-g { grid-template-columns: minmax(0, 1fr); } .pm-close-main .btn { width: 100%; justify-content: center; } }

/* TrustScore under the Private hero buttons */
.pm-tp { margin-top: 8px; font-size: var(--t-14); }

/* Model portfolio tab: instrument, ISIN under it, weight on the right */
.pm-isin .pm-row b { display: block; font-weight: 500; }
.pm-isin-c { display: block; margin-top: 2px; letter-spacing: 0.01em; }
.pm-isin-h { min-height: 28px; }

/* Phones: no text under 13 px in the app mocks (DECISIONI: 13-14 minimum); the labels keep their pill and chip heights */
@media (max-width: 640px) {
  .pm-ui :is(.pm-pill, .pm-legend li, .pm-legend b, .pm-k),
  .pv-strat :is(small, .pv-act, .pv-strat-sign span, .pv-strat-sign time) { font-size: var(--t-13); }
  .pm-ui .pm-pill { height: 22px; }
  .pv-act { height: 26px; }
}

/* Chi ti segue with the team photo: text and avatars on the left, the photo on the right; on phones the photo goes under, in 4:3 */
.pm-who.has-photo .pm-who-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "head photo" "side photo"; align-items: start; row-gap: 24px; }
.pm-who.has-photo .sec-head { grid-area: head; }
.pm-who.has-photo .pm-who-side { grid-area: side; }
.pm-who-photo { grid-area: photo; margin: 0; display: grid; gap: 10px; }
.pm-who-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 40%; border-radius: var(--r-card); background: var(--surface); }
.pm-who-photo figcaption { font-size: var(--t-13); color: var(--ink-2); }
@media (max-width: 860px) {
  .pm-who.has-photo .pm-who-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "side" "photo"; }
  .pm-who-photo img { aspect-ratio: 4 / 3; }
}
/* Review mode (?rev=1): reviewers not yet verified in the rotation */
[data-verifica="rotazione"]:not([hidden]) { outline: 2px dashed #d97706; outline-offset: 2px; }

/* Premium = full day: Plannix blue lit from the top right, distinct from Roadmap's dawn and Private's night */
.pm-tier-premium .pm-hero { --bg: #0a2c78; background: linear-gradient(165deg, #0d3d9c 0%, #0a2f80 42%, #08245f 100%); }
.pm-tier-premium .pm-hero::before { background:
  radial-gradient(55% 55% at 88% 0%, rgb(98 206 254 / 0.42), transparent 70%),
  radial-gradient(45% 45% at 70% 30%, rgb(3 115 226 / 0.45), transparent 72%),
  radial-gradient(70% 50% at 0% 100%, rgb(5 15 43 / 0.45), transparent 70%); }

/* ---------- App components on app-ui.css ---------- */
/* Hero: the Patrimonio page, cropped. On desktop the window bleeds past the right edge of the screen and fades out at the bottom */
.pm-hero-ui:has(.pmx-hero) { align-self: start; }
.pmx-hero { --aui-z: 1; container-type: inline-size; width: calc(100% + max(0px, (100vw - var(--col, 1200px)) / 2) + 48px); }
.pmx-hero .aui-win { max-height: 660px; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); border-radius: 14px 0 0 14px; }
.pmx-hero .aui-tabbar { display: none; }
.pmx-hero-g { display: grid; gap: 16px; align-items: start; }
@container (min-width: 900px) { .pmx-hero-g { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
.aui-net { display: grid; gap: 16px; }
.aui-net > .aui-num-xl { margin-top: -10px; }
.aui-net-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.aui-net-v > [data-view] { display: grid; gap: 16px; }
.aui-net-v > [hidden] { display: none; }
.aui-cat-t { display: flex; align-items: center; gap: 12px; min-width: 0; }
@media (max-width: 960px) {
  .pmx-hero { width: 100%; }
  .pmx-hero .aui-win { grid-template-columns: minmax(0, 1fr); max-height: none; -webkit-mask-image: none; mask-image: none; border-radius: 14px; }
  .pmx-hero .aui-side { display: none; }
  .pmx-hero .aui-tabbar { display: grid; }
  .pmx-hero .aui-content { padding: 20px 16px; gap: 16px; }
  .pmx-hero .aui-cat .aui-row:nth-child(n+3) { display: none; }
}
@media (max-width: 480px) {
  .pmx-hero .aui-content { padding: 16px 12px; }
  .pmx-hero .aui-pad { padding: 16px; }
  .pmx-hero .aui-num-xl { font-size: 32px; line-height: 36px; }
  .pmx-hero .aui-legend > li { grid-template-columns: auto minmax(0, 1fr) auto 44px; gap: 8px; }
  .pmx-hero .aui-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pmx-hero .aui-row .aui-chev { display: none; }
}
@media (max-width: 480px) { .pmx-hero .aui-cat .aui-card-h .aui-cap { display: none; } .pmx-hero .aui-tile { width: 32px; height: 32px; } }
/* App tour: one window, the sidebar follows the tab; every panel is a focused piece of its page */
.pmx-tour .aui-win { min-height: 640px; }
.pmx-tour .aui-content { gap: 16px; }
.pmx-tour .pm-panel { gap: 16px; }
.pmx-tour .aui-head { margin-bottom: 4px; }
.aui-card-h.is-stack { flex-direction: column; align-items: flex-start; gap: 2px; }
.pmx-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: 8px 20px 20px 0; }
.pmx-sum .aui-rows { padding-inline: 8px 0; }
.pmx-ring-w { display: grid; justify-items: center; gap: 8px; }
.pmx-ring-w .aui-ring { width: 150px; }
.pmx-costs { display: grid; gap: 8px; }
.pmx-goals { display: grid; gap: 20px; }
.pmx-goal { display: grid; gap: 8px; }
.pmx-goal-h { display: flex; justify-content: space-between; gap: 16px; }
.pmx-chips { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.pmx-sims, .pmx-live, .pmx-adv { display: grid; gap: 14px; }
.pmx-live-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.pmx-adv-r { display: flex; align-items: center; gap: 12px; }
.pmx-adv-r img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.pmx-masked { display: block; margin-top: 6px; }
.pmx-sk { display: block; width: var(--w); max-width: 100%; height: 8px; border-radius: 999px; background: var(--aui-active); }
@media (max-width: 960px) {
  .pmx-tour .aui-win { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pmx-tour .aui-side { display: none; }
  .pmx-tour .aui-content { padding: 20px 16px; }
}
@media (max-width: 560px) {
  .pmx-sum { grid-template-columns: minmax(0, 1fr); padding: 8px 12px 20px 0; }
  .pmx-ring-w { order: -1; padding-top: 12px; }
  .pmx-tour .aui-pad { padding: 16px; }
  .pmx-tour .aui-head .aui-btn { display: none; }
  .pmx-live-r { grid-template-columns: auto minmax(0, 1fr); }
  .pmx-live-r .aui-tag { grid-column: 2; justify-self: start; }
  .pmx-tour .aui-row:not(.is-plain) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pmx-ring-w .aui-ring { width: 124px; }
  .pmx-tour .aui-row:not(.is-plain) .aui-chev { display: none; }
}
/* Un anno di Premium: one small app card per moment */
.pmx-chip .aui-rows { padding: 4px 4px; }
.pmx-chip .aui-row.is-plain { min-height: 40px; padding: 6px 12px; gap: 12px; }
.pmx-chip-prog { padding: 0 12px 14px; }
.pm .pm-tl .pmx-chip { display: grid; }
.pm .pm-tl .pmx-chip .aui-card { height: 100%; }
@media (max-width: 960px) { .pm .pm-tl .pmx-chip { max-width: 360px; } }
.pmx-chip .aui-row.is-plain { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; row-gap: 4px; }
@media (min-width: 961px) and (max-width: 1279px) {
  .pmx-hero .aui-win { grid-template-columns: minmax(0, 1fr); }
  .pmx-hero .aui-side { display: none; }
  .pmx-tour .aui-win { grid-template-columns: 200px minmax(0, 1fr); }
  .pmx-tour .aui-content { padding: 24px; }
}

/* the three landing heroes share one frame: same columns, copy and visual both start at the top, same minimum height */
@media (min-width: 1100px) {
  .pm-hero { min-height: 0; padding-bottom: 96px; }
  .pm-hero-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; padding-top: 120px; }
}
/* the product pill, as on the Roadmap hero, so the three headlines start on the same line */
.pm-badge { display: inline-flex; align-items: center; justify-self: start; margin: 0 0 -2px; padding: 4px 12px; border-radius: 999px; background: rgb(98 206 254 / 0.14); box-shadow: inset 0 0 0 1px rgb(98 206 254 / 0.32); color: #ffffff; font-size: 14px; line-height: 20px; font-weight: 500; }
.pm-tier-private .pm-badge { background: rgb(207 200 186 / 0.1); box-shadow: inset 0 0 0 1px rgb(207 200 186 / 0.3); color: #ffffff; }
@media (max-width: 860px) { .pm-badge { justify-self: start; margin-bottom: 0; padding: 2px 10px; } }
.pm-hero-copy { grid-template-columns: minmax(0, 1fr); }
/* desktop: the hero window ends a little after the Composizione card, so the copy column and the window close at about the same height */
@media (min-width: 1100px) { .pmx-hero .aui-win { max-height: 560px; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); } }