/* Template pages (404, legal documents, Chi siamo, blog article). Tokens and blocks from home.css, system.css, blog.css and cta.css; this file only lays them out. */

/* Grounds: the night and sand registers of the home, as classes instead of section ids */
.site .pg-night {
  --bg: var(--night); --fg: #ffffff; --surface: var(--night-2); --surface-2: var(--night-3);
  --line: rgb(255 255 255 / 0.12); --line-2: rgb(255 255 255 / 0.22); --card: var(--night-2); --navy: #ffffff;
  position: relative; isolation: isolate; overflow: clip; background: var(--bg); color: var(--fg);
}
.site .pg-night::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 85% 110%, rgb(2 125 250 / 0.3), transparent 70%), radial-gradient(40% 50% at 8% -10%, rgb(98 206 254 / 0.1), transparent 70%); pointer-events: none; }
.site .pg-night :focus-visible { outline-color: #ffffff; }
.site .pg-night .btn { background: #ffffff; color: #02376c; }
@media (hover: hover) and (pointer: fine) { .site .pg-night .btn:hover { background: #e6eefb; } }
.site .pg-sand {
  --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);
}
.pg-k { font-size: var(--t-13); font-weight: 500; line-height: 1.3; color: var(--ink-2); }

/* ---------- 404 ---------- */
.pg-404 { display: flex; align-items: center; min-height: min(100svh, 880px); padding-block: calc(56px + clamp(48px, 8vh, 96px)) clamp(56px, 8vh, 96px); }
.pg-404-in { display: grid; justify-items: start; }
.pg-404 .pg-k { margin-bottom: var(--sp-mark-title); }
.pg-404 .h1 { max-width: 12em; }
.pg-404 .sub { margin-top: var(--sp-display-lede); }
.pg-ways { width: 100%; margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pg-ways a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 6px 16px; height: 100%; padding: 20px 24px; border-radius: var(--r-card); background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); color: #ffffff; text-decoration: none; transition: background-color var(--dur-2) var(--ease-out); }
.pg-ways b { font: 500 var(--t-18)/1.3 var(--sans); }
.pg-ways span:not(.arr) { grid-column: 1; font-size: var(--t-14); line-height: 1.45; color: var(--ink-2); }
.pg-ways .arr { grid-row: 1; grid-column: 2; align-self: center; }
@media (hover: hover) and (pointer: fine) { .pg-ways a:hover { background: rgb(255 255 255 / 0.1); } .pg-ways a:hover .arr { transform: translateX(3px); } }
@media (max-width: 860px) {
  .pg-404 { align-items: flex-start; min-height: 0; }
  .pg-ways { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 40px; }
  .pg-ways a { padding: 16px 20px; }
}

/* ---------- reading grid, shared by legal documents and articles ---------- */
.pg-grid { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: calc(56px + 40px) var(--sec-y); }
.pg-head { display: grid; justify-items: start; margin-bottom: 40px; }
.pg-head .pg-k { margin-bottom: var(--sp-title-lede); }
.pg-head .h1 { max-width: 15em; }
.pg-date { margin-top: var(--sp-display-lede); font-size: var(--t-14); color: var(--ink-2); }
.pg-side { min-width: 0; margin-bottom: 32px; }
.pg-prose { min-width: 0; max-width: 66ch; }
@media (min-width: 1100px) {
  .pg-grid { grid-template-columns: 224px minmax(0, 680px) minmax(0, 1fr); column-gap: 64px; padding-top: calc(56px + 72px); }
  .pg-head, .pg-cover { grid-column: 2 / -1; }
  .pg-cover { grid-column: 1 / -1; }
  .pg-grid:has(> .pg-cover) > .pg-head { grid-column: 1 / -1; }
  .pg-side { grid-column: 1; align-self: start; position: sticky; top: 88px; max-height: calc(100vh - 112px); overflow: auto; margin: 0; padding-bottom: 8px; scrollbar-width: thin; }
  .pg-prose { grid-column: 2; }
}
@media (max-width: 1099px) {
  .pg-side { display: contents; }
  .pg-toc { margin-bottom: 32px; }
  .pg-docs { order: 9; margin-top: 56px; }
}

/* Table of contents: a label and numbered links on desktop, a closed disclosure on top of the text on phones (pages.js) */
.pg-toc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font: 500 var(--t-14)/1.3 var(--sans); color: var(--fg); cursor: pointer; }
.pg-toc > summary::-webkit-details-marker { display: none; }
.pg-toc > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-top: -4px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform var(--dur-2) var(--ease-out); }
.pg-toc[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.pg-toc ol { counter-reset: toc; display: grid; padding-bottom: 12px; }
.pg-toc a { display: grid; grid-template-columns: 24px minmax(0, 1fr); padding: 6px 0; font-size: var(--t-14); line-height: 1.4; color: var(--ink-2); text-decoration: none; text-wrap: pretty; transition: color var(--dur-1) ease; }
.pg-toc a::before { counter-increment: toc; content: counter(toc); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pg-toc a[aria-current] { color: var(--fg); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .pg-toc a:hover { color: var(--fg); } }
@media (min-width: 1100px) {
  .pg-toc > summary { min-height: 0; padding-bottom: 12px; pointer-events: none; }
  .pg-toc > summary::after { content: none; }
}
@media (max-width: 1099px) {
  .pg-toc { padding: 0 16px; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line-2); }
  .pg-toc a { min-height: 40px; align-items: center; }
}
.pg-docs { padding-top: 20px; border-top: 1px solid var(--line); }
@media (min-width: 1100px) { .pg-docs { margin-top: 24px; } }
.pg-side-k { margin-bottom: 8px; font-size: var(--t-13); font-weight: 500; color: var(--ink-2); }
.pg-docs a { display: flex; align-items: center; min-height: 32px; font-size: var(--t-14); color: var(--ink-2); text-decoration: none; }
.pg-docs a[aria-current] { color: var(--fg); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .pg-docs a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 1099px) { .pg-docs a { min-height: 44px; } }

/* Prose: 66ch measure; title to text 16, text to a block 40, sections 56 apart */
.pg-prose { font-size: var(--t-16); line-height: 1.7; color: var(--fg); }
.pg-prose.is-article { font-size: var(--t-18); line-height: 1.65; }
.pg-prose > * + * { margin-top: 1em; }
.pg-prose b { font-weight: 600; }
.pg-prose a { color: var(--brand-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .pg-prose a:hover { text-decoration-color: currentColor; } }
.pg-prose h2 { margin-top: 56px; font-family: var(--serif); font-weight: var(--w-heading); font-size: var(--t-28); line-height: 1.15; --tr: var(--tr-serif); font-variation-settings: "STYL" var(--o-28); text-wrap: balance; scroll-margin-top: 96px; }
.pg-prose h3 { margin-top: 40px; font: 600 var(--t-18)/1.35 var(--sans); text-wrap: balance; scroll-margin-top: 96px; }
.pg-prose > h2 + * { margin-top: var(--sp-title-lede); }
.pg-prose > h3 + * { margin-top: 8px; }
.pg-prose :is(ul, ol) { padding-left: 1.25em; }
.pg-prose ul { list-style: disc; }
.pg-prose ol { list-style: decimal; }
.pg-prose li { padding-left: 0.25em; }
.pg-prose li + li { margin-top: 0.5em; }
.pg-prose li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pg-prose > :is(.pg-table, .pg-note, .pg-pull, .pg-sum) { margin-top: var(--sp-head-content); }
.pg-prose > :is(.pg-table, .pg-note, .pg-pull, .pg-sum) + * { margin-top: var(--sp-head-content); }
.pg-prose > .pg-sum + h2 { margin-top: 56px; }
.pg-prose > :first-child { margin-top: 0; }

/* Tables: numbers right-aligned in tabular figures, the total in the foot; a scroll region on narrow screens */
.pg-table { overflow-x: auto; overscroll-behavior-x: contain; }
.pg-table:focus-visible { outline-offset: 2px; }
.pg-table table { width: 100%; border-collapse: collapse; font-size: var(--t-16); line-height: 1.4; font-variant-numeric: tabular-nums; }
.pg-table caption { caption-side: top; padding-bottom: 12px; text-align: left; font-weight: 600; }
.pg-table :is(th, td) { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pg-table thead th { padding-top: 0; border-bottom-color: var(--line-2); font-size: var(--t-14); font-weight: 500; color: var(--ink-2); }
.pg-table tbody th { font-weight: 400; }
.pg-table .pg-num { padding-left: 16px; text-align: right; white-space: nowrap; }
.pg-table :is(th, td):last-child { padding-right: 0; }
.pg-table tfoot :is(th, td) { border-top: 1px solid var(--line-2); border-bottom: 0; font-weight: 600; }
/* A wide table takes the free column on the right too; its footnote sits under it in small type */
@media (min-width: 1100px) { .pg-prose > .pg-table.is-wide { width: min(912px, calc(100vw - 2 * var(--gutter) - 288px)); } }
.pg-table.is-wide table { font-size: var(--t-14); }
.pg-table.is-wide :is(td, th) { min-width: 96px; }
.pg-table-note { margin-top: 12px; font-size: var(--t-13); line-height: 1.5; color: var(--ink-2); }
/* Phones: every row becomes a small card, the row name on top, each value under its column name, two values per line */
@media (max-width: 640px) {
  .pg-table { overflow: visible; }
  .pg-table :is(table, thead, tbody, tfoot, tr, th, td) { display: block; }
  .pg-table table { font-size: var(--t-14); }
  .pg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pg-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .pg-table tbody tr:first-child { border-top: 1px solid var(--line-2); }
  .pg-table tfoot tr { border-top: 0; border-bottom: 0; }
  .pg-table :is(th, td) { padding: 0; border: 0; text-align: left; white-space: normal; min-width: 0; }
  .pg-table tr > th { grid-column: 1 / -1; font-size: var(--t-16); font-weight: 600; line-height: 1.35; }
  .pg-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: var(--t-13); font-weight: 400; line-height: 1.35; color: var(--ink-2); }
  .pg-table td[data-label=""]::before { content: none; }
  .pg-table .pg-num { padding: 0; text-align: left; }
  .pg-table tfoot :is(th, td) { border: 0; }
  .pg-table.is-wide :is(td, th) { min-width: 0; }
}

/* Pull quote: a sentence of the article at display size; grey rule, no quote marks, no attribution */
.pg-pull { padding-left: 24px; border-left: 2px solid var(--line-2); }
.pg-pull p { font-family: var(--serif); font-style: italic; font-weight: var(--w-quote-lg); font-size: var(--t-28); line-height: 1.3; --tr: var(--tr-italic); text-wrap: balance; }
/* Note: an exercise or an aside the text sends the reader to do, on the warm sand */
.pg-note { padding: 20px 24px; border-radius: var(--r-card); background: var(--sand); font-size: var(--t-16); line-height: 1.6; }
.pg-note-h { font-weight: 600; }
.pg-note p + p { margin-top: 8px; }
/* In sintesi: the same info-light card that opens the real Roadmap */
.pg-sum { padding: 20px 24px; border-radius: var(--r-card); background: rgb(239 246 255); box-shadow: inset 0 0 0 1px rgb(3 115 226 / 0.12); }
.pg-prose .pg-sum-h { margin: 0; font: 600 var(--t-14)/1.3 var(--sans); --tr: var(--tr-sans); font-variation-settings: normal; color: var(--brand-text); }
.pg-prose .pg-sum ul { margin-top: 12px; padding: 0; list-style: none; display: grid; gap: 10px; }
.pg-prose .pg-sum li { position: relative; margin: 0; padding-left: 18px; font-size: var(--t-16); line-height: 1.55; }
.pg-sum li::before { content: ""; position: absolute; left: 2px; top: 0.66em; width: 5px; height: 5px; border-radius: var(--r-round); background: currentColor; }
@media (max-width: 860px) {
  .pg-prose h2 { margin-top: 48px; }
  .pg-sum, .pg-note { padding: 16px 20px; }
  .pg-pull { padding-left: 16px; }
}

/* ---------- article head, cover, closing ---------- */
.pg-crumb { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 20px; font-size: var(--t-14); color: var(--ink-2); }
.pg-crumb a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.pg-dek { margin-top: var(--sp-display-lede); max-width: 36em; font-size: var(--t-18); line-height: 1.5; color: var(--ink-2); }
.pg-by { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 24px; font-size: var(--t-14); }
.pg-by img { width: 24px; height: 24px; }
.pg-by span { margin-left: -2px; font-weight: 500; }
.pg-by time { color: var(--ink-2); }
.pg-cover { margin-bottom: 56px; }
.pg-cover .bl-cover { height: 280px; aspect-ratio: auto; border-radius: var(--r-card); }
.pg-cover .bl-obj { width: 40cqi; height: 32.5cqi; }
@media (max-width: 760px) { .pg-cover { margin-bottom: 32px; } .pg-cover .bl-cover { height: auto; aspect-ratio: 2 / 1; } .pg-cover .bl-obj { width: 58cqi; height: 47cqi; } }
.site .pg-cta { padding-block: 0 var(--sec-y); background: var(--bg); }
/* the consultant as the Roadmap's «Rivista da» row: round avatar, name and role, left-aligned above the button */
.pg-cta-side { display: grid; justify-items: start; align-self: end; gap: 24px; }
.pg-cta-by { display: flex; align-items: center; gap: 12px; }
.pg-cta-by img { width: 56px; height: 56px; border-radius: var(--r-round); object-fit: cover; flex: none; }
.pg-cta-by b { display: block; font-size: var(--t-16); font-weight: 500; color: #ffffff; }
.pg-cta-by span { display: block; font-size: var(--t-13); color: rgb(255 255 255 / 0.72); }
@media (max-width: 1023px) { .pg-cta-side { align-self: start; } }
@media (max-width: 560px) { .pg-cta-side { justify-items: stretch; } }
.pg-related { padding-top: 0; }
.pg-related-head { display: flex; flex-wrap: wrap; align-items: last baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: var(--sp-head-content); }
.site .pg-related .h2 { font-size: var(--t-28); font-variation-settings: "STYL" var(--o-28); }
.pg-related .bl-more { margin-bottom: -10px; }

/* ---------- Chi siamo ---------- */
.pg-hero { padding-block: calc(56px + clamp(56px, 9vh, 112px)) clamp(48px, 6vw, 72px); }
/* phones: 40 px under the nav, as on the other heroes; 9vh of a tall phone left an empty band above the H1 */
@media (max-width: 860px) { .pg-hero { padding-block: var(--m-hero-top) var(--m-sec); } }
.pg-hero-in { display: grid; justify-items: start; }
.pg-hero .h1 { max-width: 12em; }
.pg-hero .sub { margin-top: var(--sp-display-lede); max-width: 34em; }
.pg-proof { width: 100%; margin-top: clamp(48px, 7vw, 88px); padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 48px; }
.pg-proof .hero-proof { margin: 0; }
.pg-proof .hp-tp > span { color: var(--ink-2); }
.pg-proof .hero-press { order: 0; padding: 0; }
.pg-proof .hero-press :is(.hp-k) { color: var(--ink-2); }
.pg-proof .hero-press .hp-logos li { color: #ffffff; }
@media (max-width: 860px) {
  .pg-proof { display: grid; justify-content: start; gap: 24px; }
  .pg-proof .hero-proof { order: 0; padding: 0; border: 0; }
}
.pg-nw { white-space: nowrap; }

.pg-people-g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(100% / 12); align-items: start; }
/* Luca's portrait in a landscape crop, face high, name and role under it like every person on the site; both columns start together and end within 40 px */
.pg-photo { max-width: 420px; }
.pg-photo img { display: block; width: 100%; height: auto; aspect-ratio: 7 / 5; object-fit: cover; object-position: 50% 8%; border-radius: var(--r-card); background: var(--surface-2); }
.pg-photo figcaption { display: grid; gap: 2px; margin-top: 16px; }
.pg-photo figcaption b { font: 500 var(--t-18)/1.3 var(--sans); }
.pg-photo figcaption span { font-size: var(--t-14); color: var(--ink-2); }
.pg-lead-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; }
.pg-team { border-top: 1px solid var(--line-2); }
.pg-team li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.pg-team img { grid-row: span 2; width: 56px; height: 56px; border-radius: var(--r-round); object-fit: cover; background: var(--surface-2); }
.pg-team :is(.tm-name, .tm-role) { grid-column: 2; }
@media (max-width: 860px) {
  .pg-people-g { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .pg-photo { max-width: none; }
  .pg-photo img { aspect-ratio: 4 / 3; object-position: 50% 8%; }
  .pg-team li { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; padding: 12px 0; }
  .pg-team img { width: 48px; height: 48px; }
}

.site .pg-revs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.site .pg-revs .rev { padding: 24px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--card-shadow); }
.pg-revs blockquote { margin-top: 12px; }
.pg-more { margin-top: var(--sp-content-cta); }
@media (max-width: 860px) { .site .pg-revs { grid-template-columns: minmax(0, 1fr); gap: var(--m-card-gap); } .site .pg-revs .rev { padding: var(--m-card-pad); } }

.pg-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(100% / 12); align-items: start; }
.pg-split .sec-head { margin-bottom: 0; }
.pg-facts { border-top: 1px solid var(--line-2); }
.pg-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--t-16); }
.pg-facts dt { font-weight: 500; }
.pg-facts dd { margin: 0; color: var(--ink-2); }
.pg-facts a { color: inherit; text-underline-offset: 3px; }
.pg-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 24px; }
@media (max-width: 860px) { .pg-split { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-head-content); } }
@media (max-width: 480px) { .pg-facts > div { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) { .pg-ways a, .pg-toc a, .pg-toc > summary::after { transition: none; } }

/* ---------- blog index ---------- */
.pg-blog-index { padding-top: calc(56px + clamp(48px, 7vw, 88px)); }
.pg-blog-head { display: grid; justify-items: start; margin-bottom: var(--sp-head-content); }
.pg-blog-head .sub { margin-top: var(--sp-display-lede); }
.pg-blog-links { margin-top: 8px; }
.site .pg-blog-grid { row-gap: 48px; }
.pg-blog-grid .bl-cat { color: var(--ink-2); }
@media (max-width: 1000px) { .site .pg-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the index is a list to read down, never the home's swipe row */
@media (max-width: 760px) {
  .site .pg-blog-grid { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; gap: 32px; overflow: visible; scroll-snap-type: none; margin-inline: 0; padding: 0; }
}

/* Press on Chi siamo, one by one with the year */
.hero-press .hp-press.pg-press { display: grid; gap: 12px; }
.pg-press-list { display: flex; flex-wrap: wrap; gap: 12px 40px; }
.pg-press-list li { display: flex; align-items: center; gap: 12px; font-size: var(--t-14); color: rgb(255 255 255 / 0.72); }
.pg-lg { flex: none; display: block; width: var(--w); height: var(--h); background: #ffffff; opacity: 0.82; -webkit-mask: var(--src) no-repeat center / contain; mask: var(--src) no-repeat center / contain; }
/* phones: the logos wrap in rows, as on the home, instead of a column of seven */
@media (max-width: 860px) { .pg-press-list { gap: 14px 28px; } .pg-press-list li { font-size: var(--t-13); } .pg-lg { width: calc(var(--w) * 0.85); height: calc(var(--h) * 0.85); } }
/* Review mode (?rev=1): reviewers not yet verified in the rotation */
[data-verifica="rotazione"]:not([hidden]) { outline: 2px dashed #d97706; outline-offset: 4px; }
.pg-team li > mark.px-vot { grid-column: 2 / -1; justify-self: start; }