:root{--navy:#102a57;--blue:#3574dd;--paper:#f4f6f8;--ink:#111b2d;--muted:#657186;--line:#dfe5ed}
html{scroll-behavior:smooth}
body{background:#fff;color:var(--ink);font-family:Onest,system-ui,sans-serif}
::selection{background:#98bcfa;color:var(--navy)}
button:focus-visible,a:focus-visible,.tablet-screen:focus-visible{outline:3px solid #6ba1fb;outline-offset:4px}
.page-shell{max-width:none;padding:12px;overflow:hidden}
.demo-hero{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;color:#fff;background:radial-gradient(circle at 75% 35%,#2b5fac 0,#173c7b 34%,#102a57 68%)}
.demo-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:76px 76px;mask-image:linear-gradient(90deg,transparent,#000);z-index:-1}
.site-header{height:auto;min-height:92px;padding:28px 40px;border:0;background:transparent;gap:24px}
.metre-brand{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:22px;font-weight:700;letter-spacing:-.05em;white-space:nowrap}
.metre-mark{display:grid;place-items:center;width:30px;height:30px;border:2px solid currentColor;border-radius:50%;font-size:19px;font-weight:600;letter-spacing:-.09em;line-height:1}
.metre-dot{color:#8cbbff}
.header-nav{display:flex;align-items:center;gap:32px;margin:auto;font-size:13px;font-weight:500}
.header-nav a{color:#e8f1ff;opacity:.8;text-decoration:none}.header-nav a:hover{color:#fff;opacity:1}
.header-back{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:42px;padding:0 17px;border-radius:99px;background:#fff;color:var(--navy);font-size:12px;font-weight:600;white-space:nowrap;text-decoration:none}
.header-back:hover{background:#eaf2ff;text-decoration:none}
main{padding:0}
.hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:3%;min-height:555px;margin:0;padding:24px 6% 26px;border:0}
.hero-copy{position:relative;z-index:2;max-width:760px;padding:0}
.hero-copy>.kicker,.section-heading .kicker,.useful-heading .kicker,.next-step .kicker{display:inline-flex;align-items:center;gap:11px;font-size:12px;font-weight:600;letter-spacing:.14em}
.hero-copy>.kicker:before,.section-heading .kicker:before,.useful-heading .kicker:before,.next-step .kicker:before{content:"";width:18px;height:2px;background:currentColor}
.hero-copy>.kicker{color:#bfd6ff}
.hero h1{max-width:780px;margin:24px 0 26px;color:#fff;font-size:clamp(58px,6.8vw,112px);line-height:.94;letter-spacing:-.075em;font-weight:600}
.hero h1 em{font-family:inherit;font-style:normal;font-weight:600;color:#92bcff;letter-spacing:inherit}
.hero-copy>p:not(.kicker){max-width:560px;margin:0 0 29px;color:#d7e6fb;font-size:clamp(16px,1.25vw,20px);line-height:1.55}
.hero-button{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;min-height:52px;padding:0 20px;border-radius:99px;background:#fff;color:var(--navy);font-size:14px;font-weight:600;text-decoration:none;transition:transform .25s,background .25s}
.hero-button:hover{background:#eaf2ff;transform:translateY(-3px)}.hero-button span{font-size:20px;line-height:1}
.hero-bottom{display:flex;justify-content:space-between;gap:20px;padding:0 40px 30px;color:#c7daf7;font-size:11px;letter-spacing:.14em}
.hero-art{position:relative;display:grid;place-items:center;height:450px;min-height:0;background:transparent;border-radius:0;overflow:visible;perspective:1000px}
.hero-art:before{width:min(38vw,450px);height:auto;aspect-ratio:1;border:1px solid #ffffff3a;border-radius:50%;box-shadow:0 0 0 75px #ffffff07,0 0 0 150px #ffffff04}
.hero-art:after{display:none}.hero-sun,.hero-art-word{display:none}
.hero-preview{position:relative;display:flex;flex-direction:column;width:260px;height:370px;padding:9px;border:2px solid #53647a;border-radius:31px;background:#111a2f;box-shadow:32px 43px 55px #061b3d9c;transform:rotate(8deg)}
.hero-preview:before{content:"";position:absolute;top:4px;left:50%;width:5px;height:5px;border-radius:50%;background:#67788c}
.hero-preview-top{display:flex;align-items:center;justify-content:space-between;border-radius:21px 21px 0 0;background:#e6eef8;color:var(--navy);padding:16px 13px 10px;font-size:8px;font-weight:700;letter-spacing:.12em}
.hero-preview-top b{font-size:15px;color:var(--blue)}
.hero-preview>.burger-illustration{width:100%;height:185px;flex:none;overflow:hidden;filter:none;background:radial-gradient(circle at 50% 45%,#f7d594 0 34%,transparent 35%),linear-gradient(140deg,#d58b5d,#a9573c);transform:none}
.hero-preview>.burger-illustration span{scale:none;left:50%;transform:translateX(-50%)}
.hero-preview>.burger-illustration .bun-top{top:12%;width:77%;height:42%}.hero-preview>.burger-illustration .tomato{top:51%;width:73%;height:9%}.hero-preview>.burger-illustration .lettuce{top:60%;width:81%;height:9%}.hero-preview>.burger-illustration .cheese{top:69%;width:74%;height:9%}.hero-preview>.burger-illustration .patty{top:74%;width:76%;height:15%}.hero-preview>.burger-illustration .bun-bottom{top:88%;width:73%;height:15%}
.hero-preview>strong{display:block;flex:1;padding:17px 14px 5px;background:#f8f9f7;color:var(--ink);font-size:28px;line-height:.95;letter-spacing:-.06em}
.hero-preview>small{display:block;border-radius:0 0 21px 21px;background:#f8f9f7;color:var(--navy);padding:6px 14px 14px;font-size:8px;font-weight:700;letter-spacing:.1em}
.hero-chip{position:absolute;z-index:2;padding:12px 15px;border-radius:10px;background:#fff;color:var(--navy);box-shadow:0 18px 30px #061b3d66;font-size:10px;font-weight:700;letter-spacing:.1em}
.hero-chip.one{left:3%;top:18%;transform:rotate(-6deg)}.hero-chip.two{right:0;top:45%;transform:rotate(5deg)}.hero-chip.three{left:4%;bottom:13%;transform:rotate(-3deg)}
.scene-tabs{margin:80px 6% 0;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--paper)}
.scene-tab{min-height:110px;padding:20px 28px;border-color:var(--line);background:transparent;color:var(--ink)}
.scene-tab:hover{background:#e9f1ff}.scene-tab.is-active{background:var(--navy);color:#fff}
.scene-tab span,.scene-tab.is-active span{color:inherit;opacity:.65;font-weight:600}.scene-tab strong{font-weight:600}.scene-tab i{color:inherit}
.scene{margin:0 6%;padding:83px 0 26px}
.section-heading{margin-bottom:28px}.section-heading .kicker,.useful-heading .kicker{color:var(--blue)}
.section-heading h2,.useful-heading h2{max-width:900px;color:var(--ink);font-size:clamp(47px,5.2vw,84px);line-height:.97;letter-spacing:-.065em;font-weight:600}
.section-heading h2 em,.useful-heading h2 em{font-family:inherit;color:var(--blue);font-style:normal;font-weight:600;letter-spacing:inherit}
.section-heading>p{color:var(--muted);font-size:16px;line-height:1.5}
.tablet-stage{background:radial-gradient(circle at 50% 40%,#e9f1ff,#d4e4fa 62%,#bfd5f2)}
.tablet-hint{color:#42618b;font-weight:600}
.useful{margin:0 6%;padding:90px 0 105px}.useful-heading h2{margin-top:14px}
.useful-grid{border-color:#ccd5e0}.useful-grid>div{border-color:#ccd5e0;color:var(--ink);padding:28px}.useful-grid span{color:var(--blue);font-weight:600}.useful-grid h3{font-size:25px;letter-spacing:-.04em;font-weight:600}.useful-grid p{color:var(--muted);font-size:14px}
.next-step{display:grid;grid-template-columns:1fr .8fr;align-items:end;gap:7%;margin-top:12px;padding:95px 6%;border-radius:28px;background:var(--navy);color:#fff}
.next-step .kicker{color:#b8d4ff}.next-step h2{margin:20px 0 0;font-size:clamp(48px,5.8vw,95px);line-height:.95;letter-spacing:-.065em;font-weight:600}.next-step h2 em{color:#92bcff;font-style:normal}
.next-step p{max-width:420px;margin:0 0 26px;color:#c8daf4;font-size:17px;line-height:1.6}
footer{display:block;margin-top:12px;padding:48px 6% 28px;border-radius:28px;background:#0d2144;color:#fff;font-size:14px}
.footer-top,.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px}
.footer-top{padding-bottom:55px}.footer-top .metre-brand{margin-left:0}.footer-top nav{display:flex;flex-wrap:wrap;gap:27px;font-size:14px}.footer-top nav a{color:#d3e2fa;text-decoration:none}.footer-top nav a:hover{color:#fff}
.footer-bottom{padding-top:22px;border-top:1px solid #ffffff38;color:#abc2e5;font-size:12px}
@media(max-width:980px){.header-nav{display:none}.hero{grid-template-columns:1fr 1fr}.hero-chip.one{left:-4%}.hero-chip.two{right:-4%}}
@media(max-width:700px){.page-shell{padding:7px}.demo-hero,.next-step,footer{border-radius:20px}.site-header{min-height:70px;padding:20px}.header-back{min-height:38px;padding:0 12px;font-size:11px}.hero{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-height:0;padding:35px 24px 5px}.hero h1{font-size:clamp(48px,11vw,78px);margin:21px 0}.hero-copy>p:not(.kicker){font-size:16px}.hero-art{height:280px;min-height:0;border-radius:0}.hero-art:before{width:250px;height:250px}.hero-preview{width:157px;height:225px;padding:6px;border-radius:20px}.hero-preview-top{padding:9px 8px 6px;border-radius:12px 12px 0 0;font-size:5px}.hero-preview-top b{font-size:10px}.hero-preview>.burger-illustration{height:111px}.hero-preview>strong{padding:9px;font-size:15px}.hero-preview>small{padding:2px 9px 8px;border-radius:0 0 12px 12px;font-size:5px}.hero-chip{padding:8px;font-size:7px}.hero-chip.one{left:4%;top:15%}.hero-chip.two{right:4%;top:45%}.hero-chip.three{left:5%;bottom:10%}.hero-bottom{padding:16px 24px 24px}.hero-bottom span:last-child{display:none}.scene-tabs{margin:48px 20px 0;border-radius:17px}.scene-tab{min-height:78px;padding:12px 9px}.scene-tab strong{font-size:15px}.scene-tab span{font-size:9px}.scene-tab i{font-size:14px}.scene{margin:0 20px;padding:65px 0 22px}.section-heading h2,.useful-heading h2{font-size:clamp(41px,10vw,61px)}.section-heading>p{font-size:14px}.useful{margin:0 20px;padding:68px 0 75px}.useful-grid{grid-template-columns:1fr}.useful-grid>div,.useful-grid>div:nth-child(even),.useful-grid>div:nth-last-child(-n+2){border-right:0;border-bottom:1px solid #ccd5e0}.useful-grid>div:last-child{border-bottom:0}.next-step{grid-template-columns:1fr;gap:27px;padding:70px 24px}.next-step h2{font-size:clamp(48px,11vw,72px)}footer{padding:45px 24px 24px}.footer-top,.footer-bottom{display:block}.footer-top{padding-bottom:38px}.footer-top nav{margin-top:30px}.footer-bottom span{display:block;margin-top:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-button{transition:none}}