/* Four unapproved design directions. Scoped to review frames, never the live page. */.site-section [data-hue]{--hue:var(--accent)}
.site-section .wrap{width:calc(100% - var(--gutter)*2);max-width:var(--max);margin-inline:auto}.site-section .chapter{padding:100px 0;border-top:1px solid var(--rule);background:none}.site-section .hero{padding:62px 0 0;background:none;overflow:hidden}.site-section .aurora,.site-section .closing-glow{display:none}.site-section .grad{background:none;-webkit-text-fill-color:currentColor;color:inherit}.site-section .title em{font-style:normal;color:inherit}.site-section .title{font-size:clamp(35px,4.2vw,57px);font-weight:550;line-height:1.09;letter-spacing:-2.6px}.site-section .display{font-size:clamp(58px,7.3vw,100px);font-weight:550;line-height:.99;letter-spacing:-5.2px}.site-section .body,.site-section .lede{font-size:16px;line-height:1.75;color:var(--body);max-width:38em}.site-section .eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;line-height:1.5;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin:0 0 18px}.site-section .eyebrow .tile{background:transparent;box-shadow:none;border:1px solid var(--rule);border-radius:5px;color:var(--ink);width:26px;height:26px}.site-section .tile .g{width:14px;height:14px}.site-section .btn{border-radius:8px;box-shadow:none;font-size:13px;letter-spacing:0;font-weight:500;gap:9px;transition:background .2s,transform .2s}.site-section .btn .g{width:16px;height:16px}.site-section .btn-primary{background:var(--ink);color:var(--paper);border:1px solid var(--ink)}.site-section .btn-primary:hover{background:#3a3a36;transform:translateY(-1px)}.site-section .btn-ghost{border:1px solid #bcb6aa;background:transparent;color:var(--ink)}.site-section .btn-ghost:hover{background:#e7e1d6}.site-section .btn-lg{height:48px;padding:0 19px}.site-section .cta-row{gap:10px;flex-wrap:wrap}.site-section .cta-row .btn{white-space:nowrap}.site-section .also-for{color:var(--muted);font-size:11px}.site-section .points{margin-top:30px;gap:22px}.site-section .points li{gap:13px}.site-section .points>li>.g{color:var(--ink);background:none;width:18px;height:18px}.site-section .points strong{color:var(--ink);font-size:13px;font-weight:600}.site-section .points span{color:var(--body);font-size:13px;line-height:1.65}.site-section .split{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:center}.site-section .copy>.body{margin-top:22px}.site-section .head-center{text-align:left;max-width:none;margin:0;display:grid;grid-template-columns:1.1fr 1fr;column-gap:100px;align-items:end}.site-section .head-center .eyebrow{grid-column:1/-1}.site-section .head-center .title{grid-column:1}.site-section .head-center .body{grid-column:2;margin:0;max-width:35em}.site-section .section-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:end;margin-bottom:50px}.site-section .section-intro>.body{margin:0}.site-section .section-detail-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:70px;align-items:center}.site-section .section-detail-grid .points{margin:0}
/* Native product examples remain dark, with readable neutral text. */
.site-section .demo:not(.demo-phone),.site-section .hero-stage,.site-section .lanes-card,.site-section .gal-frame{--canvas:#101214;--canvas-2:#151719;--card:#1c1e20;--card-2:#232528;--fill:#2b2e30;--hair:#323436;--hair-2:#424548;--ink:#f4f2ed;--body:#d1d0c9;--muted:#9c9e98;--midnight:#181b20ed;--hue:#d47d58;color:var(--ink)}.site-section .demo-dictate .window,.site-section .console{border:1px solid #343639;box-shadow:0 24px 50px -32px #14141480}.site-section .win-bar{color:#a7aaa5;border-bottom-color:#323436;background:#202225}.site-section .window{border-radius:13px}.site-section .lights i{filter:saturate(.25)}.site-section .mail{background:#17191b}.site-section .mail-row{border-color:#303235}.site-section .mail-row span{color:#9a9d97}.site-section .mail-row b,.site-section .mail-body{color:#ebeae4}.site-section .caret{background:#d5805b}.site-section .pill{background:#1b1d23;border:1px solid #45434a;box-shadow:0 10px 30px #0004}.site-section .dictate-keys kbd,.site-section .hero-keys kbd,.site-section .con-keys kbd{background:linear-gradient(#2c2e32,#232529);color:#f0efe9;border-color:#414347}.site-section kbd.down{background:#dc916d;color:#171715;border-color:#f2bc9c}.site-section .demo-cleanup .tabs{margin-bottom:18px}.site-section .tabs button{color:var(--muted);background:transparent;border-radius:6px;font-size:12px}.site-section .tabs button[aria-selected=true]{background:#2b2e30;color:#f7f2e9;box-shadow:inset 0 0 0 1px #4b4944}.site-section .cl-card{border:1px solid #343639;background:#1b1d20;box-shadow:none;padding:23px}.site-section .cl-typed{background:#20221f;border-color:#515549}.site-section .cl-text{font-size:16px;line-height:1.7}.site-section .cl-label{font-size:11px;letter-spacing:.3px}.site-section .cl-typed .cl-label{color:#d5a48b}.site-section .cl-arrow{box-shadow:none;border:1px solid #4a4b46;background:#282b29;color:#d6a58c}.site-section .callout{border:1px solid var(--rule);background:none;box-shadow:none;border-radius:10px;padding:22px;font-size:13px;color:var(--body);margin:0}.site-section .callout strong{color:var(--ink)}.site-section .callout-tile{color:var(--ink);background:none;box-shadow:none}.site-section .console{border-radius:16px;padding:12px;background:#191b1d}.site-section .con-head{font-size:13px}.site-section .con-item{background:#111315;box-shadow:inset 0 0 0 1px #2b2e30;border-radius:10px;padding:18px}.site-section .con-said{font-size:14px}.site-section .con-step{font-size:12px}.site-section .examples{gap:0;margin-top:27px}.site-section .examples li{padding:13px 0;border-top:1px solid var(--rule);font-size:12px;color:var(--body)}.site-section .lanes-card{box-shadow:none;border:1px solid #353739;background:#191c1d;border-radius:17px;padding:28px}.site-section .lanes-head{font-size:12px}.site-section .lanes-tag{font-size:10px}.site-section .notes{border-color:#343639}.site-section .notes-label{font-size:11px}.site-section .notes li{font-size:12px}.site-section .lane-name{font-size:11px}.site-section .meet-stage{display:grid;grid-template-columns:1.5fr .65fr;gap:40px;align-items:center;margin:45px 0 35px;min-height:0;padding:0}.site-section .meeting-pill{position:static;width:100%;max-width:260px;justify-self:center;filter:drop-shadow(0 20px 30px #17171520)}.site-section .meet-points{grid-template-columns:repeat(3,1fr);gap:30px;margin-top:30px;border-top:1px solid var(--rule);padding-top:25px}.site-section .meet-points>li{background:none;box-shadow:none;border-radius:0;padding:0}.site-section .meet-points .g{color:var(--ink);width:20px;height:20px}.site-section .meet-points strong{font-size:13px;color:var(--ink)}.site-section .meet-points span{font-size:12px;line-height:1.65;color:var(--body)}.site-section .assist-stage{margin:44px 0 38px;padding:34px 46px;position:relative;background:#e7e1d6;border:1px solid var(--rule);border-radius:19px}.site-section .assist-stage .window{max-width:none;margin:0;border:1px solid #2b2d32;box-shadow:0 18px 40px -26px #0008}.site-section .float-reminder{width:290px;right:2%;bottom:-8%}.site-section .feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:44px}.site-section .feature-grid>li{border:0;border-top:1px solid var(--rule);border-radius:0;background:none;box-shadow:none;padding:22px 0 0}.site-section .feature-grid .g{width:22px;height:22px;color:var(--ink)}.site-section .feature-grid strong{color:var(--ink);font-size:13px}.site-section .feature-grid span{font-size:12px;color:var(--body);line-height:1.7}.site-section .demo-phone{background:#e6e0d5;border:1px solid var(--rule);border-radius:24px;padding:40px 48px;min-height:660px}.site-section .phone{margin:auto;width:270px;max-width:100%}.site-section .float-approval{width:240px;right:-6%;bottom:20%;filter:drop-shadow(0 20px 25px #17171522)}.site-section .phone-tabs{gap:4px;margin-top:30px}.site-section .phone-tabs button{border-radius:8px;padding:14px;box-shadow:none;border:1px solid transparent}.site-section .phone-tabs button:hover{background:#e9e3d9}.site-section .phone-tabs button[aria-selected=true]{background:#f8f5ee;border-color:#b5aa99;box-shadow:none}.site-section .phone-tabs button[aria-selected=true] .pt-icon{color:var(--accent);background:transparent}.site-section .pt-icon{color:#6f7068;background:none;box-shadow:none}.site-section .phone-tabs strong{font-size:13px}.site-section .phone-tabs small{font-size:12px;line-height:1.6;color:var(--body)}.site-section .fineprint{color:var(--muted);font-size:11px;margin-top:32px;max-width:800px;text-align:center}.site-section .gal-tabs{margin:32px 0 20px;justify-content:flex-start;gap:8px;flex-wrap:wrap}.site-section .gal-tabs button{font-size:12px;border-radius:6px;padding:10px 16px;color:var(--muted);border:1px solid transparent;background:none;box-shadow:none}.site-section .gal-tabs button[aria-selected=true]{color:var(--ink);background:#e8e1d5;border-color:var(--rule)}.site-section .gal-frame{background:#181a1c;padding:10px;border:1px solid #313335;border-radius:16px;box-shadow:0 30px 55px -45px #15151590}.site-section .gal-frame img{border-radius:9px}.site-section .gal-caption{color:var(--muted);font-size:12px;text-align:left;margin-top:17px}.site-section .jobs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:45px 0}.site-section .job{border:1px solid var(--rule);border-radius:12px;background:#eae4d9;padding:23px;box-shadow:none}.site-section .job-head{font-size:12px;color:var(--ink)}.site-section .job-head .tile{background:none;color:var(--ink);box-shadow:none}.site-section .seg{background:#f5f1e8;border:1px solid var(--rule);padding:3px;font-size:10px;gap:3px}.site-section .seg span{color:var(--muted);border-radius:4px;padding:6px}.site-section .seg .on{background:#1d1f1c;color:#f6f2e8;box-shadow:none}.site-section .job-model{font-size:10px;color:var(--muted);margin-top:10px}.site-section .privacy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px 44px}.site-section .privacy-grid>li{position:relative;border-top:1px solid var(--rule);padding:23px 0 0;background:none;border-radius:0;box-shadow:none}.site-section .privacy-grid .g{color:var(--ink);width:22px;height:22px;margin-bottom:18px}.site-section .privacy-grid h3{font-size:14px;font-weight:550;margin-bottom:9px;color:var(--ink)}.site-section .privacy-grid p{font-size:12px;line-height:1.75;color:var(--body)}.site-section .faq-grid{display:grid;grid-template-columns:.85fr 1.5fr;gap:110px}.site-section .faq-grid>.faq-list{margin:0}.site-section .faq-list details{border:0;border-top:1px solid var(--rule);padding:20px 0;background:none;box-shadow:none;border-radius:0}.site-section .faq-list summary{font-size:14px;font-weight:550;color:var(--ink)}.site-section .faq-list details p{font-size:13px;line-height:1.8;color:var(--body);padding-right:30px}.site-section .contact-form{margin-top:65px;padding:36px;display:grid;grid-template-columns:.7fr 1.3fr;gap:35px 50px;background:#ebe5da;border:1px solid var(--rule);border-radius:14px;box-shadow:none}.site-section .form-head{grid-row:span 2}.site-section .form-head h3{font-size:25px;letter-spacing:-1px;font-weight:550;color:var(--ink)}.site-section .form-head p{font-size:13px;color:var(--body);line-height:1.7;margin-top:12px}.site-section .form-grid{gap:18px}.site-section .field>span{font-size:11px;color:var(--body)}.site-section input,.site-section select,.site-section textarea{color:var(--ink);background:#f8f5ee;border:1px solid #cfc6b7;border-radius:6px;font-size:13px;box-shadow:none}.site-section input:focus,.site-section select:focus,.site-section textarea:focus{border-color:var(--ink);outline:1px solid var(--ink)}.site-section .form-foot{margin:0}.site-section .form-status{color:var(--body);font-size:11px}.site-section .closing{padding:80px 0 90px;background:var(--paper);border-top:1px solid var(--rule)}.site-section .closing-inner{display:flex;flex-direction:column;align-items:center}.site-section .closing .display{font-size:clamp(45px,5.5vw,70px);letter-spacing:-3px;line-height:1.04}.site-section .closing .lede{font-size:15px;margin-top:21px}.site-section .closing .cta-row{margin-top:25px}.site-section .waitlist{border-top:1px solid var(--rule);padding-top:30px;margin-top:42px;width:min(100%,560px)}.site-section .wl-title{font-size:12px;color:var(--body)}.site-section .wl-row{margin-top:14px;gap:8px}.site-section .wl-row input{min-width:0}.site-section .wl-row input,.site-section .wl-row select,.site-section .wl-row button{height:42px;font-size:11px}.site-section .version{color:var(--muted)}
/* Header and footer are independently selectable sections too. */.site-section .footer-logo{display:flex;align-items:center;gap:8px;width:auto;flex:none;color:var(--ink)}.brand-dot{color:var(--accent)}.site-section .footer{background:var(--paper);color:var(--ink);border-top:1px solid var(--rule);padding:50px 0 24px}.site-section .footer-grid{grid-template-columns:2.2fr 1fr 1fr 1fr;gap:50px}.site-section .footer-brand>p{color:var(--muted);font-size:12px;margin-top:18px}.site-section .footer-grid nav>p{font:10px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:17px}.site-section .footer-grid nav>a{color:var(--body);font-size:12px;margin:8px 0}.site-section .footer-base{border-color:var(--rule);margin-top:45px;padding-top:23px;color:var(--muted);font-size:10px}
/* A: editorial compositions, full-width demonstrations, asymmetric introductions. */
/* B: denser technical grids, square precision, explicit rules. */
.layout-b .chapter{padding:76px 0}.layout-b .title{font-size:43px;letter-spacing:-1.9px}.layout-b .body{font-size:14px}.layout-b .split{gap:45px;grid-template-columns:.9fr 1.1fr;align-items:start}
/* C: product-first placement and deliberate ink-filled contrast. */
/* D: centered, spacious, no gratuitous boxes; quiet details carry the rhythm. */
.layout-d .chapter{padding:95px 0}.layout-d .title{font-size:46px;letter-spacing:-2.1px}.layout-d .hero-grid{display:flex;flex-direction:column;gap:40px}.layout-d .hero-copy{text-align:center;max-width:850px;margin:auto}.layout-d .display{font-size:88px;letter-spacing:-4.6px}.layout-d .hero-meta{justify-content:center;gap:22px;font-size:9px;margin:0 0 26px}.layout-d .hero-support{max-width:580px;margin:26px auto 0}.layout-d .hero-support .lede{font-size:15px}.layout-d .hero-support .cta-row{justify-content:center;margin-top:24px}.layout-d .hero-support .also-for{margin-top:14px}.layout-d .hero-stage{width:900px;max-width:100%;height:350px;min-height:350px;border-radius:12px;background:#1b1d1e;overflow:hidden;box-shadow:0 35px 60px -50px #15151580}.layout-d .hero-stage .orb-wrap{position:absolute;width:340px;height:340px;left:1%;top:0}.layout-d .hero-chat{left:auto;right:5%;bottom:50%;transform:translateY(50%);width:390px;max-width:48%;background:#242727;border:1px solid #393d3a;border-radius:12px;box-shadow:none;font-size:12px}.layout-d .hero-keys{right:5%;top:18px;font-size:10px}.layout-d .hero-keys kbd{height:25px;min-width:30px;font-size:10px}.layout-d .marquee{border:0;margin:25px 0 15px}.layout-d .marquee-label{font-size:10px}.layout-d .marquee-track li{font-size:13px;font-weight:400;color:#8b887f}.layout-d .copy{max-width:800px;text-align:center}.layout-d .copy .points{text-align:left;display:grid;grid-template-columns:1fr 1fr;gap:24px 40px}.layout-d .section-intro{display:block;text-align:center;max-width:650px;margin:0 auto 40px}.layout-d .section-intro .eyebrow{justify-content:center}.layout-d .section-intro>.body{margin:24px auto 0}.layout-d .section-detail-grid{display:flex;flex-direction:column;gap:35px;max-width:930px;margin:auto}.layout-d .section-detail-grid>.demo{width:100%}.layout-d .section-detail-grid .copy{max-width:none;width:100%}.layout-d .section-detail-grid .points{grid-template-columns:repeat(2,1fr)}.layout-d .demo-cleanup{padding:24px;border:1px solid #343838;border-radius:11px;background:#191c1c}.layout-d .cl-panel{grid-template-columns:1fr 1fr;gap:30px;position:relative}.layout-d .cl-arrow{position:absolute;left:50%;top:50%;margin:-20px 0 0 -20px}.layout-d #cleanup .copy{max-width:680px;text-align:left}.layout-d .callout{border:0;border-top:1px solid var(--rule);border-radius:0;padding:24px 0 0}.layout-d .head-center{display:block;text-align:center;max-width:650px;margin:auto}.layout-d .head-center .eyebrow{justify-content:center}.layout-d .head-center .body{margin:24px auto 0;max-width:580px}.layout-d .assist-stage{padding:0;border:0;background:none;max-width:940px;margin:45px auto}.layout-d .feature-grid{grid-template-columns:repeat(4,1fr);max-width:1000px;margin:55px auto 0;gap:30px}.layout-d .feature-grid>li{text-align:center;border:0;padding:0}.layout-d .feature-grid .g{margin-inline:auto}.layout-d .meet-stage{max-width:940px;margin:40px auto;grid-template-columns:1.4fr .6fr;gap:35px}.layout-d .meet-points{max-width:940px;margin:auto;text-align:center}.layout-d .meet-points .g{margin-inline:auto}.layout-d .gal-tabs{justify-content:center}.layout-d .gal-frame{max-width:970px;margin-inline:auto;border-radius:10px;padding:5px}.layout-d .gal-caption{text-align:center}.layout-d .faq-grid{display:block;max-width:760px}.layout-d .faq-grid>div:first-child{text-align:center;margin-bottom:40px}.layout-d .faq-grid>div:first-child .eyebrow{justify-content:center}.layout-d .faq-grid>div:first-child .body{margin:22px auto 0}.layout-d .contact-form{max-width:850px;display:block;margin-inline:auto;padding:30px;background:none;border-radius:10px}.layout-d .form-head{margin-bottom:25px}.layout-d .form-foot{margin-top:22px}.layout-d .closing .display{font-size:60px;letter-spacing:-2.7px}.layout-d .closing .btn-primary{background:#252720}.layout-d .footer-grid{text-align:center;grid-template-columns:repeat(3,1fr);max-width:850px;gap:35px}.layout-d .footer-brand{grid-column:1/-1}.layout-d .footer-logo{justify-content:center}.layout-d .footer-base{text-align:center}
@media(max-width:850px){.site-section .chapter{padding:60px 0}.site-section .split,.site-section .section-intro,.site-section .section-detail-grid{display:flex!important;flex-direction:column!important;gap:30px!important;align-items:stretch!important}.site-section .split>.copy,.site-section .split>.demo{order:initial!important}.site-section .title{font-size:36px;letter-spacing:-1.7px}.site-section .body,.site-section .lede{font-size:14px;line-height:1.75}.site-section .hero{padding-top:40px}.site-section .display{font-size:clamp(44px,8.5vw,70px);letter-spacing:-2.5px}.site-section .hero-grid{display:flex!important;flex-direction:column!important;gap:30px!important}.site-section .hero-copy{display:block!important;order:0!important;text-align:left!important;width:100%;max-width:none}.site-section .hero-meta{flex-direction:row;justify-content:flex-start!important;flex-wrap:wrap;gap:9px 16px;font-size:9px;margin-bottom:22px}.site-section .hero-meta .g{width:12px;height:12px}.site-section .hero-support{max-width:none;margin:22px 0 0;padding:0}.site-section .hero-support .cta-row{justify-content:flex-start!important;margin-top:22px}.site-section .hero-support .also-for{margin-top:14px}.site-section .hero-stage{order:1!important;width:100%!important;min-height:410px!important;height:410px!important;max-width:none!important}.site-section .hero-stage .orb-wrap{width:310px!important;height:310px!important;left:50%!important;top:-30px!important;transform:translateX(-50%)!important}.site-section .hero-chat{max-width:none!important;width:auto!important;left:18px!important;right:18px!important;bottom:20px!important;top:auto!important;transform:none!important;font-size:12px!important;padding:15px!important}.site-section .hero-keys{display:flex;top:18px!important;right:18px!important;font-size:9px}.site-section .hero-keys kbd{height:23px;min-width:27px;font-size:9px}.site-section .hero-keys .hk-label{display:none}.site-section .hc-row{grid-template-columns:57px 1fr;gap:8px}.site-section .hc-who{font-size:10px}.site-section .marquee{margin-top:25px}.site-section .marquee-track li{font-size:12px}.site-section .head-center{display:block;text-align:left;max-width:none}.site-section .head-center .body{margin-top:22px;max-width:none}.site-section .section-intro{margin-bottom:30px;text-align:left;max-width:none}.site-section .eyebrow,.layout-d .head-center .eyebrow,.layout-d .section-intro .eyebrow{justify-content:flex-start!important}.site-section .copy{max-width:none;text-align:left}.site-section .points,.layout-d .copy .points,.layout-d .section-detail-grid .points{display:grid;grid-template-columns:1fr;gap:18px}.site-section .points strong{font-size:13px}.site-section .section-detail-grid .copy{max-width:none!important}.site-section .demo-cleanup{padding:16px!important}.site-section .cl-panel{display:grid;grid-template-columns:1fr!important;gap:18px!important}.site-section .cl-arrow{position:relative!important;left:auto!important;top:auto!important;margin:-25px auto!important;width:34px;height:34px}.site-section .cl-card{padding:18px}.site-section .cl-text{font-size:14px;min-height:5em}.site-section .callout{margin:0!important;font-size:12px}.site-section .head-center .title{grid-column:auto}.site-section .assist-stage{width:100%;padding:16px!important;margin:30px 0 24px!important}.site-section .float-reminder{width:190px;bottom:-10%;right:-2%}.site-section .feature-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:25px 18px!important;margin-top:32px!important}.site-section .feature-grid>li{padding:18px 0 0!important;text-align:left!important;background:none!important;border:0!important;border-top:1px solid var(--rule)!important;border-radius:0!important}.site-section .feature-grid .g{margin-inline:0!important}.site-section .meet-stage{grid-template-columns:1fr!important;gap:28px!important;padding:0!important;background:none!important;margin:30px 0!important}.site-section .lanes-card{padding:18px}.site-section .lanes-title{font-size:10px}.site-section .lanes-tag{font-size:9px}.site-section .notes li{font-size:11px}.site-section .meeting-pill{max-width:230px}.site-section .meet-points{grid-template-columns:1fr!important;gap:22px;text-align:left!important}.site-section .meet-points .g{margin-inline:0}.site-section .demo-phone{width:100%!important;min-height:600px!important;padding:25px!important;max-width:none!important}.site-section .phone{width:245px}.site-section .float-approval{right:-8px!important;bottom:12%!important;width:205px!important}.site-section .phone-tabs{grid-template-columns:1fr!important;gap:5px;max-width:none;margin-top:25px}.site-section .phone-tabs button{display:flex!important;text-align:left!important;padding:12px}.site-section .phone-tabs .pt-icon{margin:0!important}.site-section .phone-tabs small{font-size:11px}.site-section .gal-tabs{gap:4px;margin-top:22px;justify-content:flex-start!important}.site-section .gal-tabs button{font-size:10px;padding:8px 10px}.site-section .gal-frame{border-radius:8px;padding:4px}.site-section .gal-caption{font-size:10px;text-align:left}.site-section .jobs{grid-template-columns:1fr 1fr!important;gap:10px!important;padding:0!important;background:none!important;border:0!important;margin:30px 0!important}.site-section .job{padding:16px!important;border:1px solid var(--rule)!important;border-radius:8px!important;--ink:#171915!important;--body:#55554a!important;--muted:#79776e!important;background:#eee8dd!important}.site-section .job-head{font-size:10px;gap:6px}.site-section .job-head .tile{width:18px;height:18px;flex:none}.site-section .seg{font-size:9px}.site-section .privacy-grid{grid-template-columns:1fr!important;gap:20px!important;border:0!important}.site-section .privacy-grid>li{display:block!important;padding:22px 0 0!important;border:0!important;border-top:1px solid var(--rule)!important;background:none!important;border-radius:0!important}.site-section .faq-grid{display:block;max-width:none}.site-section .faq-grid>div:first-child{padding:0!important;background:none!important;margin-bottom:30px;text-align:left!important;--ink:#181918;--body:#56564f;--muted:#79776e;color:var(--ink)}.site-section .faq-grid>div:first-child .body{margin:22px 0 0}.site-section .faq-list summary{font-size:13px;padding-right:30px}.site-section .faq-list details p{font-size:12px;padding-right:0}.site-section .contact-form{display:block!important;padding:23px!important;margin-top:40px!important}.site-section .form-head{margin-bottom:25px}.site-section .form-grid{grid-template-columns:1fr;gap:15px}.site-section .field{grid-column:auto}.site-section .form-foot{margin-top:20px}.site-section .closing{padding:55px 0}.site-section .closing-inner{display:flex!important;text-align:center!important}.site-section .closing .display{font-size:49px;letter-spacing:-2.5px}.site-section .closing .lede{font-size:13px}.site-section .closing .cta-row{justify-content:center;gap:7px}.site-section .closing .cta-row .btn{font-size:11px;height:40px;padding-inline:12px}.site-section .closing .waitlist{margin:30px 0 0!important;border-left:0!important;border-top:1px solid var(--rule)!important;padding:25px 0 0!important}.site-section .wl-row{flex-wrap:wrap}.site-section .wl-row input{flex-basis:100%;width:100%}.site-section .wl-row select{flex:1}.site-section .wl-row button{flex:1}.site-section .footer{padding-top:35px}.site-section .footer-grid{grid-template-columns:1fr 1fr 1fr!important;gap:25px 15px!important;text-align:left!important}.site-section .footer-brand{grid-column:1/-1;display:block!important;padding-bottom:15px}.site-section .footer-logo{justify-content:flex-start!important}.site-section .footer-brand>p{font-size:11px;margin-top:16px!important}.site-section .footer-grid nav>p{font-size:9px}.site-section .footer-grid nav>a{font-size:10px}.site-section .footer-base{text-align:left!important;font-size:9px;margin-top:25px;line-height:1.8}}
@media(prefers-reduced-motion:reduce){.site-section *,.site-section *::before,.site-section *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* Approved site: one set of section structures, two global palettes. */
:root,:root[data-theme="light"]{color-scheme:light;--p-bg:#f5f2ec;--p-ink:#101011;--p-body:#4d4b45;--p-muted:#69655c;--p-rule:#d6d0c4;--p-surface:#eae5db;--p-raised:#fcfaf5;--p-soft:#e1dacd;--p-accent:#b54a20;--page-bg:var(--p-bg);--canvas:var(--p-bg);--canvas-2:var(--p-surface);--card:var(--p-raised);--card-2:var(--p-soft);--fill:var(--p-surface);--ink:var(--p-ink);--body:var(--p-body);--muted:var(--p-muted);--hair:var(--p-rule);--hair-2:var(--p-rule);--paper:var(--p-bg);--rule:var(--p-rule);--accent:var(--p-accent);--ember:var(--p-accent);--grad-a:var(--p-accent);--grad-b:var(--p-accent);--font:Inter,Arial,sans-serif;--mono:Inter,Arial,sans-serif;--max:1160px;--gutter:36px;--focus:0 0 0 2px var(--p-bg),0 0 0 4px var(--p-accent)}
:root[data-theme="dark"]{color-scheme:dark;--p-bg:#0c0c0c;--p-ink:#f7f5ef;--p-body:#c4c3ba;--p-muted:#a0a295;--p-rule:#373b31;--p-surface:#171a15;--p-raised:#20251b;--p-soft:#2d3326;--p-accent:#ff8c50}
html,body{background:var(--p-bg);color:var(--p-ink)}body{font-family:Inter,Arial,sans-serif}html{scroll-padding-top:90px}#main{display:block}.site-section{display:flow-root;background:var(--p-bg);color:var(--p-ink)}.site-section [data-hue]{--hue:var(--p-accent)}
/* Preserve the source navigation's single-row, rounded, sticky silhouette. */
.site-header{position:sticky;top:0;z-index:50;background:var(--p-bg)}.site-header .nav{position:relative;padding:12px var(--gutter);background:var(--p-bg)}.site-header .nav-inner{height:56px;gap:20px;padding:0 10px 0 16px;max-width:var(--max);border-radius:999px}.site-header .nav.scrolled .nav-inner{background:color-mix(in srgb,var(--p-surface)90%,transparent);box-shadow:inset 0 0 0 1px var(--p-rule),0 12px 25px -24px #0009;backdrop-filter:blur(18px)}.site-header .nav-links{gap:1px}.site-header .nav-links>a,.site-header .nav-links>button{font:500 12px/1.3 Inter,Arial,sans-serif;color:var(--p-body);border:0;border-radius:999px;background:none;padding:9px 10px;white-space:nowrap;cursor:pointer}.site-header .nav-links>a:hover,.site-header .nav-links>button:hover{background:var(--p-soft);color:var(--p-ink)}.site-header .nav-links>a:after{background:var(--p-accent)}.site-header .nav-actions{gap:9px}.site-header .btn-primary{background:var(--p-ink);color:var(--p-bg);border:1px solid var(--p-ink);box-shadow:none;font:500 12px Inter,Arial,sans-serif;border-radius:999px;gap:7px;height:36px;padding:0 13px}.site-header .btn-primary .g{width:15px;height:15px}.site-header .nav-toggle{color:var(--p-ink);background:var(--p-surface);box-shadow:inset 0 0 0 1px var(--p-rule)}
.swoop-brand{display:inline-flex!important;align-items:center;gap:8px;flex:none;white-space:nowrap;text-decoration:none!important;border-bottom:0!important;box-shadow:none;color:var(--p-ink);min-width:0}.brand-mark{display:block;width:31px;height:31px;flex:none}.brand-title{display:inline-flex;align-items:baseline;gap:0;font-family:'Space Grotesk',Inter,sans-serif;font-size:23px;font-weight:700;line-height:1.1;letter-spacing:-.025em;white-space:nowrap}.brand-dot{color:#ff5a1f}.brand-product{font-family:Inter,Arial,sans-serif;font-weight:500;font-size:15px;letter-spacing:-.025em;line-height:1.1;margin-left:7px;white-space:nowrap}.swoop-brand:hover{text-decoration:none!important}.swoop-brand .brand-title,.swoop-brand .brand-product{text-decoration:none!important}.site-section .footer-logo{width:fit-content}.site-section .footer-logo .brand-mark{width:28px;height:28px}.site-section .footer-logo .brand-title{font-size:22px}html[data-theme="dark"] .brand-mark{filter:invert(1)}
.theme-toggle{height:34px;width:34px;flex:none;border-radius:50%;display:grid;place-items:center;padding:0;background:transparent;border:1px solid var(--p-rule);color:var(--p-ink);cursor:pointer}.theme-toggle:hover{background:var(--p-soft)}.theme-toggle .g{width:17px;height:17px}.theme-toggle .theme-sun{display:none}html[data-theme="dark"] .theme-toggle .theme-sun{display:block}html[data-theme="dark"] .theme-toggle .theme-moon{display:none}.lang-switch{display:inline-flex;align-items:center;height:32px;padding:2px;background:var(--p-surface);border:1px solid var(--p-rule);border-radius:999px;gap:2px;flex:none}.lang-switch .lang-opt{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--p-muted);font:500 11.5px/1 var(--font,Inter,Arial,sans-serif);letter-spacing:-.01em;white-space:nowrap;user-select:none;cursor:default;transition:color .15s ease,background-color .15s ease}.lang-switch .lang-opt.is-active{background:var(--p-bg);color:var(--p-ink);font-weight:600;box-shadow:0 1px 2px #0000000f}.lang-switch .lang-opt.is-disabled{opacity:.5;cursor:not-allowed}.lang-switch .lang-opt.is-disabled:hover{opacity:.75}
/* One global palette applies across every approved structure. */
.site-section{--paper:var(--p-bg);--canvas:var(--p-bg);--canvas-2:var(--p-surface);--card:var(--p-raised);--card-2:var(--p-soft);--fill:var(--p-surface);--ink:var(--p-ink);--body:var(--p-body);--muted:var(--p-muted);--rule:var(--p-rule);--hair:var(--p-rule);--hair-2:var(--p-rule);--accent:var(--p-accent);--ember:var(--p-accent)}.site-section .footer,.site-section .closing{background:var(--p-bg);color:var(--p-ink);border-color:var(--p-rule)}.site-section .btn-primary,.site-section .closing .btn-primary{background:var(--p-ink);color:var(--p-bg);border-color:var(--p-ink)}.site-section .btn-primary:hover{background:var(--p-body);border-color:var(--p-body)}.site-section .btn-ghost,.site-section .closing .btn-ghost{background:transparent;color:var(--p-ink);border-color:var(--p-muted)}.site-section .btn-ghost:hover{background:var(--p-soft)}.site-section .marquee{background:transparent;border-color:var(--p-rule)}.site-section .marquee-label,.site-section .marquee-track li{color:var(--p-muted)}.site-section .assist-stage,.site-section .demo-phone,.site-section .contact-form{background:var(--p-surface);border-color:var(--p-rule)}.site-section .callout{background:var(--p-surface);border-color:var(--p-rule);color:var(--p-body)}.site-section .callout strong,.site-section .callout-tile{color:var(--p-ink)}.site-section .phone-tabs button:hover{background:var(--p-surface)}.site-section .phone-tabs button[aria-selected=true]{background:var(--p-raised);border-color:var(--p-muted)}.site-section .phone-tabs strong{color:var(--p-ink)}.site-section .phone-tabs small{color:var(--p-body)}.site-section .pt-icon{color:var(--p-muted)}.site-section .phone-tabs button[aria-selected=true] .pt-icon{color:var(--p-accent)}.site-section .gal-tabs button{color:var(--p-muted)}.site-section .gal-tabs button[aria-selected=true]{background:var(--p-soft);border-color:var(--p-rule);color:var(--p-ink)}.site-section .jobs{background:transparent;border-color:var(--p-rule)}.site-section .job{--ink:var(--p-ink)!important;--body:var(--p-body)!important;--muted:var(--p-muted)!important;--rule:var(--p-rule)!important;background:var(--p-surface)!important;border-color:var(--p-rule)!important}.site-section .job-head,.site-section .job-head .tile{color:var(--p-ink)}.site-section .job .seg{background:var(--p-raised);border-color:var(--p-rule)}.site-section .job .seg .on{background:var(--p-ink);color:var(--p-bg)}.site-section .job .seg span:not(.on){color:var(--p-muted)}.site-section .privacy-grid,.site-section .privacy-grid>li,.site-section .meet-points,.site-section .feature-grid>li,.site-section .examples li{border-color:var(--p-rule)}.site-section .privacy-grid>li:before{color:var(--p-muted)}.site-section .faq-list details,.site-section .faq-list summary:after{border-color:var(--p-rule)}.site-section input,.site-section select,.site-section textarea{background:var(--p-raised);color:var(--p-ink);border-color:var(--p-muted)}.site-section input::placeholder,.site-section textarea::placeholder{color:var(--p-muted);opacity:1}.site-section input:focus,.site-section select:focus,.site-section textarea:focus{border-color:var(--p-accent);outline:1px solid var(--p-accent)}.site-section .waitlist,.site-section .footer-base{border-color:var(--p-rule)}.site-header :focus-visible,.site-section :focus-visible,.release-notice :focus-visible{outline:2px solid var(--p-accent);outline-offset:4px;box-shadow:none}.source-credit{color:inherit}
/* The sole official ThinkingOrb stays in its working form, never a showcase. */
.hero-stage .orb-wrap{isolation:isolate}.orb-accessible-fallback{position:absolute;inset:0;display:grid;place-items:center;font-family:'Space Grotesk',Inter,sans-serif;font-size:30px;font-weight:700;color:#f4f2ed}.orb-wrap.lit .orb-accessible-fallback{display:none}.hc-who{white-space:nowrap}.closing-inner{gap:0}.site-section .closing-orb{display:none}
.release-notice{width:min(450px,calc(100% - 32px));background:var(--p-bg);color:var(--p-ink);border:1px solid var(--p-rule);border-radius:16px;padding:32px}.release-notice::backdrop{background:#070a0780;backdrop-filter:blur(5px)}.release-notice h2{font-size:29px;line-height:1.1;margin:15px 0;letter-spacing:-.025em}.release-notice>p{font-size:13px;line-height:1.7;color:var(--p-body)}.release-notice .notice-kicker{font:700 10px 'Public Sans',Inter,sans-serif;letter-spacing:.12em;color:var(--p-muted)}.notice-close{position:absolute;right:16px;top:14px;border:0;padding:5px;background:none;color:var(--p-ink);cursor:pointer}.notice-close .g{width:19px;height:19px}.notice-done{margin-top:23px;background:var(--p-ink);color:var(--p-bg);border:0;border-radius:8px;padding:11px 15px;font:500 12px Inter,sans-serif;cursor:pointer}.g{flex-shrink:0}.nav-toggle .g{width:19px;height:19px}.phosphor{fill:currentColor}
@media(max-width:1000px){.site-header .nav-inner{gap:14px}.site-header .nav-links>a,.site-header .nav-links>button{padding-inline:7px;font-size:11px}.brand-title{font-size:21px}.brand-product{font-size:14px}.brand-mark{width:28px;height:28px}}
@media(max-width:920px){.site-header .nav-links{background:var(--p-raised);border:1px solid var(--p-rule);box-shadow:0 18px 40px -30px #0009}.site-header .nav-links>a,.site-header .nav-links>button{text-align:left;font-size:14px;padding:13px 16px;border-radius:9px}.site-header .nav-toggle{display:grid;place-items:center}.site-header .nav-actions{margin-left:auto}.site-header .nav.open .nav-links{visibility:visible;opacity:1;transform:none}.site-header .nav-links{top:77px}}
@media(max-width:850px){:root{--gutter:24px}.site-header .nav{padding:10px 16px}.site-header .nav-inner{padding:0 8px;height:52px}.site-header .nav-actions{gap:8px}.site-section .faq-grid>div:first-child{--ink:var(--p-ink);--body:var(--p-body);--muted:var(--p-muted);color:var(--p-ink)}.site-section .faq-grid>div:first-child .title,.site-section .faq-grid>div:first-child .tile{color:var(--p-ink)}.site-section .faq-grid>div:first-child .eyebrow{color:var(--p-muted)}.site-section .hero-copy{text-align:center!important}.site-section .hero-meta{justify-content:center!important}.site-section .hero-support .cta-row{justify-content:center!important}.site-section .hero-stage{max-width:100%}.brand-title{font-size:21px}.brand-product{font-size:13px}.brand-mark{width:27px;height:27px}}
@media(max-width:560px){.site-header .nav-actions>[data-ui-notice="download"]{display:none}.site-header .nav-inner{gap:9px}.site-header .brand-title{font-size:20px}.site-header .brand-product{font-size:13px;margin-left:5px}.site-header .brand-mark{width:26px;height:26px}.site-header .swoop-brand{gap:6px}.theme-toggle{width:32px;height:32px}.site-header .nav-toggle{width:32px;height:32px}.lang-switch{height:30px}.lang-switch .lang-opt{height:24px;padding:0 7px;font-size:11px}.site-section .hero-meta{font-size:8px;gap:8px 12px}.site-section .hero .display{font-size:clamp(37px,10vw,50px);letter-spacing:-.025em}.site-section .closing .display{font-size:43px;letter-spacing:-.025em}.site-section .hero-chat{font-size:11.5px!important}.site-section .hc-row{grid-template-columns:42px 1fr!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.site-section .also-for button{border:0;background:none;padding:0;margin-left:8px;font:inherit;color:var(--p-body);text-decoration:underline;text-decoration-color:var(--p-rule);text-underline-offset:3px;cursor:pointer}.site-section .also-for button:hover{color:var(--p-ink)}.site-section .footer-grid nav>button{display:block;border:0;background:none;padding:0;margin:8px 0;font:400 12px Inter,Arial,sans-serif;text-align:inherit;color:var(--p-body);cursor:pointer}.site-section .footer-grid nav>button:hover{color:var(--p-ink)}
@media(max-width:850px){.site-section .footer-grid nav>button{font-size:10px}}
.site-header .nav-toggle .nav-close{display:none}.site-header .nav.open .nav-toggle [data-phosphor="list"]{display:none}.site-header .nav.open .nav-toggle .nav-close{display:block}

/* Theme-aligned waitlist surface and readable title/status. */
html[data-theme] .site-section .waitlist{background:var(--p-surface);border-color:var(--p-rule)}html[data-theme] .site-section .wl-title{color:var(--p-ink)}html[data-theme] .site-section .waitlist .form-status{color:var(--p-body)}

/* LogoMarquee component utilities */
.overflow-hidden { overflow: hidden; }
.flex { display: flex; }
.w-max { width: max-content; }
.w-full { width: 100%; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.max-w-7xl { max-width: 80rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.marquee .py-16 { padding-top: 1rem; padding-bottom: 1rem; }
.bg-background { background-color: transparent; }
.pointer-events-none { pointer-events: none; }
.select-none { user-select: none; }
.shrink-0 { flex-shrink: 0; }
.gap-2 { gap: 0.5rem; }
.w-4 { width: 1.15rem; }
.h-4 { height: 1.15rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.font-medium { font-weight: 500; }
.tracking-tight { letter-spacing: -0.025em; }
.whitespace-nowrap { white-space: nowrap; }
.text-foreground { color: var(--p-ink, inherit); }
@media (min-width: 768px) {
  .md\:w-5 { width: 1.4rem; }
  .md\:h-5 { height: 1.4rem; }
  .md\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
}
.mask-\[linear-gradient\(to_right\,transparent\,black_25\%\,black_75\%\,transparent\)\] {
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.marquee-container {
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-preview-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.marquee-app-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
  border-radius: 9999px;
  background: var(--p-surface, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--p-rule, rgba(255, 255, 255, 0.08));
  color: var(--p-ink, inherit);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.08);
  font-family: var(--font, Inter, -apple-system, sans-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
  user-select: none;
  cursor: default;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.marquee-app-item:hover {
  background: var(--p-soft, rgba(255, 255, 255, 0.08));
  border-color: var(--p-muted, rgba(255, 255, 255, 0.22));
}
.marquee-app-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.marquee-app-icon svg {
  width: 40px;
  height: 40px;
  display: block;
}
.marquee-app-name {
  color: var(--p-ink, inherit);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
html[data-theme="dark"] .dark\:brightness-0 {
  filter: brightness(0);
}
html[data-theme="dark"] .dark\:invert {
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   Hero Stage — Futuristic Neon Orb & Bilingual Dictation Sequence
   ========================================================================== */

/* Orb Stage Wrapper */
.hero-stage .orb-wrap {
  position: relative;
  aspect-ratio: 1;
  width: min(440px, 86%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

/* Ambient Neon Glow behind the Orb */
.hero-stage .orb-wrap::before {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(5, 255, 161, 0.28) 0%, rgba(0, 187, 249, 0.2) 45%, rgba(0, 245, 212, 0.08) 70%, transparent 85%);
  filter: blur(36px);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.5s ease, transform 0.5s ease, background 0.5s ease;
}

.hero-stage[data-demo-state="listening"] .orb-wrap::before {
  transform: scale(1.15);
  background: radial-gradient(circle, rgba(57, 255, 20, 0.38) 0%, rgba(5, 255, 161, 0.28) 45%, rgba(0, 187, 249, 0.14) 70%, transparent 85%);
  filter: blur(40px);
}

.hero-stage[data-demo-state="working"] .orb-wrap::before {
  transform: scale(1.08);
  background: radial-gradient(circle, rgba(0, 187, 249, 0.4) 0%, rgba(0, 245, 212, 0.28) 45%, rgba(5, 255, 161, 0.12) 70%, transparent 85%);
  filter: blur(34px);
}

/* Futuristic Vibrant Neon Orb Canvas */
.hero-stage .orb,
[data-orb-neon="true"] {
  position: relative;
  z-index: 1;
  border-radius: 50%;
  box-shadow: 0 0 35px rgba(5, 255, 161, 0.4), 0 0 70px rgba(0, 187, 249, 0.25);
  filter: drop-shadow(0 0 18px rgba(5, 255, 161, 0.5));
  transition: box-shadow 0.4s ease, filter 0.4s ease;
}

.hero-stage[data-demo-state="listening"] .orb {
  box-shadow: 0 0 45px rgba(57, 255, 20, 0.55), 0 0 85px rgba(5, 255, 161, 0.35);
  filter: drop-shadow(0 0 22px rgba(57, 255, 20, 0.6));
}

.hero-stage[data-demo-state="working"] .orb {
  box-shadow: 0 0 45px rgba(0, 187, 249, 0.55), 0 0 85px rgba(0, 245, 212, 0.35);
  filter: drop-shadow(0 0 22px rgba(0, 187, 249, 0.6));
}

/* Status Badge — Positioned right ON TOP of the Orb */
.hero-stage .hc-state,
.hero-stage .orb-wrap .hc-state {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 15px;
  font-family: var(--font, Inter, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #00f5d4;
  background: rgba(14, 18, 22, 0.88);
  border: 1px solid rgba(5, 255, 161, 0.35);
  border-radius: 999px;
  box-shadow: 0 0 20px rgba(5, 255, 161, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
  pointer-events: none;
}

.hero-stage .hc-state::before,
.hero-stage .orb-wrap .hc-state::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #05ffa1;
  box-shadow: 0 0 8px #05ffa1;
  transition: background 0.3s, box-shadow 0.3s;
}

.hero-stage[data-demo-state="listening"] .hc-state {
  color: #39ff14;
  border-color: rgba(57, 255, 20, 0.55);
  box-shadow: 0 0 25px rgba(57, 255, 20, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.hero-stage[data-demo-state="listening"] .hc-state::before {
  background: #39ff14;
  box-shadow: 0 0 12px #39ff14;
  animation: hc-dot-pulse 0.8s ease-in-out infinite alternate;
}

.hero-stage[data-demo-state="working"] .hc-state {
  color: #00bbf9;
  border-color: rgba(0, 187, 249, 0.55);
  box-shadow: 0 0 25px rgba(0, 187, 249, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.hero-stage[data-demo-state="working"] .hc-state::before {
  background: #00bbf9;
  box-shadow: 0 0 12px #00bbf9;
  animation: hc-dot-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes hc-dot-pulse {
  from { opacity: 0.5; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1.25); }
}

/* Default Platform Keycaps */
.hero-keys {
  position: absolute;
  top: 6%;
  right: 2%;
  display: flex !important;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted, #9c9e98);
  background: rgba(21, 23, 27, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 6px 12px 6px 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 5;
}

.hero-keys kbd {
  font-family: var(--font, Inter, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: #f4f2ed;
  background: linear-gradient(#2c2e32, #232529);
  border: 1px solid #414347;
  border-radius: 7px;
  padding: 3px 8px;
  min-width: 32px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 2px 0 #111215;
  transition: all 0.15s ease;
}

.hero-keys kbd.down {
  background: linear-gradient(180deg, #05ffa1, #00f5d4) !important;
  color: #0c1015 !important;
  border-color: #05ffa1 !important;
  transform: translateY(2px) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.6), 0 0 18px rgba(5, 255, 161, 0.6) !important;
}

.hero-keys .hk-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Strikethrough Animation for Ums / Uhs */
.hero-chat .hc-text s {
  text-decoration: none;
  color: #a19eab;
  display: inline;
  transition: background-size 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s ease, opacity 0.35s ease;
  background: linear-gradient(#ff6a52, #ff6a52) 0 55%/0 2px no-repeat;
}

.hero-chat[dir="rtl"] .hc-text s {
  background-position: right 55%;
}

.hero-chat .hc-text s.struck {
  color: #79776e;
  opacity: 0.55;
  background-size: 100% 2px;
}

/* Blinking Caret for Typed Text */
.hero-chat .caret {
  display: inline-block;
  vertical-align: -0.15em;
  background: #00f5d4;
  box-shadow: 0 0 8px #00f5d4;
  animation: 1s step-end infinite blink;
  width: 2px;
  height: 1.15em;
  margin-left: 2px;
}

.hero-chat[dir="rtl"] .caret {
  margin-left: 0;
  margin-right: 2px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Hero Chat RTL Transition and Typography */
.hero-chat {
  transition: opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.hero-chat[dir="rtl"] {
  text-align: right;
  direction: rtl;
}

.hero-chat[dir="rtl"] .hc-row {
  grid-template-columns: 60px 1fr;
}

.hero-chat[dir="rtl"] .hc-who {
  font-family: inherit;
  font-weight: 700;
}



/* --- How It Works Section Styles --- */
/* One demo: "On your computer" (Email / Slack / Notes), then a Cloud waitlist note. */

.how-it-works-section {
  padding: 96px 0;
  border-top: 1px solid var(--p-rule, rgba(255, 255, 255, 0.08));
  background: var(--p-bg, transparent);
  position: relative;
  overflow: hidden;
}

.hiw-wrap {
  width: calc(100% - var(--gutter, 32px) * 2);
  max-width: var(--max, 1200px);
  margin-inline: auto;
}

.hiw-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Header */
.hiw-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}

.hiw-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--p-ink, #f4f2ed);
  margin: 0 0 16px;
  text-wrap: balance;
}

.hiw-subtitle {
  font-size: 17px;
  line-height: 1.6;
  color: var(--p-body, #d1d0c9);
  margin: 0;
  text-wrap: pretty;
}

/* Demo area: the app window sits straight on the page background */
.hiw-demo-frame {
  position: relative;
  max-width: 1080px;
  margin-inline: auto;
  color: var(--p-ink, #f4f2ed);
}

.hiw-demo-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 16px;
  margin-bottom: 20px;
}

.hiw-context-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.hiw-context-label {
  font-size: 12px;
  color: var(--p-muted, #9c9e98);
  margin-right: 6px;
  font-weight: 500;
}

.hiw-context-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--p-raised, #1a1d21);
  border: 1px solid var(--p-rule, #30343a);
  color: var(--p-body, #b0b3ba);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.hiw-context-btn:hover {
  background: var(--p-soft, #23272d);
  color: var(--p-ink, #f4f2ed);
}

.hiw-context-btn:focus-visible {
  outline: 2px solid var(--p-accent, #dc916d);
  outline-offset: 2px;
}

.hiw-context-btn.is-active {
  background: var(--p-raised, #282c33);
  color: var(--p-ink, #ffffff);
  border-color: var(--p-accent, #dc916d);
  box-shadow: 0 0 0 1px var(--p-accent, #dc916d);
}

/* Stage chips (Dictating -> Cleaning up -> Text inserted) */
.hiw-stage-chips {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hiw-stage-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--p-muted, #72757d);
  padding: 5px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--p-rule, #282b30);
  white-space: nowrap;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.hiw-stage-chip.is-active {
  color: var(--p-ink, #ffffff);
  background: var(--p-raised, #22262c);
}

.hiw-stage-chip.is-active.stage-dictating {
  border-color: var(--p-accent, #dc916d);
  box-shadow: 0 0 12px rgba(220, 145, 109, 0.25);
}

.hiw-stage-chip.is-active.stage-cleaning {
  border-color: #e07a5f;
  box-shadow: 0 0 12px rgba(224, 122, 95, 0.25);
}

.hiw-stage-chip.is-active.stage-ready {
  border-color: #22a35a;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.2);
}

.hiw-stage-chip.is-active.stage-ready svg {
  color: #22a35a;
}

.hiw-stage-arrow {
  color: var(--p-muted, #4b4f57);
  flex-shrink: 0;
}

.hiw-pill-bars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 12px;
}

.hiw-pill-bars i {
  width: 2px;
  height: 10px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleY(0.5);
}

.hiw-stage-chip.is-active .hiw-pill-bars i {
  background: var(--p-accent, #dc916d);
  animation: pillWave 1.1s ease-in-out infinite;
}

.hiw-pill-bars i:nth-child(2) { animation-delay: 0.2s; }
.hiw-pill-bars i:nth-child(3) { animation-delay: 0.4s; }

@keyframes pillWave {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1.1); }
}

/* Desktop stage: window + floating pill */
.hiw-desk {
  position: relative;
  padding-bottom: 34px; /* room for the pill that overlaps the window's lower edge */
}

.hiw-desk-window {
  animation: hiwWindowIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes hiwWindowIn {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to { opacity: 1; transform: none; }
}

.hiw-app {
  --app-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", sans-serif;
  font-family: var(--app-font);
  height: 400px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--p-ink, #f4f2ed) 14%, transparent),
    0 2px 6px -2px rgba(0, 0, 0, 0.12),
    0 28px 60px -24px rgba(0, 0, 0, 0.4);
  text-align: left;
}

.hiw-lights {
  display: inline-flex;
  gap: 8px;
  flex-shrink: 0;
}

.hiw-lights i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2);
}

.hiw-lights i:nth-child(1) { background: #ff5f57; }
.hiw-lights i:nth-child(2) { background: #febc2e; }
.hiw-lights i:nth-child(3) { background: #28c840; }

/* Inserted text + filler clean-up */
.hiw-ins {
  white-space: pre-wrap;
}

.hiw-ins--inserting .hiw-chunk {
  animation: hiwInsertIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hiwInsertIn {
  from { opacity: 0; filter: blur(4px); transform: translateY(10px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

.hiw-chunk {
  display: inline;
}

.hiw-chunk.is-filler {
  display: inline-block;
  vertical-align: bottom;
  white-space: pre;
  overflow: hidden;
  max-width: var(--w, 12ch);
  border-radius: 3px;
  transition:
    max-width 0.55s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.4s ease,
    color 0.25s ease,
    background-color 0.25s ease;
}

.hiw-ins--striking .hiw-chunk.is-filler,
.hiw-ins--cutting .hiw-chunk.is-filler {
  color: #c2410c;
  background: rgba(255, 90, 31, 0.14);
  text-decoration: line-through;
  text-decoration-color: #ff5a1f;
  text-decoration-thickness: 2px;
}

.hiw-ins--cutting .hiw-chunk.is-filler {
  max-width: 0;
  opacity: 0;
}

.hiw-clean {
  animation: hiwCleanIn 0.5s ease both;
}

@keyframes hiwCleanIn {
  from { opacity: 0.35; filter: blur(2px); }
  to { opacity: 1; filter: blur(0); }
}

.hiw-app-caret {
  display: inline-block;
  width: 1.5px;
  height: 1.15em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: currentColor;
  animation: hiwCaretBlink 1s step-end infinite;
}

@keyframes hiwCaretBlink {
  50% { opacity: 0; }
}

.hiw-placeholder {
  color: #8a8a8f;
}

.hiw-hide-sm { flex-shrink: 0; }

/* Email: macOS Mail compose window */
.hiw-mail {
  background: #ffffff;
  color: #1d1d1f;
}

.hiw-mail-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 46px;
  padding: 0 14px;
  background: linear-gradient(#f2f1f3, #e9e8ea);
  border-bottom: 1px solid #d4d3d6;
  color: #6e6e73;
  flex-shrink: 0;
}

.hiw-mail-send {
  display: grid;
  place-items: center;
  width: 30px;
  height: 24px;
  border-radius: 6px;
  color: #0a7aff;
}

.hiw-mail-wintitle {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: #3a3a3c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hiw-mail-tools {
  display: inline-flex;
  gap: 14px;
}

.hiw-mail-fields {
  padding: 0 20px;
  flex-shrink: 0;
}

.hiw-mail-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border-bottom: 1px solid #e5e5ea;
  font-size: 13px;
}

.hiw-mail-lbl {
  color: #8e8e93;
  min-width: 52px;
}

.hiw-mail-token {
  color: #0a7aff;
  background: rgba(10, 122, 255, 0.1);
  border-radius: 4px;
  padding: 1px 6px;
}

.hiw-mail-subject {
  font-weight: 500;
}

.hiw-mail-body {
  flex: 1;
  padding: 18px 20px 40px;
  font-size: 14.5px;
  line-height: 1.55;
  overflow: hidden;
}

.hiw-mail-compose {
  margin: 0 0 22px;
  min-height: 3.1em;
  color: #1d1d1f;
}

.hiw-mail-quote {
  position: relative;
  padding-left: 12px;
  color: #6e6e73;
  font-size: 13px;
}

.hiw-mail-quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: #0a7aff;
}

.hiw-mail-quote p {
  margin: 0 0 6px;
}

.hiw-mail-quote-head {
  color: #8e8e93;
}

/* Slack */
.hiw-slack {
  background: #ffffff;
  color: #1d1c1d;
  font-family: Lato, var(--app-font);
}

.hiw-slack-titlebar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 38px;
  padding: 0 12px;
  background: #3f0e40;
  flex-shrink: 0;
}

.hiw-slack-search {
  flex: 1;
  max-width: 420px;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
}

.hiw-slack-main {
  flex: 1;
  min-height: 0;
  display: flex;
}

.hiw-slack-side {
  width: 196px;
  flex-shrink: 0;
  background: #3f0e40;
  color: rgba(255, 255, 255, 0.7);
  padding: 10px 8px;
  font-size: 13.5px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hiw-slack-ws {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px 12px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
}

.hiw-slack-sec {
  margin: 10px 0 4px;
  padding: 0 10px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}

.hiw-slack-ch {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 27px;
  padding: 0 10px;
  border-radius: 6px;
}

.hiw-slack-ch.is-active {
  background: #1164a3;
  color: #ffffff;
  font-weight: 600;
}

.hiw-slack-mini {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 8.5px;
  font-weight: 700;
  color: #ffffff;
}

.hiw-slack-mini.is-a,
.hiw-slack-avatar.is-a { background: #2b7a78; }
.hiw-slack-mini.is-b,
.hiw-slack-avatar.is-b { background: #b0582a; }

.hiw-slack-chan {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hiw-slack-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid #e2e2e2;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
}

.hiw-slack-head b svg {
  flex-shrink: 0;
}

.hiw-slack-head b {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 800;
  align-self: center;
}

.hiw-slack-topic {
  font-size: 12.5px;
  color: #616061;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hiw-slack-msgs {
  flex: 1;
  min-height: 0;
  padding: 14px 18px 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  overflow: hidden;
}

.hiw-slack-msg {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
}

.hiw-slack-msg p {
  margin: 0;
}

.hiw-slack-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 7px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.hiw-slack-meta b {
  font-weight: 800;
}

.hiw-slack-meta time {
  margin-left: 4px;
  font-size: 11.5px;
  color: #616061;
}

.hiw-slack-composer {
  margin: 8px 18px 40px;
  border: 1px solid #bbbabb;
  border-radius: 8px;
  flex-shrink: 0;
}

.hiw-slack-fmt {
  display: flex;
  gap: 12px;
  padding: 7px 10px;
  background: #f8f8f8;
  border-radius: 8px 8px 0 0;
  color: #9a999a;
}

.hiw-slack-input {
  margin: 0;
  padding: 8px 12px 4px;
  min-height: 46px;
  font-size: 14px;
  line-height: 1.45;
}

.hiw-slack-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px 7px;
  color: #616061;
}

.hiw-slack-plus {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ececec;
}

.hiw-slack-sendbtn {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  border-radius: 5px;
  color: #b4b4b4;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.hiw-slack-sendbtn.is-ready {
  background: #007a5a;
  color: #ffffff;
}

/* Notes: Apple Notes, warm paper */
.hiw-notes {
  background: #fbf8f1;
  color: #2b2a27;
}

.hiw-notes-titlebar {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 44px;
  padding: 0 14px;
  background: #f1ede4;
  border-bottom: 1px solid #ddd7ca;
  color: #77736a;
  flex-shrink: 0;
}

.hiw-notes-tools {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}

.hiw-notes-spacer {
  flex: 1;
}

.hiw-notes-main {
  flex: 1;
  min-height: 0;
  display: flex;
}

.hiw-notes-list {
  width: 220px;
  flex-shrink: 0;
  padding: 10px 8px;
  background: #f4f0e7;
  border-right: 1px solid #ddd7ca;
}

.hiw-notes-folder {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #77736a;
}

.hiw-notes-folder svg {
  color: #e3a713;
}

.hiw-notes-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
}

.hiw-notes-item + .hiw-notes-item {
  margin-top: 2px;
}

.hiw-notes-item b {
  font-weight: 700;
}

.hiw-notes-item span {
  font-size: 12px;
  color: #77736a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hiw-notes-item time {
  margin-right: 6px;
  color: #4d4a44;
}

.hiw-notes-item.is-active {
  background: #f7d773;
}

.hiw-notes-page {
  flex: 1;
  min-width: 0;
  padding: 14px 28px 40px;
  background:
    repeating-linear-gradient(0deg, rgba(120, 100, 60, 0.018) 0 1px, transparent 1px 3px),
    #fffdf7;
}

.hiw-notes-date {
  margin: 0 0 14px;
  text-align: center;
  font-size: 11.5px;
  color: #9a958a;
}

.hiw-notes-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hiw-notes-body {
  font-size: 14.5px;
  line-height: 1.65;
}

.hiw-notes .hiw-app-caret {
  background: #e3a713;
}

/* Floating dictation pill (after the hero pill) */
.hiw-float-pill {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 32px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 20px;
  border-radius: 9999px;
  background: rgba(18, 19, 28, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 18px 44px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #f4f3f6;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 2;
}

.hiw-float-pill.is-idle {
  width: min(300px, calc(100% - 32px));
}

.hiw-float-pill.is-speech {
  border-color: rgba(255, 90, 31, 0.42);
  box-shadow: 0 18px 44px -10px rgba(0, 0, 0, 0.6), 0 0 28px -6px rgba(255, 90, 31, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.hiw-float-pill.is-cleaning,
.hiw-float-pill.is-inserted {
  width: min(320px, calc(100% - 32px));
}

.hiw-float-pill.is-inserted {
  border-color: rgba(74, 222, 128, 0.45);
}

.hiw-float-lead {
  display: grid;
  place-items: center;
  width: 32px;
  height: 26px;
  flex-shrink: 0;
}

.hiw-wave {
  display: flex;
  align-items: center;
  gap: 3.5px;
  height: 24px;
}

.hiw-wave i {
  width: 3.5px;
  height: 4px;
  border-radius: 9999px;
  background: #a19eab;
  opacity: 0.5;
  transition: height 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

.hiw-wave.is-live i { opacity: 1; animation: hiwWave 0.8s ease-in-out infinite alternate; }
.hiw-wave.is-live i:nth-child(1) { background: #ff7452; animation-duration: 0.72s; }
.hiw-wave.is-live i:nth-child(2) { background: #ff5a1f; animation-duration: 0.62s; animation-delay: 0.15s; }
.hiw-wave.is-live i:nth-child(3) { background: #ee3a5c; animation-duration: 0.8s; animation-delay: 0.3s; }
.hiw-wave.is-live i:nth-child(4) { background: #a088ff; animation-duration: 0.68s; animation-delay: 0.12s; }
.hiw-wave.is-live i:nth-child(5) { background: #7a55ee; animation-duration: 0.84s; animation-delay: 0.24s; }
.hiw-wave.is-live i:nth-child(6) { background: #ff7452; animation-duration: 0.65s; animation-delay: 0.36s; }

@keyframes hiwWave {
  0% { height: 5px; }
  50% { height: 22px; }
  100% { height: 9px; }
}

.hiw-float-check {
  color: #4ade80;
  animation: hiwPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.hiw-float-broom {
  color: #ff9a72;
  animation: hiwSweep 0.7s ease-in-out infinite alternate;
}

@keyframes hiwPop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes hiwSweep {
  from { transform: rotate(-14deg); }
  to { transform: rotate(10deg); }
}

.hiw-float-text {
  flex: 1;
  min-width: 0;
  height: 26px;
  display: flex;
  align-items: center;
  overflow: hidden;
  font-size: 14.5px;
  letter-spacing: -0.01em;
}

.hiw-float-speech {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
}

.hiw-float-words {
  flex-shrink: 0;
}

.hiw-float-speech.is-long {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px);
  mask-image: linear-gradient(90deg, transparent, #000 48px);
}

.hiw-float-speech.is-leaving {
  opacity: 0;
  transform: translateY(-18px);
  filter: blur(4px);
}

.hiw-float-caret {
  display: inline-block;
  flex-shrink: 0;
  width: 2px;
  height: 1.15em;
  margin-left: 3px;
  background: #ff5a1f;
  box-shadow: 0 0 6px rgba(255, 90, 31, 0.7);
  animation: hiwCaretBlink 0.9s step-end infinite;
}

.hiw-float-status {
  font-weight: 500;
  white-space: nowrap;
  animation: hiwStatusIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hiw-float-status.is-ok {
  color: #86efac;
  font-weight: 600;
}

/* The pill is dark in both themes, so its hint text is always light. */
.hiw-float-status.is-muted {
  color: #e6e4ec;
}

@keyframes hiwStatusIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.hiw-fn-key {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 26px;
  padding: 0 8px;
  font-family: var(--font, Inter, -apple-system, sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: #f0efe9;
  background: linear-gradient(180deg, #2c2e34, #1c1d22);
  border: 1px solid #3c3e46;
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 0 #0a0a0d;
  transition: transform 0.12s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.hiw-fn-key.is-down {
  transform: translateY(2px);
  background: linear-gradient(180deg, #ff7452, #ff5a1f);
  color: #0c0d12;
  border-color: #ff9175;
  box-shadow: 0 0 12px rgba(255, 90, 31, 0.55);
}

/* Globe + Command key pair (shared HotkeyKeys component) */
.hiw-keys {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}

.hiw-keys .hiw-fn-key {
  width: 26px;
  padding: 0;
  justify-content: center;
}

/* Cloud waitlist note */
.hiw-cloud-note {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 860px;
  margin: 28px auto 0;
  padding: 16px 18px 16px 16px;
  border: 1px solid color-mix(in srgb, var(--p-accent, #dc916d) 40%, var(--p-rule, #2c2f34));
  border-radius: 14px;
  background: var(--p-surface, #181a1d);
}

.hiw-cloud-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 10px;
  color: var(--p-accent, #dc916d);
  background: color-mix(in srgb, var(--p-accent, #dc916d) 12%, transparent);
}

.hiw-cloud-copy {
  flex: 1;
  min-width: 0;
}

.hiw-cloud-main {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--p-body, #d1d0c9);
  text-wrap: pretty;
}

.hiw-cloud-main b {
  color: var(--p-ink, #f4f2ed);
  font-weight: 600;
}

.hiw-cloud-small {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--p-muted, #9c9e98);
}

.hiw-cloud-btn.btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid var(--p-ink, #f4f2ed);
  background: var(--p-ink, #f4f2ed);
  color: var(--p-bg, #0c0c0c);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.hiw-cloud-btn.btn:hover {
  transform: translateY(-1px);
  opacity: 0.88;
}

.hiw-cloud-btn.btn:focus-visible {
  outline: 2px solid var(--p-accent, #dc916d);
  outline-offset: 2px;
}

/* Small screens */
@media (max-width: 720px) {
  .hiw-context-label {
    display: none;
  }

  .hiw-stage-chips {
    gap: 4px;
  }

  .hiw-stage-chip {
    padding: 4px 8px;
    font-size: 11px;
    gap: 5px;
  }

  .hiw-stage-chip svg,
  .hiw-stage-chip .hiw-pill-bars {
    display: none;
  }

  .hiw-app {
    height: 420px;
  }

  .hiw-slack-side,
  .hiw-notes-list,
  .hiw-hide-sm {
    display: none;
  }

  .hiw-mail-fields,
  .hiw-mail-body {
    padding-left: 14px;
    padding-right: 14px;
  }

  .hiw-slack-head,
  .hiw-slack-msgs {
    padding-left: 12px;
    padding-right: 12px;
  }

  .hiw-slack-composer {
    margin: 6px 12px 40px;
  }

  .hiw-notes-page {
    padding: 12px 16px 40px;
  }

  .hiw-float-pill {
    gap: 10px;
    padding: 8px 8px 8px 14px;
    width: calc(100% - 20px);
  }

  .hiw-float-pill.is-idle,
  .hiw-float-pill.is-cleaning,
  .hiw-float-pill.is-inserted {
    width: min(260px, calc(100% - 20px));
  }

  .hiw-float-text {
    font-size: 13.5px;
  }

  .hiw-cloud-note {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 14px;
  }

  .hiw-cloud-icon {
    width: 36px;
    height: 36px;
  }

  .hiw-cloud-copy {
    flex-basis: calc(100% - 50px);
  }

  .hiw-cloud-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Reduced motion: final clean text, no animation */
@media (prefers-reduced-motion: reduce) {
  .hiw-desk-window,
  .hiw-pill-bars i,
  .hiw-chunk,
  .hiw-clean,
  .hiw-app-caret,
  .hiw-wave i,
  .hiw-float-pill,
  .hiw-float-speech,
  .hiw-float-caret,
  .hiw-float-check,
  .hiw-float-broom,
  .hiw-float-status,
  .hiw-fn-key,
  .hiw-context-btn,
  .hiw-stage-chip {
    animation: none !important;
    transition: none !important;
  }
}

/* Header Sign in: the filled button on wider screens; on phones it moves into
   the menu so the menu button always fits. */
.site-header .nav-links > .nav-signin-link {
  display: none;
}

@media (max-width: 560px) {
  .site-header .nav-actions > .nav-signin {
    display: none;
  }
  .site-header .nav-links > .nav-signin-link {
    display: block;
  }
}