/* Original Sona product scenes. No third-party artwork or animation assets. */
:root{--ease-out:cubic-bezier(.22,1,.36,1)}
.hero-portrait{right:0}.hero-copy{max-width:590px}.hero-shelf{border-radius:30px; margin-bottom:30px}.hero{padding-bottom:25px}.pill{transition:transform .35s var(--ease-out),background .25s}.pill:active{transform:scale(.97)}
.journey{padding:110px 0 90px;background:#f8f6f4;color:#0b0d12;border-radius:55px 55px 0 0;position:relative}.journey-intro{text-align:center;padding-bottom:95px}.journey-intro .eyebrow{justify-content:center;color:#64656c}.journey-intro h2{font-size:clamp(44px,6vw,80px);line-height:1.03;letter-spacing:-4px;margin:25px 0}.journey-intro h2 span{color:#85858d}.journey-intro p{font-size:16px;line-height:1.8;color:#73737c}.journey-stack{display:flex;flex-direction:column;gap:24px;padding-bottom:20px}.chapter{position:sticky;top:105px;display:grid;grid-template-columns:.85fr 1.15fr;min-height:580px;padding:9px;border:1px solid #00000009;border-radius:34px;overflow:hidden;box-shadow:0 -12px 40px #0b0d1208;transform-origin:50% 0}.chapter-copy{padding:36px 28px 26px;display:flex;flex-direction:column;align-items:flex-start}.chapter-kicker{font-size:10px;letter-spacing:1.8px;font-weight:700;opacity:.6}.chapter h3{font-size:clamp(32px,3.5vw,48px);letter-spacing:-2.3px;line-height:1.04;margin:27px 0 20px;font-weight:600}.chapter-copy>p{font-size:14px;line-height:1.85;max-width:285px;margin:0;opacity:.66}.chapter-number{font-size:56px;letter-spacing:-3px;margin-top:auto;padding-top:48px;display:flex;align-items:center;gap:20px}.chapter-number small{font-size:9px;letter-spacing:1.5px;font-weight:500;opacity:.5}.chapter-records{background:#e8ebdf}.chapter-results{background:#fff}.chapter-routine{background:#c2f622}.chapter-share{background:#171920;color:#f8f6f4}.scene{position:relative;border-radius:27px;min-height:560px;overflow:hidden;display:flex;align-items:center;justify-content:center;isolation:isolate}.scene svg{fill:none;stroke:currentColor;stroke-width:1.6;width:24px;height:24px}.scene-scan{background:#dadfcf}.scene-results{background:#edeeee}.scene-routine{background:#afd91d}.scene-sharing{background:#0b0d12}.scene-caption{position:absolute;bottom:20px;font-size:8px;letter-spacing:1.4px;opacity:.45;text-align:center;padding:0 15px}.scan-document{background:#fff;width:72%;max-width:340px;padding:27px 24px;border-radius:16px;position:absolute;top:80px;box-shadow:0 25px 50px #0000000b;transform:rotate(-4deg);overflow:hidden}.paper-head{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#72747d}.paper-head svg{width:18px;height:18px}.scan-document h4{font-size:21px;letter-spacing:-.7px;margin:24px 0 7px}.paper-date{font-size:10px;color:#8e9098}.paper-lines{display:flex;flex-direction:column;gap:7px;margin:24px 0}.paper-lines i{display:block;height:5px;background:#e9e9ed;border-radius:10px}.paper-lines i:nth-child(2){width:80%}.paper-lines i:nth-child(3){width:55%}.lab-row{display:flex;justify-content:space-between;border-top:1px solid #eee;padding:14px 0;font-size:10px}.lab-row b{font-size:12px}.lab-row small{font-weight:400;font-size:8px;color:#93939a}.scan-beam{height:3px;background:#9cce00;box-shadow:0 0 22px 5px #c2f62288;position:absolute;left:0;right:0;top:18%;animation:scan 8s ease-in-out infinite}.scan-result{position:absolute;bottom:88px;width:83%;padding:20px;background:#0b0d12;color:#f8f6f4;display:flex;gap:13px;align-items:center;border-radius:18px;box-shadow:0 18px 35px #0002;animation:saved 8s var(--ease-out) infinite}.round-icon{border-radius:50%;width:38px;height:38px;display:grid;place-items:center;background:#c2f622;color:#0b0d12;flex-shrink:0}.scan-result strong{font-size:13px}.scan-result small{display:block;font-size:10px;color:#96979f;margin-top:5px}.trend-card{position:absolute;top:77px;background:#fff;border-radius:20px;padding:25px;width:82%;box-shadow:0 20px 40px #00000008}.range-chip{border:1px solid #ddd;border-radius:20px;padding:7px;letter-spacing:0;font-size:8px}.trend-value{font-size:43px;letter-spacing:-2px;margin-top:24px;font-weight:600}.trend-value small{font-size:12px;letter-spacing:0;font-weight:400}.trend-value span{display:block;font-size:10px;letter-spacing:0;color:#85858d;margin-top:3px}.scene .trend-graph{width:100%;height:105px;margin-top:20px;overflow:visible}.chart-grid{stroke:#efeff2;stroke-width:1}.chart-line{stroke:#648b00;stroke-width:3;stroke-dasharray:390;animation:draw 8s var(--ease-out) infinite}.trend-graph circle{fill:#648b00;stroke:#fff;stroke-width:3;animation:result-dot 8s ease infinite}.chart-dates{display:flex;justify-content:space-between;font-size:9px;color:#999}.sona-explanation{position:absolute;bottom:65px;left:14%;right:4%;display:flex;align-items:flex-start;gap:11px;padding:20px;background:#171920;color:white;border-radius:18px;box-shadow:0 18px 30px #0002;animation:explain 8s var(--ease-out) infinite}.sona-explanation img{height:36px;width:36px;object-fit:contain}.sona-explanation strong{font-size:11px}.sona-explanation p{font-size:10px;line-height:1.7;margin:7px 0 0;color:#b1b3bd}.routine-clock{position:absolute;top:40px;font-size:69px;letter-spacing:-4px;text-align:center;font-weight:500}.routine-clock small{display:block;font-size:10px;letter-spacing:0;margin-top:8px;opacity:.55}.notification-demo{position:absolute;top:175px;width:82%;background:#0b0d12;color:#f8f6f4;padding:22px;border-radius:22px;box-shadow:0 20px 50px #0002}.notification-brand{display:flex;align-items:center;justify-content:space-between}.notification-brand img{width:53px}.notification-brand>span{font-size:9px;color:#888}.notification-demo h4{font-size:18px;letter-spacing:-.5px;margin:24px 0 7px}.notification-demo p{font-size:11px;color:#989aa4}.notification-actions{display:flex;gap:12px;margin-top:25px}.notification-actions>span{border-radius:25px;background:#23252e;padding:12px 17px;font-size:10px}.notification-actions .take-action{background:#c2f622;color:#0b0d12;position:relative;min-width:123px;text-align:center;animation:button-press 8s ease infinite}.take-after{position:absolute;inset:12px 0;animation:taken 8s ease infinite}.take-before{animation:untaken 8s ease infinite}.demo-cursor{position:absolute;font-size:40px;color:white;bottom:13px;left:48%;text-shadow:2px 2px #000;animation:cursor-tap 8s var(--ease-out) infinite}.routine-days{position:absolute;bottom:66px;display:flex;gap:13px}.routine-days>span{font-size:9px;display:flex;align-items:center;flex-direction:column;gap:11px;opacity:.7}.routine-days i{font-style:normal;display:grid;place-items:center;width:29px;height:29px;border:1px solid #0b0d1240;border-radius:50%;font-size:12px}.routine-days>span:nth-child(-n+3) i{background:#0b0d12;color:#c2f622}.today-check{animation:day-fill 8s ease infinite}.medical-demo{position:absolute;top:105px;left:8%;width:80%;padding:25px;background:#f8f6f4;color:#0b0d12;border-radius:20px;transform:rotate(-5deg);display:flex;align-items:center;gap:13px;flex-wrap:wrap;box-shadow:0 20px 50px #0003}.card-avatar{display:grid;place-items:center;background:#c2f622;border-radius:13px;width:44px;height:44px;font-size:22px}.medical-demo>div>span{font-size:8px;letter-spacing:1px;color:#797a85}.medical-demo h4{font-size:17px;letter-spacing:-.6px;margin:5px 0}.medical-items{display:flex;width:100%;gap:12px;margin:15px 0}.medical-items span{flex:1;background:#eaeaec;padding:17px 12px;border-radius:12px;font-size:9px;letter-spacing:0}.medical-items b{display:block;font-size:11px;color:#222;margin-top:7px;letter-spacing:0}.permission-line{display:flex;align-items:center;gap:8px;font-size:10px;color:#85858d}.permission-line svg{height:16px;width:16px}.share-demo{position:absolute;bottom:97px;left:16%;right:5%;background:#c2f622;color:#0b0d12;border-radius:18px;padding:22px 17px;display:flex;gap:12px;align-items:center;animation:share 8s var(--ease-out) infinite}.share-demo strong{font-size:13px}.share-demo small{font-size:10px;display:block;margin-top:5px;opacity:.6}.share-check{margin-left:auto;border-radius:50%;border:1px solid #0004;padding:4px 7px}.expiry-track{height:3px;background:#ffffff12;position:absolute;bottom:65px;left:19%;right:10%;overflow:hidden;border-radius:10px}.expiry-track i{display:block;height:100%;background:#c2f622;transform-origin:left;animation:expiry 8s linear infinite}
.scene *{animation-play-state:paused!important}.chapter.is-visible .scene *{animation-play-state:running!important}.page-hidden .scene *{animation-play-state:paused!important}
.discover{padding-top:110px}.use-case{background:#101116;min-height:215px}.use-case:nth-child(2){transform:rotate(2deg)}.use-case:nth-child(3){transform:rotate(-2deg)}.use-case:hover{transform:translateY(-8px) rotate(0deg)}.family{border-radius:30px}.closing{position:relative;overflow:hidden;border-radius:36px}.closing:before{content:'';position:absolute;width:600px;height:600px;border:1px solid #0b0d1215;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 60px #0b0d1205,0 0 0 120px #0b0d1204;pointer-events:none}.closing>*{position:relative}.preview-badge{font-size:9px}.reveal-ready{opacity:0;transform:translateY(25px);transition:opacity .7s ease,transform .8s var(--ease-out)}.reveal-ready.is-visible{opacity:1;transform:none}
@keyframes scan{0%,8%{top:18%;opacity:0}12%{opacity:1}45%{top:88%;opacity:1}50%,100%{top:88%;opacity:0}}
@keyframes saved{0%,35%{opacity:0;transform:translateY(25px) rotate(3deg)}48%,88%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(10px)}}
@keyframes draw{0%,8%{stroke-dashoffset:390}48%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:390}}
@keyframes result-dot{0%,40%,100%{opacity:0}48%,90%{opacity:1}}
@keyframes explain{0%,42%{opacity:0;transform:translateY(18px)}55%,90%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(10px)}}
@keyframes cursor-tap{0%,12%{opacity:0;transform:translate(60px,40px)}30%,38%{opacity:1;transform:translate(-65px,-5px)}43%,100%{opacity:0;transform:translate(-65px,-5px)}}
@keyframes button-press{0%,32%,42%,100%{transform:scale(1)}37%{transform:scale(.94)}}
@keyframes taken{0%,38%,100%{opacity:0}42%,90%{opacity:1}}
@keyframes untaken{0%,38%,100%{opacity:1}42%,90%{opacity:0}}
@keyframes day-fill{0%,38%,100%{background:transparent;color:transparent}43%,90%{background:#0b0d12;color:#c2f622}}
@keyframes share{0%,15%{opacity:0;transform:translateY(20px)}30%,90%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(10px)}}
@keyframes expiry{0%,25%{transform:scaleX(1)}90%,100%{transform:scaleX(.55)}}
@media(max-width:1000px){.chapter{min-height:530px}.scene{min-height:510px}.chapter-copy{padding:30px 20px}.chapter h3{font-size:38px}.scan-document{top:55px}.trend-card{top:48px}.sona-explanation{bottom:55px}.routine-clock{top:24px}.notification-demo{top:143px}.medical-demo{top:75px}.chapter-number{font-size:45px}.chapter-number small{font-size:8px}.routine-days{gap:9px}}
@media(max-width:800px){.hero-portrait{right:50%}.journey{padding:75px 0 55px;border-radius:32px 32px 0 0}.journey-intro{padding-bottom:50px}.journey-intro h2{letter-spacing:-2.5px}.journey-intro p{font-size:13px}.journey-intro .eyebrow{font-size:8px}.journey-stack{gap:22px}.chapter{position:relative;top:auto;grid-template-columns:1fr;border-radius:27px}.chapter-copy{padding:25px 22px 20px;position:relative}.chapter h3{font-size:40px;letter-spacing:-2px;margin:20px 0 15px}.chapter h3 br{display:none}.chapter h3 br:after{content:' '}.chapter-copy>p{max-width:100%;font-size:13px;padding-right:35px}.chapter-number{position:absolute;right:20px;top:17px;padding:0;margin:0;font-size:26px;letter-spacing:-1px;opacity:.4}.chapter-number small{display:none}.scene{min-height:490px;border-radius:20px}.chapter-kicker{font-size:8px}.discover{padding-top:70px}.hero-shelf{margin-bottom:0}.journey-stack.wrap{padding-left:18px;padding-right:18px}.use-case:nth-child(n){transform:none}.notification-demo h4{font-size:17px}.trend-card{width:84%}.scene-caption{font-size:7px}.hero-shelf{border-radius:25px}.chapter-copy h3{max-width:310px}}
@media(max-width:420px){.scene{min-height:450px}.scan-document{width:81%;top:38px;padding:23px 20px}.scan-result{bottom:48px;width:91%;padding:16px}.scan-result strong{font-size:11px}.trend-card{top:32px;padding:20px}.sona-explanation{left:7%;right:4%;bottom:42px;padding:15px}.trend-value{font-size:37px}.scene .trend-graph{height:83px}.routine-clock{font-size:59px;top:20px}.notification-demo{width:91%;top:134px;padding:20px}.routine-days{bottom:49px;gap:10px}.routine-days i{width:24px;height:24px}.medical-demo{left:6%;width:87%;padding:20px;top:58px}.medical-demo h4{font-size:15px}.share-demo{left:10%;right:4%;bottom:75px;padding:18px 13px}.expiry-track{bottom:51px}.chapter h3{font-size:36px}.hero h1{font-size:43px}.hero-portrait{right:50%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene *{animation:none!important}.scan-beam,.demo-cursor,.take-before{display:none}.take-after{position:static;opacity:1}.chart-line{stroke-dashoffset:0}.today-check{background:#0b0d12;color:#c2f622}.reveal-ready{opacity:1;transform:none;transition:none}.chapter{position:relative;top:0}.pill{transition:none}}

/* Let the mobile hero follow its content instead of reserving a fixed-height gap. */
@media(max-width:800px){
  .hero-grid{min-height:0;padding-top:48px;align-items:center;gap:40px}
  .hero-copy{width:100%;text-align:center}
  .hero h1{margin:0 auto 22px}
  .hero-sub{margin:0 auto;max-width:440px}
  .hero-actions{justify-content:center;margin-top:24px}
  .hero-portrait{position:relative;right:auto;bottom:auto;transform:none;flex-shrink:0}
}
@media(max-width:540px){
  .hero-grid{padding-top:38px;gap:36px}
  .hero h1{margin-bottom:20px}
  .hero-sub{max-width:350px;line-height:1.75}
  .hero-portrait{max-width:calc(100vw - 56px)}
}

@media(max-width:800px){.hero-actions{display:none}}

.nav .pill.small{padding:13px 20px}

/* Product stories: one deliberate sequence, then a readable resting state. */
.journey{padding-top:86px;background:#f3f2ef}
.journey-intro{padding-bottom:62px}
.journey-intro h2{font-size:clamp(42px,5.5vw,72px);letter-spacing:-3.5px;margin:20px 0}
.journey-intro p{margin-bottom:0}
.chapter{box-shadow:0 -8px 32px #0b0d1206;border-color:#0b0d1209}
.chapter-copy{padding:42px 32px}
.chapter-copy>p{font-size:15px;line-height:1.7;opacity:.7;max-width:290px}
.chapter h3{margin-top:38px}
.chapter-records{background:#fff}
.scene-scan{background:radial-gradient(ellipse at 65% 30%,#e6edca 0%,#e9eae5 50%,#dfe2da 100%)}
.record-orbit{position:absolute;width:440px;height:440px;border:1px solid #75834b18;border-radius:50%;box-shadow:0 0 0 52px #75834b07}
.source-tile{position:absolute;display:flex;align-items:center;gap:10px;padding:16px 18px;background:#ffffffdb;border:1px solid #fff;border-radius:15px;box-shadow:0 14px 40px #19210b12;font-size:11px;z-index:3;animation:source-gather 7s var(--ease-out) both}
.source-tile svg{width:20px;height:20px;color:#657735}.source-tile small{display:block;font-size:9px;margin-top:4px;color:#7c8073}
.source-email{left:6%;top:82px;--source-rotation:-9deg;--source-x:65px;--source-y:90px}
.source-photo{right:5%;top:140px;--source-rotation:8deg;--source-x:-65px;--source-y:40px;animation-delay:.2s}
.organized-record{position:absolute;top:115px;width:76%;max-width:330px;background:#fff;border:1px solid #fff;border-radius:22px;padding:25px;box-shadow:0 28px 65px -25px #18220b42;overflow:hidden;animation:record-arrive 7s var(--ease-out) both}
.record-topline{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#95978d}.record-topline img{width:57px;height:auto}
.record-file-icon{background:#edf3da;border-radius:12px;width:42px;height:42px;display:grid;place-items:center;margin:25px 0 16px;color:#5f7724}
.organized-record h4{font-size:22px;letter-spacing:-.8px;margin:0}.organized-record>p{font-size:10px;color:#85877e;margin:7px 0 22px}
.record-value{display:flex;justify-content:space-between;gap:8px;padding:13px 0;border-top:1px solid #eff0eb;font-size:11px;animation:value-arrive 7s var(--ease-out) both}
.record-value b{font-size:14px}.record-value small{font-size:9px;font-weight:400;color:#85877e}
.record-original{font-size:9px;color:#85877e;display:flex;gap:6px;align-items:center;margin-top:15px}.record-original svg{width:13px;height:13px;flex-shrink:0}
.record-scan-light{position:absolute;left:0;right:0;height:2px;top:75px;background:#b6e51a;box-shadow:0 0 24px 5px #c2f62255;animation:record-light 7s ease both}
.record-ready{position:absolute;bottom:67px;left:15%;right:8%;display:flex;align-items:center;gap:12px;background:#171920;color:#fff;padding:18px 20px;border:1px solid #ffffff18;border-radius:17px;box-shadow:0 18px 35px #0002;z-index:4;animation:record-ready 7s var(--ease-out) both}
.record-ready>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#c2f622;color:#101116;flex-shrink:0}.record-ready svg{width:17px;height:17px}.record-ready strong{font-size:12px}.record-ready small{display:block;font-size:10px;color:#a9adb6;margin-top:5px}
.demo-sequence{position:absolute;left:0;right:0;top:25px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:9px;color:#62685a}.demo-sequence i{height:1px;width:20px;background:#adb49c}
.scene .scene-replay{position:absolute;bottom:14px;right:15px;z-index:8;border:1px solid currentColor;background:transparent;color:inherit;opacity:.55;border-radius:20px;padding:7px 11px;font-size:10px;min-height:32px;transition:opacity .2s}.scene-replay:hover,.scene-replay:focus-visible{opacity:1}.scene-caption{left:15px;bottom:25px;padding:0;font-size:7px}
.scene *{animation-iteration-count:1!important;animation-fill-mode:both!important}
.scene.demo-reset *{animation-name:none!important}
.scene .demo-cursor{display:none}
@keyframes source-gather{0%,12%{opacity:0;transform:translateY(15px) rotate(var(--source-rotation))}23%,35%{opacity:1;transform:translateY(0) rotate(var(--source-rotation))}53%,100%{opacity:0;transform:translate(var(--source-x),var(--source-y)) scale(.8)}}
@keyframes record-arrive{0%,30%{opacity:0;transform:translateY(22px) scale(.94)}55%,100%{opacity:1;transform:none}}
@keyframes value-arrive{0%,57%{opacity:0;transform:translateY(8px)}75%,100%{opacity:1;transform:none}}
@keyframes record-light{0%,48%{opacity:0;transform:translateY(0)}52%{opacity:1}76%{opacity:1;transform:translateY(240px)}80%,100%{opacity:0;transform:translateY(240px)}}
@keyframes record-ready{0%,72%{opacity:0;transform:translateY(14px)}88%,100%{opacity:1;transform:none}}
@keyframes draw{0%,8%{stroke-dashoffset:390}60%,100%{stroke-dashoffset:0}}
@keyframes result-dot{0%,48%{opacity:0}60%,100%{opacity:1}}
@keyframes explain{0%,52%{opacity:0;transform:translateY(18px)}72%,100%{opacity:1;transform:none}}
@keyframes share{0%,20%{opacity:0;transform:translateY(20px)}55%,100%{opacity:1;transform:none}}
@keyframes taken{0%,38%{opacity:0}45%,100%{opacity:1}}
@keyframes untaken{0%,38%{opacity:1}45%,100%{opacity:0}}
@keyframes day-fill{0%,38%{background:transparent;color:transparent}45%,100%{background:#0b0d12;color:#c2f622}}
@media(max-width:800px){
.journey{padding-top:55px}.journey-intro{padding-bottom:35px}.journey-intro h2{letter-spacing:-2px}.journey-intro p{max-width:260px;margin:0 auto;line-height:1.6}
.chapter-copy{padding:27px 22px 25px}.chapter h3{font-size:35px;line-height:1.08;margin:22px 0 13px}.chapter-copy>p{padding:0;max-width:360px;font-size:13px}.chapter-number{font-size:22px}
.scene-scan{min-height:490px}.organized-record{top:105px;padding:22px;width:80%}.record-file-icon{margin-top:18px}.organized-record h4{font-size:20px}.record-ready{left:8%;right:5%;bottom:57px;padding:16px}.source-email{top:90px;left:5%}.source-photo{top:180px;right:5%}.record-original{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.source-tile,.record-scan-light,.scene-replay{display:none}.organized-record,.record-value,.record-ready{opacity:1;transform:none}.scene *{animation:none!important}}

.organized-record{top:75px}
@media(max-width:800px){.scene-scan{min-height:510px}.organized-record{top:55px}}