:root{
  --blue:#63BAF2;        /* MyRyde logo blue */
  --blue-deep:#1977B5;   /* richer ocean accent for depth & contrast */
  --blue-soft:#99D5F6;   /* logo speed lines */
  --blue-200:#CFEAFB;
  --blue-100:#E6F4FD;
  --blue-50:#F4FAFE;
  --white:#FFFFFF;
  --ink:#0F2C40;         /* deep coastal navy for crisp typography */
  --ink-soft:#1D435E;
  --muted:#567084;
  --link:#1668A2;
  --line:rgba(15,44,64,.09);
  --card-shadow:0 20px 45px -24px rgba(20,65,102,.18), 0 2px 6px -1px rgba(20,65,102,.05);
  --glow:0 18px 38px -14px rgba(56,158,224,.52);
  --display:"Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-sm:12px; --r-md:20px; --r-lg:30px;
  --wrap:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:1.0625rem;line-height:1.62;color:var(--ink);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:8px}
.wrap{width:min(100% - 2.5rem, var(--wrap));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
h1,h2,h3{font-family:var(--display);line-height:1.03;letter-spacing:-.025em;margin:0;color:var(--ink)}
h2{font-size:clamp(2.15rem,4.6vw,3.55rem);font-weight:800}
h3{font-size:1.32rem;font-weight:700;letter-spacing:-.015em}
p{margin:0}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease), transform .75s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.5rem;border-radius:999px;font-weight:600;text-decoration:none;border:0;cursor:pointer;transition:transform .28s var(--ease), background .28s, box-shadow .28s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(180deg,#74C4F6 0%,var(--blue) 100%);color:var(--ink);box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.65)}
.btn-primary:hover{background:linear-gradient(180deg,#82CBF8 0%,#6EC0F4 100%);transform:translateY(-2px);box-shadow:0 24px 46px -16px rgba(45,145,212,.65), inset 0 1px 0 rgba(255,255,255,.8)}
.btn-outline{background:rgba(255,255,255,.85);backdrop-filter:blur(8px);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--blue-200), 0 8px 20px -14px rgba(15,44,64,.18)}
.btn-outline:hover{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--blue), 0 12px 26px -14px rgba(45,145,212,.32);transform:translateY(-2px)}
.btn svg{width:21px;height:21px;flex:none}

/* ---------- Nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .35s, box-shadow .35s, padding .35s;padding:1.1rem 0}
.nav.scrolled{background:rgba(255,255,255,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 1px 0 var(--line), 0 10px 30px -20px rgba(15,44,64,.12);padding:.65rem 0}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.72rem;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:800;font-size:1.38rem;letter-spacing:-.025em}
.brand-mark{width:44px;height:44px;border-radius:13px;background:var(--white);display:grid;place-items:center;overflow:hidden;box-shadow:0 8px 20px -8px rgba(66,150,210,.55), inset 0 0 0 1px var(--blue-100);flex:none;transition:transform .25s var(--ease)}
.brand:hover .brand-mark{transform:scale(1.04) rotate(-2deg)}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none;margin:0;padding:0}
.nav-links a:not(.btn){color:var(--muted);text-decoration:none;font-weight:500;font-size:.98rem;transition:color .2s;position:relative;padding:.25rem 0}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--blue);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.nav-links a:not(.btn):hover{color:var(--ink)}
.nav-links a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left}
.nav-links .btn{padding:.7rem 1.2rem;color:var(--ink)}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;border-radius:12px;cursor:pointer;position:relative}
.menu-btn span{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease), opacity .2s}
.menu-btn span:nth-child(1){top:15px}.menu-btn span:nth-child(2){top:21px}.menu-btn span:nth-child(3){top:27px}
.menu-open .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){opacity:0}
.menu-open .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;background:
    radial-gradient(58% 68% at 78% 36%, rgba(153,213,246,.52) 0%, rgba(207,234,251,0) 72%),
    radial-gradient(48% 52% at 12% 96%, var(--blue-100) 0%, rgba(230,244,253,0) 70%),
    linear-gradient(180deg, var(--white) 0%, var(--blue-50) 100%);
  padding:clamp(7.2rem,12vw,9.2rem) 0 clamp(3.5rem,6vw,5.2rem);overflow:hidden;isolation:isolate}
.hero-road{position:absolute;inset:0;z-index:-1;pointer-events:none;width:100%;height:100%}
.hero-grid{display:grid;grid-template-columns:1.02fr 1.08fr;align-items:center;gap:2.2rem}
.hero-copy{max-width:36.5rem}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;padding:.42rem .95rem .42rem .7rem;border-radius:999px;background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px var(--blue-200), 0 8px 20px -12px rgba(25,119,181,.28);font-size:.86rem;font-weight:600;color:var(--ink-soft);margin-bottom:1.25rem;backdrop-filter:blur(8px)}
.eyebrow-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(99,186,242,.28)}
.hero h1{font-size:clamp(2.85rem,6.1vw,5.35rem);font-weight:800;letter-spacing:-.035em;line-height:.95;margin-bottom:1.35rem}
.hero h1 .accent{background:linear-gradient(125deg,var(--ink) 15%,var(--blue-deep) 60%,var(--blue) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-lede{font-size:clamp(1.06rem,1.55vw,1.22rem);color:var(--muted);max-width:32rem;margin-bottom:2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem}
.hero-perks{display:flex;flex-wrap:wrap;gap:.55rem 1.25rem;margin-top:1.9rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.9rem;font-weight:500;color:var(--muted)}
.hero-perks span{display:inline-flex;align-items:center;gap:.45rem}
.hero-perks svg{width:17px;height:17px;color:var(--blue-deep);flex:none}

.intro > *{opacity:0;transform:translateY(18px);animation:rise .85s var(--ease) forwards}
.intro > *:nth-child(1){animation-delay:.08s}
.intro > *:nth-child(2){animation-delay:.18s}
.intro > *:nth-child(3){animation-delay:.28s}
.intro > *:nth-child(4){animation-delay:.38s}
.intro > *:nth-child(5){animation-delay:.48s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- 3D phone carousel ---------- */
.showcase{position:relative;display:flex;flex-direction:column;align-items:center}
.showcase::before{content:"";position:absolute;top:10%;width:72%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(99,186,242,.28) 0%,rgba(153,213,246,.08) 52%,transparent 72%);filter:blur(18px);z-index:-1;pointer-events:none}
.stage{--pw:clamp(188px,20.5vw,258px);position:relative;width:100%;height:calc(var(--pw) * 2.2);perspective:1400px;perspective-origin:50% 42%;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline:none}
.stage.dragging{cursor:grabbing}
.stage:focus-visible{outline:3px solid var(--link);outline-offset:8px;border-radius:24px}
.rig{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.slide{position:absolute;left:50%;top:4%;width:var(--pw);margin-left:calc(var(--pw) / -2);transform-style:preserve-3d;will-change:transform,opacity;transition:transform .85s var(--ease), opacity .85s var(--ease), filter .85s var(--ease)}
.stage.dragging .slide{transition:none}
.float{transform-style:preserve-3d;animation:float 6s ease-in-out infinite}
.slide:nth-child(2) .float{animation-delay:-1.5s}
.slide:nth-child(3) .float{animation-delay:-3s}
.slide:nth-child(4) .float{animation-delay:-4.5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* sleek silver-blue titanium phone */
.phone{position:relative;aspect-ratio:9/19.3;border-radius:calc(var(--pw) * .172);padding:calc(var(--pw) * .034);
  background:linear-gradient(150deg,#FFFFFF 0%,#DFECF5 28%,#B4C9D8 55%,#EDF5FA 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.95),
    inset 0 0 0 calc(var(--pw) * .018) #15232E,
    0 46px 76px -32px rgba(28,94,145,.46),
    0 18px 36px -22px rgba(15,44,64,.34)}
.phone::before,.phone::after{content:"";position:absolute;width:3px;border-radius:2px;background:linear-gradient(#E3EDF4,#A9BCCA)}
.phone::before{left:-2px;top:22%;height:13%;box-shadow:0 calc(var(--pw) * .2) 0 #BFD0DC}
.phone::after{right:-2px;top:28%;height:17%}
.screen{position:relative;height:100%;border-radius:calc(var(--pw) * .138);overflow:hidden;background:#0D161D}
.screen img{width:100%;height:100%;object-fit:cover;object-position:top center;pointer-events:none;-webkit-user-drag:none}
.island{position:absolute;top:calc(var(--pw) * .028);left:50%;transform:translateX(-50%);width:29%;height:calc(var(--pw) * .078);border-radius:999px;background:#0A1117;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);z-index:2}
.island::after{content:"";position:absolute;right:18%;top:50%;width:calc(var(--pw) * .026);height:calc(var(--pw) * .026);transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,#1e3a5f 30%,#090d12 70%)}
.glare{position:absolute;inset:0;z-index:3;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.05) 28%,transparent 46%);pointer-events:none;transition:opacity .85s}
.fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:1.2rem;background:linear-gradient(160deg,var(--blue-100),var(--white));color:var(--muted);font-size:.85rem}
.fallback strong{display:block;font-family:var(--display);font-size:1.4rem;color:var(--blue-deep);margin-bottom:.3rem}
.shadow{position:absolute;left:12%;right:12%;bottom:calc(var(--pw) * -.15);height:calc(var(--pw) * .12);border-radius:50%;background:radial-gradient(closest-side,rgba(28,94,145,.34),transparent);filter:blur(6px);transform:translateZ(-40px)}

.caption{min-height:5.4rem;text-align:center;margin-top:.55rem;max-width:24rem;padding:.65rem 1.15rem;border-radius:var(--r-md);background:rgba(255,255,255,.68);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(207,234,251,.8), 0 10px 28px -18px rgba(15,44,64,.18)}
.caption h3{margin-bottom:.25rem;font-size:1.18rem;transition:opacity .28s, transform .28s}
.caption p{color:var(--muted);font-size:.94rem;line-height:1.48;transition:opacity .28s, transform .28s}
.caption.swap h3,.caption.swap p{opacity:0;transform:translateY(4px)}
.controls{display:flex;align-items:center;gap:1rem;margin-top:.9rem}
.arrow{width:46px;height:46px;border-radius:50%;border:0;background:var(--white);box-shadow:0 8px 20px -10px rgba(40,110,165,.45), inset 0 0 0 1.5px var(--blue-100);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .2s, transform .2s, box-shadow .2s}
.arrow:hover{box-shadow:0 12px 24px -10px rgba(40,110,165,.55), inset 0 0 0 1.5px var(--blue);transform:translateY(-1px)}
.arrow:active{transform:scale(.92)}
.arrow svg{width:20px;height:20px}
.dots{display:flex;gap:.48rem;padding:.45rem .65rem;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px var(--blue-100)}
.dot{width:9px;height:9px;border-radius:999px;border:0;padding:0;background:var(--blue-200);cursor:pointer;transition:width .42s var(--ease), background .3s}
.dot[aria-current="true"]{width:28px;background:var(--blue)}
.drag-hint{margin-top:.65rem;font-size:.8rem;color:#7D95A6;letter-spacing:.01em}

/* ---------- Road divider ---------- */
.road{height:14px;background:linear-gradient(90deg,var(--blue-soft),var(--blue),var(--blue-soft));position:relative;overflow:hidden}
.road::after{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:repeating-linear-gradient(90deg,#fff 0 38px,transparent 38px 70px)}

/* ---------- Sections ---------- */
section{scroll-margin-top:74px}
.section{padding:clamp(4.5rem,9vw,7.5rem) 0}
.section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1.5rem 3rem;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.section-head p{max-width:31rem;color:var(--muted);font-size:1.08rem}
.section-tag{display:inline-block;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--blue-deep);background:var(--blue-100);padding:.3rem .75rem;border-radius:999px;margin-bottom:.75rem}

/* How it works */
.how{background:linear-gradient(180deg,var(--blue-50) 0%,#ECF7FE 100%)}
.switch{display:inline-flex;padding:5px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--blue-100), 0 10px 24px -16px rgba(15,44,64,.18);position:relative}
.switch button{position:relative;z-index:1;border:0;background:none;padding:.72rem 1.4rem;border-radius:999px;font-weight:600;cursor:pointer;color:var(--muted);transition:color .3s}
.switch button[aria-selected="true"]{color:var(--ink)}
.switch .pill{position:absolute;top:5px;bottom:5px;left:5px;border-radius:999px;background:linear-gradient(180deg,#77C6F7 0%,var(--blue) 100%);box-shadow:0 8px 18px -10px rgba(66,150,210,.75);transition:transform .45s var(--ease), width .45s var(--ease)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.5vw,2rem)}
.step{position:relative;padding:2.1rem 1.9rem 2.3rem;background:var(--white);border-radius:var(--r-lg);box-shadow:var(--card-shadow), inset 0 0 0 1px rgba(207,234,251,.75);transition:opacity .32s, transform .42s var(--ease), box-shadow .32s}
.step:hover{transform:translateY(-4px);box-shadow:0 26px 50px -24px rgba(25,119,181,.24), inset 0 0 0 1.5px var(--blue-200)}
.steps.swap .step{opacity:0;transform:translateY(10px)}
.step-num{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:18px;background:linear-gradient(145deg,var(--blue-100),var(--blue-50));box-shadow:inset 0 0 0 1px var(--blue-200);color:var(--blue-deep);font-family:var(--display);font-weight:800;font-size:1.65rem;line-height:1;margin-bottom:1.4rem}
.step h3{margin-bottom:.55rem}
.step p{color:var(--muted)}
.step:not(:last-child)::after{content:"";position:absolute;top:3.6rem;right:calc(-1 * clamp(1.1rem,2.5vw,2rem));width:clamp(1.1rem,2.5vw,2rem);height:3px;background:repeating-linear-gradient(90deg,var(--blue) 0 6px,transparent 6px 10px);z-index:2}

/* Why */
.why-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
.why-intro{position:sticky;top:6.5rem}
.why-intro p{margin-top:1.2rem;color:var(--muted);font-size:1.1rem;max-width:26rem}
.why-card-note{margin-top:1.8rem;padding:1.15rem 1.3rem;border-radius:var(--r-md);background:var(--blue-50);box-shadow:inset 0 0 0 1px var(--blue-200);display:flex;align-items:center;gap:.9rem;font-size:.94rem;color:var(--ink-soft);max-width:25rem}
.why-card-note svg{width:24px;height:24px;color:var(--blue-deep);flex:none}
.why-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.why-list li{display:grid;grid-template-columns:58px 1fr;gap:1.3rem;padding:1.55rem 1.6rem;border-radius:var(--r-md);background:var(--white);box-shadow:0 12px 32px -22px rgba(15,44,64,.14), inset 0 0 0 1px var(--blue-100);transition:transform .3s var(--ease), box-shadow .3s}
.why-list li:hover{transform:translateY(-2px);box-shadow:0 18px 38px -20px rgba(25,119,181,.22), inset 0 0 0 1.5px var(--blue-200)}
.why-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,var(--blue-100),var(--blue-50));box-shadow:inset 0 0 0 1px var(--blue-200);color:var(--blue-deep)}
.why-icon svg{width:26px;height:26px}
.why-list h3{margin-bottom:.3rem}
.why-list p{color:var(--muted)}

/* Earn calculator */
.earn{background:linear-gradient(180deg,var(--blue-100) 0%,var(--blue-50) 100%);position:relative;overflow:hidden}
.calc{display:grid;grid-template-columns:1.12fr .88fr;border-radius:var(--r-lg);overflow:hidden;background:var(--white);box-shadow:0 32px 64px -36px rgba(20,75,120,.42), inset 0 0 0 1px var(--blue-200)}
.calc-inputs{padding:clamp(1.8rem,4vw,2.9rem);display:grid;gap:2rem}
.field-label{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-weight:600;margin-bottom:.8rem}
.field-label output{font-family:var(--display);font-size:1.38rem;font-weight:800;color:var(--blue-deep)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{border:0;cursor:pointer;padding:.62rem 1.05rem;border-radius:999px;background:var(--blue-50);box-shadow:inset 0 0 0 1.5px var(--blue-100);color:var(--ink);font-weight:500;transition:background .25s, box-shadow .25s, transform .2s}
.chip:hover{box-shadow:inset 0 0 0 1.5px var(--blue-soft);transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--blue);box-shadow:0 8px 18px -10px rgba(66,150,210,.7);font-weight:600}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;--fill:50%}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--blue) var(--fill),var(--blue-100) var(--fill))}
input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--blue) var(--fill),var(--blue-100) var(--fill))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;margin-top:-9px;box-shadow:0 0 0 5px rgba(99,186,242,.35),0 4px 10px rgba(40,110,165,.35);transition:transform .2s}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(99,186,242,.35),0 4px 10px rgba(40,110,165,.35)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
.range-ends{display:flex;justify-content:space-between;font-size:.82rem;color:#8AA0B0;margin-top:.25rem}
.calc-result{padding:clamp(1.8rem,4vw,2.9rem);background:linear-gradient(155deg,#5AB4F0 0%,var(--blue-soft) 100%);color:var(--ink);display:flex;flex-direction:column;justify-content:space-between;gap:2rem;position:relative;overflow:hidden}
.calc-result .road-lines{position:absolute;right:-30px;top:0;bottom:0;width:120px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.35) 0 34px,transparent 34px 60px);transform:skewX(-8deg);pointer-events:none}
.result-label{font-weight:600;font-size:1.02rem;position:relative;display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.45);padding:.3rem .8rem;border-radius:999px}
.result-big{font-family:var(--display);font-weight:800;font-size:clamp(2.8rem,5.8vw,4.5rem);line-height:.95;letter-spacing:-.035em;margin:.65rem 0 .5rem;font-variant-numeric:tabular-nums;position:relative}
.result-usd{font-weight:600;opacity:.86;position:relative;font-size:1.08rem}
.result-foot{font-size:.88rem;line-height:1.5;opacity:.86;max-width:23rem;position:relative}
.calc-result .btn{align-self:flex-start;background:var(--white);color:var(--ink);box-shadow:0 14px 28px -14px rgba(15,44,64,.45);position:relative}
.calc-result .btn:hover{background:var(--white);transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(15,44,64,.55)}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,6vw,5.5rem)}
.faq-grid .section-head{display:block}
.faq-grid .section-head p{margin-top:1.1rem}
.faq-list details{border-top:1px solid var(--line);transition:background .25s}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.4rem .4rem;font-family:var(--display);font-weight:700;font-size:clamp(1.12rem,1.8vw,1.28rem);letter-spacing:-.01em;transition:color .2s}
.faq-list summary:hover{color:var(--blue-deep)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list .plus{width:36px;height:36px;border-radius:50%;flex:none;background:var(--blue-100);position:relative;transition:background .3s, transform .45s var(--ease)}
.faq-list .plus::before,.faq-list .plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:var(--ink);border-radius:2px;transition:transform .45s var(--ease)}
.faq-list .plus::after{transform:rotate(90deg)}
.faq-list details[open] .plus{background:var(--blue);transform:rotate(180deg)}
.faq-list details[open] .plus::after{transform:rotate(0)}
.faq-body{overflow:hidden;transition:height .45s var(--ease)}
.faq-body p{padding:0 3.5rem 1.55rem .4rem;color:var(--muted);max-width:42rem}
.faq-body a,.section-head p a{color:var(--link);text-decoration-color:var(--blue-soft);text-decoration-thickness:2px;text-underline-offset:3px}

/* Get the app + contact */
.get{background:var(--blue-50);padding:clamp(2.4rem,4.5vw,3.8rem) 0;scroll-margin-top:64px}
.get-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.6vw,1.8rem);align-items:stretch}
.panel{border-radius:var(--r-lg);padding:clamp(1.6rem,3vw,2.25rem)}
.panel-app{background:linear-gradient(150deg,var(--blue-soft) 0%,var(--blue) 100%);box-shadow:0 28px 54px -32px rgba(25,119,181,.5);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;gap:1.35rem;min-height:23rem}
.panel-app h2{font-size:clamp(1.9rem,3.3vw,2.65rem);line-height:1.02}
.panel-app p{color:var(--ink);opacity:.88;margin-top:.65rem;max-width:25rem}
.store-btns{display:flex;flex-wrap:wrap;gap:.75rem;position:relative;z-index:2;margin-top:.15rem}
.store{display:flex;align-items:center;gap:.8rem;padding:.78rem 1.25rem .78rem 1rem;border-radius:16px;background:var(--white);color:var(--ink);text-decoration:none;box-shadow:0 14px 28px -16px rgba(15,44,64,.48);transition:transform .25s var(--ease), box-shadow .25s}
.store:hover{transform:translateY(-3px);box-shadow:0 20px 34px -16px rgba(15,44,64,.58)}
.store svg{width:26px;height:26px;color:var(--blue-deep)}
.store small{display:block;font-size:.72rem;line-height:1.1;color:var(--muted)}
.store b{display:block;font-family:var(--display);font-size:1.12rem;line-height:1.1}
.panel-app .mini-phone{position:absolute;right:-18px;bottom:-135px;width:205px;transform:rotate(-12deg);--pw:205px;transition:transform .5s var(--ease);z-index:1}
.panel-app:hover .mini-phone{transform:rotate(-9deg) translateY(-8px)}
.panel-app .panel-text{position:relative;z-index:2;max-width:100%}
.panel-form{background:var(--white);box-shadow:var(--card-shadow), inset 0 0 0 1.5px var(--blue-100)}
.panel-form h2{font-size:clamp(1.75rem,3.2vw,2.35rem);margin-bottom:.35rem}
.panel-form > p{color:var(--muted);margin-bottom:1rem;font-size:.98rem}
.emails{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:1.15rem}
.emails a{display:block;text-decoration:none;padding:.7rem .9rem;border-radius:var(--r-sm);background:var(--blue-50);box-shadow:inset 0 0 0 1.5px var(--blue-100);transition:box-shadow .2s, background .2s;min-width:0}
.emails a:hover{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--blue)}
.emails span{display:block;font-size:.78rem;color:var(--muted)}
.emails b{display:block;font-weight:600;font-size:.95rem;overflow-wrap:anywhere}
.form-privacy{font-size:.84rem;color:var(--muted)}
.form-privacy a{color:var(--link);text-underline-offset:3px}
.form{display:grid;gap:.8rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.form label{display:block;font-weight:600;font-size:.88rem;margin-bottom:.3rem}
.form input,.form select,.form textarea{width:100%;padding:.72rem .9rem;border-radius:var(--r-sm);border:1.5px solid var(--blue-100);background:var(--blue-50);transition:border-color .2s, background .2s, box-shadow .2s;font-size:.96rem}
.form textarea{min-height:92px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(99,186,242,.2)}
.form .hp{position:absolute;left:-9999px}
.alert{padding:1rem 1.2rem;border-radius:var(--r-sm);margin-bottom:1.2rem;font-weight:500}
.alert ul{margin:.3rem 0 0;padding-left:1.2rem;font-weight:400}
.alert-ok{background:#E2F6EE;color:#12624A}
.alert-err{background:#FDECEA;color:#8A2317}

/* Footer */
.footer{background:var(--white);border-top:1px solid var(--blue-100);color:var(--muted);padding:3rem 0 calc(2.5rem + env(safe-area-inset-bottom));font-size:.95rem}
.footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem}
.footer nav{display:flex;gap:1.6rem;flex-wrap:wrap}
.footer a{text-decoration:none;transition:color .2s}
.footer nav a:hover{color:var(--link)}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-copy{margin-inline:auto}
  .hero-lede{margin-inline:auto}
  .hero-actions,.hero-perks{justify-content:center}
  .stage{--pw:clamp(175px,38vw,238px)}
  .why-grid,.faq-grid,.calc,.get-grid{grid-template-columns:1fr}
  .why-intro{position:static}
  .steps{grid-template-columns:1fr}
  .step:not(:last-child)::after{top:auto;bottom:calc(-1 * clamp(1.1rem,2.5vw,2rem));left:3.5rem;right:auto;width:3px;height:clamp(1.1rem,2.5vw,2rem);background:repeating-linear-gradient(180deg,var(--blue) 0 6px,transparent 6px 10px)}
  .panel-app{min-height:26rem}
}
@media (max-width: 760px){
  .menu-btn{display:block}
  .nav-links{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:1.8rem;background:linear-gradient(180deg,var(--white),var(--blue-100));opacity:0;visibility:hidden;transition:opacity .35s, visibility .35s}
  .nav-links a:not(.btn){font-family:var(--display);font-size:1.9rem;font-weight:700;color:var(--ink)}
  .nav-links .btn{font-size:1.1rem;font-family:var(--body);padding:1rem 1.6rem}
  .menu-open .nav-links{opacity:1;visibility:visible}
  .brand,.menu-btn{position:relative;z-index:2}
  .form-row,.emails{grid-template-columns:1fr}
  .panel-app .panel-text{max-width:100%}
  .panel-app .mini-phone{width:170px;--pw:170px;right:-30px;bottom:-150px;opacity:.6}
  .faq-body p{padding-right:0}
}
@media (max-width: 420px){
  .stage{--pw:45vw}
  .hero{padding-top:5.8rem}
  .hero h1{font-size:clamp(2.35rem,10.2vw,3rem);margin-bottom:1.1rem}
  .hero-lede{margin-bottom:1.6rem}
  .hero-actions{gap:.6rem}
  .hero-actions .btn{padding:.85rem 1.15rem}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .intro > *,.reveal{opacity:1;transform:none}
}

.legal{background:var(--blue-50)}
.legal-intro{color:var(--muted);margin:1rem 0 2rem}
.legal-policy{background:white;border:1px solid var(--blue-200);border-radius:var(--r-md);margin:1rem 0;scroll-margin-top:90px}
.legal-policy>summary{cursor:pointer;padding:1.3rem;font-family:var(--display);font-size:1.3rem;font-weight:700}
.legal-content{padding:0 clamp(1rem,3vw,2rem) 2rem;max-width:80ch;overflow-wrap:anywhere}
.legal-content h3{font-size:1.5rem;margin:1rem 0}
.legal-content h4{font:700 1.2rem/1.4 var(--display);margin:2rem 0 .7rem}
.legal-content h5{font:700 1.05rem/1.4 var(--body);margin:1.5rem 0 .5rem}
.legal-content p,.legal-content ul,.legal-content ol{margin:0 0 1rem}
.legal-content li{margin-bottom:.5rem}
.legal-content a{color:var(--link);text-underline-offset:3px}
.legal-content .updated{font-size:.9rem;color:var(--muted)}
.legal-content .highlight,.legal-content .warning{padding:1rem;border-left:4px solid var(--blue);background:var(--blue-50);margin:1rem 0}
.legal-content .warning{background:#fff8e6;border-color:#d99c25}
.legal-content table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:1rem 0}
.legal-content th,.legal-content td{text-align:left;padding:.7rem;border-bottom:1px solid var(--blue-200)}
@media print{.legal-policy:not([open])>.legal-content{display:block!important}}
.policy-page{padding-top:8rem;min-height:75vh}
.policy-page .legal-content{padding:2rem 0;max-width:80ch}
.policy-page h1{font-size:clamp(2.1rem,6vw,3.6rem);margin:0 0 1.5rem}
.policy-back a,.policy-nav a{color:var(--link);text-underline-offset:3px}
.policy-nav{margin-top:1.5rem}.policy-nav [aria-current="page"]{font-weight:700}
@media print{.nav,.footer,.policy-nav,.policy-back{display:none}.policy-page{padding-top:0}}