:root{--navy:#0d1428;--navy-2:#102035;--ink:#101426;--muted:#637089;--line:#dfe8e4;--cream:#f5faf8;--blue:#00a76f;--blue-2:#008f60;--mint:#00d891;--violet:#00b97a;--coral:#ff8775;--white:#fff;--radius:20px;--shadow:0 24px 70px rgba(6,67,48,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font:400 16px/1.65 "DM Sans",sans-serif;background:#fff;overflow-x:hidden}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}img{max-width:100%}.container{width:min(1180px,calc(100% - 40px));margin:auto}.section{padding:120px 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:16px;top:-80px;background:white;padding:12px 20px;z-index:9999;border-radius:8px}.skip-link:focus{top:16px}.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none}
.site-header{position:fixed;z-index:1000;top:0;left:0;width:100%;padding:17px 0;transition:.25s;color:#fff}.site-header.scrolled{background:rgba(7,21,46,.94);box-shadow:0 5px 24px rgba(0,0,0,.14);backdrop-filter:blur(16px);padding:11px 0}.nav-shell{width:min(1240px,calc(100% - 40px));margin:auto;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:9px;font:800 21px/1 "Manrope",sans-serif;letter-spacing:-.7px}.brand>span:last-child>span{color:#6d79ff}.brand-mark{width:28px;height:28px;display:flex;gap:2px;align-items:end;justify-content:center;padding:5px;border-radius:8px;background:linear-gradient(145deg,#6260f8,#4269ed);transform:rotate(-4deg)}.brand-mark i{display:block;width:4px;background:#fff;border-radius:2px}.brand-mark i:nth-child(1){height:9px}.brand-mark i:nth-child(2){height:15px}.brand-mark i:nth-child(3){height:12px}.site-nav{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:600}.site-nav>a{color:#bec9dc;transition:.2s}.site-nav>a:hover,.site-nav>a.active{color:#fff}.nav-actions{display:flex;align-items:center;gap:22px;margin-left:18px}.text-link{color:#fff}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:11px;padding:13px 22px;background:linear-gradient(135deg,#6866f7,#4b62ec);color:#fff!important;font-weight:700;box-shadow:0 10px 26px rgba(71,80,231,.28);transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(71,80,231,.38)}.button-small{padding:11px 18px}.button-large{padding:16px 24px}.button-ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.23);box-shadow:none}.button-dark{background:var(--navy);box-shadow:0 14px 28px rgba(7,21,46,.2)}.button-white{background:#fff;color:#3d47d8!important}.button-outline-light{background:transparent;border:1px solid rgba(255,255,255,.5);box-shadow:none}.menu-toggle{display:none;background:none;border:0;padding:6px}.menu-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px}
.hero{position:relative;min-height:930px;padding:174px 0 42px;color:#fff;background:radial-gradient(circle at 73% 32%,rgba(83,74,230,.24),transparent 32%),linear-gradient(140deg,#07142c 0%,#0b1a3b 58%,#101b46 100%);overflow:hidden}.hero:after{content:"";position:absolute;bottom:-80px;left:-5%;width:110%;height:145px;background:#fff;border-radius:50% 50% 0 0/38% 38% 0 0}.hero-glow{position:absolute;border-radius:50%;filter:blur(2px);opacity:.6}.glow-one{width:370px;height:370px;right:-170px;top:190px;background:radial-gradient(circle,rgba(48,104,255,.32),transparent 67%)}.glow-two{width:320px;height:320px;left:-220px;top:430px;background:radial-gradient(circle,rgba(54,214,180,.17),transparent 68%)}.hero-grid{display:grid;grid-template-columns:.84fr 1.25fr;gap:62px;align-items:center;position:relative;z-index:2}.announcement{display:inline-flex;align-items:center;gap:9px;padding:6px 13px 6px 7px;border:1px solid rgba(255,255,255,.15);border-radius:100px;color:#cbd6ed;font-size:12px;font-weight:600;background:rgba(255,255,255,.04)}.announcement span{padding:3px 8px;background:#5d5af5;color:#fff;border-radius:100px;font-size:10px;text-transform:uppercase;letter-spacing:.8px}.announcement b{font-size:16px}.hero h1,.section-heading h2,.split-heading h2,.feature-copy h2,.ai-copy h2,.faq-heading h2,.final-cta h2{font:800 clamp(42px,5.1vw,70px)/1.06 "Manrope",sans-serif;letter-spacing:-3.5px;margin:25px 0 24px}.hero h1 em,.section-heading h2 em,.split-heading h2 em,.feature-copy h2 em,.ai-copy h2 em,.faq-heading h2 em{font-style:normal;color:#6f7cfb}.hero-lede{font-size:18px;line-height:1.7;color:#b8c5dc;max-width:600px}.hero-actions{display:flex;gap:13px;margin-top:32px}.benefit-row{display:flex;gap:24px;list-style:none;padding:0;margin:26px 0;color:#aebbd2;font-size:12px}.benefit-row li:before{content:"✓";color:#63ddb4;margin-right:7px}.hero-product{position:relative;perspective:1200px}.app-window{width:730px;background:#f7f9fd;border:1px solid rgba(255,255,255,.24);border-radius:15px;box-shadow:0 40px 100px rgba(0,0,0,.5);overflow:hidden;transform:rotateY(-3deg) rotateX(1deg)}.app-top{height:47px;background:#0b1a34;display:flex;align-items:center;padding:0 14px;color:#8492ac;font-size:10px}.dots{display:flex;gap:5px}.dots i{width:7px;height:7px;border-radius:50%;background:#ff6c69}.dots i:nth-child(2){background:#f8c342}.dots i:nth-child(3){background:#38ca7a}.mini-logo{margin-left:38px;background:#615ff0;color:#fff;font-weight:800;padding:4px 6px;border-radius:5px}.app-tabs{display:flex;gap:26px;margin:auto}.app-tabs b{color:#fff;position:relative}.app-tabs b:after{content:"";position:absolute;left:0;right:0;height:2px;background:#6066f5;bottom:-16px}.app-top button{border:0;border-radius:5px;background:#5b5ff1;color:#fff;padding:6px 12px;font-size:9px}.builder{display:grid;grid-template-columns:145px 1fr 145px;min-height:480px}.component-panel,.settings-panel{background:#f0f3f8;padding:16px 12px;color:#39455a}.component-panel small,.settings-panel small{font-weight:800;color:#8c96a7;font-size:7px;letter-spacing:1px}.component-search{background:#fff;border:1px solid #e2e6ee;padding:8px;border-radius:6px;color:#a2a9b7;font-size:9px;margin:9px 0 13px}.component-panel p{font-size:7px;font-weight:700;text-transform:uppercase;color:#8b94a6;margin:12px 0 7px}.component{background:#fff;border:1px solid #e1e6ef;margin:5px 0;padding:7px;border-radius:5px;font-size:9px}.component i{display:inline-flex;width:18px;color:#5b63df;font-style:normal;font-weight:700}.builder-canvas{padding:22px 20px;background:white;margin:13px 0;box-shadow:0 3px 15px rgba(40,50,80,.08)}.canvas-head{display:flex;justify-content:space-between;align-items:center;color:#7c879a;font-size:8px}.canvas-head span{font-weight:700;color:#26334a}.builder-canvas h3{font:700 18px Manrope;margin:28px 0 3px;color:#12203b}.builder-canvas>p{font-size:9px;color:#818ba0;margin:0 0 21px}.builder-canvas>label{display:flex;justify-content:space-between;font-size:9px;font-weight:700;color:#354159}.builder-canvas>label span{font-size:10px}.range{height:4px;background:#e7eaf0;border-radius:10px;margin:10px 0 17px;overflow:visible}.range i{display:block;height:100%;background:#645ff1;border-radius:10px;position:relative}.range i:after{content:"";position:absolute;right:-3px;top:-3px;width:10px;height:10px;border-radius:50%;background:#645ff1;box-shadow:0 0 0 3px #deddfc}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.two-fields label{font-size:8px;color:#717c8f}.two-fields strong{display:block;border:1px solid #e2e6ed;border-radius:5px;padding:7px;color:#253249;margin-top:3px}.result-box{margin-top:21px;padding:16px;background:linear-gradient(140deg,#effcf8,#f0f4ff);border:1px solid #dbeee8;border-radius:9px}.result-box small{display:block;color:#6e7a8c;font-size:7px;font-weight:700}.result-box strong{display:block;font:700 25px Manrope;color:#116d5a;margin:4px 0}.result-box sup{font-size:12px}.result-box span{font-size:8px;color:#6a7586}.settings-panel{padding-top:18px}.formula{display:flex;gap:6px;background:#101e38;color:#cbd5e7;padding:9px 7px;border-radius:6px;margin:8px 0 16px}.formula span{color:#818bf5}.formula code{font-size:7px;line-height:1.8}.live-result{font-size:8px;background:#e7f8f0;padding:7px;border-radius:5px;color:#21745c;margin:7px 0 100px}.live-result i{display:inline-block;width:6px;height:6px;background:#49c797;border-radius:50%;margin-right:4px}.sheet-mini{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e0e5ee;padding:9px;border-radius:7px}.sheet-mini b{color:#1ea465;font-size:18px}.sheet-mini span{font-size:8px;font-weight:700}.sheet-mini small{display:block;color:#33ae78;letter-spacing:0}.floating-pill{position:absolute;z-index:4;padding:10px 14px;background:#fff;color:#17243c;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.3);font-size:10px;font-weight:700}.floating-pill span{color:#5964f3}.pill-form{left:-35px;top:175px}.pill-sheet{right:-20px;bottom:58px}.pill-sheet span{color:#25ae72}.trusted{position:relative;z-index:3;margin-top:100px;color:#6e7d99;text-align:center}.trusted>span{font-size:10px;text-transform:uppercase;letter-spacing:1.4px}.trusted>div{display:flex;justify-content:space-around;margin-top:21px;color:#9ea9bd;letter-spacing:1.5px;font-size:13px}
.section-heading{max-width:750px;margin:0 auto 58px}.section-heading.centered{text-align:center}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:#5661e7}.section-heading h2,.split-heading h2,.feature-copy h2,.ai-copy h2,.faq-heading h2{font-size:clamp(36px,4vw,55px);letter-spacing:-2.7px;margin:16px 0 20px}.section-heading p,.split-heading p,.feature-copy>p,.ai-copy>p,.faq-heading>p{color:var(--muted);font-size:17px}.type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.type-card{position:relative;min-height:490px;padding:27px 25px;border:1px solid #e7eaf0;border-radius:18px;overflow:hidden;transition:.25s}.type-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.type-card:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-70px;top:-80px;background:var(--card-soft)}.type-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--card-soft);color:var(--card);font-size:20px}.type-card h3{font:700 23px Manrope;margin:19px 0 9px}.type-card>p{font-size:14px;color:var(--muted);min-height:70px}.type-card>a,.arrow-link,.ai-copy>a{color:var(--card,var(--blue));font-weight:700;font-size:14px}.type-card>a span,.arrow-link span,.ai-copy>a span{display:inline-block;margin-left:6px;transition:.2s}.type-card>a:hover span,.arrow-link:hover span,.ai-copy>a:hover span{transform:translateX(4px)}.blue{--card:#5260ea;--card-soft:#eef0ff}.violet{--card:#8963e9;--card-soft:#f3edff}.mint{--card:#159e78;--card-soft:#e7faf4}.coral{--card:#e46655;--card-soft:#fff0ed}.mini-ui{position:absolute;left:25px;right:25px;bottom:25px;border:1px solid #e2e6ee;border-radius:12px;background:#fff;padding:15px;box-shadow:0 15px 30px rgba(20,30,60,.08)}.form-ui{font-size:8px}.form-ui label{display:block;color:#6d778a;margin:4px 0}.form-ui div{padding:7px 9px;border:1px solid #e4e7ed;border-radius:4px;font-size:9px}.form-ui button{width:100%;border:0;background:#5964ed;color:#fff;padding:8px;border-radius:4px;margin-top:8px;font-size:8px}.form-ui .select{display:flex;justify-content:space-between}.calc-ui>span{font-size:8px;color:#6e7789}.calc-ui>b{display:block;font:700 18px Manrope}.mini-result{background:#f4efff;border-radius:7px;padding:9px 11px;margin-top:13px}.mini-result small{font-size:7px;color:#7d728e}.mini-result strong{display:block;font-size:18px;color:#774fdb}.bars{height:80px;display:flex;align-items:end;justify-content:space-around;border-bottom:1px solid #ddd}.bars i{width:14px;background:linear-gradient(#57d9b0,#2ba680);border-radius:3px 3px 0 0}.bars i:nth-child(1){height:30%}.bars i:nth-child(2){height:52%}.bars i:nth-child(3){height:44%}.bars i:nth-child(4){height:70%}.bars i:nth-child(5){height:63%}.bars i:nth-child(6){height:90%}.legend{display:flex;justify-content:space-between;font-size:7px;color:#6d788a;margin-top:9px}.lead-ui{display:flex;align-items:center;gap:10px}.avatar{width:32px;height:32px;background:#ffe2dc;color:#dc6b5a;display:grid;place-items:center;border-radius:50%;font-size:10px;font-weight:700}.lead-ui>div:nth-child(2){display:flex;flex-direction:column}.lead-ui small{font-size:6px;color:#df7162}.lead-ui b{font-size:10px}.lead-ui span{font-size:7px;color:#7b8495}.lead-ui>i{margin-left:auto;background:#e4faf1;color:#20a474;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-style:normal}
.dark-section{background:linear-gradient(145deg,#07152e,#0d2145);color:#fff}.split-heading{display:grid;grid-template-columns:1.1fr .8fr;gap:120px;align-items:end;margin-bottom:58px}.split-heading h2{margin-bottom:0}.split-heading p{color:#aebbd2}.eyebrow.light{color:#8995ff}.builder-showcase{display:grid;grid-template-columns:210px 1fr 210px;min-height:560px;background:#eff2f7;border:1px solid rgba(255,255,255,.15);border-radius:17px;box-shadow:0 30px 70px rgba(0,0,0,.3);overflow:hidden;color:#26334b}.showcase-sidebar,.showcase-settings{padding:22px 16px;background:#f7f9fc}.showcase-sidebar>b,.showcase-settings>b{display:block;font:700 13px Manrope;margin-bottom:15px}.showcase-search{font-size:9px;padding:10px;background:white;border:1px solid #e0e5ed;border-radius:6px;color:#a0a8b8;margin-bottom:17px}.showcase-sidebar small,.showcase-settings small{display:block;font-size:7px;letter-spacing:1px;color:#9099a8;font-weight:800;margin:14px 0 7px}.showcase-items{display:grid;grid-template-columns:1fr 1fr;gap:7px}.showcase-items span{display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid #e1e5ec;border-radius:6px;padding:9px;font-size:8px}.showcase-items i{color:#5c62ed;font-style:normal;font-weight:700;font-size:12px}.showcase-canvas{background:#e8ecf3}.canvas-toolbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#fff;font-size:9px;border-bottom:1px solid #e2e6ed}.canvas-toolbar>b,.canvas-toolbar b{background:#5b60eb;color:white;padding:6px 10px;border-radius:5px}.renovation-card{width:78%;margin:38px auto;padding:30px;background:#fff;border-radius:8px;box-shadow:0 7px 30px rgba(30,40,70,.08)}.tiny-badge{color:#5c62eb;font-size:7px;font-weight:800;letter-spacing:1px}.renovation-card h3{font:700 21px Manrope;margin:7px 0 2px}.renovation-card>p{font-size:9px;color:#7e8797;margin-top:0}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.renovation-card label{font-size:8px;font-weight:700;margin-top:15px;display:block}.field-row span{display:block;border:1px solid #dde2e9;border-radius:5px;padding:9px;margin-top:4px;font-weight:500;color:#535d70}.quality{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:5px}.quality span{border:1px solid #dfe3e9;padding:9px;border-radius:5px;font-size:8px;text-align:center}.quality .selected{border-color:#6866ee;background:#f1f1ff;color:#514ee2}.quality i{font-style:normal}.drop-zone{border:1px dashed #6e73ee;background:#f4f3ff;color:#5659de;border-radius:5px;text-align:center;padding:14px;margin-top:20px;font-size:8px}.showcase-settings>div{background:#fff;border:1px solid #e1e5ec;border-radius:5px;padding:8px;font-size:9px}.showcase-settings p{background:#fff;border:1px solid #e1e5ec;border-radius:5px;padding:7px;font-size:8px;margin:5px 0}.showcase-settings p i{float:right;font-style:normal}.showcase-settings button{border:0;background:transparent;color:#5d62e9;font-size:8px;font-weight:700}.color-row{display:flex;gap:8px;align-items:center}.color-row i{width:18px;height:18px;background:#635bff;border-radius:4px}.micro-features{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:45px}.micro-features>div{display:flex;gap:16px}.micro-features b{font:700 12px Manrope;color:#6773ee}.micro-features span{color:#8190aa;font-size:12px}.micro-features strong{display:block;color:#fff;font:700 14px Manrope;margin-bottom:4px}
.feature-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:110px;align-items:center}.check-list{list-style:none;padding:0;margin:27px 0}.check-list li{margin:11px 0;font-weight:600;font-size:14px}.check-list li:before{content:"✓";display:inline-grid;place-items:center;width:21px;height:21px;margin-right:11px;background:#e8faf4;color:#18a277;border-radius:50%;font-size:11px}.formula-demo{border:1px solid #e0e5ed;border-radius:18px;background:#fff;box-shadow:var(--shadow);overflow:hidden}.demo-top{padding:15px 19px;border-bottom:1px solid #e1e5ec;display:flex;justify-content:space-between;font-size:11px}.demo-top i{font-style:normal;background:#6263ed;color:#fff;border-radius:5px;padding:3px 5px}.demo-top b{color:#1aa375;font-size:9px}.code-editor{background:#0c1a35;color:#dce5f3;padding:24px}.line{display:flex;gap:20px;font-size:15px}.line i{font-style:normal;color:#526079}.line em{color:#8e8aff;font-style:normal}.line b{color:#62d3b1}.field-chips{padding:17px 20px;display:flex;gap:7px;border-bottom:1px solid #e5e8ee}.field-chips span{padding:7px 9px;border-radius:5px;background:#f2f3ff;color:#5055cf;font:600 8px monospace}.field-chips i{font-style:normal;color:#828da0;margin-left:4px}.output{padding:24px;display:flex;align-items:center;justify-content:space-between}.output small{display:block;font-size:8px;color:#8b94a3;font-weight:700}.output strong{font:700 35px Manrope;color:#10213e;display:block}.output sup{font-size:15px}.output span{font-size:9px;color:#768196}.pulse-ring{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#e5faf3;color:#1cac7d;box-shadow:0 0 0 9px #f1fcf8}
.ai-section{background:#f5f4ff}.ai-card{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;padding:65px;background:linear-gradient(135deg,#0d1b3b 0%,#171c54 100%);border-radius:28px;color:#fff;overflow:hidden;position:relative}.ai-card:after{content:"";position:absolute;width:400px;height:400px;border-radius:50%;background:rgba(98,87,247,.23);filter:blur(50px);right:-140px;top:-180px}.ai-copy{position:relative;z-index:2}.ai-badge{font-size:9px;letter-spacing:1.5px;color:#aeb4ff;border:1px solid rgba(139,142,255,.35);padding:7px 10px;border-radius:100px}.ai-copy h2{font-size:46px}.ai-copy p{color:#b8c4d9;font-size:15px}.ai-copy ul{list-style:none;padding:0;font-size:12px;color:#c9d3e5}.ai-copy li{margin:8px 0}.ai-copy li:before{content:"✦";color:#7e7ff8;margin-right:9px}.ai-copy>a{color:#9e9eff}.ai-copy>small{display:block;color:#687792;font-size:8px;margin-top:23px}.ai-demo{position:relative;z-index:2;padding-top:20px}.prompt-card,.generated-card{background:#fff;color:#14213c;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.25)}.prompt-card{padding:20px;width:88%;position:relative;z-index:2}.prompt-card>div{display:flex;gap:9px;align-items:center;font-size:11px}.ai-orb{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#eeeeff;color:#625ff0}.prompt-card p{font-size:11px;color:#5c677c;border:1px solid #e0e4eb;border-radius:8px;padding:12px}.prompt-card button{border:0;background:#625ff0;color:#fff;border-radius:6px;padding:9px 14px;font-size:9px;font-weight:700;float:right}.generated-card{width:87%;margin:-3px 0 0 auto;padding:55px 18px 18px;transform:rotate(2deg)}.generating{display:flex;align-items:center;gap:10px;background:#effcf7;border:1px solid #d9f4e9;border-radius:8px;padding:10px}.generating>span{color:#655ff0}.generating>div{display:flex;flex-direction:column;font-size:9px}.generating small{color:#769084}.generating>i{margin-left:auto;color:#19a575;font-style:normal}.generated-fields{padding:10px}.generated-fields span{display:flex;align-items:center;gap:8px;border-bottom:1px solid #edf0f4;padding:9px;font-size:8px}.generated-fields i{font-style:normal;background:#f0f1f7;width:18px;height:18px;display:grid;place-items:center;border-radius:4px}.generated-fields b{margin-left:auto;color:#6561ed}
.sheets-section{background:#fbfcfd}.eyebrow.green{color:#159d71}.sheet-flow{display:flex;align-items:center;justify-content:center;margin-top:55px}.flow-card{width:175px;padding:20px;background:#fff;border:1px solid #e1e6ed;border-radius:14px;text-align:center;position:relative;box-shadow:0 7px 24px rgba(15,29,60,.05)}.flow-card.brand-flow{border-color:#cfd0fa;background:#f8f8ff}.flow-number{position:absolute;top:8px;left:10px;color:#a4acb9;font-size:8px}.flow-icon{width:45px;height:45px;border-radius:11px;display:grid;place-items:center;margin:3px auto 9px;background:#eaf1ff;color:#5570e9;font-weight:800}.flow-icon.es{background:#625ff0;color:#fff}.flow-icon.sheets{background:#e3f8ef;color:#19a26e}.flow-icon.result{background:#fff2e8;color:#e98844}.flow-card b{display:block;font:700 12px Manrope}.flow-card small{font-size:8px;color:#8791a2}.connector{color:#abb3c1;margin:0 13px}.mapping-card{display:grid;grid-template-columns:1.1fr 100px .8fr;align-items:center;margin-top:55px;border:1px solid #e1e6ed;border-radius:17px;padding:24px;background:#fff;box-shadow:var(--shadow);max-width:860px}.sheet-table{border:1px solid #dfe5ec;border-radius:8px;overflow:hidden}.sheet-title{display:flex;align-items:center;gap:8px;padding:10px;font-size:9px}.sheet-title>span{color:#16a16e;font-size:19px}.sheet-title i{margin-left:auto;background:#e7f9f1;color:#17956a;border-radius:100px;padding:3px 7px;font-style:normal;font-size:7px}.cells{display:grid;grid-template-columns:25px 1.5fr 1fr 1fr 1fr;font-size:7px}.cells>*{min-height:23px;border-top:1px solid #e4e8ee;border-right:1px solid #e4e8ee;padding:5px;font-style:normal}.cells>b,.cells>i{background:#f4f6f8;text-align:center;color:#8490a1}.cells strong{color:#1a8c68}.cells em{color:#5860df}.mapping-lines span{display:block;height:1px;background:#94a0b2;margin:30px 0}.mapping-list>span{display:block;font-size:7px;font-weight:800;letter-spacing:1px;color:#98a1af;margin:11px 0 5px}.mapping-list>div{display:grid;grid-template-columns:1fr 20px 30px;align-items:center;border:1px solid #e3e7ed;border-radius:5px;padding:7px;font-size:8px;margin:5px 0}.mapping-list i{font-style:normal;color:#8d96a5}.mapping-list strong{color:#4e59df}.mapping-list .result-map{background:#effaf6;border-color:#d2eee4}.mapping-list .result-map strong{color:#159b70}.sheets-section .centered:last-child{margin-top:38px}.subnote{font-size:10px;color:#8791a3}
.how-section{background:#f4f6fa}.steps{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;padding:0;margin:80px 0 0;position:relative}.steps:before{content:"";position:absolute;top:39px;left:12%;right:12%;border-top:1px dashed #bdc5d2}.steps li{text-align:center;position:relative;padding:0 22px}.steps>li>span{position:absolute;top:-38px;left:50%;transform:translateX(-50%);font:700 9px Manrope;color:#9da6b5;background:#f4f6fa;padding:0 12px}.step-icon{width:77px;height:77px;margin:0 auto 22px;border-radius:22px;background:#fff;box-shadow:0 10px 30px rgba(20,33,65,.08);display:grid;place-items:center;font:700 25px Manrope;color:#5b62e7}.steps h3{font:700 16px Manrope;margin:0 0 7px}.steps p{font-size:12px;color:#748096;margin:0}.template-section .split-heading>div:last-child{text-align:right}.template-section .split-heading p{font-size:14px;margin-bottom:15px}.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.template-card{border:1px solid #e1e5ec;border-radius:16px;padding:10px 10px 18px;transition:.25s}.template-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.template-preview{height:245px;border-radius:11px;position:relative;padding:17px;overflow:hidden}.category{font-size:7px;letter-spacing:1px;font-weight:800;padding:5px 7px;border-radius:100px;background:rgba(255,255,255,.8)}.template-preview>div:not(.sun):not(.chart-lines){background:#fff;border-radius:10px;padding:18px;position:absolute;left:38px;right:38px;bottom:29px;box-shadow:0 15px 25px rgba(25,35,60,.12)}.template-preview small{font-size:8px;color:#7d8798}.template-preview strong{display:block;font:700 26px Manrope}.mortgage{background:linear-gradient(145deg,#e8ebff,#dfe7ff)}.mortgage strong{color:#4c59d8}.donut{position:absolute!important;width:55px;height:55px;border-radius:50%!important;background:conic-gradient(#6464eb 0 72%,#e3e5fb 72%)!important;left:auto!important;right:15px!important;bottom:14px!important;padding:0!important}.donut:after{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff}.solar{background:linear-gradient(145deg,#e5f9f2,#d8f3e9)}.solar .sun{position:absolute;right:31px;top:38px;font-size:50px;color:#f4b84e}.solar strong{color:#138961}.spark{color:#22a779;font-size:22px}.roi{background:linear-gradient(145deg,#fff0ea,#ffe6df)}.roi strong{color:#d4664e}.chart-lines{position:absolute;inset:50px 27px 60px;display:flex;align-items:end;gap:10px}.chart-lines i{flex:1;background:rgba(236,123,98,.3);border-radius:5px 5px 0 0}.chart-lines i:nth-child(1){height:22%}.chart-lines i:nth-child(2){height:42%}.chart-lines i:nth-child(3){height:62%}.chart-lines i:nth-child(4){height:88%}.template-card h3{font:700 17px Manrope;margin:15px 10px 3px}.template-card>p{font-size:11px;color:#758095;margin:0 10px 10px}.template-card>a{font-size:10px;font-weight:700;color:#5861df;margin:0 10px}
.embed-section{background:#0a1935;color:#fff}.embed-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:center}.embed-section .feature-copy p{color:#aebbd1}.platforms{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.platforms span{font-size:9px;font-weight:700;color:#a6b3c9;border:1px solid rgba(255,255,255,.13);border-radius:6px;padding:7px 10px}.embed-demo{position:relative}.website-wire{background:#f9fafc;border:1px solid #4d5870;border-radius:13px;overflow:hidden;color:#24324a;transform:rotate(2deg);box-shadow:0 30px 60px rgba(0,0,0,.32)}.wire-top{height:27px;background:#e9edf3;padding:8px}.wire-top i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#f17a73}.wire-top i:nth-child(2){background:#e4b84c}.wire-top i:nth-child(3){background:#53bd7c}.wire-top span{display:inline-block;background:#fff;border-radius:3px;width:50%;text-align:center;margin-left:20%;font-size:6px;color:#97a0af}.wire-nav{display:flex;align-items:center;gap:15px;padding:13px 22px;font-size:8px}.wire-nav i{width:27px;border-top:3px solid #dfe3e9}.wire-nav i:first-of-type{margin-left:auto}.wire-body{padding:28px 30px 40px;position:relative}.wire-body>i{display:block;width:35%;border-top:8px solid #e7eaf0;margin:9px}.wire-body>i:nth-child(2){width:55%;border-top-width:5px}.embed-box{width:62%;margin:23px auto 0;border:2px solid #6463ed;border-radius:8px;padding:18px;background:#fff;box-shadow:0 8px 22px rgba(38,49,80,.1)}.embed-box>span{font-size:7px;color:#6862ec;font-weight:800}.embed-box>strong{display:block;font:700 14px Manrope;margin:9px 0}.embed-box label{display:block;font-size:7px;margin-top:7px}.embed-box label b{display:block;border:1px solid #dfe4eb;border-radius:4px;padding:7px;margin-top:3px}.embed-box button{width:100%;border:0;background:#5f61ec;color:#fff;border-radius:4px;padding:8px;font-size:7px;margin-top:10px}.code-pill{position:absolute;bottom:-23px;left:-30px;background:#111f39;color:#d3dcec;border:1px solid #3a475e;border-radius:8px;padding:11px 14px;font:8px monospace;box-shadow:0 12px 30px rgba(0,0,0,.3)}.code-pill span{color:#55d5ab;margin-left:14px}
.faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:100px}.faq-heading{position:sticky;top:130px;align-self:start}.accordion details{border-bottom:1px solid #dfe4eb;padding:20px 0}.accordion summary{list-style:none;cursor:pointer;font:700 16px Manrope;display:flex;justify-content:space-between;align-items:center}.accordion summary::-webkit-details-marker{display:none}.accordion summary span{width:27px;height:27px;border-radius:50%;background:#f0f2f6;display:grid;place-items:center;font:400 18px DM Sans;transition:.2s}.accordion details[open] summary span{transform:rotate(45deg);background:#6263ed;color:#fff}.accordion p{color:#6f7a8e;font-size:13px;padding-right:40px}.final-cta{position:relative;padding:110px 0;text-align:center;color:#fff;background:linear-gradient(135deg,#5a57eb,#4b65e5);overflow:hidden}.cta-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(circle,#000,transparent 70%)}.final-cta .container{position:relative}.cta-icon{display:inline-grid;place-items:center;width:48px;height:48px;background:#fff;color:#5859e7;border-radius:14px;font:800 16px Manrope;transform:rotate(-5deg)}.final-cta h2{font-size:55px;margin:22px 0 15px}.final-cta p{color:#d9dcff;max-width:610px;margin:0 auto 28px}.final-cta .button{margin:5px}.final-cta small{display:block;margin-top:18px;color:#c6cbff;font-size:10px}
.light-brand{font-size:20px}
@media(max-width:1100px){.hero-grid{grid-template-columns:1fr}.hero-copy{text-align:center;max-width:760px;margin:auto}.hero-lede{margin-left:auto;margin-right:auto}.hero-actions,.benefit-row{justify-content:center}.hero-product{width:730px;max-width:100%;margin:auto}.app-window{width:100%}.hero{padding-top:145px}.type-grid{grid-template-columns:1fr 1fr}.builder-showcase{grid-template-columns:170px 1fr}.showcase-settings{display:none}.feature-grid,.embed-grid{gap:50px}.ai-card{padding:45px}.mapping-card{grid-template-columns:1.1fr 60px .8fr}}
@media(max-width:800px){.section{padding:80px 0}.site-header{background:rgba(7,21,46,.96);padding:12px 0}.menu-toggle{display:block}.site-nav{position:fixed;inset:63px 0 0;background:#07152e;display:flex;flex-direction:column;align-items:flex-start;padding:34px 24px;gap:20px;transform:translateX(100%);transition:.25s}.site-nav.open{transform:none}.site-nav>a{font-size:20px}.nav-actions{margin:15px 0 0;flex-direction:column;align-items:stretch;width:100%}.nav-actions .button{width:100%}.hero{padding-top:120px;min-height:0;padding-bottom:120px}.hero:after{height:70px}.hero h1{letter-spacing:-2.5px}.app-window{min-width:660px;transform:scale(.83);transform-origin:left top}.hero-product{height:465px;overflow:hidden}.floating-pill{display:none}.trusted{margin-top:30px}.trusted>div{flex-wrap:wrap;gap:16px}.split-heading,.feature-grid,.ai-card,.embed-grid,.faq-grid{grid-template-columns:1fr;gap:35px}.split-heading{align-items:start}.builder-showcase{grid-template-columns:135px 1fr;min-width:700px;transform:scale(.78);transform-origin:left top}.builder-section{overflow:hidden}.builder-section .container:nth-of-type(2){height:440px}.micro-features{grid-template-columns:1fr;gap:20px}.formula-demo{max-width:600px}.ai-card{padding:35px 25px}.ai-demo{max-width:550px}.sheet-flow{display:grid;grid-template-columns:1fr 1fr;gap:15px}.flow-card{width:auto}.connector{display:none}.mapping-card{grid-template-columns:1fr}.mapping-lines{display:none}.steps{grid-template-columns:1fr 1fr;gap:55px 20px}.steps:before{display:none}.template-grid{grid-template-columns:1fr}.template-section .split-heading>div:last-child{text-align:left}.faq-heading{position:static}}
@media(max-width:520px){.container,.nav-shell{width:min(100% - 28px,1180px)}.hero h1,.section-heading h2,.split-heading h2,.feature-copy h2,.ai-copy h2,.faq-heading h2,.final-cta h2{font-size:38px;letter-spacing:-2px}.hero-lede{font-size:16px}.hero-actions{flex-direction:column}.benefit-row{gap:10px;flex-wrap:wrap}.hero-product{height:340px}.app-window{transform:scale(.58);transform-origin:left top}.type-grid{grid-template-columns:1fr}.type-card{min-height:465px}.builder-section .container:nth-of-type(2){height:330px}.builder-showcase{transform:scale(.56)}.micro-features{margin-top:20px}.ai-card{border-radius:18px}.prompt-card,.generated-card{width:100%}.generated-card{transform:none}.sheet-flow{grid-template-columns:1fr}.mapping-card{padding:12px}.steps{grid-template-columns:1fr}.template-preview{height:215px}.embed-box{width:78%}.final-cta{padding:80px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Embed Sheets brand theme */
.site-header,.site-header.scrolled{background:rgba(255,255,255,.97);color:var(--ink);box-shadow:0 5px 24px rgba(13,20,40,.08);backdrop-filter:blur(16px)}
.brand{display:flex;align-items:center}.brand>img{display:block;width:214px;height:auto}.site-nav>a{color:#3f4a5d}.site-nav>a:hover,.site-nav>a.active{color:#008f60}.text-link{color:var(--ink)}.menu-toggle span{background:var(--ink)}
.button,.announcement span{background:linear-gradient(135deg,#00d891,#009f6b);box-shadow:0 10px 26px rgba(0,167,111,.25)}.button:hover{box-shadow:0 14px 32px rgba(0,167,111,.34)}.button-ghost{background:rgba(255,255,255,.07);box-shadow:none}.button-dark{background:var(--navy)}.button-white{background:#fff;color:#008f60!important}
.hero{background:radial-gradient(circle at 73% 32%,rgba(0,216,145,.17),transparent 32%),linear-gradient(140deg,#0d1428 0%,#10253a 58%,#063528 100%)}.glow-one{background:radial-gradient(circle,rgba(0,216,145,.25),transparent 67%)}
.hero h1 em,.section-heading h2 em,.split-heading h2 em,.feature-copy h2 em,.ai-copy h2 em,.faq-heading h2 em{color:#00cf8a}.eyebrow,.eyebrow.light{color:#00a76f}.app-tabs b:after,.app-top button,.range i,.range i:after,.form-ui button,.canvas-toolbar>b,.canvas-toolbar b{background:#00a76f}.range i:after{box-shadow:0 0 0 3px #c8f5e5}.mini-logo{display:grid;place-items:center;width:24px;height:24px;margin-left:38px;padding:0;overflow:hidden;background:#fff;border-radius:5px}.mini-logo img{width:100%;height:100%;object-fit:cover}.component i,.floating-pill span,.showcase-items i,.tiny-badge,.showcase-settings button,.micro-features b{color:#009f6b}
.blue,.violet{--card:#009f6b;--card-soft:#e7faf3}.quality .selected{border-color:#00a76f;background:#e9faf4;color:#008b5e}.drop-zone{border-color:#00a76f;background:#effbf7;color:#008f60}.color-row i{background:#00a76f}.demo-top i{background:#00a76f}.line em{color:#54d9ad}.field-chips span{background:#e9faf4;color:#007e55}.ai-section{background:#f1faf6}.ai-card{background:linear-gradient(135deg,#0d1428 0%,#073a2c 100%)}.ai-card:after{background:rgba(0,216,145,.2)}.ai-badge{color:#87e9c7;border-color:rgba(0,216,145,.35)}.ai-copy li:before,.ai-copy>a,.ai-orb,.generating>span,.generated-fields b{color:#00b97a}.ai-orb{background:#e8faf4}.prompt-card button{background:#00a76f}.flow-card.brand-flow{border-color:#abe5d1;background:#f3fcf9}.flow-icon.es{background:#00a76f}.mapping-list strong{color:#008f60}.final-cta{background:linear-gradient(135deg,#00a76f,#007a53)}.cta-icon{padding:0;overflow:hidden;background:#fff}.cta-icon img{width:100%;height:100%;object-fit:cover}
.light-brand{width:214px;height:40px;background:#fff url('../images/logo.png') center/200px auto no-repeat;border-radius:7px}.light-brand>*{display:none}
@media(max-width:800px){.site-header{background:rgba(255,255,255,.98)}.site-nav{background:#fff}.site-nav>a{color:var(--ink)}.brand>img{width:180px}}

/* ===========================================================================
   Homepage, second pass
   =========================================================================== */

/* ---------------------------------------------------------------------------
   The hero: more room for the words, the picture pushed right
   ---------------------------------------------------------------------------
   The copy had .84fr against 1.25fr for a mock-up of the builder, which left
   the headline breaking across four lines beside a picture nobody reads word
   by word. The picture is now a screenshot, so it can bleed off the right edge
   and give the sentence its width back.
   --------------------------------------------------------------------------- */

/*
 * The hero gets a wider container than the rest of the page.
 *
 * Everything else is 1180px, which is right for reading. The screenshot is not
 * for reading - it is the product, and at 1180px shared with a headline it
 * came out around 590px wide with the field names in it too small to make out.
 * Wider here, and only here.
 */
.hero > .hero-grid { width: min(1420px, calc(100% - 48px)); }

.hero-grid { grid-template-columns: .92fr 1.3fr; gap: 60px; align-items: center; }

/*
 * The hero was 930px tall to fit a mock-up of the builder that no longer
 * exists. Left alone it puts a third of a screen of nothing under the
 * buttons.
 */
/*
 * Enough room under the strip for the white curve, which is drawn 80px below
 * the hero and 145px tall - so it eats the last 65px of it. Less than this and
 * the row of labels sits on the curve, which is where it was and why it could
 * not be read.
 */
.hero { min-height: 0; padding-bottom: 120px; }

.hero-product { perspective: none; }

/*
 * Inside its column, not beyond it.
 *
 * It was 132% wide, meant to bleed off the right edge - but the hero clips its
 * own overflow to keep the background glows in, so the picture was simply cut
 * off with the settings panel half missing. The column carries the width
 * instead: the grid gives this side the larger share, which is what makes it
 * look big without anything having to escape.
 */
.hero-shots {
    position: relative;
    display: grid;
    width: 100%;
    max-width: 100%;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 40px 100px rgba(0, 0, 0, .5);
    /*background: #0b1a34;*/
}

/*
 * Stacked in a grid rather than positioned absolutely inside a box with an
 * aspect ratio.
 *
 * The box was sized by aspect-ratio and the pictures were taken out of flow to
 * fill it, which works until it does not: nothing in the container has a
 * height of its own, so anything that upsets the ratio leaves an empty frame -
 * which is what a phone was showing. Here the pictures are in flow, all in the
 * same cell, and the tallest of them is the height. There is nothing left to
 * get wrong.
 */
.hero-shot {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity .7s ease;
}

.hero-shot.is-on { opacity: 1; }

/* Without the transition a browser that respects reduced motion still gets
   the pictures, just cut between rather than faded. */
@media (prefers-reduced-motion: reduce) {
    .hero-shot { transition: none; }
}

.hero-shots__dots {
    grid-area: 1 / 1;
    align-self: end;
    position: relative;
    margin-bottom: 14px;
    display: flex;
    justify-content: center;
    gap: 7px;
    z-index: 2;
}

.hero-shots__dots button {
    width: 24px;
    height: 5px;
    padding: 0;
    border: 0;
    border-radius: 100px;
    background: rgba(255, 255, 255, .32);
    cursor: pointer;
    transition: background-color .2s ease;
}

.hero-shots__dots button.is-on { background: #34d9a3; }
.hero-shots__dots button:hover { background: rgba(255, 255, 255, .6); }

/* ---------------------------------------------------------------------------
   What people build
   ---------------------------------------------------------------------------
   Phrases rather than single words, so the row needs to wrap rather than
   spread - and it sat on the white curve at the foot of the hero, where a grey
   label is nearly invisible.
   --------------------------------------------------------------------------- */

/*
 * The original treatment - spread across the width, upper case, letter-spaced.
 * Only two things changed: they wrap rather than squash on a narrow screen,
 * and they are light enough to read where they sit, which is over the white
 * curve at the foot of the hero.
 */
.trusted > div {
    flex-wrap: wrap;
    gap: 14px 24px;
    letter-spacing: 1.5px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #b9c6dc;
}

.trusted > span { color: #8b9bb8; }

/* Closer to the hero than the 100px it had, now that the hero is only as tall
   as what is in it. */
.trusted { margin-top: 72px; }

/* ---------------------------------------------------------------------------
   Embed anywhere
   --------------------------------------------------------------------------- */

.embed-ways {
    list-style: none;
    padding: 0;
    margin: 22px 0 26px;
    display: grid;
    gap: 12px;
}

.embed-ways li {
    position: relative;
    padding-left: 26px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #aebbd1;
}

.embed-ways li:before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #34d9a3;
    font-weight: 700;
}

.embed-ways b { color: #fff; font-weight: 700; }

.platforms-label {
    display: block;
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #7c8aa4;
}

.platforms { margin-top: 12px; }

.platforms span {
    font-size: 11px;
    letter-spacing: .2px;
    color: #cfd9e9;
    background: rgba(255, 255, 255, .05);
}

/* ---------------------------------------------------------------------------
   The Sheets flow, with real marks in it
   --------------------------------------------------------------------------- */

.flow-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
}

/* The tile was a coloured square with a letter in it; a logo needs a plain
   ground to sit on rather than a brand colour of ours behind it. */
.flow-icon.es,
.flow-icon.sheets {
    background: #fff;
    border: 1px solid #e4eaf2;
    color: inherit;
    display: grid;
    place-items: center;
}

@media (max-width: 1100px) {
    .hero-grid { grid-template-columns: 1fr; }

    /* Stacked, the picture is the widest thing on the page and does not need
       to be the tallest as well. */
    .hero-shots { max-width: 820px; margin: 0 auto; }
}

/* The platform chips carry a logo now, so they need room for it and a gap
   between the mark and the word. */
.platforms span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
}

.platforms i { font-size: 14px; color: #fff; }
.platforms b { font-family: ui-monospace, Menlo, Consolas, monospace; color: #34d9a3; font-weight: 700; }

/* ---------------------------------------------------------------------------
   Product screenshots
   ---------------------------------------------------------------------------
   The two hand-drawn mock-ups - the builder showcase and the AI demo - are
   pictures of the real thing now. Same frame for both, so they read as a set.
   --------------------------------------------------------------------------- */

/*
 * A white mount around each one.
 *
 * Both screenshots are of a light interface and both sit on a dark section, so
 * without a mount the picture's own edge is where the dark stops - which reads
 * as a hole in the page rather than as a photograph on it. The padding is the
 * mount; the rounded corners are what make it a card.
 */
.product-shot,
.ai-demo {
    margin: 0;
    padding: 12px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .42);
}

/* Height from the picture, never from the box: these are two different shapes
   and neither should be stretched to match the other. */
.product-shot img,
.ai-demo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 13px;
}

/* ---------------------------------------------------------------------------
   Undoing the mock-ups' mobile rules
   ---------------------------------------------------------------------------
   The old hand-drawn panels were too wide for a phone, so the narrow layouts
   scaled them down and cropped their containers to a fixed height. They are
   photographs now, which shrink on their own - and those fixed heights would
   slice the bottom off each one.
   --------------------------------------------------------------------------- */

@media (max-width: 800px) {
    .hero-product { height: auto; overflow: visible; }

    /* The screenshot between the heading and the numbered points. */
    .builder-section .container:nth-of-type(2) { height: auto; }
    .builder-section { overflow: visible; }

    .ai-demo { max-width: none; }
}

@media (max-width: 520px) {
    .hero-product { height: auto; }
    .builder-section .container:nth-of-type(2) { height: auto; }

    /* Less mount on a small screen: 12px of white either side of a 320px
       picture is a picture inside a border. */
    .product-shot,
    .ai-demo { padding: 8px; border-radius: 16px; }

    .product-shot img,
    .ai-demo img { border-radius: 10px; }
}

/* ---------------------------------------------------------------------------
   Integrations
   ---------------------------------------------------------------------------
   The same two-column feature layout the formula section uses, so it reads as
   part of the page rather than as something bolted on. The picture leads,
   because a ring of logos is understood before a sentence is read.
   --------------------------------------------------------------------------- */

/*
 * White, so the picture has nothing to sit in.
 *
 * The ring is a PNG with its own near-white ground. On a tinted section that
 * ground showed as a pale rectangle with a hard edge - a box around a picture
 * that was supposed to float. Matching the page to the picture is one line;
 * cutting the picture out is not.
 */
.integrations-section { background: #fff; }

/*
 * Its own column ratio. The shared .feature-grid gives the words .85 against
 * 1.15, which suits a narrow code panel and squeezes five lines of list into
 * something that wraps after four words.
 */
.integrations-section .feature-grid {
    grid-template-columns: 1.02fr 1fr;
    gap: 70px;
}

/*
 * Smaller than the page's other headings.
 *
 * The shared size runs to 70px, which in this column breaks a line after two
 * words - and there are two lines here plus a sub-heading under them. This is
 * a lead-in to a picture, not the top of the page.
 */
.integrations-section .feature-copy h2 {
    font-size: clamp(32px, 3.4vw, 46px);
    letter-spacing: -1.8px;
    margin: 18px 0 18px;
}

.integrations-section .feature-copy > p { font-size: 15px; color: #55677d; }

/*
 * The two short lines under the heading. Darker and heavier than the
 * paragraph below them - they are part of the title, said at a normal size
 * because the title has already been shouted once.
 */
.integrations-sub {
    margin: 0 0 18px;
    font: 600 19px/1.45 "Manrope", sans-serif;
    color: #10233d;
}

.integrations-section .feature-copy > p.integrations-sub { font-size: 19px; color: #10233d; }

.integrations-art { display: flex; justify-content: center; }

.integrations-art img {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    /* Rounded, so the picture's own pale ground reads as a panel rather than
       as a square of slightly-wrong white against the page. */
    border-radius: 22px;
}

/*
 * A hanging indent, so the second line of an item lines up with the first
 * rather than starting under the tick. The tick was an inline-grid box with a
 * margin, which only ever works while every item is one line long.
 */
.integrations-section .check-list li {
    position: relative;
    padding-left: 32px;
    margin: 14px 0;
    font-weight: 500;
    line-height: 1.6;
    color: #4d5c70;
}

.integrations-section .check-list li:before {
    position: absolute;
    left: 0;
    top: 1px;
    margin: 0;
}

.integrations-section .check-list li b { color: #10233d; font-weight: 700; }

@media (max-width: 800px) {
    /* The ring is a wide, square picture: full width on a phone leaves the
       words in it too small to read, so it keeps a little of its scale. */
    .integrations-art img { max-width: 460px; }
}

/* ---------------------------------------------------------------------------
   The API connector
   ---------------------------------------------------------------------------
   Dark, because the picture is: its corners fall away to near-black, and on a
   white section that reads as a photograph with burnt edges. Against a dark
   ground the same shading reads as depth, which is what it was drawn to be.
   --------------------------------------------------------------------------- */

/*
 * The same ground as the AI card, so the two dark sections on the page look
 * like they were made together rather than each mixed by hand.
 */
.api-section {
    background: linear-gradient(135deg, #0d1428 0%, #073a2c 100%);
    color: #fff;
}

.api-section .feature-grid { grid-template-columns: 1fr 1.02fr; gap: 70px; }

.api-section .feature-copy h2 {
    font-size: clamp(32px, 3.4vw, 46px);
    letter-spacing: -1.8px;
    margin: 18px 0 16px;
}

.api-section .feature-copy > p { font-size: 15px; color: #aebbd1; }

.api-section .eyebrow.light { color: #34d9a3; }

/* The same hanging indent the integrations list uses - a wrapped line must not
   start underneath its own tick. */
.api-section .check-list li {
    position: relative;
    padding-left: 32px;
    margin: 14px 0;
    font-weight: 500;
    line-height: 1.6;
    color: #b9c6dc;
}

.api-section .check-list li b { color: #fff; font-weight: 700; }

.api-section .check-list li:before {
    position: absolute;
    left: 0;
    top: 1px;
    margin: 0;
    background: rgba(52, 217, 163, .14);
    color: #34d9a3;
}

/* A link, like the one under the AI copy - the same weight of invitation, and
   the section reads as a pair with it. */
.api-section .arrow-link { display: inline-block; margin-top: 26px; color: #00d891; }
.api-section .arrow-link:hover { color: #34e5a8; }

.api-art { display: flex; justify-content: center; }

.api-art img {
    display: block;
    width: 100%;
    max-width: 620px;
    height: auto;
    border-radius: 22px;
}

@media (max-width: 800px) {
    .api-section .feature-grid { grid-template-columns: 1fr; }
    .api-art img { max-width: 520px; }
}

/* ===========================================================================
   Narrow screens, second pass
   ---------------------------------------------------------------------------
   Three things went wrong once the mock-ups became pictures and two sections
   grew column ratios of their own.
   =========================================================================== */

/*
 * Nothing may scroll the page sideways.
 *
 * Several decorations are placed outside their own box on purpose - the hero's
 * white curve is 110% wide, the embed code pill hangs 30px past its panel, the
 * card glows sit beyond their corners. Each is contained where it sits, but a
 * marketing page has enough of them that one escaping is a page that slides
 * under the thumb. This is the backstop; it costs nothing on a layout that
 * behaves.
 */
html, body { overflow-x: hidden; }

@media (max-width: 1100px) {
    /*
     * The per-section ratios have to be undone at the same specificity that
     * set them. .feature-grid collapsing to one column does not reach
     * ".integrations-section .feature-grid", so those two sections stayed
     * side by side on a phone - a 230px column of text beside a thumbnail.
     */
    .integrations-section .feature-grid,
    .api-section .feature-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .integrations-art,
    .api-art { order: -1; }
}

@media (max-width: 800px) {
    /*
     * The gap between a heading and the words under it.
     *
     * Side by side, 120px between the two columns is the space that separates
     * them. Stacked, that same gap is a hole under the heading - and the h2's
     * own bottom margin is under it as well.
     */
    .split-heading { gap: 16px; margin-bottom: 34px; }
    .split-heading h2 { margin-bottom: 8px; }
    .split-heading > div:last-child > p { margin-top: 0; }

    .section-heading { margin-bottom: 38px; }

    /* Same story: the eyebrow, the heading and the lede belong together. */
    .feature-copy h2 { margin: 14px 0 14px; }

    .integrations-sub { margin-bottom: 14px; }

    /* A picture that has to be read needs to be as wide as the phone allows. */
    .integrations-art img,
    .api-art img,
    .product-shot { max-width: none; }
}

@media (max-width: 520px) {
    .section { padding: 64px 0; }

    .hero > .hero-grid { width: calc(100% - 28px); }

    /* Two lines of heading and a two-line sub-heading is most of a small
       screen before anything has been said. */
    .integrations-section .feature-copy h2,
    .api-section .feature-copy h2 { font-size: 30px; letter-spacing: -1.2px; }

    .integrations-sub { font-size: 17px; }

    .integrations-section .check-list li,
    .api-section .check-list li { padding-left: 28px; font-size: 13.5px; }
}

/* ---------------------------------------------------------------------------
   The hero, on a phone
   ---------------------------------------------------------------------------
   .hero-product was 730px wide - the width of the mock-up of the builder that
   used to sit in it. That element is a picture now, but the width stayed, and
   in a one-column grid it sets the track's minimum: the whole hero was being
   laid out 730px wide on a 400px screen, which is why the headline ran off the
   side mid-word.

   min-width:0 on the items is the other half. A grid item defaults to
   min-width:auto, so a track can refuse to shrink below whatever is inside it
   - the single commonest way a responsive grid stops being responsive.
   --------------------------------------------------------------------------- */

.hero-copy,
.hero-product { min-width: 0; }

.feature-grid > *,
.split-heading > *,
.embed-grid > * { min-width: 0; }

@media (max-width: 1100px) {
    .hero-product { width: auto; max-width: 100%; }
}

@media (max-width: 520px) {
    /* 38px is wider than a small phone for words like "interactive". Scaled to
       the screen with a floor that still reads as a headline. */
    .hero h1 { font-size: clamp(30px, 8.4vw, 38px); letter-spacing: -1.4px; }

    .hero-product { height: auto; }
}

/* ---------------------------------------------------------------------------
   The menu on a phone
   ---------------------------------------------------------------------------
   The panel is declared in two places - the layout in one media query, its
   white background in a later one - and neither set a z-index or a height it
   could scroll in. So it opened underneath the hero: the links were drawn, and
   the page was drawn on top of them.
   --------------------------------------------------------------------------- */

@media (max-width: 800px) {
    .site-header .site-nav {
        /* Above everything, including the hero's own stacking. */
        z-index: 1200;
        background: #fff;
        /* Taller than the screen on a small phone once the buttons are in it. */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: -14px 0 40px rgba(7, 21, 46, .16);
    }

    .site-header .site-nav > a { color: var(--ink, #10233d); }

    /* The bar the toggle sits in has to be solid while the panel is open, or
       the logo and the hamburger sit over whatever is behind them. */
    body.menu-open .site-header { background: #fff; box-shadow: 0 4px 18px rgba(7, 21, 46, .08); }

    /* And the page behind must not scroll under the menu. */
    body.menu-open { overflow: hidden; }

    /* The full-width call to action reads as part of the menu rather than as
       something floating over the page. */
    .site-nav .nav-actions { width: 100%; }
    .site-nav .nav-actions .button { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Why the menu was one item tall
   ---------------------------------------------------------------------------
   .site-header carries backdrop-filter, and an element with one becomes the
   containing block for any position:fixed descendant. The menu panel is fixed
   with inset:63px 0 0, which it was resolving against the HEADER - a box about
   sixty pixels tall - instead of the screen. So it opened as a sliver: the
   first link, and nothing below it.

   Nothing to do with z-index, which is why raising it did not help.

   The blur is dropped on the narrow layout only. The bar is 98% opaque white
   there, so it was doing almost nothing to earn its keep.
   --------------------------------------------------------------------------- */

@media (max-width: 800px) {
    .site-header,
    .site-header.scrolled {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ---------------------------------------------------------------------------
   The menu panel
   ---------------------------------------------------------------------------
   The same gradient the AI card uses, so the drawer belongs to the site rather
   than being the one white rectangle in it. Dark also settles what the panel
   is: a layer over the page, not a piece of the page that happens to be on
   top.
   --------------------------------------------------------------------------- */

@media (max-width: 800px) {
    .site-header .site-nav {
        background: linear-gradient(135deg, #0d1428 0%, #073a2c 100%);
        padding: 28px 24px calc(28px + env(safe-area-inset-bottom, 0px));
        gap: 0;
        box-shadow: -16px 0 44px rgba(4, 16, 12, .35);
    }

    /* A rule between the links rather than a gap, so the list reads as a menu
       and the tap target is the whole row rather than the words in it. */
    .site-header .site-nav > a {
        width: 100%;
        padding: 15px 2px;
        border-bottom: 1px solid rgba(255, 255, 255, .09);
        color: #fff;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -.2px;
    }

    .site-header .site-nav > a:hover,
    .site-header .site-nav > a.active { color: #34d9a3; }

    /* Which page you are on, marked in the margin - a colour change alone is
       easy to miss on a list of four. */
    .site-header .site-nav > a.active { padding-left: 12px; box-shadow: inset 3px 0 0 #34d9a3; }

    .site-nav .nav-actions {
        gap: 12px;
        margin-top: 26px;
        padding-top: 0;
    }

    /* Log in was a bare word under four headings, which read as a caption
       rather than as the other way in. */
    .site-nav .nav-actions .text-link {
        width: 100%;
        padding: 13px;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 11px;
        text-align: center;
        font-size: 15px;
        font-weight: 700;
        color: #fff;
    }

    .site-nav .nav-actions .text-link:hover {
        border-color: rgba(52, 217, 163, .6);
        color: #34d9a3;
    }
}

/* ===========================================================================
   Use cases - what people build
   ---------------------------------------------------------------------------
   A plain grid of subjects. Deliberately quiet: the sections around it carry
   drawn mock-ups and gradients, and nine of those in a row would be noise. The
   work this section does is done by the words in it, so the design gets out of
   their way.
   ========================================================================= */

.usecase-section {
    background: #fbfcfd;
    border-top: 1px solid #eef1f6;
}

.usecase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.usecase-card {
    display: flex;
    flex-direction: column;
    padding: 26px 24px 22px;
    background: #fff;
    border: 1px solid #e7eaf0;
    border-radius: 16px;
    transition: .25s;
}

.usecase-card:hover {
    transform: translateY(-4px);
    border-color: #bfe6d7;
    box-shadow: var(--shadow);
}

.usecase-card h3 {
    font: 700 17px Manrope, sans-serif;
    margin: 0 0 10px;
    color: #101426;
}

.usecase-card p {
    flex: 1;
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.62;
    color: var(--muted);
}

/* The link sits on the card's own baseline whatever length the list above it
   turned out to be - the cards are one row of three and a ragged bottom edge
   reads as a mistake. */
.usecase-card .arrow-link {
    font-size: 13px;
    text-transform: capitalize;
}

.usecase-note {
    margin: 34px auto 0;
    max-width: 680px;
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
}

.usecase-note a {
    color: #009f6b;
    font-weight: 700;
    border-bottom: 1px solid rgba(0, 159, 107, .3);
}

.usecase-note a:hover { border-bottom-color: #009f6b; }

@media (max-width: 1100px) {
    .usecase-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
    .usecase-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * The account badge in the header, shown once we know somebody is signed in.
 *
 * Colours are inherited rather than stated: the header is white on the inner
 * pages and dark on the home page, and one widget has to sit on both. The only
 * fixed colour is the initials circle, which carries its own contrast either
 * way.
 * ------------------------------------------------------------------------- */

/*
 * hidden has to win here.
 *
 * [hidden] and .button are both one class worth of specificity, so whichever
 * the stylesheet states last takes it - and .button says display:inline-flex.
 * Hiding the signed-out buttons with el.hidden therefore did nothing, and the
 * header showed "Log in", "Start for free" AND "My Account" at once. Scoped to
 * this widget rather than fixing [hidden] globally, which would change how
 * every other toggle on the site behaves.
 */
[data-auth] [hidden] { display: none !important; }

.account-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
    color: inherit;
    padding: 5px 12px 5px 5px;
    border-radius: 100px;
    border: 1px solid rgba(128, 145, 165, .3);
    transition: background .2s, border-color .2s;
}

.account-link:hover {
    background: rgba(128, 145, 165, .14);
    border-color: rgba(128, 145, 165, .55);
}

.account-avatar {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #00d891, #009f6b);
    color: #fff;
    font: 700 12px/1 Manrope, sans-serif;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The mobile menu stacks its actions full width; this one follows. */
@media (max-width: 800px) {
    .site-nav .nav-actions .account-link {
        width: 100%;
        justify-content: center;
        padding: 9px 14px;
    }
}