/* ============================================================
   LOC8 homepage, v2 (redesign preview)
   Cinematic and quiet: black stage, one mint light, device renders lit
   like product shots. Mobile first (98% of visits are iPhone), with type
   kept at a calm, readable scale on phones.
   Every page loads this file (plus its own about/support/legal.css); /go is standalone.
   Class hooks script.js relies on are kept: .site-header/.is-stuck,
   .reveal/.is-visible, .hero/.midcta/.cta/.site-footer/.qrmodal
   (lead placements), .header__cta--scan, [data-section].
   ============================================================ */

:root {
  --bg:#000; --fg:#fff; --accent:#61E0AF; --surface:#1A1A1C; --card:#0c0c0e;
  --t-90:rgba(255,255,255,.90); --t-80:rgba(255,255,255,.80); --t-75:rgba(255,255,255,.75);
  --t-60:rgba(255,255,255,.60); --t-45:rgba(255,255,255,.45); --t-30:rgba(255,255,255,.30);
  --line:rgba(255,255,255,.12); --line-soft:rgba(255,255,255,.08);
  --accent-border:rgba(97,224,175,.3); --accent-fill:rgba(97,224,175,.1); --accent-glow:rgba(97,224,175,.45);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1240px;
  /* spacing: everything sits on a 4pt grid. Phones: 20pt gutters (Apple's layout margin),
     80pt section padding, 44pt minimum tap targets. */
  --pad:20px;
  --gl:max(var(--pad), env(safe-area-inset-left)); --gr:max(var(--pad), env(safe-area-inset-right));
  --sec:clamp(80px,9vw,128px); --band:56px;
  --header:60px;
  --ease:cubic-bezier(.2,.6,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur:.26s;
  --hair-x:linear-gradient(90deg,transparent,rgba(255,255,255,.13) 22%,rgba(255,255,255,.13) 78%,transparent);
  --hair-y:linear-gradient(180deg,transparent,rgba(255,255,255,.18),transparent);
  /* film grain: breaks up banding in the dark gradients */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ----------------------------- base ----------------------------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--bg); }
body {
  background:var(--bg); color:var(--t-75);
  font-family:var(--font); font-size:clamp(16px,1.1vw,17px); line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
  overflow-x:hidden; overflow-x:clip;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
a, button, summary { -webkit-tap-highlight-color:transparent; }
h1,h2,h3 { color:var(--fg); font-weight:800; line-height:1.08; letter-spacing:-.02em; }
/* each section is its own layer, so its background light is not painted over by the page */
section { position:relative; isolation:isolate; }

:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
:focus:not(:focus-visible) { outline:none; }
.skip-link {
  position:fixed; top:8px; left:8px; z-index:200; background:var(--accent); color:#04130d; font-weight:700;
  padding:10px 16px; border-radius:999px; transform:translateY(-150%); transition:transform var(--dur) var(--ease);
}
.skip-link:focus { transform:none; }

.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-left:var(--gl); padding-right:var(--gr); }
.nowrap { white-space:nowrap; }

/* --------------------------- type kit --------------------------- */
.kicker {
  display:inline-block;
  font-size:12px; font-weight:700; line-height:1; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.h2 { margin-top:12px; font-size:clamp(1.75rem,7.2vw,3.1rem); line-height:1.12; letter-spacing:-.016em; text-wrap:balance; }
.lede { margin-top:16px; max-width:42ch; font-size:clamp(1rem,1.2vw,1.12rem); line-height:1.55; color:var(--t-75); text-wrap:pretty; }
.lede--center { margin-inline:auto; }

/* --------------------------- motion ---------------------------- */
/* Scroll reveals (script.js adds .is-visible). The <head> failsafe shows
   everything if script.js never runs, so the page cannot load blank. */
.reveal { opacity:1; }
.js .reveal { opacity:0; transform:translate3d(0,24px,0); transition:opacity .9s var(--ease-out), transform 1s var(--ease-out); transition-delay:var(--d,0s); }
.js .reveal.is-visible { opacity:1; transform:none; }
.js .reveal--rise { transform:translate3d(0,48px,0) scale(.97); transition-duration:1.1s, 1.3s; }
.js .reveal--rise.is-visible { transform:none; }
/* a group whose children arrive one after another */
.js .reveal.stagger { opacity:1; transform:none; }
.js .stagger > * { opacity:0; transform:translate3d(0,20px,0); transition:opacity .8s var(--ease-out), transform .95s var(--ease-out); }
.js .stagger.is-visible > * { opacity:1; transform:none; }
.stagger > :nth-child(2) { transition-delay:.07s; } .stagger > :nth-child(3) { transition-delay:.14s; }
.stagger > :nth-child(4) { transition-delay:.21s; } .stagger > :nth-child(5) { transition-delay:.28s; }
.stagger > :nth-child(6) { transition-delay:.35s; } .stagger > :nth-child(7) { transition-delay:.42s; }
.stagger > :nth-child(8) { transition-delay:.49s; }

/* Hero entrance runs on CSS alone, so first paint never waits on a script. */
.in { animation:in-up 1s var(--ease-out) both; animation-delay:var(--d,0s); }
.in--rise { animation-name:in-rise; animation-duration:1.4s; }
@keyframes in-up { from { opacity:0; transform:translate3d(0,18px,0); } to { opacity:1; transform:none; } }
@keyframes in-rise { from { opacity:0; transform:translate3d(0,48px,0) scale(.97); } to { opacity:1; transform:none; } }
@keyframes float { 0%,100% { transform:translate3d(0,0,0); } 50% { transform:translate3d(0,-9px,0); } }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.5; transform:scale(.82); } }

/* --------------------------- brand ----------------------------- */
.brand { display:inline-flex; align-items:center; gap:8px; min-height:44px; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.brand:hover { opacity:.85; }
.brand:active { transform:scale(.97); opacity:.7; transition-duration:60ms; }
.brand__word { font-weight:800; letter-spacing:.02em; color:var(--fg); font-size:19px; }
.brand__dot { height:22px; width:auto; aspect-ratio:1124/1494; flex:0 0 auto; background:url("data:image/png;base64,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") center/contain no-repeat; }
.brand__dot--lg { height:42px; margin-inline:auto; }

/* --------------------------- buttons --------------------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 20px; border-radius:999px; font-weight:600; font-size:15px; white-space:nowrap; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.btn--mint { background:var(--accent); color:#04130d; box-shadow:0 0 0 1px rgba(97,224,175,.4); animation:btn-breathe 3.4s var(--ease) infinite; }
.btn--mint:hover { transform:translateY(-1px); box-shadow:0 8px 26px -10px var(--accent-glow), 0 0 0 1px var(--accent); animation-play-state:paused; }
.btn--mint:active { transform:scale(.96); transition-duration:60ms; animation-play-state:paused; }
@keyframes btn-breathe { 0%,100% { box-shadow:0 0 0 1px rgba(97,224,175,.4); } 50% { box-shadow:0 0 0 1px rgba(97,224,175,.7), 0 0 22px -4px var(--accent-glow); } }

.btn-appstore { display:inline-flex; align-items:center; gap:12px; min-height:56px; padding:8px 20px; background:#000; color:#fff; border:1px solid rgba(255,255,255,.45); border-radius:13px; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); animation:badge-breathe 4s var(--ease) 1.2s infinite; }
.btn-appstore:hover { transform:translateY(-1px); border-color:#fff; box-shadow:0 12px 30px -14px rgba(97,224,175,.6); animation-play-state:paused; }
.btn-appstore:active { transform:scale(.97); border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); transition-duration:60ms; animation-play-state:paused; }
@keyframes badge-breathe { 0%,100% { border-color:rgba(255,255,255,.45); box-shadow:none; } 50% { border-color:rgba(97,224,175,.7); box-shadow:0 0 28px -8px var(--accent-glow); } }
.btn-appstore__logo { width:26px; height:26px; flex:0 0 auto; }
.btn-appstore__text { display:flex; flex-direction:column; align-items:flex-start; line-height:1.05; }
.btn-appstore__small { font-size:11px; color:var(--t-80); }
.btn-appstore__large { font-size:21px; font-weight:600; letter-spacing:-.01em; }
/* Final CTA: the bigger badge the old page used at the bottom */
.btn-appstore--lg { min-height:62px; padding:11px 26px; }
.btn-appstore--lg .btn-appstore__logo { width:30px; height:30px; }
.btn-appstore--lg .btn-appstore__large { font-size:24px; }

/* QR: the desktop call to action (phones get the badge instead) */
.qr { display:none; }
.qr__card { background:#fff; border-radius:10px; padding:8px; line-height:0; flex:0 0 auto; }
.qr__card img { width:86px; height:86px; }
.qr__label { display:flex; flex-direction:column; gap:4px; text-align:left; }
.qr__title { font-size:16px; font-weight:700; color:var(--fg); }
.qr__sub { font-size:13px; color:var(--t-60); line-height:1.35; max-width:19ch; }

/* ============================ HEADER ============================ */
.site-header { position:fixed; inset:0 0 auto 0; z-index:100; padding-top:env(safe-area-inset-top); border-bottom:1px solid transparent; transition:background .35s var(--ease), border-color .35s var(--ease); }
.site-header__inner { display:flex; align-items:center; justify-content:space-between; height:var(--header); }
.site-header.is-stuck { background:rgba(0,0,0,.8); -webkit-backdrop-filter:saturate(1.5) blur(20px); backdrop-filter:saturate(1.5) blur(20px); border-bottom-color:rgba(255,255,255,.07); }
.header__cta { font-size:15px; min-height:44px; padding:0 20px; }
.header__cta--scan { display:none; }

/* ============================= HERO ============================= */
.hero { overflow:hidden; isolation:isolate; padding:calc(var(--header) + 40px) 0 32px; text-align:center; }
.hero__sky { position:absolute; inset:0; z-index:-1; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, #000 72%, transparent); mask-image:linear-gradient(180deg, #000 72%, transparent); }
/* a soft wash from above and film grain; the device carries its own light (see .hero__visual) */
.hero__sky::after {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(90% 34% at 50% -4%, rgba(97,224,175,.07), transparent 70%),
    var(--grain);
}
.pill { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:1px solid rgba(97,224,175,.4); border-radius:999px; font-size:12px; font-weight:700; line-height:1; letter-spacing:.12em; text-transform:uppercase; color:var(--t-80); }
.pill__dot { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent-glow); animation:pulse 2.4s var(--ease) infinite; }
.hero__title { margin-top:16px; font-size:clamp(2.3rem,9.8vw,3.2rem); line-height:1.08; letter-spacing:-.02em; text-wrap:balance; }
.hero__line { display:inline; }
.hero__line--accent { color:var(--accent); text-shadow:0 0 34px rgba(97,224,175,.35); }
.hero__sub { margin:16px auto 0; max-width:32ch; font-size:clamp(1.02rem,1.3vw,1.2rem); line-height:1.5; color:var(--t-75); text-wrap:balance; }
.hero__cta { margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; }
/* one quiet line of proof under the button */
.proof { margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 8px; font-size:14px; line-height:1.4; color:var(--t-60); }
.proof strong { color:var(--fg); font-weight:700; }
.proof__stars { color:var(--accent); font-size:13px; letter-spacing:2px; text-shadow:0 0 12px var(--accent-glow); margin-right:2px; }
.proof__sep { color:var(--t-30); }
.hero__micro { margin-top:8px; font-size:13px; color:var(--t-45); }
.hero__visual { position:relative; margin-top:32px; }
/* key light and dot texture ride with the device, so they stay centered behind it on any screen */
.hero__visual::before { content:""; position:absolute; z-index:-1; left:50%; top:54%; width:160%; height:88%; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(97,224,175,.14), rgba(97,224,175,.05) 50%, transparent); }
.hero__visual::after { content:""; position:absolute; z-index:-1; inset:-6% -40%; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px); background-size:26px 26px; background-position:50% 50%;
  -webkit-mask-image:radial-gradient(closest-side, #000, transparent); mask-image:radial-gradient(closest-side, #000, transparent); }

/* stage: how every device render is lit */
.stage { position:relative; margin-inline:auto; }
.stage__img { position:relative; z-index:1; width:100%; height:auto; }
/* floor pool: the soft light the device stands in */
.stage::before { content:""; position:absolute; z-index:0; left:-16%; right:-16%; bottom:-4%; height:17%; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(97,224,175,.16), rgba(97,224,175,.04) 46%, transparent 72%); }
.stage--hero { width:min(90vw,430px); max-width:100%; }
.stage--hero .stage__img { animation:float 8s ease-in-out 1.6s infinite; }
.stage--phone { width:clamp(220px,60vw,320px); }
.stage--watch { width:clamp(204px,54vw,330px); }

/* ========================= GIVING BACK ========================= */
.give { padding:32px 0; }
.give::before, .give::after { content:""; position:absolute; left:0; right:0; height:1px; background:var(--hair-x); }
.give::before { top:0; } .give::after { bottom:0; }
.give__inner { display:flex; flex-direction:column; align-items:center; gap:16px; }
.give__text { color:var(--fg); font-weight:600; font-size:1.1rem; line-height:1.4; text-align:center; }
.give__pct { color:var(--accent); }
.give__logos { display:flex; align-items:center; gap:32px; }
.give__logo { display:inline-flex; transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease); opacity:.92; }
.give__logo img { height:60px; width:auto; }
.give__logo--wide img { height:56px; }
.give__logo:hover { opacity:1; transform:translateY(-2px); }

/* ======================= FIELD: the reel ======================= */
.field { padding:var(--sec) 0; overflow:hidden; }
.field::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(70% 40% at 50% 0%, rgba(97,224,175,.06), transparent 70%); }
.field__head { text-align:center; }
.field__head .h2 { max-width:16ch; margin-inline:auto; }
.field__intro { margin-top:16px; text-wrap:balance; color:var(--t-60); font-size:clamp(1rem,1.25vw,1.12rem); }
.reel {
  display:flex; gap:24px; margin:40px calc(var(--gr) * -1) 0 calc(var(--gl) * -1); padding:4px var(--gr) 8px var(--gl);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:var(--gl);
  scrollbar-width:none; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
}
.reel::-webkit-scrollbar { display:none; }
/* trailing room so the last card can snap to the same left edge as the rest */
.reel::after { content:""; flex:0 0 max(0px, calc(100vw - var(--gl) - var(--gr) - min(74vw,300px) - 24px)); }
.reel:focus-visible { outline-offset:-2px; }
.scn { flex:0 0 min(74vw,300px); scroll-snap-align:start; position:relative; }
.scn__n { font:600 12px/1 var(--mono); letter-spacing:.1em; color:var(--accent); font-variant-numeric:tabular-nums; }
.scn__k { margin-top:12px; font-size:12px; font-weight:700; line-height:1.2; letter-spacing:.12em; text-transform:uppercase; color:var(--t-45); }
.scn h3 { margin-top:8px; font-size:1.3rem; line-height:1.2; letter-spacing:-.01em; text-wrap:balance; }
.scn__t { margin-top:8px; color:var(--t-60); font-size:.96rem; line-height:1.5; max-width:29ch; text-wrap:pretty; }
.reel-ui { display:flex; justify-content:center; gap:8px; margin-top:32px; }
.reel-ui i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.2); transition:background .25s var(--ease); }
.reel-ui i.is-on { background:var(--accent); }
/* the reel is the one sideways swipe on the page: say so under the dots (phones and small iPads) */
.reel-hint { margin-top:12px; text-align:center; font-size:13px; line-height:1.3; color:var(--t-60); }
.reel-hint__arrow { display:inline-block; margin-left:2px; }

/* ============ split: heading / device / details sections ============ */
.split { display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "media" "rest"; row-gap:40px; }
.split__head { grid-area:head; text-align:center; }
.split__head .h2 { max-width:18ch; margin-inline:auto; }
.split__head .lede { margin-inline:auto; }
.split__media { grid-area:media; display:flex; justify-content:center; position:relative; }
/* each device carries its own soft light, so it stays behind it on any screen width */
.split__media::before { content:""; position:absolute; z-index:-1; left:50%; top:50%; width:190%; height:120%; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(97,224,175,.08), rgba(97,224,175,.03) 48%, transparent); }
.split__rest { grid-area:rest; }

/* ======================= THE HOME SCREEN ======================= */
.home { padding:var(--sec) 0; overflow:hidden; }
.spec { max-width:480px; margin-inline:auto; text-align:left; }
.spec__row { display:grid; grid-template-columns:1fr; gap:4px; padding:12px 0; position:relative; }
.spec__row::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.05) 70%, transparent); }
.spec__row:first-child::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.05) 70%, transparent); }
.spec dt { font-size:11px; font-weight:700; line-height:1.5; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.spec dd { color:var(--t-90); font-size:1rem; line-height:1.45; }
.more-link { margin-top:24px; text-align:center; }
.more-link a { display:inline-flex; align-items:center; gap:6px; min-height:44px; font-weight:600; color:var(--accent); }

/* =================== ON YOUR WRIST: the showpiece =================== */
.wrist { padding:var(--sec) 0; text-align:center; overflow:hidden; isolation:isolate; }
.wrist__beam { position:absolute; inset:0; z-index:-1; pointer-events:none; }
/* a soft cone of light from above, falling on the watch */
.wrist__beam::before { content:""; position:absolute; left:50%; top:0; width:min(820px,160vw); height:62%; transform:translateX(-50%);
  background:conic-gradient(from 180deg at 50% 0%, transparent 0deg 158deg, rgba(210,255,238,.04) 171deg, rgba(210,255,238,.06) 180deg, rgba(210,255,238,.04) 189deg, transparent 202deg 360deg);
  -webkit-mask-image:linear-gradient(180deg, #000 20%, transparent 100%); mask-image:linear-gradient(180deg, #000 20%, transparent 100%); }
.wrist__title { max-width:14ch; margin-inline:auto; }
/* the watch, shot close: nearly the full phone width, band fading into the dark */
.wrist__show { position:relative; margin-top:40px; }
.wrist__glow { position:absolute; left:50%; top:46%; width:min(130vw,760px); aspect-ratio:1; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(97,224,175,.11), rgba(97,224,175,.04) 42%, transparent 72%); }
.wrist__stage { position:relative; width:clamp(204px,56vw,320px); margin-inline:auto; }
.wrist__img { width:100%; height:auto;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 100%);
  animation:float 9s ease-in-out 1s infinite; }
/* what the watch shows: two roomy columns on phones, three on desktop */
.wrist__grid { margin:40px auto 0; max-width:440px; display:grid; grid-template-columns:1fr 1fr; gap:32px 16px; }
.wrist__grid li { display:flex; flex-direction:column; align-items:center; text-align:center; }
.wrist__grid .ic { margin-bottom:12px; }
.wrist__grid h3 { font-size:1rem; font-weight:700; line-height:1.3; letter-spacing:-.005em; }
.wrist__grid p { margin-top:4px; max-width:17ch; color:var(--t-60); font-size:.92rem; line-height:1.45; text-wrap:balance; }

/* ========================= MID-PAGE CTA ========================= */
.midcta { padding:var(--band) 0; overflow:hidden; }
.midcta::before, .midcta::after { content:""; position:absolute; left:0; right:0; height:1px; background:var(--hair-x); }
.midcta::before { top:0; } .midcta::after { bottom:0; }
.midcta__banner { display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center; }
.midcta__title { font-size:clamp(1.55rem,6.2vw,2.6rem); letter-spacing:-.015em; line-height:1.14; }
.midcta__actions { display:flex; align-items:center; gap:16px; }

/* =================== THREE-WORD ADDRESS =================== */
.codeft { padding:var(--sec) 0; overflow:hidden; }
.codeft .split__rest { text-align:center; container-type:inline-size; }
/* one glowing line that always fits its column */
.bigcode {
  white-space:nowrap; font-weight:800; line-height:1.1; letter-spacing:-.01em; color:var(--accent);
  font-size:clamp(1.4rem,6vw,3.6rem); font-size:clamp(1.4rem,8.4cqi,3.6rem);
  text-shadow:0 0 14px rgba(97,224,175,.45), 0 0 48px rgba(97,224,175,.32), 0 0 120px rgba(97,224,175,.22);
}
.bigcode__sl { color:rgba(97,224,175,.5); }
.codeft__hint { margin-top:16px; font-size:1.02rem; font-weight:600; color:var(--t-80); }

/* ========================== TEAM ROOMS ========================== */
.team { padding:var(--sec) 0; overflow:hidden; }
.duo { position:relative; width:min(88vw,440px); max-width:100%; aspect-ratio:470 / 560; margin-inline:auto; }
.duo img { position:absolute; width:59%; height:auto; }
.duo__back { left:2%; top:0; opacity:.5; }
.duo__front { right:2%; bottom:0; }
.duo::after { content:""; position:absolute; left:-10%; right:-10%; bottom:-3%; height:16%; pointer-events:none;
  background:radial-gradient(50% 50% at 60% 50%, rgba(97,224,175,.15), rgba(97,224,175,.04) 46%, transparent 72%); }
.ticks { display:grid; gap:12px; max-width:400px; margin-inline:auto; }
.ticks li { position:relative; padding-left:30px; color:var(--t-80); text-align:left; text-wrap:pretty; }
.ticks li::before { content:""; position:absolute; left:2px; top:.42em; width:12px; height:6px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); }

/* ===================== PINNED LOCATIONS: steps ===================== */
.showcase { padding:var(--sec) 0; overflow:hidden; }
.steps { counter-reset:step; max-width:420px; margin-inline:auto; }
.steps__item { counter-increment:step; position:relative; padding:0 0 24px 48px; text-align:left; }
.steps__item::before { content:counter(step, decimal-leading-zero); position:absolute; left:0; top:4px; font:600 12px/1 var(--mono); letter-spacing:.08em; color:var(--accent); }
.steps__item:last-child { padding-bottom:0; }
.steps h3 { font-size:1.08rem; font-weight:700; letter-spacing:-.01em; line-height:1.3; }
.steps p { margin-top:4px; color:var(--t-60); font-size:.96rem; line-height:1.5; text-wrap:pretty; }

/* ========================= TESTIMONIALS ========================= */
.testi { padding:var(--sec) 0; overflow:hidden; }
.testi__head { text-align:center; }
.testi__head .h2 { max-width:17ch; margin-inline:auto; }
.testi__score { margin-top:16px; color:var(--t-60); font-size:.95rem; text-wrap:balance; }
.testi__score strong { color:var(--fg); margin-right:3px; }
.testi__stars { color:var(--accent); letter-spacing:2px; margin-right:8px; text-shadow:0 0 12px var(--accent-glow); }
.testi__marquee { margin-top:40px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.testi__track { display:flex; align-items:stretch; width:max-content; animation:marquee 42s linear infinite; }
.testi__marquee:hover .testi__track { animation-play-state:paused; }
@keyframes marquee { from { transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } }
.quote { position:relative; flex:0 0 min(290px,74vw); display:flex; flex-direction:column; padding:4px 24px; }
.quote::before { content:""; position:absolute; left:0; top:4%; bottom:4%; width:1px; background:var(--hair-y); }
.stars { display:block; color:var(--accent); letter-spacing:3px; font-size:12px; text-shadow:0 0 12px var(--accent-glow); }
.stars__off { color:rgba(255,255,255,.18); text-shadow:none; }
.quote blockquote { margin-top:12px; flex:1; font-size:1.08rem; font-weight:600; line-height:1.4; letter-spacing:-.008em; color:var(--fg); }
.quote figcaption { margin-top:16px; display:flex; flex-direction:column; gap:4px; }
.quote__title { font-size:.9rem; font-weight:700; color:var(--t-75); }
.quote__who { font-size:13px; color:var(--t-45); }
.quote__who::before { content:"@\00a0"; color:var(--accent); }

/* ============================ PRIVACY ============================ */
.privacy { padding:var(--sec) 0; text-align:center; overflow:hidden; }
.privacy::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 60% at 50% 30%, rgba(97,224,175,.055), transparent 70%); }
.privacy .h2 { max-width:16ch; margin-inline:auto; }
.privacy__strip { display:grid; grid-template-columns:1fr; max-width:400px; margin:40px auto 0; }
.privacy__strip li { position:relative; display:flex; align-items:center; gap:16px; padding:16px 4px; color:var(--t-80); font-weight:500; text-align:left; }
.privacy__strip li + li::before { content:""; position:absolute; left:4%; right:4%; top:0; height:1px; background:var(--hair-x); }
.ic { width:26px; height:26px; flex:0 0 auto; stroke:var(--accent); stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 14px rgba(97,224,175,.35)); }

/* ============================== FAQ ============================== */
.faq { padding:var(--sec) 0; }
.faq__head { text-align:center; margin-bottom:40px; }
.faq__head .h2 { max-width:16ch; margin-inline:auto; }
.faq__cols { display:grid; }
.faq__item { position:relative; }
.faq__item::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); }
.faq__cols > .faq__col:first-child > .faq__item:first-child::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); }
.faq__q { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; padding:16px 0; list-style:none; cursor:pointer; font-size:1.02rem; font-weight:600; line-height:1.35; color:var(--fg); transition:color var(--dur) var(--ease); }
.faq__q::-webkit-details-marker { display:none; }
.faq__item[open]:not(.is-closing) > .faq__q { color:var(--accent); }
@media (hover:hover) and (pointer:fine) { .faq__q:hover { color:var(--accent); } }
.faq__q:active { opacity:.65; transition-duration:60ms; }
.faq__chev { width:18px; height:18px; flex:0 0 auto; stroke:var(--accent); stroke-width:2; fill:none; stroke-linecap:round; transition:transform .35s var(--ease-out); }
.faq__item[open]:not(.is-closing) .faq__chev { transform:rotate(45deg); }
.faq__a { padding:0 0 20px; color:var(--t-60); max-width:62ch; text-wrap:pretty; }
.faq__item[open] .faq__a { animation:faq-in .4s var(--ease-out); }
@keyframes faq-in { from { opacity:0; transform:translate3d(0,-6px,0); } to { opacity:1; transform:none; } }
.faq__a a { padding-block:16px; color:var(--accent); text-decoration:underline; text-decoration-color:rgba(97,224,175,.4); text-underline-offset:3px; }

/* ========================== FINAL CTA ========================== */
.cta { padding:clamp(96px,14vw,176px) 0 clamp(112px,15vw,192px); text-align:center; overflow:hidden; isolation:isolate; }
.cta__dawn { position:absolute; inset:0; z-index:-1; pointer-events:none; }
/* first light: a mint dawn rising under the last line */
.cta__dawn::before { content:""; position:absolute; left:50%; bottom:-34%; width:max(1200px,190vw); height:64%; transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(97,224,175,.19), rgba(97,224,175,.055) 42%, transparent 70%); }
.cta__inner { display:flex; flex-direction:column; align-items:center; }
.cta__title { margin-top:24px; max-width:13ch; font-size:clamp(2rem,8.4vw,3.9rem); line-height:1.1; letter-spacing:-.018em; text-wrap:balance; }
.cta__sub { margin-top:16px; text-wrap:balance; color:var(--t-60); font-size:clamp(1rem,1.25vw,1.12rem); }
.cta__actions { margin-top:32px; display:flex; flex-direction:column; align-items:center; gap:24px; }

/* ============================ FOOTER ============================ */
.site-footer { position:relative; padding:48px 0 32px; }
.site-footer::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--hair-x); }
.site-footer__inner { display:grid; grid-template-columns:1fr 1fr; gap:32px 24px; }
.site-footer__brand { grid-column:1 / -1; }
.site-footer__tag { margin-top:8px; color:var(--t-60); font-size:14px; max-width:30ch; }
.site-footer__h { font-size:11px; font-weight:700; line-height:1; letter-spacing:.14em; text-transform:uppercase; color:var(--t-45); margin-bottom:8px; }
.site-footer__nav { display:flex; flex-direction:column; }
.site-footer__nav a { display:block; color:var(--t-60); font-size:15px; line-height:20px; padding:12px 0; width:fit-content; transition:color var(--dur) var(--ease); }
.site-footer__nav a:hover { color:var(--accent); }
.site-footer__base { margin-top:32px; padding-top:24px; position:relative; display:flex; flex-direction:column; gap:8px; color:var(--t-45); font-size:13px; }
.site-footer__base::before { content:""; position:absolute; left:var(--gl); right:var(--gr); top:0; height:1px; background:rgba(255,255,255,.07); }

/* =========================== QR POPUP =========================== */
.qrmodal { margin:auto; border:none; padding:0; background:transparent; max-width:none; }
.qrmodal::backdrop { background:rgba(0,0,0,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.qrmodal__panel { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  background:linear-gradient(180deg, rgba(97,224,175,.06), rgba(97,224,175,0) 40%), var(--card); border:1px solid var(--accent-border); border-radius:22px;
  padding:38px 46px 30px; box-shadow:0 30px 90px rgba(0,0,0,.7); color:var(--t-75); }
.qrmodal__close { position:absolute; top:12px; right:12px; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; background:#16161a; color:var(--t-60); transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.qrmodal__close:hover { color:var(--fg); border-color:var(--t-45); }
.qrmodal__close svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.qrmodal__title { font-size:1.35rem; margin-bottom:6px; }
.qrmodal__sub { color:var(--t-60); font-size:.95rem; margin-bottom:22px; }
.qrmodal__card { background:#fff; border-radius:14px; padding:10px; line-height:0; }
.qrmodal__card img { width:180px; height:180px; }
.qrmodal__alt { margin-top:18px; color:var(--t-60); font-size:.9rem; }
.qrmodal__alt a { color:var(--accent); font-weight:600; }
.qrmodal__alt a:hover { text-decoration:underline; }

/* ============================ PHONES ============================ */
/* ------------------------ subpage hero ------------------------ */
/* Support, Privacy, Terms, the thank-you page and the not-found page open
   with this same hero, so moving between pages nothing jumps: the label's
   text sits level with the homepage's "Built for law enforcement" pill and
   every headline starts on the homepage headline's line (146pt down on an
   iPhone). The label is a block so its box is exactly its 12px line. */
.ph { padding:calc(var(--header) + 49px) 0 8px; text-align:center; }
.ph::before { content:""; position:absolute; inset:0 0 -40% 0; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 45% at 50% 0%, rgba(97,224,175,.10), transparent 72%); }
.ph .kicker { display:block; }
.ph__title { margin-top:25px; font-size:clamp(2.3rem,9.8vw,3.4rem); line-height:1.06; letter-spacing:-.022em; }
.ph__title .accent { color:var(--accent); text-shadow:0 0 34px rgba(97,224,175,.35); }
.ph__lead { margin:16px auto 0; max-width:34ch; font-size:18px; line-height:1.5; color:var(--t-75); text-wrap:balance; }
/* a short row of next steps under the hero (the not-found page) */
.ph__links { margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; gap:0 28px; }
.ph__links a { display:inline-flex; align-items:center; min-height:44px; font-weight:600; color:var(--accent); }
/* a hero that is the whole page: keeps the footer below the first screen's fold line */
.ph--full { min-height:calc(100svh - 120px); }
@media (min-width:900px) {
  .ph { padding-top:calc(var(--header) + 88px); }
  .ph__title { font-size:clamp(3rem,4.6vw,4.2rem); }
  .ph__lead { font-size:19px; }
}

/* Phones: every text style locked to a standard size so it reads the same on
   an SE, a Pro and a Pro Max. Apple's iOS text sizes first (the audience is
   almost all iPhone), Google's Material scale where iOS has no step. */
@media (max-width:599px) {
  .hero__title, .ph__title { font-size:36px; }              /* Material Display Small */
  .cta__title { font-size:34px; }                           /* iOS Large Title */
  .h2 { font-size:28px; }                                   /* iOS Title 1 */
  .midcta__title { font-size:24px; }                        /* Material Headline Small */
  .scn h3 { font-size:20px; }                               /* iOS Title 3 */
  .steps h3, .wrist__grid h3, .faq__q { font-size:17px; }   /* iOS Headline */
  .hero__sub, .lede, .field__intro, .cta__sub, .give__text,
  .codeft__hint, .quote blockquote, .ph__lead { font-size:17px; } /* iOS Body */
  .spec dd, .ticks li, .privacy__strip li, .faq__a { font-size:16px; } /* iOS Callout */
  .scn__t, .steps p, .wrist__grid p, .proof, .testi__score,
  .quote__title { font-size:15px; }                         /* iOS Subheadline */
  .hero__micro, .quote__who, .site-footer__base { font-size:13px; } /* iOS Footnote */
  .kicker, .scn__k { font-size:12px; }                      /* iOS Caption 1 */
}

/* Large iPhones (17 Pro 402, Plus/Pro Max 430-440, ~71% of visits): the first
   screen steps up so the headline fills the width the way the old page did.
   Smaller phones keep the sizes above. */
@media (min-width:400px) and (max-width:599px) {
  .hero__title, .ph__title { font-size:44px; }
  .ph__lead { font-size:18px; }
  .h2 { font-size:33px; }                                   /* biggest that keeps every headline on 2 lines at 402 */
  .midcta__title { font-size:27px; }
  .cta__title { font-size:42px; }
  .hero__sub { max-width:none; font-size:18px; }
  .proof { font-size:17px; gap:4px 10px; }
  .proof__stars { font-size:16px; }
  .hero__micro, .reel-hint { font-size:14px; }
}
/* Plus / Pro Max (430-440): section headlines 36px, still two lines each */
@media (min-width:430px) and (max-width:599px) {
  .h2 { font-size:36px; }
}

/* Phones: scenario cards and pin steps read at full card width, easier size.
   (The watch features stay in their two centered columns: William likes them.) */
@media (max-width:599px) {
  .scn__t { max-width:none; font-size:16px; }
  .steps p { font-size:16px; }
}

/* Large iPhones: device renders back to the old page's size, one scenario
   card at a time with the next peeking in */
@media (min-width:400px) and (max-width:599px) {
  .stage--phone { width:64vw; }
  .scn { flex-basis:min(80vw,340px); }
  .reel::after { flex-basis:max(0px, calc(100vw - var(--gl) - var(--gr) - min(80vw,340px) - 24px)); }
  .steps h3 { font-size:18px; }
  .testi__score { font-size:16px; }
}

/* Donation band on phones and tablets: the old page's size */
@media (max-width:899px) {
  .give { padding:36px 0; }
  .give__inner { gap:22px; }
  .give__text { font-size:24px; font-weight:700; }
  .give__logos { gap:36px; }
  .give__logo img, .give__logo--wide img { height:96px; }
}

/* No lone last words: headlines balance their lines, running text avoids a
   one-word last line (iOS 17.5+ and 26+). The markup also keeps the last two
   words of short lines together, which covers older iOS. */
h1, h2, h3, .midcta__title, .cta__title { text-wrap:balance; }
p, li, dd, blockquote { text-wrap:pretty; }

/* Tablets and sideways phones (600-899): a middle step so the top headline clearly leads */
@media (min-width:600px) and (max-width:899px) {
  .hero__title, .ph__title { font-size:56px; }
  .cta__title { font-size:48px; }
  .h2 { font-size:40px; }
  .midcta__title { font-size:32px; }
  .scn h3 { font-size:22px; }
  .hero__sub, .lede, .field__intro { font-size:19px; }
}

/* Display Zoom (320pt wide): one step down so the closing headline keeps two lines */
@media (max-width:359px) {
  .cta__title { font-size:30px; }
}

@media (max-width:899px) {
  .js .reveal { transform:translate3d(0,16px,0); transition-duration:.7s, .8s; }
  .in { animation-duration:.7s; }                           /* same quick fade as the old page on phones */
  .in--rise { animation-duration:.9s; }
  .js .reveal--rise { transform:translate3d(0,32px,0) scale(.98); transition-duration:.9s, 1s; }
  /* three-word code: the glowing line comes before the phone */
  .codeft .split { grid-template-areas:"head" "rest" "media"; }
}

/* ============================ DESKTOP ============================ */
@media (min-width:600px) {
  :root { --pad:32px; --band:72px; }
}

@media (min-width:900px) {
  :root { --header:68px; --pad:clamp(32px,4vw,48px); --band:clamp(72px,7vw,96px); }

  /* hero: copy left, lit device right, full first screen */
  .hero { min-height:min(100svh,1000px); display:flex; align-items:center; text-align:left; padding:calc(var(--header) + 28px) 0 44px; }
  .hero > .wrap { flex:1; }
  .hero__grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); align-items:center; gap:clamp(24px,4vw,72px); }
  .hero__sky::after { background:
      radial-gradient(1100px 480px at calc(50% - 260px) -8%, rgba(97,224,175,.06), transparent 70%),
      var(--grain); }
  .hero__title { margin-top:22px; font-size:clamp(3.2rem,5.3vw,5.1rem); line-height:1.02; letter-spacing:-.028em; }
  .hero__line { display:block; }
  .hero__sub { margin-inline:0; max-width:36ch; margin-top:20px; }
  .hero__cta { justify-content:flex-start; margin-top:32px; }
  .proof { justify-content:flex-start; margin-top:18px; }
  .hero__micro { margin-top:4px; }
  .hero__visual { margin-top:0; }
  .stage--hero { width:min(100%,520px); }

  .give { padding:26px 0; }
  .give__inner { flex-direction:row; justify-content:center; gap:44px; }
  .give__text { font-size:1.2rem; }
  .give__logo img { height:68px; }
  .give__logo--wide img { height:62px; }

  /* the reel becomes an open 4 x 2 grid */
  .reel { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:56px 40px; margin:clamp(52px,6vw,76px) 0 0; padding:0; overflow:visible; }
  .scn h3 { font-size:1.28rem; }
  .reel-ui, .reel-hint { display:none; }
  .reel::after { display:none; }

  /* split sections: device on one side, story on the other */
  .split { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:clamp(56px,8vw,120px); row-gap:0; align-items:start; }
  .split--l { grid-template-areas:"media head" "media rest"; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); }
  .split--r { grid-template-areas:"head media" "rest media"; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); }
  .split__head { text-align:left; align-self:end; }
  .split__head .h2 { margin-inline:0; max-width:16ch; }
  .split__head .lede { margin-inline:0; }
  .split__media { align-self:center; }
  .split__rest { margin-top:32px; }
  .stage--phone { width:min(100%,380px); }
  .spec, .steps, .ticks { margin-inline:0; }
  .more-link { text-align:left; }
  .spec__row { grid-template-columns:104px 1fr; gap:16px; align-items:baseline; padding:14px 0; }
  .codeft .split__rest { text-align:left; }
  .duo { width:min(100%,480px); }

  .wrist__grid { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:880px; gap:52px 40px; }
  .wrist__grid p { max-width:22ch; }

  .midcta__banner { flex-direction:row; justify-content:space-between; text-align:left; }

  .testi__marquee { margin-inline:auto; max-width:1600px; }
  .quote { flex-basis:340px; padding:4px 34px; }
  .quote blockquote { font-size:1.14rem; }

  .privacy__strip { grid-template-columns:repeat(4,1fr); max-width:980px; }
  .privacy__strip li { flex-direction:column; justify-content:flex-start; gap:14px; padding:12px; text-align:center; white-space:nowrap; font-size:15px; }
  .privacy__strip li + li::before { left:0; right:auto; top:8%; bottom:8%; width:1px; height:auto; background:var(--hair-y); }
  .ic { width:28px; height:28px; }

  .faq__cols { grid-template-columns:1fr 1fr; column-gap:clamp(40px,5vw,72px); }
  .faq__cols > .faq__col > .faq__item:first-child::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); }

  .cta__actions { flex-direction:row; }

  .site-footer__inner { grid-template-columns:1.6fr 1fr 1fr 1fr; align-items:start; }
  .site-footer__brand { grid-column:auto; }
  .site-footer__base { flex-direction:row; justify-content:space-between; }
}

/* Desktop with a mouse: scan-to-download QR codes replace the App Store buttons.
   Touch screens this wide (iPads) keep the tappable buttons, since a tablet cannot scan itself. */
@media (min-width:900px) and (hover:hover) and (pointer:fine) {
  .btn-appstore, .header__cta--store { display:none; }
  .header__cta--scan { display:inline-flex; }
  .qr { display:inline-flex; align-items:center; gap:16px; padding:13px 22px 13px 13px; border-radius:18px;
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)), var(--card); border:1px solid var(--accent-border); }
}

@media (min-width:1900px) {
  :root { --wrap:1400px; }
}

/* -------- tablets + desktop follow the phone (the source of truth) -------- */
/* Never smaller than the iPhone 17 Pro Max design: same reading sizes, same
   centered watch-feature columns, same donation band size. */
@media (min-width:600px) {
  .scn__t, .steps p, .testi__score { font-size:16px; }
  .steps h3 { font-size:18px; }
  .wrist__grid h3 { font-size:17px; }
  .wrist__grid p { font-size:15px; }
}
@media (min-width:900px) {
  .give { padding:32px 0; }
  .give__text { font-size:24px; font-weight:700; }
  .give__logo img, .give__logo--wide img { height:96px; }
  /* scenario cards: two across so every title fits on one line, and every
     description (47-70 characters) wraps to exactly two lines */
  .reel { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:1040px; margin-inline:auto; gap:56px 64px; }
  .scn__t { max-width:300px; }
}

/* ------------------------ page to page ------------------------ */
/* Moving between LOC8 pages: the header holds perfectly still while the page
   dips through black and the next one rises in, like switching screens in an
   app. Every page loads this file, so every link between them gets it (the
   /go redirect and outside links are untouched). Kept short: taps wait
   while it runs. Back and forward use it too; Reduce Motion gets a plain,
   instant page change. */
@media (prefers-reduced-motion:no-preference) {
  @view-transition { navigation:auto; }
}
.site-header { view-transition-name:site-header; }
::view-transition-group(site-header) { animation-duration:.3s; }
::view-transition-old(root) { animation:vt-out .2s var(--ease) both; }
::view-transition-new(root) { animation:vt-in .42s var(--ease-out) .08s both; }
@keyframes vt-out { to { opacity:0; } }
@keyframes vt-in { from { opacity:0; transform:translate3d(0,10px,0); } }

/* Links that land on a section from another page (/#features, #message, #get)
   stop with breathing room below the fixed header, not tucked under it. */
section[id] { scroll-margin-top:16px; }

/* ----------------------- reduced motion ----------------------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0s !important; }
  .js .reveal, .js .stagger > * { opacity:1 !important; transform:none !important; }
  .in { animation:none !important; }
  .testi__track { animation:none !important; }
  .testi__marquee { overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
}