/* =======================================================
   Wall4Ever – style-v15.css
   Overrides & additions on top of style.css. Home only.
   ======================================================= */

:root {
  --w4e-orange-1: #FF8A3D;       /* light highlight */
  --w4e-orange-2: #F77E2D;       /* iPhone 17 Pro Max Cosmic Orange */
  --w4e-orange-3: #C75418;       /* deep shadow */
  --w4e-orange-glow: rgba(247, 126, 45, 0.35);
  --w4e-bg-soft: #14161c;
  --w4e-card: #1a1d25;
  --w4e-card-2: #20242e;
  --w4e-border: rgba(255, 255, 255, 0.07);
  --w4e-border-strong: rgba(255, 255, 255, 0.12);
  --w4e-text-muted: #a8acb6;
}

/* ---------- Section reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Header & navigation ---------- */
/* CRITICAL: keep backdrop-filter on a pseudo-element, not on .site-header itself,
   because backdrop-filter on a parent creates a containing block for
   position:fixed descendants, which would trap the mobile drawer inside the
   header bounds. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(13, 15, 20, 0.72);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--w4e-border);
  pointer-events: none;
}

.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--w4e-border-strong);
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
}
.nav-toggle:hover { background: rgba(255,255,255,0.04); }
.nav-toggle:focus-visible {
  outline: 2px solid var(--w4e-orange-2);
  outline-offset: 2px;
}
.nav-toggle-bars {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.nav-toggle-bars > span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 2px;
  background: #ece8df;
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease, top .3s ease;
}
.nav-toggle-bars > span:nth-child(1) { top: 14px; }
.nav-toggle-bars > span:nth-child(2) { top: 21px; }
.nav-toggle-bars > span:nth-child(3) { top: 28px; }
.nav-toggle.is-open .nav-toggle-bars > span:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}
.nav-toggle.is-open .nav-toggle-bars > span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open .nav-toggle-bars > span:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg);
}

.main-nav-cta {
  display: none; /* visible only inside the mobile drawer */
}

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }

  .main-nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 92px 24px 32px;
    background: rgba(13, 15, 20, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--w4e-border);
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
    overflow-y: auto;
    visibility: hidden;
    z-index: 49;
  }
  .main-nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }
  .main-nav a {
    display: block;
    padding: 16px 4px;
    font-size: 18px;
    font-weight: 500;
    border-bottom: 1px solid var(--w4e-border);
    color: #ece8df;
  }
  .main-nav a:last-of-type { border-bottom: none; }
  .main-nav-cta {
    display: block !important;
    margin-top: 20px;
    padding: 16px 24px !important;
    text-align: center;
    border-bottom: none !important;
    background: linear-gradient(135deg, var(--w4e-orange-1), var(--w4e-orange-2) 70%, var(--w4e-orange-3));
    color: #1a0f06 !important;
    font-weight: 700 !important;
    border-radius: 999px;
    box-shadow: 0 8px 24px -8px var(--w4e-orange-glow);
  }
  body.nav-locked { overflow: hidden; }
}

/* ---------- Hero: subtle improvements ---------- */
.hero h1 {
  letter-spacing: -0.03em;
}
.hero .lead {
  max-width: 540px;
}

.hero-secondary-row {
  margin-top: 14px;
}

/* ---------- Store buttons: refined ---------- */
.store-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px 13px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, #1f232c 0%, #14171d 100%);
  border: 1px solid var(--w4e-border-strong);
  color: #f3efe6;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  min-height: 58px;
}
.store-button:hover {
  transform: translateY(-1px);
  border-color: rgba(247, 126, 45, 0.4);
  box-shadow: 0 12px 28px -16px rgba(247, 126, 45, 0.5);
  background: linear-gradient(180deg, #232831 0%, #181b22 100%);
}
.store-button .store-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #fff;
  flex-shrink: 0;
}
.store-button .store-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.store-button > span:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.store-button small {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--w4e-text-muted);
  margin-bottom: 3px;
}
.store-button strong {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- Web app secondary button ---------- */
.web-app-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px 11px 16px;
  border-radius: 12px;
  background: transparent;
  border: 1px dashed rgba(247, 126, 45, 0.35);
  color: #f3efe6;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.web-app-button:hover {
  border-color: var(--w4e-orange-2);
  border-style: solid;
  background: rgba(247, 126, 45, 0.06);
  transform: translateY(-1px);
}
.web-app-button .web-app-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: var(--w4e-orange-2);
  flex-shrink: 0;
}
.web-app-button .web-app-icon svg { width: 100%; height: 100%; display: block; }
.web-app-button > span:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
.web-app-button small {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--w4e-text-muted);
  margin-bottom: 2px;
}
.web-app-button strong {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* ---------- Phone frame: iPhone 17 Pro Max Cosmic Orange (refined) ---------- */
/*
  Realistic recreation of the iPhone 17 Pro Max:
  - Real body proportions: 78×163mm = 9:18.81 outer; 9:19.5 screen inner
  - Anodized aluminum unibody finish (Cosmic Orange #F77E2D)
  - Side buttons in their real positions:
    LEFT  -> Action button (top), Volume Up, Volume Down
    RIGHT -> Power/Side button (top), Camera Control (new on iPhone 17 Pro)

  Layout trick: aspect-ratio is set on the SCREEN (9/19.5, matching the
  1290×2796 screenshots), and the frame height is derived from screen + padding.
  This produces a frame body ratio of ~9/18.96, very close to the real 9/18.81
  device — and the photos fit the screen perfectly without any cropping.
*/
.phone-frame {
  position: relative;
  width: 320px;
  /* NO aspect-ratio here — frame height is screen + 2*padding */
  margin: 0 auto;
  padding: 8px;
  border-radius: 50px;
  background:
    /* very subtle micro-grain texture */
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 2px,
      rgba(255,255,255,0.012) 2px,
      rgba(255,255,255,0.012) 3px
    ),
    /* main aluminum anodized gradient */
    linear-gradient(150deg,
      #ffb87a 0%,
      var(--w4e-orange-1) 14%,
      var(--w4e-orange-2) 38%,
      #d8651e 62%,
      var(--w4e-orange-3) 88%,
      #8a3a0e 100%);
  box-shadow:
    /* outer drop shadow (depth) */
    0 35px 90px -25px rgba(0, 0, 0, 0.65),
    0 28px 60px -28px rgba(247, 126, 45, 0.40),
    /* top chamfer highlight (polished edge) */
    inset 0 1.2px 0 rgba(255, 220, 180, 0.55),
    /* bottom inner shadow (depth) */
    inset 0 -1.2px 0 rgba(0, 0, 0, 0.55),
    /* left/right thin chamfer lines */
    inset 1px 0 0 rgba(255, 200, 150, 0.20),
    inset -1px 0 0 rgba(60, 20, 0, 0.45);
  transform: none;
  overflow: visible; /* allow side buttons to extrude */
}

/* Neutralize any pseudo-elements inherited from style.css */
.phone-frame::before {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  inset: 0 !important;
}

/* Soft sheen / lighting layer on top of the orange body */
.phone-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, 0.22), transparent 55%),
    radial-gradient(140% 80% at 100% 110%, rgba(0, 0, 0, 0.35), transparent 60%) !important;
  mix-blend-mode: overlay;
  z-index: 1;
}

/* The screen — exact 9:19.5 ratio so the 1290×2796 photos fit pixel-perfect */
.phone-frame .screen {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  height: auto;
  border-radius: 44px;
  overflow: hidden;
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* thin black bezel ring + faint inner gloss */
  box-shadow:
    inset 0 0 0 1.5px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  z-index: 2;
}

/* Dynamic Island with subtle camera + Face ID sensor dots */
.phone-frame .island {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 30px;
  background:
    /* front camera lens (slightly visible) */
    radial-gradient(circle at 25% 50%, #1f1f1f 2.8px, #0a0a0a 3.6px, transparent 4.2px),
    /* face ID dot sensor (more subtle) */
    radial-gradient(circle at 75% 50%, #161616 2px, #060606 2.6px, transparent 3px),
    /* base dark fill */
    radial-gradient(ellipse at 50% 50%, #050505 60%, #000 100%);
  border-radius: 999px;
  z-index: 3;
  box-shadow:
    inset 0 0 0 0.5px rgba(255,255,255,0.04),
    inset 0 1px 1.5px rgba(0,0,0,0.95);
}

/* ----- Side buttons (Cosmic Orange aluminum) ----- */
.phone-frame .action-btn,
.phone-frame .volume-up,
.phone-frame .volume-down,
.phone-frame .power-btn,
.phone-frame .camera-ctrl {
  position: absolute;
  background: linear-gradient(180deg,
    #c75a18 0%,
    var(--w4e-orange-2) 50%,
    #8a3a0e 100%);
  box-shadow:
    inset 0 0.5px 0 rgba(255, 200, 150, 0.4),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.3);
  z-index: 0;
}

/* LEFT SIDE */
.phone-frame .action-btn {
  left: -2px;
  top: 16.5%;
  width: 3px;
  height: 28px;
  border-radius: 2px 0 0 2px;
}
.phone-frame .volume-up {
  left: -2px;
  top: 24%;
  width: 3px;
  height: 48px;
  border-radius: 2px 0 0 2px;
}
.phone-frame .volume-down {
  left: -2px;
  top: 33%;
  width: 3px;
  height: 48px;
  border-radius: 2px 0 0 2px;
}

/* RIGHT SIDE */
.phone-frame .power-btn {
  right: -2px;
  top: 22%;
  width: 3px;
  height: 72px;
  border-radius: 0 2px 2px 0;
}
/* Camera Control: new tactile button on iPhone 17 Pro/Pro Max */
.phone-frame .camera-ctrl {
  right: -2.5px;
  top: 36%;
  width: 3.5px;
  height: 34px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg,
    #d97233 0%,
    #ffae6b 25%,
    var(--w4e-orange-2) 50%,
    #c75a18 75%,
    #8a3a0e 100%);
  box-shadow:
    inset 0 0.5px 0 rgba(255, 220, 180, 0.55),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.55),
    inset -1px 0 0 rgba(255, 255, 255, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.35);
}

/* ----- Mini phones (trio section) — wider and proportional ----- */
.phone-frame.mini {
  width: 270px;
  border-radius: 44px;
  padding: 7px;
}
.phone-frame.mini .screen {
  border-radius: 38px;
}
.phone-frame.mini .island {
  top: 13px;
  width: 80px;
  height: 25px;
  background:
    radial-gradient(circle at 25% 50%, #1f1f1f 2.4px, #0a0a0a 3px, transparent 3.5px),
    radial-gradient(circle at 75% 50%, #161616 1.7px, #060606 2.2px, transparent 2.6px),
    radial-gradient(ellipse at 50% 50%, #050505 60%, #000 100%);
}
.phone-frame.mini .action-btn { height: 22px; width: 2.5px; }
.phone-frame.mini .volume-up,
.phone-frame.mini .volume-down { height: 38px; width: 2.5px; }
.phone-frame.mini .power-btn { height: 58px; width: 2.5px; }
.phone-frame.mini .camera-ctrl { height: 27px; width: 3px; }

/* Hero screen: portrait map screenshot at native resolution */
.hero-section .phone-frame .screen {
  background-image: url('assets/mappa.jpg');
  background-position: center;
}

/* ---------- New section: "Tre momenti dentro Wall4Ever" ---------- */
.app-trio-section .section-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.app-trio-section .section-heading p:last-child {
  color: var(--w4e-text-muted);
  margin-top: 14px;
}

.trio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: start;
}

.trio-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
  text-align: center;
}
.trio-item figcaption {
  max-width: 320px;
}
.trio-item figcaption .eyebrow {
  color: var(--w4e-orange-2);
  font-size: 11px;
  letter-spacing: 0.14em;
}
.trio-item figcaption h3 {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 10px 0 12px;
}
.trio-item figcaption p {
  color: var(--w4e-text-muted);
  font-size: 15.5px;
  line-height: 1.55;
}

/* Mini phone styling moved to phone-frame section above */

/* The three screen contents (higher specificity to win over .phone-frame .screen) */
.phone-frame .screen.screen-editor {
  background-image: url('assets/editor.jpg');
  background-position: center;
}
.phone-frame .screen.screen-mappa {
  background-image: url('assets/mappa.jpg');
  background-position: center;
}
.phone-frame .screen.screen-muro {
  background-image: url('assets/muro.jpg');
  background-position: center;
}

/* Stagger reveal of trio items */
.app-trio-section.is-visible .trio-item:nth-child(1) { animation: trioRise .9s .05s both cubic-bezier(.2,.7,.2,1); }
.app-trio-section.is-visible .trio-item:nth-child(2) { animation: trioRise .9s .18s both cubic-bezier(.2,.7,.2,1); }
.app-trio-section.is-visible .trio-item:nth-child(3) { animation: trioRise .9s .31s both cubic-bezier(.2,.7,.2,1); }
@keyframes trioRise {
  0%   { opacity: 0; transform: translateY(28px) scale(.985); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .app-trio-section.is-visible .trio-item { animation: none; }
}

@media (max-width: 880px) {
  .trio-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .phone-frame.mini { width: 250px; }
}

/* ---------- Subtle polish: page background ---------- */
.page-bg::after {
  /* Orange aura behind the hero, very low intensity */
  content: "";
  position: absolute;
  top: -120px;
  right: -160px;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle at center, var(--w4e-orange-glow), transparent 70%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.7;
}

/* ---------- FAQ: nicer detail markers ---------- */
.faq-section details {
  border-radius: 14px;
  transition: border-color .2s ease, background .2s ease;
}
.faq-section details:hover {
  border-color: rgba(247, 126, 45, 0.25);
}
.faq-section details[open] {
  border-color: rgba(247, 126, 45, 0.35);
  background: linear-gradient(180deg, rgba(247, 126, 45, 0.05), transparent 50%);
}
.faq-section summary {
  cursor: pointer;
  list-style: none;
}
.faq-section summary::-webkit-details-marker { display: none; }
.faq-section summary::after {
  content: "+";
  float: right;
  font-size: 22px;
  color: var(--w4e-orange-2);
  font-weight: 300;
  line-height: 1;
  transition: transform .25s ease;
  transform-origin: center;
}
.faq-section details[open] summary::after {
  content: "−";
  transform: rotate(0deg);
}

/* ---------- Mobile hero ordering: phone after copy on mobile ---------- */
@media (max-width: 720px) {
  .hero-section {
    display: flex;
    flex-direction: column;
  }
  .hero-copy { order: 1; }
  .hero-visual {
    order: 2;
    margin-top: 24px;
    margin-bottom: 8px;
    min-height: auto !important;
  }
  .phone-frame { width: min(280px, 75vw); }
  .store-buttons.compact {
    flex-wrap: wrap;
    gap: 12px;
  }
  .store-button {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* =======================================================
   Language Switcher
   ======================================================= */
.lang-switcher {
  position: relative;
  display: inline-flex;
  margin-left: 8px;
}

.lang-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--w4e-border-strong);
  border-radius: 12px;
  color: #ece8df;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
  font-family: inherit;
}
.lang-button:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(247, 126, 45, 0.4);
}
.lang-button:focus-visible {
  outline: 2px solid var(--w4e-orange-2);
  outline-offset: 2px;
}
.lang-button .lang-icon {
  width: 16px;
  height: 16px;
  color: var(--w4e-orange-2);
  flex-shrink: 0;
}
.lang-button .lang-code {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.lang-button .lang-chevron {
  width: 9px;
  height: 6px;
  margin-left: 1px;
  opacity: .7;
  transition: transform .18s ease;
}
.lang-switcher.is-open .lang-chevron {
  transform: rotate(180deg);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: rgba(20, 22, 28, 0.98);
  border: 1px solid var(--w4e-border-strong);
  border-radius: 14px;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 60;
  max-height: 70vh;
  overflow-y: auto;
}
.lang-menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  cursor: pointer;
  color: #ece8df;
  font-size: 14px;
  transition: background .15s ease;
}
.lang-menu li:hover {
  background: rgba(247, 126, 45, 0.08);
}
.lang-menu li.is-active {
  background: rgba(247, 126, 45, 0.14);
  color: #fff;
}
.lang-menu-code {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--w4e-orange-2);
  min-width: 22px;
}
.lang-menu-name {
  flex: 1;
  font-size: 14px;
}

@media (max-width: 880px) {
  .lang-switcher { margin-left: auto; margin-right: 8px; }
  .lang-button {
    height: 40px;
    padding: 0 10px;
    font-size: 12px;
  }
  .lang-button .lang-code { font-size: 12px; }
}
@media (max-width: 480px) {
  .lang-button .lang-chevron { display: none; }
  .lang-button { padding: 0 8px; }
}

/* =======================================================
   Internal pages — shared layout
   ======================================================= */

/* ----- Page hero (top of every internal page) ----- */
.page-hero {
  width: min(100% - 48px, 960px);
  padding: clamp(72px, 8vw, 112px) 0 clamp(58px, 6vw, 78px);
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  color: var(--w4e-orange-2);
  background: rgba(247, 126, 45, 0.10);
  border: 1px solid rgba(247, 126, 45, 0.22);
  box-shadow: 0 10px 26px rgba(247, 126, 45, 0.07);
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 850;
  margin: 0 auto 20px;
}
.page-hero h1 {
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin: 0 0 22px;
  max-width: 900px;
}
.page-hero p,
.page-hero p.lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--w4e-text-muted);
  max-width: 720px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .page-hero {
    width: min(100% - 32px, 960px);
    padding: 54px 0 46px;
  }
  .page-hero .eyebrow {
    font-size: 11px;
    padding: 7px 11px;
    letter-spacing: 0.12em;
  }
  .page-hero h1 {
    font-size: clamp(34px, 10vw, 46px);
  }
  .page-hero p,
  .page-hero p.lead {
    font-size: 16px;
  }
}

/* ----- Product page sections ----- */
.product-page main {
  padding-bottom: 80px;
}

/* Feature grid (cards) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 48px 0;
}
@media (max-width: 880px) {
  .feature-grid { grid-template-columns: 1fr; }
}
.feature-block {
  padding: 28px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--w4e-card) 0%, var(--w4e-card-2) 100%);
  border: 1px solid var(--w4e-border);
  transition: border-color .25s ease, transform .25s ease;
}
.feature-block:hover {
  border-color: rgba(247, 126, 45, 0.35);
  transform: translateY(-2px);
}
.feature-block h3 {
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 10px;
  color: #ece8df;
}
.feature-block p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--w4e-text-muted);
  margin: 0;
}
.feature-block .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: rgba(247, 126, 45, 0.12);
  color: var(--w4e-orange-2);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
}

/* Wide single feature panel */
.feature-panel {
  padding: 48px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--w4e-card) 0%, var(--w4e-card-2) 100%);
  border: 1px solid var(--w4e-border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 880px) {
  .feature-panel {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 28px;
  }
}
.feature-panel h2 {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.feature-panel p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--w4e-text-muted);
  margin: 0 0 16px;
}
.feature-panel ul.bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}
.feature-panel ul.bullets li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 15.5px;
  line-height: 1.5;
  color: #ece8df;
}
.feature-panel ul.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--w4e-orange-2);
  box-shadow: 0 0 0 4px rgba(247, 126, 45, 0.18);
}

/* Inline callout */
.inline-callout {
  margin: 60px auto;
  max-width: 880px;
  text-align: center;
  padding: 40px 24px;
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 0%, rgba(247, 126, 45, 0.10), transparent 70%),
              linear-gradient(180deg, var(--w4e-card) 0%, var(--w4e-card-2) 100%);
  border: 1px solid var(--w4e-border);
}
.inline-callout h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 14px;
}
.inline-callout p {
  font-size: 16px;
  color: var(--w4e-text-muted);
  max-width: 640px;
  margin: 0 auto 22px;
  line-height: 1.55;
}
.inline-callout .cta-row {
  display: inline-flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Section heading inside product pages */
.product-section-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
}
.product-section-heading .eyebrow {
  color: var(--w4e-orange-2);
  font-size: 11px;
  letter-spacing: 0.16em;
  margin-bottom: 14px;
}
.product-section-heading h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.product-section-heading p {
  color: var(--w4e-text-muted);
  font-size: 16px;
  line-height: 1.55;
}

/* =======================================================
   Legal/document page layout
   ======================================================= */
.legal-page main {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 24px 100px;
}
@media (max-width: 880px) {
  .legal-page main {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 16px 60px;
  }
}

.legal-toc {
  position: sticky;
  top: 100px;
  align-self: start;
  font-size: 13.5px;
  border-left: 1px solid var(--w4e-border);
  padding-left: 18px;
}
.legal-toc h4 {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--w4e-orange-2);
  margin: 0 0 14px;
}
.legal-toc ol {
  list-style: none;
  counter-reset: toc;
  padding: 0;
  margin: 0;
}
.legal-toc li {
  counter-increment: toc;
  margin-bottom: 10px;
  line-height: 1.4;
}
.legal-toc li a {
  color: var(--w4e-text-muted);
  text-decoration: none;
  transition: color .15s ease;
}
.legal-toc li a:hover { color: #ece8df; }
.legal-toc li a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--w4e-orange-2);
  font-weight: 600;
  margin-right: 8px;
  font-size: 11px;
}
@media (max-width: 880px) {
  .legal-toc {
    position: static;
    border-left: none;
    border-top: 1px solid var(--w4e-border);
    padding-left: 0;
    padding-top: 18px;
    display: none; /* hide TOC on mobile to save vertical space */
  }
}

.legal-doc { max-width: 740px; }
.legal-doc .legal-eyebrow {
  color: var(--w4e-orange-2);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.legal-doc h1 {
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.legal-doc .legal-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--w4e-text-muted);
  margin: 0 0 32px;
}
.legal-doc .legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 18px 20px;
  margin-bottom: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--w4e-border);
  font-size: 13.5px;
  color: var(--w4e-text-muted);
}
.legal-doc .legal-meta strong {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--w4e-orange-2);
  font-weight: 600;
  margin-bottom: 4px;
}
.legal-doc section.legal-section {
  margin-bottom: 36px;
  padding-top: 24px;
  scroll-margin-top: 100px;
}
.legal-doc section.legal-section + section.legal-section {
  border-top: 1px solid var(--w4e-border);
}
.legal-doc section.legal-section h2 {
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.legal-doc section.legal-section h2 .num {
  color: var(--w4e-orange-2);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.legal-doc section.legal-section p {
  font-size: 15px;
  line-height: 1.65;
  color: #d1d4dc;
  margin: 0 0 12px;
}
.legal-doc section.legal-section ul {
  margin: 12px 0;
  padding-left: 22px;
}
.legal-doc section.legal-section li {
  font-size: 14.5px;
  line-height: 1.6;
  color: #c4c8d2;
  margin-bottom: 6px;
}
.legal-doc section.legal-section li::marker {
  color: var(--w4e-orange-2);
}

/* Translation disclaimer banner on legal pages */
.legal-translation-notice {
  margin: 0 0 28px;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(247, 126, 45, 0.06);
  border: 1px dashed rgba(247, 126, 45, 0.35);
  font-size: 13px;
  line-height: 1.5;
  color: var(--w4e-text-muted);
  display: none; /* shown only when language != it via JS */
}
html:not([lang="it"]) .legal-translation-notice { display: block; }

/* Legal index page (area-legale.html) */
.legal-index-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px 100px;
}
@media (max-width: 720px) {
  .legal-index-grid { grid-template-columns: 1fr; }
}
.legal-index-grid a {
  display: block;
  padding: 24px 26px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--w4e-card) 0%, var(--w4e-card-2) 100%);
  border: 1px solid var(--w4e-border);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.legal-index-grid a:hover {
  border-color: rgba(247, 126, 45, 0.4);
  transform: translateY(-2px);
}
.legal-index-grid h3 {
  font-size: 17px;
  margin: 0 0 6px;
  color: #ece8df;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.legal-index-grid h3 .chevron {
  color: var(--w4e-orange-2);
  font-size: 18px;
  font-weight: 400;
  transition: transform .2s ease;
}
.legal-index-grid a:hover h3 .chevron { transform: translateX(4px); }
.legal-index-grid p {
  font-size: 14px;
  color: var(--w4e-text-muted);
  margin: 0;
  line-height: 1.45;
}

/* Legal meta inline variant (used on area-legale.html hero) */
.legal-meta-inline {
  display: inline-flex;
  margin-top: 28px;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
}
.legal-meta-inline > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
@media (max-width: 600px) {
  .legal-meta-inline {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .legal-meta-inline > div {
    align-items: center;
    text-align: center;
  }
}



/* =======================================================
   V18 — Button polish
   Smaller store buttons + consistent hover/click glow
   ======================================================= */

.primary-btn,
.secondary-btn,
.store-button,
.header-cta {
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease,
    opacity .18s ease;
  will-change: transform;
}

/* Store buttons: a little shorter, brighter and less empty */
.store-buttons {
  gap: 12px;
}
.store-button {
  min-width: 188px;
  width: auto;
  padding: 12px 15px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    #05070b;
  border-color: rgba(255,255,255,.18);
}
.store-icon {
  font-size: 1.88rem;
  width: 26px;
}
.store-icon.play {
  font-size: 1.42rem;
}
.store-button small {
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.store-button strong {
  font-size: 1.02rem;
}

/* Same luminous retro effect on all main buttons */
.primary-btn:hover,
.secondary-btn:hover,
.header-cta:hover,
.store-button:hover {
  transform: translateY(-2px);
  border-color: rgba(247,126,45,.48);
  box-shadow:
    0 0 0 1px rgba(247,126,45,.18),
    0 16px 36px rgba(0,0,0,.30),
    0 0 28px rgba(247,126,45,.16);
}

.secondary-btn:hover {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(247,126,45,.13), rgba(255,255,255,.055));
}

.primary-btn:hover,
.header-cta:hover {
  background: linear-gradient(135deg, #ffd27a, #f77e2d);
  color: #130d07;
}

.store-button:hover {
  background:
    linear-gradient(180deg, rgba(247,126,45,.12), rgba(255,255,255,.04)),
    #05070b;
}

.primary-btn:active,
.secondary-btn:active,
.header-cta:active,
.store-button:active {
  transform: translateY(0) scale(.985);
  box-shadow:
    0 0 0 1px rgba(247,126,45,.16),
    0 8px 20px rgba(0,0,0,.25);
}

/* Keep buttons tidy on smaller screens */
@media (max-width: 640px) {
  .store-button {
    min-width: 0;
    width: 100%;
  }
}



/* =======================================================
   V19 — Create page refinements
   ======================================================= */

body[data-page="crea"] .feature-panel {
  gap: clamp(34px, 5vw, 64px);
}

body[data-page="crea"] .feature-panel > div:first-child {
  max-width: 610px;
}

body[data-page="crea"] .create-editor-notes {
  margin-top: 18px;
}

body[data-page="crea"] .create-six-grid {
  margin-top: 34px;
  margin-bottom: 8px;
  gap: 18px;
}

body[data-page="crea"] .create-six-grid .feature-block {
  min-height: 178px;
}

body[data-page="crea"] .create-six-grid .feature-block .step-num {
  margin-bottom: 14px;
}

@media (max-width: 880px) {
  body[data-page="crea"] .create-six-grid {
    gap: 14px;
  }
  body[data-page="crea"] .create-six-grid .feature-block {
    min-height: auto;
  }
}



/* =======================================================
   V23 — Explore page single-phone refinement
   Back to one phone, fuller text and nicer web app button
   ======================================================= */

body[data-page="esplora"] .explore-single-phone {
  width: min(278px, 28vw);
  margin: 0 auto;
}

body[data-page="esplora"] .explore-copy-single {
  max-width: 650px;
}

body[data-page="esplora"] .explore-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  color: var(--w4e-orange-2);
  background: rgba(247,126,45,.10);
  border: 1px solid rgba(247,126,45,.22);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .14em;
  margin: 0 0 16px;
}

body[data-page="esplora"] .explore-notes {
  margin-top: 18px;
}

body[data-page="esplora"] .explore-cta-row {
  margin-top: 24px;
}

body[data-page="esplora"] .webapp-cta {
  position: relative;
  overflow: hidden;
  padding: 14px 22px;
  border-color: rgba(247,126,45,.26);
  background:
    linear-gradient(180deg, rgba(247,126,45,.11), rgba(255,255,255,.045));
  box-shadow:
    0 0 0 1px rgba(247,126,45,.10),
    0 14px 28px rgba(0,0,0,.22);
}

body[data-page="esplora"] .webapp-cta::after {
  content: "→";
  display: inline-block;
  margin-left: 10px;
  transition: transform .18s ease;
}

body[data-page="esplora"] .webapp-cta:hover::after {
  transform: translateX(3px);
}

@media (max-width: 980px) {
  body[data-page="esplora"] .explore-single-phone {
    width: min(260px, 70vw);
  }
}



/* =======================================================
   V24 — Support FAQ additions
   ======================================================= */

body[data-page="supporto"] .faq-list details p {
  max-width: 920px;
}

body[data-page="supporto"] .faq-list details summary {
  line-height: 1.35;
}



/* =======================================================
   V25 — Support links + account deletion page
   ======================================================= */

.inline-link,
.faq-list a.inline-link,
.legal-text a.inline-link {
  color: var(--w4e-orange-2);
  text-decoration: none;
  font-weight: 800;
  border-bottom: 1px solid rgba(247, 126, 45, 0.42);
  transition: color .18s ease, border-color .18s ease, text-shadow .18s ease;
}

.inline-link:hover,
.faq-list a.inline-link:hover,
.legal-text a.inline-link:hover {
  color: #ffd27a;
  border-color: rgba(255, 210, 122, 0.8);
  text-shadow: 0 0 16px rgba(247, 126, 45, 0.22);
}



/* =======================================================
   V26 — Account deletion request form
   ======================================================= */

.delete-account-section {
  max-width: 980px;
}

.delete-account-card {
  border: 1px solid var(--w4e-border);
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 0%, rgba(247,126,45,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
  padding: clamp(28px, 5vw, 58px);
}

.delete-kicker {
  display: inline-flex;
  width: fit-content;
  color: var(--w4e-orange-2);
  background: rgba(247,126,45,.10);
  border: 1px solid rgba(247,126,45,.22);
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .14em;
  margin: 0 0 18px;
}

.delete-account-card h2 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.025em;
  margin: 0 0 16px;
}

.delete-intro {
  color: var(--w4e-text-muted);
  font-size: 17px;
  line-height: 1.7;
  max-width: 780px;
  margin: 0 0 30px;
}

.delete-account-form {
  display: grid;
  gap: 14px;
}

.delete-account-form label:not(.form-check) {
  color: #ece8df;
  font-weight: 800;
  margin-top: 6px;
}

.delete-account-form label span {
  color: var(--w4e-text-muted);
  font-weight: 650;
}

.delete-account-form input[type="email"],
.delete-account-form textarea {
  width: 100%;
  color: #f6f1e8;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 16px 17px;
  font: inherit;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.delete-account-form textarea {
  resize: vertical;
  min-height: 130px;
}

.delete-account-form input[type="email"]:focus,
.delete-account-form textarea:focus {
  border-color: rgba(247,126,45,.58);
  box-shadow: 0 0 0 4px rgba(247,126,45,.12);
  background: rgba(0,0,0,.30);
}

.form-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--w4e-text-muted);
  line-height: 1.55;
  margin: 8px 0 4px;
}

.form-check input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--w4e-orange-2);
  flex: 0 0 auto;
}

.delete-submit {
  width: fit-content;
  min-width: 220px;
  margin-top: 10px;
}

.delete-submit:disabled {
  opacity: .58;
  cursor: not-allowed;
  transform: none;
}

.form-message {
  min-height: 24px;
  margin: 6px 0 0;
  color: var(--w4e-text-muted);
  font-weight: 700;
}

.form-message.success {
  color: #8ff0bd;
}

.form-message.error {
  color: #ffb3a9;
}

.form-message.loading {
  color: #ffd27a;
}

.form-hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.delete-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}

.delete-info-grid > div {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background: rgba(255,255,255,.035);
  padding: 22px;
}

.delete-info-grid h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.delete-info-grid p {
  margin: 0;
  color: var(--w4e-text-muted);
  line-height: 1.65;
}

@media (max-width: 760px) {
  .delete-info-grid {
    grid-template-columns: 1fr;
  }

  .delete-submit {
    width: 100%;
  }
}



/* =======================================================
   V28 — Bullet alignment + community page polish
   ======================================================= */

/* Better bullet alignment across internal pages */
.feature-panel ul.bullets li,
ul.bullets li {
  position: relative;
}

.feature-panel ul.bullets li::before,
ul.bullets li::before {
  top: 0.38em;
}

/* Community page */
body[data-page="community"] .community-panel {
  grid-template-columns: minmax(0, 1fr) minmax(340px, .78fr);
  gap: clamp(36px, 5vw, 68px);
  padding: clamp(38px, 5vw, 58px);
  overflow: hidden;
}

body[data-page="community"] .community-copy {
  max-width: 680px;
}

body[data-page="community"] .community-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  color: var(--w4e-orange-2);
  background: rgba(247,126,45,.10);
  border: 1px solid rgba(247,126,45,.22);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .14em;
  margin: 0 0 16px;
}

body[data-page="community"] .community-notes {
  margin-top: 18px;
}

body[data-page="community"] .community-snapshot {
  min-height: 420px;
  position: relative;
  display: grid;
  place-items: center;
}

body[data-page="community"] .snapshot-card {
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  border-radius: 24px;
  color: #f5efe6;
}

body[data-page="community"] .main-artwork {
  width: min(315px, 90%);
  padding: 16px;
  position: relative;
}

body[data-page="community"] .snapshot-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: #1b1006;
  background: linear-gradient(135deg, #ffd27a, #f77e2d);
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 850;
  margin-bottom: 12px;
}

body[data-page="community"] .snapshot-wall {
  height: 190px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 34% 28%, rgba(247,126,45,.44), transparent 12%),
    radial-gradient(circle at 64% 58%, rgba(255,210,122,.28), transparent 12%),
    url('assets/wall.jpg');
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,.10);
}

body[data-page="community"] .snapshot-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

body[data-page="community"] .snapshot-avatar {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #1b1006;
  background: linear-gradient(135deg, #ffd27a, #f77e2d);
  font-weight: 900;
  font-size: 12px;
}

body[data-page="community"] .snapshot-row strong,
body[data-page="community"] .floating-card strong {
  display: block;
  font-size: 15px;
}

body[data-page="community"] .snapshot-row small,
body[data-page="community"] .floating-card small {
  display: block;
  color: var(--w4e-text-muted);
  margin-top: 3px;
}

body[data-page="community"] .floating-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  min-width: 205px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body[data-page="community"] .floating-card span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(247,126,45,.16);
  box-shadow: 0 0 0 4px rgba(247,126,45,.08);
}

body[data-page="community"] .floating-card.top {
  top: 38px;
  right: 4px;
}

body[data-page="community"] .floating-card.bottom {
  bottom: 38px;
  left: 0;
}

body[data-page="community"] .section-lead {
  color: var(--w4e-text-muted);
  max-width: 740px;
  margin: 12px auto 0;
  line-height: 1.65;
}

body[data-page="community"] .community-six-grid {
  margin-top: 34px;
  gap: 18px;
}

body[data-page="community"] .community-six-grid .feature-block {
  min-height: 176px;
}

body[data-page="community"] .community-callout {
  margin-top: 70px;
}

@media (max-width: 980px) {
  body[data-page="community"] .community-panel {
    grid-template-columns: 1fr;
  }

  body[data-page="community"] .community-snapshot {
    min-height: 390px;
  }

  body[data-page="community"] .floating-card.top {
    right: 8%;
  }

  body[data-page="community"] .floating-card.bottom {
    left: 8%;
  }
}

@media (max-width: 640px) {
  body[data-page="community"] .community-snapshot {
    min-height: auto;
    display: block;
  }

  body[data-page="community"] .main-artwork {
    width: 100%;
  }

  body[data-page="community"] .floating-card {
    position: static;
    margin-top: 12px;
    min-width: 0;
  }

  body[data-page="community"] .community-six-grid .feature-block {
    min-height: auto;
  }
}


/* =======================================================
   V29 — Community page orange iPhone artwork mockup
   ======================================================= */
body[data-page="community"] .community-snapshot {
  min-height: 500px;
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

body[data-page="community"] .community-phone-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

body[data-page="community"] .community-phone {
  width: min(270px, 82%);
  z-index: 2;
}

body[data-page="community"] .community-screen {
  background-image: url('assets/community-artwork-screen.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

body[data-page="community"] .floating-badge {
  position: absolute;
  top: 8px;
  left: 18px;
  margin-bottom: 0;
  z-index: 4;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}

body[data-page="community"] .floating-card {
  z-index: 4;
}

body[data-page="community"] .floating-card.top {
  top: 42px;
  right: -6px;
}

body[data-page="community"] .floating-card.bottom {
  bottom: 44px;
  left: -2px;
}

body[data-page="community"] .main-artwork,
body[data-page="community"] .snapshot-wall,
body[data-page="community"] .snapshot-row,
body[data-page="community"] .snapshot-avatar {
  display: none;
}

@media (max-width: 980px) {
  body[data-page="community"] .community-snapshot {
    min-height: 460px;
  }
  body[data-page="community"] .floating-card.top {
    right: 3%;
  }
  body[data-page="community"] .floating-card.bottom {
    left: 3%;
  }
}

@media (max-width: 640px) {
  body[data-page="community"] .community-snapshot {
    min-height: auto;
    gap: 14px;
  }
  body[data-page="community"] .floating-badge {
    position: static;
    justify-self: flex-start;
    margin-bottom: 6px;
  }
  body[data-page="community"] .community-phone {
    width: min(250px, 88%);
  }
  body[data-page="community"] .floating-card {
    position: static;
    margin-top: 10px;
    min-width: 0;
    width: 100%;
    max-width: 320px;
  }
}






/* =======================================================
   V33 — Header spacing micro-adjustment
   ======================================================= */

@media (min-width: 980px) {
  .site-header .main-nav {
    gap: clamp(10px, .88vw, 15px);
  }

  .site-header .main-nav a {
    font-size: clamp(13px, .84vw, 14.5px);
    letter-spacing: -0.012em;
  }

  .site-header .header-cta,
  .site-header .main-nav-cta {
    padding-left: 16px;
    padding-right: 16px;
    white-space: nowrap;
  }
}



/* =======================================================
   V34 — Mobile home buttons + clearer close menu
   Desktop untouched
   ======================================================= */

@media (max-width: 880px) {
  .site-header {
    width: calc(100% - 28px);
    margin: 10px auto 0;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    background: rgba(12,14,19,.78) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,.22);
  }

  .site-header::before {
    border-radius: inherit;
    border-bottom: 0;
    background: rgba(12,14,19,.72);
  }

  .site-header .brand img {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .site-header .brand span {
    font-size: 1.04rem;
  }

  .nav-toggle {
    width: 46px;
    height: 46px;
    margin-left: auto;
    border-radius: 15px;
    background: rgba(255,255,255,.035);
    z-index: 80;
  }

  .nav-toggle.is-open {
    border-color: rgba(247,126,45,.55);
    background: rgba(247,126,45,.12);
    box-shadow: 0 0 0 1px rgba(247,126,45,.12), 0 12px 28px rgba(0,0,0,.26);
  }

  .nav-toggle.is-open .nav-toggle-bars > span {
    height: 2.5px;
    background: #fff;
  }

  .main-nav {
    padding: 100px 24px 32px;
    z-index: 60;
  }
}

@media (max-width: 640px) {
  body.home .hero-section {
    padding-top: 44px;
  }

  body.home .store-buttons.compact {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 28px;
  }

  body.home .store-button {
    min-width: 0;
    width: 100%;
    min-height: 66px;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 18px;
    background:
      radial-gradient(circle at 20% 0%, rgba(255,255,255,.10), transparent 34%),
      linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
      #05070b;
    border: 1px solid rgba(255,255,255,.17);
    box-shadow:
      0 14px 28px rgba(0,0,0,.26),
      inset 0 1px 0 rgba(255,255,255,.055);
  }

  body.home .store-button .store-icon {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
  }

  body.home .store-button > span:last-child {
    min-width: 0;
  }

  body.home .store-button small {
    font-size: 9.5px;
    letter-spacing: .075em;
    margin-bottom: 4px;
    white-space: nowrap;
  }

  body.home .store-button strong {
    font-size: 15.5px;
    line-height: 1.05;
    white-space: nowrap;
  }

  body.home .store-button:hover,
  body.home .store-button:active {
    transform: translateY(-1px);
    border-color: rgba(247,126,45,.44);
    box-shadow:
      0 0 0 1px rgba(247,126,45,.14),
      0 16px 30px rgba(0,0,0,.30),
      0 0 28px rgba(247,126,45,.10);
  }

  body.home .hero-secondary-row {
    margin-top: 18px;
    justify-content: center;
  }

  body.home .web-app-button {
    width: min(100%, 270px);
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    border-radius: 17px;
  }
}

@media (max-width: 374px) {
  body.home .store-buttons.compact {
    grid-template-columns: 1fr;
  }
}



/* =======================================================
   V35 — Mobile home trust buttons + app page store buttons
   Desktop untouched
   ======================================================= */

@media (max-width: 640px) {
  /* Home: center the two legal/trust buttons inside the "FIDUCIA" card */
  body.home .highlight-card .button-stack {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  body.home .highlight-card .button-stack .secondary-btn {
    width: min(100%, 430px);
    justify-content: center;
    text-align: center;
  }

  /* App page: use the same compact mobile download button layout as the homepage */
  body[data-page="app"] .store-buttons.compact {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 28px !important;
    justify-content: initial !important;
  }

  body[data-page="app"] .store-button {
    min-width: 0;
    width: 100%;
    min-height: 66px;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 18px;
    background:
      radial-gradient(circle at 20% 0%, rgba(255,255,255,.10), transparent 34%),
      linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
      #05070b;
    border: 1px solid rgba(255,255,255,.17);
    box-shadow:
      0 14px 28px rgba(0,0,0,.26),
      inset 0 1px 0 rgba(255,255,255,.055);
  }

  body[data-page="app"] .store-button .store-icon {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
  }

  body[data-page="app"] .store-button > span:last-child {
    min-width: 0;
  }

  body[data-page="app"] .store-button small {
    font-size: 9.5px;
    letter-spacing: .075em;
    margin-bottom: 4px;
    white-space: nowrap;
  }

  body[data-page="app"] .store-button strong {
    font-size: 15.5px;
    line-height: 1.05;
    white-space: nowrap;
  }

  body[data-page="app"] .store-button:hover,
  body[data-page="app"] .store-button:active {
    transform: translateY(-1px);
    border-color: rgba(247,126,45,.44);
    box-shadow:
      0 0 0 1px rgba(247,126,45,.14),
      0 16px 30px rgba(0,0,0,.30),
      0 0 28px rgba(247,126,45,.10);
  }
}

@media (max-width: 374px) {
  body[data-page="app"] .store-buttons.compact {
    grid-template-columns: 1fr;
  }
}



/* =======================================================
   V36 — Consistent mobile navigation buttons
   Desktop untouched
   ======================================================= */

@media (max-width: 640px) {
  /* Make internal page-change buttons match the nicer trust-card style */
  .section .secondary-btn,
  .inline-callout .secondary-btn,
  .split-section .secondary-btn,
  .highlight-card .secondary-btn,
  .feature-panel .secondary-btn,
  .product-section-heading + .cta-row .secondary-btn {
    width: min(100%, 430px);
    min-height: 58px;
    justify-content: center;
    text-align: center;
    padding: 15px 22px;
    border-radius: 18px;
    color: #f7efe3;
    background:
      radial-gradient(circle at 24% 0%, rgba(255,255,255,.075), transparent 32%),
      linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.025)),
      rgba(7, 9, 13, .78);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow:
      0 14px 30px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.050);
  }

  .section .secondary-btn:hover,
  .section .secondary-btn:active,
  .inline-callout .secondary-btn:hover,
  .inline-callout .secondary-btn:active,
  .split-section .secondary-btn:hover,
  .split-section .secondary-btn:active,
  .highlight-card .secondary-btn:hover,
  .highlight-card .secondary-btn:active,
  .feature-panel .secondary-btn:hover,
  .feature-panel .secondary-btn:active {
    transform: translateY(-1px);
    color: #fff;
    border-color: rgba(247,126,45,.46);
    background:
      radial-gradient(circle at 24% 0%, rgba(247,126,45,.13), transparent 34%),
      linear-gradient(180deg, rgba(247,126,45,.075), rgba(255,255,255,.035)),
      rgba(7, 9, 13, .84);
    box-shadow:
      0 0 0 1px rgba(247,126,45,.12),
      0 18px 34px rgba(0,0,0,.30),
      0 0 28px rgba(247,126,45,.12);
  }

  /* Keep CTA rows tidy and centered on mobile */
  .section .cta-row,
  .inline-callout .cta-row,
  .split-section .cta-row,
  .feature-panel .cta-row {
    justify-content: center;
  }
}



/* =======================================================
   V37 — Compact mobile footer
   Desktop untouched
   ======================================================= */

@media (max-width: 640px) {
  .site-footer {
    width: calc(100% - 32px);
    padding: 34px 0 28px;
    margin-top: 10px;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 18px;
    align-items: start;
  }

  .footer-grid > div:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }

  .site-footer .brand.footer-brand {
    margin: 0;
  }

  .site-footer .brand.footer-brand img {
    width: 48px;
    height: 48px;
    border-radius: 13px;
  }

  .site-footer .brand.footer-brand span {
    font-size: 1.16rem;
  }

  .site-footer p {
    grid-column: 1 / -1;
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.55;
    max-width: 330px;
  }

  .footer-store-mini {
    grid-column: 1 / -1;
    margin-top: 12px;
    gap: 8px;
    font-size: 15px;
  }

  .site-footer h4 {
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: .20em;
  }

  .site-footer a {
    margin: 7px 0;
    font-size: 15px;
    line-height: 1.35;
  }

  .footer-grid > div:nth-child(4) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,.08);
  }

  .footer-grid > div:nth-child(4) h4 {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 28px;
    padding-top: 18px;
    font-size: 12.5px;
    line-height: 1.45;
  }

  .company-footer > span {
    display: block;
  }

  .company-footer > span:last-child,
  .footer-email-line {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
  }

  .company-footer a,
  .footer-email-line a {
    white-space: nowrap;
  }
}

@media (max-width: 374px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid > div:nth-child(4) {
    grid-template-columns: 1fr;
  }
}



/* =======================================================
   V38 — Subtle company/legal footer details
   Less visible on desktop, much lighter on mobile
   ======================================================= */

.footer-bottom.company-footer {
  color: rgba(255,255,255,.48);
  font-size: 12.5px;
  line-height: 1.45;
  gap: 6px 18px;
  margin-top: 30px;
  padding-top: 16px;
}

.footer-bottom.company-footer span {
  opacity: .86;
}

.footer-bottom.company-footer a {
  color: rgba(255,255,255,.56);
  font-weight: 650;
}

.footer-bottom.company-footer a:hover {
  color: rgba(255,255,255,.82);
}

@media (min-width: 900px) {
  .footer-bottom.company-footer {
    max-width: 860px;
  }
}

@media (max-width: 640px) {
  .footer-bottom.company-footer {
    margin-top: 20px;
    padding-top: 14px;
    gap: 5px;
    font-size: 10.8px;
    line-height: 1.38;
    color: rgba(255,255,255,.42);
  }

  .footer-bottom.company-footer span {
    opacity: .82;
  }

  .footer-bottom.company-footer a {
    color: rgba(255,255,255,.50);
    font-weight: 600;
  }

  .footer-bottom.company-footer > span:nth-child(2),
  .footer-bottom.company-footer > span:nth-child(3) {
    max-width: 320px;
  }

  .footer-bottom.company-footer > span:last-child,
  .footer-email-line {
    font-size: 10.8px;
  }
}


/* =======================================================
   V39 — Footer social icons
   ======================================================= */
.footer-socials {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.footer-social {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.82);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.footer-social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.footer-social:hover {
  transform: translateY(-1px);
  border-color: rgba(247,186,93,.42);
  background: rgba(247,186,93,.08);
  color: #f7ba5d;
  box-shadow: 0 0 0 1px rgba(247,186,93,.10), 0 10px 18px rgba(0,0,0,.18);
}

.footer-social.is-placeholder {
  color: rgba(255,255,255,.56);
}

@media (max-width: 640px) {
  .footer-socials {
    grid-column: 1 / -1;
    margin-top: 10px;
    gap: 8px;
  }

  .footer-social {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  .footer-social svg {
    width: 15px;
    height: 15px;
  }
}


/* =======================================================
   V40 — Official social icons styling
   ======================================================= */
.footer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.footer-social {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  text-decoration: none;
  border: none;
  background: transparent;
  box-shadow: none;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.footer-social svg {
  width: 26px;
  height: 26px;
  display: block;
}
.footer-social:hover {
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.06);
}
.footer-social.is-placeholder {
  cursor: default;
  opacity: .96;
}
.footer-social.is-placeholder:hover {
  transform: translateY(-1px) scale(1.02);
}
.footer-social--instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  box-shadow: 0 10px 18px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.12);
}
.footer-social--facebook {
  background: #1877f2;
  box-shadow: 0 10px 18px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.10);
}
.footer-social--facebook svg {
  width: 24px;
  height: 24px;
}
.footer-social--tiktok {
  background: #0f0f12;
  box-shadow: 0 10px 18px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.10);
}
.footer-social--tiktok svg {
  width: 24px;
  height: 24px;
}
@media (max-width: 640px) {
  .footer-socials {
    margin-top: 12px;
    gap: 10px;
  }
  .footer-social {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }
  .footer-social svg {
    width: 24px;
    height: 24px;
  }
}


/* =======================================================
   V41 — Footer social icons refined with clearer official marks
   ======================================================= */
.footer-socials {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.footer-social {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  text-decoration: none;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 18px rgba(0,0,0,.16);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.footer-social__icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.footer-social__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.footer-social:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 22px rgba(0,0,0,.2);
  background: rgba(255,255,255,.045);
}
.footer-social--instagram .footer-social__icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 7%, #fd5949 44%, #d6249f 62%, #285AEB 92%);
  box-shadow: 0 4px 12px rgba(214,36,159,.28);
}
.footer-social--facebook .footer-social__icon {
  width: 34px;
  height: 34px;
}
.footer-social--facebook svg {
  filter: drop-shadow(0 3px 10px rgba(24,119,242,.22));
}
.footer-social--tiktok .footer-social__icon {
  width: 34px;
  height: 34px;
}
.footer-social--tiktok svg {
  filter: drop-shadow(0 4px 8px rgba(37,244,238,.16));
}
.footer-social.is-placeholder {
  cursor: default;
}
@media (max-width: 640px) {
  .footer-socials {
    gap: 12px;
    margin-top: 14px;
  }
  .footer-social {
    width: 50px;
    height: 50px;
    border-radius: 15px;
  }
  .footer-social__icon {
    width: 32px;
    height: 32px;
  }
  .footer-social--instagram .footer-social__icon {
    width: 34px;
    height: 34px;
  }
}



/* =======================================================
   V42 — Footer social icons no box
   Smaller official icons, no background container
   ======================================================= */

.footer-socials {
  gap: 28px;
  margin-top: 18px;
}

.footer-social {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-social__icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-social__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.footer-social--instagram .footer-social__icon {
  width: 31px;
  height: 31px;
  border-radius: 9px;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 7%, #fd5949 44%, #d6249f 62%, #285AEB 92%);
  box-shadow: none;
}

.footer-social--facebook .footer-social__icon {
  width: 30px;
  height: 30px;
}

.footer-social--tiktok .footer-social__icon {
  width: 30px;
  height: 30px;
}

.footer-social:hover {
  transform: translateY(-1px) scale(1.04);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.footer-social.is-placeholder {
  opacity: 1;
}

@media (max-width: 640px) {
  .footer-socials {
    gap: 24px;
    margin-top: 14px;
  }

  .footer-social {
    width: 32px;
    height: 32px;
  }

  .footer-social__icon {
    width: 28px;
    height: 28px;
  }

  .footer-social--instagram .footer-social__icon {
    width: 29px;
    height: 29px;
    border-radius: 8px;
  }

  .footer-social--facebook .footer-social__icon,
  .footer-social--tiktok .footer-social__icon {
    width: 28px;
    height: 28px;
  }
}


/* =======================================================
   V53 — Community page only: slightly thinner Dynamic Island
   Only vertical thickness reduced; width stays essentially unchanged
   ======================================================= */
body[data-page="community"] .community-phone .island {
  height: 25px;
  top: 18px;
}

@media (max-width: 640px) {
  body[data-page="community"] .community-phone .island {
    height: 24px;
    top: 17px;
  }
}



/* =======================================================
   V55 — First homepage iPhone:
   new looping video + hidden front camera
   ======================================================= */

.hero-section .phone-frame.home-hero-phone.no-camera .island {
  display: none !important;
}

.hero-section .phone-frame.home-hero-phone.no-camera .screen.hero-video-screen {
  background-image: none !important;
  background-color: #05070b;
  position: relative;
}

.hero-section .phone-frame.home-hero-phone.no-camera .hero-phone-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border: 0;
  pointer-events: none;
}



/* =======================================================
   V57 — Community iPhone only: thinner front camera
   Width unchanged, only vertical height reduced
   ======================================================= */
body[data-page="community"] .community-phone .island {
  width: 96px !important;
  height: 24px !important;
  top: 19px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 640px) {
  body[data-page="community"] .community-phone .island {
    width: 96px !important;
    height: 23px !important;
    top: 18px !important;
  }
}



/* =======================================================
   V58 — Community iPhone only: thin front camera, final
   Same width, lower vertical thickness only
   ======================================================= */
body[data-page="community"] .community-phone .island {
  width: 96px !important;
  height: 23px !important;
  top: 19px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 640px) {
  body[data-page="community"] .community-phone .island {
    width: 96px !important;
    height: 22px !important;
    top: 18px !important;
  }
}



/* =======================================================
   V59 — Community iPhone only: final thin front camera
   Width unchanged; only vertical height reduced
   ======================================================= */
body[data-page="community"] .community-phone .island {
  width: 96px !important;
  height: 23px !important;
  top: 19px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 640px) {
  body[data-page="community"] .community-phone .island {
    width: 96px !important;
    height: 22px !important;
    top: 18px !important;
  }
}



/* =======================================================
   V60 — Community iPhone only: even thinner front camera
   Same width, slightly thinner vertically
   ======================================================= */
body[data-page="community"] .community-phone .island {
  width: 96px !important;
  height: 20px !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 640px) {
  body[data-page="community"] .community-phone .island {
    width: 96px !important;
    height: 19px !important;
    top: 19px !important;
  }
}



/* =======================================================
   V61 — Community iPhone only: thin camera preserved
   ======================================================= */
body[data-page="community"] .community-phone .island {
  width: 96px !important;
  height: 20px !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 640px) {
  body[data-page="community"] .community-phone .island {
    width: 96px !important;
    height: 19px !important;
    top: 19px !important;
  }
}



/* =======================================================
   V62 — Community iPhone only: thin camera preserved
   ======================================================= */
body[data-page="community"] .community-phone .island {
  width: 96px !important;
  height: 20px !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 640px) {
  body[data-page="community"] .community-phone .island {
    width: 96px !important;
    height: 19px !important;
    top: 19px !important;
  }
}



/* =======================================================
   V63 — NFT page visual showcase
   ======================================================= */
.nft-showcase-hero {
  width: min(100% - 48px, 1220px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(360px, .78fr);
  gap: clamp(36px, 6vw, 86px);
  align-items: start;
  padding: clamp(48px, 6vw, 80px) 0 clamp(54px, 7vw, 92px);
  position: relative;
}

.nft-showcase-hero::before {
  content: "";
  position: absolute;
  inset: 3% auto auto -12%;
  width: min(520px, 42vw);
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 122, 43, .2), rgba(255, 122, 43, 0) 68%);
  filter: blur(10px);
  pointer-events: none;
}

.nft-showcase-copy {
  position: relative;
  z-index: 2;
}

.nft-showcase-copy h1 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(3rem, 6.6vw, 6.35rem);
  line-height: .91;
  letter-spacing: -.07em;
}

.nft-showcase-copy h1::after {
  content: "";
  color: var(--w4e-orange-2);
}

.nft-showcase-copy .lead {
  max-width: 650px;
  margin-top: 28px;
}

.nft-feature-list {
  margin-top: 30px;
  display: grid;
  gap: 14px;
  max-width: 700px;
}

.nft-feature-card {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 18px;
  align-items: center;
  min-height: 92px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
    rgba(9, 11, 16, .58);
  box-shadow: 0 22px 80px rgba(0,0,0,.34);
  backdrop-filter: blur(12px);
}

.nft-feature-card h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.nft-feature-card p {
  margin: 0;
  color: var(--w4e-muted);
  line-height: 1.58;
}

.nft-feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: var(--w4e-orange-2);
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 189, 88, .24), rgba(255, 122, 43, .07) 58%, rgba(255,255,255,.04)),
    rgba(255,255,255,.04);
  border: 1px solid rgba(255, 122, 43, .28);
  box-shadow: 0 0 34px rgba(255, 122, 43, .16);
}

.nft-feature-icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nft-feature-note {
  grid-template-columns: 76px 1fr;
  min-height: 92px;
  padding: 18px 20px;
  align-items: center;
}

.nft-feature-note .nft-feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
}

.nft-feature-note .nft-feature-icon svg {
  width: 28px;
  height: 28px;
}

.nft-showcase-visual {
  position: relative;
  display: grid;
  place-items: center;
}

.nft-showcase-visual::before {
  content: "";
  position: absolute;
  width: min(460px, 72%);
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 122, 43, .3), rgba(255, 122, 43, 0) 66%);
  filter: blur(18px);
}

.nft-phone-frame {
  position: relative;
  z-index: 2;
  width: min(390px, 88%);
  padding: 10px;
  border-radius: 48px;
  background: linear-gradient(135deg, #ffb24d, #ff6b1f 35%, #b33a12 72%, #ffd27a);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16) inset,
    0 28px 90px rgba(0,0,0,.62),
    0 0 46px rgba(255, 112, 31, .34);
}

.nft-phone-screen {
  overflow: hidden;
  border-radius: 38px;
  background: #05050a;
  aspect-ratio: 720 / 1568;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset;
}

.nft-phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

@media (max-width: 980px) {
  .nft-showcase-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 54px;
  }

  .nft-showcase-visual {
    min-height: auto;
    order: -1;
  }

  .nft-phone-frame {
    width: min(330px, 82vw);
  }

  .nft-showcase-copy {
    text-align: left;
  }

  .nft-showcase-copy h1,
  .nft-showcase-copy .lead,
  .nft-feature-list {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .nft-showcase-hero {
    width: min(100% - 32px, 1220px);
    padding-top: 34px;
    gap: 32px;
  }

  .nft-showcase-copy h1 {
    font-size: clamp(3.05rem, 13vw, 4.25rem);
  }

  .nft-feature-card {
    grid-template-columns: 54px 1fr;
    padding: 15px;
    border-radius: 18px;
  }

  .nft-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }

  .nft-feature-icon svg {
    width: 24px;
    height: 24px;
  }

  .nft-phone-frame {
    width: min(286px, 82vw);
    border-radius: 42px;
    padding: 8px;
  }

  .nft-phone-screen {
    border-radius: 34px;
  }
}


/* =======================================================
   V64 — NFT page refined hero
   ======================================================= */
.nft-showcase-hero {
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, .78fr);
  gap: clamp(30px, 5vw, 72px);
}

.nft-showcase-copy h1 {
  max-width: 620px;
  font-size: clamp(3.55rem, 5.35vw, 5.35rem);
  line-height: .94;
  letter-spacing: -.06em;
}

.nft-showcase-copy .lead {
  max-width: 680px;
  margin-top: 22px;
}

.nft-showcase-visual {
  min-height: auto;
}

.nft-hero-phone-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
}

.nft-hero-phone-wrap::before {
  content: "";
  position: absolute;
  width: min(460px, 92%);
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 122, 43, .22), rgba(255, 122, 43, 0) 68%);
  filter: blur(18px);
  pointer-events: none;
}

.phone-frame.nft-hero-phone {
  width: 320px;
  max-width: min(320px, 88vw);
  /* Lock height explicitly to defeat Safari's grid stretch behaviour.
     Screen is 304x658.67 (9:19.5), frame = screen + 16px padding (8 top + 8 bottom). */
  height: 674.67px;
  max-height: 674.67px;
  flex: 0 0 auto;
  align-self: center;
  justify-self: center;
  transform: none;
  margin: 0;
}

.phone-frame.nft-hero-phone .screen {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
}

.phone-frame.nft-hero-phone .screen.screen-nft-hero {
  background-image: url('assets/nft-create-screen.jpeg');
  background-position: center;
}

/* remove old custom phone look on this page */
.nft-phone-frame,
.nft-phone-screen {
  all: unset;
}

@media (max-width: 1180px) {
  .nft-showcase-copy h1 {
    font-size: clamp(3.3rem, 4.8vw, 4.7rem);
    max-width: 560px;
  }

  .phone-frame.nft-hero-phone {
    width: 300px;
    height: 632.5px;
    max-height: 632.5px;
  }
}

@media (max-width: 980px) {
  .nft-showcase-hero {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .nft-showcase-visual {
    min-height: auto;
    order: -1;
  }

  .phone-frame.nft-hero-phone {
    width: min(300px, 82vw);
  }

  .nft-showcase-copy h1 {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .nft-showcase-copy h1 {
    font-size: clamp(2.8rem, 11vw, 3.65rem);
    line-height: .96;
  }

  .phone-frame.nft-hero-phone {
    width: min(278px, 80vw);
  }
}


/* =======================================================
   V68 — NFT page typography aligned with the other product pages
   Only text/font sizing is touched here. Phone/screen layout is untouched.
   ======================================================= */
body[data-page="nftWall4ever"] .nft-showcase-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  color: var(--w4e-orange-2);
  background: rgba(247, 126, 45, 0.10);
  border: 1px solid rgba(247, 126, 45, 0.22);
  box-shadow: 0 10px 26px rgba(247, 126, 45, 0.07);
  border-radius: 999px;
  padding: 8px 13px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 850;
  margin: 0 0 20px;
}

body[data-page="nftWall4ever"] .nft-showcase-copy h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin: 0 0 22px;
  max-width: 900px;
}

body[data-page="nftWall4ever"] .nft-showcase-copy .lead {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--w4e-text-muted);
  max-width: 720px;
  margin: 0;
}

body[data-page="nftWall4ever"] .nft-feature-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: #ece8df;
}

body[data-page="nftWall4ever"] .nft-feature-card p {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--w4e-text-muted);
  margin: 0;
}

body[data-page="nftWall4ever"] .nft-feature-note p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--w4e-text);
  font-weight: 500;
}

body[data-page="nftWall4ever"] .product-section-heading h2,
body[data-page="nftWall4ever"] .inline-callout h2,
body[data-page="nftWall4ever"] .feature-block h3 {
  font-family: var(--font-display);
  font-weight: 700;
}

body[data-page="nftWall4ever"] .product-section-heading p,
body[data-page="nftWall4ever"] .inline-callout p,
body[data-page="nftWall4ever"] .feature-block p {
  font-family: var(--font-body);
}

@media (max-width: 640px) {
  body[data-page="nftWall4ever"] .nft-showcase-copy .eyebrow {
    font-size: 11px;
    padding: 7px 11px;
    letter-spacing: 0.12em;
  }

  body[data-page="nftWall4ever"] .nft-showcase-copy h1 {
    font-size: clamp(34px, 10vw, 46px);
    line-height: 1.04;
    letter-spacing: -0.028em;
  }

  body[data-page="nftWall4ever"] .nft-showcase-copy .lead {
    font-size: 16px;
    line-height: 1.65;
  }

  body[data-page="nftWall4ever"] .nft-feature-card h3 {
    font-size: 18px;
  }

  body[data-page="nftWall4ever"] .nft-feature-card p {
    font-size: 14.5px;
  }
}


/* =======================================================
   V79 — NFT mobile hero phone proportion fix
   The NFT hero phone must keep the same body ratio when the
   mobile width changes. Previously only width changed on mobile,
   so the frame became too tall/narrow.
   ======================================================= */
@media (max-width: 980px) {
  .phone-frame.nft-hero-phone {
    width: min(300px, 82vw) !important;
    height: min(632.5px, calc(82vw * 2.108333)) !important;
    max-height: min(632.5px, calc(82vw * 2.108333)) !important;
  }
}

@media (max-width: 640px) {
  .phone-frame.nft-hero-phone {
    width: min(278px, 80vw) !important;
    height: min(586px, calc(80vw * 2.108333)) !important;
    max-height: min(586px, calc(80vw * 2.108333)) !important;
  }
}