@font-face{font-family:Manrope;src:url('assets/manrope-400.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Manrope;src:url('assets/manrope-700.ttf') format('truetype');font-weight:600 900;font-display:swap}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#1a3054;background:#fff;font-family:Manrope,Arial,sans-serif;letter-spacing:-.02em}h1,h2,p,dl,dd,figure{margin:0}main{max-width:1600px;margin:auto}.hero{height:min(61.2vw,979px);min-height:580px;background:url('assets/hero-render.png') center bottom/cover no-repeat;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}.hero:before{content:'';position:absolute;width:70%;height:70%;background:radial-gradient(ellipse,rgba(202,255,0,.22),transparent 67%);pointer-events:none}.hero-brand{position:relative;text-align:center;transform:translateY(-10px)}h1{width:54.31vw;max-width:869px;line-height:0}h1 img{max-width:100%;height:auto}.strap{display:inline-block;background:#caff00;font-size:clamp(18px,2vw,32px);font-weight:600;line-height:1.3;padding:7px 10px;margin-top:32px}.hero-meta{position:absolute;bottom:32px;left:5%;right:5%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;font-weight:600;font-size:clamp(16px,1.5vw,24px);line-height:1.3}.hero-meta p{background:#1a3054;color:#fff;padding:10px;width:max-content;max-width:100%;text-align:center}.hero-meta p:nth-child(2){justify-self:center}.hero-meta p:last-child{justify-self:end}.opening{padding:160px 5%}.statement{font-size:clamp(36px,5.43vw,87px);line-height:1.12;font-weight:700;letter-spacing:-.025em;display:flex;flex-direction:column;align-items:start}.statement span{background:#caff00;padding:5px 12px 12px}.statement span:first-child{align-self:end}.brief{max-width:850px;margin:100px auto 0;display:grid;grid-template-columns:231px 1fr;gap:80px 50px;font-size:24px;line-height:1.25;color:rgba(26,48,84,.8)}.brief dt{text-align:right;font-size:32px;font-weight:700;color:#1a3054}.brief dt span{display:inline-block;background:#caff00;padding:7px 10px}.section{padding:80px 5%}h2:not(.statement){font-size:clamp(20px,2vw,32px);font-weight:700;line-height:1.2;margin-bottom:60px}h2:not(.statement) span{display:inline-block;background:#1a3054;color:#fff;padding:10px}.before{padding-top:0;padding-bottom:0}.visual{display:block;line-height:0;min-width:0}.visual img{display:block;width:100%;height:auto}.visual:focus-visible{outline:3px solid #1a3054;outline-offset:5px}.photo-grid{padding:0 5%;margin:160px 0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:12px}.photo{position:relative;aspect-ratio:146/194;overflow:hidden}.photo:nth-child(8),.photo:nth-child(16){margin-right:0}.photo:nth-child(9){grid-column:1}.photo:nth-child(17){grid-column:2}.photo img{position:absolute;width:986.30137%;max-width:none;height:312.37113%;left:calc(-1 * var(--x));top:calc(-1 * var(--y))}.blue{background:#cfe5ff}.grey{background:#efefef}.home-labels{display:flex;justify-content:space-between;margin-bottom:30px;font-size:24px}.home-grid{display:grid;grid-template-columns:1027fr 295.308fr;gap:8.17%}.phones{display:flex;flex-direction:column;gap:0;justify-content:space-between;padding-bottom:52.6%}.phone-crop{position:relative;display:block;aspect-ratio:295.308/594.526;overflow:hidden}.phone-crop img{position:absolute;width:100%;height:513.6863%;top:calc(-1 * var(--top));left:0}.calculator-grid{display:grid;grid-template-columns:741fr 585fr;gap:7.9%;align-items:center}.two-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}.promo-grid{display:grid;grid-template-columns:1027fr 295fr;gap:8.17%;align-items:center}.modals{margin-top:60px}.checkout-mobile{display:none}.closing{padding:80px 0 0}.closing h2{margin-left:5%}.closing .visual{border-radius:20px;overflow:hidden}.progress{position:fixed;top:0;left:0;height:3px;z-index:5;background:#caff00;width:100%;transform:scaleX(0);transform-origin:0 50%;will-change:transform}@media(max-width:1000px){.hero{min-height:520px}.opening{padding-top:90px;padding-bottom:90px}.brief{font-size:20px;grid-template-columns:180px 1fr;gap:45px 30px;margin-top:70px}.brief dt{font-size:25px}.section{padding-top:50px;padding-bottom:50px}.before{padding-top:0;padding-bottom:0}.photo-grid{margin:90px 0;gap:6px}.home-labels{font-size:18px}h2:not(.statement){margin-bottom:36px}.two-grid{gap:24px}.closing{padding-left:0;padding-right:0;padding-bottom:0}}
@media(max-width:600px){.hero{height:720px;min-height:0;background-position:52% center}.hero-brand{width:100%;padding:0 22px;transform:translateY(-65px)}h1{width:100%}.strap{font-size:17px;max-width:320px;margin-top:22px}.hero-meta{bottom:24px;grid-template-columns:1fr 1fr;gap:14px;left:20px;right:20px;font-size:14px}.hero-meta p{padding:9px}.hero-meta p:first-child{grid-column:1/-1;justify-self:start}.hero-meta p:nth-child(2){justify-self:start}.hero-meta p:last-child{justify-self:end;font-size:12px}.opening{padding:64px 20px}.statement{font-size:36px;line-height:1.16}.statement span{padding:5px 7px}.statement span:first-child{align-self:start}.brief{grid-template-columns:1fr;gap:18px;font-size:18px;line-height:1.5;margin-top:45px}.brief dt{text-align:left;font-size:23px}.brief dt:nth-of-type(2){margin-top:18px}.section{padding:40px 20px}h2:not(.statement){font-size:20px;margin-bottom:28px}.before{padding-top:0;padding-bottom:0}.photo-grid{padding:0 20px;margin:64px 0;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.photo:nth-child(9),.photo:nth-child(17){grid-column:auto}.home-labels{display:none}.home-grid{grid-template-columns:1fr;gap:36px}.home-grid>.visual:before{content:'Desktop';display:block;font-size:16px;line-height:1.3;margin-bottom:16px}.phones{padding:0;gap:32px;align-items:center}.phones:before{content:'Mobile';align-self:start;font-size:16px}.phone-crop{width:min(100%,295px)}.calculator-grid,.promo-grid{grid-template-columns:1fr;gap:32px}.promo-grid>.visual:last-child{width:min(100%,295px);justify-self:center}.two-grid{grid-template-columns:1fr;gap:24px}.modals{margin-top:32px}.checkout-desktop{display:none}.checkout-mobile{display:grid;gap:32px}.checkout-mobile figcaption{font-size:16px;margin-bottom:12px;background:#1a3054;color:#fff;width:max-content;padding:5px 8px}.closing{padding:40px 0 0}.closing h2{margin-left:20px}.closing .visual{border-radius:12px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.hero:before{display:none}
a{color:inherit;text-decoration:none}

/* ---- case copy (Kata) ---- */
h2:not(.statement){margin-bottom:28px}
.section-intro{max-width:880px;margin:0 0 60px;font-size:clamp(18px,1.5vw,24px);line-height:1.4;color:rgba(26,48,84,.82)}
.closing .section-intro{margin-left:5%;margin-right:5%}
.brief b{color:#1a3054;font-weight:700}
.problems{list-style:none;counter-reset:p;margin:0 0 60px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.problems li{counter-increment:p;display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:20px;background:#f4f7fb;font-size:clamp(16px,1.15vw,19px);line-height:1.45;color:rgba(26,48,84,.8)}
.problems li:before{content:"0" counter(p);width:max-content;padding:3px 9px;background:#caff00;color:#1a3054;font-weight:700;font-size:15px}
.problems b{color:#1a3054;font-size:clamp(19px,1.4vw,23px);line-height:1.2}
.state{margin:0;display:flex;flex-direction:column;gap:12px}
.state figcaption{width:max-content;max-width:100%;padding:5px 9px;background:#1a3054;color:#fff;font-size:15px;font-weight:600}
.visual{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.visual:hover{transform:translateY(-4px)}
/* Kata site navigation */
.case-nav{position:fixed;top:16px;left:16px;right:16px;z-index:60;display:flex;justify-content:space-between;pointer-events:none}
.case-nav a{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:100px;background:#ffffffe6;color:#1a3054;font-size:15px;font-weight:700;box-shadow:0 4px 20px #1a305418;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .3s}
.case-nav a:hover{background:#caff00}
body{animation:case-in .6s cubic-bezier(.22,1,.36,1) both}
@keyframes case-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(max-width:1000px){.problems{grid-template-columns:1fr;gap:12px}.section-intro{margin-bottom:36px}}
@media(max-width:600px){.section-intro{font-size:17px;margin-bottom:28px}.problems li{padding:20px}.problems{margin-bottom:32px}}
@media(prefers-reduced-motion:reduce){body{animation:none}.visual{transition:none}}

/* Live collaborative audit canvas. Screenshot fragments preserve original proportions. */
.audit-board{position:relative;background:#b8b8b8;border:1px solid #d4d4d4;border-radius:18px;overflow:hidden;color:#222;margin-top:40px;isolation:isolate}
.audit-top{display:flex;justify-content:space-between;gap:12px;background:#f1f0f2;padding:14px 20px;font:12px/1.3 Arial,sans-serif;border-bottom:1px solid #aaa;position:relative;z-index:5}
.audit-canvas{position:relative;aspect-ratio:2884/2028;background-image:radial-gradient(#9998 .65px,transparent .65px);background-size:16px 16px;overflow:hidden}
.audit-frame{position:absolute;background-image:url('assets/41154.webp');background-repeat:no-repeat;outline:2px solid transparent;transition:outline-color .3s;cursor:crosshair}
.audit-frame.is-selected,.audit-frame:hover{outline-color:var(--selection,#438cf5);z-index:1}
.audit-frame.is-selected:after{content:'';position:absolute;inset:-4px;background:linear-gradient(white,white) 0 0/6px 6px,linear-gradient(white,white) 100% 0/6px 6px,linear-gradient(white,white) 0 100%/6px 6px,linear-gradient(white,white) 100% 100%/6px 6px;background-repeat:no-repeat;pointer-events:none}
.audit-frame-name{position:absolute;top:-18px;font:10px Arial,sans-serif;color:var(--selection,#438cf5);opacity:0}.is-selected .audit-frame-name{opacity:1}
.audit-comment{position:absolute;z-index:2;max-width:25%;background:white;border-radius:0 9px 9px 9px;box-shadow:0 3px 12px #0001;font:clamp(9px,1.1vw,16px)/1.3 Arial,sans-serif;border-left:3px solid var(--person);padding:8px 11px;pointer-events:none}
.audit-comment b{display:block;color:var(--person);font-size:.75em;margin-bottom:4px}.audit-comment span{display:block}
.audit-cursor{position:absolute;z-index:4;pointer-events:none;transition:left 1.8s cubic-bezier(.45,0,.2,1),top 1.8s cubic-bezier(.45,0,.2,1)}
.audit-cursor svg{width:21px;height:27px;display:block;filter:drop-shadow(0 1px 1px #0005)}.audit-cursor>span{display:block;margin-left:16px;margin-top:-5px;padding:3px 7px;background:var(--person);color:white;border-radius:3px;font:11px Arial,sans-serif}
.audit-tools{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:18px;padding:10px 16px;background:#fff;border-radius:12px;box-shadow:0 3px 8px #0002;z-index:5;font:20px Arial,sans-serif}.audit-tools span:first-child{color:#438cf5}
@media(max-width:600px){.audit-top{font-size:9px;padding:10px}.audit-comment{padding:4px 5px}.audit-cursor svg{width:14px;height:18px}.audit-cursor>span{font-size:8px;margin-left:10px}.audit-tools{gap:12px;font-size:14px;padding:7px 12px;bottom:6px}}
@media(prefers-reduced-motion:reduce){.audit-cursor,.audit-frame{transition:none}}

.audit-comment[hidden]{display:none}
.audit-cursor>.audit-chat{display:none;background:var(--person);color:#fff;max-width:230px;width:max-content;white-space:normal;font:13px/1.35 Arial,sans-serif;border-radius:4px 10px 10px 10px;padding:8px 11px;box-shadow:0 3px 12px #0002}
.audit-cursor.is-chatting>span:not(.audit-chat){display:none}
.audit-cursor.is-chatting>.audit-chat{display:block}
.audit-cursor.is-typing .audit-chat>span:after{content:'';display:inline-block;height:1em;border-right:1px solid white;vertical-align:-2px;margin-left:2px;animation:audit-caret .65s steps(1) infinite}
@keyframes audit-caret{50%{opacity:0}}
@media(max-width:600px){.audit-cursor>.audit-chat{font-size:10px;max-width:140px;padding:5px 7px}}
/* Figma-style canvas chrome and cursor chat. */
.audit-board{border-radius:12px;border:1px solid #d7d7d7;background:#e5e5e5;font-family:Inter,Arial,sans-serif;box-shadow:0 2px 12px #00000008}
.audit-top{background:#fff;color:#333;padding:12px 16px;font:500 11px/20px Inter,Arial,sans-serif;border-bottom:1px solid #ddd}
.audit-top>span:first-child{font-weight:600}.audit-top>span:last-child{color:#777;font-size:10px}
.audit-canvas{background-color:#e5e5e5;background-image:none}
.audit-frame{outline-width:1px}.audit-frame.is-selected,.audit-frame:hover{outline-color:#0d99ff}
.audit-frame-name{color:#0d99ff;font:10px/14px Inter,Arial,sans-serif;top:-16px}
.audit-frame.is-selected:after{inset:-3px;background:none;border:1px solid #0d99ff;box-shadow:none}
.audit-frame.is-selected:before{content:'';position:absolute;inset:-3px;pointer-events:none;background:linear-gradient(#fff,#fff) 0 0/5px 5px,linear-gradient(#fff,#fff) 100% 0/5px 5px,linear-gradient(#fff,#fff) 0 100%/5px 5px,linear-gradient(#fff,#fff) 100% 100%/5px 5px;background-repeat:no-repeat;z-index:2}
.audit-cursor svg{width:18px;height:23px;filter:drop-shadow(0 1px 1px #0003)}
.audit-cursor>span{margin-left:13px;margin-top:-4px;padding:3px 6px;border-radius:0 3px 3px 3px;font:500 11px/15px Inter,Arial,sans-serif}
.audit-cursor>.audit-chat{border-radius:0 8px 8px 8px;padding:7px 10px;max-width:225px;font:500 12px/18px Inter,Arial,sans-serif;box-shadow:0 2px 5px #0002}
.audit-tools{bottom:16px;gap:2px;padding:5px;background:#fff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 4px 14px #0002;font:20px/1 Arial,sans-serif;align-items:center}
.audit-tools span{display:grid;place-items:center;width:34px;height:34px;border-radius:7px;color:#333}
.audit-tools span:first-child{background:#0d99ff;color:#fff}
@media(max-width:600px){.audit-top{padding:8px 10px;font-size:9px}.audit-top>span:last-child{font-size:8px}.audit-tools{bottom:8px;padding:3px}.audit-tools span{width:25px;height:25px;font-size:16px}.audit-cursor>.audit-chat{font-size:10px;line-height:14px;max-width:140px}}
/* Larger collaborator cursors and readable labels. */
.audit-cursor svg{width:28px;height:35px}
.audit-cursor>span{margin-left:21px;margin-top:-5px;padding:4px 8px;font-size:13px;line-height:18px}
.audit-cursor>.audit-chat{font-size:14px;line-height:20px;padding:9px 12px;max-width:250px}
@media(max-width:600px){.audit-cursor svg{width:21px;height:27px}.audit-cursor>span{margin-left:16px;font-size:10px;line-height:14px}.audit-cursor>.audit-chat{font-size:11px;line-height:15px;max-width:150px;padding:6px 8px}}

/* Quicker, continuous travel; blue and yellow collaborators only. */
.audit-cursor{transition-duration:1.05s;transition-timing-function:cubic-bezier(.25,.55,.35,1);will-change:left,top}
.audit-cursor svg{filter:drop-shadow(0 1px 2px #0006)}
.audit-cursor[style*="#CAFF00"]>span,.audit-cursor[style*="#CAFF00"]>span{color:#252000}
.audit-cursor[style*="#CAFF00"] .audit-chat>span:after,.audit-cursor[style*="#CAFF00"] .audit-chat>span:after{border-color:#252000}
@media(prefers-reduced-motion:reduce){.audit-cursor{transition:none;will-change:auto}}

/* Reference toolbar: vector tools, dropdown chevrons and mode group. */
.audit-tools{display:flex;gap:0;bottom:18px;padding:7px;border:0;border-radius:16px;background:#fff;box-shadow:0 4px 12px #0002;max-width:94%;width:max-content}
.audit-tools-main,.audit-tools-modes{display:flex;align-items:center;gap:5px}
.audit-tools-main{padding-right:12px}.audit-tools-modes{padding:3px 5px;background:#f5f5f5;border-radius:9px;position:relative}
.audit-tools-modes:before{content:'';position:absolute;left:-7px;top:-10px;bottom:-10px;width:1px;background:#e5e5e5}
.audit-tools .audit-tool{display:grid;place-items:center;width:36px;height:40px;border-radius:7px;color:#222;flex-shrink:0;background:none}
.audit-tool svg{width:25px;height:25px}.audit-tools .audit-tool.is-active{background:#0d99ff;color:white}
.audit-chevron{width:5px;height:5px;border-right:1.3px solid #222;border-bottom:1.3px solid #222;transform:rotate(45deg);margin:0 7px 3px 0;flex-shrink:0}
.audit-tools-modes .audit-tool{color:#888;width:36px;height:36px}.audit-tools-modes .audit-tool.is-mode-active{color:#0d99ff;background:white;box-shadow:0 1px 4px #0003;border-radius:6px}
@media(max-width:800px){.audit-tools{padding:5px;border-radius:12px}.audit-tools-main,.audit-tools-modes{gap:2px}.audit-tools .audit-tool{width:25px;height:30px}.audit-tool svg{width:21px;height:21px}.audit-chevron{margin-right:4px;width:4px;height:4px}.audit-tools-main{padding-right:8px}.audit-tools-modes .audit-tool{width:25px;height:28px}}
@media(max-width:500px){.audit-tools{bottom:8px;padding:4px}.audit-tools .audit-tool{width:18px;height:24px}.audit-tool svg{width:17px;height:17px}.audit-chevron{width:3px;height:3px;margin-right:2px}.audit-tools-modes{padding:2px}.audit-tools-modes .audit-tool{width:20px;height:24px}.audit-tools-main{padding-right:7px}}
/* Subtle dotted workspace texture. */
.audit-canvas{background-color:#e5e5e5;background-image:radial-gradient(circle,#b6b6b6 .55px,transparent .7px);background-size:19px 19px;background-position:9.5px 9.5px}
@media(max-width:600px){.audit-canvas{background-size:12px 12px;background-position:6px 6px}}

.audit-top{align-items:center}
.audit-people{display:flex;align-items:center;gap:5px}
.audit-people .audit-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--avatar);color:#fff;font:400 15px/1 Arial,sans-serif;border:2px solid white;box-sizing:border-box}
.audit-people .audit-avatar--lime{background:#CAFF00;color:#222}
.audit-people-arrow{display:grid;place-items:center;width:27px;height:27px;background:#f5f5f5;border-radius:50%}.audit-people-arrow svg{width:13px;height:13px;fill:none;stroke:#222;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:600px){.audit-people{gap:2px}.audit-people .audit-avatar{width:23px;height:23px;font-size:12px}.audit-people-arrow{width:22px;height:22px}}
/* Darker neutral canvas, retaining the fine dot grid. */
.audit-canvas{background-color:#777777;background-image:radial-gradient(circle,#5f5f5f .55px,transparent .7px)}
.audit-board{background:#777777}
/* Stacked collaborator avatars. */
.audit-people{gap:0}
.audit-people .audit-avatar+.audit-avatar{margin-left:-8px}
.audit-people-arrow{margin-left:5px}
@media(max-width:600px){.audit-people .audit-avatar+.audit-avatar{margin-left:-7px}}

.audit-cursor[style*="#D9FF00"]>span{color:#252000}
.audit-cursor[style*="#D9FF00"] .audit-chat>span:after{border-color:#252000}
.audit-top>span:first-child{font-size:16px;line-height:24px;font-weight:600}
@media(max-width:600px){.audit-top>span:first-child{font-size:12px;line-height:20px}}

.audit-cursor[style*="#70B5FF"]>span{color:#163354}
.audit-cursor[style*="#70B5FF"] .audit-chat>span:after{border-color:#163354}
.audit-people .audit-avatar[style*="#70B5FF"]{color:#163354}
/* Gentle photo-wall motion without changing the image crops. */
.photo{transition:transform .5s cubic-bezier(.2,.7,.25,1),box-shadow .5s ease;transform-origin:center;z-index:0}
.photo.photo-reveal{opacity:0;translate:0 18px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.7,.25,1),transform .5s cubic-bezier(.2,.7,.25,1),box-shadow .5s ease;transition-delay:var(--photo-delay,0ms),var(--photo-delay,0ms),0ms,0ms}
.photo.photo-reveal.is-visible{opacity:1;translate:0 0}

@media(prefers-reduced-motion:reduce){.photo,.photo.photo-reveal{opacity:1;translate:none;transition:none}.photo:hover{transform:none}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.hero h1,.hero .strap,.hero-meta p{transform-origin:50% 50%;will-change:transform;backface-visibility:hidden}}
/* Highlight hugs each line rather than creating an oversized rectangle. */
.brief dt{line-height:1.5}
.brief dt span{display:inline;padding:3px 9px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

.audit-board--components .audit-canvas{aspect-ratio:auto;padding:36px 30px 85px}.component-board-image{display:block;width:100%;height:auto}.audit-board--components .component-selection{background:none}.audit-board--components .audit-cursor{z-index:4}

.component-board-crop{position:relative;overflow:hidden;aspect-ratio:2884/1650}.component-board-crop .component-board-image{position:absolute;left:0;top:0;width:100%;max-width:none;height:auto;transform:translateY(-9.37%)}

.audit-cursor[hidden]{display:none}

/* Conceal the two annotations baked into the old components export. */
.component-board-crop:before,.component-board-crop:after{content:'';position:absolute;background:#fff;z-index:1;pointer-events:none}
.component-board-crop:before{left:28%;top:27%;width:21%;height:14%}
.component-board-crop:after{left:72%;top:86%;width:27%;height:14%}
/* Components board uses cursor chat only, without selection overlays. */
.audit-board--components .component-selection{display:none}
/* Blend the exported white sheet into the shared canvas. */
.audit-board--components .component-board-crop{mix-blend-mode:normal}

/* New clean export needs no cropping or annotation masks. */
.component-board-crop{aspect-ratio:auto;overflow:visible}
.component-board-crop .component-board-image{position:relative;transform:none;width:100%;height:auto}
.component-board-crop:before,.component-board-crop:after{display:none}

.audit-board--components .audit-canvas{padding:0;background:#fff}.audit-board--components{background:#fff}

.audit-cursor svg{width:28px;height:28px}
@media(max-width:600px){.audit-cursor svg{width:21px;height:21px}}

/* Reveal on scroll (see script.js) */
.reveal:not(.is-in){opacity:0;translate:0 28px}

/* Result: laptop after the photo grid, the full homepage scrolls inside its screen.
   Screen bounds measured from assets/43725.webp (3200×1796): x 742–2455, y 231–1319, notch x 1503–1694, 22px deep. */
.result{padding-top:0}
.laptop-demo{position:relative;max-width:1600px;margin:0 auto;border-radius:20px;overflow:hidden;background:#f0f0f0;container-type:inline-size}
.laptop-frame{display:block;width:100%;height:auto}
.laptop-screen{position:absolute;left:23.1875%;top:12.862%;width:53.531%;height:60.579%;overflow:hidden;background:#fff}
.laptop-page{display:block;width:100%;height:auto;animation:laptop-scroll 30s cubic-bezier(.45,0,.55,1) infinite;will-change:transform}
.laptop-notch{position:absolute;top:0;left:44.42%;width:11.15%;height:2.02%;background:#020202;border-radius:0 0 .6cqi .6cqi}
@keyframes laptop-scroll{0%,8%{transform:translateY(0)}46%,58%{transform:translateY(-82.884%)}96%,100%{transform:translateY(0)}}
.laptop-demo.is-paused .laptop-page{animation-play-state:paused}
.laptop-pause{position:absolute;right:14px;top:14px;z-index:2;width:30px;height:30px;padding:0;display:grid;place-items:center;border:1px solid #1a305433;border-radius:50%;background:#ffffffd9;color:#1a3054;font:14px/1 Manrope,Arial,sans-serif;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.laptop-pause:hover,.laptop-pause:focus-visible{background:#fff;border-color:#1a3054}
@media(max-width:600px){.laptop-demo{border-radius:12px}.laptop-pause{right:8px;top:8px;width:26px;height:26px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.laptop-page{animation:none}.laptop-pause{display:none}}

/* Checkout demo: the order form rebuilt in HTML and played as a short screen recording.
   The page is laid out on an 860×560 canvas; script.js scales it to fit and moves the camera. */
.cd{position:relative;max-width:1200px;margin:0 auto;aspect-ratio:var(--vw)/var(--vh);border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 30px 80px -30px #1a305440;color:#1a3054;font-family:Manrope,Arial,sans-serif;letter-spacing:-.01em}
.cd-fit{position:absolute;left:0;top:0;width:calc(var(--vw)*1px);height:calc(var(--vh)*1px);transform-origin:0 0;transition:opacity .5s ease}
.cd.is-fading .cd-fit{opacity:0}
.cd-cam{position:relative;width:calc(var(--vw)*1px);transform-origin:0 0;transition:transform 1.15s cubic-bezier(.65,0,.25,1);will-change:transform}
.cd-page{position:relative;width:calc(var(--vw)*1px);background:#fff;padding-bottom:30px}
.cd p{margin:0}
.cd-head{position:relative;height:64px}
.cd-logo{position:absolute;left:67px;top:16px;width:80px;height:30px}
.cd-nav{position:absolute;left:331px;top:24px;display:flex;gap:15px;font-size:10.5px}
.cd-ico{position:absolute;top:22px;width:18px;height:18px;fill:#1a3054}
.cd-ico--tg{left:651px}.cd-ico--wa{left:684px}
.cd-order{position:absolute;left:722px;top:15px;width:68px;height:34px;display:grid;place-items:center;border-radius:10px;background:#eceef3;font-size:10px;font-weight:700}
.cd-h1{margin:26px 0 0 67px;font-size:26.5px;line-height:1.15;font-weight:700;letter-spacing:-.025em}
.cd-grid{display:grid;grid-template-columns:415px 293px;gap:15px;margin:34px 0 0 67px;align-items:start}
.cd-t{font-size:12.5px;font-weight:700;line-height:18px;margin-bottom:8px!important}
.cd-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cd-form>.cd-row{margin-bottom:15px}
.cd-in{position:relative;height:36px;border:1px solid #e1e5ec;border-radius:10px;background:#fff;font-size:10px;display:flex;align-items:center;padding:0 10px;transition:border-color .3s,box-shadow .3s,background .3s}
.cd-in>i{font-style:normal;color:#9aa2b1;transition:opacity .15s}
.cd-in>.cd-val{position:absolute;left:10px;font-weight:400;color:#1a3054;white-space:nowrap}
.cd-in.has-val>i{opacity:0}
.cd-in.is-focus{border-color:#1a3054}
.cd-in.is-typing>.cd-val::after{content:"";display:inline-block;width:1px;height:11px;margin-left:1px;vertical-align:-2px;background:#1a3054;animation:cd-caret .8s steps(1) infinite}
@keyframes cd-caret{50%{opacity:0}}
.cd-in.is-error{border-color:#e5484d;box-shadow:0 0 0 3px #e5484d1f;animation:cd-shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes cd-shake{20%,60%{translate:-4px 0}40%,80%{translate:4px 0}}
.cd-sel::after{content:"";position:absolute;right:12px;top:14px;width:5px;height:5px;border:solid #8a93a3;border-width:0 1.2px 1.2px 0;rotate:45deg;transition:rotate .3s}
.cd-sel.is-open::after{rotate:225deg;top:17px}
.cd-list,.cd-cal{position:absolute;z-index:3;left:-1px;top:36px;background:#fff;border:1px solid #e1e5ec;opacity:0;translate:0 -6px;pointer-events:none;transition:opacity .3s,translate .35s cubic-bezier(.2,.7,.2,1)}
.cd-sel.is-open>.cd-list,.cd-sel.is-open>.cd-cal{opacity:1;translate:0 0}
.cd-list{right:-1px;padding:5px 0;border-radius:0 0 10px 10px;box-shadow:0 14px 30px -14px #1a305440}
.cd-list span{display:block;padding:0 10px;font-size:8.5px;line-height:18px;color:#8a93a3;transition:background .2s,color .2s}
.cd-list span.is-hover{background:#eef3fb;color:#1a3054}
.cd-list span.is-picked{font-weight:700;color:#1a3054}
.cd-cal{width:206px;padding:9px 10px 10px;border-radius:12px;top:40px;box-shadow:0 18px 40px -16px #1a305455}
.cd-cal-h{display:flex;justify-content:space-between;align-items:center;font-size:9.5px;font-weight:700;margin-bottom:6px}
.cd-cal-h span{width:16px;height:16px;display:grid;place-items:center;border-radius:50%;background:#f1f3f7;color:#8a93a3;font-weight:400}
.cd-cal-g{display:grid;grid-template-columns:repeat(7,1fr);row-gap:3px;text-align:center;font-size:8.5px}
.cd-cal-g em{font-style:normal;color:#a3abb8;font-size:7.5px;line-height:16px}
.cd-cal-g u,.cd-cal-g s{text-decoration:none;justify-self:center;width:20px;height:20px;line-height:20px;border-radius:50%;color:#5c6577;transition:background .25s,color .25s,scale .25s}
.cd-cal-g u{color:#c4cad4}
.cd-cal-g s.ok{background:#e6f0ff;color:#1a3054;font-weight:700}
.cd-cal-g s.is-hover{scale:1.15}
.cd-cal-g s.is-picked{background:#1a3054;color:#fff}
.cd-check{display:flex;align-items:center;gap:7px;font-size:9.5px;line-height:17px;margin-bottom:10px}
.cd-box{flex:none;width:17px;height:17px;border-radius:5px;background:#eceef3;display:grid;place-items:center;transition:background .25s}
.cd-box svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12;stroke-dashoffset:12;transition:stroke-dashoffset .35s .1s}
.cd-check.is-on .cd-box{background:#1a3054}
.cd-check.is-on .cd-box svg{stroke-dashoffset:0}
.cd-addr{display:grid;grid-template-rows:1fr;transition:grid-template-rows .7s cubic-bezier(.65,0,.25,1),opacity .4s}
.cd-addr>div{overflow:hidden;min-height:0;display:grid;gap:11px;padding-bottom:11px}
.cd-addr.is-closed{grid-template-rows:0fr;opacity:0}
.cd-area{height:80px;align-items:flex-start;padding-top:10px}
.cd-btn{height:34px;margin-top:20px;border-radius:10px;background:#e9ebef;color:#9aa2b1;display:grid;place-items:center;font-size:10.5px;font-weight:700;transition:background .45s,color .45s,scale .15s}
.cd-btn.is-on{background:#caff00;color:#1a3054}
.cd-btn.is-press{scale:.97}
.cd-sum{border-radius:16px;background:#e8edf6;padding:14px 14px 15px;font-size:12px;line-height:21px}
.cd-sum span{margin-left:8px}
.cd-price{margin-top:8px!important;font-size:19px;font-weight:700;display:flex;align-items:baseline;gap:10px}
.cd-price s{font-size:10.5px;font-weight:400;color:#c5ccd8}
.cd-foot{position:relative;margin-top:56px;height:150px;background:#f6f8fb;display:flex;gap:96px;padding:20px 0 0 243px;font-size:9px;line-height:14px;color:#5c6577}
.cd-foot .cd-logo{top:20px}
.cd-dim{position:absolute;inset:0;background:#7f8faa;opacity:0;transition:opacity .6s;pointer-events:none}
.cd-dim.is-on{opacity:.5}
.cd-modal{position:absolute;left:277px;top:176px;width:305px;padding:22px 22px 21px;border-radius:14px;background:#fff;box-shadow:0 30px 60px -20px #1a305466;opacity:0;scale:.92;translate:0 10px;transition:opacity .45s,scale .55s cubic-bezier(.2,.9,.25,1.15),translate .55s cubic-bezier(.2,.9,.25,1.15)}
.cd-modal.is-on{opacity:1;scale:1;translate:0 0}
.cd-mt{font-size:14px;font-weight:700;margin-bottom:6px!important}
.cd-mp{font-size:9.5px;line-height:1.5;color:#8a93a3}
.cd-modal .cd-btn{height:42px;margin-top:20px;font-size:12px}
.cd-cursor{position:absolute;z-index:5;left:0;top:0;width:15px;height:18px;transform-origin:0 0;transition:transform .85s cubic-bezier(.45,0,.2,1);pointer-events:none}
.cd-cursor svg{display:block;width:100%;height:100%;fill:#111;stroke:#fff;stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 2px 3px #0004)}
.cd-ripple{position:absolute;left:-9px;top:-9px;width:20px;height:20px;border-radius:50%;background:#0d99ff55;scale:0;opacity:0}
.cd-cursor.is-click .cd-ripple{animation:cd-ripple .5s ease-out}
@keyframes cd-ripple{from{scale:.2;opacity:1}to{scale:1.6;opacity:0}}
.cd-pause{position:absolute;right:14px;top:14px;z-index:6;width:30px;height:30px;padding:0;display:grid;place-items:center;border:1px solid #1a305433;border-radius:50%;background:#ffffffd9;color:#1a3054;font:14px/1 Manrope,Arial,sans-serif;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.cd-pause:hover,.cd-pause:focus-visible{background:#fff;border-color:#1a3054}
.cd.is-paused *{animation-play-state:paused!important}
@media(max-width:600px){.cd{border-radius:12px}.cd-pause{right:8px;top:8px;width:26px;height:26px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.cd-pause,.cd-cursor{display:none}}
.cd.is-resetting .cd-fit *,.cd.is-resetting .cd-fit *::before,.cd.is-resetting .cd-fit *::after{transition:none!important;animation:none!important}

/* Discount demo (872×672 canvas): wrong promo code, correction, discount applied. */
.cd--promo{max-width:1000px}
.cp{min-height:672px;background:#f2f3f7;padding:22px 23px 23px;font-size:11px;line-height:1.35}
.cp-t{font-size:13.5px;font-weight:700;line-height:18px;margin:0 0 19px!important}
.cp-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-bottom:28px}
.cp-tabs span{height:37px;display:flex;align-items:center;padding:0 12px;border-radius:6px;background:#fff;font-size:11px}
.cp-tabs .is-on,.cp-plans .is-on{background:#cfe1fb;font-weight:700}
.cp-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:30px}
.cp-plans>div{position:relative;height:51px;border-radius:6px;background:#fff;padding:11px 12px 0;display:flex;flex-direction:column}
.cp-plans b{font-size:11px;font-weight:400}.cp-plans .is-on b{font-weight:700}
.cp-plans small{font-size:8px;color:#9aa2b1;margin-top:2px}
.cp-plans em{position:absolute;right:12px;top:-9px;min-width:34px;height:20px;padding:0 6px;border-radius:4px;background:#caff00;font:700 8.5px/20px Manrope,Arial,sans-serif;font-style:normal;text-align:center}
.cp-card{background:#fff;border-radius:14px}
.cp-promo{height:159px;padding:24px 23px 0;margin-bottom:29px}
.cp-h{font-size:14.5px;font-weight:700;line-height:20px}
.cp-sub{position:relative;height:16px;margin-top:4px!important;font-size:10.5px;color:#8a93a3}
.cp-sub span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;translate:0 4px;transition:opacity .35s,translate .35s}
.cp-sub span.is-on{opacity:1;translate:0 0}
.cp-row{display:flex;gap:7px;margin-top:10px}
.cp-code{width:202px;height:45px;font-size:11px;padding:0 12px}
.cp-code>.cd-val{left:12px}
.cd-in.is-ok{border-color:#bfe33a}
.cp-apply{width:112px;height:45px;margin:0;font-size:12.5px;overflow:hidden;white-space:nowrap;transition:background .35s,color .35s,opacity .4s,width .5s cubic-bezier(.65,0,.25,1),scale .15s}
.cp-apply.is-gone{opacity:0;width:0}
.cp-err{margin-top:5px!important;font-size:8px;color:#e5484d;opacity:0;translate:0 -3px;transition:opacity .3s,translate .3s}
.cp-err.is-on{opacity:1;translate:0 0}
.cp-sum{display:flex;justify-content:space-between;padding:22px 23px 24px}
.cp-left{padding-top:6px}
.cp-left p{font-size:11px;line-height:21px}
.cp-left span{color:#8a93a3;margin-left:4px}
.cp-disc{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .6s cubic-bezier(.65,0,.25,1),opacity .5s}
.cp-disc>div{overflow:hidden;min-height:0}
.cp-disc.is-on{grid-template-rows:1fr;opacity:1}
.cp-total{display:flex;align-items:baseline;gap:12px;margin-top:12px!important;font-size:22px!important;font-weight:700;line-height:1.2!important}
.cp-total s{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;font-size:24px;color:#c5ccd8;opacity:0;margin-right:-12px;transition:max-width .6s cubic-bezier(.65,0,.25,1),opacity .4s,margin .6s}
.cp-total s.is-on{max-width:120px;opacity:1;margin-right:0}
.cp-total b{font-size:32px;letter-spacing:-.02em}
.cp-right{width:286px}
.cp-note{font-size:7.5px;color:#9aa2b1;line-height:11px}
.cp-note u{text-underline-offset:2px}
.cp-phone{height:44px;margin-top:7px}
.cp-order{height:45px;margin:12px 0 6px;font-size:12.5px}
.cp-order.is-hover{background:#bdf000}
.cp-h,.cp-row,.cp-err{width:max-content}

/* Homepage: each phone pins beside the long desktop screenshot until the next one pushes it out. */
.homepage{background:#cce4fc} /* matches the phone image background so its crop edges disappear */
.phones{padding-bottom:0;justify-content:flex-start}
.phone-slot{flex:1 1 0}
.phone-slot .phone-crop{position:sticky;top:var(--phone-top,15vh)}
@media(max-width:600px){.phone-slot{flex:none;width:min(100%,295px)}.phone-slot .phone-crop{position:relative;top:auto}}

/* Outcome: closing summary, same two-column rhythm as the opening brief. */
.outcome{padding-bottom:160px}
.outcome .brief{margin-top:40px}
@media(max-width:600px){.outcome{padding-bottom:80px}.outcome .brief{margin-top:24px}}

/* Hero cards: staggered entrance; scroll drift is set in script.js. */
@keyframes hero-card-in{from{opacity:0;scale:.92}}
.hero-meta p{animation:hero-card-in .8s cubic-bezier(.2,.7,.2,1) backwards}
.hero-meta p:nth-child(1){animation-delay:.25s}.hero-meta p:nth-child(2){animation-delay:.38s}.hero-meta p:nth-child(3){animation-delay:.51s}
@media(prefers-reduced-motion:reduce){.hero-meta p{animation:none}}

/* Promotions: show the image only down to the stories, hiding the cut-off FAQ heading at its bottom. */
.promo-desktop{container-type:inline-size}
.promo-desktop img{width:100%;height:auto;aspect-ratio:2054/1366;object-fit:cover;object-position:top;border-radius:2.05cqi} /* same radius as the corners baked into the image */

/* Restart buttons sit just left of the pause buttons and share their look. */
.cd-restart,.laptop-restart{position:absolute;right:50px;top:14px;z-index:6;width:30px;height:30px;padding:0;display:grid;place-items:center;border:1px solid #1a305433;border-radius:50%;background:#ffffffd9;color:#1a3054;font:16px/1 Manrope,Arial,sans-serif;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.laptop-restart{z-index:2}
.cd-restart:hover,.cd-restart:focus-visible,.laptop-restart:hover,.laptop-restart:focus-visible{background:#fff;border-color:#1a3054}
@media(max-width:600px){.cd-restart,.laptop-restart{right:40px;top:8px;width:26px;height:26px;font-size:14px}.laptop-restart{right:38px}}
@media(prefers-reduced-motion:reduce){.cd-restart,.laptop-restart{display:none}}
.cd-restart svg,.laptop-restart svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:600px){.cd-restart svg,.laptop-restart svg{width:12px;height:12px}}


.laptop-demo.is-offscreen .laptop-page{animation-play-state:paused}
.hero{overflow:hidden;overflow:clip} /* drifting hero cards must not widen the page */



/* Calculator: two columns, nothing overlaps. The tall calculator on the left; on the right a column that
   travels with the scroll — the intro text, then the dish card the calculator opens. */
.calc-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6%;align-items:start;max-width:1300px}
.calc-side{position:sticky;top:120px;display:flex;flex-direction:column;gap:40px}
.calc-side .calc-intro{margin:0}
.calc-side .calc-dish{box-shadow:0 30px 70px -36px #1a305455}
@media(max-width:600px){.calc-layout{grid-template-columns:1fr;gap:24px}.calc-side{position:static;display:contents}.calc-side .calc-intro{order:-1}}

/* Outcome: a tightly cropped laptop beside the three result points.
   Crop of assets/43725.webp (3200×1796): laptop at x 564–2631, y 174–1650; kept x 414–2781, y 24–1796. */
.laptop-demo{aspect-ratio:2367/1772;background:#e0e0e0}
.laptop-inner{position:relative;width:135.193%;margin-left:-17.491%;margin-top:-1.014%}
.laptop-demo .laptop-pause{top:8px;right:8px;width:26px;height:26px;font-size:12px}
.laptop-demo .laptop-restart{top:8px;right:40px;width:26px;height:26px}
.laptop-demo .laptop-restart svg{width:12px;height:12px}
.outcome-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:6%;align-items:center}
.outcome-grid .laptop-demo{margin:0;width:100%}
.outcome .outcome-points{margin:0;max-width:none;grid-template-columns:1fr;gap:14px;font-size:clamp(17px,1.35vw,22px);line-height:1.4}
.outcome .outcome-points dt{text-align:left;font-size:clamp(20px,1.6vw,26px)}
.outcome .outcome-points dd{margin-bottom:18px}
@media(max-width:1000px){.outcome-grid{grid-template-columns:1fr;gap:40px}}

/* Photo wall cursor reaction (script.js): quicker follow, the photo under the cursor sits on top with a shadow. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.photo-grid .photo{transition-property:opacity,translate,transform,box-shadow;transition-duration:.7s,.7s,.45s,.45s;transition-timing-function:ease,cubic-bezier(.2,.7,.25,1),cubic-bezier(.2,.7,.25,1),ease;will-change:transform}
.photo-grid .photo.is-near{z-index:2;box-shadow:0 24px 40px -18px #1a305466}
}
.photo-grid .photo--empty{pointer-events:none;box-shadow:none!important}