/* Home body, after narrativa.css: the method as a five-step path, the bento with its data tile, the two upper tiers told apart,
   the closing plan. Home only (index.html). */

.nx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* icons are bare 24 px cobalt outlines, no chip behind them; sky on night and Plannix-highlighted surfaces */
.nx-ico { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; color: var(--cobalt); }
.nx-ico svg { width: 24px; height: 24px; }

.site main > :is(#casi, #metodo, #ordine, #strade) { padding-block: clamp(72px, 8vw, 120px); }
@media (max-width: 860px) { .site main > :is(#casi, #metodo, #strade) { padding-block: var(--m-sec); } .site main > #ordine { padding-block: var(--m-sec-lg); } }
.site[data-ritmo] main > #metodo { --bg: #ffffff; --surface: #ffffff; --line: #e1e7ef; --line-2: #cfd8e4; background: #ffffff; color: var(--fg); }

/* ---------- Metodo: five plain steps on one drawn line; the first three are the Roadmap, the last two Premium and Private ---------- */
/* no column gap: the line's nodes sit at 10/30/50/70/90% of the width, the centres of five equal columns */
.nx-path { display: grid; grid-template-columns: minmax(0, 1fr); }
.nx-path-groups { display: grid; grid-template-columns: 3fr 2fr; margin-bottom: 28px; font-size: var(--t-14); line-height: 20px; font-weight: 500; }
.nx-path-groups span { position: relative; margin-inline: 12px; padding-bottom: 10px; border-bottom: 1.5px solid currentColor; }
.nx-path-groups span::before, .nx-path-groups span::after { content: ""; position: absolute; top: 100%; width: 1.5px; height: 8px; background: currentColor; }
.nx-path-groups span::before { left: 0; }
.nx-path-groups span::after { right: 0; }
.nx-path-groups .is-rm { color: var(--brand); }
.nx-path-groups .is-pp { color: #02376c; border-bottom-style: dashed; }
.nx-path-line { grid-area: 2 / 1; width: 100%; height: 56px; overflow: visible; pointer-events: none; }
.nx-path-line path { fill: none; stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.nx-path-line .is-rm { stroke: var(--brand); }
.nx-path-line .is-pp { stroke: #02376c; stroke-opacity: 0.45; stroke-dasharray: 4 6; }
.nx-path-steps { grid-area: 2 / 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.nx-path-steps li { display: grid; grid-template-rows: subgrid; grid-row: span 4; justify-items: center; align-content: start; padding-inline: 14px; text-align: center; }
.nx-path-steps { grid-template-rows: repeat(4, auto); }
.nx-path-node { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #e7f1fd; box-shadow: inset 0 0 0 1.5px var(--brand); color: var(--brand); }
.nx-path-node svg { width: 22px; height: 22px; }
.is-pp .nx-path-node { background: #ffffff; box-shadow: none; border: 1.5px dashed rgb(2 55 108 / 0.4); color: #02376c; }
.nx-path-n { margin-top: 20px; font-size: var(--t-13); line-height: 18px; font-weight: 500; color: var(--brand); }
.is-pp .nx-path-n { color: #4d6584; }
.nx-path-steps h3 { margin-top: 4px; font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.2; letter-spacing: -0.012em; color: var(--fg); text-wrap: balance; }
.nx-path-steps h3 + p { margin-top: 10px; max-width: 16em; font-size: var(--t-15, 15px); line-height: 22px; color: var(--ink-2); text-wrap: pretty; }
.nx-path-g { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nx-path-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.nx-path-note { max-width: 40em; font-size: var(--t-18); line-height: 26px; color: var(--fg); text-wrap: pretty; }
.nx-path-sign { font-size: var(--t-14); line-height: 20px; color: var(--ink-3); }
@media (max-width: 1100px) and (min-width: 861px) {
  .nx-path-steps li { padding-inline: 8px; }
  .nx-path-steps h3 { font-size: 20px; }
  .nx-path-steps h3 + p { font-size: var(--t-14); line-height: 20px; }
}
/* phones: the line runs down the left, solid for the Roadmap, dashed after; each group is named where it starts */
@media (max-width: 860px) {
  .nx-path-groups, .nx-path-line { display: none; }
  .nx-path-steps { grid-area: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .nx-path-steps li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: none; grid-row: auto; column-gap: 16px; justify-items: start; padding: 0 0 28px; text-align: left; }
  .nx-path-steps li > :not(.nx-path-node) { grid-column: 2; }
  .nx-path-node { grid-column: 1; grid-row: 1 / span 3; width: 48px; height: 48px; }
  .nx-path-g { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; grid-row: 1; margin-bottom: 14px; font-size: var(--t-13); line-height: 18px; font-weight: 500; color: var(--brand); }
  .is-pp .nx-path-g { color: #02376c; }
  .nx-path-g ~ .nx-path-node { grid-row: 2 / span 3; }
  .nx-path-n { margin-top: 4px; }
  .nx-path-steps h3 { font-size: 21px; }
  .nx-path-steps h3 + p { max-width: none; }
  .nx-path-steps li::before { content: ""; position: absolute; left: 23.25px; top: 0; bottom: 0; width: 1.5px; background: var(--brand); }
  .nx-path-steps li:first-child::before { top: 56px; }
  .nx-path-steps li.is-pp::before { background: repeating-linear-gradient(to bottom, rgb(2 55 108 / 0.4) 0 4px, transparent 4px 10px); }
  .nx-path-steps li:last-child::before { bottom: auto; height: 24px; }
  .nx-path-foot { display: grid; margin-top: 12px; padding-top: 20px; }
  .nx-path-note { font-size: var(--t-16); line-height: 24px; }
}

/* ---------- Perché Plannix: an uneven bento. The phone tile stands tall on the right beside the people, numbers and money tiles; the data tile closes it wide,
   its four facts two by two so one long fact doesn't stretch the row. Spans follow the content's kind, never the current copy's length. ---------- */
.nx-t-num .nx-big { margin-top: 8px; }
.nx-big small { font-size: 0.5em; letter-spacing: -0.01em; }
.nx-t-num .nx-tile-t { margin-top: 6px; }
.nx-t-fee .nx-mini-fee, .nx-t-bank .nx-mini-bank { width: min(100%, 440px); margin-bottom: 4px; }
.nx-t-fee .nx-tile-t, .nx-t-bank .nx-tile-t { max-width: 30em; }
.nx-mb-ico { display: grid; place-items: center; color: var(--cobalt); }
.nx-mb-ico svg { width: 24px; height: 24px; }
.nx-t-dati { gap: 20px; }
.nx-dati-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
@media (max-width: 860px) { .nx-dati-head { align-items: center; } .nx-dati-head > * { margin-block: 0; } }
.nx-dati { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; margin: 0; padding: 0; list-style: none; }
.nx-dati li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-content: start; column-gap: 14px; }
.nx-dati p { font-size: var(--t-15, 15px); line-height: 22px; color: var(--ink-2); text-wrap: pretty; }
.nx-dati b { display: block; margin-bottom: 2px; font-weight: 500; color: var(--fg); }
@media (min-width: 861px) {
  /* the money tiles hold their small visual and their line at the top; the bank card sits on the same baseline as the fee table */
  .nx-t-bank .nx-mini-bank { grid-template-columns: 32px minmax(0, 1fr); }
  /* four advisors always as two by two, so a wide tile never leaves one alone on a second row */
  .nx-t-team .nx-advs { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 40px; }
  .nx-t-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: stretch; min-height: 0; padding: 36px 36px 0; row-gap: 32px; }
  .nx-t-app .nx-tile-t { align-self: start; font-size: 19px; line-height: 28px; }
  .nx-t-app .nx-phone { align-self: end; margin-bottom: -72px; }
}
@media (min-width: 1101px) {
  .nx-bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    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 fee bank bank bank app app app app app"
      "dati dati dati dati dati dati dati dati dati dati dati dati";
  }
  /* the data tile: its label and privacy link in a narrow column, the facts two by two beside it */
  .nx-t-dati { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 32px; padding-block: 28px; }
  .nx-dati-head { flex-direction: column; align-items: flex-start; justify-content: space-between; }
}
@media (max-width: 1100px) and (min-width: 861px) {
  .nx-bento { grid-template-areas: "team app" "num app" "ocf app" "fee bank" "dati dati"; }
}
@media (max-width: 860px) {
  /* phones: the phone tile comes right after the three «who» tiles, so the column alternates light and night instead of six light tiles in a row */
  .nx-bento { grid-template-areas: "team team" "num num" "ocf ocf" "app app" "fee fee" "bank bank" "dati dati"; }
  .nx-dati { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .nx-dati li { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; }
  /* the advisors two by two, face over name, so no name and role wrap mid-row */
  .nx-t-team .nx-advs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .nx-t-team .nx-advs li { flex-direction: column; align-items: flex-start; gap: 8px; }
  .nx-t-team .nx-advs p { display: grid; }
}

/* ---------- Recensioni: the whole Trustpilot figure, only here ---------- */
.d1-prove-head .nx-lede { margin-top: var(--sp-title-lede, 16px); }
.nx-tp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--t-16); line-height: 22px; color: var(--fg); text-decoration: none; }
.nx-tp .tp-word { font-size: 18px; }
.nx-tp-score b { font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .nx-tp:hover > span:last-child { text-decoration: underline; text-underline-offset: 3px; } }

/* ---------- Calcolatore → prezzi ---------- */
.nx-raccordo { align-items: center; justify-content: space-between; }
.nx-raccordo > span { max-width: 38em; }
.nx-raccordo-btn { flex: none; }
@media (max-width: 860px) { .nx-raccordo-btn { width: 100%; justify-content: center; } }

/* ---------- Prezzi: Premium is the white card with the night preview, Private the ink card with the stone line (private.html's colours), so neither melts into the sand ---------- */
:root:not([data-tiers="off"]) #prezzi.d1-prezzi-v:not(#_) .pr-a-plan[data-tier="private"] {
  --line: rgb(207 200 186 / 0.2);
  background: var(--tier-private, #0c0f14);
  box-shadow: 0 0 0 1px rgb(207 200 186 / 0.35), 0 24px 48px -26px rgb(12 15 20 / 0.6);
}
:root:not([data-tiers="off"]) #prezzi.d1-prezzi-v:not(#_) .pr-a-plan[data-tier="private"] .pv.pv-inst { background: rgb(207 200 186 / 0.1); box-shadow: inset 0 0 0 1px rgb(207 200 186 / 0.24); }
:root:not([data-tiers="off"]) #prezzi.d1-prezzi-v:not(#_) .pr-a-plan[data-tier="private"] :is(.pr-a-head h3, .pr-price b, .pr-list b) { color: #ffffff; }
:root:not([data-tiers="off"]) #prezzi.d1-prezzi-v:not(#_) .pr-a-plan[data-tier="private"] :is(.pr-ds, .pr-list) { color: rgb(255 255 255 / 0.74); }
:root:not([data-tiers="off"]) #prezzi.d1-prezzi-v:not(#_) .pr-a-plan[data-tier="private"] :is(.pr-fit, .pr-price small) { color: var(--tier-private-accent, #cfc8ba); }
:root:not([data-tiers="off"]) #prezzi.d1-prezzi-v:not(#_) .pr-a-plan[data-tier="private"] .pr-list li::before { background: var(--tier-private-accent, #cfc8ba); }
:root:not([data-tiers="off"]) #prezzi.d1-prezzi-v:not(#_) .pr-a-plan[data-tier="private"] .pr-btn { background: var(--tier-private-accent, #cfc8ba); color: var(--tier-private, #0c0f14); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { :root:not([data-tiers="off"]) #prezzi.d1-prezzi-v:not(#_) .pr-a-plan[data-tier="private"] .pr-btn:hover { background: #ded8cc; } }

/* ---------- Guide: the two links on the title's line ---------- */
.site main > #guide { padding-block: clamp(72px, 8vw, 112px); }
@media (max-width: 860px) { .site main > #guide { padding-block: var(--m-sec); } }
.nx-guide-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-bottom: 40px; }
.site .nx-guide-top .bl-home-h { margin: 0; }
.site .nx-guide-top .bl-links { margin: 0; }
@media (max-width: 860px) { .nx-guide-top { display: grid; margin-bottom: 28px; } .site .nx-guide-top .bl-links { grid-area: auto; } }

/* ---------- Chiusura: the plan the headline promises, on the right of the copy ---------- */
.d1-alba-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: clamp(48px, 6vw, 96px); align-items: center; }
.d1-alba-in > :not(.nx-alba-plan) { grid-column: 1; }
.nx-plan { padding: 18px 20px 14px; border-radius: 16px; background: #ffffff; color: #02376c; }
@media (max-width: 860px) { .nx-plan { padding: var(--m-ui-pad) var(--m-ui-pad) 12px; } }
.nx-alba-plan { grid-column: 2; grid-row: 1 / span 3; box-shadow: 0 40px 80px -32px rgb(0 0 0 / 0.7); }
.nx-alba-k { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid #e6ebf2; font-size: var(--t-14); line-height: 20px; font-weight: 500; }
.nx-plan ol { margin: 0; padding: 0; list-style: none; }
.nx-plan li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid #e6ebf2; }
.nx-alba-plan li:last-child { padding-bottom: 4px; border-bottom: 0; }
.nx-plan .d1-lv { grid-column: 1; font-size: 13px; line-height: 18px; color: #4d6584; }
.nx-plan .d1-glyph { width: 15px; height: 13px; }
.nx-plan li b { grid-column: 1; font-size: var(--t-15, 15px); line-height: 22px; font-weight: 500; }
.nx-plan .d1-when { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--t-14); line-height: 20px; }
.nx-alba-rev { padding-top: 12px; font-size: 13px; line-height: 18px; color: #4d6584; }
.nx-alba-rev b { font-weight: 500; color: #02376c; }
@media (max-width: 1100px) { .d1-alba-in { grid-template-columns: minmax(0, 1fr); } .nx-alba-plan { grid-column: 1; grid-row: auto; max-width: 420px; margin-top: 48px; } }
@media (max-width: 860px) {
  .nx-alba-plan { margin-top: var(--m-lede-content); }
}
/* phones: the costs button centres its two lines at 375 */
@media (max-width: 860px) {
  #come-funziona .d1-steps h3, .site #perche p { text-wrap: pretty; }
  #costi .wg-costi-cta .wg-btn { justify-content: center; height: auto; min-height: 44px; padding-block: 10px; text-align: center; text-wrap: balance; }
}

/* ---------- Calcolatore: the average costs by product on the title's line; the calculator keeps the one big number ---------- */
.nx-costi-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: end; gap: 32px clamp(48px, 6vw, 96px); margin-bottom: 40px; }
.site #costi .nx-costi-top .wg-head { margin-bottom: 0; }
.nx-medie-t { width: 100%; border-collapse: collapse; font-size: var(--t-14); line-height: 20px; color: var(--navy); }
.nx-medie-t caption { padding-bottom: 10px; text-align: left; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-2); }
.nx-medie-t :is(th, td) { padding: 9px 0; border-bottom: 1px solid var(--line); text-align: right; font-weight: 400; }
.nx-medie-t :is(th, td):first-child { text-align: left; }
.nx-medie-t :is(th, td) + :is(th, td) { padding-left: 16px; }
.nx-medie-t thead th { padding-top: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); border-bottom-color: var(--line-2, var(--line)); }
.nx-medie-t tbody th { font-weight: 500; }
.nx-medie-src { margin-top: 10px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.nx-medie-src a { color: inherit; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
@media (max-width: 1100px) { .nx-costi-top { grid-template-columns: minmax(0, 1fr); } .nx-medie { max-width: 520px; } }
/* wide screens: the two halves of the calculator below set the grid, so the table starts on the receipt's text edge and on the title's top line */
@media (min-width: 1101px) {
  .nx-costi-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: 0; }
  .site #costi .nx-costi-top .wg-head { padding-right: clamp(32px, 4vw, 64px); }
  .nx-medie { padding-inline: 24px; }
}
@media (max-width: 860px) { .nx-costi-top { gap: 24px; margin-bottom: 24px; } }

/* ---------- Recensioni: the eyebrow, and the second row fades into the section's own background ---------- */
.nx-eye { margin: 0 0 12px; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand); }
/* padding and negative margin of the same size keep the cards' shadows inside the mask */
.nx-revs { --rev-bleed: 32px; margin: calc(var(--rev-bleed) * -1) !important; padding: var(--rev-bleed) !important; -webkit-mask: linear-gradient(to bottom, #000 calc(100% - 140px), rgb(0 0 0 / 0.12) 100%); mask: linear-gradient(to bottom, #000 calc(100% - 140px), rgb(0 0 0 / 0.12) 100%); }
@media (max-width: 860px) { .nx-revs { --rev-bleed: 12px; } }

/* ---------- Chiusura: what we do as the headline; a client's words under it as a testimonial, before the actions ---------- */
.d1-alba-in .d1-alba-h { max-width: 14em; }
.nx-alba-sub { margin-top: 24px; max-width: 30em; font-size: var(--t-18, 18px); line-height: 27px; color: rgb(255 255 255 / 0.76); text-wrap: balance; }
.nx-alba-q { max-width: 30em; margin: 32px 0 0; padding-top: 24px; border-top: 1px solid rgb(226 235 250 / 0.16); }
.nx-alba-q blockquote { margin: 0; }
/* the opening guillemet hangs in the margin, so the words line up with the headline */
.nx-alba-q blockquote p { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 350; font-size: 24px; line-height: 1.35; letter-spacing: -0.005em; color: #ffffff; text-indent: -0.48em; text-wrap: pretty; }
.nx-alba-q blockquote span { font-style: normal; color: var(--sky); }
.nx-alba-q + .d1-alba-acts { margin-top: 32px; }
@media (min-width: 1101px) { .nx-alba-plan { grid-row: 1 / span 5; } }
@media (max-width: 860px) {
  .nx-alba-sub { margin-top: 16px; font-size: var(--t-16); line-height: 24px; }
  .nx-alba-q { margin-top: 24px; padding-top: 20px; }
  .nx-alba-q blockquote p { font-size: 20px; }
  .nx-alba-q + .d1-alba-acts { margin-top: 24px; }
}

/* ---------- Footer: the two real badges side by side, at one height, above the legal line ---------- */
.site .fa .fa-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 24px; }
.site .fa .fa-nav > .fa-logo { grid-column: 1 / -1; }
.fa-trust { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 0 32px; }
.fa-badge { display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 18px 0 14px; border-radius: 12px; background: #ffffff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); text-decoration: none; }
.site .fa .fa-badge { font-size: 13px; line-height: 17px; }
/* only the OCF roundel: at badge height the wordmark beside it is too small to read, and the text next to it names the albo */
.fa-badge img { display: block; width: 34px; height: 34px; object-fit: cover; object-position: 0 50%; }
.fa-badge .tp-logo { display: block; width: auto; height: 22px; margin-top: -3px; color: #191919; }
.fa-badge-t { display: grid; padding-left: 12px; border-left: 1px solid var(--line); }
.fa-badge-t b { font-weight: 500; color: var(--navy); }
@media (hover: hover) and (pointer: fine) { .fa-badge:hover { box-shadow: inset 0 0 0 1px var(--line-2, var(--line)); } }
.fa-legal .co a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
@media (max-width: 1100px) { .site .fa .fa-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .site .fa .fa-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fa-trust { padding-bottom: 28px; } }