:root {
  --ink: #282d34;
  --paper: #ffffff;
  --line: #d5dbe3;
  --blue: #294568;
  --blue-deep: #1e3552;
  --blue-soft: #dce6f1;
  --muted: #56616d;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gutter: clamp(24px, 6.2vw, 104px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.hero a:focus-visible { outline-color: var(--blue-soft); }
.skip { position: absolute; z-index: 50; top: 10px; left: 10px; transform: translateY(-160%); background: var(--paper); padding: 12px; }
.skip:focus { transform: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.topbar { position: sticky; top: 0; z-index: 20; min-height: 82px; padding: 12px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); background: var(--paper); }
.wordmark { flex: 0 0 auto; text-decoration: none; font-size: 18px; font-weight: 650; letter-spacing: -.04em; }
.wordmark span { display: block; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.topbar nav { display: flex; align-items: center; gap: clamp(16px, 2.7vw, 38px); }
.topbar nav a { text-decoration: none; font-size: 13px; white-space: nowrap; }
.topbar nav a:hover, footer a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.nav-number { margin-right: 5px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.topbar .nav-contact { padding: 9px 13px; border-radius: 30px; background: var(--blue); color: #fff; }
.topbar .language { text-transform: uppercase; }

.hero { min-height: min(760px, calc(100svh - 82px)); position: relative; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 6vw; padding: 90px var(--gutter) 116px; background: var(--ink); color: var(--paper); overflow: hidden; }
.hero:after { content: ""; position: absolute; width: 36vw; aspect-ratio: 1; right: 8%; top: 9%; border: 1px solid #ffffff18; border-radius: 50%; box-shadow: 0 0 0 6vw #ffffff06, 0 0 0 12vw #ffffff04; pointer-events: none; }
.hero-copy, .hero-note, .hero-foot { position: relative; z-index: 1; }
.kicker, .section-label, .note-index, .hero-foot, .work-card > span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.kicker { display: flex; gap: 10px; align-items: center; }
.signal { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-soft); }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { font: 400 clamp(48px, 6.2vw, 88px)/1 var(--serif); letter-spacing: -.06em; margin: 32px 0 25px; }
.hero h1 em { color: var(--blue-soft); font-weight: 400; }
.intro { font: clamp(21px, 2.4vw, 32px)/1.25 var(--serif); margin-bottom: 18px; }
.body-copy { max-width: 445px; color: #d0d5cf; font-size: 16px; }
.round-link { display: inline-flex; align-items: center; gap: 30px; margin-top: 26px; padding: 13px 17px; border: 1px solid #aab1a9; border-radius: 40px; text-decoration: none; font-size: 14px; }
.round-link span { color: var(--blue-soft); font-size: 18px; }
.hero-note { justify-self: center; transform: rotate(3deg); width: min(100%, 365px); aspect-ratio: 1.04; background: var(--blue-soft); color: var(--ink); padding: clamp(25px, 4vw, 54px); display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 20px 70px #0003; }
.note-index { font-size: 11px; }
.hero-note > p { font: clamp(32px, 4vw, 55px)/1.04 var(--serif); letter-spacing: -.05em; }
.note-credit { font-size: 13px; }
.note-credit span { float: right; font-size: 18px; }
.hero-foot { position: absolute; bottom: 30px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; gap: 24px; color: #c3c9c1; font-size: 11px; }

.section { padding: clamp(56px, 7vw, 96px) var(--gutter); background: var(--paper); }
.section-label { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.listen-grid, .proof-grid, .together-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; margin-top: 60px; }
.section h2 { font: 400 clamp(52px, 7vw, 98px)/.94 var(--serif); letter-spacing: -.075em; margin-bottom: 0; }
.listen .kicker { color: var(--muted); }
.listen-copy { max-width: 520px; align-self: end; }
.listen-copy > p, .proof-grid p, .together-grid p { font-size: 16px; max-width: 540px; }
.listen-placeholder { min-height: 110px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 32px; display: flex; align-items: center; gap: 20px; }
.play-mark { display: grid; place-items: center; flex: 0 0 48px; background: var(--blue-soft); border-radius: 50%; width: 48px; height: 48px; font-size: 13px; padding-left: 3px; }
.listen-placeholder strong, .listen-placeholder small { display: block; }
.listen-placeholder strong { font-size: 15px; }
.listen-placeholder small { margin-top: 4px; font-size: 13px; color: var(--muted); }
.margin-note, .editorial-note { font-size: 13px; color: var(--muted); }
.margin-note { margin: 24px 0 0 50%; }
.work-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin: 56px 0 48px; }
.work-heading h2 { font-size: clamp(50px, 6.5vw, 84px); }
.work-heading > p { max-width: 390px; font-size: 16px; margin: 0 3vw 7px 0; }
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.work-card { min-height: 340px; padding: 23px 22px 24px 0; display: flex; flex-direction: column; }
.work-card + .work-card { border-left: 1px solid var(--line); padding-left: 22px; }
.work-card > span { color: var(--muted); font-size: 11px; }
.work-card h3 { font: 400 clamp(28px, 3vw, 43px)/1.02 var(--serif); letter-spacing: -.05em; margin: 53px 0 15px; }
.work-card > p { font-size: 14px; color: var(--muted); min-height: 48px; }
.work-card blockquote { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line); font: italic 16px/1.35 var(--serif); }
.work .editorial-note { margin: 14px 0 0; }
.proof-grid h2 { font-size: clamp(49px, 6vw, 80px); }
.live { border-top: 1px solid var(--line); }
.live-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; margin-top: 60px; }
.live-grid h2 { font-size: clamp(52px, 7vw, 90px); }
.live-copy { max-width: 560px; align-self: end; }
.live-copy > p { font-size: 16px; }
.live-phrase { margin: 28px 0 18px; padding: 18px 22px; border-left: 3px solid var(--blue); background: var(--blue-soft); font: italic 20px/1.35 var(--serif); }
.proof-grid > div { align-self: end; max-width: 540px; }
.proof-grid .quiet { padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.together { background: var(--ink); color: var(--paper); }
.together .section-label { color: #d0d5cf; border-color: #ffffff45; }
.together-grid { align-items: start; }
.together-grid > div { max-width: 525px; }
.together-grid p { color: #e1e4df; }
.contact-link { display: inline-flex; align-items: center; margin: 20px 0 12px; padding: 14px 18px; border: 1px solid #c3c9c1; border-radius: 40px; font-size: 14px; }
.contact-link:focus-visible, .together a:focus-visible { outline-color: var(--blue-soft); }
.together .editorial-note { display: block; color: #d0d5cf; }
footer { padding: 34px var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: 30px; background: var(--paper); }
footer > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px clamp(16px, 3vw, 40px); font-size: 13px; }
footer > div a { text-decoration: none; }
footer > div span { color: var(--muted); }
.footer-legal { position: relative; }
.footer-legal summary { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.footer-legal-content { display: block; position: absolute; z-index: 10; right: 0; bottom: calc(100% + 12px); width: min(340px, 85vw); padding: 14px 16px; border: 1px solid var(--line); background: var(--paper); color: var(--ink) !important; box-shadow: 0 8px 30px #0002; font-size: 12px; line-height: 1.6; }
.footer-legal-content strong { font-weight: 650; }
.privacy-page { width: min(100% - 2 * var(--gutter), 980px); margin-inline: auto; padding: 56px 0 96px; }
.privacy-page h1 { margin: 36px 0 18px; font: 400 clamp(54px, 8vw, 96px)/.95 var(--serif); letter-spacing: -.07em; }
.privacy-page .privacy-lede { max-width: 680px; margin-bottom: 56px; font: clamp(20px, 2.5vw, 28px)/1.3 var(--serif); }
.privacy-page section { padding: 28px 0; border-top: 1px solid var(--line); }
.privacy-page h2 { margin-bottom: 16px; font: 400 clamp(27px, 3vw, 38px)/1.1 var(--serif); letter-spacing: -.04em; }
.privacy-page p, .privacy-page li { max-width: 760px; }
.privacy-page li { margin: 0 0 12px; }
.privacy-page ul { padding-left: 1.3em; }
.privacy-page a { text-underline-offset: 3px; }
.privacy-draft-note { margin-top: 36px; padding: 16px; border-left: 3px solid var(--blue); background: var(--blue-soft); font-size: 13px; }

@media (max-width: 760px) {
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 50px; padding-top: 86px; padding-bottom: 110px; }
  .hero:after { width: 64vw; right: -12%; top: 20%; }
  .hero h1 { font-size: clamp(46px, 12vw, 72px); }
  .hero-note { justify-self: end; width: min(72%, 340px); margin-right: 5vw; }
  .hero-foot { font-size: 10px; }
  .listen-grid, .proof-grid, .together-grid, .live-grid { grid-template-columns: 1fr; gap: 34px; margin-top: 42px; }
  .section { padding-top: 56px; padding-bottom: 56px; }
  .margin-note { margin-left: 0; }
  .work-heading { display: block; margin: 42px 0 34px; }
  .work-heading > p { margin: 24px 0 0; }
  .work-grid { grid-template-columns: 1fr 1fr; }
  .work-card { min-height: 285px; padding: 20px 16px 20px 0; }
  .work-card:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .work-card:nth-child(4) { border-top: 1px solid var(--line); }
  .work-card + .work-card { padding-left: 16px; }
  .work-card h3, .work-card:nth-child(3) h3 { margin-top: 36px; }
  footer { align-items: flex-start; flex-direction: column; }
  footer > div { flex-wrap: wrap; }
}

@media (max-width: 560px) {
  html { scroll-padding-top: 108px; }
  .topbar { min-height: 0; padding: 9px 18px 10px; display: grid; grid-template-columns: 1fr; gap: 7px; }
  .wordmark { font-size: 16px; }
  .wordmark span { font-size: 10px; }
  /* una riga sola anche con quattro voci (pagine interne: sezione, progetti, contatti, lingua) */
  .topbar nav { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
  .topbar nav a { text-align: center; }
  .topbar nav a { font-size: 12px; }
  .nav-number { font-size: 9px; margin-right: 3px; }
  .topbar .nav-contact { padding: 5px 8px; }
  .hero { padding-inline: 24px; }
  .hero-note { width: 78%; }
  .hero-foot { left: 24px; right: 24px; }
  .section { padding-inline: 24px; }
  .section-label { font-size: 10px; }
  .section-label span:last-child { text-align: right; }
  .work-card { min-height: 310px; }
  .work-card h3 { font-size: 30px; }
  .work-card blockquote { font-size: 14px; }
  footer { padding-inline: 24px; }
}

/* Schermi stretti: le quattro schede Projects in colonna singola (evita lo sbordo sotto i 420 px). */
@media (max-width: 420px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-card, .work-card + .work-card, .work-card:nth-child(3) { min-height: 0; padding: 22px 0; border-left: 0; }
  .work-card + .work-card { border-top: 1px solid var(--line); }
  .work-card h3, .work-card:nth-child(3) h3 { margin-top: 24px; }
  .work-card blockquote { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-frase-box] [data-frase], [data-take] { transition: none; }
}

/* frasi lunghe nel foglietto: corpo più piccolo, il foglietto non si allunga */
.hero-note > p.frase-lunga { font-size: clamp(24px, 2.8vw, 38px); }

/* ——— 29/09: apertura con player, sala con foto, schede cliccabili ——— */

/* frasi a tempo: dissolvenza al cambio (foglietto e sala) */
[data-frase-box] [data-frase], [data-take] { transition: opacity .6s ease; }
[data-frase-box].in-cambio [data-frase], [data-frase-box].in-cambio [data-take] { opacity: 0; }

/* luce REC accanto a "Take 1 · rolling" */
.signal.rec { background: #e5322d; box-shadow: 0 0 0 3px #e5322d33; animation: rec 1.6s steps(2, jump-none) infinite; }
@keyframes rec { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .signal.rec { animation: none; } }

/* player nell'apertura */
.player-hero { margin-top: 30px; max-width: 460px; }
.player-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.player-play { display: inline-flex; align-items: center; gap: 14px; padding: 10px 24px 10px 10px; border: 0; border-radius: 50px; background: var(--blue); color: #fff; font: 600 16px/1 var(--sans); cursor: pointer; }
.player-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--blue-deep); position: relative; flex: none; }
.player-icon::after { content: ""; position: absolute; left: 17px; top: 14px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }
.player-hero.is-playing .player-icon::after { left: 15px; top: 15px; width: 5px; height: 14px; border: 0; border-left: 4px solid var(--blue-soft); border-right: 4px solid var(--blue-soft); }
.player-next { background: none; border: 1px solid #aab1a9; border-radius: 40px; color: inherit; padding: 12px 18px; font: 14px var(--sans); cursor: pointer; }
.player-play:disabled, .player-next:disabled { opacity: .45; cursor: default; }
.player-play:focus-visible, .player-next:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 3px; }
.player-meta { margin-top: 18px; font-size: 13px; color: #d0d5cf; letter-spacing: .02em; }
.player-progress { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: #aab1a9; font-variant-numeric: tabular-nums; }
.player-progress input { flex: 1; accent-color: var(--blue-soft); }
.player-note { margin-top: 6px; font-size: 12px; color: #aab1a9; }

/* 01 — in sala: foto a sinistra, frase a destra */
.sala-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.sala.section { padding-bottom: clamp(24px, 3vw, 40px); }
.work.section { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(24px, 3vw, 40px); }
.live.section { padding-top: clamp(24px, 3vw, 40px); }
.sala-foto { width: min(100%, 660px); max-width: 660px; height: auto; display: block; justify-self: start; }
.sala-frase p { font: 400 clamp(38px, 5vw, 76px)/1.02 var(--serif); letter-spacing: -.04em; }
.sala-frase p.frase-lunga { font-size: clamp(30px, 3.4vw, 52px); }
@media (max-width: 760px) {
  .sala-grid { grid-template-columns: 1fr; }
  .sala-frase { min-height: 3.2em; }
  .sala.section { padding-bottom: 24px; }
  .work.section { padding-top: 24px; padding-bottom: 28px; }
  .live.section { padding-top: 28px; }
}

/* schede come link */
a.work-card { color: inherit; text-decoration: none; transition: background .2s ease; }
a.work-card:hover { background: #0000000a; }
a.work-card:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.card-cta { margin-top: 16px; font: 600 13px var(--sans); letter-spacing: .04em; }
a.work-card:hover .card-cta { text-decoration: underline; }

/* segno Lato Cardioide nel footer */
.footer-mark { display: inline-flex; align-items: center; gap: 8px; }
.footer-mark img { width: 28px; height: 28px; }

/* asterisco del foglietto in basso a destra */
.hero-note > .note-credit { align-self: flex-end; font-size: 18px; }

/* pagine di approfondimento delle aree */
.detail-hero { min-height: 510px; padding: clamp(74px, 10vw, 142px) var(--gutter); display: grid; grid-template-columns: 1.2fr .8fr; gap: 7vw; align-items: end; background: var(--ink); color: var(--paper); }
.detail-hero h1 { max-width: 900px; margin: 26px 0 0; font: 400 clamp(62px, 10vw, 138px)/.88 var(--serif); letter-spacing: -.075em; }
.detail-hero .detail-lede { max-width: 480px; margin: 0; color: #e1e4df; font: clamp(20px, 2.2vw, 28px)/1.3 var(--serif); }
.detail-content { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; align-items: start; }
.detail-content h2 { font-size: clamp(42px, 5vw, 68px); }
.detail-copy { max-width: 700px; }
.detail-copy > p { max-width: 620px; }
.detail-steps { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.detail-steps li { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.detail-steps li > span { color: var(--muted); font-size: 12px; letter-spacing: .08em; }
.detail-steps strong { display: block; margin-bottom: 5px; font-weight: 600; }
.detail-steps p { margin: 0; color: var(--muted); font-size: 14px; }
.detail-cta { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding: 44px; background: var(--blue-soft); }
.detail-cta h2 { max-width: 650px; margin: 0; font: 400 clamp(38px, 5vw, 64px)/1 var(--serif); letter-spacing: -.05em; }
.detail-cta .round-link { margin: 0; border-color: var(--ink); white-space: nowrap; }
.detail-cta .round-link span { color: var(--ink); }
.contact-form-wrap > p { max-width: 620px; color: #e1e4df; }
.message-starters { margin: 26px 0 24px; padding: 16px; border: 1px solid #ffffff45; display: flex; flex-wrap: wrap; gap: 8px; }
.message-starters legend { padding: 0 8px; color: #d0d5cf; font-size: 12px; }
.message-starters button { padding: 8px 11px; border: 1px solid #aab1a9; border-radius: 24px; background: transparent; color: var(--paper); font: 13px var(--sans); cursor: pointer; }
.message-starters button:hover, .message-starters button:focus-visible { background: var(--blue-soft); color: var(--ink); }
.prototype-contact-form { display: grid; gap: 10px; }
.prototype-contact-form > label:not(.prototype-privacy) { margin-top: 8px; font-size: 13px; }
.prototype-contact-form input[type="text"], .prototype-contact-form input[type="email"], .prototype-contact-form textarea { width: 100%; padding: 13px 14px; border: 1px solid #aab1a9; border-radius: 2px; background: #ffffff0a; color: var(--paper); font: 15px/1.5 var(--sans); }
.prototype-contact-form textarea { resize: vertical; }
.prototype-contact-form input::placeholder, .prototype-contact-form textarea::placeholder { color: #b7bdb6; opacity: 1; }
.prototype-contact-form input:focus-visible, .prototype-contact-form textarea:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 2px; }
.prototype-contact-form .field-hint { color: #d0d5cf; font-size: 12px; }
.prototype-privacy { display: flex; align-items: start; gap: 10px; margin: 12px 0; color: #e1e4df; font-size: 13px; }
.prototype-privacy input { margin-top: 3px; accent-color: var(--blue-soft); }
.prototype-privacy a, .form-privacy-note a { color: inherit; text-underline-offset: 3px; }
.form-privacy-note { margin: 8px 0 0; color: #d0d5cf; font-size: 12px; }
.prototype-submit { justify-self: start; padding: 13px 18px; border: 0; border-radius: 30px; background: var(--blue); color: #fff; font: 600 14px var(--sans); cursor: pointer; }
.prototype-submit:disabled { opacity: .55; cursor: wait; }
.prototype-form-status { min-height: 1.5em; color: #e1e4df; font-size: 13px; }
.prototype-form-status.is-error { color: #ffc7b8; }
.prototype-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 760px) {
  .detail-hero { min-height: 0; grid-template-columns: 1fr; gap: 34px; padding-top: 80px; padding-bottom: 70px; }
  .detail-content { grid-template-columns: 1fr; gap: 28px; }
  .detail-cta { align-items: flex-start; flex-direction: column; padding: 30px 24px; }
  .message-starters { padding: 12px; }
}

/* ——— 30/09: selezione demo (cuore, elenco, file unico, condivisione) ——— */
.player-fav { width: 44px; height: 44px; border: 1px solid #aab1a9; border-radius: 50%; background: none; color: inherit; font: 20px/1 var(--sans); cursor: pointer; }
.player-fav[aria-pressed="true"] { border-color: var(--blue-soft); color: var(--blue-soft); }
.player-fav:disabled { opacity: .45; cursor: default; }
.player-fav:focus-visible, .player-picks button:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 3px; }
.player-picks { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(170, 177, 169, .35); font-size: 13px; color: #d0d5cf; }
.player-picks[hidden] { display: none; }
.player-picks-head { margin: 0 0 8px; letter-spacing: .02em; }
.player-picks-list { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 4px; }
.player-picks-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.player-pick-title, .player-pick-remove { background: none; border: 0; padding: 4px 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.player-pick-title:hover { text-decoration: underline; }
.player-pick-remove { width: 28px; text-align: center; color: #aab1a9; font-size: 16px; }
.player-picks-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.player-picks-actions button { background: none; border: 1px solid #aab1a9; border-radius: 40px; color: inherit; padding: 9px 14px; font: 13px var(--sans); cursor: pointer; }
.player-picks-actions button[data-picks-download] { border-color: var(--blue-soft); }
.player-picks-actions button[data-picks-play] { border-color: var(--blue-soft); }
.player-picks-actions button[data-picks-play][aria-pressed="true"] { background: rgba(170, 177, 169, .16); }
.player-pick-title[aria-current] { color: #fff; font-weight: 600; }
.player-pick-title[aria-current]::before { content: "▸ "; }
.player-picks-actions button:disabled { opacity: .45; cursor: default; }

/* ——— 02/10: modulo contatti più chiaro e più grande, WhatsApp ——— */
.together-grid > div { max-width: 640px; }
.contact-form-wrap > p { font-size: 17px; }
.prototype-contact-form { gap: 12px; }
.prototype-contact-form > label:not(.prototype-privacy) { margin-top: 10px; font-size: 15px; color: #f1f3f5; }
.prototype-contact-form input[type="text"], .prototype-contact-form input[type="email"], .prototype-contact-form textarea { padding: 16px 18px; border: 1px solid #ffffff; border-radius: 4px; background: #ffffff; color: var(--ink); font: 17px/1.5 var(--sans); }
.prototype-contact-form input::placeholder, .prototype-contact-form textarea::placeholder { color: #7d8691; }
.prototype-contact-form input:focus-visible, .prototype-contact-form textarea:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 2px; }
.prototype-contact-form .field-hint { font-size: 13px; }
.prototype-privacy { font-size: 14px; }
.prototype-privacy input { width: 18px; height: 18px; }
.message-starters button { padding: 10px 14px; font-size: 14px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 6px; }
.prototype-submit { padding: 16px 26px; font-size: 16px; }
.whatsapp-link { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 30px; background: #25d366; color: #062b16; font: 600 16px var(--sans); text-decoration: none; }
.whatsapp-link:hover { background: #3ee07a; }
.whatsapp-link:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 3px; }
.whatsapp-icon { width: 22px; height: 22px; flex: none; }

/* 02/10: lucchetto discreto nel piede per entrare in gestione */
.footer-lock { display: inline-flex; align-items: center; padding: 6px; color: var(--muted); opacity: .45; }
.footer-lock:hover, .footer-lock:focus-visible { opacity: 1; color: var(--ink); }

/* 02/10: "?" accanto al cuore */
.player-help { width: 30px; height: 30px; border: 1px solid #aab1a9; border-radius: 50%; background: none; color: #d0d5cf; font: 600 14px/1 var(--sans); cursor: pointer; }
.player-help[aria-expanded="true"], .player-help:hover { border-color: var(--blue-soft); color: #fff; }
.player-help:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 3px; }
.player-help-text { max-width: 440px; margin: 14px 0 0; padding: 12px 14px; border-left: 2px solid var(--blue-soft); background: #ffffff0d; color: #e1e4df; font-size: 14px; line-height: 1.5; }
.player-help-text[hidden] { display: none; }

/* ——— 01/10: foto di sfondo della testata, una a caso per ogni visita ——— */
.hero::before { content: ""; position: absolute; inset: 0 0 0 38%; background: var(--hero-img, url("img/hero/bobina.jpg")) 35% 40% / auto 125% no-repeat; opacity: .34; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%); mask-composite: intersect; }
@media (max-width: 760px) { .hero::before { inset: 45% 0 0 0; opacity: .22; } }
@media (max-width: 420px) { .player-row { gap: 8px; } .player-play { gap: 10px; padding: 10px 12px 10px 8px; } .player-next { padding: 12px 10px; } .player-fav { width: 40px; height: 40px; } .player-help { position: relative; align-self: flex-start; width: 20px; height: 20px; margin-left: -16px; background: var(--ink); font-size: 11px; } }

/* ——— 01/10: tasto per tornare alla demo precedente ——— */
.player-prev { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid #aab1a9; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.player-prev:hover:not(:disabled) { border-color: var(--blue-soft); color: #fff; }
.player-prev:disabled { opacity: .35; cursor: default; }
.player-prev:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 3px; }
@media (max-width: 420px) {
  .player-prev { width: 36px; height: 36px; }
}

/* ——— 02/10: accessibilità — numerino leggibile nel bottone Contatti ——— */
.topbar .nav-contact .nav-number { color: #c9d3e0; }