/* Sito Plannix 2027. Layout: one 12-column grid on a 1200px column; every block is a module the panel swaps, every measure a variable the panel tunes. Single brand look by choice, with dark "chapters" set per ritmo. */
/* System tokens, shared with the Roadmap UI, the widgets and roadmap.html: 8 sizes, 2 families, 4 radii, 2 button heights, 3 durations. */
:root {
  --font-serif: "Timeless Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Timeless Grotesk", "Timeless Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-16: 16px; --t-18: 18px;
  --t-28: 28px; --t-36: 36px; --t-56: 56px;
  --r-ctl: 6px; --r-btn: 8px; --r-card: 12px; --r-round: 999px;
  --btn-h-site: 40px; --btn-h-ui: 32px;
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 320ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ink-small: #4d6584;
}
@media (max-width: 860px) { :root { --t-28: 24px; --t-36: 28px; --t-56: 36px; --btn-h-site: 44px; } }

@font-face { font-family: "Timeless Serif"; src: url("fonts/TimelessSerifVF.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }
@font-face { font-family: "Timeless Serif"; src: url("fonts/TimelessSerifItalicVF.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Timeless Grotesk"; src: url("fonts/TimelessSans-GroteskRegular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Timeless Grotesk"; src: url("fonts/TimelessSans-GroteskMedium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Timeless Grotesk"; src: url("fonts/TimelessSans-GroteskSemibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --sky: #62cefe;
  --blue: #027dfa;
  --brand: #0373e2;
  --brand-press: #025eba;
  --cobalt: #1b49c2;
  --cobalt-deep: #13399c;
  --navy: #02376c;
  --white: #ffffff;
  --serif: "Timeless Serif", Georgia, "Times New Roman", serif;
  --sans: "Timeless Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4.5vw, 64px);
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.9l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3C/svg%3E");
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 12'%3E%3Cpath d='M6 6H70M6 1V11M70 1V11M38 3V9' stroke='%23000' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
  color-scheme: light;
}

/* Panel knobs (home.js writes them; these are the defaults) */
.site {
  --h1: 56;
  --t-lh: 1.05;
  --t-tr: 0.02;
  --ts: 1;
  --dens: 1;
  --r-px: 12;
  --night-l: 15;
  --warm-h: 38;
  --warm-k: 1;
  --k2: 0.78;
  --btn-r: 8;
  --btn-px: 16;
  --btn-h: 40;
  --col: 1200px;
  --wk: 0;
  --r: calc(var(--r-px) * 1px);
  --night: hsl(224 82% calc(var(--night-l) * 1%));
  --night-2: hsl(224 64% calc((var(--night-l) + 5) * 1%));
  --night-3: hsl(224 54% calc((var(--night-l) + 11) * 1%));
  --warm: hsl(var(--warm-h) 36% 95%);
  --sand-w: hsl(var(--warm-h) 35% 90%);
  --warm-2: hsl(var(--warm-h) 28% 89%);
  --warm-line: hsl(var(--warm-h) 20% 85%);
  --warm-line-2: hsl(var(--warm-h) 16% 78%);
  /* one text scale: 13 / 14 / 16 / 18, display 20 / 28 / 36 / 48 / 56 */
  --fs-lead: calc(18px * var(--ts));
  --fs-body: calc(16px * var(--ts));
  --fs-ui: calc(16px * var(--ts));
  --fs-sm: calc(14px * var(--ts));
  --fs-xs: calc(13px * var(--ts));
  --fs-quote: calc(18px * var(--ts));
  --sec-y: calc(clamp(52px, 6vw, 88px) * var(--dens));
  /* light tone */
  --bg: #ffffff;
  --fg: #02376c;
  --surface: color-mix(in oklab, #f4f7fb, var(--warm) calc(var(--wk) * 100%));
  --surface-2: color-mix(in oklab, #e9eff7, var(--warm-2) calc(var(--wk) * 100%));
  --line: color-mix(in oklab, #e1e7ef, var(--warm-line) calc(var(--wk) * 100%));
  --line-2: color-mix(in oklab, #cdd7e3, var(--warm-line-2) calc(var(--wk) * 100%));
  --mist: color-mix(in oklab, #eef3fb, var(--warm) calc(var(--wk) * 100%));
  --construct: color-mix(in oklab, #9db2cc, #b8ab97 calc(var(--wk) * 100%));
  --sand: color-mix(in oklab, #e8eef6, var(--sand-w) calc(var(--wk) * 100%));
  --card: var(--bg);
  --card-shadow: inset 0 0 0 1px var(--line);
  --accent-line: var(--blue);
}
.site[data-pal="caldi"] { --wk: var(--warm-k); }
/* Derived ink is re-declared on every tone container, so a dark chapter recomputes it from its own --fg/--bg. */
.site, .site .hero, .site main > section, .site main > [data-sezione] > section, .site .cq {
  --ink-2: color-mix(in oklab, var(--fg) calc(var(--k2) * 100%), var(--bg));
  --ink-3: color-mix(in oklab, var(--fg) calc(var(--k2) * 96%), var(--bg));
}

/* Ritmo: three registers (white, sand, night) and which sections take them; the change of register is the separator, no hairlines.
   capitoli: white 1-3, sand problem, NIGHT solution, white how, photo band + cases, white pricing, sand reviews, white guides and FAQ, NIGHT closing (landing-structure §3). */
.site[data-ritmo="capitoli"] :is(#costi, #recensioni),
.site[data-ritmo="foto"] :is(#costi, #recensioni),
.site[data-ritmo="contrasto"] #nessuna {
  --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);
}
.site #piramide,
.site[data-ritmo="capitoli"] :is(#piramide, #chiusura),
.site[data-ritmo="foto"] :is(#piramide, #chiusura),
.site[data-ritmo="prodotto"] main > section,
.site[data-ritmo="contrasto"] :is(#piramide, #prezzi, #chiusura) {
  --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);
  --card: var(--night-2);
  --card-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  --accent-line: var(--sky);
  --navy: #ffffff;
  background: var(--bg);
  color: var(--fg);
}
.site[data-ritmo="prodotto"] main > :is(#come-funziona, #recensioni, #faq) { --bg: var(--night-2); --card: var(--night-3); }
.site[data-ritmo="contrasto"] { --night: hsl(225 30% calc(var(--night-l) * 0.28%)); --night-2: hsl(225 22% calc(var(--night-l) * 0.6%)); --night-3: hsl(225 18% calc(var(--night-l) * 0.9%)); --fg: #050912; --surface: #ffffff; --line: rgba(5, 9, 18, 0.14); --line-2: rgba(5, 9, 18, 0.32); --k2: 0.82; }
.site[data-ritmo="contrasto"] main > section:not(#piramide, #prezzi, #chiusura) { background: #ffffff; }
.site:not([data-ritmo="chiaro"]) main > .sec.alt { background: var(--bg); }
/* Immersive chapters are taller; service sections stay compact */
#piramide { padding-block: calc(var(--sec-y) * 1.3); }
.site:not([data-ritmo="chiaro"]) #chiusura { padding-block: calc(var(--sec-y) * 1.6); }
@media (max-width: 860px) { #piramide, .site:not([data-ritmo="chiaro"]) #chiusura { padding-block: var(--m-sec-lg); } }
/* Cases: variant A by default, the night variant C with the photo in "Foto calde" */
.site #casi-c, .site .life-band { display: none; }
.site[data-ritmo="prodotto"] .life-band, .site[data-ritmo="chiaro"] .life-band { display: none; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #ffffff; color: #02376c; font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, figure, blockquote { margin: 0; }
img { max-width: 100%; display: block; }
button { font: inherit; }
.site { background: var(--bg); color: var(--fg); font-size: var(--fs-body); overflow-x: clip; }
.wrap { width: 100%; max-width: calc(var(--col) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.tnum { font-variant-numeric: tabular-nums; }
.ph { color: var(--ink-3); border-bottom: 1px dotted currentColor; font-style: normal; white-space: nowrap; }
/* Kept for the blocks of the other agents (case, pricing, CTA): same sober placeholder, light button */
.tbd { color: var(--ink-3); border-bottom: 1px dotted currentColor; font-style: normal; white-space: nowrap; }
.btn-light { background: #ffffff; color: #02376c; }
@media (hover: hover) and (pointer: fine) { .btn-light:hover { background: #e6eefb; } }

/* Type */
.h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, calc(var(--h1) * 0.0694vw), calc(var(--h1) * 1px)); line-height: var(--t-lh); letter-spacing: calc(var(--t-tr) * -1em); text-wrap: balance; }
.h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, calc(var(--h1) * 0.0444vw), calc(var(--h1) * 0.64px)); line-height: calc(var(--t-lh) + 0.07); letter-spacing: calc(var(--t-tr) * -0.9em); text-wrap: balance; }
.lead { font-size: var(--fs-body); line-height: 1.5; color: var(--ink-2); max-width: 32em; text-wrap: pretty; }
.sec { position: relative; padding-block: var(--sec-y); background: var(--bg); }
.sec-head { position: relative; display: grid; gap: 8px; margin-bottom: clamp(24px, 3vw, 40px); max-width: 46rem; }
.sec.alt { background: var(--surface); }
.site[data-ritmo="chiaro"] main > section + section { border-top: 1px solid var(--line); }
.site[data-ritmo="chiaro"] main > .sec.alt + section, .site[data-ritmo="chiaro"] main > section + .sec.alt { border-top: 0; }

/* The signature: a single construction line with the blue point, opening only the night and photo chapters */
.sec-head::before { content: none; }
.site[data-ill="tratto"]:is([data-ritmo="capitoli"], [data-ritmo="foto"], [data-ritmo="contrasto"]) :is(#piramide, #chiusura) .sec-head::before,
.site[data-ill="tratto"][data-ritmo="prodotto"] main > section .sec-head::before {
  content: ""; display: block; width: 72px; height: 12px; margin-bottom: 14px; background: var(--construct); -webkit-mask: var(--mark) 0 0 / 72px 12px no-repeat; mask: var(--mark) 0 0 / 72px 12px no-repeat;
  box-shadow: none;
}
.site[data-ill="tratto"] main .sec-head::after { content: none; }

/* Buttons and links: compact, shape from the panel */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: calc(var(--btn-h) * 1px); padding: 0 calc(var(--btn-px) * 1px); border-radius: calc(var(--btn-r) * 1px); border: 0; background: var(--brand); color: var(--white); font: 500 var(--fs-sm)/1 var(--sans); font-size: calc(var(--fs-sm) + 1px); letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 120ms ease, transform 120ms var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn-sm { height: calc(var(--btn-h) * 0.85px); padding: 0 calc(var(--btn-px) * 0.85px); font-size: var(--fs-sm); }
.link { display: inline-flex; align-items: baseline; gap: 6px; font: 500 var(--fs-sm)/1.4 var(--sans); color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color 120ms ease; }
.arr { display: inline-block; text-decoration: none; transition: transform 180ms var(--ease-out); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--brand-press); }
  .link:hover { text-decoration-color: currentColor; }
  .link:hover .arr { transform: translateX(3px); }
}

/* Header */
/* Sticky nav: transparent over the hero, then a solid bar in the theme of the section under it (home.js sets data-theme and data-solid) */
html { scroll-padding-top: 64px; }
.gnav { --nav-h: 56px; position: fixed; z-index: 40; top: 0; left: 0; right: 0; padding-top: env(safe-area-inset-top, 0px); color: #ffffff; background: transparent; box-shadow: 0 1px 0 transparent; transition: background-color 180ms ease, box-shadow 180ms ease, color 180ms ease; }
.gnav[data-theme="light"] { color: #02376c; }
.gnav[data-solid][data-theme="dark"] { background: color-mix(in srgb, var(--night) 96%, transparent); box-shadow: 0 1px 0 rgb(255 255 255 / 0.1); }
.gnav[data-solid][data-theme="light"] { background: color-mix(in srgb, #ffffff 97%, transparent); box-shadow: 0 1px 0 rgb(2 55 108 / 0.1); }
/* Glass where backdrop-filter exists; the opaque 96-97% backgrounds above are the fallback */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .gnav[data-solid] { -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
  .gnav[data-solid][data-theme="dark"] { background: color-mix(in srgb, var(--night) 72%, transparent); }
  .gnav[data-solid][data-theme="light"] { background: color-mix(in srgb, #ffffff 74%, transparent); }
}
.gnav .logo-on-light { display: none; }
.gnav[data-theme="light"] .logo-on-light { display: block; }
.gnav[data-theme="light"] .logo-on-dark { display: none; }
.gnav .site-nav a { color: color-mix(in srgb, currentColor 72%, transparent); }
.gnav[data-theme="dark"] .btn { background: rgb(255 255 255 / 0.1); color: #ffffff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }
@media (hover: hover) and (pointer: fine) { .gnav .site-nav a:hover { color: currentColor; } .gnav[data-theme="dark"] .btn:hover { background: rgb(255 255 255 / 0.16); } }
.gnav[data-theme="dark"] :focus-visible { outline-color: #ffffff; }
.hero-in { padding-top: 56px; }
.vita-sticky { padding-top: 56px; }
.site-head { position: relative; height: 56px; display: flex; align-items: center; gap: 32px; }
.brand { flex: none; line-height: 0; }
.brand img { height: 24px; width: auto; }
.site-nav { display: flex; gap: 24px; font-size: var(--fs-sm); font-weight: 500; line-height: 20px; }
.site-nav a { text-decoration: none; color: var(--ink-2); transition: color 120ms ease; }
.head-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.head-login { font-size: var(--fs-sm); font-weight: 500; text-decoration: none; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; width: 36px; height: 36px; display: grid; place-content: center; gap: 5px; cursor: pointer; margin-right: -8px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; }
.menu-panel { position: absolute; right: -8px; top: 44px; width: min(280px, calc(100vw - 32px)); padding: 8px; border-radius: 12px; background: #ffffff; color: #02376c; box-shadow: 0 0 0 1px #e1e7ef, 0 16px 40px -12px rgba(1, 26, 83, 0.28); display: grid; }
.menu-panel a { padding: 10px 12px; border-radius: 8px; text-decoration: none; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .site-nav a:hover { color: var(--fg); } .menu-panel a:hover { background: #f4f7fb; } }

/* Hero: at least one viewport, never ending inside it. One left column (H1, subtitle, CTA on the same line x), then the product on the full 12 columns, cut by the fold. Grid from review-emil-ic §2. */
.hero { --bg: var(--night); --fg: #ffffff; position: relative; isolation: isolate; overflow: clip; display: flex; flex-direction: column; min-height: clamp(720px, 100svh, 1040px); background: var(--bg); color: var(--fg); }
.hero.light { --bg: var(--surface); --fg: #02376c; }
.hero-in { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; }
.hero-copy { display: grid; justify-items: start; max-width: 690px; padding-block: clamp(48px, 9svh, 96px) 56px; flex: none; }
.hero .h1 { max-width: 12em; }
.hero-aside { display: grid; justify-items: start; margin-top: 20px; }
.sub { font-size: var(--fs-lead); line-height: 1.45; color: var(--ink-2); max-width: 30em; text-wrap: pretty; }
.ctas { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.hero:not(.light) .hero-copy .btn { background: #ffffff; color: #02376c; }
/* One primary per screen: on night the nav button steps back to secondary */
@media (hover: hover) and (pointer: fine) { .hero:not(.light) .hero-copy .btn:hover { background: #e6eefb; } }
.hero:not(.light) :focus-visible { outline-color: #ffffff; }
.hero-ui { position: relative; padding-bottom: 72px; }
.hero-ui plannix-roadmap { position: relative; z-index: 2; transform-origin: 50% 0; animation: ui-in 320ms cubic-bezier(0.23, 1, 0.32, 1) 120ms backwards; }
@keyframes ui-in { from { transform: translateY(16px) scale(0.985); } }
.field { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.h-diagonale .field { -webkit-mask-image: linear-gradient(100deg, transparent 0 46%, #000 62%); mask-image: linear-gradient(100deg, transparent 0 46%, #000 62%); }
.h-pieno .field { background: linear-gradient(90deg, #011a53 0%, #13399c 34%, #1b49c2 50%, #027dfa 66%, #62cefe 84%, #ddf2ff 100%); }
.f-col { position: absolute; z-index: 1; top: 64px; bottom: 0; right: max(var(--gutter), calc((100% - var(--col)) / 2 + 96px)); width: var(--colw, 180px); pointer-events: none; }
.h-sobria::before { content: ""; position: absolute; z-index: 0; left: 50%; bottom: -160px; width: min(1200px, 140vw); height: 640px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(3, 115, 226, 0.32), rgba(3, 115, 226, 0)); pointer-events: none; }
.h-sobria .hero-copy { justify-items: center; text-align: center; max-width: none; }
.h-sobria .hero-aside { justify-items: center; }
.h-sobria .sub { text-wrap: balance; }
.h-sobria .ctas { justify-content: center; }
.photo { position: absolute; inset: 0; z-index: 0; }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; }
.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1, 20, 60, 0.88) 0%, rgba(1, 20, 60, 0.74) 36%, rgba(1, 20, 60, 0.5) 100%); }
.lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.lines .g { stroke: rgba(226, 235, 250, 0.42); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.lines .d { stroke-dasharray: 2 5; }
.lines .dd { stroke-dasharray: 14 3 2 3; }
.lines .dot { fill: var(--sky); }

/* Dalla vita al consiglio: table in plan view at the right edge; one 160svh track moves the camera onto the notebook */
.h-vita { min-height: 0; }
.vita-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; align-items: start; padding-block: clamp(24px, 3vw, 48px) clamp(48px, 6vw, 88px); }
.h-vita .hero-copy { grid-column: 1 / span 5; padding: 0; max-width: 486px; }
.vita-proof { margin-top: 28px; font-size: var(--fs-xs); color: var(--ink-3); }
.vita-stage { grid-column: 1 / -1; position: relative; width: 100%; }
.vita-scene { position: relative; overflow: hidden; aspect-ratio: 600 / 680; background: #f8f6f1; }
.vita-svg, .vita-photo { display: block; width: 100%; height: 100%; }
.vita-svg * { vector-effect: non-scaling-stroke; }
.vita-photo { object-fit: cover; object-position: 58% 55%; filter: sepia(0.14) saturate(0.92) brightness(1.03); }
.vita-note { font-size: 12.5px; color: var(--ink-3); }
.vita-ui plannix-roadmap .prm-row:nth-child(n + 4) { display: none; }
.h-vita:not(.vita-live) .vita-stage { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; align-items: start; }
.h-vita:not(.vita-live) .vita-note { grid-column: 1 / -1; }
@media (max-width: 767px) { .h-vita:not(.vita-live) .vita-scene, .h-vita:not(.vita-live) .vita-note { display: none; } .h-vita:not(.vita-live) .vita-stage { grid-template-columns: minmax(0, 1fr); } }
.vita-live .vita-track { height: 160svh; }
.vita-live .vita-sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.vita-live .vita-grid { flex: 1; width: 100%; align-items: center; padding-block: 0; }
.vita-live .h-vita .hero-copy, .vita-live .hero-copy { align-self: start; margin-top: calc(0.3 * (100svh - 64px) - 40px); }
.vita-live .vita-stage { position: absolute; top: 56px; left: calc(50% + 12px); height: calc(100svh - 56px); aspect-ratio: 600 / 680; width: auto; overflow: hidden; }
.vita-live .vita-scene { position: absolute; inset: 0; transform-origin: 0 0; transition: opacity 320ms cubic-bezier(0.23, 1, 0.32, 1); }
.vita-live .vita-ui { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1); }
.vita-live.vita-real .vita-ui { opacity: 1; }
.vita-live.vita-real .vita-sketch { opacity: 0; }
.vita-sketch { transition: opacity 180ms ease; }
.vita-live.vita-scrolling :is(.vita-scene, .vita-ui) { will-change: transform; }
.vita-live .vita-note { position: absolute; left: 12px; bottom: 10px; z-index: 3; padding: 4px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.86); }
.vita-open .vita-scene, .vita-open .vita-note { opacity: 0; }
.vita-open .vita-stage { overflow: visible; }

/* Trust strip */
.trust { padding-block: 22px; }
.trust-in { display: flex; align-items: center; gap: 24px; }
.trust-k { flex: none; font-size: var(--fs-xs); color: var(--ink-3); }
.press { flex: 1; min-width: 0; display: flex; align-items: center; gap: 40px; }
.press i { display: block; height: 20px; background: var(--ink-3); -webkit-mask: url("img/stampa.svg") no-repeat; mask: url("img/stampa.svg") no-repeat; }
/* One file, cut after Corriere (x 1820 of 2927) so it can wrap on phones. */
.press .pa { aspect-ratio: 1820 / 73; -webkit-mask-size: 160.82% 100%; mask-size: 160.82% 100%; -webkit-mask-position: 0 0; mask-position: 0 0; }
.press .pb { aspect-ratio: 1107 / 73; -webkit-mask-size: 264.4% 100%; mask-size: 264.4% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; }

/* Chi ti consiglia */
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 28px clamp(28px, 5vw, 80px); align-items: start; }
.split > .sec-head { margin-bottom: 0; }
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.team figure { aspect-ratio: 4 / 5; border-radius: calc(var(--r) + 2px); overflow: hidden; background: var(--surface-2); }
.team img { filter: saturate(0.95) sepia(0.06); }
.team img { width: 100%; height: 100%; object-fit: cover; }
.t-name { margin-top: 12px; font-weight: 500; font-size: var(--fs-body); }
.t-role { font-size: var(--fs-sm); color: var(--ink-2); }
.t-albo { margin-top: 4px; font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.team-foot { margin-top: 24px; display: flex; gap: 24px; flex-wrap: wrap; }
.reg { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.reg-rows { border-top: 1px solid var(--line-2); }
.reg-rows li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.reg-rows .nm { font-family: var(--serif); font-size: calc(20px * var(--ts)); letter-spacing: -0.01em; }
.reg-rows .rl { font-size: var(--fs-sm); color: var(--ink-2); }
.reg-rows .rl small { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.named { display: grid; gap: 14px; }
.named figure { padding: 18px 20px; border-radius: var(--r); background: var(--surface); }
.src { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); color: var(--ink-3); }
.src b { font-weight: 500; color: var(--fg); }

/* Problem: the cost of today (slot W1), solution: the order (slot W2) */
.split-2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 96px); align-items: center; }
.split-2 > .sec-head { margin-bottom: 0; }
.split-2 > .sec-head p:last-child:not(.lead) { margin-top: 12px; }
.w-slot { min-width: 0; }
.cost { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; border-radius: var(--r); overflow: hidden; background: var(--line); box-shadow: var(--card-shadow); }
.cost > div { display: grid; gap: 4px; padding: 18px 20px; background: var(--card); }
.cost dt { font-size: var(--fs-xs); color: var(--ink-3); }
.cost dd { margin: 0; font-size: var(--fs-lead); font-weight: 500; color: var(--fg); }
.cost .cost-out dd { font-family: var(--serif); font-weight: 400; font-size: calc(36px * var(--ts)); line-height: 1.05; letter-spacing: -0.02em; }
.cost .cost-ref { grid-column: 1 / -1; }
.cost .cost-ref dd { font-size: var(--fs-body); color: var(--ink-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* On night the drawing turns to light strokes (CSS wins over the SVG presentation attributes) */

/* Cosa ricevi, e quando */
.how { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(32px, 5vw, 72px); align-items: start; }
/* One structure: steps as a plain list on the left, the case figures in one card on the right; no rules between items */
.how-fig { display: grid; gap: 18px; padding: 22px 24px; border-radius: var(--r); background: var(--card); box-shadow: var(--card-shadow); }
.how-fig-k { font-size: var(--fs-sm); color: var(--ink-2); }
.how-fig > div { display: grid; gap: 2px; }
.how-fig b { font-family: var(--serif); font-weight: 400; font-size: calc(28px * var(--ts)); line-height: 1.1; letter-spacing: -0.015em; color: var(--fg); }
.how-fig span { font-size: var(--fs-sm); color: var(--ink-2); }

/* Cases (TEAM/out/case-blocks) on the site's tokens; the life band introduces them */
.life-band { height: clamp(220px, 28vw, 380px); overflow: hidden; }
.life-band img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 55%; filter: sepia(0.08) saturate(0.95); }
.cs-open { padding-top: 4px; }
.site .cs .cs-who b, .site .cs .cs-t, .site .cs .cs-amt, .site .cs .cs-today dd { color: var(--fg); }

/* Guide dal blog */
.guides-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(24px, 3vw, 40px); }
.guides-head .sec-head { margin-bottom: 0; }
.guides-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.guide { display: grid; align-content: start; gap: 10px; height: 100%; padding: 20px; border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); text-decoration: none; transition: box-shadow 120ms ease; }
.g-cat { font-size: var(--fs-xs); color: var(--ink-3); }
.g-t { font-family: var(--serif); font-size: calc(20px * var(--ts)); line-height: 1.25; letter-spacing: -0.01em; color: var(--fg); text-wrap: pretty; }
.g-by { margin-top: auto; padding-top: 8px; font-size: var(--fs-xs); color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { .guide:hover { box-shadow: inset 0 0 0 1px var(--fg); } }

/* Chi ti consiglia: the facts line */
.facts-line { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 20px; font-size: var(--fs-sm); color: var(--ink-2); }
.facts-line li { display: inline-flex; align-items: center; gap: 8px; }
.facts-line li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--accent-line); }
.t-albo a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: 3px; }

/* Come funziona */
.steps { display: grid; gap: 24px; }
.step { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.step > :not(.step-ico) { grid-column: 2; }
.step-ico { grid-row: span 2; }
.step-ico { height: 28px; color: var(--fg); }
.step-ico svg { width: 26px; height: 26px; }
.step b { font-weight: 500; font-size: var(--fs-body); }
.step p { margin-top: 4px; font-size: var(--fs-sm); color: var(--ink-2); max-width: 52ch; }
.step-cta { margin-top: 28px; }
.site[data-ill="nessuna"] .step-ico { display: none; }
.site[data-ill="nessuna"] .step { grid-template-columns: minmax(0, 1fr); }
.site[data-ill="nessuna"] .step > * { grid-column: 1; }

/* Prezzi (slot pricing) */
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tier { display: grid; align-content: start; gap: 4px; padding: 20px; border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); }
.tier .nm { font-weight: 600; font-size: var(--fs-body); }
.tier .ds { font-size: var(--fs-sm); color: var(--ink-2); min-height: 2.9em; }
.tier .pr { margin-top: 6px; font-size: calc(20px * var(--ts)); font-weight: 500; font-variant-numeric: tabular-nums; }
.tier .pr small { font-size: var(--fs-sm); font-weight: 400; color: var(--ink-3); }
.tier .link { margin-top: 8px; font-size: var(--fs-sm); }
.tier.on { box-shadow: inset 0 0 0 1.5px var(--accent-line); }
.tier.on .nm { color: var(--accent-line); }
.tiers-foot { margin-top: 22px; }

/* Recensioni */
.revs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rev { display: grid; align-content: space-between; gap: 16px; padding: 20px; border-radius: var(--r); background: var(--card); box-shadow: var(--card-shadow); }
.rev blockquote { font-family: var(--serif); font-style: italic; font-size: var(--fs-quote); line-height: 1.4; color: var(--fg); }
.stars { display: inline-flex; gap: 2px; vertical-align: -2px; }
.stars i { width: 14px; height: 14px; background: #00b67a; -webkit-mask: var(--star) center / 10px no-repeat; mask: var(--star) center / 10px no-repeat; }
.stars i.off { background: #dcdce6; }
.rev-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }
.rev-head .sec-head { margin-bottom: 0; }
.tp-score { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-2); text-decoration: none; font-size: var(--fs-sm); }
.tp-score b { font-size: calc(18px * var(--ts)); font-weight: 600; font-variant-numeric: tabular-nums; }
.tp-word { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--fg); }
.tp-word i { width: 14px; height: 14px; background: #00b67a; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.qa { border-top: 1px solid var(--line-2); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; font-weight: 500; font-size: var(--fs-ui); cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-top: 6px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform 180ms var(--ease-out); }
.qa details[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.qa details p { padding: 0 32px 16px 0; font-size: var(--fs-sm); color: var(--ink-2); max-width: 40em; }

/* Chiusura (slot CTA finale) */
.closing { padding-block: calc(clamp(56px, 6vw, 88px) * var(--dens)); background: var(--bg); color: var(--fg); }
.closing-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.closing .h2 { font-size: clamp(28px, 2.8vw, calc(var(--h1) * 0.72px)); }
.cq .fa-close { display: none; }
.cq .fa { padding-top: 48px; }
/* Mobile sticky CTA */
.mbar { display: none; }
@media (max-width: 860px) { .mbar { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: block; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, #ffffff 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 -1px 0 rgb(2 55 108 / 0.08); transform: translateY(110%); transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1); } .mbar[data-on] { transform: none; } .mbar .btn { width: 100%; } }

/* Blocks from the other agents that paint their own night keep the site's ink in step */
.site .cta-dark, .site .pr-d { --bg: var(--night); --fg: #ffffff; --line: rgba(255, 255, 255, 0.12); --line-2: rgba(255, 255, 255, 0.22); }
/* Plan buttons on a night chapter: outline in the chapter's ink (the primary stays blue) */
.site[data-ritmo="prodotto"] #prezzi .pr-btn:not(.is-primary), .site[data-ritmo="contrasto"] #prezzi .pr-btn:not(.is-primary) { background: transparent; color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }

/* Footer: the study's four footers at the site's scale, plus the verification line */
.cq { container: ftr / inline-size; }
.cq footer { font-size: 14px; --g: max(var(--gutter), calc((100cqi - var(--col)) / 2)); }
.cq .fa-payoff { font-weight: 400; font-size: clamp(32px, 4cqi, 52px); letter-spacing: -0.022em; }
.cq .fa { background: var(--mist); padding-top: clamp(56px, 6cqi, 88px); }
.cq .fa-close { padding-bottom: clamp(36px, 4cqi, 56px); border-bottom-color: var(--line-2); }
.cq .fa-nav { padding-block: 40px; }
.cq .fa-legal { border-top-color: var(--line-2); }
.cq .fa-acts { padding-bottom: 0.2em; }
.cq .fa-logo img, .cq .fc-id img, .cq .fb-logo img { height: 24px; }
.cq .btn-line { height: 36px; padding: 0 14px; border-radius: 7px; font-size: 14px; }
.cq .btn-white { height: 40px; padding: 0 16px; border-radius: 8px; font-size: 14px; }
.cq .fc-t { font-size: clamp(20px, 2cqi, 26px); }
.cq .fc-item { padding: 18px 22px; border-radius: 12px; }
.cq .fc-book img { width: 72px; }
.cq .fd-mark { margin-block: clamp(40px, 5cqi, 72px) clamp(24px, 3cqi, 40px); }
.cq .fd-login { height: 36px; padding: 0 14px; border-radius: 7px; }
.cq footer > :last-child { padding-bottom: 72px; }
.cq [hidden] { display: none !important; }
/* Verifiable facts line (TEAM/out/pricing-blocks/footer-facts.html), in every footer above the legal line */
.ff { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 16px 28px; align-items: start; padding-block: 20px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); font: 13px/1.45 var(--sans); color: color-mix(in srgb, currentColor 72%, transparent); }
.ff-logos { display: flex; align-items: center; gap: 14px; }
.ff-logos img { height: 26px; width: auto; }
.ff-logos .ff-asso { height: 30px; }
.ff p { margin: 0; }
.ff b { display: block; font-weight: 500; color: currentColor; }
.cq .ff b { color: inherit; }
.fa .ff, .fd .ff { color: #44546c; }
.fa .ff b, .fd .ff b { color: #02376c; }
.fb .ff, .fc .ff { color: rgba(226, 235, 250, 0.78); }
.fb .ff b, .fc .ff b { color: #ffffff; }
.ff a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.fb .ff-logos img, .fc .ff-logos img { filter: brightness(0) invert(1); opacity: 0.86; }
.fb .ff { border-top: 0; padding-top: 0; margin-bottom: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fb .ff-logos { grid-column: 1 / -1; }
@container ftr (max-width: 900px) { .ff { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ff-logos { grid-column: 1 / -1; } }
@container ftr (max-width: 520px) { .ff { grid-template-columns: minmax(0, 1fr); } }

/* Mobile */
@media (max-width: 860px) {
  .site-nav { display: none; }
  .menu { display: block; }
  .head-actions { gap: 12px; }
  .gnav { --nav-h: 52px; }
  .site-head { gap: 12px; height: 52px; }
  .hero-in, .vita-sticky { padding-top: 52px; }
  html { scroll-padding-top: 60px; }
  /* one CTA at a time: while the bottom bar is up, the nav keeps only Accedi and the menu */
  .bar-on .gnav .head-actions > .btn { display: none; }
  .brand img { height: 22px; }
  .hero { min-height: clamp(600px, 100svh, 900px); }
  .hero-copy { padding-block: 24px 24px; }
  .hero-aside { margin-top: 16px; }
  .ctas { margin-top: 20px; gap: 4px; }
  /* Touch: every target at least 44px tall */
  .btn, .hero-copy .btn, .site .pr-btn, .site .cta .btn { height: 44px; }
  .btn-sm { height: 40px; padding: 0 14px; }
  .gnav .btn-sm { height: 36px; }
  .menu summary { width: 44px; height: 44px; }
  .head-login { display: inline-flex; align-items: center; min-height: 44px; }
  .link { min-height: 44px; align-items: center; }
  .qa summary { padding-block: 14px; min-height: 48px; }
  .cq .col a, .cq .docs a, .cq .enti a { display: inline-flex; align-items: center; min-height: 36px; }
  .cq .col ul { gap: 4px; }
  .h1 { font-size: clamp(30px, 9.4vw, calc(var(--h1) * 0.68px)); }
  .f-col { right: auto; left: 0; top: 0; width: var(--colw-m, 26px); }
  .h-colonna .hero-in { padding-left: calc(var(--gutter) + 18px); }
  .vita-grid { grid-template-columns: minmax(0, 1fr); }
  .h-vita .hero-copy { grid-column: 1 / -1; }
  .ctas { flex-direction: column; align-items: flex-start; gap: 16px; }
  .h-sobria .ctas { align-items: center; }
  .photo img { object-position: 20% 70%; }
  .trust-in { flex-direction: column; align-items: flex-start; gap: 12px; }
  .press { flex-direction: column; align-items: flex-start; gap: 14px; }
  .press { align-items: stretch; width: 100%; }
  .press i { height: auto; }
  .press .pa { width: 100%; }
  .press .pb { width: 61%; }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .reg, .faq, .split { grid-template-columns: minmax(0, 1fr); }
  .reg-rows li { grid-template-columns: minmax(0, 1fr) auto; }
  .reg-rows .rl { grid-column: 1; }
  .reg-rows li > .link { grid-row: 1; grid-column: 2; }
  .steps, .tiers, .revs, .guides, .how, .split-2 { grid-template-columns: minmax(0, 1fr); }
  .cost .cost-out dd { font-size: calc(26px * var(--ts)); }
  .tier .ds { min-height: 0; }
}

/* DialKit panel (harness chrome): H hides it, folders collapse */
.site-hide-dial .dialkit-root { display: none !important; }
.dialkit-root .dialkit-panel { max-height: calc(100vh - 32px); }

@media (prefers-reduced-motion: reduce) {
  .btn, .arr, .qa summary::after, .vita-live .vita-scene, .vita-live .vita-ui { transition: none; }
  .hero-ui plannix-roadmap { animation: none; }
  .mbar { transition: none; }
}

/* 360px: the pyramid's level labels drop their chip under the name instead of running out of the card */
@media (max-width: 380px) {
  .site .wg-lv { flex-wrap: wrap; row-gap: 2px; white-space: normal; }
  .site .wg-lv .wg-chip { font-size: 11px; }
}

/* Copertine blog: C (tratto di progetto) by default, A (campo e titolo) from the panel */
.site:not([data-cover="a"]) .bl-cover.bl-a,
.site[data-cover="a"] .bl-cover.bl-c { display: none; }
.site[data-ritmo="prodotto"] #guide .bl-more { color: var(--sky); }

/* Chi 1c: one wide portrait, the others as small avatars, until the shoot */
.chi-c { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px clamp(20px, 3vw, 40px); align-items: end; }
.chi-feat img { display: block; width: 100%; height: auto; max-width: 300px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--r) + 2px); background: var(--surface-2); }
.chi-rest { border-top: 1px solid var(--line-2); }
.chi-rest li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.chi-rest :is(img, .chi-ini) { grid-row: span 2; width: 56px; height: 56px; object-fit: cover; border-radius: 50%; background: var(--surface-2); }
.chi-rest .t-name, .chi-feat .t-name { margin-top: 0; }
.chi-feat figcaption { margin-top: 12px; }
.chi-c-foot { margin-top: 28px; }
@media (max-width: 860px) {
  .chi-c { grid-template-columns: minmax(0, 1fr); }
  .chi-feat { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; }
  .chi-feat figcaption { margin-top: 0; }
}
.wg-lead:empty { display: none; }
#costi :is(.wg-label, dt) { text-wrap: balance; }
.chi-ini, .t-ini { display: grid; place-items: center; background: var(--sand); color: var(--navy); font-family: var(--serif); letter-spacing: 0.02em; }
.chi-ini { width: 56px; height: 56px; border-radius: 50%; font-size: 20px; }
.t-ini { width: 100%; height: 100%; font-size: calc(40px * var(--ts)); }
.team:has(> li:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 860px) { .team:has(> li:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .chi-feat img { max-width: 112px; } }

/* Storie vere inside the cases: people (initial, name, measured result), not article covers */
.cs-real { margin-top: clamp(32px, 4vw, 48px); }
.cs-real-h { margin-bottom: 14px; font-family: var(--serif); font-size: calc(22px * var(--ts)); letter-spacing: -0.01em; }
.site .cs-tag-real { background: color-mix(in oklab, var(--brand) 12%, transparent); color: var(--brand); }
.cs-real-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cs-real-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 20px 22px; border-radius: var(--r); background: var(--card); box-shadow: var(--card-shadow); }
.cs-real-av { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sand); color: var(--navy); font-family: var(--serif); font-size: 22px; }
.cs-real-who b { display: block; font-weight: 500; }
.cs-real-who span { display: block; font-size: var(--fs-sm); color: var(--ink-2); }
.cs-real-res { margin-top: 12px; }
.cs-real-res b { display: block; font-family: var(--serif); font-weight: 400; font-size: calc(24px * var(--ts)); letter-spacing: -0.015em; }
.cs-real-res span { font-size: var(--fs-sm); color: var(--ink-2); }
.cs-real-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-3); }
.cs-real-foot .link { font-size: var(--fs-sm); min-height: 44px; display: inline-flex; align-items: center; }
.cs-c .cs-real-item { background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.cs-c .cs-real-h, .cs-c .cs-real-who b, .cs-c .cs-real-res b { color: #fff; }
.cs-c :is(.cs-real-who span, .cs-real-res span, .cs-real-foot) { color: rgb(255 255 255 / 0.72); }
@media (max-width: 860px) { .cs-real-list { grid-template-columns: minmax(0, 1fr); } .cs-real-item { padding: 16px; gap: 12px; grid-template-columns: 40px minmax(0, 1fr); } .cs-real-av { width: 40px; height: 40px; font-size: 18px; } }
.site .cs-c .cs-tag-real { background: rgb(255 255 255 / 0.12); color: #fff; }
.site .bl-home-h:has(+ .bl-home-lead) { margin-bottom: 8px; }
.bl-home-lead { margin-bottom: clamp(20px, 2.6vw, 32px); }
.site .bl-home .bl-path { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cards" "links"; }
.site .cs-c .cs-real .link { color: #fff; }