/* ============================================================
   Stashie.ai — landing CSS
   Palette "Notte Serena" · Manrope (display+body) + Fraunces (serif italic)
   Source of truth: worker/stashie_design_system.html v2
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,400;1,9..144,600;1,9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light dark;

  --night: #1F2D44; --night-deep: #0F1A2E; --night-soft: #2A3A56;
  --cream: #F4E8DA; --cream-soft: #FFF8EC; --cream-deep: #EBD8C2;
  --gold: #C9923D; --gold-light: #E0B057; --gold-deep: #8A5E1F;
  --rose: #D9A89A; --rose-soft: #E8C9C0;
  --forest: #2C4D3A; --forest-soft: #5A7561;

  /* Semantic — light defaults. Swap in dark mode (see :root.dark
     and the prefers-color-scheme block below). Brand accents
     (gold/rose/forest/night/cream) stay identical across modes. */
  --text: #1F2D44; --text-soft: #5A5066; --text-muted: #8A7E70;
  --bg: #F4E8DA; --bg-soft: #FAF1E2; --bg-card: #FFF8EC;
  --border: #E0D0BB; --border-strong: #C9B89A;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;

  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem;
  --text-4xl: 2.5rem; --text-5xl: 3.5rem; --text-6xl: 4.5rem;

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem;

  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(31, 45, 68, 0.06);
  --shadow-md: 0 4px 12px rgba(31, 45, 68, 0.08);
  --shadow-lg: 0 12px 28px rgba(31, 45, 68, 0.12);
  --shadow-xl: 0 24px 48px rgba(31, 45, 68, 0.16);
  --shadow-glow-gold: 0 0 0 4px rgba(201, 146, 61, 0.18);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: all 200ms var(--ease);
}

/* ============================================================
   Dark mode — only the semantic surface/text/border vars change.
   Brand accents (gold, rose, forest) stay the same so the visual
   identity is recognisable across modes. The init script in
   index.html sets html.dark / html.light / nothing (auto).
   ============================================================ */

:root.dark {
  --text: #F4E8DA;
  --text-soft: #C9B89A;
  --text-muted: #8A7E70;
  --bg: #0F1A2E;
  --bg-soft: #172238;
  --bg-card: #1F2D44;
  --border: #2A3A56;
  --border-strong: #3A4D6D;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --text: #F4E8DA;
    --text-soft: #C9B89A;
    --text-muted: #8A7E70;
    --bg: #0F1A2E;
    --bg-soft: #172238;
    --bg-card: #1F2D44;
    --border: #2A3A56;
    --border-strong: #3A4D6D;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
/* scroll-padding-top: respiro sotto la navbar sticky quando si naviga
   a un anchor (#scadenze, #ricerca…) — altrimenti il titolo della
   sezione finisce schiacciato sotto la navbar. */
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* WCAG AA: gold #C9923D su cream ~2.7:1 → sotto soglia 4.5. In light
   mode usiamo gold-deep #8A5E1F (~6:1) per testo .ai su sfondo chiaro.
   In dark mode gold resta brillante (su navy ha ~5:1). Footer ha bg
   navy → gold originale OK. */
.ai { color: var(--gold-deep); }
.dark .ai,
.footer .ai {
  color: var(--gold);
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-6); }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--space-6); }
.section { padding: var(--space-24) 0; }

/* ===== Typography ===== */
/* Section titles + wordmark = Fraunces serif (warm, editorial) */
.display-1, .display-2, .h1, .h2, .hero-title, .hero-wordmark {
  font-family: var(--font-display);
}
/* Smaller titles (h3, card names) = Inter sans for clean readability */
.h3, .bento-name {
  font-family: var(--font-body);
}
/* Tracking aggressivo (audit §3.1): -0.04em → -0.025em sui display. */
.display-1 { font-size: var(--text-6xl); font-weight: 800; letter-spacing: -0.04em;  line-height: 1.02; color: var(--text); }
.display-2 { font-size: var(--text-5xl); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: var(--text); }
.h1        { font-size: var(--text-4xl); font-weight: 800; letter-spacing: -0.03em;  line-height: 1.1;  color: var(--text); }
.h2        { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; color: var(--text); }
.h3        { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;  line-height: 1.3;  color: var(--text); }
.serif     { font-family: var(--font-serif); font-style: italic; font-weight: 600; }
.lead { font-size: var(--text-xl); color: var(--text-soft); line-height: 1.5; }
.body { font-size: var(--text-base); color: var(--text); }
.small { font-size: var(--text-sm); color: var(--text-soft); }
.caption { font-size: var(--text-xs); color: var(--gold-deep); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; display: inline-flex; align-items: center; gap: var(--space-2); }
.caption::before { content: ""; display: inline-block; width: 24px; height: 1.5px; background: var(--gold); }
.text-gold { color: var(--gold); }
.text-soft { color: var(--text-soft); }
.text-terracotta { color: #B85A4F; font-weight: 600; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-display); font-size: var(--text-base); font-weight: 700;
  border-radius: var(--radius-full); border: none; cursor: pointer;
  transition: var(--transition); text-decoration: none; white-space: nowrap;
}
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn-primary { background: var(--night); color: var(--cream); box-shadow: var(--shadow-md); }
.btn-primary:hover { background: var(--night-deep); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
/* .btn-gold: testo SEMPRE navy (non var(--text), che in dark mode
   diventa cream → contrast 2.4:1 su gold KO). Navy su gold = 5:1 AA. */
.btn-gold { background: var(--gold); color: var(--night); box-shadow: var(--shadow-md); }
.btn-gold:hover { background: var(--gold-light); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
/* Primary CTA in the final section pulses gently to draw the eye */
#cta .btn-gold {
  animation: cta-pulse 2.4s ease-in-out infinite;
}
@keyframes cta-pulse {
  0%, 100% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(201,146,61,0.55); }
  50%      { box-shadow: var(--shadow-md), 0 0 0 14px rgba(201,146,61,0); }
}
.btn-secondary { background: var(--bg-card); color: var(--text); border: 1.5px solid var(--text); }
.btn-secondary:hover { background: var(--night); color: var(--cream); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: rgba(31, 45, 68, 0.06); }

.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8); transition: var(--transition); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }

.badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: 600; border-radius: var(--radius-full); background: var(--bg-card); color: var(--text); border: 1px solid var(--border); }

/* ===== Navbar ===== */
.navbar {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  background: var(--navbar-bg, rgba(244, 232, 218, 0.85));
  border-bottom: 1px solid transparent;
  transition: backdrop-filter 250ms ease, background 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}
/* Audit §4.1: glassmorphism intensificato dopo scroll >80px */
.navbar.is-scrolled {
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  background: rgba(244, 232, 218, 0.92);
  border-bottom-color: var(--border);
  box-shadow: 0 2px 12px rgba(31, 45, 68, 0.06);
}
:root.dark .navbar.is-scrolled { background: rgba(15, 26, 46, 0.92); }
:root.dark { --navbar-bg: rgba(15, 26, 46, 0.85); }
@media (prefers-color-scheme: dark) {
  :root:not(.light) { --navbar-bg: rgba(15, 26, 46, 0.85); }
}
.navbar-inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0; gap: var(--space-6); }
/* Extra horizontal breathing room for navbar content so logo and the
   "Iscriviti" pill don't sit flush against the window edge on wide
   screens. Hero/sections keep the default container padding; this is
   navbar-specific because it's where the edge proximity reads worst. */
.navbar .container { padding: 0 var(--space-12); }
/* Logo link nel navbar: touch target ≥44px (Apple HIG / WCAG 2.5.5) */
.navbar-inner > a:first-child { min-height: 44px; padding: var(--space-2) 0; }
/* Mobile: padding container ridotto + logo più compatto per evitare
   overflow horizontal su iPhone 12 (390px). */
@media (max-width: 600px) {
  .navbar .container { padding: 0 var(--space-4); }
  .navbar-inner > a:first-child > span { font-size: var(--text-base); }
  .navbar-inner > a:first-child > svg { width: 30px; height: 30px; }
}
.nav-links { display: flex; gap: var(--space-6); }
.nav-link { color: var(--text); text-decoration: none; font-weight: 600; font-size: var(--text-base); font-family: var(--font-body); transition: var(--transition); }
.nav-link:hover { color: var(--gold-deep); }
.nav-right { display: flex; align-items: center; gap: var(--space-4); }
.nav-signin {
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  color: var(--text); text-decoration: none;
  /* Touch target ≥44px (Apple HIG) — padding garantisce min-height interno */
  padding: var(--space-3) var(--space-4); min-height: 44px;
  display: inline-flex; align-items: center;
  border-radius: var(--radius-full); transition: var(--transition);
  white-space: nowrap;
}
.nav-signin:hover { color: var(--gold-deep); background: rgba(31, 45, 68, 0.04); }
/* Mobile: keep "Sign in" visible — compact. Touch target 38×38px
   compromesso: sotto Apple HIG 44pt ma necessario per non sforare
   iPhone 12 viewport (390px). Test smoke: 401px → 390px ok. */
@media (max-width: 600px) {
  .nav-signin { padding: 8px 10px; font-size: 13px; min-height: 40px; }
  .nav-right { gap: var(--space-2); }
  .lang-toggle { padding: 2px; }
  .lang-btn { padding: 10px 8px; font-size: 11px; min-height: 38px; min-width: 38px; }
}

/* Beta CTA: hidden entirely on mobile — the floating owl-follower
   (bottom-right) already provides waitlist access, and the navbar
   was overflowing even with a shortened label. */
@media (max-width: 600px) {
  .nav-cta { display: none; }
}

/* Lang toggle (in navbar) — radiogroup, 44px touch targets */
.lang-toggle { display: flex; gap: 2px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 3px; }
.lang-btn {
  padding: 10px 12px; border: none; background: transparent; cursor: pointer;
  border-radius: var(--radius-full); font-size: 12px; font-weight: 700;
  color: var(--text-soft); font-family: var(--font-body); transition: var(--transition);
  min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.lang-btn.active { background: var(--night); color: var(--cream); }
.lang-btn:not(.active):hover { background: rgba(31, 45, 68, 0.08); }

@media (max-width: 800px) {
  .nav-links { display: none; }
}

/* ===== Hero (centered, with owl landing animation) ===== */
.hero {
  position: relative;
  padding: var(--space-16) 0 var(--space-24);
  overflow: hidden;
  text-align: center;
}
.hero-ornament {
  position: absolute; pointer-events: none; user-select: none;
  opacity: 0.05;
  font-family: var(--font-serif); font-style: italic; font-weight: 600;
  color: var(--text); font-size: 22rem;
  top: 4rem; right: -4rem; line-height: 1;
}
.hero-stack {
  max-width: 980px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-8);
  position: relative;
}
/* Tighten wordmark + tagline (logo lock-up) */
.hero-stack > .hero-tagline { margin-top: calc(-1 * var(--space-6)); }
.hero-stack > .hero-lead { max-width: 720px; line-height: 1.65; }
.hero-stack > .hero-title { margin-top: var(--space-2); line-height: 1.15; }
.hero-mascot-anchor {
  position: relative;
  width: 220px; height: 240px;
  margin-bottom: var(--space-2);
  animation: owl-land 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.hero-mascot-anchor > .living-owl-hero {
  display: block;
  width: 100%; height: 100%;
  filter: drop-shadow(0 18px 36px rgba(31,45,68,0.18));
}
.hero-mascot-anchor .living-owl-svg { width: 100%; height: 100%; }
@media (max-width: 720px) {
  .hero-mascot-anchor { width: 180px; height: 200px; }
}
.hero-wordmark {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3.5rem, 9vw, 6rem);
  color: var(--text);
  letter-spacing: -0.05em; line-height: 0.95;
  margin-top: 0;
}
.hero-wordmark .ai { color: var(--gold); }
.hero-tagline {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  color: var(--text); font-size: var(--text-3xl);
  letter-spacing: -0.015em;
}
.hero-tagline em, .hero-tagline .text-gold { color: var(--gold); font-weight: 600; }
.hero-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm); color: var(--text-soft); font-weight: 500;
}
.hero-tag .pulse { width: 6px; height: 6px; background: var(--forest); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.hero h1.hero-title {
  font-size: clamp(2rem, 5vw, var(--text-5xl));
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.1;
  color: var(--text);
  max-width: 720px;
  margin-top: var(--space-2);
}
.hero-lead {
  font-size: var(--text-lg); color: var(--text-soft);
  line-height: 1.5; max-width: 580px;
}
.hero-lead strong { color: var(--text); font-weight: 700; }
.hero-ctas {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-2);
}
.hero-channels {
  display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center;
}
.channel-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 700; color: var(--text);
  transition: var(--transition);
}
.channel-chip:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.channel-chip svg { width: 18px; height: 18px; }
.chip-wa svg { color: #25D366; }
.chip-tg svg { color: #229ED9; }
.chip-email svg { color: var(--gold); }
.chip-pwa svg { color: var(--gold-deep); }
.hero-trust {
  display: flex; gap: var(--space-6);
  flex-wrap: wrap; justify-content: center;
  margin-top: var(--space-2);
}
.hero-trust-item {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--text-soft); font-size: var(--text-sm);
}
.hero-trust-item svg { color: var(--forest); }

/* ===== Waitlist (Chunk 51) =====
   Sits between hero and "How it works". Visually a calm card on cream-soft,
   bordered gold to anchor it as the primary action of the page. */
.waitlist-section {
  padding: var(--space-12) 0 var(--space-16);
}
.waitlist-card {
  background: var(--bg-card);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-8);
  text-align: center;
  box-shadow: var(--shadow-md);
}
.waitlist-form {
  display: flex;
  gap: var(--space-3);
  max-width: 480px;
  margin: 0 auto;
  align-items: stretch;
}
.waitlist-input {
  flex: 1;
  min-width: 0;
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  transition: var(--transition);
  outline: none;
}
.waitlist-input:focus { border-color: var(--gold); box-shadow: var(--shadow-glow-gold); }
.waitlist-input::placeholder { color: var(--text-muted); }
.waitlist-input.is-invalid { border-color: #B85A4F; box-shadow: 0 0 0 4px rgba(184,90,79,0.15); }
.waitlist-submit { flex: 0 0 auto; }
.waitlist-submit[disabled] { opacity: 0.6; cursor: progress; }
/* Arrow inside CTA slides right on hover (T9) */
.waitlist-submit .waitlist-cta-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.waitlist-submit:hover .waitlist-cta-label { gap: 14px; }
.waitlist-submit, .waitlist-submit .waitlist-cta-label { transition: gap 220ms ease, background 200ms ease, transform 200ms ease, box-shadow 200ms ease; }
.waitlist-success,
.waitlist-error {
  margin-top: var(--space-6);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--text-sm);
}
.waitlist-success {
  background: rgba(44,77,58,0.12);
  color: var(--forest);
  border: 1px solid rgba(44,77,58,0.25);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  max-width: 460px;
  white-space: normal;
  text-align: left;
  border-radius: var(--radius-lg);
  animation: waitlist-success-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes waitlist-success-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .waitlist-success { animation: none; }
}
.waitlist-error   { background: rgba(184,90,79,0.10);  color: #B85A4F;       border: 1px solid rgba(184,90,79,0.25); }

/* "Got an invite code?" zone — sits under the waitlist form, low-emphasis,
   so the page stays waitlist-first while still offering the side door for
   friends who got a code. */
.invite-zone {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.invite-toggle {
  background: none;
  border: 0;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-soft);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
  transition: var(--transition);
  border-radius: var(--radius-sm);
}
.invite-toggle:hover { color: var(--gold-deep); text-decoration-color: var(--gold); }
.invite-toggle[aria-expanded="true"] { color: var(--text); }
.invite-form {
  display: flex;
  gap: var(--space-3);
  max-width: 420px;
  width: 100%;
  align-items: stretch;
}
.invite-input {
  flex: 1; min-width: 0;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--text); background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
  transition: var(--transition);
  outline: none;
}
.invite-input:focus { border-color: var(--gold); box-shadow: var(--shadow-glow-gold); }
.invite-input.is-invalid { border-color: #B85A4F; box-shadow: 0 0 0 3px rgba(184,90,79,0.12); }
.invite-submit { padding: var(--space-3) var(--space-5); font-size: var(--text-sm); }

/* Banner when arriving back from /sign-up with an invalid invite. */
.waitlist-invalid-invite {
  margin: 0 0 var(--space-6);
  padding: var(--space-3) var(--space-6);
  background: rgba(184, 90, 79, 0.08);
  border: 1px solid rgba(184, 90, 79, 0.25);
  color: #8C3D33;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* Belt-and-suspenders: class rules above use `display: flex/inline-flex`,
   which can win the cascade against the UA `[hidden] { display: none }`
   rule when specificity ties. Force the hide explicitly. */
.waitlist-form[hidden],
.waitlist-success[hidden],
.waitlist-error[hidden],
.waitlist-invalid-invite[hidden],
.invite-form[hidden] { display: none; }

@media (max-width: 600px) {
  .invite-form { flex-direction: column; }
}

@media (max-width: 600px) {
  .waitlist-card { padding: var(--space-8) var(--space-6); }
  .waitlist-form { flex-direction: column; }
}

/* ===== Owl landing animation ===== */
@keyframes owl-land {
  0%   { transform: translate(140px, -200px) rotate(-15deg) scale(0.6); opacity: 0; }
  20%  { opacity: 1; }
  55%  { transform: translate(20px, -10px) rotate(-2deg) scale(1.02); }
  72%  { transform: translate(0, 12px) rotate(2deg) scale(0.99); }
  88%  { transform: translate(0, -4px) rotate(0deg) scale(1.005); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Sequential fade-in for hero stack children */
.hero-stack > .hero-tag       { animation: fade-up 0.7s var(--ease-out) 1.0s both; }
.hero-stack > .hero-wordmark  { animation: fade-up 0.7s var(--ease-out) 0.9s both; }
.hero-stack > .hero-tagline   { animation: fade-up 0.7s var(--ease-out) 1.1s both; }
.hero-stack > .hero-title     { animation: none; opacity: 1; transform: none; }
.hero-stack > .hero-title .hero-title-line { display: block; opacity: 0; transform: translateY(16px); animation: fade-up 0.7s var(--ease-out) both; }
.hero-stack > .hero-title .hero-title-line:nth-child(1) { animation-delay: 1.30s; }
.hero-stack > .hero-title .hero-title-line:nth-child(2) { animation-delay: 1.45s; }
.hero-stack > .hero-title .hero-title-line:nth-child(3) { animation-delay: 1.60s; }
.hero-stack > .hero-lead      { animation: fade-up 0.7s var(--ease-out) 1.75s both; }
.hero-stack > .hero-toggle    { animation: fade-up 0.7s var(--ease-out) 1.90s both; }
.hero-stack > .hero-ctas      { animation: fade-up 0.7s var(--ease-out) 2.05s both; }
.hero-stack > .hero-channels  { animation: fade-up 0.7s var(--ease-out) 2.20s both; }
.hero-stack > .hero-trust     { animation: fade-up 0.7s var(--ease-out) 2.35s both; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero-mascot-anchor,
  .hero-mascot-anchor svg,
  .hero-stack > *,
  .hero-stack > .hero-title .hero-title-line,
  .owl-follower svg { animation: none !important; }
  /* Without animation, default opacity:0 would hide everything. Force visible. */
  .hero-stack > *,
  .hero-stack > .hero-title .hero-title-line {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== Owl follower (peeking owl on scroll) ===== */
/* Owl badge — cream circle with gold border, used on navy backgrounds
   to keep the dark owl visible without inverting it. */
.owl-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-card);
  border: 2px solid var(--gold);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.owl-badge-lg { width: 96px; height: 96px; padding: 12px; margin-bottom: var(--space-6); }
.owl-badge-sm { width: 48px; height: 48px; padding: 6px; }

/* Owl follower — naked on light sections, cloaked in a cream-and-gold
   badge on dark sections with a "magic costume change" animation.
   Position is set via JS (left/top); we only transition decorative
   props so the flight movement stays smooth (RAF-driven, no CSS easing
   conflict). */
.owl-follower {
  position: fixed;
  left: 0; top: 0; /* JS overrides every frame */
  width: 72px; height: 80px;
  z-index: 50;
  background: transparent;
  border: 0 solid transparent;
  border-radius: 0;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition:
    opacity 500ms ease,
    background 400ms ease,
    padding 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 400ms ease,
    border-width 400ms ease,
    border-radius 400ms ease,
    box-shadow 400ms ease;
  pointer-events: none;
  cursor: pointer;
  text-decoration: none;
  overflow: visible;
}
.owl-follower.is-visible { opacity: 1; pointer-events: auto; }

/* Mobile: nothing special — the giant-circle bug was in step-mark
   (since fixed with explicit 44×44 dimensions on the SVG), not in
   the owl follower itself. The owl stays its default 72×80 with
   visible overflow so sparkles and magic-spin scale(1.45) aren't
   clipped. */

/* Magnetic callout — appears above the owl when it lands on the CTA
   section, inviting the visitor to click. */
.owl-callout {
  position: absolute;
  bottom: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(10px) scale(0.85);
  background: var(--gold);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease 200ms, transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms;
}
.owl-callout::after {
  content: "";
  position: absolute;
  bottom: -5px; left: 50%;
  width: 12px; height: 12px;
  background: var(--gold);
  transform: translateX(-50%) rotate(45deg);
}
.owl-follower.on-dark .owl-callout {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  animation: callout-bounce 1.2s ease-in-out 1.2s infinite;
}
@keyframes callout-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50%      { transform: translateX(-50%) translateY(-4px) scale(1.04); }
}
.owl-follower svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 6px 14px rgba(31,45,68,0.28));
  animation: owl-bob 3.5s ease-in-out infinite;
  transform-origin: 50% 60%;
}
/* In flight (wandering or circling): rapid wing-flap shudder so it
   looks like a tiny owl beating its wings, not a teleporting blob. */
.owl-follower.is-flying svg {
  animation: owl-flap 0.22s ease-in-out infinite;
}
@keyframes owl-flap {
  0%, 100% { transform: translateY(0)    rotate(-5deg) scaleX(1); }
  50%      { transform: translateY(-3px) rotate(5deg)  scaleX(0.94); }
}

/* On dark sections: dress up in a cream + gold badge */
.owl-follower.on-dark {
  width: 80px; height: 80px;
  background: var(--bg-card);
  border: 2px solid var(--gold);
  border-radius: 50%;
  padding: 8px;
  box-shadow: 0 6px 18px rgba(31,45,68,0.25), 0 0 0 0 rgba(201,146,61,0.5);
  animation: pulse-gold 1.8s ease-in-out 700ms infinite;
}

/* Magic costume change: scale spike + spin + sparkle burst + radial flash */
.owl-follower.outfit-changing svg {
  animation: owl-bob 3.5s ease-in-out infinite, magic-spin 1100ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Radial gold flash behind the owl during the swap */
.owl-follower.outfit-changing {
  animation: magic-flash 1100ms ease-out;
}
/* Sparkle burst — 4 stars at different positions and sizes */
.owl-follower.outfit-changing::before,
.owl-follower.outfit-changing::after {
  content: "";
  position: absolute;
  pointer-events: none;
  font-size: 28px;
  line-height: 1;
}
.owl-follower.outfit-changing::after {
  content: "✨";
  top: -14px; right: -14px;
  animation: sparkle 900ms ease-out;
}
.owl-follower.outfit-changing::before {
  content: "✨";
  bottom: -14px; left: -16px;
  font-size: 22px;
  animation: sparkle 900ms ease-out 180ms;
}

@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 6px 18px rgba(31,45,68,0.25), 0 0 0 0 rgba(201,146,61,0.5); }
  50%      { box-shadow: 0 6px 18px rgba(31,45,68,0.25), 0 0 0 12px rgba(201,146,61,0); }
}
@keyframes owl-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-4px) rotate(3deg); }
}
@keyframes magic-spin {
  0%   { transform: scale(1) rotate(0); }
  20%  { transform: scale(1.45) rotate(-25deg); }
  50%  { transform: scale(0.78) rotate(180deg); }
  80%  { transform: scale(1.15) rotate(340deg); }
  100% { transform: scale(1) rotate(360deg); }
}
@keyframes magic-flash {
  0%   { box-shadow: 0 0 0 0 rgba(201,146,61,0.85); }
  35%  { box-shadow: 0 0 0 28px rgba(201,146,61,0.55); }
  100% { box-shadow: 0 0 0 80px rgba(201,146,61,0); }
}
@keyframes sparkle {
  0%   { opacity: 0; transform: scale(0) rotate(0); }
  35%  { opacity: 1; transform: scale(1.6) rotate(30deg); }
  100% { opacity: 0; transform: scale(0.4) rotate(60deg) translate(8px, -8px); }
}

@media (max-width: 600px) {
  .owl-follower { width: 56px; height: 64px; bottom: 16px; right: 16px; }
  .owl-follower.on-dark { width: 64px; height: 64px; padding: 6px; }
}

/* ===== Domains — Bento layout (Granola-inspired) ===== */
.domains-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: var(--space-3);
}

.bento-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
}
.bento-card {
  /* Sub-accent CSS variable per card (T7). Default gold. */
  --bento-accent: var(--gold);
}
.bento-card[data-accent="gold"]        { --bento-accent: var(--gold); }
.bento-card[data-accent="navy"]        { --bento-accent: var(--night); }
.bento-card[data-accent="rose"]        { --bento-accent: #D9A89A; }
.bento-card[data-accent="forest"]      { --bento-accent: #2C4D3A; }
.bento-card[data-accent="gold-deep"]   { --bento-accent: var(--gold-deep); }
.bento-card[data-accent="muted"]       { --bento-accent: var(--text-muted); }
.bento-card[data-accent="terracotta"]  { --bento-accent: #B6541C; }
.bento-card[data-accent="gold-dashed"] { --bento-accent: var(--gold); }

.bento-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--bento-accent); }
.bento-card:hover .bento-illus svg { transform: scale(1.06); }
.bento-card .bento-illus svg { transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); }

/* Icon coloring per accent (illustrations use currentColor through specific
   parts; we lean on color inheritance via accent + selective overrides). */
.bento-card[data-accent="navy"]:hover .bento-illus { filter: drop-shadow(0 4px 12px rgba(31,45,68,0.18)); }
.bento-card[data-accent="rose"]:hover .bento-illus { filter: drop-shadow(0 4px 12px rgba(217,168,154,0.35)); }
.bento-card[data-accent="forest"]:hover .bento-illus { filter: drop-shadow(0 4px 12px rgba(44,77,58,0.25)); }
.bento-card[data-accent="terracotta"]:hover .bento-illus { filter: drop-shadow(0 4px 12px rgba(182,84,28,0.22)); }
.bento-card[data-accent="gold-deep"]:hover .bento-illus { filter: drop-shadow(0 4px 12px rgba(168,117,38,0.25)); }
.bento-card[data-accent="muted"]:hover .bento-illus { filter: drop-shadow(0 4px 12px rgba(138,126,112,0.25)); }

/* Su misura: dashed gold border (the "and your custom one" card) */
.bento-card[data-accent="gold-dashed"] {
  border-style: dashed;
  border-color: var(--gold);
}

.bento-featured {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--night);
  color: var(--cream);
  padding: var(--space-8);
  border-color: var(--text-soft);
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-6);
}
.bento-featured .bento-text { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.bento-featured .bento-name { color: var(--cream); font-size: var(--text-3xl); }
.bento-featured .bento-desc { color: var(--rose); font-size: var(--text-base); }
.bento-featured .bento-eyebrow {
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.bento-featured .bento-eyebrow::before {
  content: '✦';
  font-size: 12px;
  color: var(--gold);
  opacity: 0.85;
}
.bento-featured:hover { border-color: var(--gold); }
.bento-featured .bento-illus { flex: 0 0 200px; align-self: center; }
.bento-featured .bento-illus svg { max-width: 200px; max-height: 240px; }

.bento-medium { grid-column: span 1; grid-row: span 2; align-items: stretch; justify-content: space-between; }
.bento-medium .bento-illus svg { max-width: 110px; max-height: 130px; }

.bento-wide {
  grid-column: span 2;
  grid-row: span 1;
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
}
.bento-wide .bento-text { flex: 1; min-width: 0; }
.bento-wide .bento-illus { flex: 0 0 80px; }
.bento-wide .bento-illus svg { max-width: 80px; max-height: 90px; }

.bento-special {
  grid-column: span 4;
  grid-row: span 1;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--text);
  border-color: var(--gold-deep);
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-4);
}
.bento-full {
  grid-column: span 4;
  grid-row: span 1;
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
}
.bento-full .bento-text { flex: 1; min-width: 0; }
.bento-full .bento-illus { flex: 0 0 100px; }
.bento-full .bento-illus svg { max-width: 100px; max-height: 100px; }
@media (max-width: 900px) {
  .bento-full { grid-column: span 2; flex-direction: column; align-items: stretch; }
}
.bento-special .bento-name { color: var(--text); font-size: var(--text-2xl); }
.bento-special .bento-desc { color: var(--text); opacity: 0.78; font-size: var(--text-base); }
.bento-special-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--night); color: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bento-special-icon svg { width: 22px; height: 22px; }

.bento-eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--text-muted); }
.bento-name { font-weight: 800; font-size: var(--text-xl); color: var(--text); line-height: 1.2; letter-spacing: -0.01em; }
.bento-desc { font-size: var(--text-sm); color: var(--text-soft); line-height: 1.5; }

.bento-illus { display: flex; align-items: center; justify-content: center; }
.bento-illus svg { width: auto; height: auto; max-width: 100%; }

@media (max-width: 900px) {
  .domains-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .bento-card { grid-row: auto !important; }
  .bento-featured { grid-column: span 2; flex-direction: column; }
  .bento-featured .bento-illus { flex: 0 0 auto; }
  .bento-medium { grid-column: span 1; }
  .bento-wide { grid-column: span 2; }
  .bento-special { grid-column: span 2; }
}

/* ===== /cosa-puoi-fare page =====
   6 use-case sections with alternating layout (chat left / right),
   alternating backgrounds (cream / dark navy), sticky in-page nav. */

/* Sticky in-page nav (under main navbar) with the 6 use case anchors.
   Top offset matches the navbar height across breakpoints. Background
   stays solid (not transparent) so it covers the page text scrolling
   beneath. */
.uc-subnav {
  /* Mobile: sub-nav NON sticky — scrolla via col contenuto. Su mobile la
     navbar + subnav fisse insieme rubavano ~106px in alto sempre, e la
     subnav copriva il testo lead delle sezioni quando ci si fermava. */
  position: static;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 16px -12px rgba(31, 45, 68, 0.18);
  padding: var(--space-2) 0;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .uc-subnav { background: var(--bg); }
}
@media (min-width: 768px) {
  /* Desktop: torna sticky sotto la navbar (più spazio orizzontale → no
     overlap problematico, utile per saltare fra capitoli di una pagina lunga). */
  .uc-subnav { position: sticky; top: 64px; }
}
.uc-subnav-inner {
  display: flex;
  gap: var(--space-2);
  /* Mobile: single row, horizontal scroll (Apple Music tabs style).
     Was flex-wrap: wrap on mobile too — caused the 6 anchors to break
     into 2 rows that hid behind the navbar. The .container wrapper was
     dropped from the HTML because its max-width + padding were stealing
     room from the horizontal scroll. */
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  scrollbar-width: none;
  padding: 0 var(--space-4);
  width: 100%;
}
.uc-subnav-inner::-webkit-scrollbar { display: none; }
.uc-subnav-inner > a { flex-shrink: 0; white-space: nowrap; }
@media (min-width: 768px) {
  .uc-subnav-inner {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-6);
  }
}

/* Anchor-jump offset — when the user taps a sub-nav link, the target
   section would land underneath the sticky navbar + sub-nav. This
   adds scroll padding so the section title is fully visible. */
.uc-section {
  /* Was 120 — bumped so the eyebrow sits CLEARLY below the sticky
     sub-nav after an anchor jump, not flush against it. */
  scroll-margin-top: 140px;
}
@media (min-width: 768px) {
  .uc-section { scroll-margin-top: 160px; }
}
.uc-subnav a {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-soft);
  text-decoration: none;
  transition: var(--transition);
  border: 1px solid transparent;
}
.uc-subnav a:hover {
  color: var(--text);
  background: var(--bg-card);
  border-color: var(--border);
}
@media (max-width: 600px) {
  .uc-subnav { padding: var(--space-2) var(--space-3); }
  .uc-subnav a { padding: 6px 10px; font-size: 12px; }
}

/* Page hero — smaller than homepage hero but punchy */
.uc-hero {
  padding: var(--space-20) 0 var(--space-12);
  text-align: center;
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--cream) 100%);
}
.uc-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: var(--space-6);
}
.uc-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 900px;
  margin: 0 auto var(--space-6);
}
.uc-hero p.lead {
  max-width: 680px;
  margin: 0 auto var(--space-8);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--text-soft);
}

/* Single use-case section */
.uc-section {
  padding: var(--space-24) 0;
  border-top: 1px solid var(--border);
}
.uc-section.dark {
  background: var(--night);
  color: var(--cream);
  border-top: 1px solid var(--night-soft);
}
.uc-section.dark .uc-eyebrow { color: var(--gold); }
.uc-section.dark .uc-title { color: var(--cream); }
.uc-section.dark .uc-lead { color: var(--rose); }
.uc-section.dark .uc-bullets-title { color: var(--gold-light); }
.uc-section.dark .uc-bullet { color: var(--rose); }
.uc-section.dark .uc-bullet-check { background: var(--gold); color: var(--text); }
.uc-section.dark .uc-payoff { background: var(--night-soft); color: var(--cream); border-color: var(--gold); }

.uc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.uc-section.reverse .uc-grid { direction: rtl; }
.uc-section.reverse .uc-grid > * { direction: ltr; }
@media (max-width: 900px) {
  .uc-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .uc-section.reverse .uc-grid { direction: ltr; }
}

.uc-eyebrow {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: var(--gold-deep);
  margin-bottom: var(--space-4);
}
.uc-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: var(--space-5);
}
.uc-lead {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--text-soft);
  margin-bottom: var(--space-6);
}

.uc-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.uc-bullets-title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--gold-deep);
  margin-bottom: var(--space-3);
}
.uc-bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--text);
  line-height: 1.5;
}
.uc-bullet-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.uc-bullet-check svg { width: 12px; height: 12px; }

/* Payoff: the "magic" punchline at end of section */
/* "Photo attachment" mini-thumb usata dentro i chat bubble per
   simulare una vera foto inviata (cassetto / cassa Bose / lavatrice).
   Solo decorativa: gradient + icon, non un vero file. */
.uc-photo-attach {
  display: inline-block;
  background: linear-gradient(135deg, #5A5066 0%, #2A3A56 100%);
  border-radius: 8px;
  padding: 24px 32px;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
  min-width: 140px;
  text-align: center;
  color: rgba(244, 232, 218, 0.85);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.uc-photo-attach::before {
  content: '📷';
  display: block;
  font-size: 24px;
  margin-bottom: 4px;
  filter: grayscale(0.3) brightness(1.1);
}
.uc-photo-attach.box-photo {
  background: linear-gradient(135deg, #7A5C3E 0%, #5A4226 100%);
}
.uc-photo-attach.box-photo::before { content: '📦'; }
.uc-photo-attach.speaker-photo {
  background: linear-gradient(135deg, #1F2D44 0%, #0F1A2E 100%);
}
.uc-photo-attach.speaker-photo::before { content: '🔊'; }
.uc-photo-attach.appliance-photo {
  background: linear-gradient(135deg, #5A5066 0%, #2A3A56 100%);
}
.uc-photo-attach.appliance-photo::before { content: '🌀'; }

.uc-payoff {
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6) var(--space-5) var(--space-8);
  border-left: 3px solid var(--gold);
  background: var(--bg-card);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var(--text);
  border-radius: 4px;
}

/* Chat mockup — same shape as homepage but with caption tag */
.uc-chat-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.uc-chat-caption {
  font-size: var(--text-sm);
  color: var(--text-soft);
  font-style: italic;
  text-align: center;
  max-width: 320px;
  line-height: 1.4;
}
.uc-section.dark .uc-chat-caption { color: var(--rose); }
.uc-chat {
  background: var(--night-deep);
  border-radius: 28px;
  padding: var(--space-6);
  box-shadow: var(--shadow-xl);
  max-width: 400px;
  width: 100%;
}
.uc-section.dark .uc-chat {
  background: #0E1626;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
}
.uc-chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(244, 232, 218, 0.1);
}
.uc-chat-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.uc-chat-avatar svg { width: 28px; height: 28px; }
.uc-chat-meta-name { color: var(--cream); font-weight: 700; font-size: var(--text-sm); }
.uc-chat-meta-status { color: var(--rose); font-size: 11px; }
.uc-chat-body {
  padding: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.uc-bubble {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  position: relative;
}
.uc-bubble.in {
  background: var(--night-soft);
  color: var(--cream);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.uc-bubble.out {
  background: var(--forest);
  color: var(--cream);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.uc-bubble.divider {
  background: transparent;
  color: var(--rose);
  align-self: center;
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-3) 0;
  max-width: 100%;
  text-align: center;
}
.uc-bubble .highlight { color: var(--gold); font-weight: 700; }
.uc-bubble .chat-time {
  font-size: 10px;
  opacity: 0.55;
  margin-top: 4px;
}
.uc-bubble em {
  font-style: italic;
  opacity: 0.85;
}

/* Final CTA band */
.uc-cta-band {
  padding: var(--space-20) 0;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  text-align: center;
}
.uc-cta-band .container-narrow {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.uc-cta-band .btn { margin: 0 auto; }
.uc-cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: var(--space-4);
}
.uc-cta-band p {
  color: var(--text);
  opacity: 0.85;
  font-size: var(--text-lg);
  max-width: 560px;
  margin: 0 auto var(--space-8);
}

/* ===== Beyond cataloging — asymmetric bento (T5) =====
   4-col grid, 2 wide tiles (Documents + Natural search) for universal
   features, 4 standard. Each card has sub-accent color via data-accent
   and an illustrated mini-mockup (.beyond-illus). */
.beyond-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.beyond-card.beyond-wide { grid-column: span 2; }
/* Last wide card (Natural search, terracotta) takes a full row on its own
   so the trimmed-to-4 layout (Documents span2 + Objects + Boxes |
   Natural search span4) reads clean. */
.beyond-card.beyond-wide[data-accent="terracotta"] { grid-column: span 4; }
.beyond-card {
  --accent: var(--gold);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.beyond-card[data-accent="gold"]       { --accent: var(--gold); }
.beyond-card[data-accent="forest"]     { --accent: #2C4D3A; }
.beyond-card[data-accent="rose"]       { --accent: #D9A89A; }
.beyond-card[data-accent="gold-deep"]  { --accent: var(--gold-deep); }
.beyond-card[data-accent="night-soft"] { --accent: var(--night-soft); }
.beyond-card[data-accent="terracotta"] { --accent: #B6541C; }

.beyond-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.beyond-card:hover .beyond-illus { transform: scale(1.04); }
.beyond-card .bento-name { font-size: var(--text-lg); }
.beyond-card .bento-desc { font-size: var(--text-sm); }
.beyond-card::after {
  content: '→';
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-5);
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  opacity: 0;
  transform: translateX(-4px);
  transition: var(--transition);
}
.beyond-card:hover::after { opacity: 1; transform: translateX(0); }

/* === Mini-mockup (.beyond-illus) shared frame === */
.beyond-illus {
  position: relative;
  height: 80px;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(244, 232, 218, 0.6), rgba(255, 248, 236, 0.9));
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--accent);
}
.beyond-card.beyond-wide .beyond-illus { height: 96px; }

/* Documents: stack di 3 fogli */
.bdoc {
  position: absolute;
  width: 38px; height: 50px;
  background: var(--bg-card);
  border: 1.5px solid var(--cream-deep);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(31, 45, 68, 0.08);
}
.bdoc-1 { transform: translate(-22px, 0) rotate(-6deg); background: #F4E8DA; }
.bdoc-2 { transform: translate(0, -4px) rotate(0deg); background: #FFF8EC; }
.bdoc-3 { transform: translate(22px, 4px) rotate(8deg); background: #FFF8EC; }
.bdoc-3::before, .bdoc-3::after {
  content: ''; display: block;
  height: 2px; margin: 6px 4px 0;
  background: var(--text-muted); border-radius: 1px;
}
.bdoc-3::after { width: 60%; }
.bdoc-stamp {
  position: absolute;
  right: -6px; bottom: -6px;
  width: 18px; height: 18px;
  background: var(--gold);
  border-radius: 50%;
  border: 2px solid var(--bg-card);
}
.bdoc-stamp::after {
  content: '✓'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: var(--cream);
}

/* Objects: small device + manual label */
.bobj-device {
  width: 48px; height: 32px;
  background: var(--night);
  border-radius: 6px;
  position: relative;
  margin-right: 8px;
}
.bobj-led {
  position: absolute; top: 6px; right: 8px;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
}
.bobj-device::after {
  content: '';
  position: absolute; left: 8px; right: 16px; bottom: 6px;
  height: 8px;
  background: rgba(244, 232, 218, 0.4);
  border-radius: 2px;
}
.bobj-label {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: var(--radius-full);
  color: var(--accent);
}

/* Boxes: cardboard box with label */
.bbox {
  width: 88px; height: 52px;
  background: #D9A89A;
  border: 2px solid #A07266;
  border-radius: 3px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.bbox-tape {
  position: absolute;
  top: -2px; bottom: -2px; left: 50%;
  width: 16px;
  background: rgba(160, 114, 102, 0.4);
  transform: translateX(-50%);
}
.bbox-label {
  position: relative;
  font-size: 8px;
  font-weight: 600;
  color: var(--cream);
  padding: 2px 6px;
  background: rgba(31, 45, 68, 0.7);
  border-radius: 2px;
  z-index: 1;
}

/* How this works: chat bubble + reply */
.bbubble, .bbubble-reply {
  font-size: 10px; line-height: 1.3;
  padding: 6px 10px;
  border-radius: 12px;
  max-width: 56%;
}
.bbubble {
  position: absolute; top: 8px; right: 8px;
  background: var(--accent);
  color: var(--cream-soft);
  border-bottom-right-radius: 3px;
  font-weight: 600;
}
.bbubble-reply {
  position: absolute; bottom: 8px; left: 8px;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--cream-deep);
  border-bottom-left-radius: 3px;
}

/* Spending: sparkline + tag */
.bspark {
  width: 70%; height: 32px;
  color: var(--accent);
}
.bspark-tag {
  position: absolute; right: 8px; top: 8px;
  font-size: 10px; font-weight: 800;
  color: var(--accent);
  background: rgba(31, 45, 68, 0.06);
  padding: 2px 6px;
  border-radius: var(--radius-full);
}

/* Natural search: search pill mockup */
.bsearch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-full);
  font-size: 12px;
  color: var(--text);
  box-shadow: 0 0 0 4px rgba(182, 84, 28, 0.08);
}
.bsearch svg { color: var(--accent); flex-shrink: 0; }
.bsearch em { font-style: normal; color: var(--text-soft); }
.bsearch kbd {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(31, 45, 68, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
}

@media (max-width: 1100px) {
  .beyond-grid { grid-template-columns: repeat(2, 1fr); }
  .beyond-card.beyond-wide { grid-column: span 2; }
}
@media (max-width: 700px) {
  .beyond-grid { grid-template-columns: 1fr; }
  .beyond-card.beyond-wide,
  .beyond-card.beyond-wide[data-accent="terracotta"] { grid-column: span 1; }
  .beyond-illus { height: 84px; }
  .bsearch { font-size: 11px; padding: 8px 12px; }
  /* Mobile: card body più leggibile */
  .beyond-card .bento-name { font-size: 18px; }
  .beyond-card .bento-desc { font-size: 14px; line-height: 1.55; }
}
@media (prefers-reduced-motion: reduce) {
  .beyond-illus { transition: none; }
  .beyond-card:hover .beyond-illus { transform: none; }
}

/* ===== Steps ===== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); position: relative; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .steps-connector { display: none; }
}

/* Gold dashed connector — draws via stroke-dashoffset when revealed.
   Sits BEHIND the step cards (z-index 0). */
.steps-connector {
  position: absolute;
  top: -8px; left: 0; right: 0;
  width: 100%; height: 40px;
  pointer-events: none;
  z-index: 0;
  /* Override [data-reveal] defaults: we animate the stroke, not the box */
  opacity: 1;
  transform: none;
  transition: none;
}
.steps-connector path {
  stroke-dashoffset: 800;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.steps-connector.is-revealed path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .steps-connector path { transition: none; stroke-dashoffset: 0; }
}
.step {
  position: relative;
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: var(--transition);
  color: var(--text);
}
/* Dark mode: rinforza contrasto interno step.
   --text-soft di default (#C9B89A) appariva sbiadito su navy. */
:root.dark .step h3,
:root.dark .step .h3 { color: var(--text); }
:root.dark .step p,
:root.dark .step .body { color: #D8C9A8; }
:root.dark .step-confirm { color: var(--gold-light, #E0B057); }
:root.dark .step-ordered-tags .ord-tag {
  background: rgba(168, 196, 154, 0.16);
  color: #B9D5A6;
}
:root.dark .step-ordered-tags .ord-tag svg {
  color: #B9D5A6;
  stroke: #B9D5A6;
}
:root.dark .step-ordered-converge .ord-icon { color: var(--gold-light, #E0B057); }
:root.dark .step-raw-icons .raw-icon { color: var(--text-muted); opacity: 0.7; }
:root.dark .step-raw-doc .step-doc-frame,
:root.dark .step-raw-doc .step-reading-lines { opacity: 0.55; }
:root.dark .step-raw-glass .glass-icon { opacity: 0.65; }
:root.dark .step-ordered-doc .ord-doc-drawn { color: var(--gold-light, #E0B057); }
:root.dark .step-ordered-doc .ord-doc-label { color: var(--gold-light, #E0B057); }
.step { position: relative; z-index: 1; }
.step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}
.step:hover .step-num {
  transform: rotate(12deg) scale(1.05);
  box-shadow: 0 4px 14px rgba(201, 146, 61, 0.4);
}
.step-num {
  position: absolute; top: -16px; left: var(--space-6);
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gold); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--text-base);
  box-shadow: var(--shadow-md);
  font-family: var(--font-display);
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 320ms ease;
}
.step-illus {
  width: 100%; height: 140px;
  display: flex; align-items: center; justify-content: center;
  margin: var(--space-2) 0 var(--space-4);
}

/* ============================================================
   STEP STAGE — 3 box che mostrano la trasformazione "chaos → order"
   quando il gufo cammina sopra. Stato raw (default) + ordered
   (.step.is-transformed). Dettagliato in stashie-landing.pdf §4.
   ============================================================ */
.step-stage {
  position: relative;
  width: 100%;
  height: 140px;
  margin: var(--space-2) 0 var(--space-4);
}
.step-raw, .step-ordered, .step-confirm {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition:
    opacity 900ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 900ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.step-raw  { opacity: 1; transform: scale(1); }
.step-ordered { opacity: 0; transform: scale(0.88); }
.step.is-transformed .step-raw     { opacity: 0; transform: scale(1.08); }
.step.is-transformed .step-ordered { opacity: 1; transform: scale(1); }
/* Glow lampo sul box mentre si trasforma — segnala l'evento. */
.step.is-transformed {
  animation: step-transform-flash 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes step-transform-flash {
  0%   { box-shadow: 0 0 0 0 rgba(201, 146, 61, 0); }
  35%  { box-shadow: 0 0 0 8px rgba(201, 146, 61, 0.18), 0 12px 30px rgba(201, 146, 61, 0.22); }
  100% { box-shadow: 0 0 0 0 rgba(201, 146, 61, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .step.is-transformed { animation: none; }
}

/* Confirm micro-label "Ricevuto." / "Capito." / "Trovato." in cima */
.step-confirm {
  align-items: flex-start;
  padding-top: 2px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  font-weight: 500;
  color: var(--gold-deep);
  opacity: 0;
  letter-spacing: 0.02em;
  transition: opacity 320ms ease 280ms;
}
.step.is-transformed .step-confirm { opacity: 1; }

/* ===== BOX 1 — 4 micro-icone sparpagliate → convergenti ===== */
.step-raw-icons {
  /* 4 icone sparpagliate con transform per ognuna */
}
.step-raw-icons .raw-icon {
  position: absolute;
  width: 30px; height: 30px;
  color: var(--text-soft);
  opacity: 0.55;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.step-raw-icons .raw-icon svg { width: 100%; height: 100%; display: block; }
.raw-icon-camera { left: 14%; top: 20%; transform: rotate(-12deg); }
.raw-icon-pdf    { right: 18%; top: 12%; transform: rotate(8deg); }
.raw-icon-audio  { left: 22%; bottom: 18%; transform: rotate(15deg); }
.raw-icon-email  { right: 14%; bottom: 24%; transform: rotate(-6deg); }

.step-ordered-converge {
  gap: 10px;
}
.step-ordered-converge .ord-icon {
  width: 32px; height: 32px;
  color: var(--gold);
  filter: drop-shadow(0 0 0 rgba(201, 146, 61, 0));
  transition: filter 600ms ease, transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.step-ordered-converge .ord-icon svg { width: 100%; height: 100%; display: block; }
.step.is-transformed .step-ordered-converge .ord-icon {
  animation: ord-glow-pulse 800ms cubic-bezier(0.16, 1, 0.3, 1) 250ms;
}
.step.is-transformed .step-ordered-converge .ord-icon:nth-child(2) { animation-delay: 320ms; }
.step.is-transformed .step-ordered-converge .ord-icon:nth-child(3) { animation-delay: 390ms; }
.step.is-transformed .step-ordered-converge .ord-icon:nth-child(4) { animation-delay: 460ms; }
@keyframes ord-glow-pulse {
  0%   { filter: drop-shadow(0 0 0 rgba(201, 146, 61, 0)); transform: scale(0.85); }
  50%  { filter: drop-shadow(0 0 12px rgba(201, 146, 61, 0.55)); transform: scale(1.08); }
  100% { filter: drop-shadow(0 0 0 rgba(201, 146, 61, 0)); transform: scale(1); }
}

/* ===== BOX 2 — doc placeholder → tag cascata OCR/classificato/dominio/scadenza ===== */
.step-raw-doc {
  flex-direction: column;
  gap: 4px;
}
.step-raw-doc .step-doc-frame {
  width: 56px; height: 56px;
  color: var(--text-muted);
  opacity: 0.45;
}
.step-raw-doc .step-reading-lines {
  width: 50px; height: 24px;
  color: var(--text-muted);
  opacity: 0.5;
}
.step-ordered-tags {
  flex-direction: column;
  gap: 6px;
  padding: 0 14px;
}
.step-ordered-tags .ord-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 7px;
  background: rgba(44, 77, 58, 0.08);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  color: var(--forest, #2C4D3A);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 280ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.step-ordered-tags .ord-tag svg {
  width: 12px; height: 12px;
  color: var(--forest, #2C4D3A);
  stroke: var(--forest, #2C4D3A);
}
.step-ordered-tags .ord-tag em { font-style: normal; }
.step.is-transformed .step-ordered-tags .ord-tag {
  opacity: 1;
  transform: translateX(0);
}
.step.is-transformed .step-ordered-tags .ord-tag[data-tag="1"] { transition-delay: 280ms; }
.step.is-transformed .step-ordered-tags .ord-tag[data-tag="2"] { transition-delay: 360ms; }
.step.is-transformed .step-ordered-tags .ord-tag[data-tag="3"] { transition-delay: 440ms; }
.step.is-transformed .step-ordered-tags .ord-tag[data-tag="4"] { transition-delay: 520ms; }

/* ===== BOX 3 — lente → doc che si disegna + label gold ===== */
.step-raw-glass .glass-icon {
  width: 64px; height: 64px;
  color: var(--text-muted);
  opacity: 0.55;
}
.step-ordered-doc {
  flex-direction: column;
  gap: 6px;
}
.step-ordered-doc .ord-doc-drawn {
  width: 56px; height: 56px;
  color: var(--gold-deep);
}
.step-ordered-doc .ord-doc-drawn line,
.step-ordered-doc .ord-doc-drawn path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 800ms cubic-bezier(0.16, 1, 0.3, 1) 200ms;
}
.step.is-transformed .step-ordered-doc .ord-doc-drawn line,
.step.is-transformed .step-ordered-doc .ord-doc-drawn path {
  stroke-dashoffset: 0;
}
.step-ordered-doc .ord-doc-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-deep);
  opacity: 0;
  transition: opacity 280ms ease 800ms;
}
.step.is-transformed .step-ordered-doc .ord-doc-label { opacity: 1; }

/* Reduced motion: rivelazione istantanea, niente glow/pulse */
@media (prefers-reduced-motion: reduce) {
  .step-raw, .step-ordered, .step-confirm,
  .step-ordered-converge .ord-icon,
  .step-ordered-tags .ord-tag,
  .step-ordered-doc .ord-doc-drawn line,
  .step-ordered-doc .ord-doc-drawn path,
  .step-ordered-doc .ord-doc-label {
    transition: none !important;
    animation: none !important;
  }
  .step.is-transformed .step-ordered-doc .ord-doc-drawn line,
  .step.is-transformed .step-ordered-doc .ord-doc-drawn path {
    stroke-dashoffset: 0;
  }
}

/* Step mark — the small shape badge in each step's top-right corner.
   Hidden by default; the owl intro animation toggles `.is-visible` on
   it as the owl arrives at each step ("dropping" the action symbol
   there). For returning visitors, the boot script reveals all three
   immediately so the page reads the same on second load. */
.step-mark {
  position: absolute;
  top: -16px;
  right: var(--space-6);
  width: 44px;
  height: 44px;
  opacity: 0;
  transform: scale(0.4) rotate(-30deg);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(31, 45, 68, 0.22));
}
.step-mark.is-visible {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.step-mark svg {
  /* Explicit dimensions: same iOS Safari issue as step-illus —
     `width: 100%` on a flex/absolute SVG with negative viewBox
     coords renders at intrinsic viewBox size (140×160). Force exact
     44×44 so it lands at the right size everywhere. */
  width: 44px;
  height: 44px;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .step-mark { transition: opacity 200ms linear; transform: none; }
  .step-mark.is-visible { transform: none; }
}
.step-illus svg {
  /* Explicit dimensions: iOS Safari renders SVGs without intrinsic
     size (no width/height attr + width:auto in CSS) at 0×0 inside a
     flex container. Always give it concrete dimensions, then cap
     with max-* so the aspect ratio (viewBox 200×160) is preserved. */
  width: 180px;
  height: 140px;
  max-width: 100%;
  max-height: 100%;
}
@media (max-width: 700px) {
  .step-illus { overflow: hidden; max-width: 100%; }
  .step-illus svg { transform: none !important; }
}
.step h3 { margin: 0 0 var(--space-2); }
/* Each step gets a unique tinted background for variety (light mode) */
.step:nth-child(1) { background: linear-gradient(180deg, #FFF8EC 0%, #F4E8DA 100%); }
.step:nth-child(2) { background: linear-gradient(180deg, var(--bg-card) 0%, #EBD8C2 100%); }
.step:nth-child(3) { background: linear-gradient(180deg, var(--bg-card) 0%, #E8C9C0 100%); }
/* Dark mode: tre tinte navy/gold/rose discrete invece dei cream
   gradient che rendono illeggibili i testi --text=cream-light. */
:root.dark .step:nth-child(1) {
  background: linear-gradient(180deg, #243652 0%, #1A2740 100%);
}
:root.dark .step:nth-child(2) {
  background: linear-gradient(180deg, #1F2D44 0%, #283D52 100%);
}
:root.dark .step:nth-child(3) {
  background: linear-gradient(180deg, #1F2D44 0%, #2A2F4A 100%);
}
:root.dark .step { border-color: rgba(244, 232, 218, 0.08); }

/* ===== Chat mockup ===== */
.chat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
@media (max-width: 900px) { .chat-grid { grid-template-columns: 1fr; } }
.chat-bullets { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-8); }
.chat-bullet { display: flex; align-items: flex-start; gap: var(--space-3); }
.chat-bullet-check { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--forest); color: var(--cream); display: flex; align-items: center; justify-content: center; }
.chat-bullet-check svg { width: 14px; height: 14px; }
.chat-mockup { background: var(--night-deep); border-radius: 28px; padding: var(--space-6); box-shadow: var(--shadow-xl); max-width: 380px; margin: 0 auto; width: 100%; }
.chat-header { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid rgba(244, 232, 218, 0.1); }
.chat-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.chat-avatar svg { width: 32px; height: 32px; }
.chat-name { color: var(--cream); font-weight: 700; font-size: var(--text-sm); }
.chat-status { color: var(--rose); font-size: var(--text-xs); }
.chat-messages { padding: var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-3); }
.chat-bubble { max-width: 85%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: var(--text-sm); line-height: 1.4; position: relative; }
.chat-bubble.in { background: var(--night-soft); color: var(--cream); align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-bubble.out { background: var(--forest); color: var(--cream); align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-bubble .highlight { color: var(--gold); font-weight: 700; }
.chat-time { font-size: 10px; opacity: 0.6; margin-top: var(--space-1); }

/* ===== FAQ ===== */
.faq { display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
.faq-item:hover {
  border-color: var(--gold);
  box-shadow: 0 4px 14px rgba(201, 146, 61, 0.10);
}
.faq-item:hover .faq-q::after { color: var(--gold-deep); transform: scale(1.1); }
.faq-item.open { border-color: var(--gold); background: linear-gradient(180deg, var(--bg-card), rgba(244, 232, 218, 0.4)); }
.faq-q {
  padding: var(--space-6) var(--space-12);
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  font-weight: 700;
  color: var(--text);
  user-select: none;
}
.faq-q::after {
  content: '+';
  font-size: 28px;
  color: var(--gold);
  font-weight: 300;
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), color 220ms ease;
  flex-shrink: 0;
  margin-left: var(--space-4);
  display: inline-block;
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 380ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms ease;
}
.faq-item.open .faq-a { max-height: 600px; opacity: 1; }
.faq-a-inner {
  padding: 0 var(--space-12) var(--space-6);
  color: var(--text-soft);
  line-height: 1.65;
}
.faq-a-inner a {
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold);
}
.faq-a-inner a:hover { color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-q::after, .faq-a { transition: none; }
}

/* ===== Legal pages (privacy/terms) =====
   Same brand-shell as the landing but optimised for long-form reading. */
.legal-page {
  padding: var(--space-16) 0 var(--space-24);
  background: var(--bg);
}
.legal-page h2.h3 { margin-top: var(--space-12); margin-bottom: var(--space-4); }
.legal-page p { margin-bottom: var(--space-4); line-height: 1.7; color: var(--text); }
.legal-page p strong { color: var(--text); font-weight: 700; }
.legal-page ul {
  margin: 0 0 var(--space-4) var(--space-6);
  padding: 0;
  line-height: 1.7;
}
.legal-page ul li { margin-bottom: var(--space-2); }
.legal-page a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.legal-page a:hover { color: var(--gold); }
.legal-page code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 1px 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}

/* ===== Footer ===== */
.footer { background: var(--night); color: var(--cream); padding: var(--space-16) 0 var(--space-8); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-12); margin-bottom: var(--space-12); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.footer h5 { color: var(--cream); font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-4); letter-spacing: 0.05em; text-transform: uppercase; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.footer a { color: var(--rose); text-decoration: none; font-size: var(--text-sm); transition: var(--transition); }
.footer a:hover { color: var(--gold); }
.footer-bottom { border-top: 1px solid var(--night-soft); padding-top: var(--space-6); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.footer-tag { color: var(--rose); font-size: var(--text-xs); }

/* Footer signature — micro brand line under tagline */
.footer-signature {
  margin-top: var(--space-4);
  color: var(--rose);
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.85;
  max-width: 280px;
}
.footer-signature .serif {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--gold-light, var(--gold));
}

/* Footer lang switcher (centered between copyright and made-with) */
.footer-lang {
  display: inline-flex;
  gap: 4px;
  padding: 2px;
  background: rgba(244, 232, 218, 0.08);
  border-radius: var(--radius-full);
  border: 1px solid rgba(244, 232, 218, 0.15);
}
.footer-lang .lang-btn {
  background: transparent;
  border: 0;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--rose);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: background 200ms, color 200ms;
  font-family: var(--font-body);
}
.footer-lang .lang-btn:hover { color: var(--cream); }
.footer-lang .lang-btn.active { background: var(--gold); color: var(--text); }


/* ============================================================
   STICKY CTA MOBILE (T13) — only <768px, after 600px scroll
   ============================================================ */
.sticky-cta-mobile {
  display: none;
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(110%);
  z-index: 50;
  padding: 12px 22px;
  background: var(--gold);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border-radius: var(--radius-full);
  box-shadow:
    0 12px 28px rgba(31, 45, 68, 0.25),
    0 4px 10px rgba(201, 146, 61, 0.3);
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), opacity 280ms ease;
}
.sticky-cta-mobile.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.sticky-cta-mobile:active { transform: translateX(-50%) translateY(0) scale(0.97); }
@media (max-width: 767px) {
  .sticky-cta-mobile { display: inline-flex; }
  /* L'owl-follower è necessario per l'intro animation sui 3 step (vola
     sopra paper→folder→magnifier). Su mobile resta visibile ma più
     piccolo. La callout "Join the beta" viene nascosta perché la
     copre la sticky-cta-mobile centrale. */
  .owl-follower { width: 44px; height: 50px; }
  .owl-follower .owl-callout { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta-mobile { transition: none; }
}


/* ============================================================
   CTA FINAL — LivingOwl LG + stagger cascade + arrow pulse + trust line
   ============================================================ */
.living-owl-cta {
  display: block;
  width: 96px; height: 96px;
  margin: 0 auto var(--space-6);
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.35));
}
.living-owl-cta .living-owl-svg { width: 100%; height: 100%; }
@media (max-width: 720px) {
  .living-owl-cta { width: 80px; height: 80px; }
}

/* Override data-reveal default delay so the cascade is hand-tuned */
.cta-stack > [data-reveal]:nth-child(1) { transition-delay: 0ms; }
.cta-stack > [data-reveal]:nth-child(2) { transition-delay: 100ms; }
.cta-stack > [data-reveal]:nth-child(3) { transition-delay: 200ms; }
.cta-stack > [data-reveal]:nth-child(4) { transition-delay: 300ms; }
.cta-stack > [data-reveal]:nth-child(5) { transition-delay: 400ms; }

.cta-primary .cta-arrow {
  display: inline-block;
  margin-left: 8px;
  font-weight: 800;
  animation: cta-arrow-pulse 2.4s ease-in-out infinite;
}
@keyframes cta-arrow-pulse {
  0%, 100% { transform: translateX(0); opacity: 0.85; }
  50%      { transform: translateX(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-primary .cta-arrow { animation: none; opacity: 1; }
}

.cta-trust {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--rose-soft, var(--rose));
  opacity: 0.78;
  max-width: 600px;
  margin-left: auto; margin-right: auto;
  line-height: 1.6;
}


/* ============================================================
   TRUST BAND — 3 valori (dati tuoi · setup 30s · impara) tra
   hero e explore. Spostati dall'hero per non appesantirne l'inizio.
   ============================================================ */
.trust-band {
  padding: var(--space-8) 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trust-band-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-10);
  flex-wrap: wrap;
}
.trust-band-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-soft);
  font-size: var(--text-sm);
  font-weight: 600;
}
.trust-band-item svg {
  color: var(--gold-deep);
  stroke: var(--gold-deep);
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .trust-band { padding: var(--space-6) 0; }
  .trust-band-row { gap: var(--space-4); flex-direction: column; align-items: flex-start; max-width: 320px; margin: 0 auto; }
  .trust-band-item { font-size: 14px; }
}


/* ============================================================
   HERO TOGGLE — input/output pill pair, JS-driven .active swap
   ============================================================ */
.hero-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 6px);
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: 500;
  margin: var(--space-2) 0 var(--space-2);
  box-shadow: 0 1px 3px rgba(31, 45, 68, 0.04);
  white-space: nowrap;
}
.hero-toggle-pill {
  padding: 4px 12px;
  border-radius: var(--radius-full);
  transition: color 380ms ease, background 380ms ease;
}
.hero-toggle-pill.active {
  color: var(--text);
  background: rgba(201, 146, 61, 0.14);
  font-weight: 600;
}
.hero-toggle-sep { color: var(--text-muted); opacity: 0.5; padding: 0 2px; }
@media (max-width: 720px) {
  .hero-toggle { font-size: 12px; padding: 4px 8px; max-width: 100%; flex-wrap: wrap; justify-content: center; }
  .hero-toggle-pill { padding: 3px 8px; }
}


/* ============================================================
   LIVING OWL — pupil tracking, blink, hover tilt
   Markup: <span class="living-owl" data-size="xl|lg|md|sm">…SVG…</span>
   See script.js → initLivingOwl().
   ============================================================ */
/* ============================================================
   CURSOR SPOTLIGHT (audit §5.11) — gold radial gradient subtle che
   segue il mouse. Solo desktop, max opacity 0.04. JS aggiorna
   --spot-x/--spot-y. Disabilitato mobile / reduced-motion.
   ============================================================ */
.cursor-spotlight {
  position: fixed;
  pointer-events: none;
  inset: 0;
  z-index: 1;
  --spot-x: 50%;
  --spot-y: 50%;
  background: radial-gradient(circle 600px at var(--spot-x) var(--spot-y),
    rgba(201, 146, 61, 0.04) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 800ms ease;
}
.cursor-spotlight.is-active { opacity: 1; }
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .cursor-spotlight { display: none; }
}

/* ============================================================
   HERO SCROLL CUE (audit §4.2) — freccia pulsante in fondo hero
   ============================================================ */
.hero-scroll-cue {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
  transition: opacity 220ms ease, color 220ms ease;
  animation: scroll-cue-pulse 2.4s ease-in-out infinite;
}
.hero-scroll-cue:hover { opacity: 1; color: var(--gold-deep); }
.hero-scroll-cue svg { width: 16px; height: 16px; }
@keyframes scroll-cue-pulse {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
  50%      { transform: translateX(-50%) translateY(4px); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue { animation: none; }
}
@media (max-width: 720px) {
  .hero-scroll-cue { display: none; } /* su mobile lo scroll è naturale */
}

/* ============================================================
   PARALLAX OWL HERO (audit §5.14) — il gufo XL si sposta
   leggermente verso l'alto al scroll. JS aggiorna --owl-parallax.
   Solo desktop + no reduced-motion.
   ============================================================ */
.hero-mascot-anchor {
  --owl-parallax: 0px;
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .hero-mascot-anchor > .living-owl-hero {
    transform: translateY(var(--owl-parallax, 0px));
    transition: transform 100ms linear;
  }
}


.living-owl {
  display: inline-block;
  line-height: 0;
  --pupil-x: 0px;
  --pupil-y: 0px;
  transform-origin: 50% 50%;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.living-owl[data-hovered="true"] { transform: rotate(6deg); }
.living-owl[data-tilt="left"][data-hovered="true"] { transform: rotate(-6deg); }

.living-owl-svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  /* Idle breath: subtle scale that says "alive" even on mobile, even
     without pointer tracking. Single animation on the SVG so it doesn't
     fight pupil transform or hover tilt on the wrapper. */
  animation: owl-breathe 5s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes owl-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.018); }
}

/* Pupils move via CSS variables set by JS on mousemove */
.living-owl-svg .owl-pupil {
  transition: transform 200ms ease-out;
  transform: translate(var(--pupil-x), var(--pupil-y));
  transform-box: fill-box;
  transform-origin: center;
}

/* Eyelids: scaleY from 0 → 1 to "close", clipped by the disc-shaped clipPath */
.living-owl-svg .owl-eyelid {
  transform: scaleY(0);
  transform-origin: center top;
  transform-box: fill-box;
  transition: transform 90ms ease-in;
}
.living-owl[data-blinking="true"] .owl-eyelid { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
  .living-owl { transition: none; }
  .living-owl-svg { animation: none; }
  .living-owl-svg .owl-pupil,
  .living-owl-svg .owl-eyelid { transition: none; transform: none; }
  .living-owl[data-hovered="true"] { transform: none; }
}
@media (max-width: 767px) {
  /* No pointer → no pupil tracking. Blink still active. */
  .living-owl-svg .owl-pupil { transform: none; }
}


/* ============================================================
   SCROLL REVEAL — fade-up + slide variants, triggered by
   IntersectionObserver. See script.js → initScrollReveal().
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

[data-reveal="slide-left"]                   { transform: translateX(-24px); }
[data-reveal="slide-left"].is-revealed       { transform: translateX(0); }
[data-reveal="slide-right"]                  { transform: translateX(24px); }
[data-reveal="slide-right"].is-revealed      { transform: translateX(0); }
[data-reveal="scale"]                        { transform: scale(0.96); }
[data-reveal="scale"].is-revealed            { transform: scale(1); }
[data-reveal="fade"]                         { transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1; transform: none; transition: none;
    transition-delay: 0ms !important;
  }
}


/* Subtle rose accent on #chat (duo) section — radial gradient from
   top-center, brand-coherent breath. */
#chat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(217, 168, 154, 0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
#chat > .container { position: relative; z-index: 1; }


/* ============================================================
   TWO SIDES, ONE PRODUCT — homepage #chat section (chat + dash
   shown together as input/output of the same archive)
   ============================================================ */
.duo-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}
.duo-curve {
  position: absolute;
  top: 35%;
  left: 38%;
  width: 24%;
  height: 80px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}
.duo-curve path {
  stroke-dashoffset: 200;
  animation: duo-curve-draw 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}
@keyframes duo-curve-draw {
  to { stroke-dashoffset: 0; }
}
.duo-curve-arrow {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  color: var(--gold-deep);
  font-weight: 800;
  z-index: 1;
  background: var(--bg-card);
  border: 1.5px solid var(--gold);
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(201, 146, 61, 0.25);
  animation: duo-arrow-osc 3s ease-in-out infinite alternate;
}
@keyframes duo-arrow-osc {
  0%   { transform: translateX(-50%) translateX(-30px) scale(1); }
  50%  { transform: translateX(-50%) scale(1.1); }
  100% { transform: translateX(-50%) translateX(30px) scale(1); }
}
@media (max-width: 900px) {
  .duo-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .duo-curve, .duo-curve-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .duo-curve path { animation: none; stroke-dashoffset: 0; }
  .duo-curve-arrow { animation: none; }
}
.duo-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.duo-eyebrow {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--gold-deep);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.duo-side .chat-mockup { margin-top: 0; }
.duo-dash-wrap {
  padding: var(--space-2);
  background: linear-gradient(180deg, var(--cream-deep) 0%, var(--bg-card) 100%);
  border-radius: var(--radius-xl, 18px);
  border: 1px solid var(--border);
  box-shadow:
    0 16px 40px rgba(31, 45, 68, 0.16),
    0 4px 12px rgba(31, 45, 68, 0.06);
  position: relative;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms ease;
}
.duo-dash-wrap svg { display: block; width: 100%; height: auto; border-radius: 12px; }
.duo-dash-wrap:hover { transform: scale(1.02); box-shadow: 0 28px 60px rgba(31, 45, 68, 0.22); }
/* Laptop "stand" via pseudo: trapezoid + base bar */
.duo-dash-wrap::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 18%;
  height: 10px;
  background: var(--cream-deep);
  border-radius: 0 0 6px 6px;
  transform: translateX(-50%);
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0% 100%);
}
.duo-dash-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: 36%;
  height: 5px;
  background: var(--cream-deep);
  border-radius: 0 0 4px 4px;
  transform: translateX(-50%);
  box-shadow: 0 6px 12px rgba(31, 45, 68, 0.08);
}

/* Phone-frame for chat-mockup on duo: subtle device chrome highlight + hover scale */
.duo-side .chat-mockup {
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.duo-side .chat-mockup:hover { transform: scale(1.02); }
.duo-summary {
  color: var(--text-soft);
  font-size: var(--text-sm);
  line-height: 1.6;
  padding: 0 var(--space-2);
}
.duo-summary strong { color: var(--gold-deep); font-weight: 700; }


/* ============================================================
   HERO DEVICE CLUSTER — phone (chat) + desktop (dashboard)
   shown together below the trust line. Visual proof of the
   dual promise: chat for input, dashboard for control.
   ============================================================ */
.hero-cluster {
  margin: var(--space-12) auto 0;
  max-width: 980px;
  width: 100%;
}
.hero-cluster-stage {
  position: relative;
  padding-bottom: 36px;
}
.hero-cluster-dash {
  width: 100%;
  padding: var(--space-2);
  background: linear-gradient(180deg, var(--cream-deep) 0%, var(--bg-card) 100%);
  border-radius: var(--radius-xl, 18px);
  box-shadow:
    0 24px 60px rgba(31, 45, 68, 0.22),
    0 4px 12px rgba(31, 45, 68, 0.08);
}
.hero-cluster-dash svg { display: block; width: 100%; height: auto; border-radius: 12px; }
.hero-cluster-phone {
  position: absolute;
  left: -16px;
  bottom: -24px;
  width: 168px;
  transform: rotate(-6deg);
  filter: drop-shadow(0 18px 30px rgba(31, 45, 68, 0.25));
}
.hero-cluster-phone svg { display: block; width: 100%; height: auto; }

/* ===== CHAT DEMO overlay (T2) =====
   Phone-mockup is chrome only; the conversation lives as HTML bubbles
   positioned over the chat area. Choreographed by initChatDemo(). */
.hero-cluster-dash { position: relative; }
.dash-highlight {
  position: absolute;
  border-radius: 6px;
  pointer-events: none;
  border: 2px solid transparent;
  box-shadow: 0 0 0 0 rgba(201, 146, 61, 0);
  opacity: 0;
  transition:
    opacity 200ms ease,
    border-color 200ms ease,
    box-shadow 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dash-highlight.is-pulsing {
  opacity: 1;
  border-color: var(--gold);
  box-shadow:
    0 0 0 4px rgba(201, 146, 61, 0.3),
    0 0 24px rgba(201, 146, 61, 0.55);
}
/* Coordinates are % of .hero-cluster-dash size — derived from
   dash-mockup SVG viewBox 720×440 + .hero-cluster-dash padding 8px.
   Use calc() to subtract the padding offset. */
.dash-highlight-policy  { top: 32.2%; left: 75.0%; width: 22.6%; height: 11.4%; }
.dash-highlight-insight { top: 65.0%; left: 75.0%; width: 22.6%; height: 17.6%; }

.hero-cluster-phone { position: absolute; }  /* keep abs from earlier */
.phone-chat-overlay {
  position: absolute;
  inset: 16.8% 8.5% 14.0% 8.5%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: 9px;
  line-height: 1.35;
  pointer-events: none;
  overflow: hidden;
}
.phone-bubble,
.phone-typing {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 380ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 82%;
  padding: 6px 9px;
  border-radius: 11px;
}
.phone-bubble.out {
  background: #C9923D;
  color: #FFF8EC;
  align-self: flex-end;
  font-weight: 600;
  border-bottom-right-radius: 3px;
}
.phone-bubble.in {
  background: #F4E8DA;
  color: #1F2D44;
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}
.phone-bubble.in em { color: var(--gold-deep); font-style: italic; font-weight: 600; }
.phone-bubble.in strong { color: var(--gold-deep); font-weight: 700; }
.phone-bubble.in small { color: var(--text-soft); font-size: 8px; }

.phone-typing {
  align-self: flex-start;
  background: #F4E8DA;
  display: flex;
  gap: 3px;
  padding: 7px 10px;
  border-radius: 11px;
  border-bottom-left-radius: 3px;
  width: fit-content;
}
.phone-typing span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typing-dot 1.2s ease-in-out infinite;
}
.phone-typing span:nth-child(2) { animation-delay: 0.15s; }
.phone-typing span:nth-child(3) { animation-delay: 0.30s; }

@keyframes typing-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-3px); }
}

.phone-bubble.is-visible,
.phone-typing.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .phone-bubble, .phone-typing { transition: none; opacity: 1; transform: none; }
  .phone-typing { display: none; }
  .dash-highlight { transition: none; }
}

/* Mobile: phone-mockup grows, chat overlay font scales up for readability */
@media (max-width: 720px) {
  .hero-cluster-phone {
    width: 220px;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    bottom: auto;
    position: relative;
    margin: var(--space-6) auto 0;
  }
  .phone-chat-overlay { font-size: 11px; gap: 7px; }
  .phone-bubble, .phone-typing { padding: 7px 11px; border-radius: 12px; }
  .phone-bubble.in small { font-size: 10px; }
}
@media (max-width: 760px) {
  .hero-cluster { margin-top: var(--space-8); }
  .hero-cluster-labels { display: none; }
  .hero-cluster-stage { padding-bottom: 0; }
  .hero-cluster-phone {
    position: static;
    margin: var(--space-6) auto 0;
    transform: none;
    width: 200px;
  }
}


/* ============================================================
   EXPLORE — 2 grandi card "capitoli" che linkano alle pagine
   dedicate (/cosa-puoi-fare e /il-tuo-archivio). Sostituisce
   le sezioni Beyond filing + Archive teaser per snellire la home.
   ============================================================ */
.explore-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  max-width: 1000px;
  margin: 0 auto;
}
.explore-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* +24px top per ospitare il gufetto peek + più respiro su mobile. */
  padding: calc(var(--space-12) + 12px) var(--space-12) var(--space-12);
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl, 22px);
  text-decoration: none;
  color: inherit;
  transition:
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 280ms ease,
    box-shadow 320ms ease;
  overflow: hidden;
  min-height: 240px;
  isolation: isolate;
}
.explore-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 100%, var(--explore-accent, var(--gold)) 0%, transparent 55%);
  opacity: 0.08;
  pointer-events: none;
  transition: opacity 320ms ease;
  z-index: 0;
}
.explore-card::after {
  /* Halo decorativo top-left, accentua il gradient e dà profondità. */
  content: '';
  position: absolute;
  top: -40%;
  left: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, var(--explore-accent, var(--gold)) 0%, transparent 60%);
  opacity: 0;
  filter: blur(20px);
  transition: opacity 480ms ease;
  pointer-events: none;
  z-index: 0;
}
.explore-card > * { position: relative; z-index: 1; }
.explore-card:hover {
  transform: translateY(-4px);
  border-color: var(--explore-accent, var(--gold));
  box-shadow:
    0 22px 50px rgba(31, 45, 68, 0.16),
    0 4px 12px rgba(31, 45, 68, 0.06);
}
.explore-card:hover::before { opacity: 0.16; }
.explore-card:hover::after { opacity: 0.18; }
/* Gufetto peek in angolo top-right — invita a cliccare con un blink. */
.explore-card-owl {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 36px;
  height: 36px;
  color: var(--explore-accent, var(--gold));
  z-index: 2;
  transition:
    transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
    color 280ms ease;
  transform-origin: center bottom;
}
.explore-card-owl svg { width: 100%; height: 100%; display: block; }
.explore-card-owl::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--explore-accent, var(--gold)) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 320ms ease;
  z-index: -1;
}
.explore-card:hover .explore-card-owl {
  transform: translateY(-4px) rotate(-12deg) scale(1.08);
  color: var(--gold-light, var(--gold));
}
.explore-card:hover .explore-card-owl::after { opacity: 0.45; }
/* Wink loop sul gufetto — micro-segnale che la card è interattiva. */
@keyframes explore-owl-wink {
  0%, 88%, 100% { transform: rotate(0deg) scale(1); }
  92% { transform: rotate(-4deg) scale(1.04); }
  96% { transform: rotate(4deg) scale(1.04); }
}
.explore-card:not(:hover) .explore-card-owl {
  animation: explore-owl-wink 5.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .explore-card-owl { animation: none !important; }
}
.explore-card-uc { --explore-accent: var(--gold); }
.explore-card-arc { --explore-accent: var(--gold-deep); }
.explore-card-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--explore-accent, var(--gold));
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.explore-card-eyebrow::before {
  content: '✦';
  font-size: 12px;
  opacity: 0.85;
}
.explore-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: -0.02em;
}
.explore-card-desc {
  font-size: var(--text-base);
  color: var(--text-soft);
  line-height: 1.55;
  flex: 1;
}
.explore-card-cta {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--explore-accent, var(--gold-deep));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-2);
  transition: gap 220ms ease;
}
.explore-card:hover .explore-card-cta { gap: 14px; }
/* Dark mode: bg-card è navy, alziamo lievemente luminosità per profondità. */
:root.dark .explore-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 60%), var(--bg-card);
}
:root.dark .explore-card-desc { color: #D8C9A8; }
@media (max-width: 720px) {
  .explore-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  /* var(--space-7) non era definito nello scale → fallback a 0 e il
     testo finiva attaccato al bordo del card. Uso var(--space-8) (2rem)
     che garantisce inner padding touch-friendly anche su schermi
     stretti. */
  .explore-card { padding: calc(var(--space-8) + 8px) var(--space-8) var(--space-8); min-height: auto; }
  .explore-card-owl { top: 12px; right: 14px; width: 32px; height: 32px; }
}


/* ============================================================
   ARCHIVE TEASER (homepage section #archive) — promotes the
   dashboard as the "control center" so the chat-only framing
   doesn't dominate. Big mockup right, bullets left, CTA to
   the dedicated /il-tuo-archivio page.
   ============================================================ */
.archive-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-12);
  align-items: center;
}
@media (max-width: 1000px) {
  .archive-grid { grid-template-columns: 1fr; gap: var(--space-10); }
}
.archive-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.archive-bullet {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--space-4);
  align-items: flex-start;
}
.archive-bullet-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: rgba(201, 146, 61, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.archive-bullet-icon svg {
  width: 18px; height: 18px;
  color: var(--gold-deep);
  stroke: var(--gold-deep);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.archive-bullet strong {
  display: block;
  color: var(--text);
  font-weight: 700;
  font-size: var(--text-base);
  margin-bottom: 2px;
}
.archive-bullet span {
  display: block;
  color: var(--text-soft);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.archive-mockup-wrap {
  padding: var(--space-2);
  background: linear-gradient(180deg, var(--cream-deep) 0%, var(--bg-card) 100%);
  border-radius: var(--radius-xl, 18px);
  box-shadow:
    0 20px 60px rgba(31, 45, 68, 0.18),
    0 4px 12px rgba(31, 45, 68, 0.08);
  position: relative;
}
.archive-mockup-wrap svg { display: block; width: 100%; height: auto; }
@media (max-width: 1000px) {
  .archive-mockup-wrap { order: -1; margin: 0 calc(-1 * var(--space-4)); }
}

/* Control center zones — pulse gold-glow when .is-active. Cycle 8s. */
.dash-zone {
  position: absolute;
  border-radius: 6px;
  pointer-events: none;
  border: 2px solid transparent;
  box-shadow: 0 0 0 0 rgba(201, 146, 61, 0);
  opacity: 0;
  transition:
    opacity 280ms ease,
    border-color 280ms ease,
    box-shadow 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dash-zone.is-active {
  opacity: 1;
  border-color: var(--gold);
  box-shadow:
    0 0 0 4px rgba(201, 146, 61, 0.28),
    0 0 24px rgba(201, 146, 61, 0.5);
}
/* Coordinates relative to .archive-mockup-wrap (8px padding included). */
.dash-zone-deadlines  { top: 16.0%; left: 74.6%; width: 23.0%; height: 39.0%; }
.dash-zone-search     { top: 12.8%; left: 25.3%; width: 44.3%; height:  8.4%; }
.dash-zone-categories { top: 27.0%; left:  1.8%; width: 18.9%; height: 50.0%; }
.dash-zone-insights   { top: 61.0%; left: 74.6%; width: 23.0%; height: 33.5%; }

/* Bullet sync — active gets accent. */
.archive-bullet {
  border-radius: var(--radius-md);
  padding: 2px;
  margin: -2px;
  transition: background 400ms ease;
}
.archive-bullet.is-active {
  background: rgba(201, 146, 61, 0.08);
}
.archive-bullet.is-active .archive-bullet-icon {
  background: var(--gold);
  transition: background 300ms ease;
}
.archive-bullet.is-active .archive-bullet-icon svg {
  color: var(--cream-soft);
  stroke: var(--cream-soft);
}
.archive-bullet .archive-bullet-icon { transition: background 300ms ease; }
.archive-bullet .archive-bullet-icon svg { transition: color 300ms ease, stroke 300ms ease; }

@media (prefers-reduced-motion: reduce) {
  .dash-zone, .archive-bullet, .archive-bullet-icon, .archive-bullet-icon svg {
    transition: none;
  }
}


/* ============================================================
   ARCHIVIO PAGE (il-tuo-archivio.html)
   — Dashboard deep-dive page. Reuses .uc-section / .uc-grid /
   .uc-bullets primitives from the use-cases page, adds purpose-
   built feature visuals on the right column of each section.
   ============================================================ */

.arc-hero {
  padding: var(--space-20) 0 var(--space-12);
  background: var(--bg);
  text-align: center;
}
.arc-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--text-soft);
  font-weight: 600;
  margin-bottom: var(--space-6);
}
.arc-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0 auto var(--space-6);
  max-width: 820px;
}
.arc-hero p.lead {
  max-width: 640px;
  margin: 0 auto var(--space-12);
  color: var(--text-soft);
}
.arc-hero-mockup {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: var(--space-2);
  background: linear-gradient(180deg, var(--cream-deep) 0%, var(--bg-card) 100%);
  border-radius: var(--radius-xl, 18px);
  box-shadow:
    0 20px 60px rgba(31, 45, 68, 0.18),
    0 4px 12px rgba(31, 45, 68, 0.08);
}
.arc-hero-mockup svg { display: block; width: 100%; height: auto; }
@media (max-width: 720px) {
  .arc-hero { padding: var(--space-12) 0 var(--space-8); }
  .arc-hero-mockup { margin: 0 calc(-1 * var(--space-4)); border-radius: var(--radius-lg); }
}

/* ===== Shared right-column visual wrapper ===== */
.arc-visual-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.arc-mini-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-7);
  box-shadow: var(--shadow-md);
}
.arc-mini-card-pad { padding: var(--space-8); }
.arc-mini-eyebrow {
  font-size: 10px;
  font-weight: 800;
  color: var(--gold-deep);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

/* ===== Deadlines list (section 01) ===== */
.arc-deadline {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}
.arc-deadline.urgent {
  border-color: var(--gold);
  padding-left: calc(var(--space-4) + 4px);
}
.arc-deadline-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 2px 0 0 2px;
  background: var(--gold);
}
.arc-deadline-title { font-weight: 700; color: var(--text); font-size: var(--text-sm); }
.arc-deadline-meta { color: var(--text-soft); font-size: var(--text-xs); margin-top: 2px; }
.arc-deadline-eta {
  font-weight: 800;
  font-size: var(--text-xs);
  color: var(--gold-deep);
  background: rgba(201, 146, 61, 0.12);
  padding: 4px 8px;
  border-radius: var(--radius-full);
}
.arc-deadline-eta.soft { color: var(--text-muted); background: rgba(138, 126, 112, 0.12); }

/* ===== Search demo (section 02) ===== */
.arc-search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-full);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-2);
  box-shadow: 0 0 0 4px rgba(201, 146, 61, 0.08);
}
.arc-search-bar svg { color: var(--gold); flex-shrink: 0; }
.arc-search-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: var(--space-3);
  padding-left: var(--space-2);
}
.arc-search-result {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  transition: var(--transition);
}
.arc-search-result:hover { border-color: var(--gold); transform: translateX(2px); }
.arc-search-thumb {
  width: 44px;
  height: 52px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arc-search-thumb svg { width: 100%; height: 100%; }
.arc-search-title { font-weight: 700; color: var(--text); font-size: var(--text-sm); }
.arc-search-snippet { color: var(--text-soft); font-size: var(--text-xs); margin-top: 2px; }

/* ===== Categories list (section 03) ===== */
.arc-cat-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.arc-cat {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 14px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--text-soft);
  font-weight: 500;
  transition: var(--transition);
}
.arc-cat svg { color: currentColor; }
.arc-cat b { font-weight: 700; color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.arc-cat:hover { background: var(--bg-soft); color: var(--text); }
.arc-cat.active {
  background: var(--gold);
  color: var(--cream-soft);
  font-weight: 700;
}
.arc-cat.active b { color: rgba(255, 248, 236, 0.8); }

/* ===== Insights / stats (section 04) ===== */
.arc-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  width: 100%;
  max-width: 420px;
}
.arc-stat-card {
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 110px;
  justify-content: space-between;
}
.arc-stat-card.dark { background: var(--night); border-color: var(--night); }
.arc-stat-eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.arc-stat-card.dark .arc-stat-eyebrow { color: var(--rose); }
.arc-stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.arc-stat-value.gold { color: var(--gold-deep); }
.arc-stat-card.dark .arc-stat-value { color: var(--gold-light); }
.arc-stat-value-sm {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
.arc-stat-trend {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
}
.arc-stat-card.dark .arc-stat-trend { color: var(--rose); }
.arc-stat-trend.up { color: var(--gold-deep); }
.arc-stat-trend.warn { color: #B6541C; }

/* ===== Multi-device flow (section 05) ===== */
.arc-sync-flow {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--space-3);
}
.arc-sync-phone {
  width: 90px;
  height: 160px;
  background: var(--night);
  border-radius: 14px;
  padding: 4px;
  flex-shrink: 0;
}
.arc-sync-phone-screen {
  width: 100%; height: 100%;
  background: var(--cream-soft);
  border-radius: 10px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.arc-sync-bubble {
  font-size: 9px;
  padding: 5px 8px;
  border-radius: 10px;
  font-weight: 600;
  max-width: 80%;
}
.arc-sync-bubble.out { background: var(--gold); color: var(--cream-soft); align-self: flex-end; }
.arc-sync-bubble.in { background: var(--bg); color: var(--text); align-self: flex-start; }
.arc-sync-bubble.in b { color: var(--gold-deep); }
.arc-sync-arrow {
  font-size: 24px;
  color: var(--gold);
  font-weight: 700;
}
.arc-sync-desktop {
  background: var(--cream-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  min-width: 0;
}
.arc-sync-desktop-chrome {
  background: var(--bg);
  padding: 6px 8px;
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
}
.arc-sync-desktop-chrome span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rose);
}
.arc-sync-desktop-chrome span:nth-child(2) { background: var(--gold-light); }
.arc-sync-desktop-chrome span:nth-child(3) { background: #A8C49A; }
.arc-sync-desktop-body {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.arc-sync-doc {
  aspect-ratio: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.arc-sync-doc.new {
  background: var(--gold-light);
  border-color: var(--gold);
  animation: arc-sync-pulse 1.6s ease-in-out infinite;
}
@keyframes arc-sync-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 146, 61, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(201, 146, 61, 0); }
}

/* ===== Privacy shield (section 06) ===== */
.arc-shield-stage {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(201, 146, 61, 0.18) 0%, transparent 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}
.arc-shield-caption {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--gold-light);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ===== Dark-section overrides for arc-* visuals (against navy bg) ===== */
.uc-section.dark .arc-mini-card { background: var(--cream-soft); border-color: var(--cream-deep); }
.uc-section.dark .arc-deadline { background: var(--cream-soft); }
.uc-section.dark .arc-search-result { background: var(--cream-soft); }
.uc-section.dark .arc-stat-card { background: var(--cream-soft); border-color: var(--cream-deep); }
.uc-section.dark .arc-stat-card.dark { background: var(--night-deep); border-color: var(--night-deep); }

/* Mobile: stack visuals below text */
@media (max-width: 900px) {
  .arc-stat-grid { grid-template-columns: 1fr 1fr; max-width: 100%; }
  .arc-sync-flow { grid-template-columns: 1fr; justify-items: center; }
  .arc-sync-arrow { transform: rotate(90deg); }
  .arc-sync-desktop { width: 100%; max-width: 280px; }
}

/* ===========================================================
   Install bridge section — QR (desktop) vs big button (mobile).
   JS in script.js adds `is-mobile` to <body> based on UA at load;
   CSS swaps the two variants. Default state = desktop (safer if
   JS is disabled: at least the QR is visible).
   =========================================================== */
.install-bridge {
  background: var(--cream);
  position: relative;
}
.install-qr-frame {
  display: inline-flex;
  padding: var(--space-5);
  border-radius: 20px;
  background: var(--bg);
  box-shadow: 0 10px 30px rgba(31, 45, 68, 0.08);
  border: 1px solid var(--cream-deep);
}
.install-qr {
  display: block;
  width: 240px;
  height: 240px;
}
.install-hint {
  font-size: var(--text-base, 1rem);
  color: var(--night);
  max-width: 540px;
  margin: 0 auto;
  font-weight: 500;
}
.install-hint-sub {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  max-width: 480px;
  margin: 0 auto;
}
.install-hint-sub a {
  color: var(--gold-deep);
  font-weight: 600;
}
.install-cta-mobile {
  font-size: 1.05rem;
  padding: 1rem 2.25rem;
}
.install-fallback {
  color: var(--ink-soft);
}
.install-fallback a {
  color: var(--gold-deep);
  font-weight: 600;
}

/* Default: show desktop QR, hide mobile CTA. */
.install-desktop { display: inline-flex; }
.install-mobile { display: none; }

/* Mobile UA (set by JS) → swap. */
body.is-mobile .install-desktop { display: none; }
body.is-mobile .install-mobile { display: block; }

/* Fallback for small viewports without JS UA detect (eg DevTools
   simulator before script runs): same swap by media query as a
   safety net. */
@media (max-width: 700px) {
  .install-desktop { display: none; }
  .install-mobile { display: block; }
}