/* tryraven.app
   Light only, by brand rule. Google Sans, brand blue #0050DF, the Raven app's own tokens
   (Raven/raven-native/SPEC/README.md section 7) and its Horizon living background. */

@font-face{font-family:"Google Sans";src:url("/fonts/GoogleSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Google Sans";src:url("/fonts/GoogleSans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Google Sans";src:url("/fonts/GoogleSans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Google Sans";src:url("/fonts/GoogleSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:block}

:root{
  color-scheme:light only;
  --blue:#0050DF;
  --ink:#0A0C12;
  --ink2:#4B5566;
  --ink3:#667180;
  --bg:#FFFFFF;
  --bg2:#F5F6F9;
  --bg3:#ECEEF3;
  --hair:rgba(10,12,18,.09);
  --night:#07080B;
  --n-text:#F4F6FA;
  --n-text2:#B3BAC6;
  --n-text3:#868F9E;
  --n-accent:#8DB2FF;
  --gold:#E2A93B;
  --gutter:clamp(20px,5vw,56px);
  --ease:cubic-bezier(.22,.8,.2,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --nav-h:88px;
  --font:"Google Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:rgba(0,80,223,.18)}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:10px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;font-weight:600;transition:top .2s}
.skip:focus{top:16px}
.wrap{width:min(1200px,100% - 2*var(--gutter));margin-inline:auto}
.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:15px;line-height:1.2;font-weight:500;letter-spacing:.01em;color:var(--ink2)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none}
.h1{font-size:clamp(40px,7.2vw,104px);line-height:.98;font-weight:600;letter-spacing:-.05em;text-wrap:balance}
.h2{font-size:clamp(34px,5.4vw,76px);line-height:1.02;font-weight:600;letter-spacing:-.045em;text-wrap:balance}
.h3{font-size:clamp(28px,3.5vw,48px);line-height:1.06;font-weight:600;letter-spacing:-.04em;text-wrap:balance}
.lead{font-size:clamp(18px,1.55vw,21px);line-height:1.5;color:var(--ink2);text-wrap:pretty}
.body{font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:var(--ink2);text-wrap:pretty}
.section-head{display:grid;gap:20px;justify-items:start;max-width:880px}
.section-head-center{justify-items:center;text-align:center;margin-inline:auto}
.section-head .lead{max-width:640px}

/* ---------- buttons: capsules, like the app ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 28px;border-radius:28px;font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;transition:transform .6s var(--ease),box-shadow .6s var(--ease),background-color .3s}
.btn .ic{width:18px;height:18px;stroke-width:2.2;transition:transform .6s var(--ease)}
.btn:hover .ic{transform:translate(2px,-2px)}
.btn-blue{background:var(--blue);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -8px 16px -8px rgba(0,20,90,.35),0 14px 34px -12px rgba(0,80,223,.6)}
.btn-blue:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -8px 16px -8px rgba(0,20,90,.35),0 22px 44px -14px rgba(0,80,223,.7)}
.btn-glass{background:rgba(255,255,255,.62);color:var(--ink);-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);box-shadow:inset 0 0 0 1px rgba(10,12,18,.08),inset 0 1px 0 #fff,0 14px 34px -16px rgba(30,40,70,.3)}
.btn-glass:hover{transform:translateY(-2px);background:rgba(255,255,255,.86)}
.btn-glass-night{background:rgba(255,255,255,.09);color:var(--n-text);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-glass-night:hover{transform:translateY(-2px);background:rgba(255,255,255,.15)}
.btn-sm{height:44px;padding:0 20px;border-radius:22px;font-size:15px}
.btn-quiet{height:44px;padding:0 14px;font-size:15px;font-weight:500;color:var(--ink2)}
.btn-quiet:hover{color:var(--ink)}
.btn-block{width:100%}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1s var(--ease) var(--d,0ms),transform 1.2s var(--ease) var(--d,0ms);animation:late-show .01s 5s forwards}
html.js [data-reveal]{animation:none}
[data-reveal].in{opacity:1;transform:none}
@keyframes late-show{to{opacity:1;transform:none}}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;padding:14px clamp(10px,2.4vw,28px) 0;pointer-events:none}
.nav-bar{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1200px;margin:0 auto;height:60px;padding:0 8px 0 10px;border-radius:30px;transition:background-color .6s var(--ease),box-shadow .6s var(--ease)}
.nav.is-solid .nav-bar{background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);box-shadow:inset 0 0 0 1px rgba(10,12,18,.06),0 14px 40px -20px rgba(20,30,60,.32)}
.nav-brand{display:flex;align-items:center;width:40px;height:40px;flex:none;border-radius:9px}
.nav-icon{width:40px;height:40px;border-radius:22.37%;opacity:0}
.nav.is-docked .nav-icon{opacity:1}
.nav-links{display:none;align-items:center;gap:2px}
.nav-links a{padding:10px 15px;border-radius:20px;font-size:15px;font-weight:500;color:var(--ink2);transition:color .3s,background-color .3s}
.nav-links a:hover{color:var(--ink);background:rgba(10,12,18,.05)}
.nav-cta{display:flex;align-items:center;gap:4px}
.nav-get{display:none}
@media (min-width:480px){.nav-get{display:inline-flex}}
@media (min-width:900px){.nav-links{display:flex}}

/* ---------- phone ---------- */
/* Screens are rendered with their own rounded corners, island and home bar; the frame is a thin black bezel. */
.phone{--pw:300px;position:relative;width:var(--pw);flex:none;padding:calc(var(--pw)*.02);border-radius:calc(var(--pw)*.16);background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 0 1px rgba(10,12,18,.5),0 calc(var(--pw)*.1) calc(var(--pw)*.22) calc(var(--pw)*-.1) rgba(8,20,70,.45),0 calc(var(--pw)*.02) calc(var(--pw)*.05) rgba(8,20,70,.12)}
.phone-screen{position:relative;aspect-ratio:1283/2790;border-radius:calc(var(--pw)*.136);overflow:hidden;background:#000;isolation:isolate}
.phone .screen{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.025);transition:opacity .9s var(--ease),transform 1.4s var(--ease)}
.phone .screen.is-on{opacity:1;transform:none}

/* =====================  HERO  ===================== */
.hero{--F:min(clamp(96px,27vw,320px),40svh);--T:calc(var(--F)*3.2);--peek:clamp(56px,10svh,112px);--run:130svh;position:relative;height:calc(100svh + var(--run))}
.hero-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center}
.hero-copy{position:relative;z-index:3;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--nav-h) var(--gutter) calc(var(--peek) + 28px)}
.hero-title{display:flex;flex-direction:column;align-items:center;font-weight:inherit;font-size:inherit}

/* The app icon opens into the hero. .fold is laid out at full size; JS only transforms it. */
.fold{opacity:0;animation:late-show .01s 4s forwards;position:relative;display:block;width:calc(var(--F)*2.574);height:calc(var(--F)*.62);font-size:var(--F);transform-origin:50% 50%;will-change:transform}
html.js .fold{animation:none}
.fold-wm{position:absolute;left:50%;top:50%;display:block;font-family:var(--font);font-weight:700;font-size:var(--F);line-height:1;letter-spacing:-.04em;padding-right:.04em;white-space:nowrap;transform:translate(-50%,-50%) translateY(var(--wm-shift,-.085em))}
.fold-wm-ink{color:var(--ink)}
.fold-wm-white{color:#fff}
.fold-half{position:absolute;top:50%;left:50%;width:calc(var(--T)/2 + 1px);height:var(--T);margin-top:calc(var(--T)*-.5 - var(--T)*.025);overflow:hidden;background:var(--blue);opacity:0;will-change:transform,opacity}
.fold-half-l{margin-left:calc(var(--T)*-.5);border-radius:calc(var(--T)*.2237) 0 0 calc(var(--T)*.2237)}
.fold-half-r{margin-left:-1px;border-radius:0 calc(var(--T)*.2237) calc(var(--T)*.2237) 0}
.fold-half .fold-wm{top:calc(50% + var(--T)*.025)}
.fold-bridge{position:absolute;top:50%;left:50%;width:calc(var(--T)*.06);height:var(--T);margin-top:calc(var(--T)*-.5 - var(--T)*.025);margin-left:calc(var(--T)*-.03);overflow:hidden;background:var(--blue);opacity:0}
.fold-bridge .fold-wm{top:calc(50% + var(--T)*.025);left:50%}
.fold-half-l .fold-wm{left:calc(var(--T)/2)}
.fold-half-r .fold-wm{left:1px}

.hero-line{display:block;margin-top:clamp(18px,3svh,34px);font-size:clamp(22px,2.9vw,40px);line-height:1.1;font-weight:600;letter-spacing:-.035em;text-wrap:balance}
.hero-sub{max-width:600px;margin-top:clamp(12px,2svh,20px);font-size:clamp(16px,1.45vw,19px);line-height:1.5;color:var(--ink2);text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(22px,3.4svh,36px)}
.hero-note{margin-top:18px;font-size:14px;color:var(--ink3)}
.hero [data-intro]{opacity:0;animation:late-show .01s 4s forwards}
html.js .hero [data-intro]{animation:none;transform:translate3d(0,22px,0)}
html.js .hero-copy.is-in [data-intro]{opacity:calc(1 - var(--out,0));transform:translate3d(0,calc(var(--out,0)*-44px),0)}
html.js .hero-copy.is-intro [data-intro]{transition:opacity 1.1s var(--ease) var(--d,0ms),transform 1.3s var(--ease) var(--d,0ms)}

@media (max-height:640px){.hero-note{display:none}.hero{--peek:44px}}
@media (max-height:540px){.hero-sub{display:none}}
/* edge glows: what the icon's blue turns into */
.glow{--gw:clamp(420px,66vw,1060px);--gh:138svh;position:absolute;z-index:1;top:50%;width:var(--gw);height:var(--gh);margin-top:calc(var(--gh)*-.5);pointer-events:none;opacity:0;will-change:transform,opacity;animation:late-show .01s 4s forwards}
html.js .glow{animation:none}
.glow-l{left:0;margin-left:calc(var(--gw)*-.64)}
.glow-r{right:0;margin-right:calc(var(--gw)*-.64)}
.glow i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,rgba(0,80,223,.96),rgba(0,80,223,.7) 34%,rgba(0,80,223,.3) 62%,rgba(0,80,223,.08) 84%,rgba(0,80,223,0));animation:breathe 14s ease-in-out infinite alternate}
.glow-r i{animation-duration:17s;animation-direction:alternate-reverse}
@keyframes breathe{from{transform:translate3d(0,-1.5%,0) scale(1)}to{transform:translate3d(0,2%,0) scale(1.07)}}

.hero-device{--pw:min(360px,72vw,calc(74svh*.46));position:absolute;z-index:2;left:50%;top:100%;width:var(--pw);margin-left:calc(var(--pw)*-.5);will-change:transform;animation:peek-show .01s 4s forwards}
html.js .hero-device{animation:none}
@keyframes peek-show{to{transform:translate3d(0,calc(var(--peek)*-1),0)}}
.hero-device .phone{--pw:inherit;width:100%}
.phone-hero .screen{opacity:1;transform:none}
.hero-horizon{position:absolute;inset:-30% -90% -10%;pointer-events:none;opacity:var(--hz,0)}
.hero-horizon i{position:absolute;border-radius:50%}
.hero-horizon i:nth-child(1){left:8%;right:8%;top:22%;bottom:0;background:radial-gradient(closest-side,rgba(169,194,255,.95),rgba(169,194,255,0))}
.hero-horizon i:nth-child(2){left:38%;right:-4%;top:40%;bottom:-8%;background:radial-gradient(closest-side,rgba(205,191,255,.8),rgba(205,191,255,0))}
.hero-horizon i:nth-child(3){left:-4%;right:44%;top:46%;bottom:-4%;background:radial-gradient(closest-side,rgba(190,230,245,.8),rgba(190,230,245,0))}

/* =====================  WHAT  ===================== */
.what{position:relative;padding:clamp(96px,16vw,220px) 0 clamp(72px,10vw,140px)}
.what-wrap{display:grid;gap:clamp(24px,3vw,40px);justify-items:start}
.statement{max-width:1040px;font-size:clamp(28px,4.5vw,62px);line-height:1.12;font-weight:600;letter-spacing:-.04em;text-wrap:pretty}
.w{color:rgba(10,12,18,.14);transition:color .5s linear}
.w.on{color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.chips li{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 18px 0 15px;border-radius:23px;background:var(--bg2);font-size:15.5px;font-weight:500;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.chips .ic{color:var(--blue);width:19px;height:19px}

/* =====================  STORY  ===================== */
.story{position:relative;padding:clamp(40px,6vw,80px) 0 clamp(60px,9vw,130px)}
.story-grid{margin-top:clamp(28px,5vw,64px)}
.chapter{display:grid;gap:36px;padding:clamp(40px,8vw,72px) 0;border-top:1px solid var(--hair)}
.chapter:first-child{border-top:0;padding-top:8px}
.chapter-text{display:grid;gap:18px;justify-items:start;max-width:560px}
.ticks{display:grid;gap:12px;margin-top:6px}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:16.5px;line-height:1.45;color:var(--ink)}
.ticks .ic{margin-top:2px;width:20px;height:20px;color:var(--blue);stroke-width:2.2}
.chapter-phone{display:flex;justify-content:center;padding-top:6px}
.chapter-phone .phone{--pw:min(300px,72vw)}
.story-device{display:none}

@media (min-width:960px){
  .story.is-pinned .story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);gap:clamp(40px,8vw,130px);align-items:start}
  .story.is-pinned .chapter{min-height:100vh;align-content:center;padding:0;border-top:0;grid-template-columns:1fr}
  .story.is-pinned .chapter-phone{display:none}
  .story.is-pinned .story-device{--pw:min(340px,calc((100vh - 170px)*.46));display:grid;place-items:center;position:sticky;top:calc(50vh - var(--pw)/.46/2 + 30px);height:calc(var(--pw)/.46);}
  .story.is-pinned .story-device .phone{--pw:inherit}
  .story:not(.is-pinned) .chapter{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(40px,8vw,120px)}
  .story:not(.is-pinned) .chapter-phone .phone{--pw:320px}
}
.story-halo{position:absolute;inset:-12% -40%;pointer-events:none;z-index:-1}
.story-halo i{position:absolute;border-radius:50%}
.story-halo i:nth-child(1){inset:18% 6% 0;background:radial-gradient(closest-side,rgba(169,194,255,.75),rgba(169,194,255,0))}
.story-halo i:nth-child(2){inset:44% -6% -6% 40%;background:radial-gradient(closest-side,rgba(205,191,255,.6),rgba(205,191,255,0))}
.story-rail{position:absolute;right:calc(var(--pw)*-.2 - 8px);top:50%;display:grid;gap:8px;transform:translateY(-50%)}
.story-rail i{display:block;width:6px;height:6px;border-radius:3px;background:rgba(10,12,18,.16);transition:height .7s var(--ease),background-color .5s}
.story-rail i.on{height:28px;background:var(--blue)}

/* =====================  TALK (the one night band)  ===================== */
.night{position:relative;margin:0 clamp(8px,1.4vw,20px);padding:clamp(72px,10vw,140px) 0 clamp(56px,7vw,96px);border-radius:clamp(30px,4vw,56px);background:var(--night);color:var(--n-text);overflow:hidden;isolation:isolate}
.night-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.night-bg i{position:absolute;border-radius:50%;will-change:transform}
.night-bg .g1{width:120%;height:70%;left:-20%;bottom:-34%;background:radial-gradient(closest-side,rgba(23,67,196,.85),rgba(23,67,196,0));animation:n-breathe 18s ease-in-out infinite alternate}
.night-bg .g2{width:70%;height:60%;right:-14%;bottom:-30%;background:radial-gradient(closest-side,rgba(91,63,214,.6),rgba(91,63,214,0));animation:n-drift 40s ease-in-out infinite alternate}
.night-bg .g3{width:70%;height:50%;left:-16%;top:-28%;background:radial-gradient(closest-side,rgba(27,60,143,.42),rgba(27,60,143,0));animation:n-drift 46s ease-in-out infinite alternate-reverse}
.night-bg .g4{width:44%;height:40%;left:10%;bottom:-22%;background:radial-gradient(closest-side,rgba(42,157,200,.32),rgba(42,157,200,0));animation:n-breathe 34s ease-in-out infinite alternate-reverse}
@keyframes n-breathe{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(3%,-6%,0) scale(1.12)}}
@keyframes n-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6%,5%,0) scale(1.1)}100%{transform:translate3d(4%,-4%,0) scale(.96)}}
.grain{position:absolute;inset:0;opacity:.1;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.night-grid{display:grid;gap:clamp(48px,7vw,90px);align-items:center}
.night-copy{display:grid;gap:22px;justify-items:start}
.night .eyebrow{color:var(--n-text2)}
.eyebrow-bars::before{display:none}
.bars{display:inline-flex;align-items:center;gap:3px;height:18px}
.bars i{display:block;width:3px;border-radius:2px;background:var(--n-accent);animation:bar 1.3s ease-in-out infinite alternate}
.bars i:nth-child(1){height:8px;animation-delay:-.2s}.bars i:nth-child(2){height:15px;animation-delay:-.6s}.bars i:nth-child(3){height:18px;animation-delay:-.1s}.bars i:nth-child(4){height:12px;animation-delay:-.8s}.bars i:nth-child(5){height:7px;animation-delay:-.4s}
@keyframes bar{from{transform:scaleY(.38)}to{transform:scaleY(1)}}
.captions{max-width:620px;margin-top:6px;font-size:clamp(26px,3.5vw,46px);line-height:1.14;font-weight:500;letter-spacing:-.035em;text-wrap:pretty}
.night .w{color:rgba(244,246,250,.24)}
.night .w.on{color:var(--n-text)}
.night .lead{color:var(--n-text2);max-width:540px}
.night-phones{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:calc(min(300px,62vw)/.46 + 30px)}
.night-phones .phone{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 40px 90px -30px rgba(0,0,0,.9)}
.phone-front{--pw:min(300px,60vw);z-index:2;margin-left:-16%}
.phone-back{--pw:min(250px,50vw);position:absolute;left:50%;bottom:9%;margin-left:6%;opacity:.96}
.night-cards{display:grid;gap:12px;margin-top:clamp(48px,7vw,96px);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ncard{display:grid;gap:8px;align-content:start;padding:12px 12px 24px;border-radius:28px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.12);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
.ncard-media{aspect-ratio:1120/896;border-radius:18px;overflow:hidden;background:var(--night);margin-bottom:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ncard-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.ncard:hover .ncard-media img{transform:scale(1.035)}
.ncard h3{padding:0 10px;font-size:18px;line-height:1.25;font-weight:600;letter-spacing:-.02em}
.ncard p{padding:0 10px;font-size:15.5px;line-height:1.5;color:var(--n-text2)}
@media (min-width:960px){
  .night-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .night-phones{min-height:calc(320px/.46 + 40px)}
  .phone-front{--pw:320px;margin-left:-22%}
  .phone-back{--pw:270px;margin-left:2%;bottom:12%}
}

/* =====================  TOGETHER  ===================== */
.together{position:relative;padding:clamp(88px,12vw,170px) 0 clamp(64px,9vw,120px);overflow:clip}
.together-wash{position:absolute;inset:0;z-index:-1;pointer-events:none}
.together-wash i{position:absolute;border-radius:50%}
.together-wash i:nth-child(1){width:90%;height:56%;left:5%;top:30%;background:radial-gradient(closest-side,rgba(169,194,255,.6),rgba(169,194,255,0))}
.together-wash i:nth-child(2){width:56%;height:50%;right:-8%;top:40%;background:radial-gradient(closest-side,rgba(205,191,255,.5),rgba(205,191,255,0))}
.together-wash i:nth-child(3){width:50%;height:44%;left:-8%;top:46%;background:radial-gradient(closest-side,rgba(190,230,245,.55),rgba(190,230,245,0))}
.trio{display:flex;gap:18px;margin-top:clamp(40px,6vw,72px);padding:10px var(--gutter) 60px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.trio::-webkit-scrollbar{display:none}
.trio .phone{--pw:min(280px,70vw);scroll-snap-align:center}
.trio .trio-main{order:-1}
.quad{display:grid;gap:28px 32px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:clamp(20px,4vw,48px)}
.quad li{display:grid;gap:8px;align-content:start;padding-top:20px;border-top:1px solid var(--hair)}
.quad h3{font-size:18px;line-height:1.25;font-weight:600;letter-spacing:-.02em}
.quad p{font-size:15.5px;line-height:1.5;color:var(--ink2)}
@media (min-width:900px){
  .trio{justify-content:center;align-items:flex-start;gap:clamp(20px,3vw,44px);overflow:visible;padding-bottom:110px}
  .trio .phone{--pw:clamp(230px,23vw,300px)}
  .trio .trio-main{order:0;--pw:clamp(250px,25vw,330px)}
  .trio .trio-side{margin-top:90px}
}

/* =====================  MORE (bento)  ===================== */
.more{padding:clamp(64px,9vw,130px) 0}
.bento{display:grid;gap:14px;margin-top:clamp(32px,5vw,60px);grid-template-columns:1fr;grid-auto-flow:dense}
.tile{position:relative;display:grid;gap:10px;align-content:start;padding:clamp(24px,2.6vw,34px);border-radius:30px;background:var(--bg2);overflow:hidden;transition:transform .8s var(--ease),box-shadow .8s var(--ease),opacity 1s var(--ease) var(--d,0ms)}
.tile.in:hover{transform:translateY(-4px);box-shadow:0 30px 60px -34px rgba(20,40,110,.35)}
.tile>.ic,.tile-art-copy>.ic{width:26px;height:26px;color:var(--blue);margin-bottom:14px}
.tile h3{font-size:clamp(20px,1.8vw,24px);line-height:1.2;font-weight:600;letter-spacing:-.03em}
.tile p{font-size:16px;line-height:1.5;color:var(--ink2);max-width:46ch}
.models{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.model{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:center;padding:16px 18px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--hair);font-size:13px;color:var(--ink3)}
.model b{grid-column:1/-1;font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin-bottom:2px}
.model.is-max{box-shadow:inset 0 0 0 1.5px var(--blue)}
.meter{display:block;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--ink) 0 26%,transparent 26% 37%,var(--ink) 37% 63%,transparent 63% 74%,var(--ink) 74%)}
.meter.m2{background:linear-gradient(90deg,var(--ink) 0 26%,transparent 26% 37%,var(--ink) 37% 63%,transparent 63% 74%,rgba(10,12,18,.14) 74%)}
.tile-art:has(.artstrip:not([hidden])){padding-bottom:0}
.artstrip[hidden]{display:none}
.tile-art-copy{display:grid;gap:10px}
.artstrip{margin:22px calc(clamp(24px,2.6vw,34px)*-1) 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.artstrip-track{display:flex;gap:12px;width:max-content;padding-bottom:clamp(24px,2.6vw,34px);animation:strip 64s linear infinite}
.artstrip:hover .artstrip-track{animation-play-state:paused}
.artstrip img{height:190px;width:auto;border-radius:18px;flex:none}
@keyframes strip{to{transform:translate3d(-50%,0,0)}}
@media (min-width:640px){.bento{grid-template-columns:repeat(2,1fr)}.tile-wide{grid-column:span 2}}
@media (min-width:1000px){.bento{grid-template-columns:repeat(3,1fr)}}

/* =====================  EVERYWHERE + DOWNLOAD  ===================== */
.every{position:relative;padding:clamp(72px,10vw,150px) 0 clamp(64px,9vw,130px);background:linear-gradient(180deg,var(--bg) 0,var(--bg2) 22%,var(--bg2) 78%,var(--bg) 100%)}
.devices{position:relative;max-width:1100px;margin:clamp(40px,6vw,76px) auto 0;aspect-ratio:1100/700}
.dev-mac{position:absolute;left:9%;top:0;width:82%;border-radius:clamp(8px,1.1vw,14px);overflow:hidden;box-shadow:0 0 0 1px rgba(10,12,18,.1),0 50px 110px -40px rgba(10,30,90,.45),0 12px 30px -12px rgba(10,30,90,.18)}
.dev-mac img,.dev-ipad img{width:100%}
.dev-ipad{position:absolute;left:0;bottom:2%;width:44%;padding:1%;border-radius:3.4% / 4.6%;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 40px 90px -30px rgba(8,20,70,.55)}
.dev-ipad img{border-radius:2.4% / 3.2%}
.dev-phone{--pw:clamp(96px,21%,232px);position:absolute;right:2%;bottom:-3%}
.every .dev-phone{width:var(--pw)}
.screen-wipe{opacity:1!important;transform:none!important;clip-path:inset(0 0 0 calc((1 - var(--wipe,0))*100%));transition:none!important}
.devices-note{margin-top:clamp(34px,5vw,56px);text-align:center;font-size:15px;color:var(--ink3)}
@media (max-width:640px){.devices{aspect-ratio:1/1.14}.dev-mac{left:0;width:100%}.dev-ipad{width:56%;bottom:3%}.dev-phone{--pw:29%;right:1%;bottom:0}}

.stores{display:grid;gap:12px;margin-top:clamp(40px,6vw,72px);grid-template-columns:repeat(2,minmax(0,1fr))}
.stores li:first-child{grid-column:1/-1}
@media (min-width:980px){.stores{grid-template-columns:1.4fr repeat(4,minmax(0,1fr))}.stores li:first-child{grid-column:auto}}
.store{position:relative;display:flex;align-items:center;gap:14px;height:72px;padding:0 18px 0 20px;border-radius:24px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair),0 16px 36px -24px rgba(20,40,110,.4);transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.store>.ic:first-child{width:26px;height:26px}
.store-text{display:grid;line-height:1.15;min-width:0}
.store-text small{font-size:12.5px;font-weight:500;color:var(--ink3);letter-spacing:.01em}
.store-text b{font-size:17.5px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.store.is-live{background:var(--blue);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 18px 40px -16px rgba(0,80,223,.65)}
.store.is-live small{color:rgba(255,255,255,.78)}
.store-arrow{margin-left:auto;width:18px;height:18px;stroke-width:2.2;transition:transform .6s var(--ease)}
.store:hover{transform:translateY(-3px)}
.store.is-live:hover .store-arrow{transform:translate(2px,-2px)}
.store.is-soon{cursor:default;box-shadow:inset 0 0 0 1px var(--hair)}
.store.is-soon>.ic{color:var(--ink2)}
.soon{margin-left:auto;padding:5px 10px;border-radius:12px;background:var(--bg2);font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink2)}
@media (max-width:979px){.store.is-soon{flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;height:104px;padding:0 18px}.store-text b{white-space:normal}}
.stores-note{margin-top:22px;text-align:center;font-size:15px;color:var(--ink3);max-width:620px;margin-inline:auto;text-wrap:balance}

.native{display:grid;gap:36px;margin-top:clamp(56px,8vw,110px);padding:clamp(28px,4vw,56px) clamp(24px,4vw,56px) 0;border-radius:36px;background:#fff;box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden}
.native-copy{display:grid;gap:16px;justify-items:start;align-content:center;padding-bottom:clamp(8px,2vw,40px);max-width:520px}
.native-phones{display:flex;justify-content:center;gap:clamp(14px,2.4vw,28px);align-items:flex-start;height:clamp(300px,36vw,430px)}
.phone-mini{--pw:clamp(150px,19vw,230px)}
.phone-mini:nth-child(2){margin-top:44px}
@media (min-width:860px){.native{grid-template-columns:1fr auto;align-items:center}}

/* =====================  PRICING  ===================== */
.pricing{padding:clamp(72px,10vw,150px) 0 clamp(56px,8vw,110px)}
.tiers{display:grid;gap:16px;margin-top:clamp(40px,6vw,72px);grid-template-columns:1fr;align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(26px,2.8vw,36px);border-radius:34px;background:#fff;box-shadow:inset 0 0 0 1px var(--hair),0 30px 70px -50px rgba(20,40,110,.45)}
.tier-pro{box-shadow:inset 0 0 0 1.5px var(--blue),0 40px 90px -46px rgba(0,80,223,.55)}
.tier-flag{position:absolute;right:22px;top:22px;padding:6px 12px;border-radius:14px;background:rgba(0,80,223,.09);color:var(--blue);font-size:12.5px;font-weight:600;letter-spacing:.01em}
.tier-name{display:flex;align-items:center;gap:8px;font-size:21px;font-weight:600;letter-spacing:-.025em}
.tick{width:22px;height:22px;stroke:none}
.tick-blue{color:var(--blue)}
.tick-gold{color:var(--gold)}
.tier-price{display:flex;align-items:baseline;gap:8px}
.tier-price b{font-size:clamp(46px,5vw,60px);line-height:1;font-weight:600;letter-spacing:-.05em}
.tier-price span{font-size:16px;color:var(--ink3)}
.tier-sum{font-size:16px;color:var(--ink2);min-height:3em}
.tier-list{display:grid;gap:11px;padding:18px 0 14px;border-top:1px solid var(--hair);margin-bottom:auto}
.tier-list li{display:grid;grid-template-columns:20px 1fr;gap:11px;font-size:15.5px;line-height:1.4}
.tier-list .ic{width:18px;height:18px;margin-top:2px;color:var(--blue);stroke-width:2.3}
.tier .btn{margin-top:10px}
.tiers-note{margin-top:26px;text-align:center;font-size:14.5px;color:var(--ink3)}
@media (min-width:900px){.tiers{grid-template-columns:repeat(3,1fr)}}

/* =====================  CONTROL  ===================== */
.control{padding:clamp(56px,8vw,120px) 0}
.grid6{display:grid;gap:clamp(28px,3.4vw,44px) clamp(24px,3vw,40px);margin-top:clamp(36px,5vw,64px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid6 li{display:grid;gap:8px;align-content:start;justify-items:start}
.grid6 .ic{width:24px;height:24px;padding:11px;box-sizing:content-box;border-radius:15px;background:var(--bg2);color:var(--blue);margin-bottom:10px}
.grid6 h3{font-size:19px;line-height:1.25;font-weight:600;letter-spacing:-.02em}
.grid6 p{font-size:16px;line-height:1.5;color:var(--ink2);max-width:36ch}
.control-grid{display:grid;gap:clamp(40px,6vw,72px);margin-top:clamp(36px,5vw,64px)}
.control-grid .grid6{margin-top:0}
.control-phone{display:flex;justify-content:center}
.control-phone .phone{--pw:min(290px,70vw)}
@media (min-width:1000px){.control-grid{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(48px,7vw,110px)}.control-grid .grid6{grid-template-columns:repeat(2,minmax(0,1fr))}}
.honest{margin-top:clamp(40px,5vw,64px);padding-top:22px;border-top:1px solid var(--hair);font-size:15px;color:var(--ink3)}

/* =====================  FAQ  ===================== */
.faq{padding:clamp(56px,8vw,120px) 0 clamp(72px,10vw,150px)}
.faq-wrap{display:grid;gap:clamp(32px,5vw,56px)}
.faq-list{border-top:1px solid var(--hair)}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item h3{font-size:clamp(18px,1.7vw,22px);line-height:1.3;font-weight:600;letter-spacing:-.025em}
.faq-item summary .ic{width:22px;height:22px;padding:9px;box-sizing:content-box;border-radius:50%;background:var(--bg2);color:var(--ink);transition:transform .6s var(--ease),background-color .3s,color .3s}
.faq-item summary:hover .ic{background:var(--bg3)}
.faq-item[open] summary .ic{transform:rotate(45deg);background:var(--ink);color:#fff}
.faq-a{padding:0 64px 26px 0}
.faq-a p{max-width:68ch;font-size:16.5px;line-height:1.6;color:var(--ink2)}
.faq-item::details-content{block-size:0;overflow:clip;transition:block-size .6s var(--ease),content-visibility .6s allow-discrete}
.faq-item[open]::details-content{block-size:auto}
@supports (interpolate-size:allow-keywords){.faq-list{interpolate-size:allow-keywords}}
@media (min-width:960px){.faq-wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);align-items:start}.faq .section-head{position:sticky;top:120px}}

/* =====================  CLOSE  ===================== */
.close{position:relative;padding:clamp(100px,15vw,210px) 0 clamp(110px,16vw,230px);overflow:hidden;isolation:isolate;text-align:center}
.close-wrap{display:flex;flex-direction:column;align-items:center}
.close-icon{width:clamp(84px,9vw,112px);height:auto;border-radius:22.37%;box-shadow:0 30px 60px -22px rgba(0,80,223,.7);margin-bottom:clamp(28px,4vw,44px)}
.close .h1{max-width:15ch}
.close-bloom{position:absolute;inset:0;z-index:-1;pointer-events:none}
.close-bloom i{position:absolute;border-radius:50%;will-change:transform}
.close-bloom i:nth-child(1){width:86%;height:120%;left:-46%;top:10%;background:radial-gradient(closest-side,rgba(0,80,223,.9),rgba(0,80,223,.45) 44%,rgba(0,80,223,0));transform:translate3d(calc((1 - var(--bloom,0))*-22%),0,0)}
.close-bloom i:nth-child(2){width:86%;height:120%;right:-46%;top:-4%;background:radial-gradient(closest-side,rgba(0,80,223,.9),rgba(0,80,223,.45) 44%,rgba(0,80,223,0));transform:translate3d(calc((1 - var(--bloom,0))*22%),0,0)}
.close-bloom i:nth-child(3){width:120%;height:70%;left:-10%;bottom:-48%;background:radial-gradient(closest-side,rgba(169,194,255,.9),rgba(169,194,255,0));transform:translate3d(0,calc((1 - var(--bloom,0))*30%),0)}

/* =====================  FOOTER  ===================== */
.foot{border-top:1px solid var(--hair);background:var(--bg);padding:clamp(48px,6vw,80px) 0 34px}
.foot-grid{display:grid;gap:40px 32px;grid-template-columns:repeat(2,minmax(0,1fr))}
.foot-brand{grid-column:1/-1;display:grid;gap:14px;justify-items:start}
.foot-co{display:inline-flex;align-items:center;gap:10px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.foot-co img{width:44px;height:44px;margin-left:-6px}
.foot-brand p{font-size:15px;color:var(--ink3);max-width:30ch}
.foot-col{display:grid;gap:11px;align-content:start;justify-items:start}
.foot-col h2{font-size:13px;font-weight:500;letter-spacing:.03em;color:var(--ink3);margin-bottom:4px}
.foot-col a{font-size:15.5px;color:var(--ink);transition:color .3s}
.foot-col a:hover{color:var(--blue)}
.foot-base{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;margin-top:clamp(40px,5vw,64px);padding-top:22px;border-top:1px solid var(--hair);font-size:13.5px;color:var(--ink3)}
@media (min-width:860px){.foot-grid{grid-template-columns:1.5fr repeat(3,1fr)}.foot-brand{grid-column:auto}}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;z-index:80;max-width:calc(100% - 32px);padding:14px 20px;border-radius:24px;background:rgba(10,12,18,.9);color:#fff;font-size:15px;font-weight:500;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 20px 50px -18px rgba(0,0,0,.5);transform:translate(-50%,20px);opacity:0;transition:opacity .5s var(--ease),transform .7s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- reduced motion: everything is simply there ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal],.hero [data-intro],html.js .hero [data-intro],.glow{opacity:1;transform:none}
  .hero{height:auto}
  .hero-stage{position:relative;height:auto;min-height:100svh;flex-direction:column;overflow:visible}
  .hero-device,html.js .hero-device{position:relative;left:auto;top:auto;margin:0 auto 40px;transform:none;animation:none}
  .fold,html.js .fold{opacity:1}
  .hero-copy{padding-bottom:48px}
  .fold-half,.fold-bridge{display:none}
  .nav-icon{opacity:1}
  .w{color:var(--ink)}
  .night .w{color:var(--n-text)}
  .artstrip-track{animation:none}
  .screen-wipe{clip-path:inset(0 0 0 50%)}
}

@media print{.nav,.toast,.glow,.hero-device{display:none}.hero{height:auto}.hero-stage{position:static;height:auto}[data-reveal],.hero [data-intro]{opacity:1!important;transform:none!important}.fold-half,.fold-bridge{display:none}}