/* Home v17, after home-v3.css: the roads and the Plannix tile they meet on, how we decide (the five steps and the pyramid), the one Roadmap explanation,
   the app tile with its callouts, the newsletter card. Rhythm: white problem, sand roads, white method, sand Roadmap, night «Perché». */

.site[data-ritmo] main > #come-funziona {
  --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); color: var(--fg);
}
.d1-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Le strade che conosci: four roads, each with what it gives and what it leaves out; the lines meet on the Plannix tile ---------- */
/* the column gap is a share of the width, so the card centres stay on the join's fixed path coordinates at any width */
.nx-roads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px calc(100% / 75); margin: 0; padding: 0; list-style: none; }
.nx-roads li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; padding: 24px 24px 26px; border-radius: 16px; background: #ffffff; box-shadow: var(--card-shadow); }
.nx-road-k { display: flex; align-items: center; gap: 10px; font-size: var(--t-14); line-height: 20px; font-weight: 500; color: var(--ink-2); }
.nx-road-k .nx-ico, .nx-road-k .nx-ico svg { width: 20px; height: 20px; }
.nx-roads h3 { margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.15; letter-spacing: -0.012em; color: var(--fg); text-wrap: balance; }
.nx-roads li > :is(.nx-road-plus, .nx-road-minus) { position: relative; margin-top: 12px; padding-left: 18px; font-size: var(--t-15, 15px); line-height: 22px; color: var(--ink-2); text-wrap: pretty; }
.nx-roads li > .nx-road-minus { margin-top: 6px; }
/* filled dot what the road gives, hollow dot what it leaves out */
.nx-roads li > :is(.nx-road-plus, .nx-road-minus)::before { content: ""; position: absolute; left: 1px; top: 8px; width: 7px; height: 7px; border-radius: 50%; }
.nx-road-plus::before { background: var(--brand); }
.nx-road-minus::before { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.nx-roads-join { display: block; width: 100%; height: 72px; overflow: visible; }
.nx-roads-join path { fill: none; stroke: var(--line-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.nx-roads-join .is-2 { display: none; }
.nx-px { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 56px; padding: 36px 40px 32px; border-radius: 16px; background: var(--night); color: #ffffff; }
/* the node where the roads land, ringed in the band's colour so it sits on the tile's edge */
.nx-px::before { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--bg); }
.nx-px-k { display: flex; align-items: center; gap: 10px; font-size: var(--t-14); line-height: 20px; font-weight: 500; color: rgb(255 255 255 / 0.78); }
.nx-px-k img { width: 20px; height: 20px; }
.nx-px-h { margin-top: 14px; font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.nx-px-t { margin-top: 14px; font-size: var(--t-16); line-height: 24px; color: rgb(255 255 255 / 0.78); text-wrap: pretty; }
.nx-px-l { font-size: 13px; line-height: 18px; font-weight: 500; color: rgb(255 255 255 / 0.7); }
.nx-px-acts { display: grid; margin: 8px 0 0; padding: 0; list-style: none; }
.nx-px-acts li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.nx-px-acts .nx-ico { margin-top: 2px; color: var(--sky); }
.nx-px-acts p { font-size: var(--t-16); line-height: 24px; font-weight: 500; color: #ffffff; text-wrap: pretty; }
.nx-px-acts small { display: block; font-size: 13px; line-height: 18px; font-weight: 400; color: rgb(255 255 255 / 0.66); }
.nx-px-first { margin-top: 14px; font-size: var(--t-14); line-height: 20px; color: rgb(255 255 255 / 0.72); }
@media (max-width: 1100px) and (min-width: 861px) {
  .nx-roads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-roads-join .is-4 { display: none; }
  .nx-roads-join .is-2 { display: inline; }
}
@media (max-width: 860px) {
  .nx-roads { grid-template-columns: minmax(0, 1fr); gap: var(--m-card-gap); }
  .nx-roads li { grid-row: auto; grid-template-rows: none; padding: var(--m-card-pad); }
  .nx-roads h3 { margin-top: 12px; font-size: 22px; }
  /* one column: the join becomes a single rule from the last road down to the node */
  .nx-roads-join { width: 1.5px; height: 40px; margin: 0 auto; background: var(--line-2); }
  .nx-roads-join path { display: none; }
  .nx-px { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px var(--m-card-pad) 24px; }
  .nx-px-h { font-size: 26px; }
}

/* ---------- Come decidiamo: the five steps on one solid line ---------- */
.nx-decidiamo .nx-path-line, .nx-decidiamo .nx-path-steps { grid-area: 1 / 1; }
.nx-decidiamo .nx-path-line path { stroke: var(--brand); }

/* ---------- The method's levels: a staircase that climbs left to right, half a stepped pyramid; the mirrored half is a ghost. Reading order = order of the steps ---------- */
.nx-pyr { margin-top: clamp(64px, 7vw, 104px); padding-top: clamp(40px, 4vw, 56px); border-top: 1px solid var(--line); }
.nx-pyr-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; align-items: baseline; }
.nx-pyr-head .nx-lede { margin-top: 0; max-width: 36em; }
.nx-pyr-body { margin-top: 48px; }
.nx-stair { display: block; height: auto; -webkit-user-select: none; user-select: none; pointer-events: none; }
.nx-stair-t { font-family: var(--serif); letter-spacing: -0.01em; }
.nx-pyr-list { display: grid; grid-template-columns: repeat(4, 15.83%); margin: 20px 0 0; padding: 0 0 0 2.33%; list-style: none; }
.nx-pyr-lv { display: grid; align-content: start; gap: 12px; padding-right: 22px; }
.nx-pyr-lv[data-level="protection"] { --c: #02376c; }
.nx-pyr-lv[data-level="reserve"] { --c: #1b49c2; }
.nx-pyr-lv[data-level="investment"] { --c: #3088e6; }
.nx-pyr-lv[data-level="frontier"] { --c: #48bdf3; }
/* the step carries the name, so on the wide layout the column leads with the question */
.nx-pyr-lv { position: relative; }
.nx-pyr-name { margin: 0; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nx-pyr-q { margin: 0; padding-top: 14px; border-top: 2px solid var(--c); font-family: var(--serif); font-size: 19px; line-height: 25px; letter-spacing: -0.01em; color: var(--fg); text-wrap: pretty; }
.nx-pyr-ex { display: grid; justify-items: start; gap: 4px; }
.nx-pyr-act { font-size: var(--t-15, 15px); line-height: 22px; font-weight: 500; color: var(--fg); text-wrap: pretty; }
.nx-pyr-ex .d1-when { margin: 2px 0 0; font-size: var(--t-14); line-height: 20px; color: var(--ink-2); }
@media all {
  .nx-stair--narrow { display: block; width: 100%; }
  .nx-pyr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 24px; padding: 0; }
  .nx-pyr-list { counter-reset: nx-step; }
  .nx-pyr-lv { counter-increment: nx-step; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; padding: 20px 0; border-top: 1px solid var(--line); }
  .nx-pyr-lv::before { content: counter(nx-step); grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--c); color: #ffffff; font-size: 13px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
  .nx-pyr-lv[data-level="frontier"]::before { color: #02376c; }
  .nx-pyr-txt, .nx-pyr-ex { grid-column: 2; }
  .nx-pyr-name { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 26px; color: var(--fg); }
  .nx-pyr-q { padding-top: 0; border-top: 0; font-family: var(--sans); font-size: var(--t-16); line-height: 24px; color: var(--ink-2); }
  .nx-pyr-ex { margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: #f4f7fb; }
}
@media (max-width: 860px) {
  .nx-pyr { margin-top: 56px; padding-top: 40px; }
  .nx-pyr-body { margin-top: var(--m-lede-content); }
  .nx-stair--narrow { width: 100%; }
  .nx-pyr-list { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
  .nx-pyr-q { font-size: var(--t-15, 15px); line-height: 22px; }
}

/* Desktop: the whole silhouette on the left, the four numbered levels on the right in reading order */
@media (min-width: 1101px) {
  .nx-pyr-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
  .nx-pyr-list { margin-top: 0; }
}
@media (max-width: 1100px) {
  .nx-pyr-head { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .nx-pyr-body { margin-top: 32px; }
  .nx-stair--narrow { width: min(100%, 560px); }
}

/* ---------- Si comincia con Plannix Roadmap: four numbered steps on one line, who and how long; then what we say on investing, who it fits, what comes after ---------- */
.nx-tl { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
/* one rule from the first node's centre to the last's, under the nodes: the order is the only thing the line says */
.nx-tl::before { content: ""; position: absolute; left: 16px; right: calc(25% - 40px); top: 16px; height: 1.5px; background: var(--line-2); }
.nx-tl li { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.nx-tl-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--brand); font-size: 14px; line-height: 1; font-weight: 500; color: var(--brand); }
.nx-tl-who { margin-top: 20px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-2); }
.nx-tl-t { margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.15; letter-spacing: -0.015em; color: var(--fg); }
.nx-tl h3 { margin-top: 12px; font-size: var(--t-16); line-height: 24px; font-weight: 500; color: var(--fg); }
.nx-tl-p { margin-top: 4px; font-size: var(--t-15, 15px); line-height: 22px; color: var(--ink-2); text-wrap: pretty; }
.nx-come-h { font-size: var(--t-18); line-height: 24px; font-weight: 500; color: var(--fg); }
.nx-inv { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 12px 32px; align-items: center; margin-top: 56px; padding: 24px 28px; border-radius: 16px; background: #ffffff; box-shadow: var(--card-shadow); }
.nx-inv-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.nx-inv-chips li { display: flex; align-items: center; gap: 12px; font-size: var(--t-16); line-height: 22px; font-weight: 500; color: var(--fg); }
.nx-inv-note { grid-column: 2; font-size: var(--t-14); line-height: 20px; color: var(--ink-2); }
.nx-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; margin-top: 48px; }
.nx-fit .nx-come-h + ul { margin-top: 14px; }
.nx-fit :is(.nx-yes, .nx-no) { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nx-fit :is(.nx-yes, .nx-no) li { position: relative; padding-left: 28px; font-size: var(--t-16); line-height: 24px; color: var(--fg); text-wrap: pretty; }
.nx-fit :is(.nx-yes, .nx-no) li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; }
.nx-fit :is(.nx-yes, .nx-no) li::after { content: ""; position: absolute; }
/* a check in a filled circle for «fa per te», a bar in an empty one for «non fa per te» */
.nx-yes li::before { background: var(--brand); }
.nx-yes li::after { left: 5.5px; top: 7.5px; width: 5px; height: 8px; border: solid #ffffff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.nx-fit .nx-no li { color: var(--ink-2); }
.nx-no li::before { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.nx-no li::after { left: 4.5px; top: 11.25px; width: 7px; height: 1.5px; background: var(--ink-3); }
.nx-dopo { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line-2); }
.nx-dopo p { font-size: var(--t-16); line-height: 24px; color: var(--ink-2); text-wrap: pretty; }
.nx-dopo b { font-weight: 500; color: var(--fg); }
:is(.nx-inv-note, .nx-dopo) .link { display: inline; min-height: 0; font-size: inherit; }
@media (max-width: 1100px) and (min-width: 861px) {
  .nx-inv { grid-template-columns: minmax(0, 1fr); }
  .nx-inv-note { grid-column: 1; }
}
@media (max-width: 860px) {
  .nx-tl { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* vertical: each node carries the rule down to the next one */
  .nx-tl::before { content: none; }
  .nx-tl li:not(:last-child)::before { content: ""; position: absolute; left: 15.25px; top: 32px; bottom: -28px; width: 1.5px; background: var(--line-2); }
  .nx-tl li { grid-row: auto; grid-template-rows: none; grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px; }
  .nx-tl li > :not(.nx-tl-n) { grid-column: 2; }
  .nx-tl-n { grid-row: 1 / span 4; }
  .nx-tl-who { margin-top: 6px; }
  .nx-tl-t { margin-top: 2px; font-size: 22px; }
  .nx-tl h3 { margin-top: 8px; }
  .nx-inv { grid-template-columns: minmax(0, 1fr); margin-top: 40px; padding: var(--m-card-pad); }
  .nx-inv-chips { grid-template-columns: minmax(0, 1fr); }
  .nx-inv-chips li { gap: 10px; font-size: var(--t-15, 15px); }
  .nx-inv-note { grid-column: 1; }
  .nx-fit { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 40px; }
  .nx-fit :is(.nx-yes, .nx-no) li { font-size: var(--t-15, 15px); line-height: 22px; }
  .nx-fit :is(.nx-yes, .nx-no) li::before { top: 3px; }
  .nx-yes li::after { top: 6.5px; }
  .nx-no li::after { top: 10.25px; }
  .nx-dopo { flex-direction: column; align-items: stretch; }
  .nx-dopo .btn { width: 100%; }
}

/* ---------- App tile: what the app is for, three callouts pinned to the phone ---------- */
.nx-t-app { align-content: start; }
.nx-app-copy { display: grid; gap: 12px; }
.nx-t-app .nx-tile-k { color: var(--sky); }
.nx-app-h { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.12; letter-spacing: -0.018em; color: #ffffff; text-wrap: balance; }
.nx-t-app .nx-app-copy .nx-tile-t { margin-top: 4px; font-size: var(--t-16); line-height: 24px; color: rgb(255 255 255 / 0.74); }
.nx-app-stage { position: relative; display: grid; }
.nx-app-notes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nx-app-notes li { position: relative; padding-left: 18px; font-size: var(--t-14); line-height: 20px; color: rgb(255 255 255 / 0.72); text-wrap: pretty; }
.nx-app-notes li::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 3px rgb(98 206 254 / 0.22); }
.nx-app-notes b { font-weight: 500; color: #ffffff; }
.nx-t-app .nx-phone-screen .pv-adv { flex: none; }
@media (min-width: 1101px) {
  .nx-t-app { padding: 40px 36px 0; row-gap: 28px; }
  /* the callouts sit left of the phone, each on the line of the card it names; a hairline runs to the screen's edge */
  .nx-app-stage { grid-template-columns: minmax(0, 1fr) 256px; column-gap: 0; align-items: start; }
  .nx-t-app .nx-phone { grid-column: 2; grid-row: 1; width: 256px; height: 500px; margin-bottom: -72px; }
  .nx-app-notes { grid-column: 1; grid-row: 1; position: relative; display: block; }
  .nx-app-notes li { position: absolute; right: 30px; top: var(--y); transform: translateY(-50%); width: 100%; max-width: 210px; padding: 0; text-align: right; }
  .nx-app-notes li::before { left: auto; right: -30px; top: 50%; margin-top: -4px; }
  .nx-app-notes li::after { content: ""; position: absolute; right: -24px; top: 50%; width: 18px; border-top: 1px solid rgb(98 206 254 / 0.5); }
  .nx-app-notes .is-pat { --y: 112px; }
  .nx-app-notes .is-adv { --y: 210px; }
  .nx-app-notes .is-plan { --y: 282px; }
}
@media (max-width: 1100px) {
  .nx-app-stage { gap: 32px; }
  .nx-t-app .nx-phone { justify-self: center; }
}
@media (max-width: 860px) {
  .nx-app-h { font-size: 26px; }
  .nx-t-app .nx-app-copy .nx-tile-t { font-size: var(--t-15, 15px); line-height: 22px; }
  .nx-app-stage { gap: var(--m-stack); }
}

}


/* Hero demo on phones: the chip naming Plannix Roadmap is the first mention, on its own line under the plan title so the title stays whole */
@media (max-width: 860px) {
  #apertura plannix-roadmap[demo][example]:not([example="false"]) .prm-title .prm-example { display: table; margin: 6px 0 0; }
}

/* ---------- Hero reviews, under the CTA: Trustpilot's green boxes drawn here, then the score, the count and the logo as the source ---------- */
@media (min-width: 861px) {
  .site #apertura .ctas { display: flex; flex-direction: row; align-items: center; gap: 28px; }
  .site #apertura .ctas .px-tp-widget { flex: 0 0 440px; }
}
#apertura .hx-tp { font-size: var(--t-16); line-height: 24px; }
#apertura .hx-tp a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.hx-tp-stars { display: inline-flex; gap: 3px; }
.hx-tp-stars i { position: relative; width: 26px; height: 26px; background: #00b67a; }
.hx-tp-stars i::after { content: ""; position: absolute; inset: 4px; background: #ffffff; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.hx-tp-tx { display: inline-flex; align-items: center; white-space: nowrap; }
#apertura .hx-tp b { font-size: 22px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
#apertura .hx-tp .tp-logo { height: 22px; margin-left: 10px; vertical-align: 0; }
@media (max-width: 860px) {
  .site #apertura .hx-rating.hx-tp { order: 3; margin-top: 20px; font-size: var(--t-15, 15px); line-height: 22px; }
  .hx-tp-stars i { width: 22px; height: 22px; }
  .hx-tp-stars i::after { inset: 3.5px; }
  #apertura .hx-tp b { font-size: 19px; }
  #apertura .hx-tp .tp-logo { height: 19px; margin-left: 8px; }
}

/* ---------- Problem thread: «Il tuo piano» where the knot lets go; each time with what it brings, the time over the line and the words under it ---------- */
.nx-pezzi .nx-filo-piano { font-weight: 600; color: var(--brand); }
.nx-pezzi .nx-ms b { display: block; font-weight: 500; }
.nx-pezzi .d1-filo-desk .nx-ms small { position: absolute; left: 50%; top: calc(100% + 28px); transform: translateX(-50%); font-size: var(--t-14); line-height: 20px; color: var(--ink-2); white-space: nowrap; }
.nx-pezzi .d1-filo-desk .d1-tag-end.nx-ms { text-align: right; }
.nx-pezzi .d1-filo-desk .d1-tag-end.nx-ms small { left: auto; right: 0; transform: none; }
@media (max-width: 860px) {
  .nx-pezzi .d1-filo-v .nx-ms { display: flex; align-items: baseline; gap: 6px; }
  .nx-pezzi .d1-filo-v .nx-ms small { font-size: var(--t-14); color: var(--ink-2); }
  .nx-pezzi .d1-filo-v .nx-ms small::before { content: "· "; }
}

/* ---------- Perché Plannix: the fee tile is one statement, the data tile two facts in a row ---------- */
.nx-t-fee { align-content: space-between; }
.nx-fee-t { font-family: var(--serif); font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; color: var(--fg); text-wrap: pretty; }
.nx-fee-t b { font-weight: inherit; }
@media (min-width: 1101px) {
  .nx-bento {
    grid-template-areas:
      "team team team team team team team app app app app app"
      "num num num ocf ocf ocf ocf app app app app app"
      "fee fee fee bank bank bank bank app app app app app"
      "dati dati dati dati dati dati dati dati dati dati dati dati";
  }
}
@media (min-width: 861px) { .nx-dati { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } .nx-dati p { max-width: 34em; } }
@media (max-width: 860px) { .nx-fee-t { font-size: 22px; } }

/* ---------- Fa per te / Non fa per te: two large cards, light and night ---------- */
.nx-fit { gap: 16px; margin-top: 56px; }
.nx-fit > div { padding: 36px 40px 40px; border-radius: 20px; }
.nx-fit > div:first-child { background: #ffffff; box-shadow: var(--card-shadow); }
.nx-fit > div:last-child { background: var(--night); }
.nx-fit .nx-come-h { font-family: var(--serif); font-size: 32px; line-height: 1.15; font-weight: 400; letter-spacing: -0.015em; }
.nx-fit .nx-come-h + ul { margin-top: 24px; }
.nx-fit :is(.nx-yes, .nx-no) { gap: 14px; }
.nx-fit :is(.nx-yes, .nx-no) li { padding-left: 34px; font-size: var(--t-18); line-height: 27px; }
.nx-fit :is(.nx-yes, .nx-no) li::before { top: 3.5px; width: 20px; height: 20px; }
.nx-fit .nx-yes li::after { left: 7px; top: 8px; width: 6px; height: 10px; border-width: 0 1.8px 1.8px 0; }
.nx-fit .nx-no li::after { left: 5.5px; top: 12.75px; width: 9px; }
.nx-fit > div:last-child .nx-come-h { color: #ffffff; }
.nx-fit > div:last-child .nx-no li { color: rgb(255 255 255 / 0.82); }
.nx-fit > div:last-child .nx-no li::before { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.5); }
.nx-fit > div:last-child .nx-no li::after { background: rgb(255 255 255 / 0.7); }
@media (max-width: 860px) {
  .nx-fit { gap: 12px; margin-top: 40px; }
  .nx-fit > div { padding: 24px 22px 28px; border-radius: 16px; }
  .nx-fit .nx-come-h { font-size: 26px; }
  .nx-fit .nx-come-h + ul { margin-top: 18px; }
  .nx-fit :is(.nx-yes, .nx-no) li { padding-left: 30px; font-size: var(--t-16); line-height: 24px; }
  .nx-fit :is(.nx-yes, .nx-no) li::before { top: 2px; }
  .nx-fit .nx-yes li::after { top: 6.5px; }
  .nx-fit .nx-no li::after { top: 11.25px; }
}

/* ---------- Costs before the reviews: on sand, so the white of the reviews' top never touches another white band ---------- */
.site[data-ritmo] main > #costi { --bg: var(--sand); --surface: var(--sand); background: var(--sand); }

/* ---------- Newsletter, option A: one white card closing #guide. Scoped to the variant so no generic .nx-news rule reaches it ---------- */
.nx-news.nx-news--a { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 20px 24px; margin-top: 56px; padding: 22px 24px; border-radius: 16px; background: #ffffff; box-shadow: 0 1px 2px rgb(2 55 108 / 0.05), 0 10px 28px -16px rgb(2 55 108 / 0.18); }
.nx-news--a .nx-news-av { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; align-self: start; }
.nx-news--a .nx-news-tx { display: grid; gap: 4px; min-width: 0; }
.nx-news--a .nx-news-h { margin: 0; font: 600 15px/20px var(--sans); color: var(--fg); }
.nx-news--a .nx-news-q { margin: 0; font-family: var(--serif); font-size: 21px; line-height: 28px; letter-spacing: -0.01em; color: var(--fg); text-wrap: pretty; }
.nx-news--a .nx-news-meta { margin: 2px 0 0; font-size: var(--fs-xs, 13px); line-height: 18px; color: var(--ink-3); }
.nx-news--a [data-verifica] { white-space: nowrap; }
.nx-news--a .nx-news-go { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nx-news--a .nx-news-btn { height: 44px; padding: 0 22px; }
.nx-news--a .nx-news-link { min-height: 0; font-size: var(--fs-xs, 13px); color: var(--brand-press); }
@media (max-width: 860px) {
  .nx-news.nx-news--a { grid-template-columns: 40px minmax(0, 1fr); gap: 16px 14px; margin-top: 40px; padding: 18px; }
  .nx-news--a .nx-news-av { width: 40px; height: 40px; }
  .nx-news--a .nx-news-q { font-size: 18px; line-height: 24px; }
  .nx-news--a .nx-news-go { grid-column: 1 / -1; align-items: stretch; }
  .nx-news--a .nx-news-btn { width: 100%; }
  .nx-news--a .nx-news-link { align-self: center; }
}
/* the second sentence of the subtitle is longer than the first: one line of it on desktop, never an orphan */
@media (min-width: 1101px) { .site #apertura .sub { max-width: 800px; } }
#apertura .hx-tp .tp-logo { margin-bottom: 6px; }
@media (max-width: 860px) { #apertura .hx-tp .tp-logo { margin-bottom: 5px; } }
/* the reviews' warm gradient now runs into the sand of the prices instead of stopping on a seam */
.site[data-ritmo] #recensioni.nx-prove { background: linear-gradient(180deg, #ffffff 0%, #fdf4ea 30%, #f8e6d4 72%, var(--sand) 100%); }