.article-page{background:#f8f5ea;color:#062d21}.article-page *{box-sizing:border-box}.article-container{width:min(1440px,calc(100% - 56px));margin-inline:auto}.article-page svg{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.article-hero{padding:28px 0 34px;background:linear-gradient(180deg,#fff 0,#fffdf8 56%,#f8f5ea 100%)}.breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 28px;color:#6b7973;font-size:14px}.breadcrumbs a{color:#243d35;text-decoration:none}.article-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);gap:34px;align-items:stretch}.article-hero-copy{padding:36px 0 30px}.article-kicker{display:flex;align-items:center;gap:9px;margin:0 0 18px;color:#008650;font:900 13px/1.2 Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase}.article-kicker span{width:12px;height:12px;border:4px solid #c7f7dc;border-radius:999px;background:#00d982}.article-hero h1{max-width:760px;margin:0;font:900 clamp(46px,4.6vw,72px)/1.02 Poppins,sans-serif;letter-spacing:-.052em}.article-hero h1 em{display:block;color:#149855;font-style:normal}.article-intro{max-width:690px;margin:22px 0 0;color:#32463f;font-size:clamp(18px,1.5vw,22px);line-height:1.5}.article-author-row{display:flex;flex-wrap:wrap;gap:22px 34px;align-items:center;margin-top:28px}.author-chip,.meta-chip{display:flex;align-items:center;gap:11px}.author-chip strong,.author-chip small{display:block}.author-chip strong{font-size:14px}.author-chip small{margin-top:2px;color:#60726b;font-size:12px}.author-avatar{position:relative;width:44px;height:44px;overflow:hidden;border-radius:50%;background:#dff6e9;flex:none}.author-avatar img{position:absolute;left:0;top:0;width:220px;max-width:none;height:44px;object-fit:contain;object-position:left center}.meta-chip{color:#183a30;font-size:13px;font-weight:800}.meta-chip svg{width:20px;height:20px}.article-cover{min-height:470px;margin:0;overflow:hidden;border-radius:0 0 24px 24px;background:#e7ece9}.article-cover img{width:100%;height:100%;object-fit:cover;object-position:center}.benefit-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:0;border:1px solid #dfe7e2;border-radius:18px;background:#fff;box-shadow:0 16px 34px rgba(6,45,33,.08);overflow:hidden}.benefit-strip>div{display:flex;gap:14px;align-items:center;padding:22px 24px;border-right:1px solid #e5ebe7}.benefit-strip>div:last-child{border-right:0}.benefit-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#eaf9f0;color:#05874e;flex:none}.benefit-icon svg{width:24px;height:24px}.benefit-strip strong,.benefit-strip small{display:block}.benefit-strip strong{font:800 15px/1.2 Poppins,sans-serif}.benefit-strip small{margin-top:5px;color:#5f6e68;font-size:12px;line-height:1.35}.article-body-section{padding:42px 0 76px}.article-layout{display:grid;grid-template-columns:230px minmax(0,1fr) 285px;gap:28px;align-items:start}.left-rail,.right-rail{display:grid;gap:18px}.article-toc,.rail-cta,.share-card,.side-cta,.related-mini,.summary-box,.three-cards>div,.budget-table,.tip-box,.habit-grid>div,.faq-list,.author-box{border:1px solid #dfe7e2;border-radius:16px;background:#fff;box-shadow:0 8px 20px rgba(6,45,33,.05)}.article-toc{position:sticky;top:108px;padding:18px}.article-toc summary{cursor:pointer;list-style:none;font:800 16px/1.2 Poppins,sans-serif}.article-toc summary::-webkit-details-marker{display:none}.article-toc ol{display:grid;gap:13px;margin:18px 0 0;padding-left:22px}.article-toc li{padding-left:4px;color:#008650;font-weight:800}.article-toc a{color:#16382d;text-decoration:none;font-size:13px;line-height:1.35}.rail-cta{padding:20px;background:linear-gradient(145deg,#f2fbf5,#fff)}.rail-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#e0f6e8;color:#0a8b51;font-weight:900}.rail-cta h2{margin:14px 0 8px;font:800 22px/1.12 Poppins,sans-serif;color:#0b7142}.rail-cta p{margin:0 0 16px;font-size:13px;line-height:1.55}.rail-cta a,.side-cta a,.inline-cta a,.final-banner a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:10px;background:#05894f;color:#fff;font-weight:900;text-decoration:none}.article-content{min-width:0;color:#18352d;font-size:16px;line-height:1.65}.summary-box{display:flex;gap:14px;padding:18px 20px;background:linear-gradient(90deg,#f1fbf4,#fff)}.summary-box>span{width:5px;border-radius:5px;background:#17aa62}.summary-box strong{color:#087845}.summary-box p{margin:6px 0 0}.article-content h2{scroll-margin-top:120px;margin:34px 0 12px;font:900 clamp(25px,2.1vw,34px)/1.18 Poppins,sans-serif;letter-spacing:-.025em}.article-content h3{font:800 17px/1.3 Poppins,sans-serif}.article-content p{margin:0 0 16px}.check-list{display:grid;gap:8px;margin:14px 0 26px;padding:0;list-style:none}.check-list li{position:relative;padding-left:28px}.check-list li::before{content:'✓';position:absolute;left:0;top:1px;display:grid;place-items:center;width:19px;height:19px;border:1px solid #19a85f;border-radius:50%;color:#0d9553;font-size:12px;font-weight:900}.three-cards,.habit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.three-cards>div,.habit-grid>div{padding:18px;text-align:center}.three-cards span,.habit-grid span{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 10px;border-radius:50%;background:#e9f8ee;color:#0a8d51;font-size:22px}.three-cards h3,.habit-grid h3{margin:0 0 7px}.three-cards p,.habit-grid p{margin:0;color:#5c6d67;font-size:13px;line-height:1.45}.steps-list{display:grid;gap:12px;padding-left:22px}.budget-table{overflow:auto;padding:12px}.budget-table table{width:100%;border-collapse:collapse;min-width:560px}.budget-table th,.budget-table td{padding:13px 12px;border-bottom:1px solid #e4e9e6;text-align:left}.budget-table th{font-size:12px}.budget-table tfoot td{border-bottom:0;background:#eaf8ee;font-weight:900}.tip-box{display:flex;gap:12px;margin:16px 0 30px;padding:16px;background:#fff8e8}.tip-box span{font-size:22px}.tip-box strong{display:block}.tip-box p{margin:4px 0 0;font-size:13px}.habit-grid{grid-template-columns:repeat(4,1fr)}.habit-grid>div{text-align:left}.habit-grid span{margin:0 0 10px}.inline-cta{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:16px;margin:32px 0;padding:24px 26px;border-radius:16px;background:linear-gradient(135deg,#eefaf2,#f9fffb);overflow:hidden}.inline-cta h2{margin:0 0 10px;color:#0a7444}.inline-cta p{max-width:460px}.inline-cta img{width:100%;max-height:190px;object-fit:contain}.faq-section h2{margin-top:36px}.faq-list{overflow:hidden}.faq-list details{padding:15px 18px;border-bottom:1px solid #e6ebe8}.faq-list details:last-child{border-bottom:0}.faq-list summary{cursor:pointer;font-weight:800}.faq-list p{margin:10px 0 0;color:#596c65}.author-box{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;margin-top:24px;padding:20px}.author-avatar--large{width:54px;height:54px}.author-avatar--large img{width:270px;height:54px}.author-box strong,.author-box small{display:block}.author-box small{color:#63736d}.author-box p{margin:5px 0 0;color:#53665f;font-size:13px}.author-box>a{padding:10px 14px;border:1px solid #188d56;border-radius:9px;color:#0a7345;font-size:13px;font-weight:800;text-decoration:none}.share-card,.side-cta,.related-mini{padding:18px}.share-card>strong,.related-mini>strong{display:block;margin-bottom:14px;font:800 15px/1.2 Poppins,sans-serif}.share-card>div{display:flex;gap:8px}.share-card a{display:grid;place-items:center;width:38px;height:38px;border:1px solid #dce4df;border-radius:50%;color:#0a7f4c;font-weight:900;text-decoration:none}.side-cta{background:linear-gradient(155deg,#effaf3,#fff)}.side-cta h2{margin:0 0 8px;color:#0b7043;font:800 23px/1.13 Poppins,sans-serif}.side-cta p{font-size:13px;line-height:1.5}.side-cta img{width:100%;margin-top:12px}.related-mini a{display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:center;margin-top:12px;color:#17372e;text-decoration:none}.related-mini img{width:62px;height:48px;border-radius:8px;object-fit:cover}.related-mini span{font-size:12px;font-weight:800;line-height:1.3}.related-mini small{display:block;margin-top:4px;color:#687a73;font-weight:600}.related-section{padding:34px 0 44px;background:#fff}.section-heading-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.section-heading-row h2{margin:0;font:900 25px/1.2 Poppins,sans-serif}.section-heading-row a{color:#0a864e;font-weight:800;text-decoration:none}.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.related-grid article{overflow:hidden;border:1px solid #dfe6e2;border-radius:14px;background:#fff;box-shadow:0 8px 22px rgba(6,45,33,.06)}.related-grid img{width:100%;aspect-ratio:16/9;object-fit:cover}.related-grid article>span,.related-grid h3,.related-grid p{display:block;margin-inline:14px}.related-grid article>span{margin-top:12px;color:#07864e;font-size:11px;font-weight:900;text-transform:uppercase}.related-grid h3{margin-top:8px;margin-bottom:8px;font:800 16px/1.3 Poppins,sans-serif}.related-grid p{margin-bottom:16px;color:#596b65;font-size:12px;line-height:1.5}.final-banner{padding:20px 0 34px;background:#fff}.final-banner>.article-container{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 34px;border-radius:14px;background:linear-gradient(135deg,#0a6f43,#004c32);color:#fff}.final-banner strong{display:block;font:800 24px/1.2 Poppins,sans-serif}.final-banner p{margin:5px 0 0;color:#dff7e9}.final-banner a{background:#fff;color:#073c2a;min-width:220px}.article-footer{padding:34px 0 16px;background:#fff;border-top:1px solid #e4e9e6}.article-footer>.article-container:first-child{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px}.footer-brand img{width:150px;height:auto}.footer-brand p{color:#62736c}.article-footer strong{display:block;margin-bottom:10px}.article-footer a{display:block;margin:7px 0;color:#5d6d67;text-decoration:none;font-size:13px}.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:28px;padding-top:16px;border-top:1px solid #e6ebe8;color:#6b7974;font-size:12px}.footer-bottom span:last-child{display:flex;gap:16px}.footer-bottom a{display:inline;margin:0}
@media(max-width:1180px){.article-layout{grid-template-columns:210px minmax(0,1fr)}.right-rail{grid-column:2;grid-template-columns:repeat(3,1fr)}.article-hero-grid{grid-template-columns:1fr 1fr}.benefit-strip{grid-template-columns:repeat(2,1fr)}.benefit-strip>div:nth-child(2){border-right:0}.benefit-strip>div:nth-child(-n+2){border-bottom:1px solid #e5ebe7}.habit-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.article-container{width:min(100% - 32px,760px)}.article-hero-grid{grid-template-columns:1fr}.article-cover{min-height:360px;border-radius:18px}.article-author-row{gap:14px 22px}.article-layout{grid-template-columns:1fr}.left-rail,.right-rail{grid-column:auto}.article-toc{position:static}.right-rail{grid-template-columns:1fr 1fr}.related-grid{grid-template-columns:repeat(2,1fr)}.article-footer>.article-container:first-child{grid-template-columns:1.5fr 1fr 1fr}.article-footer>.article-container:first-child>div:last-child{display:none}}
@media(max-width:640px){.article-container{width:min(100% - 24px,600px)}.article-hero{padding-top:16px}.breadcrumbs{font-size:12px;margin-bottom:18px}.article-hero-copy{padding:14px 0 10px}.article-hero h1{font-size:clamp(34px,10.2vw,48px);line-height:1.04}.article-intro{font-size:16px}.article-author-row{display:grid;gap:12px;margin-top:20px}.article-cover{min-height:300px}.benefit-strip{grid-template-columns:1fr;margin-top:14px}.benefit-strip>div{border-right:0;border-bottom:1px solid #e5ebe7}.benefit-strip>div:last-child{border-bottom:0}.article-body-section{padding-top:24px}.left-rail{order:1}.article-content{order:2;font-size:15px}.right-rail{order:3;grid-template-columns:1fr}.article-toc:not([open]) ol{display:none}.summary-box{padding:15px}.three-cards,.habit-grid{grid-template-columns:1fr}.three-cards>div,.habit-grid>div{text-align:left}.three-cards span,.habit-grid span{margin:0 0 10px}.inline-cta{grid-template-columns:1fr;padding:20px}.inline-cta img{max-height:150px}.author-box{grid-template-columns:auto 1fr}.author-box>a{grid-column:1/-1;text-align:center}.related-grid{grid-template-columns:1fr}.final-banner>.article-container{display:grid;padding:24px}.final-banner a{min-width:0}.article-footer>.article-container:first-child{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-bottom{display:grid}.footer-bottom span:last-child{flex-wrap:wrap}.section-heading-row{align-items:flex-end}.section-heading-row h2{font-size:22px}}

/* Step 02.4 — blocchi editoriali, FAQ, sticky rail e CTA conformi */
.article-page :is(.rail-cta a,.side-cta a,.inline-cta a,.final-banner a,.author-box>a,.section-heading-row a,.register-button){
  border:2px solid #062d21;
  box-shadow:5px 6px 0 #062d21;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease;
}
@media (hover:hover){
  .article-page :is(.rail-cta a,.side-cta a,.inline-cta a,.final-banner a,.author-box>a,.section-heading-row a,.register-button):hover{
    transform:translate(3px,3px);
    box-shadow:2px 3px 0 #062d21;
  }
}
.article-page :is(.rail-cta a,.side-cta a,.inline-cta a,.final-banner a,.author-box>a,.section-heading-row a,.register-button):focus-visible{
  outline:3px solid #7cf0b5;
  outline-offset:4px;
}
.article-page :is(.rail-cta a,.side-cta a,.inline-cta a,.final-banner a,.author-box>a,.section-heading-row a,.register-button):active{
  transform:translate(5px,5px);
  box-shadow:0 0 0 #062d21;
}

/* La rail intera resta compatta durante lo scroll: la CTA non scivola sotto l'indice. */
.left-rail{position:sticky;top:108px;align-self:start}
.article-toc{position:static;top:auto}

.editorial-label{
  margin:0 0 10px!important;
  color:#007c48;
  font:900 12px/1.2 Poppins,sans-serif;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.example-panel{
  scroll-margin-top:120px;
  margin:34px 0 28px;
  padding:30px;
  border:2px solid #062d21;
  border-radius:24px;
  background:#ffd955;
  box-shadow:8px 10px 0 #062d21;
}

.example-panel--white{
  background:#fff;
}

.example-panel h2{
  margin:0 0 14px;
  font:900 clamp(25px,2.1vw,34px)/1.16 Poppins,sans-serif;
  letter-spacing:-.025em;
}
.example-panel>p:not(.editorial-label):not(.example-note){margin-bottom:18px}
.example-panel .budget-table{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.example-panel .budget-table table{min-width:520px}
.example-panel .budget-table th,.example-panel .budget-table td{
  padding:13px 0;
  border-bottom:1px solid rgba(6,45,33,.34);
}
.example-panel .budget-table th:nth-child(n+2),.example-panel .budget-table td:nth-child(n+2){text-align:right}
.example-panel .budget-table tfoot td{
  padding-top:14px;
  background:transparent;
  border-bottom:0;
  font-weight:900;
}
.example-note{margin:16px 0 0!important;font-size:13px;line-height:1.5}

.tip-box{
  display:block;
  margin:22px 0 34px;
  padding:27px 30px;
  border:2px solid #062d21;
  border-radius:24px;
  background:#baf7d1;
  box-shadow:8px 10px 0 #062d21;
}
.tip-box p:last-child{margin:0;font-size:16px;line-height:1.65}

.faq-list{
  border:2px solid #062d21;
  border-radius:24px;
  box-shadow:8px 10px 0 #062d21;
  overflow:hidden;
}
.faq-list details{padding:0;border-bottom:1px solid #cfdcd5;background:#fff}
.faq-list details:last-child{border-bottom:0}
.faq-list details[open]{background:#e6fbef}
.faq-list summary{
  position:relative;
  display:flex;
  align-items:center;
  min-height:82px;
  padding:22px 76px 22px 28px;
  list-style:none;
  cursor:pointer;
  color:#0a3b2c;
  font:800 18px/1.3 Poppins,sans-serif;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:'+';
  position:absolute;
  right:26px;
  top:50%;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1.5px solid #0a4736;
  border-radius:50%;
  background:#fff;
  transform:translateY(-50%);
  font:900 28px/1 Poppins,sans-serif;
}
.faq-list details[open] summary::after{content:'×';background:#00dd82}
.faq-list details[open] summary{padding-bottom:12px}
.faq-list details p{margin:0;padding:0 76px 24px 28px;color:#4d655d;font-size:15px;line-height:1.6}

@media(max-width:900px){
  .left-rail{position:static;top:auto}
}
@media(max-width:640px){
  .example-panel,.tip-box{padding:22px 20px;border-radius:20px;box-shadow:6px 7px 0 #062d21}
  .example-panel .budget-table{margin-inline:-2px}
  .faq-list{border-radius:20px;box-shadow:6px 7px 0 #062d21}
  .faq-list summary{min-height:70px;padding:18px 64px 18px 20px;font-size:16px}
  .faq-list summary::after{right:18px;width:32px;height:32px;font-size:24px}
  .faq-list details p{padding:0 20px 20px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .article-page :is(.rail-cta a,.side-cta a,.inline-cta a,.final-banner a,.author-box>a,.section-heading-row a,.register-button){transition:none}
}

/* Step 02.5 — rifinitura hero articolo: transizione, breadcrumb, cover e titolo mobile */
.article-hero{
  padding-top:34px;
  background:
    linear-gradient(180deg,
      #f8f5ea 0,
      #fbf9f2 54px,
      #fffdf9 132px,
      #ffffff 58%,
      #f8f5ea 100%);
}
.breadcrumbs{
  margin-bottom:30px;
  font-size:16px;
  line-height:1.45;
  font-weight:600;
}
.breadcrumbs a{
  transition:color .18s ease;
}
@media (hover:hover){
  .breadcrumbs a:hover{color:#008650}
}
.article-hero-grid{
  align-items:start;
}
.article-cover{
  min-height:470px;
  margin-top:38px;
  overflow:hidden;
  border-radius:24px;
  background:#e7ece9;
  box-shadow:0 18px 38px rgba(6,45,33,.10);
}
.article-cover img{
  border-radius:inherit;
}

@media(max-width:900px){
  .article-hero{
    background:linear-gradient(180deg,#f8f5ea 0,#fbf9f2 42px,#fffdf9 108px,#fff 62%,#f8f5ea 100%);
  }
  .article-cover{
    margin-top:18px;
    border-radius:20px;
  }
}

@media(max-width:640px){
  .article-hero{padding-top:20px}
  .breadcrumbs{
    margin-bottom:20px;
    font-size:14px;
    gap:8px;
  }
  .article-hero h1{
    font-family:Poppins,sans-serif;
    font-size:clamp(39px,12.4vw,55px);
    font-weight:900;
    line-height:.98;
    letter-spacing:-.065em;
    -webkit-text-stroke:.28px currentColor;
    text-wrap:balance;
  }
  .article-hero h1 em{
    font-weight:900;
    -webkit-text-stroke:.28px currentColor;
  }
  .article-cover{
    margin-top:16px;
    min-height:290px;
    border-radius:18px;
  }
}


/* Step 02.6 — premium icons, lighter TOC and mockup hover glow */
.article-toc li{font-weight:700}
.article-toc a{font-size:14px;font-weight:600;line-height:1.5}
.three-cards .icon-badge{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 12px;border-radius:50%;background:#e8f8ee;color:#0a8d51}
.three-cards .icon-badge svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){.three-cards .icon-badge{margin:0 0 12px}}
.article-cover,.inline-cta,.side-cta{overflow:hidden}
.article-cover img,.inline-cta img,.side-cta img{transition:transform .28s ease,filter .28s ease}
.article-cover::after,.inline-cta::after,.side-cta::after{content:"";position:absolute;inset:auto 10% 4% 10%;height:16%;border-radius:999px;background:radial-gradient(circle at center,rgba(0,212,116,.18),rgba(0,212,116,0) 72%);filter:blur(20px);opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s ease}
.article-cover,.inline-cta,.side-cta{position:relative}
@media (hover:hover){
  .article-cover:hover::after,.inline-cta:hover::after,.side-cta:hover::after{opacity:1;transform:scale(1.04)}
  .article-cover:hover img,.inline-cta:hover img,.side-cta:hover img{transform:translateY(-5px) scale(1.02);filter:drop-shadow(0 20px 38px rgba(6,45,33,.18))}
}
@media (prefers-reduced-motion:reduce){
  .article-cover img,.inline-cta img,.side-cta img,.article-cover::after,.inline-cta::after,.side-cta::after{transition:none}
}


/* Step 02.7 — unified topbar hover and TOC hover states */
.article-toc li{transition:color .18s ease}
.article-toc a{display:block;padding:8px 10px;border-radius:12px;transition:background-color .18s ease,color .18s ease}
.article-toc li:hover,.article-toc li:focus-within{color:#089858}
.article-toc a:hover,.article-toc a:focus-visible{background:#e9fff4;color:#087847;outline:none}


/* Step 02.8 — article hero balance and spacing */
.article-hero-grid{align-items:start;gap:36px}
.article-hero-copy{padding:28px 0 24px}
.article-cover{min-height:420px;aspect-ratio:1.1 / 1;border-radius:22px;align-self:start;box-shadow:0 14px 32px rgba(6,45,33,.08)}
.article-cover img{height:100%;object-position:center}
.benefit-strip{margin-top:18px}
@media (max-width:1180px){
  .article-hero-grid{gap:28px}
  .article-cover{min-height:390px}
}
@media (max-width:900px){
  .article-cover{min-height:340px;aspect-ratio:auto;border-radius:18px}
  .benefit-strip{margin-top:14px}
}
@media (max-width:640px){
  .article-cover{min-height:280px}
  .article-hero-copy{padding-bottom:12px}
}


/* Step 02.9 — solid TOC, related-guide interactions and sticky theme menu */
.article-toc{
  border:2px solid #062d21;
  box-shadow:7px 8px 0 #062d21;
}
.related-mini a{
  position:relative;
  margin-top:0;
  padding:13px 0;
  transition:transform .18s ease,color .18s ease,background-color .18s ease;
}
.related-mini a + a{border-top:1px solid #dfe7e2}
.related-mini a span{transition:color .18s ease}
.related-mini a img{transition:transform .18s ease,box-shadow .18s ease}
@media (hover:hover){
  .related-mini a:hover,.related-mini a:focus-visible{color:#07985a;transform:translateX(3px);outline:none}
  .related-mini a:hover span,.related-mini a:focus-visible span{color:#07985a}
  .related-mini a:hover img,.related-mini a:focus-visible img{transform:scale(1.04);box-shadow:0 5px 12px rgba(6,45,33,.15)}
}
.theme-menu-card{
  position:sticky;
  top:108px;
  display:grid;
  gap:10px;
  padding:22px;
  border:2px solid #062d21;
  border-radius:18px;
  background:#fff;
  box-shadow:7px 8px 0 #062d21;
}
.theme-menu-card h2{margin:0 0 8px;font:900 28px/1.05 Poppins,sans-serif;letter-spacing:-.035em}
.theme-menu-card>a:not(.theme-menu-cta),.theme-menu-card>span{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px;color:#17382e;text-decoration:none;font-size:16px;line-height:1.35;border-radius:9px;padding:5px 7px;transition:background-color .18s ease,color .18s ease,transform .18s ease}
.theme-menu-card>span{color:#687a73}
.theme-menu-card>span small{display:block;color:#07864e;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.theme-menu-all{justify-content:flex-start!important;padding:0!important;text-decoration:underline!important;text-underline-offset:4px;font-weight:800!important}
.theme-menu-label{margin:12px 0 2px;color:#07864e;font:900 12px/1.2 Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.theme-menu-cta{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:14px;border:2px solid #062d21;border-radius:12px;background:#00e884;color:#062d21!important;font-weight:900;text-decoration:none;box-shadow:4px 5px 0 #062d21;transition:transform .18s ease,box-shadow .18s ease}
@media (hover:hover){
  .theme-menu-card>a:not(.theme-menu-cta):hover,.theme-menu-card>a:not(.theme-menu-cta):focus-visible{background:#e9fff4;color:#07864e;transform:translateX(2px);outline:none}
  .theme-menu-cta:hover,.theme-menu-cta:focus-visible{transform:translate(2px,2px);box-shadow:2px 3px 0 #062d21;outline:none}
}
@media(max-width:1180px){.theme-menu-card{position:static}}
@media(max-width:900px){.theme-menu-card{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){.related-mini a,.related-mini a img,.theme-menu-card>a,.theme-menu-cta{transition:none}}


/* Step 03.0 — sticky theme rail and Staff Famyro byline */
.right-rail{align-self:stretch;grid-template-rows:auto auto auto 1fr;overflow:visible}
.theme-menu-card{align-self:start;top:112px}
.staff-avatar{display:grid;place-items:center;padding:3px;background:#0b6b3d}
.staff-avatar img{position:static;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center}
@media(max-width:1180px){
  .right-rail{align-self:start;grid-template-rows:none}
  .theme-menu-card{position:static}
}


/* Step 03.1 — compact theme menu, lighter TOC shadow and tighter staff byline */
.article-toc{box-shadow:4px 5px 0 #062d21}
.theme-menu-card{gap:6px}
.theme-menu-card h2{margin:0 0 4px}
.theme-menu-card>a:not(.theme-menu-cta){justify-content:flex-start;min-height:31px;padding:4px 7px;gap:9px}
.theme-link-icon{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;border-radius:8px;background:#e9fff4;color:#07864e}
.theme-link-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.theme-menu-label{margin:10px 0 1px}
.author-chip strong{line-height:1.12}
.author-chip small{margin-top:0;line-height:1.15}
@media (hover:hover){
  .theme-menu-card>a:not(.theme-menu-cta):hover .theme-link-icon,
  .theme-menu-card>a:not(.theme-menu-cta):focus-visible .theme-link-icon{background:#d7fae7;color:#007c48}
}
@media(max-width:640px){.article-toc{box-shadow:3px 4px 0 #062d21}}


/* Step 03.4 — benefit strip and related guides refinement */
.benefit-strip strong{font-size:17px}
.benefit-strip small{font-size:14px;line-height:1.45}
.related-section .section-heading-row{margin-bottom:22px}
.related-section .section-link-inline{display:inline-flex;align-items:center;gap:6px;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;color:#0a864e!important;font:700 20px/1.2 var(--famyro-font-heading, Poppins, sans-serif);text-decoration:none}
.related-section .section-link-inline:hover,.related-section .section-link-inline:focus-visible{color:#066f41;transform:translateX(2px);outline:none}
.related-grid article{border:0;background:transparent;box-shadow:none;overflow:visible}
.related-card{display:block;height:100%;border:1px solid #dfe6e2;border-radius:18px;background:#fff;box-shadow:0 10px 24px rgba(6,45,33,.06);color:#17372e;text-decoration:none;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.related-card-media{position:relative;overflow:hidden}
.related-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .25s ease}
.related-readtime{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 12px;border:1px solid #d9e1dc;border-radius:999px;background:rgba(255,255,255,.98);box-shadow:0 6px 18px rgba(6,45,33,.10);color:#17372e;font:700 13px/1 var(--famyro-font-heading, Poppins, sans-serif)}
.related-category,.related-card h3,.related-card p{display:block;margin-inline:18px}
.related-category{margin-top:14px;color:#07864e;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.related-card h3{margin-top:10px;margin-bottom:10px;font:800 18px/1.25 Poppins,sans-serif;letter-spacing:-.02em;transition:color .2s ease}
.related-card p{margin-bottom:20px;color:#596b65;font-size:14px;line-height:1.55}
@media (hover:hover){
  .related-card:hover,.related-card:focus-visible{transform:translateY(-8px) scale(1.01);box-shadow:0 18px 36px rgba(6,45,33,.12);border-color:#cfe0d8;outline:none}
  .related-card:hover img,.related-card:focus-visible img{transform:scale(1.04)}
  .related-card:hover h3,.related-card:focus-visible h3{color:#07864e}
}
@media (max-width:1180px){
  .related-section .section-link-inline{font-size:18px}
}
@media (max-width:640px){
  .benefit-strip strong{font-size:16px}
  .benefit-strip small{font-size:13px}
  .related-card h3{font-size:17px}
  .related-card p{font-size:13px}
  .related-readtime{min-height:32px;padding:0 11px;font-size:12px}
  .related-section .section-link-inline{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .related-section .section-link-inline,.related-card,.related-card img,.related-card h3{transition:none}
}


/* Step 03.5 — habit icons and related guides typography refinement */
.habit-grid span{width:56px;height:56px;font-size:28px}
.section-heading-row h2{font-weight:800}
.related-section .section-link-inline{font-weight:600!important}
.related-readtime{min-height:36px;padding:0 13px;border-radius:12px}
@media (max-width:640px){
  .habit-grid span{width:52px;height:52px;font-size:26px}
  .related-readtime{min-height:34px;padding:0 12px;border-radius:11px}
}


/* Step 04.2 — mobile-only article typography and spacing */
@media (max-width:640px){
  .article-container{width:min(calc(100% - 36px),600px)}
  .article-hero .article-container{width:min(calc(100% - 48px),600px)}
  .article-hero h1{font-family:var(--famyro-font-heading,"FamyroPoppins",Poppins,sans-serif);font-size:clamp(40px,11.6vw,52px);font-weight:900;line-height:.98;letter-spacing:-.065em;-webkit-text-stroke:.22px currentColor;text-wrap:balance}
  .article-hero h1 em{font-family:inherit;font-weight:900;line-height:.98}
  .article-content{font-size:15px}
  .article-content>.example-panel,.article-content>.tip-panel,.article-content>.summary-box,.article-content>.three-cards,.article-content>.habit-grid,.article-content>.inline-cta,.article-content>.faq-section{max-width:100%}
  .example-panel,.tip-panel,.summary-box,.faq-list,.inline-cta{margin-inline:0}
}


/* Step 04.4 — larger desktop article metadata */
@media (min-width:981px){
  .article-author-row{gap:24px 38px}
  .author-chip strong{font-size:16px}
  .author-chip small{font-size:13px}
  .meta-chip{font-size:15px}
  .meta-chip svg{width:22px;height:22px}
}


/* Step 06.3 — pulsanti social ufficiali e funzionanti */
.share-card .social-share-links{display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
.share-card .social-share{position:relative;display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border:0;border-radius:50%;color:#fff;text-decoration:none;box-shadow:0 5px 12px rgba(6,45,33,.16);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.share-card .social-share svg{display:block;width:18px;height:18px;fill:#fff;stroke:none}
.share-card .social-share::before{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 9px);z-index:5;max-width:150px;padding:6px 9px;border-radius:7px;background:#062d21;color:#fff;font:700 11px/1.2 Poppins,sans-serif;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,5px);transition:opacity .16s ease,transform .16s ease}
.share-card .social-share::after{content:"";position:absolute;left:50%;bottom:calc(100% + 3px);z-index:4;border:5px solid transparent;border-top-color:#062d21;opacity:0;pointer-events:none;transform:translateX(-50%);transition:opacity .16s ease}
.share-card .social-share:hover::before,.share-card .social-share:focus-visible::before{opacity:1;transform:translate(-50%,0)}
.share-card .social-share:hover::after,.share-card .social-share:focus-visible::after{opacity:1}
.share-card .social-share--facebook{background:#1877f2}
.share-card .social-share--x{background:#000}
.share-card .social-share--linkedin{background:#0a66c2}
.share-card .social-share--whatsapp{background:#25d366}
.share-card .social-share--telegram{background:#229ed9}
@media(hover:hover) and (pointer:fine){.share-card .social-share:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 9px 18px rgba(6,45,33,.22);filter:saturate(1.08)}}
.share-card .social-share:focus-visible{outline:3px solid #7cf0b5;outline-offset:3px}
.share-card .social-share:active{transform:translateY(0) scale(.97)}
@media(prefers-reduced-motion:reduce){.share-card .social-share,.share-card .social-share::before,.share-card .social-share::after{transition:none}}


/* Step 06.12 — Sistema Hero globale e centralizzato per tutti gli articoli */
.article-page .article-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:40px;
  align-items:center;
}

.article-page .article-hero-copy{
  padding:24px 0 20px;
}

.article-page .article-hero h1{
  max-width:760px;
  margin:0;
  font-family:var(--famyro-font-heading,"FamyroPoppins",Poppins,sans-serif);
  font-size:clamp(46px,4.6vw,72px);
  font-weight:900;
  line-height:1.02;
  letter-spacing:-.052em;
  text-wrap:balance;
}

.article-page .article-hero h1 em{
  display:block;
  color:#149855;
  font-family:inherit;
  font-style:normal;
  font-weight:900;
  line-height:inherit;
}


.article-page .article-hero h1.article-title-compact{
  max-width:680px;
  font-size:clamp(42px,4.15vw,64px);
}

@media (max-width:1180px){
  .article-page .article-hero h1.article-title-compact{
    max-width:640px;
    font-size:clamp(40px,4.2vw,58px);
  }
}

@media (max-width:900px){
  .article-page .article-hero h1.article-title-compact{
    max-width:100%;
    font-size:clamp(40px,7.2vw,56px);
  }
}

@media (max-width:640px){
  .article-page .article-hero h1.article-title-compact{
    width:100%;
    max-width:100%;
    min-width:0;
    font-size:clamp(30px,8.4vw,40px);
    line-height:1.03;
    letter-spacing:-.045em;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  .article-page .article-hero h1.article-title-compact em{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
}

.article-page .article-intro{
  max-width:690px;
  margin:22px 0 0;
  font-size:clamp(18px,1.5vw,22px);
  line-height:1.5;
}

.article-page .article-author-row{
  margin-top:28px;
}

.article-page .article-cover{
  width:100%;
  min-height:0;
  aspect-ratio:16 / 10;
  margin:0;
  align-self:center;
  overflow:hidden;
  border-radius:28px;
  background:#f3eedc;
  box-shadow:0 14px 30px rgba(6,45,33,.08);
}

.article-page .article-cover img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:inherit;
}

.article-page .benefit-strip{
  margin-top:20px;
}

@media (max-width:1180px){
  .article-page .article-hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:28px;
  }

  .article-page .article-hero h1{
    font-size:clamp(44px,4.7vw,66px);
  }
}

@media (max-width:900px){
  .article-page .article-hero-grid{
    grid-template-columns:1fr;
    gap:18px;
    align-items:start;
  }

  .article-page .article-hero-copy{
    padding:12px 0 8px;
  }

  .article-page .article-hero h1{
    max-width:760px;
    font-size:clamp(44px,8vw,62px);
  }

  .article-page .article-cover{
    aspect-ratio:16 / 9;
    border-radius:22px;
  }
}

@media (max-width:640px){
  .article-page .article-hero h1{
    font-size:clamp(40px,11vw,52px);
    line-height:.99;
    letter-spacing:-.06em;
  }

  .article-page .article-intro{
    margin-top:20px;
    font-size:16px;
  }

  .article-page .article-cover{
    aspect-ratio:16 / 10;
    border-radius:18px;
  }
}

/* v6.38 — navigazione "In questa guida" centralizzata e coerente con "Esplora per tema" */
.article-toc ol{
  gap:6px;
  margin-top:14px;
  padding-left:30px;
}
.article-toc li{
  padding-left:0;
  color:#07864e;
  font-weight:800;
  font-size:16px;
  line-height:1.35;
}
.article-toc a{
  display:block;
  padding:5px 7px;
  border-radius:9px;
  color:#17382e;
  font-family:inherit;
  font-size:16px;
  font-weight:400;
  line-height:1.35;
  transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
@media(hover:hover){
  .article-toc a:hover,
  .article-toc a:focus-visible{
    background:#e9fff4;
    color:#07864e;
    transform:translateX(2px);
    outline:none;
  }
}
@media(max-width:640px){
  .article-toc li,
  .article-toc a{
    font-size:16px;
  }
}
@media(prefers-reduced-motion:reduce){
  .article-toc a{transition:none}
}

/* v6.39 — ombra sfumata per la card di navigazione "In questa guida" */
.article-toc{
  box-shadow:0 18px 38px rgba(6,45,33,.14),0 6px 14px rgba(6,45,33,.08);
}
@media(max-width:640px){
  .article-toc{
    box-shadow:0 14px 30px rgba(6,45,33,.13),0 5px 12px rgba(6,45,33,.07);
  }
}

/* v6.40 — rimozione bordo dalla card di navigazione "In questa guida" */
.article-toc{
  border:0;
}

/* v6.41 — colonna centrale delle guide leggermente più stretta e più ariosa */
@media (min-width:1181px){
  .article-layout{
    grid-template-columns:230px minmax(0,820px) 285px;
    justify-content:center;
    column-gap:36px;
  }
}

/* v6.42 — testi del contenuto estesi fino alla larghezza utile della colonna centrale */
@media (min-width:901px){
  .article-content > p,
  .article-content > ul,
  .article-content > ol,
  .article-content > h2,
  .article-content > h3{
    width:100%;
    max-width:none;
  }
}

/* v6.61 — testo corpo delle guide più leggibile e centralizzato */
@media (min-width:901px){
  .article-content > p,
  .example-panel > p:not(.editorial-label):not(.example-note){
    font-size:18px;
    line-height:1.68;
  }
}

@media (min-width:641px) and (max-width:900px){
  .article-content > p,
  .example-panel > p:not(.editorial-label):not(.example-note){
    font-size:17px;
    line-height:1.65;
  }
}

@media (max-width:640px){
  .article-content > p,
  .article-content > section > p,
  .example-panel > p:not(.editorial-label):not(.example-note){
    font-size:17px;
    line-height:1.68;
  }
}

/* v6.64 — Hero metadata kept on a single horizontal row */
.article-page .article-author-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:clamp(16px,2.2vw,34px);
  width:100%;
}

.article-page .article-author-row > *{
  flex:0 0 auto;
  min-width:0;
}

.article-page .article-author-row .author-chip,
.article-page .article-author-row .meta-chip{
  white-space:nowrap;
}

/* v7.15 — metadata Hero responsive senza scorrimento orizzontale */
@media (max-width:900px){
  .article-page .article-author-row{
    flex-wrap:wrap;
    gap:14px;
    overflow:visible;
    padding-bottom:0;
  }
}

@media (max-width:640px){
  .article-page .article-author-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:10px 14px;
    width:100%;
  }

  .article-page .article-author-row .author-chip{
    grid-column:1 / -1;
  }

  .article-page .article-author-row .meta-chip{
    min-width:0;
    white-space:normal;
    align-items:flex-start;
  }

  .article-page .article-author-row .author-avatar{
    width:36px;
    height:36px;
  }

  .article-page .article-author-row .author-avatar img{
    height:36px;
  }

  .article-page .article-author-row .author-chip,
  .article-page .article-author-row .meta-chip{
    gap:7px;
  }

  .article-page .article-author-row .author-chip strong,
  .article-page .article-author-row .meta-chip{
    font-size:12px;
  }

  .article-page .article-author-row .author-chip small{
    font-size:10px;
  }

  .article-page .article-author-row .meta-chip svg{
    width:17px;
    height:17px;
  }
}

/* v6.65 — lighter, more compact reading-time and update metadata */
.article-page .article-author-row .meta-chip{
  font-size:14px;
  font-weight:500;
  line-height:1.3;
}

.article-page .article-author-row{
  gap:clamp(14px,1.7vw,26px);
}

@media(max-width:640px){
  .article-page .article-author-row .meta-chip{
    font-size:12px;
    font-weight:500;
  }
}

/* v6.73 — etichette più leggibili nelle tabelle dei callout gialli */
.example-panel .budget-table th:first-child,
.example-panel .budget-table td:first-child {
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
}

@media (max-width: 640px) {
  .example-panel .budget-table th:first-child,
  .example-panel .budget-table td:first-child {
    font-size: 16px;
    line-height: 1.45;
  }
}

/* v6.81 — card Share centrata su desktop e mobile */
.share-card {
  text-align: center;
}

.share-card > strong {
  display: block;
  width: 100%;
  margin-inline: auto;
  text-align: center;
}

.share-card .social-share-links,
.share-card > div {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-inline: auto;
}

@media (max-width: 640px) {
  .share-card {
    text-align: center;
  }

  .share-card > strong,
  .share-card .social-share-links,
  .share-card > div {
    justify-content: center;
    text-align: center;
  }
}

/* v7.13 — hotfix proporzioni immagini dopo width/height HTML v7.11 */
.article-page .side-cta img,
.article-page .inline-cta img,
.article-page .related-card img {
  height: auto;
}

/* v7.77 — tempo di lettura sulla cover, metadati visibili rimossi dall'hero */
.article-page .article-cover{
  position:relative;
}

.article-page .article-readtime-badge{
  position:absolute;
  z-index:2;
  right:14px;
  bottom:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border:1px solid #d8e1dc;
  border-radius:11px;
  background:rgba(255,255,255,.97);
  box-shadow:0 6px 16px rgba(6,45,33,.10);
  color:#17372e;
  font:700 13px/1 var(--famyro-font-heading,"FamyroPoppins",Poppins,sans-serif);
}

@media (max-width:640px){
  .article-page .article-author-row{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:center;
    gap:10px;
  }

  .article-page .article-author-row .author-chip{
    grid-column:1 / -1;
    min-width:0;
  }

  .article-page .article-author-row .author-chip small{
    display:none;
  }

  .article-page .article-readtime-badge{
    right:12px;
    bottom:12px;
    min-height:32px;
    padding:0 11px;
    font-size:12px;
  }
}

/* v7.20 — guida correlate più leggibili su mobile */
@media (max-width:640px){
  .article-page .related-mini{
    padding:22px 20px;
    border-radius:18px;
  }

  .article-page .related-mini > strong{
    margin-bottom:18px;
    font:800 28px/1.08 var(--famyro-font-heading,"FamyroPoppins",Poppins,sans-serif);
    letter-spacing:-.03em;
  }

  .article-page .related-mini a{
    grid-template-columns:84px 1fr;
    gap:14px;
    margin-top:14px;
  }

  .article-page .related-mini img{
    width:84px;
    height:64px;
    border-radius:12px;
  }

  .article-page .related-mini a span{
    font-size:17px;
    line-height:1.2;
    letter-spacing:-.02em;
  }

  .article-page .related-mini small{
    margin-top:6px;
    font-size:15px;
    font-weight:700;
    line-height:1.25;
  }
}

/* v7.21 — hotfix forte Guide correlate mobile */
@media screen and (max-width:900px){
  body.article-page .right-rail .related-mini{
    padding:24px 22px !important;
    border-radius:20px !important;
  }

  body.article-page .right-rail .related-mini > strong{
    display:block !important;
    margin:0 0 20px !important;
    font-family:var(--famyro-font-heading,"FamyroPoppins",Poppins,sans-serif) !important;
    font-size:30px !important;
    font-weight:900 !important;
    line-height:1.05 !important;
    letter-spacing:-.035em !important;
  }

  body.article-page .right-rail .related-mini > a{
    display:grid !important;
    grid-template-columns:96px minmax(0,1fr) !important;
    gap:16px !important;
    align-items:center !important;
    margin-top:16px !important;
    padding:0 0 16px !important;
  }

  body.article-page .right-rail .related-mini > a:last-child{
    padding-bottom:0 !important;
  }

  body.article-page .right-rail .related-mini > a > img{
    width:96px !important;
    height:74px !important;
    max-width:none !important;
    border-radius:13px !important;
    object-fit:cover !important;
  }

  body.article-page .right-rail .related-mini > a > span{
    display:block !important;
    font-family:var(--famyro-font-heading,"FamyroPoppins",Poppins,sans-serif) !important;
    font-size:19px !important;
    font-weight:800 !important;
    line-height:1.18 !important;
    letter-spacing:-.025em !important;
  }

  body.article-page .right-rail .related-mini > a > span > small{
    display:block !important;
    margin-top:7px !important;
    font-size:16px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
  }
}

/* v7.26 — hint visivo per tabelle/card scrollabili in orizzontale */
.example-panel .budget-table{
  position:relative;
  scrollbar-width:thin;
  scrollbar-color:#0b7043 rgba(6,45,33,.12);
}

.example-panel .budget-table::-webkit-scrollbar{
  height:8px;
}

.example-panel .budget-table::-webkit-scrollbar-thumb{
  background:#0b7043;
  border-radius:999px;
}

.example-panel .budget-table::-webkit-scrollbar-track{
  background:rgba(6,45,33,.12);
  border-radius:999px;
}

@media (max-width:640px){
  .example-panel .budget-table{
    padding-top:42px;
    padding-right:14px;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }

  .example-panel .budget-table::before{
    content:"Scorri →";
    position:absolute;
    top:10px;
    right:10px;
    z-index:2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:0 10px;
    border:1px solid rgba(6,45,33,.14);
    border-radius:999px;
    background:rgba(255,248,224,.96);
    box-shadow:0 6px 14px rgba(6,45,33,.10);
    color:#0b7043;
    font:800 12px/1 var(--famyro-font-heading,"FamyroPoppins",Poppins,sans-serif);
    letter-spacing:.01em;
    pointer-events:none;
    animation:famyroSwipeHint 1.5s ease-in-out infinite;
  }


  .example-panel .budget-table table{
    min-width:560px;
  }
}

@keyframes famyroSwipeHint{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(6px)}
}

@media (prefers-reduced-motion:reduce){
  .example-panel .budget-table::before{
    animation:none;
  }
}

/* v7.31 — accessibilità focus e navigazione da tastiera nelle guide */
.article-page .budget-table:focus-visible{
  outline:3px solid #00a960;
  outline-offset:4px;
  box-shadow:0 0 0 6px rgba(0,169,96,.14),0 8px 20px rgba(6,45,33,.08);
}

.article-page .article-toc summary:focus-visible,
.article-page .faq-list summary:focus-visible{
  outline:3px solid #00a960;
  outline-offset:4px;
  border-radius:10px;
  background:#e9fff4;
  color:#087847;
}

.article-page .related-mini a:focus-visible,
.article-page .related-card:focus-visible{
  outline:3px solid #00a960;
  outline-offset:4px;
}

/* v7.38 — varianti del metodo 50/30/20 in stile card Famyro */
.three-cards--budget-ratios{
  gap:20px;
  align-items:stretch;
}

.three-cards--budget-ratios > div{
  min-height:190px;
  padding:28px 24px;
  border:2px solid #12382d;
  border-radius:24px;
  box-shadow:8px 9px 0 #12382d;
  text-align:center;
  transition:transform .2s ease,box-shadow .2s ease;
}

.three-cards--budget-ratios > div:nth-child(1){
  background:#ffdc68;
  transform:rotate(-1deg);
}

.three-cards--budget-ratios > div:nth-child(2){
  background:#d9c6ff;
  transform:rotate(-.3deg);
}

.three-cards--budget-ratios > div:nth-child(3){
  background:#c8f2d8;
  transform:rotate(.8deg);
}

.three-cards--budget-ratios h3{
  margin-bottom:14px;
  color:#062d21;
  font-size:25px;
}

.three-cards--budget-ratios p{
  color:#28483e;
  font-size:16px;
  line-height:1.55;
}

@media (hover:hover) and (pointer:fine){
  .three-cards--budget-ratios > div:hover{
    transform:translateY(-5px) rotate(0);
    box-shadow:10px 12px 0 #12382d;
  }
}

@media (max-width:640px){
  .three-cards--budget-ratios{
    gap:22px;
  }

  .three-cards--budget-ratios > div{
    min-height:0;
    padding:25px 22px;
    text-align:left;
    box-shadow:6px 7px 0 #12382d;
  }

  .three-cards--budget-ratios h3{
    font-size:23px;
  }

  .three-cards--budget-ratios p{
    font-size:15px;
  }
}

@media (prefers-reduced-motion:reduce){
  .three-cards--budget-ratios > div{
    transition:none;
  }
}

/* v7.44 — maggiore profondità per le card bianche nel contenuto centrale */
.article-content .habit-grid > div,
.article-content .three-cards:not(.three-cards--budget-ratios) > div,
.article-content > .budget-table,
.article-content .example-panel .budget-table,
.article-content > .faq-list,
.article-content > .summary-box{
  border:1px solid #d5e0da;
  box-shadow:
    0 14px 30px rgba(6,45,33,.085),
    0 4px 10px rgba(6,45,33,.045);
}
.article-content .habit-grid > div,
.article-content .three-cards:not(.three-cards--budget-ratios) > div{
  background:#fff;
}

/* v7.46 — regola mobile centralizzata per tutti i blocchi tabella scrollabili */
@media (max-width:640px){
  .article-content .budget-table{
    position:relative;
    overflow-x:auto;
    overflow-y:hidden;
    padding-top:42px;
    padding-right:14px;
    border:0 !important;
    outline:0 !important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:#0b7043 rgba(6,45,33,.12);
  }

  .article-content .budget-table:focus,
  .article-content .budget-table:focus-visible{
    border:0 !important;
    outline:0 !important;
  }

  .article-content .budget-table::before{
    content:"Scorri →";
    position:absolute;
    top:10px;
    right:10px;
    z-index:3;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:0 10px;
    border:1px solid rgba(6,45,33,.14);
    border-radius:999px;
    background:rgba(255,255,255,.94);
    box-shadow:0 6px 14px rgba(6,45,33,.10);
    color:#0b7043;
    font:800 12px/1 var(--famyro-font-heading,"FamyroPoppins",Poppins,sans-serif);
    letter-spacing:.01em;
    pointer-events:none;
    animation:famyroSwipeHint 1.5s ease-in-out infinite;
  }

  .article-content .example-panel .budget-table{
    margin-inline:-2px;
    background:transparent;
    box-shadow:none !important;
  }

  .article-content .example-panel .budget-table::before{
    background:rgba(255,248,224,.96);
  }

  .article-content .budget-table table{
    min-width:560px;
  }

  .article-content .budget-table::-webkit-scrollbar{
    height:8px;
  }

  .article-content .budget-table::-webkit-scrollbar-thumb{
    background:#0b7043;
    border-radius:999px;
  }

  .article-content .budget-table::-webkit-scrollbar-track{
    background:rgba(6,45,33,.12);
    border-radius:999px;
  }
}

@media (prefers-reduced-motion:reduce){
  .article-content .budget-table::before{
    animation:none;
  }
}

/* v7.50 — nessun contorno esterno sulle tabelle dei pannelli gialli */
.article-content .example-panel .budget-table,
.article-content .example-panel .budget-table:focus,
.article-content .example-panel .budget-table:focus-visible{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

.article-content .example-panel .budget-table table{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* v7.56 — centratura logo Staff Famyro nel chip autore su mobile */
@media (max-width: 640px){
  .article-page .article-author-row .staff-avatar{
    display:grid;
    place-items:center;
    overflow:hidden;
    padding:3px;
  }

  .article-page .article-author-row .staff-avatar img{
    position:static !important;
    inset:auto !important;
    display:block;
    width:100% !important;
    max-width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    transform:none !important;
  }
}

/* v7.61 — Benefit strip: coherent premium icon system + larger mobile subtitle */
.article-page .benefit-icon{
  width:58px;
  height:58px;
  border:1px solid #cceedd;
  background:linear-gradient(145deg,#effbf4,#e1f7ea);
  color:#008a50;
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.52),0 7px 16px rgba(6,95,58,.09);
}
.article-page .benefit-icon svg{
  width:29px;
  height:29px;
  stroke-width:1.9;
}
.article-page .benefit-strip>div{
  gap:17px;
}
@media(max-width:640px){
  .article-page .article-intro{
    font-size:18px;
    line-height:1.52;
  }
  .article-page .benefit-icon{
    width:56px;
    height:56px;
  }
  .article-page .benefit-icon svg{
    width:28px;
    height:28px;
  }
  .article-page .benefit-strip>div{
    gap:16px;
    padding:20px;
  }
}

/* v7.62 — Conservative article cleanup: semantic CTA headings and mobile related-content deduplication */
.rail-cta h3{
  margin:14px 0 8px;
  color:#0b7142;
  font:800 22px/1.12 Poppins,sans-serif;
}
.side-cta h3{
  margin:0 0 8px;
  color:#0b7043;
  font:800 23px/1.13 Poppins,sans-serif;
}
.example-panel > h3{
  margin:0 0 14px;
  color:#17372e;
  font:900 clamp(21px,1.8vw,28px)/1.2 Poppins,sans-serif;
  letter-spacing:-.02em;
}
@media(max-width:900px){
  /* The full related-guides section remains visible below the article. */
  body.article-page .right-rail .related-mini{display:none !important}
}


/* v7.63 — Conservative semantic cleanup extended to all available article pages */
.inline-cta h3{
  margin:0 0 10px;
  color:#0a7444;
  font:900 clamp(25px,2.1vw,34px)/1.18 Poppins,sans-serif;
  letter-spacing:-.025em;
}
.article-inline-cta h3{
  margin:0;
  color:inherit;
  font:900 clamp(25px,2.1vw,34px)/1.18 Poppins,sans-serif;
  letter-spacing:-.025em;
}

/* v7.75 — breadcrumb guide uniforme su mobile: nasconde titolo finale e separatore */
@media (max-width:640px){
  .article-page .breadcrumbs > [aria-current="page"],
  .article-page .breadcrumbs > span:last-child,
  .article-page .breadcrumbs > span:nth-last-child(2){
    display:none;
  }
}

/* v7.76 — nasconde la data di aggiornamento nelle guide solo su mobile */
@media (max-width:640px){
  .article-page .article-author-row .update-date-chip{
    display:none !important;
  }
}

/* v7.80.4 — guide correlate: distribuzione fluida senza colonna vuota su desktop */
@media (min-width:901px){
  .article-page .related-grid{
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  }
}

/* v7.81.4 — CTA editoriale canonica per le guide */
.article-page .article-inline-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  margin:32px 0;
  padding:26px 30px;
  border:1px solid #dce7e1;
  border-radius:18px;
  background:linear-gradient(135deg,#f2fbf5 0%,#ffffff 100%);
  box-shadow:0 10px 24px rgba(6,45,33,.07);
}
.article-page .article-inline-cta>div{
  min-width:0;
}
.article-page .article-inline-cta .editorial-label{
  margin:0 0 8px;
  color:#07864e;
  font:900 13px/1.2 Poppins,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.article-page .article-inline-cta h3{
  margin:0 0 8px;
  color:#12382d;
}
.article-page .article-inline-cta p:not(.editorial-label){
  margin:0;
  color:#32463f;
}
.article-page .article-inline-cta>a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  min-height:48px;
  padding:0 22px;
  border:1px solid #006f42;
  border-radius:10px;
  background:#00d982;
  box-shadow:0 4px 0 #064532;
  color:#062d21;
  font:900 14px/1 Poppins,sans-serif;
  text-decoration:none !important;
  white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}
@media(hover:hover){
  .article-page .article-inline-cta>a:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 0 #064532;
    background:#17e391;
  }
}
.article-page .article-inline-cta>a:focus-visible{
  outline:3px solid rgba(0,217,130,.32);
  outline-offset:3px;
}
.article-page .article-inline-cta>a:active{
  transform:translateY(2px);
  box-shadow:0 2px 0 #064532;
}
@media(max-width:640px){
  .article-page .article-inline-cta{
    display:grid;
    gap:18px;
    padding:22px 20px;
  }
  .article-page .article-inline-cta>a{
    width:100%;
  }
}
@media(prefers-reduced-motion:reduce){
  .article-page .article-inline-cta>a{
    transition:none;
  }
}

/* Blocco 4 — autorevolezza editoriale / Staff Famyro */
.article-page .famyro-author-link{
  color:inherit;
  text-decoration:none;
}
@media (hover:hover){
  .article-page .famyro-author-link:hover,
  .article-page .famyro-author-link:focus-visible{
    color:#07864e;
    text-decoration:none;
    outline:none;
  }
}
.article-page .famyro-editorial-note{
  padding:0 0 32px;
  background:#f8f5ea;
}
.article-page .famyro-editorial-note .article-container{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-height:112px;
  padding:22px 30px;
  border:1px solid #dfe7e2;
  border-radius:14px;
  background:rgba(255,255,255,.78);
  color:#53665f;
  font-size:16px;
  line-height:1.6;
}
.article-page .famyro-editorial-note .article-container::before{
  content:"";
  width:52px;
  height:52px;
  flex:0 0 52px;
  border:1px solid #cfe9db;
  border-radius:14px;
  background-color:#eaf8f0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308874f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.75h7.2L18 7.55V20.25H7z'/%3E%3Cpath d='M14 3.75v4h4'/%3E%3Cpath d='M9.7 11h5.6M9.7 14.2h5.6'/%3E%3Cpath d='m9.6 17.25 1.45 1.45 3.15-3.25'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:29px 29px;
}
.article-page .famyro-editorial-note p{
  width:min(100%,960px);
  margin:0;
}
.article-page .famyro-editorial-note strong{
  color:#17372e;
  font-weight:800;
}
.article-page .famyro-editorial-note a{
  color:#087845;
  font-weight:800;
  text-decoration:none;
}
.article-page .famyro-editorial-note a:hover,
.article-page .famyro-editorial-note a:focus-visible{text-decoration:underline}
@media(max-width:640px){
  .article-page .famyro-editorial-note{padding-bottom:24px}
  .article-page .famyro-editorial-note .article-container{
    gap:14px;
    min-height:0;
    padding:18px;
    font-size:14.5px;
    line-height:1.55;
  }
  .article-page .famyro-editorial-note .article-container::before{
    width:44px;
    height:44px;
    flex-basis:44px;
    border-radius:12px;
    background-size:25px 25px;
  }
}

/* v7.176 — Badge categoria delle card correlate */
.article-page .related-category{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:calc(100% - 36px);
  gap:8px;
  font-size:11px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:.06em;
}
.article-page .related-category::before{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#139B4E;
  box-shadow:0 0 0 4px rgba(19,155,78,.13);
}


/* v7.181 — shell Quiz Guide: contenuto statico guest, domande caricate solo nello step autenticato */
.article-page .guide-quiz-shell{
  padding:10px 0 38px;
  background:#f8f5ea;
  scroll-margin-top:104px;
}
.article-page .guide-quiz-card{
  position:relative;
  overflow:hidden;
  padding:34px 36px;
  border:1px solid #d8e7df;
  border-radius:20px;
  background:linear-gradient(135deg,#eef9f2 0%,#ffffff 72%);
  box-shadow:0 14px 34px rgba(6,45,33,.08);
}
.article-page .guide-quiz-card::after{
  content:none;
  display:none;
  position:absolute;
  right:28px;
  top:50%;
  transform:translateY(-50%);
  color:rgba(19,155,78,.08);
  font:900 132px/1 Poppins,sans-serif;
  pointer-events:none;
}
.article-page .guide-quiz-kicker{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:10px;
  color:#139b4e;
  font:700 12px/1.25 Poppins,sans-serif;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.article-page .guide-quiz-kicker::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#139b4e;
  box-shadow:0 0 0 4px rgba(19,155,78,.13);
}
.article-page .guide-quiz-card h2{
  position:relative;
  z-index:1;
  max-width:700px;
  margin:0 0 8px;
  color:#12382d;
  font:900 clamp(28px,3vw,40px)/1.12 Poppins,sans-serif;
  letter-spacing:-.035em;
}
.article-page .guide-quiz-card>p{
  position:relative;
  z-index:1;
  max-width:680px;
  margin:0;
  color:#40564f;
  font-size:17px;
  line-height:1.6;
}
.article-page .guide-quiz-actions{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}
.article-page .guide-quiz-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 20px;
  border-radius:10px;
  font:800 14px/1 Poppins,sans-serif;
  text-decoration:none !important;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease;
}
.article-page .guide-quiz-login{
  border:1px solid #0d7f4a;
  background:#139b4e;
  box-shadow:0 4px 0 #075f37;
  color:#fff;
}
.article-page .guide-quiz-register{
  border:1px solid #cbdcd3;
  background:#fff;
  color:#12382d;
}
@media(hover:hover){
  .article-page .guide-quiz-actions a:hover{transform:translateY(-2px)}
  .article-page .guide-quiz-login:hover{box-shadow:0 6px 0 #075f37;background:#17a957}
  .article-page .guide-quiz-register:hover{border-color:#9fcab4;background:#f8fffb}
}
.article-page .guide-quiz-actions a:focus-visible{
  outline:3px solid rgba(19,155,78,.24);
  outline-offset:3px;
}
.article-page .guide-quiz-actions a:active{transform:translateY(1px)}
/* Finché lo Step 5 non carica il quiz autenticato, evita di mostrare CTA di login a chi è già loggato. */
.article-page header[data-editorial-account-hydrated="authenticated"] ~ main .guide-quiz-shell{display:none}
@media(max-width:640px){
  .article-page .guide-quiz-shell{padding:6px 0 28px;scroll-margin-top:86px}
  .article-page .guide-quiz-card{padding:26px 20px;border-radius:16px}
  .article-page .guide-quiz-card::after{right:10px;font-size:100px}
  .article-page .guide-quiz-card h2{font-size:30px}
  .article-page .guide-quiz-card>p{font-size:15.5px;line-height:1.55}
  .article-page .guide-quiz-actions{display:grid}
  .article-page .guide-quiz-actions a{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .article-page .guide-quiz-actions a{transition:none}
}