/* Light launch direction: everyday language, generous type, tactile colour. */
:root{color-scheme:light;--room:#f8f8f8;--paper:#19191b;--quiet:#65656d;--blue:#2767db;--purple:#4088db;--lavender:#dceafa;--sky:#d5e9ff;--line:transparent;font-family:Respond,Arial,sans-serif}
body{background:var(--room);color:var(--paper);-webkit-font-smoothing:antialiased}
body *,body *::before,body *::after{border-width:0;box-shadow:none;background-image:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--purple);outline-offset:5px}
::selection{background:#c2deff;color:#21282f}
h1,h2,h3,strong{font-weight:500}
.eyebrow{text-transform:none;letter-spacing:-.015em;font-size:14px;color:var(--quiet)}
.dot{width:9px;height:9px;background:var(--purple)}
.button{border-radius:11px;font-size:14px;letter-spacing:-.025em;padding:17px 22px}
.button.primary{background:#222224;color:white;box-shadow:none}
.button.ghost{background:#ebebef;color:#24242b}
.button.small{border-radius:9px}
.tag{letter-spacing:.045em;background:#eaeaf0;color:#54595f;border-radius:6px;padding:6px 9px;font-size:10px}
.tag.blue{color:#2158b6;background:#dfebff}
.tag.gold{color:#3475bf;background:#deebfa}
.brand-mark,.wordmark img{filter:none}
.nav{border:0;background:transparent}
.nav-inner{height:100px}
.nav-links,.account-link{color:#5a5a60}
.nav-links a{letter-spacing:-.02em;font-size:14px}
.nav-end .button{font-size:13px;padding:13px 18px}
.mobile-nav{background:#edf1f6;border:0;color:#232930}
.hero{min-height:850px;padding-top:160px}
.hero:before,.story-sticky:before,.download-section:before{display:none}
.grain,.hero-light,.hero-mark,.hero-orbit,.float-label,.cursor-halo{display:none}
.hero .shell{grid-template-columns:1.05fr .95fr;gap:24px}
.hero-copy{padding-top:19px;min-width:0}
.hero h1{font-size:clamp(68px,7.27vw,105px);font-weight:500;letter-spacing:-.035em;line-height:1.03;margin-top:34px}
.title-line{display:inline-block;white-space:nowrap}
.letter-slot{position:relative;display:inline-block}
.letter-original{transition:opacity 100ms ease}
.letter-symbol{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;color:var(--purple);font-family:Respond,"Yu Gothic","Malgun Gothic",sans-serif;font-size:.88em;letter-spacing:0;pointer-events:none;transition:opacity 100ms ease;transform-origin:50% 70%}
.letter-slot:nth-child(3n) .letter-symbol{color:var(--blue)}
.letter-slot:nth-child(3n + 1) .letter-symbol{color:#4378b4}
.letter-slot.is-playing .letter-original{opacity:0}
.letter-slot.is-playing .letter-symbol{opacity:1}
.title-play{display:inline-flex;align-items:center;gap:7px;font-size:11px;background:transparent;color:#5b5f63;padding:10px 0;margin:7px 0 0;min-height:34px}
.title-play>span{color:var(--purple);font-size:18px;line-height:1}
.hero-description{font-size:17px;color:#5d5d63;line-height:1.65;margin-top:17px;max-width:420px;letter-spacing:-.025em}
.hero .actions{margin-top:29px}
.hero-platforms{color:#5c5c62;font-size:11px}
.hero-platforms i{background:#aeb3b9}
.hero-art{height:570px;margin-top:0}
.greeting-sticker{position:absolute;display:flex;align-items:center;justify-content:space-between;gap:18px;font-family:Respond,Arial,sans-serif;font-weight:500;font-size:25px;letter-spacing:-.035em;padding:19px 24px;border-radius:15px;z-index:2;white-space:nowrap;min-height:74px;transition:rotate 300ms var(--ease),scale 220ms var(--ease),background-color 180ms var(--ease)}
.greeting-sticker>span{font-size:17px;opacity:.7}
.sticker-one{top:13px;right:25px;rotate:10deg;background:#bdddff;color:#224270;min-width:160px}
.sticker-two{top:265px;left:-22px;rotate:-11deg;background:#cde2fb;color:#2c63a2;font-size:18px;padding:18px;min-width:169px;min-height:70px}
.sticker-three{top:484px;right:12px;rotate:6deg;background:#dce8fc;color:#2d5087;font-size:19px;min-height:66px}
.hero-message{top:90px;left:6px;width:295px;padding:22px 25px;border:0;border-radius:20px;background:#e7eff8;box-shadow:0 14px 32px #3520510a;z-index:3}
.mini-person{color:#535d69}
.mini-time{color:#57616c}
.avatar{background:#dbe7f5;color:#4973a4}
.hero-message .avatar{background:#c6d8ed;color:#456488}
.hero-message p{color:#2d343d;font-size:18px}
.hero-message mark{background:#bdd4ef;color:#264b76;border-radius:4px;padding:2px 4px}
.hero-orb{top:230px;left:274px;background:var(--purple);width:58px;height:58px;box-shadow:0 8px 17px #5d378b18}
.hero-orb .brand-mark,.respond-pill .brand-mark,.message-orb .brand-mark{filter:invert(1)}
.hero-result{top:292px;left:142px;width:330px;padding:24px;background:#fff;border:0;border-radius:21px;box-shadow:0 20px 45px #29203d0d;z-index:4}
.panel-head{color:#5b5f63}
.brand-inline{color:#24292e}
.hero-result .translation{color:#252a30;margin-block:21px 18px;font-size:25px}
.hero-reply-meaning{font-size:13px;color:#58616c}
.respond-pill{background:var(--blue);color:white;box-shadow:none}
.hero-tip{top:550px;left:93px;color:#5b6167;font-size:11px}
.hero-tip svg{color:var(--purple)}
.hero-bottom{font-size:10px;letter-spacing:0;text-transform:none;color:#5c5c63;margin-top:28px}
.context-strip{background:#f0f0f2;border:0;padding:27px 0}
.context-strip p{color:#5c6065;font-size:12px}
.context-apps{color:#5b6065;font-size:18px;font-weight:500}
.translation-story{background:#f8f8f8;border:0}
.story-languages button{background:#edeff1;color:#5b6168;border-radius:9px}
.story-languages button[aria-pressed=true]{background:#deebf9;color:#3a77bc}
.story-line{font-weight:500;letter-spacing:-.035em}
.story-source{color:#5c6268}
.story-target{color:#212427}
.story-target em{font-style:normal;color:var(--purple)}
.story-bottom p{color:#5c6269}
.story-progress{color:#58626e}
.story-track{height:5px;background:#e4e9ef;border-radius:9px}
.story-track span{background:#86b4e8;border-radius:9px}
.section-head h2,.intelligence-title h2,.download-section h2{font-weight:500;letter-spacing:-.035em}
.section-head h2 span{color:#5d6165}
.section-head p:not(.eyebrow){color:#5c6166;line-height:1.7}
.desktop-section{background:white}
.demo-tabs{background:#edf0f3;border:0;border-radius:13px;padding:6px}
.demo-tabs button{color:#59626c;font-size:12px;font-weight:400}
.demo-tabs button[aria-selected=true]{color:#26323f;background:transparent}
.liquid-indicator{background:#d0dff0;border:0;border-radius:9px;box-shadow:none}
.desktop-stage{border:0;border-radius:23px;background:#fafafa;box-shadow:0 20px 55px #2d204e0b}
.window-bar{background:#edeff1;color:#5b6167}
.window-bar .tag{background:#e1e5ea;color:#596572}
.traffic i{background:#bdc4cd}
.mock-sidebar{background:#f0f3f6;color:#5b6168}
.workspace-name{color:#444d58}
.workspace-name>span{background:#dde4ec;color:#506c8c}
.sidebar-label{color:#5a616a}
.channel.active{background:#d9e6f4;color:#426083}
.chat-heading{color:#303439}
.chat-subheading,.chat-author time{color:#5c6167}
.chat-author{color:#32383f}
.chat-message>.avatar{background:#dae4f0;color:#516882}
.chat-text{color:#565d64}
.is-selected .selected-text{background:#d9e7ff;color:#1e467f;box-shadow:3px 0 #d9e7ff,-3px 0 #d9e7ff}
.selection-hint{color:#596471}
.message-orb{background:var(--purple);border:0;box-shadow:none}
.chat-answer{background:#e6effa;color:#355579}
.chat-answer small{color:#566576}
.mock-composer{background:#eef0f3;color:#59616a}
.mock-composer svg{color:#57697d}
.app-panel-wrap{background:#dfe7f1;border:0}
.app-panel{background:#fff;color:#23282d;border:0;box-shadow:0 12px 34px #392b4e10}
.meaning,.panel-notice,.panel-idle p,.suggestion small{color:#5b6167}
.language-label{color:#59636f}
.demo-prompt{background:#edf0fc;color:#4c5c82}
.tone-switch button{background:#eef1f5;color:#57626f}
.tone-switch button[aria-pressed=true]{background:#e1eaff;color:#3459a7}
.suggestion{background:#f1f3f6;color:#32383f;border:0}
.panel-ghost{color:#566270}
.skeleton{background:#e8ecf1}
.skeleton:after{display:none}
.loading-label{color:#53677d}
.workflow-steps button{color:#5a6169}
.workflow-steps button>span{background:#ebeef2;color:#5a6572;border:0}
.workflow-steps button[aria-current=step]{color:#3b608b}
.workflow-steps button[aria-current=step]>span{background:var(--purple);color:white}
.demo-caption{color:#596069}
.ask-options button{background:#e9eff6;color:#566475;border:0}
.ask-options button[aria-pressed=true]{background:#d0deed;color:#3a5677}
.feature-notes{border:0;padding-top:15px}
.feature-notes h3{color:#373e47}
.feature-notes p{color:#5b6066}
.feature-notes svg{color:var(--purple)}
.mobile-section{background:#eef2f6;border:0}
.mobile-feature{color:#58616b;padding:20px;border:0;border-radius:16px;margin-bottom:5px}
.mobile-feature:last-child{border:0}
.mobile-feature[aria-selected=true]{color:#2e4156;background:#dbe5f0}
.feature-number{color:#566475}
.mobile-feature[aria-selected=true] .feature-number,.mobile-feature[aria-selected=true] .feature-title svg{color:var(--purple)}
.feature-description{color:#576473}
.tier-switch{background:#dee5ee;border:0;border-radius:12px}
.tier-switch button{color:#55667a;border-radius:9px;font-family:Respond,Arial,sans-serif}
.tier-switch button[aria-pressed=true]{background:#fff;color:#404f60}
.tier-switch [data-tier=max][aria-pressed=true]{background:#b0cdee;color:#2b507a}
.phone{background:#fff;color:#24282c;border:6px solid #dce2e9;box-shadow:0 24px 55px #45305317;border-radius:49px}
.phone:before{background:#212427}
.phone-home-indicator{background:#343c46}
.phone-content{scrollbar-color:#b5c7dc transparent}
.phone-language-head span:last-child{color:#58626e}
.phone-language-head svg{color:#59626d}
.phone-mode span{color:#58636f}
.phone-mode span:first-child{background:#e8eef4;color:#53677d}
.phone-source{color:#5a626b}
.phone-bubble{background:#e8eef5;color:#374556;border:0}
.roman{color:#566371}
.bubble-footer{color:#566576}
.phone-turn.reply .phone-bubble{background:#2e71df;color:#fff;border:0}
.phone-turn.reply .bubble-footer{color:#e4eeff}
.phone-mic{background:#e3ecf7;color:#456b97;box-shadow:none}
.phone-mic-area p,.phone-type{color:#556372}
.phone-tab-bar{background:#e8eef4;border:0}
.phone-tab-bar span{color:#57626e}
.phone-tab-bar span.active{background:#cadaec;color:#45688f}
.phone-tab-bar .dictate{background:#456d9b;color:#fff;box-shadow:0 0 0 5px #fff}
.phone-caption{color:#58626e}
.phone-example-control button{background:#dbe4ee;color:#4b6a8d;border:0}
.phone-translation-input{color:#465361;border:0;background:#eef3f9;border-radius:12px;padding:15px}
.phone-translate-meta{color:#546579}
.phone-translated{color:#3b4e64}
.phone-translated-note{color:#576371}
.phone-check{background:#e5f0fd;color:#4b709a;border:0}
.phone-check button{color:#345e8f}
.phone-sample-tag{color:#576576}
.keyboard-header .avatar{background:#e0e9f8;color:#4a607d}
.host-message{background:#e8ecf1;color:#4d5a69}
.host-time{color:#58636f}
.host-composer{background:#f3f6fa;color:#516479;border:0}
.host-composer svg{color:white}
.keyboard{background:#dfe5eb;border:0}
.keyboard-toolbar{color:#55687e}
.keyboard-suggestion{color:#576575;border:0}
.key-row span,.key-row button{background:#fff;color:#48596c;box-shadow:0 2px 0 #b0bbc8}
.key-row .wide,.key-row.bottom span,.key-row.bottom button{background:#c4cfdb;color:#53667c}
.key-row.bottom .space{background:#fff}
.key-row.bottom .translate-key{background:var(--blue);color:#fff}
.keyboard-replies button{background:#eaf1fa;color:#46678c;border:0}
.keyboard-replies small{color:#546578}
.keyboard-hint{color:#566577}
.intelligence-section{background:#fafafa;border:0}
.accent{color:var(--purple)}
.intelligence-title>p:not(.eyebrow){color:#5b6066}
.intelligence-grid{gap:22px}
.intelligence-card{background:#e8f0fc;border:0;border-radius:22px;padding:36px}
.intelligence-card.max{background:#e6eef8;border:0}
.intelligence-card h3{color:#31313b;font-size:26px;letter-spacing:-.035em}
.intelligence-card p{color:#5b6168;font-size:15px;line-height:1.65}
.tone-playground,.meaning-playground{margin-top:30px}
.tone-playground-controls{display:flex;gap:5px;flex-wrap:wrap}
.tone-playground-controls button{background:#dce5f4;color:#575f6d;border-radius:8px;font-size:12px;min-height:39px;padding:10px 13px}
.tone-playground-controls button[aria-pressed=true]{background:white;color:#354e77}
.invitation-result{padding-top:21px;min-height:151px}
.intelligence-card #invitation-text{font-size:30px;letter-spacing:-.035em;line-height:1.25;color:#354d74;min-height:77px}
.intelligence-card #invitation-meaning{font-size:14px;margin-top:10px;color:#515f75}
.intelligence-card .playground-hint{font-size:11px;line-height:1.6;color:#5c5b69;margin-top:18px}
.playground-hint>span{display:inline-block;margin-left:3px}
.intelligence-card .meaning-original{font-size:14px;color:#57616c}
.intelligence-card .meaning-example{font-size:31px;letter-spacing:-.035em;line-height:1.45;color:#4b6078;min-height:91px;padding-top:16px}
.missed-word,.fixed-word{display:inline-block;border-radius:7px;padding:0 7px;margin-inline:2px;rotate:-3deg}
.missed-word{background:#c8d9ed;color:#4e6c8f}
.fixed-word{background:#b0cdef;color:#305783;rotate:2deg}
.meaning-check-button{display:inline-flex;gap:22px;align-items:center;background:#d1dfef;color:#4a6686;padding:11px 15px;min-height:40px;border-radius:9px;font-size:12px;margin-top:12px}
.accuracy-note{color:#5a5f64}
.privacy-strip{border:0;margin-top:72px;padding-top:10px}
.privacy-strip h3{color:#404954}
.privacy-strip p:not(.eyebrow){color:#5a626c}
.privacy-facts{color:#57626e}
.privacy-facts svg{color:var(--purple)}
.text-link{color:var(--purple)}
.pricing-section{background:#f0f2f4;border:0}
.plan{background:#fafafa;border:0;border-radius:19px}
.plan.featured{background:#d9e7f6;border:0}
.plan h3{color:#414f5f}
.plan-label,.plan-price small,.plan-description,.pricing-note{color:#5a626b}
.plan-price{color:#324459}
.plan ul{border:0;padding-top:9px}
.plan li{color:#586370}
.plan li:before{color:var(--purple)}
.plan .button.ghost{background:#e7edf3;color:#4c6683}
.plan.featured .button.primary{background:#466d9a;color:white}
.pricing-note a{color:#54667b}
.download-section{background:#dee8f3}
.download-section h2{color:#23292f}
.download-section h2 span{color:#4772a4}
.download-section p:not(.eyebrow){color:#566474}
.footer{background:#dee8f3;border:0;padding-top:40px}
.footer small,.footer-links{color:#586472}
.footer .wordmark img{opacity:.7}
.cursor-label{background:#d0e1f4;color:#395d86;border:0;border-radius:10px;box-shadow:0 5px 12px #2b12410a;font-size:11px;padding:11px 14px}
.toast{background:#d0dff0;color:#486280;box-shadow:0 8px 22px #39214e14;border-radius:11px}
@media(hover:hover) and (pointer:fine){
 .nav-links a:hover,.account-link:hover,.footer-links a:hover{color:var(--purple)}
 .button.primary:hover{background:#303b47;box-shadow:none}
 .button.ghost:hover{background:#d9e0e9;color:#3c5067}
 .respond-pill:hover{background:#1c5dc9}
 .story-languages button:hover{color:#496e98;background:#dee8f3}
 .workflow-steps button:hover{color:#476c97}
 .suggestion:hover{background:#e0e8f2;color:#39516d}
 .mobile-feature:hover .feature-title{color:#425c79}
 .phone-example-control button:hover{background:#bed2e9;color:#37577c}
 .text-link:hover{color:#4a6d95}
 .selectable-message:hover .selected-text{background:#c8dcfb;color:#31537d}
 .greeting-sticker:hover{rotate:0deg;scale:1.045}
 .title-play:hover{color:var(--purple)}
 .tone-playground-controls button:hover{background:#fff;color:#4a5f80}
 .meaning-check-button:hover{background:#bed2e9;color:#405f83}
}
@media(min-width:1600px){.hero{min-height:930px;padding-top:190px}}
@media(max-width:1190px){.hero{min-height:810px;padding-top:150px}.hero h1{font-size:7.36vw}.hero-art{scale:.87;transform-origin:0 20%;width:480px;height:565px}.hero-result{left:125px}.hero-bottom{margin-top:0}.intelligence-card{padding:29px}.intelligence-card #invitation-text{font-size:29px}}
@media(min-width:701px) and (max-width:960px){
 .hero{padding-top:140px;min-height:740px}.hero .shell{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .hero h1{font-size:7.5vw}.hero-art{scale:.66;width:460px;transform-origin:0 20%;margin-top:8px;height:490px}
 .hero-description{font-size:15px;max-width:350px}.hero-description br{display:none}
 .hero-copy .button{font-size:12px;padding:14px 16px}.hero .actions{gap:8px}
 .mobile-feature{padding:17px 12px}.feature-description{padding-left:0}
 .intelligence-card h3{font-size:24px}.intelligence-card .meaning-example{font-size:28px}.intelligence-card #invitation-text{font-size:26px}
}
@media(max-width:700px){
 .nav-inner{height:82px}.nav-end .button{font-size:11px;padding:11px 14px}
 .hero{padding-top:121px;min-height:0}.hero .shell{display:block}.hero-copy{padding-top:0}
 .eyebrow{font-size:12px;letter-spacing:-.015em}
 .hero h1{font-size:clamp(56px,12.05vw,83px);font-weight:500;letter-spacing:-.035em;margin-top:28px}
 .title-play{font-size:10px;margin-top:6px;padding-block:8px;min-height:34px}
 .hero-description{font-size:16px;max-width:370px;margin-top:12px}
 .hero-description br{display:none}.hero .actions{margin-top:25px;gap:9px}
 .hero-copy .button{font-size:12px;padding:16px 20px;min-height:49px}
 .hero-art{width:440px;max-width:none;height:550px;scale:.8;transform-origin:50% 0;left:50%;margin:43px 0 -72px -220px}
 .hero-message{top:87px;left:15px;width:286px;padding:21px 23px}
 .hero-message p{font-size:18px}.hero-orb{top:228px;left:284px;width:55px;height:55px}
 .hero-result{top:287px;left:128px;width:309px;padding:23px}.hero-result .translation{font-size:24px}
 .sticker-one{top:5px;right:20px;font-size:24px}.sticker-two{top:283px;left:-1px;min-width:137px;font-size:15px;padding:17px 12px;gap:8px}
 .sticker-three{top:478px;right:28px;font-size:18px}
 .hero-tip{top:547px;left:95px;font-size:11px}.hero-bottom{margin-top:36px;padding-bottom:28px;font-size:10px}
 .context-strip{padding:25px 0}.context-strip p{font-size:11px}.context-apps{font-size:14px}
 .section-head h2,.mobile-copy .section-head h2,.intelligence-title h2{font-size:40px;letter-spacing:-.035em}
 .story-line{letter-spacing:-.035em}.story-languages button{font-size:11px}
 .desktop-stage{border-radius:17px}.demo-tabs{border-radius:11px}.demo-tabs button{font-size:11px}
 .app-panel-wrap{border:0}.mobile-feature{padding:18px 14px;margin-left:0;margin-right:0}
 .feature-title{font-size:16px}.feature-number{font-size:10px}.feature-description{padding-left:27px}
 .phone{width:316px;height:660px}.intelligence-grid{gap:18px}
 .intelligence-card{padding:28px}.intelligence-card h3{font-size:24px}.intelligence-card p{font-size:15px}
 .intelligence-card #invitation-text{font-size:31px;min-height:76px}
 .intelligence-card .meaning-example{font-size:31px;min-height:95px}
 .privacy-strip{margin-top:40px;padding-top:10px}.plan{padding:28px}
 .download-section h2{font-size:clamp(44px,9.66vw,61px)}
 .footer-links{font-size:11px}.footer small{font-size:10px}
 .cursor-label{display:none}
}
@media(max-width:370px){
 .hero h1{font-size:53px}.hero-art{scale:.69;margin-top:35px;margin-bottom:-122px}
 .hero-copy .button{padding-inline:15px;font-size:11px}.hero-description{font-size:15px}
 .hero-bottom{margin-top:35px}.phone{width:292px;height:650px}
 .intelligence-card{padding:23px}.intelligence-card h3{font-size:23px}
 .intelligence-card #invitation-text{font-size:28px}.intelligence-card .meaning-example{font-size:28px}
 .tone-playground-controls button{font-size:11px;padding-inline:11px}
 .demo-tabs button{font-size:10px;padding-inline:7px}.feature-title{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
 .story-source{color:#566371}.letter-symbol{transform:none!important}
 .greeting-sticker{transition:background-color 100ms}.greeting-sticker:hover{scale:1}
}

/* Flat surfaces carry the hierarchy; borders are reserved for the phone frame. */
.tag,.tag.blue,.tag.gold,.window-bar,.mock-sidebar,.workspace-name>span,.chat-answer,.mock-composer,.story-languages button,.keyboard-suggestion{border:0}
.demo-tabs:not(.tabs-ready) button[aria-selected=true]{background:#d0dff0;color:#26323f;border-radius:9px}

.dot{box-shadow:none}

/* Screenshot-led refinement: blue emphasis, the Save icon family, native app surfaces. */
svg{stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.channel>svg{width:14px;height:14px;margin-right:7px}
:root{--blue:#2884ff;--purple:#2767db}
.hero h1{font-size:clamp(66px,6.99vw,99px);font-weight:500;letter-spacing:-.035em;line-height:1.07;margin-top:0}
.section-head h2,.intelligence-title h2,.download-section h2{font-weight:500;letter-spacing:-.035em;line-height:1.12}
.hero-copy{padding-top:40px}
.letter-symbol{line-height:1;letter-spacing:0;color:#2884ff}
.letter-slot:nth-child(3n) .letter-symbol,.letter-slot:nth-child(3n + 1) .letter-symbol{color:#2884ff}
.letter-original{transition:opacity 120ms ease}
.title-play>span>svg{width:15px;height:15px}
.greeting-sticker>span>svg{width:17px;height:17px}
.story-top{justify-content:flex-end}
.story-stage{margin-top:50px}
.section-head h2,.intelligence-title h2{margin-top:0}
.privacy-strip h3{margin-top:0}
.download-section h2{margin-top:0}
.sticker-three{background:#e8e2f6;color:#594a77}
.hero-message{background:#e8eff8}
.hero-message mark{background:#c6defe;color:#294a76}
.hero-orb,.message-orb{background:#17191c}
.respond-pill,.native-translate,.native-reply-arrow,.key-row.bottom .translate-key{background:#151719;color:#fff}
.phone-turn.reply .phone-bubble{background:#2884ff;color:#fff}
.plan.featured{background:#deebff}
.plan.featured .button.primary{background:#17191c}
.mobile-section{background:#f2f6fa}
.download-section,.footer{background:#e8f0fb}
.hero-result .translation{color:#22262c}
.tag.blue{background:#e1edff;color:#325c97}
.tag.gold{background:#e5edfb;color:#45699e}
.intelligence-card{background:#e8f1ff}
.intelligence-card.max{background:#f0f3f8}
.accent{color:#2884ff}
.tier-switch{background:#e5ebf2}
.tier-switch button{color:#5b6b80}
.tier-switch [data-tier=max][aria-pressed=true]{background:#c7ddff;color:#284773}
.mobile-feature[aria-selected=true]{background:#e2ebf7;color:#273e60}
@media(hover:hover) and (pointer:fine){
 .respond-pill:hover,.key-row.bottom .translate-key:hover{background:#33383e}
 .hero-orb:hover,.message-orb:hover{background:#30363f}
}
/* Desktop panel uses the app's divided content and reply area, not marketing cards. */
.demo-body{grid-template-columns:150px minmax(0,1fr) 400px}
.app-panel-wrap{padding:25px 18px;background:#e8edf4}
.app-panel.native-panel{container-type:inline-size;background:#f2f5f8;padding:0;border:0;border-radius:22px;overflow:hidden;min-height:0;color:#17191b}
.native-panel-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 9px}
.native-language-chip{display:inline-flex;gap:6px;align-items:center;border:1px solid #17191b;background:#e6e9ec;padding:6px 10px;border-radius:99px;font-size:clamp(10px,2.95cqw,14px);line-height:1.2;white-space:nowrap}
.native-language-chip i{width:5px;height:5px;border-radius:50%;background:#17191b}
.native-panel-tools{display:flex;align-items:center;gap:15px;color:#51565b}
.native-panel-tools svg{width:13px;height:13px;stroke-width:1.8}
.app-panel .native-translated{font-size:clamp(17px,5.65cqw,27px);font-weight:400;letter-spacing:-.025em;line-height:1.36;padding:6px 16px 17px;margin:0}
.native-original{margin:0 16px 19px;border-top:1px solid #d1d5d9}
.native-original summary{list-style:none;display:flex;gap:6px;align-items:center;font-size:11px;color:#646a70;padding-top:12px;cursor:pointer}
.native-original summary::-webkit-details-marker{display:none}
.native-original summary svg{width:12px;height:12px;stroke-width:1.8}
.native-original[open] summary svg{rotate:180deg}
.native-original p{font-size:12px;line-height:1.7;margin-top:12px;color:#626971}
.native-respond-entry{padding:0 16px 16px}
.native-respond-entry .respond-pill{margin-top:0;min-height:37px;padding:10px 18px;font-size:12px}
.native-reply-area{padding:13px 14px 15px;background:#e4e7ea;border-top:1px solid #c9cdd1}
.native-reply-label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:#535a60;margin-bottom:10px}
.native-reply-label span:last-child{font-size:11px}
.native-reply-field,.native-bottom-composer textarea{display:block;width:100%;min-width:0;background:#d8dcdf;color:#25282d;border:1px solid #17191b;border-radius:13px;padding:12px;font:inherit;font-size:14px;line-height:1.5;resize:vertical;outline-offset:3px}
.native-reply-field::placeholder,.native-bottom-composer textarea::placeholder{color:#626970;opacity:1}
.native-reply-field{min-height:87px;max-height:180px}
.native-reply-area .native-translate{width:100%;margin-top:10px;min-height:38px;padding:9px 15px;font-size:12px;border-radius:11px}
.native-reply-area .native-translate:disabled,.native-reply-arrow:disabled{background:#98bcee;color:white;cursor:default}
.native-suggestions-toggle{display:inline-flex;gap:6px;align-items:center;background:#d8dcdf;border:1px solid #2884ff;border-radius:9px;font-size:12px;padding:7px 10px;min-height:31px;color:#17191b}
.native-suggestions-toggle svg{width:13px;height:13px}
.below-composer{margin-top:10px}
.native-reply-area .suggestion{background:#d7dbde;border:1px solid #bfc4c9;color:#24272b;border-radius:13px;margin-top:7px;padding:10px 12px;font-size:clamp(12px,3.75cqw,18px);line-height:1.5}
.native-reply-area .suggestion small{color:#656c72;font-size:clamp(10px,3.2cqw,15px);line-height:1.45;margin-top:4px}
.native-reply-area .suggestion.is-chosen{border-color:#2884ff;background:#d4dce6}
.native-bottom-composer{display:flex;gap:8px;align-items:end;margin-top:11px}
.native-bottom-composer textarea{height:40px;min-height:40px;max-height:95px;resize:vertical;padding:9px 11px;font-size:13px}
.native-reply-arrow{width:37px;height:37px;flex-shrink:0;border-radius:11px;display:grid;place-items:center}
.native-reply-arrow svg{width:17px;height:17px}
.native-input-note{font-size:11px;color:#4c6381;line-height:1.6;margin-top:10px}
.native-own-result{font-size:20px;line-height:1.6;color:#252a30}
.native-own-meaning{font-size:12px;color:#606a77;margin-top:8px;line-height:1.5}
.reply-demo-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:4px 0 18px}
.reply-example-picks{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;color:#667587}
.reply-example-picks button{background:#edf2f8;color:#415b7e;border-radius:8px;font-size:12px;padding:10px 12px;min-height:36px}
.reply-demo-tools .tone-switch{margin:0}
.reply-demo-tools .tone-switch button{font:inherit;font-size:12px;min-height:36px}
.chat-answer{position:relative;margin:24px 0 15px auto;max-width:320px;padding:14px 16px 10px;background:#e2edfc;color:#314562;border:0;border-radius:15px 15px 4px 15px}
.chat-answer p{font-size:14px;line-height:1.75}
.sent-time{display:block;font-size:10px;color:#6d809a;text-align:right;margin-top:7px}
.sent-reaction{position:absolute;top:-17px;left:8px;font-size:17px;background:#fff;border:1px solid #dbe4ef;border-radius:99px;min-width:31px;min-height:27px;padding:2px 7px;line-height:1.3;transform-origin:30% 100%}
@media(hover:hover) and (pointer:fine){
 .native-reply-area .suggestion:hover{border-color:#2884ff;background:#d4dce6;color:#17191b}
 .native-suggestions-toggle:hover{background:#d0d8e3}
}
/* The device canvas follows the supplied 1290 × 2796 iPhone screenshots. */
.phone{container-type:inline-size;width:340px;max-width:100%;height:auto!important;aspect-ratio:1290/2796;border:4px solid #e5e9ed;border-radius:40px;background:white;color:#111315;box-shadow:0 22px 52px #1b354d12}
.phone:before{display:none}
.phone[data-mode=chat]{background:#f2f5f8}
.phone-status{position:absolute;inset:0 0 auto;height:6.3%;padding:0 9.4% 0 11.5%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:3.85cqw;color:#060708;align-items:center;line-height:1}
.phone-time{display:flex;align-items:center;gap:3px;font-weight:600;letter-spacing:-.035em}
.phone-time svg{width:3.5cqw;height:3.5cqw;stroke-width:2.4}
.phone-status-icons{display:flex;align-items:center;gap:5px}
.phone-status-icons svg{width:4.4cqw;height:4.4cqw;stroke-width:2.7}
.phone-status-icons .status-signal{color:#bfc4c7;width:5cqw;height:5cqw}
.status-battery{background:#08090a;color:white;position:relative;border-radius:3px;padding:2px 4px;font-size:3.1cqw;line-height:1}
.status-battery:after{content:'';position:absolute;width:2px;height:45%;top:28%;right:-3px;background:#bbc0c5;border-radius:0 2px 2px 0}
.phone-screen{position:absolute;inset:6.3% 0 0;height:auto;background:white}
.phone-screen[data-mode=chat]{background:#f2f5f8}
.phone-home-indicator{bottom:.85%;height:4px;width:36%;background:#060708;border-radius:9px}
.phone-tab-bar{position:absolute;inset:auto 0 0;bottom:0;height:12.6%;border:0;border-radius:8.5cqw 8.5cqw 0 0;background:#f3f7fa;display:block;z-index:4}
.phone-nav-items{position:absolute;left:5%;right:5%;top:23%;height:42%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;justify-items:center}
.phone-nav-items>span,.phone-nav-items>button{display:grid;place-items:center;width:100%;height:100%;background:none;color:#bdc3c9;border:0;border-radius:9px;padding:0}
.phone-nav-items>button.active{color:#070809;background:none}
.phone-nav-items svg{width:5.5cqw;height:5.5cqw;stroke-width:2.1}
.phone-nav-items .home-slot{visibility:hidden}
.home-bar{height:14.3%;background:none;border-radius:0}
.phone-tab-bar>.phone-tab-shape{position:absolute;inset:0;width:100%;height:100%;fill:#f3f7fa;stroke:none;pointer-events:none}
.phone-tab-shape path{fill:#f3f7fa;stroke:none}
.home-bar .phone-nav-items{top:26%;height:38%}
.home-dictate{position:absolute;bottom:11.45%;left:50%;translate:-50% 0;width:16.6%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#000;color:#f2f5f8;z-index:5;padding:0}
.home-dictate svg{width:6.3cqw;height:6.3cqw;stroke-width:2.8}
.chat-header{height:10.5%;position:relative}
.phone-language-head{height:55%;margin:0;gap:4.5cqw;font-size:4.05cqw;line-height:1;letter-spacing:-.035em;color:#151719}
.phone-language-head>button{background:none;padding:3px 0;min-height:0;font:inherit;font-weight:500;color:#151719}
.phone-language-head>svg{width:4.25cqw;height:4.25cqw;color:#25292d;stroke-width:2.5}
.phone-language-head .chat-menu{position:absolute;right:4.4%;top:17%;color:#151719}
.chat-menu svg{width:4.1cqw;height:4.1cqw;stroke-width:1.8}
.phone-mode{position:absolute;left:50%;top:59%;translate:-50% 0;width:41%;height:29%;min-height:0;display:grid;grid-template-columns:1.1fr .9fr;gap:0;margin:0;border-radius:99px;background:white;overflow:hidden}
.phone-mode span{display:flex;align-items:center;justify-content:center;padding:0;font-size:3.05cqw;font-weight:500;border-radius:99px;color:#b1bac3;white-space:nowrap}
.phone-mode span:first-child{background:#101214;color:white}
.chat-sheet{position:absolute;inset:10.5% 0 12.5%;border-radius:15.3cqw 15.3cqw 0 0;background:white;padding:7.8cqw 9.7cqw 0;overflow:hidden}
.chat-empty h3{font-size:5.1cqw;line-height:1.2;font-weight:500;letter-spacing:-.035em;color:#151719}
.chat-empty p{font-size:4.05cqw;line-height:1.32;letter-spacing:-.02em;color:#b1bac3;margin-top:4.4cqw}
.chat-mic{position:absolute;width:19.5cqw;height:19.5cqw;bottom:16%;left:50%;translate:-50% 0;padding:0;margin:0;display:grid;place-items:center;border-radius:50%;background:#101214;color:white;box-shadow:none}
.chat-mic:disabled{background:#aaa;color:#fff;cursor:default;opacity:1}
.chat-mic svg{width:7.2cqw;height:7.2cqw;stroke-width:2.7}
.chat-qr{position:absolute;right:17.8%;bottom:20.2%;color:#b1bac3;display:flex}
.chat-qr svg{width:4.3cqw;height:4.3cqw}
.chat-sheet .phone-type{position:absolute;bottom:4.9%;left:50%;translate:-50% 0;background:none;white-space:nowrap;font-size:3.95cqw;color:#707d8a;line-height:1.3;min-height:0;margin:0;padding:3px 5px}
.chat-sheet .phone-type:disabled{color:#b1bac3;cursor:default;opacity:1}
.chat-conversation{max-height:63%;overflow:auto;scrollbar-width:thin;margin:0 -3.7cqw;padding:0 .5cqw 8px;overscroll-behavior:contain}
.chat-conversation .phone-source{font-size:3.35cqw;line-height:1.4;color:#748493}
.chat-conversation .phone-bubble{font-size:4.45cqw;line-height:1.4;padding:3.2cqw;background:#f0f4f8;color:#17202a;border:0;margin-bottom:4cqw;letter-spacing:-.02em}
.chat-conversation .roman{font-size:2.8cqw;color:#72808e}
.chat-conversation .phone-turn.reply{margin-left:4cqw}
.chat-conversation .phone-turn.reply .phone-bubble{background:#2884ff;color:white}
.chat-conversation .bubble-footer{font-size:2.7cqw;margin-top:9px;color:#788694}
.chat-conversation .phone-turn.reply .bubble-footer{color:#fff}
.bubble-footer>span:last-child{display:flex;gap:8px}
.chat-conversation .bubble-footer svg{width:3.5cqw;height:3.5cqw}
.phone-language-picker{position:absolute;z-index:8;inset:35% 5% 14%;background:#f3f7fa;border:1px solid #dbe2e9;border-radius:24px;padding:22px 17px;box-shadow:0 10px 45px #17314a22}
.phone-language-picker h3{font-size:18px;font-weight:500;margin-bottom:23px}
.phone-language-picker button{display:flex;align-items:center;justify-content:space-between;width:100%;background:white;color:#253b53;border-radius:10px;padding:13px 14px;font-size:14px;margin-bottom:8px;min-height:42px}
.phone-language-picker button:last-child{background:transparent;color:#63798f}
.home-header{height:6%;padding:0 7.7%;display:flex;align-items:center;justify-content:space-between}
.home-header>span:first-child{display:flex}
.home-header>span:first-child svg{width:4cqw;height:4cqw;stroke-width:1.8}
.home-brand{display:flex;align-items:center}
.home-brand>.brand-mark{display:none}
.home-wordmark{width:22cqw;height:auto;filter:none}
.home-input{position:absolute;top:9.4%;left:10.8%;width:79%;height:54%;padding:0;background:transparent;border:0;border-radius:0;resize:none;font-family:Respond,system-ui,sans-serif;font-size:4.55cqw;font-weight:500;line-height:1.4;color:#17191b;outline-offset:4px}
.home-input::placeholder{color:#b1bac3;opacity:1}
.home-input.has-result{height:16%;font-weight:400}
.home-output{position:absolute;top:28%;left:10.8%;right:10.8%;max-height:34%;overflow:auto;scrollbar-width:thin}
.home-output .phone-translated{font-size:5.9cqw;color:#151719;font-weight:500;letter-spacing:-.03em;line-height:1.4;margin:0 0 14px}
.home-output .phone-translated-note{font-size:3.2cqw;color:#7a8998;line-height:1.6}
.home-output .phone-check{background:#e8f1ff;color:#375774;padding:10px;font-size:3cqw}
.home-output .phone-check button{color:#245f9f;font-size:3cqw}
.home-languages{position:absolute;left:10.8%;right:8%;bottom:22%;display:flex;flex-direction:column;gap:.9cqw;font-size:6.65cqw;font-weight:500;line-height:1.22;letter-spacing:-.025em;color:#111315}
.home-language-swap{position:absolute;left:-8%;top:26%;color:#e0e5e9}
.home-language-swap svg{width:4.8cqw;height:4.8cqw;stroke-width:2.8}
.home-translate-button{position:absolute;left:11%;right:11%;bottom:35.5%;min-height:35px;padding:9px 15px;font-size:12px}
.home-input-note{position:absolute;left:11%;right:11%;bottom:43%;font-size:11px;line-height:1.5;color:#466789}

.phone-screen[data-mode=keyboard]{background:white}
.phone-caption{font-size:12px;max-width:350px;color:#69788a;line-height:1.6}
.phone-example-control button{min-height:40px;font-size:12px;background:#e6eef9;color:#3a5578}
.phone-column{width:100%;min-width:0}
@media(max-width:1190px){
 .demo-body{grid-template-columns:120px minmax(0,1fr) 360px}
 .hero h1{font-size:6.99vw}
}
@media(min-width:701px) and (max-width:960px){
 .demo-body{grid-template-columns:minmax(0,1fr) 340px}
 .mock-sidebar{display:none}
 .hero h1{font-size:6.99vw}
 .hero-copy{padding-top:24px}
 .mobile-grid{grid-template-columns:minmax(0,1fr) minmax(0,306px)}
 .phone{width:306px}
 .native-panel-tools{gap:11px}
}
@media(max-width:700px){
 .hero-copy{padding-top:0}
 .hero h1{font-size:clamp(50px,11.96vw,81px);font-weight:500;letter-spacing:-.035em}
 .section-head h2,.mobile-copy .section-head h2,.intelligence-title h2{font-size:39px;font-weight:500;letter-spacing:-.035em}
 .download-section h2{font-weight:500;letter-spacing:-.035em}
 .demo-body{display:flex}
 .app-panel.native-panel{max-width:420px;padding:0}
 .native-panel-header{padding:13px 15px 10px}
 .native-panel-tools{gap:16px}
 .native-reply-area{padding:14px 16px 16px}
 .native-reply-area .suggestion{font-size:13px}
 .native-reply-area .suggestion small{font-size:11px}
 .reply-example-picks{font-size:11px;gap:5px}
 .reply-example-picks button{font-size:11px;min-height:36px;padding:9px}
 .phone{width:340px;max-width:100%;height:auto!important}
 .chat-answer{max-width:85%;margin-top:25px}
 .chat-answer p{font-size:13px}
 .phone-language-picker{padding:20px 16px}
}
@media(max-width:370px){
 .hero h1{font-size:47px}
 .phone{width:292px}
 .native-language-chip{font-size:10px;padding:6px 8px}
 .native-panel-tools{gap:12px}
 .app-panel .native-translated{font-size:18px}
 .native-reply-area .suggestion{font-size:12px}
 .home-header{padding:0 7.7%}
}
@media(prefers-reduced-motion:reduce){.letter-symbol{transform:none!important}}
.native-reply-area .native-translate:disabled{background:#24282d;color:#aeb5bd;opacity:1}

/* Playful editorial motion, with a header that travels with the page. */
html{scroll-padding-top:102px}
.nav{position:fixed;inset:0 0 auto;z-index:80;background:rgba(248,248,248,.28);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:background-color 220ms var(--ease)}
.nav.is-scrolled{background:rgba(248,248,248,.86)}
.nav .nav-inner{transition:height 240ms var(--ease)}
.nav.is-scrolled .nav-inner{height:76px}
.mobile-nav{background:rgba(246,248,251,.98);max-height:calc(100dvh - 76px);overflow:auto}
@supports not (backdrop-filter:blur(18px)){.nav{background:rgba(248,248,248,.97)}}
.section-head h2,.intelligence-title h2{font-size:clamp(44px,6.07vw,85px);letter-spacing:-.035em}
.kinetic-line{display:block;transform-origin:0 50%}
.kinetic-line>span{display:block;will-change:transform}
.hero h1{isolation:isolate}
.title-line{position:relative;overflow:visible}
.letter-slot{position:relative;vertical-align:baseline;overflow:visible}
.letter-visual{position:relative;display:inline-block;transform-origin:50% 70%;will-change:transform}
.letter-symbol{position:absolute;left:50%;right:auto;top:0;bottom:0;width:1.1em;translate:-50% 0;display:flex;align-items:center;justify-content:center;font-weight:500;letter-spacing:0;line-height:1;pointer-events:none;color:#2884ff;transition:opacity 110ms ease}
.letter-slot.is-playing{z-index:2}
.letter-original{display:inline-block;transition:opacity 110ms ease}
.context-strip{padding:42px 0 33px;background:#f3f5f7;overflow:clip}
.context-strip .rail-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:26px}
.context-strip .rail-heading>p{font-size:31px;font-weight:500;letter-spacing:-.035em;line-height:1.12;max-width:none;color:#292d33}
.rail-controls{display:flex;align-items:center;gap:8px}
.rail-controls>span{font-size:12px;color:#727b87;margin-right:12px}
.rail-controls button{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#e6ebf1;color:#4c607a}
.rail-controls button:disabled{opacity:.3;cursor:default}
.rail-controls [data-rail-prev] svg{rotate:180deg}
.app-rail{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;touch-action:pan-x pan-y pinch-zoom;user-select:none;-webkit-user-select:none;outline-offset:-4px}
.app-rail::-webkit-scrollbar{display:none}
.app-rail.is-dragging,.app-rail.is-dragging *{cursor:grabbing!important}
.logo-track{display:flex;width:max-content;gap:18px;padding:13px max(32px,calc((100vw - 1280px)/2)) 18px;will-change:transform}
.logo-card{flex:0 0 280px;height:132px;display:flex;align-items:center;justify-content:center;gap:14px;background:white;border-radius:18px;cursor:inherit;user-select:none;-webkit-user-select:none;transition:scale 220ms var(--ease),background-color 220ms var(--ease),box-shadow 220ms var(--ease);font-size:36px;letter-spacing:-.035em;font-weight:500;color:#202127}
.logo-card img{object-fit:contain;pointer-events:none;user-select:none;max-width:190px;max-height:56px}
.logo-card.slack-logo img,.logo-card.gmail-logo img{width:49px;height:49px}
.logo-card.discord-logo{background:#5865f2}
.logo-card.whatsapp-logo{background:#e2f4e9}
.logo-card.chrome-logo{background:#e6efff}
.context-strip .rail-caption{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:10px}
.context-strip .rail-caption p{max-width:none;font-size:13px;line-height:1.5;min-height:20px;color:#687583}
.rail-caption>a{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:12px;color:#3a5e8c}
.rail-caption>a svg{width:15px;height:15px}
.everyday-section{background:#f8f8f8;padding:125px 0 80px;overflow:clip}
.everyday-heading h2{font-size:clamp(52px,7.64vw,110px);letter-spacing:-.035em;line-height:1.05;font-weight:540;color:#202328}
.hello-word{position:relative;background:#c9e1ff;color:#2768c6;display:inline-flex;align-items:baseline;padding:0 .15em .065em;border-radius:.16em;font:inherit;letter-spacing:inherit;line-height:1;rotate:-3deg;vertical-align:baseline;margin-right:.06em;transform-origin:35% 65%}
.hello-word>svg{width:.22em;height:.22em;align-self:center;margin-left:.1em;stroke-width:2.2}
.everyday-intro{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-top:30px}
.everyday-intro p{font-size:17px;color:#6b717b;line-height:1.65;letter-spacing:-.02em}
.shuffle-cards{display:flex;align-items:center;gap:22px;background:#e6ebf3;padding:13px 18px;min-height:46px;border-radius:12px;font-size:14px;color:#425b7b;white-space:nowrap}
.shuffle-cards svg{width:17px;height:17px}
.moment-board{position:relative;height:565px;margin-top:32px;isolation:isolate}
.moment-card{position:absolute;display:flex;flex-direction:column;align-items:stretch;text-align:left;width:29%;max-width:335px;border-radius:20px;padding:0;background:#e4ebf4;color:#263549;cursor:grab;touch-action:pan-x pan-y pinch-zoom;box-shadow:0 16px 32px #2436490a;transform-origin:50% 60%;will-change:transform;user-select:none;-webkit-user-select:none}
.moment-card.is-dragging{cursor:grabbing;z-index:10}
.moment-card>img{display:block;width:100%;height:270px;object-fit:cover;border-radius:20px 20px 0 0;pointer-events:none}
.coffee-card{left:5%;top:38px;rotate:-8deg;background:#fff}
.moment-card-copy{display:flex;flex-direction:column;padding:21px 24px 24px}
.moment-language{font-size:12px;letter-spacing:-.01em;line-height:1.2;font-weight:400;opacity:.75}
.moment-phrase{display:block;font-size:51px;letter-spacing:-.035em;line-height:1.05;font-weight:500;margin-top:12px}
.moment-action{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:12px;line-height:1.3;letter-spacing:-.01em;margin-top:24px;opacity:.8}
.moment-action svg{width:18px;height:18px}
.yes-card{left:36%;top:74px;min-height:350px;padding:26px;rotate:6deg;background:#2884ff;color:#fff}
.yes-card .moment-phrase{font-size:83px;line-height:.98;margin-top:30px;flex:1}
.yes-card.is-flipped{background:#1d5cad}
.later-card{left:68%;top:25px;min-height:373px;padding:27px;rotate:-5deg;background:#e0e8f3;color:#31527e}
.later-card .moment-phrase{font-size:63px;letter-spacing:-.035em;margin-top:48px;white-space:nowrap}
.moment-afterthought{font-size:15px;letter-spacing:-.02em;line-height:1.5;margin-top:28px}
.later-card .moment-action{margin-top:auto;padding-top:30px}
.moment-card.is-flipped .moment-language{opacity:1}
.coffee-card.is-flipped{background:#dcecff}
.later-card.is-flipped{background:#c5ddff}
.moment-instruction{font-size:13px;color:#6b7888;text-align:center;margin-top:0}
.download-section h2{font-size:clamp(61px,8.74vw,125px);letter-spacing:-.035em}
.download-section .actions>.button{min-height:66px;font-size:17px;padding:20px 30px;border-radius:15px}
@media(hover:hover) and (pointer:fine){
 .logo-card:hover{scale:1.04}
 .hello-word:hover{background:#b4d5ff}
 .shuffle-cards:hover{background:#d5e2f5}
 .intelligence-card,.plan{transition:transform 260ms var(--ease)}
 .intelligence-card:hover,.plan:hover{transform:translateY(-5px)}
 .feature-notes article>svg{transition:transform 280ms var(--ease)}
 .feature-notes article:hover>svg{transform:rotate(-12deg) scale(1.12)}
}
@media(max-width:1190px){
 .everyday-heading h2{font-size:7.82vw}
 .moment-card{width:29.5%}
 .moment-card>img{height:235px}
 .moment-phrase{font-size:45px}
 .yes-card .moment-phrase{font-size:71px}
 .later-card .moment-phrase{font-size:52px}
 .moment-board{height:535px}
}
@media(min-width:701px) and (max-width:960px){
 .nav .nav-inner,.nav.is-scrolled .nav-inner{height:76px}
 .section-head h2,.intelligence-title h2{font-size:clamp(42px,5.8vw,59px)}
 .logo-card{flex-basis:260px}
 .moment-card>img{height:190px}
 .moment-card-copy{padding:18px}
 .moment-phrase{font-size:clamp(29px,3.9vw,37px)}
 .yes-card{padding:21px;min-height:305px}
 .yes-card .moment-phrase{font-size:clamp(40px,calc(6.95vw - 8px),58px)}
 .later-card{padding:21px;min-height:320px}
 .later-card .moment-phrase{font-size:clamp(35px,4.5vw,43px);letter-spacing:-.08em}
 .moment-afterthought{font-size:13px}
 .moment-board{height:480px}
}
@media(max-width:700px){
 html{scroll-padding-top:90px}
 .nav .nav-inner,.nav.is-scrolled .nav-inner{height:74px}
 .nav.is-scrolled{background:rgba(248,248,248,.9)}
 .context-strip{padding:32px 0 28px}
 .context-strip .rail-heading{align-items:center;margin-bottom:18px}
 .context-strip .rail-heading>p{font-size:27px}
 .rail-controls>span{display:none}
 .rail-controls button{width:38px;height:38px}
 .logo-track{gap:12px;padding:12px 20px 18px}
 .logo-card{flex-basis:235px;height:119px}
 .context-strip .rail-caption{display:block;margin-top:7px}
 .context-strip .rail-caption p{font-size:12px;min-height:36px;line-height:1.5}
 .rail-caption>a{font-size:12px;margin-top:9px}
 .section-head h2,.mobile-copy .section-head h2,.intelligence-title h2{font-size:clamp(40px,9.48vw,61px);letter-spacing:-.035em}
 .everyday-section{padding:78px 0 60px}
 .everyday-heading h2{font-size:clamp(40px,9.66vw,63px);letter-spacing:-.035em;line-height:1.09}
 .hello-word{padding-inline:.13em}
 .everyday-intro{gap:15px;align-items:center;margin-top:24px}
 .everyday-intro p{font-size:14px;line-height:1.6}
 .shuffle-cards{min-height:42px;padding:12px;font-size:12px;gap:8px}
 .shuffle-cards svg{width:15px;height:15px}
 .moment-board{position:relative;display:flex;align-items:center;gap:27px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;margin:15px -20px 0;padding:22px 32px 30px;height:445px;touch-action:pan-x pan-y}
 .moment-board::-webkit-scrollbar{display:none}
 .moment-card{position:relative!important;left:auto!important;top:auto!important;flex:0 0 260px;width:260px;max-width:none}
 .moment-card>img{height:215px}
 .moment-card-copy{padding:18px 21px}
 .moment-phrase{font-size:43px}
 .moment-action{margin-top:17px;font-size:11px}
 .coffee-card{rotate:-5deg}
 .yes-card{padding:25px;min-height:325px;rotate:5deg}
 .yes-card .moment-phrase{font-size:69px;margin-top:24px}
 .later-card{padding:24px;min-height:331px}
 .later-card .moment-phrase{font-size:55px}
 .moment-afterthought{font-size:14px}
 .moment-instruction{font-size:12px;line-height:1.6;margin-top:7px}
 .download-section h2{font-size:clamp(46px,10.58vw,70px);letter-spacing:-.035em}
 .download-section .actions>.button{min-height:60px;font-size:14px;padding:18px 23px}
}
@media(max-width:370px){
 .everyday-heading h2{font-size:39px}
}
@media(prefers-reduced-motion:reduce){
 .nav .nav-inner{transition:none}
 .letter-visual,.kinetic-line>span{transform:none!important;will-change:auto}
 .logo-card:hover{scale:1}
 .intelligence-card:hover,.plan:hover{transform:none}
 .moment-card{will-change:auto}
}
.section-head h2>.kinetic-line,.section-head h2>.kinetic-line>span,.download-section h2>.kinetic-line,.download-section h2>.kinetic-line>span{color:inherit}
.moment-card:active{scale:1;opacity:1}

/* Keyboard demo follows the extension's 300pt layout; the host owns its send button. */
.phone-screen[data-mode=keyboard]{display:flex;flex-direction:column;background:#fff}
.keyboard-host{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.keyboard-host .keyboard-header{flex:none;gap:2.8cqw;margin:0;padding:4.5cqw 5.5cqw 5cqw;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:4.1cqw;color:#18202a}
.keyboard-host .avatar{width:8.4cqw;height:8.4cqw;font-size:3.6cqw}
.host-thread{flex:1;min-height:0;overflow-y:auto;padding:1.5cqw 5.5cqw 3cqw;overscroll-behavior:contain;scrollbar-width:thin;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
.host-thread .host-message{max-width:82%;width:max-content;padding:3cqw 4cqw;border-radius:4.8cqw 4.8cqw 4.8cqw 1.2cqw;font-size:3.9cqw;line-height:1.5;color:#253449}
.host-thread .host-time{font-size:2.6cqw;margin:2cqw 0 5cqw;color:#728092}
.host-sent{margin:3.8cqw 0 0 auto;max-width:85%;width:max-content;text-align:right}
.host-sent>p{padding:3cqw 4cqw;border-radius:4.8cqw 4.8cqw 1.2cqw 4.8cqw;background:#2884ff;color:#fff;text-align:left;font-size:3.9cqw;line-height:1.45}
.host-sent>span{display:block;margin-top:1.5cqw;font-size:2.5cqw;color:#758293}
.keyboard-host .host-composer{flex:none;margin:2cqw 3.5cqw 2.2cqw;padding:1.9cqw 2cqw 1.9cqw 3.6cqw;min-height:10.8cqw;gap:2cqw;border-radius:6cqw;background:#f1f4f7;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:3.8cqw;line-height:1.4;color:#202a36}
#keyboard-text{flex:1;min-width:0;overflow-wrap:anywhere}
#keyboard-text.is-empty{color:#929ca7}
.host-send{display:grid;place-items:center;flex:none;width:7.2cqw;height:7.2cqw;padding:0;border-radius:50%;background:#2884ff;color:white}
.host-composer .host-send svg{width:4.7cqw;height:4.7cqw;padding:0;background:none;border-radius:0;rotate:-90deg;stroke-width:2.7}
.host-send:disabled{background:#d8dfe7;color:#99a6b5;opacity:1;cursor:default}
.phone-screen[data-mode=keyboard] .keyboard{position:relative;inset:auto;flex:none;display:grid;grid-template-rows:6.05cqw 7.44cqw 46.05cqw;row-gap:1.86cqw;height:69.77cqw;padding:.93cqw .93cqw 5.58cqw;background:#dfe5eb;border:0}
.keyboard .keyboard-toolbar{display:flex;align-items:center;justify-content:flex-start;gap:.93cqw;padding:0 .93cqw;font-size:3.02cqw;color:#202a34;min-width:0}
.keyboard-languages{display:flex;align-items:center;gap:.9cqw;white-space:nowrap}
.keyboard-toolbar .keyboard-languages svg{width:7.9cqw;height:3.8cqw}
.keyboard-toolbar .respond-pill{margin:0 0 0 auto;flex:none;padding:.7cqw 1.86cqw;min-height:5.8cqw;font-size:3.02cqw;line-height:1.4;background:#151719;color:#fff}
.keyboard-settings{display:grid;place-items:center;flex:none;width:6.98cqw;height:6.05cqw}
.keyboard-toolbar .keyboard-settings svg{width:3.8cqw;height:3.8cqw}
.keyboard .keyboard-suggestion{height:auto;margin:0;padding:0 1.86cqw;border:0;font-size:3.1cqw;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.keyboard .keyboard-replies{height:7.44cqw;align-items:stretch;gap:.93cqw;padding:0 1.86cqw;scrollbar-width:none;touch-action:pan-x pan-y pinch-zoom}
.keyboard-replies::-webkit-scrollbar{display:none}
.keyboard .keyboard-replies button{flex:0 0 auto;min-width:0;padding:.65cqw 1.86cqw;border-radius:1.86cqw;font-size:3.1cqw;line-height:1.13;white-space:nowrap;background:#eaf1fa;color:#25394f}
.keyboard .keyboard-replies small{font-size:2.32cqw;line-height:1.1;margin-top:.2cqw;color:#617386}
.keyboard-keypad{display:flex;flex-direction:column;gap:2.326cqw;min-height:0}
.keyboard-keypad .key-row{flex:none;display:flex;gap:1.395cqw;margin:0;height:9.77cqw;padding:0}
.keyboard-keypad .key-row>span,.keyboard-keypad .key-row>button{flex:1 1 0;min-width:0;max-width:none;height:9.77cqw;border-radius:1.163cqw;font-size:5.1cqw;line-height:1;font-weight:400}
.keyboard-keypad .key-row.inset{padding-inline:4.97cqw}
.keyboard-keypad .key-row .wide{flex:1.5 1 0}
.keyboard-keypad .key-row svg{width:4.65cqw;height:4.65cqw}
.keyboard-keypad .key-row.bottom>span,.keyboard-keypad .key-row.bottom>button{font-size:3.02cqw}
.keyboard-keypad .key-row.bottom .number-key{flex:1.6}
.keyboard-keypad .key-row.bottom .globe-key{flex:1.3}
.keyboard-keypad .key-row.bottom .space{flex:4}
.keyboard-keypad .key-row.bottom .translate-key{flex:3.1;background:#151719;color:#fff}
.keyboard-keypad .key-row.bottom .translate-key:disabled{background:#c4cfdb;color:#728092;opacity:1;cursor:default}
@media(hover:hover) and (pointer:fine){.host-send:not(:disabled):hover{background:#126ee9}.keyboard-toolbar .respond-pill:hover{background:#33383e}}

/* More everyday apps and platforms, with each original mark kept intact. */
.logo-card.expanded-logo{font-size:31px;gap:14px}
.expanded-logo img{flex:none;width:auto;object-fit:contain}
.logo-card.teams-logo{background:#e9edf8}
.logo-card.outlook-logo{background:#fff}
.logo-card.telegram-logo,.logo-card.messenger-logo{background:#e7f2ff}
.logo-card.instagram-logo{background:#f2f3f7}
.logo-card.notion-logo{background:#fff}
.logo-card.windows-logo{background:#dfedff}
.logo-card.apple-logo{background:#edf0f4}
.logo-card.messenger-logo img{width:40px;height:40px}
.logo-card.apple-logo img{width:42px;height:42px}
.keyboard-keypad .key-row.bottom .number-key{flex:0 0 13.6936cqw}
.keyboard-keypad .key-row.bottom .globe-key{flex:0 0 11.126cqw}
.keyboard-keypad .key-row.bottom .space{flex:1}
.keyboard-keypad .key-row.bottom .translate-key{flex:0 0 26.5314cqw}
@media(max-width:700px){.logo-card.expanded-logo{font-size:27px;gap:11px}.logo-card.expanded-logo img{max-width:46px;max-height:46px}}

/* Unmistakable controls. */
.reply-example-picks button,.reply-demo-tools .tone-switch button{background:#191c20;color:#fff;min-height:42px;font-size:12px;padding:11px 14px;border-radius:10px}
.reply-demo-tools .tone-switch button[aria-pressed=true]{background:#1e3c63;color:#fff;box-shadow:none}
.reply-demo-tools .tone-switch{gap:7px}
@media(hover:hover) and (pointer:fine){.reply-example-picks button:hover,.reply-demo-tools .tone-switch button:hover{background:#343b45;color:#fff}}

/* Black controls outside the restored light demo panels. */
.workflow-steps{gap:8px;flex-wrap:wrap}.workflow-steps button,.ask-options button,.ask-options button[aria-pressed=true],.phone-example-control button,.story-languages button,.story-languages button[aria-pressed=true]{background:#191c20;color:#fff;min-height:42px;border-radius:10px}.workflow-steps button{padding:10px 13px}.workflow-steps button>span{background:#3a424f;color:#fff}.workflow-steps button[aria-current=step]{color:#fff;box-shadow:none}.workflow-steps button[aria-current=step]>span{background:#c7e0ff;color:#203c63}.ask-options button[aria-pressed=true],.story-languages button[aria-pressed=true]{box-shadow:none}.reply-demo-tools{justify-content:flex-end}.native-empty-field{background:#d8dcdf;border-radius:13px;min-height:87px;width:100%;min-width:0}.native-empty-field--compact{min-height:40px;flex:1}.native-bottom-composer .native-reply-arrow{background:#98bcee;color:white}.native-reply-area .native-translate.demo-static-action{background:#191c20;color:#fff}.demo-static-action{cursor:default}.tier-switch{background:#191c20}.tier-switch button,.tier-switch button[aria-pressed=true],.tier-switch [data-tier=max][aria-pressed=true]{background:#191c20;color:#fff}.tier-switch button[aria-pressed=true],.tier-switch [data-tier=max][aria-pressed=true]{background:#343c48;box-shadow:none}.phone-language-head>.chat-language{font:inherit;font-weight:500;letter-spacing:inherit;color:#151719}.chat-sheet .chat-mic,.host-composer .host-send{background:#191c20;color:#fff}.chat-sheet .phone-type{background:#191c20;color:#fff;border-radius:99px;padding:9px 16px;font-size:3.4cqw;min-height:34px}.home-output .phone-check button{background:#191c20;color:#fff;padding:8px 11px;border-radius:8px;min-height:34px}.keyboard .keyboard-replies button{background:#191c20;color:#fff}.keyboard .keyboard-replies button small{color:#d2dbe8}@media (hover:hover) and (pointer:fine){.workflow-steps button:hover,.ask-options button:hover,.phone-example-control button:hover,.story-languages button:hover,.keyboard .keyboard-replies button:hover{background:#303843;color:#fff}}@media (max-width:700px){.workflow-steps{gap:6px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.workflow-steps button{font-size:11px;padding:10px 12px;justify-content:flex-start}}

/* A warm, metallic finish for Max. The narrow reflection crosses every 3.2s. */
.plan.plan-max{background:linear-gradient(125deg,#fff3d4 0%,#f4d892 54%,#eac576 100%);isolation:isolate;overflow:hidden}
.plan-max> :not(.plan-shine){position:relative;z-index:1}
.plan-max h3,.plan-max .plan-price{color:#443013}
.plan-max .plan-label,.plan-max .plan-description,.plan-max li{color:#624c28}
.plan-max li:before{color:#77500e}
.plan-max .button.ghost{background:#3d2b12;color:#fff7e5}
.plan-max .plan-shine{position:absolute;top:-25%;bottom:-25%;left:0;width:35%;z-index:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,253,231,.82),transparent);transform:translate3d(-180%,0,0) skewX(-18deg);opacity:0;animation:max-plan-shine 3.2s cubic-bezier(.45,0,.55,1) infinite;animation-play-state:paused}
.plan-max.is-shining .plan-shine{animation-play-state:running}
@keyframes max-plan-shine{0%{transform:translate3d(-180%,0,0) skewX(-18deg);opacity:0}9%{opacity:.9}38%{transform:translate3d(460%,0,0) skewX(-18deg);opacity:0}100%{transform:translate3d(460%,0,0) skewX(-18deg);opacity:0}}
@media(hover:hover) and (pointer:fine){.plan-max .button.ghost:hover{background:#573d19;color:#fff7e5}}
@media(prefers-reduced-motion:reduce){.plan-max .plan-shine{display:none;animation:none}}


.host-composer .host-send:disabled{background:#191c20;color:#fff;opacity:.35;cursor:default}

/* Selected black controls use a filled navy surface, without a selection stroke. */
.workflow-steps button[aria-current=step],.ask-options button[aria-pressed=true],.story-languages button[aria-pressed=true],.reply-demo-tools .tone-switch button[aria-pressed=true],.tier-switch button[aria-pressed=true],.tier-switch [data-tier=max][aria-pressed=true]{background:#1e3c63;color:#fff;box-shadow:none;border:0}
.keyboard-toolbar .respond-pill[aria-pressed=true]{background:#1e3c63;color:#fff;box-shadow:none;border:0}

/* Touch cards keep page scrolling on the face; the grip owns free movement. */
.moment-card{touch-action:pan-y pinch-zoom;-webkit-touch-callout:none}
.card-grip{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:44px;height:40px;border-radius:12px;background:#fff;color:#344d6d;z-index:2;touch-action:none;cursor:grab}
.card-grip svg{width:22px;height:24px;pointer-events:none}
.moment-card.is-dragging .card-grip{cursor:grabbing;background:#d4e7ff}
@media(hover:hover) and (pointer:fine){.card-grip{opacity:0;transition:opacity 160ms ease}.moment-card:hover .card-grip,.moment-card:focus-visible .card-grip,.moment-card.is-dragging .card-grip{opacity:1}}
.home-translate-button{left:11%;right:auto;width:78%;justify-content:center}
@media(max-width:700px){
 .hero-art{width:100%;max-width:400px;height:610px;scale:1;left:auto;margin:35px auto 0;transform-origin:50% 0}
 .hero-message{left:0;top:88px;width:min(286px,85%);padding:20px}
 .hero-message p{font-size:17px}
 .hero-orb{left:50%;top:239px;translate:-50% 0;width:55px;height:55px}
 .hero-result{left:50%;top:314px;translate:-50% 0;width:min(309px,calc(100% - 24px));padding:22px}
 .hero-result .translation{font-size:24px}
 .hero-result .respond-pill{display:flex;width:100%;margin-inline:0;justify-content:center}
 .sticker-one{top:5px;right:5px;font-size:23px;min-height:65px;min-width:145px;padding:16px 20px}
 .sticker-two{top:253px;left:-3px;font-size:14px;min-width:130px;min-height:52px;padding:14px;gap:10px}
 .sticker-three{top:535px;right:7px;font-size:17px;min-height:56px;padding:16px 20px}
 .native-respond-entry{display:flex;justify-content:center}
 .native-respond-entry .respond-pill,.app-panel>.respond-pill{width:100%;justify-content:center}
 .moment-board{--play-card-width:min(260px,calc(100% - 72px));display:block;width:calc(100% + 40px);height:1040px;margin:22px -20px 0;padding:0;overflow:clip;touch-action:pan-y pinch-zoom}
 .moment-card{position:absolute!important;flex:none;left:calc((100% - var(--play-card-width)) / 2)!important;width:var(--play-card-width);max-width:none}
 .moment-card>img{height:180px}
 .moment-card-copy{padding:18px 21px}
 .coffee-card{top:24px!important;rotate:-4deg}
 .yes-card{top:366px!important;min-height:300px;padding:23px;rotate:4deg}
 .yes-card .moment-phrase{font-size:61px}
 .later-card{top:699px!important;min-height:310px;padding:23px;rotate:-4deg}
 .later-card .moment-phrase{font-size:50px;margin-top:42px}
 .moment-afterthought{font-size:13px}
 .moment-instruction{max-width:320px;margin:8px auto 0}
}
@media(max-width:370px){
 .hero-art{height:610px;margin-bottom:0}
 .hero-result{padding:20px}
 .hero-result .translation{font-size:23px}
 .hero-message{padding:18px}
 .hero-message p{font-size:16px}
 .sticker-two{font-size:12px;min-width:116px;padding:12px}
 .yes-card .moment-phrase{font-size:56px}
 .later-card .moment-phrase{font-size:46px}
}

@media(max-width:700px){.hero-art{height:640px}.hero-tip{top:607px;left:50%;translate:-50% 0;width:max-content;max-width:100%;font-size:10px;justify-content:center}}

/* Infinite rail copies match the originals exactly at each wrap. */
.app-rail{overflow-anchor:none;scroll-behavior:auto}
.logo-track{position:relative}
.rail-controls [data-rail-pause][hidden]{display:none}
.rail-controls [data-rail-pause][aria-pressed=true]{background:#1e3c63;color:white}
/* Guided demo cursor. It lives inside its section, so it scrolls with the demo it is pressing. */
.tour-host{position:relative}
.tour-cursor{position:absolute;top:0;left:0;z-index:30;pointer-events:none;opacity:0;transition:opacity 260ms cubic-bezier(.23,1,.32,1);will-change:transform}
.tour-cursor.is-visible{opacity:1}
.tour-arrow{position:absolute;top:-3px;left:-3px;width:26px;height:26px;transform-origin:3px 3px;fill:#17191c;stroke:#fff;stroke-width:1.6;stroke-linejoin:round;paint-order:stroke;filter:drop-shadow(0 3px 6px #12233a3d)}
.tour-dot{display:none;position:absolute;top:-15px;left:-15px;width:30px;height:30px;border-radius:50%;background:#2884ffd9;border:2px solid #fff;box-shadow:0 5px 16px #2884ff55;transform-origin:center}
.tour-ring{position:absolute;top:-19px;left:-19px;width:38px;height:38px;border-radius:50%;border:2px solid #2884ff;opacity:0;transform:scale(.35);transform-origin:center}
.tour-label{position:absolute;top:28px;left:22px;white-space:nowrap;font-family:Respond,Arial,sans-serif;font-size:11px;font-weight:500;letter-spacing:-.01em;line-height:1;background:#d0e1f4;color:#395d86;border-radius:10px;padding:10px 13px;box-shadow:0 5px 12px #2b12410a;opacity:0;transition:opacity 180ms cubic-bezier(.23,1,.32,1)}
.tour-label:not(:empty){opacity:1}
.tour-cursor.is-touch .tour-arrow{display:none}
.tour-cursor.is-touch .tour-dot{display:block}
.tour-cursor.is-touch .tour-label{top:24px;left:50%;transform:translateX(-50%)}
@media(prefers-reduced-motion:reduce){.tour-cursor{display:none}}
/* The App Store button carries the Apple mark as an image, like the logo rail. */
.button-logo{width:16px;height:16px;object-fit:contain;flex-shrink:0}
/* Coloured boxes (24 September 2026). Chris chose a pastel box with dark text of the same hue for the
   site (his option E, the app's light mode): blue #BCD9FE with #03376D, one step deeper #A0C9FD;
   purple #D7CFFE with #3D2570, deeper #C8BAFE. Words on the page stay #1875D8, and the orbs stay
   solid. Max is a solid #E2D292 box with #513C1E text and icons. Neutral grey panels, the primary
   black buttons and the brand logo tiles stay as they are. */
:root{--blue:#1875d8;--purple:#1875d8}
::selection{background:#bcd9fe;color:#03376d}
.respond-pill{background:#bcd9fe;color:#03376d}
.key-row.bottom .translate-key{background:#bcd9fe;color:#03376d}
.sticker-one,.sticker-two{background:#bcd9fe;color:#03376d}
.sticker-three{background:#d7cffe;color:#3d2570}
.hero-message{background:#bcd9fe;color:#03376d}
.hero-message p,.hero-message .mini-person,.hero-message .mini-time{color:#03376d}
.hero-message .avatar{background:#a0c9fd;color:#03376d}
.hero-message mark{background:#a0c9fd;color:#03376d}
.avatar{background:#bcd9fe;color:#03376d}
.chat-message>.avatar{background:#d7cffe;color:#3d2570}
.keyboard-header .avatar{background:#bcd9fe;color:#03376d}
.workspace-name>span{background:#bcd9fe;color:#03376d}
.liquid-indicator{background:#bcd9fe}
.demo-tabs button[aria-selected=true]{color:#03376d}
.channel.active{background:#bcd9fe;color:#03376d}
.is-selected .selected-text{background:#bcd9fe;color:#03376d;box-shadow:3px 0 #bcd9fe,-3px 0 #bcd9fe}
.workflow-steps button[aria-current=step]>span{background:#bcd9fe;color:#03376d}
.tour-label,.cursor-label,.toast{background:#bcd9fe;color:#03376d}
.mobile-feature[aria-selected=true]{background:#bcd9fe;color:#03376d}
.mobile-feature[aria-selected=true] .feature-number,.mobile-feature[aria-selected=true] .feature-title,.mobile-feature[aria-selected=true] .feature-title svg,.mobile-feature[aria-selected=true] .feature-description{color:#03376d}
.tag.blue{background:#bcd9fe;color:#03376d}
.tag.gold{background:#e2d292;color:#513c1e}
.hello-word{background:#bcd9fe;color:#03376d}
.shuffle-cards{background:#bcd9fe;color:#03376d}
.yes-card{background:#bcd9fe;color:#03376d}
.yes-card.is-flipped{background:#a0c9fd}
.later-card{background:#d7cffe;color:#3d2570}
.later-card.is-flipped{background:#c8bafe}
.phone-turn.reply .phone-bubble,.chat-conversation .phone-turn.reply .phone-bubble{background:#bcd9fe;color:#03376d}
.phone-turn.reply .bubble-footer,.chat-conversation .phone-turn.reply .bubble-footer{color:#03376d}
.intelligence-card:not(.max){background:#bcd9fe;color:#03376d}
.intelligence-card:not(.max) h3,.intelligence-card:not(.max) p,.intelligence-card:not(.max) #invitation-text,.intelligence-card:not(.max) #invitation-meaning,.intelligence-card:not(.max) .playground-hint{color:#03376d}
.intelligence-card:not(.max) .tag{background:#a0c9fd;color:#03376d}
.intelligence-card:not(.max) .tone-playground-controls button{background:#a0c9fd;color:#03376d}
.intelligence-card:not(.max) .tone-playground-controls button[aria-pressed=true]{background:#fff;color:#03376d}
.intelligence-card.max{background:#e2d292;color:#513c1e}
.intelligence-card.max h3,.intelligence-card.max p,.intelligence-card.max .meaning-original,.intelligence-card.max .meaning-example,.intelligence-card.max .playground-hint{color:#513c1e}
.intelligence-card.max .tag{background:#d4c07a;color:#513c1e}
.intelligence-card.max .missed-word{background:#d4c07a;color:#513c1e}
.meaning-check-button{background:#513c1e;color:#fff}
.plan.featured{background:#bcd9fe;color:#03376d}
.plan.featured h3,.plan.featured .plan-label,.plan.featured .plan-price,.plan.featured .plan-price small,.plan.featured .plan-description,.plan.featured li,.plan.featured li:before{color:#03376d}
.plan.featured .tag{background:#a0c9fd;color:#03376d}
.plan.featured .button.primary{background:#191c20;color:#fff}
.plan.plan-max{background:#e2d292}
.plan-max h3,.plan-max .plan-price,.plan-max .plan-price small,.plan-max .plan-label,.plan-max .plan-description,.plan-max li,.plan-max li:before{color:#513c1e}
.plan-max .button.ghost{background:#513c1e;color:#fff}
.download-section,.footer{background:#bcd9fe}
.download-section h2{color:#03376d}
.download-section h2 span{color:#0059ba}
.download-section p:not(.eyebrow),.download-section .release-note{color:#03376d}
.download-section .button.ghost{background:#a0c9fd;color:#03376d}
.footer small,.footer-links,.footer-links a{color:#03376d}
@media(hover:hover) and (pointer:fine){.selectable-message:hover .selected-text{background:#a0c9fd;color:#03376d}
.mobile-feature[aria-selected=true]:hover .feature-title{color:#03376d}
.hello-word:hover,.shuffle-cards:hover{background:#a0c9fd}
.intelligence-card:not(.max) .tone-playground-controls button:hover{background:#fff;color:#03376d}
.meaning-check-button:hover{background:#3f2e16;color:#fff}
.plan.featured .button.primary:hover{background:#30353c;color:#fff}
.plan-max .button.ghost:hover{background:#3f2e16;color:#fff}
.download-section .button.ghost:hover{background:#84b9fb;color:#03376d}
.footer-links a:hover{color:#1875d8}}
/* Hero colours (25 September 2026). Chris: the Respond button is black with white text again, and two of the
   three blue hero boxes are green (Hola!) and red (the Japanese greeting), using the app's pastel pairs: green
   #BBE1C2 with #09441E, red #FEC7BE with #6B0C0A. The pastel keyboard key now hovers one step deeper instead of
   dark grey, which hid its dark text. */
.respond-pill{background:#151719;color:#fff}
.sticker-one{background:#bbe1c2;color:#09441e}
.sticker-two{background:#fec7be;color:#6b0c0a}
@media(hover:hover) and (pointer:fine){.key-row.bottom .translate-key:hover{background:#a0c9fd;color:#03376d}}
/* AI at work in the demos (25 September 2026): the app's own gradient (ai-gradient.js)
   round the control that is thinking, and skeletons the size of what is coming. */
canvas[data-ai]{display:block;pointer-events:none}
/* Safari leaves a blurred canvas unclipped by rounded corners unless the box carries a mask; every gradient patch with a
   known shape also has its own clip-path. */
.ai-fill{position:relative;overflow:hidden;isolation:isolate;-webkit-mask-image:linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0)}
.ai-fill>canvas[data-ai='fill']{position:absolute;left:-2px;top:-2px;width:calc(100% + 4px);height:calc(100% + 4px);filter:blur(1px)}
.ai-ring{position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ai-ring>canvas[data-ai='rim']{position:absolute;inset:0;width:100%;height:100%}
.ai-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle;clip-path:circle(50%)}
.native-suggestions-toggle.is-thinking{position:relative;border-color:transparent;color:#53677d}
.is-ghost{pointer-events:none}
.respond-pill.is-ghost{opacity:.45}
.is-barred{display:block}
.ghost-row{display:flex;align-items:center}
.ghost-bar{display:block;border-radius:999px;background:#e8ecf1}
.suggestion .ghost-bar{background:#e8ecf1}
/* The hero title's letters (25 September 2026): the letter under the pointer dissolves into the same sound in another
   script, on a pastel tile filling the room it opens; the letters either side rise a little with it (launch.js). */
.letter-original{transition:opacity .22s ease,filter .22s ease}
.title-line .letter-slot .letter-symbol{isolation:isolate;color:var(--box-ink,#3d2570);font-family:Respond,"Hiragino Sans","Yu Gothic","Apple SD Gothic Neo","Malgun Gothic","Leelawadee UI",Thonburi,"Segoe UI",sans-serif;transform:scale(.86);filter:blur(4px);transition:opacity .22s ease,transform .34s cubic-bezier(.22,1,.36,1),filter .22s ease}
.title-line .letter-slot .letter-symbol::before{content:"";position:absolute;z-index:-1;inset:.08em .05em -.08em;border-radius:.2em;background:var(--box,#d7cffe)}
.letter-slot.is-playing .letter-original{filter:blur(4px)}
.title-line .letter-slot.is-playing .letter-symbol{transform:none;filter:none}
@media(prefers-reduced-motion:reduce){.letter-original,.title-line .letter-slot .letter-symbol{transition:none;filter:none;transform:none}}
/* Pastel boxes (25 September 2026): launch.js hands each one of the app's pastel pairs (--box, --box-ink, --box-deep),
   so the open feature, the current step, the phrase cards and the tone card are not all blue. Blue is the fallback. */
.mobile-feature[aria-selected=true]{background:var(--box,#bcd9fe);color:var(--box-ink,#03376d)}
.mobile-feature[aria-selected=true] .feature-number,.mobile-feature[aria-selected=true] .feature-title,.mobile-feature[aria-selected=true] .feature-title svg,.mobile-feature[aria-selected=true] .feature-description{color:var(--box-ink,#03376d)}
.workflow-steps button[aria-current=step]>span{background:var(--box,#bcd9fe);color:var(--box-ink,#03376d)}
.hello-word,.shuffle-cards,.yes-card{background:var(--box,#bcd9fe);color:var(--box-ink,#03376d)}
.later-card{background:var(--box,#d7cffe);color:var(--box-ink,#3d2570)}
.yes-card.is-flipped,.later-card.is-flipped{background:var(--box-deep,#a0c9fd)}
.intelligence-card:not(.max){background:var(--box,#bcd9fe);color:var(--box-ink,#03376d)}
.intelligence-card:not(.max) h3,.intelligence-card:not(.max) p,.intelligence-card:not(.max) #invitation-text,.intelligence-card:not(.max) #invitation-meaning,.intelligence-card:not(.max) .playground-hint{color:var(--box-ink,#03376d)}
.intelligence-card:not(.max) .tag,.intelligence-card:not(.max) .tone-playground-controls button{background:var(--box-deep,#a0c9fd);color:var(--box-ink,#03376d)}
.intelligence-card:not(.max) .tone-playground-controls button[aria-pressed=true]{background:#fff;color:var(--box-ink,#03376d)}
@media(hover:hover) and (pointer:fine){.mobile-feature[aria-selected=true]:hover .feature-title{color:var(--box-ink,#03376d)}
.hello-word:hover,.shuffle-cards:hover{background:var(--box-deep,#a0c9fd)}
.intelligence-card:not(.max) .tone-playground-controls button:hover{background:#fff;color:var(--box-ink,#03376d)}}
/* The story as phrase tiles (25 September 2026; launch.js places and translates them). The stage is as tall as the taller
   of the two sentences; each tile holds both phrases, one dissolving into the other. "how you say it" ends on the AI
   gradient with white words. */
.translation-story{height:185vh}
.story-stage{position:relative;margin:48px 0 calc(1.15em + 24px);min-height:0;font-size:clamp(38px,4.7vw,76px);font-weight:500;letter-spacing:-.035em;line-height:1.1}
.story-plain{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.story-tile{position:absolute;left:0;top:0;display:grid;align-items:center;overflow:hidden;isolation:isolate;box-sizing:border-box;padding:.06em .3em .12em;border-radius:.24em;background:var(--box,#bcd9fe);color:var(--box-ink,#03376d);white-space:nowrap;will-change:transform,width}
.story-src,.story-tgt{grid-area:1/1;position:relative;z-index:2}
.story-tgt{opacity:0}
.story-tile-fill{position:absolute;inset:0;z-index:1;opacity:0;border-radius:inherit;clip-path:inset(0 round .24em)}
.story-tile-fill>canvas[data-ai='fill']{left:-8%;top:-30%;width:116%;height:160%;filter:blur(8px)}
.story-tile[data-key='d'].is-english{color:#fff}
.story-ghost{position:absolute;left:0;top:0;right:0;visibility:hidden;pointer-events:none}
.story-ghost-row{display:flex;flex-wrap:wrap;gap:.16em .18em;margin-bottom:.16em}
.story-ghost-row:last-child{margin-bottom:0}
.story-ghost .story-tile{position:static;will-change:auto}
.story-track span{background:linear-gradient(90deg,#bbe1c2,#bcd9fe,#d7cffe,#ffc2d6,#fec7be)}
/* Titles (25 September 2026): every section title the size of "Your advanced translator buddy.", apart from the hero's
   and "Say hello to Ondy". */
.section-head h2,.mobile-copy .section-head h2,.intelligence-title h2,.download-section h2,.everyday-heading h2{font-size:clamp(38px,4.7vw,76px);line-height:1.12}
.ondy-section .section-head h2.ondy-buddy-title{line-height:1.3}
@media(max-width:700px){.section-head h2,.mobile-copy .section-head h2,.intelligence-title h2,.download-section h2,.everyday-heading h2,.ondy-section .section-head h2.ondy-buddy-title{font-size:clamp(30px,11vw,48px)}
.story-stage{font-size:clamp(30px,11vw,48px)}}
/* Plans (1 October 2026): Every device or iPhone only, chosen by the switch above the cards (launch.js). The chosen side
   is a white pill; Every device also wears the AI gradient round it, drawn like the Ondy pill (ai-gradient.js). iPhone
   only shows the every-device price struck through, then the iPhone price in a deeper box of the card's own colour. */
.plan-switch-wrap{display:flex;justify-content:center;margin:6px 0 30px}
.plan-switch{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:#e4e8ee}
.plan-switch button{position:relative;isolation:isolate;border:0;background:transparent;border-radius:999px;padding:11px 20px;font:inherit;font-size:15px;line-height:1;color:#59616d;cursor:pointer;transition:color .2s ease,box-shadow .2s ease}
.plan-switch button[aria-pressed=true]{color:#17191d}
.plan-switch button:focus-visible{outline-offset:2px}
@media(hover:hover) and (pointer:fine){.plan-switch button[aria-pressed=false]:hover{color:#17191d}}
.switch-face{position:absolute;inset:0;z-index:1;border-radius:inherit;background:#fff;opacity:0;transition:opacity .2s ease}
.switch-word{position:relative;z-index:3}
.plan-switch .ai-ring{z-index:2;inset:0;padding:2px;opacity:0;transition:opacity .25s ease}
.plan-switch .ai-halo{position:absolute;z-index:0;left:-7px;top:-7px;width:calc(100% + 14px);height:calc(100% + 14px);border-radius:999px;filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s ease}
.plan-switch button[aria-pressed=true] .switch-face,.plan-switch button[aria-pressed=true] .ai-ring{opacity:1}
.plan-switch button[aria-pressed=true] .ai-halo{opacity:.6}
.plan-switch button[data-where=iphone][aria-pressed=true]{box-shadow:0 1px 3px rgba(20,30,50,.12)}
.plan-price .was{font-size:.5em;letter-spacing:-.01em;text-decoration-thickness:.07em;opacity:.55;margin-right:.12em}
.plan-price .price-box{display:inline-block;line-height:1.08;padding:0 .17em .03em;border-radius:.2em;background:#a0c9fd}
.plan-max .plan-price .price-box{background:#d4bf6d}
/* Where the iPhone price and its struck price leave no room beside them, USD / month goes underneath in both states, so
   the cards keep their height when the switch changes. In three narrow columns the App Store button says just App Store,
   and the buttons, which already broke onto two lines there, get a little less side padding. */
@media(min-width:961px) and (max-width:1080px),(max-width:380px){.plan-price small{display:block;margin-top:5px;line-height:1.5}}
@media(min-width:701px) and (max-width:1000px){.cta-long{display:none}}
@media(min-width:701px) and (max-width:780px){.plans .button{padding-inline:12px}}
@media(prefers-reduced-motion:reduce){.plan-switch button,.switch-face,.plan-switch .ai-ring,.plan-switch .ai-halo{transition:none}}
/* The hero's floating boxes (Chris, 3 October 2026: "make this section look a lot nicer ... this section feels a bit
   cheap"; the greetings float and move "like the iOS Welcome to Respond Pro labels"; the two cards float but stay put
   and are solid). launch.js moves them. They sit upright, so their words stay crisp, on soft layered shadows; a
   greeting lifts higher while it is held. The orb stays above them all. */
.hero-art [data-floater]{transform:none;rotate:none;transition:box-shadow 240ms var(--ease),background-color 160ms}
.hero-art .greeting-sticker{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.hero-art .greeting-sticker.is-held{cursor:grabbing}
.hero-art .hero-orb{z-index:40}
/* A greeting can be dragged anywhere in the hero, so the art sits above the words beside it; only its own things take
   the pointer, and the words and buttons under its empty space still do. */
.hero-art{z-index:4;pointer-events:none}
.hero-art>*{pointer-events:auto}
/* The greetings: one size of label with the word alone, like the iPhone's. */
.hero-art .greeting-sticker{min-width:0;min-height:0;gap:0;justify-content:center;font-size:21px;letter-spacing:-.025em;line-height:1.15;padding:15px 22px;border-radius:16px;box-shadow:0 1px 2px #1a1d2108,0 10px 24px -10px #1a1d2129}
.hero-art .greeting-sticker.is-held{box-shadow:0 2px 4px #1a1d210d,0 22px 40px -14px #1a1d2142}
/* The two cards: depth that reads as floating. */
.hero-art .hero-message{border-radius:22px;box-shadow:0 1px 2px #1a1d2108,0 12px 28px -12px #1a1d2124,0 30px 60px -30px #1a1d2133}
.hero-art .hero-result{border-radius:22px;box-shadow:0 0 0 1px #1a1d210a,0 1px 2px #1a1d2108,0 16px 34px -14px #1a1d2129,0 40px 80px -36px #1a1d213d}
/* Respond in the card: a neat pill with its icon, not a slab across the card. */
.hero-art .hero-result .respond-pill{width:auto;display:inline-flex;min-height:40px;padding:10px 18px;font-size:13px;gap:9px;letter-spacing:-.01em}
.hero-art .respond-pill svg{width:16px;height:16px;stroke-width:1.9}
.hero-art button:focus-visible{outline-width:2px;outline-offset:3px}
@media(hover:hover) and (pointer:fine){.hero-art [data-floater]:hover{scale:none;rotate:none}}
@media(max-width:700px){.hero-art .greeting-sticker{font-size:18px;padding:13px 19px;border-radius:14px}}
/* The filler lines went (Chris, 3 October 2026); a caption left empty takes no room. */
.demo-caption:empty,#phone-caption:empty{display:none}