*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:           #f5f3f0;
      --bg-card:      #f5f3f0;
      --fg:           #12103a;
      --muted:        #5c5880;
      --accent-a:     #b8860b;   /* dorato */
      --accent-b:     #a8472e;   /* mattone */
      --accent-purple:#a8472e;   /* mattone */
      --accent-gold:  #f0c040;
      --border:       #e0d5b0;
      --border-light: #ede8cc;
      --radius:       10px;
      --max-width:    1000px;
      --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
      --font-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
      --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
    }

    html { scroll-behavior: smooth; }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    }

    a { color: inherit; text-decoration: none; }
    a:focus { outline: 2px solid var(--accent-a); outline-offset: 3px; }
    img { display: block; max-width: 100%; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--fg);
      font-family: var(--font-sans);
      font-size: 1.02rem;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      font-feature-settings: "kern" 1, "liga" 1;
      letter-spacing: -0.003em;
      display: flex;
      flex-direction: column;
    }

    p, li { line-height: 1.8; text-align: left; }
    p { margin-bottom: 1rem; }
    ul { line-height: 1.8; }

    main { flex: 1; display: flex; flex-direction: column; padding-bottom: 3rem; }

    /* Skip link */
    .skip-link { position: absolute; left: 1rem; top: -100%; background: var(--accent-a); color: #fff; padding: .5rem 1rem; font-size: .875rem; z-index: 9999; transition: top 0.15s; }
    .skip-link:focus { top: 0.5rem; }

    :focus-visible { outline: 2px solid var(--accent-a); outline-offset: 4px; border-radius: 3px; }
    :focus:not(:focus-visible) { outline: none; }

    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

    /* Layout */
    .wrap { max-width: var(--max-width); margin: 0 auto; width: 100%; padding: 0 2rem; }

    /* Header */
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: .7rem 2rem;
      border-bottom: 1px solid var(--border-light);
    }
    .brand { display: flex; align-items: center; }
    .logo { display: flex; align-items: center; }
    .logo img { height: 124px; width: auto; display: block; }

    /* Nav principale */
    #main-nav { display: flex; align-items: center; }
    .nav-links {
      display: flex;
      gap: 0;
      list-style: none;
      align-items: center;
      flex-wrap: nowrap;
    }
    .nav-links a {
      font-size: .74rem;
      font-weight: 500;
      letter-spacing: .02em;
      color: var(--muted);
      padding: .35rem .6rem;
      display: inline-flex;
      align-items: center;
      min-height: 40px;
      white-space: nowrap;
      position: relative;
      transition: color 0.2s;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: 6px;
      left: .6rem;
      right: .6rem;
      height: 1px;
      background: var(--accent-a);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.25s var(--ease-out);
    }
    .nav-links a:hover { color: var(--fg); }
    .nav-links a:hover::after { transform: scaleX(1); }

    /* Mobile */
    @media (max-width: 640px) {
      header {
        flex-direction: column;
        align-items: center;
        padding: 1.2rem 1rem .8rem;
        gap: .8rem;
        border-bottom: 1px solid var(--border-light);
      }
      .logo img { height: 88px; }
      #main-nav { width: 100%; }
      .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px;
        row-gap: 2px;
      }
      .nav-links a {
        font-size: .72rem;
        padding: .35rem .6rem;
        min-height: 36px;
        letter-spacing: .03em;
      }
      .nav-links a::after { display: none; }
    }

    /* Hero */
    .hero { display: block; margin-top: 0; padding: 3rem 2rem 0; }
    @media (max-width: 640px) { .hero { padding: 2rem 1.2rem 0; } }
    .hero-right { display: none; }

    /* Typography */
    h1 {
      font-family: var(--font-serif);
      font-size: clamp(2.6rem, 5.5vw, 3.6rem);
      font-weight: 600;
      line-height: 1.08;
      letter-spacing: -0.015em;
      margin: .5rem 0 1.2rem;
      color: var(--fg);
    }
    h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.7rem, 3vw, 2.3rem);
      font-weight: 600;
      line-height: 1.18;
      margin-top: 2.5rem;
      margin-bottom: 1rem;
      letter-spacing: -0.01em;
      color: var(--fg);
    }
    h3 {
      font-family: var(--font-serif);
      font-size: 1.45rem;
      font-weight: 600;
      line-height: 1.25;
      letter-spacing: -0.005em;
      color: var(--fg);
    }
    h4 {
      font-family: var(--font-sans);
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--accent-a);
      margin-bottom: .5rem;
    }
    @media (max-width: 520px) { h1 { font-size: 2rem; } }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .7rem;
      font-size: .72rem;
      font-weight: 500;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 1rem;
    }
    .eyebrow::before { content: ''; width: 1.5rem; height: 1px; background: var(--accent-gold); flex-shrink: 0; }

    .muted { color: var(--muted); font-size: .95rem; line-height: 1.75; }

    /* Sections */
    section {
      margin-top: 3rem;
      padding: 3rem 4rem;
      border-radius: var(--radius);
      background: var(--bg-card);
      border: 1px solid var(--border-light);
      box-shadow: 0 1px 4px rgba(28,22,18,.04);
    }
    /* larghezza di lettura confortevole per il corpo testo */
    section p, section li, section blockquote { max-width: 68ch; }
    /* Testo giustificato dove possibile */
    .hero-head p, section p, .tab-panel p, .tab-panel li {
      text-align: justify;
      text-justify: inter-word;
      hyphens: auto;
    }
    /* No giustificato dove stona: heading, centrati, note, prezzi */
    .cta-band p, .hero-signup p, .pcard p, blockquote p,
    section[style*="text-align:center"] p, .note {
      text-align: left;
      hyphens: manual;
    }
    .cta-band p { text-align: center; }
    section > h1, section > h2 { max-width: 68ch; }
    section:first-of-type {
      margin-top: 0;
      padding: 0 0 2rem;
      background: transparent;
      border: 0;
      box-shadow: none;
    }
    section#canto-moderno,
    section#percorso-individuale-essere-voce-bridge,
    section[aria-labelledby="testi-title"] {
      background: #fffdf9;
      border: 1px solid var(--border);
    }
    section#docente {
      background: #fffdf9;
      border: 1px solid var(--border);
      border-top: 3px solid var(--accent-a);
    }
    section#docente h1, section#docente h2 {
      font-style: italic;
      font-weight: 500;
      color: var(--accent-b);
      margin-top: 0;
    }
    @media (max-width: 720px) { section { padding: 2rem 1.6rem; margin-top: 2rem; } }
    @media (max-width: 480px) { section { padding: 1.6rem 1.3rem; margin-top: 1.5rem; } }

    /* Tabs */
    .tabs { display: flex; gap: 6px; flex-wrap: wrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
    .tab {
      background: var(--bg-card);
      border: 1px solid var(--border);
      padding: .55rem 1.1rem;
      border-radius: 999px;
      font-size: .75rem;
      font-weight: 500;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
      cursor: pointer;
      transition: all 0.2s var(--ease-out);
      text-decoration: none;
      display: inline-block;
      flex-shrink: 0;
      white-space: nowrap;
    }
    .tab.tab--active {
      background: var(--accent-a);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 4px 14px rgba(184,134,11,.28);
    }
    .tab:focus { outline: 2px solid var(--accent-a); outline-offset: 3px; }
    .tab-panel { padding: 0; margin: 0; }
    .tab-panel h3 { background: linear-gradient(90deg, var(--accent-a), var(--accent-b)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; }
    @media (max-width: 640px) {
      .tabs { flex-direction: column; overflow-x: visible; flex-wrap: wrap; }
      .tab { white-space: normal; text-align: left; border-radius: 6px; width: 100%; }
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
      color: #fff;
      border: 0;
      padding: .7rem 1.6rem;
      border-radius: 999px;
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(168,71,46,.22);
      transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
      min-height: 44px;
    }
    .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(168,71,46,.3); }
    .btn:focus-visible { outline: 3px solid var(--accent-b); outline-offset: 3px; }
    .btn.secondary { background: transparent; color: var(--fg); border: 1px solid var(--border); box-shadow: none; }
    .btn.secondary:hover { background: var(--border-light); color: var(--fg); box-shadow: none; }
    .btn--lg { padding: .95rem 2.2rem; font-size: .85rem; min-height: 52px; }
    @media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

    /* CTA row */
    .cta-row { display: flex; gap: 10px; margin-top: 1.2rem; flex-wrap: wrap; }

    /* ── Hero (above-the-fold) ── */
    .hero-head { max-width: 32ch; }
    .hero-head h1 { margin: .2rem 0 .8rem; }
    .hero-value { font-size: 1.15rem; color: var(--muted); max-width: 46ch; margin-bottom: 1.4rem; }
    .hero-meta { display: flex; gap: .5rem 1.1rem; flex-wrap: wrap; font-size: .82rem; color: var(--muted); margin-top: 1.4rem; }
    .hero-meta span { display: inline-flex; align-items: center; gap: .4rem; }
    .hero-meta span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-a); }

    /* Hero: mobile-first 1 colonna, 2 colonne solo su desktop largo */
    .hero-split { grid-template-columns: 1fr; gap: 2rem; }
    @media (min-width: 900px) { .hero-split { grid-template-columns: 1.15fr 0.85fr; gap: 2.8rem; } }
    .hero-signup {
      background: linear-gradient(135deg, #fffdf9 0%, #fbf3e6 100%);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1.4rem 1.4rem .8rem;
      box-shadow: 0 4px 16px rgba(28,22,18,.05);
    }
    .hero-signup iframe { height: 420px; }
    @media (max-width: 480px) { .hero-signup iframe { height: 460px; } }

    /* ── Trust chips (autorità/credenziali) ── */
    .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.2rem 0; padding: 0; list-style: none; }
    .chips li {
      font-size: .78rem; font-weight: 500; letter-spacing: .01em;
      color: var(--accent-b);
      background: #fff; border: 1px solid var(--border);
      padding: .4rem .85rem; border-radius: 999px; line-height: 1.3; max-width: none;
    }

    /* ── Split 2-col (media + prosa) — Gestalt: proximity + figure/ground ── */
    .split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 2.4rem; align-items: start; }
    .split > img { border-radius: var(--radius); width: 100%; height: auto; object-fit: cover; position: sticky; top: 1.5rem; }
    @media (max-width: 760px) {
      .split { grid-template-columns: 1fr; gap: 1.4rem; }
      .split > img { position: static; max-width: 460px; margin: 0 auto; }
    }

    /* ── Percorsi cards (scelta chiara, similarity) ── */
    .pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 1.4rem; }
    @media (max-width: 860px) { .pcards { grid-template-columns: 1fr; } }
    .pcard {
      display: flex; flex-direction: column;
      padding: 1.6rem 1.5rem;
      border-radius: var(--radius);
      background: #fff; border: 1px solid var(--border);
      transition: transform .2s var(--ease-out), box-shadow .2s, border-color .2s;
    }
    .pcard:hover, .pcard:focus-within { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(28,22,18,.08); border-color: var(--accent-a); }
    .pcard h3 { font-size: 1.25rem; margin-bottom: .4rem; }
    .pcard p { font-size: .95rem; color: var(--muted); margin-bottom: 1rem; flex: 1; max-width: none; }
    .pcard .pcard-link { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-b); display: inline-flex; align-items: center; gap: .4rem; }
    .pcard .pcard-price { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; color: var(--accent-a); margin-bottom: .6rem; }
    @media (prefers-reduced-motion: reduce) { .pcard:hover, .pcard:focus-within { transform: none; } }

    /* ── Reviews 2-up (social proof precoce) ── */
    .reviews-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    @media (max-width: 720px) { .reviews-2 { grid-template-columns: 1fr; } }
    .reviews-2 blockquote { margin: 0; height: 100%; }

    /* ── Qualifica: è per te / non è per te ── */
    .qual { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 1rem; }
    @media (max-width: 720px) { .qual { grid-template-columns: 1fr; } }
    .qual-col { padding: 1.4rem 1.5rem; border-radius: var(--radius); border: 1px solid var(--border); background: #fff; }
    .qual-col.yes { border-top: 3px solid var(--accent-a); }
    .qual-col.no { border-top: 3px solid var(--muted); }
    .qual-col h4 { color: var(--fg); }
    .qual-col ul { margin: .4rem 0 0; padding-left: 1.1rem; }
    .qual-col li { font-size: .93rem; margin-bottom: .35rem; max-width: none; }

    /* ── Blocco chiusura CTA (ripetuta a fine pagina) ── */
    .cta-band {
      text-align: center;
      background: linear-gradient(135deg, #fffdf9 0%, #fbf3e6 100%);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 2.6rem 2rem;
    }
    .cta-band h2 { margin-top: 0; }
    .cta-band p { max-width: 52ch; margin-left: auto; margin-right: auto; color: var(--muted); }

    /* Video */
    .video-wrap { position: relative; width: 100%; padding-bottom: 56.25%; border-radius: var(--radius); overflow: hidden; margin-top: 12px; }
    .video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

    /* Grid */
    .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 12px; }
    @media (max-width: 920px) { .grid-3 { grid-template-columns: 1fr; } }
    .feature {
      padding: 1.2rem 1.4rem;
      border-radius: var(--radius);
      background: var(--bg-card);
      border: 1px solid var(--border-light);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .feature:hover { border-color: var(--border); box-shadow: 0 4px 16px rgba(28,22,18,.06); }

    /* Blockquote */
    blockquote {
      padding: 1.4rem 1.6rem;
      border-left: 3px solid var(--accent-a);
      background: var(--border-light);
      border-radius: 0 var(--radius) var(--radius) 0;
      line-height: 1.8;
      margin: 1.4rem 0;
      font-family: var(--font-sans);
      font-size: .97rem;
      font-style: normal;
      color: var(--fg);
    }
    blockquote p { margin-bottom: .8rem; text-align: left; }
    blockquote strong { color: var(--accent-a); font-size: .85rem; letter-spacing: .04em; }

    details { padding: 10px; border-radius: var(--radius); }

    /* Inputs */
    label { font-size: .78rem; color: var(--muted); }
    input, select { width: 100%; padding: .6rem .8rem; border-radius: 6px; border: 1px solid var(--border); font-size: .95rem; background: var(--bg-card); color: var(--fg); }
    .signup-footer { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
    #form-status { color: var(--muted); font-size: .9rem; }

    /* Footer */
    footer {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-top: auto;
      color: var(--muted);
      font-size: .85rem;
      border-top: 1px solid var(--border-light);
      padding: 2rem 2rem 1.5rem;
      background: transparent;
    }
    @media (max-width: 720px) { footer { flex-direction: column; align-items: flex-start; padding: 1.5rem 1.2rem; gap: 12px; } }
    footer h3 { font-size: 1.15rem; }
    .note { font-size: .85rem; color: var(--muted); line-height: 1.6; }
    footer a { color: var(--accent-b); }
    footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

    /* Teacher profile */
    .teacher {
      margin-top: 1.5rem;
      padding: 2rem 2rem 2.5rem;
      border-radius: var(--radius);
      background: var(--bg-card);
      border: 1px solid var(--border-light);
      color: var(--fg);
      box-shadow: 0 1px 4px rgba(28,22,18,.04);
    }
    .teacher .profile {
      width: 130px; height: 130px;
      border-radius: 50%;
      margin: 0 auto;
      background: var(--border-light);
      display: flex; align-items: center; justify-content: center;
      font-size: 2.8rem; font-weight: 400;
      border: 2px solid var(--border);
    }
    .teacher h2 { font-size: 1.5rem; margin: 1rem 0 .5rem; text-align: center; font-weight: 400; font-family: var(--font-serif); color: var(--fg); }
    .teacher .lead { font-size: 1rem; text-align: center; color: var(--muted); }
    .teacher .vision { background: var(--bg); padding: 1rem 1.2rem; border-radius: var(--radius); margin-top: .8rem; border: 1px solid var(--border-light); }
    .teacher .vision ul { margin: .5rem 0 0; padding-left: 1.2rem; list-style: disc; }
    .teacher p { color: var(--fg); line-height: 1.75; margin-bottom: 1rem; }
    .teacher strong { font-weight: 600; color: var(--fg); }
    .teacher ul { color: var(--fg); line-height: 1.75; }

    @media (max-width: 720px) {
      .tab.tab--active {
        border-left: 3px solid var(--accent-a);
        border-top: 1px solid var(--border);
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding-left: 1rem;
      }
    }
    @media (max-width: 480px) {
      .btn { width: 100%; display: flex; justify-content: center; }
      .teacher .profile { width: 110px; height: 110px; font-size: 2.2rem; }
      .teacher h2 { font-size: 1.3rem; }
      .hero { padding: 1.2rem .8rem 0; }
      #panel-percorso h4, #panel-lezioni h4 { font-size: 1rem; margin-top: 1rem; }
      #panel-percorso h3, #panel-lezioni h3 { font-size: 1.2rem; }
    }