/* Guida alla beta (30 settembre 2026). Si appoggia a `role-page.css` —
   testata, eroe, sezioni e chiusura blu notte sono gli stessi delle pagine
   per ruolo — e aggiunge solo i pezzi che lì non ci sono: passi, requisiti,
   schede delle funzioni con la schermata vera, l'orologio, le novità. */

.beta-page :focus-visible { outline:3px solid var(--site-action); outline-offset:3px; border-radius:10px; }
.beta-page .role-hero h1 { max-width:11ch; }
.beta-page .role-section h2 { max-width:15ch; }
.beta-page .role-primary { gap:9px; border:1px solid var(--site-fill-border); background:var(--site-fill-gradient); box-shadow:var(--site-fill-shadow); }
.beta-page .role-primary svg { width:18px; height:18px; flex:none; }
.beta-page .role-primary:hover { background:var(--site-action-fill-pressed); }
.beta-note { max-width:52ch; margin:18px 0 0; color:var(--site-muted); font-size:.86rem; }
.beta-note a, .beta-section a:not(.role-primary) { color:var(--site-action); font-weight:650; text-underline-offset:3px; }

/* Passi: tre schede numerate, come i momenti delle pagine per ruolo. */
.beta-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:36px 0 0; padding:0; list-style:none; counter-reset:passo; }
.beta-steps li { position:relative; padding:22px; border:1px solid var(--site-line); border-radius:24px; background:var(--site-surface); box-shadow:0 10px 24px rgba(42,47,103,.045); counter-increment:passo; }
.beta-steps li::before { display:grid; place-items:center; width:40px; height:40px; border-radius:13px; background:var(--site-periwinkle); color:var(--site-action-strong); font-weight:800; content:"0" counter(passo); }
.beta-steps h3 { margin:18px 0 8px; font-size:1.02rem; }
.beta-steps p { margin:0; color:var(--site-muted); font-size:.9rem; }
.beta-steps p + p { margin-top:8px; }

.beta-req { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:18px 0 0; padding:0; list-style:none; }
.beta-req li { display:flex; gap:11px; align-items:flex-start; padding:14px 15px; border:1px solid color-mix(in srgb,var(--site-action) 20%,var(--site-line)); border-radius:17px; background:color-mix(in srgb,var(--site-periwinkle) 45%,var(--site-surface)); font-size:.86rem; }
.beta-req svg { width:20px; height:20px; flex:none; margin-top:1px; color:var(--site-action); }
.beta-req b { display:block; }
.beta-req span span { color:var(--site-muted); }

.beta-cta-row { display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:26px; }
.beta-cta-row .beta-note { margin:0; }
/* Dopo la fascia dell'orologio la riga di sezione sarebbe un doppione. */
.beta-watch + .role-section { border-top:0; }

/* Funzioni: schede con la schermata vera, poi schede di solo testo. */
.beta-feats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:36px 0 0; padding:0; list-style:none; }
.beta-feat { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--site-line); border-radius:26px; background:var(--site-surface); box-shadow:0 10px 24px rgba(42,47,103,.045); }
.beta-feat-text { padding:20px 22px 18px; }
.beta-feat h3 { margin:0 0 6px; font-size:1.02rem; }
.beta-feat p { margin:0; color:var(--site-muted); font-size:.88rem; }
.beta-feat .tag { display:inline-block; margin-bottom:9px; color:var(--site-action); font-size:.68rem; font-weight:750; letter-spacing:.11em; text-transform:uppercase; }
.beta-shot { position:relative; margin:auto 22px 0; aspect-ratio:786/980; overflow:hidden; border:1px solid var(--site-line); border-bottom:0; border-radius:26px 26px 0 0; background:var(--site-paper); }
.beta-shot img { position:absolute; inset:0; width:100%; height:auto; }
/* Dove la parte che conta è in basso (la risposta di Assist, la proposta
   da confermare) la schermata si allinea al fondo. */
.beta-shot.fondo img { top:auto; bottom:0; }
.beta-page .shot-d { display:none; }
:root[data-theme="dark"] .beta-page .shot-l { display:none; }
:root[data-theme="dark"] .beta-page .shot-d { display:block; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) .beta-page .shot-l { display:none; } :root:not([data-theme="light"]) .beta-page .shot-d { display:block; } }

.beta-more { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:14px 0 0; padding:0; list-style:none; }
.beta-more li { padding:18px 20px; border:1px solid var(--site-line); border-radius:20px; background:color-mix(in srgb,var(--site-surface) 72%,transparent); }
.beta-more h3 { margin:0 0 6px; font-size:.96rem; }
.beta-more p { margin:0; color:var(--site-muted); font-size:.86rem; }

/* Apple Watch: la fascia blu notte, perché l'orologio è scuro davvero. */
.beta-watch { padding:78px 0 0; }
.beta-watch-inner { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,64px); align-items:center; padding:clamp(28px,5vw,60px); border-radius:32px; background:var(--site-night); color:#fff; }
.beta-watch .eyebrow { color:var(--site-night-accent); }
.beta-watch h2 { max-width:12ch; margin:11px 0 14px; font:560 clamp(2.3rem,4.4vw,3.6rem)/1 var(--site-serif); letter-spacing:-.04em; }
.beta-watch p { margin:0; color:var(--site-night-text); }
.beta-watch p + p { margin-top:12px; }
.beta-watch-list { display:grid; gap:8px; margin:18px 0 0; padding:0; list-style:none; color:var(--site-night-text); font-size:.9rem; }
.beta-watch-list li { display:flex; gap:10px; }
.beta-watch-list li::before { flex:none; width:7px; height:7px; margin-top:.6em; border-radius:50%; background:var(--site-night-accent); content:""; }
.beta-watch b { color:#fff; }
.beta-watch-shots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none; }
.beta-watch-shots figure { margin:0; }
.beta-watch-shots .face { overflow:hidden; aspect-ratio:416/496; border:6px solid #2a2e45; border-radius:34%/28%; background:#000; box-shadow:0 0 0 1px rgba(255,255,255,.14),0 18px 40px rgba(0,0,0,.35); }
.beta-watch-shots img { display:block; width:100%; height:100%; object-fit:cover; }
.beta-watch-shots figcaption { margin-top:10px; color:var(--site-night-text); font-size:.76rem; text-align:center; }
.beta-watch-note { grid-column:1 / -1; padding-top:18px; border-top:1px solid rgba(213,216,234,.18); font-size:.84rem; }

/* Novità della build. */
.beta-news { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin:36px 0 0; }
.beta-news > div { padding:22px; border:1px solid var(--site-line); border-radius:24px; background:var(--site-surface); }
.beta-news h3 { margin:0 0 12px; font-size:1rem; }
.beta-news ul, .beta-news ol { display:grid; gap:10px; margin:0; padding-left:1.15em; color:var(--site-muted); font-size:.88rem; }
.beta-news li::marker { color:var(--site-action); font-weight:700; }
.beta-news b { color:var(--site-ink); }
.beta-build { display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:6px 12px; border-radius:999px; background:color-mix(in srgb,var(--site-periwinkle) 70%,var(--site-surface)); color:var(--site-ink); font-size:.8rem; }

/* Segnalare. */
.beta-report { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:36px 0 0; padding:0; list-style:none; }
.beta-report li { padding:22px; border:1px solid var(--site-line); border-radius:24px; background:var(--site-surface); }
.beta-report h3 { margin:0 0 8px; font-size:1rem; }
.beta-report p { margin:0; color:var(--site-muted); font-size:.88rem; }
.beta-page .role-closing .role-primary { margin-top:10px; }

@media(max-width:980px) {
  .beta-feats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .beta-more { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .beta-watch-inner { grid-template-columns:1fr; }
}
@media(max-width:850px) {
  .beta-steps, .beta-req, .beta-report, .beta-news { grid-template-columns:1fr; }
}
@media(max-width:620px) {
  .beta-feats, .beta-more { grid-template-columns:1fr; }
  .beta-shot { margin-inline:auto; width:min(78%,300px); }
  .beta-watch { padding-top:56px; }
  .beta-watch-inner { border-radius:25px; }
  .beta-watch-shots { gap:9px; }
  .beta-watch-shots .face { border-width:4px; }
  .beta-watch-shots figcaption { font-size:.7rem; }
  .beta-page .role-actions .role-secondary { flex:1 1 100%; text-align:center; }
}
@media(prefers-color-scheme:dark) {
  .beta-steps li, .beta-feat { box-shadow:none; }
  /* Sul fondo quasi nero la fascia notte ha bisogno di un bordo per staccarsi. */
  .beta-watch-inner { box-shadow:inset 0 0 0 1px rgba(194,199,255,.14); }
}