/* ============================================================
   COVERSHOT · FLASH
   One stylesheet for the whole site:
   - the marketing landing (index.html)
   - the shared legal/support shell (.site / .legal classes)
   Y2K paparazzi gloss: deep night ground, overexposed
   flash-white display type, holographic foil accents,
   photo-credit caption bars. Tokens adapted from
   docs/DESIGN.md (Flash identity).
   ============================================================ */

:root{
  --night:#0A0A10;
  --night-2:#101018;
  --flash:#FAFAFF;
  --flash-70:rgba(250,250,255,.72);
  --flash-50:rgba(250,250,255,.52);
  --flash-35:rgba(250,250,255,.35);
  --hairline:rgba(250,250,255,.14);
  --foil:linear-gradient(105deg,#B8C6FF 0%,#E9B8FF 26%,#FFDFA8 52%,#A8FFE3 78%,#B8C6FF 100%);
  --sans:-apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'Segoe UI', Roboto, sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

html{ scroll-behavior:smooth; }

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--night);
  color:var(--flash);
  font-family:var(--sans);
  line-height:1.5;
  background-image:radial-gradient(90% 55% at 50% -12%, rgba(250,250,255,.09), transparent 62%);
  background-attachment:fixed;
}

a{ color:var(--flash); text-decoration:none; }

img{ display:block; max-width:100%; }

:focus-visible{ outline:2px solid var(--flash); outline-offset:2px; }

/* ---------- type ---------- */
/* Display = "camera-pan lean": system SF pushed to 900 italic,
   tight tracking, slight skew (DESIGN.md). */
.t-display{
  font-weight:900; font-style:italic; letter-spacing:-.03em; line-height:.92;
  transform:skewX(-3deg);
}
.t-label{ font-weight:700; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; }
.t-caption{ font-weight:500; font-size:12px; line-height:1.45; letter-spacing:.06em; text-transform:uppercase; color:var(--flash-50); }

/* photo-credit caption bar (labels / meta) */
.credit-bar{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--flash-70);
  background:rgba(250,250,255,.06);
  border-left:2px solid var(--flash);
  padding:7px 12px;
}

/* holographic foil text */
.foil{
  background:var(--foil);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* hard CSS star-glint micro-detail */
.glint{
  position:relative; display:inline-block; width:14px; height:14px; flex:0 0 auto;
}
.glint::before, .glint::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--flash);
  transform:translate(-50%,-50%);
}
.glint::before{ width:1.5px; height:14px; }
.glint::after{ width:14px; height:1.5px; }

.ico{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; display:block; }

/* ---------- container ---------- */
.wrap{ max-width:1080px; margin:0 auto; padding-inline:clamp(20px,5vw,40px); }

/* ============================================================
   PRIMITIVES
   ============================================================ */
.appstore-badge{
  display:inline-flex; align-items:center; gap:13px;
  min-height:58px; padding:0 22px; border-radius:14px;
  background:var(--flash); color:var(--night);
  transition:transform .35s var(--ease), opacity .3s ease;
}
.appstore-badge[aria-disabled="true"]{ cursor:default; }
.appstore-badge:active{ transform:scale(.978); opacity:.94; }
.appstore-badge .glyph{ width:24px; height:24px; stroke:var(--night); stroke-width:1.5; fill:none; flex:0 0 auto; }
.appstore-badge .bt-lines{ display:flex; flex-direction:column; line-height:1; text-align:left; }
.appstore-badge .bt-small{ font-weight:700; font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(10,10,16,.7); }
.appstore-badge .bt-big{ font-weight:800; font-size:18px; letter-spacing:-.01em; margin-top:3px; }
.appstore-badge:focus-visible{ outline:2px solid var(--flash); outline-offset:3px; }

/* ============================================================
   LANDING · HEADER
   ============================================================ */
.flash-head{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,16,.82); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.flash-head .head-inner{ display:flex; align-items:center; justify-content:space-between; min-height:64px; }
.wordmark{
  font-weight:900; font-style:italic; font-size:17px; letter-spacing:.2em;
  text-transform:uppercase; padding-right:.2em;
}
.flash-head nav{ display:flex; align-items:center; gap:24px; }
.flash-head nav a{
  display:inline-flex; align-items:center; min-height:44px;
  font-weight:700; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--flash-70);
}
.flash-head nav a:hover{ color:var(--flash); }
.flash-head nav a:focus-visible{ text-decoration:underline; text-underline-offset:4px; }

/* ============================================================
   LANDING · HERO
   ============================================================ */
.hero{ padding-top:clamp(72px,13vh,150px); padding-bottom:clamp(48px,8vh,90px); text-align:center; }
.hero-inner{ max-width:720px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.hero .credit-bar{ margin-bottom:clamp(24px,4vh,36px); }
.hero h1{
  font-size:clamp(2.6rem,9vw,5.2rem);
  /* flash-white with a faint overexposure bloom */
  text-shadow:0 0 60px rgba(250,250,255,.28);
}
.hero-sub{
  font-weight:400; font-size:16px; line-height:1.55; color:var(--flash-70);
  max-width:44ch; margin-top:clamp(20px,3vh,28px);
}

.hero-cta{ margin-top:clamp(32px,5vh,48px); display:flex; flex-direction:column; align-items:center; gap:16px; }
.cta-note{ color:var(--flash-50); }

/* ============================================================
   BEFORE / AFTER COMPARE
   Fallback (no JS): side-by-side pair with visible captions.
   .is-live (added by slider.js): overlaid draggable comparison.
   ============================================================ */
.ba-compare{
  width:100%; margin-top:clamp(36px,6vh,56px);
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  text-align:left;
}
.ba-compare figure{ margin:0; min-width:0; }
.ba-compare img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  background:var(--night-2); border-radius:14px;
  color:var(--flash-50); font-size:13px; /* alt-text styling if the image fails */
}
.ba-tag{
  display:inline-flex; align-items:center; margin-top:10px;
  font-weight:700; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--flash-70);
  background:rgba(250,250,255,.06);
  border-left:2px solid var(--flash-35);
  padding:5px 10px;
}
.ba-tag-after{ border-left-color:var(--flash); color:var(--flash); }

.ba-cap{
  display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  border-top:1px solid var(--hairline); margin-top:14px; padding-top:12px;
  text-align:left;
}

/* live slider mode */
.ba-compare.is-live{
  --pos:50%;
  display:block; position:relative;
  aspect-ratio:1/1; overflow:hidden; border-radius:18px;
  background:var(--night-2);
}
.ba-compare.is-live figure{ position:absolute; inset:0; }
.ba-compare.is-live img{ width:100%; height:100%; aspect-ratio:auto; border-radius:0; }
.ba-compare.is-live .ba-after{ clip-path:inset(0 0 0 var(--pos)); }
.ba-compare.is-live .ba-tag{
  position:absolute; bottom:14px; margin:0;
  background:rgba(10,10,16,.78); backdrop-filter:blur(4px);
}
.ba-compare.is-live .ba-before .ba-tag{ left:14px; }
.ba-compare.is-live .ba-after .ba-tag{ left:auto; right:14px; border-left:0; border-right:2px solid var(--flash); }
.ba-divider{
  position:absolute; top:0; bottom:0; left:var(--pos); width:2px;
  background:var(--flash); transform:translateX(-1px);
  box-shadow:0 0 18px rgba(250,250,255,.55);
  pointer-events:none;
}
.ba-handle{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  background:var(--flash);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 18px rgba(0,0,0,.45);
}
.ba-handle svg{
  width:22px; height:22px; fill:none; stroke:var(--night);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.ba-range{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:ew-resize;
  -webkit-appearance:none; appearance:none;
  touch-action:pan-y;
}
.ba-compare.is-live:focus-within{ outline:2px solid var(--flash); outline-offset:3px; }

/* ============================================================
   LANDING · SECTIONS (shared)
   ============================================================ */
.sec-title{
  font-size:clamp(2rem,6.4vw,3.4rem);
  margin-top:clamp(18px,3vh,26px);
  text-shadow:0 0 50px rgba(250,250,255,.22);
}
.sec-sub{
  font-weight:400; font-size:15.5px; line-height:1.55; color:var(--flash-70);
  max-width:46ch; margin-top:clamp(14px,2.5vh,20px);
}

/* ============================================================
   LANDING · PACK SHOWCASE
   ============================================================ */
.packs{ border-top:1px solid var(--hairline); padding-block:clamp(56px,9vh,104px); }
.pack-grid{
  list-style:none; display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,2vw,20px); margin-top:clamp(32px,5vh,48px);
}
.pack-card{
  position:relative; overflow:hidden; border-radius:16px;
  background:var(--night-2); aspect-ratio:1/1;
}
.pack-card img{ width:100%; height:100%; object-fit:cover; color:var(--flash-50); font-size:13px; }
/* bottom night vignette, mirroring the app's card treatment */
.pack-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,16,.86) 0%, rgba(10,10,16,.32) 32%, transparent 55%);
}
.pack-cap{
  position:absolute; left:14px; right:14px; bottom:12px; z-index:1;
  display:flex; flex-direction:column; gap:2px;
}
.pack-cap strong{
  font-weight:900; font-style:italic; font-size:clamp(15px,1.8vw,19px);
  letter-spacing:-.01em; color:var(--flash);
}
.pack-cap span{
  font-weight:600; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--flash-70);
}
.pack-more{ margin-top:clamp(20px,3vh,28px); color:var(--flash-50); }

/* ============================================================
   LANDING · FIX DEMO
   ============================================================ */
.fix{ border-top:1px solid var(--hairline); padding-block:clamp(56px,9vh,104px); }
.fix-inner{ max-width:720px; margin:0 auto; display:flex; flex-direction:column; align-items:flex-start; }

/* ============================================================
   LANDING · HOW IT WORKS
   ============================================================ */
.how{ border-top:1px solid var(--hairline); padding-block:clamp(56px,9vh,104px); }
.how-steps{
  list-style:none; display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,32px); margin-top:clamp(32px,5vh,48px);
}
.how-step{
  border-top:1px solid var(--hairline); padding-top:18px;
}
.how-num{
  display:inline-flex; align-items:center;
  font-weight:700; font-size:9.5px; letter-spacing:.24em;
  color:var(--flash-50);
  background:rgba(250,250,255,.06);
  border-left:2px solid var(--flash);
  padding:5px 10px;
}
.how-step h3{
  font-weight:900; font-style:italic; font-size:clamp(1.15rem,2.4vw,1.4rem);
  letter-spacing:-.01em; margin-top:14px;
}
.how-step p{ font-weight:400; font-size:14.5px; line-height:1.55; color:var(--flash-70); margin-top:8px; max-width:34ch; }

/* ============================================================
   LANDING · HONEST FINE PRINT
   ============================================================ */
.fineprint{ border-top:1px solid var(--hairline); padding-block:clamp(48px,7vh,88px); background:var(--night-2); }
.fineprint .kick{ display:block; color:var(--flash-50); }
.fine-grid{
  list-style:none; display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,32px); margin-top:clamp(24px,4vh,36px);
}
.fine-grid li{ display:flex; align-items:flex-start; gap:14px; }
.fine-grid .ico{ width:20px; height:20px; color:var(--flash); flex:0 0 auto; margin-top:2px; }
.fine-grid p{ font-weight:400; font-size:14px; line-height:1.6; color:var(--flash-70); }
.fine-links{ margin-top:clamp(24px,4vh,36px); font-size:13px; color:var(--flash-70); }
.fine-links a{ color:var(--flash); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }

/* ============================================================
   SHARED LEGAL / SUPPORT SHELL (header.site, .brand, nav.site,
   main.legal, footer.site) — restyled into Flash. Do NOT remove.
   ============================================================ */
header.site{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1080px; margin:0 auto; padding:18px clamp(20px,5vw,40px);
  border-bottom:1px solid var(--hairline); width:100%;
}
a.brand, .brand{
  font-weight:900; font-style:italic; font-size:17px; letter-spacing:.16em;
  color:var(--flash); text-transform:uppercase;
}
.brand span{ color:inherit; }
nav.site{ display:flex; align-items:center; gap:24px; }
nav.site a{
  display:inline-flex; align-items:center; min-height:44px;
  font-weight:700; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--flash-70); margin:0;
}
nav.site a:hover{ color:var(--flash); }
nav.site a:focus-visible{ text-decoration:underline; text-underline-offset:4px; }

main.legal{ padding:clamp(40px,7vh,72px) 0 clamp(64px,10vh,96px); }
main.legal .wrap{ max-width:760px; }
main.legal h1{ font-weight:900; font-style:italic; font-size:clamp(1.9rem,5vw,2.6rem); line-height:1.02; letter-spacing:-.02em; }
main.legal h2{ font-weight:800; font-size:clamp(1.15rem,2.6vw,1.35rem); line-height:1.15; letter-spacing:-.01em; margin-top:clamp(32px,5vh,44px); padding-top:18px; border-top:1px solid var(--hairline); }
main.legal p{ font-weight:400; font-size:15px; line-height:1.6; color:var(--flash-70); margin-top:14px; }
main.legal .updated{ font-size:12px; color:var(--flash-50); letter-spacing:.06em; text-transform:uppercase; margin-top:10px; }
main.legal ul{ padding-left:20px; margin-top:14px; }
main.legal li{ font-size:15px; line-height:1.6; color:var(--flash-70); margin:6px 0; }
main.legal em{ font-style:italic; color:var(--flash); }
main.legal strong{ font-weight:700; color:var(--flash); }
main.legal a{ color:var(--flash); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }

footer.site{ border-top:1px solid var(--hairline); padding:28px 0; margin-top:auto; }
footer.site .wrap{ display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; align-items:center; }
footer.site span, footer.site{ font-weight:400; font-size:13px; color:var(--flash-70); letter-spacing:.01em; }
footer.site a{ color:var(--flash); }
footer.site a:hover{ text-decoration:underline; text-underline-offset:3px; }
.foot-mark{ font-weight:700; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--flash-50); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:760px){
  .pack-grid{ grid-template-columns:repeat(2,1fr); }
  .how-steps{ grid-template-columns:1fr; }
  .fine-grid{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  .flash-head nav{ gap:18px; }
  nav.site{ gap:16px; }
  .ba-tag{ font-size:8.5px; letter-spacing:.16em; padding:4px 8px; }
  .ba-cap-site{ display:none; }
}

/* ============================================================
   REDUCED MOTION
   The compare slider stays fully functional — its position is
   user-driven with no animation, so nothing to disable there.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .appstore-badge{ transition:none; }
}