@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{--paper:#f5f3ed;--ink:#202c3c;--muted:#606973;--blue:#076bed;--line:#dcdedb;--accent:#c7defd;--serif:Georgia,'Times New Roman',serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:5px}[hidden]{display:none!important}.wrap{width:min(1240px,calc(100% - 112px));margin-inline:auto}.skip-link{position:fixed;top:-80px;left:20px;z-index:100;background:white;padding:16px}.skip-link:focus{top:12px}.site-header{height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{font-family:'Manrope',Arial,sans-serif;font-size:31px;font-weight:800;letter-spacing:-1.7px;display:flex;align-items:center;gap:10px}.wordmark-dot{color:var(--blue);margin-left:-10px}.brand-image{width:49px;height:49px;object-fit:contain;mix-blend-mode:multiply}.site-header nav{display:flex;gap:38px;align-items:center;font-size:13px;font-weight:600}.site-header nav>a:hover,.text-link:hover{color:var(--blue)}.nav-contact{border:1px solid #b8bdc2;border-radius:30px;padding:13px 21px;display:flex;gap:28px}.hero{display:grid;grid-template-columns:1.05fr 1fr;min-height:735px;align-items:center;gap:30px;padding-block:52px 58px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.9px;line-height:1.8}.status-dot{display:inline-block;width:7px;height:7px;background:var(--blue);border-radius:50%;margin-right:9px}.hero h1{font-family:'Manrope',Arial,sans-serif;font-size:clamp(64px,6.4vw,91px);letter-spacing:-5px;line-height:1.04;font-weight:500;margin:28px 0 25px;position:relative}.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.055em}.hero h1 .serif{color:var(--blue)}.title-spark{font-size:67px;color:var(--blue);display:inline-block;margin-left:22px;vertical-align:middle;font-weight:400}.hero-description{font-size:15px;line-height:1.85;color:var(--muted);max-width:440px;margin-bottom:31px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;border-radius:6px;padding:18px 23px;font-size:13px;font-weight:600;border:0;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px)}.button-dark{background:var(--ink);color:white}.button-dark:hover{background:var(--blue)}.button span{font-size:20px;line-height:1}.hero-copy>.text-link{display:flex;width:max-content;margin-top:22px}.text-link{font-size:12px;font-weight:600;gap:18px;align-items:center;background:none;border:0;padding:0;display:inline-flex}.hero-footnote{display:flex;gap:13px;align-items:center;margin-top:40px;font-size:10px;line-height:1.6;color:var(--muted)}.hero-footnote strong{font-weight:500;color:var(--ink)}.mini-grid{font-size:25px;border:1px solid #d2d7da;border-radius:9px;width:38px;height:38px;display:grid;place-items:center;color:var(--blue)}.phone-stage{height:604px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 55%,#c4d9f060 0%,#dbe5eb20 57%,transparent 72%)}.stage-kicker{position:absolute;top:4px;font-size:8px;letter-spacing:2.3px;color:#757e84}.orbit{position:absolute;border:1px solid #c8d5e2;border-radius:50%;width:485px;height:485px;transform:rotate(-23deg) scaleY(.78)}.orbit-two{width:590px;height:590px;transform:rotate(30deg) scaleY(.67);border-style:dashed;opacity:.6}.stage-star{position:absolute;top:56px;right:18px;font-size:56px;color:var(--blue);transform:rotate(15deg)}.phone{position:relative;width:263px;height:538px;padding:7px;border:2px solid #59616e;border-radius:44px;background:linear-gradient(120deg,#777e88,#1c232d 20%,#424b59 85%,#9197a0);box-shadow:17px 29px 45px #253b5928,2px 3px 0 #08101d;transform:rotate(0deg);z-index:2}.phone:before{content:'';position:absolute;left:-4px;top:114px;width:3px;height:47px;background:#455164;border-radius:3px}.phone-screen{height:100%;border-radius:35px;overflow:hidden;position:relative;background:radial-gradient(ellipse at 10% 20%,#d6e6f5 5%,transparent 60%),radial-gradient(ellipse at 105% 58%,#91b6c6 0%,transparent 60%),linear-gradient(135deg,#dbe8d9,#e7ddc7 50%,#acc4e0)}.phone-status{height:48px;padding:15px 19px 0;display:flex;justify-content:space-between;font-size:10px;font-weight:700}.status-symbols{font-size:9px}.dynamic-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:77px;height:22px;border-radius:20px;background:#17202b}.phone-date{font-size:10px;text-align:center;margin-top:8px}.phone-clock{text-align:center;font-size:54px;font-weight:500;letter-spacing:-3px;line-height:1.1}.phone-widget{margin:18px 17px 20px;background:#ffffff66;padding:14px 12px;border-radius:17px;font-size:10px;line-height:1.5;display:flex;justify-content:space-between;align-items:center}.widget-sun{font-size:31px;color:#637f9c}.app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 7px;padding:0 13px}.app-item{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:7px;white-space:nowrap}.app-icon{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:26px;background:#ffffffb0;color:#5b7380;box-shadow:0 2px 4px #00000007}.calendar{flex-direction:column;font-size:25px;line-height:1}.calendar small{font-size:7px;color:#c2837d;margin-bottom:2px}.photos{color:#a79b8c;font-size:39px}.camera{background:#bdc7ca}.weather{background:#86adc4;color:#f7e6ba}.maps{background:#d8e1cd}.notes{background:linear-gradient(#e6d69f 25%,#f2efdf 25%);font-size:33px}.settings{background:#b6c2ce}.featured-app{position:relative;z-index:3;color:#20344e;font-weight:700}.your-app{background:var(--blue);color:white;border:1px solid #ffffff90;transform:scale(1.2);box-shadow:0 0 0 5px #f5f3ed,0 0 0 6px #7eabef,0 8px 20px #076bed55;position:relative;transition:transform .2s}.your-app:hover{transform:scale(1.35)}.app-logo{font-family:Arial,sans-serif;font-weight:700;position:relative;display:inline-flex;font-size:32px;line-height:1}.app-logo>span{width:7px;height:7px;display:block;background:currentColor;border-radius:50%;margin:3px 0 0 5px}.phone-pages{font-size:5px;letter-spacing:4px;text-align:center;margin-top:31px}.phone-pages span{opacity:.3}.phone-dock{position:absolute;bottom:23px;left:12px;right:12px;display:flex;justify-content:space-between;background:#ffffff50;padding:10px;border-radius:22px}.phone-dock .app-icon{width:40px;height:40px}.call,.messages{background:#a0b5a1;color:white}.safari{background:#b5c9d8;color:#f3f7f7}.music{background:#bf9c99;color:#fff}.home-indicator{position:absolute;bottom:7px;left:50%;width:82px;height:4px;border-radius:5px;background:#1a2731;transform:translateX(-50%)}.floating-label{position:absolute;z-index:4;background:#fffcf5;border:1px solid #e1e2dc;box-shadow:0 5px 20px #253b590a;border-radius:9px;display:flex;align-items:center}.label-top{top:151px;left:-6px;padding:14px 17px;font-size:10px;transform:rotate(-7deg)}.label-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);margin-right:9px}.label-bottom{right:-5px;bottom:117px;padding:17px 19px;font-size:11px;line-height:1.5;transform:rotate(3deg);gap:14px}.label-bottom strong{font-weight:500}.tap-icon{background:var(--accent);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:25px}.stage-caption{position:absolute;bottom:-5px;font-size:9px;color:var(--muted);letter-spacing:.1px}.stage-caption>span{font-size:19px;color:var(--blue);margin-right:10px}.business-demo{padding:7px 18px;font-size:11px;line-height:1.6}.demo-back{border:0;background:#ffffff80;border-radius:8px;padding:7px 10px;font-size:9px}.demo-brand{margin:18px 0;display:flex;gap:8px;align-items:center;font-weight:700}.demo-brand .app-logo{color:var(--blue);font-size:26px}.business-demo .eyebrow{font-size:8px;margin-top:20px}.business-demo h3{font-size:26px;line-height:1.1;letter-spacing:-1px;margin:9px 0}.demo-card{background:var(--blue);color:white;border-radius:15px;padding:17px;margin:16px 0;position:relative}.demo-card>span:first-child{font-size:6px;letter-spacing:1px;display:block}.demo-card strong{font-size:20px;font-weight:500;display:block;line-height:1.2;margin-top:12px}.demo-card>span:last-child{position:absolute;bottom:10px;right:12px;font-size:30px}.demo-cta{font-size:9px;display:block;font-weight:700}.business-demo>small{display:block;font-size:7px;margin-top:8px;opacity:.7}.promise-strip{border-block:1px solid var(--line)}.promise-strip>.wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:23px;font-size:11px;font-weight:500}.section{padding-block:98px}.section-heading{display:grid;grid-template-columns:1fr 1fr;column-gap:60px;align-items:end;margin-bottom:43px}.section-heading .eyebrow{grid-column:1/-1}.section-heading h2{margin:13px 0 0}.section-heading>p:last-child{max-width:340px;justify-self:end;color:var(--muted);font-size:13px;line-height:1.9;margin:0 0 5px}h2{font-family:'Manrope',Arial,sans-serif;font-size:43px;font-weight:500;line-height:1.13;letter-spacing:-2px}h3{font-family:'Manrope',Arial,sans-serif;font-weight:600}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.service-card{padding:28px;background:#eeede6;border:1px solid #dedfd8;border-radius:9px;position:relative}.service-card:nth-child(2){background:#e8edf0}.service-card:nth-child(3){background:#e9eee6}.service-icon{font-size:30px;color:var(--blue)}.card-number{position:absolute;right:27px;top:35px;font-size:10px;color:#78838c}.service-card h3{font-size:25px;letter-spacing:-.8px;line-height:1.25;margin:30px 0 14px}.service-card p{color:var(--muted);font-size:12px;line-height:1.9;margin-bottom:31px}.card-tag{font-size:8px;letter-spacing:1.2px;font-weight:600;display:block;border-top:1px solid #ccd1cd;padding-top:20px}.process-section{background:#e8edf0;padding-block:80px}.process-layout{display:grid;grid-template-columns:1fr 1fr;gap:90px}.process-layout h2{margin:22px 0}.process-intro{font-size:13px;line-height:1.9;color:var(--muted);max-width:330px}.process-layout .text-link{margin-top:18px}.steps{list-style:none;padding:0;margin:0}.steps li{display:flex;gap:24px;padding:25px 0;border-bottom:1px solid #cdd5dc}.steps li:first-child{padding-top:10px}.steps li>span{color:var(--blue);font-size:11px;padding-top:5px}.steps h3{font-size:19px;margin:0 0 10px;letter-spacing:-.5px}.steps p{font-size:12px;line-height:1.8;color:var(--muted);margin:0;max-width:350px}.next-section{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.next-section h2{margin-bottom:0}.future-note{border-left:1px solid #d2d6d9;padding-left:40px}.future-note>span{color:var(--blue);font-size:26px}.future-note h3{font-size:20px}.future-note p{font-size:13px;line-height:1.9;color:var(--muted);max-width:360px}.cta-section{background:#203c61;color:#fff;border-radius:10px;padding:55px;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden;margin-bottom:30px}.cta-section h2{font-size:48px;margin:20px 0 0}.cta-section .eyebrow{color:#aecbf1;font-size:9px}.button-light{background:#e1edfc;color:#203c61;position:relative;z-index:1}.cta-star{position:absolute;font-size:280px;color:#2c4970;right:40px;top:-55px;line-height:1;pointer-events:none}.site-footer{display:flex;align-items:center;gap:25px;padding-block:33px;font-size:10px;color:var(--muted)}.site-footer .wordmark{font-size:24px;color:var(--ink)}.site-footer>span{margin-left:auto}.site-footer a:last-child{margin-left:25px}.contact-main{display:grid;grid-template-columns:1fr 1fr;gap:75px;padding-block:85px 100px}.contact-copy h1{font-family:'Manrope',Arial,sans-serif;font-size:60px;line-height:1.1;font-weight:500;letter-spacing:-3px;margin-block:24px}.contact-copy h1 .serif{color:var(--blue)}.contact-copy>p:not(.eyebrow){font-size:15px;line-height:1.9;color:var(--muted);max-width:390px}.contact-art{font-family:var(--serif);font-size:95px;font-style:italic;letter-spacing:-6px;transform:rotate(-8deg);margin:65px 0 65px 20px;color:var(--blue)}.contact-art span{display:inline-block;background:#d9e6f7;width:98px;height:98px;font-family:Arial;font-size:80px;border-radius:50%;font-style:normal;line-height:1.1;text-align:center;margin-left:25px}.contact-panel{background:#fffdf8;border:1px solid var(--line);padding:32px;border-radius:12px}.contact-panel h2{font-size:28px;letter-spacing:-1px;margin:16px 0}.contact-notice{background:#edf2f7;border-radius:6px;font-size:11px;line-height:1.8;color:#445975;padding:14px 16px}.contact-panel label{display:block;font-size:11px;font-weight:600;margin-top:22px}.contact-panel input,.contact-panel textarea{width:100%;margin-top:9px;border:1px solid #d5d9db;border-radius:5px;background:#fffefa;padding:12px;color:var(--ink);font-size:12px;line-height:1.6}.contact-panel textarea{resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.optional{font-weight:400;color:var(--muted)}.contact-panel .button{width:100%;margin-top:22px}.form-note{font-size:10px;line-height:1.6;color:var(--muted)}#message-result{border-top:1px solid var(--line);margin-top:22px}#copy-status{font-size:11px;line-height:1.6;color:#365878}#copy-message{margin-top:12px}
@media(min-width:1450px){.hero{min-height:780px}.phone-stage{transform:scale(1.06)}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.hero{gap:12px;min-height:680px}.hero h1{font-size:68px}.title-spark{font-size:44px;margin-left:12px}.phone-stage{transform:scale(.9);transform-origin:center;min-width:0}.orbit{width:390px}.orbit-two{width:460px}.label-top{left:-5px;font-size:9px}.label-bottom{right:-10px}.process-layout,.next-section,.contact-main{gap:40px}.hero-description{font-size:14px}.desktop-break{display:none}.contact-copy h1{font-size:50px}.contact-panel{padding:25px}.cta-section{padding:40px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.site-header{height:84px}.wordmark{font-size:26px}.brand-image{width:40px;height:40px}.site-header nav{gap:17px;font-size:11px}.site-header nav>a:nth-child(2){display:none}.nav-contact{padding:10px 13px;gap:12px}.hero{grid-template-columns:1fr;padding-top:43px;padding-bottom:30px;gap:20px}.hero h1{font-size:76px;letter-spacing:-4.5px;margin-top:24px}.hero-description{max-width:440px;font-size:15px}.title-spark{font-size:55px;margin-left:22px}.hero-footnote{margin-top:25px}.phone-stage{height:580px;transform:scale(.94);margin:0 -10px}.orbit{width:340px;height:450px}.orbit-two{width:385px;height:520px}.phone{width:263px}.label-top{left:0;top:141px}.label-bottom{right:0;bottom:110px}.stage-star{right:10px;top:45px}.stage-kicker{top:-2px}.stage-caption{bottom:-15px;font-size:8px}.promise-strip>.wrap{font-size:9px;gap:10px;padding-block:18px;flex-wrap:wrap;justify-content:center}.section{padding-block:62px}.section-heading{grid-template-columns:1fr;gap:18px;margin-bottom:28px}.section-heading>p:last-child{justify-self:start;max-width:390px}.section-heading h2{margin-top:0}h2{font-size:37px}.service-grid{grid-template-columns:1fr}.service-card{padding:25px}.service-card h3{margin-top:20px}.service-card p{font-size:13px;max-width:420px}.process-section{padding-block:54px}.process-layout,.next-section{grid-template-columns:1fr;gap:35px}.future-note{padding-left:23px}.cta-section{padding:32px;display:block}.cta-section h2{font-size:41px}.cta-section .button{margin-top:32px;font-size:11px;gap:15px}.cta-star{right:-45px;top:20px;font-size:220px}.cta-section>div{position:relative;z-index:1}.site-footer{flex-wrap:wrap;gap:14px}.site-footer>p{margin-left:auto}.site-footer>span{margin-left:0}.site-footer>a:last-child{margin-left:auto}.site-footer .wordmark{font-size:22px}.contact-main{grid-template-columns:1fr;padding-top:44px;gap:35px}.contact-copy h1{font-size:54px}.contact-art{display:none}.contact-copy>.text-link{margin-top:15px}.contact-panel{padding:23px}.form-row{grid-template-columns:1fr;gap:0}}
@media(max-width:360px){.hero h1{font-size:66px}.title-spark{font-size:40px;margin-left:10px}.phone-stage{transform:scale(.83);margin:-30px -20px}.stage-caption{font-size:7px}.site-header nav>a:first-child{display:none}.contact-copy h1{font-size:46px}}
@media(max-width:760px){.phone-stage{overflow:clip}.stage-caption{bottom:0}.hero h1{font-size:clamp(49px,13.3vw,76px);letter-spacing:-3px}.title-spark{font-size:38px;margin-left:16px}}
.phone-stage{height:auto;min-height:604px;flex-direction:column;gap:24px;padding:34px 0 12px}
.phone{flex-shrink:0}
.stage-caption{position:relative;bottom:auto;margin:0;padding-inline:12px;line-height:1.6;text-align:center;flex-shrink:0}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.hero h1{font-weight:800}
.hero-title-accent{color:var(--blue)}

/* Lokios wordmark */
.wordmark{font-weight:800;letter-spacing:-1.2px;gap:10px}
.site-header .wordmark{font-size:36px}
.site-header .brand-image{width:80px;height:80px}
.brand-name{white-space:nowrap}
.brand-os{color:var(--blue)}
@media(max-width:760px){
 .site-header .wordmark{font-size:25px;gap:6px;letter-spacing:-1px}
 .site-header .brand-image{width:56px;height:56px}
 .site-header nav{gap:10px;font-size:10px}
}

.brand-name{font-family:"Arial Black","Manrope",Arial,sans-serif;font-weight:900;-webkit-text-stroke:0 currentColor}

/* Follow the device appearance, including changes while the page is open. */
:root{color-scheme:light dark}
@media(prefers-color-scheme:dark){
 :root{--paper:#101720;--ink:#edf3fb;--muted:#acbacb;--blue:#6aa9ff;--line:#303e50;--accent:#253f60}
 .skip-link{background:#1b2838;color:var(--ink)}
 .brand-image{filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen;background:transparent}
 .nav-contact,.mini-grid{border-color:var(--line)}
 .button-dark{background:var(--blue);color:#101c2c}
 .button-dark:hover{background:#9bc6ff}
 .phone-stage{background:radial-gradient(ellipse at 50% 55%,#244a714d 0%,#17293d22 57%,transparent 72%)}
 .stage-kicker,.card-number{color:var(--muted)}
 .orbit{border-color:#334c68}
 .phone{box-shadow:17px 29px 45px #0006,2px 3px 0 #08101d}
 .phone-screen{background:radial-gradient(ellipse at 10% 20%,#37516c 5%,transparent 60%),radial-gradient(ellipse at 105% 58%,#244c5b 0%,transparent 60%),linear-gradient(135deg,#1a2b3f,#253238 50%,#17263d);color:#edf3fb}
 .phone-widget,.phone-dock{background:#ffffff14}
 .widget-sun{color:#afcbe9}
 .featured-app{color:#edf3fb}
 .your-app{background:#076bed;color:#fff;box-shadow:0 0 0 5px #21344a,0 0 0 6px #7eabef,0 8px 20px #076bed55}
 .home-indicator{background:#dce6f3}
 .floating-label{background:#1b2838;border-color:var(--line);box-shadow:0 5px 20px #0003}
 .demo-back{background:#ffffff18;color:#edf3fb}
 .demo-card{background:#076bed;color:#fff}
 .service-card{background:#1b2531;border-color:var(--line)}
 .service-card:nth-child(2){background:#1b2938}
 .service-card:nth-child(3){background:#1d2b2b}
 .card-tag,.steps li,.future-note{border-color:var(--line)}
 .process-section{background:#162230}
 .cta-section{background:#1c3453}
 .contact-art span{background:var(--accent)}
 .contact-panel{background:#182331}
 .contact-notice{background:#22344b;color:#c8dcf6}
 .contact-panel input,.contact-panel textarea{background:#101a27;border-color:#42536b;color:var(--ink)}
 .contact-panel input::placeholder,.contact-panel textarea::placeholder{color:#a4b1c2;opacity:1}
 #copy-status{color:#bdd8fa}
}

/* Keep the app label clear of the enlarged icon and its highlight. */
.featured-app{gap:17px}
.business-icon-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:10px;color:#fff;pointer-events:none}
.business-icon-face svg{width:30px;height:30px}


/* A second highlighted app, with artwork matched to the device theme. */
.console-app{gap:17px;font-weight:700;color:#20344e;position:relative;z-index:3}
.console-icon{position:relative;transform:scale(1.2);background:#fff;box-shadow:0 0 0 5px #f5f3ed,0 0 0 6px #7eabef,0 8px 20px #076bed55}
.console-icon picture{position:absolute;inset:0;overflow:hidden;border-radius:11px;display:block}
.console-icon img{position:absolute;width:112%;height:112%;max-width:none;left:-6%;top:-6%;object-fit:cover}
@media(prefers-color-scheme:dark){
 .console-app{color:#edf3fb}
 .console-icon{background:#071c28;box-shadow:0 0 0 5px #21344a,0 0 0 6px #7eabef,0 8px 20px #076bed55}
 .console-icon img{width:108%;height:108%;left:-4%;top:-4%}
}

.your-app,.console-icon{border:0}
.your-app:after,.console-icon:after{content:"";position:absolute;inset:0;border:1px solid #d9e9ff;border-radius:inherit;pointer-events:none;z-index:3}
.featured-app>span:last-child,.console-app>span:last-child{font-size:8.5px;font-weight:800;line-height:1.35}

/* Simulated incoming notifications, contained within the phone screen. */
.phone-notification{position:absolute;z-index:8;top:38px;left:9px;right:9px;padding:12px;border:1px solid #fff9;border-radius:19px;background:#f6f8f5f2;color:#202c3c;box-shadow:0 8px 24px #10233930;backdrop-filter:blur(16px);opacity:0;visibility:hidden;transform:translateY(-140%);transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .3s,visibility .5s;pointer-events:none}
.phone-notification.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.notification-header{display:flex;align-items:center;gap:7px;margin-bottom:9px;font-size:9px}
.notification-header>strong{font-weight:750}
.notification-header>span:not(.notification-icon){margin-left:auto;font-size:8px;color:#606973}
.notification-icon{position:relative;display:block;width:24px;height:24px;flex-shrink:0;border-radius:6px;overflow:hidden}
.notification-icon img{position:absolute;width:112%;height:112%;left:-6%;top:-6%;max-width:none}
#notification-title{display:block;font-size:11px;line-height:1.4;font-weight:750}
#notification-message{font-size:11px;line-height:1.5;margin:4px 0 0}
.notification-toggle{border:0;background:transparent;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:10px;padding:10px;min-height:32px}
.phone-stage:has(.phone-notification.is-visible) .label-top{opacity:0;pointer-events:none}
.phone-screen:has(.business-demo:not([hidden])) .phone-notification{display:none}
@media(prefers-color-scheme:dark){
 .phone-notification{background:#1c2a3af2;color:#edf3fb;border-color:#56677e;box-shadow:0 8px 24px #0005}
 .notification-header>span:not(.notification-icon){color:#acbacb}
 .notification-icon img{width:108%;height:108%;left:-4%;top:-4%}
}
@media(prefers-reduced-motion:reduce){.phone-notification{transform:none;transition:none}}

/* Enlarge the whole phone, including its screen and notification artwork. */
.phone-stage{transform:none;min-height:720px}
.phone{zoom:1.15}
.phone-controls{text-align:center}
@media(max-width:760px){.phone-stage{min-height:0;margin:0}.phone{zoom:1.08}}
@media(max-width:360px){.phone{zoom:1}}

/* App annotations follow the phone icons rather than floating over them. */
.hero{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:36px}
.hero h1{font-size:clamp(54px,5.2vw,75px)}
.phone-stage{--phone-width:302.45px;align-items:flex-end;overflow:visible}
.phone-controls,.stage-kicker{width:var(--phone-width);text-align:center}
.orbit{right:-20px;pointer-events:none}
.app-callout{position:absolute;left:0;width:calc(100% - var(--phone-width) - 36px);z-index:5}
.console-callout{top:210px}
.business-callout{top:440px}
.app-callout h3{margin:0 0 24px;font-size:18px;letter-spacing:-.5px}
.app-callout p{font-size:12px;line-height:1.75;color:var(--muted);margin:0 0 16px}
.callout-link{border:0;background:none;padding:0;color:var(--ink);font-size:11px;font-weight:700;text-align:left;line-height:1.6;text-decoration:underline;text-underline-offset:4px}
.callout-link:hover{color:var(--blue)}
.app-connectors{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:4;pointer-events:none}
.app-connectors path{fill:none;stroke:var(--muted);stroke-width:1;vector-effect:non-scaling-stroke}
.console-feature{display:flex;flex-direction:column;gap:3px;padding:10px 0;border-bottom:1px solid #ffffff40;font-size:10px}
.console-feature span{font-size:9px;opacity:.8}
#console-demo .demo-cta{margin-top:16px}
@media(max-width:1100px){.hero{grid-template-columns:1fr}.hero-copy{max-width:660px}.phone-stage{width:min(690px,100%);align-self:center;justify-self:end}.hero h1{font-size:clamp(54px,7vw,75px)}}
@media(max-width:760px){.phone-stage{--phone-width:263px;min-height:665px}.phone{zoom:1}.app-callout{width:calc(100% - 287px)}.app-callout h3{font-size:15px}.app-callout p{font-size:11px}.console-callout{top:180px}.business-callout{top:405px}.orbit{right:0;max-width:100%}}
@media(max-width:420px){.phone-stage{align-items:center;gap:25px}.app-callout{position:static;width:100%;order:3;padding-top:15px;border-top:1px solid var(--line)}.app-callout h3{margin-bottom:12px;font-size:18px}.app-callout p{font-size:12px}.app-connectors{display:none}.phone-controls{order:2}.hero h1{font-size:clamp(49px,13.3vw,56px)}}

.hero{overflow:clip}

/* App windows zoom out from their home-screen icons. */
.business-demo{position:absolute;inset:48px 0 12px;z-index:6;max-height:none!important;background:#dfe7e7;transform-origin:0 0;overflow:auto}
.phone-status,.dynamic-island,.home-indicator{z-index:9}
.phone-status{position:relative}
@media(prefers-color-scheme:dark){.business-demo{background:#203246}}

/* More comfortable reading sizes across both pages. */
.site-header nav{font-size:14px}
.eyebrow,.cta-section .eyebrow{font-size:11px}
.hero-description{font-size:16px}
.button,.text-link{font-size:14px}
.hero-footnote,.promise-strip>.wrap,.site-footer{font-size:13px}
.section-heading>p:last-child,.service-card p,.process-intro,.steps p,.future-note p{font-size:15px;line-height:1.8}
.card-tag{font-size:11px;line-height:1.6}
.card-number,.steps li>span{font-size:12px}
.app-callout p{font-size:14px;line-height:1.7}
.callout-link,.notification-toggle{font-size:12px}
.stage-kicker{font-size:10px;letter-spacing:1.5px}
.contact-panel label,.contact-notice,.form-note,#copy-status{font-size:13px}
.contact-panel input,.contact-panel textarea{font-size:15px}
.contact-panel .button{font-size:14px}
.app-item{font-size:8px}
.featured-app>span:last-child,.console-app>span:last-child{font-size:9px;white-space:nowrap;text-align:center;max-width:none}
.phone-date,.phone-widget{font-size:11px}
.business-demo{font-size:12px;max-height:calc(100% - 64px);overflow-y:auto;padding-bottom:20px}
.business-demo .eyebrow,.business-demo>small{font-size:9px}
.demo-back,.demo-cta{font-size:11px}
.demo-card>span:first-child{font-size:8px}
.console-feature{font-size:11px}
.console-feature span{font-size:10px}
.notification-header{font-size:10px}
.notification-header>span:not(.notification-icon){font-size:9px}
#notification-title,#notification-message{font-size:12px}
@media(max-width:760px){
 .site-header nav{font-size:12px}
 .site-header nav>a:first-child{display:none}
 .cta-section .button{font-size:13px}
 .contact-panel input,.contact-panel textarea{font-size:16px}
}
@media(max-width:600px){
 .phone-stage{align-items:center;gap:25px}
 .app-callout{position:static;width:100%;order:3;padding-top:15px;border-top:1px solid var(--line)}
 .app-callout h3{margin-bottom:12px;font-size:18px}
 .app-connectors{display:none}
 .phone-controls{order:2}
}

.app-grid>.app-item{min-width:0}

/* The name story: overlapping brackets show Lo, Loki, and OS. */
.why-section{border-top:1px solid var(--line)}
.why-section h2{margin:16px 0}
.why-intro{color:var(--muted);font-size:16px;line-height:1.8;max-width:550px}
.why-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:60px;margin-top:48px}
.name-diagram{position:relative;min-height:600px}
.vertical-name{position:absolute;inset:0 auto 0 0;display:flex;flex-direction:column;justify-content:space-around;font-family:'Manrope',Arial,sans-serif;font-size:74px;font-weight:800;text-align:center;width:80px;line-height:1}
.name-bracket{position:absolute;border:1px solid var(--blue);border-left:0;width:20px}
.name-bracket b{position:absolute;top:50%;left:100%;margin-left:9px;transform:translateY(-50%);font-size:12px;color:var(--blue);background:var(--paper);padding:4px 0}
.bracket-local{left:96px;top:2%;height:29%}
.bracket-loki{left:153px;top:0;height:66%}
.bracket-os{left:96px;top:68%;height:30%}
.name-stories article{padding:0 0 28px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.name-stories article:last-child{border:0;margin:0;padding:0}
.name-stories h3{font-size:25px;letter-spacing:-.6px;margin:10px 0 14px}
.name-stories p:not(.eyebrow){font-size:15px;color:var(--muted);line-height:1.85;max-width:700px}
.site-header nav{gap:25px}
@media(max-width:760px){.why-layout{grid-template-columns:145px minmax(0,1fr);gap:25px}.vertical-name{font-size:57px;width:56px}.bracket-local,.bracket-os{left:67px}.bracket-loki{left:105px}.name-bracket{width:10px}.name-bracket b{font-size:10px;margin-left:5px}.site-header nav{gap:12px}}
@media(max-width:480px){.why-layout{grid-template-columns:100px minmax(0,1fr);gap:18px}.vertical-name{font-size:44px;width:40px}.bracket-local,.bracket-os{left:44px}.bracket-loki{left:73px}.name-bracket{width:7px}.name-bracket b{font-size:8px;margin-left:3px}.name-stories h3{font-size:21px}.name-stories .eyebrow{letter-spacing:1px}.site-header{height:auto;min-height:100px;flex-wrap:wrap;gap:8px;padding-block:12px}.site-header nav{margin-left:auto}.why-nav{white-space:nowrap}}

/* Keep the vertical word compact instead of stretching it to the text column. */
.name-diagram{height:450px;min-height:0;align-self:start}
@media(max-width:760px){.name-diagram{height:350px}}
@media(max-width:480px){.name-diagram{height:275px}}

.why-layout{position:relative}
.name-diagram{align-self:center}
.name-connectors{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.name-connectors path{fill:none;stroke:var(--muted);stroke-width:1;vector-effect:non-scaling-stroke}

.console-icon{transition:transform .2s}
.console-icon:hover{transform:scale(1.35)}

.customer-notification-icon{display:grid;place-items:center;color:#fff}
.customer-notification-icon svg{width:19px;height:19px}

/* Language selection stays available at every screen size. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.language-switch{display:flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:24px;padding:8px 10px;flex-shrink:0}
.language-symbol{font-size:20px;color:var(--blue);line-height:1}
.language-switch select{font:inherit;font-size:12px;background:var(--paper);color:var(--ink);border:0;padding:4px 2px;cursor:pointer;max-width:100px}
.language-switch select:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.site-header{gap:20px;height:auto;min-height:112px;padding-block:15px;flex-wrap:wrap}
.site-header nav{margin-left:auto;flex-wrap:wrap;justify-content:flex-end;gap:18px}
html:not([lang="en"]) .hero h1{overflow-wrap:anywhere}
html:not([lang="en"]) .app-callout p{font-size:13px}
html:not([lang="en"]) .featured-app>span:last-child{font-size:8px;letter-spacing:-.15px}
html:not([lang="en"]) .app-grid>.app-item:not(.featured-app):not(.console-app)>span:last-child{font-size:7px;letter-spacing:-.2px}
html:not([lang="en"]) .business-callout{top:465px}
@media(max-width:900px){.site-header nav{gap:12px}.site-header .wordmark{font-size:29px}.site-header .brand-image{width:64px;height:64px}}
@media(max-width:600px){.site-header{gap:10px;padding-block:12px}.site-header nav{width:100%;justify-content:space-between;gap:8px}.site-header .wordmark{font-size:25px}.site-header .brand-image{width:56px;height:56px}.site-header nav>a:nth-child(2){display:none}.nav-contact{gap:8px;padding:10px}.language-switch{padding:6px}.language-switch select{font-size:12px}.contact-copy h1{font-size:clamp(38px,9vw,54px);overflow-wrap:anywhere}}

/* A cropped shop-logo wallpaper, shared by the lock and home screens. */
.phone-wallpaper,.phone-lock{position:absolute;inset:0;pointer-events:none;background-image:url('assets/lokios-logo.png');background-size:auto 145%;background-position:28% 55%;background-repeat:no-repeat}
.phone-wallpaper{filter:blur(10px);opacity:.2;transform:scale(1.08)}
.home-screen{position:absolute;inset:48px 0 0}
.stage-kicker{border:0;background:none;font-family:inherit;padding:4px 0;cursor:pointer;z-index:3}
.stage-kicker:hover{color:var(--blue)}
.phone-lock{z-index:8;background-color:#eef4fc;color:#202c3c;display:flex;flex-direction:column;align-items:center;will-change:transform}
.lock-date{margin-top:66px;font-size:12px;font-weight:600}
.lock-clock{font-size:65px;line-height:1.1;font-weight:600;letter-spacing:-3px}
.lock-swipe{position:absolute;bottom:12px;width:85px;height:4px;border-radius:8px;background:currentColor;animation:swipe-hint .9s ease-in-out alternate infinite}
.is-unlocking .phone-lock{animation:phone-unlock 1.1s cubic-bezier(.32,.72,0,1) both}
.is-unlocking .home-screen{animation:home-reveal 1.1s cubic-bezier(.22,1,.36,1) both}
@keyframes phone-unlock{from{transform:translateY(0);opacity:1}to{transform:translateY(-105%);opacity:.2}}
@keyframes home-reveal{from{transform:scale(1.13);filter:blur(5px);opacity:0}to{transform:scale(1);filter:blur(0);opacity:1}}
@keyframes swipe-hint{to{transform:translateY(-8px)}}
@media(prefers-color-scheme:dark){
 .phone-wallpaper{filter:invert(1) hue-rotate(180deg) blur(10px);opacity:.18}
 .phone-lock{background:#101720;color:#edf3fb;isolation:isolate}
 .phone-lock::before{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/lokios-logo.png') 28% 55% / auto 145% no-repeat;filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen}
}
@media(prefers-reduced-motion:reduce){.is-unlocking .phone-lock{display:none}.is-unlocking .home-screen{animation:none}.lock-swipe{animation:none}}
.is-unlocking .phone-status{color:#202c3c}
@media(prefers-color-scheme:dark){.is-unlocking .phone-status{color:#edf3fb}}

.phone-stage .app-connectors{clip-path:inset(0 100% 0 0)}
.phone-stage.connectors-revealed .app-connectors{clip-path:inset(0);transition:clip-path 1.1s cubic-bezier(.25,.46,.45,.94)}
@media(prefers-reduced-motion:reduce){.phone-stage.connectors-revealed .app-connectors{transition:none}}

.phone-stage.connectors-revealed.app-is-open .app-connectors{clip-path:inset(0 100% 0 0)}
.app-callout h3{transform-origin:left center;transition:transform .35s ease,font-weight .35s ease,color .35s ease}
.app-callout.is-active h3{transform:scale(1.14);font-weight:800;color:var(--blue)}
@media(prefers-reduced-motion:reduce){.app-callout h3,.phone-stage.connectors-revealed.app-is-open .app-connectors{transition:none}}

.home-indicator{opacity:1;transition:opacity .4s ease}
.is-unlocking .home-indicator{opacity:0;transition:none}
@media(prefers-reduced-motion:reduce){.home-indicator{transition:none}}

.is-locked .home-screen,.is-locked .home-indicator{opacity:0}
.is-locked .phone-status{color:#202c3c}
.phone-lock .lock-notification{position:relative;top:auto;left:auto;right:auto;width:calc(100% - 18px);flex-shrink:0;margin-top:10px;text-align:left;animation:none;transform:none}
.phone-lock .lock-notification:first-of-type{margin-top:28px}
@media(prefers-color-scheme:dark){.is-locked .phone-status{color:#edf3fb}}

.phone-invitation{position:absolute;top:92px;left:0;width:calc(100% - var(--phone-width) - 24px);display:flex;align-items:center;gap:12px;padding:10px 0;border:0;background:none;color:var(--blue);font:inherit;font-size:19px;font-weight:600;text-align:left;z-index:5}
.phone-invitation svg{width:70px;min-width:40px;height:35px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.phone-invitation:hover{opacity:.75}
@media(max-width:600px){.phone-invitation{top:32px;left:auto;right:0;width:var(--phone-width);justify-content:center;font-size:17px}.phone-invitation svg{width:40px}}

.phone-invitation{flex-direction:column;align-items:flex-start;gap:6px}
.phone-invitation>span{white-space:nowrap}
.phone-invitation svg{width:112px;min-width:112px;height:44px;margin-left:12px;flex-shrink:0}
@media(max-width:600px){.phone-invitation{align-items:center;gap:0;top:18px}.phone-invitation svg{width:88px;min-width:88px;height:32px;margin-left:0}}

.phone-invitation svg{align-self:flex-end;margin-left:0}
@media(max-width:600px){.phone-invitation svg{align-self:center}}

/* App overviews fit the phone and keep their simulator action at the bottom. */
.business-demo{display:flex;flex-direction:column;gap:10px;overflow:hidden;overflow-y:hidden;padding:10px 16px 16px}
.business-demo .demo-back{align-self:flex-start;flex-shrink:0}
.demo-content{flex:1;min-height:0}
.business-demo .eyebrow{margin:10px 0 8px;font-size:9px;letter-spacing:1.2px}
.business-demo h3{font-size:25px;margin:8px 0 12px}
.demo-content>p:not(.eyebrow){font-size:11px;line-height:1.55;margin:10px 0}
.business-demo .demo-card{padding:14px;margin:14px 0 0}
.business-demo .demo-card strong{margin:0;font-size:21px}
.business-demo .console-feature{padding:9px 0;gap:2px;font-size:11px;line-height:1.4}
.simulation-button{display:flex;align-items:center;justify-content:center;text-align:center;flex-shrink:0;min-height:45px;padding:10px 8px;border-radius:4px;background:var(--blue);color:#fff;font-size:11px;line-height:1.35;font-weight:700}
.simulation-button:hover{filter:brightness(1.12)}
@media(prefers-color-scheme:dark){.simulation-button{color:#101720}}
.simulator-main{padding-block:75px;min-height:70vh}
.simulator-main h1{font-family:Manrope,Arial,sans-serif;font-size:clamp(36px,5vw,64px);letter-spacing:-2px;line-height:1.1;max-width:850px}
.simulator-intro,.simulator-placeholder p{color:var(--muted);font-size:17px;line-height:1.7}
.simulator-placeholder{border:1px solid var(--line);border-radius:16px;padding:36px;margin:35px 0;background:var(--accent)}
.simulator-placeholder>span{font-size:36px;color:var(--blue)}
.simulator-placeholder h2{font-size:28px;margin:12px 0}
.site-header nav>a.simulator-nav{display:block;max-width:150px;line-height:1.4}
@media(max-width:600px){.site-header nav>a.simulator-nav{max-width:110px;font-size:11px}.simulator-main{padding-block:40px}.simulator-placeholder{padding:24px}}

.home-contact{max-width:850px;scroll-margin-top:24px}
.home-contact .contact-panel{padding:clamp(24px,4vw,48px)}
.home-contact textarea[name="message"]{min-height:190px}

.home-contact{max-width:1240px;padding-top:0}
.home-contact .contact-panel{overflow:hidden;padding:0 48px 40px}
.contact-banner{margin:0 -48px 30px;padding:38px 48px;background:#dae8fc;color:#203a60}
.contact-banner #contact-heading{font-size:clamp(32px,4vw,48px);line-height:1.15;margin:18px 0 0;letter-spacing:-1.5px}
.home-contact #contact-form,.home-contact #contact-availability{max-width:760px;margin-inline:auto}
@media(prefers-color-scheme:dark){.contact-banner{background:#1d3655;color:#edf3fb}}
@media(max-width:600px){.home-contact .contact-panel{padding:0 24px 28px}.contact-banner{margin:0 -24px 24px;padding:28px 24px}}

.site-header nav>a.simulator-nav{width:156px;max-width:156px;flex-shrink:0;padding:10px 14px;border-radius:9px;background:#d8e9ff;color:#204a7d;font-weight:700;text-align:center;line-height:1.35;text-wrap:balance}
.site-header nav>a.simulator-nav:hover{background:#c2ddff;color:#143e72}
@media(prefers-color-scheme:dark){.site-header nav>a.simulator-nav{background:#b8d8ff;color:#173b68}.site-header nav>a.simulator-nav:hover{background:#d0e5ff}}
@media(max-width:600px){.site-header nav>a.simulator-nav{width:118px;max-width:118px;padding:9px 8px}}

.site-header .nav-contact{gap:9px;padding:10px 14px;white-space:nowrap}
.site-header nav{gap:16px}
.site-header .wordmark{flex-shrink:0}
@media(min-width:901px) and (max-width:1250px){
 .site-header{gap:16px}
 .site-header .brand-image{width:58px;height:58px}
 .site-header .wordmark{font-size:30px;gap:7px}
 .site-header nav{gap:12px;font-size:12px}
 .site-header nav>a.simulator-nav{width:136px;max-width:136px;padding:9px 10px}
 .site-header .language-switch{padding:6px}
}
@media(min-width:761px) and (max-width:900px){
 .site-header{gap:10px}
 .site-header .wordmark{font-size:26px;gap:6px}
 .site-header .brand-image{width:48px;height:48px}
 .site-header nav{gap:9px;font-size:11px}
 .site-header nav>a.simulator-nav{width:116px;max-width:116px;padding:8px}
 .site-header .nav-contact{padding:9px;gap:6px}
 .site-header .language-switch{padding:5px;gap:2px}
 .site-header .language-switch select{font-size:11px}
}
@media(max-width:600px){.site-header nav{gap:8px}.site-header .nav-contact{padding:9px 10px;gap:6px}}

@media(min-width:761px){
 .site-header{justify-content:flex-start;gap:22px}
 .site-header nav{margin-left:0;flex:1;justify-content:space-between;gap:12px;font-size:14px}
}
@media(min-width:761px) and (max-width:1000px){
 .site-header{gap:14px}
 .site-header nav{font-size:12px;gap:9px}
}

/* Let the shop mark extend below the header without shifting navigation. */
.site-header .brand-image{transform:translateY(10px) scale(1.55);transform-origin:center;position:relative;z-index:2}
.site-header .wordmark{gap:18px}
@media(prefers-color-scheme:dark){
 .site-header .brand-image{background:transparent;filter:invert(1) hue-rotate(180deg) contrast(1.22);mix-blend-mode:screen}
}
@media(max-width:600px){.site-header .brand-image{transform:translateY(5px) scale(1.35)}.site-header .wordmark{gap:14px}}

.site-header .brand-image{transform:translateY(25px) scale(1.7);filter:brightness(1.06) contrast(1.1)}
@media(prefers-color-scheme:dark){.site-header .brand-image{filter:invert(1) hue-rotate(180deg) contrast(1.4);background:transparent;mix-blend-mode:screen}}
@media(max-width:600px){.site-header .brand-image{transform:translateY(8px) scale(1.45)}}

.site-header .brand-image{transform:scale(1.6);transform-origin:center}
@media(max-width:600px){.site-header .brand-image{transform:scale(1.45)}}

@media(min-width:1101px){.hero-copy{align-self:start;padding-top:14px}}

.header-runner{position:absolute;left:0;top:0;width:22px;height:32px;z-index:12;pointer-events:none;color:var(--ink);opacity:0;transform-origin:bottom center}
.header-runner svg{width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.header-runner .runner-head{fill:var(--paper)}
.header-runner.is-running .runner-leg-a,.header-runner.is-running .runner-arm-a{animation:runner-stride .22s infinite alternate;transform-origin:11px 18px}
.header-runner.is-running .runner-leg-b,.header-runner.is-running .runner-arm-b{animation:runner-stride .22s infinite alternate-reverse;transform-origin:11px 18px}
.header-runner.is-waving .runner-arm-a{animation:runner-wave-left .45s infinite alternate;transform-origin:11px 14px}
.header-runner.is-waving .runner-arm-b{animation:runner-wave-right .45s infinite alternate;transform-origin:11px 14px}
@keyframes runner-stride{from{transform:rotate(-32deg)}to{transform:rotate(32deg)}}
@keyframes runner-wave-left{from{transform:rotate(100deg)}to{transform:rotate(145deg)}}
@keyframes runner-wave-right{from{transform:rotate(-100deg)}to{transform:rotate(-145deg)}}
.logo-opening-door{position:absolute;z-index:11;pointer-events:none;background:#173f70;border:1px solid #b9d8ff;border-radius:3px 3px 0 0;transform-origin:left center;animation:logo-door-open 1.1s ease both}
@keyframes logo-door-open{0%{transform:perspective(80px) rotateY(0)}55%,80%{transform:perspective(80px) rotateY(-78deg)}100%{transform:perspective(80px) rotateY(0);opacity:0}}
@media(prefers-reduced-motion:reduce){.header-runner,.logo-opening-door{display:none}}

/* Bent-joint strides replace the rigid, rotating limbs. */
.header-runner.is-running svg{animation:runner-bounce .3s linear infinite}
.header-runner.is-running .runner-leg-a{transform:none;animation:runner-leg-cycle .6s linear infinite}
.header-runner.is-running .runner-leg-b{transform:none;animation:runner-leg-cycle .6s -.3s linear infinite}
.header-runner.is-running .runner-arm-a{transform:none;animation:runner-arm-cycle .6s -.3s linear infinite}
.header-runner.is-running .runner-arm-b{transform:none;animation:runner-arm-cycle .6s linear infinite}
@keyframes runner-leg-cycle{
 0%,100%{d:path('M11 20L16 24L20 30')}
 25%{d:path('M11 20L11 25L9 30')}
 50%{d:path('M11 20L5 25L2 22')}
 75%{d:path('M11 20L15 22L11 26')}
}
@keyframes runner-arm-cycle{
 0%,100%{d:path('M11 13L17 17L21 13')}
 25%{d:path('M11 13L13 19L17 18')}
 50%{d:path('M11 13L5 17L2 14')}
 75%{d:path('M11 13L9 19L13 18')}
}
@keyframes runner-bounce{0%,100%{transform:translateY(0) rotate(5deg)}50%{transform:translateY(-1.5px) rotate(5deg)}}

.is-relocking .home-indicator{opacity:0}
.is-relocking>.phone-notification{visibility:hidden;opacity:0}

/* Keep elbows outside the head and swing bent arms from the shoulders. */
.header-runner.is-waving .runner-arm-a{transform:none;animation:runner-safe-wave-left .65s ease-in-out infinite alternate}
.header-runner.is-waving .runner-arm-b{transform:none;animation:runner-safe-wave-right .65s ease-in-out infinite alternate}
@keyframes runner-safe-wave-left{from{d:path('M11 13L4 11L2 4')}to{d:path('M11 13L3 10L0 6')}}
@keyframes runner-safe-wave-right{from{d:path('M11 13L18 11L20 4')}to{d:path('M11 13L19 10L22 6')}}
@keyframes runner-arm-cycle{
 0%,100%{d:path('M11 13L15 17L20 15')}
 25%{d:path('M11 13L12 19L17 20')}
 50%{d:path('M11 13L6 17L3 13')}
 75%{d:path('M11 13L9 19L13 21')}
}

.logo-opening-door{animation:logo-door-open 1.8s ease both;box-shadow:inset 2px 0 3px #0005}
.logo-opening-door::after{content:'';position:absolute;right:2px;top:55%;width:2px;height:3px;background:#fff;border-radius:2px}
@keyframes logo-door-open{0%,8%{transform:perspective(80px) rotateY(0)}35%,75%{transform:perspective(80px) rotateY(-100deg)}100%{transform:perspective(80px) rotateY(0);opacity:0}}
.header-runner.is-crouching .runner-leg-a{d:path('M11 20L4 24L7 30')}
.header-runner.is-crouching .runner-leg-b{d:path('M11 20L17 24L15 30')}
.header-runner.is-crouching .runner-arm-a{d:path('M11 13L6 18L2 16')}
.header-runner.is-crouching .runner-arm-b{d:path('M11 13L16 18L20 16')}

.runner-parachute{opacity:0;transform:scale(.2);transform-origin:11px 12px;transition:opacity .2s,transform .35s cubic-bezier(.2,.9,.3,1.2)}
.header-runner .parachute-canopy{fill:var(--blue);stroke:var(--ink);stroke-width:1}
.header-runner.is-parachuting .runner-parachute{opacity:1;transform:scale(1)}
.header-runner.is-parachuting .runner-arm-a{d:path('M11 13L5 16L5 10')}
.header-runner.is-parachuting .runner-arm-b{d:path('M11 13L17 16L17 10')}
.header-runner.is-parachuting .runner-leg-a{d:path('M11 20L7 25L6 30')}
.header-runner.is-parachuting .runner-leg-b{d:path('M11 20L15 25L17 29')}

/* Above the phone when the hero stacks into a single column. */
@media(max-width:1100px){
 .phone-stage{margin-top:110px}
 .phone-invitation{top:-95px;left:auto;right:12px;width:var(--phone-width);align-items:center;gap:0;padding:0;text-align:center}
 .phone-invitation svg{align-self:center;width:88px;min-width:88px;height:34px;margin:26px 0 0 65px;transform:rotate(90deg);transform-origin:center}
}
@media(max-width:600px){
 .phone-invitation{right:calc((100% - var(--phone-width))/2 - 8px);font-size:17px}
}

@media(max-width:1100px){
 .phone-invitation{flex-direction:row;justify-content:flex-end;align-items:flex-start;width:max-content;max-width:100%;right:8px;gap:8px}
 .phone-invitation svg{align-self:flex-start;width:88px;min-width:88px;height:34px;margin:25px -22px 0 -18px;transform:rotate(90deg) scaleY(-1)}
}
@media(max-width:600px){.phone-invitation{right:calc((100% - var(--phone-width))/2 - 8px)}}

.callout-app-icon{display:none}
@media(max-width:600px){
 .app-callout{padding-left:58px}
 .callout-app-icon{display:block;position:absolute;left:0;top:0;width:44px;height:44px;border-radius:11px;overflow:hidden;box-shadow:0 0 0 2px var(--accent)}
 .callout-app-icon picture,.callout-app-icon img{display:block;width:100%;height:100%;object-fit:cover}
}
@media(max-width:600px){.app-callout{padding-left:60px}.callout-app-icon{top:15px}}

/* Side-on running cycle: lifted knees, rear heel recovery and opposing arms. */
.header-runner.is-running .runner-head{transform:translate(2px,0)}
.header-runner.is-running svg>path:not([class]){d:path('M13 9L11 20')}
.header-runner.is-running .runner-leg-a{animation:runner-profile-leg .64s linear infinite}
.header-runner.is-running .runner-leg-b{animation:runner-profile-leg .64s -.32s linear infinite;opacity:.65}
.header-runner.is-running .runner-arm-a{animation:runner-profile-arm .64s -.32s linear infinite}
.header-runner.is-running .runner-arm-b{animation:runner-profile-arm .64s linear infinite;opacity:.65}
@keyframes runner-profile-leg{
 0%,100%{d:path('M11 20L18 21L20 28')}
 16.67%{d:path('M11 20L16 25L16 30')}
 33.33%{d:path('M11 20L9 26L5 30')}
 50%{d:path('M11 20L4 25L0 22')}
 66.67%{d:path('M11 20L7 24L3 19')}
 83.33%{d:path('M11 20L15 20L11 26')}
}
@keyframes runner-profile-arm{
 0%,100%{d:path('M12 12L17 17L21 12')}
 25%{d:path('M12 12L13 19L18 17')}
 50%{d:path('M12 12L5 16L2 12')}
 75%{d:path('M12 12L8 18L13 20')}
}
@keyframes runner-bounce{0%,100%{transform:translateY(-1px)}50%{transform:translateY(0)}}

@media(max-width:600px){
 html .phone-stage .app-callout{position:relative;inset:auto;width:100%;padding-left:60px}
 .app-callout>.callout-app-icon{position:absolute;left:0;top:15px}
}

.customer-features ul{list-style:none;padding:0;margin:6px 0;display:grid;gap:10px}
.customer-features li{position:relative;padding-left:17px;font-size:11px;line-height:1.5}
.customer-features li::before{content:'✓';position:absolute;left:0;top:0;color:var(--blue);font-weight:800}

.demo-content.customer-features>.feature-intro{font-size:14px;font-weight:700;line-height:1.35;margin:8px 0 14px}

#business-demo{--business-color:#895339;background:color-mix(in srgb,var(--business-color) 13%,#f8fafc);transition:background .55s ease}
.customer-app-brand{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 8px;color:var(--business-color);font-size:14px;line-height:1.25}
.customer-brand-icon{width:32px;height:32px;flex-shrink:0;background:var(--business-color);color:#fff;border-radius:8px;display:grid;place-items:center}
.customer-brand-icon svg{width:24px;height:24px}
#business-demo .simulation-button{background:var(--business-color);color:#fff}
#business-demo .customer-features li::before{color:var(--business-color)}
#business-demo .customer-features ul{gap:7px}
#business-demo .feature-intro{margin:6px 0 10px;font-size:13px}
@media(prefers-color-scheme:dark){
 #business-demo{background:color-mix(in srgb,var(--business-color) 27%,#101720)}
 #business-demo .customer-app-brand,#business-demo .customer-features li::before{color:color-mix(in srgb,var(--business-color) 45%,white)}
}

/* Carry the app surface through the status area and home-indicator area. */
.phone-screen::after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:#dfe7e7;transition:background-color .4s ease,opacity .35s ease}
.phone-screen:has(.business-demo:not([hidden]))::after{opacity:1}
.phone-screen:has(#business-demo:not([hidden]))::after{background:color-mix(in srgb,var(--business-color,#895339) 13%,#f8fafc)}
#business-demo{transition:background-color .4s ease}
#business-demo .simulation-button,.customer-brand-icon{transition:background-color .4s ease}
.customer-app-brand,#business-demo .customer-features li::before{transition:color .4s ease}
@media(prefers-color-scheme:dark){
 .phone-screen::after{background:#203246}
 .phone-screen:has(#business-demo:not([hidden]))::after{background:color-mix(in srgb,var(--business-color,#895339) 27%,#101720)}
}
@media(prefers-reduced-motion:reduce){.phone-screen::after,#business-demo,#business-demo .simulation-button,.customer-brand-icon,.customer-app-brand,#business-demo .customer-features li::before{transition:none}}

/* Reveal the next surface with a feathered diagonal boundary. */
#business-demo{background:transparent;z-index:7;transition:none}
.phone-screen:has(#business-demo:not([hidden]))::after{transition:opacity .35s ease}
.app-color-wipe{position:absolute;inset:0;z-index:6;pointer-events:none;background:color-mix(in srgb,var(--previous-color) 13%,#f8fafc);mask-image:linear-gradient(135deg,#000 44%,transparent 56%);mask-size:300% 300%;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(135deg,#000 44%,transparent 56%);-webkit-mask-size:300% 300%;-webkit-mask-repeat:no-repeat}
@media(prefers-color-scheme:dark){.app-color-wipe{background:color-mix(in srgb,var(--previous-color) 27%,#101720)}}

#console-demo .customer-app-brand{color:var(--blue)}
.console-brand-icon,.console-brand-icon img{display:block;width:32px;height:32px;border-radius:8px;object-fit:cover;flex-shrink:0}
.console-feature-list{list-style:none;padding:0;margin:14px 0;display:grid;gap:7px}
.console-feature-list li{position:relative;padding-left:17px;font-size:11px;line-height:1.5}
.console-feature-list li::before{content:'✓';position:absolute;left:0;top:0;color:var(--blue);font-weight:800}

.demo-content.console-features>.feature-intro{font-size:13px;font-weight:700;line-height:1.35;margin:6px 0 10px}

#console-demo .console-feature-list{gap:5px;margin:8px 0}
#console-demo .console-feature-list li{font-size:10px;line-height:1.35}
#console-demo .customer-app-brand{margin-bottom:6px}

.service-icon svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}