/* OkiDocky — sito v3 (più giocoso, accessibile). Base v2. Impostazione ispirata alle pagine prodotto di apple.com,
   con i colori del brand OkiDocky (corallo al posto del blu dei link). */
:root {
  /* Colori corporate OkiDocky: corallo, marrone, crema. Più bianco e grigi. */
  --coral: #EB676D;
  --brown: #402E29;
  --cream: #FFF3D8;
  --bg: #FFFFFF;
  --bg-alt: #F5F5F7;
  --tile: #FFFFFF;
  --ink: #402E29;
  --ink-2: #6E6E73;
  --ink-3: #8E8E93;
  --line: #D9D9DE;
  --coral-link: #EB676D;
  --on-brown: #FFF3D8;
  --on-brown-2: rgba(255,243,216,.72);
  --nav: rgba(251,251,253,.8);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  :root {
    --bg: #402E29; --bg-alt: #4A3631; --tile: #55403A;
    --ink: #FFF3D8; --ink-2: #D9CBBF; --ink-3: #B7A79C; --line: #67514A;
    --coral-link: #EB676D; --nav: rgba(64,46,41,.82);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.47 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -0.022em; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: var(--coral-link); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 22px; }
.wide { max-width: 1200px; margin: 0 auto; padding: 0 22px; }
h1, h2, h3, .display { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif; margin: 0; font-weight: 600; letter-spacing: -0.015em; }
.center { text-align: center; }
.more { font-size: 19px; display: inline-flex; gap: 4px; align-items: center; }
.more::after { content: "›"; font-size: 1.15em; line-height: 1; }

/* Global nav (sottile, come apple.com) */
.gnav { background: var(--nav); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); height: 44px; position: relative; z-index: 20; }
.gnav .wrap { display: flex; align-items: center; height: 100%; gap: 32px; font-size: 12px; }
.gnav .brand img { height: 30px; width: auto; }
.gnav nav { display: flex; gap: 32px; margin-left: auto; }
.gnav a { color: var(--ink); opacity: .85; }
.gnav a:hover { opacity: 1; text-decoration: none; }
.gnav .lang a.on { font-weight: 700; opacity: 1; }
@media (max-width: 734px) { .gnav nav { display: none; } .gnav .lang { margin-left: auto; } }

/* Local nav sticky (titolo prodotto + bottone) */
.lnav { position: sticky; top: 0; z-index: 19; background: var(--nav); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.lnav .wrap { display: flex; align-items: center; height: 52px; gap: 24px; }
.lnav .title { font-size: 21px; font-weight: 600; letter-spacing: .011em; color: var(--ink); }
.lnav .title:hover { text-decoration: none; }
.lnav .links { display: flex; gap: 24px; margin-left: auto; font-size: 12px; }
.lnav .links a { color: var(--ink); opacity: .8; }
.pill { display: inline-block; background: var(--coral); color: #FFFFFF; font-size: 12px; font-weight: 400; padding: 4px 11px; border-radius: 980px; white-space: nowrap; }
.pill:hover { text-decoration: none; background: var(--coral-link); }
.pill.lg { font-size: 17px; padding: 11px 22px; }
.pill.ghost { background: transparent; color: var(--coral-link); border: 1px solid var(--coral-link); }
@media (max-width: 734px) { .lnav .links { display: none; } .lnav .pill { margin-left: auto; } }

/* Hero */
.hero { text-align: center; padding: 70px 0 0; overflow: hidden; }
.hero .eyebrow { font-size: 21px; font-weight: 600; color: var(--coral); margin-bottom: 6px; }
.hero h1 { font-size: clamp(48px, 8vw, 96px); line-height: 1.04; font-weight: 700; letter-spacing: -0.035em; }
.hero p.sub { font-size: clamp(21px, 2.4vw, 28px); line-height: 1.17; color: var(--ink-2); margin: 16px auto 0; max-width: 640px; font-weight: 500; }
.hero .ctas { display: flex; gap: 28px; justify-content: center; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.hero-stage { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 3vw, 40px); margin-top: 56px; height: clamp(330px, 48vw, 600px); overflow: hidden; }
.hero-stage .ps { width: clamp(170px, 24vw, 300px); flex: none; }
.hero-stage .ps.side { margin-top: 7%; }

.hero-note { font-size: 14px; color: var(--ink-3); margin-top: 18px; }

/* Phone frame */
.phone { position: relative; background: var(--brown); border-radius: 15% / 7%; padding: 3.2%; box-shadow: 0 0 0 1px #5a443d inset, 0 30px 60px -28px rgba(64,46,41,.5); flex: none; }
.phone img, .phone .screen { width: 100%; aspect-ratio: 1320 / 2868; border-radius: 12% / 5.6%; object-fit: cover; }
.phone::after { content: ""; position: absolute; top: 4.5%; left: 50%; width: 29%; height: 3.4%; transform: translateX(-50%); background: #2E211D; border-radius: 99px; }
.phone .screen { background: linear-gradient(180deg, #F5F5F7, #ECECEF); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16%; gap: 8px; color: #86868B; font-size: 12px; line-height: 1.3; }
.phone .screen b { color: #6E6E73; font-size: 13px; }
.phone .screen::before { content: ""; width: 34px; height: 34px; border-radius: 10px; border: 2px dashed #C7C7CC; }

/* Section shells */
.section { padding: 120px 0; }
.alt { background: var(--bg-alt); }
.dark { background: var(--brown); color: var(--on-brown); }
.dark .sub, .dark p { color: var(--on-brown-2); }
.headline { font-size: clamp(40px, 5.6vw, 64px); line-height: 1.06; font-weight: 700; letter-spacing: -0.03em; }
.section .sub { font-size: clamp(19px, 2vw, 24px); line-height: 1.3; color: var(--ink-2); max-width: 720px; margin: 18px auto 0; font-weight: 500; }
.kicker { font-size: 17px; font-weight: 600; color: var(--coral); margin-bottom: 8px; }

/* Statement band */
.statement { font-size: clamp(32px, 4.8vw, 56px); line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; max-width: 900px; margin: 0 auto; text-align: center; }
.statement .dim { color: rgba(255,243,216,.45); }
.statement .hl { background: linear-gradient(90deg, #EB676D, #EB676D); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Carousel (Get the highlights) */
.carousel { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 50px max(22px, calc((100vw - 980px) / 2)) 30px; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.card { scroll-snap-align: center; flex: none; width: min(372px, 80vw); height: 640px; border-radius: 28px; background: var(--tile); position: relative; overflow: hidden; padding: 32px 30px 0; display: flex; flex-direction: column; }
.alt .card { background: var(--tile); }
.card .step { font-size: 14px; font-weight: 600; color: var(--coral); }
.card h3 { font-size: 28px; line-height: 1.14; font-weight: 700; margin-top: 6px; letter-spacing: -0.02em; }
.card p { color: var(--ink-2); font-size: 17px; margin: 8px 0 0; }
.card .phone { width: 72%; margin: auto auto -22%; }
.dots { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--line); cursor: pointer; }
.dots button.on { background: var(--ink-2); }

/* Bento tiles */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 60px; }
.tile { background: var(--tile); border-radius: 28px; padding: 40px; overflow: hidden; position: relative; min-height: 240px; }
.tile.s4, .tile.s2:first-of-type { min-height: 320px; }
.tile.s2 { grid-column: span 2; } .tile.s3 { grid-column: span 3; } .tile.s4 { grid-column: span 4; } .tile.s6 { grid-column: span 6; }
.tile h3 { font-size: 28px; line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; }
.tile p { color: var(--ink-2); margin: 10px 0 0; font-size: 17px; }
.tile .big { font-size: clamp(56px, 7vw, 88px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; background: linear-gradient(135deg, #402E29, #EB676D 60%, #EB676D); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 14px; }
.tile.dark-tile { background: var(--brown); color: var(--on-brown); }
.tile.dark-tile p { color: var(--on-brown-2); }
.tile.coral-tile { background: linear-gradient(140deg, #402E29, #8E4B4D 55%, #EB676D); color: var(--cream); }
.tile.coral-tile p { color: rgba(255,243,216,.85); }
.tile .tile-phone { position: absolute; right: 8%; top: 48px; width: min(26%, 300px); }
.tile .example { margin-top: 26px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -0.02em; }
.tile .example span { color: var(--coral); }
.tile .example em { font-style: normal; color: var(--ink-2); font-weight: 500; }
.tile svg.ic { width: 40px; height: 40px; stroke: var(--coral); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px; }
@media (max-width: 1068px) { .tile.s2 { grid-column: span 3; } }
@media (max-width: 734px) { .hero-stage .ps.side { display: none; } .bento { grid-template-columns: 1fr; } .tile.s2, .tile.s3, .tile.s4, .tile.s6 { grid-column: auto; } .tile { min-height: 0; padding: 30px; } .tile .tile-phone { position: static; width: 52%; margin: 26px auto -30%; } }

/* Privacy (stile pagina privacy Apple) */
.privacy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 70px; text-align: left; }
.privacy-grid svg { width: 44px; height: 44px; stroke: var(--coral); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 16px; }
.privacy-grid h3 { font-size: 21px; font-weight: 700; color: var(--on-brown); }
.privacy-grid p { margin: 8px 0 0; font-size: 17px; }
@media (max-width: 860px) { .privacy-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .privacy-grid { grid-template-columns: 1fr; } }

/* Compare (Quale modello fa per te) */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 64px; text-align: center; }
.compare .col { padding: 0 30px; }
.compare .col + .col { border-left: 1px solid var(--line); }
.compare .name { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.compare .name .p { color: var(--coral); }
.compare .price { font-size: 17px; color: var(--ink-2); margin: 8px 0 22px; min-height: 52px; }
.compare ul { list-style: none; padding: 0; margin: 30px 0 0; border-top: 1px solid var(--line); }
.compare li { padding: 22px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.compare li.no { color: var(--ink-3); }
.compare li small { display: block; color: var(--coral); font-size: 12px; font-weight: 600; margin-top: 2px; }
.fine { color: var(--ink-3); font-size: 14px; margin-top: 40px; }
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; gap: 60px; } .compare .col + .col { border-left: 0; } }

/* Quote */
.quote { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.18; font-weight: 600; letter-spacing: -0.02em; max-width: 860px; margin: 0 auto; }
.quote-by { color: var(--ink-2); margin-top: 26px; font-size: 17px; }

/* FAQ */
.faq { max-width: 820px; margin: 56px auto 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; font-size: 21px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-2); font-weight: 300; font-size: 26px; line-height: 1; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 24px; color: var(--ink-2); font-size: 17px; }

/* Final CTA */
.final img.icon { width: 120px; height: 120px; border-radius: 27px; margin: 0 auto 30px; }

/* App Store badge */
.badge { display: inline-flex; align-items: center; gap: 10px; background: var(--brown); color: var(--cream); padding: 9px 20px 9px 16px; border-radius: 12px; line-height: 1.1; }
.badge svg { width: 24px; height: 24px; fill: var(--cream); }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .badge { background: var(--cream); color: var(--brown); } .badge svg { fill: var(--brown); } }
.badge small { display: block; font-size: 10.5px; }
.badge strong { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.badge:hover { text-decoration: none; }

/* Footer (fitto e piccolo, come apple.com) */
.footer { background: var(--bg-alt); color: var(--ink-2); font-size: 12px; line-height: 1.34; padding: 20px 0 22px; }
.footer .notes { padding: 17px 0 11px; border-bottom: 1px solid var(--line); }
.footer .notes p { margin: 0 0 8px; }
.footer .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 22px 0; }
.footer h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--ink); }
.footer .cols a { display: block; color: var(--ink-2); margin-bottom: 8px; }
.footer .bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; }
.footer .bottom img { height: 34px; width: auto; }
@media (max-width: 734px) { .footer .cols { grid-template-columns: 1fr; } }

/* Inner pages */
.page { padding: 80px 0 110px; }
.page .wrap { max-width: 760px; }
.page h1 { font-size: clamp(40px, 6vw, 64px); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 8px; }
.page .updated { color: var(--ink-2); margin: 0 0 40px; }
.page h2 { font-size: 24px; font-weight: 700; margin: 44px 0 12px; letter-spacing: -0.015em; }
.page ul { padding-left: 22px; } .page li { margin-bottom: 8px; }
.page .lead { font-size: 21px; color: var(--ink-2); line-height: 1.38; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 20px; }
.dl { background: var(--bg-alt); border-radius: 18px; padding: 20px; color: var(--ink); display: flex; flex-direction: column; gap: 6px; }
.dl:hover { text-decoration: none; background: color-mix(in srgb, var(--bg-alt) 80%, var(--coral) 8%); }
.dl .thumb { aspect-ratio: 16/10; border-radius: 12px; background: var(--bg); display: grid; place-items: center; margin-bottom: 10px; overflow: hidden; }
.dl .thumb.darkbg { background: var(--brown); }
.dl .thumb img { max-height: 76%; max-width: 76%; }
.dl b { font-size: 17px; } .dl small { color: var(--ink-2); font-size: 14px; } .dl small::after { content: " ↓"; color: var(--coral-link); }
.facts { width: 100%; border-collapse: collapse; margin-top: 14px; }
.facts th, .facts td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.facts th { color: var(--ink-2); font-weight: 400; width: 36%; }

/* Contrasto sulle fasce marroni */
.section.dark .sub, .section.dark p { color: var(--on-brown-2); }
.section.dark .kicker { color: var(--coral); }
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  .tile .big { background-image: linear-gradient(135deg, #FFF3D8, #EB676D 70%); }
  .section.dark { background: #33241F; }
}

/* ===== v2.1: logo, foto, animazioni ===== */
.lnav .title img { height: 26px; width: auto; display: block; }

/* Lockup animato (lente + OkiDocky) */
.hero-lockup { width: clamp(220px, 30vw, 340px); margin: 0 auto 18px; }
.lockup-anim { width: 100%; height: auto; display: block; overflow: visible; }
.lockup-anim .lk-ink { fill: var(--brown); }
.lockup-anim .lk-coral, .lockup-anim .lk-arc { fill: var(--coral); }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .lockup-anim .lk-ink { fill: var(--cream); } }
.lockup-anim .lk-arc, .lockup-anim .lk-handle { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.6) rotate(-30deg); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.9,.25,1.2); }
.lockup-anim .lk-handle { transition-delay: .25s; transform: translate(-20%, -20%); }
.lockup-anim .lk-tick { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); transition: opacity .3s ease, transform .45s cubic-bezier(.2,.9,.25,1.4), fill .5s ease; transition-delay: calc(.7s + var(--i) * .09s); fill: var(--coral); }
.lockup-anim .lk-word, .lockup-anim > .lk-coral { opacity: 0; transform: translateY(14px); transition: opacity .8s ease 1.55s, transform .8s ease 1.55s; }
.lockup-anim.in .lk-arc, .lockup-anim.in .lk-handle, .lockup-anim.in .lk-tick { opacity: 1; transform: none; }
.lockup-anim.in .lk-tick { fill: var(--brown); transition-delay: calc(.7s + var(--i) * .09s), calc(.7s + var(--i) * .09s), calc(1.6s + var(--i) * .09s); }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .lockup-anim.in .lk-tick { fill: var(--cream); } }
.lockup-anim.in .lk-word, .lockup-anim.in > .lk-coral { opacity: 1; transform: none; }

/* Comparsa allo scorrimento */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.rv.d1 { transition-delay: .12s; } .rv.d2 { transition-delay: .24s; }
.rv.in { opacity: 1; transform: none; }
.hero-stage .ps { opacity: 0; transform: translateY(90px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); }
.hero-stage .ps:nth-child(2) { transition-delay: .2s; } .hero-stage .ps:nth-child(1) { transition-delay: .45s; } .hero-stage .ps:nth-child(3) { transition-delay: .55s; }
.hero-stage.in .ps { opacity: 1; transform: none; }
.plus-pulse { display: inline-block; color: var(--coral); }
.plus-pulse.in { animation: plusPulse 2.4s ease-in-out infinite; }
@keyframes plusPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.22); text-shadow: 0 0 22px rgba(235,103,109,.7); } }

/* Foto */
.photo { display: block; width: 100%; height: auto; object-fit: cover; }
.photo.round { border-radius: 28px; }
.photo-band { padding: 90px 0 0; }
.photo-band .frame { position: relative; border-radius: 32px; overflow: hidden; }
.photo-band .photo { aspect-ratio: 16/8; }
.photo-band .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 120px 48px 40px; background: linear-gradient(transparent, rgba(64,46,41,.82)); color: var(--cream); }
.photo-band h2 { margin: 0; font-size: clamp(28px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.025em; }
.photo-band p { margin: 8px 0 0; font-size: clamp(17px, 1.8vw, 21px); color: rgba(255,243,216,.85); }
.split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.split .photo { aspect-ratio: 4/3.4; }
.split .statement { text-align: left; margin: 0; }
.life { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 56px; }
.life figure { margin: 0; background: var(--bg-alt); border-radius: 28px; overflow: hidden; }
.life .photo { aspect-ratio: 16/10; }
.life figcaption { padding: 26px 30px 32px; }
.life h3 { margin: 0; font-size: 24px; letter-spacing: -0.02em; }
.life p { margin: 8px 0 0; color: var(--ink-2); }
.life figure.w { grid-column: 1 / -1; position: relative; }
.life figure.w .photo { aspect-ratio: 16/7; }
.life figure.w figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 90px 36px 30px; background: linear-gradient(transparent, rgba(64,46,41,.8)); color: var(--cream); }
.life figure.w h3 { font-size: clamp(26px, 3.4vw, 40px); }
.priv-photo { max-width: 560px; margin: 44px auto 10px; }
.priv-photo .photo { aspect-ratio: 16/10; }
.final { position: relative; }
.final-photo { max-width: 980px; margin: 0 auto 56px; padding: 0 22px; }
.final-photo .photo { border-radius: 28px; aspect-ratio: 16/8; }
.final-lockup { width: 260px; margin: 0 auto 26px; }
@media (max-width: 734px) {
  .split { grid-template-columns: 1fr; gap: 32px; } .split .statement { text-align: center; }
  .life { grid-template-columns: 1fr; }
  .photo-band .photo, .life figure.w .photo { aspect-ratio: 4/3.6; }
  .photo-band .cap { padding: 80px 24px 26px; }
}

/* Footer LikeHome */
.footer .maker { display: flex; align-items: center; gap: 14px; padding: 6px 0 18px; color: var(--ink); }
.footer .maker span { font-size: 12px; color: var(--ink-2); }
.footer .likehome { height: 44px; width: auto; color: var(--brown); }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .footer .likehome { color: var(--cream); } }

@media (prefers-reduced-motion: reduce) {
  .rv, .hero-stage .ps, .lockup-anim *, .plus-pulse { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ===== v3: tono giocoso + accessibilità ===== */
:root {
  --coral-text: #EB676D;   /* corallo per testi piccoli su chiaro: contrasto 5:1 */
  --ink-3: #6E6E73;        /* prima #8E8E93 (3,3:1): ora 5:1 */
  --coral-link: #EB676D;
  --round: "Nunito", ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) and (max-width: 0px) { :root { --coral-text: #EB676D; --coral-link: #EB676D; --ink-3: #D9CBBF; } }
.kicker, .card .step, .compare .name .p, .compare li small { color: var(--coral-text); }
.section.dark .kicker { color: #EB676D; }
.statement .dim { color: rgba(255,243,216,.72); }
.pill { background: var(--coral-text); }
.pill:hover { background: #EB676D; }

/* Titoli tondi e amichevoli, come MacBook Neo */
.hero h1, .headline, .statement, .card h3, .tile h3, .life h3, .photo-band h2, .compare .name, .final h2 { font-family: var(--round); font-weight: 900; letter-spacing: -0.02em; }
.hello { font-size: clamp(56px, 10vw, 120px); line-height: 1; margin: 0; }
.hello .rot { display: inline-grid; color: var(--coral); text-align: left; }
.hello .rot .w { grid-area: 1/1; opacity: 0; transform: translateY(.35em) rotate(-4deg); transition: opacity .45s ease, transform .55s cubic-bezier(.2,1.4,.4,1); }
.hello .rot .w.on { opacity: 1; transform: none; }
.claim { font-family: var(--round); font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); margin: 14px 0 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Carosello novità */
.hls { padding-bottom: 60px; }
.hls .headline { text-align: center; }
.card.hl { height: 460px; padding: 40px 34px; justify-content: flex-start; }
.card.hl h3 { font-size: 34px; line-height: 1.08; margin: 0; }
.card.hl p { font-size: 19px; margin-top: 14px; }
.card.hl .blob { position: absolute; right: -60px; bottom: -60px; width: 260px; height: 260px; border-radius: 50%; opacity: .9; }
.card.hl.coral { background: #EB676D; color: #402E29; } .card.hl.coral p { color: #402E29; } .card.hl.coral .blob { background: radial-gradient(circle at 35% 35%, #FFF3D8, #EB676D 60%, transparent 61%); }
.card.hl.brown { background: #402E29; color: #FFF3D8; } .card.hl.brown p { color: rgba(255,243,216,.82); } .card.hl.brown .blob { background: radial-gradient(circle at 35% 35%, #EB676D, #8E4B4D 60%, transparent 61%); }
.card.hl.cream { background: #FFF3D8; color: #402E29; } .card.hl.cream p { color: #5A463F; } .card.hl.cream .blob { background: radial-gradient(circle at 35% 35%, #EB676D, #EB676D 60%, transparent 61%); }
.card.hl.white { background: #FFFFFF; color: #402E29; box-shadow: inset 0 0 0 1px #E5E5EA; } .card.hl.white p { color: #6E6E73; } .card.hl.white .blob { background: radial-gradient(circle at 35% 35%, #FFF3D8, #EB676D 60%, transparent 61%); }
.hl-car .card.hl .blob { animation: bob 6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-14px, -18px) scale(1.06); } }
.carctl { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 8px; }
.carctl .dots { margin: 0; background: var(--bg-alt); padding: 14px 18px; border-radius: 980px; }
.dots button { width: 10px; height: 10px; position: relative; }
.dots button::after { content: ""; position: absolute; inset: -9px; } /* area di tocco più grande */
.playpause { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--bg-alt); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.playpause svg { width: 18px; height: 18px; fill: currentColor; }
.playpause .i-play { display: none; } .playpause.paused .i-play { display: block; } .playpause.paused .i-pause { display: none; }

/* Fascia "non squillano" */
.ring { background: var(--cream); }
.ring .statement { color: #402E29; }
.ring .statement .hl { background: none; color: var(--coral-text); -webkit-text-fill-color: currentColor; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .ring { background: #4A3631; } .ring .statement { color: var(--cream); } }

/* Accessibilità: salto al contenuto e focus visibile */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--brown); color: var(--cream); padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--coral-text); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .hello .rot .w { transition: none; } .hl-car .card.hl .blob { animation: none; }
}

/* ===== v3.1 (03/10/2026): stile Apple, font SF, titoli e testi grigio scuro =====
   Il marrone corporate resta per fasce scure, badge, cornici iPhone e logo. */
:root {
  --ink: #333336;          /* titoli e testi: grigio scuro (mai nero) */
  --ink-2: #6E6E73;        /* testi secondari */
  --round: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) and (max-width: 0px) { :root { --ink: #FFF3D8; --ink-2: #D9CBBF; } }
.hero h1, .headline, .statement, .card h3, .tile h3, .life h3, .photo-band h2, .compare .name, .final h2, .claim { font-weight: 700; letter-spacing: -0.015em; }
.hello { font-weight: 700; letter-spacing: -0.03em; }
.claim { font-weight: 600; }
.card.hl.coral, .card.hl.coral p { color: #2C2C2E; }
.card.hl.cream, .card.hl.white { color: var(--ink); }
.card.hl.cream p { color: #57575C; }
.ring .statement { color: #333336; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .ring .statement { color: var(--cream); } }

/* ===== v4 (03/10/2026): pagina di LANCIO — più enfasi, stupore, ritmo pubblicitario ===== */
.launch { padding: 40px 0 90px; overflow: hidden; }
.launch-grid { max-width: 1180px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.launch-copy { text-align: left; }
.launch .hero-lockup { width: 210px; margin: 0 0 26px; }
.new { display: inline-block; font-size: 15px; font-weight: 600; color: #FFFFFF; background: var(--coral-text); padding: 4px 12px; border-radius: 980px; letter-spacing: .02em; }
.mega { font-size: clamp(64px, 9.5vw, 132px); line-height: .95; font-weight: 800; letter-spacing: -0.045em; margin: 14px 0 0;
  background: linear-gradient(100deg, #333336 0%, #333336 45%, #EB676D 70%, #EB676D 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .mega { background-image: linear-gradient(100deg, #FFF3D8 0%, #FFF3D8 45%, #EB676D 75%, #EB676D 100%); } }
.lead { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.22; font-weight: 600; color: var(--ink-2); margin: 20px 0 0; letter-spacing: -0.015em; }
.launch .ctas { justify-content: flex-start; margin-top: 30px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.launch .hero-note { margin-top: 16px; }
.launch-demo { position: relative; display: flex; flex-direction: column; align-items: center; }
.demo-cap { color: var(--ink-2); font-size: 15px; margin: 18px 0 0; text-align: center; }
.demo-pp { position: absolute; right: 6%; bottom: 40px; }
.giant { font-size: clamp(48px, 7.4vw, 104px); line-height: 1; font-weight: 800; letter-spacing: -0.04em; margin: 0; }
.giant + .sub { margin-top: 22px; }

/* Demo animata del telefono (disegnata in codice, testi localizzati) */
.demo { width: min(330px, 78vw); }
.dphone { background: var(--brown); border-radius: 54px; padding: 12px; box-shadow: 0 50px 90px -40px rgba(64,46,41,.6), 0 0 0 1px #5a443d inset; transform: rotate(-3deg); }
.dscreen { position: relative; background: #F2F2F7; border-radius: 43px; aspect-ratio: 9 / 19.5; overflow: hidden; font-family: -apple-system, "SF Pro Text", sans-serif; color: #1C1C1E; }
.dstatus { display: flex; justify-content: space-between; align-items: center; padding: 14px 26px 0; font-size: 12px; font-weight: 600; }
.dstatus .isl { width: 84px; height: 24px; background: #2A1F1B; border-radius: 20px; }
.dhome { padding: 20px 16px; }
.dlogo { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; } .dlogo .c { color: #EB676D; }
.dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.dt { background: #fff; border-radius: 14px; padding: 10px 11px; display: flex; flex-direction: column; gap: 2px; }
.dt i { width: 18px; height: 18px; border-radius: 50%; display: block; margin-bottom: 6px; }
.dt b { font-size: 13px; font-weight: 600; } .dt small { font-size: 10px; color: #8E8E93; }
.dsearch { position: absolute; left: 14px; right: 14px; bottom: 22px; height: 40px; background: #fff; border-radius: 20px; display: flex; align-items: center; gap: 6px; padding: 0 14px; font-size: 15px; box-shadow: 0 6px 20px -10px rgba(0,0,0,.25); }
.dsearch .mag { color: #8E8E93; font-size: 18px; }
.caret { width: 2px; height: 18px; background: #EB676D; opacity: 0; }
.dplus { position: absolute; left: 50%; bottom: 78px; width: 62px; height: 62px; margin-left: -31px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #EB676D, #EB676D 60%, #EB676D); color: #fff; font-size: 40px; font-weight: 300; display: grid; place-items: center; box-shadow: 0 12px 24px -8px rgba(235,103,109,.7); transition: transform .25s; }
.dresult { position: absolute; left: 14px; right: 14px; top: 132px; background: #fff; border-radius: 16px; padding: 12px; display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(16px) scale(.96); transition: all .45s cubic-bezier(.2,1.3,.4,1); box-shadow: 0 0 0 0 rgba(235,103,109,.0); }
.dresult .em { font-size: 26px; width: 40px; height: 40px; border-radius: 50%; background: #F2F2F7; display: grid; place-items: center; }
.dresult b { display: block; font-size: 14px; } .dresult small { font-size: 12px; color: #8E8E93; }
.dresult .found { margin-left: auto; font-size: 11px; font-weight: 700; color: #fff; background: #EB676D; padding: 3px 8px; border-radius: 980px; }
.dsheet { position: absolute; left: 0; right: 0; bottom: 0; top: 70px; background: #F2F2F7; border-radius: 26px 26px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.18); padding: 16px; transform: translateY(105%); transition: transform .5s cubic-bezier(.2,.9,.2,1); }
.dsh-top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.dsh-top .x, .dsh-top .ok { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #E5E5EA; font-size: 13px; }
.dsh-top .ok { background: #007AFF; color: #fff; transition: transform .2s; }
.dicon { width: 64px; height: 64px; margin: 18px auto 14px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 32px; }
.dfield { background: #fff; border-radius: 12px; padding: 9px 12px; margin-top: 8px; min-height: 52px; }
.dfield small { display: block; font-size: 11px; color: #8E8E93; } .dfield span { font-size: 16px; font-weight: 500; }
.dtoast { position: absolute; left: 50%; top: 54px; transform: translate(-50%, -30px); opacity: 0; background: #2C2C2E; color: #fff; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 980px; transition: all .35s; white-space: nowrap; }
.finger { position: absolute; width: 46px; height: 46px; border-radius: 50%; background: rgba(64,46,41,.22); border: 2px solid rgba(255,255,255,.8); opacity: 0; pointer-events: none; transition: all .35s; left: 50%; bottom: 86px; margin-left: -23px; }
.dtaps { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.dtaps span { font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 980px; background: var(--bg-alt); color: var(--ink-2); transition: all .3s; }
/* stati */
.s-tap1 .finger, .s-tap2 .finger { opacity: 1; transform: scale(.85); }
.s-tap1 .dplus { transform: scale(.88); }
.s-tap1 .t1, .s-sheet .t1, .s-tap2 .t1, .s-saved .t1, .s-tap2 .t2, .s-saved .t2 { background: var(--coral); color: #2C2C2E; transform: scale(1.08); }
.s-sheet .dsheet, .s-tap2 .dsheet { transform: none; }
.s-tap2 .finger { left: auto; right: 18px; bottom: auto; top: 76px; margin: 0; }
.s-tap2 .dsh-top .ok { transform: scale(.85); }
.s-saved .dtoast { opacity: 1; transform: translate(-50%, 0); }
.s-search .caret, .s-found .caret { opacity: 1; animation: blink 1s steps(1) infinite; }
.s-search .dgrid, .s-found .dgrid { opacity: .25; transition: opacity .3s; }
.s-search .dplus, .s-found .dplus { opacity: 0; transition: opacity .2s; }
.s-found .dresult { opacity: 1; transform: none; box-shadow: 0 0 0 3px rgba(235,103,109,.55), 0 18px 30px -16px rgba(0,0,0,.35); }
.s-search .dsearch, .s-found .dsearch { bottom: auto; top: 76px; transition: top .35s, bottom .35s; }
@keyframes blink { 50% { opacity: 0; } }

/* Domande a raffica */
.questions { padding: 130px 0; }
.questions .q { font-size: clamp(28px, 4.2vw, 54px); line-height: 1.12; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 14px; color: rgba(255,243,216,.55); }
.questions .q:nth-child(odd) { padding-left: 8%; } 
.questions .q.rv { transition-delay: calc(var(--k) * .12s); }
.questions .answer { font-size: clamp(44px, 7vw, 96px); line-height: 1; font-weight: 800; letter-spacing: -0.04em; margin: 70px 0 0; color: var(--coral); }

/* Localizzatore senza localizzatore */
.tracker { padding: 140px 0 120px; }
.tracker .giant { background: linear-gradient(100deg, #333336 30%, #EB676D); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .tracker .giant { background-image: linear-gradient(100deg, #FFF3D8 30%, #EB676D); } }
.nums { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 70px 0 50px; }
.num { background: var(--bg-alt); border-radius: 28px; padding: 30px 22px; text-align: center; transition-delay: calc(var(--k) * .1s) !important; }
.num b { display: block; font-size: clamp(64px, 8vw, 110px); line-height: 1; font-weight: 800; letter-spacing: -0.05em; color: var(--ink); }
.num span { display: block; margin-top: 10px; color: var(--ink-2); font-weight: 600; }
.num.big2 { background: var(--coral); } .num.big2 b, .num.big2 span { color: #2C2C2E; }
.tr-note { font-size: clamp(19px, 2vw, 24px); color: var(--ink-2); max-width: 760px; margin: 0 auto; font-weight: 500; }

/* A prova di nonna */
.nonna .split { grid-template-columns: .9fr 1.1fr; }
.nonna .headline { text-align: left; }
.chips { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { background: var(--bg-alt); border-radius: 980px; padding: 10px 18px; font-weight: 600; font-size: 16px; }
.chips li::before { content: "✓ "; color: var(--coral-text); font-weight: 800; }

/* Fascia corallo */
.coral-band { background: var(--coral); }
.coral-band .statement { color: #2C2C2E; } .coral-band .statement .hl { background: none; color: #FFF3D8; -webkit-text-fill-color: currentColor; }

.final4 .giant { margin-top: 10px; }

@media (max-width: 1068px) { .nums { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .launch-grid { grid-template-columns: 1fr; } .launch-copy { text-align: center; }
  .launch .hero-lockup { margin: 0 auto 22px; } .launch .ctas { justify-content: center; }
  .demo-pp { right: 4%; }
  .nonna .split { grid-template-columns: 1fr; } .nonna .headline { text-align: center; } .nonna .sub { margin-left: auto !important; text-align: center; } .chips { justify-content: center; }
}
@media (max-width: 734px) { .nums { grid-template-columns: 1fr 1fr; } .num.big2 { grid-column: 1 / -1; } .questions .q:nth-child(odd) { padding-left: 0; } }
@media (prefers-reduced-motion: reduce) { .dphone { transform: none; } .dsheet, .dresult, .dtoast, .finger { transition: none !important; } .caret { animation: none !important; } }
/* v4 ritocchi */
.mega { background: none; color: var(--ink); -webkit-text-fill-color: currentColor; }
.mega .hl { background: linear-gradient(100deg, #EB676D, #EB676D 60%, #EB676D); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-right: .04em; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .mega { background: none; } }
.demo { width: min(300px, 74vw); }
.dlogo { transition: opacity .25s; }
.s-search .dlogo, .s-found .dlogo { opacity: 0; }
.dtoast { top: 60px; z-index: 3; }
.section.dark.questions p.answer { color: #EB676D; }
.coral-band .statement .hl { color: #FFFFFF; }

/* ===== v4.1: barra unica con logo che si trasforma allo scroll =====
   In cima: lockup intero grande, barra alta. Dopo ~64 px: resta la sola lente, barra bassa. */
.gnav, .lnav { display: none; }
.hdr { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.hdr-in { display: flex; align-items: center; gap: 28px; height: 125px; transition: height .35s cubic-bezier(.2,.8,.2,1); }
.hdr.is-scrolled .hdr-in { height: 77px; }
.hdr .brand { position: relative; display: flex; align-items: center; margin-right: auto; width: 145px; height: 92px; transition: width .4s; }
.hdr.is-scrolled .brand { width: 60px; }
.brand-complete { display: block; width: 145px; transform-origin: left center; transition: opacity .25s, transform .4s cubic-bezier(.2,.8,.2,1); }
.brand-complete .lockup-anim { width: 145px; }
.brand-symbol { position: absolute; left: 0; top: 50%; width: 54px; height: 54px; margin-top: -27px; opacity: 0; transform: scale(.75); transform-origin: left center; transition: opacity .25s, transform .4s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.hdr.is-scrolled .brand-complete { opacity: 0; transform: translateY(-8px) scale(.8); pointer-events: none; }
.hdr.is-scrolled .brand-symbol { opacity: 1; transform: none; }
.lens-mark { width: 100%; height: 100%; display: block; }
.lens-mark .lk-ink { fill: var(--brown); } .lens-mark .lk-arc { fill: var(--coral); }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .lens-mark .lk-ink { fill: var(--cream); } }
.hdr nav { display: flex; gap: 26px; font-size: 14px; }
.hdr nav a, .hdr .lang a { color: var(--ink); opacity: .85; }
.hdr nav a:hover { opacity: 1; text-decoration: none; color: var(--coral-text); }
.hdr .lang { font-size: 13px; color: var(--ink-2); } .hdr .lang a.on { font-weight: 700; opacity: 1; }
.launch { padding-top: 70px; }
@media (max-width: 734px) {
  .hdr nav { display: none; } .hdr-in { height: 96px; } .hdr.is-scrolled .hdr-in { height: 60px; }
  .hdr .brand { width: 112px; height: 72px; } .brand-complete, .brand-complete .lockup-anim { width: 112px; } .brand-symbol { width: 44px; height: 44px; margin-top: -22px; }
}
@media (prefers-reduced-motion: reduce) { .hdr-in, .hdr .brand, .brand-complete, .brand-symbol { transition: none; } }

/* ===== v4.2: schermate vere, più crema (il "giallino" corporate), foto gigante ===== */
:root { --bg-alt: #FFF3D8; }                 /* le sezioni alternate diventano crema */
@media (prefers-color-scheme: dark) and (max-width: 0px) { :root { --bg-alt: #4A3631; } }
.launch { background: linear-gradient(180deg, #FFF3D8 0%, #FFF8EA 70%, #FFFFFF 100%); }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .launch { background: var(--bg); } }
.hdr { background: color-mix(in srgb, #FFF3D8 85%, transparent); }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .hdr { background: color-mix(in srgb, var(--bg) 88%, transparent); } }
.new { background: var(--brown); color: var(--cream); }
.ctas .badge { box-shadow: 0 10px 24px -12px rgba(64,46,41,.6); }

/* Demo con le schermate vere */
.demo.real { width: min(320px, 76vw); }
.rphone { position: relative; transform: rotate(-3deg); box-shadow: 0 50px 90px -40px rgba(64,46,41,.6), 0 0 0 1px #5a443d inset; }
.rphone::before { content: ""; display: block; aspect-ratio: 1320 / 2868; }
.rphone .rs { position: absolute; inset: 3.2%; width: 93.6%; height: auto; border-radius: 12% / 5.6%; opacity: 0; transform: scale(1.02); transition: opacity .6s ease, transform .8s ease; }
.rphone .rs.on { opacity: 1; transform: none; }
.rsteps { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 22px; }
.rsteps span { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 980px; background: #FFFFFF; color: var(--ink-2); transition: all .3s; box-shadow: inset 0 0 0 1px #F0E2C6; }
.rsteps span b { color: var(--coral-text); margin-right: 2px; }
.rsteps span.on { background: var(--brown); color: var(--cream); transform: scale(1.06); box-shadow: none; }
.rsteps span.on b { color: #EB676D; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .rsteps span { background: #55403A; box-shadow: none; } }

/* Foto gigante "eureka" */
.eureka { padding: 0 0 0; background: #FFFFFF; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .eureka { background: var(--bg); } }
.eu-frame { position: relative; margin: 0 auto; max-width: 1440px; }
.eu-frame .photo { width: 100%; height: min(92vh, 900px); object-fit: cover; object-position: center 30%; }
.eu-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 160px max(24px, calc((100% - 1180px) / 2)) 56px; background: linear-gradient(transparent, rgba(64,46,41,.85)); color: var(--cream); }
.eu-cap h2 { margin: 0; font-size: clamp(56px, 9vw, 140px); line-height: .95; font-weight: 800; letter-spacing: -0.045em; color: #FFF3D8; }
.eu-cap h2 i { font-style: normal; color: #EB676D; }
.eu-cap p { margin: 16px 0 0; font-size: clamp(19px, 2vw, 26px); font-weight: 600; color: rgba(255,243,216,.9); max-width: 640px; }

/* più crema e corallo nei blocchi */
.num { background: #FFF3D8; } .num.big2 { background: var(--coral); }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .num { background: #4A3631; } }
.nonna { background: #FFF3D8; } .chips li { background: #FFFFFF; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .nonna { background: var(--bg-alt); } .chips li { background: #55403A; } }
.tracker .kicker, .nonna .kicker { color: var(--coral-text); }
@media (max-width: 734px) { .eu-frame .photo { height: 80vh; object-position: 60% 30%; } .eu-cap { padding: 120px 22px 36px; } }
@media (prefers-reduced-motion: reduce) { .rphone .rs { transition: none; } }
.eu-frame .photo { object-position: center 35%; }
/* v4.3: barra bianca traslucida */
.hdr { background: rgba(255,255,255,.72); }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .hdr { background: color-mix(in srgb, var(--bg) 88%, transparent); } }

/* ===== v4.4: apertura con foto (donna con le chiavi), titolo a sinistra; demo in fascia propria ===== */
.hero-ph { position: relative; padding: 0; min-height: min(90vh, 880px); display: flex; align-items: center; overflow: hidden; background: #E9DCC8; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,248,234,.94) 0%, rgba(255,248,234,.86) 30%, rgba(255,248,234,.45) 46%, rgba(255,248,234,0) 58%); }
.hero-txt { position: relative; width: 100%; max-width: 1180px; padding-top: 60px; padding-bottom: 60px; }
.hero-ph .launch-copy { max-width: 520px; }
.hero-ph .mega { font-size: clamp(56px, 7.4vw, 108px); }
.hero-ph .lead { color: #4A4A4F; }
.hero-ph .hero-note { color: #5A5A60; }
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  .hero-ph .hero-shade { background: linear-gradient(90deg, rgba(46,34,31,.94) 0%, rgba(46,34,31,.85) 30%, rgba(46,34,31,.4) 47%, rgba(46,34,31,0) 60%); }
  .hero-ph .lead, .hero-ph .hero-note { color: var(--ink-2); }
}
.demo-band { background: #FFF3D8; padding: 110px 0; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .demo-band { background: var(--bg-alt); } }
.demo-grid { max-width: 1180px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.demo-copy { text-align: left; } .demo-copy .sub { margin-left: 0; }
.demo-band .launch-demo { position: relative; }
.demo-band .demo-pp { right: 4%; bottom: 60px; }
@media (max-width: 860px) {
  .hero-ph { display: block; min-height: 0; background: #FFF3D8; }
  .hero-bg { position: static; height: 58vh; min-height: 340px; object-position: 70% 30%; }
  .hero-shade { display: none; }
  .hero-txt { padding-top: 36px; padding-bottom: 50px; } .hero-ph .launch-copy { max-width: none; text-align: center; }
  .demo-grid { grid-template-columns: 1fr; } .demo-copy { text-align: center; } .demo-copy .sub { margin-left: auto; }
}
@media (max-width: 860px) and (prefers-color-scheme: dark) and (max-width: 0px) { .hero-ph { background: var(--bg); } }
@media (max-width: 860px) { .hero-bg { height: min(58vh, 520px); min-height: 0; aspect-ratio: auto; } }
@media (max-width: 734px) { .eu-frame .photo { height: min(80vh, 640px); } }

/* ===== v4.5: fascia Condividi con conversazione di Messaggi (disegnata in codice, testi localizzati) ===== */
.share-band { background: #FFFFFF; padding: 130px 0; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .share-band { background: var(--bg); } }
.share-grid { max-width: 1180px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.share-copy { text-align: left; } .share-copy .sub { margin-left: 0; }
.share-copy .giant .hl { color: var(--coral-text); }
.share-copy .chips li { background: #FFF3D8; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .share-copy .chips li { background: #55403A; } }
.msgs { width: min(380px, 100%); justify-self: center; background: #FFFFFF; border-radius: 44px; padding: 14px 14px 22px; box-shadow: 0 0 0 10px var(--brown), 0 50px 90px -30px rgba(64,46,41,.55); font-family: -apple-system, "SF Pro Text", sans-serif; color: #1C1C1E; transform: rotate(2deg); }
.msgs-top { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 12px; border-bottom: 1px solid #ECECEF; }
.msgs-top .av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(#EB676D, #EB676D); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.msgs-top b { font-size: 12px; font-weight: 600; }
.msgs-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 4px 0; }
.msgs .time { text-align: center; font-size: 11px; color: #8E8E93; margin: 0 0 4px; }
.b { max-width: 82%; padding: 9px 13px; border-radius: 19px; font-size: 14.5px; line-height: 1.33; }
.b.in { align-self: flex-start; background: #E9E9EB; border-bottom-left-radius: 6px; }
.b.out { align-self: flex-end; background: #0A84FF; color: #fff; border-bottom-right-radius: 6px; }
.b.out u { text-decoration: underline; word-break: break-all; }
.mapcard { align-self: flex-end; width: 76%; border-radius: 18px; overflow: hidden; background: #F2F2F7; border: 1px solid #E5E5EA; }
.mapcard .map { position: relative; height: 120px; background:
  linear-gradient(115deg, transparent 58%, #BFE3F5 58%),
  repeating-linear-gradient(20deg, transparent 0 34px, #FFFFFF 34px 38px),
  repeating-linear-gradient(110deg, transparent 0 46px, #FFFFFF 46px 49px),
  #F3EEDF; }
.mapcard .pin { position: absolute; left: 44%; top: 34%; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; background: #EB676D; transform: rotate(-45deg); box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.mapcard .pin::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.mapcard .mc { padding: 8px 12px; } .mapcard .mc b { display: block; font-size: 13px; } .mapcard .mc small { font-size: 11px; color: #8E8E93; }
/* i fumetti compaiono uno dopo l'altro */
.msgs .msgs-body > * { opacity: 0; transform: translateY(12px) scale(.97); transition: opacity .45s ease, transform .5s cubic-bezier(.2,1.3,.4,1); }
.msgs.in .msgs-body > * { opacity: 1; transform: none; }
.msgs.in .msgs-body > :nth-child(2) { transition-delay: .3s; } .msgs.in .msgs-body > :nth-child(3) { transition-delay: 1s; }
.msgs.in .msgs-body > :nth-child(4) { transition-delay: 1.5s; } .msgs.in .msgs-body > :nth-child(5) { transition-delay: 2.4s; }
@media (max-width: 860px) { .share-grid { grid-template-columns: 1fr; } .share-copy { text-align: center; } .share-copy .sub { margin-left: auto; } .share-copy .chips { justify-content: center; } .msgs { transform: none; } }
@media (prefers-reduced-motion: reduce) { .msgs .msgs-body > * { opacity: 1; transform: none; transition: none; } }

/* ===================== v5 (03/10/2026) — rifatto da zero come pagina di lancio ===================== */
/* Apertura: foto con le chiavi, titolo a sinistra */
.hero5 { position: relative; min-height: min(92vh, 900px); display: flex; align-items: center; overflow: hidden; background: #E9DCC8; }
.hero5 .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; }
.hero5 .hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,248,234,.95) 0%, rgba(255,248,234,.88) 30%, rgba(255,248,234,.45) 47%, rgba(255,248,234,0) 59%); }
.hero5 .hero-txt { position: relative; width: 100%; max-width: 1180px; padding: 70px 22px; }
.hero-copy { max-width: 540px; }
.eyebrow5 { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6E5A52; margin: 0 0 14px; }
.h5 { font-size: clamp(52px, 6.6vw, 96px); line-height: .98; font-weight: 800; letter-spacing: -0.045em; margin: 0; color: var(--ink); }
.h5 .hl { background: linear-gradient(100deg, #EB676D, #EB676D 60%, #EB676D); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.claim5 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.02em; margin: 22px 0 0; color: var(--ink); }
.lead5 { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: #4A4A4F; margin: 12px 0 0; max-width: 470px; }
.ctas5 { display: flex; align-items: center; gap: 22px; margin-top: 30px; flex-wrap: wrap; }
.btn { display: inline-block; background: var(--brown); color: var(--cream); font-weight: 600; font-size: 17px; padding: 14px 26px; border-radius: 980px; box-shadow: 0 12px 26px -12px rgba(64,46,41,.7); transition: transform .2s; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.soon { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: #57575C; font-weight: 500; }
.soon svg { width: 16px; height: 16px; fill: currentColor; }
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  .hero5 .hero-shade { background: linear-gradient(90deg, rgba(46,34,31,.95) 0%, rgba(46,34,31,.86) 30%, rgba(46,34,31,.4) 48%, rgba(46,34,31,0) 60%); }
  .eyebrow5 { color: #D9CBBF; } .lead5, .soon { color: var(--ink-2); } .btn { background: var(--cream); color: var(--brown); }
}

/* Racconto con lo scroll: testo che scorre a sinistra, iPhone fermo a destra */
.story { background: #FFF3D8; padding: 120px 0 60px; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .story { background: var(--bg-alt); } }
.story-grid { max-width: 1180px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.story-text .mini { color: var(--ink-2); font-size: 17px; margin: 16px 0 0; }
.story .step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .4s; }
.story .step.on { opacity: 1; }
.story .step:first-of-type { margin-top: 6vh; }
.story .step .n { width: 40px; height: 40px; border-radius: 50%; background: var(--coral); color: #2C2C2E; font-weight: 800; display: grid; place-items: center; font-size: 17px; }
.story .step h3 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; margin: 18px 0 0; }
.story .step p { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.4; color: var(--ink-2); margin: 12px 0 0; max-width: 440px; }
.story .step-phone { display: none; }
.story-stage { position: relative; height: 100%; }
.stick { position: sticky; top: 110px; display: flex; flex-direction: column; align-items: center; padding: 20px 0; }
.sphone { position: relative; width: min(320px, 30vw); transform: rotate(-2deg); box-shadow: 0 50px 90px -40px rgba(64,46,41,.6), 0 0 0 1px #5a443d inset; }
.sphone::before { content: ""; display: block; aspect-ratio: 1320 / 2868; }
.sphone .ss { position: absolute; inset: 3.2%; width: 93.6%; height: auto; border-radius: 12% / 5.6%; opacity: 0; transform: scale(1.03); transition: opacity .55s ease, transform .7s ease; }
.sphone .ss.on { opacity: 1; transform: none; }
.sphone .ss.ph { height: 93.6%; background: #F2F2F7; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 13px; color: #8E8E93; padding: 20px; }
.sphone .ss.ph b { color: #6E6E73; margin-bottom: 4px; }
.schips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 26px; max-width: 360px; }
.schips span { font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 980px; background: #FFFFFF; color: var(--ink-2); transition: all .3s; }
.schips span.on { background: var(--brown); color: var(--cream); }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .schips span { background: #55403A; } }
@media (max-width: 860px) {
  .story-grid { grid-template-columns: 1fr; } .story-stage { display: none; } .story-text { text-align: center; }
  .story .step { min-height: 0; opacity: 1; padding: 50px 0 10px; align-items: center; }
  .story .step p { margin-left: auto; margin-right: auto; }
  .story .step-phone { display: block; width: min(250px, 66vw); margin: 28px auto 0; }
  .story .step-phone img { width: 100%; display: block; border-radius: 12% / 5.6%; }
}

/* Vita reale: tre foto in fila */
.life3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .life3 { grid-template-columns: 1fr; } }

/* Mobile: apertura a due piani (foto sopra, testo sotto) */
@media (max-width: 860px) {
  .hero5 { display: block; min-height: 0; background: #FFF3D8; }
  .hero5 .hero-bg { position: static; height: min(56vh, 500px); object-position: 70% 30%; }
  .hero5 .hero-shade { display: none; }
  .hero5 .hero-txt { padding: 34px 22px 54px; } .hero-copy { max-width: none; text-align: center; } .lead5 { margin-left: auto; margin-right: auto; } .ctas5 { justify-content: center; }
}
@media (max-width: 860px) and (prefers-color-scheme: dark) and (max-width: 0px) { .hero5 { background: var(--bg); } }
@media (prefers-reduced-motion: reduce) { .story .step, .sphone .ss, .schips span { transition: none; } }

/* ===== v5.1: scena iniziale "incollata" (foto ferma, titolo → iPhone con schermate), manifesto, galleria ===== */
.scene { position: relative; height: 520vh; background: #E9DCC8; }
.scene-anchor { position: absolute; top: 85vh; }
.scene-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.scene .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.scene-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,248,234,.95) 0%, rgba(255,248,234,.88) 30%, rgba(255,248,234,.45) 47%, rgba(255,248,234,0) 59%); transition: opacity .6s; }
.scene-title { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-46%); max-width: 1180px; transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); }
.scene-ui { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; }
.scene[data-step]:not([data-step="0"]) .scene-title { opacity: 0; transform: translateY(-60%); pointer-events: none; }
.scene[data-step]:not([data-step="0"]) .scene-shade { opacity: .35; }
.scene[data-step]:not([data-step="0"]) .scene-ui { opacity: 1; }
.scene-hint { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); margin: 0; background: #FFF3D8; color: #4A3631; font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 980px; box-shadow: 0 8px 20px -10px rgba(64,46,41,.5); }
.scene-phone { position: absolute; left: max(4vw, calc((100% - 1180px) / 2)); bottom: 6vh; width: min(280px, calc((100vh - 200px) * .46)); transform: rotate(-4deg) translateY(30px); transition: transform .7s cubic-bezier(.2,.8,.2,1); box-shadow: 0 50px 90px -30px rgba(40,25,20,.65), 0 0 0 1px #5a443d inset; }
.scene[data-step]:not([data-step="0"]) .scene-phone { transform: rotate(-4deg); }
.scene-phone::before { content: ""; display: block; aspect-ratio: 1320 / 2868; }
.scene-phone .ss { position: absolute; inset: 3.2%; width: 93.6%; height: auto; border-radius: 12% / 5.6%; opacity: 0; transition: opacity .5s; }
.scene-phone .ss.on { opacity: 1; }
.scene-phone .ss.ph { height: 93.6%; background: #F2F2F7; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 13px; color: #8E8E93; padding: 20px; }
.scene-phone .ss.ph b { color: #6E6E73; margin-bottom: 4px; }
.scene-caps { position: absolute; right: max(4vw, calc((100% - 1180px) / 2)); bottom: 15vh; width: 320px; }
.scene-caps .cap { position: absolute; right: 0; bottom: 0; width: 100%; background: #FFF3D8; border-radius: 22px; padding: 20px 24px; box-shadow: 0 20px 40px -20px rgba(40,25,20,.6); opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .5s cubic-bezier(.2,1.2,.4,1); }
.scene-caps .cap.on { opacity: 1; transform: none; }
.scene-caps h3 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #333336; }
.scene-caps p { margin: 6px 0 0; color: #57575C; font-size: 16px; }
.scene-chips { position: absolute; left: 50%; bottom: 3.5vh; transform: translateX(-50%); display: flex; gap: 4px; background: rgba(255,243,216,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 6px; border-radius: 980px; box-shadow: 0 10px 30px -14px rgba(40,25,20,.6); }
.scene-chips span { font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 980px; color: #6E5A52; transition: all .3s; white-space: nowrap; }
.scene-chips span.on { background: var(--brown); color: var(--cream); }
.checks { background: #FFFFFF; border-bottom: 1px solid #F0E6D2; }
.checks ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 34px; padding: 18px 22px; margin: 0 auto; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.checks li::before { content: "✓ "; color: var(--coral-text); font-weight: 800; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .checks { background: var(--bg); border-color: var(--line); } .scene-shade { background: linear-gradient(90deg, rgba(46,34,31,.95) 0%, rgba(46,34,31,.86) 30%, rgba(46,34,31,.4) 48%, rgba(46,34,31,0) 60%); } }

/* Manifesto */
.manifesto { background: #FFF3D8; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .manifesto { background: var(--bg-alt); } }
.form-line { display: grid; grid-template-columns: 1fr 1fr; max-width: 640px; margin: 40px auto 0; border-top: 1px solid #E6D6B8; border-bottom: 1px solid #E6D6B8; text-align: left; }
.form-line > div { padding: 18px 20px; } .form-line > div + div { border-left: 1px solid #E6D6B8; }
.form-line small { display: block; font-size: 12px; color: var(--ink-2); } .form-line b { font-size: clamp(20px, 2vw, 26px); font-weight: 700; }
.man-end { margin: 30px auto 0; color: var(--ink-2); font-size: 18px; }

/* Galleria a tutto schermo */
.gallery { position: relative; height: min(88vh, 860px); overflow: hidden; background: var(--brown); }
.gal .sl { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s ease; }
.gal .sl.on { opacity: 1; }
.gal .sl .photo { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 6s ease-out; }
.gal .sl.on .photo { transform: scale(1); }
.gal figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 180px max(24px, calc((100% - 1180px) / 2)) 70px; background: linear-gradient(transparent, rgba(46,34,31,.85)); color: var(--cream); }
.gal figcaption .kk { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #EB676D; }
.gal figcaption h2 { margin: 0; font-size: clamp(44px, 6.5vw, 96px); line-height: .98; font-weight: 800; letter-spacing: -0.04em; }
.gal figcaption p:last-child { margin: 12px 0 0; font-size: clamp(18px, 1.8vw, 22px); color: rgba(255,243,216,.88); }
.gal-ctl { position: absolute; right: max(24px, calc((100% - 1180px) / 2)); bottom: 70px; display: flex; align-items: center; gap: 10px; }
.gal-dots { display: flex; gap: 8px; margin-right: 8px; }
.gal-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,243,216,.45); cursor: pointer; position: relative; }
.gal-dots button::after { content: ""; position: absolute; inset: -10px; }
.gal-dots button.on { background: #FFF3D8; width: 26px; border-radius: 980px; }
.gbtn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,243,216,.18); color: #FFF3D8; font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.gbtn svg { width: 16px; height: 16px; fill: currentColor; }
.gbtn .i-play { display: none; } .gbtn.paused .i-play { display: block; } .gbtn.paused .i-pause { display: none; }

/* Mobile: la scena torna un'apertura normale e il racconto diventa la lista con le schermate */
.story.mobile-only { display: none; }
@media (max-width: 860px) {
  .scene { height: auto; background: #FFF3D8; }
  .scene-sticky { position: static; height: auto; overflow: visible; }
  .scene .hero-bg { position: static; height: min(56vh, 500px); object-position: 70% 30%; }
  .scene-shade, .scene-ui { display: none; }
  .scene-title { position: static; transform: none; padding: 34px 22px 50px; }
  .scene-title .hero-copy { max-width: none; text-align: center; } .scene .lead5 { margin-left: auto; margin-right: auto; } .scene .ctas5 { justify-content: center; }
  .scene-anchor { top: auto; bottom: 0; }
  .story.mobile-only { display: block; }
  .form-line { grid-template-columns: 1fr; } .form-line > div + div { border-left: 0; border-top: 1px solid #E6D6B8; }
  .gal-ctl { left: 22px; right: auto; bottom: 24px; } .gal figcaption { padding-bottom: 86px; }
}
@media (max-width: 860px) and (prefers-color-scheme: dark) and (max-width: 0px) { .scene { background: var(--bg); } }
@media (prefers-reduced-motion: reduce) { .scene-title, .scene-ui, .scene-phone, .scene-caps .cap, .gal .sl, .gal .sl .photo { transition: none !important; } .gal .sl .photo { transform: none; } }
.scene-phone { width: min(270px, calc((100vh - 230px) * .42)); bottom: 8vh; }

/* ===== v5.2: nuova foto d'apertura (ragazza in soggiorno con le chiavi) =====
   La foto sta a destra a tutta altezza; a sinistra il crema accoglie il titolo e poi l'iPhone. */
.scene, .scene-sticky { background: #FFF3D8; }
.hero-pic { position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 1200 / 896; }
.hero-pic .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #FFF3D8 0%, rgba(255,243,216,.75) 12%, rgba(255,243,216,0) 34%); }
.scene-shade { background: linear-gradient(90deg, rgba(255,243,216,.9) 0%, rgba(255,243,216,.6) 34%, rgba(255,243,216,0) 50%); }
@media (max-aspect-ratio: 5/4) and (min-width: 861px) { .hero-pic { left: 0; aspect-ratio: auto; } .scene-shade { background: linear-gradient(90deg, rgba(255,243,216,.95) 0%, rgba(255,243,216,.85) 40%, rgba(255,243,216,0) 60%); } }
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  .scene, .scene-sticky { background: #2E221F; }
  .hero-pic::after { background: linear-gradient(90deg, #2E221F 0%, rgba(46,34,31,.75) 12%, rgba(46,34,31,0) 34%); }
  .scene-shade { background: linear-gradient(90deg, rgba(46,34,31,.9) 0%, rgba(46,34,31,.6) 34%, rgba(46,34,31,0) 50%); }
}
@media (max-width: 860px) {
  .hero-pic { position: static; height: auto; aspect-ratio: auto; } .hero-pic::after { display: none; }
  .hero-pic .hero-bg { position: static; height: min(56vh, 500px); object-position: 62% 40%; }
}
.scene-shade { background: linear-gradient(90deg, rgba(255,243,216,.96) 0%, rgba(255,243,216,.9) 36%, rgba(255,243,216,.5) 45%, rgba(255,243,216,0) 52%); }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .scene-shade { background: linear-gradient(90deg, rgba(46,34,31,.96) 0%, rgba(46,34,31,.9) 36%, rgba(46,34,31,.5) 45%, rgba(46,34,31,0) 52%); } }

/* ===== v5.3: sezione OkiDocky+ "Ricorda tutto. Senza contare." ===== */
.plus5 { background: linear-gradient(135deg, #402E29 0%, #5E3B36 45%, #A9555A 80%, #EB676D 100%); color: #FFF3D8; padding: 130px 0 110px; }
.plus5 .wrap { max-width: 1180px; }
.plus5-top { display: grid; grid-template-columns: 1.3fr .7fr; gap: 50px; align-items: end; }
.plus5-k { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; color: #FFF3D8; } .plus5-k span { color: #EB676D; }
.plus5 .giant { color: #FFF3D8; }
.plus5 .sub { color: rgba(255,243,216,.82); margin-left: 0; max-width: 620px; }
.plus5-prices { display: flex; flex-direction: column; gap: 14px; }
.plus5-prices > div { background: rgba(255,243,216,.1); border: 1px solid rgba(255,243,216,.22); border-radius: 20px; padding: 16px 20px; }
.plus5-prices b { display: block; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; } .plus5-prices small { font-size: 15px; color: rgba(255,243,216,.8); }
.btn-cream { background: #FFF3D8; color: #402E29; text-align: center; }
.plus5-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 70px; padding-top: 50px; border-top: 1px solid rgba(255,243,216,.25); }
.pf .pi { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: rgba(255,243,216,.14); font-size: 26px; color: #FFF3D8; }
.pf h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 18px 0 0; color: #FFF3D8; }
.pf p { color: rgba(255,243,216,.8); margin: 8px 0 0; }
.plus5-foot { margin: 44px 0 0; font-size: 14px; color: rgba(255,243,216,.72); }
@media (max-width: 860px) { .plus5-top, .plus5-feats { grid-template-columns: 1fr; } .plus5 { padding: 90px 0; } }

/* ===== v5.4: meno marrone, più icona e logo ===== */
/* icona dell'app */
.appicon { display: inline-block; line-height: 0; }
.appicon img { width: 100%; height: auto; border-radius: 22.5%; box-shadow: 0 18px 40px -16px rgba(64,46,41,.45), 0 0 0 1px rgba(0,0,0,.04); }
.appicon.sm { width: 72px; } .appicon.xl { width: min(200px, 44vw); }
.hero-badge { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.hero-badge .eyebrow5 { margin: 0; }
.final-brand { display: flex; flex-direction: column; align-items: center; gap: 30px; margin-bottom: 30px; }
.final-brand .final-lockup { width: min(340px, 70vw); margin: 0; }
.final5 { background: linear-gradient(180deg, #FFFFFF 0%, #FFF3D8 100%); }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .final5 { background: var(--bg); } }
@media (max-width: 860px) { .hero-badge { justify-content: center; } }

/* domande: su crema, testi grigi, risposta corallo */
.section.dark.questions { background: #FFF3D8; color: var(--ink); }
.section.dark.questions .q { color: #8A8A90; }
.section.dark.questions p.answer { color: var(--coral-text); }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .section.dark.questions { background: var(--bg-alt); } .section.dark.questions .q { color: var(--ink-2); } .section.dark.questions p.answer { color: #EB676D; } }

/* privacy: su bianco con icone corallo */
.section.dark#privacy { background: #FFFFFF; color: var(--ink); }
.section.dark#privacy .sub, .section.dark#privacy p { color: var(--ink-2); }
.section.dark#privacy .kicker { color: var(--coral-text); }
.section.dark#privacy h3 { color: var(--ink); }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .section.dark#privacy { background: var(--bg); } }

/* OkiDocky+: corallo invece di marrone */
.plus5 { background: linear-gradient(135deg, #EB676D 0%, #EB676D 45%, #EB676D 100%); color: #2C2C2E; }
.plus5 .giant, .plus5-k, .pf h3 { color: #2C2C2E; } .plus5-k span { color: #FFFFFF; }
.plus5 .sub, .pf p { color: #3A2E2B; } .plus5-foot { color: #3A2E2B; }
.plus5-prices > div { background: rgba(255,255,255,.35); border-color: rgba(255,255,255,.5); }
.plus5-prices small { color: #3A2E2B; }
.plus5-feats { border-top-color: rgba(44,44,46,.18); }
.pf .pi { background: rgba(255,255,255,.45); color: #2C2C2E; }
.btn-cream { background: #FFFFFF; color: #2C2C2E; }

/* pulsanti e tappe: corallo al posto del marrone */
.btn { background: var(--coral-text); color: #FFFFFF; box-shadow: 0 12px 26px -12px rgba(235,103,109,.7); }
.btn:hover { background: #EB676D; }
.scene-chips span.on, .schips span.on { background: var(--coral-text); color: #FFFFFF; }
.new { background: var(--coral-text); color: #FFFFFF; }
.msgs { box-shadow: 0 0 0 10px #2C2C2E, 0 50px 90px -30px rgba(64,46,41,.45); }

/* logo LikeHome più visibile nel footer */
.footer .maker { padding: 18px 0 24px; gap: 18px; }
.footer .maker span { font-size: 14px; }
.footer .likehome { height: 64px; }

/* v5.5: apertura "Dove l'ho messo?" su bianco */
.scene, .scene-sticky { background: #FFFFFF; }
.hero-pic::after { background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,.75) 12%, rgba(255,255,255,0) 34%); }
.scene-shade { background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 36%, rgba(255,255,255,.5) 45%, rgba(255,255,255,0) 52%); }
@media (max-width: 860px) { .scene { background: #FFFFFF; } }
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  .scene, .scene-sticky { background: #2E221F; }
  .hero-pic::after { background: linear-gradient(90deg, #2E221F 0%, rgba(46,34,31,.75) 12%, rgba(46,34,31,0) 34%); }
  .scene-shade { background: linear-gradient(90deg, rgba(46,34,31,.96) 0%, rgba(46,34,31,.9) 36%, rgba(46,34,31,.5) 45%, rgba(46,34,31,0) 52%); }
}
@media (max-width: 860px) and (prefers-color-scheme: dark) and (max-width: 0px) { .scene { background: var(--bg); } }

/* v5.6: badge ufficiale Apple "Scarica su App Store" (versione bianca, non modificata) */
.asb { display: inline-block; line-height: 0; border-radius: 9px; transition: transform .2s; }
.asb:hover { transform: translateY(-1px); }
.asb img { height: 50px; width: auto; display: block; }
.ctas5 .asb img { height: 52px; }
.compare .asb img { height: 44px; }
.compare .col .asb { margin: 4px 0 18px; }

/* v5.7: manifesto con la foto della ragazza che non ricorda */
.man-photo { max-width: 980px; margin: 44px auto 0; }
.man-photo .photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 28%; border-radius: 32px; box-shadow: 0 40px 80px -40px rgba(64,46,41,.45); }
@media (max-width: 734px) { .man-photo .photo { aspect-ratio: 4 / 3.4; object-position: 52% 22%; border-radius: 24px; } }

/* ===== v5.8: (1) foto del manifesto a tutta larghezza; (2) apertura divisa in due, senza sfumature sotto il testo ===== */
.man-photo { max-width: none; width: 100%; margin: 50px 0 0; }
.man-photo .photo { width: 100%; height: min(78vh, 760px); aspect-ratio: auto; object-fit: cover; object-position: 50% 30%; border-radius: 0; box-shadow: none; }
@media (max-width: 734px) { .man-photo .photo { height: 70vh; max-height: 560px; object-position: 50% 22%; } }

@media (min-width: 861px) {
  .hero-pic { left: auto; right: 0; width: 56%; height: 100%; aspect-ratio: auto; }
  .hero-pic::after { display: none; }
  .hero-pic .hero-bg { object-position: 58% 40%; }
  .scene-shade { display: none; }
  .scene-title { max-width: 1240px; }
  .scene-title .hero-copy { max-width: 40vw; }
  .scene .h5 { font-size: clamp(48px, 5.4vw, 88px); }
}
@media (min-width: 861px) and (max-aspect-ratio: 5/4) { .hero-pic { width: 50%; } }

/* v5.9: foto scambiate — in apertura la ragazza che non ricorda, nel manifesto la ragazza con le chiavi */
@media (min-width: 861px) { .hero-pic .hero-bg { object-position: 46% 22%; } }
@media (max-width: 860px) { .hero-pic .hero-bg { object-position: 50% 20%; } }
.man-photo .photo { object-position: 60% 42%; }
@media (max-width: 734px) { .man-photo .photo { object-position: 62% 40%; } }

/* v5.10: apertura — icona, "Ecco a voi", titolo OkiDocky® nei colori del wordmark */
.hero-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 26px; }
.appicon.md { width: 84px; margin-bottom: 20px; }
.hero-brand .eyebrow5 { margin: 0; }
.brand-title { margin: 4px 0 0; font-size: clamp(48px, 5.4vw, 84px); line-height: 1; font-weight: 800; letter-spacing: -0.045em; }
.brand-title .oki { color: #402E29; } .brand-title .docky { color: #EB676D; }
.brand-title sup { font-size: .26em; font-weight: 600; color: #EB676D; vertical-align: super; margin-left: 2px; letter-spacing: 0; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .brand-title .oki { color: #FFF3D8; } }
.scene .h5 { font-size: clamp(38px, 4.2vw, 64px); }
@media (max-width: 860px) {
  .hero-brand { align-items: center; text-align: center; }
  .appicon.md { width: 96px; }
}

/* v5.11: ordine "Dove l'ho messo?!? Eccolo!" → icona, Ecco a voi, OkiDocky® → Due tocchi. Nient’altro. — stesso corpo per i tre titoli */
:root { --hero-t: clamp(40px, 4.4vw, 68px); }
.scene .h5, .brand-title, .scene .claim5 { font-size: var(--hero-t); line-height: 1.02; font-weight: 800; letter-spacing: -0.04em; }
.hero-brand { margin: 30px 0 0; }
.appicon.md { width: 72px; margin-bottom: 14px; }
.scene .claim5 { margin: 6px 0 0; color: var(--ink); }
.scene .lead5 { margin-top: 18px; }
@media (max-width: 860px) { :root { --hero-t: clamp(38px, 10vw, 54px); } .appicon.md { width: 84px; } }

/* v5.12: testo sotto la foto del manifesto */
.manifesto .man-end { max-width: 700px; margin: 60px auto 0; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; color: var(--ink-2); }
.manifesto .man-end p { margin: 0 0 14px; }
.manifesto .man-end .me-h { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.05; font-weight: 800; letter-spacing: -0.035em; color: var(--ink); margin-bottom: 22px; }
.manifesto .man-end .me-s { font-weight: 700; color: var(--ink); font-size: clamp(20px, 2vw, 26px); }
.manifesto .man-end .hl { color: var(--coral-text); }
.manifesto { padding-bottom: 110px; }

/* v5.13 — mockup su fondo bianco */
.story { background: #FFFFFF; border-top: 1px solid rgba(64,46,41,.08); }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .story { background: var(--bg); border-color: var(--line); } }

/* v5.14 — iPhone vero (cornice con schermo trasparente) */
.phone, .sphone, .scene-phone { background: none; border-radius: 0; padding: 0; box-shadow: none; aspect-ratio: 803 / 1627; filter: drop-shadow(0 34px 40px rgba(64,46,41,.28)) drop-shadow(0 6px 10px rgba(64,46,41,.12)); }
.phone::before, .sphone::before, .scene-phone::before { display: none; }
.phone::after { content: ""; position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%; transform: none; border-radius: 0; background: url(../img/iphone-frame.png) center / 100% 100% no-repeat; z-index: 3; pointer-events: none; }
.phone img, .phone .screen, .phone .ss, .sphone .ss, .scene-phone .ss { position: absolute; inset: auto; left: 4.23%; top: 1.6%; width: 89.79%; height: auto; aspect-ratio: 1320 / 2868; border-radius: 0; object-fit: cover; }
.story .step-phone img { width: 89.79%; border-radius: 0; }

/* v5.15 — fascia "Cosa. Dove. Fatto.": crema che sfuma nel corallo; ombre iPhone più pulite */
.manifesto { padding-bottom: 0; }
.man-photo .photo { display: block; }
.man-band { background: linear-gradient(180deg, #FFF3D8 0%, #F8C4A8 42%, #EB676D 100%); padding: 72px 0 130px; }
.manifesto .man-band .man-end { margin-top: 0; }
.manifesto .man-band .hl { color: #FFFFFF; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .man-band { background: linear-gradient(180deg, var(--bg-alt) 0%, #8E4448 100%); } .manifesto .man-band .hl { color: #FFF3D8; } }
.phone, .sphone, .scene-phone { filter: drop-shadow(0 1px 1.5px rgba(20,14,12,.16)) drop-shadow(0 10px 14px rgba(20,14,12,.10)) drop-shadow(0 30px 44px rgba(20,14,12,.10)); }
.man-band { background: linear-gradient(180deg, #FFF3D8 0%, #FFE2BF 30%, #F9A68F 68%, #EB676D 100%); background: linear-gradient(in oklab 180deg, #FFF3D8 0%, #FFE2BF 30%, #F9A68F 68%, #EB676D 100%); }
.manifesto .man-band .man-end { color: #333336; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .man-band { background: linear-gradient(180deg, var(--bg-alt) 0%, #8E4448 100%); } .manifesto .man-band .man-end { color: var(--ink-2); } }

/* v5.16 — sfumatura più leggera e irregolare (macchie di luce corallo su crema) */
.man-band { background:
  radial-gradient(55% 75% at 12% 108%, rgba(235,103,109,.42), rgba(235,103,109,0) 70%),
  radial-gradient(45% 60% at 92% 96%, rgba(242,140,140,.36), rgba(242,140,140,0) 72%),
  radial-gradient(38% 55% at 62% 78%, rgba(249,166,143,.30), rgba(249,166,143,0) 70%),
  radial-gradient(40% 45% at 28% 30%, rgba(255,226,191,.55), rgba(255,226,191,0) 70%),
  linear-gradient(180deg, #FFF3D8 0%, #FFEEDA 55%, #FDE0D2 100%); }
.manifesto .man-band .hl { color: #EB676D; }
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  .man-band { background:
    radial-gradient(55% 75% at 12% 108%, rgba(235,103,109,.30), rgba(235,103,109,0) 70%),
    radial-gradient(45% 60% at 92% 96%, rgba(242,140,140,.22), rgba(242,140,140,0) 72%),
    var(--bg-alt); }
  .manifesto .man-band .hl { color: #EB676D; } }

/* v5.17 — sfumatura da un solo angolo (in basso a sinistra), ampia e diffusa */
.man-band { background:
  radial-gradient(120% 140% at 0% 100%, rgba(235,103,109,.40) 0%, rgba(242,140,140,.22) 35%, rgba(249,190,160,.10) 60%, rgba(255,243,216,0) 85%),
  #FFF3D8; }
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  .man-band { background: radial-gradient(120% 140% at 0% 100%, rgba(235,103,109,.28) 0%, rgba(235,103,109,.10) 45%, rgba(235,103,109,0) 85%), var(--bg-alt); } }

/* v5.18 — angolo più tenue e sfumatura più lunga */
.man-band { background:
  radial-gradient(150% 170% at 0% 100%, rgba(235,103,109,.24) 0%, rgba(242,140,140,.15) 25%, rgba(247,170,150,.08) 50%, rgba(252,210,185,.03) 72%, rgba(255,243,216,0) 92%),
  #FFF3D8; }
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  .man-band { background: radial-gradient(150% 170% at 0% 100%, rgba(235,103,109,.18) 0%, rgba(235,103,109,.07) 45%, rgba(235,103,109,0) 92%), var(--bg-alt); } }

/* v5.19 — apertura: titolo sulla foto, testo a sinistra, poi "Vi presentiamo", poi il telefono */
.scene { height: 620vh; }
.pic-title { position: absolute; z-index: 2; top: 128px; right: max(4vw, calc((100% - 1240px) / 2)); width: min(26vw, 440px); margin: 0; text-align: right; color: #FFFFFF; font-size: clamp(40px, 4.4vw, 68px); line-height: 1.0; font-weight: 800; letter-spacing: -0.04em; text-shadow: 0 2px 24px rgba(120,30,40,.18); transition: opacity .5s; }
@media (min-width: 861px) { .hero-pic .hero-bg { object-position: 72% 22%; } }
.scene .man-end { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; color: #333336; }
.scene .man-end p { margin: 0 0 12px; }
.scene .man-end .me-h { font-size: var(--hero-t); line-height: 1.02; font-weight: 800; letter-spacing: -0.04em; margin-bottom: 24px; }
.scene .man-end .me-s { font-weight: 700; font-size: clamp(19px, 1.7vw, 24px); }
.scene .man-end .hl { color: #EB676D; }
.scene-intro { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-36%); max-width: 1240px; opacity: 0; pointer-events: none; transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); }
.scene-intro .hero-copy { max-width: 40vw; }
.scene[data-step="1"] .scene-intro { opacity: 1; transform: translateY(-46%); pointer-events: auto; }
.scene[data-step="1"] .scene-ui { opacity: 0; }
.scene[data-step="1"] .scene-shade { opacity: 1; }
@media (max-aspect-ratio: 5/4) and (min-width: 861px) { .pic-title { width: 40vw; } }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .scene .man-end { color: var(--ink-2); } .scene .man-end .me-h, .scene .man-end .me-s { color: var(--ink); } .scene .man-end .hl { color: #EB676D; } }
@media (max-width: 860px) {
  .scene { height: auto; }
  .scene-sticky { position: relative; }
  .pic-title { top: 84px; right: 18px; width: 52%; font-size: clamp(30px, 8.6vw, 44px); }
  .hero-pic .hero-bg { object-position: 70% 20%; }
  .scene-intro { position: static; opacity: 1; transform: none; pointer-events: auto; padding: 10px 22px 56px; }
  .scene-intro .hero-copy { max-width: none; text-align: center; } .scene-intro .lead5 { margin-left: auto; margin-right: auto; } .scene-intro .ctas5 { justify-content: center; }
  .scene-title { padding-bottom: 20px; }
  .scene .man-end { text-align: center; }
}
.scene .hero-copy.man-end { margin: 0; max-width: 40vw; }
.scene[data-step="1"]:not([data-step="0"]) .scene-ui { opacity: 0; }
.scene[data-step="1"]:not([data-step="0"]) .scene-shade { opacity: 1; }
@media (max-width: 860px) { .scene .hero-copy.man-end { max-width: none; } }

/* v5.20 — "Vi presentiamo" sopra l'icona */
.hero-brand .eyebrow5 { margin: 0 0 16px; }
.scene-intro .hero-brand { margin-top: 0; }

/* v5.21 — numeri bianchi nei cerchi corallo */
.story .step .n { color: #FFFFFF; }

/* v5.22 — box "0 …": bianchi con bordo marrone; l'ultimo "2" corallo con bordo corallo */
.num { background: #FFFFFF; border: 2px solid #402E29; }
.num.big2 { background: #FFFFFF; border-color: #EB676D; }
.num.big2 b { color: #EB676D; } .num.big2 span { color: var(--ink-2); }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .num, .num.big2 { background: transparent; } .num { border-color: #8A7068; } }

/* v5.23 — "A prova di nonna": testo centrato */
.nonna .split { align-items: center; }
.nonna .split > div:last-child { text-align: center; }
.nonna .headline { text-align: center; }
.nonna .sub { margin-left: auto !important; margin-right: auto !important; text-align: center; }
.nonna .chips { justify-content: center; }

/* v5.24 — titolo Privacy sfumato verso il corallo, come "Un localizzatore" */
.section.dark#privacy .headline { background: linear-gradient(100deg, #333336 30%, #EB676D); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-bottom: .06em; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .section.dark#privacy .headline { background-image: linear-gradient(100deg, #FFF3D8 30%, #EB676D); } }
.section.dark#privacy .headline { display: inline-block; background-image: linear-gradient(100deg, #333336 25%, #EB676D 95%); }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .section.dark#privacy .headline { background-image: linear-gradient(100deg, #FFF3D8 25%, #EB676D 95%); } }

/* v5.25 — OkiDocky+ come titolo: colori del marchio (Oki marrone, Docky corallo, + marrone pieno) */
.wm .oki { color: #402E29; } .wm .docky { color: #EB676D; } .wm .plus { color: #402E29; font-weight: 900; margin-left: .02em; }
.plus5-k { display: inline-block; background: #FFFFFF; padding: 8px 18px; border-radius: 980px; box-shadow: 0 10px 24px -14px rgba(64,46,41,.45); }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .wm .oki, .wm .plus { color: #FFF3D8; } .plus5-k { background: #2E221F; } }

/* v5.26 — + delle domande in corallo */
.faq summary::after { color: #EB676D; font-weight: 500; }

/* v5.27 — nuova foto di apertura (muro corallo con ombra) */
@media (min-width: 861px) { .hero-pic .hero-bg { object-position: 40% 30%; } }
@media (max-width: 860px) { .hero-pic .hero-bg { object-position: 35% 30%; } }
@media (max-width: 860px) { .hero-pic .hero-bg { object-position: 50% 30%; } .pic-title { width: 48%; } }

/* v5.28 — fascia OkiDocky+: marrone → corallo scuro, lockup, prezzi liberi, telefono Impostazioni */
.plus5.p6 { background: linear-gradient(160deg, #3A2824 0%, #553430 45%, #7E4144 75%, #A0505A 100%); color: #FFF3D8; padding: 110px 0 90px; overflow: hidden; }
.p6 .giant, .p6 .pf h3 { color: #FFF3D8; }
.p6 .sub { color: rgba(255,243,216,.88); margin-left: 0; max-width: 640px; font-size: clamp(18px, 1.6vw, 22px); }
.p6-top { display: grid; grid-template-columns: 1.25fr .75fr; gap: 50px; align-items: end; }
.p6-lockup { display: block; width: min(250px, 50vw); height: auto; margin: 0 0 40px; }
.p6-note { margin: 20px 0 0; font-size: 15px; color: rgba(255,243,216,.85); }
.p6-prices { display: flex; gap: 40px; flex-wrap: wrap; margin: 34px 0 30px; }
.p6-prices b { display: block; font-size: clamp(32px, 3vw, 42px); font-weight: 800; letter-spacing: -0.03em; color: #FFF3D8; }
.p6-prices small { font-size: 15px; color: rgba(255,243,216,.82); }
.p6 .btn-cream { background: #FFF3D8; color: #402E29; }
.p6-phone { align-self: start; height: 560px; overflow: hidden; display: flex; justify-content: center; }
.p6-phone .phone { width: 300px; flex: none; transform: none; }
.p6 .plus5-feats { border-top: 1px solid rgba(255,243,216,.25); margin-top: 0; padding-top: 60px; }
.p6 .pf .pi { background: none; width: auto; height: auto; justify-content: start; font-size: 34px; color: #EB676D; display: block; }
.p6 .pf p, .p6 .plus5-foot { color: rgba(255,243,216,.82); }
@media (max-width: 860px) {
  .p6-top { grid-template-columns: 1fr; gap: 40px; }
  .p6-phone { height: 420px; } .p6-phone .phone { width: 240px; }
  .plus5.p6 { padding: 80px 0 70px; }
}
.p6-top { margin-bottom: 0; } .p6-copy { padding-bottom: 60px; } .p6-phone { align-self: end; } .p6 .plus5-feats { border-top-color: rgba(255,243,216,.3); }

/* v5.29 — foto specchiata: ragazza a destra, titolo a sinistra e più grande */
@media (min-width: 861px) { .hero-pic .hero-bg { object-position: 68% 30%; } }
.pic-title { right: auto; left: calc(44% + 3vw); width: min(24vw, 420px); text-align: left; font-size: clamp(46px, 5.2vw, 84px); line-height: .98; }
@media (min-width: 861px) and (max-aspect-ratio: 5/4) { .pic-title { left: 4vw; width: 40vw; } }
@media (max-width: 860px) { .hero-pic .hero-bg { object-position: 62% 30%; } .pic-title { left: 18px; right: auto; width: 50%; font-size: clamp(34px, 10vw, 50px); } }
@media (min-width: 861px) { .hero-pic .hero-bg { object-position: 78% 30%; } .pic-title { left: calc(44% + 2.4vw); } }

/* v5.30 — titolo sulla foto più alto e più grande */
@media (min-width: 861px) { .pic-title { top: 92px; width: min(30vw, 540px); font-size: clamp(56px, 6.6vw, 108px); line-height: .95; } }
@media (max-width: 860px) { .pic-title { top: 74px; width: 56%; font-size: clamp(40px, 12vw, 60px); line-height: .95; } }
@media (min-width: 861px) { .hero-pic .hero-bg { object-position: 96% 30%; } .pic-title { left: calc(44% + 2vw); } }
@media (max-width: 860px) { .hero-pic .hero-bg { object-position: 80% 30%; } .pic-title { left: 14px; } }
@media (min-width: 861px) { .hero-pic .hero-bg { object-position: 54% 30%; } .scene-title .hero-copy, .scene-intro .hero-copy { max-width: min(36vw, 560px); } }
@media (max-width: 860px) { .hero-pic .hero-bg { object-position: 58% 30%; } }
@media (min-width: 861px) { .scene .scene-title .hero-copy.man-end, .scene .scene-intro .hero-copy { max-width: calc(44vw - max(24px, (100vw - 1240px) / 2) - 40px); } }

/* v5.31 — titolo sulla foto vicino al bordo alto */
@media (min-width: 861px) { .pic-title { top: 40px; } }
@media (max-width: 860px) { .pic-title { top: 22px; } }

/* v5.32 — iPhone: titolo foto su due righe ("Dove l'avevo / messo?!?") per non coprire l'ombra */
.pic-title .m-br { display: none; }
@media (max-width: 860px) { .pic-title .m-br { display: inline; } .pic-title { width: auto; white-space: nowrap; font-size: clamp(32px, 10.4vw, 44px); } }

/* v5.33 — nuovo ordine: frasi d'apertura, poi il titolo "Sai che ce l'hai. Ma dove?" in mezzo */
.scene .man-end .me-h { margin: 30px 0 22px; }

/* v5.34 — telefono della fascia OkiDocky+: la cornice non va schiacciata */
.p6-phone { align-items: flex-start; }
.p6-phone .phone { height: auto; align-self: flex-start; }
@media (max-width: 860px) { .p6-phone { height: auto; overflow: visible; padding-bottom: 40px; } .p6-phone .phone { width: min(260px, 70vw); } }

/* v5.35 — un solo corallo in tutto il sito: #EB676D */
:root { --coral: #EB676D; --coral-text: #EB676D; --coral-link: #EB676D; }
.btn:hover, .pill:hover { filter: brightness(.94); }

/* v5.36 — lo schermo segue gli angoli arrotondati della cornice (niente spigoli che escono) */
.phone img, .phone .screen, .phone .ss, .sphone .ss, .scene-phone .ss, .story .step-phone img, .p6-phone .phone img { border-radius: 13% / 6%; overflow: hidden; }

/* v5.37 — conversazione dentro l'iPhone vero (cornice di Sauro) */
.msgs-phone { position: relative; width: min(340px, 86vw); aspect-ratio: 803 / 1627; justify-self: center; filter: drop-shadow(0 1px 1.5px rgba(20,14,12,.16)) drop-shadow(0 10px 14px rgba(20,14,12,.10)) drop-shadow(0 30px 44px rgba(20,14,12,.10)); }
.msgs-phone::after { content: ""; position: absolute; inset: 0; background: url(../img/iphone-frame.png) center / 100% 100% no-repeat; z-index: 3; pointer-events: none; }
.msgs-phone .msgs { position: absolute; left: 4.23%; top: 1.6%; width: 89.79%; height: 96.25%; margin: 0; border-radius: 13% / 6%; box-shadow: none; transform: none; overflow: hidden; padding: 40px 12px 16px; }
.msgs-phone .msgs-top { padding: 4px 0 10px; }
.msgs-phone .msgs-top .av { width: 38px; height: 38px; font-size: 16px; }
.msgs-phone .b { font-size: 13px; line-height: 1.32; }
.msgs-phone .mapcard .map { height: 96px; }

/* v5.38 — iPhone: pillola "Scarica gratis" fissa in basso, dopo il primo schermo, nascosta in chiusura */
.dl-pill { display: none; }
@media (max-width: 860px) {
  .dl-pill { position: fixed; z-index: 60; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; padding: 7px 22px 7px 7px; border-radius: 980px; background: #EB676D; color: #FFFFFF; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; box-shadow: 0 14px 30px -12px rgba(64,46,41,.55), 0 2px 6px rgba(64,46,41,.18); opacity: 0; pointer-events: none; transform: translate(-50%, 140%); transition: transform .45s cubic-bezier(.2,1.2,.4,1), opacity .3s ease; }
  .dl-pill:hover { text-decoration: none; }
  .dl-pill img { width: 34px; height: 34px; border-radius: 9px; display: block; }
  .dl-pill.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) { .dl-pill { transition: opacity .2s; } }

/* v5.39 — computer: nella sequenza col telefono la foto esce di scena; telefono a fuoco su bianco, frasi grandi accanto */
@media (min-width: 861px) {
  .scene { --pw: min(300px, calc((100vh - 240px) * .46)); }
  .scene .hero-pic, .scene .pic-title { transition: opacity .6s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
  .scene[data-step]:not([data-step="0"]):not([data-step="1"]) .hero-pic { opacity: 0; transform: translateX(8%); }
  .scene[data-step]:not([data-step="0"]):not([data-step="1"]) .pic-title { opacity: 0; transform: translateX(-4%); }
  .scene .scene-phone { width: var(--pw); left: calc(40% - var(--pw) / 2); top: calc(50% - var(--pw) * 1.013 + 30px); bottom: auto; transform: translateY(30px) !important; }
  .scene[data-step]:not([data-step="0"]):not([data-step="1"]) .scene-phone { transform: none !important; }
  .scene-caps { left: calc(40% + var(--pw) / 2 + 64px); right: auto; top: 50%; bottom: auto; width: min(420px, 30vw); height: 0; }
  .scene-caps .cap { top: 0; bottom: auto; transform: translateY(calc(-50% + 14px)); background: none; box-shadow: none; padding: 0; border-radius: 0; }
  .scene-caps .cap.on { transform: translateY(-50%); }
  .scene-caps h3 { font-size: clamp(36px, 3.6vw, 56px); line-height: 1; letter-spacing: -0.035em; }
  .scene-caps p { font-size: clamp(17px, 1.4vw, 21px); margin-top: 12px; color: #57575C; }
}
/* chiusura: solo l'icona dell'app */
.final-brand { margin-bottom: 24px; }

/* v5.40 — footer: "Un'app di" e sotto il logo LikeHome */
.footer .maker { flex-direction: column; align-items: flex-start; gap: 8px; }
@media (min-width: 861px) { .scene .scene-phone { left: calc(36% - var(--pw) / 2); } .scene-caps { left: calc(36% + var(--pw) / 2 + 64px); } }

/* v5.41 — computer: apertura a foto intera (titolo crema a sinistra), poi una scena alla volta su bianco:
   0 foto · 1 testo "Sai che ce l'hai" · 2 "Vi presentiamo" · 3+ telefono */
@media (min-width: 861px) {
  .scene { height: 760vh; }
  .scene .hero-pic { left: 0; right: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .scene .hero-pic .hero-bg { object-position: 62% 32%; }
  .scene .hero-pic::after { display: none; }
  .scene .scene-shade { display: none; }
  .scene .pic-title { left: 6vw; right: auto; top: max(70px, 11vh); width: 44vw; max-width: 680px; font-size: clamp(62px, 6.6vw, 112px); color: #FFF3D8; text-shadow: 0 3px 18px rgba(64,46,41,.12); }
  .scene[data-step]:not([data-step="0"]) .hero-pic { opacity: 0; transform: scale(1.04); }
  .scene[data-step]:not([data-step="0"]) .pic-title { opacity: 0; transform: none; }

  /* 1 — il testo, centrato su bianco */
  .scene .scene-title { left: 50%; right: auto; top: 50%; width: min(760px, 86vw); max-width: none; transform: translate(-50%, -44%); opacity: 0; pointer-events: none; text-align: center; }
  .scene .scene-title .hero-copy.man-end { max-width: none; margin: 0 auto; text-align: center; }
  .scene .man-end .me-h { font-size: clamp(48px, 5vw, 80px); }
  .scene[data-step="1"] .scene-title { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }

  /* 2 — Vi presentiamo, centrato */
  .scene .scene-intro { left: 50%; right: auto; top: 50%; width: min(760px, 90vw); max-width: none; transform: translate(-50%, -44%); opacity: 0; pointer-events: none; text-align: center; }
  .scene .scene-intro .hero-copy { max-width: 680px; margin: 0 auto; text-align: center; }
  .scene .scene-intro .hero-brand { align-items: center; }
  .scene .scene-intro .lead5 { margin-left: auto; margin-right: auto; }
  .scene .scene-intro .ctas5 { justify-content: center; }
  .scene[data-step="1"] .scene-intro { opacity: 0; pointer-events: none; transform: translate(-50%, -44%); }
  .scene[data-step="2"] .scene-intro { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }

  /* 3+ — telefono */
  .scene[data-step="1"]:not([data-step="0"]) .scene-ui, .scene[data-step="2"]:not([data-step="0"]) .scene-ui { opacity: 0; }
  .scene[data-step="1"] .scene-phone, .scene[data-step="2"] .scene-phone { transform: translateY(30px) !important; }
}
@media (min-width: 861px) { .scene[data-step="1"]:not([data-step="0"]) .scene-title { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; } }

/* v5.42 — passaggi tra le scene: verticali (esce salendo, entra salendo), mai di lato */
@media (min-width: 861px) {
  .scene .scene-title, .scene .scene-intro { transition: opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
  .scene[data-step]:not([data-step="0"]):not([data-step="1"]) .scene-title { opacity: 0; transform: translate(-50%, -58%); pointer-events: none; }
  .scene[data-step]:not([data-step="0"]):not([data-step="1"]):not([data-step="2"]) .scene-intro { opacity: 0; transform: translate(-50%, -58%); pointer-events: none; }
}
@media (min-width: 861px) {
  .scene .scene-title, .scene .scene-intro { transition: opacity .3s ease, transform .45s ease; }
  .scene[data-step="1"]:not([data-step="0"]) .scene-title, .scene[data-step="2"]:not([data-step="0"]) .scene-intro { transition: opacity .55s ease .32s, transform .75s cubic-bezier(.2,.8,.2,1) .32s; }
}

/* v5.43 — citazione in corsivo */
.quote { font-style: italic; }

/* v5.44 — Proposta A: domande + "Ah, ecco dov'era!" + risposta in un'unica fascia crema */
.ask { background: #FFF3D8; padding: 130px 0 120px; }
.ask .ask-qs .q { font-size: clamp(28px, 4.2vw, 54px); line-height: 1.12; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 14px; color: #8A8A90; }
.ask .ask-qs .q:nth-child(odd) { padding-left: 8%; }
.ask .ask-qs .q.rv { transition-delay: calc(var(--k) * .12s); }
.ask-eu { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; margin: 90px 0 0; }
.ask-photo { margin: 0; }
.ask-photo .photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; border-radius: 32px; box-shadow: 0 40px 70px -40px rgba(64,46,41,.45); }
.ask-cap h2 { margin: 0; font-size: clamp(48px, 6vw, 96px); line-height: .95; font-weight: 800; letter-spacing: -0.045em; color: #333336; }
.ask-cap h2 i { font-style: normal; color: #EB676D; }
.ask-cap p { margin: 18px 0 0; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.45; color: var(--ink-2); max-width: 420px; }
.ask-ans { margin: 100px 0 0; text-align: center; font-size: clamp(44px, 7vw, 104px); line-height: 1; font-weight: 800; letter-spacing: -0.045em; color: #333336; }
.ask-ans .hl { color: #EB676D; }
@media (max-width: 860px) {
  .ask { padding: 90px 0 80px; }
  .ask .ask-qs .q:nth-child(odd) { padding-left: 0; }
  .ask-eu { grid-template-columns: 1fr; gap: 28px; margin-top: 60px; text-align: center; }
  .ask-photo .photo { aspect-ratio: 4 / 4.4; border-radius: 26px; }
  .ask-cap p { margin-left: auto; margin-right: auto; }
  .ask-ans { margin-top: 70px; }
}
@media (prefers-color-scheme: dark) and (max-width: 0px) { .ask { background: var(--bg-alt); } .ask .ask-qs .q { color: var(--ink-2); } .ask-cap h2, .ask-ans { color: var(--ink); } }

/* v5.45 — fascia domande (proposta C) — domande come pensieri sopra la foto, poi la scoperta, poi la risposta */
@media all {
  .askC { display: block; position: relative; height: 560vh; background: #FFFFFF; }
  .askC-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .askC-ph { position: absolute; inset: 0; will-change: opacity, transform; }
  .askC-ph .photo { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; box-shadow: none; }
  .askC-ph .c-nr { object-position: 70% 30%; }
  .askC-ph .c-eu { object-position: 62% 32%; }
  .askC-ph.c2 { opacity: 0; }
  .cb { position: absolute; margin: 0; max-width: 30vw; padding: 14px 22px 15px; border-radius: 26px; background: #FFFFFF; color: #333336; font-size: clamp(19px, 1.9vw, 30px); line-height: 1.18; font-weight: 700; letter-spacing: -0.02em; box-shadow: 0 18px 40px -18px rgba(64,46,41,.45); opacity: 0; transform: translateY(18px) scale(.92); transform-origin: right bottom; will-change: opacity, transform; }
  .cb::after { content: ""; position: absolute; right: 26px; bottom: -9px; width: 18px; height: 18px; background: #FFFFFF; border-radius: 4px; transform: rotate(45deg); }
  .cb0 { left: 6vw; top: 16vh; } .cb1 { left: 24vw; top: 31vh; }
  .cb2 { left: 7vw; top: 47vh; } .cb3 { left: 22vw; top: 62vh; }
  .cb4 { left: 6vw; top: 79vh; }
  .askC-cap { position: absolute; left: 4.5vw; top: 50%; transform: translateY(-50%); max-width: 24vw; opacity: 0; }
  .askC-cap h2 { margin: 0; font-size: clamp(44px, 5vw, 88px); line-height: .92; font-weight: 800; letter-spacing: -0.045em; color: #333336; }
  .askC-cap h2 i { font-style: normal; color: #EB676D; }
  .askC-cap p { margin: 18px 0 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; font-weight: 600; color: #3A2E2B; }
  .askC-ans { position: absolute; left: 50%; top: 50%; margin: 0; width: 90vw; text-align: center; transform: translate(-50%, -40%); opacity: 0; font-size: clamp(56px, 8vw, 128px); line-height: 1; font-weight: 800; letter-spacing: -0.045em; color: #333336; }
  .askC-ans .hl { color: #EB676D; }
}
@media (max-width: 860px) {
  .askC { height: 600vh; }
  .askC-sticky { height: 100vh; height: 100svh; }
  .askC-ph.c1 { inset: 60px 0 0 0; }
  .askC-ph .c-nr { object-position: 60% 30%; }
  .askC-ph.c2 { inset: 60px 0 42% 0; }
  .askC-ph .c-eu { object-position: 50% 30%; }
  .cb { max-width: 54vw; padding: 10px 14px 11px; border-radius: 18px; font-size: 15px; line-height: 1.2; }
  .cb::after { right: 16px; bottom: -6px; width: 12px; height: 12px; }
  .cb0 { left: 4vw; top: 15%; } .cb1 { left: 8vw; top: 26%; } .cb2 { left: 4vw; top: 37%; } .cb3 { left: 6vw; top: 49%; } .cb4 { left: 4vw; top: 63%; }
  .askC-cap { left: 6vw; right: 6vw; top: auto; bottom: 15%; transform: none; max-width: none; text-align: center; }
  .askC-cap h2 { font-size: clamp(40px, 11vw, 56px); }
  .askC-cap p { font-size: 16px; margin-top: 10px; }
  .askC-ans { font-size: clamp(44px, 12vw, 64px); }
}

/* v5.46 — pop-up "in fase di approvazione" + raccolta email */
.wl { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(46,34,31,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wl[hidden] { display: none; }
html.wl-open { overflow: hidden; }
.wl-card { position: relative; width: min(440px, 100%); background: #FFFFFF; border-radius: 28px; padding: 34px 30px 26px; text-align: center; box-shadow: 0 40px 80px -30px rgba(46,34,31,.55); color: #333336; }
.wl-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #F2F2F7; color: #333336; font-size: 22px; line-height: 1; cursor: pointer; }
.wl-icon { width: 64px; height: 64px; border-radius: 15px; display: block; margin: 0 auto 16px; }
.wl-card h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.wl-text { margin: 10px 0 20px; font-size: 16px; line-height: 1.45; color: #57575C; }
.wl-form input[type=email] { width: 100%; box-sizing: border-box; font: inherit; font-size: 17px; padding: 14px 16px; border: 1.5px solid #E5E5EA; border-radius: 14px; outline: none; }
.wl-form input[type=email]:focus { border-color: #EB676D; }
.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wl-consent { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin: 14px 2px 18px; font-size: 13px; line-height: 1.4; color: #57575C; }
.wl-consent input { margin-top: 2px; accent-color: #EB676D; flex: none; width: 18px; height: 18px; }
.wl-consent a { color: #EB676D; text-decoration: underline; }
.wl-btn { width: 100%; border: 0; border-radius: 980px; background: #EB676D; color: #FFFFFF; font: inherit; font-size: 17px; font-weight: 700; padding: 15px; cursor: pointer; }
.wl-btn:disabled { opacity: .6; }
.wl-msg { min-height: 1.2em; margin: 12px 0 0; font-size: 14px; }
.wl-msg.ok { color: #2E7D4F; font-weight: 600; font-size: 16px; } .wl-msg.bad { color: #C2414A; }
.wl-form.done input, .wl-form.done label, .wl-form.done button { display: none; }
@media (prefers-color-scheme: dark) and (max-width: 0px) { .wl-card { background: #2E221F; color: #FFF3D8; } .wl-text, .wl-consent { color: #D9CBBF; } .wl-x { background: #4A3631; color: #FFF3D8; } .wl-form input[type=email] { background: #3A2A26; color: #FFF3D8; border-color: #55403A; } }

/* v5.47 — paragrafo sotto il titolo sulla foto d'apertura */
.pic-head { position: absolute; z-index: 2; transition: opacity .5s, transform .6s; }
.scene .pic-head .pic-title, .pic-head .pic-title { position: static; inset: auto; top: auto; left: auto; right: auto; width: auto; max-width: none; margin: 0; transform: none; opacity: 1; }
.pic-sub { margin: 20px 0 0; max-width: 470px; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.45; font-weight: 600; color: #FFFFFF; text-shadow: 0 1px 12px rgba(120,40,40,.25); }
@media (min-width: 861px) {
  .scene .pic-head { left: 6vw; top: max(70px, 11vh); width: 44vw; max-width: 680px; }
  .scene[data-step]:not([data-step="0"]) .pic-head { opacity: 0; pointer-events: none; }
}
@media (max-width: 860px) {
  .pic-head { left: 14px; top: 22px; right: auto; width: 56%; }
  .pic-head .pic-title { white-space: nowrap; }
  .pic-sub { margin-top: 12px; font-size: 13.5px; line-height: 1.4; max-width: 52vw; }
}

/* v5.48 — testo sotto il titolo in apertura: più righe, grassetti */
.pic-sub { font-weight: 400; max-width: 500px; }
.pic-sub p { margin: 0 0 12px; }
.pic-sub p:last-child { margin-bottom: 0; }
.pic-sub b { font-weight: 700; }
@media (max-width: 860px) { .pic-sub { max-width: 54vw; font-size: 13px; } .pic-sub p { margin-bottom: 8px; } }
@media (max-width: 860px) { .pic-sub { max-width: 49vw; } }

/* v5.49 — da smartphone, sotto il titolo restano solo "Scopri OkiDocky." e le righe seguenti */
@media (max-width: 860px) { .pic-sub p:first-child { display: none; } }

/* v5.50 — modalità scura: frasi accanto al telefono, fascia domande/risposta */
@media (prefers-color-scheme: dark) and (max-width: 0px) {
  .scene-caps h3 { color: #FFF3D8; }
  .scene-caps p { color: #D9CBBF; }
  .askC { background: var(--bg); }
  .askC-ans { color: #FFF3D8; }
}
@media (prefers-color-scheme: dark) and (max-width: 0px) and (max-width: 860px) {
  .askC-cap h2 { color: #FFF3D8; }
  .askC-cap p { color: #D9CBBF; }
}

/* v5.51 — sito sempre in versione chiara, anche con il sistema in modalità scura (deciso da Sauro il 05/10/2026) */
:root { color-scheme: light only; }

/* v5.52 — foto definitive: inquadratura dei fumetti su smartphone */
@media (max-width: 860px) { .askC-ph .c-nr { object-position: 48% 30%; } }

/* v5.53 — smartphone: ragazza perplessa intera e più piccola in basso, fumetti sul muro sopra di lei */
@media (max-width: 860px) {
  .askC-ph.c1 { inset: 60px 0 0 0; background: linear-gradient(180deg, #C45955 0%, #D6645F 55%, #D76560 100%); }
  .askC-ph.c1 .c-nr { position: absolute; top: auto; bottom: 0; left: auto; right: calc(10px - 15.3vh); right: calc(10px - 15.3svh); width: auto; max-width: none; height: 53vh; height: 53svh; object-fit: fill; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%); mask-image: linear-gradient(180deg, transparent 0%, #000 24%); }
  .cb { max-width: 70vw; }
  .cb0 { top: 10%; left: 5vw; } .cb1 { top: 18%; left: 12vw; } .cb2 { top: 26%; left: 5vw; } .cb3 { top: 34%; left: 9vw; } .cb4 { top: 44%; left: 5vw; }
}

/* v5.54 — animazione del logo all'apertura della pagina, come il film di OkiDocky+ nell'app (senza il +):
   8 tacche una alla volta dal basso in senso orario con uno scatto → arco corallo → manico → rimbalzo → scritta */
.lockup-anim .lk-tick:nth-child(7)  { --o: 0; }  /* --i:4 */
.lockup-anim .lk-tick:nth-child(10) { --o: 1; }  /* --i:7 */
.lockup-anim .lk-tick:nth-child(8)  { --o: 2; }  /* --i:5 */
.lockup-anim .lk-tick:nth-child(6)  { --o: 3; }  /* --i:3 */
.lockup-anim .lk-tick:nth-child(3)  { --o: 4; }  /* --i:0 */
.lockup-anim .lk-tick:nth-child(4)  { --o: 5; }  /* --i:1 */
.lockup-anim .lk-tick:nth-child(5)  { --o: 6; }  /* --i:2 */
.lockup-anim .lk-tick:nth-child(9)  { --o: 7; }  /* --i:6 */
.lockup-anim .lk-tick, .lockup-anim .lk-arc, .lockup-anim .lk-handle, .lockup-anim .lk-word, .lockup-anim > .lk-coral { transition: none !important; opacity: 1; transform: none; }
.lockup-anim .lk-tick { fill: var(--brown); animation: lkTick .42s cubic-bezier(.2,.9,.3,1.5) both; animation-delay: calc(.35s + var(--o) * .11s); }
.lockup-anim .lk-arc { animation: lkFade .55s ease 1.35s both; }
.lockup-anim .lk-handle { animation: lkFade .5s ease 1.75s both; }
.lockup-anim .lk-lens { transform-box: fill-box; transform-origin: 50% 50%; animation: lkBounce .55s cubic-bezier(.3,1.5,.5,1) 2.2s both; }
.lockup-anim .lk-word, .lockup-anim > .lk-coral { animation: lkWord .7s cubic-bezier(.2,.8,.2,1) 2.45s both; }
@keyframes lkTick { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.28); } 100% { opacity: 1; transform: none; } }
@keyframes lkFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lkBounce { 0% { transform: scale(1); } 40% { transform: scale(1.1); } 70% { transform: scale(.97); } 100% { transform: scale(1); } }
@keyframes lkWord { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lockup-anim * { animation: none !important; opacity: 1 !important; transform: none !important; } }

/* v5.55 — nuova foto "Cosa. Dove. Fatto." (ragazza con le chiavi davanti al cassetto) */
.man-photo .photo { object-position: 60% 22%; }
@media (max-width: 734px) { .man-photo .photo { object-position: 68% 30%; } }

/* v5.56 — "Cosa. Dove. Fatto.": foto intera in un riquadro a sinistra, testo a destra (come la nonna, foto più grande) */
.manifesto { padding: 120px 0; }
.man-split { max-width: 1240px; margin: 0 auto; padding: 0 max(24px, 4vw); display: grid; grid-template-columns: 1.45fr 1fr; gap: 64px; align-items: center; }
.manifesto .man-photo { margin: 0; max-width: none; width: 100%; }
.manifesto .man-photo .photo { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 896; object-fit: cover; object-position: center; border-radius: 32px; box-shadow: 0 40px 80px -40px rgba(64,46,41,.45); }
.man-copy { text-align: left; }
.man-copy .giant { font-size: clamp(48px, 5.6vw, 92px); }
.man-copy .sub { margin-left: 0; max-width: 420px; }
@media (max-width: 860px) {
  .manifesto { padding: 80px 0; }
  .man-split { grid-template-columns: 1fr; gap: 34px; }
  .manifesto .man-photo .photo { border-radius: 24px; height: auto; max-height: none; }
  .man-copy { text-align: center; } .man-copy .sub { margin-left: auto; margin-right: auto; }
}

/* v5.57 — "Come funziona" in due capitoli distinti: 1 · Salva (oggi) e 2 · Trova (tre mesi dopo) */
.ctag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #EB676D; }
.ctag i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #EB676D; color: #FFFFFF; }
.ctag i svg { width: 14px; height: 14px; }
.ctag.ct2 { color: #B07A00; } .ctag.ct2 i { background: #F2B705; color: #3A2A00; }
.scene-chap { display: none; }
@media (min-width: 861px) {
  .scene { height: 950vh; }
  .scene-sticky { transition: background-color .7s ease; }
  .scene[data-ch="2"] .scene-sticky { background: #FFF4D2; }
  /* cartelli dei capitoli */
  .scene-chap { display: block; position: absolute; left: 50%; top: 50%; width: min(760px, 88vw); text-align: center; transform: translate(-50%, -44%); opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .45s ease; }
  .scene-chap.on { opacity: 1; transform: translate(-50%, -50%); transition: opacity .55s ease .32s, transform .75s cubic-bezier(.2,.8,.2,1) .32s; }
  .scene-chap .chap-k { margin: 0 0 22px; } .scene-chap .ctag { font-size: 15px; } .scene-chap .ctag i { width: 30px; height: 30px; } .scene-chap .ctag i svg { width: 17px; height: 17px; }
  .scene-chap .chap-h { margin: 0; font-size: clamp(56px, 6.4vw, 104px); line-height: 1; font-weight: 800; letter-spacing: -0.04em; color: #333336; }
  .scene-chap .chap-h .hl { color: #EB676D; }
  .scene-chap[data-c="1"] .chap-h .hl { color: #C98A00; }
  .scene-chap .chap-p { margin: 24px auto 0; max-width: 520px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: #57575C; }
  .scene.scene[data-card="0"] .scene-ui, .scene.scene[data-card="1"] .scene-ui { opacity: 0; }
  /* capitolo 2: telefono a destra, frasi a sinistra */
  .scene[data-side="2"] .scene-phone { left: calc(64% - var(--pw) / 2); }
  .scene[data-side="2"] .scene-caps { left: auto; right: calc(36% + var(--pw) / 2 + 64px); text-align: right; }
  .scene-caps .ctag { margin-bottom: 14px; }
  /* pallini divisi in due gruppi */
  .scene-chips { align-items: center; }
  .scene-chips em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #EB676D; padding: 0 6px 0 10px; }
  .scene-chips em + span { margin-left: 0; }
  .scene-chips span + em { margin-left: 10px; border-left: 1px solid rgba(64,46,41,.18); padding-left: 16px; color: #B07A00; }
  .scene-chips span[data-f="s3"].on, .scene-chips span[data-f="s4"].on { background: #F2B705; color: #3A2A00; }
}
/* smartphone: due blocchi, il secondo su fondo giallo tenue */
.story.story-ch2 { background: #FFF4D2; border-top: 0; padding-top: 70px; }
.story.story-ch1 { padding-bottom: 70px; }
.story .chap-k { margin: 0 0 14px; }
.story .giant .hl { color: #EB676D; } .story.story-ch2 .giant .hl { color: #C98A00; }
.story.story-ch2 .step .n { background: #F2B705; color: #3A2A00; }
@media (max-width: 860px) { .story .giant { font-size: clamp(44px, 12vw, 64px); } .story .step:first-of-type { margin-top: 0; } }

/* v5.58 — titolo sulla foto d'apertura ("Dove l'avevo messo?!?") in bianco, su Mac e su smartphone */
.scene .pic-title, .scene .pic-head .pic-title, .pic-head .pic-title { color: #FFFFFF; }

/* v5.59 — avviso cookie informativo (il sito non usa cookie): card chiara in basso, si chiude con "Ok, chiaro" */
.ck { position: fixed; z-index: 70; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); width: min(680px, calc(100% - 32px)); display: flex; align-items: center; gap: 18px; padding: 14px 14px 14px 22px; background: #FFFFFF; color: #333336; border-radius: 22px; box-shadow: 0 18px 44px -18px rgba(64,46,41,.45), 0 0 0 1px rgba(64,46,41,.08); opacity: 0; transform: translate(-50%, 24px); transition: opacity .35s ease, transform .45s cubic-bezier(.2,1.2,.4,1); }
.ck.show { opacity: 1; transform: translate(-50%, 0); }
.ck[hidden] { display: none; }
.ck p { margin: 0; flex: 1; font-size: 14.5px; line-height: 1.4; color: #57575C; }
.ck a { color: #C9474F; font-weight: 600; }
.ck button { flex: none; border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; color: #FFFFFF; background: #EB676D; padding: 11px 20px; border-radius: 980px; }
.ck button:hover { background: #DB5C61; }
@media (max-width: 860px) {
  .ck { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 16px 14px; text-align: center; border-radius: 20px; }
  .ck p { font-size: 14px; }
  .ck-open .dl-pill { bottom: calc(18px + env(safe-area-inset-bottom) + var(--ck-h, 120px) + 12px); }
}
@media (prefers-reduced-motion: reduce) { .ck { transition: opacity .2s; } }

/* v5.60 — fascia Condividi: titolo "Condividi." grande e sfumato come "Un localizzatore", icona di condivisione iOS in corallo, più respiro */
.share-band { padding: 150px 0 140px; }
.share-head { margin-bottom: 80px; }
.share-head .share-ic { display: block; width: clamp(64px, 6vw, 88px); height: auto; margin: 0 auto 22px; color: #EB676D; }
.share-head .giant { font-size: clamp(64px, 9vw, 140px); background: linear-gradient(100deg, #333336 30%, #EB676D); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.share-copy .share-h { margin: 0; font-size: clamp(36px, 3.8vw, 58px); line-height: 1.04; font-weight: 800; letter-spacing: -0.035em; color: #333336; }
.share-copy .share-h .hl { color: var(--coral-text); }
.share-copy .share-h + .sub { margin-top: 22px; }
@media (max-width: 860px) { .share-band { padding: 100px 0 90px; } .share-head { margin-bottom: 46px; } }

/* v5.61 — "Condividi." alla stessa misura di "I tuoi oggetti sono affari tuoi." (headline sfumato), icona più piccola */
.share-band { padding: 130px 0; }
.share-head { margin-bottom: 64px; }
.share-head .share-ic { width: 46px; margin-bottom: 16px; }
.share-head .giant { display: inline-block; font-size: clamp(40px, 5.6vw, 64px); line-height: 1.06; font-weight: 700; letter-spacing: -0.03em; background-image: linear-gradient(100deg, #333336 25%, #EB676D 95%); -webkit-text-fill-color: transparent; }
@media (max-width: 860px) { .share-band { padding: 90px 0; } .share-head { margin-bottom: 40px; } .share-head .share-ic { width: 40px; } }

/* v5.62 — più spazio tra "Condividi." e "Lei è al mare…" */
.share-head { margin-bottom: 110px; }
@media (max-width: 860px) { .share-head { margin-bottom: 64px; } }

/* v5.63 — riga sottile che separa "Un localizzatore" dalla fascia Condividi */
.share-band { position: relative; }
.share-band::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(720px, calc(100% - 64px)); height: 1px; background: rgba(64,46,41,.16); }

/* v5.64 — riga sottile anche tra "A prova di nonna" e "Funzioni" */
#funzioni { position: relative; }
#funzioni::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(720px, calc(100% - 64px)); height: 1px; background: rgba(64,46,41,.16); }

/* v5.65 — Privacy da smartphone: icone, titoli e testi centrati */
@media (max-width: 860px) { .privacy-grid { text-align: center; } .privacy-grid svg { display: block; margin-left: auto; margin-right: auto; } }

/* v5.66 — smartphone: "Sai che ce l'hai. Ma dove?" da solo a tutto schermo; scorrendo sale e sparisce, poi entra "Vi presentiamo" (come su Mac) */
.scene-duo, .scene-duo-st { display: contents; }
@media (max-width: 860px) {
  .scene .scene-duo { display: block; position: relative; height: 250svh; }
  .scene .scene-duo-st { display: block; position: sticky; top: 0; height: 100svh; overflow: hidden; }
  .scene .scene-duo .scene-title, .scene .scene-duo .scene-intro { position: absolute; left: 0; right: 0; top: calc(50% + 28px); padding: 0 22px; margin: 0; max-width: none; opacity: 0; pointer-events: none; transform: translateY(-44%); transition: opacity .3s ease, transform .45s ease; }
  .scene .scene-duo:not([data-k="1"]) .scene-title,
  .scene .scene-duo[data-k="1"] .scene-intro { opacity: 1; pointer-events: auto; transform: translateY(-50%); transition: opacity .55s ease .32s, transform .75s cubic-bezier(.2,.8,.2,1) .32s; }
  .scene .scene-duo[data-k="1"] .scene-title { transform: translateY(-58%); }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) { .scene .scene-duo .scene-title, .scene .scene-duo .scene-intro { transition: opacity .2s !important; } }

/* v5.67 — smartphone: apertura a tutto schermo. La foto resta intera in basso (stessa inquadratura), sopra il corallo del muro continua fino al menu */
@media (max-width: 860px) {
  .scene .hero-pic { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: calc(100svh - 97px); min-height: 560px; background: linear-gradient(180deg, #B9504E 0%, #C25A57 60%, #BE5552 100%); overflow: hidden; }
  .scene .hero-pic .hero-bg { flex: none; width: 100%; height: min(66svh, 600px); object-fit: cover; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px); mask-image: linear-gradient(180deg, transparent 0, #000 90px); }
}
@media (max-width: 860px) {
  .scene .hero-pic { background: linear-gradient(180deg, #BD5552 0%, #C65E5A 100%); }
  .scene .hero-pic .hero-bg { object-position: 76% 30%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px); mask-image: linear-gradient(180deg, transparent 0, #000 140px); }
}

/* v5.68 — numerino di rimando alla nota 1 (prezzi OkiDocky+) */
sup.fn { font-size: .62em; font-weight: 600; margin-left: 2px; vertical-align: super; line-height: 0; opacity: .7; }

/* v5.69 — conferma "Fatto! Ti scriviamo…" nel popup Avvisami in corallo del marchio */
.wl-msg.ok { color: #EB676D; }

/* v5.70 — fascia della ragazza con le chiavi: da spiegazione ad affermazione ("La piccola rivoluzione è questa.") */
.man-copy .man-h { margin: 0; font-size: clamp(34px, 3.5vw, 56px); line-height: 1.06; font-weight: 800; letter-spacing: -0.035em; color: #333336; }
.man-copy .man-h .hl { color: #EB676D; }
.man-copy .man-tq { margin: 18px 0 0; font-size: clamp(22px, 2vw, 30px); font-weight: 800; letter-spacing: -0.02em; color: #333336; }
.man-copy .man-nots { list-style: none; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(64,46,41,.16); display: grid; gap: 8px; }
.man-copy .man-nots li { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.4; color: #57575C; }
.man-copy .man-only { margin: 16px 0 0; font-size: clamp(19px, 1.6vw, 23px); font-weight: 700; color: #333336; }
@media (max-width: 860px) { .man-copy .man-nots { justify-items: center; } }

/* v5.71 — "OkiDocky" nel titolo con i colori del logo; su Mac la foto si allinea in alto e in basso al blocco di testo */
.man-copy .man-h .wm .oki { color: #402E29; } .man-copy .man-h .wm .docky { color: #EB676D; }
@media (min-width: 861px) {
  .man-split { align-items: stretch; }
  .manifesto .man-photo { height: 100%; }
  .manifesto .man-photo .photo { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; }
  .man-copy .kicker { margin-top: 0; }
  .man-copy .man-only { margin-bottom: 0; }
}

/* v5.72 — smartphone: "Raccolte colorate" alta come gli altri riquadri (la regola del primo riquadro grande vale solo su schermi larghi) */
@media (max-width: 734px) { .tile.s4, .tile.s2:first-of-type { min-height: 0; } }

/* v5.73 — testata fissa: quando si rimpicciolisce allo scroll non sposta più la pagina (prima la spingeva su di ~48px e vicino alla cima tremava) */
.hdr { position: fixed; top: 0; left: 0; right: 0; }
body:has(> .hdr) { padding-top: 126px; }
@media (max-width: 734px) { body:has(> .hdr) { padding-top: 97px; } }

/* v5.74 — titoli che vanno a capo bilanciati (niente parola sola sull'ultima riga), testi senza "vedove" */
h1, h2, h3, .giant, .headline, .chap-h, .man-h, .share-h, .askC-ans, .askC-cap h2, .scene-caps h3, .pic-title, .me-h, .claim5 { text-wrap: balance; }
p, li, .sub, .lead5, .chap-p, .mini { text-wrap: pretty; }

/* v5.75 — "Fatto!" nel popup Avvisami: i campi svaniscono, l'icona fa un piccolo salto, compare la spunta corallo, poi sale il messaggio */
.wl-iconw { position: relative; width: 64px; margin: 0 auto 16px; }
.wl-iconw .wl-icon { margin: 0; }
.wl-ok { position: absolute; right: -7px; bottom: -7px; width: 26px; height: 26px; border-radius: 50%; background: #EB676D; box-shadow: 0 0 0 3px #FFFFFF; display: grid; place-items: center; opacity: 0; transform: scale(.4); pointer-events: none; }
.wl-ok svg { width: 16px; height: 16px; fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; }
.wl-form > * { transition: opacity 150ms cubic-bezier(.23,1,.32,1); }
.wl.is-done .wl-form > :not(.wl-msg) { opacity: 0; }
.wl.is-done .wl-icon { animation: wlHop 420ms cubic-bezier(.23,1,.32,1) 120ms both; }
.wl.is-done .wl-ok { animation: wlPop 420ms cubic-bezier(.34,1.56,.64,1) 200ms both; }
.wl.is-done .wl-ok svg { animation: wlDraw 260ms cubic-bezier(.23,1,.32,1) 480ms both; }
.wl-msg.ok { animation: wlMsg 320ms cubic-bezier(.23,1,.32,1) 260ms both; }
@keyframes wlHop { 0% { transform: none; } 40% { transform: translateY(-6px) scale(1.04); } 100% { transform: none; } }
@keyframes wlPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes wlDraw { to { stroke-dashoffset: 0; } }
@keyframes wlMsg { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .wl.is-done .wl-icon { animation: none; }
  .wl.is-done .wl-ok { animation: wlFade 200ms ease-out both; transform: none; } .wl.is-done .wl-ok svg { animation: none; stroke-dashoffset: 0; }
  .wl-msg.ok { animation: wlFade 200ms ease-out both; }
}
@keyframes wlFade { from { opacity: 0; } to { opacity: 1; } }

/* v5.76 — sito che si comporta come un'app su iPhone */
/* niente lampo azzurrino al tocco */
html { -webkit-tap-highlight-color: transparent; }
/* tocchi immediati, niente selezione del testo dei bottoni con la pressione lunga */
a, button, summary, label { touch-action: manipulation; }
button, .asb, .dl-pill, .pill, .btn, .wl-btn, .wl-x, .ck button, .hdr .lang a { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* su schermi touch gli effetti "al passaggio del mouse" non restano incollati dopo il tocco */
@media (hover: none) {
  a:hover { text-decoration: none; }
  .asb:hover, .btn:hover { transform: none; }
  .btn:hover, .pill:hover { filter: none; }
  .hdr nav a:hover { color: inherit; opacity: .85; }
  .ck button:hover { background: #EB676D; }
}
/* effetto pressione: il bottone si abbassa appena sotto il dito */
.asb, .btn, .pill, .wl-btn, .ck button, .wl-x { transition: transform 160ms cubic-bezier(.23,1,.32,1), filter 150ms ease, background-color 150ms ease; }
.asb:active, .btn:active, .pill:active, .wl-btn:active, .ck button:active, .wl-x:active { transform: scale(.97); filter: brightness(.94); }
.dl-pill.show:active { transform: translate(-50%, 0) scale(.97); filter: brightness(.94); transition: transform 160ms cubic-bezier(.23,1,.32,1), filter 150ms ease; }
/* margini per notch e barra dell'iPhone (attivi grazie a viewport-fit=cover) */
.wrap, .wide { padding-left: max(22px, env(safe-area-inset-left, 0px)); padding-right: max(22px, env(safe-area-inset-right, 0px)); }
@media (prefers-reduced-motion: reduce) { .asb:active, .btn:active, .pill:active, .wl-btn:active, .ck button:active, .wl-x:active { transform: none; } .dl-pill.show:active { transform: translate(-50%, 0); } }

/* v5.77 — spaziatura delle lettere nei testi piccoli: il -0.022em del corpo va bene a 17px, ma stringe troppo sotto i 15px */
.hdr nav, .hdr .lang, .scene-chips span, .scene-hint, .checks ul, .ck p, .ck button, .wl-consent, .wl-msg, .wl-text,
.fine, .footer .maker span, .plus5-foot, .hero-note, .b, .mapcard .mc b, .dl small { letter-spacing: -0.006em; }
.footer, .footer h4, .footer .notes p, .compare li small, .msgs-top b, .msgs .time, .mapcard .mc small, .pill { letter-spacing: 0; }

/* v5.78 — smartphone: niente striscia bianca tra la fascia gialla "Trova" e la ragazza con i fumetti (il corallo parte dal bordo, sotto la testata) */
@media (max-width: 860px) { .askC-ph.c1 { inset: 0; } }

/* v5.79 — "Scarica gratis" su smartphone: vetro bianco sfocato come la testata, testo corallo; rettangolo arrotondato con angoli concentrici all'icona dell'app */
@media (max-width: 860px) {
  .dl-pill { background: rgba(255,255,255,.72); color: #EB676D; -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-radius: 17px; padding: 7px 20px 7px 7px; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(64,46,41,.08), 0 14px 30px -12px rgba(64,46,41,.40), 0 2px 6px rgba(64,46,41,.10); }
  .dl-pill img { border-radius: 10px; }
}

/* v5.80 — "Scarica gratis": bianco al 75% e testo nel marrone di "Oki" del logo */
@media (max-width: 860px) { .dl-pill { background: rgba(255,255,255,.75); color: #402E29; } }

/* v5.81 — "Scarica gratis": vetro più trasparente (bianco al 60%) */
@media (max-width: 860px) { .dl-pill { background: rgba(255,255,255,.60); } }

/* v5.82 — effetto pressione di "Scarica gratis" più visibile sul vetro bianco (su iPhone serve anche l'ascolto dei tocchi, aggiunto nello script della testata) */
@media (max-width: 860px) {
  .dl-pill.show:active { transform: translate(-50%, 0) scale(.95); background: rgba(255,255,255,.85); filter: none; transition: transform 120ms cubic-bezier(.23,1,.32,1), background-color 120ms ease; }
}
@media (prefers-reduced-motion: reduce) { .dl-pill.show:active { transform: translate(-50%, 0); } }

/* v5.83 — spunta di "Fatto!" in alto a destra dell'icona, come il badge delle notifiche di iOS */
.wl-ok { top: -7px; right: -7px; bottom: auto; }

/* v5.84 — "Scarica gratis" su smartphone con lo schema "Ottieni" dell'App Store: pill di vetro, a sinistra OkiDocky (colori del logo) + "Gratis su App Store", a destra la piccola pill corallo "Scarica" */
@media (max-width: 860px) {
  .dl-pill { border-radius: 980px; padding: 7px 7px 7px 24px; gap: 18px; align-items: center; }
  .dl-pill .dp-t { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
  .dl-pill .dp-t b { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
  .dl-pill .dp-t .oki { color: #402E29; } .dl-pill .dp-t .docky { color: #EB676D; }
  .dl-pill .dp-t small { margin-top: 2px; font-size: 12px; font-weight: 500; letter-spacing: 0; color: #6E5A52; }
  .dl-pill .dp-b { background: #EB676D; color: #FFFFFF; font-size: 15px; font-weight: 700; padding: 10px 18px; border-radius: 980px; }
}

/* v5.85 — sotto "OkiDocky" solo "App Store", con la tipografia del badge ufficiale (SF Pro, medio, nero, compatto) */
@media (max-width: 860px) {
  .dl-pill .dp-t small { margin-top: 1px; font-family: -apple-system, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: -0.015em; color: #000000; }
}

/* v5.86 — "App Store" sotto OkiDocky più leggero (marrone-grigio del sito), il nome dell'app resta protagonista */
@media (max-width: 860px) { .dl-pill .dp-t small { color: #6E5A52; } }

/* v5.87 — "OkiDocky" nel testo di "Sai che ce l'hai": in grassetto con i colori del logo */
.man-end b.wm { font-weight: 700; }

/* v5.88 — "OkiDocky" ovunque nel testo: grassetto con i colori del logo; su fondi scuri "Oki" crema */
b.wm { font-weight: 700; }
.wm .oki { color: #402E29; } .wm .docky { color: #EB676D; } .wm .plus { color: #402E29; font-weight: 900; }
.p6 .wm .oki, .p6 .wm .plus, .plus5 .wm .oki, .plus5 .wm .plus { color: #FFF3D8; }

/* v5.89 — animazione del logo in testata: niente rimbalzo della lente, tutto il 25% più veloce (durate e ritardi × 0,75) */
.lockup-anim .lk-tick { animation-duration: .315s; animation-delay: calc(.26s + var(--o) * .0825s); }
.lockup-anim .lk-arc { animation-duration: .41s; animation-delay: 1.01s; }
.lockup-anim .lk-handle { animation-duration: .375s; animation-delay: 1.31s; }
.lockup-anim .lk-lens { animation: none; }
.lockup-anim .lk-word, .lockup-anim > .lk-coral { animation-duration: .525s; animation-delay: 1.84s; }

/* v5.90 — animazione logo: la scritta OkiDocky entra insieme al manico */
.lockup-anim .lk-word, .lockup-anim > .lk-coral { animation-delay: 1.31s; }

/* v5.91 — tabella prezzi senza badge App Store nelle colonne (era una ripetizione); su smartphone niente spazio vuoto sotto il prezzo */
@media (max-width: 734px) { .compare .price { min-height: 0; } }

/* v5.92 — tabella prezzi: al posto del testo, il logotipo vero (tracciati del marchio) OkiDocky e OkiDocky+ */
.compare .name { line-height: 0; }
.compare .cmp-wm { display: inline-block; height: 34px; width: auto; }
@media (max-width: 734px) { .compare .cmp-wm { height: 30px; } }

/* v5.93 — smartphone: nella tabella prezzi (piani uno sotto l'altro) la testata di ogni piano è un riquadro: crema per OkiDocky, corallo tenue per OkiDocky+ */
@media (max-width: 640px) {
  .compare { gap: 48px; }
  .compare .col { padding: 0; }
  .compare .col-head { background: #FFF3D8; border-radius: 24px; padding: 26px 20px 22px; margin-bottom: 8px; }
  .compare .col-plus .col-head { background: #FDE7E6; }
  .compare .col-head .price { margin-bottom: 0; }
  .compare .col-head .name { margin-bottom: 10px; }
}

/* v5.94 — più spazio tra "Gratis. Per davvero." + sottotitolo e i loghi dei due piani */
.compare { margin-top: 104px; }
@media (max-width: 640px) { .compare { margin-top: 72px; } }

/* v5.95 — smartphone: niente riquadri colorati; ogni piano si apre con una doppia riga orizzontale sottile */
@media (max-width: 640px) {
  .compare .col-head, .compare .col-plus .col-head { background: none; border-radius: 0; border-top: 4px double rgba(64,46,41,.28); padding: 30px 0 22px; margin-bottom: 0; }
}

/* v5.96 — doppia riga più sottile (due linee da 1px con 1px di spazio) */
@media (max-width: 640px) { .compare .col-head, .compare .col-plus .col-head { border-top: 3px double rgba(64,46,41,.24); } }

/* v5.97 — doppia riga con le due linee più distanti (1px + 5px di spazio + 1px) */
@media (max-width: 640px) {
  .compare .col-head, .compare .col-plus .col-head { border-top: 0; padding-top: 37px;
    background: linear-gradient(rgba(64,46,41,.24), rgba(64,46,41,.24)) 0 0 / 100% 1px no-repeat,
                linear-gradient(rgba(64,46,41,.24), rgba(64,46,41,.24)) 0 6px / 100% 1px no-repeat; }
}

/* v5.98 — smartphone: tra l'ultima riga del piano gratuito e la doppia riga di OkiDocky+ lo stesso passo delle righe della tabella (70px) */
@media (max-width: 640px) { .compare { gap: 70px; } }

/* v5.99 — smartphone: stessa distanza (36px) tra doppia riga e logo, e tra prezzo e la prima riga della tabella */
@media (max-width: 640px) {
  .compare .col-head, .compare .col-plus .col-head { padding-top: 43px; padding-bottom: 0; }
  .compare .col-head + ul { margin-top: 36px; }
}

/* v5.100 — tabella prezzi: niente riga sotto l'ultima voce di ogni piano (su Mac e su smartphone) */
.compare li:last-child { border-bottom: 0; }

/* v5.101 — frase sotto la tabella prezzi più in basso, senza allungare la fascia: +40px sopra, -40px sotto */
#prezzi .fine { margin-top: 80px; }
#prezzi.section { padding-bottom: 80px; }

/* v5.102 — popup Avvisami: si può scorrere quando la tastiera dell'iPhone è aperta (il bottone non finisce più fuori schermo) */
.wl { display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
      padding: max(20px, env(safe-area-inset-top, 0px)) 16px max(20px, env(safe-area-inset-bottom, 0px)); }
.wl-card { margin: auto 0; }
@media (max-width: 860px) { .wl-card { padding: 28px 22px 20px; } .wl-iconw { width: 56px; margin-bottom: 12px; } .wl-icon { width: 56px; height: 56px; } }
/* ingresso morbido del popup */
.wl { transition: opacity 200ms cubic-bezier(.23,1,.32,1); }
.wl-card { transition: transform 250ms cubic-bezier(.23,1,.32,1), opacity 200ms ease-out; }
@starting-style { .wl { opacity: 0; } .wl-card { opacity: 0; transform: translateY(8px) scale(.96); } }

/* v5.103 — zone da toccare di almeno 44×44 punti: IT · EN e la ✕ del popup */
.hdr .lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.hdr .lang { display: inline-flex; align-items: center; }
.wl-x { width: 44px; height: 44px; top: 8px; right: 8px; }

/* v5.104 — animazioni più rapide e pulite */
/* passaggi tra le scene: l'uscita è rapida, l'ingresso parte presto (prima: oltre 1 secondo con un attimo di bianco) */
@media (min-width: 861px) {
  .scene .scene-title, .scene .scene-intro, .scene .scene-chap { transition: opacity 180ms cubic-bezier(.23,1,.32,1), transform 240ms cubic-bezier(.23,1,.32,1); }
  .scene[data-step="1"]:not([data-step="0"]) .scene-title, .scene[data-step="2"]:not([data-step="0"]) .scene-intro, .scene .scene-chap.on { transition: opacity 400ms cubic-bezier(.23,1,.32,1) 120ms, transform 520ms cubic-bezier(.23,1,.32,1) 120ms; }
}
@media (max-width: 860px) {
  .scene .scene-duo .scene-title, .scene .scene-duo .scene-intro { transition: opacity 180ms cubic-bezier(.23,1,.32,1), transform 240ms cubic-bezier(.23,1,.32,1); }
  .scene .scene-duo:not([data-k="1"]) .scene-title, .scene .scene-duo[data-k="1"] .scene-intro { transition: opacity 400ms cubic-bezier(.23,1,.32,1) 120ms, transform 520ms cubic-bezier(.23,1,.32,1) 120ms; }
}
/* cambio di schermata nel telefono: la nuova entra sopra la vecchia, senza due schermate sovrapposte a metà */
.scene-phone .ss { transition: opacity 0s linear .4s; }
.scene-phone .ss.on { z-index: 1; transition: opacity .35s cubic-bezier(.23,1,.32,1); }
/* etichette sotto il telefono e didascalie: niente "transition: all", niente rimbalzo sul testo */
.scene-chips span { transition: background-color 200ms ease, color 200ms ease; }
.scene-caps .cap { transition: opacity 300ms ease-out, transform 450ms cubic-bezier(.23,1,.32,1); }
/* comparsa dei blocchi allo scorrimento più rapida e corta */
.rv { transform: translateY(16px); transition: opacity 600ms cubic-bezier(.23,1,.32,1), transform 700ms cubic-bezier(.23,1,.32,1); }
.rv.d1 { transition-delay: 60ms; } .rv.d2 { transition-delay: 120ms; }
/* bottone "Scarica" e avviso cookie: niente salti, niente rimbalzo; l'uscita è più rapida dell'entrata */
@media (max-width: 860px) { .dl-pill { transition: transform 300ms cubic-bezier(.32,.72,0,1), opacity 200ms ease-out, bottom 300ms cubic-bezier(.32,.72,0,1); } }
.ck { transition: opacity 180ms ease-out, transform 180ms ease-out; }
.ck.show { transition: opacity 300ms ease-out, transform 360ms cubic-bezier(.23,1,.32,1); }
/* animazione del logo in testata: solo alla prima pagina della visita */
.lk-seen .lockup-anim * { animation: none !important; }
/* scorrimento morbido verso le sezioni solo se non è attivo "Riduci movimento" */
html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* "Riduci movimento": nelle scene restano solo dissolvenze, niente spostamenti animati */
@media (prefers-reduced-motion: reduce) {
  .scene .scene-title, .scene .scene-intro, .scene .scene-chap, .scene .hero-pic, .scene .pic-head, .scene .pic-title, .scene-phone, .scene-phone .ss, .scene-caps .cap, .scene-sticky, .rv, .wl, .wl-card, .ck, .dl-pill { transition: opacity .2s ease !important; }
  .rv { transform: none; }
  @starting-style { .wl-card { transform: none; } }
}
/* IT · EN: la zona da toccare resta 44×44 ma visivamente le sigle restano vicine */
.hdr .lang a { margin: 0 -11px; }
.hdr .lang a:last-child { margin-right: -14px; }

/* v5.105 — lingue con parole lunghe (tedesco): i titoli delle pagine legali vanno a capo con il trattino invece di uscire dallo schermo */
.page h1, .page h2 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
p, li { overflow-wrap: break-word; }

/* v5.106 — selettore a 5 lingue: spaziatura regolare (zona da toccare 44px che si sovrappone ai puntini) */
.hdr .lang a, .hdr .lang a:last-child { min-width: 40px; margin: 0 -10px; }
.hdr .lang { margin-right: -10px; }

/* v5.107 — lingua: menu a tendina (in testata solo la lingua attiva; le altre in un riquadro di vetro bianco) */
.hdr .lang { margin-right: 0; position: relative; }
.lang-dd { position: relative; }
.lang-dd summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; min-width: 44px; min-height: 44px; justify-content: center; padding: 0 8px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.lang-dd summary::-webkit-details-marker { display: none; }
.lang-dd summary svg { width: 12px; height: 12px; transition: transform 200ms cubic-bezier(.23,1,.32,1); }
.lang-dd[open] summary svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .lang-dd summary:hover { background: rgba(64,46,41,.06); } }
.lang-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; padding: 6px; border-radius: 16px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 0 0 1px rgba(64,46,41,.08), 0 18px 40px -16px rgba(64,46,41,.35); z-index: 40; transform-origin: top right; }
.lang-dd[open] .lang-menu { animation: langIn 180ms cubic-bezier(.23,1,.32,1) both; }
@keyframes langIn { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
.hdr .lang .lang-menu a, .hdr .lang .lang-menu a:last-child { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px; margin: 0; padding: 0 12px; border-radius: 10px; font-size: 15px; color: var(--ink); opacity: 1; text-decoration: none; justify-content: flex-start; }
.lang-menu a b { width: 22px; font-size: 12px; font-weight: 700; color: #8E7F79; letter-spacing: .02em; }
.lang-menu a.on { background: rgba(235,103,109,.10); }
.lang-menu a.on b { color: #EB676D; }
@media (hover: hover) and (pointer: fine) { .lang-menu a:not(.on):hover { background: rgba(64,46,41,.06); } }
.lang-menu a:active { background: rgba(64,46,41,.10); }
@media (prefers-reduced-motion: reduce) { .lang-dd[open] .lang-menu { animation: none; } .lang-dd summary svg { transition: none; } }

/* v5.108 — fascia "Dillo a Siri." con lo screenshot vero di Siri nella cornice dell'iPhone */
.siri { background: #FFF3D8; padding: 130px 0; }
.siri-grid { max-width: 1120px; margin: 0 auto; padding: 0 max(22px, 4vw); display: grid; grid-template-columns: 1.1fr .9fr; gap: 72px; align-items: center; }
.siri-copy .kicker { color: #EB676D; }
.siri-copy .siri-h { margin: 0; font-size: clamp(44px, 5.6vw, 80px); line-height: 1; font-weight: 800; letter-spacing: -0.04em; color: #333336; }
.siri-copy .siri-h .hl { color: #EB676D; }
.siri-copy .sub { margin: 24px 0 0; max-width: 480px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: #57575C; text-align: left; }
.siri-copy .say { margin: 24px 0 0; max-width: 480px; padding: 16px 20px; border-radius: 18px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(64,46,41,.06); font-size: 17px; line-height: 1.45; color: #333336; }
.siri-copy .small { margin: 18px 0 0; font-size: 14px; color: #8E7F79; }
.siri-phone { justify-self: center; width: min(300px, 70vw); }
@media (max-width: 860px) {
  .siri { padding: 90px 0; }
  .siri-grid { grid-template-columns: 1fr; gap: 44px; text-align: center; }
  .siri-copy .sub { text-align: center; margin-left: auto; margin-right: auto; }
  .siri-copy .say { margin-left: auto; margin-right: auto; }
  .siri-phone { width: min(260px, 68vw); }
}

/* v5.109 — Condividi come racconto allo scorrimento: foto al mare + domanda → sale l'iPhone con il messaggio → la foto cambia e arriva «Trovate!» */
.shareS { position: relative; height: 340vh; background: #CFE3F5; }
.shareS-st { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.shareS-ph { position: absolute; inset: 0; transition: opacity 600ms cubic-bezier(.23,1,.32,1); }
.shareS-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; display: block; }
.shareS-ph.p2 { opacity: 0; }
.shareS[data-k="2"] .shareS-ph.p2 { opacity: 1; }
.shareS-txt { position: absolute; z-index: 2; left: max(6vw, calc((100% - 1240px) / 2)); top: calc(126px + 6vh); max-width: min(560px, 44vw); transition: opacity 400ms ease, transform 500ms cubic-bezier(.23,1,.32,1); }
.shareS-k { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 17px; font-weight: 700; color: #EB676D; }
.shareS-k svg { width: 26px; height: 26px; color: #EB676D; }
.shareS-txt h2 { margin: 0; font-size: clamp(44px, 5.4vw, 84px); line-height: 1; font-weight: 800; letter-spacing: -0.04em; color: #2C2C2E; text-wrap: balance; }
.shareS-txt h2 .hl { color: #EB676D; }
.shareS .msgs-phone { position: absolute; z-index: 3; left: max(6vw, calc((100% - 1240px) / 2)); bottom: -14vh; width: min(300px, 24vw); transform: translateY(110%); transition: transform 700ms cubic-bezier(.23,1,.32,1); }
.shareS[data-k="1"] .msgs-phone, .shareS[data-k="2"] .msgs-phone { transform: none; }
.shareS[data-k="1"] .shareS-txt, .shareS[data-k="2"] .shareS-txt { opacity: 0; transform: translateY(-16px); }
.shareS .msgs .msgs-body > * { opacity: 0; transform: translateY(10px); transition: opacity 350ms ease-out, transform 450ms cubic-bezier(.23,1,.32,1); }
.shareS[data-k="1"] .msgs .msgs-body > :nth-child(-n+4), .shareS[data-k="2"] .msgs .msgs-body > * { opacity: 1; transform: none; }
.shareS[data-k="1"] .msgs .msgs-body > :nth-child(2) { transition-delay: 350ms; }
.shareS[data-k="1"] .msgs .msgs-body > :nth-child(3) { transition-delay: 900ms; }
.shareS[data-k="1"] .msgs .msgs-body > :nth-child(4) { transition-delay: 1200ms; }
.shareS[data-k="2"] .msgs .msgs-body > :nth-child(5) { transition-delay: 450ms; }
.share-after { padding: 90px 0 110px; }
.share-after .sub { margin: 0 auto; max-width: 640px; }
.share-after .chips { justify-content: center; margin-top: 26px; }
.share-after .chips li { background: #FFF3D8; }
@media (max-width: 860px) {
  .shareS { height: 320vh; }
  .shareS-ph img { object-position: 74% 50%; }
  .shareS-txt { left: 22px; right: 22px; top: calc(97px + 22px); max-width: none; }
  .shareS-txt h2 { font-size: clamp(36px, 10vw, 52px); }
  .shareS .msgs-phone { left: 50%; width: min(250px, 66vw); bottom: -22vh; margin-left: calc(min(250px, 66vw) / -2); }
  .share-after { padding: 70px 0 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .shareS-ph, .shareS-txt, .shareS .msgs-phone, .shareS .msgs .msgs-body > * { transition: opacity .2s ease !important; }
  .shareS .msgs-phone { transform: none; opacity: 0; } .shareS[data-k="1"] .msgs-phone, .shareS[data-k="2"] .msgs-phone { opacity: 1; }
}
/* ritocchi: titolo sul cielo, telefono tutto visibile */
@media (min-width: 861px) {
  .shareS-txt { left: 27vw; top: calc(126px + 4vh); max-width: 40vw; }
  .shareS-txt h2 { text-shadow: 0 0 28px rgba(255,255,255,.55); }
  .shareS .msgs-phone { left: max(5vw, calc((100% - 1240px) / 2)); bottom: 4vh; width: min(300px, calc((100svh - 190px) * .49)); }
}
@media (max-width: 860px) {
  .shareS-txt h2 { text-shadow: 0 0 22px rgba(255,255,255,.6); }
  .shareS .msgs-phone { bottom: 3vh; width: min(240px, 62vw, calc((100svh - 200px) * .49)); margin-left: calc(min(240px, 62vw, calc((100svh - 200px) * .49)) / -2); }
}
/* titolo più compatto sul cielo; su smartphone la foto sta in basso sotto un cielo continuo, il telefono esce e resta la risposta in un fumetto */
.shareS-reply { position: absolute; z-index: 4; margin: 0; padding: 10px 16px; border-radius: 20px 20px 20px 6px; background: #E9E9EB; color: #1C1C1E; font: 600 17px/1.3 -apple-system, "SF Pro Text", sans-serif; box-shadow: 0 10px 24px -10px rgba(0,0,0,.35); opacity: 0; transform: translateY(10px) scale(.96); transform-origin: bottom left; transition: opacity 300ms ease-out, transform 400ms cubic-bezier(.23,1,.32,1); pointer-events: none; display: none; }
@media (min-width: 861px) {
  .shareS-txt { left: 17vw; max-width: 34vw; }
  .shareS-txt h2 { font-size: clamp(40px, 4.4vw, 66px); }
}
@media (max-width: 860px) {
  .shareS-ph { background: linear-gradient(180deg, #BCDBF3 0%, #C9E3F3 60%, #D4E8F3 100%); }
  .shareS-ph img { position: absolute; left: 0; right: 0; bottom: 0; height: 70svh; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px); mask-image: linear-gradient(180deg, transparent 0, #000 90px); }
  .shareS-txt h2 { font-size: clamp(34px, 9.4vw, 46px); }
  .shareS[data-k="2"] .msgs-phone { transform: translateY(115%); }
  .shareS-reply { display: block; left: 22px; top: calc(97px + 9svh); }
  .shareS[data-k="2"] .shareS-reply { opacity: 1; transform: none; transition-delay: 350ms; }
}
@media (prefers-reduced-motion: reduce) { .shareS-reply { transition: opacity .2s ease !important; transform: none !important; } }
/* smartphone: telefono più piccolo, in basso a sinistra e inclinato, così la ragazza resta visibile */
@media (max-width: 860px) {
  .shareS .msgs-phone { left: 14px; margin-left: 0; width: min(196px, 50vw); bottom: -9svh; transform: translateY(115%) rotate(-6deg); transform-origin: bottom left; }
  .shareS[data-k="1"] .msgs-phone { transform: rotate(-6deg); }
  .shareS-ph img { object-position: 64% 50%; }
}
@media (max-width: 860px) { .shareS .msgs-phone { bottom: -2svh; width: min(206px, 53vw); } }
/* Mac: la risposta «Trovate!» compare come fumetto accanto a lei; telefono leggermente inclinato come su smartphone */
@media (min-width: 861px) {
  .shareS-reply { display: block; left: 38vw; top: calc(126px + 12vh); font-size: 20px; padding: 12px 20px; }
  .shareS[data-k="2"] .shareS-reply { opacity: 1; transform: none; transition-delay: 350ms; }
  .shareS .msgs-phone { transform: translateY(110%) rotate(-4deg); transform-origin: bottom left; }
  .shareS[data-k="1"] .msgs-phone, .shareS[data-k="2"] .msgs-phone { transform: rotate(-4deg); }
}

/* v5.110 — fumetto «Trovate!» con lo stesso stile dei fumetti della ragazza sul corallo (bianco, grassetto, codina) */
.shareS-reply { padding: 14px 22px 15px; border-radius: 26px; background: #FFFFFF; color: #333336; font: 700 clamp(19px, 1.9vw, 30px)/1.18 -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; letter-spacing: -0.02em; box-shadow: 0 18px 40px -18px rgba(64,46,41,.45); transform: translateY(18px) scale(.92); transform-origin: right bottom; }
.shareS-reply::after { content: ""; position: absolute; right: 26px; bottom: -9px; width: 18px; height: 18px; background: #FFFFFF; border-radius: 4px; transform: rotate(45deg); }
@media (min-width: 861px) { .shareS-reply { font-size: clamp(19px, 1.9vw, 30px); padding: 14px 22px 15px; left: 34vw; top: calc(126px + 10vh); } }
@media (max-width: 860px) { .shareS-reply { padding: 10px 14px 11px; border-radius: 18px; font-size: 15px; line-height: 1.2; } .shareS-reply::after { right: 16px; bottom: -6px; width: 12px; height: 12px; } }
@media (max-width: 860px) { .shareS-reply { top: calc(97px + 17svh); left: 26px; } }

/* v5.111 — Messaggi: è il telefono di chi chiede. La domanda (e «Trovate!») in azzurro a destra, la risposta con OkiDocky e la mappa in grigio a sinistra */
.mapcard.in { align-self: flex-start; }
.b.in u { text-decoration: underline; word-break: break-all; color: #0A84FF; }

/* v5.112 — Condividi su Mac: titolo più a destra e più in alto, sul cielo e lontano dai fiori */
@media (min-width: 861px) {
  .shareS-txt { left: 24vw; top: calc(100px + 2vh); max-width: 36vw; }
  .shareS-txt h2 { font-size: clamp(38px, 4.1vw, 62px); }
  .shareS-k { margin-bottom: 12px; }
}
@media (min-width: 861px) and (max-aspect-ratio: 4/3) { .shareS-txt { left: 17vw; } }

/* v5.113 — Condividi su schermi bassi (iPhone in orizzontale): foto sempre a tutta altezza, telefono leggibile che esce dal bordo in basso, titolo proporzionato all'altezza */
.shareS-st { height: 100vh; }
@media (min-width: 861px) and (max-height: 600px) {
  .shareS { height: 300vh; }
  .shareS-txt { top: calc(84px + 3vh); }
  .shareS-txt h2 { font-size: min(4.1vw, 10.5vh); }
  .shareS-k { margin-bottom: 6px; font-size: 15px; }
  .shareS .msgs-phone { width: 230px; bottom: auto; top: calc(84px + 2vh); }
  .shareS-reply { top: calc(84px + 8vh); font-size: 20px; }
}
/* la scena segue l'altezza reale dello schermo (la barra di Safari si allarga e si restringe): niente fascia vuota sotto la foto */
.shareS-st { height: 100vh; height: 100dvh; }

/* v5.114 — smartphone in verticale: il telefono sale nel cielo (in alto a sinistra), così si legge tutta la risposta e non finisce sotto il bottone Scarica */
@media (max-width: 860px) {
  .shareS .msgs-phone { top: calc(97px + 3svh); bottom: auto; width: min(212px, 55vw, calc((100svh - 230px) * .49)); transform: translateY(-140%) rotate(-5deg); transform-origin: top left; }
  .shareS[data-k="1"] .msgs-phone { transform: rotate(-5deg); }
  .shareS[data-k="2"] .msgs-phone { transform: translateY(-140%) rotate(-5deg); }
}

/* v5.115 — footer tutto in un solo grigio (C10 M0 Y0 K50 ≈ #738080), compreso il nome OkiDocky e il logo LikeHome (14/10/2026) */
:root { --foot-grey: #738080; }
.footer, .footer p, .footer h4, .footer a, .footer span, .footer b, .footer .cols a, .footer .maker span,
.footer .wm .oki, .footer .wm .docky, .footer .wm .plus, .footer .likehome { color: var(--foot-grey) !important; }

/* v5.116 — footer: separatore dopo la mappa del sito, poi logo LikeHome (senza "Un'app di"), poi il testo legale senza altra riga (14/10/2026) */
.footer .maker { border-top: 1px solid var(--line); padding-top: 22px; }
.footer .bottom { border-top: 0; padding-top: 4px; }

/* v5.117 — logo LikeHome nel footer più piccolo del 30% (64 → 45 px) e più vicino al testo legale (14/10/2026) */
.footer .likehome { height: 45px; }
.footer .maker { padding-bottom: 10px; }

/* v5.118 — logo LikeHome cliccabile (likehomemanagement.it) e link della mappa del sito più ravvicinati (14/10/2026) */
.footer .lh-link { display: inline-flex; color: inherit; transition: opacity .2s ease; }
.footer .lh-link:hover { opacity: .7; }
.footer .cols a { margin-bottom: 3px; }
.footer h4 { margin-bottom: 6px; }

/* v5.119 — footer: "Italia" (lingua) di seguito al testo legale, logo -20% (45 → 36 px), meno spazio sotto il logo (14/10/2026) */
.footer .bottom { display: block; padding-top: 0; }
.footer .bottom > span + span::before { content: " "; }
.footer .likehome { height: 36px; }
.footer .maker { padding-bottom: 4px; }

/* v5.120 — spazio tra logo LikeHome e testo legale +50% (4 → 6 px) (14/10/2026) */
.footer .maker { padding-bottom: 6px; }

/* v5.121 — spazio tra logo LikeHome e testo legale raddoppiato (6 → 12 px) (14/10/2026) */
.footer .maker { padding-bottom: 12px; }

/* v5.122 — "In famiglia": riga in evidenza nella card prezzi di OkiDocky+ (15/10/2026) */
.compare .col-head .price .fam { display: block; margin-top: 10px; font-weight: 600; color: var(--coral-text); }
/* colonne affiancate: le due testate hanno la stessa altezza (con la riga "famiglia"), così le righe restano allineate */
@media (min-width: 735px) {
  .compare .col-head .price { min-height: 85px; }
}

/* v5.123 — fascia OkiDocky+: la nota (iCloud + In famiglia) con lo stesso stile del paragrafo sopra (16/10/2026) */
.p6 .p6-note { font-size: clamp(18px, 1.6vw, 22px); color: rgba(255,243,216,.88); max-width: 640px; line-height: inherit; margin-top: 14px; }

/* v5.124 — fascia OkiDocky+: iPhone intero, non più tagliato in basso (16/10/2026) */
@media (min-width: 861px) {
  .p6-phone { height: auto; overflow: visible; padding-bottom: 60px; }
}