/* ShareNarrate /sharenarrate/. Common components come from base.css, app.css and app-landing.css. */
.sn-page .flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin:56px 0 0;padding:0;list-style:none}
.sn-page .rel{padding-top:0}
.sn-page .ftr-cred{font-size:15px;color:var(--ink-2);margin:0}
.sn-page .hero-grid>*,.sn-page .split>*{min-width:0}
.sn-page .step-v>svg{max-width:100%;height:auto}
.sn-page section[id],.sn-page #ios{scroll-margin-top:120px}

.sn-icon{border-radius:22.5%}
.badge-btn{font:inherit;cursor:pointer;background:none;border:0;padding:0;border-radius:12px;display:inline-flex;line-height:0;min-height:44px}
.badge-btn img{height:56px;width:auto;display:block}
.badge-btn:hover img{filter:brightness(1.25)}
.tagline{font-size:22px;line-height:1.35;font-weight:600;color:#C4402A;margin:-8px 0 20px;letter-spacing:-.01em}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.split.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split.rev>.txt{order:2}
.checks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:17px;color:#3A3A3A}
.checks .ic{margin-top:4px;color:#171717}
.note-s{font-size:15px;color:#3A3A3A;margin:20px 0 0;padding:12px 14px;border-radius:12px;background:#F3F3EF;border:1px solid #E5E5E0;display:flex;gap:10px;align-items:flex-start}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:650;border-radius:999px;padding:5px 12px;margin:0 0 18px}
.pill.wip{background:#FFF4D6;color:#7A5200;border:1px solid #F0D58A}
.pill.ok{background:#E6F2EA;color:#1F5A33;border:1px solid #BFDCC8}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}

/* Animazione hero */
.anim{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px}
.anim::before{content:"";position:absolute;width:min(520px,100%);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,#F6E3DA,rgba(250,250,248,0));top:50%;left:50%;transform:translate(-50%,-56%);z-index:0}
.ph{position:relative;z-index:1;width:290px;aspect-ratio:9/18.6;background:#1B1B1D;border-radius:42px;padding:10px;box-shadow:0 40px 70px -40px rgba(60,20,10,.55),0 2px 6px rgba(0,0,0,.12)}
.scr{position:relative;width:100%;height:100%;border-radius:33px;overflow:hidden;background:#FFFFFF;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.lay{position:absolute;inset:0}
.web{padding:0;background:#FFFFFF;display:flex;flex-direction:column}
.w-status{display:flex;justify-content:space-between;align-items:center;padding:12px 18px 4px;font-size:10px;font-weight:700;color:#171717}
.w-sys{display:flex;align-items:center;gap:3px}
.w-sys i{display:block;width:10px;height:6px;border-radius:2px;background:#171717}
.w-sys b{display:block;width:16px;height:8px;border-radius:2px;border:1.5px solid #171717}
.w-bar{display:flex;align-items:center;gap:6px;padding:4px 10px 8px;background:#F4F4F1;border-bottom:1px solid #E5E5E0}
.w-url{flex:1;min-width:0;height:26px;border-radius:13px;background:#FFFFFF;border:1px solid #E1E1DC;display:flex;align-items:center;padding:0 9px;gap:5px;color:#5B5B5B;font-size:9.5px;white-space:nowrap;overflow:hidden}
.w-url span{overflow:hidden;text-overflow:ellipsis}
.w-tabs{flex:none;width:18px;height:18px;border:1.5px solid #3A3A3A;border-radius:4px;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#3A3A3A}
.w-share{position:relative;flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#3A3A3A}
.w-site{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid #EFEFEA}
.w-site b{font:700 14px Georgia,"Times New Roman",serif;color:#171717;letter-spacing:-.01em}
.w-nav{display:flex;gap:7px;margin-left:auto}
.w-nav i{font-style:normal;font-size:8.5px;color:#5B5B5B}
.w-menu{display:grid;gap:2px}
.w-menu i{display:block;width:11px;height:1.5px;background:#3A3A3A}
.w-page{padding:12px 14px 0}
.w-cat{margin:0 0 4px;font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#C4402A}
.w-title{margin:0 0 5px;font:700 15px/1.2 Georgia,"Times New Roman",serif;color:#171717}
.w-by{margin:0 0 9px;font-size:8.5px;color:#7A7A74}
.w-img{height:92px;border-radius:8px;margin:0 0 9px;background:linear-gradient(135deg,#F2C9A8,#D97A55 55%,#8E3B25)}
.w-txt{margin:0 0 6px;font:10px/1.45 Georgia,"Times New Roman",serif;color:#3A3A3A}
.w-p{height:6px;border-radius:3px;background:#DCDCD6;margin:0 0 7px}
.w-p.s{width:64%}.w-p.m{width:86%}
.tap{position:absolute;width:44px;height:44px;border-radius:50%;background:rgba(196,64,42,.35);border:2px solid rgba(196,64,42,.8);pointer-events:none;opacity:0}
.tap1{top:-7px;left:-7px;animation:sn-tap1 10s infinite}
.scrim{background:rgba(20,20,20,.35);opacity:0;animation:sn-dim 10s infinite}
.sheet{top:auto;height:44%;background:#FFFFFF;border-radius:24px 24px 0 0;padding:10px 14px 0;transform:translateY(105%);animation:sn-sheet 10s infinite;box-shadow:0 -8px 24px rgba(0,0,0,.12)}
.sh-h{width:36px;height:4px;border-radius:2px;background:#D5D5CF;margin:0 auto 12px}
.sh-t{font-size:13px;font-weight:700;color:#171717;margin:0 0 4px}
.sh-l{height:6px;width:50%;border-radius:3px;background:#E3E3DE;margin:0 0 16px}
.sh-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.sh-a{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10px;color:#3A3A3A;position:relative}
.sh-a b{display:block;width:44px;height:44px;border-radius:50%}
.sh-a i{display:block;height:5px;width:34px;border-radius:3px;background:#E3E3DE}
.sh-a .sn{position:relative;width:46px;height:46px;animation:sn-press 10s infinite}
.sh-a .sn img{width:46px;height:46px;display:block;border-radius:22.5%}
.sh-a .sn .tap{top:1px;left:1px;animation:sn-tap2 10s infinite}
.sh-a strong{font-size:10px;font-weight:650;color:#171717}
.app{background:#F6F2EA;padding:30px 18px 18px;opacity:0;animation:sn-app 10s infinite;display:flex;flex-direction:column}
.ap-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#1E2A22;margin:0 0 18px}
.ap-h img{width:22px;height:22px;border-radius:22.5%}
.ap-card{background:#FFFFFF;border-radius:18px;padding:14px}
.ap-st{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:#2E6B44;margin:0 0 8px}
.ap-st .dot{background:#2E6B44}
.ap-tt{height:10px;border-radius:4px;background:#1E2A22;margin:0 0 6px}
.ap-tt.s{width:58%;margin-bottom:14px}
.ap-tt2{font:700 13px/1.25 Georgia,"Times New Roman",serif;color:#1E2A22;margin:0 0 10px}
.wave{display:flex;align-items:center;justify-content:center;gap:4px;height:46px;margin:0 0 12px}
.wave i{display:block;width:5px;height:40px;border-radius:3px;background:#C4402A;transform:scaleY(.25);animation:sn-bar-a 10s ease-in-out infinite}
.wave i:nth-child(2n){animation-name:sn-bar-b}
.wave i:nth-child(3n){animation-name:sn-bar-c}
.wave i:nth-child(4n){animation-name:sn-bar-d}
.prog{height:4px;border-radius:2px;background:#E8E1D4;overflow:hidden}
.prog span{display:block;height:100%;width:0;background:#C4402A;border-radius:2px;animation:sn-prog 10s infinite linear}
.ap-ctl{display:flex;align-items:center;justify-content:space-between;margin:12px 0 0}
.ap-sp{font-size:11px;font-weight:700;color:#1E2A22;border:1px solid #DCD5C8;border-radius:999px;padding:3px 9px}
.ap-pl{width:34px;height:34px;border-radius:50%;background:#C4402A;color:#FFFFFF;display:flex;align-items:center;justify-content:center}
.ap-txt{margin:16px 2px 0;display:grid;gap:8px}
.ap-txt i{display:block;height:7px;border-radius:4px;background:linear-gradient(90deg,#C4402A 50%,#DCD5C8 50%);background-size:200% 100%;background-position:100% 0;animation:sn-hl1 10s infinite linear}
.ap-txt i:nth-child(2){animation-name:sn-hl2;width:92%}
.ap-txt i:nth-child(3){animation-name:sn-hl3}
.ap-txt i:nth-child(4){animation-name:sn-hl4;width:70%}
.steps-c{position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0;padding:0;list-style:none}
.steps-c li{font-size:14px;font-weight:600;color:#8A8A84;border:1px solid #E5E5E0;background:#FFFFFF;border-radius:999px;padding:6px 12px;display:flex;align-items:center;gap:8px}
.steps-c li span{display:inline-flex;width:20px;height:20px;border-radius:50%;background:#EFEFEC;align-items:center;justify-content:center;font-size:11px}
.steps-c li:nth-child(1){animation:sn-c1 10s infinite}
.steps-c li:nth-child(2){animation:sn-c2 10s infinite}
.steps-c li:nth-child(3){animation:sn-c3 10s infinite}
.a-ctl{position:relative;z-index:1;font:inherit;font-size:14px;font-weight:600;color:#3A3A3A;background:none;border:1px solid #CFCFC8;border-radius:999px;min-height:44px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.a-ctl:hover{background:#F0F0EC;color:#171717}
.anim.paused,.anim.paused *,.anim.paused::before,.anim.paused *::before,.anim.paused *::after{animation-play-state:paused !important}
@keyframes sn-tap1{0%,9%{opacity:0;transform:scale(.4)}13%{opacity:1;transform:scale(1)}19%,100%{opacity:0;transform:scale(1.6)}}
@keyframes sn-dim{0%,19%{opacity:0}25%,45%{opacity:1}50%,100%{opacity:0}}
@keyframes sn-sheet{0%,19%{transform:translateY(105%)}25%,45%{transform:translateY(0)}51%,100%{transform:translateY(105%)}}
@keyframes sn-tap2{0%,33%{opacity:0;transform:scale(.4)}37%{opacity:1;transform:scale(1)}43%,100%{opacity:0;transform:scale(1.7)}}
@keyframes sn-press{0%,35%{transform:scale(1)}38%{transform:scale(.88)}42%,100%{transform:scale(1)}}
@keyframes sn-app{0%,44%{opacity:0;transform:translateY(6%)}50%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes sn-prog{0%,50%{width:0}90%,100%{width:78%}}
@keyframes sn-hl1{0%,52%{background-position:100% 0}60%,94%{background-position:0 0}98%,100%{background-position:100% 0}}
@keyframes sn-hl2{0%,61%{background-position:100% 0}69%,94%{background-position:0 0}98%,100%{background-position:100% 0}}
@keyframes sn-hl3{0%,70%{background-position:100% 0}78%,94%{background-position:0 0}98%,100%{background-position:100% 0}}
@keyframes sn-hl4{0%,79%{background-position:100% 0}87%,94%{background-position:0 0}98%,100%{background-position:100% 0}}
/* Each wave repeats its pulses inside the same synchronized 10-second cycle. */
@keyframes sn-bar-a{0%,48%,50%,58%,66%,74%,82%,90%,100%{transform:scaleY(.25)}54%,62%,70%,78%,86%{transform:scaleY(1)}}
@keyframes sn-bar-b{0%,48%,54%,62%,70%,78%,86%,94%,100%{transform:scaleY(.3)}50%,58%,66%,74%,82%,90%{transform:scaleY(.85)}}
@keyframes sn-bar-c{0%,48%,52%,62%,72%,82%,92%,100%{transform:scaleY(.2)}57%,67%,77%,87%{transform:scaleY(.95)}}
@keyframes sn-bar-d{0%,48%,56%,66%,76%,86%,94%,100%{transform:scaleY(.3)}51%,61%,71%,81%,91%{transform:scaleY(.75)}}
@keyframes sn-c1{0%,19%{color:#171717;border-color:#171717}21%,100%{color:#8A8A84;border-color:#E5E5E0}}
@keyframes sn-c2{0%,19%{color:#8A8A84;border-color:#E5E5E0}21%,45%{color:#171717;border-color:#171717}47%,100%{color:#8A8A84;border-color:#E5E5E0}}
@keyframes sn-c3{0%,45%{color:#8A8A84;border-color:#E5E5E0}47%,94%{color:#C4402A;border-color:#C4402A}96%,100%{color:#8A8A84;border-color:#E5E5E0}}
@media (prefers-reduced-motion: reduce){
  .anim *{animation:none !important}
  .anim .app{opacity:1;transform:none}
  .anim .prog span{width:46%}
  .anim .ap-txt i:nth-child(-n+2){background-position:0 0}
  .anim .wave i{transform:scaleY(.6)}
  .a-ctl{display:none}
}

/* Narratore */
.voices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:48px 0 0;padding:0;list-style:none}
.voice{background:#FFFFFF;border:1px solid #E5E5E0;border-radius:18px;padding:22px}
.voice-ic{width:44px;height:44px;border-radius:12px;background:#FBEDE8;color:#C4402A;display:flex;align-items:center;justify-content:center;margin:0 0 16px}
.voice h3{font-size:20px;font-weight:650;letter-spacing:-.015em;margin:0 0 6px}
.voice p{margin:0;font-size:16px;color:#3A3A3A}

/* Libreria (mock) */
.lib{background:#F6F2EA;border-radius:28px;padding:28px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#1E2A22}
.lib-k{font-size:12px;font-weight:700;letter-spacing:.08em;color:#6B6B63;margin:0 0 14px}
.lib-i{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;background:#FFFFFF;border-radius:16px;padding:14px;margin:0 0 10px}
.lib-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.lib-ic.a{background:#FBEDE8;color:#C4402A}.lib-ic.b{background:#E6F2EA;color:#2E6B44}.lib-ic.c{background:#EEF0F6;color:#3B4A7A}
.lib-l{display:grid;gap:7px}
.lib-l i{display:block;height:8px;border-radius:4px;background:#1E2A22;width:80%}
.lib-l i+i{height:6px;background:#D9D3C7;width:55%}
.lib-p{height:4px;border-radius:2px;background:#E8E1D4;overflow:hidden;margin-top:2px}
.lib-p span{display:block;height:100%;background:#C4402A}
.lib-r{font-size:12px;font-weight:700;color:#6B6B63}
.lib-bar{display:flex;align-items:center;gap:12px;background:#1E2A22;color:#F6F2EA;border-radius:16px;padding:12px 14px;margin-top:16px;font-size:13px;font-weight:600}
.lib-bar .pp{width:36px;height:36px;border-radius:50%;background:#C4402A;display:flex;align-items:center;justify-content:center;flex:none}
.lib-bar .sp{margin-left:auto;border:1px solid rgba(246,242,234,.35);border-radius:999px;padding:4px 10px;font-size:12px}
.lib-bar .lb{display:grid;gap:6px;flex:1;min-width:0}
.lib-bar .lb i{display:block;height:7px;border-radius:4px;background:rgba(246,242,234,.85);width:70%}
.lib-bar .lb i+i{height:4px;background:rgba(246,242,234,.25);width:100%}

/* Telefono con screenshot */
.pframe{width:300px;max-width:100%;margin:0 auto;background:#1B1B1D;border-radius:44px;padding:10px;box-shadow:0 40px 70px -40px rgba(60,20,10,.45),0 2px 6px rgba(0,0,0,.1)}
.pframe img{display:block;width:100%;height:auto;border-radius:34px}

/* Piattaforme */
.plats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:40px 0 0}
.plat{background:#FFFFFF;border:1px solid #E5E5E0;border-radius:20px;padding:28px}
.plat h3{font-size:24px;font-weight:650;letter-spacing:-.02em;margin:0 0 8px}
.plat p{margin:0 0 18px;font-size:17px;color:#3A3A3A}
.plat .pill{margin:0 0 14px}

@media (max-width: 1180px){.voices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 960px){
  .split,.split.rev{grid-template-columns:minmax(0,1fr);gap:40px}
  .split.rev>.txt{order:0}
}
@media (max-width: 640px){
  .badge-btn img{height:52px}
  .tagline{font-size:19px}
  .ph{width:250px;border-radius:38px}
  .scr{border-radius:29px}
  .voices,.plats{grid-template-columns:minmax(0,1fr)}
  .lib{padding:18px;border-radius:22px}
  .plat{padding:22px}
}

/* Page-only adaptations keep the full navigation usable at tablet widths. */
@media (max-width:1180px){
  .sn-page .hdr-in{flex-wrap:wrap;gap:0 20px;padding-top:12px;padding-bottom:8px}
  .sn-page .nav{flex:1 0 100%;margin-left:0;justify-content:flex-end}
}
@media (max-width:960px){
  .sn-page .flow{grid-template-columns:minmax(0,1fr);gap:28px}
  .sn-page .flow .step{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:0 32px}
}
@media (max-width:720px){
  .sn-page .hdr-in{flex-wrap:nowrap;padding-top:0;padding-bottom:0}
  .sn-page .nav{flex:0 0 auto;margin-left:auto}
  .sn-page section[id]{scroll-margin-top:84px}
}
@media (max-width:640px){
  .sn-page .flow .step{display:block}
  .sn-page .cta-row .badge-btn{width:100%;justify-content:center}
  .sn-page .rel-card{padding:14px;gap:14px;min-width:0}
  .sn-page .rel-card>span{min-width:0}
  .sn-page .rel-card>img{width:48px;height:48px}
}