/* Landing /roadmap. Loaded after system.css: only the system tokens (--t-*, --r-*, --btn-h-*, --dur-*, --sand). Classes of its own are prefixed rl-. Report: team/out/roadmap-page.md */

/* Night chapters of this page: hero and Giovanni's story (the closing takes the night from home.css #chiusura) */
.site .rl-hero, .site .rl-story {
  --bg: var(--night);
  --fg: #ffffff;
  --surface: var(--night-2);
  --surface-2: var(--night-3);
  --line: rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.22);
  --construct: rgba(157, 178, 204, 0.55);
  --navy: #ffffff;
  background: var(--bg);
  color: var(--fg);
}
/* Rhythm: night hero, sand, white, night story, dawn reviews, white, sand, white FAQ, night closing; never two plain whites in a row */
.site .rl-when, .site .rl-no { --bg: 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); }

/* Hero: copy and price card centred on each other, the dawn as a horizon under the card */
.rl-hero { position: relative; isolation: isolate; overflow: clip; padding-bottom: 112px; }
/* The home's Alba, lower and quieter: night sky from the top, the light coming up behind the price card. Same colours as hero-alba.css. */
.site .rl-hero { background: linear-gradient(180deg, #050f2b 0%, #071a45 45%, #0b2257 100%); }
.rl-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 9% at 74% 96%, hsl(33 86% 80% / 0.55), hsl(28 70% 62% / 0.2) 50%, transparent 80%),
    radial-gradient(52% 16% at 72% 95%, rgb(150 220 255 / 0.32), transparent 72%),
    radial-gradient(70% 30% at 70% 92%, rgb(3 115 226 / 0.36), transparent 72%),
    radial-gradient(90% 46% at 68% 84%, rgb(27 73 194 / 0.28), transparent 75%),
    linear-gradient(180deg, transparent 62%, rgb(11 34 87 / 0.9) 100%); }
@media (max-width: 860px) {
  .rl-hero::before { background:
    radial-gradient(90% 8% at 50% 98%, hsl(33 86% 80% / 0.5), hsl(28 70% 62% / 0.18) 50%, transparent 80%),
    radial-gradient(110% 14% at 50% 97%, rgb(150 220 255 / 0.28), transparent 72%),
    radial-gradient(130% 26% at 50% 94%, rgb(3 115 226 / 0.32), transparent 72%),
    radial-gradient(140% 40% at 50% 86%, rgb(27 73 194 / 0.24), transparent 75%); }
}

.rl-hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px calc(100% / 12); align-items: center; padding-top: calc(56px + 64px); }
.rl-hero-copy { display: grid; justify-items: start; }
.rl-hero .h1 { max-width: 12em; font-size: clamp(40px, 4.2vw, 60px); line-height: 1.06; }
/* Identity as a quiet badge above the H1, the same chip as the home hero (.hx-badge in hero-groviglio.css, not loaded here) */
.rl-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 4px 12px 4px 10px; border-radius: 999px; background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); color: rgb(255 255 255 / 0.92); font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: 0.01em; }
.rl-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sky, #62cefe); }
.rl-hero .sub { font-size: var(--t-18); max-width: 31em; }
.rl-tp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--t-14); color: rgb(255 255 255 / 0.72); text-decoration: none; }
.rl-tp .tp-word, .rl-tp b { color: #ffffff; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .rl-tp:hover .rl-tp-n { color: #ffffff; } }

/* Construction lines of the tratto di progetto: two guides at the card's edges and one across its top, nodes where they meet */
.rl-hero-card { position: relative; justify-self: end; width: 100%; max-width: 420px; }
.rl-hero-card::before, .rl-hero-card::after, .rl-guide { content: ""; position: absolute; z-index: -1; background: rgb(157 178 204 / 0.26); pointer-events: none; }
.rl-hero-card::before, .rl-hero-card::after { top: -96px; bottom: -160px; width: 1px; -webkit-mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.rl-hero-card::before { left: -24px; }
.rl-hero-card::after { right: -24px; }
.rl-guide { top: 25px; left: -160px; right: -160px; height: 1px; -webkit-mask: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }

/* Price card */
.rl-yours { padding-top: 16px; border-top: 1px solid var(--c-line); font-size: var(--t-14); line-height: 1.45; color: var(--c-fg); }
.rl-launch { padding: 8px 12px; border-radius: var(--r-ctl); background: #eef3fb; font-size: var(--t-14); line-height: 1.45; color: var(--c-fg); }
.rl-card { --c-fg: #02376c; --c-ink-2: #44546c; --c-line: #e1e7ef; position: relative; display: grid; gap: 20px; padding: 24px; border-radius: var(--r-card); background: #ffffff; color: var(--c-fg); box-shadow: 0 1px 2px rgb(1 16 48 / 0.2), 0 24px 56px -24px rgb(1 16 48 / 0.6); }
.rl-card::before, .rl-card::after { content: ""; position: absolute; top: 22px; width: 7px; height: 7px; border-radius: var(--r-round); background: var(--sky); box-shadow: 0 0 0 3px rgb(98 206 254 / 0.18); }
.rl-card::before { left: -27px; }
.rl-card::after { right: -27px; }
.rl-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--c-line); }
.rl-card-name { font-family: var(--font-serif); font-size: var(--t-28); line-height: 1.1; letter-spacing: -0.015em; }
.rl-price { display: flex; align-items: baseline; gap: 8px; }
.rl-price b { font: 500 var(--t-28)/1 var(--font-sans); letter-spacing: -0.02em; }
.rl-price span { font-size: var(--t-13); color: var(--c-ink-2); }
.rl-inc { display: grid; gap: 12px; }
.rl-inc li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; font-size: var(--t-14); line-height: 1.45; color: var(--c-ink-2); }
.rl-inc b { font-weight: 500; color: var(--c-fg); }
.rl-tick { width: 16px; height: 16px; margin-top: 2px; color: var(--brand); }
.rl-buy { width: 100%; height: var(--btn-h-site); }


/* What you get and when: steps by time, then a delivered Roadmap as product UI */
.rl-when-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px calc(100% / 12); align-items: start; }
.rl-steps { border-top: 1px solid var(--line-2); }
.rl-steps li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4px 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.rl-step-k { font-size: var(--t-14); font-weight: 500; color: var(--brand); padding-top: 2px; }
.rl-step-t { font: 500 var(--t-18)/1.35 var(--font-sans); }
.rl-step-p { margin-top: 4px; font-size: var(--t-14); color: var(--ink-2); max-width: 34em; }

.rl-doc { --d-fg: oklch(21% 0.006 285.885); --d-fg-2: oklch(44.2% 0.017 285.786); --d-fg-3: oklch(55.2% 0.016 285.938); --d-line: oklch(92% 0.004 286.32); border-radius: var(--r-card); background: #ffffff; color: var(--d-fg); box-shadow: 0 0 0 1px rgb(2 55 108 / 0.08), 0 1px 2px rgb(2 55 108 / 0.06), 0 16px 40px -20px rgb(2 55 108 / 0.28); font-size: var(--t-13); overflow: hidden; }
.rl-doc-bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--d-line); color: var(--d-fg-3); }
.rl-doc-bar img { width: 16px; height: 16px; }
.rl-doc-bar svg, .rl-change svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.rl-doc-cur { color: var(--d-fg); font-weight: 500; }
.rl-doc-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; padding: 10px; background: #faf8f5; border-bottom: 1px solid #e7e0d4; }
.rl-doc-nav li { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; border-radius: var(--r-ctl); color: var(--d-fg-2); white-space: nowrap; }
.rl-doc-nav svg { flex: none; width: 15px; height: 15px; color: var(--d-fg-3); }
.rl-doc-nav .is-on { background: #ffffff; color: var(--d-fg); font-weight: 500; box-shadow: 0 0 0 1px #e7e0d4; }
.rl-doc-nav .is-on svg { color: var(--brand); }
.rl-doc-n { margin-left: auto; font-weight: 400; color: var(--d-fg-3); font-size: var(--t-12); }
.rl-doc-sign { padding: 14px 16px; border-bottom: 1px solid var(--d-line); }
.rl-doc-person { display: flex; align-items: center; gap: 10px; }
.rl-doc-person img { width: 32px; height: 32px; border-radius: var(--r-round); object-fit: cover; }
.rl-doc-person > span { display: grid; }
.rl-doc-person b { font-weight: 500; }
.rl-doc-person span span { color: var(--d-fg-3); font-size: var(--t-12); }
.rl-doc-date { margin-top: 8px; color: var(--d-fg-2); }
.rl-doc-k { font-size: var(--t-12); color: var(--d-fg-3); margin-bottom: 8px; }
.rl-doc-letter { padding: 14px 16px; border-bottom: 1px solid var(--d-line); }
.rl-doc-quote { font-family: var(--font-serif); font-size: var(--t-16); line-height: 1.45; color: var(--d-fg); }
.rl-doc-next { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 14px; color: var(--d-fg-2); }
.rl-doc-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-ctl); background: var(--brand); color: #ffffff; font-weight: 500; white-space: nowrap; }
.rl-change { display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; border-radius: var(--r-ctl); background: #f2ede5; color: var(--d-fg); font-size: var(--t-12); }

/* Giovanni's story, on night: before and after on the same row */
.rl-story-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px calc(100% / 12); align-items: start; }
.rl-story-head { display: grid; justify-items: start; }
.rl-story-who { font-size: var(--t-14); color: var(--ink-2); max-width: 30em; }
.rl-story-q { font-family: var(--font-serif); font-style: italic; font-size: var(--t-28); line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.rl-story .link { color: #ffffff; }
.rl-story-body { display: grid; }
.rl-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.rl-pair-h { padding: 0; border-bottom-color: var(--line-2); }
.rl-story-k { font: 500 var(--t-14)/1.4 var(--font-sans); color: var(--ink-2); padding-bottom: 10px; }
.rl-before, .rl-after { display: grid; align-content: start; gap: 2px; }
.rl-before span, .rl-after span { font-size: var(--t-14); color: var(--ink-2); }
.rl-before b, .rl-after b { font: 500 var(--t-18)/1.3 var(--font-sans); letter-spacing: -0.01em; }
.rl-after b { color: var(--sky); }

/* When you don't need it */
.rl-no-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px calc(100% / 12); }
.rl-no-k { font: 500 var(--t-14)/1.4 var(--font-sans); color: var(--ink-2); padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.rl-no-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; border-top: 1px solid var(--line-2); }
.rl-no-list li { align-content: start; }
.rl-no-foot { margin-top: 24px; font-size: var(--t-14); color: var(--ink-2); max-width: 44em; }
@media (max-width: 860px) { .rl-no-list { grid-template-columns: minmax(0, 1fr); } }
.rl-rows li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rl-rows b { font-weight: 500; font-size: var(--t-16); }
.rl-rows p { font-size: var(--t-14); color: var(--ink-2); max-width: 36em; }
.rl-inline { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
@media (hover: hover) and (pointer: fine) { .rl-inline:hover { text-decoration-color: currentColor; } }
.rl .rev blockquote { margin-top: 12px; }
/* Reviews on the home's light dawn (narrativa.css #recensioni.nx-prove), quotes in the home's upright sans */
.site.rl #recensioni {
  --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%);
}
/* the score line unboxed, as on the home; each piece keeps its words together when the line wraps on phones */
.site.rl #recensioni .tp-score { flex-wrap: wrap; gap: 4px 12px; padding: 0; box-shadow: none; }
.site.rl #recensioni .tp-score > span { white-space: nowrap; }
.site.rl #recensioni .rev blockquote { font-family: var(--font-sans); font-style: normal; font-size: var(--t-16); line-height: 1.5; --tr: var(--tr-sans); }


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

@media (max-width: 860px) {
  .rl-hero { padding-bottom: var(--m-sec); }
  /* Phones, as on the home: air under the nav, the badge quieter, a calm 32 px before the price card; the H1 keeps the smaller phone size, it is twice as long as the home's */
  .rl-hero-in { grid-template-columns: minmax(0, 1fr); gap: var(--m-lede-content); padding-top: calc(52px + clamp(var(--m-lede-content), 6svh, 64px)); }
  .rl-badge { justify-self: start; gap: 6px; margin-bottom: 0; padding: 2px 10px 2px 8px; background: rgb(255 255 255 / 0.08); }
  .site .rl-hero .h1 { margin-top: 16px; font-size: 36px; }
  .rl-hero .sub { font-size: var(--t-16); }
  .rl-tp { font-size: var(--t-13); }
  .rl-hero-card { justify-self: stretch; max-width: none; }
  .rl-hero-card::before, .rl-hero-card::after, .rl-card::before, .rl-card::after, .rl-guide { display: none; }
  .rl-card { padding: var(--m-card-pad); gap: 16px; }
  .rl-card-top { padding-bottom: 12px; }
  .rl-inc { gap: 8px; }
  .rl-when-grid, .rl-story-in, .rl-no-grid { grid-template-columns: minmax(0, 1fr); }
  .rl-steps li { grid-template-columns: minmax(0, 1fr); padding: 16px 0; }
  .rl-step-k { padding-top: 0; }
  .rl-story-in { gap: 32px; }
  .rl-pair { gap: 16px; }
  .rl-before span, .rl-after span { font-size: var(--t-13); }
}
@media (max-width: 480px) { .rl-doc-n { display: none; } }
@media (max-width: 380px) { .rl-bar-p { font-size: var(--t-12); } }
/* «Esempio» on the delivered Roadmap: the same chip as the Roadmap UI (.prm-example in roadmap-ui.css, not loaded here) */
.rl-doc .prm-example { margin-left: 2px; padding: 0 6px; border-radius: var(--r-ctl); box-shadow: inset 0 0 0 1px var(--d-line); font-size: var(--t-12); line-height: 18px; color: var(--d-fg-3); white-space: nowrap; }

/* Who reviews: a client's words about the team, on the right of the heading; under it on phones */
.rl-chi-top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px calc(100% / 12); align-items: end; margin-bottom: var(--sp-head-content, 48px); }
.rl-chi-top .sec-head { margin-bottom: 0; }
.rl-quote { margin: 0; }
/* the opening guillemet hangs in the margin, so the words keep the column's edge */
.rl-quote blockquote { margin: 0; text-indent: -0.42em; font-family: var(--serif); font-size: var(--t-28, 28px); line-height: 1.25; letter-spacing: -0.015em; color: var(--navy); text-wrap: balance; }
@media (max-width: 860px) {
  .rl-chi-top { grid-template-columns: minmax(0, 1fr); gap: var(--m-lede-content); margin-bottom: var(--m-lede-content); }
  .rl-quote blockquote { line-height: 1.3; }
}

/* What the Roadmap tells you: one row per area, the three readings side by side; 16 px inside an area, 40 px between areas */
.rl-area-list { border-top: 1px solid var(--line-2); }
.rl-area { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 16px 40px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.rl-area-h { align-self: start; display: flex; align-items: center; gap: 12px; font: 500 var(--t-16)/1.4 var(--font-sans); }
.rl-area-ico { flex: none; width: 24px; height: 24px; color: #1b49c2; }
.rl-area-pts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 40px; }
.rl-area-pts li { font-size: var(--t-14); line-height: 1.5; color: var(--ink-2); }
@media (max-width: 860px) {
  .rl-area { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px 0; }
  .rl-area-pts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rl-area-pts li { position: relative; padding-left: 36px; }
}
/* Phones: nothing under 13 px in the delivered Roadmap (chip, labels, role, dates, change) */
@media (max-width: 640px) {
  .rl-doc :is(.prm-example, .rl-doc-k, .rl-doc-person span span, .rl-change, .rl-doc-n) { font-size: var(--t-13); }
  .rl-doc .prm-example { line-height: 20px; }
}

/* Press, one by one with the year: logo and what it was, side by side */
/* centred under the three reviews, the label over the logos, so the row never ends short of the cards' right edge */
.rl-press { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line-2); display: grid; justify-items: center; gap: 20px; text-align: center; }
.rl-press-k { font: 500 var(--t-14)/1.4 var(--font-sans); color: var(--ink-2); }
.rl-press-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; }
.rl-press-list li { display: flex; align-items: center; gap: 16px; font-size: var(--t-14); color: var(--ink-2); }
.rl-lg { flex: none; display: block; width: var(--w); height: var(--h); color: var(--fg); background: currentColor; opacity: 0.72; -webkit-mask: var(--src) no-repeat center / contain; mask: var(--src) no-repeat center / contain; }
@media (max-width: 860px) {
  .rl-press { padding-top: var(--m-stack); gap: 16px; }
  /* the logos wrap in rows, as on the home: seven stacked logos made a column taller than the reviews above */
  .rl-press-list { gap: 14px 28px; }
  .rl-press-list li { font-size: var(--t-13); }
  .rl-lg { width: calc(var(--w) * 0.85); height: calc(var(--h) * 0.85); }
}

/* Review mode (?rev=1): reviewers not yet verified in the rotation */
.rl [data-verifica="rotazione"]:not([hidden]) { outline: 2px dashed #d97706; outline-offset: 4px; }
.rl-votes { display: none; }
.rl-card-pre { display: grid; gap: 16px; }
.rl-card-buy { display: grid; gap: 20px; }
@media (max-width: 860px) { .rl-card-buy { gap: 16px; } }

/* Structures (VOT-RM-STRUTTURA), one set of sections: A is the HTML order; B drops people and proof; C moves proof up for campaign traffic */
.site.rl .rl-main { display: flex; flex-direction: column; }
.site.rl[data-struttura="b"] :is(#chi-firma, #storia, #recensioni) { display: none; }
.site.rl[data-struttura="c"] #chi-firma { display: none; }
.site.rl[data-struttura="c"] #apertura { order: 1; }
.site.rl[data-struttura="c"] #cosa-ricevi { order: 2; }
.site.rl[data-struttura="c"] #recensioni { order: 3; }
.site.rl[data-struttura="c"] #storia { order: 4; }
.site.rl[data-struttura="c"] #cosa-trovi { order: 5; }
.site.rl[data-struttura="c"] #quando-no { order: 6; }
.site.rl[data-struttura="c"] #faq { order: 7; }
.site.rl[data-struttura="c"] #chiusura { order: 8; }
/* the price never breaks; the VAT note drops under it on narrow cards */
.rl-price b { white-space: nowrap; }
.rl-card-top { flex-wrap: wrap; }
@media (max-width: 480px) { .rl-price { flex-wrap: wrap; justify-content: flex-end; text-align: right; gap: 2px 8px; } }

/* Landing rhythm: 56 px between the blocks of a section (40 on phones), panels on one 16 px radius, one 24 px serif sub-head under the 36 px H2 */
.site.rl { --rl-block: 56px; --rl-r: 16px; --rl-h3: 24px; }
@media (max-width: 860px) { .site.rl { --rl-block: 40px; --rl-h3: 22px; } }

/* Landing badge: names the product, unlike the home's identity chip */
.rl-badge--prod { padding: 4px 12px; background: rgb(98 206 254 / 0.14); box-shadow: inset 0 0 0 1px rgb(98 206 254 / 0.32); color: #ffffff; }
.rl-badge--prod::before { content: none; }

/* Hero, product first: copy, benefits and button on the left, the plan itself on the right */
.rl-inc--hero { gap: 10px; }
.rl-inc--hero li { color: rgb(255 255 255 / 0.78); font-size: var(--t-16); }
.rl-inc--hero b { color: #ffffff; }
.rl-inc--hero .rl-tick { color: var(--sky, #62cefe); }
/* the launch offer is a warm note on the night, 12 px above the button it qualifies */
.rl-hero-buy { display: grid; justify-items: start; gap: 12px; margin-top: var(--sp-lede-cta); }
.rl-hero-buy .rl-buy { width: auto; min-width: 240px; padding-inline: 28px; }
.rl-hero-buy .rl-yours { margin-bottom: 12px; color: rgb(255 255 255 / 0.78); }
.rl-hero-buy .rl-launch { margin: 0; max-width: 30em; padding: 10px 14px; border-radius: var(--r-btn); background: rgb(255 214 170 / 0.12); box-shadow: inset 0 0 0 1px rgb(255 214 170 / 0.32); color: #ffe6c8; font-size: var(--t-14); line-height: 20px; }
.rl-hero-buy .rl-launch[hidden] { display: none; }
.rl-plan { padding: 20px 22px 16px; border-radius: 18px; background: #ffffff; color: #02376c; box-shadow: 0 -18px 60px -10px rgb(255 205 160 / 0.4), 0 30px 80px rgb(3 20 60 / 0.45); }
.rl-plan-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; }
.rl-plan-ex { margin-left: auto; padding: 0 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px #e1e7ef; font-size: 12px; line-height: 20px; font-weight: 400; color: #4d6584; }
.rl-plan-sum { margin: 14px 0 4px; padding: 10px 12px; border-radius: 10px; background: #eef5fe; font-size: var(--t-14); line-height: 20px; color: #02376c; }
.rl-plan ol { margin: 0; padding: 0; list-style: none; }
.rl-plan li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid #e6ebf2; }
.rl-plan .d1-lv, .rl-plan .d1-when { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.rl-plan .d1-lv { grid-column: 1; font-size: 13px; line-height: 18px; color: #4d6584; }
.rl-plan .d1-glyph { width: 15px; height: 13px; }
.rl-plan .d1-glyph rect { fill: #9db2cc; }
.rl-plan .d1-glyph rect.on { fill: var(--brand, #0373e2); }
.rl-plan li b { grid-column: 1; font-size: var(--t-15, 15px); line-height: 22px; font-weight: 500; }
.rl-plan .d1-when { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--t-14); line-height: 20px; }
.rl-plan .d1-when i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--brand, #0373e2); }
.rl-plan .d1-when-full { background: radial-gradient(circle, var(--brand, #0373e2) 0 3.4px, transparent 3.6px); }
.rl-plan .d1-when-half { background: linear-gradient(90deg, transparent 50%, var(--brand, #0373e2) 50%) center / 7px 7px no-repeat; }
.rl-plan-sign { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; font-size: 13px; line-height: 18px; color: #4d6584; }
.rl-plan-sign b { font-weight: 500; color: #0f7a46; white-space: nowrap; }
@media (max-width: 860px) {
  .rl-hero-buy { justify-items: stretch; }
  .rl-hero-buy .rl-buy { width: 100%; }
  .rl-plan { padding: var(--m-ui-pad); }
}

/* Focus on the night chapters is white: the brand ring vanishes on the night and on the blue button */
.site :is(.rl-hero, .rl-story, .rl-close) :focus-visible { outline-color: #ffffff; }

/* Icons: 24px cobalt outlines, as on the home */
.rl-ico { width: 24px; height: 24px; flex: none; color: #1b49c2; fill: none; stroke: currentColor; }

/* The reader's inner voice, 8 px over the section title and quieter than it; title → lede keeps the system.css rhythm */
.rl-thought { margin: 0 0 8px; font-family: var(--font-serif, var(--serif)); font-style: italic; font-size: 18px; line-height: 1.3; color: var(--brand, #0373e2); }
.rl-story .rl-thought, .rl-close .rl-thought { color: var(--sky, #62cefe); }
.site .rl-thought-wrap + :is(.lead, p) { margin-top: var(--sp-title-lede); }
@media (max-width: 860px) { .rl-thought { font-size: 17px; } }

/* From the problem to Roadmap: the cost in euro, the reader's own words, then why Plannix. Figures 32, sub-heads 24, quotes 18: all under the H2 */
.rl-why-costs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 var(--rl-block); padding: 0; list-style: none; }
.rl-why-costs li { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: var(--rl-r); background: var(--sand); }
.rl-why-costs .rl-ico { margin-bottom: 8px; }
/* the third card's words take the figures' line box, so the three captions start on one line */
.rl-why-costs b { --fig: 32px; font-family: var(--serif); font-weight: 400; font-size: var(--fig); line-height: calc(var(--fig) * 1.1); color: var(--c-fg, #02376c); }
.rl-why-costs li:last-child b { font-size: var(--rl-h3); }
.rl-why-costs span { font-size: var(--t-16); line-height: 1.5; color: var(--c-ink-2, #4d6584); }
.rl-why-you { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 48px; align-items: start; margin-bottom: var(--rl-block); }
.rl-why-h3, .rl-value-k { font-family: var(--serif); font-weight: 400; font-size: var(--rl-h3); line-height: 1.2; color: var(--c-fg, #02376c); }
/* level with the first line of the quotes beside it */
.rl-why-h3 { padding-top: 14px; }
.rl-why-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.rl-why-quotes li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line, #e3e8ef); font-family: var(--serif); font-size: 18px; line-height: 1.35; color: var(--c-fg, #02376c); }
.rl-why-us { display: grid; gap: 24px; padding: 32px; border-radius: var(--rl-r); background: var(--sand); color: var(--c-fg, #02376c); }
.rl-why-pitch { max-width: 34em; font-family: var(--serif); font-size: var(--rl-h3); line-height: 1.3; }
.rl-why-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 24px 0 0; border-top: 1px solid color-mix(in oklab, var(--sand), #02376c 14%); list-style: none; }
.rl-why-proof li { display: grid; gap: 4px; }
.rl-why-proof .rl-ico { margin-bottom: 8px; }
.rl-why-proof b { font-size: var(--t-18); font-weight: 500; line-height: 1.3; color: var(--c-fg, #02376c); }
.rl-why-proof span { font-size: var(--t-14); line-height: 1.4; color: var(--c-ink-2, #4d6584); }
@media (max-width: 860px) {
  .rl-why-costs { grid-template-columns: minmax(0, 1fr); gap: var(--m-card-gap); }
  .rl-why-costs li { padding: var(--m-card-pad); }
  .rl-why-costs b { --fig: 26px; }
  .rl-why-you { grid-template-columns: minmax(0, 1fr); }
  .rl-why-h3 { padding-top: 0; }
  .rl-why-quotes { grid-template-columns: minmax(0, 1fr); }
  .rl-why-quotes li { font-size: 17px; }
  .rl-why-us { padding: var(--m-card-pad); }
  .rl-why-proof { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
}

/* Value and risk: the price against a year of bank costs, then what you risk (nothing that moves your money) */
.rl-value-top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "head bars" "buy bars"; gap: var(--sp-lede-cta) 48px; align-items: start; margin-bottom: var(--rl-block); }
.rl-value-top .sec-head { grid-area: head; margin: 0; }
.rl-value-top .h2 { max-width: 18em; }
.rl-value-top .lead { max-width: 34em; }
.rl-value-buy { grid-area: buy; }
.rl-value-buy .rl-buy { width: auto; min-width: 240px; padding-inline: 28px; }
.rl-value-k { margin: 0 0 var(--sp-title-lede); }
.rl-value-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.rl-value-list li { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: var(--rl-r); box-shadow: inset 0 0 0 1px var(--line, #e3e8ef); }
.rl-value-list b { font-size: var(--t-18); font-weight: 500; line-height: 1.3; color: var(--c-fg, #02376c); }
.rl-value-list span { font-size: var(--t-16); line-height: 1.5; color: var(--c-ink-2, #4d6584); }
/* the year of bank costs against Roadmap, two bars on one scale (rl-vbar: .rl-bar is the phone price bar) */
.rl-bars { grid-area: bars; display: grid; gap: 20px; padding: 24px; border-radius: var(--rl-r); background: var(--sand); }
.rl-vbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; }
.rl-vbar span { grid-column: 1 / -1; font-size: var(--t-14); line-height: 20px; color: var(--c-ink-2, #4d6584); }
.rl-vbar i { display: block; height: 14px; width: max(var(--w), 10px); border-radius: 7px; background: #9db2cc; }
.rl-vbar.is-rm i { background: var(--brand, #0373e2); }
.rl-vbar b { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1; color: var(--c-fg, #02376c); }
.rl-vbar.is-rm b { color: var(--brand, #0373e2); }
@media (max-width: 860px) {
  .rl-value-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "bars" "buy"; row-gap: var(--m-stack); }
  .rl-value-buy .rl-buy { width: 100%; }
  .rl-value-list { grid-template-columns: minmax(0, 1fr); gap: var(--m-card-gap); }
  .rl-value-list li { padding: var(--m-card-pad); }
  .rl-bars { padding: var(--m-card-pad); }
  .rl-vbar b { font-size: 26px; }
}

/* Three stories, one at a time (changes only on click or arrow keys). The section title leads; the person is a 26 px sub-head under it */
.rl-cases-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 32px; margin-bottom: var(--sp-head-content); }
.rl-case-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.rl-case-tab { appearance: none; border: 0; margin: 0; padding: 8px 14px; border-radius: 8px; background: transparent; color: rgb(255 255 255 / 0.72); font: 500 var(--t-14)/20px var(--font-sans, inherit); cursor: pointer; transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out; }
.rl-case-tab[aria-selected="true"] { background: #ffffff; color: #02376c; }
@media (hover: hover) and (pointer: fine) { .rl-case-tab[aria-selected="false"]:hover { background: rgb(255 255 255 / 0.06); color: #ffffff; } }
.rl-case-tab:active { transform: scale(0.96); }
.rl-case-tab:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .rl-case-tab { transition: none; } .rl-case-tab:active { transform: none; } }
.rl-case[hidden] { display: none; }
.site .rl-story .rl-case-h { margin: 0; font-size: 26px; line-height: 1.15; }
.rl-story-p { max-width: 32em; margin-top: 16px; font-size: var(--t-15, 15px); line-height: 1.55; color: rgb(255 255 255 / 0.72); }
.rl-story-thoughts { display: grid; gap: 8px; margin: 20px 0 4px; padding: 0 0 0 16px; border-left: 2px solid rgb(98 206 254 / 0.5); list-style: none; }
.rl-story-thoughts li { font-family: var(--font-serif, var(--serif)); font-style: italic; font-size: 18px; line-height: 1.4; color: rgb(255 255 255 / 0.9); }
@media (max-width: 860px) {
  .rl-cases-head { margin-bottom: var(--m-lede-content); }
  .rl-case-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .rl-case-tab { padding: 8px 6px; font-size: 13px; }
  .site .rl-story .rl-case-h { font-size: 22px; }
  .rl-story-thoughts li { font-size: 17px; }
}

/* Closing: the last push on a full dawn. Three steps, the price and a big button on the left, the plan itself on the right */
.rl-close { position: relative; isolation: isolate; }
.site.rl #chiusura.rl-close { padding-block: 112px 128px; background: linear-gradient(180deg, #050f2b 0%, #071a45 38%, #0b2a6e 62%, #1f5fd6 80%, #e9b98f 94%, #fbe3c8 100%); }
.site.rl #chiusura.rl-close::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.rl-close-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px calc(100% / 12); align-items: center; }
.rl-close-h { color: #ffffff; max-width: 12em; }
.rl-close-steps { display: grid; gap: 14px; margin: 28px 0 32px; padding: 0; list-style: none; }
.rl-close-steps li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / 0.16); font-size: var(--t-16); line-height: 1.45; }
.rl-close-steps b { font-weight: 500; color: #ffffff; }
.rl-close-steps span { color: rgb(255 255 255 / 0.78); }
.rl-close-buy { display: flex; align-items: center; gap: 24px; }
.rl-close-copy .rl-close-buy { justify-content: flex-start; }
/* the price stays under the 36 px title; the launch deadline takes its own line under it */
.rl-close-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; white-space: nowrap; }
.rl-close-price b { font: 500 32px/1 var(--font-sans); }
.rl-close-price span { font-size: var(--t-13); color: rgb(255 255 255 / 0.72); }
.rl-close-dl { flex-basis: 100%; }
.rl-close .rl-close-btn { background: #ffffff; color: #02376c; }
@media (hover: hover) and (pointer: fine) { .rl-close .rl-close-btn:hover { background: #e6eefb; } }
.rl-close .rl-close-btn--big { min-height: 56px; padding-inline: 36px; font-size: var(--t-18); }
.rl-close-plan { justify-self: end; width: 100%; max-width: 440px; }
@media (max-width: 860px) {
  .site.rl #chiusura.rl-close { padding-block: 72px 96px; }
  .rl-close-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .rl-close-buy { flex-wrap: wrap; justify-content: space-between; gap: 12px 16px; min-width: 0; }
  .rl-close-steps li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rl-close .rl-close-btn--big { width: 100%; }
  .rl-close-plan { justify-self: stretch; max-width: none; }
}

/* Before the diretta the closing asks for the same thing as the hero, with the closing's big button */
.rl-close-pre { flex-wrap: wrap; gap: 16px 24px; }
.rl-close-note { flex-basis: 100%; font-size: var(--t-16); line-height: 1.45; color: rgb(255 255 255 / 0.82); }
.rl-hero-buy .rl-launch b { font-weight: 600; color: #ffffff; }

/* Launch week (html[data-fase="lancio"] only, blocks marked data-fase-only="lancio"): the book as the last line of the plan card, the countdown to the cart close.
   Pre and evergreen never see any of it. */
.rl-badge-l { margin-left: 10px; padding-left: 10px; box-shadow: inset 1px 0 0 rgb(255 255 255 / 0.24); color: #ffd9b0; }

/* The book as an object: the flat cover upright, a spine light on the left and the page block on the right; it never tilts */
.rl-bk { position: relative; display: block; flex: none; }
.rl-bk img { display: block; width: 100%; height: auto; border-radius: 1px 3px 3px 1px; box-shadow: 0 1px 2px rgb(2 30 70 / 0.28), 0 10px 16px -12px rgb(2 30 70 / 0.5); }
.rl-bk::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 7%; border-radius: 1px 0 0 1px; background: linear-gradient(90deg, rgb(255 255 255 / 0.2), rgb(0 0 0 / 0.28) 60%, transparent); }
.rl-bk::after { content: ""; position: absolute; top: 2px; bottom: 2px; right: -3px; width: 3px; border-radius: 0 2px 2px 0; background: repeating-linear-gradient(90deg, #f4f0e8 0 1px, #d8d1c4 1px 1.5px); }

/* The offer module: the plan card's last compartment, full bleed on the sand surface, with the same 16 px rhythm as its rows */
.rl-plan-gift { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: center; margin: 14px -22px -16px; padding: 16px 22px 18px; border-radius: 0 0 18px 18px; background: var(--sand); }
.rl-plan-gift[hidden] { display: none; }
.rl-plan-gift-tx { display: grid; gap: 2px; min-width: 0; }
.rl-plan-gift-k { font-size: 13px; line-height: 18px; font-weight: 500; color: #9a4b14; }
.rl-plan-gift-t { font-size: var(--t-15, 15px); line-height: 21px; color: #02376c; text-wrap: pretty; }
.rl-plan-gift-t cite, .rl-gift-t cite, .rl-value-gift cite { font-style: normal; font-family: var(--font-serif, var(--serif)); }
.rl-plan-gift-cd { font-size: 13px; line-height: 18px; color: #4d6584; font-variant-numeric: tabular-nums; }
.rl-plan-gift-cd[hidden] { display: none; }

/* Hero copy: on wide screens the card beside it carries the book, the line stays for screen readers; on phones it is the visible line above the button */
.rl-gift { display: flex; align-items: center; gap: 14px; }
.rl-gift-cover { width: 34px; }
.rl-gift-tx { display: grid; gap: 2px; min-width: 0; }
.rl-gift-k { font-size: var(--t-13); line-height: 18px; color: #ffd9b0; }
.rl-gift-t { font-size: var(--t-15, 15px); line-height: 21px; font-weight: 500; color: #ffffff; }
.rl-gift-cd { font-size: var(--t-13); line-height: 18px; color: rgb(255 230 200 / 0.86); font-variant-numeric: tabular-nums; }
.rl-gift-cd[hidden] { display: none; }
@media (min-width: 861px) {
  .rl-hero .rl-gift { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.rl-primi { display: flex; align-items: center; gap: 8px; font-size: var(--t-14); line-height: 20px; color: rgb(255 255 255 / 0.86); }
.rl-primi .rl-tick { flex: none; margin: 0; color: var(--sky, #62cefe); }
.rl-hero-price { font-size: var(--t-14); line-height: 20px; color: rgb(255 255 255 / 0.78); }
.rl-hero-price b { font-weight: 600; color: #ffffff; }

/* Value: the gift is one line under the button; the head, the button and the bars card share two equal columns with the cards below */
html[data-fase="lancio"] .rl-value-buy { display: grid; justify-items: start; gap: 16px; }
.rl-value-gift { display: flex; align-items: center; gap: 12px; max-width: 34em; font-size: var(--t-15, 15px); line-height: 1.45; color: var(--c-ink-2, #4d6584); }
.rl-value-gift .rl-bk { width: 26px; }
.rl-value-gift cite { color: var(--c-fg, #02376c); }
@media (min-width: 861px) {
  html[data-fase="lancio"] .rl-value-top { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  html[data-fase="lancio"] .rl-bars { align-self: stretch; align-content: center; padding: 32px; }
  html[data-fase="lancio"] .rl-value-list { gap: 24px; }
}

/* Closing: the offer in one sentence, then the countdown, then the price and the button */
.rl-close-launch { display: grid; gap: 20px; margin: -8px 0 28px; }
.rl-close-offer { max-width: 32em; font-size: var(--t-16); line-height: 1.5; color: rgb(255 255 255 / 0.82); }
.rl-close-offer b { font-weight: 500; color: #ffffff; }
.rl-cd { display: grid; gap: 10px; }
.rl-cd[hidden] { display: none; }
.rl-cd-k { font-size: var(--t-14); line-height: 20px; color: #ffd9b0; }
.rl-cd-units { display: flex; gap: 8px; }
.rl-cd-units span { display: grid; justify-items: center; gap: 6px; min-width: 76px; padding: 12px 10px 10px; border-radius: 12px; background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); font-size: var(--t-12, 12px); line-height: 16px; color: rgb(255 255 255 / 0.7); }
.rl-cd-units b { font: 400 40px/1 var(--font-serif, var(--serif)); color: #ffffff; font-variant-numeric: tabular-nums; }
html[data-fase="lancio"] .rl-close-dl { display: none !important; }

@media (max-width: 860px) {
  .rl-badge-more { display: none; }
  .rl-hero .rl-plan-gift { display: none; }
  .rl-plan-gift { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; margin: 14px calc(-1 * var(--m-ui-pad)) calc(-1 * var(--m-ui-pad)); padding: 14px var(--m-ui-pad) 16px; }
  html[data-fase="lancio"] .rl-value-buy { justify-items: stretch; }
  .rl-close-launch { margin: 0 0 24px; }
  .rl-cd-units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rl-cd-units span { min-width: 0; padding: 10px 4px 8px; }
  .rl-cd-units b { font-size: 30px; }
}

/* Seats for the videochiamata with Luca (CONFIG.posti, kept by hand): the sentence, then a thin bar of the seats still open */
.rl-posti { display: grid; gap: 8px; width: 100%; max-width: 32em; }
.rl-posti[hidden] { display: none; }
.rl-posti-t { font-size: var(--t-14); line-height: 20px; font-weight: 500; color: #ffffff; font-variant-numeric: tabular-nums; }
.rl-posti-bar { display: block; height: 6px; border-radius: 3px; background: rgb(255 255 255 / 0.14); overflow: hidden; }
.rl-posti-bar i { display: block; width: var(--fill, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, hsl(33 86% 84%), hsl(28 78% 72%)); }
.rl-posti[data-esauriti] .rl-posti-bar { display: none; }
.rl-posti[data-esauriti] .rl-posti-t { font-weight: 400; color: rgb(255 255 255 / 0.72); }
.rl-close-launch .rl-posti { max-width: 24em; }
.rl-hero-buy[data-posti-on] .rl-primi { display: none; }

/* Roadmap = dawn, in brand colours only: night into deep blue, a horizon of sky, peach and coral behind the plan card */
.site .rl-hero { background: linear-gradient(180deg, #050f2b 0%, #071846 38%, #0a2466 70%, #133a8f 100%); }
.rl-hero::before { background:
  radial-gradient(46% 34% at 74% 92%, hsl(33 86% 82% / 0.85), hsl(28 70% 66% / 0.5) 45%, transparent 78%),
  radial-gradient(66% 46% at 72% 94%, rgb(150 220 255 / 0.3), transparent 72%),
  radial-gradient(84% 62% at 70% 96%, rgb(3 115 226 / 0.38), transparent 74%),
  radial-gradient(60% 40% at 15% 0%, rgb(27 73 194 / 0.2), transparent 70%); }
@media (max-width: 860px) {
  .rl-hero::before { background:
    radial-gradient(110% 16% at 50% 100%, hsl(33 86% 82% / 0.8), hsl(28 70% 66% / 0.45) 45%, transparent 78%),
    radial-gradient(140% 28% at 50% 100%, rgb(150 220 255 / 0.28), transparent 72%),
    radial-gradient(160% 42% at 50% 98%, rgb(3 115 226 / 0.34), transparent 75%); }
}

/* Restart's «cost of waiting» line under the three cards, and the problem told in the client's words beside the questions */
.rl-why-wait { max-width: 46em; margin: calc(20px - var(--rl-block)) 0 var(--rl-block); font-size: var(--t-18); line-height: 1.5; color: var(--c-ink-2, #4d6584); text-wrap: pretty; }
.rl-why-wait b { font-weight: 600; color: var(--c-fg, #02376c); }
.rl-why-lede { grid-column: 1; margin: 0; font-size: var(--t-16); line-height: 1.55; color: var(--c-ink-2, #4d6584); text-wrap: pretty; }
.rl-why-you > .rl-why-quotes { grid-column: 2; grid-row: 1 / span 2; }
.rl-close-ps { margin: 20px 0 28px; max-width: 34em; font-size: var(--t-16); line-height: 1.5; opacity: 0.8; }
@media (max-width: 860px) {
  .rl-why-you > .rl-why-quotes { grid-column: auto; grid-row: auto; }
  .rl-why-wait { font-size: var(--t-16); margin-top: calc(16px - var(--rl-block)); }
}

/* the three landing heroes share one frame: same columns, copy and visual both start at the top, same minimum height */
@media (min-width: 1100px) {
  .rl-hero { min-height: 0; padding-bottom: 96px; }
  .rl-hero-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; padding-top: 120px; }
}

/* Cosa trovi in Roadmap: a tour of the report, tabs on the left and one report window (app-ui.css) that follows the tab */
.rlx-tour { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; margin-bottom: 64px; }
.rlx-tour .rlx-tabs { display: grid; border-top: 1px solid var(--line-2); }
.rlx-tour .rlx-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; }
.rlx-tour .rlx-tab::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: transparent; transition: background-color 150ms ease; }
.rlx-tour .rlx-tab b { font: 500 var(--t-16)/1.3 var(--font-sans); color: var(--ink-2); transition: color 150ms ease; }
.rlx-tour .rlx-tab span { display: none; font-size: var(--t-14); line-height: 1.45; color: var(--ink-2); }
.rlx-tour .rlx-tab[aria-selected="true"]::before { background: var(--brand, #0373e2); }
.rlx-tour .rlx-tab[aria-selected="true"] b { color: var(--fg); }
.rlx-tour .rlx-tab[aria-selected="true"] span { display: block; }
.rlx-tour .rlx-tab:focus-visible { outline: 2px solid var(--brand, #0373e2); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .rlx-tab:hover b { color: var(--fg); } }
.rlx-tour .rlx-intro { display: none; }
.rlx-tour .rlx-stage { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

.rlx-tour .rlx-win { display: block; }
.rlx-tour .rlx-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--aui-line); background: var(--aui-page); }
.rlx-tour .rlx-bar-t { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.rlx-tour .rlx-bar-t b { font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; }
.rlx-tour .rlx-bar-t .aui-muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rlx-tour .rlx-bar-r { display: flex; align-items: center; gap: 10px; flex: none; }
.rlx-tour .rlx-pdf { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding-inline: 10px; border-radius: var(--aui-r-control); background: var(--aui-active, oklch(0.95 0.005 78)); color: var(--aui-ink); font-size: 14px; font-weight: 500; white-space: nowrap; }
/* the window keeps one height on every tab and scrolls inside, like the report it shows, so a tab switch never moves the page */
.rlx-tour .rlx-body { display: grid; grid-template-columns: minmax(0, 1fr) 212px; height: 640px; }
.rlx-tour .rlx-content { min-height: 0; overflow-y: auto; padding: 24px 24px 28px; scrollbar-width: thin; }
.rlx-tour .rlx-panel { display: grid; align-content: start; gap: 16px; }
.rlx-tour .rlx-panel[hidden] { display: none; }
.rlx-tour .rlx-panel:focus-visible { outline: 2px solid var(--aui-blue); outline-offset: 4px; border-radius: 4px; }
.rlx-tour .rlx-h { display: grid; gap: 4px; }
.rlx-tour .rlx-eyebrow { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aui-ink-3); }

.rlx-tour .rlx-toc { display: grid; align-content: start; gap: 10px; padding: 24px 16px 16px 14px; border-left: 1px solid var(--aui-line); min-width: 0; }
.rlx-tour .rlx-toc-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-left: 6px; font-size: 14px; font-weight: 500; }
.rlx-tour .rlx-toc-n { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aui-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rlx-tour .rlx-toc-l { display: grid; }
.rlx-tour .rlx-toc-l li { position: relative; padding: 3px 6px 3px 22px; border-radius: 6px; font-size: 12.5px; line-height: 18px; color: var(--aui-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rlx-tour .rlx-toc-l li::before { content: ""; position: absolute; left: 8px; top: 9px; width: 5px; height: 5px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--aui-line-2); background: var(--aui-surface); }
.rlx-tour .rlx-toc-l li + li::after { content: ""; position: absolute; left: 10px; top: -3px; height: 11px; border-left: 1px dashed var(--aui-line-2); }
.rlx-tour .rlx-toc-l li.is-done::before { background: rgb(96 165 250); box-shadow: none; }
.rlx-tour .rlx-toc-l li.is-on { background: var(--aui-blue-tint); color: var(--aui-blue); }
.rlx-tour .rlx-toc-l li.is-on::before { background: var(--aui-blue); box-shadow: none; }

.rlx-tour .rlx-cover { padding: 20px 24px; display: grid; gap: 16px; }
.rlx-tour .rlx-cover-k { display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--aui-line); }
.rlx-tour .rlx-cover-b { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.rlx-tour .rlx-cover-t { display: grid; gap: 10px; max-width: 34em; }
.rlx-tour .rlx-cover-h { margin-bottom: 4px; font: 400 32px/36px var(--serif); letter-spacing: -0.01em; color: var(--aui-ink); }
.rlx-tour .rlx-cover-t p { font-size: 16px; line-height: 24px; }
.rlx-tour .rlx-cover-f { padding-top: 14px; border-top: 1px solid var(--aui-line); }
.rlx-tour .rlx-badge { display: grid; justify-items: center; gap: 0; min-width: 120px; padding: 10px 16px; border-radius: var(--aui-r-card); background: linear-gradient(to bottom, var(--aui-blue-tint), var(--aui-surface)); border: 1px solid #f5c9c6; }
.rlx-tour .rlx-badge b { color: var(--aui-bad); }
.rlx-tour .rlx-sec { margin-top: 12px; }
.rlx-tour .rlx-nums { display: grid; gap: 14px; padding: 20px; }
.rlx-tour .rlx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rlx-tour .rlx-tile { display: grid; align-content: start; gap: 4px; padding: 14px 16px; background: var(--aui-surface); border: 1px solid var(--aui-line); border-radius: var(--aui-r-card); min-width: 0; }
.rlx-tour .rlx-brief { display: grid; gap: 10px; justify-items: start; padding: 16px 20px; border-radius: var(--aui-r-card); background: var(--aui-blue-tint); border: 1px solid rgb(190 222 254); }
.rlx-tour .rlx-brief-k { padding: 2px 8px; border-radius: var(--aui-r-badge); background: rgb(219 234 254); color: var(--aui-blue-ink); font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }

.rlx-tour .rlx-glyph { width: 16px; height: 14px; flex: none; }
.rlx-tour .rlx-glyph rect { fill: var(--aui-line-2); }
.rlx-tour .rlx-glyph rect.on { fill: var(--aui-blue); }
.rlx-tour .rlx-plan { display: grid; gap: 14px; }
.rlx-tour .rlx-lv { display: grid; gap: 6px; }
.rlx-tour .rlx-lv-h { display: flex; align-items: center; gap: 10px; }
.rlx-tour .rlx-acts { display: grid; gap: 8px; padding-left: 26px; }
.rlx-tour .rlx-act { display: grid; grid-template-columns: auto minmax(0, 1fr) 20px; gap: 10px; align-items: start; }
.rlx-tour .rlx-act p { color: var(--aui-ink); }
.rlx-tour .rlx-when { display: inline-flex; align-items: center; justify-self: start; height: 22px; padding: 0 8px; border-radius: var(--aui-r-badge); background: rgb(219 234 254); color: var(--aui-blue-ink); font-size: 13px; font-weight: 500; white-space: nowrap; }
.rlx-tour .rlx-act .aui-tip { width: 20px; height: 20px; margin-top: 1px; color: var(--aui-ink); }
/* the window scrolls inside, so the tooltip opens downwards and leftwards where the scroll area can always show it */
.rlx-tour .rlx-act .aui-tip > span[role="tooltip"] { top: calc(100% + 6px); bottom: auto; left: auto; right: -6px; max-width: 280px; transform: translate(0, -4px); }
.rlx-tour .rlx-act .aui-tip:is(:hover, :focus-visible, .is-open) > span[role="tooltip"] { opacity: 1; transform: translate(0, 0); }

.rlx-tour .rlx-pyrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px; align-items: start; }
.rlx-tour .rlx-pyr { padding: 18px 20px; display: grid; align-content: start; gap: 12px; }
.rlx-tour .rlx-pyr p { color: var(--aui-ink-2); }
.rlx-tour .rlx-pyr-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.rlx-tour .rlx-pyr-t { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rlx-tour .rlx-pyr-i { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: var(--aui-r-control); background: var(--aui-warn-tint, #fff1e6); box-shadow: inset 0 0 0 1px #f3b27d; }
.rlx-tour .rlx-pyr.is-ok .rlx-pyr-i { background: var(--aui-ok-tint, #e8f7ee); box-shadow: inset 0 0 0 1px #8fd3ad; }
.rlx-tour .rlx-st { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; }
.rlx-tour .rlx-st.is-warn { color: var(--aui-warn); }
.rlx-tour .rlx-st.is-ok { color: var(--aui-ok); }
.rlx-tour .rlx-st-i { width: 16px; height: 16px; flex: none; }

.rlx-tour .rlx-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
.rlx-tour .rlx-ring { width: 120px; }
.rlx-tour .aui-ring.rlx-ring .a { stroke: var(--aui-bad-fill); }
.rlx-tour .rlx-dist { display: grid; gap: 14px; min-width: 0; }
.rlx-tour .rlx-sig { display: grid; gap: 14px; }
.rlx-tour .rlx-sig > li { display: grid; gap: 6px; }
.rlx-tour .rlx-sig-h { display: flex; align-items: baseline; gap: 6px; }
.rlx-tour .rlx-sig-h::before { content: ""; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: var(--c); align-self: center; }
.rlx-tour .rlx-sig-h b { font-weight: 600; }
.rlx-tour .rlx-sig-l { display: grid; gap: 6px; padding-left: 18px; color: var(--aui-ink); }
/* more than three names flow top-to-bottom in columns, as in the report, so the reading order stays the engine’s */
.rlx-tour .rlx-sig-l:has(> li:nth-child(4)) { display: block; columns: 2; column-gap: 16px; }
.rlx-tour .rlx-sig-l:has(> li:nth-child(4)) > li { break-inside: avoid; margin-bottom: 6px; }
.rlx-tour .rlx-imps { display: grid; gap: 14px; }
.rlx-tour .rlx-imp-l { display: grid; gap: 8px; }
.rlx-tour .rlx-imp { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 14px; border: 1px solid var(--aui-line); border-radius: var(--aui-r-card); }
.rlx-tour .rlx-imp-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--aui-blue-tint); color: var(--aui-ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.rlx-tour .rlx-imp-b { display: grid; gap: 6px; min-width: 0; }
.rlx-tour .rlx-imp-t { display: grid; gap: 2px; font-weight: 600; color: var(--aui-ink); }
.rlx-tour .rlx-imp-g { display: grid; gap: 2px; padding-left: 18px; }
.rlx-tour .rlx-imp-g li { list-style: disc; }

.rlx-tour .rlx-next { display: grid; gap: 10px; justify-items: start; padding: 28px; border-radius: 16px; background: #002a58; color: #ffffff; }
.rlx-tour .rlx-next .rlx-eyebrow { color: rgb(255 255 255 / 0.85); }
.rlx-tour .rlx-next-s { font-size: 15px; line-height: 22px; }
.rlx-tour .rlx-steps { display: grid; gap: 6px; counter-reset: step; margin-bottom: 6px; }
.rlx-tour .rlx-steps li { counter-increment: step; display: flex; gap: 8px; font-size: 15px; line-height: 22px; }
.rlx-tour .rlx-steps li::before { content: counter(step) "."; min-width: 1.2em; font-variant-numeric: tabular-nums; }
.rlx-tour .rlx-next-b { pointer-events: none; }
.rlx-tour .rlx-next-f { display: grid; gap: 4px; justify-self: stretch; margin-top: 6px; padding-top: 14px; border-top: 1px solid rgb(3 115 226); font-size: 13px; line-height: 20px; }

@media (max-width: 1279px) and (min-width: 961px) {
  .rlx-tour { gap: 32px; }
  .rlx-tour .rlx-content { padding: 20px; }
  .rlx-tour .rlx-cover-b { grid-template-columns: minmax(0, 1fr); }
  .rlx-tour .rlx-badge { justify-self: start; }
  .rlx-tour .rlx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rlx-tour .rlx-pyrs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1099px) {
  .rlx-tour .rlx-body { grid-template-columns: minmax(0, 1fr); }
  .rlx-tour .rlx-toc { display: none; }
}
@media (max-width: 960px) {
  .rlx-tour { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 48px; }
  .rlx-tour .rlx-tabs { display: flex; gap: 8px; overflow-x: auto; border: 0; margin-inline: calc(var(--gutter, 20px) * -1); padding-inline: var(--gutter, 20px); scrollbar-width: none; }
  .rlx-tour .rlx-tabs::-webkit-scrollbar { display: none; }
  .rlx-tour .rlx-tab { flex: none; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; }
  .rlx-tour .rlx-tab::before { content: none; }
  .rlx-tour .rlx-tab b { font-size: var(--t-14); }
  .rlx-tour .rlx-tab[aria-selected="true"] { background: var(--fg); border-color: var(--fg); }
  .rlx-tour .rlx-tab[aria-selected="true"] b { color: var(--bg, #ffffff); }
  .rlx-tour .rlx-tab[aria-selected="true"] span { display: none; }
  .rlx-tour .rlx-intro { display: block; font-size: var(--t-14); line-height: 1.45; color: var(--ink-2); }
  .rlx-tour .rlx-intro[hidden] { display: none; }
  .rlx-tour .rlx-body { height: 600px; }
  .rlx-tour .rlx-content { padding: 16px; }
}
@media (max-width: 640px) {
  .rlx-tour .rlx-bar { padding: 10px 14px; align-items: start; }
  .rlx-tour .rlx-bar-t { display: grid; gap: 0; }
  .rlx-tour .rlx-bar-t .aui-muted { white-space: normal; }
  .rlx-tour .rlx-pdf { width: 32px; padding: 0; justify-content: center; }
  .rlx-tour .rlx-pdf-l { display: none; }
  .rlx-tour .rlx-body { height: 560px; }
  .rlx-tour .rlx-content { padding: 14px; }
  .rlx-tour .rlx-cover { padding: 16px; }
  .rlx-tour .rlx-cover-b { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rlx-tour .rlx-badge { justify-self: stretch; }
  .rlx-tour .rlx-nums { padding: 14px; }
  .rlx-tour .rlx-tiles, .rlx-tour .rlx-pyrs { grid-template-columns: minmax(0, 1fr); }
  .rlx-tour .rlx-acts { padding-left: 0; }
  .rlx-tour .rlx-act { grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 10px; }
  .rlx-tour .rlx-when { grid-column: 1; }
  .rlx-tour .rlx-act p { grid-column: 1; }
  .rlx-tour .rlx-act .aui-tip { grid-column: 2; grid-row: 1; }
  .rlx-tour .rlx-pyr { padding: 16px; }
  .rlx-tour .rlx-score { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 20px; }
  .rlx-tour .rlx-dist { justify-self: stretch; }
  .rlx-tour .rlx-sig-l:has(> li:nth-child(4)) { columns: 1; }
  .rlx-tour .rlx-cover-h { font-size: 28px; line-height: 32px; }
  .rlx-tour .rlx-imp { grid-template-columns: 28px minmax(0, 1fr); align-items: start; }
  .rlx-tour .rlx-imp .aui-tag { grid-column: 2; justify-self: start; }
  .rlx-tour .rlx-next { padding: 20px; }
  .rlx-tour .aui-pad { padding: 16px; }
}

/* scannable «perché»: figure with its unit, a short caption, the three-year figure as the card's last line */
.rl-why-costs li { grid-template-rows: auto 1fr auto; }
.rl-why-3y { display: flex; gap: 8px; align-items: baseline; margin-top: 8px; padding-top: 12px; border-top: 1px solid color-mix(in oklab, var(--sand), #02376c 12%); font-style: normal; font-size: var(--t-14); line-height: 1.4; color: var(--c-ink-2, #4d6584); }
.rl-why-3y b { font: 600 var(--t-16)/1.2 var(--sans); color: var(--c-fg, #02376c); }
.rl-why-costs li:first-child b, .rl-why-costs li:nth-child(2) b:first-child { white-space: nowrap; }
.rl-why-quotes li { font-size: var(--t-18, 18px); line-height: 1.35; }