@font-face{font-family:'Apfel Grotezk';src:url('assets/fonts/ApfelGrotezk-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Apfel Grotezk Mittel';src:url('assets/fonts/ApfelGrotezk-Mittel.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
:root{--ink:#171719;--paper:#f7f9ff;--muted:#686d7c;--line:#e2e6ef;--purple:#3977e9;--coral:#ffb637;--lime:#0b7cff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.site-header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,5vw,76px);border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(245,244,240,.92);backdrop-filter:blur(12px);z-index:10}
.brand{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:800;letter-spacing:-.8px}
.dim{color:#9e9d98}
.brand-mark{display:inline-flex;gap:2px;align-items:end;height:17px}
.brand-mark i{display:block;width:4px;border-radius:2px;background:var(--ink)}
.brand-mark i:first-child{height:7px}
.brand-mark i:nth-child(2){height:17px}
.brand-mark i:nth-child(3){height:11px}
.nav{display:flex;gap:33px;margin-left:90px}
.nav a{font-size:13px;color:#6d6d6b;font-weight:600}
.nav a:hover,.nav a.active{color:var(--ink)}
.open-app{font-size:13px;font-weight:700}
.header-cta{background:var(--ink);color:white;padding:11px 17px;border-radius:100px}
.header-cta span,.button span{margin-left:8px}
.menu-button{display:none}
.hero{min-height:680px;max-width:1320px;margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:80px 50px 70px;gap:40px}
.eyebrow{font:700 10px Manrope,Arial,sans-serif;letter-spacing:1.1px;text-transform:uppercase;color:#555552;display:flex;align-items:center;gap:9px}
.eyebrow span{width:6px;height:6px;border-radius:50%;background:#7564dc;display:inline-block}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(48px,5.5vw,81px);line-height:1.03;letter-spacing:-5px;margin:21px 0 26px;font-weight:700}
em{font-family:inherit;font-style:normal;font-weight:800;letter-spacing:inherit}
.hero-text{max-width:410px;color:var(--muted);font-size:15px;line-height:1.75}
.hero-actions{display:flex;align-items:center;gap:27px;margin-top:33px}
.button{display:inline-block;border-radius:100px;padding:15px 20px;font-size:12px;font-weight:800}
.button-dark{background:var(--ink);color:white}
.text-link{font-size:12px;font-weight:800;border-bottom:1px solid var(--ink);padding-bottom:3px}
.text-link span{margin-left:5px}
.social-proof{display:flex;align-items:center;gap:11px;margin-top:76px;color:#777774;font-size:10px;line-height:1.4}
.social-proof strong{color:var(--ink)}
.avatars{display:flex}
.avatars b{width:25px;height:25px;margin-right:-7px;border:2px solid var(--paper);border-radius:50%;font-size:8px;display:grid;place-items:center;color:white;background:#e5856c}
.avatars b:nth-child(2){background:#587a69}
.avatars b:nth-child(3){background:#6f83bd}
.avatars b:nth-child(4){background:#b19663}
.hero-visual{height:520px;position:relative;display:grid;place-items:center;overflow:visible}
.orb{position:absolute;border-radius:50%;filter:blur(1px)}
.orb-one{height:420px;width:420px;background:radial-gradient(circle at 67% 28%,#ffe2d8 0,#ffc4dc 31%,#bdb2ff 72%,#9ca5ea 100%);opacity:.82}
.orb-two{height:250px;width:250px;background:#fbdb68;top:95px;right:5px;mix-blend-mode:multiply;opacity:.68}
.phone{position:relative;width:242px;height:480px;background:#201e25;border:6px solid #303034;border-radius:38px;box-shadow:0 31px 44px #25213950;overflow:hidden;color:#f7f4f0;z-index:1}
.phone-top{height:35px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;font-size:8px}
.island{width:67px;height:18px;background:#09090a;border-radius:18px}
.signal{font-size:8px}
.app-content{padding:9px 13px}
.app-header{display:flex;justify-content:space-between;font:600 9px Manrope,Arial,sans-serif;color:#bebac4}
.app-header button{border:0;background:#393541;color:white;border-radius:50%;height:20px;width:20px}
.app-content h3{font-size:20px;line-height:1.15;letter-spacing:-1.3px;margin:18px 0}
.focus-card{height:136px;border-radius:16px;background:linear-gradient(130deg,#b5a4ff,#8974e9);padding:14px;position:relative}
.focus-label{font:700 8px Manrope,Arial,sans-serif;letter-spacing:.5px}
.sun-icon{font-size:14px;margin-right:4px}
.focus-card p{font-size:19px;line-height:1.05;font-weight:700;letter-spacing:-1px;margin-top:13px}
.focus-card .arrow{position:absolute;right:13px;bottom:10px;border:1px solid #d4cdff;border-radius:50%;padding:3px 6px}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.metrics>div{height:77px;background:#302d35;border-radius:13px;padding:9px}
.metrics small{font:700 7px Manrope,Arial,sans-serif;display:block;color:#aaa5ad;margin-top:5px}
.metrics b{font-size:20px;letter-spacing:-1px}
.metrics sup{font-size:8px;color:#aaa5ad}
.metric-icon{font-size:13px}
.purple{color:#baadff}
.green{color:#dfff65}
.progress{background:#302d35;border-radius:13px;padding:9px 10px;font-size:8px}
.progress>div{display:flex;justify-content:space-between;margin-bottom:7px}
.progress i{display:block;height:4px;border-radius:4px;background:#514d57}
.progress em{display:block;height:4px;width:68%;border-radius:4px;background:#dfff65}
.app-nav{display:flex;justify-content:space-between;align-items:center;color:#96929b;margin-top:21px;font-size:14px;padding:0 5px}
.app-nav .plus{background:#f4f1eb;color:#242129;height:24px;width:24px;border-radius:50%;display:grid;place-items:center}
.floating-note{font:600 10px Manrope,Arial,sans-serif;position:absolute;right:12px;bottom:10px;color:#484647;line-height:1.4;z-index:2}
.floating-note strong{font-family:Manrope,sans-serif;font-size:11px}
.floating-note span{font-size:25px;position:absolute;right:21px;bottom:-30px}
.statement{padding:120px 25px 134px;background:#ddd4c9;text-align:center;position:relative}
.statement>p:first-child{font:700 10px Manrope,Arial,sans-serif;text-transform:uppercase;letter-spacing:1px;color:#6a655e}
.statement h2,.section-intro h2{font-size:clamp(42px,5vw,70px);line-height:1.05;letter-spacing:-4px;margin:17px 0}
.statement-end{max-width:330px;color:#67625d;font-size:12px;line-height:1.6;margin:26px auto 0}
.features{padding:124px clamp(25px,8vw,130px)}
.section-intro{max-width:600px}
.section-intro>p:last-child{max-width:440px;color:var(--muted);font-size:14px;line-height:1.75;margin-top:25px}
.feature-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:15px;margin-top:58px}
.feature-card{min-height:400px;padding:27px;border-radius:14px;overflow:hidden;position:relative;display:flex;flex-direction:column}
.card-number,.plan-label{font:700 10px Manrope,Arial,sans-serif;letter-spacing:1px}
.feature-card h3{font-size:27px;line-height:1.1;letter-spacing:-1.7px;margin:15px 0}
.feature-card p:not(.card-number){font-size:12px;line-height:1.7;max-width:240px;color:#5e5b5e}
.lilac{background:#c7bdff;justify-content:space-between}
.chart-placeholder{height:162px;background:#eeeaff;border-radius:10px;padding:15px;color:#786ad8}
.chart-label{font:700 8px Manrope,Arial,sans-serif}
.chart-label b{float:right}
.chart-placeholder svg{width:100%;height:103px;margin-top:10px}
.days{display:flex;justify-content:space-between;font:600 8px Manrope,Arial,sans-serif;color:#9790be}
.coral{background:#ffab94}
.coral h3{margin-top:auto}
.breath-ring{font-size:125px;line-height:1;color:#f9c8b7;text-align:center;margin-top:30px}
.dark-card{background:#1d1e22;color:white}
.dark-card p:not(.card-number){color:#b3b3b8}
.signal-art{margin:68px auto 30px;height:65px;display:flex;align-items:center;gap:8px}
.signal-art i{width:7px;background:#dffc63;border-radius:9px}
.signal-art i:nth-child(1){height:18px}
.signal-art i:nth-child(2){height:39px}
.signal-art i:nth-child(3){height:64px}
.signal-art i:nth-child(4){height:38px}
.signal-art i:nth-child(5){height:20px}
.manifesto{background:#202025;color:#f5f4f0;text-align:center;min-height:580px;padding:100px 25px;position:relative;overflow:hidden}
.manifesto-orb{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:530px;height:530px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#a197ff 0,#413d75 42%,#202025 70%);opacity:.7}
.manifesto>*:not(.manifesto-orb){position:relative}
.light{color:#ceccd2;justify-content:center}
.light span{background:var(--lime)}
.manifesto h2{font-size:clamp(48px,6vw,78px);letter-spacing:-5px;line-height:1.03;margin:18px 0}
.manifesto>p:not(.eyebrow){max-width:385px;margin:0 auto 31px;color:#bbb9c1;font-size:13px;line-height:1.7}
.button-light{background:#f5f4f0;color:#1c1c20}
.pricing{padding:125px 25px 95px}
.center{text-align:center;margin:auto}
.center .eyebrow{justify-content:center}
.center>p:last-child{margin:20px auto}
.price-card{max-width:920px;margin:52px auto 0;border:1px solid var(--line);border-radius:14px;padding:37px 40px;display:flex;align-items:center;justify-content:space-between;background:#f9f8f5}
.price-card h3{font-size:28px;letter-spacing:-1.8px;line-height:1.2;margin:15px 0 0}
.price-action{text-align:right}
.price-action p{font-size:12px;margin-bottom:14px}
.price-action p strong{font-size:28px;letter-spacing:-1px}
.price-action small{display:block;color:#777;font-size:9px;margin-top:12px}
footer{border-top:1px solid var(--line);padding:28px clamp(24px,5vw,76px);display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#777}
footer p{margin:0}
footer div{display:flex;gap:15px}
footer a:hover{text-decoration:underline}

/* Visual language aligned with the Metahuman OS product interface. */
.site-header{background:rgba(247,249,255,.92)}
.brand{height:42px}.brand img{display:block;width:42px;height:42px;object-fit:contain;mix-blend-mode:multiply}
.header-cta,.button-dark{background:#087af5;box-shadow:0 8px 18px #087af52b}
.eyebrow span{background:#087af5}
.orb-one{background:radial-gradient(circle at 64% 25%,#dbeaff 0,#8babed 34%,#315dc1 69%,#172f68 100%)}
.orb-two{background:#dce8ff;mix-blend-mode:screen;opacity:.72}
.hero-visual{display:flex;align-items:flex-end;justify-content:flex-end}
.hero-mockup{position:relative;z-index:1;display:block;width:135%;max-width:none;height:auto;object-fit:contain;filter:drop-shadow(0 24px 28px rgba(8,31,80,.16))}
@media(min-width:761px){.hero{padding-right:0}.hero-visual{margin-right:-20px}.hero-mockup{width:150%}}
.phone{background:linear-gradient(160deg,#020914 0%,#071d4c 100%);border-color:#172546;box-shadow:0 31px 44px #12357852}
.app-header{color:#b9c9ec}.app-header button{background:#14346c}.focus-card{background:linear-gradient(130deg,#0784ff,#2c56bd)}
.focus-card .arrow{border-color:#b8d8ff}.metrics>div,.progress{background:#112a5a}.progress i{background:#31528a}.progress em{background:#38a2ff}.purple{color:#6fb7ff}.green{color:#66d6a6}.app-nav .plus{background:#fff;color:#087af5}
.statement{background:linear-gradient(135deg,#e3ecff,#f8faff 58%,#dbe8ff)}
.statement>p:first-child{color:#3977e9}.lilac{background:#dce9ff}.chart-placeholder{background:#f9fbff;color:#087af5}.days{color:#7d91bd}.coral{background:#dfeaff}.breath-ring{color:#8ab7ff}.dark-card{background:linear-gradient(145deg,#020914,#123579)}.signal-art i{background:#54a8ff}.manifesto{--parallax-x:center;--parallax-y:0px;display:flex;align-items:center;justify-content:flex-end;background-image:url('assets/proyectos.jpg');background-position:var(--parallax-x) calc(50% + var(--parallax-y));background-size:cover}.manifesto-projects{--parallax-x:70%}.manifesto-orb{display:none}.manifesto-content{position:relative;z-index:1;width:min(46%,620px);margin:0 7% 0 0;padding:58px 54px;border:0;border-radius:0;background:rgba(255,255,255,.01);color:#171719;text-align:left;box-shadow:none;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}.manifesto-content .light{justify-content:flex-start;color:#263142}.manifesto-content h2{margin-top:17px;color:#15171b}.manifesto-content>p:not(.eyebrow){margin-left:0;color:#263142}.manifesto-content .button-light{background:rgba(255,255,255,.78);box-shadow:0 7px 18px rgba(20,40,70,.14)}.light span{background:#54a8ff}.button-light{color:#087af5}.price-card{background:#fff;border-color:#dbe5f5}.floating-note{color:#1b4a9d}
.project-feature{background:#dfeaff}
@media(max-width:760px){.site-header{height:65px;padding:0 20px}
.nav,.header-cta{display:none}
.menu-button{display:flex;flex-direction:column;gap:5px;border:0;background:none;padding:7px}
.menu-button span{width:21px;height:1.5px;background:var(--ink)}
.nav.open{display:flex;position:absolute;top:65px;left:0;right:0;margin:0;padding:20px;gap:20px;background:var(--paper);border-bottom:1px solid var(--line)}
.hero{grid-template-columns:1fr;padding:65px 26px 30px;text-align:center}
.hero-copy .eyebrow,.hero-actions,.social-proof{justify-content:center}
.hero-text{margin-left:auto;margin-right:auto}
.social-proof{margin-top:45px}
.hero-visual{height:460px;margin-top:20px;transform:scale(.9)}
h1{letter-spacing:-3px}
.statement{padding:90px 20px}
.features{padding:85px 20px}
.feature-grid{grid-template-columns:1fr;margin-top:37px}
.feature-card{min-height:335px}
.feature-large{min-height:395px}
.manifesto{min-height:520px;padding-top:92px}
.manifesto-orb{width:450px;height:450px}
.price-card{padding:28px;display:block;text-align:center}
.price-action{text-align:center;margin-top:28px}
footer{flex-direction:column;gap:20px;text-align:center}
.floating-note{right:0}
.orb-two{right:-20px}
}

.pricing{background:linear-gradient(180deg,#f7f9ff 0%,#edf4ff 100%)}
.billing-toggle{display:flex;align-items:center;gap:5px;width:max-content;max-width:100%;margin:39px auto 54px;padding:6px;border-radius:999px;background:#e1e9f5;box-shadow:inset 0 1px 3px #91a6c633}
.billing-option{appearance:none;border:0;border-radius:999px;background:transparent;color:#71809a;font:700 12px Manrope,Arial,sans-serif;letter-spacing:.7px;text-transform:uppercase;padding:13px 22px;cursor:pointer;transition:.22s ease;white-space:nowrap}
.billing-option.active{color:#21324b;background:#fff;box-shadow:0 2px 7px #6277964d}.billing-option span{display:inline-block;margin-left:8px;padding:4px 8px;border-radius:999px;background:#d9fae7;color:#26a965;font-size:9px;letter-spacing:.3px}
.plans-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;max-width:1120px;margin:0 auto}.plan-card{position:relative;display:flex;flex-direction:column;min-height:620px;background:#fff;border:1px solid #dfe7f3;border-radius:28px;padding:44px 48px 38px;box-shadow:0 20px 40px #274c8720}.plan-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.plan-heading p{margin:0;color:#2878f2;font-size:18px;letter-spacing:.8px;text-transform:uppercase}.plan-heading span{padding:6px 14px;border-radius:6px;background:#dceaff;color:#2878f2;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}.studio .plan-heading p{color:#7948ee}.studio .plan-heading span{background:#eee4ff;color:#7948ee}.popular-badge{position:absolute;top:-18px;right:44px;padding:8px 23px;border:1px solid #e1e7f1;border-radius:999px;background:#fff;box-shadow:0 3px 7px #48618e26;color:#52627a;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}.plan-price{display:flex;align-items:baseline;gap:9px;margin-top:24px}.plan-price strong{font-size:58px;line-height:1;letter-spacing:-4px;font-weight:600}.plan-price small{color:#697b97;font-size:15px}.billing-copy{margin:11px 0 30px;color:#71809a;font-size:12px}.plan-description{min-height:58px;margin:0;color:#53637a;font-size:14px;line-height:1.55}.plan-divider{height:1px;background:#e8edf5;margin:29px 0}.includes-label{margin:0 0 16px;color:#2878f2;font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase}.studio .includes-label{color:#7948ee}.plan-features{display:grid;gap:14px;padding:0;margin:0;list-style:none;color:#46566e;font-size:13px;line-height:1.45}.plan-features li{position:relative;padding-left:27px}.plan-features li::before{content:'✓';position:absolute;left:1px;top:0;color:#2878f2;font-size:17px;line-height:1}.studio .plan-features li::before{color:#7948ee}.plan-button{margin-top:auto;display:flex;justify-content:center;align-items:center;gap:8px;border-radius:999px;padding:16px 20px;font-size:12px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;transition:transform .2s ease,box-shadow .2s ease}.plan-button:hover{transform:translateY(-2px)}.plan-button-light{background:#d7e6ff;color:#2878f2}.plan-button-dark{background:linear-gradient(100deg,#6b61ed,#4837ef);box-shadow:0 8px 16px #5847df4d;color:white}
@media(max-width:760px){.billing-toggle{margin:30px auto 36px}.billing-option{padding:11px 13px;font-size:10px}.billing-option span{display:none}.plans-grid{grid-template-columns:1fr;gap:30px}.plan-card{min-height:0;padding:32px 26px 28px;border-radius:22px}.plan-heading p{font-size:16px}.plan-price strong{font-size:51px}.plan-description{min-height:0}.popular-badge{right:25px;top:-16px;font-size:9px;padding:7px 15px}.plan-features{margin-bottom:32px}.plan-button{margin-top:0}}
@media(max-width:760px){.manifesto{justify-content:center;min-height:560px}.manifesto-content{width:calc(100% - 40px);margin:0;padding:34px 24px 38px;border-radius:0}.manifesto-content h2{font-size:48px;letter-spacing:-3px}}

.manifesto{padding:0}
.manifesto-content{align-self:stretch;display:flex;flex-direction:column;justify-content:center;width:min(33%,420px);margin:0;padding:52px 34px}
@media(max-width:760px){.manifesto{padding:0}.manifesto-content{width:calc(100% - 40px);padding:34px 24px 38px}}

/* Landing page type scale: title, body, and caption only. */
:root{--type-title:48px;--type-text:16px;--type-caption:12px;--type-tracking:-.02em}
body,body *{letter-spacing:var(--type-tracking)!important}
h1,.statement h2,.section-intro h2,.feature-card h3,.manifesto h2,.price-card h3,.plan-price strong{font-size:var(--type-title);line-height:1.05}
.hero-text,.statement-end,.section-intro>p:last-child,.feature-card p:not(.card-number),.manifesto>p:not(.eyebrow),.manifesto-content>p:not(.eyebrow),.plan-description,.plan-features,.billing-copy,.plan-price small,.price-action p,.social-proof,footer{font-size:var(--type-text);line-height:1.55}
.nav a,.open-app,.eyebrow,.button,.text-link,.card-number,.plan-label,.billing-option,.billing-option span,.plan-heading p,.plan-heading span,.popular-badge,.includes-label,.plan-button,.price-action small{font-size:var(--type-caption)}
@media(max-width:760px){:root{--type-title:40px}}

.statement{background-image:url('assets/creadores.jpg');background-position:center;background-size:cover;color:#fff}
.statement>p:first-child,.statement h2,.statement-end{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.manifesto-projects{justify-content:flex-start}
.statement-logo{display:block;width:42px;height:42px;margin:0 auto 20px;object-fit:contain;border-radius:10px}
.statement-cta{margin-top:28px;background:#fff;color:#087af5;box-shadow:0 8px 20px rgba(0,0,0,.25)}

/* The creators photograph moves inside a clipped layer, matching the feature parallax. */
.statement{--parallax-y:0px;position:relative;overflow:hidden;isolation:isolate;background-image:none}
.statement::before{content:'';position:absolute;inset:-40px 0;background:url('assets/creadores.jpg') center/cover no-repeat;transform:translate3d(0,var(--parallax-y),0);will-change:transform;pointer-events:none;z-index:0}
.statement>*{position:relative;z-index:1}

/* Keep the moving image inside its own clipped layer so the glass panels never drift. */
.manifesto{background-image:none;isolation:isolate}
.manifesto::before{content:'';position:absolute;inset:-40px 0;background-image:url('assets/proyectos.png');background-position:var(--parallax-x) center;background-size:cover;transform:translate3d(0,var(--parallax-y),0);will-change:transform;pointer-events:none;z-index:0}
.manifesto-growth{background:#e8edf6}
.manifesto-growth::before{display:block;background-image:url('assets/proyectos.png')}
.manifesto-growth .manifesto-content{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
/* Keep breathing room on the exterior edges of the opposing feature panels. */
.manifesto-growth .manifesto-content{padding-right:64px}
.manifesto-projects .manifesto-content{padding-left:64px}
@media(max-width:760px){.manifesto-growth .manifesto-content,.manifesto-projects .manifesto-content{padding-left:24px;padding-right:24px}}

/* On narrower screens, slide the wide laptop mockup away from the text column. */
.manifesto-growth{--parallax-x:50%}
.manifesto-projects::before{background-image:url('assets/budget.png')}
.manifesto-projects{background:#fff}
.manifesto-projects .manifesto-content{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;color:#171719}
.manifesto-projects .manifesto-content h2{color:#15171b}
.manifesto-projects .manifesto-content>p:not(.eyebrow),.manifesto-projects .manifesto-content .light{color:#263142}
@media(max-width:1200px){.manifesto-growth{--parallax-x:40%}}
@media(max-width:1024px){.manifesto-growth{--parallax-x:30%}}
@media(max-width:760px){.manifesto-growth{--parallax-x:20%}}
@media(max-width:760px){.hero-visual{display:flex;align-items:center;justify-content:center}.hero-mockup{width:100%;max-width:100%}}

/* Use the desktop mockup as a clipped, edge-aligned background layer. */
@media(min-width:761px){
  .hero{--parallax-y:0px;position:relative;overflow:hidden}
  .hero::before{content:'';position:absolute;inset:-60px -60px -60px -20px;background-image:url('assets/metahuman-os-macbook-mockup.png');background-repeat:no-repeat;background-position:right -20px bottom 60px;background-size:min(1300px,88vw) auto;transform:translate3d(0,var(--parallax-y),0);will-change:transform;pointer-events:none}
  .hero-copy{position:relative;z-index:1}
  .hero-visual{display:none}
}
@media(min-width:1321px){.hero{max-width:none;width:100%;padding-left:calc((100vw - 1320px)/2 + 50px)}}
@media(max-width:760px){.hero-visual{display:none}}

/* Apfel Grotezk: Mittel for display/caption typography, Regular everywhere else. */
body,button,input{font-family:'Apfel Grotezk',Arial,sans-serif;font-weight:400}
h1,h2,h3,.plan-price strong,.eyebrow,.statement>p:first-child,.card-number,.plan-label,.app-header,.focus-label,.metrics small,.chart-label,.days,.floating-note,.floating-note strong,.button,.text-link,.open-app,.billing-option,.billing-option span,.plan-heading p,.plan-heading span,.popular-badge,.includes-label,.plan-button{font-family:'Apfel Grotezk Mittel',Arial,sans-serif;font-weight:500}

/* Three plan tiers, including the no-cost trial tier. */
.plans-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.plan-card{min-width:0;padding:38px 34px 32px}
.plan-card.free{background:#f7faff}
.free .plan-heading p,.free .includes-label{color:#087af5}
.free .plan-heading span{background:#e1efff;color:#087af5}
.plan-button-free{background:#087af5;color:#fff;box-shadow:0 8px 16px rgba(8,122,245,.22)}
@media(max-width:1050px) and (min-width:761px){.plans-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.plan-card.free{grid-column:1 / -1;min-height:0}.plan-card{padding:36px}}
@media(max-width:760px){.plans-grid{grid-template-columns:1fr}.plan-card{padding:32px 26px 28px}}

/* FAQ */
.faq{padding:118px 25px;background:#fff;color:#171719}
.faq-inner{width:min(100%,1120px);margin:0 auto}
.faq h2{margin:0 0 64px}
.faq-list{border-top:1px solid #d5d8dd}
.faq details{border-bottom:1px solid #d5d8dd}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:27px 0;cursor:pointer;list-style:none;color:#171719;font-family:'Apfel Grotezk Mittel',Arial,sans-serif;font-size:var(--type-text);font-weight:500;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{flex:0 0 auto;color:#6d7178;font-size:30px;line-height:.6;transition:transform .2s ease}
.faq details[open] summary span{transform:rotate(180deg)}
.faq details p{max-width:720px;margin:0;padding:0 48px 26px 0;color:#4e5b70;font-size:var(--type-text);line-height:1.55}
@media(max-width:760px){.faq{padding:80px 20px}.faq h2{margin-bottom:42px}.faq summary{padding:22px 0}.faq details p{padding-bottom:22px}}

/* Navigation uses the same text size as the footer. */
.site-header .nav a,.site-header .open-app{font-size:var(--type-text)}

/* Tighter transitions into the budget features and pricing sections. */
.features-secondary{padding-top:80px}
.pricing{padding-top:78px}
@media(max-width:760px){.features-secondary{padding-top:60px}.pricing{padding-top:62px}}

/* Image-led feature cards. Each card image is set directly with its <img src="…"> in index.html. */
.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.feature-card,.feature-card.dark-card{min-height:0;padding:0;background:#fff;color:#171719;border:1px solid #dce4f0;border-radius:16px;box-shadow:0 12px 28px rgba(32,55,88,.08);display:flex;flex-direction:column}
.feature-image{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;background:#e8edf6;border-bottom:1px solid #dce4f0}
.feature-content{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:24px}
.feature-card .card-number{margin:0 0 14px;color:#087af5}
.feature-card h3{margin:0 0 16px;color:#171719}
.feature-card p:not(.card-number){max-width:none;margin:0;color:#263142}
@media(max-width:760px){.feature-grid{grid-template-columns:1fr;gap:16px}.feature-content{padding:22px}.feature-image{aspect-ratio:16/10}}