/* ============================================================================
   pages.css — the shared design system for the five product subpages
   (/explore, /circles, /camera, /messages, /profile).

   WHY THIS FILE EXISTS: index.html inlines its own copy of the tokens, nav and
   footer. That was fine when it was the only page of its kind. Five more pages
   sharing one look needed a single source, so the system lives here and the
   subpages link it. index.html is deliberately NOT converted — it is live and
   its inline CSS carries load-bearing comments about the blend modes. If you
   change a token here, change it there too.

   THE BLEND MODE IS NOT DECORATION. Every phone screenshot is an opaque WebP
   with a baked-in WHITE background, dropped out with mix-blend-mode:multiply.
   Baking real alpha instead was already tried on the home page and rejected:
   flood-filling the white leaves the antialiased rim (luminance ~176-240,
   fully opaque), which reads as a permanent white halo. multiply handles that
   ramp correctly.

   A blend on a DESCENDANT of an element with opacity < 1 is isolated — the
   backdrop becomes nothing and the white rectangle shows for the length of the
   fade. So the blend must sit on the SAME element that animates opacity. That
   is why .revi (opacity only) goes on the <img>, and why these images can
   never take a drop shadow: you would be shadowing a white rectangle.
   ========================================================================= */

:root{
  --ink:#1D1D1F; --ink2:#86868B; --line:rgba(0,0,0,.09);
  --bg:#FFFFFF; --grey:#F5F5F7; --blue:#0071E3; --link:#0066CC;
  --sys:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;
  --round:ui-rounded,'SF Pro Rounded','Nunito',var(--sys);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

/* ---------- fomo brand wash ---------- */
.bgwash{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,
    #C8F2DC 0%, #E4F9EC 12%, #F7FCF9 24%, #FFF2F8 38%,
    #FFDDEC 50%, #FBE3F4 62%, #F2FBF6 78%, #DCF6E7 90%, #C8F2DC 100%);
  background-size:200% 200%;animation:wash 30s ease-in-out infinite;will-change:background-position}
@keyframes wash{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media(prefers-reduced-motion:reduce){.bgwash{animation:none;background-position:30% 50%}}

body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sys);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5;letter-spacing:-.011em;overflow-x:hidden}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
h2{font-family:var(--round);font-weight:900;font-size:clamp(38px,5.4vw,68px);letter-spacing:-.042em;line-height:1.0}
h3{font-family:var(--round);font-weight:900;font-size:clamp(26px,3.2vw,40px);letter-spacing:-.035em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:8px}

/* ---------- nav — markup must stay in sync with index.html.
   auth-nav.js mounts into .nav-right and .mobile-menu; renaming either
   silently drops Log in. ---------------------------------------------- */
nav{position:sticky;top:0;z-index:100;height:48px;display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.nav-logo{display:flex;align-items:center;font-size:0;line-height:0;text-decoration:none}
.nav-logo img{height:28px;width:auto;display:block}
.nav-links{display:flex;gap:26px;list-style:none;margin:0;padding:0;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);align-items:center}
.nav-links a{font-size:12.5px;font-weight:400;color:var(--ink2);text-decoration:none;transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.nav-links a[aria-current]{font-weight:500}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-mini{font-size:12.5px;line-height:1.2;font-weight:500;background:var(--blue);color:#fff;padding:5px 14px;
  border-radius:980px;text-decoration:none;border:0;cursor:pointer;font-family:var(--sys);
  display:inline-flex;align-items:center;gap:5px}
.nav-mini:hover{filter:brightness(1.07)}
.nav-mini .cav{transition:transform .2s}
.nav-mini[aria-expanded="true"] .cav{transform:rotate(180deg)}
.hamburger{display:none;background:none;border:0;cursor:pointer;padding:6px}
.hamburger svg{width:20px;height:20px;fill:var(--ink);display:block}
.mobile-menu{display:none;position:fixed;top:48px;left:0;right:0;z-index:99;
  background:rgba(255,255,255,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  flex-direction:column;padding:10px 24px 18px;border-bottom:1px solid var(--line)}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:11px 2px;font-size:16px;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.mobile-menu a:last-child{border-bottom:0}
.mobile-menu .menu-divider{height:1px;background:rgba(0,0,0,.10);margin:8px 0}
@media(max-width:920px){.nav-links{display:none !important}.hamburger{display:block}}

.dlwrap{position:relative}
.dlmenu{position:absolute;top:calc(100% + 10px);right:0;z-index:120;min-width:236px;padding:6px;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(0,0,0,.09);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.16);
  opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top right;
  pointer-events:none;transition:opacity .16s ease,transform .16s cubic-bezier(.2,.8,.3,1)}
.dlmenu.open{opacity:1;transform:none;pointer-events:auto}
.dlmenu a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;color:var(--ink);text-decoration:none;transition:background .15s}
.dlmenu a:hover,.dlmenu a:focus-visible{background:rgba(0,0,0,.055)}
.dlmenu svg{width:22px;height:22px;flex:0 0 22px}
.dlmenu b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.dlmenu span{display:block;font-size:11.5px;color:var(--ink2);line-height:1.3}

/* ---------- buttons, links, eyebrows ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;
  font-size:16px;font-weight:500;padding:12px 26px;border-radius:980px;transition:filter .2s,transform .2s}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn.alt{background:#1D1D1F}
.lm{color:var(--link);font-size:clamp(15px,1.6vw,18px);display:inline-flex;align-items:center;gap:3px}
.lm .c{transition:transform .2s}.lm:hover .c{transform:translateX(3px)}
.lm:hover{text-decoration:underline}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);margin:0 0 14px}
.acc-explore{color:#FF6B4A}.acc-circles{color:#30B0C7}.acc-camera{color:#0071E3}
.acc-messages{color:#B98900}.acc-profile{color:#34A853}

.cta{--bh:clamp(38px,10.6vw,44px);display:flex;gap:clamp(10px,2.8vw,16px);align-items:center;justify-content:center;flex-wrap:nowrap}
.sbadge{display:block;line-height:0;text-decoration:none;flex:0 0 auto;transition:opacity .2s,transform .2s}
.sbadge:hover{opacity:.85;transform:translateY(-1px)}
.sbadge img{height:var(--bh);width:auto;max-width:none;display:block}

/* ---------- shared layout ---------- */
section{scroll-margin-top:64px}
.wide{max-width:1500px;margin:0 auto;padding-inline:clamp(20px,4vw,60px)}
.lede{font-size:clamp(17px,1.9vw,21px);color:var(--ink2);font-weight:400;line-height:1.5}

/* ---------- SUBPAGE HERO ---------- */
.phero{text-align:center;padding:clamp(52px,7vw,92px) 24px 0;overflow:hidden}
.phero h1{font-family:var(--round);font-weight:900;font-size:clamp(42px,7vw,88px);line-height:.98;letter-spacing:-.04em}
.phero .sub{font-size:clamp(17px,2.1vw,24px);color:var(--ink2);font-weight:400;margin:20px auto 0;max-width:34ch}
.phero .phones{position:relative;margin:clamp(32px,5vw,60px) auto 0;display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(0px,1.4vw,22px);max-width:1200px}
.phero .phones img{height:clamp(410px,50vw,610px);width:auto;position:relative;z-index:1;mix-blend-mode:multiply}
.ph-c{z-index:2;--restY:clamp(-40px,-3vw,-24px);--restR:0deg;transform:translateY(var(--restY)) rotate(var(--restR))}
.ph-l,.ph-r{height:clamp(352px,44vw,532px) !important;z-index:1}
.ph-l{--restY:0px;--restR:-5deg;transform:translateY(var(--restY)) rotate(var(--restR));margin-right:clamp(-46px,-3vw,-14px)}
.ph-r{--restY:0px;--restR:5deg;transform:translateY(var(--restY)) rotate(var(--restR));margin-left:clamp(-46px,-3vw,-14px)}
.rise{opacity:0;transform:translateY(46px) rotate(var(--restR,0deg))}
.loaded .rise{animation:rise .95s cubic-bezier(.2,.7,.2,1) forwards}
.loaded .ph-l.rise{animation-delay:.12s}
.loaded .ph-r.rise{animation-delay:.2s}
@keyframes rise{to{opacity:1;transform:translateY(var(--restY,0)) rotate(var(--restR,0deg))}}
@media(max-width:640px){.ph-l,.ph-r{display:none}.ph-c{--restY:0px}}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:translateY(var(--restY,0)) rotate(var(--restR,0deg));animation:none !important}}

/* ---------- A. SPLIT ---------- */
.split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center;gap:clamp(28px,5vw,84px);padding-block:clamp(70px,9vw,132px)}
.split .copy{text-align:left}
.split .copy .lede{margin-top:18px;max-width:38ch}
.split .shots{display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.4vw,22px)}
.split .shots img{height:clamp(400px,42vw,600px);width:auto;mix-blend-mode:multiply;position:relative}
.split .shots img:first-child{transform:rotate(-3deg);z-index:2}
.split .shots img.small{height:clamp(330px,34vw,490px);transform:rotate(3deg);z-index:1}
.split.flip .copy{order:2}
.split.flip .shots img:first-child{transform:rotate(3deg)}
.split.flip .shots img.small{transform:rotate(-3deg)}
.split .shots{margin-right:calc(-1 * clamp(20px,4vw,60px))}
.split.flip .shots{margin-right:0;margin-left:calc(-1 * clamp(20px,4vw,60px))}

.points{margin-top:26px;display:grid;gap:14px;max-width:38ch}
.points div{padding-left:16px;border-left:2px solid rgba(0,0,0,.14)}
.points b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.points p{font-size:14.5px;color:var(--ink2);margin-top:3px;line-height:1.45}

/* ---------- B. STRIP ---------- */
.strip{padding-block:clamp(70px,9vw,128px)}
.strip .head{text-align:center;max-width:min(940px,100%);margin:0 auto}
.strip .head .lede{margin:18px auto 0;max-width:52ch}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,64px);margin:clamp(40px,5vw,70px) 0 0;padding:0;text-align:left}
.steps li{list-style:none;padding-top:20px;border-top:2px solid rgba(0,0,0,.14)}
.steps .n{font-family:var(--round);font-weight:900;font-size:clamp(30px,3.4vw,44px);line-height:1;color:var(--ink);opacity:.17;letter-spacing:-.04em}
.steps h3{font-family:var(--sys);font-size:clamp(17px,1.5vw,20px);font-weight:600;letter-spacing:-.02em;margin-top:10px}
.steps p{font-size:15px;color:var(--ink2);margin-top:6px;line-height:1.5}
.strip .shots{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,30px);margin-top:clamp(40px,5vw,72px)}
.strip .shots img{height:clamp(380px,40vw,560px);width:auto;mix-blend-mode:multiply;transform:rotate(-3deg)}
.strip .shots img.small{height:clamp(320px,33vw,470px);transform:rotate(3deg)}
@media(max-width:860px){.steps{grid-template-columns:1fr;gap:24px}}

/* ---------- C. STAGE + FAN ---------- */
.stage{text-align:center;padding:clamp(70px,9vw,128px) 0 clamp(52px,6vw,88px);overflow:hidden}
.stage .head{max-width:min(880px,100%);margin:0 auto}
.stage .head .lede{margin:18px auto 0;max-width:50ch}
.fan{display:flex;align-items:center;justify-content:center;gap:clamp(4px,1.2vw,22px);margin-top:clamp(38px,5vw,64px);width:100%}
.fan img{height:clamp(320px,33vw,520px);width:auto;mix-blend-mode:multiply;position:relative}
.fan img:nth-child(1){transform:rotate(-6deg)}
.fan img.lead{height:clamp(400px,42vw,650px);transform:rotate(0deg);z-index:3}
.fan img:nth-child(3){transform:rotate(6deg)}

/* ---------- D. TINTED BANDS ---------- */
.band{position:relative;padding:clamp(70px,9vw,128px) 0;overflow:hidden;
  background:linear-gradient(100deg,rgba(255,214,10,.20),rgba(255,94,138,.16) 52%,rgba(191,90,242,.16))}
.band.cool{background:linear-gradient(100deg,rgba(48,176,199,.18),rgba(100,210,255,.16) 52%,rgba(48,209,88,.15))}
.band.warm{background:linear-gradient(100deg,rgba(255,107,74,.16),rgba(255,159,10,.15) 52%,rgba(255,94,138,.14))}
.band .split,.band .strip,.band .stage,.band .quiet{padding-block:0}

/* ---------- E. QUIET ---------- */
.quiet{text-align:center;padding:clamp(70px,9vw,128px) 0}
.quiet .head{max-width:min(880px,100%);margin:0 auto}
.quiet .head .lede{margin:18px auto 0;max-width:46ch}
.quiet .shots{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,28px);margin-top:clamp(36px,4.5vw,60px)}
.quiet .shots img{height:clamp(360px,36vw,500px);width:auto;mix-blend-mode:multiply;transform:rotate(-2.5deg)}
.quiet .shots img.small{height:clamp(300px,30vw,420px);transform:rotate(2.5deg)}

/* ---------- F. GALLERY — an even row/grid of phones, no rotation.
   Used where the point is "here are all of them", not "here is a hero". --- */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(10px,1.8vw,26px);margin-top:clamp(34px,4.5vw,58px);align-items:end}
.gallery figure{margin:0}
.gallery img{width:100%;height:auto;mix-blend-mode:multiply}
.gallery figcaption{font-size:12.5px;color:var(--ink2);text-align:center;margin-top:9px;line-height:1.35}
.gallery.four{grid-template-columns:repeat(4,1fr)}
.gallery.five{grid-template-columns:repeat(5,1fr)}
.gallery.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.gallery.four,.gallery.five{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.gallery.four,.gallery.five,.gallery.three{grid-template-columns:repeat(2,1fr)}}

/* ---------- shared small bits ---------- */
.tools{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.tools span{font-size:13.5px;font-weight:600;padding:8px 15px;border-radius:12px;background:#1D1D1F;color:#fff}
.swatches{display:flex;gap:9px;margin-top:24px;flex-wrap:wrap}
.swatches i{width:34px;height:34px;border-radius:50%;display:block;
  box-shadow:0 3px 12px rgba(0,0,0,.13);animation:pop .5s cubic-bezier(.2,1.4,.4,1) backwards}
.swatches.big i{width:44px;height:44px}
.swatches.center{justify-content:center}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.swatches i{animation:none}}
.tabsrow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.tabsrow span{font-size:14px;font-weight:500;padding:9px 17px;border-radius:12px;background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.07)}
.ribbon{margin-top:clamp(40px,5vw,64px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ribbon .rtrack{display:flex;gap:12px;width:max-content;animation:slide 42s linear infinite}
.ribbon span{flex:0 0 auto;font-size:clamp(15px,1.6vw,19px);font-weight:600;letter-spacing:-.02em;padding:11px 22px;border-radius:14px;background:#1D1D1F;color:#fff}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.ribbon .rtrack{animation:none}}

/* ---------- FLOATING CHAT BUBBLES ----------
   Restored from the original messages page. Alternating sides, the last one
   in each thread keeps the tail corner squared off like a real bubble.
   They fade in one after another as the section scrolls into view — the
   stagger is a transition-delay set inline per bubble. */
.bubbles{max-width:640px;margin:0 auto;padding:clamp(34px,5vw,56px) 24px 0;display:flex;flex-direction:column;gap:11px}
.bubble{max-width:clamp(240px,74%,400px);padding:13px 18px;border-radius:22px;font-size:clamp(15px,1.7vw,17px);line-height:1.4;
  box-shadow:0 2px 16px rgba(0,0,0,.05);opacity:0;transform:translateY(14px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.bubbles.in .bubble{opacity:1;transform:none}
.bubble.them{background:rgba(255,255,255,.86);color:var(--ink);align-self:flex-start;border-bottom-left-radius:7px}
.bubble.me{background:var(--blue);color:#fff;align-self:flex-end;border-bottom-right-radius:7px}
.bubble.me.yellow{background:#FFD60A;color:#3a2e00}
.bubble.me.pink{background:#FF5E8A;color:#fff}
.bubble .who{display:block;font-size:11.5px;font-weight:700;letter-spacing:.02em;opacity:.55;margin-bottom:3px}
@media(prefers-reduced-motion:reduce){.bubble{opacity:1;transform:none;transition:none}}

/* ---------- FACT ROW — three or four numbers ---------- */
.facts{display:flex;justify-content:center;gap:clamp(22px,5vw,70px);flex-wrap:wrap;margin-top:32px}
.facts div{min-width:88px;text-align:center}
.facts b{display:block;font-family:var(--round);font-weight:900;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.03em}
.facts span{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-top:4px}

/* ---------- dark statement ---------- */
.statement{position:relative;color:#fff;text-align:center;padding:clamp(100px,14vw,190px) 24px;overflow:hidden}
.statement .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.statement::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.66),rgba(0,0,0,.72))}
.statement>div{position:relative;z-index:1}
.statement .eyebrow{color:#c7c7cc}
.statement p{font-size:clamp(18px,2.2vw,23px);color:#d6d6db;font-weight:400;max-width:32ch;margin:22px auto 0;line-height:1.45}
.statement .lm{color:#6FBBFF;margin-top:22px}

/* ---------- PAGER — where to go next, like apple.com's product footers ---- */
.pager{max-width:1500px;margin:0 auto;padding:clamp(56px,7vw,96px) clamp(20px,4vw,60px) 0}
.pager h3{text-align:center;margin-bottom:clamp(26px,3.5vw,42px)}
.pagergrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.6vw,20px)}
.pcard{display:block;padding:clamp(18px,2.2vw,28px);border-radius:20px;background:rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.07);transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s,background .25s}
.pcard:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.09);background:rgba(255,255,255,.82)}
.pcard b{display:block;font-family:var(--round);font-weight:900;font-size:clamp(19px,2vw,25px);letter-spacing:-.03em}
.pcard p{font-size:14px;color:var(--ink2);margin-top:6px;line-height:1.45}
.pcard .go{display:inline-flex;align-items:center;gap:3px;color:var(--link);font-size:14px;font-weight:500;margin-top:12px}
@media(max-width:900px){.pagergrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.pagergrid{grid-template-columns:1fr}}

/* ---------- final CTA + footer ---------- */
.final{background:rgba(255,255,255,.5);text-align:center;padding:clamp(80px,12vw,150px) 24px;margin-top:clamp(56px,7vw,96px)}
.final .cta{margin-top:26px}
.final .fine{color:var(--ink2);font-size:13px;margin-top:16px}
footer{background:#000;color:#86868b;padding:44px 24px;text-align:center;font-size:12px}
footer a{color:#86868b}footer a:hover{color:#fff}
.foot-links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}

/* ---------- reveal ---------- */
.revi{opacity:0;transition:opacity .9s ease}
.revi.in{opacity:1}
.rev{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}

/* ---------- one mobile rule for every layout ----------
   Phones stay CLUMPED in a row on mobile; stacking them turned every pair
   into ~1200px of scrolling. Widths in vw so two or three always fit. */
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:34px;padding-block:60px}
  .split .copy,.split.flip .copy{order:-1;text-align:center}
  .split .copy .lede,.points{margin-left:auto;margin-right:auto;text-align:center}
  .points div{border-left:0;padding-left:0}
  .split .shots,.split.flip .shots{margin:0}
  .split .shots,.strip .shots,.quiet .shots,.fan{flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:5px}
  .split .shots img,.strip .shots img,.quiet .shots img{height:auto;width:min(40vw,178px)}
  .split .shots img.small,.strip .shots img.small,.quiet .shots img.small{height:auto;width:min(34vw,150px)}
  .fan img{height:auto;width:min(26vw,116px)}
  .fan img.lead{height:auto;width:min(32vw,142px)}
  .swatches{justify-content:center}
}

/* ---------- mobile rotation lock ---------- */
.rotate-lock{display:none;position:fixed;inset:0;z-index:2147483647;background:#0a0a0a;color:#fff;
  flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:32px;text-align:center}
.rotate-lock svg{width:60px;height:60px}
.rotate-lock h2{font-family:'Nunito',system-ui,sans-serif;font-size:20px;font-weight:800;margin:0}
.rotate-lock p{font-size:14px;color:rgba(255,255,255,.7);max-width:320px;margin:0;line-height:1.5}
@media(max-height:600px) and (orientation:landscape) and (pointer:coarse){.rotate-lock{display:flex}}

/* ============================================================================
   DARK PAGES — every product page sits on its own photograph
   ----------------------------------------------------------------------------
   Each of the five product pages swaps the brand wash for a full-bleed photo
   of its own, so every token that assumes dark-ink-on-light has to flip. The
   page's accent arrives as --pageaccent on <body>; the eyebrow, the Learn more
   links and the tinted bands all read from it, which is the only thing that
   differs between them.

   THE BLEND IS DIFFERENT HERE, ON PURPOSE. Everywhere else on the site the
   phone renders are opaque WebPs with a baked-in white background, dropped out
   with mix-blend-mode:multiply — which only works over a LIGHT backdrop. Over
   this photo multiply would drag every phone screen down into the sky. So the
   camera page's renders carry REAL alpha and blend normally.

   That is not a contradiction of the warning at the top of this file, which
   still applies to index.html and /media/site/t/. What leaves a white halo is
   flood-filling white back OUT of an already-flat image: the antialiased rim
   survives at luminance ~176-240, fully opaque. Everything in /media/site/p/
   was never flattened — the edge is the frame asset's own alpha ramp. Do not
   generate them by flood-filling, and do not point index.html at them.
   ========================================================================= */
body.darkpage{color:#fff;background:#04070F}
.pagebg{position:fixed;inset:0;z-index:-2;pointer-events:none}
.pagebg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* Without this the copy sits on open sky and the mid-tones eat it. */
.pagebg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,7,15,.30),rgba(4,7,15,.60) 40%,rgba(4,7,15,.84))}

.darkpage .lede,.darkpage .points p,.darkpage .steps p,.darkpage .gallery figcaption,
.darkpage .facts span,.darkpage .pcard p,.darkpage .final .fine{color:rgba(255,255,255,.66)}
.darkpage .eyebrow{color:rgba(255,255,255,.60)}
.darkpage .acc-explore,.darkpage .acc-circles,.darkpage .acc-camera,
.darkpage .acc-messages,.darkpage .acc-profile{color:var(--pageaccent,#6FBBFF)}
.darkpage .lm{color:var(--pageaccent,#6FBBFF)}
.darkpage nav{background:rgba(8,12,22,.60);border-bottom-color:rgba(255,255,255,.12)}
.darkpage .nav-links a{color:rgba(255,255,255,.58)}
.darkpage .nav-links a:hover,.darkpage .nav-links a[aria-current]{color:#fff}
.darkpage .hamburger svg{fill:#fff}
.darkpage .mobile-menu{background:rgba(8,12,22,.97);border-bottom-color:rgba(255,255,255,.12)}
.darkpage .mobile-menu a{color:#fff;border-bottom-color:rgba(255,255,255,.12)}
.darkpage .dlmenu{background:rgba(18,24,38,.95);border-color:rgba(255,255,255,.14)}
.darkpage .dlmenu a{color:#fff}
.darkpage .dlmenu a:hover,.darkpage .dlmenu a:focus-visible{background:rgba(255,255,255,.10)}
.darkpage .dlmenu span{color:rgba(255,255,255,.6)}
.darkpage .points div{border-left-color:rgba(255,255,255,.24)}
.darkpage .steps li{border-top-color:rgba(255,255,255,.24)}
.darkpage .steps .n{color:#fff;opacity:.32}
.darkpage .band{background:linear-gradient(100deg,
  color-mix(in srgb, var(--pageaccent,#6FBBFF) 16%, transparent),
  rgba(255,255,255,.06) 55%,
  color-mix(in srgb, var(--pageaccent,#6FBBFF) 12%, transparent))}
.darkpage .tabsrow span{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.15)}
.darkpage .ribbon span{background:rgba(255,255,255,.13);color:#fff}
.darkpage .pcard{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.13)}
.darkpage .pcard:hover{background:rgba(255,255,255,.12);box-shadow:0 14px 40px rgba(0,0,0,.42)}
.darkpage .final{background:rgba(4,7,15,.42)}

/* Real alpha, so no dropping-out needed. */
.darkpage .phero .phones img,.darkpage .split .shots img,.darkpage .strip .shots img,
.darkpage .quiet .shots img,.darkpage .fan img,.darkpage .gallery img{mix-blend-mode:normal}