/*
Theme Name: Sooth Aura
Theme URI: https://soothapp.com/
Author: Sooth
Description: Original, lightweight premium wellness website theme for Sooth. No external tracking, no Elementor dependency.
Version: 2.1.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: sooth-aura
License: Proprietary — customized for Sooth
*/
:root{--ink:#25354d;--muted:#6f8198;--blue:#5486c3;--blue-deep:#355f9d;--sky:#bfe9fa;--cream:#fcfdfd;--line:#dfebf4;--shadow:0 22px 70px rgba(72,117,161,.12);--radius:26px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;background:#fbfdff;color:var(--ink);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,a{transition:background .2s ease,transform .2s ease,box-shadow .2s ease}a:focus-visible,button:focus-visible{outline:3px solid #7ecbe8;outline-offset:4px}img{max-width:100%;height:auto}.container{width:min(1180px,calc(100% - 56px));margin:0 auto}.micro{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#5789bd}.section{padding:112px 0}.section-head{max-width:690px;margin:0 auto 50px;text-align:center}.section-head h2,.echo-copy h2,.steps-intro h2,.closing h2{font-size:clamp(35px,4.3vw,56px);line-height:1.13;letter-spacing:-.047em;font-weight:740;margin:14px 0 19px}.section-head p,.echo-copy p,.steps-intro p,.closing p{line-height:1.8;color:var(--muted);font-size:17px}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:15px 27px;font-size:14px;font-weight:750;white-space:nowrap;border:1px solid transparent}.button-primary{color:white;background:linear-gradient(120deg,#4c7bb9,#75a3d6);box-shadow:0 12px 26px #5486c33d}.button-primary:hover{transform:translateY(-2px);box-shadow:0 17px 31px #5486c34e}.button-outline{background:#ffffffb9;color:#416995;border-color:#d5e3f0}.button-outline:hover{background:white;transform:translateY(-2px)}.button-light{color:#386ca1;background:#fff;box-shadow:0 10px 22px #1a51871e}.button-light:hover{transform:translateY(-2px)}
/* Header */
.site-header{position:sticky;top:0;z-index:40;background:#ffffffde;border-bottom:1px solid #e7f0f780;backdrop-filter:blur(18px)}body.admin-bar .site-header{top:32px}.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:86px;gap:20px}.brand{display:inline-flex;align-items:center;gap:12px;font-size:29px;letter-spacing:-.065em;font-weight:750;color:#2b587d}.brand-mark{width:43px;height:43px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(150deg,#bceffc,#8dbcec 65%,#658dc8);box-shadow:0 8px 17px #98c2e544;color:white;font-size:25px;font-weight:700}.brand span:last-child{line-height:1}.nav-links{display:flex;align-items:center;gap:34px;font-size:14px;color:#526d89;font-weight:620}.nav-links a:hover{color:#356fb4}.nav-cta{padding:12px 21px;border:1px solid #d0e3f4;border-radius:999px;color:#396a9e;font-size:13px;font-weight:800;background:#f3f9ff}.nav-cta:hover{background:#e5f3fc}.mobile-menu{display:none;background:transparent;border:0;color:#4d759a;font-size:27px;cursor:pointer}
/* Hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse 54% 52% at 85% 34%,#dcf5ff 1%,transparent 82%),radial-gradient(ellipse 49% 55% at 2% 90%,#e6eafb 1%,transparent 82%),linear-gradient(165deg,#fbfdff,#f4f9ff 65%,#fcfdff);padding:104px 0 98px}.hero:before{content:"";position:absolute;width:390px;height:390px;border:1px solid #ffffffb5;border-radius:50%;left:-210px;top:-85px}.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:7%;align-items:center}.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:999px;background:#ffffffce;border:1px solid #dcebf7;box-shadow:0 7px 18px #bfd6ea37;color:#587fa8;font-weight:730;letter-spacing:.055em;text-transform:uppercase;font-size:11px}.eyebrow-dot{display:inline-block;background:#78c9de;width:8px;height:8px;border-radius:100%;box-shadow:0 0 0 4px #a7e6ee4a}.hero h1{font-size:clamp(48px,5.1vw,76px);line-height:1.08;letter-spacing:-.064em;margin:28px 0 25px;font-weight:770}.hero h1 em{font-style:normal;color:#5a8bc5}.hero-lead{font-size:18px;color:#688199;line-height:1.8;max-width:510px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:33px}.hero-note{font-size:13px;color:#8a9cae;margin-top:26px}.hero-display{min-height:590px;position:relative;display:flex;align-items:center;justify-content:center}.hero-blob{position:absolute;inset:30px 5px 20px 0;border-radius:48% 52% 53% 47% / 47% 45% 55% 53%;transform:rotate(-10deg);background:linear-gradient(145deg,#e7f8ff,#d2ebfb 56%,#dce6fc);border:1px solid #fff;filter:drop-shadow(0 24px 48px #a8cde15b)}.float-card{position:absolute;z-index:3;background:#ffffffeb;border:1px solid #ffffff;box-shadow:0 16px 44px #6b9aba32;border-radius:20px;padding:15px 19px;backdrop-filter:blur(10px);font-size:13px;line-height:1.5}.float-card strong{display:block;color:#3b6797;font-size:13px}.float-card span{color:#8b9eaf;font-size:12px}.float-one{left:0;top:104px;transform:rotate(-5deg)}.float-two{right:-2%;bottom:88px;transform:rotate(5deg)}.icon-circle{display:inline-flex;width:33px;height:33px;border-radius:12px;background:#e5f5fe;color:#4b86bb;align-items:center;justify-content:center;font-size:18px;margin-right:9px;vertical-align:middle}.phone{width:284px;height:568px;padding:10px;position:relative;z-index:2;border-radius:46px;background:#182944;box-shadow:0 26px 70px #36576a4c,0 0 0 6px #8fb0c5 inset;transform:rotate(6deg)}.phone-screen{height:100%;width:100%;background:linear-gradient(#f7fcff,#e9f4fd);border-radius:36px;padding:36px 20px 22px;overflow:hidden}.phone-speaker{position:absolute;top:17px;left:50%;transform:translateX(-50%);width:82px;height:19px;border-radius:99px;background:#182944;z-index:2}.phone-small{font-size:12px;color:#6b89a5;font-weight:650}.phone-title{font-size:23px;font-weight:780;letter-spacing:-.05em;margin:8px 0 0}.phone-echo{display:block;width:135px;height:154px;object-fit:contain;object-position:center;margin:8px auto 4px;filter:drop-shadow(0 10px 6px #519fc124)}.phone-calm{font-size:12px;text-align:center;color:#7590a9;line-height:1.45;margin:0 0 17px}.phone-card{background:#fff;border:1px solid #e2edf7;border-radius:16px;box-shadow:0 5px 15px #7da6be18;padding:12px 13px;margin:8px 0}.phone-card-label{font-size:12px;font-weight:750;color:#426d9c}.phone-card p{margin:5px 0 0;color:#8da0b3;font-size:10px;line-height:1.3}.phone-chip{border-radius:8px;background:#edf8ff;padding:7px 9px;margin-top:9px;display:inline-block;color:#5e8eb7;font-weight:750;font-size:10px}.phone-action{margin-top:14px;text-align:center;background:#5f91ca;color:white;padding:12px;border-radius:12px;font-size:12px;font-weight:800}
/* Trust strip */
.trust-strip{border-top:1px solid #eaf1f8;border-bottom:1px solid #eaf1f8;background:#ffffffeb;padding:25px 0}.trust-items{display:flex;align-items:center;justify-content:center;gap:70px;flex-wrap:wrap}.trust-items span{font-size:13px;color:#6a8099;font-weight:650}.trust-items b{font-size:17px;margin-right:8px;color:#65a4cb;font-weight:600}
/* Features */
.features{background:#fff}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.feature-card{padding:33px 28px 31px;border-radius:25px;background:linear-gradient(150deg,#ffffff,#fafdff);border:1px solid #e8f1f8;box-shadow:0 14px 39px #5f86ae10;min-height:254px}.feature-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px #5984ad1c}.feature-icon{width:55px;height:55px;border-radius:19px;display:grid;place-items:center;background:linear-gradient(140deg,#e8f7ff,#e7eefd);color:#6494c1;font-size:27px;margin-bottom:21px}.feature-card h3{font-size:21px;letter-spacing:-.035em;margin:0 0 10px}.feature-card p{font-size:14px;line-height:1.75;color:#7d91a5;margin:0}
/* Echo */
.echo-section{background:linear-gradient(130deg,#eff9ff,#f0f6ff 55%,#edf4fd)}.echo-layout{display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:8%}.echo-art{position:relative;min-height:510px;display:flex;align-items:center;justify-content:center}.echo-orbit{position:absolute;width:470px;max-width:95%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 26%,#fff 0,#e3f3ff 61%,#d7eafa);box-shadow:0 20px 65px #91b4d445}.echo-art img{position:relative;z-index:1;max-width:77%;max-height:390px;object-fit:contain;filter:drop-shadow(0 23px 16px #6f9eb62e)}.echo-copy p{max-width:510px}.text-link{display:inline-flex;align-items:center;gap:10px;margin-top:16px;color:#437cad;font-weight:780;font-size:14px}
/* Steps */
.steps-section{background:#fff}.steps-layout{display:grid;grid-template-columns:.81fr 1.19fr;gap:9%;align-items:start}.steps-intro{position:sticky;top:140px}.steps-list{display:grid;gap:16px}.step-card{display:grid;grid-template-columns:58px 1fr;gap:17px;border-radius:22px;padding:25px;background:#f7fbff;border:1px solid #e8f2f9}.step-number{border-radius:17px;background:#e3f1fc;color:#6c9bc4;font-size:22px;font-weight:760;width:55px;height:55px;display:grid;place-items:center}.step-card h3{font-size:19px;margin:0 0 8px}.step-card p{font-size:14px;color:#7b90a5;line-height:1.7;margin:0}
/* Closing */
.closing-section{padding:30px 0 90px;background:#fff}.closing{border-radius:38px;padding:80px 40px;text-align:center;background:radial-gradient(ellipse at 80% 20%,#86c7e5 0,transparent 52%),linear-gradient(130deg,#568ac1,#698fd0);color:white;position:relative;overflow:hidden}.closing:before{content:"";position:absolute;left:-120px;bottom:-200px;width:480px;height:480px;border-radius:50%;border:1px solid #ffffff50}.closing h2{max-width:670px;margin:16px auto}.closing p{color:#f4faff;max-width:560px;margin:0 auto 28px}.closing .micro{color:#e5f6ff}.store-actions{display:flex;justify-content:center;gap:13px;flex-wrap:wrap}.release-note{font-size:13px;color:#ecf8ff;margin-top:22px}
/* Footer */
.site-footer{background:#f8fbff;border-top:1px solid #e3edf6;padding:45px 0 25px}.footer-main{display:flex;justify-content:space-between;gap:40px;align-items:flex-start}.footer-intro{max-width:430px}.footer-intro p{color:#8498aa;font-size:13px;line-height:1.75}.footer-links{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:16px;font-size:13px;color:#64819f}.footer-links a:hover{text-decoration:underline}.footer-legal{border-top:1px solid #e3edf6;margin-top:34px;padding-top:22px;color:#90a3b6;font-size:12px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}
/* Pages */
.inner-hero{padding:90px 0 54px;background:linear-gradient(150deg,#f0f9ff,#fff)}.inner-hero h1{font-size:clamp(38px,5vw,64px);line-height:1.12;letter-spacing:-.05em;margin:9px 0 0}.page-content{max-width:810px;margin:0 auto;padding:55px 0 120px;color:#52667b;line-height:1.82;font-size:16px;overflow-wrap:anywhere}.page-content h2,.page-content h3{color:#284864;line-height:1.3;margin-top:38px}.page-content a{color:#447fb2;text-decoration:underline;text-underline-offset:3px}.notice{border-radius:22px;background:#f0f8fe;border:1px solid #cfe9f9;padding:22px 28px;margin:25px 0}.notice strong{color:#3c6f9e}.page-content ul{padding-left:23px}.page-content li{margin:11px 0}.page-content .button{text-decoration:none}.error-page{text-align:center}
@media(max-width:1000px){.hero-grid{gap:3%}.hero h1{font-size:56px}.phone{width:250px;height:520px}.phone-screen{padding-top:31px}.phone-echo{width:110px;height:127px}.float-one{left:-15px}.float-two{right:-10px}.steps-layout{gap:5%}}
@media(max-width:800px){.container{width:min(100% - 40px,640px)}.header-inner{min-height:74px}.nav-links{display:none;position:absolute;left:0;top:74px;width:100%;background:#fff;box-shadow:0 16px 25px #436d8c1c;padding:22px;flex-direction:column;align-items:center;gap:22px}.nav-links.is-open{display:flex}.mobile-menu{display:block}.nav-cta{display:none}.hero{padding:70px 0}.hero-grid{grid-template-columns:1fr;text-align:center;gap:40px}.hero-lead{margin:auto}.hero-actions{justify-content:center}.hero h1{font-size:clamp(47px,8vw,69px)}.hero-display{min-height:565px}.hero-blob{inset:0 10% 0}.float-one{left:5%}.float-two{right:4%}.trust-items{gap:15px 27px}.section{padding:78px 0}.feature-grid{grid-template-columns:repeat(2,1fr)}.echo-layout{grid-template-columns:1fr;gap:30px}.echo-art{min-height:380px}.echo-orbit{width:370px}.echo-art img{max-height:305px}.echo-copy{text-align:center}.echo-copy p{margin-left:auto;margin-right:auto}.steps-layout{grid-template-columns:1fr;gap:33px}.steps-intro{position:static;text-align:center}.footer-main{display:block}.footer-links{margin-top:30px}.closing{padding:60px 28px}}
@media(max-width:540px){.container{width:calc(100% - 34px)}.hero{padding:58px 0 65px}.hero h1{font-size:47px}.hero-lead{font-size:16px}.hero-actions{flex-direction:column;align-items:stretch}.button{white-space:normal}.hero-display{min-height:540px}.phone{width:242px;height:499px}.float-one{top:30px;left:-6px}.float-two{right:-9px;bottom:42px}.float-card{padding:10px 12px;font-size:12px}.feature-grid{grid-template-columns:1fr}.feature-card{min-height:0}.section-head h2,.echo-copy h2,.steps-intro h2,.closing h2{font-size:38px}.closing{border-radius:25px}.footer-legal{display:block}.footer-legal span{display:block;margin:8px 0}.trust-items{justify-content:flex-start}.trust-items span{font-size:12px}.echo-art{min-height:335px}}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Actual product imagery */
.appshot-hero{position:relative;z-index:2;width:294px;height:574px;padding:8px;border-radius:43px;background:#17243d;box-shadow:0 28px 70px #36576a4c,0 0 0 4px #829db8 inset;transform:rotate(5deg);overflow:hidden}
.appshot-hero img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:35px;display:block}
.breath-art img{max-height:590px;max-width:78%;border-radius:32px;box-shadow:0 25px 48px #5389b61e}
.showcase-section{background:linear-gradient(165deg,#fff,#f6fbff)}.showcase-layout{max-width:1000px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center}.showcase-copy{padding:20px 0}.showcase-copy h3{font-size:clamp(29px,3vw,40px);letter-spacing:-.045em;line-height:1.2;margin:20px 0}.showcase-copy p{color:var(--muted);font-size:17px;line-height:1.7}.showcase-badge{display:inline-block;border-radius:50px;background:#e6f3ff;color:#4c80b3;font-size:13px;font-weight:760;padding:11px 17px}.showcase-pill{border:1px solid #dfebf6;background:#fff;border-radius:17px;padding:15px 19px;margin:13px 0;color:#517d9f;font-size:15px;font-weight:650;box-shadow:0 9px 25px #517a9a0b}.showcase-copy .showcase-small{font-size:12px;color:#9ab0c4;margin-top:21px}.showcase-phone{text-align:center;background:radial-gradient(ellipse at 50% 50%,#ddf2ff 0,transparent 65%)}.showcase-phone img{height:590px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 20px 24px #6b94b32e)}
.companions-section{background:#f0f8ff}.companion-layout{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:7%}.companion-copy h2{font-size:clamp(36px,4.4vw,55px);line-height:1.13;letter-spacing:-.048em;margin:16px 0 22px}.companion-copy p{font-size:17px;line-height:1.8;color:var(--muted)}.companion-art img{width:100%;max-height:490px;object-fit:contain;filter:drop-shadow(0 18px 24px #91b4d126)}
@media(max-width:800px){.appshot-hero{height:520px;width:268px}.showcase-layout,.companion-layout{grid-template-columns:1fr;gap:35px}.showcase-copy,.companion-copy{text-align:center}.showcase-phone img{height:530px}.companion-art{text-align:center}.companion-art img{max-height:380px}.breath-art img{max-height:430px}}
@media(max-width:540px){.appshot-hero{width:239px;height:495px}.breath-art img{max-height:350px}.showcase-phone img{height:440px}.showcase-copy h3{font-size:31px}.companion-art img{max-height:330px}}

/* Sooth Aura 1.2: 2026 product visuals, original breathing + companion animations */
:root {--ink:#233759;--muted:#6d83a3;--blue:#638bcc;--blue-deep:#436bb5;--sky:#d6eeff;--line:#e0eaf7}
body{background:#fbfdff}
.micro{color:#627fbc}
.brand-icon{width:43px;height:43px;border-radius:14px;box-shadow:0 5px 16px #719bd02e;object-fit:cover}
.hero{background:radial-gradient(ellipse 52% 54% at 85% 28%,#dcf2ff 1%,transparent 82%),radial-gradient(ellipse 57% 55% at 0% 90%,#ecedff 1%,transparent 82%),linear-gradient(165deg,#fbfdff,#f3f7ff 65%,#fff)}
.hero h1 em{color:#6988d1}
.button-primary{background:linear-gradient(110deg,#597cc9,#7a9be0)}
.eyebrow{color:#637bb6}
.appshot-hero{transform:rotate(4deg);box-shadow:0 27px 70px #4a6d9a43,0 0 0 4px #849ab7 inset}
.echo-section{background:linear-gradient(126deg,#e7f5ff 5%,#eef2ff 66%,#f6fbff)}
.animated-echo{min-height:530px;flex-direction:column}
.echo-orbit{width:480px;max-width:94%;background:radial-gradient(circle at 45% 30%,#ffffffef,#deefff 63%,#d2e5ff);box-shadow:0 19px 75px #9fbfe26e}
.echo-animation-holder{z-index:2;position:relative;width:min(90%,420px);aspect-ratio:1;display:grid;place-items:center}
.sooth-loop{display:block;width:100%;height:100%;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 16px 16px #709ac229)}
.video-fallback{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.breathing-badge{z-index:3;background:#ffffffd6;backdrop-filter:blur(12px);border:1px solid white;box-shadow:0 12px 28px #6494bc20;border-radius:99px;padding:11px 18px;font-size:13px;color:#6482af;font-weight:700;display:flex;align-items:center;gap:10px;margin-top:-13px}
.breath-dot{display:inline-block;border-radius:50%;width:10px;height:10px;background:#80c5dc;box-shadow:0 0 0 6px #c8edf6aa;animation:breathing-pulse 7s ease-in-out infinite}
@keyframes breathing-pulse{50%{transform:scale(1.3);background:#719ce0}}
.showcase-section{background:linear-gradient(165deg,#fff,#f8fbff)}
.showcase-pill{border-color:#dfeafa;background:#fcfeff}
.companions-section{background:linear-gradient(145deg,#edf7ff,#f0f4ff 65%,#f9fcff)}
.character-row{max-width:1010px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:26px}
.character-tile{position:relative;height:420px;border-radius:34px;overflow:hidden;display:flex;justify-content:center;align-items:flex-end;border:1px solid #ffffffdb;box-shadow:0 19px 53px #5e86aa16}
.boy-tile{background:radial-gradient(circle at 50% 52%,#e3f6ff,#f7fbff 80%)}
.girl-tile{background:radial-gradient(circle at 48% 56%,#eae9ff,#fcfaff 82%)}
.character-video{position:relative;z-index:2;width:min(93%,390px);height:calc(100% - 35px);object-position:bottom;object-fit:contain}
.character-tile .video-fallback{top:35px;height:calc(100% - 35px)}
.character-label{position:absolute;z-index:3;top:21px;left:24px;font-size:12px;letter-spacing:.04em;font-weight:850;color:#6080b2;background:#ffffffbd;border:1px solid #ffffffc9;padding:10px 16px;border-radius:99px}
.character-note{text-align:center;color:#8b9db5;margin:26px auto 0;font-size:14px}
.learning-section{background:#fff}
.learning-layout{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:5%;min-height:480px}
.learning-illustration{display:flex;align-items:center;justify-content:center;min-height:420px;background:radial-gradient(ellipse at 55% 55%,#eaf7ff 0%,transparent 68%)}
.learning-illustration img{width:100%;max-width:650px;max-height:440px;object-fit:contain;filter:drop-shadow(0 17px 15px #6d96b321)}
.learning-copy h2{font-size:clamp(36px,4.1vw,53px);line-height:1.12;letter-spacing:-.047em;margin:15px 0 19px}
.learning-copy p{font-size:17px;line-height:1.78;color:var(--muted)}
.closing{background:radial-gradient(ellipse at 80% 20%,#91cbe8 0%,transparent 52%),linear-gradient(130deg,#648acb,#7893d4)}
@media(max-width:1050px){.nav-links{gap:20px}}
@media(max-width:800px){.animated-echo{min-height:390px}.echo-animation-holder{width:min(90%,340px)}.character-row{gap:14px}.character-tile{height:350px}.learning-layout{grid-template-columns:1fr;gap:20px}.learning-illustration{min-height:300px}.learning-illustration img{max-height:330px}.learning-copy{text-align:center}.learning-copy p{max-width:560px;margin:0 auto 16px}}
@media(max-width:540px){.animated-echo{min-height:330px}.echo-animation-holder{width:min(92%,300px)}.character-row{gap:10px}.character-tile{height:260px;border-radius:21px}.character-video{height:calc(100% - 38px);width:99%}.character-tile .video-fallback{top:38px;height:calc(100% - 38px)}.character-label{top:11px;left:10px;padding:7px 11px;font-size:11px}.learning-illustration{min-height:235px}.learning-illustration img{max-height:265px}.learning-copy h2{font-size:38px}}
@media(prefers-reduced-motion:reduce){.breath-dot{animation:none}}
.echo-animation-holder.media-ready .video-fallback,.character-tile.media-ready .video-fallback{display:none}

/* Sooth Aura 1.3: faster Echo playback and a genuine pixel-preserved original Insights screenshot, framed cleanly in CSS */
.echo-animation-holder video{width:100%;height:100%;object-fit:contain;transform:translateZ(0);will-change:transform;mask-image:radial-gradient(circle at center,#000 65%,#000 81%,transparent 100%);-webkit-mask-image:radial-gradient(circle at center,#000 65%,#000 81%,transparent 100%)}
.showcase-phone{display:flex;justify-content:center;align-items:center;min-height:600px;background:radial-gradient(ellipse at 50% 55%,#e4f6ff,transparent 68%)}
.insights-device{position:relative;box-sizing:border-box;padding:12px;width:min(100%,286px);aspect-ratio:696 / 1554;background:linear-gradient(130deg,#252a34,#090b0f 52%,#343b48);border:3px solid #363c49;border-radius:44px;box-shadow:0 30px 58px #557eac29, inset 0 0 0 1px #9ba5b11f;overflow:hidden;transform:rotate(1deg)}
.insights-screen{width:100%;height:100%;border-radius:33px;overflow:hidden;background:#f6f8ff;display:block}
.insights-screen img{display:block;height:100%;width:100%;object-fit:cover;object-position:center top;filter:none}
@media(max-width:800px){.showcase-phone{min-height:555px}.insights-device{width:min(100%,265px)}}
@media(max-width:540px){.showcase-phone{min-height:525px}.insights-device{width:min(100%,247px)}}
.footer-legal{gap:25px;line-height:1.75;flex-wrap:wrap}

/* Fade the entire video container into the background, avoiding a visible matte rectangle. */
.echo-animation-holder{border-radius:50%;overflow:hidden;-webkit-mask-image:radial-gradient(circle at center,#000 91%,transparent 100%);mask-image:radial-gradient(circle at center,#000 91%,transparent 100%)}
.echo-animation-holder .video-fallback{border-radius:50%}

/* Fade the entire video container into the background, avoiding a visible matte rectangle. */
.echo-animation-holder{border-radius:50%;overflow:hidden;-webkit-mask-image:radial-gradient(circle at center,#000 64%,transparent 91%);mask-image:radial-gradient(circle at center,#000 64%,transparent 91%)}
.echo-animation-holder .video-fallback{border-radius:50%}

/* Seamless hardware-decoded Echo video: the matte exactly matches the left-side section. */
.echo-section{background:linear-gradient(95deg,#e9f5ff 0%,#e9f5ff 44%,#eff2ff 100%)}
.echo-animation-holder,.echo-animation-holder video{overflow:visible;border-radius:0;mask-image:none;-webkit-mask-image:none;clip-path:none}
.echo-orbit{background:radial-gradient(circle at 50% 50%,#e9f5ff 45%,#e9f5ff 100%);box-shadow:none}

/* V4.2: anchored sections stay visible below the sticky header. */
html{scroll-padding-top:110px}
section[id],div[id]{scroll-margin-top:110px}
@media(max-width:800px){html{scroll-padding-top:100px}section[id],div[id]{scroll-margin-top:100px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* V4.5: approachable, responsive guide articles and a guides library. */
.guides-section{background:linear-gradient(180deg,#fff,#f5faff)}
.guides-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.guide-card{background:#fff;border:1px solid #e4edf7;border-radius:27px;padding:31px 27px;box-shadow:0 16px 46px #5076a510;min-height:258px;display:flex;flex-direction:column}
.guide-card h2,.guide-card h3{font-size:clamp(21px,2vw,27px);line-height:1.25;letter-spacing:-.025em;margin:17px 0 12px}
.guide-card h2 a:hover,.guide-card h3 a:hover{color:var(--blue-deep)}
.guide-card p{line-height:1.7;color:var(--muted);margin:0 0 22px}
.guide-card .text-link{margin-top:auto}
.guides-more{text-align:center;margin-top:33px}.guides-intro{font-size:18px;line-height:1.75;color:var(--muted);max-width:730px}
.guides-pagination{text-align:center;padding-top:36px}.guides-pagination .page-numbers{padding:10px 14px;border-radius:10px;margin:0 3px;background:#f0f7ff}
.guides-pagination .page-numbers.current{background:#385f9b;color:white}
.guide-byline{font-size:14px;color:#60758d;margin-top:24px;line-height:1.7}
.guide-content-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:60px;align-items:start;padding-top:60px;padding-bottom:90px}
.guide-prose{max-width:none;min-width:0;padding:0;line-height:1.83;font-size:17px}
.guide-prose h2{font-size:clamp(26px,3vw,35px);line-height:1.27;letter-spacing:-.028em;margin:38px 0 13px}
.guide-prose h3{font-size:22px;margin:27px 0 11px}
.guide-prose a:not(.button){color:#245fac;text-decoration:underline;text-decoration-color:#8ab7e9;text-underline-offset:3px}
.guide-prose p,.guide-prose li{color:#405671}.guide-prose ol,.guide-prose ul{padding-left:27px}.guide-prose li{margin-bottom:13px}
.guide-disclaimer{padding:23px 25px;border-radius:20px;background:#f1f7ff;border:1px solid #deebfa;margin-top:38px}
.guide-disclaimer p{margin:10px 0 0;font-size:14px;line-height:1.7}
.guide-aside{position:sticky;top:112px}.guide-aside-card{background:linear-gradient(145deg,#eef8ff,#f5f0ff);border-radius:26px;padding:25px;box-shadow:0 15px 35px #6e9cca1c}
.guide-aside-card img{display:block;max-width:125px;max-height:125px;object-fit:contain;margin:0 auto 12px}
.guide-aside-card h2{font-size:25px;line-height:1.2;margin:0 0 8px}.guide-aside-card p{color:#586f8b;line-height:1.7;font-size:15px}
.guide-aside-card .button{font-size:13px;white-space:normal;text-align:center;padding:13px 15px}
.guide-aside-card .aside-note{font-size:12px;margin-bottom:0}
@media(max-width:900px){.guides-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-content-layout{grid-template-columns:1fr;gap:20px}.guide-aside{position:static;max-width:440px}}
@media(max-width:610px){.guides-grid{grid-template-columns:1fr}.guide-card{min-height:unset}.guide-content-layout{padding-top:34px;padding-bottom:55px}.guide-prose{font-size:16px}.guide-prose h2{margin-top:29px}}

/* V4.7: original full-height app screenshot, no cropped bottom navigation. */
.appshot-hero{width:290px;height:auto;aspect-ratio: .462;border-radius:45px;padding:9px}
.appshot-hero img{object-fit:contain;width:100%;height:100%;border-radius:35px;background:#f5f8fd}
.hero-display{min-height:650px}
@media(max-width:800px){.appshot-hero{width:263px;height:auto}.hero-display{min-height:615px}}
@media(max-width:540px){.appshot-hero{width:235px;height:auto}.hero-display{min-height:558px}.float-one{top:29px}.float-two{bottom:50px}}
/* V4.7: unified legal/support pages, with readable cards on every device. */
.legal-hero{padding:83px 0 63px;background:radial-gradient(ellipse 50% 90% at 90% 20%,#d9efff 0%,transparent 75%),linear-gradient(140deg,#f1f8ff,#fafcff 64%,#f8f5ff)}
.legal-hero h1{font-size:clamp(43px,5vw,65px);line-height:1.12;letter-spacing:-.055em;margin:13px 0 16px;max-width:850px}
.legal-hero p{font-size:17px;color:#5f7690;line-height:1.75;max-width:780px;margin:0}
.legal-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.legal-pill{font-size:12px;font-weight:750;color:#5276a4;background:#fff;border:1px solid #e0eaf5;border-radius:99px;padding:9px 13px}
.legal-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:50px;align-items:start;padding:58px 0 100px}
.legal-content{padding:0;max-width:none;min-width:0;color:#495f79;font-size:16px;line-height:1.9;overflow-wrap:anywhere}
.legal-content h2{font-size:clamp(22px,2.6vw,30px);color:#284662;line-height:1.3;letter-spacing:-.025em;margin:44px 0 12px}
.legal-content h3{font-size:20px;color:#355879;margin:28px 0 10px}
.legal-content p{margin:0 0 16px}.legal-content ul{margin:12px 0 24px;padding-left:24px}.legal-content li{margin:8px 0}
.legal-content a{color:#276da9;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.legal-content .button{color:#fff;text-decoration:none}.legal-content .button-outline{color:#416995}
.legal-card{background:#fff;border:1px solid #e2ebf5;border-radius:23px;padding:26px 29px;box-shadow:0 16px 48px #6f9ec012;margin:25px 0}
.legal-card h2,.legal-card h3{margin-top:0}.legal-card p:last-child{margin-bottom:0}
.legal-callout{background:linear-gradient(130deg,#eff8ff,#f7f4ff);border-color:#dcebf9}
.legal-aside{position:sticky;top:115px;background:#ffffff;border:1px solid #e2ecf5;box-shadow:0 15px 40px #5c7f9914;padding:25px 21px;border-radius:23px}
.legal-aside h2{font-size:15px;letter-spacing:.04em;color:#365f92;margin:0 0 13px}.legal-aside a{display:block;color:#5c7594;font-size:13px;padding:10px 0;border-bottom:1px solid #eef3f9;text-decoration:none;line-height:1.4}
.legal-aside a:hover{color:#2e669e}.legal-aside a:last-child{border:0}
.legal-company{font-size:14px;color:#6a8096;line-height:1.65}.legal-company strong{color:#3a5877}
.guides-empty{max-width:690px;margin:0 auto;text-align:center;padding:39px;border:1px dashed #bed5ea;border-radius:27px;background:#fafdff}
.guides-empty h3{margin:0 0 12px;font-size:22px;color:#395b85}.guides-empty p{margin:0;color:#70829a;line-height:1.7}
@media(max-width:850px){.legal-layout{grid-template-columns:1fr;gap:22px;padding:35px 0 60px}.legal-aside{position:static;order:-1}.legal-aside a{display:inline-block;margin-right:20px;border:0}.legal-hero{padding:70px 0 46px}}
@media(max-width:540px){.legal-hero h1{font-size:42px}.legal-hero p{font-size:15px}.legal-card{padding:21px}.legal-meta{gap:8px}}

/* V4.8: article table rendering and primary topic navigation */
.guide-prose table{border-collapse:collapse;width:100%;margin:22px 0;font-size:15px;line-height:1.5}
.guide-prose th,.guide-prose td{border:1px solid #d9e7f3;padding:13px 15px;text-align:left;vertical-align:top}
.guide-prose th{background:#eef5fd;color:#26446e}
.guide-prose blockquote{border-left:3px solid #78a5df;padding:11px 20px;background:#f5faff;border-radius:0 14px 14px 0}
.guide-prose a{overflow-wrap:anywhere}
.guide-reading-note{font-size:13px;color:#6c82a0;margin-top:12px}
@media(max-width:620px){.guide-prose table{display:block;overflow-x:auto;white-space:normal}}


/* Sooth Aura 2.1.0: mobile-first mockup sizing and universal transparent animations.
   iOS Safari does not consistently preserve VP9/MP4 alpha; use animated
   WebP with a transparent alpha channel, plus static WebP for reduced motion.
   All size rules below are scoped to the original Sooth sections. */
.hero-display,
.showcase-phone,
.showcase-layout,
.showcase-layout > *,
.appshot-hero,
.insights-device {
  min-width: 0;
  max-width: 100%;
}
/* Let the original unaltered full-height screenshots determine the frame height.
   No object-fit: cover; no cropping of the bottom bar on mobile. */
.appshot-hero {
  box-sizing: border-box;
  width: min(290px, 100%);
  height: auto;
  aspect-ratio: auto;
  flex: 0 0 auto;
  padding: 9px;
  overflow: hidden;
  border-radius: 45px;
}
.appshot-hero > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 921 / 2048;
  max-width: 100%;
  object-fit: contain;
  object-position: center top;
  border-radius: 36px;
}
.showcase-phone {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 18px 12px;
}
.insights-device {
  box-sizing: border-box;
  width: min(286px, 100%);
  height: auto;
  aspect-ratio: auto;
  flex: 0 1 auto;
  padding: 10px;
  overflow: hidden;
  border-radius: 43px;
}
.insights-screen {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  border-radius: 32px;
  overflow: hidden;
}
.insights-screen > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center top;
  filter: none;
}
/* The actual character pixels now retain their transparent alpha on Safari.
   Do not reintroduce full-frame mp4 fallback or CSS that disables masking. */
.echo-animation-holder {
  box-sizing: border-box;
  overflow: visible;
  border-radius: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.echo-animation-media {
  display: block;
  width: 100%;
  height: 100%;
}
.echo-animation-holder img.echo-animation-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 16px 15px #6f9eb62a);
}
.character-tile {
  isolation: isolate;
}
.character-media {
  box-sizing: border-box;
  display: block;
  position: relative;
  width: min(96%, 390px);
  height: 100%;
  margin: 0 auto;
  overflow: visible;
}
.character-media .character-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  border: 0;
  background: transparent;
  filter: none;
}
@media (max-width: 800px) {
  .appshot-hero { width: min(263px, 100%); }
  .showcase-phone { min-height: 0; }
  .insights-device { width: min(265px, 100%); }
}
@media (max-width: 540px) {
  .hero { overflow: hidden; }
  .hero-grid { gap: 20px; }
  .hero-display {
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    padding: 34px 12px 60px;
    margin: 0 auto;
  }
  .hero-blob { inset: 25px 4% 35px; }
  .appshot-hero {
    width: min(245px, calc(100vw - 92px));
    max-width: 100%;
    padding: 7px;
    border-radius: 36px;
    transform: rotate(2deg);
  }
  .appshot-hero > img { border-radius: 29px; }
  .float-card {
    max-width: min(58vw, 218px);
    padding: 10px 12px;
    font-size: 11px;
  }
  .float-one { top: 54px; left: 0; }
  .float-two { bottom: 45px; right: 0; }
  .showcase-phone {
    padding: 14px 8px 24px;
    min-height: 0;
  }
  .insights-device {
    width: min(270px, calc(100vw - 70px));
    max-width: 100%;
    padding: 8px;
    border-radius: 37px;
    transform: none;
  }
  .insights-screen { border-radius: 28px; }
  .echo-art { min-height: 330px; }
  .echo-animation-holder { width: min(90%, 300px); }
  .character-tile { height: 260px; }
  .character-media { width: 100%; }
  .character-media .character-image { object-position: center bottom; }
}
@media (max-width: 370px) {
  .appshot-hero { width: min(218px, calc(100vw - 94px)); }
  .float-card { max-width: 56%; font-size: 10px; }
  .character-tile { height: 226px; }
}