/* ============================================================================
   M&D Mentoring — pagina pubblica di presentazione (public/landing.html),
   servita alla radice del dominio (mdmentoring.it/) dal 6/10/2026.
   Foglio di stile dedicato: la pagina è pubblica e indipendente dall'area
   riservata (assets/css/style.css), ma ne usa gli stessi colori, così chi
   passa dalla presentazione all'area resta nello stesso ambiente.
   Non contiene contenuto del metodo — solo presentazione generale e contatti.
   ============================================================================ */
/* Colori, ombre e misure arrivano da tokens.css (caricato prima di questo
   file): la pagina pubblica e l'area sono lo stesso prodotto (revisione,
   ondata 1, R-085). Qui resta solo il raggio delle schede della landing. */
:root{ --radius:14px; }
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{
  font-family:"IBM Plex Sans",system-ui,sans-serif; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{font-family:"Fraunces",Georgia,serif; font-weight:600; line-height:1.15; margin:0 0 .5em}
a{color:var(--primary)}
a:focus-visible,.btn:focus-visible{outline:var(--focus-ring); outline-offset:var(--focus-offset)}
.wrap{max-width:960px; margin:0 auto; padding:0 20px}
.section{padding:64px 0}
.section.alt{background:var(--surface-2)}
.center{text-align:center}

/* ---- barra in alto: l'accesso all'area è sempre a portata di dito ---- */
.topbar{
  position:sticky; top:0; z-index:10;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-in{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; padding-bottom:12px}
.brand{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
  font-family:"Fraunces",serif; font-weight:600; font-size:var(--fs-1); letter-spacing:.01em; white-space:nowrap;
}

/* ---- hero ---- */
.hero{padding:64px 0 56px; text-align:center}
.k{
  display:inline-block; font-size:var(--fs-meta); letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  color:var(--primary); background:var(--primary-soft); padding:4px 12px; border-radius:var(--radius-pill); margin-bottom:18px;
}
.hero h1{font-size:clamp(32px,5.5vw,52px); max-width:760px; margin:0 auto 18px}
.hero .lead{font-size:var(--fs-1); color:var(--ink-soft); max-width:580px; margin:0 auto 32px}
.hero-login{margin:28px 0 0; font-size:var(--fs-0); color:var(--ink-soft)}
.hero-login a{font-weight:600}

/* ---- pulsanti ---- */
.ctas{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border-radius:var(--radius-pill); min-height:48px;
  font:600 15px/1.2 "IBM Plex Sans",system-ui,sans-serif; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--primary); color:var(--on-primary); box-shadow:var(--shadow)}
.btn.action{background:var(--action); color:var(--on-action); box-shadow:var(--shadow)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--primary); color:var(--primary)}
.btn.small{padding:9px 16px; min-height:var(--tap); font-size:var(--fs-meta)}
.btn.big{padding:16px 28px; font-size:var(--fs-0)}

/* ---- griglia "cosa facciamo" ---- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px}
@media (max-width:760px){.grid3{grid-template-columns:1fr}}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 22px; box-shadow:var(--shadow);
}
.card .num{
  display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:var(--primary-soft); color:var(--primary); font-weight:700; font-size:var(--fs-0); margin-bottom:14px;
}
.card h3{font-size:var(--fs-1); margin-bottom:10px}
.card p{margin:0; color:var(--ink-soft); font-size:var(--fs-0)}

/* ---- trasparenza ---- */
.transparency{
  border:1px solid var(--line); border-left:4px solid var(--primary); border-radius:var(--radius);
  padding:24px 26px; background:var(--surface); font-size:var(--fs-0); color:var(--ink-soft);
}
.transparency p{margin:0}
.transparency b{color:var(--ink)}

/* ---- contatti ---- */
.contact-box{text-align:center}
.contact-box h2{margin-bottom:10px}
.contact-box p{color:var(--ink-soft); margin:0 0 28px}

/* ---- area riservata ---- */
.access{
  display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:calc(var(--radius) + 4px);
  padding:36px; box-shadow:var(--shadow);
}
.access h2{font-size:clamp(24px,3.5vw,30px)}
.access-text p{margin:0; color:var(--ink-soft)}
.access-actions{display:flex; flex-direction:column; gap:12px}
.access-actions .note{margin:4px 0 0; font-size:var(--fs-meta); color:var(--ink-soft); text-align:center}
@media (max-width:760px){
  .access{grid-template-columns:1fr; padding:26px 22px; gap:22px}
}

/* ---- footer ---- */
footer{
  padding:36px 0 48px; border-top:1px solid var(--line); font-size:var(--fs-meta); color:var(--ink-soft);
}
footer .wrap{display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center}
footer a{color:var(--ink-soft); text-decoration:underline}
footer a:hover{color:var(--primary)}

@media (max-width:480px){
  .section{padding:44px 0}
  .hero{padding:44px 0 40px}
  .ctas .btn{width:100%}
  .ctas{flex-direction:column}
  .brand{font-size:var(--fs-1)}
  .brand img{width:24px; height:24px}
}
@media (prefers-reduced-motion: reduce){ .btn{transition:none} .btn:hover{transform:none} }

/* ============================================================================
   Arricchimento del 24/10/2026: pagina d'appoggio prima della prima chiamata.
   Ordine: come funziona e cosa non è → ti riconosci → tre modi e per chi non è
   → non sei da solo → cosa succede dopo → domande → contatto.
   ============================================================================ */
html{scroll-behavior:smooth}
:target{scroll-margin-top:76px}
.topbar .btn{white-space:nowrap}
.wrap.narrow{max-width:740px}
.section h2{font-size:clamp(26px,4vw,34px)}
.hero .lead b{color:var(--ink)}
.hero .lead.strong{color:var(--ink); font-weight:600; margin-top:-16px; margin-bottom:24px}
.sub{color:var(--ink-soft); max-width:640px; margin:0 auto; font-size:var(--fs-0)}
.note-center{text-align:center; color:var(--ink-soft); font-size:var(--fs-0); max-width:640px; margin:28px auto 0}

/* ---- «in breve» sotto il titolo ---- */
.facts{list-style:none; padding:0; margin:0 auto 30px; max-width:640px; display:flex; flex-wrap:wrap; gap:8px 10px; justify-content:center}
.facts li{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-meta); font-weight:600; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-pill); padding:6px 14px}
.facts li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--primary); flex:none}

/* ---- come funziona ---- */
.steps3{list-style:none; padding:0; margin:32px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.steps3 li{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px; box-shadow:var(--shadow)}
.steps3 .num{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:var(--primary-soft); color:var(--primary); font-weight:700; font-size:var(--fs-0); margin-bottom:14px}
.steps3 h3{font-size:var(--fs-1); margin-bottom:8px}
.steps3 p{margin:0; color:var(--ink-soft); font-size:var(--fs-0)}
.isnt{margin:24px auto 0; max-width:760px; background:var(--surface); border:1px solid var(--line);
  border-top:4px solid var(--action); border-radius:var(--radius); padding:22px 24px}
.isnt h3{font-size:var(--fs-1); margin-bottom:12px}
.isnt ul{list-style:none; padding:0; margin:0}
.isnt li{position:relative; padding-left:30px; margin:0 0 10px; font-size:var(--fs-0); color:var(--ink-soft)}
.isnt li:last-child{margin-bottom:0}
.isnt li b{color:var(--ink)}
.isnt li::before{content:"\2715"; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center; font-size:var(--fs-meta); font-weight:700; line-height:1;
  background:color-mix(in srgb, var(--action) 16%, transparent); color:var(--action)}
.disclaimer{margin:24px auto 0; max-width:720px; font-size:var(--fs-meta); color:var(--ink-soft); text-align:center}

/* ---- ti riconosci? ---- */
.personas{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:32px}
.persona{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; border-top:3px solid var(--primary-soft)}
.persona h3{font-size:var(--fs-1); margin-bottom:6px; color:var(--primary)}
.persona p{margin:0; font-size:var(--fs-0); color:var(--ink-soft)}

/* ---- per chi non è ---- */
.notfor{margin:26px auto 0; max-width:760px; border:1px solid var(--line); border-left:4px solid var(--action);
  border-radius:var(--radius); padding:22px 24px; background:var(--surface)}
.notfor h3{font-size:var(--fs-1); margin-bottom:10px}
.notfor ul{list-style:none; padding:0; margin:0}
.notfor li{position:relative; padding-left:18px; margin:0 0 6px; color:var(--ink-soft); font-size:var(--fs-0)}
.notfor li::before{content:"–"; position:absolute; left:0; color:var(--action); font-weight:700}
.notfor p{margin:12px 0 0; font-size:var(--fs-meta); color:var(--ink)}

/* ---- non sei da solo ---- */
.checks{list-style:none; padding:0; margin:28px 0 0}
.checks li{position:relative; padding:14px 0 14px 38px; border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:var(--fs-0)}
.checks li:last-child{border-bottom:0}
.checks li b{color:var(--ink)}
.checks li::before{content:"\2713"; position:absolute; left:0; top:14px; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font-size:var(--fs-meta); font-weight:700; background:var(--primary); color:var(--on-primary)}

/* ---- cosa succede dopo ---- */
.steps{list-style:none; counter-reset:passo; padding:0; margin:28px 0 0}
.steps li{counter-increment:passo; position:relative; padding:0 0 22px 52px; color:var(--ink-soft); font-size:var(--fs-0)}
.steps li b{display:block; color:var(--ink); font-size:var(--fs-0); margin-bottom:2px}
.steps li::before{content:counter(passo); position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-weight:700; font-size:var(--fs-0); background:var(--surface); color:var(--primary); border:2px solid var(--primary)}
.steps li::after{content:""; position:absolute; left:16px; top:38px; bottom:4px; width:2px; background:var(--line)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps li:last-child::before{background:var(--primary); color:var(--on-primary)}

/* ---- domande ---- */
.faq{margin-top:28px; display:flex; flex-direction:column; gap:10px}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius)}
.faq summary{cursor:pointer; list-style:none; position:relative; padding:16px 48px 16px 20px;
  font-weight:600; font-size:var(--fs-0); color:var(--ink); min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-size:var(--fs-2); font-weight:400; color:var(--primary); line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq summary:focus-visible{outline:var(--focus-ring); outline-offset:var(--focus-offset); border-radius:var(--radius)}
.faq details p{margin:0; padding:0 20px 18px; color:var(--ink-soft); font-size:var(--fs-0)}

/* ---- contatto ---- */
.contact-box .transparency{margin:40px auto 0; max-width:760px; text-align:left}

@media (max-width:760px){ .steps3,.personas{grid-template-columns:1fr} }
@media (max-width:480px){
  .wrap{padding:0 16px}
  .facts li{font-size:var(--fs-meta); padding:5px 12px}
  .isnt,.notfor,.persona{padding:18px}
  .faq summary{padding:14px 44px 14px 16px; font-size:var(--fs-0)}
  .faq details p{padding:0 16px 16px}
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

/* «Ti riconosci?» come frasi da toccare: dieci schede aperte occupavano
   quasi due schermate di telefono (prova a 360px, 24/10/2026) */
.personas{align-items:start}
.persona{padding:0; border-top-width:1px}
.persona summary{cursor:pointer; list-style:none; position:relative; padding:14px 44px 14px 18px; min-height:48px;
  font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:var(--fs-1); color:var(--primary)}
.persona summary::-webkit-details-marker{display:none}
.persona summary::after{content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%); font:400 22px/1 "IBM Plex Sans",system-ui,sans-serif}
.persona[open] summary::after{content:"\2212"}
.persona[open]{border-color:var(--primary)}
.persona summary:focus-visible{outline:var(--focus-ring); outline-offset:var(--focus-offset); border-radius:var(--radius)}
.persona p{padding:0 18px 16px}
@media (max-width:480px){ .persona{padding:0} }
@media (max-width:760px){
  .steps3{gap:12px}
  .steps3 li{display:grid; grid-template-columns:32px 1fr; column-gap:14px; padding:18px}
  .steps3 .num{margin:0; grid-row:span 2}
}
@media (max-width:400px){
  .topbar-in{gap:8px}
  .brand{font-size:var(--fs-0); gap:8px}
  .topbar .btn.small{padding:8px 12px; font-size:var(--fs-meta)}
}
@media (max-width:360px){ .topbar .wrap{padding:0 12px} .brand img{display:none} }

/* frase sul lavoro da remoto sotto la presentazione (Michael, 24/10/2026) */
.hero .lead.remote{margin-top:-16px}

/* ---- chi sono: la foto e due parole di Michael (24/10/2026) ---- */
.me{display:grid; grid-template-columns:180px 1fr; gap:32px; align-items:start;
  background:var(--surface); border:1px solid var(--line); border-radius:calc(var(--radius) + 4px); padding:32px; box-shadow:var(--shadow)}
.me-foto{width:180px; height:180px; border-radius:50%; object-fit:cover; border:4px solid var(--primary-soft); display:block}
.me-testo h2{margin-bottom:12px}
.me-testo p{margin:0 0 12px; color:var(--ink-soft)}
.me-firma{color:var(--ink) !important; font-weight:600}
@media (max-width:640px){
  .me{grid-template-columns:1fr; justify-items:center; text-align:center; padding:26px 20px; gap:18px}
  .me-foto{width:140px; height:140px}
  .me-testo{text-align:left}
  .me-testo .k,.me-testo h2{display:block; text-align:center}
  .me-testo .k{width:max-content; margin-left:auto; margin-right:auto}
}
.me-domanda{margin:4px 0 16px; padding:12px 16px; border-left:4px solid var(--primary); background:var(--primary-soft);
  border-radius:0 var(--radius) var(--radius) 0; font-family:"Fraunces",Georgia,serif; font-size:var(--fs-1); font-style:italic; color:var(--ink); line-height:1.35}