@font-face{font-family:"Inter";src:url("/assets/fonts/inter-latin-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{--ink:#08110d;--ink-soft:#13231b;--surface:#0b1711;--surface-2:#101f17;--surface-3:#172820;--paper:#f1f0e8;--white:#fff;--muted:#9aa89f;--line:rgba(222,243,229,.13);--line-strong:rgba(222,243,229,.23);--mint:#a7f35b;--mint-bright:#c6ff73;--accent-text:#a7f35b;--green:#0a9f59;--green-dark:#04723d;--rose:#ff7d79;--display:Georgia,"Times New Roman",serif;--sans:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--shadow:0 32px 90px rgba(0,0,0,.28);--shell:min(1240px,calc(100% - 64px))}

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;color:var(--paper);background:var(--ink);font:16px/1.55 var(--sans);text-rendering:optimizeLegibility;overflow-x:hidden}body,button,a{-webkit-font-smoothing:antialiased}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit}::selection{color:#07110d;background:var(--mint)}
.skip-link{position:fixed;z-index:999;top:10px;left:10px;padding:10px 16px;color:#07110d;background:var(--mint-bright);border-radius:999px;transform:translateY(-150%);transition:transform .2s}.skip-link:focus{transform:none}.section-shell{width:var(--shell);margin-inline:auto}.page-glow{position:fixed;z-index:-1;width:48vw;aspect-ratio:1;border-radius:50%;filter:blur(140px);opacity:.12;pointer-events:none}.page-glow-one{top:4vh;right:-22vw;background:var(--mint)}.page-glow-two{top:160vh;left:-34vw;background:#249c6c}

.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:48px;padding:0 26px;border:1px solid var(--mint);border-radius:999px;color:#07110d;background:var(--mint);box-shadow:0 12px 32px rgba(167,243,91,.15);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:.25s}.button:hover{transform:translateY(-2px);background:var(--mint-bright);box-shadow:0 18px 38px rgba(167,243,91,.23)}.button span{font-size:16px;transition:transform .25s}.button:hover span{transform:translate(2px,-2px)}.button-small{min-height:40px;padding-inline:20px;font-size:11px}.button-large{min-height:58px;padding-inline:32px}.button-light{color:#07110d;background:#f7f7f0;border-color:#f7f7f0;box-shadow:none}.button-light:hover{background:#fff}.button-full{width:100%}.button-ghost{display:inline-flex;align-items:center;gap:11px;min-height:52px;padding:0;border:0;color:var(--paper);background:none;font-size:14px;font-weight:650;cursor:pointer}.button-ghost .play{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line-strong);border-radius:50%;font-size:11px;transition:.2s}.button-ghost:hover .play{color:#07110d;background:var(--mint);border-color:var(--accent-text);transform:scale(1.06)}.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 22px;color:var(--accent-text);font-size:11px;font-weight:780;letter-spacing:.16em;text-transform:uppercase}.eyebrow>span{width:24px;height:1px;background:currentColor}
.hero{display:grid;grid-template-columns:minmax(0,.93fr) minmax(480px,1.07fr);align-items:center;min-height:860px;padding-top:132px;padding-bottom:88px;gap:68px}.hero-copy{position:relative;z-index:2;max-width:610px}.hero h1,.section-intro h2,.life h2,.steps h2,.workspace h2,.pricing h2,.faq h2,.final-content h2{margin:0;font-family:var(--display);font-weight:400;letter-spacing:-.055em;line-height:.92}.hero h1{max-width:650px;font-size:clamp(64px,6.1vw,104px)}em{color:var(--accent-text);font-weight:400}.hero-lead{max-width:555px;margin:32px 0 34px;color:var(--muted);font-size:clamp(18px,1.5vw,21px);line-height:1.55}.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 28px}.hero-actions>*{flex:0 0 auto;white-space:nowrap}/* No rule above it. The border separated this strip from the paragraph when it was the last thing in the copy column; it now follows the photo, whose own edge does that, and a line floating under an image reads as a stray. The padding went with it -- it existed to hold the text off the rule. */.hero-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:58px}.hero-proof span{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;line-height:1.35}.hero-proof b{color:var(--accent-text);font-size:11px;letter-spacing:.1em}.hero-visual{position:relative;min-height:650px}.hero-photo{position:absolute;inset:0 0 0 58px;margin:0;overflow:hidden;border-radius:340px 340px 36px 36px;background:var(--surface-2);box-shadow:var(--shadow)}.hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(4,16,10,.58));pointer-events:none}.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:52% center;filter:saturate(.78) contrast(1.03)}.hero-photo figcaption,.life-photo figcaption,.workspace-photo figcaption{white-space:nowrap;position:absolute;z-index:3;right:18px;bottom:13px;color:rgba(255,255,255,.64);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.floating-card{position:absolute;z-index:4;border:1px solid rgba(255,255,255,.18);background:rgba(10,21,15,.8);box-shadow:0 22px 70px rgba(0,0,0,.34);backdrop-filter:blur(18px)}.floating-question{top:108px;left:0;display:flex;align-items:flex-start;gap:12px;max-width:280px;padding:18px 20px;border-radius:18px 18px 18px 4px}.floating-question p{margin:0;color:#fff;font-size:14px;line-height:1.45}.status-dot{flex:0 0 auto;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px rgba(167,243,91,.1)}.floating-answer{right:-38px;bottom:84px;display:grid;grid-template-columns:auto 1fr;align-items:center;min-width:330px;padding:18px;border-radius:22px}.mini-mark{display:grid;place-items:center;width:48px;height:48px;margin-right:14px;border-radius:15px;background:#fff}.mini-mark img{border-radius:9px}.floating-answer div:nth-child(2){display:grid}.floating-answer span,.floating-answer small{color:rgba(255,255,255,.63);font-size:11px}.floating-answer strong{color:#fff;font-size:24px;line-height:1.15}.sparkline{position:absolute;right:18px;bottom:20px;width:90px;fill:none;stroke:var(--accent-text);stroke-width:2}.hero-orbit{position:absolute;z-index:5;top:35px;right:-22px;display:grid;place-items:center;width:96px;height:96px;border:1px solid rgba(167,243,91,.5);border-radius:50%;color:#07110d;background:var(--mint);box-shadow:0 20px 44px rgba(8,20,12,.3);font-family:var(--display);font-size:24px}.hero-orbit:before,.hero-orbit:after,.hero-orbit i{content:"";position:absolute;border:1px solid rgba(167,243,91,.35);border-radius:50%}.hero-orbit:before{inset:-12px}.hero-orbit:after{inset:-24px;opacity:.4}.hero-orbit i{width:6px;height:6px;right:-9px;background:var(--mint)}
.client-ribbon{padding:27px max(32px,calc((100vw - 1240px)/2));border-block:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent)}.client-ribbon>p{margin:0 0 20px;color:var(--muted);font-size:11px;letter-spacing:.16em;text-align:center;text-transform:uppercase}.client-list{display:flex;align-items:center;justify-content:space-between;gap:30px}.client-list span{display:flex;align-items:center;gap:9px;color:color-mix(in srgb,var(--paper) 75%,transparent);font-size:14px;font-weight:700}.client-list b{display:grid;place-items:center;width:31px;height:31px;border:1px solid var(--line);border-radius:10px;color:var(--accent-text);font-size:18px}.client-list b img{display:block;width:18px;height:18px}
.clarity{padding-top:96px;padding-bottom:72px}/* The heading shares the panel's edges. It is a section intro for a 772px panel, and it was still laid out for a 1240px one -- so its left edge sat 175px outside the thing it introduces and its supporting paragraph sat off beyond the panel's right edge. Read together they looked like a heading for something else. Scoped to .clarity: the other two sections that use .section-intro still span the full width, because what they introduce does too. */.clarity .section-intro{width:min(100%,772px);margin-inline:auto;grid-template-columns:minmax(0,1fr);align-items:start;gap:16px;margin-bottom:34px}.section-intro{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);align-items:end;column-gap:56px;margin-bottom:54px}.section-intro .eyebrow{grid-column:1/-1}.section-intro h2,.life h2,.workspace h2,.pricing h2,.faq h2{font-size:clamp(52px,5.1vw,78px)}.section-intro>p:last-child{max-width:420px;margin:0 0 5px;color:var(--muted);font-size:16px}.stage-topbar{display:flex;align-items:center;gap:6px;height:64px;padding:0 22px;border-bottom:1px solid var(--line)}.stage-topbar>span{width:7px;height:7px;border-radius:50%;background:var(--line-strong)}.stage-topbar small{margin-left:14px;color:var(--muted)}.chat-day{margin-bottom:28px;color:var(--muted);font-size:11px;letter-spacing:.12em;text-align:center;text-transform:uppercase}.chat-bubble{max-width:520px;padding:18px 20px;border-radius:17px;font-size:14px}.chat-user{margin:0 0 20px auto;color:#07110d;background:var(--mint);border-bottom-right-radius:4px}.summary-note{display:flex;align-items:center;gap:10px;width:100%;margin-top:auto;padding:14px;border:1px solid var(--line);border-radius:13px;text-align:left}.summary-note>span{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:#07110d;background:var(--mint)}.summary-note p{margin:0;color:var(--muted);font-size:11px}.summary-note b{color:var(--paper)}
.kicker{margin:0 0 17px;color:var(--accent-text);font-size:11px;font-weight:760;letter-spacing:.14em;text-transform:uppercase}
.life{display:grid;grid-template-columns:1fr .9fr;align-items:center;gap:100px;padding-bottom:160px}.life-photo-wrap{position:relative}.life-photo{position:relative;height:720px;margin:0;overflow:hidden;border-radius:36px 36px 220px 36px;box-shadow:var(--shadow)}.life-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,15,10,.45))}.life-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.72)}.life-quote{position:absolute;right:-64px;bottom:54px;z-index:4;width:290px;padding:25px 27px;border:1px solid rgba(255,255,255,.22);border-radius:24px;color:#fff;background:rgba(7,17,13,.8);box-shadow:0 20px 55px rgba(0,0,0,.28);backdrop-filter:blur(20px)}.life-quote span{color:var(--accent-text);font-family:var(--display);font-size:50px;line-height:.5}.life-quote p{margin:8px 0 0;font-family:var(--display);font-size:23px;line-height:1.18}.life-copy{padding-left:10px}.life-lead{margin:29px 0 38px;color:var(--muted);font-size:17px}.life-points{display:grid;border-top:1px solid var(--line)}.life-points article{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}.life-points article>span{padding-top:4px;color:var(--accent-text);font-size:11px}.life-points h3{margin:0 0 5px;font-size:15px}.life-points p{margin:0;color:var(--muted);font-size:12px}.arrow-link{display:inline-flex;align-items:center;gap:15px;margin-top:32px;padding-bottom:5px;border-bottom:1px solid var(--line-strong);font-size:12px;font-weight:700}.arrow-link span{color:var(--accent-text);font-size:16px;transition:.2s}.arrow-link:hover span{transform:translate(2px,-2px)}
.steps{position:relative;overflow:hidden;padding:145px 0;color:#07110d;background:var(--mint)}.steps:before{content:"";position:absolute;inset:0;opacity:.2;background-image:linear-gradient(rgba(7,17,13,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(7,17,13,.12) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(circle,#000,transparent 78%)}.steps-inner{position:relative}.section-intro.centered{display:block;margin-bottom:70px;text-align:center}.section-intro.centered .eyebrow{justify-content:center;color:var(--green-dark)}.steps h2{font-size:clamp(54px,6vw,82px)}.steps h2 em{color:var(--green-dark)}.step-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(7,17,13,.2);border-radius:28px;background:rgba(255,255,255,.13)}.step-grid article{min-height:330px;padding:35px;border-right:1px solid rgba(7,17,13,.18)}.step-grid article:last-child{border:0}.step-icon{display:grid;place-items:center;width:58px;height:58px;margin-bottom:65px;border:1px solid rgba(7,17,13,.25);border-radius:18px;background:rgba(255,255,255,.3);font-size:23px}.step-grid article>span{color:var(--green-dark);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.step-grid h3{margin:12px 0 10px;font-family:var(--display);font-size:28px;font-weight:400;letter-spacing:-.035em}.step-grid p{margin:0;color:rgba(7,17,13,.66);font-size:13px}.steps-action{margin-top:45px;text-align:center}
.workspace{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center;gap:80px;padding-block:160px}.workspace-copy>p:not(.eyebrow){margin:28px 0;color:var(--muted)}.workspace-copy ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}.workspace-copy li{display:flex;align-items:center;gap:11px;color:color-mix(in srgb,var(--paper) 82%,transparent);font-size:12px}.workspace-copy li span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#07110d;background:var(--mint);font-size:11px}.workspace-photo{position:relative;height:600px;margin:0;overflow:hidden;border-radius:34px;box-shadow:var(--shadow)}.workspace-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.63) contrast(1.05)}.workspace-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(6,15,10,.4));pointer-events:none}.workspace-insight{position:absolute;z-index:3;left:30px;bottom:28px;display:grid;width:260px;padding:19px 21px;border:1px solid rgba(255,255,255,.22);border-radius:19px;color:#fff;background:rgba(7,17,13,.78);backdrop-filter:blur(20px)}.workspace-insight span,.workspace-insight small{color:rgba(255,255,255,.62);font-size:11px}.workspace-insight b{margin:4px 0;font-family:var(--display);font-size:25px;font-weight:400}
.privacy-band{border-block:1px solid var(--line);background:var(--surface)}.privacy-inner{display:grid;grid-template-columns:160px 1fr auto;align-items:center;gap:55px;min-height:320px}.privacy-mark{position:relative;display:grid;place-items:center;width:130px;height:130px;border:1px solid var(--line);border-radius:50%}.privacy-mark:before,.privacy-mark:after,.privacy-mark i{content:"";position:absolute;border:1px solid var(--line);border-radius:50%}.privacy-mark:before{inset:15px}.privacy-mark:after{inset:31px}.privacy-mark i:first-of-type{inset:-12px}.privacy-mark i:last-of-type{width:8px;height:8px;right:1px;border:0;background:var(--mint);box-shadow:0 0 20px var(--mint)}.privacy-mark span{color:var(--accent-text);font-size:32px}.privacy-copy .eyebrow{margin-bottom:14px}.privacy-copy h2{margin:0;font-family:var(--display);font-size:clamp(36px,3.6vw,51px);font-weight:400;letter-spacing:-.04em;line-height:1}.privacy-copy>p:last-child{max-width:700px;margin:17px 0 0;color:var(--muted);font-size:13px}.privacy-link{gap:13px;white-space:nowrap}
.pricing{padding-block:150px}.pricing-layout{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.pricing-note{margin:24px auto 0;max-width:640px;color:var(--muted);font-size:12px;text-align:center}.price-card{position:relative;overflow:hidden;padding:38px;border:1px solid var(--line);border-radius:30px}.price-free{background:var(--surface-2)}.price-pro{color:#07110d;background:var(--mint)}.price-glow{position:absolute;right:-100px;top:-100px;width:320px;height:320px;border:1px solid rgba(7,17,13,.12);border-radius:50%;box-shadow:0 0 0 45px rgba(255,255,255,.07),0 0 0 90px rgba(255,255,255,.04)}.price-top{position:relative;min-height:210px;border-bottom:1px solid var(--line)}.price-pro .price-top{border-color:rgba(7,17,13,.17)}.price-top>span{color:var(--muted);font-size:11px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.price-pro .price-top>span{color:var(--green-dark)}.price-top h3{margin:18px 0 24px;font-family:var(--display);font-size:clamp(40px,4.2vw,60px);font-weight:400;letter-spacing:-.055em;line-height:.9}.price-top p{display:flex;align-items:baseline;gap:10px;margin:0;color:var(--muted);font-size:11px}.price-pro .price-top p{color:rgba(7,17,13,.63)}.price-top strong{color:var(--paper);font-family:var(--display);font-size:26px;font-weight:400}.price-pro .price-top strong{color:#07110d}.price-card ul{display:grid;gap:13px;margin:27px 0 34px;padding:0;list-style:none}.price-card li{display:flex;align-items:center;gap:11px;font-size:12px}.price-card li:before{content:"✓";display:grid;place-items:center;width:21px;height:21px;border:1px solid var(--line);border-radius:50%;color:var(--accent-text);font-size:11px}.price-pro li:before{border-color:rgba(7,17,13,.2);color:#07110d}
.faq{display:grid;grid-template-columns:.65fr 1.35fr;gap:100px;padding-bottom:160px}.faq-heading{position:sticky;top:130px;align-self:start}.faq-heading>p:not(.eyebrow){max-width:390px;color:var(--muted)}.faq-list{border-top:1px solid var(--line)}.faq details{border-bottom:1px solid var(--line)}.faq summary{display:grid;grid-template-columns:45px 1fr 28px;align-items:center;min-height:90px;cursor:pointer;list-style:none;font-family:var(--display);font-size:22px;letter-spacing:-.025em}.faq summary::-webkit-details-marker{display:none}.faq summary span{color:var(--accent-text);font-family:var(--sans);font-size:11px;letter-spacing:.12em}.faq summary i{position:relative;width:26px;height:26px;border:1px solid var(--line);border-radius:50%}.faq summary i:before,.faq summary i:after{content:"";position:absolute;left:7px;right:7px;top:12px;height:1px;background:currentColor}.faq summary i:after{transform:rotate(90deg);transition:.2s}.faq details[open] summary i:after{transform:none}.faq details p{max-width:690px;margin:-8px 0 29px 45px;color:var(--muted);font-size:13px}
/* No min-height on either box. The photo is object-fit:contain now, so it shows its whole frame at whatever size fits and never needs the section to match its ratio; the section is as tall as its own copy plus the padding below. */
.final-cta{position:relative;overflow:hidden}.final-photo{position:absolute;inset:0;margin:0}.final-photo img{width:100%;height:100%;object-fit:contain;object-position:right;filter:saturate(.56) contrast(1.08)}.final-photo>div{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,12,7,.93),rgba(3,12,7,.82) 38%,rgba(3,12,7,.5) 56%,rgba(3,12,7,.12))}.final-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:var(--shell);padding-block:72px;margin:auto;color:#fff}.final-content>img{margin-bottom:25px;border-radius:16px}.final-content>p{margin:0 0 18px;color:rgba(255,255,255,.7);font-size:13px}.final-content h2{max-width:700px;font-size:clamp(38px,3.6vw,56px);text-shadow:0 2px 24px rgba(3,12,7,.55)}.final-content .button{margin-top:34px}.final-content>small{margin:15px 0 0 16px;color:rgba(255,255,255,.55);font-size:11px}

@media(max-width:1100px){:root{--shell:min(100% - 44px,920px)}.nav-shell{grid-template-columns:1fr auto}.hero{grid-template-columns:1fr 1fr;gap:40px;min-height:760px}.hero h1{font-size:clamp(55px,7vw,78px)}.hero-visual{min-height:560px}.hero-photo{left:25px}.floating-answer{right:-20px;min-width:285px}.hero-proof{grid-template-columns:1fr;gap:8px}.client-list{flex-wrap:wrap;justify-content:center}.life{gap:55px}.life-photo{height:640px}.life-quote{right:-20px}.workspace{gap:45px}.privacy-inner{grid-template-columns:110px 1fr;padding-block:52px}.privacy-mark{width:100px;height:100px}.privacy-link{grid-column:2;justify-self:start}.footer-top{gap:40px}}
@media(max-width:760px){:root{--shell:min(100% - 34px,620px)}body{font-size:15px}.site-header{padding:12px 0}.hd-actions{gap:8px}.hd-actions .text-link,.hd-actions>.button{display:none}.hero{display:block;min-height:0;padding-top:56px;padding-bottom:62px}.hero h1{font-size:clamp(54px,16vw,76px)}.hero-lead{margin-top:24px;font-size:17px}.hero-actions{align-items:center;flex-direction:row;flex-wrap:wrap;gap:12px 16px}.hero-proof{grid-template-columns:repeat(3,1fr);margin-top:37px;gap:8px}.hero-proof span{align-items:flex-start;flex-direction:column;gap:3px;font-size:11px}.hero-visual{min-height:520px;margin-top:45px}.hero-photo{inset:0 0 0 18px;border-radius:200px 200px 26px 26px}.hero-orbit{top:0;right:-4px;width:70px;height:70px;font-size:17px}.floating-question{top:95px;left:-5px;max-width:215px;padding:14px}.floating-question p{font-size:11px}.floating-answer{right:-8px;bottom:34px;min-width:265px;padding:14px}.sparkline{width:70px}.client-ribbon{padding-inline:20px}.client-list{gap:13px 19px}.client-list span{font-size:11px}.client-list b{width:27px;height:27px}.client-list b img{width:15px;height:15px}.clarity{padding-top:95px}.section-intro{display:block;margin-bottom:38px}.section-intro h2,.life h2,.workspace h2,.pricing h2,.faq h2{font-size:clamp(46px,14vw,62px)}.section-intro>p:last-child{margin-top:24px}.stage-topbar{height:47px}.chat-bubble{padding:15px;font-size:12px}.summary-note{grid-column:1/-1;margin-top:18px}.life{display:flex;flex-direction:column-reverse;align-items:stretch;gap:58px;padding-bottom:105px}.life-photo{height:540px;border-radius:28px 28px 150px 28px}.life-quote{right:-5px;bottom:30px;width:240px}.life-copy{padding:0}.steps{padding-block:100px}.step-grid{grid-template-columns:1fr}.step-grid article{min-height:265px;border-right:0;border-bottom:1px solid rgba(7,17,13,.18)}.step-icon{margin-bottom:40px}.workspace{display:flex;flex-direction:column;align-items:stretch;gap:45px;padding-block:105px}.workspace-photo{width:100%;height:470px}.privacy-inner{grid-template-columns:1fr;gap:28px;padding-block:75px}.privacy-mark{width:92px;height:92px}.privacy-link{grid-column:auto}.pricing{padding-block:105px}.pricing-layout{grid-template-columns:1fr}.price-card{padding:28px}.faq{display:block;padding-bottom:105px}.faq-heading{position:static;margin-bottom:55px}.faq summary{grid-template-columns:35px 1fr 28px;min-height:80px;font-size:18px}.faq details p{margin-left:35px}.final-cta,.final-content{min-height:650px}.final-photo img{object-fit:cover;object-position:65% center}.final-photo>div{background:linear-gradient(90deg,rgba(3,12,7,.9),rgba(3,12,7,.48))}.final-content h2{font-size:clamp(34px,9.4vw,50px)}.footer-top{grid-template-columns:1fr 1fr;gap:48px 30px;padding-block:70px 50px}.footer-top .ft-brand{grid-column:1/-1}.footer-bottom{align-items:flex-start;flex-direction:column;gap:15px}}
@media(max-width:410px){:root{--shell:calc(100% - 24px)}.hd-brand b{font-size:14px}.hero h1{font-size:51px}.floating-answer{left:24px;right:-2px;min-width:0}.hero-proof{gap:4px}.footer-top{grid-template-columns:1fr}.footer-top .ft-brand{grid-column:auto}}
@media(max-width:760px){.section-shell,.nav-shell,.mobile-nav,.final-content{width:calc(100% - 34px);max-width:620px}.nav-shell{grid-template-columns:minmax(0,1fr) auto}.hero-copy{min-width:0;overflow:hidden}.hero-lead{max-width:100%}}
@media(max-width:760px){.nav-shell{position:relative}.hd-actions{position:absolute;right:0}.hero-copy{overflow:visible}.hero-lead{width:100%;padding-right:8px}}
@media(max-width:410px){.hero h1{font-size:39px;line-height:.96}.hero-lead{font-size:16px}}
.hero{position:relative}.hero-assurance{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:17px 0 0;color:var(--muted);font-size:12px;font-weight:600}.hero-assurance>span{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;color:#07110d;background:var(--mint);font-size:10px;font-weight:800}.hero-assurance i{color:var(--accent-text);font-style:normal}.hero-scroll{white-space:nowrap;position:absolute;z-index:7;left:0;bottom:33px;display:flex;align-items:center;gap:12px;color:var(--muted);font-size:11px;font-weight:750;letter-spacing:.14em;text-transform:uppercase}.hero-scroll i{display:grid;place-items:center;width:29px;height:29px;border:1px solid var(--line-strong);border-radius:50%;color:var(--accent-text);font-size:13px;font-style:normal;transition:.25s}.hero-scroll:hover{color:var(--paper)}.hero-scroll:hover i{color:#07110d;background:var(--mint);border-color:var(--accent-text);transform:translateY(3px)}

/* Full product view: preserve the dashboard screenshot's complete portrait composition. */
/* Space below as well as above. This panel has its own border and background, and the ribbon that follows opens with a border of its own -- flush against each other the two edges read as one doubled line rather than as the end of one section and the start of the next. On .product-glimpse rather than on .client-ribbon because the ribbon also follows the hero on money-copilot-ai.html, where there is no panel edge to clear. */.product-glimpse{display:grid;grid-template-columns:minmax(0,.82fr) minmax(400px,1.18fr);align-items:center;gap:clamp(42px,7vw,105px);margin-top:12px;margin-bottom:clamp(48px,5vw,76px);padding:clamp(48px,7vw,94px);overflow:hidden;border:1px solid var(--line);border-radius:34px;background:linear-gradient(135deg,rgba(20,48,32,.62),rgba(7,17,13,.44));box-shadow:0 34px 100px rgba(0,0,0,.18)}.product-glimpse-copy{max-width:460px}.product-glimpse h2{margin:18px 0 21px;font-family:var(--display);font-size:clamp(47px,4.6vw,70px);font-weight:400;letter-spacing:-.055em;line-height:.91}.product-glimpse-copy>p:not(.eyebrow){margin:0 0 28px;color:var(--muted);font-size:15px;line-height:1.7}.product-glimpse-screen{justify-self:end;width:min(118%,744px);margin:0 calc(clamp(48px,7vw,94px)*-1) 0 0;padding:0;border:0;background:none;box-shadow:none;transform:none}.product-glimpse-screen img{display:block;width:100%;height:auto;border-radius:26px 0 0 26px;background:#f7fbf8;box-shadow:-24px 30px 78px rgba(0,0,0,.34)}@media(max-width:900px){.product-glimpse{grid-template-columns:1fr;gap:42px;margin-top:0}.product-glimpse-copy{max-width:600px}.product-glimpse-screen{justify-self:center;width:min(100%,696px);margin:0;transform:none}.product-glimpse-screen img{border-radius:22px;box-shadow:0 26px 60px rgba(0,0,0,.3)}}@media(max-width:600px){.product-glimpse{width:calc(100% - 34px);padding:31px 20px;border-radius:24px}.product-glimpse h2{font-size:clamp(43px,13vw,58px)}.product-glimpse-screen img{border-radius:16px}.product-glimpse-screen img{border-radius:14px}}
.product-glimpse{scroll-margin-top:94px}@media(min-width:1101px){.hero{min-height:790px;padding-top:116px;padding-bottom:76px}/* The proof row and the scroll cue sit under the image rather than under the copy. Both are placed into the image row and pinned to its bottom edge, rather than left to auto placement: as a plain third grid child the proof row opened a second row and made the hero 64px taller, with the scroll cue ending up above it. Stacked by margin, the scroll cue keeping the last 33px. *//* 70px, not 52: the row is anchored to the bottom of its grid row, so dropping the rule and its 18px of padding made the box shorter and pushed the text down rather than leaving it where it was. This puts it back, and leaves it sitting about evenly between the photo above and the cue below. */.hero-proof{grid-column:2;grid-row:1;align-self:end;margin:0 0 70px}.hero-scroll{grid-column:2;grid-row:1;align-self:end;position:static;margin:0}/* The photo sits higher than the grid would centre it. Asked for directly: the copy column is taller, so centring both left an obvious band of empty hero above the image. A transform rather than a margin, so the floating cards positioned inside .hero-visual travel with it and the row height does not change. Desktop only -- below 1101px the two stack and there is nothing to align against. */.hero-visual{transform:translateY(-38px)}.product-glimpse{padding-block:clamp(52px,5vw,72px);gap:clamp(42px,5vw,76px)}}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--mint-bright);outline-offset:4px}a:focus-visible{border-radius:5px}@media(max-width:760px){.hero-assurance{margin-top:15px;font-size:11px}.hero-assurance i{display:none}.hero-assurance{gap:6px 10px}.hero-proof{margin-top:27px}}
.client-viewport{overflow:hidden;max-width:1240px;margin-inline:auto;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}.client-track{display:flex;width:max-content;animation:clientMarquee 28s linear infinite}.client-list{flex:none;width:1240px;padding-inline:34px}.client-ribbon>small{display:block;margin-top:17px;color:color-mix(in srgb,var(--muted) 66%,transparent);font-size:11px;letter-spacing:.06em;text-align:center}.client-ribbon:hover .client-track,.client-ribbon:focus-within .client-track{animation-play-state:paused}

.hero-copy>*{opacity:0;transform:translateY(18px)}body.is-ready .hero-copy>*{animation:fadeRise .72s cubic-bezier(.2,.75,.2,1) forwards}body.is-ready .hero-copy>:nth-child(2){animation-delay:.08s}body.is-ready .hero-copy>:nth-child(3){animation-delay:.15s}body.is-ready .hero-copy>:nth-child(4){animation-delay:.22s}body.is-ready .hero-copy>:nth-child(5){animation-delay:.29s}.floating-question{animation:floatQuestion 6.5s ease-in-out infinite}.floating-answer{animation:floatAnswer 7.5s ease-in-out -1.2s infinite}.hero-orbit:before{animation:orbitSpin 16s linear infinite}.hero-orbit:after{animation:orbitSpin 24s linear infinite reverse}.hero-photo img{animation:imageBreathe 14s ease-in-out infinite alternate}
.mobile-conversion{display:none}
@keyframes fadeRise{to{opacity:1;transform:none}}@keyframes floatQuestion{0%,100%{transform:translate3d(0,0,0) rotate(-.25deg)}50%{transform:translate3d(0,-9px,0) rotate(.25deg)}}@keyframes floatAnswer{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-4px,-10px,0)}}@keyframes orbitSpin{to{transform:rotate(360deg)}}@keyframes imageBreathe{from{transform:scale(1.001)}to{transform:scale(1.035)}}@keyframes clientMarquee{to{transform:translateX(-50%)}}
@media(max-width:1100px){.client-list{width:900px}.client-track{animation-duration:24s}}
@media(max-width:760px){.hero-scroll{display:none}.client-ribbon{padding-block:23px}.client-ribbon>p{margin-bottom:15px}.client-list{width:700px;padding-inline:22px;gap:25px;flex-wrap:nowrap;justify-content:space-around}.client-ribbon>small{font-size:11px}.mobile-conversion{position:fixed;z-index:88;left:12px;right:12px;bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:13px;padding:10px 11px 10px 16px;border:1px solid var(--line-strong);border-radius:18px;color:#eef6ee;background:rgba(5,16,10,.88);box-shadow:0 20px 55px rgba(0,0,0,.34);backdrop-filter:blur(22px);opacity:0;visibility:hidden;transform:translateY(22px);transition:.3s}.mobile-conversion.is-visible{opacity:1;visibility:visible;transform:none}.mobile-conversion>span{display:grid;line-height:1.2}.mobile-conversion b{font-size:11px}.mobile-conversion small{margin-top:4px;color:rgba(238,246,238,.58);font-size:11px}.mobile-conversion>a{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;border-radius:999px;color:#07110d;background:var(--mint);font-size:11px;font-weight:780;white-space:nowrap}.mobile-conversion i{font-size:13px;font-style:normal}.back-to-top{bottom:82px}}

.life-photo img,.workspace-photo img{height:calc(100% + 36px);transform:translateY(var(--parallax-y,0));transition:transform .16s linear,filter .5s}
@media(max-width:1100px){.client-list{flex-wrap:nowrap}}
.hero-visual{min-height:560px;margin-right:calc(-1 * clamp(0px,(100vw - 1240px)/2 - 24px,320px))}.hero-photo{inset:auto 0;top:50%;height:auto;aspect-ratio:1522/850;transform:translateY(-50%);border:1px solid rgba(167,243,91,.22);border-radius:34px;background:var(--surface);box-shadow:0 34px 100px rgba(0,0,0,.32)}.hero-photo:after{display:none}.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center;filter:none;animation:none}.hero-photo figcaption{right:14px;bottom:12px;padding:6px 9px;border:1px solid rgba(5,112,61,.13);border-radius:999px;color:#075f36;background:rgba(244,255,251,.88);backdrop-filter:blur(10px)}

.life{gap:82px}.life-photo{height:auto;aspect-ratio:1087/605;border:1px solid var(--line);border-radius:34px;background:var(--surface)}.life-photo:after{background:linear-gradient(180deg,transparent 72%,rgba(5,15,10,.32))}.life-photo img,.workspace-photo img{width:100%;height:100%;object-fit:cover;filter:none;transform:none}.life-photo figcaption,.workspace-photo figcaption{padding:6px 9px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#fff;background:rgba(5,28,16,.56);backdrop-filter:blur(8px)}
.steps-media{position:relative;width:min(940px,86%);margin:62px auto 0;overflow:hidden;border:1px solid rgba(7,17,13,.22);border-radius:28px;background:#e9faf5;box-shadow:0 30px 80px rgba(6,47,27,.2);transform:rotate(-.5deg);transition:transform .45s cubic-bezier(.2,.8,.2,1)}.steps-media:hover{transform:rotate(0) translateY(-5px)}.steps-media img{width:100%;aspect-ratio:1080/603;object-fit:cover}.steps-media figcaption{display:flex;align-items:center;justify-content:center;gap:14px;padding:13px;color:rgba(7,17,13,.68);background:rgba(255,255,255,.6);font-size:11px;font-weight:780;letter-spacing:.12em;text-transform:uppercase}.steps-media figcaption i{width:42px;height:1px;background:rgba(7,17,13,.28)}.steps-action{margin-top:32px}
.workspace{padding-bottom:105px}.workspace-photo{height:auto;aspect-ratio:1072/815;border:1px solid var(--line);background:var(--surface)}.workspace-photo:after{display:none}
.brand-showcase{padding:35px 0 160px}.showcase-intro{display:grid;grid-template-columns:1.05fr .95fr;align-items:end;gap:70px;margin-bottom:48px}.showcase-intro .eyebrow{grid-column:1/-1}.showcase-intro h2{margin:0;font-family:var(--display);font-size:clamp(52px,5.1vw,78px);font-weight:400;letter-spacing:-.055em;line-height:.92}.showcase-intro>p:last-child{max-width:440px;margin:0 0 4px;color:var(--muted)}.showcase-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:20px}.showcase-card{position:relative;margin:0;overflow:hidden;border:1px solid var(--line);border-radius:29px;background:var(--surface);box-shadow:0 25px 75px rgba(0,0,0,.2)}.showcase-card img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .65s cubic-bezier(.2,.8,.2,1)}.showcase-card:hover img{transform:scale(1.025)}.showcase-card figcaption{white-space:nowrap;position:absolute;left:18px;bottom:16px;padding:7px 11px;border:1px solid rgba(255,255,255,.3);border-radius:999px;color:#fff;background:rgba(4,27,15,.62);backdrop-filter:blur(12px);font-size:11px;font-weight:720;letter-spacing:.09em;text-transform:uppercase}
@media(max-width:1100px){.hero-visual{min-height:440px}.life{gap:50px}.brand-showcase{padding-bottom:120px}.showcase-intro{gap:45px}}
@media(max-width:760px){.hero-visual{min-height:255px;margin-top:38px}.hero-photo{inset:auto 0;top:50%;border-radius:23px}.hero-photo figcaption{display:none}.life{gap:45px}.life-photo{height:auto;aspect-ratio:1087/605;border-radius:23px}.steps-media{width:100%;margin-top:38px;border-radius:22px;transform:none}.workspace{padding-bottom:70px}.workspace-photo{height:auto;aspect-ratio:1072/815;border-radius:23px}.brand-showcase{padding:20px 0 105px}.showcase-intro{display:block;margin-bottom:34px}.showcase-intro h2{font-size:48px}.showcase-intro>p:last-child{margin-top:24px}.showcase-grid{grid-template-columns:1fr}.showcase-card{border-radius:22px}.showcase-card figcaption{left:12px;bottom:11px;font-size:11px}}
@media(max-width:410px){.hero-visual{min-height:220px}.showcase-intro h2{font-size:42px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.client-track{transform:none}.hero-copy>*{opacity:1;transform:none}.life-photo img,.workspace-photo img{transform:none!important}.steps-media{transform:none}}
.stage-brand{display:flex;align-items:center;gap:10px}.stage-brand img{border-radius:9px;box-shadow:0 7px 20px rgba(0,0,0,.24)}.stage-brand>span{display:grid;color:var(--paper);font-size:12px;font-weight:720;line-height:1.25}.stage-brand small{color:var(--muted);font-size:11px;font-weight:500}.stage-period{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:11px}.conversation-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:27px;padding-bottom:15px;border-bottom:1px solid var(--line)}.conversation-heading span{color:var(--paper);font-family:var(--display);font-size:22px;letter-spacing:-.025em}.conversation-heading small{max-width:230px;color:var(--muted);font-size:11px;text-align:right}.message-avatar{display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border:1px solid rgba(167,243,91,.32);border-radius:50%;color:#07110d;background:var(--mint);font-size:11px;font-weight:800}.chat-user{max-width:none;margin:0;padding:16px 19px;border:1px solid rgba(255,255,255,.18);border-radius:18px 18px 5px 18px;box-shadow:0 14px 35px rgba(0,0,0,.18)}.flow-connector{display:flex;align-items:center;gap:10px;margin:13px 0 15px 51px;color:var(--accent-text);font-size:12px}.flow-connector i{flex:1;height:1px;background:linear-gradient(90deg,rgba(167,243,91,.5),transparent)}.ai-status{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid rgba(167,243,91,.18);border-radius:999px;color:var(--accent-text);font-size:11px;font-style:normal;font-weight:700;letter-spacing:.02em;text-transform:none}.ai-status i{width:5px;height:5px;border-radius:50%;background:var(--mint)}.summary-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.summary-top p{margin:0;color:var(--muted);font-size:11px;font-weight:720;letter-spacing:.1em;text-transform:uppercase}.summary-top>span{padding:5px 8px;border:1px solid var(--line);border-radius:999px;color:var(--accent-text);font-size:11px}.summary-note{margin-top:0;padding:13px;background:rgba(255,255,255,.02)}.summary-note p{display:grid}.summary-note p small{margin-top:2px;color:var(--muted);font-size:11px}

@media(max-width:1100px){.conversation-heading small{max-width:180px}}
@media(max-width:760px){.stage-brand>span{font-size:11px}.stage-period{padding:7px 9px}.stage-period span{font-size:11px}.conversation-heading{display:grid;gap:5px;margin-bottom:22px}.conversation-heading span{font-size:20px}.conversation-heading small{max-width:none;text-align:left}.summary-top{grid-column:1/-1}.summary-note{grid-column:1/-1}}
@media(max-width:410px){.message-avatar{display:none}.flow-connector{margin-left:0}}

/* Editorial workflow: one clear path from setup to outcome */
.steps{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:132px 0;
  color:var(--paper);
  background:
    radial-gradient(circle at 88% 42%,rgba(88,211,122,.16),transparent 32%),
    radial-gradient(circle at 5% 90%,rgba(161,247,76,.07),transparent 24%),
    #07110d;
}
.steps:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,transparent,black 28%,black 72%,transparent);
}
.steps-layout{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(470px,.96fr);
  gap:clamp(46px,5vw,86px);
  align-items:center;
  padding:clamp(26px,3vw,46px);
  border:1px solid rgba(225,255,235,.13);
  border-radius:34px;
  background:linear-gradient(145deg,rgba(19,40,27,.68),rgba(7,17,13,.34));
  box-shadow:0 50px 120px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.03);
}
.steps-copy{padding:clamp(8px,1.2vw,20px)}
.steps-copy .eyebrow{justify-content:flex-start;color:var(--accent-text)}
.steps-copy .eyebrow>span{background:var(--mint)}
.steps-copy h2{
  max-width:600px;
  margin:24px 0 0;
  color:var(--paper);
  font-size:clamp(52px,5.1vw,70px);
  line-height:.88;
  letter-spacing:-.055em;
}
.steps-copy h2 em{color:var(--lime)}
.steps-lead{
  max-width:520px;
  margin:24px 0 0;
  color:rgba(235,245,238,.67);
  font-size:15px;
  line-height:1.7;
}
.step-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin-top:30px;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
}
.step-grid article{
  position:relative;
  display:grid;
  grid-template-columns:45px minmax(0,1fr) 34px;
  gap:16px;
  align-items:start;
  min-height:0;
  padding:19px 4px;
  border:0;
  border-top:1px solid rgba(225,255,235,.13);
  transition:padding .3s ease,background-color .3s ease;
}
.step-grid article:last-child{border-bottom:1px solid rgba(225,255,235,.13)}
.step-grid article:hover{padding-inline:12px;background:rgba(255,255,255,.025)}
.step-number{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(161,247,76,.36);
  border-radius:13px;
  color:var(--lime);
  background:rgba(161,247,76,.07);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
}
.step-body h3{
  margin:0 0 7px;
  color:var(--paper);
  font-family:var(--sans);
  font-size:15px;
  font-weight:720;
  letter-spacing:-.015em;
}
.step-body p{
  max-width:440px;
  margin:0;
  color:rgba(235,245,238,.57);
  font-size:11px;
  line-height:1.6;
}
.step-grid .step-icon{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  margin:3px 0 0;
  border:1px solid rgba(225,255,235,.12);
  border-radius:50%;
  color:rgba(235,245,238,.7);
  background:rgba(255,255,255,.025);
  font-size:13px;
}
.steps-action{
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:26px;
  text-align:left;
}
.steps-action>p{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  color:rgba(235,245,238,.54);
  font-size:11px;
}
.steps-action>p>span{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(161,247,76,.08)}
.steps-visual{position:relative;min-width:0;padding:22px 0 30px 22px}
.steps-visual:before{
  content:"";
  position:absolute;
  inset:0 8% 8% 0;
  border:1px solid rgba(161,247,76,.17);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(161,247,76,.08),rgba(21,89,50,.02));
  transform:rotate(-2.5deg);
}
.steps-media{
  position:relative;
  width:100%;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(225,255,235,.22);
  border-radius:26px;
  background:#dff8ec;
  box-shadow:0 34px 80px rgba(0,0,0,.34);
  transform:none;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease;
}
.steps-visual:hover .steps-media{transform:translateY(-5px);box-shadow:0 42px 100px rgba(0,0,0,.42)}
.steps-media img{display:block;width:100%;height:clamp(390px,38vw,520px);object-fit:cover;object-position:center;filter:saturate(.9) contrast(1.02)}
.steps-media:after{
  content:"";
  position:absolute;
  inset:0 0 42px;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(6,20,13,.12),transparent 27%),linear-gradient(to top,rgba(6,20,13,.18),transparent 25%);
}
.steps-media figcaption{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:42px;
  padding:11px 16px;
  color:rgba(7,17,13,.62);
  background:#eef6ef;
  font-size:11px;
  font-weight:780;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.steps-media figcaption i{width:58px;height:1px;background:rgba(7,17,13,.22)}
.steps-result-card{
  position:absolute;
  z-index:3;
  right:-18px;
  bottom:0;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:13px;
  align-items:center;
  min-width:300px;
  padding:14px 15px;
  border:1px solid rgba(225,255,235,.18);
  border-radius:17px;
  color:var(--paper);
  background:rgba(7,22,14,.9);
  box-shadow:0 22px 50px rgba(0,0,0,.35);
  backdrop-filter:blur(18px);
}
.steps-result-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;color:#07110d;background:var(--lime);font-weight:900}
.steps-result-card div{display:grid;gap:3px}
.steps-result-card small{color:rgba(235,245,238,.52);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.steps-result-card strong{font-size:11px}
.steps-result-card em{padding:6px 9px;border-radius:999px;color:var(--accent-text);background:rgba(98,224,130,.09);font-size:11px;font-style:normal;font-weight:800}
.steps-index{
  position:absolute;
  top:-16px;
  right:18px;
  z-index:2;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid rgba(7,17,13,.14);
  border-radius:50%;
  color:#07110d;
  background:var(--lime);
  box-shadow:0 12px 36px rgba(0,0,0,.22);
  font-size:11px;
  font-weight:850;
  letter-spacing:.08em;
}

@media(max-width:1120px){
  .steps-layout{grid-template-columns:minmax(0,.9fr) minmax(430px,1.1fr);gap:34px}
  .steps-copy h2{font-size:clamp(48px,5vw,66px)}
  .steps-action{align-items:flex-start;flex-direction:column;gap:14px}
}
@media(max-width:900px){
  .steps{padding:100px 0}
  .steps-layout{grid-template-columns:1fr;gap:48px;padding:clamp(24px,6vw,44px)}
  .steps-copy{padding:0}
  .steps-copy h2{max-width:650px;font-size:clamp(53px,9vw,76px)}
  .steps-lead{max-width:610px}
  .step-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .step-grid article{grid-template-columns:1fr;align-content:start;padding:20px;min-height:220px;border:1px solid rgba(225,255,235,.12);border-radius:18px;background:rgba(255,255,255,.022)}
  .step-grid article:last-child{border:1px solid rgba(225,255,235,.12)}
  .step-grid article:hover{padding:20px}
  .step-grid .step-icon{position:absolute;top:20px;right:20px}
  .steps-visual{padding-left:0}
  .steps-visual:before{inset:-14px 6% 8% 3%}
}
@media(max-width:650px){
  .steps{padding:78px 0}
  .steps-layout{gap:38px;padding:22px 16px 28px;border-radius:25px}
  .steps-copy h2{font-size:clamp(45px,14vw,60px)}
  .steps-lead{margin-top:22px;font-size:13px}
  .step-grid{grid-template-columns:1fr;gap:0;margin-top:30px}
  .step-grid article{grid-template-columns:42px minmax(0,1fr) 30px;gap:13px;min-height:0;padding:19px 0;border:0;border-top:1px solid rgba(225,255,235,.13);border-radius:0;background:transparent}
  .step-grid article:last-child{border:0;border-top:1px solid rgba(225,255,235,.13);border-bottom:1px solid rgba(225,255,235,.13)}
  .step-grid article:hover{padding:19px 0;background:transparent}
  .step-number{width:40px;height:40px}
  .step-grid .step-icon{position:static;top:auto;right:auto;width:29px;height:29px}
  .steps-action{margin-top:28px}
  .steps-action .button{width:100%;justify-content:center}
  .steps-visual{padding:10px 0 10px}
  .steps-visual:before{inset:0 5% 24px 3%;border-radius:22px}
  .steps-media{border-radius:19px}
  .steps-media img{height:280px}
  .steps-media figcaption{min-height:36px}
  .steps-result-card{right:10px;bottom:7px;grid-template-columns:36px minmax(0,1fr) auto;min-width:0;width:calc(100% - 20px);padding:11px 12px}
  .steps-result-icon{width:36px;height:36px;border-radius:11px}
  .steps-index{top:-5px;right:10px;width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){.step-grid article,.steps-media{transition:none}.steps-visual:hover .steps-media{transform:none}}.answer-visual{width:100%}.answer-visual img{height:92px}
@media(min-width:1240px){.life-photo{aspect-ratio:1087/1070}}
.arrow-link{position:relative}.arrow-link:after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%);pointer-events:auto}.stage-ws{display:flex;align-items:center;gap:10px;min-width:0}.stage-ws img{border-radius:8px}.ws-name{display:grid;line-height:1.15;min-width:0}.ws-name b{color:var(--paper);font-size:12px;font-weight:650}.ws-name small{color:var(--muted);font-size:11px}.stage-meta{margin-left:auto;display:flex;align-items:center;gap:9px;min-width:0}.stage-search{display:flex;align-items:center;gap:7px;max-width:190px;padding:6px 11px;border:1px solid var(--stage-line);border-radius:999px;color:var(--muted);font-size:11px}.stage-search svg{flex:0 0 auto;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}.stage-search>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-avatar{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--stage-line);border-radius:50%;color:var(--muted);background:var(--stage-card);font-size:0}.message-avatar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.cat-ico{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;color:var(--stage-accent);background:color-mix(in srgb,var(--mint) 15%,transparent)}.cat-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}@media(max-width:760px){.stage-meta{width:100%;margin-left:0}.stage-search{max-width:none;flex:1}.stage-search{display:none}}
@media(min-width:1240px){.hero-visual{position:relative;margin-right:calc(-1 * clamp(32px,(100vw - 1240px)/2,340px));margin-left:-120px}.hero-visual:before{content:"";position:absolute;z-index:0;inset:6% 0 2% 10%;background:radial-gradient(58% 62% at 62% 52%,color-mix(in srgb,var(--mint) 20%,transparent),transparent 72%);filter:blur(46px);pointer-events:none}.hero-photo{border:0;border-radius:0;background:transparent;box-shadow:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 5%,#000 11%),linear-gradient(180deg,transparent 0%,#000 12%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,transparent 5%,#000 11%),linear-gradient(180deg,transparent 0%,#000 12%,#000 100%);-webkit-mask-composite:source-in;mask-composite:intersect}}
@media(max-width:1239px){.life{display:flex;flex-direction:column-reverse;align-items:stretch;gap:48px}.life-photo{height:auto;aspect-ratio:1087/605}.workspace{display:flex;flex-direction:column;align-items:stretch;gap:46px}.workspace-photo{width:100%;height:auto;aspect-ratio:1072/815}}
@media(max-width:1239px){.steps-layout{grid-template-columns:1fr;gap:46px}.steps-visual{padding-left:0}}
main{overflow-x:clip}
@media(min-width:761px) and (max-width:1239px){.hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:34px;min-height:0;padding-top:88px}.hero h1{font-size:clamp(46px,5.4vw,64px)}.hero-lead{margin:26px 0 30px;font-size:clamp(16px,1.5vw,18px)}.hero-visual{position:relative;min-height:0;margin-left:-34px;margin-right:calc(-1 * clamp(22px,(100vw - 920px)/2,340px))}.hero-visual:before{content:"";position:absolute;z-index:0;inset:2% 0 0 8%;background:radial-gradient(56% 60% at 58% 50%,color-mix(in srgb,var(--mint) 18%,transparent),transparent 72%);filter:blur(42px);pointer-events:none}.hero-photo{position:relative;inset:auto;transform:none;border:0;border-radius:0;background:transparent;box-shadow:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 5%,#000 11%),linear-gradient(180deg,transparent 0%,#000 12%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,transparent 5%,#000 11%),linear-gradient(180deg,transparent 0%,#000 12%,#000 100%);-webkit-mask-composite:source-in;mask-composite:intersect}}@media(min-width:1101px) and (max-width:1239px){.hero-visual{margin-right:-32px}}@property --progress{syntax:"<angle>";inherits:false;initial-value:0deg}
.faq summary{transition:background-color .22s ease}.faq summary:hover{background:rgba(255,255,255,.03)}.faq summary i{transition:border-color .22s ease,color .22s ease}.faq details:hover summary i{border-color:var(--accent-text);color:var(--accent-text)}.price-card{transition:border-color .22s ease,box-shadow .22s ease}.price-card:hover{border-color:var(--line-strong);box-shadow:0 20px 52px -22px rgba(0,0,0,.55)}.cat-ico{transition:scale .22s cubic-bezier(.2,1.35,.35,1),background-color .22s ease}.showcase-card,.steps-result-card{transition:border-color .22s ease,box-shadow .22s ease}@media(hover:hover) and (pointer:fine){.step-grid article{transition:background-color .2s ease,translate .2s ease}.step-grid article:hover{padding-inline:0;translate:8px 0}}
@media(min-width:761px) and (max-width:1239px){.hero-proof{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px}.hero-scroll{left:auto;right:0}.hero-proof span{align-items:flex-start;flex-direction:column;gap:3px;min-width:0}}
@media(min-width:1240px){.workspace h2{font-size:clamp(52px,5.1vw,72px)}}
@media(min-width:1240px){.life h2{font-size:clamp(52px,5.1vw,66px)}}
.price-pro .price-top>span{color:#056836}
@media(min-width:1240px){.hero-copy{grid-area:1/1}.hero-visual{grid-area:1/2}.hero-scroll{position:static;grid-area:1/2;align-self:end;justify-self:end;left:auto;right:auto;bottom:auto}}
@media(min-width:1240px){.hero-proof{margin-top:34px}}
@media(min-width:1240px){.conversation-heading{margin-bottom:14px;padding-bottom:8px}.conversation-heading h3{font-size:24px}.message-avatar{width:26px;height:26px}.cat-ico{width:24px;height:24px}}.composer-send{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#07110d;background:var(--stage-accent)}.composer-send svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.surfaces{padding-bottom:150px}@media(max-width:760px){.surfaces{padding-bottom:100px}}

@media(max-width:760px){.steps-result-card{position:static;margin-top:12px}}
/* Say it, and it is filed. The artwork is the product talking rather than a photograph beside the copy, so it takes the wider column. A light picture on a dark page needs an edge of its own or it reads as a hole cut in the section -- hence the border and the pale plate behind it, the same treatment .product-glimpse gets. Below 760px the picture goes first: the sentence about talking to your money lands better once you have seen what that looks like. */
.say-it{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:center;gap:clamp(40px,6vw,88px);padding-block:clamp(96px,10vw,150px)}
.say-it-copy{max-width:520px}
.say-it-copy h2{margin:18px 0 20px;font-family:var(--display);font-size:clamp(42px,4.1vw,60px);font-weight:400;letter-spacing:-.05em;line-height:.94}
.say-it-copy>p{margin:0 0 26px;color:var(--muted);font-size:16px;line-height:1.7}
.say-it-points{display:grid;gap:12px;margin:0 0 30px;padding:0;list-style:none}
.say-it-points li{display:flex;gap:11px;align-items:flex-start;color:var(--paper);font-size:14px;line-height:1.6}
.say-it-points li>span{flex:none;display:grid;place-items:center;width:19px;height:19px;margin-top:2px;border-radius:50%;background:color-mix(in srgb,var(--mint) 17%,transparent);color:var(--mint);font-size:10px}
.say-it-art{position:relative;margin:0;overflow:hidden;border:1px solid var(--line);border-radius:30px;background:#e8f4ec;box-shadow:var(--shadow)}
.say-it-art img{display:block;width:100%;height:auto}
@media(max-width:1100px){.say-it{grid-template-columns:1fr;gap:44px}.say-it-copy{max-width:620px}}
@media(max-width:760px){.say-it{display:flex;flex-direction:column;padding-block:84px}.say-it-art{order:-1;border-radius:22px}.say-it-copy h2{font-size:clamp(40px,11vw,54px)}}
/* Photograph it, and it reads the whole thing. Centred rather than split in two like .say-it above it: the picture is two phones side by side and already carries its own before-and-after, so a column of copy beside it would be a third thing competing for the same glance. Capped at 900px because the source is 1294px wide -- stretched to the full 1240px shell the receipt text goes soft, and the receipt text is the whole point. */
.transactions-organized{padding-block:clamp(84px,8.5vw,132px)}
.transactions-organized-head{width:min(100%,820px);margin:0 auto clamp(36px,4vw,54px);text-align:center}
.transactions-organized-head .eyebrow{justify-content:center}
.transactions-organized-head h2{margin:16px 0 18px;font-family:var(--display);font-size:clamp(32px,3.1vw,46px);font-weight:400;letter-spacing:-.045em;line-height:1.04}
.transactions-organized-head>p:last-of-type{margin:0;color:var(--muted);font-size:16px;line-height:1.7}
.transactions-organized-head .button{margin-top:28px}
.transactions-organized-art{width:min(100%,1040px);margin:0 auto}
.transactions-organized-art img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:30px;background:#eaf7f0;box-shadow:var(--shadow)}
@media(max-width:760px){.transactions-organized{padding-block:74px}.transactions-organized-art img{border-radius:20px}.transactions-organized-head h2{font-size:clamp(25px,7.4vw,38px)}}
.finance-smarter{padding-block:clamp(84px,8.5vw,132px)}
.finance-smarter-head{width:min(100%,700px);margin:0 auto clamp(36px,4vw,54px);text-align:center}
.finance-smarter-head .eyebrow{justify-content:center}
.finance-smarter-head h2{margin:16px 0 18px;font-family:var(--display);font-size:clamp(40px,3.9vw,58px);font-weight:400;letter-spacing:-.05em;line-height:.96}
.finance-smarter-head>p:last-child{margin:0;color:var(--muted);font-size:16px;line-height:1.7}
.finance-smarter-art{width:min(100%,1040px);margin:0 auto}
.finance-smarter-art img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:30px;background:#eef4f1;box-shadow:var(--shadow)}
@media(max-width:760px){.finance-smarter{padding-block:74px}.finance-smarter-art img{border-radius:20px}.finance-smarter-head h2{font-size:clamp(28px,9.2vw,50px)}}
.ai-insights{padding-block:clamp(84px,8.5vw,132px)}
.ai-insights-head{width:min(100%,700px);margin:0 auto clamp(36px,4vw,54px);text-align:center}
.ai-insights-head .eyebrow{justify-content:center}
.ai-insights-head h2{margin:16px 0 18px;font-family:var(--display);font-size:clamp(40px,3.9vw,58px);font-weight:400;letter-spacing:-.05em;line-height:.96}
.ai-insights-head>p:last-child{margin:0;color:var(--muted);font-size:16px;line-height:1.7}
.ai-insights-art{width:min(100%,832px);margin:0 auto}
.ai-insights-art img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:30px;background:#eef4f1;box-shadow:var(--shadow)}
.ai-insights-art figcaption{margin-top:17px;text-align:center;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
@media(max-width:760px){.ai-insights{padding-block:74px}.ai-insights-art img{border-radius:20px}.ai-insights-head h2{font-size:clamp(28px,9.2vw,50px)}}
.receipt-scan{padding-block:clamp(84px,8.5vw,132px)}
.receipt-scan-head{width:min(100%,660px);margin:0 auto clamp(36px,4vw,54px);text-align:center}
.receipt-scan-head .eyebrow{justify-content:center}
.receipt-scan-head h2{margin:16px 0 18px;font-family:var(--display);font-size:clamp(40px,3.9vw,58px);font-weight:400;letter-spacing:-.05em;line-height:.96}
.receipt-scan-head>p:last-child{margin:0;color:var(--muted);font-size:16px;line-height:1.7}
.receipt-scan-art{width:min(100%,900px);margin:0 auto}
.receipt-scan-art img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:30px;background:#e9f4ee;box-shadow:var(--shadow)}
/* Under the picture, not over it: laid on top at bottom-right it sat across the second phone's composer, which reads as a bug in the screenshot rather than as a caption. */
.receipt-scan-art figcaption{margin-top:17px;text-align:center;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
@media(max-width:760px){.receipt-scan{padding-block:74px}.receipt-scan-art img{border-radius:20px}.receipt-scan-head h2{font-size:clamp(28px,9.2vw,50px)}}
/* Bring your own AI. Picture on the left, copy on the right -- the mirror of .say-it, so three picture-and-words sections in a row do not all lean the same way. The artwork is atmosphere rather than an interface, so unlike the other two it gets no frame: a border around a soft gradient that already fades out at its edges draws a box around nothing. */
.bring-your-ai{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);align-items:center;gap:clamp(36px,5vw,76px);padding-block:clamp(84px,8.5vw,132px)}
.bring-your-ai-art{margin:0;overflow:hidden;border-radius:28px}
.bring-your-ai-art img{display:block;width:100%;height:auto}
.bring-your-ai-copy{max-width:540px}
.bring-your-ai-copy h2{margin:16px 0 18px;font-family:var(--display);font-size:clamp(32px,3.1vw,46px);font-weight:400;letter-spacing:-.045em;line-height:1.02}
.bring-your-ai-copy>p{margin:0 0 26px;color:var(--muted);font-size:16px;line-height:1.7}
@media(max-width:1100px){.bring-your-ai{grid-template-columns:1fr;gap:40px}.bring-your-ai-copy{max-width:620px}}
@media(max-width:760px){.bring-your-ai{padding-block:74px}.bring-your-ai-art{border-radius:20px}.bring-your-ai-copy h2{font-size:clamp(24px,7.2vw,44px)}}
/* The product video, as a poster and a play button until someone presses it. .watch-frame keeps its 16:9 box whether it is holding the poster or the iframe that replaces it, so the page does not jump when the two swap. */
.watch{padding-block:clamp(84px,8.5vw,132px)}
.watch-head{width:min(100%,660px);margin:0 auto clamp(32px,3.6vw,48px);text-align:center}
.watch-head .eyebrow{justify-content:center}
.watch-head h2{margin:16px 0 18px;font-family:var(--display);font-size:clamp(34px,3.5vw,52px);font-weight:400;letter-spacing:-.045em;line-height:1}
.watch-head>p:last-child{margin:0;color:var(--muted);font-size:16px;line-height:1.7}
.watch-frame{position:relative;width:min(100%,900px);margin:0 auto;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);border-radius:26px;background:var(--surface-2);box-shadow:var(--shadow)}
.watch-frame iframe,.watch-play{display:block;width:100%;height:100%;border:0}
.watch-play{position:relative;padding:0;background:none;cursor:pointer}
.watch-play img{width:100%;height:100%;object-fit:cover}
.watch-play-mark{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:var(--mint);box-shadow:0 18px 44px rgba(0,0,0,.34);transform:translate(-50%,-50%);transition:transform .2s ease}
.watch-play-mark svg{width:30px;height:30px;margin-left:3px;fill:#08110d}
.watch-play:hover .watch-play-mark,.watch-play:focus-visible .watch-play-mark{transform:translate(-50%,-50%) scale(1.07)}
.watch-note{margin:15px auto 0;width:min(100%,900px);color:var(--muted);font-size:12px;text-align:center}
@media(prefers-reduced-motion:reduce){.watch-play-mark{transition:none}}
@media(max-width:760px){.watch{padding-block:74px}.watch-frame{border-radius:18px}.watch-play-mark{width:58px;height:58px}.watch-play-mark svg{width:24px;height:24px}.watch-head h2{font-size:clamp(24px,7vw,44px)}}

/* Pricing: the states a live price list has that a printed one does not. The
 * cards keep .price-card and .price-pro so the section looks the same the
 * moment it is replaced; everything below is what the static version could not
 * express -- which plan is already yours, what each one actually allows, and a
 * confirmation before anybody is sent to a payment page. */
.price-top { display:flex; flex-direction:column; align-items:flex-start; }
.price-badge {
  align-self:flex-start; margin-bottom:13px; padding:4px 11px; border-radius:999px;
  background:rgba(7,17,13,.14); color:inherit;
  font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.price-free .price-badge { background:rgba(167,243,91,.16); color:var(--mint); }
/* The plan you are on is stated, not sold: a ring rather than a louder card. */
.price-card.is-current { border-color:var(--mint); }
.price-card ul li.is-off { color:var(--muted); }
/* The off state re-uses the tick the card already draws, so an unavailable
 * line reads as a dash in the same circle rather than as a second bullet. */
.price-card li.is-off:before { content:"\2013"; color:var(--muted); }
.price-note { display:block; padding-top:6px; color:var(--muted); font-size:12px; font-weight:600; }
.price-pro .price-note { color:rgba(7,17,13,.66); }
/* A current plan's button is present but inert, so the row of cards keeps its
 * rhythm instead of one card ending higher than the others. */
.button.is-disabled { opacity:.55; pointer-events:none; }

/* --- the upgrade confirmation ------------------------------------------- */
.upgrade-dialog { padding:0; border:0; background:none; color:var(--paper); }
.upgrade-dialog::backdrop { background:rgba(4,12,8,.66); backdrop-filter:blur(6px); }
.upgrade-sheet {
  width:min(100vw - 32px, 430px); padding:28px;
  border:1px solid var(--line); border-radius:24px;
  background:var(--surface-2); box-shadow:0 40px 120px rgba(0,0,0,.5);
  text-align:start;
}
.upgrade-kicker { margin:0 0 8px; color:var(--accent-text); font-size:10px; font-weight:780; letter-spacing:.14em; text-transform:uppercase; }
.upgrade-sheet h2 { margin:0; font-family:var(--display); font-size:34px; font-weight:400; letter-spacing:-.04em; }
.upgrade-line { display:flex; align-items:baseline; gap:8px; margin:10px 0 20px; }
.upgrade-line strong { color:var(--paper); font-size:26px; font-weight:700; }
.upgrade-line span { color:var(--muted); font-size:13px; }
.upgrade-what { margin:0 0 10px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.upgrade-gets { display:grid; gap:9px; margin:0 0 18px; padding:0; list-style:none; }
.upgrade-gets li { position:relative; padding-inline-start:22px; color:var(--paper); font-size:13.5px; line-height:1.5; }
.upgrade-gets li::before { content:"\2713"; position:absolute; inset-inline-start:0; color:var(--mint); font-weight:800; }
.upgrade-small { margin:0 0 20px; color:var(--muted); font-size:12px; line-height:1.65; }
.upgrade-actions { display:grid; gap:10px; }
.upgrade-cancel {
  padding:11px; border:1px solid var(--line); border-radius:999px;
  background:none; color:var(--paper); font-size:13px; font-weight:600; cursor:pointer;
}
.upgrade-cancel:hover { border-color:var(--muted); }
.upgrade-actions .button:focus-visible, .upgrade-cancel:focus-visible { outline:2px solid var(--mint); outline-offset:3px; }
@media (max-width:520px) { .upgrade-sheet { padding:22px; } .upgrade-sheet h2 { font-size:28px; } }
@media (prefers-reduced-motion:no-preference) {
  .upgrade-dialog[open] .upgrade-sheet { animation:upgradeRise .22s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes upgradeRise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
}

/* The product video, opened from the hero's "See it in action". The section
 * further down plays in place; this plays over the page and puts the reader
 * back where they were. Sized to the viewport rather than to a fixed width, so
 * a 16:9 video is as large as it can be on a phone in either orientation
 * without ever being cropped or pushing the close button off-screen. */
.video-dialog { max-width:100vw; max-height:100vh; padding:0; border:0; background:none; }
.video-dialog::backdrop { background:rgba(4,12,8,.82); backdrop-filter:blur(8px); }
.video-shell { position:relative; width:min(94vw, 168vh, 1120px); }
.video-frame {
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border:1px solid var(--line); border-radius:20px; background:#000;
  box-shadow:0 44px 130px rgba(0,0,0,.6);
}
.video-frame iframe { display:block; width:100%; height:100%; border:0; }
/* Above the frame on a large screen, inside it on a small one, where there is
 * no room outside for a 40px target that still has to be 40px. */
.video-close {
  position:absolute; inset-block-end:calc(100% + 12px); inset-inline-end:0;
  display:grid; place-items:center; width:40px; height:40px;
  border:1px solid var(--line); border-radius:50%;
  background:rgba(12,25,18,.9); color:var(--paper); cursor:pointer;
}
.video-close:hover { border-color:var(--muted); }
.video-close:focus-visible { outline:2px solid var(--mint); outline-offset:3px; }
.video-close svg { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
@media (max-width:600px) {
  .video-close { inset-block-end:auto; inset-block-start:10px; inset-inline-end:10px; background:rgba(4,12,8,.72); }
}
@media (prefers-reduced-motion:no-preference) {
  .video-dialog[open] .video-shell { animation:videoRise .2s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes videoRise { from { opacity:0; transform:scale(.98); } to { opacity:1; transform:none; } }
}
@media(max-width:1080px){.pricing-layout{grid-template-columns:1fr;max-width:540px;margin-inline:auto}.price-top{min-height:0}.price-top h3{font-size:clamp(46px,11vw,62px)}}
/*
 * Everyday money. One frame, on the shape .receipt-scan and .ai-insights
 * already use on this page: a centred head, the picture under it at the
 * section's own width, and the caption below the picture rather than laid
 * across it -- every corner of this frame carries a card a pill would cover.
 *
 * 1240px is where the shell caps anyway, and it is inside the 1365px master,
 * so the small print on the cards is never upscaled.
 */
.moment-film{padding-block:clamp(84px,8.5vw,132px)}
.moment-head{width:min(100%,660px);margin:0 auto clamp(36px,4vw,54px);text-align:center}
.moment-head .eyebrow{justify-content:center}
.moment-head h2{margin:16px 0 18px;font-family:var(--display);font-size:clamp(40px,3.9vw,58px);font-weight:400;letter-spacing:-.05em;line-height:.96}
.moment-head>p{margin:0;color:var(--muted);font-size:16px;line-height:1.7}
.moment-head .arrow-link{margin-top:26px}
.moment-art{width:min(100%,868px);margin:0 auto}
.moment-art img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:30px;background:#e9f4ee;box-shadow:var(--shadow)}
.moment-art figcaption{margin-top:17px;text-align:center;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
@media(max-width:760px){.moment-film{padding-block:74px}.moment-art img{border-radius:20px}.moment-head h2{font-size:clamp(28px,9.2vw,50px)}}

/*
 * See the pattern. The frame is the one .receipt-scan, .ai-insights and
 * .moment-art already use -- centred head, picture beneath it, caption under
 * the picture -- but it takes the whole 1240px shell rather than their 832 to
 * 887, because this master is a 2.35:1 frame of three cards and the fine print
 * on them is the thing the section points at: the category rows with their
 * amounts and shares, and the list of purchases behind the total.
 *
 * Below 1100px the shell drops to 920 and then 620, where those rows land at
 * around five pixels and the frame would be asking people to take its word for
 * what the picture showed. The <source> in index.html swaps in the middle card
 * on its own there, and the frame narrows to carry it upright.
 */
.see-pattern{padding-block:clamp(84px,8.5vw,132px)}
.see-pattern-head{width:min(100%,700px);margin:0 auto clamp(36px,4vw,54px);text-align:center}
.see-pattern-head .eyebrow{justify-content:center}
.see-pattern-head h2{margin:16px 0 18px;font-family:var(--display);font-size:clamp(40px,3.9vw,58px);font-weight:400;letter-spacing:-.05em;line-height:.96}
.see-pattern-head>p:last-child{margin:0;color:var(--muted);font-size:16px;line-height:1.7}
.see-pattern-art{width:min(100%,1240px);margin:0 auto}
.see-pattern-art picture{display:block}
.see-pattern-art img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:30px;background:#edf0f3;box-shadow:var(--shadow)}
.see-pattern-art figcaption{margin-top:17px;text-align:center;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
@media(max-width:1100px){.see-pattern-art{width:min(100%,520px)}}
@media(max-width:760px){.see-pattern{padding-block:74px}.see-pattern-art img{border-radius:20px}.see-pattern-head h2{font-size:clamp(28px,9.2vw,50px)}}
/*
 * The example that used to sit on the bento card, kept as an inset note so the
 * column reads promise, proof, example, CTA rather than opening a second
 * heading under the first. Its <p> is not a direct child of .say-it-copy, so
 * the 16px muted rule above does not reach it and it sets its own size.
 */
.say-it-note{margin:0 0 30px;padding:22px 24px;border:1px solid var(--line);border-radius:22px;background:var(--surface-2)}
.say-it-note .kicker{margin:0 0 9px}
.say-it-note h3{margin:0 0 10px;font-family:var(--display);font-size:clamp(23px,1.9vw,29px);font-weight:400;letter-spacing:-.035em;line-height:1.06}
.say-it-note p:not(.kicker){margin:0;color:var(--muted);font-size:14px;line-height:1.65}
@media(max-width:760px){.say-it-note{padding:19px 20px}}
/*
 * /pricing. The plan cards, the .faq block and the buttons are the homepage's
 * own, so this adds only what the page introduces: its hero, the side-by-side
 * table and the closing note.
 *
 * .pricing carries padding-block:150px for the homepage, where it follows a
 * full section. Here it follows this page's own hero, which has already paid
 * that space, so the top half is dropped rather than run twice.
 */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.pricing-hero{padding-block:clamp(64px,7vw,104px) clamp(26px,3vw,42px);text-align:center}
.pricing-hero .eyebrow{justify-content:center}
.pricing-hero h1{width:min(100%,15ch);margin:16px auto 20px;font-family:var(--display);font-size:clamp(44px,5.4vw,78px);font-weight:400;letter-spacing:-.05em;line-height:.94}
.pricing-hero-lead{width:min(100%,620px);margin:0 auto;color:var(--muted);font-size:17px;line-height:1.7}
.pricing-hero-proof{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;margin:30px 0 0;padding:0;list-style:none}
.pricing-hero-proof li{display:flex;align-items:center;gap:9px;color:var(--paper);font-size:13px}
.pricing-hero-proof li>span{display:grid;place-items:center;flex:none;width:19px;height:19px;border-radius:50%;background:color-mix(in srgb,var(--mint) 17%,transparent);color:var(--mint);font-size:10px}
.pricing-hero+.pricing{padding-top:0}
.plan-table{padding-block:clamp(72px,8vw,120px)}
.plan-table-head{width:min(100%,660px);margin:0 auto clamp(30px,3.4vw,46px);text-align:center}
.plan-table-head .eyebrow{justify-content:center}
.plan-table-head h2{margin:16px 0 0;font-family:var(--display);font-size:clamp(38px,3.7vw,56px);font-weight:400;letter-spacing:-.05em;line-height:.96}
.plan-table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:24px;background:var(--surface-2)}
.plan-table table{width:100%;min-width:620px;border-collapse:collapse;font-size:14px}
.plan-table th,.plan-table td{padding:15px 18px;text-align:center;border-bottom:1px solid var(--line)}
.plan-table thead th{color:var(--paper);font-family:var(--display);font-size:19px;font-weight:400;letter-spacing:-.02em}
.plan-table thead th small{display:block;margin-top:4px;color:var(--muted);font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.04em}
.plan-table tbody th{color:var(--paper);font-size:14px;font-weight:600;text-align:left}
.plan-table tbody td{color:var(--muted);font-variant-numeric:tabular-nums}
.plan-table tbody tr:last-child th,.plan-table tbody tr:last-child td{border-bottom:0}
.plan-yes{color:var(--mint);font-size:15px}
.plan-no{color:var(--muted)}
.plan-table-note{margin:18px auto 0;max-width:660px;color:var(--muted);font-size:13px;line-height:1.7;text-align:center}
.pricing-close{padding-block:clamp(70px,7.5vw,116px);text-align:center}
.pricing-close h2{margin:0 0 26px;font-family:var(--display);font-size:clamp(36px,4vw,58px);font-weight:400;letter-spacing:-.05em;line-height:.98}
.pricing-close small{display:block;margin-top:18px;color:var(--muted);font-size:12px}
@media(max-width:760px){.pricing-hero{padding-block:52px 22px}.pricing-hero h1{font-size:clamp(38px,11vw,56px)}.pricing-hero-lead{font-size:16px}.plan-table{padding-block:64px}.plan-table-head h2{font-size:clamp(30px,9vw,46px)}.plan-table th,.plan-table td{padding:13px 14px}.pricing-close h2{font-size:clamp(30px,9vw,46px)}}