@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#004f43;--lime:#b3fa73;--teal:#007f70;--paper:#f6faf9;--purple:#a12bee;--line:#d6e8df}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.6}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #861bce;outline-offset:5px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:'Manrope',sans-serif;letter-spacing:-.055em;font-weight:600;line-height:1.09}em{font-style:normal;color:var(--teal)}.nav{height:98px;max-width:1440px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 5%;gap:30px}.brand{font-weight:700;display:flex;align-items:center;gap:12px;letter-spacing:-.7px;font-size:21px}.mark{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:var(--lime);font-weight:800;width:38px;height:38px;border-radius:12px;font-size:23px;letter-spacing:-4px;padding-right:5px}.mark span{color:white}.nav nav{display:flex;gap:30px;font-size:14px;font-weight:600}.nav nav a:hover{color:var(--teal)}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid transparent;border-radius:100px;padding:17px 25px;font-weight:700;font-size:15px;line-height:1.4;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px)}.button svg{width:22px;height:22px}.button.small{padding:13px 20px;background:var(--ink);color:white;font-size:14px}.lime{background:var(--lime);color:var(--ink)}.dark{background:var(--ink);color:white}.outline{border-color:#607972;color:white}.hero{max-width:1440px;margin:auto;min-height:755px;padding:38px 5% 48px;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:20px;overflow:hidden}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;display:flex;gap:10px;align-items:center;margin-bottom:25px}.mini-line{width:22px;height:2px;background:var(--teal)}h1{font-size:clamp(48px,4.8vw,72px);max-width:650px}h1 em{display:block}.intro{font-size:18px;line-height:1.8;color:#5c706c;margin-top:27px}.actions{display:flex;align-items:center;gap:24px;margin-top:32px}.text-button{background:none;border:0;color:var(--ink);font-size:15px;font-weight:600;display:flex;align-items:center;gap:10px;padding:0}.play{font-size:11px;width:31px;height:31px;border:1px solid #b9cac1;border-radius:50%;display:grid;place-items:center}.hero-note{font-size:12px;color:#657a72;margin-top:18px}.stage{min-height:640px;position:relative;perspective:1100px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 45%,#b3fa7340,transparent 68%);isolation:isolate}.orbit{position:absolute;width:480px;height:480px;border:1px solid #b6ddce;transform:rotateX(66deg) rotateZ(-24deg);border-radius:50%;bottom:20px;z-index:-1}.orbit-two{width:570px;height:570px;bottom:-23px;opacity:.5}.phone-rig{position:relative;transform-style:preserve-3d;transform:rotateY(-17deg) rotateX(8deg) rotateZ(8deg);transition:transform .6s ease;width:258px;animation:arrive 1.1s ease both}.device{background:#141a19;border:7px solid #253a34;border-right:12px solid #176f63;outline:1px solid #788b80;border-radius:45px;padding:2px;box-shadow:20px 35px 55px #173c3430;overflow:hidden;line-height:0}.device img{width:100%;height:auto;border-radius:33px}.floating-bubble{position:absolute;left:-155px;top:185px;white-space:nowrap;padding:19px 24px;border-radius:16px;background:white;box-shadow:0 18px 45px #004f431c;font-size:16px;transform:translateZ(75px) rotateZ(-8deg);border:1px solid #e8f3ee}.floating-bubble s{color:#815598}.floating-bubble strong{color:#007044}.check{background:var(--lime);border-radius:50%;display:inline-grid;place-items:center;margin-left:14px;width:25px;height:25px}.floating-tag{position:absolute;right:-100px;bottom:87px;background:var(--ink);color:white;border-radius:13px;padding:16px 20px;font-size:14px;transform:translateZ(100px) rotateZ(-8deg);box-shadow:0 20px 40px #004f4325;white-space:nowrap}.floating-tag>span{color:var(--lime);margin-right:8px}.floating-tag em{color:var(--lime)}.stage-label{position:absolute;top:15px;right:5px;font-size:10px;letter-spacing:.18em;color:#739181;writing-mode:vertical-rl}.stage-footer{position:absolute;bottom:-2px;left:0;right:0;display:flex;justify-content:center;gap:24px;font-size:10px;letter-spacing:.09em;color:#587168}.benefit-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:center;gap:8%;padding:24px 4%;font-size:14px;font-weight:500}.benefit-strip span:before{content:'✦';margin-right:13px;color:var(--teal)}.section{max-width:1280px;margin:auto;padding:115px 5%}.section-heading h2,h2{font-size:clamp(36px,4vw,56px)}.section-heading>p:last-child{margin-top:25px;color:#66776e;max-width:450px}.example-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:65px;margin-top:48px;align-items:center}.example-tabs{display:flex;flex-direction:column}.example-tabs button{text-align:left;display:flex;align-items:center;gap:22px;background:transparent;border:0;border-bottom:1px solid var(--line);padding:25px 5px;color:#63756e;line-height:1.4}.example-tabs button[aria-selected=true]{color:var(--ink)}.tab-number{font-size:13px;opacity:.65}.example-tabs button>span:nth-child(2){font-size:19px;font-weight:600}.example-tabs small{display:block;font-size:14px;font-weight:400;margin-top:8px;color:#64746e}.tab-plus{margin-left:auto;font-size:25px;transition:transform .2s}.example-tabs button[aria-selected=true] .tab-plus{transform:rotate(45deg)}.example-panel{background:white;border:1px solid #d7e9df;border-radius:24px;padding:32px;box-shadow:0 16px 60px #183c2c07}.example-label{font-size:11px;letter-spacing:.12em;color:#65786d}.before,.after{padding:24px 0;border-bottom:1px solid #e8ede7}.before>span,.after>span,.why>span{font-size:10px;letter-spacing:.12em;font-weight:700;color:#75867b}.before p,.after p{font-size:23px;line-height:1.5;margin-top:9px;letter-spacing:-.5px}.before p{color:#728078}.after strong{color:#007044;background:#def7b6;padding:1px 2px;border-radius:4px}.why{padding-top:24px}.why p{font-size:14px;margin-top:8px;color:#526c5e}.example-note{font-size:11px;margin-top:25px;color:#839086}.journey{display:grid;grid-template-columns:1fr 1.1fr;gap:100px;border-top:1px solid var(--line);align-items:center}.journey-title>p:last-child{max-width:390px;color:#61766c;margin-top:25px;font-size:17px}.conversation{background:#e9f7f2;border-radius:30px;padding:34px;position:relative}.conversation-label{font-size:10px;letter-spacing:.14em;color:#5e7667}.chat-user{margin:25px 0 20px auto;max-width:max-content;border-radius:18px 18px 4px 18px;padding:17px 20px;background:var(--teal);color:white;font-size:16px}.chat-ai{background:white;padding:25px;border-radius:4px 18px 18px 18px}.chat-heading{font-size:10px;color:#7b20b9;letter-spacing:.12em;font-weight:700}.chat-ai p{font-size:19px;margin:10px 0;line-height:1.5}.chat-ai strong{color:#007044}.chat-divider{height:1px;background:#e5ece7;margin:22px 0}.chat-heading.green{color:#00805d}.chat-ai small{font-size:13px;color:#7f8b82}.reply{margin-bottom:8px}.conversation-note{font-size:11px;color:#6b8174;text-align:center;margin-top:25px}.centered{text-align:center}.centered .eyebrow{justify-content:center}.mode-grid{margin-top:50px;display:grid;grid-template-columns:1fr 1fr;gap:24px}.mode-card{padding:44px;border-radius:27px;display:flex;flex-direction:column}.offline{background:#e8f9ec}.premium{background:#381066;color:white}.mode-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:45px}.mode-icon{font-size:28px}.premium .mode-icon{color:var(--lime)}.mode-badge{font-size:11px;letter-spacing:.12em;border:1px solid #a1b19a;padding:6px 11px;border-radius:50px}.premium .mode-badge{border-color:#5b796b;color:#d0e1d3}.mode-card h3{font-size:43px;line-height:1.15}.mode-card>p{font-size:16px;margin-top:23px;color:#5e7164;max-width:380px}.premium>p{color:#b2c7bc}.mode-card ul{list-style:none;padding:0;margin:30px 0 35px;font-size:14px}.mode-card li{padding:9px 0 9px 25px;position:relative}.mode-card li:before{content:'✓';position:absolute;left:0}.premium li:before{color:var(--lime)}.mode-card .button{margin-top:auto;align-self:flex-start}.modes-note{text-align:center;font-size:12px;color:#748177;margin-top:24px}.film-section{background:#004f43;color:white;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;padding:65px max(6%,calc((100vw - 1160px)/2));gap:80px;overflow:hidden}.film-section em{color:var(--lime)}.film-section .eyebrow{color:#a8c6b1}.film-section .button{margin-top:35px}.film-preview{height:460px;position:relative;display:flex;justify-content:center;perspective:800px}.film-preview img{height:550px;width:auto;border:6px solid #445c50;border-radius:35px;transform:rotateY(-15deg) rotateZ(8deg);box-shadow:20px 20px 60px #0004}.film-play{position:absolute;top:180px;left:50%;transform:translateX(-50%);width:78px;height:78px;border:0;background:var(--lime);color:var(--ink);border-radius:50%;font-size:25px;box-shadow:0 0 0 15px #b3fa7322}.faq{display:grid;grid-template-columns:1fr 1.2fr;gap:80px}.faq details{border-bottom:1px solid var(--line);padding:21px 0}.faq summary{cursor:pointer;font-size:17px;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:20px}.faq summary:after{content:'+';font-size:22px;line-height:1}.faq details[open] summary:after{content:'−'}.faq details p{font-size:15px;color:#64756b;padding-top:15px}.closing{text-align:center;background:#e5f7ed;margin:0 3% 40px;border-radius:30px;padding:80px 20px}.closing .eyebrow{justify-content:center}.closing h2{font-size:clamp(43px,5vw,68px)}.closing .button{margin-top:32px;background:var(--ink);color:var(--lime)}.closing>p:last-child{font-size:13px;color:#667766;margin-top:20px}footer{max-width:1440px;padding:20px 5% 40px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:25px}footer>span,footer>a:last-child{font-size:12px;color:#6b7c72}dialog{padding:0;background:#0b1917;border:1px solid #40534c;border-radius:20px;max-width:95vw;max-height:94vh;overflow:visible}dialog::backdrop{background:#061611df;backdrop-filter:blur(8px)}dialog video{display:block;max-height:88vh;max-width:88vw;border-radius:18px} .close-video{position:absolute;right:-14px;top:-14px;width:38px;height:38px;border:1px solid #b5c7ba;background:white;border-radius:50%;font-size:25px;line-height:1;z-index:2}@keyframes arrive{from{opacity:0;translate:0 35px}to{opacity:1;translate:0 0}}
@media(min-width:1500px){.hero{min-height:790px}.stage{min-height:670px}}@media(max-width:1050px){.nav nav{gap:18px}.hero{grid-template-columns:1.1fr 1fr}.hero .actions{align-items:flex-start;flex-direction:column;gap:18px}.phone-rig{width:220px}.floating-bubble{left:-90px;font-size:13px;padding:15px}.floating-tag{right:-50px}.stage{min-height:580px}.orbit{width:360px;height:360px}.orbit-two{width:450px;height:450px}.stage-footer{gap:12px;font-size:8px}.example-layout,.journey,.faq{gap:40px}.mode-card{padding:32px}.film-section{gap:35px}}@media(max-width:760px){.nav{height:82px;padding:0 6%}.nav nav{display:none}.nav .small{font-size:12px;padding:12px 15px}.brand{font-size:17px}.mark{width:32px;height:32px;font-size:21px}.hero{grid-template-columns:1fr;padding:35px 7% 40px;gap:10px;text-align:left}.hero h1{font-size:clamp(43px,8.4vw,64px)}.eyebrow{font-size:10px}.intro{font-size:16px;margin-top:22px}.hero .actions{flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap}.button{font-size:14px;padding:15px 21px}.text-button{font-size:13px}.hero-note{font-size:11px;max-width:320px}.stage{min-height:550px;margin-top:20px}.phone-rig{width:220px;transform:rotateY(-14deg) rotateX(6deg) rotateZ(7deg)}.floating-bubble{left:-55px;top:170px;padding:15px;font-size:12px}.floating-tag{right:-32px;bottom:65px;font-size:12px}.stage-label{right:0;top:40px;font-size:8px}.orbit{bottom:20px;width:340px;height:340px}.orbit-two{width:440px;height:440px;bottom:-25px}.benefit-strip{flex-direction:column;gap:15px;padding:24px 7%;font-size:13px}.section{padding:75px 7%}.section-heading h2,h2{font-size:39px}.section-heading>p:last-child{font-size:15px}.example-layout,.journey,.faq{grid-template-columns:1fr;gap:35px}.example-layout{margin-top:25px}.example-tabs button{padding:20px 0;gap:17px}.example-tabs button>span:nth-child(2){font-size:16px}.example-tabs small{font-size:13px}.example-panel{padding:25px}.before p,.after p{font-size:20px}.journey-title>p:last-child{font-size:16px}.conversation{padding:23px}.chat-user{font-size:14px}.chat-ai{padding:20px}.chat-ai p{font-size:17px}.mode-grid{grid-template-columns:1fr;margin-top:30px}.mode-card{padding:30px}.mode-card h3{font-size:38px}.mode-top{margin-bottom:30px}.mode-card>p{font-size:15px}.modes-note{font-size:11px}.film-section{padding:65px 7% 0;grid-template-columns:1fr;gap:45px}.film-preview{height:360px}.film-preview img{height:450px}.film-play{top:140px}.faq{gap:25px}.faq summary{font-size:16px}.closing{margin:0 4% 25px;padding:65px 20px}.closing h2{font-size:43px}footer{padding:20px 7% 35px;flex-wrap:wrap;gap:18px}footer>span{display:none}footer>a:last-child{font-size:11px}dialog video{max-height:82vh}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Compact editorial layout and direct-manipulation phone preview. */
.hero{min-height:660px;padding-top:15px;padding-bottom:25px}.intro{max-width:440px}.stage{min-height:585px}.section{padding-top:72px;padding-bottom:72px}.examples{display:grid;grid-template-columns:1fr 1.1fr;gap:20px 55px;align-items:start;border-top:1px solid var(--line)}.examples .section-heading{grid-column:1;grid-row:1}.examples .section-heading .eyebrow{margin-bottom:17px}.examples .section-heading>p:last-child{margin-top:18px}.example-layout{display:contents}.example-tabs{grid-column:1;grid-row:2}.example-panel{grid-column:2;grid-row:1 / span 2;align-self:center}.example-tabs button{padding:19px 0}.modes{border-top:1px solid var(--line)}.mode-grid{margin-top:35px}.mode-top{margin-bottom:25px}.mode-card{padding:34px}.mode-card ul{margin:20px 0 27px}.faq{gap:55px;padding-top:50px;padding-bottom:55px}.compact-closing{padding:48px 20px;margin-bottom:22px}.compact-closing h2{font-size:48px}.compact-closing .eyebrow{margin-bottom:17px}.phone-rig{cursor:grab;touch-action:none;user-select:none;transition:transform .45s ease;animation:phone-entrance 1.5s cubic-bezier(.2,.7,.2,1) both;transform:rotateY(-28deg) rotateX(10deg) rotateZ(5deg)}.phone-rig.controlled{animation:none}.phone-rig.dragging{cursor:grabbing;transition:none}.phone-rig .device{backface-visibility:hidden;transform:translateZ(10px)}.phone-back{position:absolute;inset:0;border:7px solid #176f63;border-radius:45px;background:linear-gradient(140deg,#007c6e,#004c43 60%,#08796b);transform:translateZ(-10px) rotateY(180deg);backface-visibility:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;color:#c5d9ce;font-size:18px;box-shadow:20px 35px 55px #173c3430}.phone-back .mark{width:56px;height:56px;font-size:34px}.floating-bubble,.floating-tag{backface-visibility:hidden;pointer-events:none;animation:label-entrance .8s cubic-bezier(.2,.7,.2,1) both}.floating-bubble{animation-delay:.65s}.floating-tag{animation-delay:1s}.rotation-controls{position:absolute;bottom:-5px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:13px;font-size:12px;color:#516c5e}.rotation-controls button{font-size:12px;border:1px solid #bacabd;border-radius:20px;background:transparent;padding:5px 11px;color:var(--ink)}/* Animate only transforms: opacity on this 3D parent flattens the phone and labels. */
@keyframes phone-entrance{from{transform:translateY(60px) rotateY(-70deg) rotateX(15deg) rotateZ(12deg)}to{transform:translateY(0) rotateY(-28deg) rotateX(10deg) rotateZ(5deg)}}@keyframes label-entrance{from{opacity:0;translate:0 25px;scale:.9}to{opacity:1;translate:0 0;scale:1}}@media(max-width:760px){.hero{min-height:0;padding-top:24px}.stage{min-height:525px}.section{padding-top:45px;padding-bottom:45px}.examples{display:block}.example-layout{display:flex;flex-direction:column;gap:24px;margin-top:15px;align-items:stretch}.example-tabs{width:100%}.example-panel{width:100%}.section-heading h2,h2{font-size:35px}.mode-card{padding:27px}.compact-closing{padding:40px 20px}.compact-closing h2{font-size:38px}.rotation-controls{font-size:10px;gap:9px}.rotation-controls button{font-size:11px}.faq{gap:18px}.phone-back{border-radius:40px}}@media(prefers-reduced-motion:reduce){.phone-rig,.floating-bubble,.floating-tag{animation:none!important;transition:none!important}}

/* Solid 40px phone chassis and rotation guidance outside its footprint. */
.phone-depth{position:absolute;inset:0;border-radius:45px;background:#006659;border:1px solid #4e998b;transform:translateZ(var(--depth));pointer-events:none;backface-visibility:visible}
.phone-rig .device{transform:translateZ(20px);border:7px solid #003c34;border-right:7px solid #003c34;outline:1px solid #65ab95;box-shadow:none}
.phone-back{transform:translateZ(-20px) rotateY(180deg);box-shadow:none}
.stage{min-height:0;grid-template-rows:auto auto;gap:0;padding:28px 0 0;overflow:visible}
.phone-rig{grid-row:1;margin-top:12px}
.rotation-controls{position:relative;grid-row:2;bottom:auto;left:auto;right:auto;z-index:5;margin-top:65px;padding:13px 17px;background:#f6faf9;border:1px solid #cde4d8;border-radius:16px;gap:20px;max-width:100%;color:#244337}
#rotate-hint{display:flex;flex-direction:column;gap:2px;line-height:1.5}#rotate-hint strong{font-size:14px;font-weight:600}#rotate-hint>span{font-size:12px;color:#576e60}
.rotation-controls button{font-size:14px;background:white;padding:9px 14px;white-space:nowrap;border-color:#95b9a5}
.stage .orbit{bottom:85px}.stage .orbit-two{bottom:40px}
@media(max-width:1050px){.rotation-controls{gap:10px;padding:12px}#rotate-hint strong{font-size:13px}#rotate-hint>span{font-size:11px}.rotation-controls button{font-size:12px}}
@media(max-width:760px){.stage{min-height:0;padding:24px 0 0;margin-top:20px}.phone-rig{margin-top:0}.rotation-controls{margin-top:62px;gap:12px;padding:12px;width:100%;justify-content:space-between}.phone-depth{border-radius:40px}#rotate-hint strong{font-size:14px}#rotate-hint>span{font-size:12px}.rotation-controls button{font-size:13px;padding:10px}.hero{padding-bottom:28px}}

/* Emerald, teal, lime and violet sampled from the app identity. */
.brand-icon{display:block;object-fit:contain;width:42px;height:42px;flex:none}.phone-back .brand-icon{width:100px;height:100px}.stage{background:radial-gradient(ellipse at 75% 26%,#a12bee12,transparent 50%),radial-gradient(ellipse at 35% 62%,#29cd7830,transparent 64%)}
.hero h1 em{color:#007f70}.hero .lime{background:linear-gradient(115deg,#b3fa73,#91ed72)}.premium{background:linear-gradient(135deg,#41206e,#39096a 75%,#610da0)}.premium>p{color:#e0c9f2}.premium .mode-badge{border-color:#9568b5;color:#efddff}.premium .outline{border-color:#a77cc1}.premium .mode-icon,.premium li:before{color:#b3fa73}.offline{background:linear-gradient(135deg,#e3f9ec,#e5f7d5)}.closing{background:linear-gradient(120deg,#e2f8e9,#d9f2ed 60%,#efe3fa)}.example-tabs button[aria-selected=true] .tab-number{color:#8217be;opacity:1}.example-tabs button[aria-selected=true] .tab-plus{color:#8217be}.example-panel{border-color:#d5e9dd}.why>span{color:#7b1fba}.after strong{background:#dcf8b8}.check{background:#b3fa73;color:#004f43}.floating-tag{background:#004f43}.floating-tag em,.floating-tag>span{color:#b3fa73}.orbit{border-color:#58ba9450}.orbit-two{border-color:#9b39da35}
.floating-conversation{position:absolute;top:65px;right:-102px;display:flex;align-items:center;gap:10px;padding:15px 18px;border-radius:15px;background:linear-gradient(120deg,#7710c8,#991cea);color:white;box-shadow:0 16px 36px #600ca325;font-size:13px;line-height:1.45;transform:translateZ(90px) rotateZ(-5deg);backface-visibility:hidden;pointer-events:none;animation:label-entrance .8s cubic-bezier(.2,.7,.2,1) 1.25s both,conversation-float 4s ease-in-out 2.1s infinite}
.floating-conversation svg{width:25px;height:25px;flex:none;color:#d7ffba}.floating-conversation strong{font-weight:600}.phone-back{background:linear-gradient(140deg,#008575,#004f43 60%,#41206e)}
@keyframes conversation-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media(max-width:1050px){.floating-conversation{right:-42px;top:62px;font-size:12px;padding:12px;gap:8px}.floating-conversation svg{width:22px;height:22px}}
@media(max-width:760px){.brand-icon{width:34px;height:34px}.floating-conversation{right:-25px;top:70px;font-size:12px;padding:12px}.phone-back .brand-icon{width:80px;height:80px}}
@media(prefers-reduced-motion:reduce){.floating-conversation{animation:none!important}}
.stage-label{display:none}

/* Clear trial and recurring price, grouped above the Premium action. */
.premium-offer{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 20px;line-height:1.4}.premium-offer strong{font-size:28px;color:var(--lime);letter-spacing:-.6px}.premium-offer span{font-size:17px;color:#fff}.premium .button{margin-top:0}.premium .subscription-terms{font-size:12px;line-height:1.65;color:#e0c9f2;margin:16px 0 0;max-width:380px}

/* Shared rows keep plan content and actions aligned at every desktop width. */
.mode-grid{column-gap:24px;row-gap:0}
.mode-card{display:grid;grid-row:span 7;grid-template-rows:subgrid;align-content:start;min-width:0}
.mode-card .mode-top{margin:0 0 25px;min-height:38px}
.mode-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:38px;line-height:1}
.mode-icon svg{width:30px;height:30px}
.mode-card h3{font-size:clamp(30px,3.3vw,43px)}
.mode-card>p:not(.subscription-terms){margin:20px 0 0}
.mode-card ul{margin:20px 0 27px}
.plan-offer{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 20px;line-height:1.4}
.plan-offer strong{font-size:28px;letter-spacing:-.6px}.plan-offer span{font-size:16px}
.free-offer span{color:#365c4c}
.mode-card .button{margin:0;align-self:start;justify-self:start;min-height:56px}
.mode-card .subscription-terms{margin:16px 0 0}
@media(max-width:760px){.mode-grid{row-gap:20px}.mode-card{display:flex;grid-row:auto;gap:0}.mode-card h3{font-size:38px}.mode-card .button{align-self:flex-start}.mode-card .plan-offer{margin-bottom:20px}}

/* Labels share the screen's plane without independent roll angles. */
.floating-bubble{transform:translateZ(75px)}
.floating-tag{transform:translateZ(100px)}
.floating-conversation{transform:translateZ(90px)}
@media(max-width:760px){
 .example-tabs .example-panel{margin:12px 0 16px;align-self:stretch;flex:none}
 .example-tabs button[aria-expanded=true]{color:var(--ink)}
 .example-tabs button[aria-expanded=true] .tab-number,.example-tabs button[aria-expanded=true] .tab-plus{color:#8217be;opacity:1}
 .example-tabs button[aria-expanded=true] .tab-plus{transform:rotate(45deg)}
 .example-tabs button{scroll-margin-top:24px}
}

/* Anchor benefits to the corresponding screenshot cards at every phone size. */
.floating-bubble{top:40%;bottom:auto}
.floating-tag{top:56%;bottom:auto}
.floating-conversation{top:74%;bottom:auto}

/* Continue the section divider rhythm before the questions. */
.faq{border-top:1px solid var(--line)}

/* Match label proportions to the smaller 220px phone (desktop phone: 258px). */
@media(max-width:760px){
 .floating-bubble{font-size:13.6px;padding:16px 20px;border-radius:14px}
 .floating-bubble .check{width:21px;height:21px;margin-left:12px}
 .floating-tag{font-size:12px;padding:14px 17px;border-radius:11px}
 .floating-conversation{font-size:11px;line-height:1.45;padding:13px 15px;gap:9px;border-radius:13px}
 .floating-conversation svg{width:21px;height:21px}
}

/* Give the right-side labels a little more space from the phone on mobile. */
@media(max-width:760px){
 .floating-tag{right:-44px}
 .floating-conversation{right:-37px}
}

/* On small screens, finish the entrance in one motion. Switching the
   conversation label to its looping float caused a visible end stutter. */
@media(max-width:760px){
 .floating-conversation{animation:label-entrance .8s cubic-bezier(.2,.7,.2,1) 1.25s both}
}