/* NoWay Scores — ULTIMATE POLISH V2
   Visual-only layer. Keeps existing Firebase / Stripe / account / PWA / menu logic intact. */
:root{
  --nw-bg:#030812;
  --nw-bg-2:#071525;
  --nw-panel:#091725;
  --nw-panel-2:#0c1d30;
  --nw-border:rgba(77,150,242,.28);
  --nw-border-strong:rgba(86,171,255,.48);
  --nw-gold:#f7c94a;
  --nw-gold-2:#e2ac25;
  --nw-cyan:#4bc7ff;
  --nw-text:#f5f8fc;
  --nw-muted:#9fb3ce;
  --nw-shadow:0 30px 90px rgba(0,0,0,.42);
}
html,body{background:#030812!important;color:var(--nw-text)!important}
body{
  background:
    radial-gradient(circle at 12% 4%,rgba(34,113,223,.18),transparent 30rem),
    radial-gradient(circle at 90% 15%,rgba(245,201,74,.07),transparent 28rem),
    linear-gradient(180deg,#030812 0%,#071321 48%,#030812 100%)!important;
}

/* ---------- TRUE BRAND / HEADER ---------- */
html body .topbar{
  border:1px solid rgba(73,145,235,.34)!important;
  background:rgba(4,12,23,.94)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.34)!important;
}
html body .topbar .brand{display:flex!important;align-items:center!important;gap:11px!important;min-width:220px!important}
html body .topbar .brand .brand-icon{
  width:46px!important;height:46px!important;flex:0 0 46px!important;
  object-fit:cover!important;object-position:center!important;border-radius:14px!important;
  border:1px solid rgba(247,201,74,.58)!important;
  box-shadow:0 0 0 1px rgba(61,136,243,.16) inset,0 10px 28px rgba(0,0,0,.30)!important;
}
html body .topbar .brand .brand-text{display:grid!important;gap:3px!important;min-width:0!important}
html body .topbar .brand .brand-text strong{font-size:17px!important;line-height:1!important;color:#fff!important;white-space:nowrap!important}
html body .topbar .brand .brand-text small{font-size:10px!important;line-height:1.2!important;color:#8298b6!important;white-space:nowrap!important}

/* ---------- HERO: LAPTOP + PHONE ---------- */
html body main .hero{padding-top:70px!important;padding-bottom:66px!important}
html body main .hero-device-composition{
  height:620px!important;position:relative!important;display:block!important;
}
html body main .hero-device-composition:before{
  content:""!important;position:absolute!important;inset:7% 0 6% 4%!important;border-radius:42px!important;
  background:
    radial-gradient(circle at 68% 34%,rgba(247,201,74,.16),transparent 30%),
    radial-gradient(circle at 24% 30%,rgba(56,138,255,.24),transparent 38%),
    linear-gradient(145deg,#071525,#0a1b2d)!important;
  border:1px solid rgba(78,151,243,.24)!important;
  box-shadow:0 35px 100px rgba(0,0,0,.36)!important;
}
html body main .laptop-frame{
  width:min(92%,735px)!important;right:0!important;top:58px!important;z-index:1!important;
  filter:drop-shadow(0 38px 58px rgba(0,0,0,.45))!important;
}
html body main .laptop-screen{
  padding:13px 13px 15px!important;border-radius:25px 25px 14px 14px!important;
  background:linear-gradient(180deg,#344258,#162234 16%,#0a111d 100%)!important;
  border:1px solid rgba(255,255,255,.10)!important;
}
html body main .laptop-screen img{
  width:100%!important;height:auto!important;aspect-ratio:1672/941!important;
  object-fit:contain!important;object-position:center!important;border-radius:12px!important;background:#02060c!important;
}
html body main .laptop-base{
  height:16px!important;width:108%!important;margin-left:-4%!important;
  background:linear-gradient(180deg,#eef1f6,#808b9b)!important;border-radius:0 0 28px 28px!important;
}
html body main .hero-phone-frame{
  width:258px!important;left:8%!important;bottom:6px!important;z-index:3!important;
  transform:rotate(-.7deg)!important;padding:8px!important;border-radius:35px!important;
}

/* One rule for every device screenshot: never crop the supplied screen. */
html body .phone-frame{
  position:relative!important;aspect-ratio:863/1822!important;overflow:hidden!important;
  padding:8px!important;border-radius:34px!important;
  background:linear-gradient(145deg,#30445f 0%,#0b1524 18%,#040811 82%,#243b58 100%)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 28px 72px rgba(0,0,0,.42),0 0 0 1px rgba(247,201,74,.11) inset!important;
}
html body .phone-frame:after{
  content:""!important;position:absolute!important;inset:5px!important;border-radius:29px!important;
  border:1px solid rgba(86,171,255,.17)!important;pointer-events:none!important;
}
html body .phone-frame .phone-notch-premium{
  top:8px!important;height:16px!important;width:32%!important;border-radius:0 0 15px 15px!important;background:#02060c!important;
}
html body .phone-frame img{
  display:block!important;width:100%!important;height:100%!important;max-height:none!important;
  object-fit:contain!important;object-position:center center!important;border-radius:27px!important;background:#02060c!important;
  margin:0!important;padding:0!important;
}

/* ---------- EXPERIENCE PHONES ---------- */
html body main .visual-band{padding:38px 0 94px!important}
html body main .visual-strip{gap:22px!important;align-items:stretch!important}
html body main .visual-strip figure{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  padding:18px 18px 64px!important;border-radius:30px!important;overflow:hidden!important;
  border:1px solid rgba(78,151,243,.25)!important;
  background:
    radial-gradient(circle at 50% 20%,rgba(47,126,237,.13),transparent 48%),
    linear-gradient(180deg,#091827,#06111d)!important;
  box-shadow:0 28px 75px rgba(0,0,0,.28)!important;
}
html body main .visual-strip figure.raised{transform:translateY(-10px)!important}
html body main .visual-strip .phone-card-frame{width:min(100%,300px)!important;margin:auto!important}
html body main .visual-strip figcaption{
  left:18px!important;right:18px!important;bottom:16px!important;text-align:center!important;
  background:rgba(5,14,25,.96)!important;border:1px solid rgba(85,158,246,.24)!important;color:#f7cf58!important;
}

/* ---------- SIGNAL + PRODUCT CARDS ---------- */
html body main .signal-strip{background:linear-gradient(180deg,#06101c,#071421)!important;border-color:rgba(77,150,242,.18)!important}
html body main .signal-grid{gap:12px!important;padding:20px 0!important}
html body main .signal-grid .signal-card{
  min-height:102px!important;padding:16px!important;border-radius:20px!important;
  background:linear-gradient(145deg,#0a1928,#07121e)!important;
  border:1px solid rgba(77,150,242,.22)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.16)!important;
}
html body main .signal-grid .signal-card+.signal-card{border-left:1px solid rgba(77,150,242,.22)!important}
html body main .signal-card .signal-icon{
  width:38px!important;height:38px!important;border-radius:13px!important;
  display:grid!important;place-items:center!important;color:#07101a!important;
  background:linear-gradient(145deg,#ffe47a,#dda621)!important;border:0!important;
}
html body main .signal-card strong{font-size:13px!important;color:#f5f8fc!important}
html body main .signal-card small{color:#8095b1!important;font-size:10px!important}
html body main .feature-card{
  background:
    radial-gradient(circle at 100% 0%,rgba(52,130,239,.10),transparent 14rem),
    linear-gradient(180deg,#0a1928,#07111d)!important;
  border:1px solid rgba(77,150,242,.23)!important;
  box-shadow:0 20px 55px rgba(0,0,0,.18)!important;
}
html body main .feature-card p{color:#8fa4c0!important}

/* ---------- SCENARIOS: ALL SCREEN INSIDE FRAME ---------- */
html body main .showcase{gap:60px!important}
html body main .gallery-v2{gap:18px!important;align-items:center!important}
html body main .showcase-phone{
  width:100%!important;max-width:250px!important;transform:none!important;margin:0 auto!important;
}
html body main .showcase-phone-featured{max-width:268px!important;transform:translateY(-8px)!important}

/* ---------- IDENTITY: READABLE, SPLIT LAYOUT ---------- */
html body main .cinematic{padding:10px 0 92px!important}
html body main .cinematic-frame{
  min-height:440px!important;display:grid!important;grid-template-columns:1.02fr .98fr!important;align-items:stretch!important;
  border-radius:34px!important;overflow:hidden!important;border:1px solid rgba(77,150,242,.26)!important;
  background:linear-gradient(135deg,#081624 0%,#0a1118 64%,#17130a 100%)!important;
  box-shadow:0 28px 88px rgba(0,0,0,.30)!important;
}
html body main .cinematic-frame:after{display:none!important;content:none!important}
html body main .cinematic-frame>img{
  grid-column:2!important;grid-row:1!important;display:block!important;width:100%!important;height:100%!important;min-height:0!important;
  object-fit:cover!important;object-position:68% center!important;filter:none!important;
}
html body main .cinematic-overlay{
  grid-column:1!important;grid-row:1!important;position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;
  align-self:center!important;max-width:620px!important;padding:54px 18px 54px 48px!important;z-index:2!important;
}
html body main .cinematic-overlay h2{font-size:clamp(42px,4.7vw,66px)!important;margin:14px 0 16px!important}
html body main .cinematic-overlay p{color:#a8b8cd!important;max-width:560px!important}

/* ---------- PREMIUM ---------- */
html body main .premium-section{
  background:
    radial-gradient(circle at 72% 0%,rgba(247,201,74,.10),transparent 28rem),
    radial-gradient(circle at 20% 28%,rgba(47,128,238,.10),transparent 26rem),
    linear-gradient(180deg,#071421,#050b13)!important;
  border-color:rgba(77,150,242,.15)!important;
}
html body main .price-card{
  background:linear-gradient(160deg,#0b1a2a,#07121e)!important;border:1px solid rgba(77,150,242,.28)!important;
  box-shadow:0 22px 60px rgba(0,0,0,.18)!important;
}
html body main .price-card.featured{
  background:linear-gradient(145deg,#13202a,#16170d)!important;border-color:rgba(247,201,74,.58)!important;
  box-shadow:0 24px 70px rgba(247,201,74,.07)!important;
}

/* ---------- SUPPORT / HEART RESTORED ---------- */
html body main .support-card{
  position:relative!important;overflow:hidden!important;padding:48px!important;
  background:
    radial-gradient(circle at 90% 15%,rgba(247,201,74,.10),transparent 18rem),
    radial-gradient(circle at 76% 45%,rgba(48,132,246,.08),transparent 20rem),
    linear-gradient(135deg,#091827 0%,#0a1518 100%)!important;
  border:1px solid rgba(77,150,242,.25)!important;border-radius:32px!important;
  box-shadow:0 26px 80px rgba(0,0,0,.24)!important;
}
html body main .support-card:before{
  content:"♡"!important;position:absolute!important;right:58px!important;top:34px!important;
  font-family:Arial,sans-serif!important;font-size:150px!important;line-height:1!important;font-weight:300!important;
  color:rgba(247,201,74,.19)!important;text-shadow:0 0 45px rgba(247,201,74,.08)!important;
  transform:rotate(-7deg)!important;pointer-events:none!important;
}
html body main .support-copy{position:relative!important;z-index:2!important;max-width:720px!important}
html body main .support-amounts,html body main .support-custom,html body main .support-payment-row,html body main .support-note{position:relative!important;z-index:2!important}
html body main .support-custom-field{background:#050b12!important;border-color:rgba(77,150,242,.25)!important}

/* ---------- IPHONE / LEGAL / FINAL CTA ---------- */
html body main .ios-card{
  background:
    radial-gradient(circle at 85% 30%,rgba(58,135,246,.12),transparent 18rem),
    linear-gradient(135deg,#091827,#07111d)!important;
  border:1px solid rgba(77,150,242,.26)!important;
}
html body main .legal-grid article{background:linear-gradient(160deg,#091725,#07111c)!important;border-color:rgba(77,150,242,.23)!important}
html body main .final-cta{
  background:
    linear-gradient(180deg,rgba(3,9,18,.26),rgba(3,9,18,.68)),
    url('/assets/hero-stadium.jpg') center center/cover no-repeat!important;
  border-color:rgba(77,150,242,.28)!important;
}

/* ---------- ACCOUNT MODAL: NEW PREMIUM VISUAL ---------- */
html body .account-modal-backdrop{background:rgba(1,5,11,.78)!important;backdrop-filter:blur(14px)!important}
html body .account-modal-card{
  width:min(560px,calc(100vw - 28px))!important;padding:30px!important;border-radius:30px!important;
  border:1px solid rgba(77,150,242,.32)!important;
  background:
    radial-gradient(circle at 92% 4%,rgba(247,201,74,.11),transparent 15rem),
    radial-gradient(circle at 10% 18%,rgba(52,131,242,.12),transparent 17rem),
    linear-gradient(160deg,#091827,#050c15)!important;
  box-shadow:0 38px 110px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.02) inset!important;
}
html body .account-modal-card:before{
  content:""!important;display:block!important;width:58px!important;height:58px!important;margin-bottom:18px!important;
  border-radius:17px!important;background:url('/assets/icon-256.png') center/cover no-repeat!important;
  border:1px solid rgba(247,201,74,.46)!important;box-shadow:0 12px 30px rgba(0,0,0,.28)!important;
}
html body .account-modal-close{
  top:18px!important;right:18px!important;background:#07111d!important;border-color:rgba(77,150,242,.27)!important;color:#fff!important;
}
html body .account-modal-card h2{font-size:clamp(28px,5vw,40px)!important;letter-spacing:-.035em!important;margin-top:10px!important}
html body .account-modal-card>p{color:#98abc3!important}
html body .account-auth-form input{background:#050b12!important;border-color:rgba(77,150,242,.25)!important;color:#fff!important}
html body .account-auth-form input:focus{border-color:rgba(247,201,74,.70)!important;box-shadow:0 0 0 3px rgba(247,201,74,.10)!important}
html body .account-signed-in,
html body .account-summary-card,
html body .invite-dashboard-card,
html body .notification-dashboard-card{
  background:rgba(4,11,19,.82)!important;border:1px solid rgba(77,150,242,.22)!important;border-radius:20px!important;
}
html body .account-auth-error:not(:empty){
  padding:12px 14px!important;border-radius:14px!important;border:1px solid rgba(255,96,96,.24)!important;
  background:rgba(74,18,25,.22)!important;color:#ffb1b1!important;line-height:1.45!important;
}
html body .account-summary-status{background:#0a1a2a!important;border-color:rgba(247,201,74,.36)!important;color:#f7cf58!important}

/* ---------- MOBILE DRAWER: NEW PREMIUM VISUAL ---------- */
@media(max-width:620px){
  html body .noway-mobile-backdrop{background:rgba(1,5,11,.72)!important;backdrop-filter:blur(10px)!important}
  html body .noway-mobile-drawer{
    width:min(350px,calc(100vw - 18px))!important;right:9px!important;padding:16px!important;border-radius:26px!important;
    border:1px solid rgba(77,150,242,.32)!important;
    background:
      radial-gradient(circle at 100% 0%,rgba(247,201,74,.11),transparent 13rem),
      radial-gradient(circle at 0% 20%,rgba(52,131,242,.12),transparent 15rem),
      linear-gradient(160deg,#091827,#050b13)!important;
    box-shadow:0 34px 100px rgba(0,0,0,.62)!important;
  }
  html body .noway-mobile-drawer-head{padding:2px 2px 14px!important;border-bottom:1px solid rgba(77,150,242,.18)!important}
  html body .noway-mobile-drawer-head strong{display:flex!important;align-items:center!important;gap:10px!important;font-size:16px!important;color:#fff!important}
  html body .noway-mobile-drawer-head strong:before{
    content:""!important;width:38px!important;height:38px!important;border-radius:12px!important;
    background:url('/assets/icon-256.png') center/cover no-repeat!important;border:1px solid rgba(247,201,74,.45)!important;
  }
  html body .noway-mobile-drawer-close{background:#07111d!important;border-color:rgba(77,150,242,.24)!important}
  html body .noway-mobile-menu-list{gap:9px!important;margin-top:14px!important}
  html body .noway-mobile-menu-item{
    min-height:54px!important;padding:0 15px!important;border-radius:16px!important;
    border:1px solid rgba(77,150,242,.20)!important;background:#081522!important;color:#f4f7fb!important;
  }
  html body .noway-mobile-menu-item:hover,html body .noway-mobile-menu-item:active{background:#0b1c2e!important;border-color:rgba(247,201,74,.42)!important}
  html body .noway-mobile-menu-item.primary{
    background:linear-gradient(135deg,#ffe47a,#ebb72f)!important;border-color:#f7c94a!important;color:#11100a!important;
    box-shadow:0 12px 32px rgba(235,183,47,.14)!important;
  }
}

/* ---------- MOBILE: CLEAN, NOT SCRAMBLED ---------- */
@media(max-width:620px){
  html body{padding-top:78px!important}
  html body .topbar{left:8px!important;right:8px!important;top:6px!important;width:auto!important;min-height:62px!important;padding:8px 9px!important;border-radius:20px!important}
  html body .topbar .brand{min-width:0!important;max-width:none!important;flex:1 1 auto!important;gap:8px!important}
  html body .topbar .brand .brand-icon{width:40px!important;height:40px!important;flex-basis:40px!important;border-radius:12px!important}
  html body .topbar .brand .brand-text strong{font-size:14px!important}
  html body .topbar .brand .brand-text small{font-size:8.5px!important}

  html body main .hero{padding:34px 0 32px!important}
  html body main .hero-copy{max-width:410px!important;margin:0 auto!important;text-align:center!important}
  html body main .hero-copy .eyebrow{font-size:9.5px!important;letter-spacing:.14em!important}
  html body main .hero-copy h1{font-size:clamp(39px,11.5vw,52px)!important;line-height:.98!important;margin:15px auto 18px!important;max-width:405px!important}
  html body main .hero-copy .lead{font-size:13.5px!important;line-height:1.62!important;max-width:370px!important}
  html body main .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;margin-top:20px!important}
  html body main .hero-actions .btn{width:100%!important;min-width:0!important;min-height:48px!important}
  html body main .trust-row{display:flex!important;justify-content:center!important;gap:7px!important;margin:16px auto 0!important;flex-wrap:wrap!important}
  html body main .trust-row>span{font-size:9px!important;padding:7px 9px!important;border-radius:999px!important;background:#071421!important;border:1px solid rgba(77,150,242,.21)!important}

  html body main .hero-visual{min-height:520px!important;margin-top:14px!important}
  html body main .hero-device-composition{height:510px!important;display:flex!important;align-items:center!important;justify-content:center!important}
  html body main .hero-device-composition:before{inset:3% 1% 2%!important;border-radius:30px!important}
  html body main .hero-device-composition .laptop-frame{display:none!important}
  html body main .hero-device-composition .hero-phone-frame{
    position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:min(76vw,290px)!important;margin:0 auto!important;transform:none!important;
  }

  /* Injected signal cards become a readable vertical list. */
  html body main .signal-strip{padding:18px 0!important}
  html body main .signal-grid{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;padding:0!important}
  html body main .signal-grid .signal-card{
    display:grid!important;grid-template-columns:44px 1fr!important;align-items:center!important;gap:12px!important;
    min-height:78px!important;padding:13px!important;border-radius:18px!important;text-align:left!important;
  }
  html body main .signal-grid .signal-card:last-child{grid-column:auto!important}
  html body main .signal-card .signal-icon{margin:0!important;width:40px!important;height:40px!important}
  html body main .signal-card strong{font-size:13px!important}
  html body main .signal-card small{font-size:10px!important;margin-top:3px!important}

  html body main .visual-band{padding:24px 0 58px!important}
  html body main .visual-strip{
    display:grid!important;grid-template-columns:1fr!important;gap:16px!important;overflow:visible!important;
    margin:0!important;padding:0!important;
  }
  html body main .visual-strip figure{width:100%!important;max-width:355px!important;margin:0 auto!important;flex:none!important;padding:14px 14px 58px!important;transform:none!important}
  html body main .visual-strip .phone-card-frame{width:min(74vw,285px)!important}

  html body main .feature-grid{grid-template-columns:1fr!important;gap:11px!important}
  html body main .feature-card{min-height:0!important;padding:20px!important}
  html body main .feature-icon{margin-bottom:18px!important}

  html body main .showcase-copy{text-align:center!important;max-width:380px!important;margin:0 auto 26px!important}
  html body main .gallery-v2{
    display:grid!important;grid-template-columns:1fr!important;gap:18px!important;overflow:visible!important;
    margin:0!important;padding:0!important;
  }
  html body main .showcase-phone,html body main .showcase-phone-featured{width:min(74vw,285px)!important;max-width:285px!important;margin:0 auto!important;transform:none!important;flex:none!important}

  /* Identity is text first, full visual second — no unreadable overlay. */
  html body main .cinematic{padding:0 10px 60px!important}
  html body main .cinematic-frame{display:grid!important;grid-template-columns:1fr!important;min-height:0!important;border-radius:28px!important}
  html body main .cinematic-overlay{
    grid-column:1!important;grid-row:1!important;padding:30px 24px 24px!important;text-align:left!important;max-width:none!important;
  }
  html body main .cinematic-overlay h2{font-size:clamp(36px,10vw,48px)!important;line-height:1!important}
  html body main .cinematic-frame>img{
    grid-column:1!important;grid-row:2!important;width:100%!important;height:auto!important;min-height:0!important;
    aspect-ratio:16/7!important;object-fit:cover!important;object-position:72% center!important;border-top:1px solid rgba(77,150,242,.16)!important;
  }

  html body main .support-card{padding:26px 20px 24px!important;border-radius:25px!important}
  html body main .support-card:before{right:-2px!important;top:18px!important;font-size:102px!important;color:rgba(247,201,74,.14)!important}
  html body main .support-copy{padding-right:22px!important}
  html body main .support-custom{grid-template-columns:1fr!important;gap:9px!important}
  html body main .support-custom .btn{width:100%!important}

  html body .account-modal{padding:10px!important}
  html body .account-modal-card{width:100%!important;max-height:calc(100dvh - 20px)!important;padding:22px!important;border-radius:25px!important}
  html body .account-modal-card:before{width:50px!important;height:50px!important;margin-bottom:14px!important}
  html body .account-modal-card h2{font-size:31px!important}
  html body .account-signed-in{padding:16px!important}

  html body main .final-cta{margin:0 10px 48px!important;padding:62px 18px!important;border-radius:27px!important;background-position:center center!important}
}

@media(max-width:380px){
  html body .topbar .brand .brand-text small{display:none!important}
  html body .topbar .brand .brand-text strong{font-size:13px!important}
  html body .account-auth-btn{padding:0 8px!important}
  html body main .hero-copy h1{font-size:38px!important}
}
/* app.js may inject the legacy identity-art at runtime; the new identity image replaces it. */
html body main .cinematic-frame .identity-art{display:none!important}

/* ============================================================
   NOWAY FINAL TOUCH V3 — only the four remaining visual fixes
   1) phone screenshots fit the physical frames exactly
   2) identity artwork is fully visible / centered
   3) mobile trust badges no longer overlap old injected artwork
   4) mobile screenshot galleries scroll sideways
   ============================================================ */

/* 1 — EXACT PHONE FIT: the frame follows the real screenshot ratio instead of
   forcing a separate fixed-height canvas. This removes the dead area / off-centre look. */
html body .phone-frame{
  aspect-ratio:auto!important;
  height:auto!important;
  min-height:0!important;
  padding:7px!important;
  overflow:hidden!important;
  display:block!important;
}
html body .phone-frame img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0 auto!important;
  border-radius:27px!important;
}
html body .phone-frame:after{
  inset:4px!important;
  border-radius:29px!important;
}
html body .phone-frame .phone-notch-premium{
  top:7px!important;
}

/* Keep desktop device groups optically aligned after removing forced frame height. */
html body main .visual-strip figure{
  justify-content:flex-start!important;
}
html body main .visual-strip .phone-card-frame,
html body main .showcase-phone,
html body main .showcase-phone-featured{
  align-self:flex-start!important;
}
html body main .gallery-v2{
  align-items:flex-start!important;
}

/* 2 — IDENTITY: use the complete wide artwork rather than crop the logo on the right. */
html body main .cinematic-frame{
  min-height:540px!important;
  grid-template-columns:1fr!important;
  position:relative!important;
  isolation:isolate!important;
  background:#050b13!important;
}
html body main .cinematic-frame>img{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  object-fit:cover!important;
  object-position:center center!important;
  border:0!important;
}
html body main .cinematic-frame:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,rgba(3,8,18,.96) 0%,rgba(3,8,18,.88) 35%,rgba(3,8,18,.42) 56%,rgba(3,8,18,.03) 78%)!important;
}
html body main .cinematic-overlay{
  position:relative!important;
  z-index:2!important;
  grid-column:1!important;
  grid-row:1!important;
  align-self:center!important;
  width:min(55%,620px)!important;
  max-width:620px!important;
  padding:58px 0 58px 48px!important;
}

@media(max-width:620px){
  /* 3 — HERO TRUST: kill every legacy bitmap/pseudo badge and use the real HTML
     as clean compact chips. No overlapping text, no duplicated background. */
  html[lang] body main .trust-row{
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    aspect-ratio:auto!important;
    margin:16px auto 0!important;
    padding:2px 0 5px!important;
    gap:8px!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    background:none!important;
    background-image:none!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    scroll-snap-type:x proximity!important;
    scrollbar-width:none!important;
  }
  html[lang] body main .trust-row::-webkit-scrollbar{display:none!important}
  html[lang] body main .trust-row::before,
  html[lang] body main .trust-row::after{
    content:none!important;
    display:none!important;
    background:none!important;
  }
  html[lang] body main .trust-row>span{
    display:inline-flex!important;
    flex:0 0 auto!important;
    min-width:150px!important;
    min-height:42px!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    padding:9px 12px!important;
    border-radius:14px!important;
    border:1px solid rgba(77,150,242,.24)!important;
    background:linear-gradient(180deg,#091827,#06111d)!important;
    color:#9fb3ce!important;
    font-size:9.5px!important;
    line-height:1.2!important;
    text-align:center!important;
    white-space:nowrap!important;
    scroll-snap-align:start!important;
    box-shadow:0 10px 24px rgba(0,0,0,.18)!important;
  }
  html[lang] body main .trust-row>span b{
    color:#f7c94a!important;
    font-size:10px!important;
    letter-spacing:.02em!important;
  }
  html[lang] body main .trust-row>span:first-child b{color:#ff5b55!important}

  /* The hero phone sits cleanly below the chips with no collision. */
  html body main .hero-visual{
    min-height:0!important;
    height:auto!important;
    margin-top:18px!important;
  }
  html body main .hero-device-composition{
    min-height:0!important;
    height:auto!important;
    padding:14px 0 20px!important;
  }
  html body main .hero-device-composition:before{
    inset:0 2% 0!important;
  }
  html body main .hero-device-composition .hero-phone-frame{
    width:min(72vw,286px)!important;
    margin:0 auto!important;
  }

  /* 4 — BOTH MOBILE SCREENSHOT GROUPS ARE HORIZONTAL CAROUSELS. */
  html body main .visual-strip{
    display:flex!important;
    grid-template-columns:none!important;
    gap:14px!important;
    width:auto!important;
    max-width:none!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    margin-left:calc((100vw - 100%)/-2)!important;
    margin-right:calc((100vw - 100%)/-2)!important;
    padding:6px 18px 24px!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:18px!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  html body main .visual-strip::-webkit-scrollbar{display:none!important}
  html body main .visual-strip figure{
    flex:0 0 min(82vw,340px)!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:14px 14px 58px!important;
    transform:none!important;
    scroll-snap-align:center!important;
  }
  html body main .visual-strip .phone-card-frame{
    width:min(68vw,270px)!important;
    margin:0 auto!important;
  }

  html body main section.showcase .gallery.gallery-v2,
  html body main .showcase .gallery.gallery-v2{
    display:flex!important;
    grid-template-columns:none!important;
    gap:14px!important;
    width:auto!important;
    max-width:none!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    margin-left:calc((100vw - 100%)/-2)!important;
    margin-right:calc((100vw - 100%)/-2)!important;
    padding:8px 18px 24px!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:18px!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  html body main section.showcase .gallery.gallery-v2::-webkit-scrollbar,
  html body main .showcase .gallery.gallery-v2::-webkit-scrollbar{display:none!important}
  html body main section.showcase .gallery.gallery-v2 .showcase-phone,
  html body main .showcase .gallery.gallery-v2 .showcase-phone,
  html body main section.showcase .gallery.gallery-v2 .showcase-phone-featured,
  html body main .showcase .gallery.gallery-v2 .showcase-phone-featured{
    flex:0 0 min(76vw,294px)!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    transform:none!important;
    scroll-snap-align:center!important;
  }

  /* Identity on mobile: readable text, then the complete artwork without cropping. */
  html body main .cinematic-frame{
    min-height:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    overflow:hidden!important;
  }
  html body main .cinematic-frame:before{display:none!important;content:none!important}
  html body main .cinematic-frame>img{
    position:relative!important;
    inset:auto!important;
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center!important;
    background:#030812!important;
  }
  html body main .cinematic-overlay{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    max-width:none!important;
    padding:30px 24px 24px!important;
  }
}
/* NOWAY FINAL TOUCH V3 END */

/* NOWAY IOS INSTALL MODAL V4 START
   Final visual polish for the existing iPhone install flow.
   CSS only: no changes to app.js / Firebase / Stripe / PWA behavior. */
html body .ios-install-backdrop{
  background:
    radial-gradient(circle at 50% 92%,rgba(46,129,255,.18),transparent 28rem),
    rgba(1,5,12,.82)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.08)!important;
  backdrop-filter:blur(18px) saturate(1.08)!important;
  align-items:center!important;
  justify-content:center!important;
  padding:22px!important;
}

html body .ios-install-sheet{
  position:relative!important;
  width:min(470px,100%)!important;
  max-height:min(760px,calc(100dvh - 32px))!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  padding:24px!important;
  border-radius:30px!important;
  border:1px solid rgba(76,151,246,.34)!important;
  background:
    radial-gradient(circle at 92% 0%,rgba(247,201,74,.13),transparent 17rem),
    radial-gradient(circle at 6% 92%,rgba(49,134,255,.15),transparent 16rem),
    linear-gradient(160deg,#091827 0%,#06111d 55%,#08131f 100%)!important;
  box-shadow:
    0 40px 120px rgba(0,0,0,.72),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 -1px 0 rgba(247,201,74,.10) inset!important;
}
html body .ios-install-sheet:before{
  content:""!important;
  position:absolute!important;
  left:24px!important;
  right:24px!important;
  top:0!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent,#f7c94a 28%,#65b9ff 72%,transparent)!important;
  opacity:.82!important;
  pointer-events:none!important;
}

html body .ios-sheet-head{
  grid-template-columns:58px 1fr 38px!important;
  gap:14px!important;
  align-items:center!important;
  margin-bottom:22px!important;
  padding-bottom:18px!important;
  border-bottom:1px solid rgba(77,150,242,.16)!important;
}
html body .ios-sheet-head img{
  width:58px!important;
  height:58px!important;
  border-radius:17px!important;
  object-fit:cover!important;
  object-position:center!important;
  border:1px solid rgba(247,201,74,.48)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.32),0 0 0 1px rgba(75,199,255,.10) inset!important;
}
html body .ios-sheet-head h3{
  margin:0 0 5px!important;
  color:#f7f9fd!important;
  font-size:20px!important;
  line-height:1.12!important;
  letter-spacing:-.025em!important;
}
html body .ios-sheet-head p{
  margin:0!important;
  color:#91a6c1!important;
  font-size:11.5px!important;
  line-height:1.45!important;
}
html body .ios-sheet-close{
  width:38px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:13px!important;
  border:1px solid rgba(77,150,242,.24)!important;
  background:#07111d!important;
  color:#b7c7dc!important;
  box-shadow:none!important;
}
html body .ios-sheet-close:hover,
html body .ios-sheet-close:focus-visible{
  border-color:rgba(247,201,74,.55)!important;
  color:#fff!important;
  outline:none!important;
}

html body .ios-install-steps{
  display:grid!important;
  gap:11px!important;
}
html body .ios-install-step{
  min-height:72px!important;
  display:grid!important;
  grid-template-columns:48px 1fr!important;
  gap:13px!important;
  align-items:center!important;
  padding:12px 14px!important;
  border-radius:18px!important;
  border:1px solid rgba(77,150,242,.22)!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(43,125,243,.07),transparent 9rem),
    linear-gradient(145deg,#0a1928,#07121f)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.14)!important;
}
html body .ios-install-step:nth-child(1){border-color:rgba(247,201,74,.24)!important}
html body .ios-install-step:nth-child(2){border-color:rgba(73,177,255,.25)!important}
html body .ios-install-step:nth-child(3){border-color:rgba(74,222,164,.22)!important}
html body .ios-step-icon{
  width:48px!important;
  height:48px!important;
  border-radius:15px!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(145deg,rgba(247,201,74,.16),rgba(247,201,74,.06))!important;
  border:1px solid rgba(247,201,74,.34)!important;
  color:#f7c94a!important;
  font-size:20px!important;
  line-height:1!important;
  box-shadow:0 10px 24px rgba(0,0,0,.18)!important;
}
html body .ios-install-step b{
  display:block!important;
  color:#f5f8fc!important;
  font-size:13px!important;
  line-height:1.2!important;
  margin-bottom:3px!important;
}
html body .ios-install-step span{
  display:block!important;
  color:#8fa4c0!important;
  font-size:11px!important;
  line-height:1.45!important;
  margin:0!important;
}

html body .ios-sheet-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  margin-top:18px!important;
}
html body .ios-sheet-actions button{
  width:100%!important;
  min-height:52px!important;
  border-radius:16px!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
}
html body .ios-sheet-primary{
  border:0!important;
  color:#161100!important;
  background:linear-gradient(135deg,#ffe274,#efb82d)!important;
  box-shadow:0 12px 32px rgba(247,201,74,.16)!important;
}
html body .ios-sheet-secondary{
  border:1px solid rgba(77,150,242,.24)!important;
  background:#07111d!important;
  color:#b8c8dc!important;
}

html body .ios-install-nudge{
  border:1px solid rgba(77,150,242,.30)!important;
  background:linear-gradient(145deg,rgba(7,20,34,.97),rgba(5,13,23,.98))!important;
  box-shadow:0 24px 80px rgba(0,0,0,.58)!important;
}
html body .ios-install-nudge img{
  border:1px solid rgba(247,201,74,.45)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.26)!important;
}
html body .ios-install-nudge small{color:#8fa4c0!important}
html body .ios-install-nudge button:not(.ios-nudge-close){
  background:linear-gradient(135deg,#ffe274,#efb82d)!important;
  color:#161100!important;
}

@media(max-width:620px){
  html body .ios-install-backdrop{
    align-items:flex-end!important;
    padding:10px 10px max(10px,env(safe-area-inset-bottom))!important;
  }
  html body .ios-install-sheet{
    width:100%!important;
    max-height:calc(100dvh - 18px)!important;
    border-radius:28px 28px 24px 24px!important;
    padding:20px 18px 18px!important;
  }
  html body .ios-sheet-head{
    grid-template-columns:54px 1fr 36px!important;
    gap:12px!important;
    margin-bottom:17px!important;
    padding-bottom:15px!important;
  }
  html body .ios-sheet-head img{width:54px!important;height:54px!important;border-radius:16px!important}
  html body .ios-sheet-head h3{font-size:18px!important}
  html body .ios-sheet-head p{font-size:10.5px!important}
  html body .ios-install-steps{gap:9px!important}
  html body .ios-install-step{min-height:67px!important;grid-template-columns:44px 1fr!important;padding:10px 12px!important;border-radius:16px!important}
  html body .ios-step-icon{width:44px!important;height:44px!important;border-radius:14px!important;font-size:18px!important}
  html body .ios-install-step b{font-size:12px!important}
  html body .ios-install-step span{font-size:10.5px!important}
  html body .ios-sheet-actions{margin-top:14px!important}
  html body .ios-sheet-actions button{min-height:48px!important}
}
/* NOWAY IOS INSTALL MODAL V4 END */

/* NOWAY IDENTITY V3 FIT FIX START
   Visual only:
   - identity card rounder on mobile
   - desktop identity image visible again
   - no JS / Firebase / Stripe / app logic changes
*/
@media (min-width:621px){
  html body main .cinematic-frame{
    display:grid!important;
    grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)!important;
    align-items:stretch!important;
    min-height:500px!important;
    overflow:hidden!important;
    border-radius:36px!important;
    background:linear-gradient(135deg,#071421 0%,#050b13 60%,#0c1721 100%)!important;
  }
  html body main .cinematic-frame:before,
  html body main .cinematic-frame:after{
    content:none!important;
    display:none!important;
  }
  html body main .cinematic-frame>img{
    display:block!important;
    position:relative!important;
    inset:auto!important;
    grid-column:2!important;
    grid-row:1!important;
    z-index:1!important;
    width:100%!important;
    height:100%!important;
    min-height:500px!important;
    opacity:1!important;
    visibility:visible!important;
    object-fit:cover!important;
    object-position:76% center!important;
    margin:0!important;
    border:0!important;
  }
  html body main .cinematic-overlay{
    display:block!important;
    position:relative!important;
    inset:auto!important;
    grid-column:1!important;
    grid-row:1!important;
    z-index:2!important;
    align-self:center!important;
    width:100%!important;
    max-width:620px!important;
    padding:58px 26px 58px 48px!important;
  }
}

@media (max-width:620px){
  html body main .cinematic-frame{
    border-radius:36px!important;
    overflow:hidden!important;
    box-shadow:0 24px 70px rgba(0,0,0,.28)!important;
  }
  html body main .cinematic-frame>img{
    border-radius:0 0 35px 35px!important;
  }
  html body main .cinematic-overlay{
    padding:32px 24px 28px!important;
  }
}
/* NOWAY IDENTITY V3 FIT FIX END */

/* NOWAY IDENTITY V5 FINAL START
   Final visual correction:
   - every NoWay brand mark uses a clean circular-safe asset
   - no square/squircle corners visible inside circular masks
   - desktop identity visual is centered and isolated from the copy
   - mobile identity card is rounder and balanced
   Visual-only: no Firebase / Stripe / account / billing / prediction logic.
*/

/* Landing header: keep the outer premium tile, but the mark itself is clean. */
html body .topbar .brand .brand-icon{
  object-fit:contain!important;
  object-position:center!important;
  padding:2px!important;
  box-sizing:border-box!important;
  background:#06111d!important;
  overflow:hidden!important;
}

/* Account modal and mobile drawer use the clean mark with breathing room. */
html body .account-modal-card:before{
  background-image:url('/assets/brand-circle-v5.png')!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:88% 88%!important;
  background-color:#06111d!important;
}
@media(max-width:620px){
  html body .noway-mobile-drawer-head strong:before{
    background-image:url('/assets/brand-circle-v5.png')!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
    background-size:88% 88%!important;
    background-color:#06111d!important;
  }
}

/* Identity block - desktop */
@media(min-width:621px){
  html body main .cinematic-frame{
    display:grid!important;
    grid-template-columns:minmax(0,1.04fr) minmax(390px,.96fr)!important;
    align-items:stretch!important;
    min-height:500px!important;
    overflow:hidden!important;
    border-radius:38px!important;
    background:
      radial-gradient(circle at 82% 34%,rgba(247,201,74,.08),transparent 24rem),
      radial-gradient(circle at 76% 62%,rgba(51,137,247,.11),transparent 30rem),
      linear-gradient(135deg,#071421 0%,#050b13 62%,#0b1723 100%)!important;
  }
  html body main .cinematic-frame:before,
  html body main .cinematic-frame:after{
    content:none!important;
    display:none!important;
  }
  html body main .cinematic-frame>img{
    display:block!important;
    position:relative!important;
    inset:auto!important;
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:center!important;
    width:min(92%,520px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:4/3!important;
    object-fit:cover!important;
    object-position:center!important;
    margin:0!important;
    padding:0!important;
    opacity:1!important;
    visibility:visible!important;
    border-radius:32px!important;
    border:1px solid rgba(78,151,243,.20)!important;
    box-shadow:0 24px 70px rgba(0,0,0,.30)!important;
    background:#06111d!important;
  }
  html body main .cinematic-overlay{
    display:block!important;
    position:relative!important;
    inset:auto!important;
    grid-column:1!important;
    grid-row:1!important;
    z-index:2!important;
    align-self:center!important;
    width:100%!important;
    max-width:620px!important;
    padding:58px 34px 58px 48px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
}

/* Identity block - mobile */
@media(max-width:620px){
  html body main .cinematic-frame{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    min-height:0!important;
    border-radius:40px!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 80% 72%,rgba(247,201,74,.08),transparent 15rem),
      radial-gradient(circle at 72% 88%,rgba(51,137,247,.12),transparent 18rem),
      linear-gradient(180deg,#071421,#050b13)!important;
    box-shadow:0 24px 70px rgba(0,0,0,.28)!important;
  }
  html body main .cinematic-overlay{
    grid-column:1!important;
    grid-row:1!important;
    padding:32px 24px 25px!important;
    box-sizing:border-box!important;
  }
  html body main .cinematic-frame>img{
    display:block!important;
    position:relative!important;
    inset:auto!important;
    grid-column:1!important;
    grid-row:2!important;
    align-self:center!important;
    justify-self:center!important;
    width:calc(100% - 24px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:4/3!important;
    object-fit:cover!important;
    object-position:center!important;
    margin:0 12px 12px!important;
    padding:0!important;
    border-radius:30px!important;
    border:1px solid rgba(78,151,243,.18)!important;
    background:#06111d!important;
  }
}

/* Runtime-injected legacy identity artwork stays disabled. */
html body main .cinematic-frame .identity-art{display:none!important}
/* NOWAY IDENTITY V5 FINAL END */