/* The home's story, one block per section in reading order: problem, method, Roadmap, situations, who, reviews, costs.
   Self-contained: one lede class, the section classes below, no dependency on the D7 modules. */

.site .nx-lede { margin-top: var(--sp-title-lede); max-width: 34em; font-size: var(--t-18); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.site .nx-lede + .nx-lede { margin-top: 12px; }
.site .wg-head .nx-lede { color: var(--ink-2, #4d6584); }
@media (max-width: 860px) { .site .nx-lede { font-size: var(--t-16); } }

/* Rhythm after the night hero: white problem, sand roads, white method, sand Roadmap (home-v17.css), night «Perché»,
   dawn reviews, white costs, sand prices (d1.css), white FAQ, sand guides, white newsletter strip, night close. Never two white bands in a row. */
.site main > :is(#problema, #strade, #metodo, #perche) { padding-block: clamp(72px, 8vw, 120px); }
@media (max-width: 860px) { .site main > :is(#problema, #strade, #metodo) { padding-block: var(--m-sec); } .site main > #perche { padding-block: var(--m-sec-lg); } }
.site[data-ritmo] main > #problema {
  --bg: #ffffff; --surface: #ffffff; --card: #ffffff; --line: #e1e7ef; --line-2: #cfd8e4;
  --card-shadow: 0 0 0 1px #e1e7ef, 0 8px 24px -12px rgb(2 55 108 / 0.14);
  background: #ffffff;
}
.site[data-ritmo] main > :is(#casi, #strade, #guide) {
  --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);
}
/* the tiles keep their light surfaces on the band, so only the heading and the lede turn white */
.site[data-ritmo] main > #perche { --bg: #ffffff; --surface: #ffffff; --line: #e1e7ef; --line-2: #cfd8e4; background: var(--night); }
.site[data-ritmo] #perche .d1-head .d1-h2 { color: #ffffff; }
.site[data-ritmo] #perche .d1-head .nx-lede { color: rgb(255 255 255 / 0.78); }
.site[data-ritmo] #recensioni.nx-prove {
  --bg: #fdf4ea; --surface: #fdf4ea; --card: #ffffff;
  --card-shadow: 0 0 0 1px rgb(214 180 150 / 0.35), 0 16px 40px -24px rgb(120 60 20 / 0.35);
  --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%);
}
.site[data-ritmo] main > #costi { --bg: #ffffff; --surface: #ffffff; --wg-page: #ffffff; background: #ffffff; }

/* ---------- Hero: the question that points at the case tabs ---------- */
.hx-ask { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: var(--t-16); line-height: 22px; font-weight: 500; color: rgb(255 255 255 / 0.86); }
.hx-ask-arrow { flex: none; width: 48px; height: 30px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* phones: above the tabs, the arrow bends down onto them */
@media (max-width: 860px) {
  .hx-ask { flex-direction: row-reverse; justify-content: flex-end; margin-bottom: 6px; font-size: var(--t-14); line-height: 20px; }
  .hx-ask-arrow { width: 34px; height: 22px; transform: scaleX(-1) rotate(-28deg); margin-bottom: -10px; }
}
/* desktop: right of the tabs, on their line; home.js measures the tab strip into --hx-tabs-w */
@media (min-width: 861px) {
  .site .hero-ui { --hx-tabs-w: 620px; }
  .hx-ask { position: absolute; z-index: 3; top: 0; left: calc(var(--hx-tabs-w) + 12px); height: 42px; margin: 0; }
  .hx-ask-arrow { transform: translateY(6px); }
  .hero-ui[data-ask-above] .hx-ask { position: static; height: auto; margin-bottom: 8px; flex-direction: row-reverse; justify-content: flex-end; }
  .hero-ui[data-ask-above] .hx-ask-arrow { width: 40px; height: 26px; transform: scaleX(-1) rotate(-28deg); margin-bottom: -12px; }
}

/* ---------- 2. Il problema: the pieces caught on the thread, which knots and then runs straight into the plan's timeline ---------- */
/* the cards are tilted and cast a long shadow, so they need more room under the lede than a flat block would */
.nx-problema-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--sp-head-content) + 24px); }
.nx-problema-copy { max-width: 620px; }
.nx-lede-why { font-weight: 500; color: var(--fg); }
.nx-pezzi { position: relative; height: 400px; margin: 0; }
/* the pieces keep one arrangement on every desktop width: x in px on a 560 px lane over the knot, y in % of the figure */
.nx-pezzi ul { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: 560px; margin: 0; padding: 0; list-style: none; }
.nx-pezzi li { position: absolute; left: var(--x); top: var(--y); display: grid; gap: 2px; min-width: 168px; padding: 12px 16px; border-radius: 12px; background: #ffffff; box-shadow: 0 0 0 1px #e1e7ef, 0 18px 36px -18px rgb(2 55 108 / 0.45); transform: rotate(var(--r)); }
.nx-pezzi li span { font-size: var(--t-13); line-height: 18px; color: #4d6584; }
.nx-pezzi li b { font-size: var(--t-16); line-height: 22px; font-weight: 500; color: #02376c; }
.nx-pezzi .d1-filo { position: absolute; left: 0; right: 0; top: 50%; margin: 0; transform: translateY(-50%); }
.nx-pezzi .d1-filo-path { stroke-width: 2.4; }
.nx-pezzi .d1-tag { font-size: 15px; line-height: 20px; }
/* the only motion: hovering the thread draws it again from the knot */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .nx-pezzi .d1-filo:hover .d1-filo-path { stroke-dasharray: 1 1; animation: nx-filo-draw 1400ms cubic-bezier(0.65, 0, 0.35, 1); }
}
@keyframes nx-filo-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (max-width: 860px) {
  .nx-problema-in { gap: var(--m-lede-content); }
  .nx-pezzi { height: auto; padding-top: 8px; }
  .nx-pezzi ul { position: relative; width: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m-card-gap); }
  .nx-pezzi li { position: relative; left: auto; top: auto; min-width: 0; padding: 10px 12px; transform: rotate(calc(var(--r) * 0.6)); }
  .nx-pezzi li b { font-size: var(--t-14); line-height: 20px; }
  .nx-pezzi .d1-filo { position: relative; top: auto; margin: var(--m-lede-content) 0 0; padding-bottom: 0; transform: none; }
  .nx-pezzi .d1-filo-mob { margin-bottom: 0; padding-bottom: 4px; }
  .nx-pezzi .d1-tag { font-size: 13px; line-height: 18px; }
}

/* ---------- 6. The advisors, small: a row of avatars inside the bento's team tile ---------- */
.nx-advs { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 0; padding: 0; list-style: none; }
.nx-advs li { display: flex; align-items: center; gap: 12px; }
.nx-advs img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.nx-advs p { display: grid; font-size: var(--t-14); line-height: 20px; color: var(--ink-2); }
.nx-advs b { font-size: var(--t-16); line-height: 22px; font-weight: 500; color: var(--fg); }
@media (max-width: 860px) {
  .nx-advs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .nx-advs p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
}

/* ---------- 7. Recensioni: six reviews with the same weight, then the press ---------- */
.nx-revs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.nx-revs figure { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; height: 100%; margin: 0; padding: 24px; border-radius: 16px; background: #ffffff; box-shadow: var(--card-shadow); }
.nx-revs blockquote { font-size: var(--t-16); line-height: 24px; color: var(--fg); text-wrap: pretty; }
.nx-prove .src { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--t-14); line-height: 20px; color: var(--ink-2); }
.nx-prove .src b { font-weight: 500; color: var(--fg); }
.nx-prove-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px 48px; margin-top: 40px; }
.nx-press-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; flex-basis: 100%; }
.nx-press-k { font-size: var(--t-14); line-height: 20px; color: var(--ink-2); }
.nx-press { --x7-ink: #02376c; flex: none; }
@media (max-width: 1100px) and (min-width: 861px) { .nx-revs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .nx-revs { grid-template-columns: minmax(0, 1fr); gap: var(--m-card-gap); }
  .nx-revs figure { padding: var(--m-card-pad); }
  .nx-revs li:nth-child(n+4) { display: none; }
  .nx-prove-foot { flex-direction: column; align-items: center; gap: var(--m-stack); margin-top: var(--m-lede-content); }
  .nx-press-row { flex-direction: column; align-items: center; align-self: stretch; }
  .nx-press { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 16px 24px; }
}

/* ---------- 8. Bonus, the calculator: one line back to the Roadmap under the note ---------- */
.nx-raccordo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line, #e1e7ef); font-size: var(--t-16); line-height: 24px; color: var(--ink-2, #4d6584); }

/* ---------- 6. Perché Plannix: mixed tiles, each a number, a visual or a piece of the product, plus one line ---------- */
.nx-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "team team num ocf" "fee fee bank dati" "app app app app"; gap: 16px; }
.nx-tile { display: grid; align-content: start; gap: 12px; padding: 24px; border-radius: 16px; background: #f4f7fb; color: var(--fg); text-decoration: none; }
.nx-tile-k { font-size: var(--t-14); line-height: 20px; font-weight: 500; color: var(--ink-2); }
.nx-tile-t { font-size: var(--t-15, 15px); line-height: 22px; color: var(--ink-2); }
.nx-tile-t b { font-weight: 500; color: var(--fg); }
.nx-tile .link { justify-self: start; }
.nx-big { font-family: var(--serif); font-weight: 400; font-size: 56px; line-height: 1; letter-spacing: -0.03em; color: var(--brand); }
.nx-t-team { grid-area: team; }
.nx-t-team .nx-advs { gap: 12px 24px; }
.nx-t-num { grid-area: num; }
.nx-t-ocf { grid-area: ocf; }
.nx-t-ocf img { width: auto; height: 44px; }
.nx-t-fee { grid-area: fee; }
.nx-t-bank { grid-area: bank; }
.nx-t-bank .nx-mb-tag { display: none; }
.nx-t-dati { grid-area: dati; }
.nx-t-dati .link { margin-top: auto; }
/* the app tile: a lifted night with the dawn rising behind a phone that the tile's bottom edge crops; the ring keeps it apart from the night band */
.nx-t-app { grid-area: app; position: relative; overflow: hidden; gap: 28px; padding: 28px 20px 0; background: radial-gradient(70% 90% at 72% 115%, hsl(30 85% 78% / 0.55), rgb(98 206 254 / 0.22) 45%, transparent 70%), #0d2a6b; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.nx-t-app .nx-tile-t { max-width: 30em; color: rgb(255 255 255 / 0.72); }
.nx-t-app .nx-tile-t b { color: #ffffff; }
@media (min-width: 861px) {
  .nx-t-app { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; column-gap: 48px; min-height: 520px; padding: 56px clamp(40px, 4.5vw, 64px) 0; }
  .nx-t-app .nx-tile-t { align-self: center; font-size: 20px; line-height: 30px; }
}
.nx-phone { justify-self: center; width: 300px; height: 520px; margin-bottom: -60px; padding: 12px; border-radius: 44px; background: #0c1530; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14), 0 40px 90px -20px rgb(0 0 0 / 0.6); }
.nx-phone-screen { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 44px 14px 14px; border-radius: 34px; background: #f4f4f5; overflow: hidden; font-size: 12.5px; line-height: 1.35; color: #4d6584; --bg: #ffffff; --line: #e1e7ef; --navy: #02376c; --ink-3: #6b7f99; --pr-tint: #e7f1fd; }
.nx-phone-screen::before { content: ""; position: absolute; top: 12px; left: 50%; width: 96px; height: 26px; margin-left: -48px; border-radius: 20px; background: #0c1530; }
.nx-phone-screen .pv-card { flex: none; padding: 12px 14px; border-radius: 14px; }
.nx-phone-screen .pv-big { font-size: 30px; }
.nx-phone-screen .nx-plan { flex: none; padding: 12px 14px 10px; border-radius: 14px; box-shadow: 0 0 0 1px #e1e7ef; }
.nx-phone-screen .nx-alba-k { padding-bottom: 10px; font-size: 13px; line-height: 18px; }
.nx-phone-screen .nx-plan li { gap: 2px 12px; padding: 10px 0; }
.nx-phone-screen .nx-plan li b { font-size: 14px; line-height: 20px; }
.nx-phone-screen .nx-plan .d1-when { font-size: 13px; line-height: 18px; }
/* the phone is too narrow for a time column: the timing goes under the action, which then keeps its line */
.nx-phone-screen .nx-plan li { grid-template-columns: minmax(0, 1fr); }
.nx-phone-screen .nx-plan .d1-when { grid-column: 1; grid-row: auto; align-self: start; }
@media (max-width: 860px) { .nx-phone { width: min(100%, 280px); height: 480px; margin-bottom: -120px; } }
.nx-mini-fee { display: grid; margin: 0; border-radius: 10px; background: #ffffff; box-shadow: 0 0 0 1px #e1e7ef; }
.nx-mini-fee div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; font-size: var(--t-13); line-height: 18px; }
.nx-mini-fee div + div { border-top: 1px solid #eef1f5; }
.nx-mini-fee dt { color: #4d6584; }
.nx-mini-fee dd { margin: 0; font-weight: 500; color: #02376c; }
.nx-mini-bank { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: #ffffff; box-shadow: 0 0 0 1px #e1e7ef; }
.nx-mb-ico { width: 32px; height: 32px; }
.nx-mini-bank b { display: block; font-size: var(--t-14); line-height: 20px; font-weight: 500; color: #02376c; }
.nx-mini-bank small { display: block; font-size: var(--t-13); line-height: 18px; color: #4d6584; }
.nx-mb-tag { padding: 2px 8px; border-radius: 999px; background: #e6f5ee; color: #0b7a4b; font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; }
@media (max-width: 1100px) and (min-width: 861px) { .nx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "team team" "num ocf" "fee fee" "bank dati" "app app"; } }
@media (max-width: 860px) {
  .nx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "team team" "num num" "ocf ocf" "fee fee" "bank bank" "dati dati" "app app"; gap: var(--m-card-gap); }
  .nx-tile { padding: var(--m-card-pad); }
  .nx-big { font-size: 40px; }
  /* at 20 px «Oltre» is body-size text: brand blue on the tile is 4.3:1, the pressed blue 5.9:1 */
  .nx-big small { color: var(--brand-press); }
  .nx-mb-tag { display: none; }
  .nx-mini-bank { grid-template-columns: 32px minmax(0, 1fr); }
}

/* Phones: the thread runs top to bottom, the knot first and the three times along the line, so it reads at full size instead of as a thin strip */
@media (max-width: 860px) {
  .nx-pezzi .d1-filo-v { height: 300px; padding: 0; }
  .nx-pezzi .d1-filo-v svg { width: 110px; height: 300px; margin-left: 8px; }
  .nx-pezzi .d1-filo-v .d1-tag { left: 90px; top: var(--y); transform: translateY(-50%); font-size: 15px; }
}