/* ===================================================================
   VYB — shared styles for content pages (light theme)
   =================================================================== */
:root{
  --blue:#062D51; --purple:#302256; --blue-text:#0E6ABE; --purple-text:#523A92; --grad-text:linear-gradient(135deg,#0E6ABE,#523A92);
  --ink:#191c2e; --text-primary:#062D51; --muted:rgba(48,34,86,.66); --dim:rgba(48,34,86,.44);
  --line:rgba(30,34,80,.12); --line-2:rgba(30,34,80,.08);
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f7f8fa;
  --grad:linear-gradient(135deg,#062D51,#302256);
  --shadow:0 24px 60px -28px rgba(40,50,110,.4);
  --radius:18px;
  --wrap:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  color:var(--text-primary);
  background:#ffffff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* keyboard-navigation focus ring, sitewide baseline (mouse clicks don't trigger it) */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--purple);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.display{font-family:'Fraunces',Georgia,serif}
.eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--purple-text);font-weight:600}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.head-inner{display:flex;align-items:center;gap:20px;height:68px}
.head-inner .logo{display:inline-block;transition:transform .2s cubic-bezier(.3,1.4,.5,1)}
.head-inner .logo:hover{transform:scale(1.05)}
.head-inner .logo:active{transform:scale(.96)}
.head-inner .logo img{height:26px;width:auto}
.head-nav{display:flex;gap:26px;margin-left:14px}
.head-nav a{position:relative;font-size:14px;color:var(--muted);font-weight:500;transition:color .2s;padding-bottom:3px}
.head-nav a:hover,.head-nav a[aria-current="page"]{color:var(--text-primary)}
.head-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;border-radius:2px;
  background:var(--grad);transition:width .25s cubic-bezier(.2,.6,.2,1)}
.head-nav a:hover::after,.head-nav a[aria-current="page"]::after{width:100%}
.head-cta{margin-left:auto}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:10px;width:42px;height:42px;font-size:18px;color:var(--text-primary);cursor:pointer;align-items:center;justify-content:center;
  transition:background .2s ease,border-color .2s ease,transform .15s ease}
.nav-toggle:hover{background:var(--surface-2);border-color:rgba(48,34,86,.4)}
.nav-toggle:active{transform:scale(.9)}
.mobile-nav{display:none;flex-direction:column;padding:8px clamp(20px,5vw,40px) 18px;gap:2px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.98);backdrop-filter:blur(14px)}
.mobile-nav a{padding:12px 4px;font-size:16px;font-weight:500;border-bottom:1px solid var(--line-2);
  transition:color .2s ease,padding-left .2s ease}
.mobile-nav a:hover{color:var(--purple-text);padding-left:6px}
.mobile-nav .btn{margin-top:12px;text-align:center}
.mobile-nav.open{display:flex}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:12px 22px;border-radius:100px;cursor:pointer;border:1px solid transparent;transition:transform .18s ease,box-shadow .25s ease,background .2s}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 26px -10px rgba(48,34,86,.6)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(48,34,86,.7)}
.btn-primary:active{transform:translateY(0) scale(.96);box-shadow:0 6px 16px -8px rgba(48,34,86,.6);transition-duration:.1s}
.btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--line)}
.btn-ghost:hover{background:var(--surface);border-color:transparent;box-shadow:var(--shadow)}
.btn-ghost:active{transform:scale(.96);transition-duration:.1s}
.btn:focus-visible{outline:2px solid var(--purple);outline-offset:3px}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,9vw,110px) 0 clamp(40px,6vw,64px)}
.hero h1{font-size:clamp(38px,7vw,76px);line-height:1.02;font-weight:600;letter-spacing:-.02em;margin:16px 0}
.hero .lede{font-size:clamp(17px,2vw,22px);color:var(--muted);max-width:660px;font-weight:300}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* ---------- sections & layout ---------- */
section{padding:clamp(40px,7vw,80px) 0}
.section-head{max-width:680px;margin-bottom:clamp(28px,4vw,48px)}
.section-head h2{font-size:clamp(28px,4.5vw,46px);line-height:1.08;font-weight:600;letter-spacing:-.015em;margin:12px 0}
.section-head p{color:var(--muted);font-size:clamp(15px,1.6vw,18px)}
.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:0 12px 34px -24px rgba(40,50,110,.4);
  transition:transform .3s cubic-bezier(.2,.6,.2,1),box-shadow .3s ease,border-color .3s ease}
.card:hover{transform:translateY(-6px);border-color:rgba(48,34,86,.35);box-shadow:var(--shadow)}
.card h3{font-size:19px;font-weight:600;margin-bottom:8px}
.card p{color:var(--muted);font-size:15px}
.card .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(48,34,86,.16),rgba(6,45,81,.10));margin-bottom:16px;font-size:20px;
  transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.card:hover .ic{transform:scale(1.1) rotate(-4deg)}

/* safety section: each card gets a feature-specific treatment applied to the
   photo itself (scan-ring, live pill, blur, grayscale+wash) rather than a
   generic icon or a uniform corner badge — the photo becomes evidence of the
   feature, not decoration next to it */
.card.safety-card{padding:0 0 24px;overflow:hidden}
.safety-card .sc-photo{position:relative;aspect-ratio:4/5;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;margin-bottom:18px}
.safety-card .sc-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.safety-card:hover .sc-photo img{transform:scale(1.06)}
.safety-card h3{padding:0 22px;margin-bottom:8px}
.safety-card p{padding:0 22px}

/* Face ID — a camera-viewfinder scan frame (4 corner brackets) sized to the
   face, with the verified checkmark badge sitting directly on the frame's
   bottom-right corner so it reads as one connected scan result, not a badge
   floating separately over a random photo */
.sc-photo.id-faceid .sc-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:2;transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.safety-card:hover .sc-photo.id-faceid .sc-overlay{transform:scale(1.05)}

/* Live Verification — a verified badge with a soft radar-style pulse ring
   expanding outward, signalling "confirmed in real time" without reading as
   a broadcast/recording indicator */
.sc-live{position:absolute;top:12px;left:12px;z-index:2;width:34px;height:34px;
  border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 22px -8px rgba(48,34,86,.65),0 0 0 3px rgba(255,255,255,.9);
  transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.sc-live svg{width:16px;height:16px;position:relative;z-index:2}
.safety-card:hover .sc-live{transform:scale(1.08)}
.sc-live-pulse{position:absolute;inset:0;border-radius:50%;background:var(--grad);opacity:.55;animation:live-pulse-ring 1.8s ease-out infinite}
@keyframes live-pulse-ring{
  0%{transform:scale(1);opacity:.55}
  100%{transform:scale(2.4);opacity:0}
}

/* Incognito — the photo itself is blurred, a covered-eye icon sits centered */
.sc-photo.id-incognito img{filter:blur(16px) saturate(.85);transform:scale(1.12)}
.safety-card:hover .sc-photo.id-incognito img{transform:scale(1.18)}

/* Block & Report — desaturated + dimmed + a red wash, so the mood reads as a
   consequence rather than a smiling stock photo */
.sc-photo.id-block img{filter:grayscale(1) contrast(1.1) brightness(.36)}
.sc-photo.id-block::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(140,15,15,.4),rgba(10,6,6,.68))}

/* shared centered icon chip used by Incognito + Block & Report */
.sc-center-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:54px;height:54px;border-radius:50%;background:rgba(10,12,24,.5);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.sc-center-icon svg{width:26px;height:26px}
.safety-card:hover .sc-center-icon{transform:translate(-50%,-50%) scale(1.1)}
.sc-center-icon--block{background:rgba(180,30,30,.55)}
.stat{font-family:'Fraunces',serif;font-size:clamp(34px,5vw,52px);font-weight:600;line-height:1}
.stat + p{color:var(--muted);margin-top:6px;font-size:14px}

/* blog cards */
.post{display:flex;flex-direction:column;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 34px -24px rgba(40,50,110,.4);
  transition:transform .2s ease,box-shadow .25s ease}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(48,34,86,.35)}
.post .thumb{aspect-ratio:16/10;background:var(--grad);position:relative;overflow:hidden}
.post .thumb img{transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.post:hover .thumb img{transform:scale(1.06)}
.post .thumb span{position:absolute;inset:auto 0 0 0;padding:14px 18px;color:#fff;font-family:'Fraunces',serif;
  font-size:20px;line-height:1.15;background:linear-gradient(transparent,rgba(10,14,30,.5))}
.post .body{padding:20px}
.post .meta{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--purple-text);font-weight:600}
.post h3{font-size:18px;font-weight:600;margin:8px 0}
.post p{color:var(--muted);font-size:14px}
.post .rd{margin-top:14px;font-size:13px;font-weight:600;color:var(--blue-text);display:inline-flex;align-items:center;gap:4px}
.post .rd .arrow{display:inline-block;transition:transform .25s cubic-bezier(.2,.6,.2,1)}
.post:hover .rd .arrow{transform:translateX(4px)}

/* role rows (careers) */
.role{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin-bottom:12px;
  transition:transform .25s cubic-bezier(.2,.6,.2,1),box-shadow .25s ease,border-color .25s ease}
.role:hover{transform:translateY(-3px);border-color:rgba(48,34,86,.35);box-shadow:0 20px 44px -26px rgba(40,50,110,.5)}
.role h3{font-size:17px;font-weight:600}
.role .tags{color:var(--muted);font-size:13px;margin-top:3px}

/* ---------- prose (about / legal) ---------- */
.prose{max-width:760px}
.prose h2{font-family:'Fraunces',serif;font-size:clamp(22px,3vw,30px);font-weight:600;margin:38px 0 12px}
.prose h3{font-size:18px;font-weight:600;margin:24px 0 8px}
.prose p{color:var(--muted);margin-bottom:14px}
.prose ul{color:var(--muted);margin:0 0 16px 20px}
.prose li{margin-bottom:8px}
.prose a{color:var(--blue-text);text-decoration:underline;text-underline-offset:2px;transition:color .2s ease}
.prose a:hover{color:var(--purple-text)}
.prose strong{color:var(--text-primary)}
/* CTA buttons dropped into article body (e.g. "Request Access" at the end of a
   blog post) must keep their normal button look, not the inline-link treatment
   above -- otherwise the label renders as dark underlined text with poor
   contrast against the gradient fill. */
.prose .btn{text-decoration:none}
.prose .btn-primary{color:#fff}
.prose .btn-primary:hover{color:#fff}
.prose .btn-ghost{color:var(--text-primary)}
.legal-meta{color:var(--dim);font-size:14px;margin-bottom:8px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;padding:13px 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);color:var(--text-primary);font:inherit;font-size:15px;
  transition:border-color .2s ease,box-shadow .2s ease}
.field textarea{min-height:130px;resize:vertical}
.field input:hover,.field textarea:hover,.field select:hover{border-color:rgba(48,34,86,.4)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(48,34,86,.15)}
.contact-side .card{margin-bottom:16px}
.contact-side a{color:var(--blue-text);transition:color .2s ease}
.contact-side a:hover{color:var(--purple-text)}
.form-note{font-size:13px;color:var(--dim);margin-top:10px}
.notice{display:none;margin-top:16px;padding:14px 18px;border-radius:12px;background:rgba(56,224,160,.14);
  border:1px solid rgba(56,224,160,.4);color:#0f7a52;font-size:14px}
.notice.show{display:block}

/* ---------- CTA band ---------- */
.cta-band{background:var(--grad);border-radius:24px;padding:clamp(34px,5vw,60px);color:#fff;text-align:center;margin:clamp(30px,5vw,60px) 0}
.cta-band h2{font-family:'Fraunces',serif;font-size:clamp(26px,4vw,42px);font-weight:600;margin-bottom:12px}
.cta-band p{opacity:.9;max-width:560px;margin:0 auto 22px}
.cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.cta-band .btn-ghost:hover{background:#fff;color:var(--text-primary)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);margin-top:clamp(40px,7vw,90px);padding:clamp(40px,6vw,66px) 0 30px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:34px}
.foot-brand img{height:30px;margin-bottom:16px}
.foot-brand p{color:var(--muted);font-size:14px;max-width:280px}
.fcol h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-primary);margin-bottom:14px}
.fcol a{display:block;color:var(--muted);font-size:14px;padding:5px 0;transition:color .2s ease,padding-left .2s ease}
.fcol a:hover{color:var(--blue-text);padding-left:5px}
.foot-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:44px;padding-top:24px;border-top:1px solid var(--line);color:var(--dim);font-size:13px}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media(max-width:980px){
  .foot-grid{grid-template-columns:1fr 1fr 1fr;gap:28px}
  .foot-brand{grid-column:1 / -1}
  .g-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .head-nav,.head-cta{display:none}
  .nav-toggle{display:flex}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:30px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px}
  .cta-band{border-radius:18px}
}
@media(max-width:440px){
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;gap:6px}
}

/* ===================================================================
   HOMEPAGE COMPONENTS (pure-white landing)
   =================================================================== */
/* soft brand glow used sparingly behind hero/cta only */
.home-hero{position:relative;overflow:hidden;padding:clamp(48px,8vw,96px) 0 clamp(30px,5vw,56px)}
.home-hero::before{content:"";position:absolute;inset:-40% -20% auto -20%;height:120%;z-index:-1;
  background:radial-gradient(700px 420px at 72% 12%,rgba(48,34,86,.10),transparent 60%),
             radial-gradient(620px 420px at 20% 0%,rgba(6,45,81,.08),transparent 60%)}
/* dark-navy variant, same treatment as the .final CTA card, used full-bleed
   behind the cities section instead of the blue/purple gradient */
.section-brand{background:var(--grad);padding:clamp(48px,7vw,80px) 0}
.section-brand .eyebrow{color:rgba(255,255,255,.85)}
.section-brand .section-head h2{color:#fff}
.section-brand .section-head p{color:rgba(255,255,255,.82)}
.section-brand .city-hint{color:rgba(255,255,255,.85)}
.section-brand .ph-tag{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.4)}
.section-brand .city-chip{background:rgba(255,255,255,.95);border-color:transparent;color:var(--text-primary)}
.section-brand .city-chip:hover{box-shadow:0 10px 24px -14px rgba(8,12,32,.45)}
.section-brand .city-chip.live{background:#fff;color:var(--text-primary)}
.section-brand .city-chip.notify-chip.picked{background:rgba(255,255,255,.8)}
.section-brand .city-chip.notify-chip.confirmed{background:#fff}
.section-brand .city-notify-form input{border-color:transparent}
.section-brand .city-notify-form .btn{background:#fff;color:var(--text-primary)}
.section-brand #cityNotifyOk{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff}
.hero-2col{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center}
.home-hero h1{font-family:'Fraunces',Georgia,serif;font-size:clamp(32px,5vw,62px);line-height:1.04;font-weight:600;letter-spacing:-.02em;margin:16px 0}
.home-hero .lede{font-size:clamp(16px,1.8vw,21px);color:var(--muted);max-width:540px;font-weight:300}
.trust-line{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:13px;color:var(--muted)}
.trust-line .dot{width:7px;height:7px;border-radius:50%;background:#38c98a;box-shadow:0 0 8px #38c98a}

/* store badges (hand-built, non-trademarked glyphs — see brand profile "don't reproduce official logos") */
.store-badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.store-badge{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;
  padding:9px 18px 9px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 30px -16px rgba(20,22,40,.55);
  transition:transform .2s cubic-bezier(.2,.6,.2,1),box-shadow .25s ease,border-color .25s ease}
.store-badge:hover{transform:translateY(-3px);box-shadow:0 20px 40px -16px rgba(20,22,40,.65);border-color:rgba(255,255,255,.28)}
.store-badge:active{transform:translateY(-1px) scale(.96);transition-duration:.1s}
.store-badge:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.store-badge svg{width:30px;height:30px;flex:none;display:block}
.store-badge .sb-text{display:flex;flex-direction:column;line-height:1.16}
.store-badge .sb-eyebrow{font-size:10.5px;color:rgba(255,255,255,.72);font-weight:400}
.store-badge .sb-title{font-size:16px;font-weight:600;font-family:'Hanken Grotesk',sans-serif}

/* hero face collage */
.face-cloud{position:relative;height:clamp(360px,44vw,520px)}
.face-cloud .fc{position:absolute;border-radius:24px;overflow:hidden;box-shadow:0 26px 60px -26px rgba(30,40,90,.5),0 0 0 1px rgba(30,40,90,.05);
  background:#eef;animation:floaty 7s ease-in-out infinite}
.face-cloud .fc img{width:100%;height:100%;object-fit:cover;display:block}
.face-cloud .fc.v::after{content:"\2714";position:absolute;right:8px;top:8px;width:22px;height:22px;border-radius:50%;
  background:var(--grad);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(48,34,86,.5)}
.fc1{width:40%;aspect-ratio:3/4;left:2%;top:8%;animation-delay:0s}
.fc2{width:32%;aspect-ratio:3/4;left:46%;top:0;animation-delay:.8s}
.fc3{width:30%;aspect-ratio:3/4;right:0;top:30%;animation-delay:1.6s}
.fc4{width:34%;aspect-ratio:3/4;left:14%;bottom:0;animation-delay:2.2s}
.fc5{width:30%;aspect-ratio:3/4;left:52%;bottom:6%;animation-delay:1.1s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* trust strip */
.strip{border-block:1px solid var(--line);background:var(--surface)}
.strip .wrap{display:flex;flex-wrap:wrap;gap:14px 34px;justify-content:center;align-items:center;padding-block:18px}
.strip span{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--muted);display:flex;align-items:center;gap:8px}
.strip .ic{color:var(--purple-text)}

/* section intro centered */
.center{text-align:center;margin-inline:auto}

/* #how used to open with a text block (eyebrow/headline/sub) that used the
   section's default top padding as breathing room. That text is gone now and
   the video is the very first thing in the section, so drop the top padding
   here specifically — the bottom padding (before the steps grid ends) stays. */
#how{padding-top:0}

/* how-it-works reel — full-bleed, edge to edge, no frame */
.how-reel{position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
  margin-bottom:clamp(28px,4vw,44px)}
.how-reel-video{display:block;width:100%;aspect-ratio:16/9;background:#0a0f1e;object-fit:cover}

/* how-it-works steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;text-align:left;
  transition:transform .3s cubic-bezier(.2,.6,.2,1),box-shadow .3s ease,border-color .3s ease}
.step:hover{transform:translateY(-6px);border-color:rgba(48,34,86,.35);box-shadow:var(--shadow)}
.step .n{font-family:'Fraunces',serif;font-size:15px;font-weight:600;color:#fff;width:34px;height:34px;border-radius:50%;
  background:var(--grad);display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.step:hover .n{transform:scale(1.12) rotate(-6deg)}
.step h3{font-size:19px;font-weight:600;margin-bottom:6px}
.step p{color:var(--muted);font-size:14px}

/* device frame (real phone mock) */
.device{--dw:clamp(200px,22vw,260px);width:var(--dw);aspect-ratio:440/953;position:relative;
  border-radius:calc(var(--dw)*.15);background:linear-gradient(135deg,#e7e9f2,#c9cde0 40%,#eef0f7);
  padding:calc(var(--dw)*.018);box-shadow:0 40px 80px -30px rgba(30,40,90,.5),0 0 0 1px rgba(30,40,90,.06);flex:none;
  transition:transform .4s cubic-bezier(.2,.6,.2,1),box-shadow .4s ease}
.fmedia:hover .device{transform:translateY(-8px) rotate(-1deg);box-shadow:0 54px 96px -30px rgba(30,40,90,.55),0 0 0 1px rgba(30,40,90,.06)}
.device .scr{position:relative;height:100%;width:100%;border-radius:calc(var(--dw)*.13);overflow:hidden;background:#0a0f1e}
.device .scr img{width:100%;height:100%;object-fit:cover;display:block}
.device .isl{position:absolute;top:calc(var(--dw)*.03);left:50%;transform:translateX(-50%);width:30%;height:calc(var(--dw)*.05);background:#000;border-radius:99px;z-index:2}

/* feature rows (alternating) */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,70px);align-items:center;padding:clamp(30px,4vw,44px) 0}
.frow.rev .fmedia{order:2}
.fmedia{display:flex;justify-content:center}
.ftext .tag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--purple-text);font-weight:600}
.ftext h3{font-family:'Fraunces',serif;font-size:clamp(24px,3.4vw,38px);font-weight:600;line-height:1.08;margin:10px 0 12px;letter-spacing:-.015em}
.ftext p{color:var(--muted);font-size:clamp(15px,1.6vw,17px);max-width:460px}
.ftext .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip2{font-size:12px;font-weight:600;color:var(--text-primary);background:var(--surface-2);border:1px solid var(--line);border-radius:100px;padding:7px 14px;
  transition:transform .2s ease,border-color .2s ease,background .2s ease}
.chip2:hover{transform:translateY(-2px);border-color:rgba(48,34,86,.4);background:linear-gradient(140deg,rgba(6,45,81,.08),rgba(48,34,86,.1))}

/* comparison */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin-inline:auto}
.comp-col{border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:var(--surface);
  transition:transform .3s cubic-bezier(.2,.6,.2,1),box-shadow .3s ease}
.comp-col:hover{transform:translateY(-5px)}
.comp-col.win{border-color:transparent;background:linear-gradient(160deg,rgba(6,45,81,.06),rgba(48,34,86,.06));box-shadow:var(--shadow)}
.comp-col.win:hover{box-shadow:0 30px 68px -26px rgba(48,34,86,.55)}
.comp-col h3{font-size:16px;font-weight:700;margin-bottom:16px}
.comp-col.win h3{color:var(--purple-text)}
.comp-col li{list-style:none;display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:14px;padding:9px 0;border-top:1px solid var(--line-2)}
.comp-col li:first-of-type{border-top:none}
.comp-col .mk{flex:none;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;margin-top:1px}
.comp-col .no{background:linear-gradient(150deg,rgba(48,34,86,.16),rgba(6,45,81,.10));color:#062D51}
.comp-col .yes{background:var(--grad);color:#fff}

/* stats */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stat-box .stat{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-box p{color:var(--muted);font-size:13px;margin-top:6px}

/* testimonials */
/* featured story: one larger, photo-led card that carries the section's proof
   moment (a real scene, not just a headshot), with the two supporting quotes
   below at lighter weight -- avoids the interchangeable equal-card-grid look */
.quote-feature{display:grid;grid-template-columns:42% 1fr;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 12px 34px -24px rgba(40,50,110,.4);margin-bottom:22px;
  transition:transform .3s cubic-bezier(.2,.6,.2,1),box-shadow .3s ease,border-color .3s ease}
.quote-feature:hover{transform:translateY(-6px);border-color:rgba(48,34,86,.35);box-shadow:var(--shadow)}
.quote-feature .qf-photo{position:relative;aspect-ratio:1/1;overflow:hidden}
.quote-feature .qf-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.quote-feature:hover .qf-photo img{transform:scale(1.05)}
.quote-feature .qf-body{padding:clamp(26px,4vw,44px);display:flex;flex-direction:column;justify-content:center}
.quote-feature .qf-mark{font-family:'Fraunces',serif;font-size:clamp(38px,5vw,56px);line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:2px}
.quote-feature p{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(19px,2.2vw,26px);line-height:1.4;color:var(--text-primary)}
.quote-feature .who{display:flex;align-items:center;gap:14px;margin-top:24px}
.quote-feature .who img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.quote-feature .who b{font-size:15px;display:block}
.quote-feature .who span{font-size:12.5px;color:var(--muted)}

/* supporting quotes: smaller, lighter weight, no repeated city line -- the
   location is already established by the stats row and the featured story */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 12px 34px -24px rgba(40,50,110,.4);
  transition:transform .3s cubic-bezier(.2,.6,.2,1),box-shadow .3s ease,border-color .3s ease}
.quote:hover{transform:translateY(-6px);border-color:rgba(48,34,86,.35);box-shadow:var(--shadow)}
.quote p{font-size:15px;color:var(--text-primary);line-height:1.55}
.quote .who{display:flex;align-items:center;gap:12px;margin-top:18px}
.quote .who img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.quote .who b{font-size:14px;display:block}
.quote .who span{font-size:12px;color:var(--muted)}
.quote.quote-select{font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;-webkit-appearance:none;appearance:none}
.ph-tag{display:inline-block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border:1px dashed var(--line);border-radius:100px;padding:4px 12px;margin-top:14px}
@media(max-width:700px){
  .quote-feature{grid-template-columns:1fr}
  .quote-feature .qf-photo{aspect-ratio:16/10}
}

/* FAQ accordion */
.faq{max-width:760px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{list-style:none;cursor:pointer;padding:16px 4px;font-weight:600;font-size:17px;display:flex;justify-content:space-between;align-items:center;gap:16px;
  transition:color .2s ease}
.faq summary:hover{color:var(--purple-text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--purple-text);font-weight:400;transition:transform .3s cubic-bezier(.2,.6,.2,1)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);font-size:15px;padding:0 4px 18px;
  animation:faq-in .3s cubic-bezier(.2,.6,.2,1)}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* cities */
.city-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:680px;margin:0 auto}
.city-chip{font-size:14px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:10px 18px;background:var(--surface);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease}
.city-chip:hover{transform:translateY(-2px);border-color:rgba(48,34,86,.35);box-shadow:0 10px 24px -14px rgba(48,34,86,.5)}
.city-chip.live{color:var(--text-primary);border-color:transparent;background:linear-gradient(140deg,rgba(6,45,81,.10),rgba(48,34,86,.10))}
.city-chip.live .g{display:inline-block;width:7px;height:7px;border-radius:50%;background:#38c98a;margin-right:8px;box-shadow:0 0 8px #38c98a}

/* notify chips: two-line pill (city + live waitlist count). Tapping a chip
   only marks it "picked" -- it is NOT a confirmed signup on its own, since
   nothing is captured yet. The checkmark / count bump is reserved for after
   the visitor actually submits an email in the form below, so the UI never
   implies someone will be notified when no contact info was ever taken. */
button.city-chip.notify-chip{display:flex;flex-direction:column;align-items:center;gap:2px;
  font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;line-height:1.2}
.city-chip.notify-chip .cc-name{font-size:14px;font-weight:600;color:var(--text-primary)}
.city-chip.notify-chip .cc-count{font-size:11px;font-weight:500;color:var(--dim)}
.city-chip.notify-chip.picked{border-color:rgba(48,34,86,.4);background:linear-gradient(140deg,rgba(6,45,81,.08),rgba(48,34,86,.08))}
.city-chip.notify-chip.picked .cc-name{color:var(--purple-text)}
.city-chip.notify-chip.confirmed{border-color:transparent;background:linear-gradient(140deg,rgba(6,45,81,.12),rgba(48,34,86,.12))}
.city-chip.notify-chip.confirmed .cc-name{color:var(--purple-text)}
.city-chip.notify-chip.confirmed .cc-name::before{content:"✓ ";font-weight:700}
.city-chip.notify-chip.confirmed .cc-count{color:var(--purple-text)}
.city-hint{text-align:center;color:var(--muted);font-size:13.5px;margin-top:16px}

/* inline email capture: the actual mechanism that gets someone notified --
   only appears once at least one city is picked, and is what turns a picked
   chip into a confirmed one */
.city-notify-form{display:none;gap:10px;max-width:420px;margin:18px auto 0;flex-wrap:wrap;justify-content:center}
.city-notify-form.show{display:flex}
.city-notify-form input{flex:1;min-width:210px;padding:13px 18px;border-radius:100px;border:1px solid var(--line);
  font:inherit;font-size:15px;background:var(--surface);color:var(--text-primary)}
.city-notify-form input:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
#cityNotifyOk{max-width:420px;margin:14px auto 0;text-align:center}

/* final CTA — dark-navy/purple gradient variant */
.final{position:relative;overflow:hidden;border-radius:28px;padding:clamp(40px,6vw,72px);text-align:center;
  background:var(--grad);color:#fff;margin:clamp(30px,5vw,60px) auto}
.final h2{font-family:'Fraunces',serif;font-size:clamp(30px,5vw,52px);font-weight:600;margin-bottom:12px}
.final p{opacity:.92;max-width:520px;margin:0 auto 26px}
.waitlist{display:flex;gap:10px;max-width:460px;margin:0 auto;flex-wrap:wrap}
.waitlist input{flex:1;min-width:210px;padding:15px 18px;border-radius:100px;border:none;font:inherit;font-size:15px;
  transition:box-shadow .2s ease}
.waitlist input:focus{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.55)}
.waitlist .btn{background:#fff;color:var(--text-primary)}
.waitlist .btn:hover{transform:translateY(-2px)}
.waitlist .btn:active{transform:translateY(0) scale(.96)}
.final .fine{font-size:12px;opacity:.8;margin-top:14px}
.final .notice{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff;max-width:460px;margin:14px auto 0}

/* scroll reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

/* features showcase rows: the phone mockup slides in from its outer edge
   (opposite side on reversed rows) with a slight scale-up, instead of the
   generic fade-up, so this section reads as its own distinct moment on scroll */
.frow .fmedia.rv{transform:translateX(-56px) scale(.94);transition-duration:.8s}
.frow.rev .fmedia.rv{transform:translateX(56px) scale(.94)}
.frow .ftext.rv{transform:translateY(30px) scale(.99)}
.frow .fmedia.rv.in,.frow.rev .fmedia.rv.in,.frow .ftext.rv.in{transform:none}
@media(max-width:700px){
  .frow .fmedia.rv,.frow.rev .fmedia.rv{transform:translateY(22px) scale(.97)}
  .frow .fmedia.rv.in,.frow.rev .fmedia.rv.in{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .frow .fmedia.rv,.frow.rev .fmedia.rv,.frow .ftext.rv{transform:none}
  .face-cloud .fc{animation:none}
}

/* ---- homepage responsive ---- */
@media(max-width:900px){
  .hero-2col{grid-template-columns:1fr;gap:34px}
  .face-cloud{height:clamp(320px,80vw,420px);width:100%;max-width:460px;margin-inline:auto}
  .steps,.stats-row{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr 1fr}
  .frow{grid-template-columns:1fr;gap:26px}
  .frow.rev .fmedia{order:0}
  .fmedia{order:0}
  .compare{grid-template-columns:1fr}
}
@media(max-width:560px){
  .steps,.stats-row,.quotes{grid-template-columns:1fr}
  .stats-row{gap:26px}
}
/* ===== collage cards as VYB profiles (+ livelier motion) ===== */
.face-cloud .fc{background:#0d1120}
.face-cloud .fc .face-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.face-cloud .fc .fc-logo{position:absolute;top:9px;left:50%;transform:translateX(-50%);height:12px;width:auto;z-index:3;
  opacity:.96;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.face-cloud .fc::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(rgba(6,9,20,.5),transparent 30%,transparent 55%,rgba(6,9,20,.2))}
.face-cloud .fc .fc-meta{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:16px 12px 11px;
  background:linear-gradient(transparent,rgba(6,9,20,.88) 72%)}
.face-cloud .fc .fc-meta b{display:block;color:#fff;font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(13px,1.4vw,17px);line-height:1;letter-spacing:-.01em}
.face-cloud .fc .fc-meta b i{font-family:'Hanken Grotesk',sans-serif;font-style:normal;font-weight:400;font-size:.78em;color:rgba(255,255,255,.82)}
.face-cloud .fc .fc-meta span{display:block;color:rgba(255,255,255,.72);font-size:clamp(10px,1vw,11.5px);margin-top:3px;font-weight:500}
.face-cloud .fc.v::after{z-index:4}

/* livelier float: gentle bob + slight rotation wobble, unique per card */
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}
  50%{transform:translateY(-14px) rotate(calc(var(--r,0deg) - 1.4deg))}}
.face-cloud .fc{--r:0deg}
.fc1{--r:-3deg;animation-duration:6.6s}
.fc2{--r:2.6deg;animation-duration:8s}
.fc3{--r:3.4deg;animation-duration:7.1s}
.fc4{--r:-2deg;animation-duration:8.6s}
.fc5{--r:2deg;animation-duration:6.9s}
/* keep overlapping card names readable */
.fc3{z-index:5}
.fc1{z-index:4}

/* ===== rotating cards: one card swipes at a time, in a fixed relay (vybes-style) =====
   design: only two slides per card are ever "live" at once - the current one on top
   (.fc-current, z:2) and the next one waiting fully opaque directly underneath
   (.fc-queued, z:1). Every other slide sits fully hidden (opacity:0) so it can never
   show through a stacking-order tie. Driven by JS (see index.html): a single global
   ticker advances exactly one card at a time in fixed order (fc1->fc2->fc3->fc4->fc5),
   toggling these classes instead of relying on CSS keyframe/animation-delay math,
   which proved unreliable across browsers. */
.face-cloud .fc-slide{position:absolute;inset:0;opacity:0;z-index:1;transform:translateX(0) rotate(0deg);transition:transform .8s cubic-bezier(.5,0,.35,1)}
.face-cloud .fc-slide .face-img{position:absolute;inset:0}
.face-cloud .fc-slide.fc-current{opacity:1;z-index:2}
.face-cloud .fc-slide.fc-queued{opacity:1;z-index:1}
.face-cloud .fc-slide.fc-exit{transform:translateX(115%) rotate(10deg)}
.face-cloud .fc-slide.fc-noanim{transition:none}
@media(prefers-reduced-motion:reduce){
  .face-cloud .fc-slide{transition:none;opacity:0;transform:none}
  .face-cloud .fc-slide:first-child{opacity:1}
}