/* Insieme website. Tokens mirror app/lib/tokens.ts (light and dark); no third-party requests. */
@font-face { font-family: 'Figtree'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/figtree-400.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/figtree-600.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/figtree-700.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/bricolage-grotesque-700.woff2') format('woff2'); }

:root {
  color-scheme: light dark;
  --bg: #F3F5F4; --surface: #FFFFFF; --text: #14211D; --muted: #5A6B65; --text-soft: #3D4C47;
  --border: #D5DDD9; --divider: #E5EBE8; --accent: #1E6B58; --on-accent: #FFFFFF;
  --accent-soft: #DCEDE7; --on-accent-soft: #14503F; --chip: #E9EEEC; --on-chip: #45524D;
  --premium: #5B34A3; --premium-bg: #EEE6FB;
  --school: #1F4FA3; --school-bg: #E3ECFB; --home: #8A4B0A; --home-bg: #FBEEDB; --bills: #5B34A3; --bills-bg: #EEE6FB;
  --health: #146354; --health-bg: #DDF1EC; --elder: #9D2550; --elder-bg: #FBE4EA; --other: #45524D; --other-bg: #E9ECEB;
  --shadow: 0 1px 2px rgba(20, 33, 29, .06), 0 8px 24px rgba(20, 33, 29, .06);
  --radius-card: 18px; --radius-button: 14px;
  --wrap: 1160px; --gutter: clamp(16px, 4vw, 32px);
  --font-head: 'Bricolage Grotesque', Figtree, system-ui, sans-serif;
  --font-body: Figtree, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101815; --surface: #18231F; --text: #EAF0ED; --muted: #A3B3AD; --text-soft: #C3D0CB;
    --border: #2A3833; --divider: #24302C; --accent: #5FC4A6; --on-accent: #0E1B17;
    --accent-soft: #1F3A32; --on-accent-soft: #9ADBC6; --chip: #24302C; --on-chip: #C3D0CB;
    --premium: #C9B3F2; --premium-bg: #2D2347;
    --school: #A9C4F5; --school-bg: #1C2B47; --home: #F0C27A; --home-bg: #3A2A12; --bills: #C9B3F2; --bills-bg: #2D2347;
    --health: #8FD9C5; --health-bg: #14332D; --elder: #F5A9BF; --elder-bg: #3E1C28; --other: #B7C4BE; --other-bg: #26302C;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
[tabindex="-1"]:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: clamp(16px, 1rem + .15vw, 18px); line-height: 1.6; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(36px, 5.2vw + 8px, 64px); }
h2 { font-size: clamp(28px, 2.6vw + 12px, 44px); }
h3 { font-size: clamp(18px, .4vw + 16px, 21px); font-family: var(--font-body); letter-spacing: 0; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(56px, 8vw, 112px) 0; }
.section--alt { background: var(--surface); border-block: 1px solid var(--divider); }
.section-head { max-width: 720px; margin: 0 auto clamp(32px, 4vw, 56px); text-align: center; display: grid; gap: 14px; }
.section-head p { color: var(--text-soft); font-size: 1.08em; }
.eyebrow { justify-self: center; align-self: start; background: var(--accent-soft); color: var(--on-accent-soft); font-weight: 600; font-size: 14px; padding: 6px 12px; border-radius: 999px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--surface); padding: 12px 16px; }

/* Buttons: one primary per viewport, secondary is tonal, links are text. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: var(--radius-button); font: 600 17px/1.2 var(--font-body); text-decoration: none; border: 0; cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.btn--tonal { background: var(--accent-soft); color: var(--on-accent-soft); }
.btn--small { min-height: 44px; padding: 10px 16px; font-size: 16px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font: 700 clamp(26px, 1.2vw + 20px, 32px)/1 var(--font-head); letter-spacing: -0.015em; }
.brand-mark { flex: none; width: clamp(36px, 1.4vw + 30px, 44px); height: auto; }
.nav { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); }
.nav a:not(.btn) { color: var(--text-soft); text-decoration: none; font-weight: 600; padding: 10px 2px; }
.nav a:not(.btn):hover { color: var(--text); }
@media (max-width: 1024px) { .nav a:not(.btn) { display: none; } }
.nav a, .btn { white-space: nowrap; }

/* Hero */
.hero { padding: clamp(32px, 6vw, 88px) 0 clamp(56px, 8vw, 104px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy { display: grid; gap: 22px; }
.hero-copy .eyebrow { justify-self: start; }
.hero-copy .lead { color: var(--text-soft); font-size: 1.15em; max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { color: var(--muted); font-size: 15px; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } .hero-visual { max-width: 420px; margin: 0 auto; width: 100%; } }

/* Phone illustration (pure HTML/CSS, the demo family Casa Bianchi) */
.phone { position: relative; margin: 0 auto; width: min(100%, 360px); display: grid !important;  background: var(--bg); border: 10px solid #0E1512; border-radius: 46px; box-shadow: 0 30px 60px rgba(20, 33, 29, .22); overflow: hidden; padding: 44px 14px 22px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.35; }
.phone::before { content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 92px; height: 24px; background: #0E1512; border-radius: 14px; }
.bubble { align-self: flex-start; max-width: 88%; background: var(--surface); border: 1px solid var(--divider); border-radius: 16px 16px 16px 4px; padding: 10px 12px; box-shadow: var(--shadow); }
.bubble small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 2px; }
.share { align-self: center; background: var(--accent-soft); color: var(--on-accent-soft); font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: 999px; }
.proposal { background: var(--surface); border: 1px solid var(--divider); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.proposal-head { padding: 9px 12px; font-size: 12px; font-weight: 600; color: var(--on-accent-soft); background: var(--accent-soft); }
.row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--divider); }
.row:first-of-type { border-top: 0; }
.row .tile { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.row .body { flex: 1; min-width: 0; }
.row .title { font-weight: 600; }
.row .meta { color: var(--muted); font-size: 12px; }
.avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; }
.notif { margin-top: 4px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--divider); border-radius: 16px; padding: 10px 12px; box-shadow: var(--shadow); }
.notif small { color: var(--muted); font-size: 12px; }
.notif strong { display: block; font-size: 13px; }

/* Grids and cards */
.grid { display: grid; gap: clamp(14px, 2vw, 22px); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid--3, .grid--2, .grid--4 { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--radius-card); padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 10px; align-content: start; }
.card--compact { padding: clamp(16px, 1.8vw, 20px); gap: 8px; }
.story-head { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.story-head strong { display: block; font-size: 15px; line-height: 1.2; }
.story-head small { color: var(--muted); font-size: 13px; }
.story-quote { font-size: 15px; line-height: 1.45; color: var(--text-soft); }
.hero-privacy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 14px auto 0; text-align: center; white-space: nowrap; max-width: 100%; }
.hero-privacy svg { color: var(--accent); flex: none; }
@media (max-width: 380px) { .hero-privacy { font-size: 12px; gap: 6px; } }
.section--alt .card { background: var(--bg); }
.card p { color: var(--text-soft); }
.tag { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }

/* Steps */
.steps { counter-reset: step; }
.card.step { position: relative; padding-top: calc(clamp(20px, 2.4vw, 28px) + 56px); }
.step::before { counter-increment: step; content: counter(step); position: absolute; top: clamp(20px, 2.4vw, 28px); left: clamp(20px, 2.4vw, 28px); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 700 18px/1 var(--font-head); }

/* Premium */
.premium-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--premium-bg); color: var(--premium); font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 999px; justify-self: start; }
.card--premium { border-color: color-mix(in srgb, var(--premium) 28%, var(--divider)); }

/* Plans */
.billing { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--chip); margin: 0 auto 28px; }
.billing button { min-height: 44px; padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 16px/1 var(--font-body); cursor: pointer; }
.billing button[aria-pressed='true'] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.plans { max-width: 900px; margin: 0 auto; align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 16px; height: 100%; }
.plan .price { font: 700 clamp(34px, 2vw + 24px, 44px)/1 var(--font-head); }
.plan .price-sub { color: var(--muted); }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex-grow: 1; }
.plan li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.plan li::before { content: ''; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231E6B58' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.plan--featured { border: 2px solid var(--accent); box-shadow: var(--shadow); position: relative; }
.plan--featured .ribbon { position: absolute; top: -14px; left: 24px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: 999px; }
.plan .btn { margin-top: auto; }
.fine { text-align: center; color: var(--muted); font-size: 15px; margin-top: 20px; }

/* Trust */
.trust { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; padding: 0; list-style: none; }
.trust li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; font-size: 1.05em; }
.trust li svg { color: var(--accent); margin-top: 2px; }

/* FAQ */
.faq { max-width: 780px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--divider); border-radius: 14px; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; font-weight: 600; position: relative; min-height: 48px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 20px 18px; color: var(--text-soft); }

/* Final CTA */
.final { text-align: center; display: grid; gap: 18px; justify-items: center; max-width: 680px; margin: 0 auto; }
.final p { color: var(--text-soft); }

/* Footer */
.site-footer { padding: 40px 0 56px; border-top: 1px solid var(--divider); color: var(--muted); font-size: 15px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; align-items: center; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer a { color: var(--text-soft); text-decoration: none; padding: 10px 0; }
.site-footer a:hover { text-decoration: underline; }

/* Prose pages (privacy, termini, supporto) */
.prose { max-width: 760px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--gutter) 80px; }
.prose h1 { font-size: clamp(30px, 3vw + 14px, 44px); margin-bottom: 24px; }
.prose h2 { font-size: clamp(22px, 1vw + 16px, 28px); margin: 40px 0 12px; }
.prose h3 { margin: 28px 0 8px; }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; color: var(--text-soft); }
.prose li { margin: 4px 0; }
.prose .draft { background: var(--home-bg); color: var(--home); border-radius: 12px; padding: 14px 16px; font-weight: 600; }

/* Motion: short, eased, explains something; everything below is off with prefers-reduced-motion. */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); }
.site-header { transition: border-color .25s ease, box-shadow .25s ease; }
.site-header.is-scrolled { border-bottom-color: var(--divider); box-shadow: 0 6px 24px rgba(20, 33, 29, .06); }

/* Scroll reveal: only when JS is on (no-JS shows everything). */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--delay, 0s); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Hero: the phone tells the story in sequence, then rests. */
@keyframes pop { to { opacity: 1; transform: none; } }
@keyframes tap { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }
.hero-visual { animation: float 7s var(--ease-in-out) 4.4s infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Cards lift on hover (pointer devices only). */
@media (hover: hover) {
}

/* Price change crossfade. */
.price, .price-sub { transition: opacity .18s ease; }
.is-swapping .price, .is-swapping .price-sub { opacity: 0; }

/* FAQ opens smoothly where the browser supports it. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .3s var(--ease-out), content-visibility .3s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,   .hero-visual { animation: none; }
}

/* Hero phone: the closed loop (done by the other adult, one-tap thanks). */
.today .proposal-head { background: var(--chip); color: var(--on-chip); }
.tick { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.title.done { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.thanks { flex: none; font-size: 12px; font-weight: 700; color: var(--on-accent-soft); background: var(--accent-soft); padding: 6px 10px; border-radius: 999px; }
@keyframes check { from { transform: scale(.6); } 60% { transform: scale(1.15); } to { transform: scale(1); } }
.section-head .premium-badge, .section-head .eyebrow { justify-self: center; }

@media (prefers-color-scheme: dark) {
  .phone { border-color: #2C3A35; box-shadow: 0 0 0 1px #3A4A44, 0 24px 48px rgba(0, 0, 0, .45); }
  .phone::before { background: #2C3A35; }
}
/* Language switch */
.lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--chip); }
.nav .lang a { min-height: 44px; min-width: 44px; display: inline-grid; place-items: center; padding: 0 10px; border-radius: 999px; color: var(--muted) !important; font-weight: 700; font-size: 14px; text-decoration: none; }
.nav .lang a[aria-current="true"] { background: var(--surface); color: var(--text) !important; box-shadow: var(--shadow); }
@media (max-width: 1024px) { .nav .lang a { display: inline-grid; } }

/* Compact language link in the header (one small code, 44 px target); the full switch lives in the footer. */
.nav .lang-link { min-width: 44px; min-height: 44px; display: inline-grid !important; place-items: center; padding: 0 6px !important; color: var(--muted) !important; font-weight: 700; font-size: 14px; letter-spacing: .04em; border-radius: 10px; }
.nav .lang-link:hover { color: var(--text) !important; background: var(--chip); }
.site-footer .lang { order: 3; }
.site-footer .lang a { min-height: 44px; display: inline-grid; place-items: center; padding: 0 12px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: 14px; text-decoration: none; }
.site-footer .lang a[aria-current="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* Intro: logo centred, the two rings slide together (insieme = together), the word appears, the page lifts in. */
.intro { display: none; }
.show-intro .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 50; background: var(--bg); cursor: pointer; animation: intro-out .45s var(--ease-out) 1.25s forwards; }
.show-intro.intro-done .intro { animation: intro-out .3s var(--ease-out) forwards; }
@keyframes intro-out { to { opacity: 0; transform: translateY(-12px); visibility: hidden; } }
.intro-mark { display: grid; justify-items: center; gap: 14px; }
.intro .ring { fill: none; stroke: var(--accent); stroke-width: 6; }
.intro .ring-b { opacity: .6; }
.show-intro .intro .ring-a { animation: ring-a .7s var(--ease-out) both; }
.show-intro .intro .ring-b { animation: ring-b .7s var(--ease-out) both; }
@keyframes ring-a { from { transform: translateX(-26px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ring-b { from { transform: translateX(26px); opacity: 0; } to { transform: none; opacity: .6; } }
.intro-word { font: 700 clamp(30px, 2vw + 22px, 40px)/1 var(--font-head); letter-spacing: -0.015em; color: var(--text); }
.show-intro .intro-word { animation: word .5s var(--ease-out) .45s both; }
@keyframes word { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* The page underneath settles in as the intro lifts. */
.show-intro .hero-copy { animation: settle .6s var(--ease-out) 1.3s both; }
.show-intro.intro-done .hero-copy { animation-delay: .1s; }
@keyframes settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .show-intro .intro { display: none; } }
.plan-name { display: block; font: 600 14px/1.3 var(--font-body); color: var(--muted); margin-top: 4px; }
.intro svg { width: clamp(120px, 6vw + 96px, 190px); height: auto; }
.intro-word { font-size: clamp(32px, 2.4vw + 22px, 52px); }

/* Hero phone, two scenes: 1) the WhatsApp chat and the system share sheet, 2) the Insieme app. Insieme is never
   shown inside WhatsApp: the user shares out of the chat into the app. */
.phone { padding: 40px 0 0 !important; gap: 0 !important; }
.scene { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; padding: 8px 14px 22px; min-width: 0; }
.scene-chat { background: color-mix(in srgb, var(--chip) 70%, var(--bg)); position: relative; overflow: hidden; }
.chat-bar { display: flex; align-items: center; gap: 10px; padding: 4px 2px 10px; border-bottom: 1px solid var(--divider); margin: 0 -14px 4px; padding-inline: 14px; }
.chat-bar strong { display: block; font-size: 14px; }
.chat-bar small { color: var(--muted); font-size: 12px; }
.chat-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--school-bg); color: var(--school); font-weight: 700; font-size: 12px; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface); border-radius: 22px 22px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .12); padding: 8px 14px 22px; }
.sheet-handle { width: 36px; height: 5px; border-radius: 3px; background: var(--border); margin: 0 auto 10px; }
.sheet-title { font-weight: 600; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.sheet-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; font-size: 11px; color: var(--text-soft); }
.app-tile { display: grid; justify-items: center; gap: 6px; }
.app-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; }
.app-icon--insieme { background: #1E6B58; box-shadow: 0 0 0 3px var(--accent-soft); }
.app-tile--insieme { font-weight: 700; color: var(--text); }
.app-bar { display: flex; align-items: center; gap: 8px; color: var(--accent); padding: 2px 2px 8px; }
.app-bar strong { color: var(--text); font: 700 16px/1 var(--font-head); }
.scene-app { background: var(--bg); }

/* Default (no JS or reduced motion): the Insieme scene, both steps listed. */
.scene-chat { visibility: hidden; }
.story-steps { list-style: none; margin: 18px auto 0; padding: 0; display: grid; gap: 8px; max-width: 360px; font-size: 14px; color: var(--muted); }
.story-steps li { display: flex; align-items: center; gap: 10px; }
.story-steps b { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--chip); color: var(--on-chip); }

/* Played timeline (~5.5 s), only with JS and motion allowed. */
.js .phone .scene-chat { visibility: visible; }
.js .phone .scene-chat .bubble { opacity: 0; transform: translateY(8px); }
.js .phone .sheet { transform: translateY(105%); }
.js .phone .scene-app { opacity: 0; }
.js .phone .scene-app > * { opacity: 0; transform: translateY(10px) scale(.98); }
.js .phone.is-playing .scene-chat .bubble { animation: pop .5s var(--ease-out) .2s forwards; }
.js .phone.is-playing .sheet { animation: sheet-up .55s var(--ease-out) 1.1s forwards; }
.js .phone.is-playing .app-icon--insieme { animation: tap-icon .6s var(--ease-in-out) 1.9s 1; }
.js .phone.is-playing .scene-chat { animation: scene-out .35s var(--ease-out) 2.6s forwards; }
.js .phone.is-playing .scene-app { animation: scene-in .35s var(--ease-out) 2.65s forwards; }
.js .phone.is-playing .scene-app > :nth-child(1) { animation: pop .4s var(--ease-out) 2.75s forwards; }
.js .phone.is-playing .scene-app > :nth-child(2) { animation: pop .5s var(--ease-out) 3.0s forwards; }
.js .phone.is-playing .scene-app > :nth-child(3) { animation: pop .5s var(--ease-out) 3.9s forwards; }
.js .phone.is-playing .scene-app > :nth-child(4) { animation: pop .5s var(--ease-out) 4.7s forwards; }
.js .phone.is-playing .tick { animation: check .5s var(--ease-out) 4.2s both; }
@keyframes sheet-up { to { transform: none; } }
@keyframes tap-icon { 0%, 100% { transform: scale(1); } 45% { transform: scale(.88); } }
@keyframes scene-out { to { opacity: 0; visibility: hidden; } }
@keyframes scene-in { to { opacity: 1; } }
.js .story-steps li { transition: color .3s ease; }
.js .story-steps li b { transition: background-color .3s ease, color .3s ease; }
.js .phone.is-playing + .story-steps .step-chat { animation: step-on 2.6s steps(1) forwards; }
.js .phone.is-playing + .story-steps .step-app { animation: step-on-late .1s steps(1) 2.65s forwards; }
@keyframes step-on { 0%, 99% { color: var(--text); } 100% { color: var(--muted); } }
@keyframes step-on-late { to { color: var(--text); } }
.js .phone.is-playing + .story-steps .step-chat b { animation: dot-on 2.6s steps(1) forwards; }
.js .phone.is-playing + .story-steps .step-app b { animation: dot-on-late .1s steps(1) 2.65s forwards; }
@keyframes dot-on { 0%, 99% { background: var(--accent); color: var(--on-accent); } 100% { background: var(--chip); color: var(--on-chip); } }
@keyframes dot-on-late { to { background: var(--accent); color: var(--on-accent); } }
@media (prefers-reduced-motion: reduce) {
  .js .phone .scene-chat { visibility: hidden; }
  .js .phone .scene-app, .js .phone .scene-app > * { opacity: 1; transform: none; }
}
/* Generic "more is coming" line under the Premium grid: no feature names, no dates (founder, 2026-10-13). */
p.soon { max-width: 760px; margin: 40px auto 0; text-align: center; color: var(--text-soft); text-wrap: balance; }

/* A real phone silhouette: 9 : 19.5, status bar, island, home bar, side buttons. */
.phone { width: min(100%, 320px) !important; aspect-ratio: 9 / 19.5; border-width: 11px !important; border-radius: 52px !important; padding: 0 !important; grid-template-rows: auto 1fr auto; overflow: visible !important; background: var(--bg); }
.phone::before { top: 9px !important; width: 96px !important; height: 27px !important; border-radius: 16px !important; z-index: 3; }
.phone::after { content: ''; position: absolute; right: -15px; top: 130px; width: 4px; height: 74px; border-radius: 0 3px 3px 0; background: #0E1512; box-shadow: -324px -40px 0 0 #0E1512, -324px 50px 0 0 #0E1512; }
.phone > .scene { grid-row: 2; grid-column: 1; border-radius: 0; overflow: hidden; }
.phone .scene-chat { border-radius: 0 0 40px 40px; }
.status-bar { grid-row: 1; grid-column: 1; display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 6px 26px 0; font: 600 14px/1 var(--font-body); color: var(--text); fill: currentColor; position: relative; z-index: 2; }
.status-icons { display: inline-flex; gap: 6px; align-items: center; }
.home-bar { grid-row: 3; grid-column: 1; justify-self: center; width: 120px; height: 5px; border-radius: 3px; background: var(--text); opacity: .85; margin: 6px 0 9px; position: relative; z-index: 2; }
.phone .scene-app { padding-top: 4px; }
.phone .notif { margin-top: auto !important; }
@media (prefers-color-scheme: dark) { .phone::after { background: #2C3A35; box-shadow: -324px -40px 0 0 #2C3A35, -324px 50px 0 0 #2C3A35; } }
@media (max-width: 400px) { .phone { width: min(100%, 300px) !important; } .phone::after { box-shadow: -304px -40px 0 0 #0E1512, -304px 50px 0 0 #0E1512; } }

/* Screen fills the whole frame (under status bar and home bar), clipped by the rounded corners. */
.phone { overflow: hidden !important; grid-template-rows: 1fr !important; }
.phone::after { content: none !important; }
.phone > .scene { grid-row: 1 !important; padding-top: 50px !important; padding-bottom: 30px !important; }
.phone .scene-chat { border-radius: 0 !important; }
.phone .sheet { padding-bottom: 34px; }
.status-bar { grid-row: 1 !important; align-self: start; }
.home-bar { grid-row: 1 !important; align-self: end; }
/* The app scene ends with the real floating tab bar. */
.tabbar { margin-top: auto; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; background: var(--surface); border: 1px solid var(--divider); border-radius: 999px; padding: 6px 6px; box-shadow: var(--shadow); font-size: 10px; color: var(--muted); }
.tab { display: grid; justify-items: center; gap: 2px; padding: 4px 0; border-radius: 999px; }
.tab--on { color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.tab--add { width: 40px; height: 40px; justify-self: center; place-items: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
/* Notification banner drops in from the top, like a real one. */
.phone .notif { grid-row: 1; align-self: start; position: relative; z-index: 4; margin: 46px 10px 0 !important; display: flex; gap: 10px; align-items: center; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: color-mix(in srgb, var(--surface) 88%, transparent); }
.notif-icon { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #1E6B58; }
.js .phone .notif { opacity: 0; transform: translateY(-120%); }
.js .phone.is-playing .notif { animation: drop .55s var(--ease-out) 4.9s forwards; }
@keyframes drop { to { opacity: 1; transform: none; } }
.js .phone.is-playing .scene-app > :nth-child(4) { animation: pop .5s var(--ease-out) 4.4s forwards; }
@media (prefers-reduced-motion: reduce) { .js .phone .notif { opacity: 1; transform: none; } }
/* Every layer of the phone (status bar, scenes, notification, home bar) stacks in one cell. */
.phone { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; }
.phone > * { grid-column: 1 !important; grid-row: 1 !important; min-width: 0; }
.status-bar { gap: 8px; }
/* The banner drops in, stays ~2.6 s, then slides away like a real one; the app screen ends clean. */
.js .phone.is-playing .notif { animation: drop-away 3.4s var(--ease-out) 4.9s forwards !important; }
@keyframes drop-away { 0% { opacity: 0; transform: translateY(-120%); } 12%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-120%); } }
@media (prefers-reduced-motion: reduce) { .js .phone .notif, .phone .notif { display: none; } }
.phone .notif { display: flex; }
html:not(.js) .phone .notif { display: none; }

/* Slim header on scroll: shorter bar, smaller logo and links, compact button; smooth both ways. */
.site-header .wrap, .brand, .brand-mark, .nav a:not(.btn), .nav .btn { transition: min-height .3s var(--ease-out), font-size .3s var(--ease-out), width .3s var(--ease-out), padding .3s var(--ease-out), gap .3s var(--ease-out); }
.site-header.is-slim .wrap { min-height: 56px; }
.site-header.is-slim .brand { font-size: 21px; gap: 9px; }
.site-header.is-slim .brand-mark { width: 30px; }
.site-header.is-slim .nav a:not(.btn) { font-size: 15px; }
.site-header.is-slim .nav .btn { min-height: 44px; padding: 8px 14px; font-size: 15px; }
/* Menu icon button (phones and small tablets) and its panel. */
.menu-btn { display: none; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 12px; background: var(--chip); color: var(--text); cursor: pointer; }
.menu-btn svg path { transition: transform .25s var(--ease-out), opacity .2s ease; transform-origin: 12px 12px; }
.menu-open .menu-btn .m1 { transform: translateY(5px) rotate(45deg); }
.menu-open .menu-btn .m2 { opacity: 0; }
.menu-open .menu-btn .m3 { transform: translateY(-5px) rotate(-45deg); }
.menu-panel { display: grid; gap: 2px; padding: 8px var(--gutter) 16px; border-top: 1px solid var(--divider); background: var(--bg); }
.menu-panel[hidden] { display: none; }
.menu-panel a { min-height: 48px; display: flex; align-items: center; color: var(--text); text-decoration: none; font-weight: 600; font-size: 18px; border-radius: 10px; padding: 0 8px; }
.menu-panel a:hover { background: var(--chip); }
.js .menu-panel:not([hidden]) { animation: panel-in .25s var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1024px) { .js .menu-btn { display: inline-grid; } .site-header.is-slim .menu-btn { width: 44px; height: 44px; } }
@media (min-width: 1025px) { .menu-panel { display: none !important; } }
.site-header { display: block !important; } .site-header .wrap { width: 100%; }
/* 44 px targets everywhere (issue #111): the logo link, short nav and footer links ("FAQ", "Home"). */
.brand { min-height: 44px; }
.site-footer nav a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 1025px) { .nav a:not(.btn) { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } }
/* Narrow phones (320-360 px): logo, CTA and menu button still fit on one line, no horizontal scroll. */
@media (max-width: 360px) {
  .brand { font-size: 21px; gap: 6px; }
  .brand-mark { width: 28px; }
  .nav { gap: 6px; }
  .nav .btn--small { padding-inline: 10px; font-size: 14px; }
}

/* Use-case pages and guides (#445): the landing's components; only this layout is new. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.crumbs ol { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.crumbs li { display: inline; }
.crumbs li + li::before { content: '›'; margin: 0 8px; color: var(--muted); }
.crumbs a { color: var(--text-soft); display: inline-block; padding: 12px 0; }
.uc-hero { padding: clamp(8px, 2vw, 24px) 0 clamp(48px, 6vw, 88px); }
.uc-hero .wrap { display: grid; gap: 20px; justify-items: start; }
.uc-hero h1 { font-size: clamp(34px, 3.2vw + 14px, 58px); max-width: 18em; overflow-wrap: break-word; hyphens: auto; }
.uc-hero .lead { color: var(--text-soft); font-size: 1.15em; max-width: 40em; }
.uc-shot { margin: 8px 0 0; }
.phone--still { width: min(100%, 272px) !important; }
html .phone.phone--still .notif { display: flex; }
.phone--still .scene-chat { visibility: visible; }
.uc-more-title { font-size: clamp(22px, 1vw + 16px, 28px); margin: clamp(48px, 6vw, 72px) 0 24px; text-align: center; }
.card--link { position: relative; }
.card--link h3 a { color: inherit; text-decoration: none; }
.card--link h3 a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-card); }
.price-line { font-weight: 600; color: var(--text) !important; }
.uc-links { max-width: 760px; margin: clamp(28px, 4vw, 40px) auto 0; text-align: center; color: var(--text-soft); }
.uc-links a { display: inline-block; padding: 10px 0; }
/* Guide article */
.guide .crumbs { margin-bottom: 12px; }
.guide h1 { margin-bottom: 12px; }
.article-meta { color: var(--muted) !important; font-size: 15px; margin-bottom: 28px !important; }
.toc { background: var(--surface); border: 1px solid var(--divider); border-radius: 14px; padding: 16px 20px; margin: 0 0 8px; }
.toc ol { margin: 6px 0 0 !important; padding-left: 22px; }
.toc li { padding: 6px 0; margin: 0 !important; }
.guide h2 { scroll-margin-top: 88px; }
.guide strong { color: var(--text); }
.callout { display: grid; gap: 6px; margin: 32px 0; padding: 20px 22px; border-radius: var(--radius-card); background: var(--accent-soft); color: var(--on-accent-soft); }
.callout p { margin: 0 !important; color: inherit !important; }
.callout a { color: inherit; font-weight: 700; font-size: 1.1em; }
/* A screen with the reminder banner starts under it, so the banner never covers the app's first card. */
.phone > .scene.scene--banner { padding-top: 116px !important; }
.scene--banner .app-bar { display: none; }
/* 200% zoom on a phone (~195 px): the header keeps logo and language; «Provami gratis» stays in the hero and the CTA band. */
@media (max-width: 300px) {
  .nav .btn--small { display: none; }
  .uc-hero h1 { font-size: 30px; }
  .btn { white-space: normal; text-align: center; }
  .billing { flex-wrap: wrap; justify-content: center; border-radius: 22px; }
  .billing button { white-space: normal; }
  /* the drawn phones keep their icons and drop the tiny labels */
  .tab, .app-tile { font-size: 0; }
  .app-icon { width: 30px; height: 30px; }
  .row .title { overflow-wrap: anywhere; }
  .card { padding: 16px; overflow-wrap: anywhere; hyphens: auto; }
  .plan li { grid-template-columns: 22px minmax(0, 1fr); }
  .faq summary { padding: 14px 40px 14px 14px; overflow-wrap: anywhere; hyphens: auto; }
  .faq summary::after { right: 14px; }
  .faq details p { padding: 0 14px 14px; overflow-wrap: anywhere; hyphens: auto; }
  .plan .price { font-size: 26px; overflow-wrap: anywhere; }
  .plan--featured .ribbon { left: 12px; right: 12px; text-align: center; }
}

/* ===== #449: landing redesign. Colours are the app's own tokens (app/lib/tokens.ts: late, lateBg, inputBorder). ===== */
:root { --late: #A34A0B; --late-bg: #FCEBDD; --input-border: #7F908A; }
@media (prefers-color-scheme: dark) { :root { --late: #F2A86B; --late-bg: #3A2414; --input-border: #6E807A; } }

/* Hero phone: the app scene tells capture (scene 1) -> confirm (proposal) -> done (Oggi), with no empty area. */
.proposal-foot { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--divider); }
.fake-btn { flex: 1; min-height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--chip); color: var(--on-chip); }
.fake-btn--on { background: var(--accent); color: var(--on-accent); }
.js .phone.is-playing + .story-steps .step-app { animation: step-on 1.55s steps(1) 2.65s forwards; }
.js .phone.is-playing + .story-steps .step-app b { animation: dot-on 1.55s steps(1) 2.65s forwards; }
.js .phone.is-playing + .story-steps .step-done { animation: step-on-late .1s steps(1) 4.2s forwards; }
.js .phone.is-playing + .story-steps .step-done b { animation: dot-on-late .1s steps(1) 4.2s forwards; }

/* One primary action per viewport: the header button is tonal, the hero, the plan and the form carry the primary. */
.btn--block { width: 100%; }
.btn--outline { background: var(--surface); color: var(--on-accent-soft); border: 1.5px solid var(--accent); }

/* Per ogni casa: a tag with the household's icon, a one-line situation, two or three things Insieme does. */
.card--house { gap: 14px; }
.card--house .checks { margin-top: 2px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; color: var(--text-soft); }
.checks li::before { content: ''; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231E6B58' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* Cards: only a card with a page lifts and shows «Scopri come» + arrow (always visible, touch has no hover). */
.card--link { position: relative; display: flex; flex-direction: column; gap: 10px; }
.card--link > .tag { align-self: flex-start; }
.card-more { margin-top: auto; align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 14px; background: var(--accent-soft); color: var(--on-accent-soft); border: 1.5px solid var(--accent); font: 700 16px/1.2 var(--font-body); }
.card--link p { margin-bottom: 8px; }
.card-more svg { flex: none; transition: transform .25s var(--ease-out); }
@media (hover: hover) {
  .card--link { transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s ease; }
  .card--link:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); }
  .card--link:hover .card-more { background: var(--accent); color: var(--on-accent); }
  .card--link:hover .card-more svg { transform: translateX(4px); stroke-width: 3; }
}
.card--link:active { transform: scale(.98); border-color: var(--accent); box-shadow: none; }
.card--link:active .card-more { background: var(--accent); color: var(--on-accent); }
.card--link:has(h3 a:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .card--link:hover, .card--link:active { transform: none; } .card--link:hover .card-more svg { transform: none; } }
.card--plain { cursor: default; }

/* Beta form (#449, #457): a real form on a card; the state machine is data-state on .beta-card. */
.beta { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .beta { grid-template-columns: 1fr; } }
.beta-copy { display: grid; gap: 16px; justify-items: start; text-align: left; }
.beta-copy p { color: var(--text-soft); }
.beta-copy .eyebrow { justify-self: start; }
.beta-card { gap: 18px; padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow); }
.beta-form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > label, .field > legend { font-weight: 600; font-size: 16px; padding: 0; }
.opt { color: var(--muted); font-weight: 400; font-size: 14px; margin-left: 6px; }
.help { font-size: 14px; color: var(--muted); }
.field input[type='email'], .select select { width: 100%; height: 52px; border: 1.5px solid var(--input-border); border-radius: 14px; padding: 0 16px; font: 400 17px var(--font-body); color: var(--text); background: var(--surface); }
.field input[type='email']:focus-visible, .select select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.field input[aria-invalid='true'] { border: 2px solid var(--late); }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 48px; }
.select::after { content: ''; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface); color: var(--text); border: 1px solid var(--border); font: 600 15px/1.2 var(--font-body); }
.chip input:checked + span { background: var(--accent-soft); color: var(--on-accent-soft); border: 1.5px solid var(--accent); }
.chip input:checked + span::before { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5L19 8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5L19 8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }
.check { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; min-height: 44px; font-weight: 400 !important; color: var(--text-soft); cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 10px 2px; border: 2px solid var(--input-border); border-radius: 6px; background: var(--surface); cursor: pointer; display: grid; place-items: center; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { content: ''; width: 16px; height: 16px; background: var(--on-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5L19 8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5L19 8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.check input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.check > span { padding: 10px 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.notice > svg { flex: none; margin-top: 1px; }
.notice > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.notice strong { font-size: 16px; font-weight: 700; line-height: 1.35; }
.notice span { font-size: 15px; line-height: 1.45; color: var(--text-soft); }
.notice--late { background: var(--late-bg); color: var(--late); border: 0; }
.notice--late span { color: var(--text); }
.spinner { width: 20px; height: 20px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-busy { display: none; align-items: center; gap: 10px; }
.beta-done { display: none; justify-items: center; text-align: center; gap: 12px; padding: clamp(8px, 2vw, 24px) 0; }
.beta-done .tick { width: 48px; height: 48px; }
.beta-done p { color: var(--text-soft); max-width: 28em; }
.beta-done:focus { outline: none; }
.text-link { min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; border: 0; background: none; color: var(--accent); font: 600 16px var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* the states */
.beta-card [data-when] { display: none; }
.beta-card[data-state='invalid'] [data-when~='invalid'], .beta-card[data-state='consent'] [data-when~='consent'],
.beta-card[data-state='error'] [data-when~='error'], .beta-card[data-state='offline'] [data-when~='offline'] { display: flex; }
.beta-card[data-state='sending'] .btn-busy { display: inline-flex; }
.beta-card[data-state='sent'] .beta-done, .beta-card[data-state='known'] .beta-done { display: grid; }
.beta-card[data-state='sending'] .btn-idle { display: none; }
.beta-card[data-state='sent'] .beta-form, .beta-card[data-state='known'] .beta-form { display: none; }
.beta-card[data-state='error'] .beta-submit, .beta-card[data-state='offline'] .beta-submit { display: none; }
.beta-card[data-state='sending'] .beta-form { pointer-events: none; }
.beta-card[data-state='sending'] .field { opacity: .6; }

/* Spec boards only: the labels above the card-state specimens. */
.spec { display: grid; gap: 8px; align-content: start; }
.spec-label { font-weight: 700; font-size: 14px; color: var(--muted); }
.spec .card { height: 100%; }

@media (max-width: 300px) {
  .chip span { white-space: normal; padding: 8px 14px; }
  .check { grid-template-columns: 28px minmax(0, 1fr); }
  .notice { padding: 12px; overflow-wrap: anywhere; }
  .beta-card { padding: 16px; hyphens: manual; }
  .opt { display: block; margin-left: 0; }
  .card-more { flex-wrap: wrap; }
  .card--link { overflow-wrap: anywhere; }
}

/* App preview screenshots (#schermate) */
.screens-grid { align-items: stretch; margin-top: clamp(24px, 4vw, 40px); }
.screen-card { display: flex; flex-direction: column; text-align: center; align-items: center; }
.screen-frame { width: 100%; max-width: 250px; margin: 0 auto 16px; border-radius: 26px; overflow: hidden; box-shadow: 0 12px 30px rgba(20, 33, 29, 0.14); background: var(--surface); aspect-ratio: 9 / 16; border: 1px solid var(--divider); }
.screen-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Direct APK box & safety guide in #beta */
.beta-apk-box { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--divider); display: grid; gap: 12px; }
.beta-apk-lead { font-size: 15px; color: var(--text); margin: 0; }
.beta-apk-box .btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.beta-safe-guide { font-size: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--divider); padding: 12px 14px; text-align: left; }
.beta-safe-guide summary { cursor: pointer; font-weight: 600; color: var(--text-soft); user-select: none; }
.beta-safe-guide summary:hover { color: var(--accent); }
.beta-safe-guide p { margin: 8px 0 0 !important; font-size: 13.5px; line-height: 1.45; color: var(--text-soft); }

/* Share section (#condividi) */
.share-box { display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 4vw, 36px); background: var(--surface); border-radius: var(--radius-card); border: 1px solid var(--divider); text-align: center; align-items: center; max-width: 680px; margin: 0 auto; box-shadow: 0 4px 20px rgba(20, 33, 29, 0.04); }
.share-copy h2 { font-size: clamp(22px, 2.2vw + 10px, 32px); margin-top: 6px; line-height: 1.25; }
.share-copy p { font-size: 16px; color: var(--text-soft); max-width: 36em; margin: 8px auto 0; line-height: 1.45; }
.share-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: 100%; margin-top: 4px; }
.share-actions .btn { min-height: 48px; padding: 10px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; font-weight: 600; border-radius: var(--radius-button); }