/* ===========================================================================
   BadgeBox landing — the «turni» page, the deep dive into shift planning.

   It loads ONLY on that page: lp_render() looks for css/page-<slug>.css and
   adds it if it exists. The values come from tokens.css, like the rest of
   the landing: no colour is born here.

   ── THE SCENES ───────────────────────────────────────────────────────────
   Drawn in HTML and CSS, not photographed (the reasons are at the top of
   css/page-hr.css). Each scene rests in its FINAL STATE: js/scene.js adds
   `.is-on` when it enters the screen, and only then does the motion start
   from the empty state. Without JavaScript, or with «reduce motion», the
   page stays whole and tells the same story.

   ── THE MEASURE OF A LINE ────────────────────────────────────────────────
   Running text is held under 75 characters with ONE rule at the bottom of
   this sheet, in `ch` (CLAUDE.md, «Una riga di testo si misura in
   CARATTERI»): 56ch keep 65–75 real characters in this font.
   =========================================================================== */

/* ── opening ───────────────────────────────────────────────────────────── */

.shh {
    position: relative;
    overflow: hidden;
    padding-block: clamp(56px, 7vw, 100px);
}

/* One light behind the plan. A gradient with three stops, not a blur: a
   blur that moves is recomputed at every frame (CLAUDE.md). */
.shh::before {
    content: "";
    position: absolute;
    right: -12%; top: -20%;
    width: 70%; height: 140%;
    background: radial-gradient(closest-side, rgba(41, 153, 250, .30), rgba(41, 153, 250, .10) 55%, transparent);
    pointer-events: none;
}

.shh__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.shh__h1 {
    font-size: clamp(36px, 5.4vw, 66px);
    line-height: 1.0;
    letter-spacing: -.035em;
    font-weight: 800;
    margin: 0 0 18px;
}

.shh__h1 em { font-style: normal; color: var(--bbx-blue-300); }

.shh__lede {
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.55;
    color: rgba(255, 255, 255, .78);
}

.shh__cta { display: flex; flex-wrap: wrap; gap: var(--lp-3); margin-top: clamp(24px, 3vw, 34px); }

.shh__below { margin-top: var(--lp-3); font-size: 14px; color: rgba(255, 255, 255, .6); }

/* ── the plan that fills itself ──────────────────────────────────────── */

.shb {
    position: relative;
    background: var(--lp-surface);
    color: var(--lp-ink);
    border-radius: var(--lp-radius-card);
    padding: clamp(12px, 1.6vw, 18px);
    box-shadow: 0 30px 80px rgba(0, 20, 50, .45), 0 2px 8px rgba(0, 20, 50, .25);
}

.shb__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }

.shb__plan { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; min-width: 0; }
.shb__plan-ic { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--lp-accent-tint); box-shadow: inset 0 0 0 1px var(--bbx-blue-100); }

.shb__acts { display: inline-flex; gap: 6px; flex: none; }

.shb__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    border-radius: var(--lp-radius-control);
    font-size: 12px; font-weight: 700;
    white-space: nowrap;
}

.shb__btn--gen { background: var(--lp-accent); color: #fff; }
.shb__btn--pub { background: var(--lp-ok-soft); color: var(--lp-ok-ink); }

.shb__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }

.shb__kpi {
    display: grid; gap: 4px;
    padding: 9px 10px;
    border-radius: 10px;
    background: var(--bbx-gray-50);
    min-width: 0;
}

.shb__kpi-l { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--lp-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.shb__num { font-size: clamp(18px, 2vw, 24px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }

.shb__kpi--cov .shb__num { color: var(--lp-ok-ink); }
.shb__kpi--gap .shb__num { color: var(--lp-ok-ink); }

.shb__grid {
    display: grid;
    grid-template-columns: minmax(80px, .9fr) repeat(var(--days, 7), minmax(0, 1fr));
    gap: 4px;
}

.shb__day {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--lp-ink-soft);
    text-align: center;
    padding: 2px 0 4px;
}

.shb__day--we { color: var(--lp-accent-press); }

.shb__shift {
    display: grid; align-content: center; gap: 2px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--bbx-gray-50);
    border-left: 3px solid var(--lp-accent);
    min-width: 0;
}

.shb__shift b { font-size: 12px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shb__shift small { font-size: 10px; color: var(--lp-ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.shb__shift--2 { border-left-color: #f2a516; }
.shb__shift--3 { border-left-color: #7b5cf0; }

.shb__cell {
    position: relative;
    display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px;
    min-height: 46px;
    padding: 5px 4px 16px;
    border-radius: 8px;
    background: var(--lp-ok-soft);
    box-shadow: inset 0 0 0 1px rgba(10, 110, 82, .12);
}

.shb__cell--off {
    background: repeating-linear-gradient(135deg, var(--bbx-gray-50), var(--bbx-gray-50) 5px, var(--bbx-gray-100) 5px, var(--bbx-gray-100) 10px);
    box-shadow: none;
}

.shb__face {
    display: grid; place-items: center;
    width: 22px; height: 22px;
    border-radius: 999px;
    font-size: 8.5px; font-weight: 800; letter-spacing: .02em;
    color: #fff;
    background: var(--lp-accent);
}

.shb__face--2 { background: #0a8f6a; }
.shb__face--3 { background: #d9822b; }
.shb__face--4 { background: #6f52e0; }

.shb__need {
    position: absolute; left: 5px; bottom: 3px;
    font-size: 9px; font-weight: 800;
    color: var(--lp-ok-ink);
    font-variant-numeric: tabular-nums;
}

/* «Published»: the last thing to arrive. */
.shb__toast {
    position: absolute;
    left: 50%; bottom: -18px;
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--lp-ink);
    color: #fff;
    font-size: 13px; font-weight: 700;
    white-space: nowrap;
    box-shadow: var(--bbx-shadow-lg);
}

.shb__tick {
    width: 16px; height: 16px; border-radius: 999px;
    background: var(--lp-ok-bright);
    position: relative;
}

.shb__tick::after {
    content: "";
    position: absolute; left: 5px; top: 3px;
    width: 4px; height: 7px;
    border: solid var(--lp-ink); border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* The hero's keyframes. The rules that use them are in the motion block
   at the bottom of the sheet. */

@keyframes shb-press { 40% { transform: scale(.94); box-shadow: 0 0 0 6px rgba(0, 128, 246, .25); } 100% { transform: none; } }
@keyframes shb-cell  { to { background: var(--lp-ok-soft); box-shadow: inset 0 0 0 1px rgba(10, 110, 82, .12); } }
@keyframes shb-pop   { to { opacity: 1; transform: none; } }
@keyframes shb-lit   { to { opacity: 1; } }
@keyframes shb-toast { to { opacity: 1; transform: translate(-50%, 0); } }

/* ── the palette of the drawings ──────────────────────────────────────────
   Category tints, as the product colours its shifts and its avatars: they
   are full tints that must stay recognisable, declared ONCE here and read by
   every scene of the page. */
.shh, .shp, .shw, .shd, .sht {
    --sh-tint-1: var(--lp-accent);
    --sh-tint-2: #e0a820;
    --sh-tint-3: #7b5cf0;
    --sh-tint-4: #0a8f6a;
    --sh-warn-ink: #8a6206;
    --sh-warn-soft: #fdf0d5;
    --sh-bad: #d64545;
    --sh-bad-soft: #fbe2e2;
}

/* ── before and after ────────────────────────────────────────────────── */

.shp__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-accent-press); margin-bottom: 12px; }

.shp__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 28px); }

.shp__side {
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card);
    padding: clamp(20px, 2.6vw, 30px);
    box-shadow: var(--bbx-shadow-sm);
}

.shp__side--after { border-color: var(--bbx-blue-200); box-shadow: 0 18px 50px rgba(0, 85, 163, .12); }

.shp__h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 18px; }

.shp__mark { flex: none; width: 24px; height: 24px; border-radius: 999px; position: relative; }
.shp__mark--no { background: var(--sh-bad-soft); }
.shp__mark--no::before, .shp__mark--no::after { content: ""; position: absolute; left: 6px; top: 11px; width: 12px; height: 2px; border-radius: 2px; background: var(--sh-bad); transform: rotate(45deg); }
.shp__mark--no::after { transform: rotate(-45deg); }
.shp__mark--ok { background: var(--lp-ok-soft); }
.shp__mark--ok::after { content: ""; position: absolute; left: 8px; top: 5px; width: 6px; height: 11px; border: solid var(--lp-ok-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

.shp__list { display: grid; gap: 10px; margin-top: 20px; }
.shp__list li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.5; color: var(--lp-ink-soft); }
.shp__list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 2px; border-radius: 2px; background: var(--sh-bad); }
.shp__list--ok li { color: var(--lp-ink); }
.shp__list--ok li::before { width: 7px; height: 7px; top: .5em; border-radius: 999px; background: var(--lp-ok-ink); }

/* The scenes share a frame: same height, so the contrast is in the
   content and not in the size. */
.shs--mess, .shs--calm {
    position: relative;
    height: 220px;
    border-radius: 12px;
    background: var(--bbx-gray-50);
    overflow: hidden;
    padding: 16px;
}

.shs__sheet { display: grid; gap: 4px; opacity: .9; }
.shs__srow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.shs__scell { height: 22px; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1px var(--lp-border); }
.shs__scell--bad { background: var(--sh-bad-soft); box-shadow: inset 0 0 0 1px rgba(214, 69, 69, .35); }

.shs__chat { position: absolute; right: 14px; bottom: 14px; display: grid; gap: 6px; justify-items: end; width: min(78%, 280px); }

.shs__bubble {
    justify-self: start;
    max-width: 100%;
    padding: 7px 11px;
    border-radius: 12px 12px 12px 4px;
    background: #fff;
    box-shadow: var(--bbx-shadow-md);
    font-size: 12.5px; line-height: 1.35;
    color: var(--lp-ink);
}

.shs__bubble--me { justify-self: end; border-radius: 12px 12px 4px 12px; background: #dcf8c6; }

.shs__mini { display: grid; gap: 6px; }
.shs__mrow { display: grid; grid-template-columns: 56px repeat(6, minmax(0, 1fr)); gap: 5px; align-items: center; }
.shs__mname { height: 10px; border-radius: 999px; background: var(--sh-tint-1); opacity: .8; }
.shs__mname--2 { background: var(--sh-tint-2); }
.shs__mname--3 { background: var(--sh-tint-3); }
.shs__mcell { height: 26px; border-radius: 6px; background: var(--lp-ok-soft); box-shadow: inset 0 0 0 1px rgba(10, 110, 82, .15); }

.shs__meter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 16px; font-size: 12px; font-weight: 700; color: var(--lp-ink-soft); }
.shs__meter-bar { height: 8px; border-radius: 999px; background: var(--bbx-gray-150); overflow: hidden; }
.shs__meter-fill { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--lp-ok-ink); transform-origin: left; }
.shs__meter-n { color: var(--lp-ok-ink); font-size: 14px; font-variant-numeric: tabular-nums; }

.shs__note {
    position: absolute; left: 16px; right: 16px; bottom: 14px;
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--bbx-shadow-md);
    font-size: 12.5px; font-weight: 700;
}

.shs__note-ic { flex: none; width: 18px; height: 18px; border-radius: 6px; background: var(--lp-accent); }

/* ── the four steps ──────────────────────────────────────────────────── */

.shw__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); counter-reset: none; }

.shw__step {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card);
    padding: 16px 18px 22px;
    box-shadow: var(--bbx-shadow-sm);
}

.shw__step .shs {
    height: 132px;
    margin: 0 -2px 18px;
    border-radius: 12px;
    background: var(--bbx-gray-50);
    display: grid; align-content: center; justify-items: start; gap: 6px;
    padding: 12px;
    overflow: hidden;
}

.shw__num {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 999px;
    background: var(--lp-accent-tint);
    color: var(--lp-accent-press);
    font-size: 14px; font-weight: 800;
    margin-bottom: 10px;
}

.shw__name { font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 6px; }
.shw__text { font-size: 15px; line-height: 1.5; color: var(--lp-ink-soft); }

.shw__key { margin-top: clamp(24px, 3vw, 36px); font-size: 18px; line-height: 1.5; text-align: center; margin-inline: auto; }
.shw__key strong { color: var(--lp-accent-press); }

.shs__chip {
    display: inline-grid; grid-template-columns: auto auto; align-items: baseline; gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fff;
    border-left: 3px solid var(--sh-tint-1);
    box-shadow: var(--bbx-shadow-sm);
}
.shs__chip b { font-size: 12.5px; }
.shs__chip small { font-size: 11px; color: var(--lp-ink-soft); font-variant-numeric: tabular-nums; }
.shs__chip--2 { border-left-color: var(--sh-tint-2); margin-left: 14px; }
.shs__chip--3 { border-left-color: var(--sh-tint-3); margin-left: 28px; }

.shs__who { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: 8px; width: 100%; }
.shs__who small { font-size: 10.5px; font-weight: 700; color: var(--lp-ink-soft); font-variant-numeric: tabular-nums; }
.shs__hours { height: 6px; border-radius: 999px; background: var(--bbx-gray-150); overflow: hidden; }
.shs__hours-bar { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--lp-accent); transform-origin: left; }

.shs__face {
    display: inline-grid; place-items: center;
    flex: none;
    width: 24px; height: 24px;
    border-radius: 999px;
    font-size: 9px; font-weight: 800;
    color: #fff;
    background: var(--sh-tint-1);
}
.shs__face--2 { background: var(--sh-tint-4); }
.shs__face--3 { background: var(--sh-tint-2); }

.shs__gen { display: inline-flex; padding: 7px 12px; border-radius: 8px; background: var(--lp-accent); color: #fff; font-size: 12.5px; font-weight: 700; }

.shs__spark {
    flex: none;
    width: 12px; height: 12px;
    background: var(--lp-accent);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.shs__fill { display: grid; grid-template-columns: repeat(7, 14px); gap: 4px; margin-top: 6px; }
.shs__fill span { height: 14px; border-radius: 4px; background: var(--lp-ok-soft); box-shadow: inset 0 0 0 1px rgba(10, 110, 82, .18); }

.shs__state { position: relative; display: inline-grid; font-size: 12.5px; font-weight: 700; }
.shs__state-old, .shs__state-new { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; }
.shs__state-old { background: var(--bbx-gray-150); color: var(--lp-ink-soft); visibility: hidden; }
.shs__state-new { background: var(--lp-ok-soft); color: var(--lp-ok-ink); }
.shs__state-tick { width: 12px; height: 12px; border-radius: 999px; background: var(--lp-ok-ink); position: relative; }
.shs__state-tick::after { content: ""; position: absolute; left: 4px; top: 2px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.shs__pub { padding: 7px 14px; border-radius: 8px; background: var(--lp-accent); color: #fff; font-size: 12.5px; font-weight: 700; }

/* ── the gains ───────────────────────────────────────────────────────── */

.shg { position: relative; overflow: hidden; }

.shg::before {
    content: "";
    position: absolute;
    left: -10%; bottom: -30%;
    width: 60%; height: 120%;
    background: radial-gradient(closest-side, rgba(0, 128, 246, .28), rgba(0, 128, 246, .08) 55%, transparent);
    pointer-events: none;
}

.shg .lp-shell { position: relative; }

.shg__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 18px); }

.shg__card {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--lp-radius-card);
    padding: clamp(20px, 2.4vw, 28px);
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.shg__card:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .24); transform: translateY(-2px); }

.shg__card--wide { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; background: linear-gradient(135deg, rgba(0, 128, 246, .35), rgba(0, 128, 246, .10)); border-color: rgba(92, 179, 255, .45); }

.shg__name { font-size: clamp(20px, 2vw, 24px); font-weight: 800; letter-spacing: -.015em; line-height: 1.15; margin: 14px 0 8px; }
.shg__card--wide .shg__name { font-size: clamp(26px, 3vw, 38px); }

/* The coverage, drawn at the bottom of the wide card: the week's cells
   turning green and the bar reaching 100%. */
.shg__viz { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 16px; margin-top: auto; padding-top: 26px; }
.shg__cells { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.shg__cells span { height: 26px; border-radius: 7px; background: rgba(143, 240, 196, .22); box-shadow: inset 0 0 0 1px rgba(143, 240, 196, .35); }
.shg__meter { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.shg__meter-fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--lp-ok-bright); transform-origin: left; }
.shg__pct { font-size: 22px; font-weight: 800; color: var(--lp-ok-bright); font-variant-numeric: tabular-nums; }

.shg__text { font-size: 15.5px; line-height: 1.55; color: var(--bbx-blue-100); }

/* The icons: small drawings in CSS, one per gain. */
.shg__ic { position: relative; display: block; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .1); }
.shg__ic::before, .shg__ic::after { content: ""; position: absolute; }
.shg__ic--cover::before { inset: 11px; border-radius: 999px; border: 3px solid var(--lp-ok-bright); border-right-color: transparent; transform: rotate(-45deg); }
.shg__ic--cost::before { left: 12px; right: 12px; bottom: 11px; height: 3px; border-radius: 2px; background: #fff; box-shadow: 0 -6px 0 rgba(255, 255, 255, .7), 0 -12px 0 rgba(255, 255, 255, .45); }
.shg__ic--rules::before { left: 13px; top: 10px; width: 14px; height: 18px; border-radius: 3px; border: 2.5px solid #fff; }
.shg__ic--rules::after { left: 17px; top: 17px; width: 4px; height: 7px; border: solid var(--lp-ok-bright); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.shg__ic--time::before { inset: 10px; border-radius: 999px; border: 2.5px solid #fff; }
.shg__ic--time::after { left: 19px; top: 14px; width: 2.5px; height: 8px; background: var(--lp-ok-bright); box-shadow: 3px 6px 0 -0.5px var(--lp-ok-bright); }
.shg__ic--people::before { left: 10px; top: 11px; width: 10px; height: 10px; border-radius: 999px; background: #fff; box-shadow: 11px 0 0 rgba(255, 255, 255, .6); }
.shg__ic--people::after { left: 8px; bottom: 9px; width: 24px; height: 8px; border-radius: 8px 8px 3px 3px; background: rgba(255, 255, 255, .8); }
.shg__ic--sites::before { left: 14px; top: 9px; width: 12px; height: 12px; border-radius: 999px 999px 999px 0; border: 2.5px solid #fff; transform: rotate(-45deg); }
.shg__ic--sites::after { left: 10px; bottom: 9px; width: 20px; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, .6); }

/* ── from the plan to the day ────────────────────────────────────────── */

.shd__inner { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 64px); align-items: center; }

.shd__p, .sht__p { font-size: 17px; line-height: 1.6; color: var(--lp-ink-soft); }

.shd__points { display: grid; gap: 12px; margin-top: 22px; }
.shd__points li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.5; color: var(--lp-ink-soft); }
.shd__points li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; border-radius: 3px; background: var(--lp-accent); }
.shd__points b, .sht__points b { color: var(--lp-ink); }

.shd__k { margin-top: 22px; font-size: 15px; color: var(--lp-ink-soft); }
.shd__k a { font-weight: 700; }

.shs--day {
    position: relative;
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card);
    box-shadow: var(--bbx-shadow-lg);
    padding: 20px 20px 22px;
}

.shs__axis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-left: 112px; margin-bottom: 8px; font-size: 10.5px; font-weight: 700; color: var(--lp-ink-soft); font-variant-numeric: tabular-nums; }

.shs__lane { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 8px; padding: 12px 0; border-top: 1px solid var(--lp-border); }
.shs__lane-who { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; min-width: 0; }

/* The track is the day from 06:00 to 24:00 — 18 hours — and a bar sits on
   it from --a to --b, counted in hours from six. */
.shs__track { position: relative; height: 26px; border-radius: 6px; background: repeating-linear-gradient(90deg, var(--bbx-gray-50), var(--bbx-gray-50) calc(100% / 6 - 1px), var(--lp-border) calc(100% / 6 - 1px), var(--lp-border) calc(100% / 6)); }
.shs__plan, .shs__real { position: absolute; top: 3px; bottom: 3px; left: calc(var(--a) / 18 * 100%); width: calc((var(--b) - var(--a)) / 18 * 100%); border-radius: 5px; }
.shs__plan { border: 2px dashed var(--bbx-blue-300); background: rgba(0, 128, 246, .06); }
.shs__real { top: 7px; bottom: 7px; background: var(--lp-accent); transform-origin: left; }

.shs__flag { grid-column: 2; justify-self: start; margin-top: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.shs__flag--ok { background: var(--lp-ok-soft); color: var(--lp-ok-ink); }
.shs__flag--warn { background: var(--sh-warn-soft); color: var(--sh-warn-ink); }

.shs__ask {
    display: flex; align-items: center; gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--lp-accent-tint);
    color: var(--lp-accent-deep);
    font-size: 13px; font-weight: 700;
}

/* ── the people ──────────────────────────────────────────────────────── */

.sht__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: center; }

.shs--phone { display: grid; justify-items: center; }

.shs__phone {
    position: relative;
    width: min(100%, 300px);
    padding: 44px 16px 22px;
    border-radius: 38px;
    background: var(--lp-surface);
    border: 8px solid var(--lp-ink);
    box-shadow: 0 30px 70px rgba(0, 41, 82, .22);
}

.shs__notch { position: absolute; top: 10px; left: 50%; width: 76px; height: 18px; border-radius: 999px; background: var(--lp-ink); transform: translateX(-50%); }

.shs__today {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--lp-dark);
    color: #fff;
}
.shs__today-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--bbx-blue-200); }
.shs__today-h { font-size: 15px; font-variant-numeric: tabular-nums; }
.shs__today-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.shs__today-fill { display: block; width: 62%; height: 100%; border-radius: inherit; background: var(--lp-ok-bright); transform-origin: left; }
.shs__today-w { grid-column: 1 / -1; font-size: 11.5px; color: var(--bbx-blue-100); }

.shs__ph-h { font-size: 17px; font-weight: 800; margin: 18px 0 6px; }

.shs__ph-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--lp-border); }
.shs__ph-day { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--lp-ink-soft); }
.shs__ph-what { display: grid; gap: 1px; padding-left: 10px; border-left: 3px solid var(--sh-tint-1); }
.shs__ph-what--2 { border-left-color: var(--sh-tint-2); }
.shs__ph-what--3 { border-left-color: var(--sh-tint-3); }
.shs__ph-what b { font-size: 14px; font-variant-numeric: tabular-nums; }
.shs__ph-what small { font-size: 11.5px; color: var(--lp-ink-soft); }
.shs__ph-row--off .shs__ph-what { border-left-color: var(--bbx-gray-200); }
.shs__ph-row--off .shs__ph-what b { color: var(--lp-ink-soft); font-weight: 600; }

.sht__points { display: grid; gap: 14px; margin-top: 24px; }
.sht__points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 16px; line-height: 1.5; color: var(--lp-ink-soft); }
.sht__tick { width: 22px; height: 22px; border-radius: 999px; background: var(--lp-ok-soft); position: relative; margin-top: 1px; }
.sht__tick::after { content: ""; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid var(--lp-ok-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* ── motion ──────────────────────────────────────────────────────────── */

@keyframes shs-in   { to { opacity: 1; transform: none; } }
@keyframes shs-pop  { to { opacity: 1; transform: none; } }
@keyframes shs-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shs-out  { to { opacity: 0; transform: scale(.9); } }

/* ── the measure of a line, in one place ──────────────────────────────── */

/* Measured with misura-righe.mjs on 2026-10-05: 56ch still gave 76-77
   real characters in the lists, so 54. The centred key line is in a larger
   body and reads as one sentence: 50. */
.shh__lede, .shd__p, .sht__p, .shd__points li, .sht__points li, .shp__list li,
.shg__text, .shg__card--wide .shg__text { max-width: 54ch; }
.shw__key { max-width: 50ch; }

/* ── narrow screens ──────────────────────────────────────────────────── */

@media (max-width: 980px) {
    .shh__inner, .shd__inner, .sht__inner { grid-template-columns: minmax(0, 1fr); }
    .shw__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Two columns: the wide card takes a row of its own, and the last of
       the five that follow takes the whole row too, or it would sit alone. */
    .shg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shg__card--wide { grid-row: auto; }
    .shg__card:last-child { grid-column: span 2; }
    .sht__inner .shs--phone { order: 2; }
}

@media (max-width: 720px) {
    .shp__duo, .shw__steps, .shg__grid { grid-template-columns: minmax(0, 1fr); }
    .shg__card--wide, .shg__card:last-child { grid-column: auto; grid-row: auto; }
    .shb__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shb__grid { grid-template-columns: 54px repeat(var(--days, 7), minmax(0, 1fr)); gap: 3px; }
    /* The name of a shift does not fit a phone's column: its hours do,
       and with the colour on the left they say which shift it is. */
    .shb__shift { padding: 5px 5px; }
    .shb__shift b { display: none; }
    .shb__shift small { font-size: 10px; font-weight: 700; color: var(--lp-ink); }
    .shb__cell { min-height: 34px; padding: 4px 2px 13px; justify-content: center; }
    .shb__face { width: 15px; height: 15px; font-size: 0; }
    .shb__btn--pub { display: none; }
    .shs__axis { margin-left: 0; grid-column: 2; }
    .shs__lane { grid-template-columns: 1fr; }
    .shs__axis { display: none; }
    .shs__flag { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .shg__card, .shg__card:hover { transition: none; transform: none; }
}

/* ── the motion, only for whoever has not asked for less ─────────────────
   Every rule that HIDES a piece before its entrance, and every animation,
   lives in here. Outside this block the scenes are drawn in their final
   state, so with «reduce motion» (and without JavaScript, thanks to `.js`)
   the page is whole at once. Inside a scene the pieces that start late —
   the «published» toast at 2.9s — would otherwise wait half-hidden for
   whoever asked not to watch them move (check-landing-pagine.mjs). */
@media (prefers-reduced-motion: no-preference) {

    /* The plan: before `.is-on` it is EMPTY (the JS is there and will
       start it); after, it fills cell by cell, and the toast arrives last. */
    .js .shh__scene .shb__cell:not(.shb__cell--off) { background: #fff; box-shadow: inset 0 0 0 1px var(--lp-border); }
    .js .shh__scene .shb__face,
    .js .shh__scene .shb__need { opacity: 0; transform: scale(.6); }
    .js .shh__scene .shb__toast { opacity: 0; transform: translate(-50%, 10px); }
    .js .shh__scene .shb__btn--pub { opacity: .45; }
    .js .shh__scene.is-on .shb__btn--gen { animation: shb-press .5s ease .2s both; }
    .js .shh__scene.is-on .shb__cell:not(.shb__cell--off) {
        animation: shb-cell .45s ease both;
        animation-delay: calc(.7s + var(--k) * .07s);
    }
    .js .shh__scene.is-on .shb__face,
    .js .shh__scene.is-on .shb__need {
        animation: shb-pop .35s cubic-bezier(.34, 1.56, .64, 1) both;
        animation-delay: calc(.75s + var(--k) * .07s);
    }
    .js .shh__scene.is-on .shb__btn--pub { animation: shb-lit .3s ease 2.6s both; }
    .js .shh__scene.is-on .shb__toast { animation: shb-toast .5s cubic-bezier(.22, .61, .36, 1) 2.9s both; }
    .js .shs--mess .shs__bubble { opacity: 0; transform: translateY(8px); }
    .js .shs--mess.is-on .shs__bubble { animation: shs-in .4s ease both; }
    .js .shs--mess.is-on .shs__bubble--1 { animation-delay: .3s; }
    .js .shs--mess.is-on .shs__bubble--2 { animation-delay: 1.1s; }
    .js .shs--mess.is-on .shs__bubble--3 { animation-delay: 1.9s; }
    .js .shs--calm .shs__mcell { opacity: 0; transform: scale(.7); }
    .js .shs--calm .shs__meter-fill { transform: scaleX(0); }
    .js .shs--calm .shs__note { opacity: 0; transform: translateY(8px); }
    .js .shs--calm.is-on .shs__mcell { animation: shs-pop .3s ease both; animation-delay: calc(.2s + var(--k) * .04s); }
    .js .shs--calm.is-on .shs__meter-fill { animation: shs-grow .9s cubic-bezier(.22, .61, .36, 1) .3s both; }
    .js .shs--calm.is-on .shs__note { animation: shs-in .4s ease 1.3s both; }
    .js .shw__step .shs > * { opacity: 0; transform: translateY(6px); }
    .js .shw__step .shs.is-on > * { animation: shs-in .45s ease both; animation-delay: calc(.15s + var(--i, 0) * .12s); }
    .js .shs--people.is-on .shs__who { animation-delay: calc(.2s + var(--k) * .18s); }
    .js .shs--people .shs__hours-bar { transform: scaleX(0); }
    .js .shs--people.is-on .shs__hours-bar { animation: shs-grow .8s ease both; animation-delay: calc(.4s + var(--k) * .18s); }
    .js .shs--generate .shs__fill span { opacity: 0; transform: scale(.5); }
    .js .shs--generate.is-on .shs__fill span { animation: shs-pop .3s ease both; animation-delay: calc(.6s + var(--k) * .06s); }
    /* Publish: the draft badge, the button pressed, the badge turns. The
       button carries TWO animations, its entrance (the rule for every child
       of a step scene) and the press: writing only the press would replace
       the entrance, and the button would stay invisible. */
    .js .shs--publish .shs__state-old { visibility: visible; }
    .js .shs--publish .shs__state-new { opacity: 0; transform: scale(.8); }
    .js .shs--publish.is-on .shs__pub { animation: shs-in .45s ease .15s both, shb-press .5s ease .7s both; }
    .js .shs--publish.is-on .shs__state-old { animation: shs-out .25s ease 1.0s both; }
    .js .shs--publish.is-on .shs__state-new { animation: shs-pop .4s cubic-bezier(.34, 1.56, .64, 1) 1.1s both; }
    .js .shg__cells span { opacity: 0; transform: scale(.6); }
    .js .shg__meter-fill { transform: scaleX(0); }
    .js .shg__grid.is-on .shg__cells span { animation: shs-pop .3s ease both; animation-delay: calc(.4s + var(--k) * .035s); }
    .js .shg__grid.is-on .shg__meter-fill { animation: shs-grow 1s cubic-bezier(.22, .61, .36, 1) .5s both; }
    .js .shg__card { opacity: 0; transform: translateY(14px); }
    .js .shg__grid.is-on .shg__card { animation: shs-in .5s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--i) * .08s); }
    .js .shs--day .shs__real { transform: scaleX(0); }
    .js .shs--day .shs__flag, .js .shs--day .shs__ask { opacity: 0; transform: translateY(6px); }
    .js .shs--day.is-on .shs__real { animation: shs-grow 1.1s cubic-bezier(.22, .61, .36, 1) .3s both; }
    .js .shs--day.is-on .shs__flag--ok { animation: shs-in .4s ease 1.4s both; }
    .js .shs--day.is-on .shs__flag--warn { animation: shs-in .4s ease 1.8s both; }
    .js .shs--day.is-on .shs__ask { animation: shs-in .45s ease 2.4s both; }
    .js .shs--phone .shs__ph-row { opacity: 0; transform: translateX(-8px); }
    .js .shs--phone .shs__today-fill { transform: scaleX(0); }
    .js .shs--phone.is-on .shs__ph-row { animation: shs-in .4s ease both; animation-delay: calc(.2s + var(--k) * .09s); }
    .js .shs--phone.is-on .shs__today-fill { animation: shs-grow 1.2s cubic-bezier(.22, .61, .36, 1) .3s both; }
}