/* DuoFaith homepage, rebuilt.
   Structure from two references: Paired (paired.com) for the hero, the floating
   pill nav, the white sheet that rises over the hero, and the pinned deck of tinted
   cards that changes as you scroll; Streaks (streaksapp.com) for the bottom half —
   short centred statements over rows of devices, a tinted band, and a solid coral
   footer with the App Store badge.
   Palette: white page, the app's coral (Clean.page) as the accent, and highlighter
   stripes in that coral behind the words that matter. */

@font-face{font-family:'Fraunces';src:url('/fonts/fraunces-latin-full-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/fonts/fraunces-latin-wonk-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}

:root{
  color-scheme:light;
  --white:#fff;
  --ink:#3A0D0A;          /* Clean.ink: 15:1 on white */
  --muted:#7A3A33;        /* 8.5:1 on white */
  --coral:#FF7A6B;        /* Clean.page. Shapes, stripes and the footer only: white text on it fails */
  --coral-deep:#C73A2C;   /* Clean.onAccent. Buttons and coral words: 5.2:1 with white */
  --coral-soft:#FFF1EE;   /* hero wash and tinted bands */
  --stripe:#FF9384;       /* the highlighter */
  /* The deck's card tints, all from the coral family so the ink stays above 11:1 */
  --tint-1:#FFE3DD; --tint-2:#FFEBDD; --tint-3:#FCE1E7; --tint-4:#FFE8CF;
  --line:rgba(58,13,10,.1);
  --shadow-sm:0 1px 2px rgba(58,13,10,.08),0 4px 12px -4px rgba(58,13,10,.12);
  --shadow-md:0 2px 4px rgba(58,13,10,.06),0 18px 40px -16px rgba(58,13,10,.28);
  --shadow-lg:0 4px 10px rgba(58,13,10,.08),0 40px 80px -30px rgba(58,13,10,.45);
  --serif:'Fraunces',ui-serif,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:min(1180px,calc(100% - 48px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;line-height:1.08;font-variation-settings:'opsz' 144,'SOFT' 50,'WONK' 0;text-wrap:balance}
p{text-wrap:pretty}
.wrap{width:var(--wrap);margin-inline:auto}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px}
.skip:focus{top:16px}
:focus-visible{outline:3px solid var(--coral-deep);outline-offset:3px;border-radius:6px}
::selection{background:var(--stripe);color:var(--ink)}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- The highlighter stripe ----------
   A coral band across the lower part of the line, drawn left to right when its
   block scrolls into view. box-decoration-break so a phrase that wraps gets a
   stripe on each line instead of one band across the gap. */
.stripe{
  background-image:linear-gradient(100deg,transparent .6%,var(--stripe) 1.6%,var(--coral) 97%,transparent 99%);
  background-repeat:no-repeat;background-position:0 86%;background-size:100% 40%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding-inline:.08em}
.js .stripe{background-size:0% 40%;transition:background-size 1s var(--ease) .25s}
.js .in .stripe,.js .stripe.in{background-size:100% 40%}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;
  background:var(--coral-deep);color:#fff;font-weight:650;font-size:16px;text-decoration:none;border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 4px rgba(58,13,10,.18),0 10px 22px -10px rgba(199,58,44,.7);
  transition:transform .25s var(--spring),box-shadow .25s ease}
.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 6px rgba(58,13,10,.2),0 16px 30px -12px rgba(199,58,44,.8)}
.btn-sm{min-height:44px;padding:0 20px;font-size:15px}
.store-badge{--h:56px;display:inline-flex;align-items:center;gap:calc(var(--h)*.18);height:var(--h);padding:0 calc(var(--h)*.3) 0 calc(var(--h)*.24);
  background:#000;color:#fff;border-radius:calc(var(--h)*.2);text-decoration:none;box-shadow:var(--shadow-md);transition:transform .25s var(--spring)}
.store-badge:hover{transform:translateY(-2px) scale(1.02)}
.store-badge svg{width:calc(var(--h)*.42);height:calc(var(--h)*.5);fill:currentColor}
.store-badge small{display:block;font-size:calc(var(--h)*.2);line-height:1.1}
.store-badge b{display:block;font-size:calc(var(--h)*.42);font-weight:550;line-height:1.1;letter-spacing:-.015em}

/* ---------- Floating pill nav (Paired) ---------- */
.nav{position:fixed;top:16px;left:50%;z-index:100;width:min(1180px,calc(100% - 32px));transform:translateX(-50%);
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 10px 10px 20px;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:999px;transition:box-shadow .3s ease}
.nav.is-scrolled{box-shadow:var(--shadow-md)}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--serif);font-weight:700;font-size:23px;letter-spacing:-.02em}
.logo img{width:34px;height:34px;border-radius:9px;box-shadow:var(--shadow-sm)}
.nav-links{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav-links a{font-size:15px;font-weight:500;text-decoration:none;position:relative}
.nav-links a:after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:3px;border-radius:3px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover:after{transform:scaleX(1)}

/* ---------- Hero (Paired) ---------- */
.hero{position:relative;overflow:hidden;background:var(--coral-soft);padding:150px 0 140px}
/* Coral shapes behind everything: one big soft disc and two tilted stripes. */
.hero:before{content:'';position:absolute;width:760px;height:760px;right:-160px;top:-120px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#FFC9BF,rgba(255,201,191,0) 68%)}
.hero-stripes{position:absolute;inset:0;pointer-events:none}
.hero-stripes span{position:absolute;height:22px;border-radius:22px;background:var(--coral);opacity:.16;transform:rotate(-14deg)}
.hero-stripes span:nth-child(1){width:420px;left:-80px;bottom:120px}
.hero-stripes span:nth-child(2){width:260px;left:38%;top:110px;opacity:.12}
.hero-stripes span:nth-child(3){width:340px;right:-60px;bottom:60px;opacity:.2}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:#fff;box-shadow:var(--shadow-sm);
  font-size:13px;font-weight:650;letter-spacing:.02em;color:var(--coral-deep)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(255,122,107,.25)}
.hero h1{font-size:clamp(52px,6.6vw,92px);margin:22px 0 22px}
.hero-sub{font-size:19px;color:var(--muted);max-width:30em}
.hero-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:34px}
.hero-note{font-size:14px;color:var(--muted)}
.hero-note b{color:var(--ink)}

/* The stage: a phone with app moments floating round it, the way Paired's hero
   hangs its cards off the illustration. */
.stage{position:relative;height:620px}
.stage-blob{position:absolute;left:50%;top:50%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:38% 62% 55% 45%/48% 42% 58% 52%;
  background:linear-gradient(150deg,#FF9A8C,var(--coral) 55%,#F2604F);box-shadow:var(--shadow-lg)}
.phone{--w:270px;position:relative;width:var(--w);padding:calc(var(--w)*.03);border-radius:calc(var(--w)*.17);
  background:linear-gradient(145deg,#4a4a4f,#1d1d20 40%,#3a3a3e);box-shadow:var(--shadow-lg)}
.phone img{width:100%;border-radius:calc(var(--w)*.14)}
.stage .phone{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(4deg)}
.float{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff;border-radius:18px;
  box-shadow:var(--shadow-md);font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap}
.float small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.float .chip{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--tint-1);color:var(--coral-deep)}
.float .chip .icon{width:19px;height:19px}
.f1{left:-2%;top:16%}
.f2{right:-4%;top:8%}
.f3{left:2%;bottom:14%}
.f4{right:0;bottom:22%}
.f2 .chip{background:var(--coral);color:#fff}
.spark{position:absolute;z-index:2;width:26px;height:26px;color:var(--coral)}
.spark.s1{right:16%;top:2%}.spark.s2{left:12%;bottom:4%;width:18px;height:18px}.spark.s3{right:6%;bottom:6%;width:20px;height:20px;color:#fff}

/* Entrance, then a slow drift: each card pops in on a spring, staggered, and from
   then on bobs on its own period so they never move in step. */
@media(prefers-reduced-motion:no-preference){
  .js .hero-copy>*{opacity:0;transform:translateY(18px);animation:rise .8s var(--ease) forwards}
  .js .hero-copy>*:nth-child(2){animation-delay:.08s}.js .hero-copy>*:nth-child(3){animation-delay:.16s}.js .hero-copy>*:nth-child(4){animation-delay:.24s}
  .js .stage-blob{animation:blob-in 1s var(--spring) .1s both,morph 14s ease-in-out 1.2s infinite alternate}
  .js .stage .phone{animation:phone-in 1s var(--spring) .25s both}
  .js .float{animation:pop .7s var(--spring) both,bob 6s ease-in-out infinite}
  .js .f1{animation-delay:.7s,1.4s}.js .f2{animation-delay:.85s,2s;animation-duration:.7s,7s}
  .js .f3{animation-delay:1s,1.7s;animation-duration:.7s,5.5s}.js .f4{animation-delay:1.15s,2.3s;animation-duration:.7s,6.5s}
  .js .spark{animation:twinkle 2.8s ease-in-out infinite}.js .spark.s2{animation-delay:1s}.js .spark.s3{animation-delay:1.8s}
  .js .hero-stripes span{animation:slide 1.2s var(--ease) both}
  .js .hero-stripes span:nth-child(2){animation-delay:.2s}.js .hero-stripes span:nth-child(3){animation-delay:.35s}
}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes blob-in{from{transform:scale(.4) rotate(-20deg);opacity:0}}
@keyframes morph{to{border-radius:58% 42% 40% 60%/42% 60% 40% 58%;transform:rotate(12deg)}}
@keyframes phone-in{from{opacity:0;transform:translate(-50%,-38%) rotate(14deg) scale(.9)}}
@keyframes pop{from{opacity:0;transform:scale(.5) translateY(20px)}}
@keyframes bob{50%{translate:0 -10px}}
@keyframes twinkle{50%{transform:scale(.55) rotate(45deg);opacity:.5}}
@keyframes slide{from{transform:rotate(-14deg) translateX(-60px);opacity:0}}

/* ---------- The white sheet that rises over the hero (Paired) ---------- */
.sheet{position:relative;z-index:2;margin-top:-56px;background:var(--white);border-radius:56px 56px 0 0;padding-top:64px}

/* ---------- Facts row (in place of Paired's awards; nothing invented) ---------- */
.facts{display:flex;justify-content:center;gap:clamp(24px,6vw,90px);flex-wrap:wrap}
.fact{display:flex;align-items:center;gap:14px;font-weight:600;font-size:15px;line-height:1.35}
.fact .chip{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--tint-1);color:var(--coral-deep)}
.fact small{display:block;font-weight:500;color:var(--muted);font-size:13px}

/* ---------- Section heads ---------- */
.head{text-align:center;max-width:780px;margin:0 auto}
.head h2{font-size:clamp(38px,4.6vw,60px)}
.head p{font-size:18px;color:var(--muted);margin-top:18px}
.kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:16px}

/* ---------- The deck (Paired) ----------
   A tall track with a sticky stage. Scroll position picks the card; the tabs light
   up with it and also jump to it. The card in front is flat, the next one peeks out
   behind it tilted, and the ones already seen lift away. */
.how{padding-top:120px}
.tabs{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:34px 0 0}
.tab{display:inline-flex;align-items:center;gap:9px;padding:10px 18px 10px 12px;border-radius:999px;border:2px solid transparent;
  font-weight:650;font-size:15px;transition:border-color .3s,transform .3s var(--spring),box-shadow .3s}
.tab .num{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;font-size:13px;color:var(--coral-deep)}
.tab[data-i="0"]{background:var(--tint-1)}.tab[data-i="1"]{background:var(--tint-2)}.tab[data-i="2"]{background:var(--tint-3)}.tab[data-i="3"]{background:var(--tint-4)}
.tab:hover{transform:translateY(-2px)}
.tab.active{border-color:var(--coral-deep);box-shadow:var(--shadow-sm)}
.deck-track{position:relative;height:340vh;margin-top:10px}
.deck-sticky{position:sticky;top:96px;height:calc(100vh - 110px);min-height:560px;display:flex;flex-direction:column;justify-content:center}
.deck{position:relative;height:min(560px,calc(100vh - 230px));min-height:440px;margin-top:28px}
.card{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:0 72px;border-radius:44px;overflow:hidden;
  transition:transform .75s var(--spring),opacity .5s ease,box-shadow .5s ease;transform-origin:50% 100%;will-change:transform}
.card[data-i="0"]{background:var(--tint-1)}.card[data-i="1"]{background:var(--tint-2)}.card[data-i="2"]{background:var(--tint-3)}.card[data-i="3"]{background:var(--tint-4)}
.card.is-active{z-index:3;transform:none;opacity:1;box-shadow:var(--shadow-md)}
.card.is-next{z-index:2;transform:translate(-14px,22px) rotate(-3.2deg) scale(.985);opacity:1}
.card.is-later{z-index:1;transform:translate(-14px,22px) rotate(-3.2deg) scale(.985);opacity:0}
.card.is-past{z-index:4;transform:translateY(-70px) rotate(2deg) scale(.96);opacity:0;pointer-events:none}
.card.is-next>*,.card.is-later>*{visibility:hidden}
.card h3{font-size:clamp(32px,3.4vw,48px)}
.card p{font-size:18px;color:var(--muted);margin:18px 0 30px;max-width:28em}
.card-art{position:relative;align-self:stretch;display:flex;align-items:flex-end;justify-content:center}
.card-art .phone{--w:250px;transform:translateY(16%) rotate(-5deg);transition:transform .9s var(--spring) .1s}
.card:not(.is-active) .card-art .phone{transform:translateY(40%) rotate(4deg)}
.bubble{position:absolute;z-index:2;padding:12px 16px;border-radius:20px 20px 20px 6px;background:#fff;box-shadow:var(--shadow-md);font-weight:650;font-size:14px;
  display:flex;align-items:center;gap:8px;transition:transform .7s var(--spring) .35s,opacity .4s ease .35s}
.bubble .icon{color:var(--coral-deep)}
.card:not(.is-active) .bubble{transform:scale(.4);opacity:0}
.b-left{left:2%;top:26%}.b-right{right:0;top:12%;border-radius:20px 20px 6px 20px}
.b-coral{background:var(--coral-deep);color:#fff}.b-coral .icon{color:#fff}

/* ---------- Streaks-style bottom half ---------- */
.statement{padding:130px 0 0;text-align:center}
.statement h2{font-size:clamp(34px,4vw,54px);max-width:900px;margin:0 auto}
.statement>.wrap>p{font-size:18px;color:var(--muted);max-width:640px;margin:20px auto 0}
.devices{display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,3vw,40px);margin-top:64px;padding-bottom:20px}
.devices .phone{--w:clamp(150px,19vw,240px)}
.devices figure:nth-child(2) .phone{transform:translateY(-34px)}
.devices figure{margin:0;text-align:center}
.devices figcaption{margin-top:18px;font-size:14px;font-weight:600;color:var(--muted)}
.rule{border:0;border-top:1px solid var(--line);width:var(--wrap);margin:110px auto 0}
.band{margin-top:120px;padding:110px 0 130px;background:var(--coral-soft);position:relative;overflow:hidden}
.band:before{content:'';position:absolute;width:520px;height:26px;border-radius:26px;background:var(--coral);opacity:.15;right:-120px;top:60px;transform:rotate(-14deg)}
.band .tag{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;padding:7px 14px;border-radius:999px;background:#fff;color:var(--coral-deep);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;box-shadow:var(--shadow-sm)}
.band .tag .icon{width:16px;height:16px}
.band .statement{padding-top:0}
.pairs{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:980px;margin:60px auto 0;text-align:left}
.pairs li{list-style:none;background:#fff;border-radius:24px;padding:26px;box-shadow:var(--shadow-sm)}
.pairs b{display:block;font-family:var(--serif);font-size:22px;font-weight:600;margin:10px 0 6px;letter-spacing:-.01em}
.pairs span{font-size:15px;color:var(--muted)}
.pairs .n{font-size:13px;font-weight:700;color:var(--coral-deep)}
.pairs-wrap{padding:0}

/* ---------- FAQ ---------- */
.faq{padding:130px 0 120px}
.faq-list{max-width:820px;margin:50px auto 0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 4px;list-style:none;cursor:pointer;font-size:19px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq .plus{position:relative;flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--tint-1);transition:background .3s,transform .4s var(--spring)}
.faq .plus:before,.faq .plus:after{content:'';position:absolute;left:50%;top:50%;width:14px;height:2.5px;margin:-1.25px 0 0 -7px;border-radius:2px;background:var(--coral-deep);transition:transform .4s var(--spring),background .3s}
.faq .plus:after{transform:rotate(90deg)}
.faq details[open] .plus{background:var(--coral-deep);transform:rotate(180deg)}
.faq details[open] .plus:before,.faq details[open] .plus:after{background:#fff}
.faq details[open] .plus:after{transform:rotate(0)}
.faq details p{padding:0 60px 28px 4px;color:var(--muted);font-size:17px}
.faq-foot{text-align:center;margin-top:40px;color:var(--muted)}
.faq-foot a{color:var(--coral-deep);font-weight:650}

/* ---------- Coral footer (Streaks) ---------- */
.footer{background:var(--coral);color:var(--ink);text-align:center;padding:90px 0 50px;position:relative;overflow:hidden}
.footer:before,.footer:after{content:'';position:absolute;height:30px;border-radius:30px;background:#fff;opacity:.18;transform:rotate(-14deg)}
.footer:before{width:460px;left:-120px;top:70px}.footer:after{width:380px;right:-90px;bottom:120px}
.footer h2{font-size:clamp(40px,5vw,66px);position:relative}
.footer .lead{font-size:18px;margin:16px auto 34px;max-width:32em}
.footer .store-badge{box-shadow:0 4px 10px rgba(58,13,10,.25),0 20px 40px -18px rgba(58,13,10,.6)}
.footer .note{font-size:14px;margin-top:16px}
.foot-rule{border:0;border-top:1px solid rgba(58,13,10,.2);margin:70px 0 30px}
.foot-links{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;font-size:15px}
.foot-links a{text-underline-offset:4px}
.foot-small{font-size:13px;margin-top:18px}

/* ---------- Scroll reveal ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .devices.reveal .phone{transform:translateY(60px);transition:transform 1s var(--spring)}
.js .devices.reveal.in figure:nth-child(1) .phone{transform:none;transition-delay:.05s}
.js .devices.reveal.in figure:nth-child(2) .phone{transform:translateY(-34px);transition-delay:.15s}
.js .devices.reveal.in figure:nth-child(3) .phone{transform:none;transition-delay:.25s}

/* ---------- Sticky download bar, phones only ---------- */
.mobile-bar{display:none}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-sub{margin-inline:auto}
  .hero-cta{justify-content:center}
  .stage{height:560px;max-width:520px;margin:10px auto 0;width:100%}
  .card{padding:0 40px;gap:20px}
}
@media(max-width:800px){
  .nav-links{display:none}
  .hero{padding:120px 0 110px}
  .hero-sub{font-size:17px}
  .sheet{border-radius:36px 36px 0 0;margin-top:-40px;padding-top:48px}
  .facts{flex-direction:column;align-items:flex-start;max-width:320px;margin:0 auto;gap:18px}
  /* No pinning on phones: the cards become a plain stack you scroll through. */
  .tabs{display:none}
  .deck-track{height:auto}
  .deck-sticky{position:static;height:auto;min-height:0;display:block}
  .deck{height:auto;min-height:0;display:grid;gap:22px}
  .card,.card.is-next,.card.is-later,.card.is-past{position:relative;inset:auto;transform:none;opacity:1;grid-template-columns:1fr;padding:40px 26px 0;border-radius:32px;text-align:center;pointer-events:auto}
  .card>*,.card.is-next>*,.card.is-later>*{visibility:visible}
  .card p{margin-inline:auto}
  /* The top of the screen is the part that says what it is, so the phone sits at
     the top of its slot and the card cuts it off lower down. */
  .card-art{height:340px;overflow:hidden;align-items:flex-start;padding-top:18px}
  .card-art .phone,.card:not(.is-active) .card-art .phone{--w:220px;transform:rotate(-4deg)}
  .b-left{left:0;top:auto;bottom:40px}.b-right{right:0;top:auto;bottom:60px}
  .card:not(.is-active) .bubble{transform:none;opacity:1}
  .devices figure:nth-child(2) .phone,.js .devices.reveal.in figure:nth-child(2) .phone{transform:none}
  .devices{gap:10px}
  .devices figcaption{font-size:12px}
  .pairs{grid-template-columns:1fr}
  .faq summary{font-size:17px}
  .faq details p{padding-right:10px}
  .mobile-bar:not([hidden]){position:fixed;left:12px;right:12px;bottom:12px;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 10px 10px 18px;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-md)}
  .mobile-bar span{font-size:13px;line-height:1.3;color:var(--muted)}
  .mobile-bar b{display:block;color:var(--ink);font-size:15px}
  .footer{padding-bottom:110px}
}
@media(max-width:560px){
  .wrap{width:calc(100% - 32px)}
  .nav .btn-sm{padding:0 16px;font-size:14px}
  .hero h1{font-size:min(14vw,60px)}
  .stage{height:470px}
  .stage .phone{--w:210px}
  .stage-blob{width:300px;height:300px;margin:-150px 0 0 -150px}
  .float{padding:9px 12px;font-size:12px;border-radius:14px}
  .float .chip{width:30px;height:30px;border-radius:10px}
  .f1{left:0;top:10%}.f2{right:0;top:2%}.f3{left:0;bottom:12%}.f4{right:0;bottom:24%}
  .devices figure:nth-child(3){display:none}
  .devices .phone{--w:42vw}
  .faq details p{padding-right:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .js .stripe{background-size:100% 40%}
}