/* ============================================================
   SACRANE — PAURA
   Shared stylesheet for all pages
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:wght@400;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --red: #ff1e1e;
  --black: #000;
  --white: #fff;
  --bg-top: #f2eff5;
  --bg-bottom: #a9a6b6;
}

/* html = page bottom colour (handles rubber-band bounce at bottom).
   body = page top colour (handles rubber-band bounce at top). */
html {
  width: 100%;
  overflow-x: hidden;
  background: var(--bg-bottom);
  overscroll-behavior: none;
}
body {
  width: 100%;
  overflow-x: hidden;
  background: var(--bg-top);
  font-family: 'Space Mono', monospace;
  cursor: default;
  overscroll-behavior: none;
}

/* Non-selectable gallery-style UX */
* { user-select: none; -webkit-user-select: none; }

img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

/* ============================================================
   SIDEBAR — shared across pages
   ============================================================ */
#sidebar {
  position: fixed;
  left: 0; top: 0;
  width: 160px;
  height: 100vh;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  padding: 28px 20px 24px;
  background: transparent;
}
#sidebar-logo { margin-bottom: 28px; transition: opacity 0.4s; }
#sidebar-logo img {
  width: 110px;
  height: auto;
  display: block;
  background: transparent;
}
#sidebar-logo a { display: block; outline: none; }

#sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  transition: opacity 0.45s, transform 0.45s;
}
#sidebar.scrolled #sidebar-nav {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-12px);
}
#sidebar-nav a {
  white-space: nowrap;
  color: var(--red);
  text-decoration: none;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  display: block;
  transition: opacity 0.12s;
  cursor: pointer;
}
#sidebar-nav a:hover { opacity: 0.55; transition: opacity 0s; }

#social-icons {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
  transition: opacity 0.45s, margin 0.45s;
}
#sidebar.scrolled #social-icons { margin-top: 0; }
#social-icons a {
  color: var(--red);
  text-decoration: none;
  transition: opacity 0.12s;
}
#social-icons a:hover { opacity: 0.55; transition: opacity 0s; }
.s-icon { width: 18px; height: 18px; fill: var(--red); display: block; }

#copyright {
  margin-top: 14px;
  font-size: 9px;
  color: var(--red);
  letter-spacing: 1px;
  opacity: 0.65;
}

/* ============================================================
   LANDING — STORE SECTION (legacy, retained for desktop styling
   of the oracle block; the section itself is gone from index)
   ============================================================ */
#store {
  position: relative;
  margin-top: -1px;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg-bottom);
  background-image: url('../assets/images/paura-sfondo-store-extended.png');
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 60px 80px 200px;
}
#store-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  letter-spacing: 10px;
  color: var(--red);
  margin-bottom: 56px;
}
.product-card {
  display: flex;
  gap: 56px;
  align-items: flex-start;
  max-width: 860px;
  width: 100%;
}
.product-card > img {
  width: 380px;
  height: 380px;
  object-fit: contain;
  flex-shrink: 0;
  /* Only the transform transitions; no filter here — Safari rendered the
     drop-shadow as a diffuse halo that looked like a light frame around
     the CD artwork after the hover/animation finished. */
  transition: transform 0.4s ease;
  outline: none !important;
  border: none !important;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  display: block;
}
.product-card > img:hover { transform: scale(1.04); }
.product-card > img:focus,
.product-card > img:focus-visible,
.product-card > img:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
.product-info { display: flex; flex-direction: column; gap: 14px; }
.product-info h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  letter-spacing: 2px;
  color: var(--red);
  line-height: 1.2;
}
.product-info p {
  font-size: 11px;
  color: #444;
  line-height: 1.7;
  letter-spacing: 0.3px;
}

/* Shared CTA button */
.btn-primary {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 4px;
  padding: 12px 36px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  align-self: flex-start;
  text-align: center;
  /* Resets required when .btn-primary is applied to <button>: iOS Safari
     adds its own chrome (rounded corners, gradient, shadow) unless we
     force appearance: none. Also neutralise focus outline in favour
     of a custom :focus-visible style below. */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  outline: none;
  line-height: normal;
}
button.btn-primary:focus-visible,
a.btn-primary:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}
.btn-primary:hover { background: var(--black); color: var(--red); }
.btn-primary--large { font-size: 20px; letter-spacing: 4px; padding: 14px 44px; }

/* ============================================================
   LANDING — PRODUCT MODAL
   ============================================================ */
#product-modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh;
  width: 100dvw; height: 100dvh;
  background: var(--white);
  z-index: 8000;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 48px 60px 80px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#product-modal.open { display: block; }

body.modal-locked {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--white) !important;
}
html.modal-open-bg { background: var(--white) !important; }

.modal-close {
  position: fixed;
  top: 20px; right: 40px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  color: var(--red);
  cursor: pointer;
  letter-spacing: 2px;
  z-index: 8001;
  transition: opacity 0.2s;
}
.modal-close:hover { opacity: 0.55; }

.modal-inner {
  max-width: 960px;
  margin: 40px auto 0;
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.gallery {
  flex: 0 1 420px;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gallery img { width: 100%; object-fit: contain; }
.detail {
  flex: 1 1 320px;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 4px;
}
.detail h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 2px;
  color: var(--black);
  line-height: 1.1;
}
.price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 52px;
  color: var(--red);
  letter-spacing: 2px;
}
.desc {
  font-size: 12px;
  color: #222;
  line-height: 1.9;
  letter-spacing: 0.3px;
}
.includes { border-top: 1px solid #ddd; padding-top: 16px; }
.includes h4 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--red);
  margin-bottom: 8px;
}
.includes ul { list-style: none; }
.includes ul li {
  font-size: 11px;
  color: #333;
  padding: 3px 0;
  letter-spacing: 0.4px;
}
.includes ul li::before { content: "— "; color: var(--red); }
.tagline {
  font-size: 11px;
  color: #888;
  font-style: italic;
  letter-spacing: 0.4px;
  margin-top: 8px;
}

/* ============================================================
   STANDALONE PAGES — signup, checkout, confirmation
   ============================================================ */
.page {
  min-height: 100vh;
  /* iOS Safari: 100dvh respects the visible area under the dynamic URL bar */
  min-height: 100dvh;
  width: 100%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 80px 200px;
}
.page-inner {
  max-width: 640px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.page-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 44px;
  letter-spacing: 6px;
  color: var(--red);
  line-height: 1.05;
}
.page-subtitle {
  font-size: 13px;
  color: #333;
  line-height: 1.7;
  letter-spacing: 0.3px;
  max-width: 520px;
}

/* SIGN UP form */
.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 440px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--red);
}
.form-field input {
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid #ddd;
  background: var(--white);
  color: var(--black);
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.form-field input:focus { border-color: var(--red); }
.form-field input::placeholder { color: #bbb; }
.form-error {
  color: var(--red);
  font-size: 11px;
  letter-spacing: 0.4px;
  min-height: 14px;
  margin-top: 2px;
}
.form-success {
  display: none;
  padding: 18px 20px;
  border: 1px solid var(--red);
  color: var(--red);
  font-size: 13px;
  letter-spacing: 0.3px;
  line-height: 1.6;
  max-width: 440px;
}
.form-success.visible { display: block; }

/* CHECKOUT summary */
.checkout-summary {
  border: 1px solid #e4e4e4;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 560px;
  background: #fafafa;
}
.checkout-row {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.checkout-row img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: var(--white);
  flex-shrink: 0;
}
.checkout-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.checkout-row-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 17px;
  letter-spacing: 1.5px;
  color: var(--black);
  line-height: 1.2;
}
.checkout-row-desc {
  font-size: 11px;
  color: #666;
  letter-spacing: 0.3px;
  line-height: 1.5;
}
.checkout-row-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #888;
  letter-spacing: 0.3px;
  margin-top: 4px;
}
.checkout-total {
  border-top: 1px solid #e4e4e4;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.checkout-total-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--black);
}
.checkout-total-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  color: var(--red);
  letter-spacing: 1px;
}
.checkout-total-suffix {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: #888;
  letter-spacing: 0.3px;
  font-weight: 400;
  margin-left: 4px;
}
.price-suffix {
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  color: #888;
  letter-spacing: 0.3px;
  margin-left: 6px;
  vertical-align: middle;
}
.checkout-note {
  font-size: 11px;
  color: #888;
  letter-spacing: 0.3px;
  line-height: 1.6;
  max-width: 520px;
}
.checkout-back {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--red);
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}
.checkout-back:hover { opacity: 0.55; }

/* Consent checkbox on checkout.html — custom styled (browser default hidden).
   Must be ticked before the "Procedi al pagamento" button activates.
   The whole label is clickable, including the links inside. */
.checkout-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 560px;
  cursor: pointer;
  /* user-select is off globally; re-enable here so the text reads naturally */
  -webkit-user-select: text;
  user-select: text;
}
.checkout-consent input[type="checkbox"] {
  /* Hide the native checkbox — we draw our own via .checkout-consent-box
     so the visual matches the rest of the site's tight typography */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.checkout-consent-box {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid #bbb;
  background: var(--white);
  margin-top: 1px;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}
.checkout-consent:hover .checkout-consent-box { border-color: var(--red); }
.checkout-consent input:focus-visible + .checkout-consent-box {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
/* Checked state: red fill + white tick mark drawn via CSS */
.checkout-consent input:checked + .checkout-consent-box {
  background: var(--red);
  border-color: var(--red);
}
.checkout-consent input:checked + .checkout-consent-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkout-consent-text {
  font-size: 12px;
  color: #333;
  letter-spacing: 0.25px;
  line-height: 1.55;
}
.checkout-consent-text a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.checkout-consent-text a:hover { opacity: 0.7; }

/* "Needs attention" animation — triggered by JS when the user clicks the
   disabled pay button. Gently pulses the border red so the user notices
   what they missed. */
.checkout-consent.needs-attention .checkout-consent-box {
  animation: consent-pulse 0.6s ease-out 2;
  border-color: var(--red);
}
@keyframes consent-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 30, 30, 0.5); }
  50%  { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(255, 30, 30, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 30, 30, 0); }
}

/* Disabled pay button state: visible but muted and not reactive. The click
   handler still fires (so we can trigger the pulse animation), but the
   navigation to Stripe is blocked in JS. */
#pay-btn.is-disabled,
#pay-btn:disabled {
  background: #ccc;
  color: #fff;
  cursor: not-allowed;
}
#pay-btn.is-disabled:hover,
#pay-btn:disabled:hover {
  background: #ccc;
  color: #fff;
}
/* Block user-agent text selection of the button label */
#pay-btn {
  user-select: none;
  -webkit-user-select: none;
}

/* CONFIRMATION page */
.confirmation-icon {
  width: 54px;
  height: 54px;
  border: 2px solid var(--red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
}
.confirmation-ref {
  font-size: 11px;
  color: #888;
  letter-spacing: 1px;
}
.confirmation-ref strong {
  color: var(--black);
  font-weight: 400;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  #store { padding: 80px 40px 80px 180px; }
  .product-card { gap: 40px; }
  .product-card > img { width: 320px; height: 320px; }
  #store-title { font-size: 52px; letter-spacing: 8px; }
  .page { padding: 100px 24px 80px 180px; }
}
/* Intermediate breakpoint: smooth transition from wide desktop to narrow
   desktop / large tablet, before the full mobile layout kicks in at 768px.
   Keeps everything proportionally readable without elements colliding. */
@media (max-width: 900px) and (min-width: 769px) {
  #sidebar {
    width: 140px;
    padding: 24px 16px 20px;
  }
  #sidebar-logo img { width: 96px; }
  #sidebar-nav a { font-size: 16px; letter-spacing: 1.5px; }
  #social-icons { gap: 8px; }
  .s-icon { width: 16px; height: 16px; }
  .page { padding: 100px 20px 80px 160px; }
  #store { padding: 80px 30px 80px 160px; }
}


@media (max-width: 768px) {
  #sidebar {
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    gap: 14px;
  }
  #sidebar-logo { margin-bottom: 0; flex-shrink: 0; }
  #sidebar-logo img { width: 78px; }

  #sidebar-nav {
    position: fixed;
    /* Sits above the social-icons (32px) + copyright (10px) cluster,
       leaving ~12px of breathing room between nav and social icons */
    bottom: 70px;
    left: 0; right: 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /* Row gap keeps wrapped lines readable; column gap spaces the items.
       Wrapping lets the longer "Cosa ti fa paura?" label fit on phones. */
    row-gap: 8px;
    gap: 18px;
    z-index: 1002;
    pointer-events: auto;
  }
  #sidebar.scrolled #sidebar-nav {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  #sidebar-nav a { font-size: 15px; letter-spacing: 2.5px; padding: 6px 4px; }

  /* Mobile footer cluster: the bottom nav + social icons + copyright
     all live at the bottom of the viewport in fixed positions. Elements
     are transparent and layer over the page background — no separate
     colored strip ever appears. The whole cluster occupies ~110px from
     the viewport bottom; .page accounts for this with padding-bottom. */
  #social-icons {
    position: fixed;
    bottom: 32px;
    left: 0; right: 0;
    margin: 0;
    justify-content: center;
    gap: 18px;
    flex-wrap: nowrap;
    z-index: 1001;
    pointer-events: auto;
  }
  .s-icon { width: 16px; height: 16px; }
  #copyright {
    display: block;
    position: fixed;
    bottom: 10px;
    left: 0; right: 0;
    text-align: center;
    margin: 0;
    font-size: 9px;
    z-index: 1001;
    pointer-events: none;
  }


  #product-modal { padding: 64px 22px 50px; }
  .modal-close { top: 16px; right: 20px; font-size: 22px; }
  .modal-inner { flex-direction: column; gap: 28px; margin-top: 16px; }
  .gallery { flex: 0 0 auto; width: 100%; }
  .detail { gap: 14px; }
  .detail h1 { font-size: 22px; letter-spacing: 1.2px; }
  .price { font-size: 38px; }
  .btn-primary { align-self: center; }
  .btn-primary--large { font-size: 16px; padding: 12px 32px; letter-spacing: 3px; }
  .desc { font-size: 12.5px; line-height: 1.75; }

  .page {
    /* Top padding clears the top bar (logo ~78px + padding ≈ 106px) so
       titles like "SIGN UP" never overlap the SACRANE logo. Bottom padding
       clears the fixed footer cluster (nav at bottom:70px, socials at
       bottom:32px, copyright at bottom:10px → cluster top ≈ 110px). */
    padding: 140px 22px 130px 22px;
    align-items: flex-start;
  }
  .page-title { font-size: 32px; letter-spacing: 4px; }
  .checkout-row img { width: 80px; height: 80px; }
  .checkout-summary { padding: 22px 22px; }
  .form, .form-success, .checkout-summary { max-width: 100%; }
}

@media (max-width: 480px) {
  #sidebar { padding: 12px 14px; gap: 8px; }
  #sidebar-logo img { width: 64px; }
  #sidebar-nav { gap: 12px; bottom: 64px; }
  #sidebar-nav a { font-size: 12px; letter-spacing: 1.6px; }
  #sidebar-nav a { font-size: 12px; letter-spacing: 1.4px; }
  #social-icons { gap: 14px; bottom: 28px; }
  #copyright { font-size: 8px; bottom: 8px; }
  .page-title { font-size: 28px; letter-spacing: 3px; }
  .checkout-total-value { font-size: 24px; }
}

@media (max-height: 500px) and (orientation: landscape) {
}




/* Long-form readable text (privacy policy, future legal / terms pages).
   Wider than page-subtitle, with clear paragraph spacing. */
.prose {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.prose p {
  font-size: 13px;
  color: #333;
  line-height: 1.75;
  letter-spacing: 0.25px;
}
.prose a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose a:hover { opacity: 0.75; }

/* Privacy page reads top-aligned and with breathing room on desktop.
   The .page default centers content vertically which is nice for short
   pages like signup / checkout, but awkward for a 7-paragraph document. */
.page--privacy {
  align-items: flex-start;
  padding-top: 80px;
}
@media (max-width: 768px) {
  .page--privacy { padding-top: 110px; }
}

/* ============================================================
   AUDIO TOGGLE — shared across all pages
   Fixed bottom-right, injected by js/audio.js
   ============================================================ */
#audio-toggle {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  /* Must sit above the product modal (z-index: 8000) so the control
     stays reachable while the modal is open and the user is about to
     click "Acquista Ora". Stays below the flash intro (z-index: 9999)
     which should still cover it during the initial page animation. */
  z-index: 8050;
  opacity: 0.85;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
  -webkit-tap-highlight-color: transparent;
}
#audio-toggle:hover { opacity: 1; }
#audio-toggle:focus { outline: none; }
#audio-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
#audio-toggle svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Hidden state used while the landing flash intro is still running, or
   during the 300ms pre-reveal pause. Uses transform + opacity for a gentle
   fade-in-from-below when it appears. */
#audio-toggle.audio-toggle-hidden {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

/* Slightly smaller on mobile so it doesn't fight the floating nav */
@media (max-width: 768px) {
  #audio-toggle {
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
}

/* ============================================================
   LEGAL PAGES (privacy-policy, terms) — pinch-zoom friendly
   ------------------------------------------------------------
   On long-text pages we allow pinch-zoom for accessibility.
   iOS Safari anchors position:fixed elements to the *visual*
   (zoomed) viewport during pinch, making sidebar, audio toggle
   and bottom nav drift around as the user zooms.
   Fix: switch from fixed → absolute on these pages. The elements
   then stay anchored to their position on the *document* and
   no longer jump during zoom. They still appear in the same
   spot on initial load; they simply scroll with the page as
   the user reads — entirely natural for a long document.
   We also force the body to relative positioning so absolute
   children measure against the document, not <html>.
   ============================================================ */
/* On desktop (≥769px) the scroll pages keep the same fixed-element
   layout as the landing: sidebar pinned top-left, audio toggle pinned
   bottom-right. This prevents elements drifting toward the window edge
   when the user resizes the browser, and looks consistent across pages.
   On mobile (≤768px) these rules are overridden in the @media block
   below to put everything in natural document flow. */

/* Mobile: sidebar becomes top bar, the nav becomes inline (no longer
   fixed at the bottom of the visual viewport — which was the most
   visible jumping element during zoom). */
@media (max-width: 768px) {
  body[data-page="privacy"] #sidebar,
  body[data-page="terms"] #sidebar,
  body[data-page="signup"] #sidebar,
  body[data-page="checkout"] #sidebar,
  body[data-page="confirmation"] #sidebar,
  body[data-page="landing"] #sidebar {
    position: absolute;
    top: 0; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  /* All scroll pages mobile: socials + copyright are normal flow
     elements at the end of <body>, visible only when the user scrolls
     past the page content. No fixed/absolute positioning that could
     cover the content. */
  body[data-page="privacy"] #social-icons,
  body[data-page="terms"] #social-icons,
  body[data-page="signup"] #social-icons,
  body[data-page="checkout"] #social-icons,
  body[data-page="confirmation"] #social-icons,
  body[data-page="landing"] #social-icons {
    position: static;
    margin: 40px 0 14px;
    justify-content: center;
    gap: 14px;
    z-index: auto;
    pointer-events: auto;
  }
  body[data-page="privacy"] #copyright,
  body[data-page="terms"] #copyright,
  body[data-page="signup"] #copyright,
  body[data-page="checkout"] #copyright,
  body[data-page="confirmation"] #copyright,
  body[data-page="landing"] #copyright {
    position: static;
    margin: 0 0 30px;
    text-align: center;
    z-index: auto;
    pointer-events: auto;
  }

    body[data-page="privacy"] #sidebar-nav,
  body[data-page="terms"] #sidebar-nav,
  body[data-page="signup"] #sidebar-nav,
  body[data-page="checkout"] #sidebar-nav,
  body[data-page="confirmation"] #sidebar-nav,
  body[data-page="landing"] #sidebar-nav {
    /* Nav joins the sidebar inline rather than floating fixed at the
       bottom of the screen — keeps everything in one scrollable flow. */
    position: static;
    flex-direction: row;
    justify-content: flex-start;
    gap: 22px;
    padding-top: 4px;
  }
  body[data-page="privacy"] #sidebar.scrolled #sidebar-nav,
  body[data-page="terms"] #sidebar.scrolled #sidebar-nav,
  body[data-page="signup"] #sidebar.scrolled #sidebar-nav,
  body[data-page="checkout"] #sidebar.scrolled #sidebar-nav,
  body[data-page="confirmation"] #sidebar.scrolled #sidebar-nav,
  body[data-page="landing"] #sidebar.scrolled #sidebar-nav {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  /* Audio toggle: bottom-right of the document content area */
  body[data-page="privacy"] #audio-toggle,
  body[data-page="terms"] #audio-toggle,
  body[data-page="signup"] #audio-toggle,
  body[data-page="checkout"] #audio-toggle,
  body[data-page="confirmation"] #audio-toggle,
  body[data-page="landing"] #audio-toggle {
    top: 16px;
    right: 16px;
  }
  /* Reduce top padding since sidebar is now inline, not floating.
     Bottom padding reduced — no fixed bottom nav, socials/copyright
     follow naturally below the text/content. */
  body[data-page="privacy"] .page,
  body[data-page="terms"] .page,
  body[data-page="signup"] .page,
  body[data-page="checkout"] .page,
  body[data-page="confirmation"] .page {
    padding-top: 180px;
    padding-bottom: 30px;
  }
  /* Landing-oracle mobile: push the title/input down so the box sits just
     past mid-screen — comfortable thumb reach on large phones instead of
     stretching to the top. Sidebar stays inline at the very top. */
  body[data-page="landing"] .page--landing-oracle {
    padding-top: 22vh;
    padding-bottom: 60px;
  }
}

/* ============================================================
   PER-PAGE BACKGROUNDS — html and body must match so no
   colored strips appear behind short content or during overscroll
   bounce. Overrides the default html background (which exists for
   the landing's vertical gradient between hero pink and store grey).
   ============================================================ */
html:has(body[data-page="signup"]),
html:has(body[data-page="checkout"]),
html:has(body[data-page="confirmation"]),
html:has(body[data-page="privacy"]),
html:has(body[data-page="terms"]),
html:has(body[data-page="landing"]) {
  background: var(--white);
}
body[data-page="signup"],
body[data-page="checkout"],
body[data-page="confirmation"],
body[data-page="privacy"],
body[data-page="terms"],
body[data-page="landing"] {
  background: var(--white);
}

/* Fallback for browsers without :has() (Firefox <121 mostly).
   Each page sets its own body background to white explicitly,
   and we set html to white via a tiny inline tweak in the page
   data-page check below. */

/* ============================================================
   STORE SECTION — now hosts the "COSA TI FA PAURA?" oracle
   Ritual / cinematic introspective experience. Same section
   background as before; new content and styling.
   ============================================================ */
.oracle {
  max-width: 640px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}
.oracle-title {
  margin: 0 0 26px;
}
/* Image title "Cosa ti fa PAURA?" — the main element, kept large.
   Width-driven so it scales gracefully; capped so it never gets huge
   on wide desktops. */
.oracle-title--img {
  width: 100%;
  max-width: 440px;
  display: flex;
  justify-content: center;
}
.oracle-title--img img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-user-select: none;
  user-select: none;
}
/* Image subtitle "ogni paura ha una voce" — sits just below the title,
   a little breathing room but close to the input box. */
.oracle-subtitle--img {
  width: 100%;
  max-width: 340px;
  display: flex;
  justify-content: center;
  margin: 0 0 44px;
}
.oracle-subtitle--img img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-user-select: none;
  user-select: none;
}
.oracle-form {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.oracle-input {
  width: 100%;
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 14px;
  padding: 20px 22px;
  font-family: 'Space Mono', monospace;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--black);
  text-align: center;
  line-height: 1.6;
  resize: none;
  outline: none;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
  -webkit-user-select: text;
  user-select: text;
}
.oracle-input::placeholder {
  color: #b0aab8;
  letter-spacing: 3px;
  font-size: 13px;
}
.oracle-input:focus {
  border-color: var(--red);
  background: var(--white);
  box-shadow: 0 0 0 1px var(--red);
}
.oracle-submit {
  align-self: center;
  border-radius: 12px;
}

/* ---- Result card ---- */
.oracle-result {
  width: 100%;
  max-width: 560px;
  margin-top: 48px;
  padding: 40px 34px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 16px;
  background: #fafafa;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  opacity: 0;
  transform: translateY(24px);
}
.oracle-result.is-visible {
  display: flex;
  animation: oracle-rise 1s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
}
@keyframes oracle-rise {
  0%   { opacity: 0; transform: translateY(24px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.oracle-result-intro {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: #666;
  text-transform: uppercase;
}
.oracle-song {
  margin: 6px 0 8px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 54px;
}
.oracle-song img {
  height: 62px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  -webkit-user-select: none;
  user-select: none;
}
.oracle-desc {
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  line-height: 1.85;
  letter-spacing: 0.3px;
  color: #2a2a2a;
  max-width: 460px;
}
.oracle-listen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}

/* ---- Pre-save button (launch phase) ---- */
.oracle-presave {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
.oracle-presave-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  min-width: 220px;
  text-align: center;
}
.oracle-presave-btn.is-placeholder {
  opacity: 0.5;
  cursor: default;
}
.oracle-listen-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--black);
}
.oracle-links {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.oracle-link {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  color: var(--red);
  transition: opacity 0.12s, background 0.2s, border-color 0.2s;
}
.oracle-link svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.oracle-link:hover { background: var(--red); color: var(--white); border-color: var(--red); transition: opacity 0s; }
.oracle-link.is-placeholder { opacity: 0.45; cursor: default; }
.oracle-link.is-placeholder:hover { background: transparent; color: var(--red); border-color: rgba(0,0,0,0.18); }
.oracle-footnote {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.4px;
  color: #777;
  margin: 0;
  max-width: 440px;
  line-height: 1.6;
}
/* Extra separation before the ASCOLTA ORA block */
.oracle-listen {
  margin-top: 14px;
}

@media (max-width: 768px) {
  .oracle-song img { height: 52px; }
  .oracle-result { padding: 32px 24px; }
  /* Image title stays large on mobile (it's the main element) but sized to
     fit comfortably; subtitle a touch narrower, kept close to the box. */
  .oracle-title--img { max-width: 300px; }
  .oracle-subtitle--img { max-width: 235px; margin: 0 0 36px; }
  .oracle-input { font-size: 14px; padding: 18px; }
  .oracle-input::placeholder { letter-spacing: 2px; }
}


/* ============================================================
   LANDING = ORACLE on white (new primary experience)
   The oracle is the landing itself: white background, centred,
   with room for the generated answer directly below.
   ============================================================ */
.page--landing-oracle {
  background: var(--white);
  align-items: flex-start;
  /* Push the oracle down so the input box lands just past the vertical
     middle of the page. This keeps it within easy thumb reach on large
     phones and feels more grounded on desktop. Room below stays for the
     revealed answer. */
  padding-top: 20vh;
  padding-bottom: 10vh;
}
.page--landing-oracle .oracle {
  margin: 0 auto;
}
/* When the answer appears, keep everything comfortably scrollable if the
   viewport is short (small laptops, landscape phones). */
@media (min-width: 901px) {
  .page--landing-oracle { min-height: 100vh; }
}
@media (max-width: 900px) and (min-width: 769px) {
  .page--landing-oracle {
    padding-top: 17vh;
    padding-bottom: 130px;
    align-items: flex-start;
  }
}
/* ≤768px padding is handled by the scroll-flow group rule
   (body[data-page="landing"] .page--landing-oracle) above. */