@font-face{font-family:Google Sans;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/GoogleSans-400.woff2) format("woff2")}@font-face{font-family:Google Sans;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/GoogleSans-500.woff2) format("woff2")}@font-face{font-family:Google Sans;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/GoogleSans-600.woff2) format("woff2")}@font-face{font-family:Google Sans;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/GoogleSans-700.woff2) format("woff2")}@font-face{font-family:Hind Siliguri;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/HindSiliguri-400.woff2) format("woff2")}@font-face{font-family:Hind Siliguri;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/HindSiliguri-500.woff2) format("woff2")}@font-face{font-family:Hind Siliguri;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/HindSiliguri-600.woff2) format("woff2")}@font-face{font-family:Hind Siliguri;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/HindSiliguri-700.woff2) format("woff2")}@font-face{font-family:GS Fallback;src:local("Arial"),local("Liberation Sans"),local("Roboto"),local("Helvetica Neue");font-weight:400;size-adjust:101.85%;ascent-override:97%;descent-override:29%;line-gap-override:0%}@font-face{font-family:GS Fallback;src:local("Arial Bold"),local("Arial"),local("Liberation Sans"),local("Roboto"),local("Helvetica Neue");font-weight:700;size-adjust:100.04%;ascent-override:97%;descent-override:29%;line-gap-override:0%}:root{--orange: #fa641f;--orange-600: #e5530f;--orange-700: #c0470d;--orange-tint: #fff1ea;--ink: #0e0e14;--black: #0b0b10;--body: #45454f;--muted: #74747d;--bg: #ffffff;--bg-soft: #fbfbfc;--line: #ededf1;--line-soft: #f3f3f6;--card: #ffffff;--c-purple: #7b5cff;--c-purple-bg: #f1ecff;--c-blue: #3b82f6;--c-blue-bg: #e8f1ff;--c-teal: #10b3a3;--c-teal-bg: #e1f7f3;--c-pink: #ff5d8f;--c-pink-bg: #ffe9f0;--c-amber: #f7a823;--c-amber-bg: #fff4e0;--c-green: #22c55e;--c-green-bg: #e6f9ee;--grad-accent: linear-gradient(135deg, #fa641f 0%, #ff9242 100%);--grad-text: linear-gradient(100deg, #fa641f 0%, #ff9242 100%);--shadow-xs: 0 1px 2px rgba(17, 17, 34, .05), 0 1px 1px rgba(17, 17, 34, .04);--shadow-sm: 0 4px 14px rgba(17, 17, 34, .05), 0 1px 3px rgba(17, 17, 34, .04);--shadow: 0 14px 36px rgba(17, 17, 34, .08), 0 4px 10px rgba(17, 17, 34, .04);--shadow-lg: 0 32px 70px rgba(17, 17, 34, .12), 0 10px 24px rgba(17, 17, 34, .06);--shadow-orange: 0 12px 28px rgba(250, 100, 31, .28);--radius: 14px;--radius-lg: 22px;--radius-xl: 28px;--radius-pill: 999px;--ease: cubic-bezier(.22, 1, .36, 1);--font: "Google Sans", "GS Fallback", "Product Sans", "Poppins", "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--font);color:var(--body);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}h1,h2,h3,h4{color:var(--ink);line-height:1.14;margin:0;letter-spacing:-.02em}p{margin:0}img{max-width:100%;display:block}button{font-family:inherit}a{color:inherit;text-decoration:none}.tabular{font-variant-numeric:tabular-nums}::selection{background:var(--orange);color:#fff}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}svg{width:1em;height:1em;flex-shrink:0}.ic{display:inline-flex;line-height:0}.ic svg{display:block}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--orange);outline-offset:2px}.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:0;font-size:15px;font-weight:700;line-height:1;white-space:nowrap;color:#1f2525;border:3px solid transparent;border-radius:var(--radius-pill);background:linear-gradient(#d6dcdc,#d6dcdc) padding-box,linear-gradient(125deg,#ff9242,#fa641f 52%,#e5530f) border-box;padding:11px 24px;min-height:47px;cursor:pointer;box-shadow:0 5px 16px #1612182e;transition:color .4s var(--ease),box-shadow .35s var(--ease),transform .2s var(--ease)}.btn:after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,#ff9242,#fa641f,#e5530f);opacity:0;transition:opacity .42s var(--ease)}.btn:hover{color:#f3f3f6;transform:translateY(-2px);box-shadow:0 14px 30px #e5530f6b,0 0 22px #fa641f80}.btn:hover:after{opacity:1}.btn:active{transform:translateY(0) scale(.985)}.btn .ic,.btn>svg{display:none}.btn--beam{overflow:visible}.btn>svg.btn__beam{display:block}.btn__beam{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}.btn__beam path{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px rgba(255,255,255,1)) drop-shadow(0 0 6px rgba(255,244,232,.95)) drop-shadow(0 0 13px rgba(255,168,100,.6));stroke-dasharray:22 100;stroke-dashoffset:22;opacity:0}.btn--beam:hover .btn__beam path,.btn--beam:focus-visible .btn__beam path{animation:btn-beam .72s cubic-bezier(.45,.05,.55,.95) .05s 1}@keyframes btn-beam{0%{stroke-dashoffset:22;opacity:0}9%{opacity:1}91%{opacity:1}to{stroke-dashoffset:-100;opacity:0}}.btn--lg{font-size:16px;padding:14px 28px;min-height:54px}.btn--block{width:100%}.btn:not(.btn--primary):after{inset:-242% auto auto -45.6%;width:174.5%;height:682%;border-radius:0;opacity:1;-webkit-mask:url('data:image/svg+xml,<svg viewBox="0 0 15 14" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M 5 3.523 C 5.078 3.523 5.155 3.525 5.233 3.528 C 5.873 1.483 7.765 0 10 0 C 12.761 0 15 2.264 15 5.057 C 15 7.85 12.761 10.114 10 10.114 C 9.922 10.114 9.845 10.112 9.767 10.108 C 9.127 12.154 7.235 13.636 5 13.636 C 2.239 13.636 0 11.372 0 8.58 C 0 5.787 2.239 3.523 5 3.523 Z" transform="translate(0 0.18)" fill="black"/></svg>') no-repeat center / 100% 100%;mask:url('data:image/svg+xml,<svg viewBox="0 0 15 14" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M 5 3.523 C 5.078 3.523 5.155 3.525 5.233 3.528 C 5.873 1.483 7.765 0 10 0 C 12.761 0 15 2.264 15 5.057 C 15 7.85 12.761 10.114 10 10.114 C 9.922 10.114 9.845 10.112 9.767 10.108 C 9.127 12.154 7.235 13.636 5 13.636 C 2.239 13.636 0 11.372 0 8.58 C 0 5.787 2.239 3.523 5 3.523 Z" transform="translate(0 0.18)" fill="black"/></svg>') no-repeat center / 100% 100%;transform-origin:0 0;transform:scale(.411,.401);transition:transform .7s var(--ease)}.btn:not(.btn--primary):hover:after{opacity:1;transform:scale(1)}.brand{display:inline-flex;align-items:center;gap:11px;background:none;border:0;padding:0;cursor:pointer}.brand__mark{display:inline-flex;color:var(--ink);transition:transform .25s var(--ease)}.brand__mark svg{width:34px;height:auto;display:block}.brand:hover .brand__mark{transform:rotate(-4deg) scale(1.05)}.brand__name{font-size:21px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}.brand__name i{color:var(--orange);font-style:normal}.nav{position:fixed;top:16px;left:50%;transform:translate(-50%);z-index:100;width:min(1160px,calc(100% - 28px))}.fxw{display:inline;transition:opacity .2s cubic-bezier(.37,0,.63,1)}.fxw.fx-out{opacity:0}.fxword{display:inline-block;white-space:nowrap;vertical-align:baseline}.fxc{display:inline-block;vertical-align:baseline;will-change:transform;backface-visibility:hidden}.fxc.fx-in{animation:fx-char-in .48s linear both}@keyframes fx-char-in{0%{opacity:0;transform:translate(20px)}4.55%{opacity:.077;transform:translate(18.461px)}9.09%{opacity:.1996;transform:translate(16.008px)}13.64%{opacity:.315;transform:translate(13.7px)}18.18%{opacity:.4155;transform:translate(11.691px)}22.73%{opacity:.5015;transform:translate(9.97px)}27.27%{opacity:.575;transform:translate(8.501px)}31.82%{opacity:.6376;transform:translate(7.248px)}36.36%{opacity:.691;transform:translate(6.18px)}40.91%{opacity:.7365;transform:translate(5.269px)}45.45%{opacity:.7754;transform:translate(4.493px)}50%{opacity:.8085;transform:translate(3.831px)}54.55%{opacity:.8367;transform:translate(3.266px)}59.09%{opacity:.8608;transform:translate(2.785px)}63.64%{opacity:.8813;transform:translate(2.374px)}68.18%{opacity:.8988;transform:translate(2.024px)}72.73%{opacity:.9137;transform:translate(1.726px)}77.27%{opacity:.9264;transform:translate(1.472px)}81.82%{opacity:.9373;transform:translate(1.255px)}86.36%{opacity:.9465;transform:translate(1.07px)}90.91%{opacity:.9544;transform:translate(.912px)}95.45%{opacity:.9611;transform:translate(.778px)}to{opacity:1;transform:translate(0)}}@media (prefers-reduced-motion: reduce){.fxw{transition:none}.fxc.fx-in{animation:none}}.nav__inner{position:relative;display:flex;align-items:center;gap:14px;height:62px;padding:0 10px 0 20px;background:#ffffffb8;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.55);border-radius:var(--radius-pill);box-shadow:0 12px 34px #1111221f,0 2px 8px #1111220d;transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}.nav--scrolled .nav__inner{background:#ffffffdb;box-shadow:0 16px 40px #11112229,0 3px 10px #1111220f}.nav__divider{display:none}.nav__links{display:flex;align-items:center;gap:2px}@media (min-width: 1060px){.nav__links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}}.nav__link{position:relative;background:none;border:0;cursor:pointer;font-size:15px;font-weight:500;color:var(--body);padding:9px 13px;border-radius:10px;transition:color .18s var(--ease)}.nav__link:hover{color:var(--ink)}.nav__tools{display:flex;align-items:center;gap:9px;margin-left:auto}.theme-switch{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:50%;background:#1111220d;border:1px solid var(--line);cursor:pointer;overflow:hidden;transition:background .2s var(--ease),border-color .2s var(--ease)}.theme-switch:hover{background:#11112217;border-color:#d8d8df}.theme-switch svg{position:absolute;width:22px;height:22px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s cubic-bezier(.34,1.56,.64,1)}.theme-switch__sun{stroke:var(--orange);transform:scale(1) translateY(0);opacity:1}.theme-switch__moon{stroke:#fff;transform:scale(.5) translateY(22px);opacity:0}.nav__lang{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:var(--radius-pill);border:1px solid var(--line);background:#edeef1;cursor:pointer;transition:border-color .25s var(--ease)}.nav__lang:hover{border-color:#d8d8df}.nav__lang-fill{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--orange);transform:translate(-50%,-50%) scale(0);transform-origin:center;pointer-events:none;z-index:0;will-change:transform}.nav__lang-txt{position:relative;z-index:1;color:var(--ink);font-size:13.5px;font-weight:600;line-height:1;transition:color .28s var(--ease)}.nav__lang:hover .nav__lang-txt{color:#fff}.nav__cta-btn{height:44px;padding:0 20px}.nav__burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;font-size:22px;color:var(--ink);background:#1111220a;border:1px solid var(--line);border-radius:50%;cursor:pointer;transition:background .2s var(--ease)}.nav__burger:hover{background:#11112214}.nav__burger-icon{position:relative;display:block;width:22px;height:16px}.nav__burger-icon i{position:absolute;left:0;top:0;width:22px;height:2.5px;border-radius:3px;background:currentColor;transform-origin:center;will-change:transform}.nav__burger-icon i:nth-child(1){transform:translateY(0)}.nav__burger-icon i:nth-child(2){transform:translateY(6.75px)}.nav__burger-icon i:nth-child(3){transform:translateY(13.5px)}.nav__mobile{position:absolute;top:calc(100% + 10px);left:0;right:0;max-height:0;overflow:hidden;background:#fffffff7;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-lg);transition:max-height .36s var(--ease),box-shadow .36s var(--ease)}.nav__mobile.is-open{max-height:540px;border:1px solid var(--line);box-shadow:var(--shadow-lg)}.nav__mobile-link{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-soft);cursor:pointer;font-size:16px;font-weight:500;color:var(--ink);padding:15px 22px;transition:background .15s var(--ease),padding-left .18s var(--ease)}.nav__mobile-link:hover{background:var(--bg-soft);padding-left:28px}.nav__mobile-cta{display:flex;flex-direction:column;gap:10px;padding:16px 22px 22px}.brand{flex:0 0 auto}.brand__name{white-space:nowrap}html.smk-hero:not(.smk-words) .hero .eyebrow,html.smk-hero:not(.smk-words) .hero .hero__title .w,html.smk-hero:not(.smk-words) .hero .hero__sub,html.smk-hero:not(.smk-words) .hero .hero__actions,html.smk-hero:not(.smk-words) .hero .pills,html.smk-hero:not(.smk-words) .hero .hero__visual{opacity:0}html.smk-pre .nav{opacity:0}html.smk-pre .hero__title .w,html.smk-hero:not(.smk-settled) .hero__title .w{will-change:transform,opacity}html.smk-settled .hero__title .w{will-change:auto}.nav{contain:layout}.hero__title .w{display:inline-block;padding:.1em 0 .18em;margin:-.1em 0 -.18em}.hero__title .grad-text .w{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}html.smk-pre .hero .eyebrow,html.smk-pre .hero .hero__title .w,html.smk-pre .hero .hero__sub,html.smk-pre .hero .hero__actions,html.smk-pre .hero .pills,html.smk-pre .hero .hero__visual,html.smk-pre .hero .hero__title{opacity:0}html.smk-go .nav{animation:smkNavIn 1.45s var(--ease) both}html.smk-go .nav__links,html.smk-go .nav__tools{animation:smkNavFade .45s var(--ease) 1.15s both}@keyframes smkNavIn{0%{opacity:0;transform:translate(-50%,44vh) scale(.86);width:248px}15%{opacity:1;transform:translate(-50%,44vh) scale(1);width:248px}42%{opacity:1;transform:translate(-50%,44vh) scale(1);width:248px}70%{opacity:1;transform:translate(-50%) scale(1);width:248px}to{opacity:1;transform:translate(-50%) scale(1);width:min(1160px,calc(100% - 28px))}}@keyframes smkNavFade{0%{opacity:0}to{opacity:1}}html.smk-words .hero__title .w{animation:smkWordIn .6s var(--ease) both;animation-delay:calc(var(--wi) * 42ms)}html.smk-words .hero .eyebrow{animation:smkRiseIn .5s var(--ease) 0s both}html.smk-words .hero .hero__sub{animation:smkRiseIn .55s var(--ease) .42s both}html.smk-words .hero .hero__actions{animation:smkBtnIn .55s var(--ease) .62s both}html.smk-words .hero .pills{animation:smkRiseIn .5s var(--ease) .74s both}html.smk-words .hero .hero__visual{animation:smkRiseIn .7s var(--ease) .46s both}@keyframes smkWordIn{0%{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:translateY(0)}}@keyframes smkRiseIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes smkBtnIn{0%{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@media (prefers-reduced-motion: reduce){html.smk-pre .nav{opacity:1}html.smk-go .nav,html.smk-go .nav__links,html.smk-go .nav__tools{animation:none}html.smk-pre .hero .hero__title,html.smk-pre .hero .eyebrow,html.smk-pre .hero .hero__title .w,html.smk-pre .hero .hero__sub,html.smk-pre .hero .hero__actions,html.smk-pre .hero .pills,html.smk-pre .hero .hero__visual,html.smk-hero .hero .eyebrow,html.smk-hero .hero .hero__title .w,html.smk-hero .hero .hero__sub,html.smk-hero .hero .hero__actions,html.smk-hero .hero .pills,html.smk-words .hero .hero__visual{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}}.topblur{position:fixed;top:0;left:0;right:0;height:150px;z-index:95;pointer-events:none}.topblur>span{position:absolute;inset:0;display:block}.topblur>span:nth-child(1){-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 92%);mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 92%)}.topblur>span:nth-child(2){-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 30%,transparent 60%);mask-image:linear-gradient(to bottom,#000 0%,#000 30%,transparent 60%)}.topblur>span:nth-child(3){-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 14%,transparent 36%);mask-image:linear-gradient(to bottom,#000 0%,#000 14%,transparent 36%)}@media (max-width: 640px){.topblur{height:112px}}html.cv-on main>section,html.cv-on footer{content-visibility:auto;contain-intrinsic-size:var(--cis, auto 900px)}@media (max-width: 430px){.nav__inner{padding:0 8px 0 14px;gap:9px}.nav__lang{padding:7px 10px}.brand{gap:8px}}@media (max-width: 640px){.topblur{display:none}.nav__inner{background:#fffffff5;backdrop-filter:none;-webkit-backdrop-filter:none}html[data-theme=dark] .nav__inner{background:#14141cf7}.nav__mobile{backdrop-filter:none;-webkit-backdrop-filter:none}}.section{padding:84px 0;scroll-margin-top:80px}body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACECAYAAABRRIOnAAAFvElEQVR4nOzd3W/TVhjH8WM7dl5Ly0gKBBCR1o2tmjakXE276RUDaVzyV+4SpEnsZhebuIo0DQlpFWOlK80gZZSGvNRO7PkEIuVhtJAsHIfk+5FQUsdRH9qfHzvH7nFKASNSChhBICAQCAgEAgKBgEAgIBAICAQCAoGAQCAgEAgIBAICgYDwfwJhnf7ySi4dtb1DK+c//u12O14WKbOoYco1OGpC5Wo1t2xlV1zbdTO2yqTPnew36/VAGUQN06/BVhM60VrJHve1CdQw/RomDsRBfr9z3NcmUMP0a5h4lxG3pF5qdS2Mwk7Uirz237/+bPwHQQ3Tr8FSwAg+dkIgEBAIBAQCAYFAQJh4HGLGvxcmZKxDlNY3clnHWW373cbe77801WKyytXrE40i7tZu6rGF936OxOguI+1m0vG/84XLVzstv7vXuPfTC7VYIjc4PO2l3Mw4b/J7QTd++FMZkEgbd20nu5LJX6hcvlqJt5icWiDtnt9QY5rkPZOaeOh6XPlSxcukvOXRZY5lu56KVlbKl3J555R/cLDTU3Ou3djyl898krcty32X9XtR1H5090djgZiJAz0nivLZ1Y8qH39x5UKlsjFWO/0QHdrOO/+Cx1l3GhLtEK+zHMcLU9bK6tnP00vZcrC/vzWXHaNZ3wx0V4y3Ru+49fqW1dqu3dpTBs3cR0HXda3IiU6oJa/y6VffnVtfv+GpOdRV1t401pk2xgYSEn+MbOsOcNTr+jW9jjJs5kYqgyCIPNtrqqb/dHPrdlfNsW69vpc/cyZ/1GsqATMViNAPXqgXfmPegzC0u1trrxWvNa2UvTS6POqFTf2aSsBMBEK3R//x08bOzh3jVxslrq0aKj5i+s+yhCR6DBGE/U7Lsh8+qN3aXsgwxO7f/+FQd4Th1/q5XqYSkkiHGARhMYeu3yzuCEE2KOinqY6TWHcYfH9l0GHQPVzwk1tvpDvCxeq3zwfP7ybXHTSTF9nq3VOo8GbV6suh7FrN6B/5vI6rriFwxRQEAgGBQEAgEBAIBAQmDKEGgQlDqEFgwhBqEJgwhBoEJgyhBoGhawh87IRAICAQCAgEAgKBgEAgIBAICAQCAoGAQCAgEAgIBAICgYBAICAQCAgEAgKBgEAgIBAICAQCAoGAQCAgEAgIBAICgYBAICAQCAhMGEINAhOGUIPAhCHUIDBhCDUITBhCDQIThkDgYycEAgGBQEAgEBAIBITk7+yrby00vL0QjmLs95R4h7ioikX9+FCpuoJQvPTNUs7LlDr9/hNTdzBMNBBra9fSPb+//Or5P0ner3KWlNY3CnkvU3RtZzAE3em3lCnJdoicKrkpdzA4FllhKX7YUQusXL2e8/rB6jAISUgsELo7jN7zWj/XyxaxS+ggZFRUdKIwr+yJzyZMRXIdIu4ORyxbmC5x/vzXWe/0qdIgCDMikUCUy9XcaHcYWpQuUalsZJyCV7I9t6Ai09fSHC+RQGTOni0e9YOIMv3V+OEvNYfW1294PbdT8kN/yXbdmTyxaHwcQu8vnSg6skXqrUavo5AI4x1CHzy94zrbas7cu/e9Hz880ruMsKBe7jJmjNFDWr3lp6Oo9Lb14rblZcqftZv1zURvjP6+7O9v9Z49+eMg5xRbdiHn6v/vcet3e8FBu7HlKwOM7jLSYf+tYZhk3Q/Vzs6dzoPare2WZT/sW5a50adjGOsQevQt53pv3V0M2ZblOifPdU1tGUnSnfBZffO57opW2Es7li3O7ZjsEMaOIXIpb+wt/tV7jIzhz4Ld2k399xRbrw9dm2QqEFbgph+PfUDgpgfvVeb/8CVR+kRWI94Qhie3lEFcZPth0Md6oTKAQEDgiikIBAICgYBAICAQCAhMGEINAhOGUIPAhCHUIDBhCDUITBhCDQJD1xD42AmBQEAgEBAIBAQCAYFAQCAQEAgEBAIBgUBAIBAQCAQEAgHhXwAAAP//WPYcywAAAAZJREFUAwBiTtj7PseQrwAAAABJRU5ErkJggg==);background-repeat:repeat;background-position:center center;background-size:44px 44px}html[data-theme=dark] body:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACECAYAAABRRIOnAAAD90lEQVR4nOzdgW7TQBBF0QmkcUUqCv3/b6SAWiCBKuzQteQX0jaOoxnHvkey6jSpurHejr22tV4a0LE0oINAQBAICAIBQSAgCAQEgYAgEBAEAoJAQBAICAIBQSAgBgVit9tdlR/vy/K0WCx+WwLacN42nByI2oDr+vKqvLbojUEbzt+Gd3a65RuvI9AGO28bhgTizxuvI9AGO28bFjYA++/ptWFQIDA9DDshCAQEgYAgEBAEAmLIeYheyrCIEc0FiKwQfkr1pvx8LOPkjc1UPV/QW9T5jehdhv+/27JR/Mt5MLY2P94p+obCt9e9BQjbZezxDfKpBOPzqT3mgj1af6f8zUmyAtHyMHgoPByzOMCtVbFPZdxGVtLsQLRWZbkrobidSTD69Piw6uDGEohWY88V4+OUg1EPEI/p9dvoi2Vj3Og+PPWbPZoSCh+N+MHnk02P9/zVEZ8JNbYKMRtHVIltxqX0MVaIXVm8MvwoGyTjZpNIr1WJ8OrgxhaIdhcx9SD84xWg7habvbc2WTfajCUQXjof5hKEPV4JmgO/S5EdCO8FD1m9YQy8E+xViU1mx8gKxJxPXR/SPZZIqw4uOhCe/Flf3DqkVolf7bolCrsk7Ze/i53hoLJ9/I5pyz7nwj0KENwxBUEgIAgEBIGAIBAQTBhCGwQThtAGwYQhwzFhSMVkHTa9NjBhCG0QnLqGYNgJQSAgCAQEgYAgEBAEAoJAQBAICAIBQSAgCAQEgYAgEBAEAoJAQBAICAIBQSAgCAQEgYAgEBAEAoJAQBAICAIBQSAgCAQEE4bQBsGEIbRBMGHIcEwYUjFZh02vDUwYQhsEE4ZAMOyEIBAQBAKCQEAQCIj0J/v6o4XaxwvhMH88lQUZw6OeP9QFe0oQ/Pnnd2X1yoKk7jLKl/X/f13Xf870Qa7/KdvCH9m4tsAgtLKPIfxLLzrr32zG6tnGG0sIQistELU6dB9x7OVxOccqUYPgHWJlyTIrxPqF382mStRO4RUhPQitlEDUHtEceGsWVaIGwcPf2MhkVYj1G+9NskrU4XUbhFFeWAwfdtbq8FqJbOpnkCDjPMT6TJ+5OP5c77J8L6v3ZdnYCIUG4ojq0FpNuUr4MVJZfLf4pSxbG5HoCtGn50+ySnTVYHy154oximCEBaKefeszvFrVv5k8v+WtE4yUW/BakRXilB4/+SrRVYPhofBwpAQjctj5YDhKCYXvPrZ+ccuCOwU32V4Av/xd7CwAgYDgjikIAgFBICAIBASBgGDCENogmDCENggmDBmOCUMqJuuw6bWBCUNog+DUNQTDTggCAUEgIAgEBIGAIBAQBAKCQEAQCAgCAUEgIAgEBIGA+AsAAP//mqzTPwAAAAZJREFUAwBlVxVQj7fjigAAAABJRU5ErkJggg==)}.section__head{max-width:720px;margin:0 auto 52px;text-align:center}.section__title{font-size:clamp(28px,4vw,43px);font-weight:700;line-height:1.1;text-align:center;max-width:780px;margin:0 auto 48px}.section__head .section__title{margin:14px auto 0}.section__sub{font-size:clamp(15px,2vw,17px);color:var(--muted);margin-top:14px}.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--orange-700);background:var(--orange-tint);padding:7px 14px;border-radius:var(--radius-pill)}.eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px #fa641f2e}.hero{position:relative;overflow:hidden;padding:150px 0 96px;scroll-margin-top:80px;background:var(--bg)}@media (min-width: 1024px){.hero{min-height:100svh;display:flex;align-items:flex-start;padding:clamp(112px,12.5svh,140px) 0 clamp(32px,6svh,84px)}.hero>.container{width:100%}}.hero:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(560px 360px at 82% 8%,rgba(250,100,31,.1),transparent 70%),radial-gradient(520px 380px at 12% 22%,rgba(123,92,255,.09),transparent 70%),radial-gradient(480px 420px at 60% 92%,rgba(59,130,246,.07),transparent 72%)}.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.04fr 1fr;gap:56px;align-items:center}.hero__title{font-size:clamp(36px,5.4vw,60px);font-weight:700;letter-spacing:-.035em;line-height:1.02;margin:18px 0}.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}.hero__sub{font-size:clamp(16px,2vw,19px);color:var(--body);max-width:560px;margin-bottom:30px}.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px}.pills{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0}.pill{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--ink);background:var(--card);border:1px solid var(--line);padding:8px 14px;border-radius:var(--radius-pill);box-shadow:var(--shadow-xs);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}.pill:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}.pill__icon{display:inline-flex;color:var(--orange);font-size:15px}.blob{position:absolute;border-radius:50%;z-index:0;pointer-events:none;opacity:.5;background:radial-gradient(circle closest-side,var(--blob-c) 0%,var(--blob-c) 34%,color-mix(in srgb,var(--blob-c) 50%,transparent) 62%,transparent 96%)!important}.blob--1{--blob-c: var(--orange);width:460px;height:460px;top:-140px;right:calc(4% - 60px);animation:drift 18s var(--ease) infinite}.blob--2{--blob-c: var(--c-purple);width:420px;height:420px;bottom:-150px;left:-100px;animation:drift 22s var(--ease) infinite reverse}.hero__visual{position:relative;display:flex;align-items:center;justify-content:center}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.card{height:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 26px;box-shadow:var(--shadow-xs);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}.card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:transparent}.card h3{font-size:18px;font-weight:600;margin-bottom:8px;letter-spacing:-.01em}.card p{font-size:14.5px;color:var(--body)}.icon-badge{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:15px;font-size:23px;margin-bottom:18px;background:var(--orange-tint);color:var(--orange);transition:transform .3s var(--ease)}.card:hover .icon-badge,.steps__item:hover .icon-badge{transform:scale(1.08) rotate(-3deg)}.grid-4>*:nth-child(5n+2) .icon-badge{background:var(--c-purple-bg);color:var(--c-purple)}.grid-4>*:nth-child(5n+3) .icon-badge{background:var(--c-blue-bg);color:var(--c-blue)}.grid-4>*:nth-child(5n+4) .icon-badge{background:var(--c-teal-bg);color:var(--c-teal)}.grid-4>*:nth-child(5n+5) .icon-badge{background:var(--c-pink-bg);color:var(--c-pink)}.pricing{align-items:stretch}.price-card{display:flex;flex-direction:column;position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm)}.feature-card,.audience-card{transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease),background .3s var(--ease)}.feature-card h3,.feature-card p,.audience-card h3,.audience-card p{transition:color .26s var(--ease)}.feature-card .icon-badge,.audience-card .icon-badge{transition:transform .3s var(--ease),background .26s var(--ease),color .26s var(--ease)}.feature-card:hover,.audience-card:hover,html[data-theme=dark] .feature-card:hover,html[data-theme=dark] .audience-card:hover{background:var(--grad-accent);border-color:transparent;box-shadow:0 20px 42px -14px #fa641f99}.feature-card:hover h3,.audience-card:hover h3{color:#fff}.feature-card:hover p,.audience-card:hover p{color:#ffffffeb}.feature-card:hover .icon-badge,.audience-card:hover .icon-badge{background:#fff;color:var(--orange)}.badge{position:absolute;top:18px;right:18px;background:var(--orange);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.02em;padding:6px 13px;border-radius:var(--radius-pill);box-shadow:var(--shadow-orange)}.price-card__name{font-size:20px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}.price-card__desc{font-size:13.5px;color:var(--body);min-height:48px}.price-card__price{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin:20px 0 4px;padding-top:18px;border-top:1px solid var(--line)}.price-card__note{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}.price-card__amount{font-size:36px;font-weight:700;color:var(--ink);letter-spacing:-.035em;line-height:1.05}.feature-list{list-style:none;padding:0;margin:18px 0 26px;display:flex;flex-direction:column;gap:11px;flex:1}.feature-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--body)}.feature-list li svg{margin-top:3px;font-size:12px;color:var(--c-green);background:var(--c-green-bg);border-radius:50%;padding:2.5px;width:17px;height:17px;flex-shrink:0}.feature-list li.is-more{color:var(--muted);padding-left:27px}.compare-wrap{position:relative}.compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-xl);padding:6px;margin:-6px}
/* THE TABLE IS ONE GRID, not nine. It used to be a grid per row, so the
   Smoke & Mirror "column" was never an element - it was the third cell of every
   row, and the only way to make it look like a column was to paint all of those
   cells orange. One grid makes the column a real place, so a single elevated panel
   can sit behind it and the paint can go. Every cell carries an explicit row on
   --r because grid makes auto-placed items avoid an explicitly placed one, and the
   panel is explicitly placed across every row. */
.compare{position:relative;min-width:680px;width:100%;display:grid;grid-template-columns:.9fr 1.15fr 1.35fr;grid-template-rows:repeat(var(--rows),auto);background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-xl)}
/* THE ELEVATED COLUMN, derived rather than styled by eye. The hero ink card carries
   no shadow at all: its depth is a 1px --line ring over its own material, inset
   --card-x from the edge it sits in, at --card-r. This is that card at reduced
   scale. --card-x is declared on #home so its VALUE is restated here rather than
   inherited, and the radius is written as the subtraction that keeps the corners
   concentric: 28 - 6 = 22px, which is exactly --radius-lg. Writing it as arithmetic
   means a future change to the table's radius cannot silently break the concentric
   fit. The ground drops to --bg-soft and the panel takes --card, so the elevation
   reads from material in both themes (light #fbfbfc vs #ffffff, dark #0d0d12 vs
   #16161d) instead of from a fill.
   v89b: THE OWNER ASKED FOR THE HEAD BACK IN BRAND ORANGE, and it is drawn INSIDE
   the panel rather than over it. The band is inset the panel's own margin PLUS its
   ring width, and its radius is the same subtraction carried one step further, so
   the orange stops exactly at the ring's inner edge and the card's hairline stays
   continuous all the way round. Both terms are tokens, so a change to the table's
   radius, to the panel's inset or to the ring's width cannot leave the band
   bleeding over the edge. The gradient is --grad-accent, the token the pre-v89 head
   already used - nothing new was invented for it. The orange top hairline RETIRES
   with this: an orange ring capping an orange field draws nothing and spends the
   accent twice, so the ring goes back to one continuous --line and the section's
   orange is now the head field and the check glyphs, and nothing else.
   v90 raised the band to the stature the pre-v89 header had, and v91 TAKES IT BACK.
   That header rendered 133.98px because `.compare__head span{padding:18px}` was a
   DESCENDANT selector and the same 18px landed on three nested spans, so the head
   spent three of them each side of a 25.9875px line box. Rebuilt as one derived
   term it was exact to the hundredth, and the owner saw it on production and ruled
   it too big. So the air is spent ONCE again - the head pad is the head pad, with
   no multiplier between them, which is the construction this file had before v90.
   His call is recorded WITH what it costs, so no later round mistakes it for an
   oversight: at 62px this gradient reads as a flatter horizontal wipe than it does
   at 134px, because a sweep squeezed into a strip loses area and rate. He has now
   seen both heights live and chose this one. The size is his.
   The gradient itself is NOT touched, and the measurement is why. A short band was
   never clipping the ramp: CSS normalises a linear-gradient's line to the box's own
   corner projection, so the full #fa641f -> #ff9242 sweep renders at any aspect, and
   the 62px band and the 134px band sample the SAME two end colours in the corners.
   Only the rate between them differs. So the brand token keeps its stops and its
   angle in both directions: a round reaching for the angle to cure a colour
   complaint is reaching for the wrong thing, and it is the one gradient the whole
   house shares. */
.compare{--cmp-inset:6px;--cmp-ring:1px;--cmp-head-pad:18px}
.compare__rail{grid-column:3;grid-row:1 / -1;margin:var(--cmp-inset);background:var(--card);border:var(--cmp-ring) solid var(--line);border-radius:calc(var(--radius-xl) - var(--cmp-inset));box-shadow:var(--shadow-sm);pointer-events:none}
.compare__h,.compare__feature,.compare__market,.compare__ours{position:relative;z-index:1;display:flex;align-items:center;padding:15px 18px}
/* THE WHOLE HEADER ROW carries the band's inset in its top padding, not just the
   cell the band is under. The field starts below the row's top by that inset, so a
   lockup centred in its own cell would sit high in the band; giving the inset to
   the ours head alone fixes the band and then leaves the lockup 3.14px below the
   two labels it shares a line with. One number on all three cells settles both: the
   mark lands on the band's centre and the labels land on the mark's line. It costs
   no height either way - the row was already sized by the ours head.
   v91: the air is one head pad again, so the row is compact. The line law never
   depended on the number: one term on all three cells keeps the three texts on one
   line, and because the ours cell spends that same term above the field and below
   it, that line is the band's centre whatever the term becomes. */
.compare__h{grid-row:1;padding-top:calc(var(--cmp-head-pad) + var(--cmp-inset) + var(--cmp-ring));padding-bottom:var(--cmp-head-pad);font-size:13.5px;font-weight:700;color:var(--muted)}
/* v91: THE TWO ANSWER COLUMNS CENTRE THEIR HEADS, the label column does not. The
   lockup has been centred over its column since the band arrived and the owner
   asked for its opposite number to match it. Feature is deliberately left alone:
   it is not a head over answers, it is the name of the column of row labels, and
   it sits on the same left edge every one of those labels sits on. */
.compare__h-feature{grid-column:1}
.compare__h-market{grid-column:2;justify-content:center}
/* THE BAND. Its top edge is the panel's ring inner edge and its bottom edge is the
   first row's separator, so the field is exactly the head and stops where the
   comparison starts. */
.compare__h-ours{grid-column:3;justify-content:center}
.compare__h-ours:before{content:"";position:absolute;z-index:-1;left:calc(var(--cmp-inset) + var(--cmp-ring));right:calc(var(--cmp-inset) + var(--cmp-ring));top:calc(var(--cmp-inset) + var(--cmp-ring));bottom:0;background:var(--grad-accent);border-radius:calc(var(--radius-xl) - var(--cmp-inset) - var(--cmp-ring)) calc(var(--radius-xl) - var(--cmp-inset) - var(--cmp-ring)) 0 0}
.compare__feature{grid-column:1;grid-row:var(--r);font-weight:600;color:var(--ink);border-top:1px solid var(--line-soft)}
.compare__market{grid-column:2;grid-row:var(--r);gap:8px;color:var(--muted);border-top:1px solid var(--line-soft)}
/* the ours cell's own hairline is inset to the panel's edges rather than run to the
   track's, so no separator sticks out past the elevated column */
.compare__ours{grid-column:3;grid-row:var(--r);gap:9px;color:var(--ink);font-weight:600;padding-left:24px;padding-right:24px}
.compare__ours:before{content:"";position:absolute;left:var(--cmp-inset);right:var(--cmp-inset);top:0;height:1px;background:var(--line-soft)}
.compare__market svg{color:var(--muted);opacity:.55;width:17px;height:17px;flex-shrink:0}
.compare__ours svg{color:var(--orange);width:18px;height:18px;flex-shrink:0}
.compare__brand{display:inline-flex;align-items:center;gap:8px}
/* THE LOCKUP, TWO-TONE ON THE BAND. The owner drew it in one ink in v89b and then
   asked for it split: "Smoke &" in the near-black, "Mirror" in white, and inside
   the mark the same split - the swoosh black, the small wedge at its bottom-left
   white. Every fill here is fixed rather than themed, because the field under them
   is fixed: --ink flips to near-white in dark and would take the black half with
   it, so the black half takes --black, the one near-black :root declares that the
   dark theme never redefines. The wordmark's own accent letters never come back
   orange - orange on orange is not an accent, it is a hole.
   THE WEDGE IS COLOURED BY ITS OWN CLASS, and not by :first-child, because the two
   halves of a drawing must not be able to swap by being re-ordered. Both paths
   still carry fill="currentColor" in the markup, so no colour is typed into
   index.html and the mark's ink still lives here; the class overrides currentColor
   on the one path the owner pointed at, and it travels with that path wherever the
   path goes. The wedge is the path whose d starts M1.7 62.2, and the suite pins
   that anchor so a reorder is caught rather than absorbed. */
.compare__brand-mark{height:15.75px;width:auto;display:block;color:var(--black)}
.compare__brand-accent{fill:#fff}
.compare__brand-word{font-size:15.75px;font-weight:700;letter-spacing:-.02em;color:var(--black);white-space:nowrap}
.compare__brand-word i{font-style:normal;color:#fff}
.price-compare{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}.price-compare__col{border-radius:var(--radius-lg);padding:26px;transition:transform .28s var(--ease),box-shadow .28s var(--ease)}.price-compare__col h3{font-size:16px;margin-bottom:8px}.price-compare__col ul{list-style:none;padding:0;margin:0}.price-compare__col li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;font-size:14px}.price-compare__col--market{background:var(--bg-soft);border:1px solid var(--line)}.price-compare__col--market h3{color:var(--muted)}.price-compare__col--market li{color:var(--muted);border-bottom:1px dashed var(--line)}.price-compare__col--market li b{font-weight:600;color:#8c8a93}.price-compare__col--ours{position:relative;color:#fff;background:radial-gradient(420px 200px at 80% -10%,rgba(255,255,255,.16),transparent 70%),linear-gradient(150deg,#15151c,#24242e);box-shadow:var(--shadow-lg)}.price-compare__col--ours h3{color:#fff}.price-compare__col--ours li{color:#d6d6de;border-bottom:1px solid rgba(255,255,255,.1)}.price-compare__col--ours li b{font-weight:700;color:#fff}.price-compare__col--ours .price-compare__save{color:var(--orange);font-weight:700}.price-compare__col--ours .btn{margin-top:20px}.price-compare__col--ours:after{content:"Best value";position:absolute;top:18px;right:18px;font-size:11px;font-weight:700;color:var(--orange);background:var(--orange-tint);padding:5px 11px;border-radius:999px}.showcase{overflow:hidden;padding-top:60px;padding-bottom:40px}.showcase+.section{padding-top:52px}.marquee{margin-top:8px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}.marquee__track{display:flex;gap:14px;width:max-content;animation:marquee 32s linear infinite}.chip{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-size:14.5px;font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-xs);padding:12px 21px;border-radius:var(--radius-pill)}.chip svg{color:var(--orange)}.chip:nth-child(3n+2) svg{color:var(--c-purple)}.chip:nth-child(3n+3) svg{color:var(--c-blue)}.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.steps__cell{height:100%}.steps__item{position:relative;height:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 22px;box-shadow:var(--shadow-xs);transition:transform .28s var(--ease),box-shadow .28s var(--ease);overflow:hidden}.steps__item:hover{transform:translateY(-7px);box-shadow:var(--shadow)}.steps__num{position:absolute;top:12px;right:16px;font-size:34px;font-weight:800;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.16}.steps__item h3{font-size:17px;font-weight:600;margin-bottom:6px}.steps__item p{font-size:13.5px;color:var(--body)}.order{display:grid;grid-template-columns:.92fr 1.08fr;gap:44px;align-items:stretch}.order__col{display:flex;flex-direction:column;gap:20px;height:100%}.order__title{text-align:left;max-width:none;margin:0 0 14px}.order__lead{font-size:16px;color:var(--body)}.order__intro{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 30px;box-shadow:var(--shadow-xs)}.order__perks{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:12px}.order__perks li{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--ink)}.order__perks li svg{font-size:13px;color:var(--c-green);background:var(--c-green-bg);border-radius:50%;padding:4px;width:22px;height:22px;flex-shrink:0}.order__form{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:28px;border-radius:var(--radius-lg);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-xs)}.field{display:flex;flex-direction:column}.field--full{grid-column:1 / -1}.field label{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:7px}.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-height:47px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}.field input::placeholder,.field textarea::placeholder{color:#a6a6ad}.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px #fa641f21}.field textarea{resize:vertical;min-height:116px}.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2376767f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}.order__form .btn{grid-column:1 / -1}.order__hint{grid-column:1 / -1;text-align:center;font-size:12.5px;color:var(--muted);margin-top:-4px}.dchk{flex:1;display:flex;flex-direction:column;justify-content:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-xs)}.dchk__title{margin:0;font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}.dchk__sub{margin:7px 0 18px;font-size:14.5px;color:var(--body)}.dchk__group{display:flex;gap:10px}.dchk__input{flex:1;min-width:0;width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-height:48px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}.dchk__input::placeholder{color:#a6a6ad}.dchk__input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px #fa641f21}.dchk__btn{position:relative;isolation:isolate;overflow:hidden;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:0;min-height:48px;padding:0 24px;font-family:inherit;font-size:15px;font-weight:700;color:#1f2525;border:3px solid transparent;border-radius:12px;background:linear-gradient(#d6dcdc,#d6dcdc) padding-box,linear-gradient(125deg,#ff9242,#fa641f 52%,#e5530f) border-box;cursor:pointer;box-shadow:0 5px 16px #1612182e;transition:color .4s var(--ease),box-shadow .35s var(--ease),transform .2s var(--ease),opacity .2s var(--ease)}.dchk__btn:after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,#ff9242,#fa641f,#e5530f);opacity:0;transition:opacity .42s var(--ease)}.dchk__btn svg,.dchk__btn .ic{display:none}.dchk__btn:hover{color:#f3f3f6;transform:translateY(-2px);box-shadow:0 14px 30px #e5530f6b,0 0 22px #fa641f80}.dchk__btn:hover:after{opacity:1}.dchk__btn:disabled{cursor:default;opacity:.65;transform:none}.inkfill:after{display:none}.inkfill__ink{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:linear-gradient(125deg,#ff9242,#fa641f 52%,#e5530f);transform:translate(-50%,-50%) scale(0);transform-origin:center;pointer-events:none;z-index:0;will-change:transform}.inkfill__txt{position:relative;z-index:1;display:inline-flex;align-items:center}.inkfill__txt svg{display:none}.dchk__result{display:none;align-items:center;gap:10px;margin-top:16px;min-height:22px;font-size:14.5px}.dchk__result.is-show{display:flex}.dchk__dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--muted)}.dchk__result--ok .dchk__dot{background:var(--c-green);box-shadow:0 0 0 4px var(--c-green-bg)}.dchk__result--no .dchk__dot{background:#ef6a4a;box-shadow:0 0 0 4px #ef6a4a24}.dchk__result--err .dchk__dot{background:var(--c-amber);box-shadow:0 0 0 4px var(--c-amber-bg)}.dchk__msg{color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dchk__msg b{font-weight:600}.dchk__spin{width:16px;height:16px;flex-shrink:0;border:2px solid rgba(250,100,31,.25);border-top-color:var(--orange);border-radius:50%;animation:dchkSpin .62s linear infinite}@keyframes dchkSpin{to{transform:rotate(360deg)}}.footer{background:var(--black);color:#b4b4be;padding:72px 0 28px}.footer__grid>*{min-width:0}.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:40px;min-width:0;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.1)}.footer__brand-row{display:inline-flex;align-items:center;gap:11px}.footer__brand .brand__mark{color:#fff}.footer__name{font-size:22px;color:#fff}.footer__name i{color:var(--orange);font-style:normal}.footer p{font-size:14px;color:#b4b4be;margin-top:13px;max-width:320px}.footer__loc{display:inline-flex;align-items:flex-start;gap:8px}.footer__loc>.ic{height:1.65em;align-items:center}.footer__loc svg{color:var(--orange)}a.footer__loc{display:flex;width:fit-content;margin-top:13px;font-size:14px;transition:color .16s var(--ease)}a.footer__loc:hover{color:#fff}.footer__social{display:flex;gap:10px;margin-top:18px}.footer__social a{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#b4b4be;border:1px solid rgba(255,255,255,.14);transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease)}.footer__social a:hover{color:#fff;border-color:var(--orange);background:#fa641f1f;transform:translateY(-2px)}.footer__social a svg{width:18px;height:18px}.footer__links h4,.footer__cta h4{font-size:15px;color:#fff;margin-bottom:15px}.footer__link{display:block;background:none;border:0;cursor:pointer;text-align:left;font-size:14px;color:#b4b4be;padding:6px 0;transition:color .16s var(--ease),transform .16s var(--ease)}.footer__link:hover{color:#fff;transform:translate(3px)}.footer__cta .btn{margin-top:18px}.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:22px;font-size:13px;color:#7a7a84}@keyframes drift{0%,to{transform:translate(0)}50%{transform:translate(26px,-22px)}}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.reveal{opacity:0;transform:translateY(48px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}.reveal.is-in{opacity:1;transform:none}.section__title.reveal,.section__head.reveal,.feat-sub.reveal,.reviews__head.reveal{transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1),filter 1s cubic-bezier(.22,1,.36,1)}.grid-3>.reveal:nth-child(2),.grid-4>.reveal:nth-child(2){transition-delay:.1s}.grid-3>.reveal:nth-child(3),.grid-4>.reveal:nth-child(3){transition-delay:.2s}.grid-4>.reveal:nth-child(4){transition-delay:.3s}.reveal.reveal--instant{transition:none!important}.grad-text{background-size:220% auto;animation:hueShift 9s var(--ease) 1}@keyframes hueShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.hero__visual:before{content:"";position:absolute;inset:-8% -6% -8% -10%;z-index:0;background-image:radial-gradient(rgba(14,14,20,.055) 1.2px,transparent 1.2px);background-size:24px 24px;-webkit-mask-image:radial-gradient(58% 58% at 52% 46%,#000 38%,transparent 80%);mask-image:radial-gradient(58% 58% at 52% 46%,#000 38%,transparent 80%)}.card{position:relative;overflow:hidden}.price-compare__col--ours{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}.price-compare__col--ours:hover{transform:translateY(-5px);box-shadow:0 44px 90px #0e0e1438,0 0 0 1px #fa641f59}@media (max-width: 1024px){.section{padding:72px 0}.hero{padding-top:130px}.hero__grid{gap:40px}}@media (max-width: 920px){.hero{padding-top:122px}.hero__grid{grid-template-columns:1fr;gap:56px}.hero__copy{text-align:center}.hero__sub{margin-left:auto;margin-right:auto}.hero__actions,.pills{justify-content:center}.hero__visual{order:2}.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr;max-width:440px;margin:0 auto}.steps{grid-template-columns:repeat(3,1fr)}.price-compare{grid-template-columns:1fr}.order{grid-template-columns:1fr;gap:30px}.order__title,.order__lead{text-align:center}.order__perks{align-items:center}.dchk__group{flex-direction:column}.dchk__btn{width:100%}.nav__links,.nav__divider,.nav__cta-btn{display:none}.nav__burger{display:inline-flex}}@media (max-width: 600px){.section{padding:56px 0}.container{padding:0 18px}.hero{padding-top:108px}.section__head{margin-bottom:38px}.grid-4,.steps{grid-template-columns:1fr;max-width:400px;margin:0 auto}.order__form{grid-template-columns:1fr;padding:22px}.footer__grid{grid-template-columns:1fr auto;gap:30px 22px;align-items:start}.footer__cta{grid-column:1 / -1}.footer p{max-width:none}.footer__links{text-align:right}.footer__link{text-align:right;width:100%}.card{padding:24px 22px}.btn,.hero__actions .btn,.nav__mobile-cta .btn{width:100%}.pill{font-size:13px}.compare-scroll{overflow-x:visible;padding:0;margin:0}.compare{min-width:0}.compare__h-market{justify-content:center}.compare__h-ours{padding:12px 8px}.compare__brand-mark{height:13px}.compare__brand-word{font-size:13px}.compare__market svg{width:15px;height:15px}}@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.float-a,.float-b,.float-c,.blob,.marquee__track{animation:none!important}.marquee{overflow-x:auto}.reveal{opacity:1;transform:none;filter:none}}.reviews__head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;margin-bottom:42px}.reviews__title{font-size:clamp(30px,4.4vw,46px);font-weight:700;letter-spacing:-.03em;margin-top:14px}.reviews__sub{max-width:340px;font-size:15px;color:var(--muted);text-align:right}.reviews__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:22px;align-items:stretch}.reviews__hero{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:30px;color:#fff;border-radius:var(--radius-xl);padding:32px;background:radial-gradient(440px 240px at 82% -10%,rgba(250,100,31,.2),transparent 70%),linear-gradient(155deg,#15151c,#25252f);box-shadow:var(--shadow-lg)}.reviews__score{display:flex;align-items:baseline;gap:5px}.reviews__score b{font-size:60px;font-weight:800;line-height:1;letter-spacing:-.03em}.reviews__score span{font-size:22px;font-weight:600;color:#9a9aa6}.reviews__score-note{margin-top:14px;max-width:230px;font-size:15px;color:#c6c6cf}.reviews__avatars{display:inline-flex;align-items:center;margin-bottom:16px}.reviews__avatars span,.reviews__avatars i{width:42px;height:42px;border-radius:50%;border:3px solid #1b1b23;margin-left:-13px}.reviews__avatars span:first-child{margin-left:0}.reviews__avatars span{background:#fff;overflow:hidden;display:inline-flex;align-items:center;justify-content:center}.reviews__avatars span img{width:100%;height:100%;object-fit:contain;padding:4px;box-sizing:border-box;display:block}.reviews__avatars i{background:var(--orange);color:#fff;font-style:normal;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center}.reviews__stars{display:inline-flex;gap:4px;color:var(--orange);font-size:19px;margin-bottom:16px}.reviews__stars svg{fill:currentColor}.reviews__hero-foot h3{color:#fff;font-size:20px;font-weight:700;margin-bottom:4px}.reviews__hero-foot>p{color:#b4b4be;font-size:14px;margin-bottom:20px}.reviews__cards{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}.review{display:flex;flex-direction:column;gap:13px;break-inside:avoid;margin-bottom:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 22px 20px;box-shadow:var(--shadow-xs);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}.review:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}.review__top{display:flex;align-items:center;gap:9px}.review__rate{font-size:13px;font-weight:700;color:var(--ink)}.review__stars{display:inline-flex;gap:3px;color:var(--orange);font-size:14px}.review__stars svg{fill:currentColor}.review blockquote{margin:0;font-size:14.5px;line-height:1.6;color:var(--body)}.review__person{display:flex;align-items:center;gap:11px;padding-top:15px;border-top:1px solid var(--line-soft)}.review__avatar{flex-shrink:0;width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff}.review__person b{display:block;font-size:14px;color:var(--ink);line-height:1.3}.review__person small{font-size:12.5px;color:var(--muted)}.review:nth-child(4n+1) .review__avatar{background:linear-gradient(135deg,#fa641f,#ff9242)}.review:nth-child(4n+2) .review__avatar{background:linear-gradient(135deg,#7b5cff,#b3a0ff)}.review:nth-child(4n+3) .review__avatar{background:linear-gradient(135deg,#3b82f6,#84b4ff)}.review:nth-child(4n+4) .review__avatar{background:linear-gradient(135deg,#10b3a3,#69dccf)}@media (max-width: 920px){.reviews__head{grid-template-columns:1fr;align-items:start}.reviews__sub{text-align:left;max-width:540px}.reviews__grid{grid-template-columns:1fr}}@media (max-width: 600px){.reviews__cards{columns:1}.reviews__hero{padding:26px}}.flow{display:flex;flex-direction:column;align-items:center}.flow__hub{display:inline-flex;align-items:center;gap:11px;background:var(--ink);color:#fff;font-size:19px;font-weight:700;letter-spacing:-.02em;padding:13px 24px 13px 16px;border-radius:var(--radius-pill);box-shadow:0 18px 40px #0e0e144d}.flow__hub i{color:var(--orange);font-style:normal}.flow__hub-logo{display:inline-flex}.flow__hub-logo svg{width:30px;height:auto}.flow__steps{position:relative;width:100%;margin-top:58px;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.flow__steps:before{content:"";position:absolute;left:50%;top:-58px;width:2px;height:32px;background:var(--line);transform:translate(-50%)}.flow__steps:after{content:"";position:absolute;top:-26px;left:9%;right:9%;height:2px;background:var(--line)}.flow__step{position:relative}.flow__step:before{content:"";position:absolute;top:-26px;left:50%;width:2px;height:26px;background:var(--line);transform:translate(-50%)}.flow__card{position:relative;height:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 22px;box-shadow:var(--shadow-xs);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);overflow:hidden}.flow__card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:transparent}.flow__card:after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}.flow__card:hover:after{transform:scaleX(1)}.flow__card:hover .icon-badge{transform:scale(1.08) rotate(-3deg)}.flow__num{position:absolute;top:14px;right:16px;font-size:30px;font-weight:800;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.18}.flow__card h3{font-size:17px;font-weight:600;margin-bottom:6px}.flow__card p{font-size:13.5px;color:var(--body)}.flow__step:nth-child(1) .icon-badge{background:var(--orange-tint);color:var(--orange)}.flow__step:nth-child(2) .icon-badge{background:var(--c-blue-bg);color:var(--c-blue)}.flow__step:nth-child(3) .icon-badge{background:var(--c-purple-bg);color:var(--c-purple)}.flow__step:nth-child(4) .icon-badge{background:var(--c-teal-bg);color:var(--c-teal)}.flow__step:nth-child(5) .icon-badge{background:var(--c-pink-bg);color:var(--c-pink)}@media (max-width: 920px){.flow__steps{grid-template-columns:repeat(2,1fr);gap:16px;margin-top:36px;max-width:540px}.flow__steps:before,.flow__steps:after,.flow__step:before{display:none}}@media (max-width: 600px){.flow__steps{grid-template-columns:1fr;max-width:360px}.flow__hub{font-size:17px}}.hubmap{position:relative;margin-top:20px;height:clamp(480px,43vw,600px);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);overflow:hidden}.hubmap:before{content:"";position:absolute;inset:-12px;z-index:0;pointer-events:none;background-image:radial-gradient(circle,rgba(17,17,34,.055) 1px,transparent 1.6px);background-size:22px 22px;background-position:center;-webkit-mask-image:radial-gradient(ellipse 74% 68% at 50% 37%,#000 48%,transparent 100%);mask-image:radial-gradient(ellipse 74% 68% at 50% 37%,#000 48%,transparent 100%)}.hubmap__lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}.hubmap__lines>path,.hubmap__lines>line{stroke:#d7dae3;stroke-width:1.5;fill:none}.hubmap__grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto auto;align-items:center;gap:22px 56px}.hubmap__hub{position:absolute;left:50%;top:41%;transform:translate(-50%,-50%);z-index:3}.hubmap__hub i{color:var(--orange);font-style:normal}.hub-ic{width:92px;height:92px;display:grid;place-items:center;border-radius:19px;background:var(--ink);color:var(--bg);box-shadow:0 22px 48px #0b0b0f42,0 6px 16px #0b0b0f29;transition:transform .3s var(--ease)}.hub-ic svg{width:48px;height:auto;display:block}.hubcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:17px 18px;box-shadow:var(--shadow-xs);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);overflow:hidden}.hubcard:after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-accent);transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}.hubcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}.hubcard:hover:after{transform:scaleY(1)}.hubcard__top{display:flex;align-items:center;gap:10px;margin-bottom:9px}.hubcard .icon-badge{width:38px;height:38px;margin:0;flex:none}.hubcard:hover .icon-badge{transform:scale(1.08) rotate(-3deg)}.hubcard__n{margin-left:auto;font-size:23px;font-weight:800;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.2}.hubcard h3{font-size:16px;font-weight:600;margin-bottom:4px}.hubcard p{font-size:12.75px;color:var(--body);line-height:1.5}.hubcard--tl{grid-column:1;grid-row:1}.hubcard--bl{grid-column:1;grid-row:2}.hubcard--tr{grid-column:3;grid-row:1}.hubcard--br{grid-column:3;grid-row:2}.hubcard--bc{grid-column:1 / -1;grid-row:3;justify-self:center;width:min(260px,86%);margin-top:2px}.hubcard--c1 .icon-badge{background:var(--orange-tint);color:var(--orange)}.hubcard--c2 .icon-badge{background:var(--c-blue-bg);color:var(--c-blue)}.hubcard--c3 .icon-badge{background:var(--c-purple-bg);color:var(--c-purple)}.hubcard--c4 .icon-badge{background:var(--c-teal-bg);color:var(--c-teal)}.hubcard--c5 .icon-badge{background:var(--c-pink-bg);color:var(--c-pink)}.feat3{margin-top:60px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.featc{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);padding:24px 22px;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}.featc:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}.featc__head{display:flex;align-items:center;gap:11px;margin-bottom:6px}.featc__head .icon-badge{width:38px;height:38px;margin:0;flex:none}.featc h3{font-size:16.5px;font-weight:600}.featc__sub{font-size:13.25px;color:var(--body);line-height:1.55;margin-bottom:18px}.featc__mock{margin-top:auto;background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:inset 0 1px #fff}.featc--a .icon-badge{background:var(--orange-tint);color:var(--orange)}.featc--b .icon-badge{background:var(--c-purple-bg);color:var(--c-purple)}.featc--c .icon-badge{background:var(--c-green-bg);color:var(--c-green)}.mk1__bar{display:flex;gap:5px;margin-bottom:11px}.mk1__bar span{width:8px;height:8px;border-radius:50%;background:#d3d7e0}.mk1__bar span:nth-child(1){background:#ff5f57}.mk1__bar span:nth-child(2){background:#febc2e}.mk1__bar span:nth-child(3){background:#28c840}.mk1__hi{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:11px}.mk1__tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:11px}.mk1__tile{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 10px}.mk1__k{display:block;font-size:9.5px;color:var(--muted);margin-bottom:3px}.mk1__v{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.02em}.mk1__v small{font-size:10px;font-weight:600;color:var(--muted)}.mk1__rows{display:flex;flex-direction:column;gap:6px}.mk1__rows i{height:7px;border-radius:4px;background:#e6e8ef}.mk1__rows i:nth-child(1){width:90%}.mk1__rows i:nth-child(2){width:72%}.mk1__rows i:nth-child(3){width:81%}.mk2__t{font-size:11px;font-weight:600;color:var(--muted);margin-bottom:11px}.mk2__row{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:10px;margin-bottom:9px}.mk2__row span{font-size:11px;font-weight:600;color:var(--ink)}.mk2__bar{height:8px;border-radius:5px;background:#e6e8ef;overflow:hidden}.mk2__bar b{display:block;height:100%;border-radius:5px}.mk2__row:nth-child(2) .mk2__bar b{background:var(--c-teal)}.mk2__row:nth-child(3) .mk2__bar b{background:var(--c-blue)}.mk2__row:nth-child(4) .mk2__bar b{background:var(--c-purple)}.mk2__row:nth-child(5) .mk2__bar b{background:var(--orange)}.mk3__t{font-size:11px;font-weight:600;color:var(--muted);margin-bottom:11px}.mk3__li,.mk3__total{display:flex;justify-content:space-between;align-items:center;font-size:12.5px}.mk3__li{padding:7px 0;border-bottom:1px dashed var(--line);color:var(--body)}.mk3__li span:last-child{font-weight:700;color:var(--ink)}.mk3__total{padding-top:11px;font-weight:800;color:var(--ink)}.mk3__total span:last-child{color:var(--orange);font-size:15px}.mk1__bar span{transition:transform .32s var(--ease)}.mk1__hi{transition:opacity .4s var(--ease),transform .4s var(--ease)}.mk1__tile{transition:opacity .42s var(--ease),transform .42s var(--ease)}.mk1__rows i{transition:transform .5s var(--ease)}.mk2__bar b{transition:width .7s var(--ease)}.mk3__li,.mk3__total{transition:opacity .4s var(--ease),transform .4s var(--ease)}.featc__mock.is-anim .mk1__bar span{transform:scale(0)}.featc__mock.is-anim .mk1__bar span.show{transform:scale(1)}.featc__mock.is-anim .mk1__hi{opacity:0;transform:translateY(6px)}.featc__mock.is-anim .mk1__hi.show{opacity:1;transform:none}.featc__mock.is-anim .mk1__tile{opacity:0;transform:translateY(9px)}.featc__mock.is-anim .mk1__tile.show{opacity:1;transform:none}.featc__mock.is-anim .mk1__rows i{transform:scaleX(0);transform-origin:left}.featc__mock.is-anim .mk1__rows i.show{transform:scaleX(1)}.featc__mock.is-anim .mk3__li{opacity:0;transform:translateY(8px)}.featc__mock.is-anim .mk3__li.show{opacity:1;transform:none}.featc__mock.is-anim .mk3__total{opacity:0;transform:translateY(8px)}.featc__mock.is-anim .mk3__total.show{opacity:1;transform:none}.featc__mock.is-anim .mk3__total.pop span:last-child{animation:featcPop .55s var(--ease)}@keyframes featcPop{0%{transform:scale(.72)}55%{transform:scale(1.13)}to{transform:scale(1)}}@media (max-width: 920px){.feat3{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto;gap:18px}}.hubmap:hover .hub-ic{transform:scale(1.03)}.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:16px}.bento__panel{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);padding:28px 28px 26px;box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}.bento__panel:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--line-soft)}.bento__panel--w{grid-column:span 3}.bento__panel--n{grid-column:span 2}.bento__panel h3{font-size:21px;line-height:1.22;font-weight:600;letter-spacing:-.02em;color:var(--ink)}.bento__panel--n h3{font-size:19px}.bento__panel>p{margin-top:9px;font-size:14.5px;line-height:1.55;color:var(--body);max-width:48ch}.bento__panel em{font-style:normal;color:var(--ac);position:relative;white-space:nowrap}.bento__panel--c1{--ac: var(--c-blue)}.bento__panel--c2{--ac: var(--c-purple)}.bento__panel--c3{--ac: var(--c-teal)}.bento__panel--c4{--ac: var(--orange)}.bento__panel--c5{--ac: var(--c-pink)}.bento__mock{margin-top:auto;padding-top:22px}.mkc{display:flex;flex-direction:column;gap:10px}.mkc__line{display:flex;align-items:flex-end;gap:9px}.mkc__line--out{flex-direction:row-reverse}.mkc__av{flex:none;width:26px;height:26px;border-radius:50%;background:var(--c-blue);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center}.mkc__line p{font-size:12.5px;line-height:1.45;padding:9px 13px;border-radius:14px;max-width:80%}.mkc__line--in p{background:var(--line-soft);color:var(--ink);border-bottom-left-radius:5px}.mkc__line--out p{background:var(--ink);color:#fff;border-bottom-right-radius:5px}.mkc__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;justify-content:center}.mkc__chips span{font-size:11px;font-weight:500;color:var(--c-blue);background:var(--c-blue-bg);border-radius:999px;padding:5px 11px}.mkc--anim .mkc__line{opacity:0;transform:translateY(10px);transition:opacity .42s ease,transform .5s cubic-bezier(.2,.85,.25,1)}.mkc--anim .mkc__line.show{opacity:1;transform:none}.mkc--anim .mkc__chips span{opacity:0;transform:translateY(12px) scale(.62);transition:opacity .34s ease,transform .52s cubic-bezier(.34,1.56,.64,1)}.mkc--anim .mkc__chips span.show{opacity:1;transform:none}.mkc__line--out p.pop{animation:mkcPop .42s cubic-bezier(.34,1.56,.64,1)}@keyframes mkcPop{0%{transform:scale(.86);opacity:.5}to{transform:scale(1);opacity:1}}.mkc__typing{display:inline-flex;gap:4px;align-items:center;padding:2px 0}.mkc__typing i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45;animation:mkcDot 1.1s infinite ease-in-out}.mkc__typing i:nth-child(2){animation-delay:.16s}.mkc__typing i:nth-child(3){animation-delay:.32s}@keyframes mkcDot{0%,65%,to{transform:translateY(0);opacity:.35}32%{transform:translateY(-4px);opacity:.95}}.mkc__caret{display:inline-block;width:2px;height:1.05em;background:currentColor;margin-left:1px;vertical-align:-2px;animation:mkcCaret .8s step-end infinite}@keyframes mkcCaret{0%,to{opacity:1}50%{opacity:0}}@media (prefers-reduced-motion: reduce){.mkc--anim .mkc__line,.mkc--anim .mkc__chips span{opacity:1!important;transform:none!important;transition:none!important}}.mkd{display:flex;flex-direction:column;gap:12px}.mkd__win{border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-xs);background:#fff}.mkd__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--line-soft);border-bottom:1px solid var(--line)}.mkd__bar i{width:8px;height:8px;border-radius:50%;background:#cfcfd8}.mkd__bar b{margin-left:8px;font-size:11px;font-weight:500;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 12px}.mkd__body{padding:18px;background:linear-gradient(160deg,#f7f3ff,#fff 72%)}.mkd__hero{display:flex;flex-direction:column;gap:6px;align-items:flex-start}.mkd__hero strong{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.02em}.mkd__hero span{font-size:12px;color:var(--body)}.mkd__btn{margin-top:6px;font-size:11px;font-weight:600;color:#fff;background:var(--c-purple);border-radius:999px;padding:6px 14px;transition:background .38s var(--ease),color .38s var(--ease),box-shadow .38s var(--ease)}.mkd__row{display:flex;gap:8px;margin-top:14px}.mkd__row u{flex:1;height:34px;border-radius:8px;background:#fff;border:1px solid var(--line)}.mkd__sw{display:flex;gap:9px;align-items:center}.mkd__sw span{width:26px;height:26px;border-radius:8px;box-shadow:inset 0 0 0 1px #0000000f}.mkd__sw-ink{background:#1e1e28}html[data-theme=dark] .mkd__sw-ink{background:#fff}.pa-cursor{position:absolute;left:0;top:0;width:23px;height:23px;z-index:7;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.32));will-change:transform,opacity}.pa-cursor svg{width:100%;height:100%;display:block}.pa-ghost{z-index:6!important;pointer-events:none;box-shadow:0 10px 20px #7b5cff73;will-change:transform,opacity}.pa-ripple{position:absolute;z-index:6;border-radius:50%;border:2px solid var(--c-purple);pointer-events:none;animation:paRipple .5s ease-out forwards}@keyframes paRipple{0%{transform:scale(.3);opacity:.55}to{transform:scale(2.1);opacity:0}}.mkd__btn.pa-pop{animation:paPop .42s cubic-bezier(.34,1.56,.64,1)}@keyframes paPop{0%{transform:scale(1)}25%{transform:scale(.93)}60%{transform:scale(1.07)}to{transform:scale(1)}}.mkd__btn.pa-blank{background:#f0f0f5;color:#9a9aa5;box-shadow:inset 0 0 0 1px #dadae3,0 8px 16px #0000001a}.mkd__sw span.pa-swpick{animation:paSwPick .5s cubic-bezier(.34,1.56,.64,1)}@keyframes paSwPick{0%{transform:scale(1);box-shadow:inset 0 0 0 1px #0000000f,0 0 #7b5cff8c}30%{transform:scale(.88)}60%{transform:scale(1.14);box-shadow:inset 0 0 0 1px #0000000f,0 0 0 7px #7b5cff00}to{transform:scale(1);box-shadow:inset 0 0 0 1px #0000000f,0 0 0 7px #7b5cff00}}.mks--anim .mks__top{opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .44s cubic-bezier(.2,.85,.25,1)}.mks--anim .mks__top.show{opacity:1;transform:none}.mks--anim .mks__chips>span{opacity:0;transform:translateY(10px) scale(.7);transition:opacity .3s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}.mks--anim .mks__chips>span.show{opacity:1;transform:none}.mks__chip.mks-bump{animation:paPop .42s cubic-bezier(.34,1.56,.64,1)}.mks__top.mks-lock{animation:mksLock .6s ease-out}@keyframes mksLock{0%{box-shadow:0 0 #fa641f00}30%{box-shadow:0 0 0 4px #fa641f38,0 6px 16px #fa641f2e}to{box-shadow:0 0 #fa641f00}}.mkp--anim .mkp__msg{opacity:0;transform:translateY(9px);transition:opacity .4s ease,transform .46s cubic-bezier(.2,.85,.25,1)}.mkp--anim .mkp__msg.show{opacity:1;transform:none}.mkp__msg--out p.pop{animation:paPop .42s cubic-bezier(.34,1.56,.64,1)}.mkp--anim .mkp__status small{opacity:0;transition:opacity .3s ease}.mkp__status small.mkp-pop{animation:paPop .42s cubic-bezier(.34,1.56,.64,1)}.mkp__dot{transition:background .45s ease}.mkp__status.is-issue .mkp__dot{background:#f5a623;box-shadow:0 0 0 3px #f5a6231a;position:relative}.mkp__status.is-issue .mkp__dot:after{content:"";position:absolute;inset:-5px;border-radius:50%;background:#f5a62329;animation:mkpWarn 1.4s ease-in-out infinite}@keyframes mkpWarn{0%,to{opacity:.4;transform:scale(.72)}50%{opacity:1;transform:scale(1)}}.mkp__status.is-good .mkp__dot{animation:mkpResolve .62s ease-out}@keyframes mkpResolve{0%{box-shadow:0 0 #19c37d80}70%{box-shadow:0 0 0 11px #19c37d00}to{box-shadow:0 0 0 4px #19c37d26}}.mke{display:flex;align-items:flex-end;justify-content:center;gap:14px;padding:6px 0 2px}.mke__desk,.mke__tab,.mke__phone{background:#fff;border:2px solid var(--ink);overflow:hidden}.mke__desk{width:138px;height:88px;border-radius:9px;padding:8px}.mke__tab{width:64px;height:82px;border-radius:8px;padding:7px}.mke__phone{width:36px;height:72px;border-radius:9px;padding:6px 5px}.mke__hd{display:flex;align-items:center;gap:4px;margin-bottom:7px}.mke__phone .mke__hd{gap:3px;margin-bottom:5px}.mke__dot{width:6px;height:6px;border-radius:50%;background:var(--c-teal);flex:none}.mke__phone .mke__dot{width:5px;height:5px}.mke__bar{flex:1;height:4px;border-radius:3px;background:var(--c-teal-bg)}.mke__phone .mke__bar{height:3px}.mke__grid{display:grid;gap:6px}.mke__grid--3{grid-template-columns:repeat(3,1fr)}.mke__grid--2{grid-template-columns:repeat(2,1fr);gap:5px}.mke__grid--1{grid-template-columns:1fr;gap:4px}.mke__tile{background:var(--c-teal-bg);border-radius:4px;overflow:hidden}.mke__tile:before{content:"";display:block;background:var(--c-teal)}.mke__desk .mke__tile{height:38px}.mke__desk .mke__tile:before{height:14px}.mke__tab .mke__tile{height:22px}.mke__tab .mke__tile:before{height:9px}.mke__phone .mke__tile{height:12px}.mke__phone .mke__tile:before{height:5px}.mke--anim .mke__hd,.mke--anim .mke__tile{opacity:0;transform:translateY(6px) scale(.96);transition:opacity .4s ease,transform .44s cubic-bezier(.2,.7,.3,1)}.mke--anim .mke__hd.in,.mke--anim .mke__tile.in{opacity:1;transform:none}.mke__caps{list-style:none;padding:0;margin:13px 0 0;display:flex;flex-direction:column;gap:9px}.mke__caps li{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--body)}.mke__caps li svg{width:18px;height:18px;padding:3px;flex-shrink:0;color:var(--c-teal);background:var(--c-teal-bg);border-radius:50%}.anim-snap,.anim-snap *{transition:none!important;animation:none!important}.mks{display:flex;flex-direction:column;gap:10px}.mks__bar{display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-xs);font-size:12.5px;color:var(--ink);background:#fff}.mks__mag{width:15px;height:15px;color:var(--muted);flex:none}.mks__top{border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:10px;padding:11px 13px;background:var(--orange-tint);display:flex;flex-direction:column;gap:3px}.mks__top b{font-size:12.5px;font-weight:600;color:var(--orange-700)}.mks__top small{font-size:11px;color:var(--muted)}.mks__chips{display:flex;gap:8px;flex-wrap:wrap}.mks__chip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;color:var(--ink);background:var(--line-soft);border-radius:999px;padding:6px 12px}.mks__dot{width:7px;height:7px;border-radius:50%;background:#19c37d}.mkp{display:flex;flex-direction:column;gap:12px}.mkp__status{display:flex;align-items:center;gap:9px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow-xs)}.mkp__dot{width:9px;height:9px;border-radius:50%;background:#19c37d;box-shadow:0 0 0 4px #19c37d26;flex:none}.mkp__status b{font-size:13px;font-weight:600;color:var(--ink)}.mkp__status small{margin-left:auto;font-size:11px;color:var(--muted)}.mkp__chat{display:flex;flex-direction:column;gap:9px}.mkc__av.mkp__av{background:var(--c-pink)}.mkp__msg{display:flex;align-items:flex-end;gap:9px}.mkp__msg--out{flex-direction:row-reverse}.mkp__msg p{font-size:12.5px;line-height:1.45;padding:9px 13px;border-radius:14px;max-width:82%}.mkp__msg--in p{background:var(--c-pink-bg);color:var(--ink);border-bottom-left-radius:5px}.mkp__msg--out p{background:var(--ink);color:#fff;border-bottom-right-radius:5px}@media (max-width: 980px){.bento{grid-template-columns:repeat(2,1fr)}.bento__panel--w,.bento__panel--n{grid-column:span 1}}@media (max-width: 600px){.bento{grid-template-columns:1fr;gap:16px}.bento__panel{padding:24px 22px 22px}.bento__panel--w,.bento__panel--n{grid-column:span 1}}.hubnode{position:absolute;transform:translate(-50%,-50%);z-index:2}.hubnode--lt{left:15%;top:13%}.hubnode--lb{left:15%;top:67%}.hubnode--rt{left:85%;top:13%}.hubnode--rb{left:85%;top:67%}.hubnode--bc{left:50%;top:79%}.hubnode__circle{position:relative;width:78px;height:78px;border-radius:50%;background:var(--card);border:1px solid var(--line);box-shadow:0 12px 28px #1111221a,0 3px 8px #1111220f;display:grid;place-items:center;transition:transform .32s var(--ease),box-shadow .32s var(--ease)}.hubnode:hover .hubnode__circle{transform:translateY(-4px);box-shadow:0 20px 42px #11112229}.hubnode__circle .icon-badge{width:auto;height:auto;font-size:30px;background:none;margin:0;border-radius:0}.hubnode:hover .icon-badge{transform:scale(1.08)}.hubnode__n{position:absolute;top:-5px;right:-5px;width:23px;height:23px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;box-shadow:0 2px 7px #00000038}.hubnode__cap{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%);width:max-content;text-align:center}.hubnode__cap b{display:block;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}.hubnode__cap span{display:block;margin-top:2px;font-size:11.5px;color:var(--muted)}.hubnode--c1 .icon-badge{color:var(--orange)}.hubnode--c2 .icon-badge{color:var(--c-blue)}.hubnode--c3 .icon-badge{color:var(--c-purple)}.hubnode--c4 .icon-badge{color:var(--c-teal)}.hubnode--c5 .icon-badge{color:var(--c-pink)}@media (max-width: 920px){.hubmap{height:clamp(505px,126vw,522px);margin-top:16px}.hub-ic{width:74px;height:74px;border-radius:16px}.hub-ic svg{width:40px}.hubnode__circle{width:60px;height:60px}.hubnode__circle .icon-badge{font-size:24px}.hubnode__n{width:19px;height:19px;font-size:10px;top:-4px;right:-4px}.hubnode__cap{top:calc(100% + 6px)}.hubnode__cap b{font-size:12.5px}.hubnode__cap span{font-size:10px}}.hubmap__comets{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible}.hubmap__comets canvas{position:absolute;inset:0;width:100%;height:100%;display:block}@media (prefers-reduced-motion: reduce){.hubmap__comets{display:none}}@media (min-width: 1081px){.process-split{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:48px;align-items:stretch;margin-top:26px}.process-split .hubmap{height:auto;min-height:500px;margin-top:0;align-self:stretch}.process-split .feat3{display:flex;flex-direction:column;justify-content:center;gap:18px;margin:0;max-width:none}}@media (min-width: 1081px){#process.section{padding:46px 0}#process .section__head{margin-bottom:20px}#process .section__head .section__title{margin-top:8px;font-size:clamp(26px,3.2vw,36px)}#process .section__sub{margin-top:9px}.process-split{gap:40px;margin-top:0;align-items:stretch}.process-split .hubmap{min-height:340px;height:auto;margin-top:0}.process-split .feat3{gap:12px}.process-split .featc{padding:12px 15px}.process-split .featc__head{gap:9px;margin-bottom:0}.process-split .featc__head .icon-badge{width:29px;height:29px;font-size:15px}.process-split .featc h3{font-size:14px}.process-split .featc__sub{display:none}.process-split .featc__mock{margin-top:9px;padding:10px;border-radius:10px}.process-split .mk1__bar{margin-bottom:6px}.process-split .mk1__hi{font-size:10.5px;margin-bottom:6px}.process-split .mk1__tiles{gap:6px;margin-bottom:6px}.process-split .mk1__tile{padding:5px 8px}.process-split .mk1__k{font-size:8.5px;margin-bottom:1px}.process-split .mk1__v{font-size:12.5px}.process-split .mk1__v small{font-size:8.5px}.process-split .mk1__rows{gap:3px}.process-split .mk1__rows i{height:4px}.process-split .mk1__rows i:nth-child(3){display:none}.process-split .mk2__t{margin-bottom:6px}.process-split .mk2__row{margin-bottom:5px;gap:8px;grid-template-columns:44px 1fr}.process-split .mk2__row span{font-size:10px}.process-split .mk2__bar{height:6px}.process-split .mk3__t{margin-bottom:5px}.process-split .mk3__li{padding:4px 0;font-size:11px}.process-split .mk3__total{padding-top:6px;font-size:11px}.process-split .mk3__total span:last-child{font-size:12.5px}}.revstack{position:relative;width:100%;max-width:668px;min-height:380px;flex:1;--rv-peek:10%;clip-path:inset(-120px 0px)}.revstack .review{position:absolute;top:0;bottom:0;left:var(--rv-peek);width:calc(100% - 2*var(--rv-peek));margin:0;padding:0;display:flex;flex-direction:column;overflow:hidden;will-change:transform,opacity;opacity:0;box-shadow:var(--shadow);transition:box-shadow .45s var(--ease)}.revstack .review.is-active{box-shadow:var(--shadow-lg)}.revnav{position:absolute;top:50%;margin-top:-22px;z-index:6;display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border-radius:50%;background:#f7f7faf2;border:1px solid var(--line);color:var(--ink);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}.revnav:hover{background:#fff;border-color:#d8d8df;color:var(--orange)}.revnav:focus-visible{outline:2px solid var(--orange);outline-offset:3px}.revnav--prev{left:2px}.revnav--next{right:2px}.revnav .ic{width:19px;height:19px}.revnav .ic svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.revnav--prev .ic{transform:scaleX(-1)}html[data-theme=dark] .revnav{background:#1b1b22f2;border-color:#2a2a35}html[data-theme=dark] .revnav:hover{background:#22222b;border-color:#fff3;color:var(--orange)}.revcard__body{padding:20px 26px 26px;display:flex;flex-direction:column;gap:13px;flex:1}.revcard__body .review__person{margin-top:auto;margin-bottom:auto}.revcard__body blockquote{margin:0;font-size:16px;line-height:1.6;color:var(--body)}.revcard__shot{margin:18px 18px 0}.shot{--ac: #fa641f;--ac2: #ffe7d8;background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;box-shadow:0 8px 20px #11112212}.shot__bar{height:27px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#f5f5f8;border-bottom:1px solid var(--line-soft)}.shot__bar i{width:8px;height:8px;border-radius:50%;background:#d3d4dc}.shot__bar i:nth-child(1){background:#ff5f57}.shot__bar i:nth-child(2){background:#febc2e}.shot__bar i:nth-child(3){background:#28c840}.shot__body{padding:13px 15px;background:linear-gradient(180deg,#fff,#fbfbfd)}.shot__head{display:flex;align-items:center;gap:8px;margin-bottom:13px}.shot__logo{width:24px;height:9px;border-radius:999px;background:var(--ac)}.shot__menu{width:17px;height:5px;border-radius:999px;background:#e4e5ea}.shot__menu--cta{margin-left:auto;width:28px;height:12px;border-radius:5px;background:var(--ac2)}.shot__hero{display:flex;gap:14px;align-items:center}.shot__copy{flex:1;display:flex;flex-direction:column;gap:6px}.shot__copy b{height:10px;border-radius:999px;background:#d6d7df;width:78%}.shot__copy i{height:6px;border-radius:999px;background:#e8e9ee;display:block}.shot__copy i:nth-of-type(2){width:62%}.shot__cta{margin-top:5px;height:14px;width:46px;border-radius:6px;background:var(--ac)}.shot__visual{width:92px;height:60px;border-radius:9px;flex-shrink:0;background:linear-gradient(135deg,var(--ac),var(--ac2))}.shot__tiles{display:flex;gap:9px;margin-top:13px}.shot__tiles i{flex:1;height:23px;border-radius:6px;background:#f1f1f5;border:1px solid var(--line-soft)}.shot__tiles i:nth-child(1){background:var(--ac2);border-color:transparent}.revcard--c1 .shot{--ac: #a9722b;--ac2: #f2e4c9}.revcard--c2 .shot{--ac: #008b7d;--ac2: #d3efeb}.revcard--c3 .shot{--ac: #a88752;--ac2: #efe6d1}.revcard--c4 .shot{--ac: #2f6bed;--ac2: #dbe6fe}.shot__url{margin-left:6px;font-size:9.5px;font-weight:600;color:#9a9aa6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}.shot__visit{margin-left:auto;display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;line-height:1;color:var(--ac);background:var(--ac2);border-radius:999px;padding:3px 8px;text-decoration:none;transition:filter .2s var(--ease)}.shot__visit:hover{filter:brightness(.95)}.shot__visit .ic{width:11px;height:11px}.shot__site{display:flex;align-items:center;gap:11px}.shot__sitelogo{flex-shrink:0;width:46px;height:46px;border-radius:10px;overflow:hidden}.shot__sitelogo img{width:100%;height:100%;object-fit:contain;display:block}.shot__sitemeta{display:flex;flex-direction:column;gap:2px;min-width:0}.shot__sitemeta b{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shot__sitemeta i{font-size:11px;font-style:normal;color:var(--muted)}.revstack .review.revcard--c1 .review__avatar{background:linear-gradient(135deg,#a9722b,#c99a4e)}.revstack .review.revcard--c2 .review__avatar{background:linear-gradient(135deg,#008b7d,#2fbfa8)}.revstack .review.revcard--c3 .review__avatar{background:linear-gradient(135deg,#a88752,#c9ac78)}.revstack .review.revcard--c4 .review__avatar{background:linear-gradient(135deg,#2f6bed,#7aa5ff)}.revcard--c3 .shot__sitelogo{background:#6d4f14;-webkit-mask:var(--sdlogo) center / contain no-repeat;mask:var(--sdlogo) center / contain no-repeat}html[data-theme=dark] .revcard--c3 .shot__sitelogo{background:#e2c081}.revcard--c4 .shot__sitelogo{background:#234fc0;-webkit-mask:var(--sdlogo) center / contain no-repeat;mask:var(--sdlogo) center / contain no-repeat}html[data-theme=dark] .revcard--c4 .shot__sitelogo{background:#9db9ff}html[data-theme=dark] .revcard--c1 .shot{--ac: #f7c085;--ac2: #553417;--ac3: #85582b}html[data-theme=dark] .revcard--c2 .shot{--ac: #63e4cd;--ac2: #0e443a;--ac3: #1a6c5e}html[data-theme=dark] .revcard--c3 .shot{--ac: #edcc8b;--ac2: #4c3d25;--ac3: #77633e}html[data-theme=dark] .revcard--c4 .shot{--ac: #9cc2f6;--ac2: #193770;--ac3: #2752a5}html[data-theme=dark] .shot__tiles i:nth-child(1){background:linear-gradient(180deg,var(--ac3),var(--ac2));border-color:transparent}html[data-theme=dark] .shot__visit{box-shadow:inset 0 0 0 1px var(--ac3)}html[data-theme=dark] .shot__visit:hover{filter:brightness(1.14)}html[data-theme=dark] .shot__bar i:nth-child(1){background:#ff5f57}html[data-theme=dark] .shot__bar i:nth-child(2){background:#febc2e}html[data-theme=dark] .shot__bar i:nth-child(3){background:#28c840}/* v80: the dashboard mockup lights its three dots too, so one page never carries two dark treatments of the same control */html[data-theme=dark] .mk1__bar span:nth-child(1){background:#ff5f57}html[data-theme=dark] .mk1__bar span:nth-child(2){background:#febc2e}html[data-theme=dark] .mk1__bar span:nth-child(3){background:#28c840}@media (prefers-reduced-motion: reduce){.revstack .review,.revnav{transition:none}}@media (max-width: 600px){.revstack{min-height:400px;--rv-peek:0px}.revcard__body{padding:16px 20px 22px}.revcard__body blockquote{font-size:15px}}html[data-lang=bn]{--font: "Noto Sans Bengali", "Hind Siliguri", system-ui, -apple-system, sans-serif}html[data-lang=bn] body{letter-spacing:0}html[data-lang=bn] h1,html[data-lang=bn] h2,html[data-lang=bn] h3,html[data-lang=bn] h4{letter-spacing:-.01em;line-height:1.28}.brand__name{font-family:Google Sans,GS Fallback,Product Sans,system-ui,sans-serif}.price-card--featured{border:1.5px solid rgba(250,100,31,.55);box-shadow:0 6px 16px #fa641f24,0 24px 48px #fa641f12}.price-card--featured .price-card__name{padding-right:116px}.reveal:not(.section__title):not(.section__head):not(.feat-sub):not(.reviews__head){opacity:1!important;transform:none!important;transition:none!important}html[data-theme=dark]{color-scheme:dark;--ink: #f4f4f7;--body: #b9b9c4;--muted: #85858f;--bg: #0d0d12;--bg-soft: #0d0d12;--line: #2a2a35;--line-soft: #20202b;--card: #16161d;--orange-tint: rgba(250, 100, 31, .16);--c-purple-bg: rgba(123, 92, 255, .18);--c-blue-bg: rgba(59, 130, 246, .18);--c-teal-bg: rgba(16, 179, 163, .18);--c-pink-bg: rgba(255, 93, 143, .18);--c-amber-bg: rgba(247, 168, 35, .18);--c-green-bg: rgba(34, 197, 94, .18);--shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);--shadow-sm: 0 4px 14px rgba(0, 0, 0, .4);--shadow: 0 16px 38px rgba(0, 0, 0, .5);--shadow-lg: 0 34px 72px rgba(0, 0, 0, .62)}html[data-theme=dark] body{background:var(--bg)}html[data-theme=dark] .card,html[data-theme=dark] .price-card,html[data-theme=dark] .flow__card,html[data-theme=dark] .hubcard,html[data-theme=dark] .order__form,html[data-theme=dark] .steps__item,html[data-theme=dark] .featc,html[data-theme=dark] .review,html[data-theme=dark] .bento__panel,html[data-theme=dark] .hubmap,html[data-theme=dark] .compare__rail,html[data-theme=dark] .order__intro,html[data-theme=dark] .dchk{background:radial-gradient(420px 200px at 80% -10%,rgba(255,255,255,.16),transparent 70%),linear-gradient(150deg,#15151c,#24242e)}html[data-theme=dark] .price-card__price{border-top-color:rgba(255,255,255,.14)}html[data-theme=dark] .nav__inner{background:#16161eb8;border-color:#ffffff14;box-shadow:0 16px 42px #0000008c}html[data-theme=dark] .nav--scrolled .nav__inner{background:#16161edb}html[data-theme=dark] .theme-switch{background:#ffffff12;border-color:#ffffff1f}html[data-theme=dark] .nav__lang{background:#2a2b32;border-color:#ffffff1f}html[data-theme=dark] .nav__lang:hover{border-color:#ffffff38}html[data-theme=dark] .nav__lang-fill{background:var(--orange)}html[data-theme=dark] .nav__burger{background:#ffffff12}html[data-theme=dark] .nav__mobile{background:#14141bf7}html[data-theme=dark] .theme-switch:hover{background:#ffffff1f;border-color:#fff3}html[data-theme=dark] .theme-switch__sun{transform:scale(.5) translateY(22px);opacity:0}html[data-theme=dark] .theme-switch__moon{transform:scale(1) translateY(0);opacity:1}html[data-theme=dark] .footer{background:#0a0a0e}html[data-theme=dark] .mock__main,html[data-theme=dark] .fcard,html[data-theme=dark] .mk1__tile,html[data-theme=dark] .mkd__win,html[data-theme=dark] .mkd__row u,html[data-theme=dark] .mks__bar,html[data-theme=dark] .mkp__status,html[data-theme=dark] .shot{background:#16161d;border-color:#2a2a35}html[data-theme=dark] .shot__body{background:linear-gradient(180deg,#17171e,#141419)}html[data-theme=dark] .mks__top{background:#221a15;border-color:#322821;border-left-color:var(--orange)}html[data-theme=dark] .mks__top b{color:#ff9e63}html[data-theme=dark] .mkp__msg--in p{background:#241a20;color:#f4f4f7}html[data-theme=dark] .mkp__msg--out p{background:#fff;color:#15151c}html[data-theme=dark] .mock__chrome,html[data-theme=dark] .shot__bar{background:#1b1b22;border-bottom-color:#2a2a35}html[data-theme=dark] .mock__chrome em,html[data-theme=dark] .mkd__bar b{background:#121217;border-color:#2a2a35}html[data-theme=dark] .mke__desk,html[data-theme=dark] .mke__tab,html[data-theme=dark] .mke__phone{background:#16161d;border-color:#4a4a58}html[data-theme=dark] .mock__app-side i,html[data-theme=dark] .mk1__rows i,html[data-theme=dark] .shot__menu,html[data-theme=dark] .shot__copy b{background:#2e2e38}html[data-theme=dark] .mk2__bar,html[data-theme=dark] .shot__copy i{background:#26262f}html[data-theme=dark] .shot__tiles i{background:#1d1d25;border-color:#2a2a35}html[data-theme=dark] .mk1__bar span,html[data-theme=dark] .shot__bar i{background:#3a3a44}html[data-theme=dark] .featc__mock{box-shadow:inset 0 1px #ffffff0a}html[data-theme=dark] .flow__hub{background:#16161d}html[data-theme=dark] .mkc__line--out p{background:#fff;color:#15151c}html[data-theme=dark] .mkc__chips span{background:var(--orange);color:#fff}html[data-theme=dark] .hubnode__n{background:#2f2f3a;color:#f4f4f7}html[data-theme=dark] .mkd__body{background:linear-gradient(160deg,#1b1726,#131318 72%)}html[data-theme=dark] .mkd__row u{background:#22222c;border-color:#2e2e38}html[data-theme=dark] .hubmap:before{background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1.6px)}html[data-theme=dark] .hubmap__lines>path{stroke:#2c2c36}.section--feat{position:relative;overflow:hidden;isolation:isolate;--fb-card-bg: var(--card);--fb-card-bd: var(--line);--fb-card-sh: 0 16px 38px -26px rgba(20,22,55,.22);--fb-card-sh-h: 0 26px 50px -28px rgba(20,22,55,.3);--fb-sub: var(--muted);--fb-grid: rgba(20,22,50,.05);--fs-struct: rgba(22,22,34,.3);--fs-fillw: rgba(22,22,34,.07);--fs-soft-f: rgba(22,22,34,.035);--fs-soft-s: rgba(22,22,34,.16);--fs-ink: #15151c}html[data-theme=dark] .section--feat{--fb-card-bg: var(--card);--fb-card-bd: var(--line);--fb-card-sh: inset 0 1px 0 rgba(255,255,255,.05), 0 26px 50px -34px rgba(0,0,0,.95);--fb-card-sh-h: 0 30px 54px -28px rgba(0,0,0,.92);--fb-sub: rgba(245,245,250,.55);--fb-grid: rgba(255,255,255,.04);--fs-struct: rgba(255,255,255,.18);--fs-fillw: rgba(255,255,255,.09);--fs-soft-f: rgba(255,255,255,.04);--fs-soft-s: rgba(255,255,255,.12);--fs-ink: #f1f2f7}.section--feat>.container{position:relative;z-index:1}.section--feat .section__title{color:var(--ink);margin-bottom:14px}.feat-sub{max-width:540px;margin:0 auto 36px;text-align:center;font-size:16px;line-height:1.55;color:var(--fb-sub)}.feat-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.feat-grid .fbcard{min-height:250px;padding:20px 18px 22px;border-radius:22px}.fb-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;display:flex;align-items:center;justify-content:center;pointer-events:none}.fb-logo:before{content:"";position:absolute;left:calc(50% - 78px);top:calc(50% - 78px);width:71px;height:71px;border-top:1px solid var(--line);border-left:1px solid var(--line);border-top-left-radius:46px;pointer-events:none;z-index:5}.fb-logo:after{content:"";position:absolute;left:calc(50% + 7px);top:calc(50% - 78px);width:71px;height:71px;border-top:1px solid var(--line);border-right:1px solid var(--line);border-top-right-radius:46px;pointer-events:none;z-index:5}.fb-logo__mark:before{content:"";position:absolute;left:calc(50% - 78px);top:calc(50% + 7px);width:71px;height:71px;border-bottom:1px solid var(--line);border-left:1px solid var(--line);border-bottom-left-radius:46px;pointer-events:none;z-index:5}.fb-logo__mark:after{content:"";position:absolute;left:calc(50% + 7px);top:calc(50% + 7px);width:71px;height:71px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);border-bottom-right-radius:46px;pointer-events:none;z-index:5}.fb-logo__mark{display:inline-flex;align-items:center;justify-content:center;width:124px;height:124px;border-radius:30px;background:linear-gradient(158deg,#1c1820,#0f0c13);border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 40px -16px #100c1a8c,inset 0 1px #ffffff1a}.fb-logo__mark svg{width:56px;height:auto;display:block;color:#fff;filter:drop-shadow(0 4px 12px rgba(250,100,31,.4))}html[data-theme=dark] .fb-logo__mark{background:linear-gradient(158deg,#fff,#f0eef4);border:1px solid rgba(0,0,0,.06);box-shadow:0 18px 40px -16px #0000008c,inset 0 1px #ffffffe6}html[data-theme=dark] .fb-logo__mark svg{color:#15151c;filter:none}.fb-logo__name,.fb-logo__tag{display:none}.feat-grid .fb-logo~.fbcard .fscene{order:-1;margin-top:0}.feat-grid .fb-logo~.fbcard h3{margin-top:auto}.feat-grid .fbcard:nth-child(2),.feat-grid .fbcard:nth-child(3),.feat-grid .fbcard:nth-child(7),.feat-grid .fbcard:nth-child(8){-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4MDAnIGhlaWdodD0nODAwJyB2aWV3Qm94PScwIDAgODAwIDgwMCc+PHBhdGggZmlsbD0nI2ZmZicgZmlsbC1ydWxlPSdldmVub2RkJyBkPSdNMCAwIEg4MDAgVjgwMCBIMCBaIE0zNjggMzIyIEg0MzIgQTQ2IDQ2IDAgMCAxIDQ3OCAzNjggVjQzMiBBNDYgNDYgMCAwIDEgNDMyIDQ3OCBIMzY4IEE0NiA0NiAwIDAgMSAzMjIgNDMyIFYzNjggQTQ2IDQ2IDAgMCAxIDM2OCAzMjIgWicvPjwvc3ZnPg==);mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4MDAnIGhlaWdodD0nODAwJyB2aWV3Qm94PScwIDAgODAwIDgwMCc+PHBhdGggZmlsbD0nI2ZmZicgZmlsbC1ydWxlPSdldmVub2RkJyBkPSdNMCAwIEg4MDAgVjgwMCBIMCBaIE0zNjggMzIyIEg0MzIgQTQ2IDQ2IDAgMCAxIDQ3OCAzNjggVjQzMiBBNDYgNDYgMCAwIDEgNDMyIDQ3OCBIMzY4IEE0NiA0NiAwIDAgMSAzMjIgNDMyIFYzNjggQTQ2IDQ2IDAgMCAxIDM2OCAzMjIgWicvPjwvc3ZnPg==);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:800px 800px;mask-size:800px 800px}.feat-grid .fbcard:nth-child(2){-webkit-mask-position:right -407px bottom -407px;mask-position:right -407px bottom -407px}.feat-grid .fbcard:nth-child(3){-webkit-mask-position:left -407px bottom -407px;mask-position:left -407px bottom -407px}.feat-grid .fbcard:nth-child(7){-webkit-mask-position:right -407px top -407px;mask-position:right -407px top -407px}.feat-grid .fbcard:nth-child(8){-webkit-mask-position:left -407px top -407px;mask-position:left -407px top -407px}.fbcard{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:314px;padding:25px 24px 0;border-radius:20px;background:var(--fb-card-bg);border:1px solid var(--fb-card-bd);box-shadow:var(--fb-card-sh);transition:transform .32s var(--ease),border-color .32s var(--ease),box-shadow .32s var(--ease)}.fbcard h3{font-size:18.5px;font-weight:650;letter-spacing:-.01em;color:var(--ink);margin:0 0 7px}.fbcard p{font-size:13.7px;line-height:1.5;color:var(--fb-sub);margin:0;max-width:30ch}.fbcard:hover{transform:translateY(-5px);border-color:var(--acc-line);box-shadow:var(--fb-card-sh-h),0 22px 60px -30px var(--acc-glow)}.fbcard--c1{--acc: #fa641f;--acc-line: rgba(250,100,31,.5);--acc-glow: rgba(250,100,31,.42)}.fbcard--c2{--acc: #7b5cff;--acc-line: rgba(123,92,255,.5);--acc-glow: rgba(123,92,255,.42)}.fbcard--c3{--acc: #3b82f6;--acc-line: rgba(59,130,246,.5);--acc-glow: rgba(59,130,246,.42)}.fbcard--c4{--acc: #10b3a3;--acc-line: rgba(16,179,163,.5);--acc-glow: rgba(16,179,163,.42)}.fbcard--c5{--acc: #ff5d8f;--acc-line: rgba(255,93,143,.5);--acc-glow: rgba(255,93,143,.42)}.fscene{position:relative;width:100%;height:120px;margin-top:auto;color:var(--acc)}.fscene:before{content:"";position:absolute;left:50%;top:56%;width:72%;height:76%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(closest-side,var(--acc-glow),transparent 72%);opacity:.4;filter:blur(15px);transition:opacity .34s var(--ease)}.feat-grid .fbcard:hover .fscene:before{opacity:.64}.fscene svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;z-index:1}.fscene .fs-d{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.fscene .fs-w{fill:none;stroke:var(--fs-struct);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.fscene .fs-fill{fill:currentColor}.fscene .fs-acc{fill:var(--acc)}.fscene .fs-wf{fill:var(--fs-fillw)}.fscene .fs-soft{fill:var(--fs-soft-f);stroke:var(--fs-soft-s);stroke-width:1.2}.fscene .fs-glow{filter:drop-shadow(0 0 5px var(--acc-glow))}.fscene text{fill:var(--fs-ink);font-family:inherit}.fscene .fs-ds{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.fscene .fs-check{fill:none;stroke:#eef0f6;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.fscene .fs-num{fill:var(--fs-ink);font-weight:700;font-size:15px;letter-spacing:-.02em}.fs-d,.fs-w{stroke-dasharray:1;stroke-dashoffset:0}.fs-pop,.fs-rise,.fs-grow{transform-box:fill-box}.fs-pop,.fs-rise{transform-origin:center}.fs-grow{transform-origin:left center}.fscene--play .fs-d,.fscene--play .fs-w{animation:fsDraw .62s var(--ease) both;animation-delay:var(--d, 0s)}.fscene--play .fs-pop{animation:fsPop .5s var(--ease) both;animation-delay:var(--d, 0s)}.fscene--play .fs-rise{animation:fsRise .52s var(--ease) both;animation-delay:var(--d, 0s)}.fscene--play .fs-fade{animation:fsFade .5s var(--ease) both;animation-delay:var(--d, 0s)}.fscene--play .fs-grow{animation:fsGrow .6s var(--ease) both;animation-delay:var(--d, 0s)}@keyframes fsDraw{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes fsPop{0%{opacity:0;transform:scale(.2)}62%{opacity:1;transform:scale(1.14)}to{opacity:1;transform:scale(1)}}@keyframes fsRise{0%{opacity:0;transform:translateY(11px)}to{opacity:1;transform:translateY(0)}}@keyframes fsFade{0%{opacity:0}to{opacity:1}}@keyframes fsGrow{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.fs-breath{animation:fsBreath 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.fs-float{animation:fsFloat 4.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}@keyframes fsBreath{0%,to{opacity:.45}50%{opacity:1}}@keyframes fsFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@media (max-width: 920px){.feat-grid{grid-template-columns:repeat(2,1fr)}.fb-logo{position:static;transform:none;grid-column:1 / -1;padding:8px 0;pointer-events:auto}.feat-grid .fb-logo~.fbcard .fscene{order:0;margin-top:auto}.feat-grid .fb-logo~.fbcard h3{margin-top:0}.feat-grid .fbcard:nth-child(2),.feat-grid .fbcard:nth-child(3),.feat-grid .fbcard:nth-child(7),.feat-grid .fbcard:nth-child(8){-webkit-mask:none;mask:none}.fb-logo:before,.fb-logo:after,.fb-logo__mark:before,.fb-logo__mark:after{display:none}}@media (max-width: 560px){.feat-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}.fb-logo__mark{width:100%}}@media (prefers-reduced-motion: reduce){.fscene *,.fscene--play *{animation:none!important}}.brand__name i,.mkp__status small,.mks__top small,.mk3__total span,.price-compare__col h3,.price-compare__col li b,.price-compare__col li span,.fbcard p,.mk2__t,.mk3__t,.mk1__k,.mk1__v small,.shot__url,.shot__visit span,.mkd__bar b,.revstack .review blockquote,.revstack .review .review__rate,.revstack .review .review__person b,.revstack .review .review__person small,.bento__panel h3 em,.mkc__chips span,.mkd__btn,.badge{background-image:linear-gradient(#fff0,#fff0)!important}.mkc__chips span,.mkd__bar b,.mkd__btn{position:relative}@media (min-width: 1024px) and (max-height: 830px){.hero{padding-top:clamp(104px,13svh,132px)}.hero .hero__title{font-size:clamp(40px,4.7vw,60px)}.hero .eyebrow{margin-bottom:12px}.hero .hero__sub,.hero .hero__actions{margin-bottom:20px}.hero .pills{gap:8px}}@media (min-width: 1024px) and (max-height: 720px){.hero{padding-top:clamp(102px,12svh,118px);padding-bottom:26px}.hero .hero__title{font-size:clamp(36px,4.1vw,52px)}.hero .hero__sub{font-size:16.5px;margin-bottom:16px}.hero .hero__actions{margin-bottom:16px}}@media (min-width: 1024px){html[data-lang=bn] .hero .hero__title{font-size:clamp(36px,4.4vw,56px)}}@media (min-width: 1024px) and (max-height: 860px){html[data-lang=bn] .hero .hero__title{font-size:clamp(32px,3.7vw,46px)}html[data-lang=bn] .hero .hero__sub{font-size:16px}html[data-lang=bn] .hero .eyebrow{margin-bottom:12px}html[data-lang=bn] .hero .pills{gap:8px}}@media (min-width: 1024px) and (max-height: 720px){html[data-lang=bn] .hero .hero__title{font-size:clamp(30px,3.4vw,42px)}}.rvw{position:fixed;inset:0;z-index:220;display:grid;place-items:center;padding:16px}.rvw[hidden]{display:none}.rvw__overlay{position:absolute;inset:0;background:#0a0a108c}html[data-theme=dark] .rvw__overlay{background:#000000a8}.rvw__dialog{position:relative;width:min(560px,100%);max-height:min(88svh,760px);overflow:auto;overscroll-behavior:contain;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:26px 24px 22px}.rvw__x{position:absolute;top:16px;right:16px;width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:50%;cursor:pointer;transition:color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}.rvw__x:active{transform:scale(.92)}.rvw__x:hover{border-color:var(--orange);color:var(--orange)}.rvw__dialog h3{margin:0 40px 6px 0;font-size:23px;letter-spacing:-.01em}.rvw__sub{margin:0 0 20px;color:var(--muted);font-size:14.5px}.rvw__grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px}@media (max-width: 560px){.rvw__grid{grid-template-columns:1fr}}.rvw__stars{display:inline-flex;gap:8px;padding:3px 0 1px}.rvw__star{width:34px;height:34px;display:grid;place-items:center;border:0;background:none;border-radius:9px;cursor:pointer;color:#dcdce2;padding:0;transition:color .18s var(--ease),transform .16s var(--ease)}.rvw__star svg{width:27px;height:27px;display:block}.rvw__star:hover{transform:scale(1.12)}.rvw__star:active{transform:scale(.94)}.rvw__star:focus-visible{outline:2px solid var(--orange);outline-offset:2px}.rvw__star.on{color:#f6a114}html[data-theme=dark] .rvw__star{color:#3c3c46}html[data-theme=dark] .rvw__star.on{color:#f6a114}.rvw__logoRow{display:flex;align-items:center;gap:12px;margin:2px 0 4px}.rvw__logoRow .btn{min-height:42px;padding:9px 20px;font-size:14px;box-shadow:0 3px 10px #16121824}.rvw__ghost{background:none;border:0;padding:9px 10px;color:var(--muted);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;border-radius:8px;transition:color .18s var(--ease)}.rvw__ghost:hover{color:#d33c2e}.rvw__logoPrev{position:relative;width:52px;height:52px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--card);flex:none}.rvw__logoPrev img{width:100%;height:100%;object-fit:cover;display:block}.rvw__logoPrev[hidden]{display:none}.rvw__err{color:#d33c2e;font-size:14px;margin:2px 0 12px}.rvw__err[hidden],.rvw__done[hidden]{display:none}.rvw__done{text-align:center;padding:22px 6px 8px}.rvw__check{width:54px;height:54px;margin:0 auto 12px;display:grid;place-items:center;border-radius:50%;background:#22aa601f;color:#1e9e58;font-size:25px;font-weight:700}.rvw__done b{display:block;font-size:19px;margin-bottom:6px}.rvw__done p{color:var(--muted);margin:0 0 16px}.rvw [hidden]{display:none!important}.rvw form .field{margin:0 0 14px}.rvw form .btn--block{margin-top:12px}.rvw__done .btn{min-width:130px}.shot__sitelogo--txt{display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff;background:linear-gradient(135deg,#fa641f,#ff9349)}

@font-face{font-family:Noto Sans Bengali;font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(/fonts/NotoSansBengali-var.woff2) format("woff2");unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1}#faq .faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}.faq__item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);overflow:hidden;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}.faq__item:hover{border-color:#e4e4ea}.faq__item.is-open{border-color:#f6d6c6;box-shadow:var(--shadow-sm)}.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 26px;margin:0;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit;font-size:clamp(15.5px,1.9vw,18px);font-weight:600;color:var(--ink);line-height:1.4;transition:color .25s var(--ease)}.faq__q:hover{color:var(--orange-600)}.faq__item.is-open .faq__q{color:var(--ink)}.faq__q:focus-visible{outline:2px solid var(--orange);outline-offset:-3px;border-radius:var(--radius-lg)}.faq__icon{position:relative;flex:none;width:26px;height:26px;border-radius:50%;background:var(--orange-tint)}.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;border-radius:2px;background:var(--orange);transform:translate(-50%,-50%);transition:transform .35s var(--ease)}.faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)}.faq__item.is-open .faq__icon::after{transform:translate(-50%,-50%) rotate(0deg)}.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}.faq__item.is-open .faq__a{grid-template-rows:1fr}.faq__a-inner{overflow:hidden;visibility:hidden;transition:visibility 0s linear .4s}.faq__item.is-open .faq__a-inner{visibility:visible;transition-delay:0s}.faq__a p{margin:0;padding:2px 26px 24px;color:var(--body);font-size:clamp(14.5px,1.7vw,16px);line-height:1.62;max-width:64ch}@media (max-width:600px){.faq__q{padding:18px;gap:14px}.faq__a p{padding:2px 18px 20px}}@media (prefers-reduced-motion:reduce){.faq__a,.faq__icon::before,.faq__icon::after,.faq__item{transition:none}}@media (min-width:921px) and (max-width:1149px){.pricing .price-card__name{min-height:46px}}@media (min-width:921px) and (max-width:1074px){.pricing .price-card__desc{min-height:72px}}.nav__ul{position:absolute;left:13px;right:13px;width:calc(100% - 26px);bottom:3px;height:7px;pointer-events:none;overflow:visible}.nav__ul path{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1 1;stroke-dashoffset:1}.nav__link.is-uin .nav__ul path{stroke-dashoffset:0;transition:stroke-dashoffset .6s cubic-bezier(.455,.03,.515,.955)}.nav__link.is-uout .nav__ul path{stroke-dashoffset:-1;transition:stroke-dashoffset .45s cubic-bezier(.455,.03,.515,.955)}@media (prefers-reduced-motion: reduce){.nav__link.is-uin .nav__ul path,.nav__link.is-uout .nav__ul path{transition:none}}.lqlogo{position:relative;z-index:1;color:#16161d;width:100%;max-width:560px;margin:0 auto}html[data-theme=dark] .lqlogo{color:#fff}.lqlogo__fallback{display:block;width:100%;height:auto;transition:opacity .3s var(--ease)}.lqlogo canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.lqlogo.is-live .lqlogo__fallback{opacity:0}@media(max-width:860px){.lqlogo{max-width:min(74vw,360px)}}

/* ============================================================
   v32 PHONE-NATIVE REBUILD. Appended last so these rules win ties.
   Scope: max-width 767px only (plus the burger-entrance guard, which
   is keyed on the entrance state classes and is inert on desktop where
   the burger is display:none). Tablet 768-920 and desktop are untouched.
   No em dashes. British spelling in comments.
   ============================================================ */

/* --- 1. Burger entrance guard (all widths; only visible where the burger shows,
   i.e. <=920). While the nav pill flies in (smk-go) the burger is invisible;
   the instant the pill lands (smk-hero is added on the pill's animationend) it
   fades in inside the landed pill. Reduced motion never adds these classes, so
   the burger shows immediately. No layout shift: opacity only. --- */
.smk-go .nav__burger{opacity:0}
.smk-hero .nav__burger{opacity:1;animation:smkNavFade .4s var(--ease) .1s both}

/* base state for the phone-only building blocks: hidden on tablet + desktop */
.botbar{display:none}
.ptl{display:none}
.fbcard__ic{display:none}
/* v33 tap-to-watch (phone only): the button is hidden and the demo wrapper is
   display:contents everywhere but phones, so tablet + desktop stay pixel-identical
   (the wrapper vanishes from layout, the mock stays a direct flex child). */
.bento__see{display:none}
.bento__demo{display:contents}

@media (max-width: 767px){
  /* --- 11. one consistent side-padding rhythm (~20px) --- */
  .container{padding:0 20px}
  .section{padding:56px 0}

  /* --- nav: 44px touch toggles that never crowd the burger off-screen. The
     controls hold their size; the brand name is the flexible element (it shrinks
     first, then goes mark-only under 360px), so the burger is always reachable
     and the toolbar never spills past the pill. --- */
  .nav__inner{gap:6px}
  .brand{min-width:0}
  .brand__name{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:16px}
  .nav__tools{flex-shrink:0;gap:6px}
  .theme-switch,.nav__lang,.nav__burger{flex-shrink:0}
  .theme-switch{width:44px;height:44px}
  .nav__lang{height:44px;padding:0 10px}

  /* --- 2 + 3. HERO: no logo pane, one-viewport centred copy, CTAs above the
     fold, readable sub. The lqlogo IIFE is also JS-gated off on phones. --- */
  .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:92px 0 40px}
  .hero>.container{width:100%}
  .hero__visual,.lqlogo{display:none}
  .hero__grid{grid-template-columns:1fr;gap:0}
  .hero__copy{text-align:center}
  .hero__title{font-size:clamp(27px,7.4vw,36px);line-height:1.1;margin:12px 0}
  .hero__sub{font-size:16px;line-height:1.55;color:#33333d;margin:0 auto 22px;max-width:34ch}
  html[data-theme=dark] .hero__sub{color:var(--body)}
  .hero__actions{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:22px}
  .hero__actions .btn{width:100%;min-height:54px}
  .pills{justify-content:center;gap:8px}

  /* --- 4. SERVICES: tight 2-col, small icon + title + one-line description,
     illustrations off (kept in the DOM so the Bangla walker still sees them) --- */
  #services .feat-grid{grid-template-columns:repeat(2,1fr);gap:10px;max-width:none;margin:0}
  #services .fb-logo{display:none}
  #services .feat-grid .fbcard:nth-child(2),#services .feat-grid .fbcard:nth-child(3),#services .feat-grid .fbcard:nth-child(7),#services .feat-grid .fbcard:nth-child(8){-webkit-mask:none;mask:none}
  #services .fbcard{min-height:0;padding:15px 14px;border-radius:16px}
  #services .fbcard .fscene{display:none}
  #services .feat-grid .fb-logo~.fbcard h3{margin-top:0}
  #services .fbcard__ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;margin-bottom:9px}
  #services .fbcard__ic svg{width:18px;height:18px}
  #services .fbcard--c1 .fbcard__ic{background:var(--orange-tint);color:var(--orange)}
  #services .fbcard--c2 .fbcard__ic{background:var(--c-purple-bg);color:var(--c-purple)}
  #services .fbcard--c3 .fbcard__ic{background:var(--c-blue-bg);color:var(--c-blue)}
  #services .fbcard--c4 .fbcard__ic{background:var(--c-teal-bg);color:var(--c-teal)}
  #services .fbcard--c5 .fbcard__ic{background:var(--c-pink-bg);color:var(--c-pink)}
  #services .fbcard h3{font-size:14.5px;margin:0 0 3px}
  #services .fbcard p{font-size:12.5px;line-height:1.4;max-width:none}
  #services .feat-sub{margin-bottom:24px;font-size:15px}

  /* --- 5. SOLUTIONS: compact stacked cards, title + body; the chat mock stays
     on the first card only, the rest are hidden (kept in the DOM for i18n) --- */
  #solutions .bento{grid-template-columns:1fr;gap:14px;margin-top:8px}
  #solutions .bento__panel{padding:20px 20px 18px}
  #solutions .bento__panel h3,#solutions .bento__panel--n h3{font-size:18px}
  #solutions .bento__panel>p{font-size:14px;max-width:none;margin-top:6px}
  #solutions .bento__panel--c3 .mke__caps{display:none}
  /* v39: all five solution cards reveal their demo on tap; c1's chat starts open.
     The wrapper collapses with the FAQ accordion's exact mechanism (a 0fr<->1fr grid
     row, inner overflow hidden), so opening and closing both animate height and never
     snap. A slim icon-only chevron row mirrors the FAQ icon language; its effective
     tap box stays >=44px via a negative margin that expands the hit area without
     shifting layout (the whole collapsed card is tappable through the expander too). */
  #solutions .bento__see{display:flex;align-items:center;justify-content:flex-end;width:100%;min-height:44px;margin:-8px 0 -10px;padding:0 2px;background:none;border:0;cursor:pointer;color:var(--orange-700);-webkit-tap-highlight-color:transparent;transition:color .25s var(--ease)}
  #solutions .bento__see:hover{color:var(--orange-600)}
  #solutions .bento__see-ic{position:relative;flex:none;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;border-radius:1px;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
  #solutions .bento__panel.is-open .bento__see-ic{transform:translateY(1px) rotate(-135deg)}
  #solutions .bento__demo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
  #solutions .bento__panel.is-open .bento__demo{grid-template-rows:1fr}
  #solutions .bento__demo>.bento__mock{min-height:0;overflow:hidden;margin-top:0;padding-top:0;opacity:0;transition:opacity .4s var(--ease)}
  #solutions .bento__panel.is-open .bento__demo>.bento__mock{opacity:1}

  /* --- 6. BENTO ("Built for businesses"): 2-col compact, equal height tiles --- */
  .grid-4{grid-template-columns:repeat(2,1fr);gap:12px;max-width:none;margin:0}
  .grid-4>div{display:flex}
  .grid-4 .audience-card{width:100%;padding:18px 16px}
  .grid-4 .audience-card .icon-badge{margin-bottom:10px}
  .grid-4 .audience-card h3{font-size:15px}
  .grid-4 .audience-card p{font-size:12.75px;line-height:1.45}

  /* --- 7. STICKY BOTTOM ACTION BAR (phone only) --- */
  .botbar{display:flex;gap:10px;align-items:stretch;position:fixed;left:0;right:0;bottom:0;z-index:95;padding:9px 16px calc(9px + env(safe-area-inset-bottom));background:#ffffffe6;-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border-top:1px solid var(--line);box-shadow:0 -8px 24px #11112214;transform:translateY(130%);transition:transform .34s var(--ease)}
  .botbar.is-show{transform:none}
  .botbar__btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:56px;padding:0 14px;border:0;border-radius:14px;font-family:inherit;font-size:15px;font-weight:700;line-height:1;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .botbar__btn--primary{color:#fff;background:linear-gradient(125deg,#ff9242,#fa641f 52%,#e5530f);box-shadow:0 8px 20px #fa641f4d}
  .botbar__btn--wa{flex:0 0 auto;color:#fff;padding:0 18px;background:linear-gradient(135deg,#25d366,#1ebe5d);box-shadow:0 8px 20px #25d3664d}
  .botbar__btn--wa .ic{font-size:19px}
  html[data-theme=dark] .botbar{background:#12121ae6;border-top-color:#2a2a35;box-shadow:0 -8px 24px #00000052}

  /* --- 8. REVIEWS: the arrows move BELOW the card on a phone. Flanking it
     would put a 44px button on top of the quote, because the card is the full
     width of the screen here and there is no peek left to sit in. They keep the
     44px tap target and the pair is centred where the pager used to be. --- */
  .reviews__cards{padding-bottom:60px}
  .revnav{top:auto;bottom:0;margin-top:0}
  .revnav--prev{left:calc(50% - 50px);right:auto}
  .revnav--next{left:calc(50% + 6px);right:auto}
  .shot__visit{position:relative}
  .shot__visit:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100%,44px);height:44px}

  /* --- 9. COMPARISON: a header pair, then a label and two answers per feature --- */
  /* THE ONE-COLUMN STACK IS REPLACED WHOLESALE, to the owner's reference. v89 read
     down the page - label, the alternative, then ours - which is honest but never
     lets the two answers be COMPARED: by the time the eye reaches ours the
     alternative is already behind it, and a comparison table that cannot be
     compared has stopped being one. The reference puts the two side by side, and
     this is that pattern in the house's own materials: a header pair naming the two
     columns, then, for every feature, a quiet full-width label on its own row and
     the two answers beneath it sharing the next - OURS ON THE LEFT, where the
     reference puts the brand.
     THE ORDER IS DONE IN THE GRID, NOT IN THE MARKUP. Every cell already carries
     its feature number on --r, so the label takes row (r * 2 - 2) across both
     columns and the two answers share row (r * 2 - 1); the track count is derived
     from --rows by the same arithmetic instead of typed, so adding or retiring a
     feature cannot leave the grid a row short. Nothing in index.html moves, so the
     source order a screen reader hears is still label, the alternative, then ours -
     a whole sentence either way, only the two answers swap sides visually.
     THE ANSWERS ARE CELLS NOW, NOT LINES, so each takes the reference's
     icon-above-text anatomy: the glyph on its own line, the statement under it.
     Both glyphs are the SAME size here although the desktop's are not - side by
     side, a one-pixel difference in the icon line pushes the two statements off
     each other, and the hierarchy is carried by colour, which was always the
     stronger signal. Ours keeps the desktop panel's material, ring and depth; the
     alternative takes the recessed ground and a softer hairline, so the pair reads
     raised against recessed exactly as the desktop table does, from the same tokens.
     THE TRACKS ARE minmax(0,1fr) AND NOT 1fr, because 1fr is minmax(auto,1fr) and a
     track can never shrink below its own min-content. English wraps short enough
     that both land on the equal share; Bangla's longest word pushed the ours track
     past it and the pair came out 161.23 against 148.77. A comparison whose two
     sides are different widths is saying something the design does not mean.
     EVERY COLUMN HAS ONE CONTENT EDGE, and the ring is why the head cells look
     over-padded: the answers carry a 1px ring and the heads paint none, so an
     un-corrected head puts the lockup one pixel left of every statement beneath it.
     The heads pay --cmp-ring on top of --cmp-cell, which is the same correction the
     desktop band makes one level up, through the same token. So a column has two
     edges and both mean something: the box edge, and the content edge inside it.
     The feature label owns the box edge - it names BOTH columns, so it spans them
     rather than sitting inside either one. The others head paints its ring for real
     rather than paying for it in padding, because a bare label floating beside a
     filled plate was the one row in the table where one side had a box and the
     other had nothing; it now carries exactly the material its own column carries
     the whole way down.
     The band stays ONE band, on the ours head cell, and stays left-aligned. That
     rule mattered when the plate was full width and it matters more now it is not:
     half a phone width of orange with a centred white lockup is very close to the
     shape of this site's own primary button, which this plate is not. */
  #comparison .compare-scroll{overflow:visible;padding:0;margin:0}
  #comparison .compare{--cmp-gut:10px;--cmp-cell:14px}
  #comparison .compare{min-width:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(calc(var(--rows) * 2 - 1),auto);column-gap:var(--cmp-gut);background:none;border:0;border-radius:0}
  #comparison .compare__rail{display:none}
  #comparison .compare__h-feature{display:none}
  #comparison .compare__h-ours{grid-column:1;grid-row:1;justify-content:flex-start;padding:calc(var(--cmp-cell) + var(--cmp-ring));background:var(--grad-accent);border-radius:var(--radius)}
  #comparison .compare__h-ours:before{display:none}
  #comparison .compare__h-market{grid-column:2;grid-row:1;justify-content:flex-start;padding:var(--cmp-cell);font-size:12.5px;background:var(--bg-soft);border:var(--cmp-ring) solid var(--line-soft);border-radius:var(--radius)}
  #comparison .compare__feature{grid-column:1 / -1;grid-row:calc(var(--r) * 2 - 2);padding:20px 0 9px;font-size:12.5px;font-weight:700;color:var(--muted);border-top:0}
  #comparison .compare__market,#comparison .compare__ours{grid-row:calc(var(--r) * 2 - 1);flex-direction:column;align-items:flex-start;gap:9px;padding:var(--cmp-cell);font-size:14px;line-height:1.4;border-top:0;border-radius:var(--radius)}
  #comparison .compare__ours{grid-column:1;background:var(--card);border:var(--cmp-ring) solid var(--line);box-shadow:var(--shadow-sm)}
  #comparison .compare__ours:before{display:none}
  #comparison .compare__market{grid-column:2;background:var(--bg-soft);border:var(--cmp-ring) solid var(--line-soft)}
  #comparison .compare__market svg,#comparison .compare__ours svg{width:18px;height:18px}
  /* --- 10. PROCESS (phone): show the REAL desktop constellation, miniaturized.
     The .hubmap markup, its svg lines and the canvas comets are percentage-anchored,
     so only sizes change here; positions are never touched. The hub-comets script
     gates itself (reduced motion + off-screen via its own IntersectionObserver), so
     the phone inherits that behaviour with no extra script. --- */
  #process .section__head{margin-bottom:22px}
  #process .hubmap{height:340px;margin-top:14px}
  #process .hub-ic{width:58px;height:58px;border-radius:14px}
  #process .hub-ic svg{width:30px}
  #process .hubnode__circle{width:46px;height:46px}
  #process .hubnode__circle .icon-badge svg{width:19px;height:19px}
  #process .hubnode__n{width:19px;height:19px;font-size:12.5px;top:-4px;right:-4px}
  #process .hubnode__cap{top:calc(100% + 4px);max-width:96px}
  #process .hubnode__cap b{font-size:13px;line-height:1.15}
  #process .hubnode__cap span{font-size:12.5px;line-height:1.25;margin-top:1px}

  /* --- 10b. FEATURE CARDS (phone): compact the three story cards into one tight,
     confident family. Only the containers and type shrink; the feature-trio
     scripts and [data-roll] markup are untouched. All type stays >=12.5px. --- */
  #process .feat3{margin-top:40px;gap:14px}
  #process .featc{padding:16px 16px 16px;border-radius:20px}
  #process .featc__head{gap:10px;margin-bottom:5px}
  #process .featc__head .icon-badge{width:32px;height:32px}
  #process .featc__head .icon-badge svg{width:17px;height:17px}
  #process .featc h3{font-size:15px}
  #process .featc__sub{font-size:12.75px;line-height:1.45;margin-bottom:10px}
  #process .featc__mock{padding:9px;border-radius:14px;line-height:1.35}
  #process .mk1__bar{margin-bottom:6px}
  #process .mk1__hi{margin-bottom:6px}
  #process .mk1__tiles{gap:7px;margin-bottom:8px}
  #process .mk1__tile{padding:5px 8px}
  #process .mk1__rows{gap:3px}
  #process .mk1__rows i{height:5px}
  #process .mk2__t{margin-bottom:8px}
  #process .mk2__row{margin-bottom:6px}
  #process .mk2__bar{height:5px}
  #process .mk3__t{margin-bottom:8px}
  #process .mk3__li{padding:4px 0}
  #process .mk3__total{padding-top:6px;font-size:13px}

  /* --- 11. GLOBAL PHONE FLOORS: no readable text below 12.5px; interactive
     elements get >=44px effective hit areas. --- */
  .badge{font-size:12.5px}
  .price-card__note{font-size:12.5px}
  .mk1__hi{font-size:12.5px}
  .mk1__k{font-size:12.5px}
  .mk1__v small{font-size:12.5px}
  .mk2__t,.mk2__row span{font-size:12.5px}
  .mk3__t{font-size:12.5px}
  .mkc__chips span{font-size:12.5px}
  .shot__sitemeta i{font-size:12.5px}
  /* v70: flex-start, not flex-end. width:100% only arrives at 600px, so between
     601 and 767 the <button> links were shrink-to-fit and stayed left while the two
     <a> links filled the column and were pushed right: one list, two alignments,
     visible on iPad mini portrait (744). Every other footer link in the project is
     left aligned, at 768 and up and, since v70, at 600 and down, so the transitional
     band now agrees with both of its neighbours instead of splitting the difference. */
  .footer__link{min-height:44px;display:flex;align-items:center;justify-content:flex-start;padding:2px 0}
  .footer__social a{width:44px;height:44px}

  /* --- 12. the footer's own declared spacing, restored. .footer__grid and
     .footer__bottom are both .container elements, so the padding SHORTHAND at the
     top of this block was resetting the 38px and 22px they declare for themselves
     (same specificity, later in the sheet). Under 768px both read 0: the WhatsApp
     button sat 1px above the hairline and the legal line 0px under it. Restated,
     not reinvented, so the phone reads 38 / rule / 22 as the desktop does. --- */
  .footer__grid{padding-bottom:38px}
  .footer__bottom{padding-top:22px}

  /* the brand row is inline-flex, so a line-box strut sat under it and opened the
     row to tagline gap to 15.94px from 375px up, 21.39px at 320px, against the 13
     .footer p declares and every other row in the column keeps. Blocking it drops
     the strut. Same defect, same fix, as a.footer__loc already carries. */
  .footer__brand-row{display:flex;width:fit-content}
}

/* narrow phones (<=366px): at 96px the hubmap corner captions clip the card's
   overflow:hidden edge (half-cap 48px vs 15% of a <=326px container), so cap them
   to 80px, which holds >=2px clearance down to 320px (they wrap to two lines). */
@media (max-width: 366px){
  #process .hubnode__cap{max-width:80px}
}

/* very narrow phones (<=360px): the brand goes mark-only so the full 44px
   control cluster (theme, language, burger) always fits the pill cleanly. */
@media (max-width: 360px){
  .brand__name{display:none}
}

/* --- 13. v70: the phone footer becomes ONE column, and the Quick links become a
   two-column list inside it. The 1fr auto grid was sizing the second column to the
   widest link and starving the first: at 390 the brand column got 239px and the
   address ran to three lines, and at 320 in Bangla it got 125.13px, narrower than
   the links beside it, with the address on SEVEN lines and the inbox folded at the
   @. Stacked, the brand block gets the full 280 to 388px, the address settles to two
   lines (three at 320), the inbox never folds, and the two blocks stop being read as
   one badly aligned pair. The links keep their >=44px rows: nothing here touches the
   tap floor, only the shape it is poured into. Left aligned and full width, the rows
   read as rows rather than as eight words stepping down an edge, which is the
   language the desktop footer already speaks.
   PLACED AFTER THE 360px BLOCK ON PURPOSE. .brand__name{display:none} up there was
   written for the crowded NAV pill, but the class is shared, so it was taking the
   FOOTER wordmark with it (measured 0x0 at 320, 340 and 360 in both languages).
   .footer__name is one class deep, exactly like .brand__name, so only source order
   can settle it: this block has to come last. The nav wordmark still goes, which is
   what that rule is for. Anything appended below this must not reopen it.
   The legal line's two spans total 362px in English and 312px in Bangla, so
   flex-wrap was deciding their arrangement per width AND per language: stacked at
   320 and 390 in English, one spread row at 428 and at 390 in Bangla. --- */
@media (max-width: 600px){
  .footer__grid{grid-template-columns:1fr}
  .footer__links{text-align:left;display:grid;grid-template-columns:1fr 1fr;column-gap:22px;align-items:start}
  .footer__links h4{grid-column:1 / -1}
  .footer__link{text-align:left;justify-content:flex-start}
  .footer__name{display:block}
  .footer__bottom{flex-direction:column}
}

/* ============================================================
   v46 INSIGHTS. The blog listing (/insights) and article pages.
   Appended last so these rules win ties. Everything is namespaced
   .ins-*; the only shared classes touched are the three "current
   page" states and an anchor variant of .nav__link, none of which
   exist on the homepage. No em dashes. British spelling.
   ============================================================ */

/* the nav item is now an anchor on the blog pages (a button on the site).
   GEOMETRY, and it is load bearing: a <button> takes line-height:normal from
   the UA font shorthand, while an <a> inherits the body's 1.65. The same class
   therefore produced two different box heights (36.4px against 42.75px at
   1280px), and the hand-drawn underline, which is absolutely positioned to the
   link's own bottom edge, was drawn 3.2px low under Insights and clipped by the
   nav pill. Stating the buttons' own computed value on the shared rules puts
   both element types on one identical box. "normal" is derived from the font
   metrics, so the approved button geometry stays correct to the decimal in
   every language: Google Sans in English, Hind Siliguri in Bangla. */
.nav__link,.nav__mobile-link,.footer__link{line-height:normal}
a.nav__link{display:inline-block}
.nav__link.is-current{color:var(--ink);font-weight:600}
.nav__mobile-link.is-current{color:var(--orange)}
.footer__link.is-current{color:#fff}

/* reveal on scroll: the dimmed base state exists only when scripting does, so
   a reader without JavaScript gets a fully visible page (never-blank rule) */
html[data-insjs] .ins-rise{opacity:.2;transform:translateY(16px);transition:opacity .66s var(--ease),transform .66s var(--ease)}
html[data-insjs] .ins-rise.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html[data-insjs] .ins-rise{opacity:1;transform:none;transition:none}
}

/* v49 text reveal: the per-character wash is a screen effect, carried entirely on
   inline opacity so it inherits the reader's own text colour in both themes. The
   spans get no other styling anywhere, on purpose - anything that touched layout
   would move the words the split is supposed to leave alone. Paper has no scroll
   position, so print takes the whole article at full strength. */
@media print{
  .ins-article .ins-tc{opacity:1!important}
}

.ins-main{padding-bottom:96px}

/* --- listing hero --- */
.ins-hero{padding:130px 0 48px;text-align:center}
.ins-hero__in{max-width:760px;margin:0 auto}
.ins-hero__eyebrow{margin-bottom:16px}
.ins-hero__h1{font-size:clamp(32px,5.2vw,52px);line-height:1.06;letter-spacing:-.035em}
/* the lead is one sentence 659px wide, so a 620px measure left "online." alone
   on line two. 380px is the widest measure that still breaks after "websites,",
   which splits the sentence 352/303 and reads even at every desktop width;
   text-wrap:balance keeps it even on the phone's three lines too. */
.ins-hero__sub{margin:16px auto 0;max-width:380px;font-size:16.5px;line-height:1.6;color:var(--muted);text-wrap:balance}

/* search: one composed control on desktop, stacked on narrow screens */
.ins-search{display:flex;gap:10px;max-width:560px;margin:28px auto 0}
.ins-search__field{position:relative;display:flex;align-items:center;flex:1;min-width:0}
.ins-search__ic{position:absolute;left:17px;width:18px;height:18px;color:var(--muted);pointer-events:none}
.ins-search__ic svg{width:100%;height:100%;display:block}
.ins-search__in{-webkit-appearance:none;appearance:none;width:100%;height:52px;font:inherit;font-size:15px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-pill);padding:0 18px 0 45px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.ins-search__in::placeholder{color:var(--muted)}
.ins-search__in:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(250,100,31,.13)}
.ins-search__btn{flex:none;min-height:52px;padding:0 28px}
.ins-found{margin:18px 0 0;font-size:13.5px;color:var(--muted)}
.ins-found__clear{margin-left:8px;font-weight:600;color:var(--orange-700);border-bottom:1px solid transparent}
html[data-theme=dark] .ins-found__clear{color:#ff9242}
.ins-found__clear:hover{border-bottom-color:currentColor}

/* --- card grid --- */
.ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.ins-card{display:flex;min-width:0}
/* the card is a flex column so every panel in a row bottom-aligns even when one
   title runs to three lines: the cover spacer takes the slack */
.ins-card__a{position:relative;display:flex;flex-direction:column;flex:1;border-radius:var(--radius-lg);background:var(--bg-soft);box-shadow:var(--shadow-xs);transition:transform .34s var(--ease),box-shadow .34s var(--ease)}
.ins-card__a:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ins-card__media{position:absolute;inset:0;border-radius:var(--radius-lg);overflow:hidden}
.ins-card__media img,.ins-card__media svg{width:100%;height:100%;display:block;object-fit:cover;transition:transform .55s var(--ease)}
.ins-card__a:hover .ins-card__media img,.ins-card__a:hover .ins-card__media svg{transform:scale(1.04)}
/* reserves the visible cover height (and absorbs any extra row height); the
   media itself fills the whole card behind the panel */
.ins-card__spacer{display:block;flex:1 1 auto;aspect-ratio:4 / 3}
.ins-card__panel{position:relative;display:block;margin:-10px 10px 10px;padding:21px 18px 16px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.ins-card__chip{position:absolute;top:-13px;left:18px}
.ins-card__title{margin:0;font-size:18px;font-weight:600;line-height:1.34;letter-spacing:-.018em;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ins-card__a:hover .ins-card__title{color:var(--orange)}
.ins-card__ex{margin:9px 0 0;font-size:14px;line-height:1.55;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ins-card__rule{display:block;height:1px;background:var(--line);margin:15px 0 12px}
.ins-card__meta{display:flex;align-items:center;gap:8px;min-width:0}
.ins-card__author{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ins-card__dot{flex:none;width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.55}
.ins-card__date{font-size:12.5px;color:var(--muted);white-space:nowrap}
.ins-more{display:flex;justify-content:center;padding:40px 0 0}
.ins-more__btn{min-width:186px}
.ins-empty{max-width:520px;margin:0 auto;padding:72px 20px 48px;text-align:center}
.ins-empty b{display:block;font-size:21px;letter-spacing:-.025em;color:var(--ink)}
.ins-empty p{margin:11px 0 24px;color:var(--muted)}

/* the generated cover's opaque base: a hair lighter than the card in dark, so a
   coverless post reads as an image area rather than a hole */
.ins-cover{--ins-cover-base:var(--bg-soft)}
html[data-theme=dark] .ins-cover{--ins-cover-base:#191922}

/* the author mark: the studio writes, so the avatar is always the brand */
.ins-av{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--orange-tint);color:var(--ink)}
.ins-av svg{width:16px;height:auto;display:block}
.ins-av--sm{width:24px;height:24px}
.ins-av--sm svg{width:14px}

/* category chip: neutral surface, category colour in the label */
.ins-chip{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--radius-pill);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-xs);font-size:12.5px;font-weight:600;white-space:nowrap}
/* The category label is 12.5px, so it needs a readable shade of its palette
   colour rather than the raw one: these are the same six hues darkened for a
   light surface (all >= 4.5:1) and lifted for a dark one. */
.ins-chip--purple{color:#6a49f2}
.ins-chip--blue{color:#2f6fd8}
.ins-chip--teal{color:#0a7d72}
.ins-chip--pink{color:#c8305f}
.ins-chip--amber{color:#96600a}
.ins-chip--green{color:#10783a}
a.ins-chip{transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
a.ins-chip:hover{border-color:currentColor}

/* --- article --- */
.ins-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start;padding-top:126px}
.ins-col{min-width:0;max-width:720px}
.ins-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px;min-width:0}
.ins-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.ins-crumb a{color:var(--muted);transition:color .16s var(--ease)}
.ins-crumb a:hover{color:var(--orange)}
.ins-crumb__sep{opacity:.45}
.ins-crumb [aria-current]{font-weight:600;color:var(--ink)}
.ins-title{margin:17px 0 0;font-size:clamp(30px,5vw,44px);line-height:1.1;letter-spacing:-.034em}
.ins-meta{display:flex;flex-wrap:wrap;align-items:center;gap:11px 17px;margin-top:19px;font-size:13.5px;color:var(--muted)}
.ins-meta__who{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--ink)}
.ins-meta__i{display:inline-flex;align-items:center;gap:7px}
.ins-meta__i .ic{width:15px;height:15px;color:var(--muted)}
.ins-meta__i .ic svg{width:100%;height:100%;display:block}
/* the chip is a link here: a 44px hit area without changing how it looks
   (same technique the phone build uses for .shot__visit) */
.ins-meta a.ins-chip{position:relative}
.ins-meta a.ins-chip:after{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;height:44px}
.ins-cover-wrap{margin:28px 0 0;aspect-ratio:16 / 9;border-radius:var(--radius-xl);overflow:hidden;background:var(--bg-soft)}
.ins-cover-wrap img,.ins-cover-wrap svg{width:100%;height:100%;display:block;object-fit:cover}

/* reading page: 18px on a 720px measure lands at about 85 characters a line,
   which is why the body type here is larger than the site's 16.5px */
.ins-article{margin-top:36px;font-size:18px;line-height:1.72;color:var(--body)}
.ins-article p{margin:0 0 1.1em}
.ins-article h2{margin:1.8em 0 .5em;font-size:27px;line-height:1.26;letter-spacing:-.024em;color:var(--ink)}
.ins-article h3{margin:1.55em 0 .45em;font-size:21px;line-height:1.35;letter-spacing:-.017em;color:var(--ink)}
.ins-article>h2:first-child,.ins-article>h3:first-child{margin-top:0}
.ins-article ul,.ins-article ol{margin:0 0 1.2em;padding-left:1.4em}
.ins-article li{margin:0 0 .4em}
.ins-article li::marker{color:var(--orange)}
.ins-article ul ul,.ins-article ul ol,.ins-article ol ul,.ins-article ol ol{margin:.45em 0 .1em}
.ins-article strong{font-weight:600;color:var(--ink)}
.ins-article em{font-style:italic}
.ins-article u{text-underline-offset:3px}
.ins-article a{color:var(--orange-700);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:rgba(250,100,31,.45);transition:text-decoration-color .16s var(--ease)}
.ins-article a:hover{text-decoration-color:currentColor}
html[data-theme=dark] .ins-article a{color:#ff9242}
.ins-article blockquote{margin:1.5em 0;padding:3px 0 3px 20px;border-left:3px solid var(--orange);color:var(--muted);font-style:italic}
.ins-article blockquote p:last-child{margin-bottom:0}
.ins-article>:last-child{margin-bottom:0}

/* --- sidebar panels --- */
.ins-panel{padding:20px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-lg)}
.ins-panel__h{margin:0 0 14px;font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.ins-panel__p{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.ins-share{display:flex;flex-wrap:wrap;gap:10px}
.ins-sh{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--body);cursor:pointer;transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease)}
.ins-sh:hover{color:var(--orange);border-color:var(--orange);background:var(--orange-tint);transform:translateY(-2px)}
.ins-sh .ic{width:17px;height:17px}
.ins-sh .ic svg{width:100%;height:100%;display:block}
.ins-share--phone{display:none;margin-top:24px}
.ins-tags{display:flex;flex-wrap:wrap;gap:8px}
.ins-tag{position:relative;display:inline-flex;align-items:center;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--card);font-size:12.5px;font-weight:500;color:var(--body);transition:color .18s var(--ease),border-color .18s var(--ease)}
.ins-tag:hover{color:var(--orange);border-color:var(--orange)}
.ins-rels{display:flex;flex-direction:column;gap:15px}
.ins-rel{display:flex;gap:12px;align-items:flex-start;min-width:0}
.ins-rel__thumb{flex:none;width:56px;height:56px;border-radius:12px;overflow:hidden;background:var(--bg-soft)}
.ins-rel__thumb img,.ins-rel__thumb svg{width:100%;height:100%;display:block;object-fit:cover}
.ins-rel__main{display:flex;flex-direction:column;gap:3px;min-width:0}
.ins-rel__date{font-size:12.5px;color:var(--muted)}
.ins-rel__title{font-size:14px;font-weight:600;line-height:1.36;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .16s var(--ease)}
.ins-rel:hover .ins-rel__title{color:var(--orange)}
.ins-news{display:flex;flex-direction:column;gap:10px}
.ins-news__in{-webkit-appearance:none;appearance:none;width:100%;height:47px;font:inherit;font-size:14.5px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 14px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.ins-news__in::placeholder{color:var(--muted)}
.ins-news__in:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(250,100,31,.13)}
.ins-news__btn{width:100%}
.ins-news__msg{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.ins-news__msg.is-err{color:#c0392b}
.ins-news__done{display:flex;align-items:center;gap:10px;margin:0;font-size:14.5px;font-weight:600;color:var(--ink)}
.ins-news__tick{display:inline-flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--c-green-bg);color:var(--c-green);font-size:13px}
.ins-hp{position:absolute;left:-9999px;width:1px;height:0;opacity:0;pointer-events:none}
.ins-offscreen{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* copy-link confirmation */
.ins-toast{position:fixed;left:50%;bottom:26px;z-index:200;padding:11px 19px;font-size:13.5px;font-weight:600;color:var(--bg);background:var(--ink);border-radius:var(--radius-pill);box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transform:translate(-50%,14px);transition:opacity .24s var(--ease),transform .24s var(--ease)}
.ins-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* --- 404 --- */
.ins-404{max-width:568px;margin:0 auto;padding-top:172px;padding-bottom:132px;text-align:center}
.ins-404__mark{display:inline-flex;margin-bottom:26px;color:var(--ink);opacity:.42}
.ins-404__mark svg{width:56px;height:auto;display:block}
.ins-404__h{font-size:clamp(26px,4.4vw,34px);line-height:1.14;letter-spacing:-.03em}
.ins-404__p{margin:13px 0 28px;color:var(--muted)}

/* --- dark theme: the quiet surfaces need the elevated card, because --bg-soft
   and --bg are the same colour in dark --- */
html[data-theme=dark] .ins-panel{background:var(--card)}
html[data-theme=dark] .ins-card__a{background:var(--card)}
html[data-theme=dark] .ins-sh,html[data-theme=dark] .ins-tag,html[data-theme=dark] .ins-chip{background:#ffffff0a}
html[data-theme=dark] .ins-chip--purple{color:#a48cff}
html[data-theme=dark] .ins-chip--blue{color:#74a8ff}
html[data-theme=dark] .ins-chip--teal{color:var(--c-teal)}
html[data-theme=dark] .ins-chip--pink{color:var(--c-pink)}
html[data-theme=dark] .ins-chip--amber{color:var(--c-amber)}
html[data-theme=dark] .ins-chip--green{color:var(--c-green)}
html[data-theme=dark] .ins-search__in,html[data-theme=dark] .ins-news__in{background:#ffffff0a}
html[data-theme=dark] .ins-sh:hover{background:var(--orange-tint)}
html[data-theme=dark] .ins-news__msg.is-err{color:#ff8f7d}
/* the shared .eyebrow pill keeps its light-theme colour; on a dark tint that
   shade drops to 3.2:1, so the blog hero lifts it (homepage untouched) */
html[data-theme=dark] .ins-hero__eyebrow{color:#ff9242}

/* --- tablet: two columns, sidebar under the article --- */
@media (max-width: 1024px){
  .ins-grid{grid-template-columns:repeat(2,1fr);gap:26px}
  .ins-layout{grid-template-columns:minmax(0,1fr);gap:44px;padding-top:120px}
  .ins-col{max-width:none}
  .ins-side{position:static;top:auto;max-width:680px;width:100%}
  .ins-share--phone{display:flex}
  .ins-panel--share{display:none}
}
@media (max-width: 920px){
  .ins-hero{padding-top:118px}
  .ins-layout{padding-top:114px}
}

/* --- phone: exactly two cards per row, compacted so it reads designed --- */
@media (max-width: 767px){
  .ins-hero{padding:104px 0 26px}
  .ins-hero__sub{font-size:15px}
  .ins-search{flex-direction:column;gap:10px;margin-top:24px}
  .ins-search__btn{width:100%}
  .ins-grid{grid-template-columns:1fr 1fr;gap:14px}
  .ins-card__spacer{aspect-ratio:5 / 4}
  .ins-card__panel{margin:-8px 8px 8px;padding:18px 12px 12px;border-radius:12px}
  .ins-card__chip{top:-12px;left:11px;height:24px;padding:0 9px}
  /* three lines, not two: at 162px wide a two-line clamp cut almost every real
     headline mid-word, and a truncated title reads broken, not compact */
  .ins-card__title{font-size:14.5px;line-height:1.32;-webkit-line-clamp:3}
  .ins-card__ex{display:none}
  .ins-card__rule{margin:11px 0 9px}
  .ins-card__author,.ins-card__dot{display:none}
  .ins-av--sm{width:22px;height:22px}
  .ins-av--sm svg{width:13px}
  /* 64px of rhythm plus the 74px the fixed phone action bar covers (56px button
     + 9px of padding top and bottom), so the newsletter card and the last line
     of an article can always be scrolled clear of the bar */
  .ins-main{padding-bottom:138px}
  .ins-more{padding-top:30px}
  .ins-layout{padding-top:100px;gap:36px}
  .ins-article{margin-top:28px;font-size:16.5px}
  .ins-article h2{font-size:22.5px;margin-top:1.7em}
  .ins-article h3{font-size:19px}
  .ins-cover-wrap{margin-top:22px;border-radius:var(--radius-lg)}
  .ins-panel{padding:18px 16px}
  /* clear the fixed action bar, so "Link copied" never lands on top of it */
  .ins-toast{bottom:92px}
  /* standalone controls keep a 44px hit area; the extra row gap stops the
     invisible areas of two tag rows from overlapping */
  .ins-tags{gap:14px 8px}
  .ins-tag:after{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;height:44px}
  /* the 404 keeps the exact gap it always had above the footer: the action bar
     reserve on .ins-main now supplies most of it */
  .ins-404{padding-top:126px;padding-bottom:14px}
}
@media (max-width: 400px){
  .ins-card__panel{padding:17px 10px 11px}
  .ins-card__chip{left:9px;padding:0 8px}
  .ins-grid{gap:12px}
}

/* ============================================================
   v50. Appended, never edited above, so the approved page cannot
   move: the order status is display:none until the form is
   submitted, the .brand catchment paints nothing, and the tap
   floors are gated on a coarse pointer so no mouse-driven
   viewport can render a pixel differently. No em dashes.
   ============================================================ */

/* D4: the order form's answer to the visitor. It sits between the button and the
   hint and retires the hint the moment it speaks, so there is only ever one line
   of text under the button. The indicator column is a fixed 16px in both states,
   or the copy would jump sideways when the spinner turned into a dot. */
.order__status{grid-column:1 / -1;display:none;grid-template-columns:16px 1fr;gap:1px 10px;align-items:start;font-size:13.5px;line-height:1.45}
.order__status.is-show{display:grid}
.order__status.is-show ~ .order__hint{display:none}
.order__status-dot{width:9px;height:9px;margin:5px auto 0;border-radius:50%;background:var(--muted)}
.order__status--ok .order__status-dot{background:var(--c-green);box-shadow:0 0 0 4px var(--c-green-bg)}
.order__status--err .order__status-dot{background:var(--c-amber);box-shadow:0 0 0 4px var(--c-amber-bg)}
.order__status-spin{width:16px;height:16px;margin-top:2px;border:2px solid rgba(250,100,31,.25);border-top-color:var(--orange);border-radius:50%;animation:dchkSpin .62s linear infinite}
.order__status-msg{min-width:0;color:var(--ink)}
.order__status-link{position:relative;grid-column:2;justify-self:start;margin-top:3px;color:var(--orange);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;transition:color .16s var(--ease)}
.order__status-link:hover{color:var(--orange-600)}
/* the same invisible 44px catchment the phone build uses; width:max() means the
   link's own measure is never widened, only the area a thumb can land on */
.order__status-link:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100%,44px);height:44px}

/* the logo is the "go home" control on every page and never reached 44px at any
   width (34x16 at 360px, 153x20 at 390px) inside a 62px nav bar with room to
   spare. Same technique as .shot__visit and the phone chips: the mark and the
   wordmark are untouched, only the catchment grows. */
.brand{position:relative}
.brand:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100%,44px);height:44px}

/* the phone floors block stops at 767px, one pixel short of iPad portrait, where
   the footer links fall back to 30px. Gated on the pointer as well as the width so
   a mouse-driven window at these sizes still renders exactly as it does today; the
   font-size floors in that block are correctly phone-only and stay where they are.
   v70: min-width:768px added, which is the band this block was always written for
   (768 up to iPad portrait, per the sentence above). Without the floor it also
   matched every touch PHONE, and because it is appended after the work-page section
   it was the LAST word on .footer__link: its justify-content:flex-end beat the
   flex-start the phone blocks state, on touch devices only. A prototype injected
   with addStyleTag lands after this block and so never sees it - the alignment has
   to be checked on a coarse-pointer context, not a mouse one. Nothing changes from
   768 up, where this block is the only one of the three that matches. */
@media (min-width: 768px) and (max-width: 1024px) and (pointer: coarse){
  .footer__link{min-height:44px;display:flex;align-items:center;justify-content:flex-end;padding:2px 0}
  .footer__social a{width:44px;height:44px}
}

/* ============================================================
   v52 WORK. The portfolio listing (/projects) and project pages.
   Appended last so these rules win ties. Everything is namespaced
   .wk-*; nothing above this block is edited, so the approved
   pages cannot move. No em dashes. British spelling.

   The card is a CLEAN-ROOM rebuild of the owner's own portfolio,
   measured on the live page and written from scratch. What was
   measured, and is reproduced to the pixel:
     panel radius 24, picture radius 16, picture inset 16 from the
     card edge on three sides, caption row 24 tall and inset 40,
     16 between picture and caption, 24 under the caption, 16
     between cards, picture 648x520 in a half card and 1344x720 in
     a full one, wash black at 0.08 easing to 0.02 on hover while
     the picture presses from 1 to 0.98, name rolling 36px with
     the off-stage copy sheared 12 degrees. On the phone: card
     radius 16, picture radius 12, picture inset 8, caption inset
     24, 12 between cards.

   Three numbers are deliberately OURS, each for a stated reason:
     - the grid runs on .container (1152px of content), not the
       reference's 1376px, so the cards line up with the nav pill
       and the footer instead of overhanging both;
     - the category sits in --body, not the reference's black at
       50% opacity, which measures 3.32:1 on the washed panel. The
       category has to clear 4.5:1 in both themes, and --body
       measures 7.90:1 light and 8.28:1 dark;
     - no backdrop-filter on the panel. The reference blurs what
       is behind it; behind ours is an opaque page, so the filter
       would cost a compositor layer per card to change nothing.
   ============================================================ */

.wk-main{
  /* The panel is a WASH, never a grey: an ink veil over the page in light, a
     white one in dark, so the same 0.08 reads as the same lift on either
     ground. Hardcoding the reference's #EBEBEB would have painted a light card
     onto the dark theme. */
  --wk-panel:rgba(14,14,20,.08);
  --wk-panel-hi:rgba(14,14,20,.02);
  /* the project page's hairline, the reference's black at 16%, built as a wash
     for the same reason the panel is: one number that reads the same weight on
     either ground instead of a light rule stranded on a dark page */
  --wk-rule:rgba(14,14,20,.16);
  --wk-art-base:var(--bg-soft);
  --wk-gap:16px;
  --wk-pad:16px;            /* the picture's inset from the card edge */
  --wk-cap:24px;            /* the caption's extra inset, and its clearance below */
  --wk-radius:24px;
  --wk-radius-in:16px;
  --wk-roll:36px;           /* caption line height plus the gap to its twin */
  /* a strong ease-out: fast off the mark, long settle, which is what makes the
     press read as weight arriving rather than a linear slide */
  --wk-out:cubic-bezier(.16,1,.3,1);
  /* the wash gets a GENTLER ease-out, and it was measured to earn it: under the
     strong curve above, 800ms of fade was perceptually over in 380 and the slow
     quietening the reference has was gone. This one is 87% done at half time and
     lands at about 660ms, so the number in the transition is the number the eye
     actually sees. */
  --wk-wash:cubic-bezier(.33,1,.68,1);
  padding-bottom:96px;
}
html[data-theme=dark] .wk-main{
  --wk-panel:rgba(255,255,255,.08);
  --wk-panel-hi:rgba(255,255,255,.02);
  --wk-rule:rgba(255,255,255,.16);
  --wk-art-base:#191922;
}

/* --- listing head: the site's own type system, at the reference's scale --- */
.wk-hero{padding:130px 0 48px;text-align:center}
.wk-hero__in{max-width:760px;margin:0 auto}
.wk-hero__eyebrow{margin-bottom:16px}
.wk-hero__h1{font-size:clamp(32px,5.2vw,52px);line-height:1.06;letter-spacing:-.035em}
.wk-hero__sub{margin:16px auto 0;max-width:520px;font-size:16.5px;line-height:1.6;color:var(--muted);text-wrap:balance}
html[data-theme=dark] .wk-hero__eyebrow{color:#ff9242}

/* --- the grid ---
   Two columns, and a card that needs the whole row simply takes it. The row
   shape is decided on the SERVER (see layoutRows), so an odd card left over
   before a wide one, or at the end of the list, arrives already marked wide and
   the grid is a solid block at every count instead of a block with a hole.
   No entrance animation, deliberately: the reference has none (proven by
   measurement), and a portfolio that fades itself in makes the reader wait to
   see the work. */
.wk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--wk-gap)}
.wk-card{display:flex;min-width:0}
.wk-card--wide{grid-column:1 / -1}

/* The whole card is the link: one tap target far above 44px, one focus stop,
   nothing inside it to tab past. The inset hairline is the reference's own, and
   it earns its place in dark mode, where it draws the top edge of the panel out
   of the page. */
.wk-card__a{
  position:relative;display:flex;flex-direction:column;flex:1;min-width:0;
  padding:var(--wk-pad);
  border-radius:var(--wk-radius);
  /* OPAQUE, and it has to be. The page carries a fixed dot texture behind
     everything (body:before), and a card painted only in the translucent wash
     let that texture read straight through the panel and the caption, which
     looked like dirt rather than a surface. The base is the page's own colour,
     so the composite is identical to the reference's and both themes still get
     it for free. */
  background-color:var(--bg);
  box-shadow:inset 0 1px 0 1px rgba(255,255,255,.06);
  transition:transform .14s var(--wk-out);
}
/* the wash itself is its own layer, exactly as the reference builds it: one
   flat tint over the panel, and the only thing the hover fades */
.wk-card__a:before{
  content:"";position:absolute;inset:0;z-index:0;
  border-radius:inherit;pointer-events:none;
  background-color:var(--wk-panel);
  transition:background-color .8s var(--wk-wash);
}
.wk-card__media{
  position:relative;z-index:1;display:block;overflow:hidden;
  border-radius:var(--wk-radius-in);
  aspect-ratio:648 / 520;
  background:var(--wk-art-base);
}
.wk-card--wide .wk-card__media{aspect-ratio:1344 / 720}
.wk-card__media img,.wk-card__media svg{width:100%;height:100%;display:block;object-fit:cover}
/* v76: the scroll-scale carrier. The picture arrives a tenth larger and settles
   to its true size as the card comes into view, and it does that HERE rather
   than on the picture, which already answers the pointer with a press of its
   own: two transforms on one element would fight, two on a parent and a child
   multiply. Absolutely positioned so the frame above keeps its aspect ratio and
   its clip whatever the carrier is doing, which is the reference's own anatomy.
   The origin is the picture's centre, so it grows evenly rather than off one
   corner. No transition: the value is smoothed in script, frame by frame, and a
   CSS transition on top would smooth the smoothing. */
.wk-card__scale{position:absolute;inset:0;transform-origin:50% 50%}

/* the caption row: 24px tall, indented past the picture, and clearing the card
   bottom by the same 24px it is indented by */
.wk-card__foot{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:0;
  height:24px;
  margin:var(--wk-pad) 0 calc(var(--wk-cap) - var(--wk-pad));
  padding:0 var(--wk-cap);
}
.wk-card__name{display:block;flex:0 0 auto;min-width:0;height:24px;overflow:hidden}
.wk-card__roll{display:flex;flex-direction:column;gap:12px}
.wk-card__rolli{display:block;flex:none;height:24px;transform-origin:100% 0;font-size:20px;font-weight:600;line-height:24px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-card__cat{flex:0 200 auto;min-width:0;font-size:16px;font-weight:500;line-height:24px;letter-spacing:-.02em;color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- hover: fine pointers only ---
   The picture springs from 1 to 0.98 while the panel wash eases away, so the
   card quietens as the work steps forward, and a fresh copy of the name rolls
   up behind it. Transitions, never keyframes: a reader who leaves halfway gets
   the return from wherever the scale actually is. Transform and colour only,
   and the scale happens INSIDE an overflow:hidden box, so nothing on the page
   moves a pixel. */
@media (hover: hover) and (pointer: fine){
  .wk-card__media img,.wk-card__media svg{transition:transform .32s var(--wk-out)}
  .wk-card__roll{transition:transform .42s var(--wk-out)}
  .wk-card__rolli{transition:transform .42s var(--wk-out)}
  .wk-card__rolli + .wk-card__rolli{transform-origin:0 0;transform:skewY(12deg)}
  .wk-card__a:hover .wk-card__media img,.wk-card__a:hover .wk-card__media svg{transform:scale(.98)}
  .wk-card__a:hover:before{background-color:var(--wk-panel-hi)}
  .wk-card__a:hover .wk-card__roll{transform:translateY(calc(-1 * var(--wk-roll)))}
  .wk-card__a:hover .wk-card__rolli{transform:skewY(12deg)}
  .wk-card__a:hover .wk-card__rolli + .wk-card__rolli{transform:none}
}
/* the press: the whole card takes the weight for as long as the pointer is
   down, then springs back */
.wk-card__a:active{transform:scale(.98)}
@media (prefers-reduced-motion: reduce){
  /* the site's global rule already collapses every duration, which would leave
     these transforms JUMPING to their end state instead of travelling there. So
     the motion is removed outright: the wash still answers the pointer, in
     colour alone, and the name simply stays where it is. */
  .wk-card__a:hover .wk-card__media img,.wk-card__a:hover .wk-card__media svg,
  .wk-card__a:hover .wk-card__roll,.wk-card__a:active{transform:none}
  /* v76: and the scroll-scale is not slowed, it is absent. The script returns
     before it writes anything under this preference, and clears the carriers if
     the preference arrives mid page. The !important is the v54 lesson: a browser
     with no matchMedia change event never gets that clean up, and a stale inline
     transform would otherwise outrank this rule and leave one picture a tenth
     too big for the rest of the visit. */
  .wk-card__scale{transform:none!important}
  .wk-card__rolli,.wk-card__a:hover .wk-card__rolli,
  .wk-card__rolli + .wk-card__rolli,.wk-card__a:hover .wk-card__rolli + .wk-card__rolli{transform:none}
}

/* --- listing empty state --- */
.wk-empty{max-width:560px;margin:0 auto;padding:56px 20px 64px;text-align:center}
.wk-empty b{display:block;font-size:21px;letter-spacing:-.025em;color:var(--ink)}
.wk-empty p{margin:11px 0 24px;color:var(--muted)}

/* ============================================================
   v54 PROJECT PAGE. A clean-room replica of the owner's own
   project page, measured live at 1440 and at 390 and rebuilt
   from scratch. Every number below was read off the reference
   with getComputedStyle / getBoundingClientRect, never guessed.

   Measured and reproduced:
     container 1361 (ours is .container's 1152, the v52 decision,
     so the page lines up with the nav pill and the footer);
     title 48/500 at -0.02em over a 20/500 category, 12 between;
     48 down to the hero; image frames at 1361:840 with a 32
     radius, stacked 24 apart; 64 between every section; body
     copy 16/500 at 1.4; the brief and the case rows split
     35% | 40% inside a 48px inset, the labels at half opacity;
     a 1px rule at 16% over the case rows, 24 above them and 64
     between them; the ticker band 2.4em tall carrying 80/500
     uppercase at -0.02em; the pager at the same 80/500 uppercase
     with a 72px arrow 16 from the word, resting at full strength
     and fading to 0.5 under the pointer.
   On the phone the reference steps to: 16 side padding, 26/500
   title, 343:278 frames at a 16 radius, 16 between frames, 48
   between sections, single-column brief and case, a 40/500
   ticker, and a stacked pager. Type ramps between the two
   measured ends rather than stepping, so nothing lurches at a
   breakpoint.
   ============================================================ */
.wk-project{
  padding-top:126px;
  /* the reference's own rhythm, in two variables so the phone
     block below moves the whole page by editing two numbers */
  --wk-sec:64px;      /* between sections */
  --wk-fgap:24px;     /* between stacked image frames */
  --wk-frad:32px;     /* image frame radius */
  --wk-inset:48px;    /* the text columns' inset inside the image edges */
}
.wk-back{position:relative;display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--muted);transition:color .16s var(--ease)}
.wk-back:hover{color:var(--orange)}
.wk-back .ic{width:17px;height:17px}
.wk-back .ic svg{width:100%;height:100%;display:block}
/* the same invisible 44px catchment the phone build uses everywhere else */
.wk-back:after{content:"";position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;height:44px}

/* --- title block: 48/500 over 20/500, 12 apart ---
   The 500 is the reference's, and on THIS page it is also the consistent
   choice: the strip, the pager, the brief and the case rows are all 500, so the
   site's usual 700 heading would have been the one bold thing on a page of
   medium. The size ramps between the two ends actually measured, 26 at 390 and
   48 at 1440, rather than stepping at a breakpoint. */
.wk-project__h1{margin:22px 0 0;font-size:clamp(26px,1.11rem + 2.1vw,48px);font-weight:500;line-height:1.2;letter-spacing:-.02em}
.wk-project__cat{margin:12px 0 0;font-size:clamp(16px,.906rem + .381vw,20px);font-weight:500;line-height:1.2;letter-spacing:-.02em;color:var(--body)}

/* --- the image frame, and the parallax it carries ---
   The picture is overscanned inside a clipped frame and slides
   against the scroll. Measured on the reference: the inner box
   is 130% of the frame's height (140% on the phone), it is
   centred by the matching negative offset, and it travels 0.15px
   for every pixel of scroll (0.10 on the phone) with no easing
   or smoothing of any kind - it lands on its mark in one frame.
   Written as top/height percentages so the geometry is the
   stylesheet's job and the script only ever writes a transform.
   With no JavaScript, and under reduced motion, the frame is
   simply a centred crop that never moves. */
.wk-frames{display:flex;flex-direction:column;gap:var(--wk-fgap);margin-top:var(--wk-sec)}
/* the hero rides closer to the title than the sections do to each other: the
   reference's 48 against its 64 */
.wk-frames--hero{margin-top:48px}
.wk-frames--pair{flex-direction:row}
.wk-frames--pair .wk-frame{flex:1;min-width:0;aspect-ratio:668 / 841}
.wk-frame{
  position:relative;margin:0;overflow:hidden;
  border-radius:var(--wk-frad);
  aspect-ratio:1361 / 840;
  background:var(--wk-art-base);
}
/* will-change is deliberately NOT set here. A project can carry twelve frames,
   and twelve permanent compositor layers of a full width photograph is real
   memory on a cheap phone for a page that is mostly still. The script promotes
   a frame when it comes within 200px of the viewport and demotes it when it
   leaves, so at most a screenful is ever on its own layer. */
.wk-frame__in{position:absolute;left:0;top:-15%;width:100%;height:130%;display:block}
.wk-frame__in img,.wk-frame__in svg{width:100%;height:100%;display:block;object-fit:cover}

/* --- the split, shared by the brief and the case rows ---
   The reference sets its text 48 inside the 1361 the pictures use and then
   splits the remaining 1265 into a 443 column and a 506 one, pushed apart. All
   three numbers are written here as RATIOS of the picture width (3.53%, 35.02%,
   40%) rather than as pixels, so the composition holds at our narrower
   container and at every width between the two that were measured, and so no
   rule here has to know what padding .container happens to be using. */
.wk-split{display:flex;justify-content:space-between;gap:24px;margin:0 3.53%}
.wk-split__a{flex:0 1 35.02%;min-width:0}
/* the auto margin, not just space-between, so the right column still sits on
   its edge when a project has nothing to put opposite it */
.wk-split__b{flex:0 0 40%;min-width:0;margin-left:auto}
.wk-split__a,.wk-split__b,.wk-brief__k,.wk-brief__v{
  margin-block:0;
  font-size:clamp(14px,.829rem + .19vw,16px);font-weight:500;line-height:1.4;letter-spacing:-.02em;color:var(--ink);
}

/* --- the brief: description on the left, client and role on the right --- */
.wk-brief{margin-top:var(--wk-sec)}
.wk-brief__lede,.wk-case__v{color:var(--body)}
.wk-brief__list{display:flex;flex-direction:column;gap:16px}
.wk-brief__row{display:flex;flex-direction:column;gap:8px}
.wk-brief__k{opacity:.5}
.wk-brief__v{margin-inline:0}

/* --- the case: challenge, objective, results ---
   The same split, 64 apart, under the reference's hairline. The rule rides on
   the first row rather than on the section, so it lines up with the text it
   belongs to instead of running the full width of the pictures. */
.wk-case{display:flex;flex-direction:column;gap:64px;margin-top:var(--wk-sec)}
.wk-case__row:first-child{padding-top:24px;border-top:1px solid var(--wk-rule)}

/* --- the ticker ---
   One line of the project's own words, repeated and drifting
   left for ever. Measured on the reference: 80/500 uppercase at
   -0.02em in a band 2.4em tall, travelling 80px a second - which
   is exactly one em a second, and holds on the phone too, where
   40px type drifts at 40px a second. The script reads the type
   size and uses it as the speed, so the law survives any
   breakpoint without a second number to keep in sync.
   Full bleed on purpose: the words run off both edges of the
   page, which is what makes it read as a strip rather than a
   heading. */
.wk-tick{
  margin-top:var(--wk-sec);
  overflow:hidden;
  padding:.6em 0;
  font-size:clamp(40px,1.571rem + 3.81vw,80px);
  line-height:1.2;
}
.wk-tick__row{display:flex;width:max-content;will-change:transform}
.wk-tick__i{
  display:block;flex:none;
  font-size:1em;font-weight:500;line-height:1.2;letter-spacing:-.02em;
  text-transform:uppercase;white-space:pre;color:var(--ink);
}

/* --- the pager: the giant Prev and Next ---
   The reference does not wrap: the first project offers Next
   alone on the right, the last offers Prev alone on the left,
   and everything between carries both. The arrow sits on the
   outside of the word in each direction. */
.wk-pager{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:144px}
.wk-pager__l{
  display:inline-flex;align-items:center;gap:16px;
  /* the arrow is sized in em off this, so the 72px box the reference draws at
     80px type becomes 36 at the phone's 40px type with no second rule */
  font-size:clamp(40px,1.571rem + 3.81vw,80px);
  color:var(--ink);
  transition:opacity .3s var(--wk-wash);
}
/* alone on the page, Next still belongs on the right */
.wk-pager__l--next{margin-left:auto}
.wk-pager__t{font-size:1em;font-weight:500;line-height:1.2;letter-spacing:-.02em;text-transform:uppercase}
.wk-pager__ic{flex:none;display:block;width:.9em;height:.9em}
.wk-pager__ic svg{width:100%;height:100%;display:block}
.wk-pager__l--prev .wk-pager__ic{transform:scaleX(-1)}
/* measured on the reference: the whole link rests at full strength and settles
   to half under the pointer, about 230ms to nine tenths of the way */
@media (hover: hover) and (pointer: fine){
  .wk-pager__l:hover{opacity:.5}
}
.wk-pager__l:focus-visible{opacity:.5}

/* --- 404 --- */
.wk-404{max-width:568px;margin:0 auto;padding-top:172px;padding-bottom:132px;text-align:center}
.wk-404__mark{display:inline-flex;margin-bottom:26px;color:var(--ink);opacity:.42}
.wk-404__mark svg{width:56px;height:auto;display:block}
.wk-404__h{font-size:clamp(26px,4.4vw,34px);line-height:1.14;letter-spacing:-.03em}
.wk-404__p{margin:13px 0 28px;color:var(--muted)}

/* --- reduced motion: both engines off ---
   The parallax becomes what it already is with no script: a centred crop,
   sitting still. The ticker keeps its words and loses its drift. Both scripts
   also check the query themselves and never start, so this block is the belt to
   their braces: it clears any inline transform left behind by a reader who
   turns the preference on mid-page. */
@media (prefers-reduced-motion: reduce){
  .wk-frame__in{top:0;height:100%;transform:none!important;will-change:auto}
  .wk-tick__row{transform:none!important;will-change:auto}
}

/* --- tablet --- */
@media (max-width: 1024px){
  .wk-project{padding-top:120px;--wk-sec:56px}
  .wk-pager{margin-top:120px}
}
@media (max-width: 920px){
  .wk-hero{padding-top:118px}
  .wk-project{padding-top:114px;--wk-inset:32px}
}

/* --- phone: one column, the reference's own phone anatomy ---
   The picture comes in to 8px of the card edge while the caption stays 24px in,
   the radii step down 24 to 16 and 16 to 12, and the pictures grow wider and
   shorter, because a 1.87:1 letterbox is a 187px strip at this width. The wide
   card keeps a taller picture than the rest, so the rhythm of the desktop grid
   survives the stack. */
@media (max-width: 767px){
  .wk-hero{padding:104px 0 24px}
  .wk-hero__sub{font-size:15px}
  .wk-grid{grid-template-columns:1fr;gap:12px}
  .wk-card__a{--wk-pad:8px;--wk-cap:16px;--wk-roll:30px;border-radius:16px}
  .wk-card__media{border-radius:12px;aspect-ratio:327 / 237}
  .wk-card--wide .wk-card__media{aspect-ratio:327 / 256}
  .wk-card__foot{height:20px;gap:12px;margin:14px 0 16px}
  .wk-card__name{height:20px}
  .wk-card__roll{gap:10px}
  .wk-card__rolli{height:20px;font-size:16px;line-height:20px;letter-spacing:-.02em}
  .wk-card__cat{font-size:14px;line-height:20px}
  /* 64px of rhythm plus the 74px the fixed phone action bar covers */
  .wk-main{padding-bottom:138px}
  /* the project page's phone step, all four numbers off the reference at 390:
     16 between frames, 48 between sections, a 16 radius, and no inset at all -
     the text runs the full width the images do */
  .wk-project{padding-top:100px;--wk-sec:48px;--wk-fgap:16px;--wk-frad:16px;--wk-inset:0px}
  .wk-project__h1{margin-top:18px}
  .wk-project__cat{margin-top:8px}
  .wk-frames--hero{margin-top:32px}
  /* v56, and the one place this page leaves the reference on purpose.
     The reference's phone frame is 343 by 278, and cover fills that from a
     landscape picture by HEIGHT: the picture is painted half again as wide as
     the frame and a quarter of it is thrown away off both sides. That works
     for the reference because its own artwork is centred; it does not work for
     work like ours, where three phones stand side by side and the outer two
     are exactly what the crop takes.
     So on the phone the frame is cut to the shape that makes cover fit by
     WIDTH instead. 2640 by 1792 is the pictures' own 2400 by 1792 with 10%
     more width, which makes the 110% inner box below EXACTLY 2400 by 1792
     again - the pictures' own ratio - so cover has nothing left to crop. Every
     pixel of the artwork is on screen, edge to edge, and the 10% of height the
     frame does not show becomes the parallax's range instead of the sides.
     Everything from 768 up is untouched: that geometry is measured 1:1 off the
     reference and stays byte for byte what it was. */
  .wk-frame{aspect-ratio:2640 / 1792}
  /* the overscan is now vertical only, so it is small: 110% against the
     desktop's 130%, the rate stays the measured 0.10, and the script caps the
     travel at the slack so the frame can never show its own background */
  .wk-frame__in{top:-5%;height:110%}
  /* the pair stops being a pair: two more frames in the single column */
  .wk-frames--pair{flex-direction:column}
  .wk-frames--pair .wk-frame{aspect-ratio:2640 / 1792}
  /* one column, full width, the label over the words it labels */
  .wk-split{flex-direction:column;gap:24px;margin:0}
  .wk-split__a,.wk-split__b{flex:none;margin-left:0}
  .wk-brief .wk-split{gap:32px}
  .wk-brief__row{gap:4px}
  .wk-case{gap:48px}
  .wk-pager{flex-direction:column;align-items:flex-start;gap:32px;margin-top:104px}
  .wk-pager__l--next{margin-left:0}
  .wk-404{padding-top:126px;padding-bottom:14px}
}
/* deliberately NO narrow-phone override below this. The blog grid tightens its
   gap under 400px because it still runs two columns there and needs the width
   back; this grid is a single column from 767px down, so there is no pressure to
   relieve and the reference's 12px rhythm holds all the way to 320. */

/* ============================================================
   v71 HERO INK CARD. Appended last so these rules win ties, and
   so the #home::before override lands after the .hero:before it
   has to beat. The Fabrica ink loop plays inside a rounded inset
   card behind the hero. Every selector is scoped to #home, so
   nothing reaches the header, the other sections or the footer.

   Layer order inside #home (bottom to top):
     hero background colour  ->  card (video + scrim + dust)  ->  hero content.
   #home gets `isolation` so the card can live at z-index -1: that puts it
   above the hero's own background but below every existing child. It is the
   only property this block sets on an element that already existed and does
   not change how anything paints on its own.
   No em dashes. British spelling in comments.
   ============================================================ */

#home {
  isolation: isolate;
  /* One uniform frame on all four edges: the card runs to the very top of the
     page, so there is no bare band behind the floating header. The header is
     position:fixed with z-index 100 in the root stacking context, so it keeps
     floating over the card with no stacking work here and no change of its
     own. Because the card is a background layer rather than the hero box, the
     top now growing upward moves no content at all. */
  --card-top: 6px;
  --card-x: 6px;
  --card-r: 25px;
}

.hero__bgv {
  position: absolute;
  top: var(--card-top);
  left: var(--card-x);
  right: var(--card-x);
  bottom: var(--card-x);
  z-index: -1;
  border-radius: var(--card-r);
  overflow: hidden;
  pointer-events: none;
}

/* The 1px bleed is load bearing, not a fudge. The hero carries a scroll-driven
   scale, so once the page moves the card lands on fractional pixels, and the
   composited <video> is rastered as its own layer. Where that layer's edge
   meets the antialiased clip you get a sliver of raw, unscrimmed ink reading
   as a dark hairline down the card (measured in real Chrome on a real GPU:
   161 against a 227 card on a 255 page). All three layers therefore bleed the
   SAME one pixel past the clip, so the pixel the clip blends is scrimmed ink
   like the rest of the card. Bleeding only the video is what caused it. */
.hero__bgv video {
  position: absolute;
  top: -1px; left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  /* And the video carries the card's radius itself. A rounded clip on a
     composited video layer is applied as a mask over the whole layer, and
     under the hero's scroll scale that mask fringes the straight edges too
     (measured: 15.5% of the card's left-edge rows darkened to 185 at scroll
     180, on real Chrome, light theme; square clip = 0%). Rounding the video's
     own layer leaves the container's clip nothing to cut: measured 0%. */
  border-radius: calc(var(--card-r) + 1px);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.hero__bgv.is-live video { opacity: 1 }

/* CARD EDGE. On a dark page at the loop's darkest moments the ink is the same
   value as the page, so the card dissolves into it and the panel stops reading
   as an object. A one pixel ring in the site's own --line keeps the edge
   present without adding a colour. It sits above the video and the scrim, and
   inherits the radius so the corners stay true. */
.hero__bgv::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--line);
  pointer-events: none;
}

/* DUST. Measured: the reference panel carries a constant-amplitude grain
   (high-pass sd 2.96 on its darkest area, 3.15 on its lightest), while the mp4
   carries none at all (high-pass sd 0.23 at t=8). The specks are an overlay in
   the reference, not video content, so they are one static texture here too:
   no particle system, no script, no new asset, one repeating layer blended
   over the card so it reads the same over ink and over water. */
.hero__bgv-dust {
  position: absolute;
  inset: -1px;
  display: block;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='168'%3E%3Cfilter id='d' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2' intercept='-.5'/%3E%3CfeFuncG type='linear' slope='2' intercept='-.5'/%3E%3CfeFuncB type='linear' slope='2' intercept='-.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='168' height='168' filter='url(%23d)'/%3E%3C/svg%3E");
  background-size: 168px 168px;
  background-repeat: repeat;
  /* .05 is the measured match: it renders high-pass sd 3.0 and lifts the
     darkest card to mean 17.7, against the reference's 2.96 / 3.15 and 17.1. */
  opacity: .05;
}

/* SCRIM: the hero's own background colour at partial alpha, so while the file
   is still loading (video opacity 0) the card is exactly the flat panel the
   hero is today. Heavy over the copy column, light across the open right side
   so the ink and its dust specks stay clearly readable there. */
.hero__bgv-scrim {
  position: absolute; inset: -1px; display: block;
  background: linear-gradient(90deg,
    rgba(255,255,255,.91) 0%,
    rgba(255,255,255,.90) 52%,
    rgba(255,255,255,.70) 72%,
    rgba(255,255,255,.58) 88%,
    rgba(255,255,255,.55) 100%);
}
html[data-theme=dark] .hero__bgv-scrim {
  background: linear-gradient(90deg,
    rgba(13,13,18,.90) 0%,
    rgba(13,13,18,.89) 52%,
    rgba(13,13,18,.64) 72%,
    rgba(13,13,18,.50) 88%,
    rgba(13,13,18,.46) 100%);
}

/* From 920px down the copy is one centred column across the whole card, so the
   veil goes flat and the dust is given its room top and bottom instead. */
@media (max-width: 920px) {
  #home { --card-top: 2px; --card-x: 2px; --card-r: 20px }

  /* stops follow the copy: it sits from 20% to 86% of the taller card */
  .hero__bgv-scrim {
    background: linear-gradient(180deg,
      rgba(255,255,255,.58) 0%,
      rgba(255,255,255,.90) 16%,
      rgba(255,255,255,.90) 70%,
      rgba(255,255,255,.64) 92%,
      rgba(255,255,255,.56) 100%);
  }
  html[data-theme=dark] .hero__bgv-scrim {
    background: linear-gradient(180deg,
      rgba(13,13,18,.54) 0%,
      rgba(13,13,18,.88) 16%,
      rgba(13,13,18,.88) 70%,
      rgba(13,13,18,.60) 92%,
      rgba(13,13,18,.52) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bgv video { transition: none }
}

/* ============================================================
   v71 HERO GRADIENTS REMOVED
   Owner: the hero carries no gradient styling any more, the ink and its dust
   are the texture. Every rule is #home scoped: the identical components in
   the header, the other sections and the footer keep their gradients. The
   hero BUTTONS deliberately keep their stock ring, brand component chrome,
   same family as the header CTA.
   ============================================================ */

/* 1. the hero's three radial colour washes. The sheet writes that rule as
   .hero:before, and it also carries the box itself (content, inset:0,
   z-index:0, pointer-events:none). Only the paint is taken away: the empty,
   transparent, click-through box stays exactly where it was. */
#home::before { background: none }

/* 2. the two drifting colour blobs (their only styling was the gradient).
   display:none also stops their infinite `drift` animation entirely. */
#home .blob { display: none }

/* 3. the dot-grid halo behind the logo visual */
#home .hero__visual::before { background-image: none; -webkit-mask-image: none; mask-image: none }

/* 4. the H1's gradient-clipped phrase. Markup stays exactly as it is, the
   Bangla dictionary and the word-reveal spans key off it; only the paint
   changes, so the phrase now reads in the same solid colour and weight as the
   rest of the headline. The per-word entrance animation is left alone; the
   one-shot hueShift sweep stops. */
#home .hero__title .grad-text,
#home .hero__title .grad-text .w {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}
#home .hero__title .grad-text { animation: none }

/* ============================================================
   OUR CLIENTS. Born in v81 as a boxed row that rises out from behind
   the hero. Rebuilt in v82, on the owner's four corrections, as a
   full width band that also ticks. Rebuilt again in v83, on three
   more: the marks are the clients' own logos in the clients' own
   colours, they are dainty the way the reference's are, and the strip
   is glued to the hero with its label floating over it. Appended
   before the v83 block below, like the v71 card, so these rules win
   ties and nothing above them has to be reordered.

   THE ENTRANCE, measured off the reference rather than eyeballed
   (261 dense samples at 1440x900, 10px apart, 260ms settle):

     p  = clamp(scrollY / R, 0, 1)
     ty = -LIFT * (1 - p)
     s  = 0.95 + 0.05 * p           transform origin 50% 50%
     R  = (document Y of the stage's bottom) - innerHeight / 2

   It is LINEAR in the scroll with no easing and no spring: the closed
   form tracks the reference to 0.000437px of travel and 4e-7 of scale
   across the whole sweep, the downward and upward sweeps agree to
   0.000000px, and a scroll jump lands on the value in the same frame.
   The cards never move under it; one transform on one element does
   all of it.

   THE BAND IS FULL WIDTH (owner, v82: "it should be full screen").
   The band is a child of the section itself, so it is the body's own
   width with no viewport unit and no scrollbar arithmetic anywhere in
   it, and the cards run off both edges the way a band should.

   THE CARD is the reference's own card, to its own arithmetic, at both
   ends of its range and with no breakpoint in between. Six across a row
   inset 36px each side with 4px between them is (100vw - 2*36 - 5*4)/6;
   it stops growing at the 250px the reference stops at (1600 and 1920
   both measure 250) and stops shrinking at the 173px the reference's
   own PHONE card measures at 390. Its height is 0.735 of its width,
   the ratio all five desktop widths probed agree on to four decimal
   places (1920, 1600, 1440, 1366 and 1280 give 0.73512, 0.73507,
   0.73508, 0.73509 and 0.73506).

   THE STRIP IS GLUED TO THE HERO (owner, v83: "remove all the space on
   top of our clients and bellow. there should be no extra space form
   the hero section to the logos"). The padding is zero at every width
   and there is no label row left to hold any either: the band is the
   whole of the section's flow, so the section is exactly one card tall
   and the chip ticker below it starts where the band ends. v82's three
   step rhythm is gone with it, deliberately, because zero has no steps.

   THE LIFT IS SOLVED, NOT TYPED, and the law is untouched by any of
   this. The same slice of card the reference leaves showing at rest is
   left showing here: 46.5% of one card's height, below the section's
   top edge, with the stage scaled 0.95 about its own centre so it gives
   up 0.025 of its height off the bottom. That is

     lift = pad + 0.975 * block - 0.465 * card height

   and v83 only changed what goes in: pad is 0 and the block is the card
   alone, so the lift solves to 0.51 of a card height. The script still
   reads the answer off the resting `translate` this produces, so the
   law is written down exactly once.

   THE LABEL IS A FROSTED PILL ON THE BAND (owner, v83: "the word our
   clinets should be a frosted pill on top of the logos on the very
   left of the side borders"). It leaves the flow entirely - which is
   what let the padding go to zero - and floats over the band. It rides
   inside the stage, so it rises and scales with the strip instead of
   hovering over an empty band.

   IN v84 IT MOVED TO THE BAND'S TOP LEFT CORNER AND ITS GLASS BECAME
   REAL (owner, v84: "move the our clients pill move to the top so its
   on the top left of the moving logos. and make it frosted glass to
   backgorund is slightly visible of the moving logos"). Two things
   changed and both are the owner's word over v83's reasoning:

     - the corner. It hangs from the band's top edge instead of being
       centred on the band's height, and it hangs at the depth that
       lets its lower edge bite into the row of marks, because the two
       halves of the ask pull against each other: the marks live in the
       middle 27% of a card, so a pill in the VERY corner has nothing
       behind it but blank card and glass over blank white card is
       white. The arithmetic is at --cl-pill-y below.
     - the material. v83 copied .nav__inner value for value, and the
       nav's 72% white is a surface you cannot see through; the owner
       asked to see the cards through this one. So the BLUR is still
       the house's, unchanged - blur(20px) saturate(180%) - and only
       the tint is the owner's: 46% instead of 72%. One vocabulary of
       glass, two densities, and the denser one is still the nav's.

   THE PHONE TAKES THE SAME PILL. v83 dropped it to the band's foot
   there and turned the blur off, because the nav's own phone fallback
   is 96% opaque and an opaque pill sitting over a mark would ERASE
   that mark rather than veil it. The owner's order retires the drop,
   and with it the reason for the fallback: the glass is real on the
   phone too, so the mark it bites into ghosts through rather than
   disappearing. The cost is one 34px-tall backdrop filter, which is
   measured in the round's butter table rather than assumed.

   THE TICK (owner, v82: "it should be moving from left to right").
   The reference does NOT tick: 481 frames over eight seconds at a
   fixed scroll put its first card at one single x, and its whole page
   carries no infinite horizontal animation at all. So there was no
   speed to copy from it and the speed is the HOUSE's own instead: the
   chip marquee runs 1585.28px in 32s, which is 49.54px/s, and one run
   of six cards here is 1372px at 1440, so 28s per run is 49.0px/s -
   the same speed to within one per cent, and the page keeps one
   vocabulary of motion. Direction is the owner's word: left to right,
   which is the track sliding from one run behind to home.

   THE LOOP is the house marquee's, with its one weakness fixed. The
   track carries FOUR runs and travels exactly one run, so a run always
   arrives where its copy just left and the seam cannot be seen. Four
   rather than two because a run of six 250px cards is 1524px and two
   of those would stop covering the viewport past 3048px; three spare
   runs carry it to 4572px, past any screen. The house strip translates
   a PERCENTAGE of its own width, which is half a gap short of a whole
   run and would show here, where the cards have edges.

   OCCLUSION. The section CLIPS its own overflow and the stage travels
   up out of the clip. It is deliberately NOT parked behind the hero on
   a negative z-index: the parallax engine fades #home out as it leaves
   (opacity 1 - 0.25c), so anything sitting behind it would ghost
   through at a quarter strength halfway down the travel. Here the clip
   is indistinguishable from the occlusion, because the hero's own
   background and the page's are the same --bg, and it leaves the v71
   hero layer stack completely alone.

   THE MARKS ARE THE CLIENTS' OWN LOGOS, IN THE CLIENTS' OWN COLOURS
   (owner, v83: "make the logos use real color as it is on their
   websites"). Every one was taken off that client's live site - the
   sources are listed against each rule below - so v82's single channel
   masks painted with --ink retire here: colour art cannot be a mask.
   Each is painted as a contained background, which is what lets one
   box hold a square emblem and a wide wordmark without either being
   squeezed, and a client whose art dies on the other card gets a second
   file rather than a filter: only the neutral ink is moved in those,
   and every brand colour in them is the colour the client drew.

   THE BOX IS THE REFERENCE'S BOX (owner, v83: "see how neatly the logo
   size is matching thier website ? I want the same feel... the logos on
   the carocel should be 40% smaller, you check the whole site and
   deceide"). The reference sizes every logo by containing it in one
   fixed 104 x 42 box inside a 250 x 180 card, so the box here is the
   same ratio of the same card, and 104/42 is written out rather than
   reduced so the number can be checked against the reference. Its
   height is 0.2694 of the card, which is the owner's 40% off v82's
   optical size: v82's six rendered at a mean area of 8890 square pixels
   on a 250px card, an optical side of 94.3, and the six here render at
   3296, a side of 57.4, which is 0.609 of it. The reference's own six
   measure 2729 on a card of the same size, so this sits a fifth above
   the reference - and it is the first of the four candidates rendered
   on the real cards at which Muhammad Iqbal's RESTAURANT and DUBAI
   lines still read, where the reference's own 45% loses them. Our marks
   carry more subtext than the reference's mostly bare wordmarks, so the
   owner's number is the better read of the same feel. The per mark
   multiplier is optical, not equal, and it is the v81 law re-derived for
   the new art: the measured ink coverage of each
   mark raised to a gentle power, normalised to a mean of one, then
   judged by eye on the real card. Every file ships at four times the
   largest box it can ever be painted in, which is v82's discipline
   unchanged, with one documented exception at the BabyBoom rule.
   No em dashes. British spelling in comments.
   ============================================================ */

.section.clients {
  position: relative;
  /* the clip IS the occlusion, so it is not optional and not a media query */
  overflow: hidden;
  padding: var(--cl-pad) 0 0;

  /* GLUED. Zero at every width, and still spelled as the variable the lift
     is solved from, so the law below reads the same as it always has. */
  --cl-pad: 0px;

  /* THE CARD IS THE REFERENCE'S, AT BOTH ENDS OF ITS OWN RANGE, and needs no
     breakpoint of its own to be either. Six across a row inset 36px each side
     with 4px between them is (100vw - 2*36 - 5*4) / 6, and 92 is those edges
     and gaps; it stops growing at the 250px the reference stops at (1600 and
     1920 both measure 250), and it stops shrinking at the 173px the reference's
     PHONE card measures at 390. So one clamp lands on the reference's desktop
     card above 1130px and on its phone card below, with no jump anywhere in
     between and no media query at all. */
  --cl-gap: 4px;
  --cl-card-w: clamp(173px, calc((100vw - 92px) / 6), 250px);
  --cl-card-h: calc(var(--cl-card-w) * .735);

  /* THE LOGO BOX, the reference's own: 104 wide by 42 tall inside a 250 by 180
     card, contained. Height first because that is the dimension the card sets. */
  --cl-logo: .2694;
  --cl-box-h: calc(var(--cl-card-h) * var(--cl-logo));
  --cl-box-w: calc(var(--cl-box-h) * 104 / 42);

  /* the pill's inset from the viewport edge IS the page's own gutter */
  --cl-pill-x: 24px;
  --cl-pill-h: 40px;

  /* v86: THE PILL SITS AT THE FAR TOP OF THE BAND (owner, on a dark crop of the
     live band: "the client pill should be at the far top its still on the
     center just keep few pixel padding form the top").

     WHAT IT REPLACES, AND WHY THAT REASONING IS RETIRED. v84 hung the pill from
     the top edge and solved its inset so the LOWER edge dipped a fixed 14px
     into the row of marks, because the marks occupy only the middle 27% of a
     card and a pill resting in the very corner has nothing behind it but blank
     card: glass over blank white card is just white. That was a real worry and
     it is written down here rather than deleted, because it is still true. The
     owner has now seen the live glass at that position and asked for the top
     placement anyway. It is his call and it supersedes the bite, which is why
     --cl-pill-bite is gone from this sheet rather than left sitting unused.
     What the round owes him instead is proof that the LABEL still reads, and
     that is measured at the new position rather than argued.

     THE FEW PIXELS ARE THE BAND'S OWN. This band declares exactly one spacing
     number, --cl-gap, the 4px the reference leaves between its cards, and the
     pill now keeps that same 4 from the band's top edge. So the inset is not a
     new number at all: it is the gap the cards already keep from each other,
     turned ninety degrees. It is the same 4 at every width and on the phone,
     which is simpler than what it replaces - v84 needed the pill's height in
     the arithmetic so the 40 and the 34 could share a bottom edge, and a top
     edge needs no arithmetic to share.

     WHAT IS UNDER THE GLASS NOW, measured rather than assumed. The pill's lower
     edge lands at 4 + 40 = 44 from the band's top. The tallest of the six marks
     (Muhammad Iqbal at 1.115) has its top at 64.28 where the card is at its
     250px ceiling and at 44.47 where it is at its 173px floor, so the pill
     clears every mark at every width: by 20.28 at 1920, 13.77 at 1440, 6.91 at
     1280, 4.77 at 1230 and 0.47 wherever the card is on its floor and the pill
     is still 40 tall, which is 768 to 1130. On the phone the shorter pill
     clears by 6.47, where v84's grazed the tallest by nine. The
     glass therefore spends most of its life over card rather than over ink,
     which is exactly the thing v84 avoided; the contrast numbers that matter
     are in the label's own note against .clients__head below. */
  --cl-pill-y: var(--cl-gap);

  /* one run of the six, which is exactly what the track travels */
  --cl-run: calc(6 * (var(--cl-card-w) + var(--cl-gap)));
  --cl-tick: 28s;

  /* the rest state, and the lift that produces it */
  --cl-floor: .95;
  --cl-rest: .465;
  --cl-block: var(--cl-card-h);
  --cl-lift: calc(var(--cl-pad) + .975 * var(--cl-block) - var(--cl-rest) * var(--cl-card-h));
}

.clients__stage {
  /* the pill is positioned against this, and this is exactly the viewport's
     width, so the pill's inset is the page's gutter and nothing else */
  position: relative;
  /* the resting, un-driven state is the HIDDEN one, the same posture the hero
     takes under smk-pre: the clients-rise script reads its lift off this very
     declaration and writes the two properties on its first synchronous pass,
     before the page is painted once */
  translate: 0 calc(-1 * var(--cl-lift));
  scale: var(--cl-floor);
}

/* THE LABEL, a frosted pill in the band's TOP LEFT corner. It is out of the
   flow, which is what lets the section be exactly one card tall, and it sits
   inside the stage so it rises and scales with the strip. 18px dot, an 8px plus
   in 2px strokes, 9px to the words: the reference's own geometry, taken from its
   phone variant where every number lands on a whole pixel. The owner asked for
   the label WITHOUT the year and copyright line the reference carries beside it,
   so there is no second column here at all.

   THE CORNER is --cl-pill-x in from the page's left and --cl-pill-y under the
   band's top edge. v86 moved the second of those to the far top on the owner's
   order; both are now the page's own numbers rather than solved ones, and the
   reason each is what it is sits against those two declarations above. The LEFT
   did not move by a pixel this round.

   THE GLASS IS THE OWNER'S DENSITY ON THE HOUSE'S BLUR, and v86 did not touch a
   value of it. blur(20px) saturate(180%) is .nav__inner's, unchanged; the tint
   is 46% where the nav's is 72%, because the nav sits over a page and this sits
   over the cards it exists to show.

   THE LABEL IS RE-MEASURED AT THE NEW POSITION, on the same rig v84 used at the
   old one: six widths, fourteen phases of a whole tick each, both themes, worst
   pixel anywhere under the label. The darkest the light pill ever lays is
   #fefefe and the brightest the dark pill lays is #151521, which put the label
   at 19.04:1 and 16.48:1 - better than the 16.49 and 14.05 the bite position
   measured, because the glass now sits over flat card rather than over a mark
   and its backdrop is that much further from the type. Both were far clear of
   AA's 4.5 before and are further clear now.

   AND THE THING v84 TRADED AWAY IS GONE, which is worth saying plainly rather
   than leaving to be discovered: at the bite position a mark passed under the
   glass at every width, which is what the owner had asked to see. At the far
   top no mark passes under it at any width. He has looked at both and chosen
   this one; the label reads better for it, and the pill is defined by its
   border and its shadow rather than by its fill either way - measured, the
   glass over blank card differs from the card by 1.00:1 in light and 1.006:1
   in dark, and that was already true of v85 at the same sample. */
.clients__head {
  position: absolute;
  z-index: 2;
  left: var(--cl-pill-x);
  top: var(--cl-pill-y);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  height: var(--cl-pill-h);
  padding: 0 17px 0 13px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
  /* THE HOUSE'S BLUR, at the owner's transparency */
  background: #ffffff76;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 34px #1111221f, 0 2px 8px #1111220d;
}
html[data-theme=dark] .clients__head {
  background: #16161e76;
  border-color: #ffffff14;
  box-shadow: 0 16px 42px #0000008c;
}
.clients__plus {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
}
.clients__plus::before,
.clients__plus::after {
  content: "";
  position: absolute;
  background: var(--bg);
}
.clients__plus::before { left: 8px; top: 5px; width: 2px; height: 8px }
.clients__plus::after { left: 5px; top: 8px; width: 8px; height: 2px }

/* THE BAND. Full width because it is the section's own child rather than the
   container's, and it clips itself so the run has an edge to leave by.

   v84 GAVE IT THE CHIP TICKER'S EDGE FADE (owner: "add the same fade effect on
   both sides exactly same like the bottom moving elemnet"), and the fade is
   declared once for both strips in the v84 block at the foot of this sheet.

   THE FADE RETIRED THE BAND'S OVER-WIDTH, and it had to. v82 built the band
   1/0.95 wider than the section and pulled it back by half the difference, so
   that at the floor scale it landed exactly on both viewport edges; at every
   scale above the floor it overhung, and the section's clip ate the surplus.
   A mask, though, is painted in the band's OWN coordinates and is then scaled
   with the stage: on a band that overhangs, the ticker's 7% lands 2.63% of the
   viewport off screen and the cards arrive at the edge already a third opaque,
   which is not the ticker's fade at all. A band exactly the section's width
   lands the mask on the ticker's own stops the moment the strip is fully risen,
   which is every moment the reader is actually looking at it, and the floor
   scale's 2.5% inset at each end is invisible because it lives inside a stretch
   of the mask the cards are already transparent in. Reaching the edges was the
   v82 ask; a fade that dissolves before the edge is the v84 one, and it is the
   later word. */
.clients__band {
  overflow: hidden;
}

.clients__row {
  display: flex;
  gap: var(--cl-gap);
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: clientsTick var(--cl-tick) linear infinite;
}
/* LEFT TO RIGHT, and by exactly one run: the track starts a run behind home
   and arrives at it, so every card lands where its copy was and the loop has
   no seam. The distance is the run itself rather than a share of the track,
   so adding or removing a spare run can never break the loop. */
@keyframes clientsTick {
  from { transform: translateX(calc(-1 * var(--cl-run))) }
  to { transform: translateX(0) }
}

.clients__card {
  flex: none;
  width: var(--cl-card-w);
  height: var(--cl-card-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  /* the site's own card hairline: the reference's cards read against a grey
     page, ours sit on white, so the edge has to be drawn rather than implied */
  border: 1px solid var(--line);
  /* --radius IS 14px, which is also the reference's card radius exactly */
  border-radius: var(--radius);
  /* the appear, measured off the reference: opacity only, 800ms, the CSS `ease`
     curve (best of twelve fitted candidates, rms 0.0037), 100ms apart. The
     reference staggers in its own component order, which is scrambled; ours
     runs left to right, which is the same law read in the order a reader does,
     and every run of six repeats it so a card and its copies fade together. */
  animation: clientsIn .8s cubic-bezier(.25, .1, .25, 1) both;
  animation-delay: calc(var(--i) * 100ms);
}
@keyframes clientsIn { from { opacity: 0 } to { opacity: 1 } }

/* CONTAINED, not masked: the art carries its own colours now, so the only job
   left is to fit it in the box without squeezing it. A square emblem lands on
   the box's height, a wordmark on its width, and both come out at the optical
   size the reference's do. */
.clients__mark {
  display: block;
  width: calc(var(--cl-box-w) * var(--cl-s));
  height: calc(var(--cl-box-h) * var(--cl-s));
  background: var(--cl-src) center / contain no-repeat;
}
/* Muhammad Iqbal Restaurant: uploads/logo-20260617075936-137518.jpg, the file
   the site's own header paints. One brown ink on the brand's cream ground; the
   ground is lifted so the mark is a mark and not a cream tile, and the dark card
   gets the same artwork in the cream, which is the logo's own second colour. */
.clients__mark--mi { --cl-s: 1.115; --cl-src: url("/img/logo-mi-light.5def540205.webp") }
/* EcoCrave World: cdn/shop/files/Logo_2.png at its master size, the Shopify
   header logo, already on transparency. The dark card lifts the charcoal
   wordmark and frame only; every value of the green mark is theirs. */
.clients__mark--ec { --cl-s: 1.018; --cl-src: url("/img/logo-ec-light.78ae373f1f.webp") }
/* Self Drive BD: admin/assets/logo.png, which is the file their header paints
   through its own --logo. THE MARK THIS REPLACES WAS WRONG (owner, v83: "the
   self drive bd logo is wrong") - the site was carrying the BD roundel alone,
   and the real lockup is the car, the wordmark and the roundel together. Gold
   survives the dark card untouched; the charcoal is lifted. */
.clients__mark--sd { --cl-s: 1.102; --cl-src: url("/img/logo-sd-light.e563ebfe6d.webp") }
/* BuildTech Hub: favicon.svg, their only drawn mark - the site's brand is
   otherwise a text wordmark - rasterised at 512 with the same Manrope 800 the
   page loads, so this is their vector at their proportions and not a redraw. A
   filled orange tile with white ink needs no second file. */
.clients__mark--bt { --cl-s: .846; --cl-src: url("/img/logo-bt-light.de927a7cbc.webp") }
/* BabyBoom BD: apple-icon.png, which is the medallion their own header paints
   at 48px, used here at 44 - within a pixel of the size its designer drew it
   for. It ships as a square on the brand's cream, and that square is what would
   read as a tile on our card, so everything outside the gold ring is lifted;
   the ring's radius is measured off the artwork rather than guessed. Their full
   lockup was built first and rejected: with the wordmark under the emblem the
   name lands at eleven pixels tall on this card, which is mush in either theme.
   A cream disc with a gold ring reads on both cards, so there is no second
   file. It is the ONE mark not shipped at four times its box: 160px against the
   176 that would be, because 180 is the largest the client publishes and
   inventing the difference would be worse than 3.7x. */
.clients__mark--bb { --cl-s: .881; --cl-src: url("/img/logo-bb-light.988c9bcee5.webp") }
/* NearKorea Education: assets/nke-logo-white.png is a white knockout, because
   their header is dark, and assets/og-cover.jpg carries the same lockup three
   times larger on the blue it is knocked out of. The positive is taken from
   there: the artwork is the white, and the colour it is drawn in is that blue.
   One bright cyan reads on both cards, so there is no second file. */
.clients__mark--nk { --cl-s: 1.039; --cl-src: url("/img/logo-nk-light.df1555c95e.webp") }
/* THE DARK CARD. Three of the six would die on it, so three carry a second file
   and the other three do not: bt is a filled orange tile, nk is a bright cyan,
   and bb is a cream disc. In each of the three that do, ONLY the neutral ink is
   moved - Muhammad Iqbal's brown becomes the cream it was printed on, and
   EcoCrave's and Self Drive's charcoal is lifted while their green and their
   gold keep every value their designer gave them. */
html[data-theme=dark] .clients__mark--mi { --cl-src: url("/img/logo-mi-dark.3265e5c7d3.webp") }
html[data-theme=dark] .clients__mark--ec { --cl-src: url("/img/logo-ec-dark.6f50bf8942.webp") }
html[data-theme=dark] .clients__mark--sd { --cl-src: url("/img/logo-sd-dark.5d259efb05.webp") }

/* Nothing about the STRIP steps any more. v82 stepped the top padding where the
   SITE steps, 84 / 72 / 56; v83 has no top padding to step. The card is a clamp
   and needs no breakpoint, the band is the section's own width, the tick is
   already one run, and the lift solves itself out of whatever the padding is.
   What is left in here is the PILL alone: its inset, which takes the phone
   gutter the .container takes at the same width, and its size, which steps once
   the way every other phone control on this page does. */
@media (max-width: 767px) {
  .section.clients { --cl-pill-x: 20px; --cl-pill-h: 34px }
  /* THE PHONE PILL IS THE SAME PILL, in the same corner, out of the same glass;
     only its size steps, the way every phone control on this page does. v83 had
     it dropped to the band's foot with the blur off, because the nav's phone
     fallback is 96% opaque and an opaque pill over a mark would erase the mark
     this strip exists to show. The owner's v84 order put it back in the corner
     and asked for glass you can see through, which answered the same worry a
     better way, and the fallback went with the drop; the phone pays for one
     34px-tall backdrop filter, which that round measured at 390 rather than
     assumed. v86 takes the same 4px top inset the desktop pill takes, so the
     34px pill's lower edge lands at 38 against the tallest mark's 44.48 and it
     now clears every mark at 390 rather than grazing one. Nothing else about it
     steps: the inset is the band's gap at every width. */
  .clients__head {
    padding: 0 15px 0 11px;
    font-size: 13px;
    gap: 8px;
  }
  .clients__plus { width: 16px; height: 16px }
  .clients__plus::before { left: 7px; top: 4px; height: 8px }
  .clients__plus::after { left: 4px; top: 7px; width: 8px }
}

/* Reduced motion is not a slower version of this, it is none of it: the strip
   sits where the layout puts it, whole and still, the band does not tick, and
   the script returns before it writes anything. Same for a reader with no
   scripting at all, who would otherwise be left looking at the empty band the
   strip travels through. */
@media (prefers-reduced-motion: reduce) {
  .clients__stage { translate: none; scale: none }
  .clients__row { animation: none }
  .clients__card { animation: none }
}
@media (scripting: none) {
  .clients__stage { translate: none; scale: none }
}

/* ============================================================
   v83. THE BOTTOM EDGE, THE FULL WIDTH PASS, AND THE REVIEWS.
   Appended last so these rules win ties and nothing above them has to
   be reordered. Three owner asks live here; the clients strip's own
   three live in the block above, where that strip has always lived.
   No em dashes. British spelling in comments.
   ============================================================ */

/* ------------------------------------------------------------
   1. THE BOTTOM OF THE PAGE GETS THE TOP'S DEPTH, AT HALF (owner, v83:
   "add the same depth effect on the top side of the side to be also on
   the bottom of the site, but the bottm effect should be only 50% of
   the affected area of the top side").

   RECON FIRST. What the owner calls the depth effect at the top is the
   v71 hero ink card: a rounded panel inset from the page on all four
   edges, so the paper shows through as a frame around it, with a one
   pixel --line ring keeping its edge present when the panel and the
   page fall to the same value. Its numbers are #home's own, and they
   are the only place they are written: --card-x 6px, --card-r 25px on
   desktop, 2px and 20px from 920 down.

   THE MIRROR IS THE FOOTER, which is the page's last edge, and it is
   HALF: 3px of frame against the hero card's 6, a 12.5px radius against
   its 25, and the same one pixel ring. Half is read as half the reach,
   which is what the owner asked for - the effect, at half the area it
   covers at the top. The two numbers are derived from #home's in the
   sheet rather than typed twice, so a future round that moves the hero
   card's frame moves this one with it and can never leave the two
   halves disagreeing.

   The footer's own layout is untouched: this changes the box the footer
   sits in, not one padding, column or rule inside it. The ring is an
   overlay rather than a border for the same reason the hero card's is,
   so no box in the footer moves by a pixel.
   ------------------------------------------------------------ */
.footer {
  position: relative;
  /* EXACTLY HALF of #home's --card-x 6px and --card-r 25px. They cannot be
     read from here and no calc can save that: a custom property does not
     escape the subtree it is declared on, and #home's are scoped to #home
     because the v71 block deliberately reaches nothing outside the hero. So
     they are written here as the halves they are, and a suite pin reads BOTH
     declarations out of the sheet and checks the halving at both breakpoints,
     which is the only place the two can be kept honest. */
  --dep-x: 3px;
  --dep-r: 12.5px;
  margin: 0 var(--dep-x) var(--dep-x);
  border-radius: var(--dep-r);
}
.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--line);
  pointer-events: none;
}
/* #home's variables are scoped to #home, so the fallbacks above are what
   this actually reads. They are restated at the same breakpoint the hero
   card steps at, and halved the same way. */
@media (max-width: 920px) {
  .footer { --dep-x: 1px; --dep-r: 10px }
}

/* THE OTHER HALF OF THE GLUE, and then v84's correction to it. What stood
   between the band and the chip ticker was the SHOWCASE's 60px top padding, the
   only section padding on this page ever set by hand rather than taken from
   .section; v83 took it to zero and left the marquee's own 8px margin, which
   put the ticker 8px under the band and 106px over the heading.

   THE OWNER ASKED FOR THE MIDDLE (v84: "Fix the spcaing of the Education
   Website, Business Website etc slider to its perfectly on the middle between
   the moving logos and the Getting a website, without the worry text header").
   So the ticker's two gaps are now ONE number used twice, and equal by
   construction rather than by arithmetic that could drift:

     --sc-gap   the space above the ticker and the space below it
     --sc-lead  the heading's own margin-top, 14px, which collapses out of
                the next section and lands inside the gap below

   above = --sc-gap. below = (--sc-gap - --sc-lead) + --sc-lead = --sc-gap.
   57 is half of the 114 the two gaps measured between them at v83 (8 above,
   40 + 52 + 14 below), so the block of page from the band's foot to the
   heading's cap is exactly as tall as it was and only the ticker moved inside
   it. One number at every width, which also takes out a cascade accident: the
   showcase's own 40px bottom padding was being overridden to 72 under 1024 and
   to 56 under 768 by .section's media rules, so the gap below the ticker got
   BIGGER on a tablet than on a desktop. It does not any more.

   The marquee's 8px margin is folded into the gap rather than left on top of
   it, because a component margin inside a gap that has to be symmetrical is a
   second opinion about the same space. */
.section.showcase {
  --sc-gap: 57px;
  --sc-lead: 14px;
  padding-top: var(--sc-gap);
  padding-bottom: calc(var(--sc-gap) - var(--sc-lead));
}
.showcase .marquee { margin-top: 0 }
.showcase + .section { padding-top: 0 }

/* ------------------------------------------------------------
   2. THE FULL WIDTH PASS (owner, v83: "also make the full site full
   wirdth but making sure only the parts that will look good not all
   elements, if all the elements look good then all (plan this first
   properly)").

   THE PLAN, which is in the round's report as a table, comes down to
   one line: BANDS BLEED, GRIDS WIDEN, PROSE DOES NOT. A column of body
   copy has a readable measure and 1200 already put the widest one on
   the page - the FAQ answers at 658px and the bento's paragraphs at
   720px - at the top of it. Widening those would cost the reader the
   line they are on. A grid of cards, a comparison table, a process
   diagram and a deck of testimonials have no measure to lose and were
   all reading small on a 1920 screen.

   THE WIDE NUMBER IS THE REFERENCE'S OWN 1520px, measured off the same
   page the strip above was measured off, so the site has one wide
   container rather than a guess. Sections opt IN by carrying the class
   in the markup, which is greppable, reversible and impossible to
   apply by accident; the sections that stay at 1200 carry nothing and
   are unchanged byte for byte.

   THE TEXT INSIDE A WIDENED SECTION KEEPS ITS MEASURE. Three columns
   of prose sit in widened sections and would have grown with them, so
   each is capped where it already sat: the section subheads and the
   bento's paragraphs at the 720px they measure today.
   ------------------------------------------------------------ */
/* AND THE GUTTER OPENS WITH IT. The page's 24px side padding was drawn for a
   1200 container, which never came within a hundred pixels of the viewport's
   edge; a 1520 one does, and a card sitting 24px off the screen edge on a
   1440 desktop reads cheap rather than wide. So the wide container's gutter
   ramps from that same 24px at 1200 - where it is byte-identical to what the
   page has always had, which is what makes this safe at every width below it -
   to 64px at 1600 and no further. Nothing at or under 1200 moves by a pixel. */
:root { --maxw-wide: 1520px }
.container--wide { max-width: var(--maxw-wide) }
/* Guarded by the query rather than by the clamp's own floor, so that below
   1200 this rule does not exist at all: the phone's own 20px and 18px gutters
   are set on .container at the same specificity and later in the cascade would
   have lost to it. */
@media (min-width: 1201px) {
  .container--wide {
    padding-left: clamp(24px, calc(24px + (100vw - 1200px) * .1), 64px);
    padding-right: clamp(24px, calc(24px + (100vw - 1200px) * .1), 64px);
  }
}

/* the measure caps, at the widths these already had at 1200 */
.container--wide .section__sub,
.container--wide .feat-sub { max-width: 720px }
.container--wide .bento__panel p { max-width: 46ch }

/* THE HERO is the one PARTIAL on the table. Its ink card has always been
   full bleed, so the top of the site was never boxed; what was boxed was
   the copy, which left the headline in the left third of its own panel
   at 1920 with the mark stranded in the middle. The container widens and
   the COPY COLUMN DOES NOT: it is capped where it already measured, so
   the headline wraps exactly as it wraps today and the v49 word reveal
   and v71 stack see the same box they have always seen. The width all
   goes to the visual column, which is what puts the mark back on the
   card's own right side. */
.hero > .container--wide.hero__grid { grid-template-columns: minmax(0, 560px) 1fr }
@media (max-width: 920px) {
  .hero > .container--wide.hero__grid { grid-template-columns: 1fr }
}

/* v84 CENTRED THE PAIR (owner: "move the left hero texts and elements more to
   the right it hugging to much to the left also move the logo on the right a
   big more right, just center the whole thing while keeping the spacing on the
   middle 5% smaller"). v83 widened the container and left the copy pinned to
   its left edge, so all of the new width fell on the right of the mark: at 1920
   the copy started at the content edge and 108px of paper sat past the mark.

   THE TWO BOXES WERE THE SAME BOX. The copy's cap is 560, and the mark is
   .lqlogo, which is max-width 560 and centred in whatever column it is given -
   so above the width at which its column first reaches 560 the mark is exactly
   560 wide and nothing in this block changes its size, then or now. v84 made
   the second track that same 560 and centred the pair, which moved both boxes
   right and moved no pixel of art by a pixel of size.

   THE MIDDLE WAS THE OWNER'S 5%. With both boxes at their 560, the free space
   the row had to spend was 100% - 1120px, and v83 spent it as a middle gap that
   ran half of it plus the grid's own 56, and a right margin that ran half of it
   minus the same 56. So the middle v83 produced was (100% - 1120px + 56px) / 2
   - 164px at 1920, 140 at 1440, 76 at 1280 - and v84's gap was that, times the
   owner's 0.95. What was left over then split evenly on the two sides, which is
   what centring means. That expression is still here, as --hero-mid-v84, because
   v85's own factor is measured against what v84 drew.

   THE GUARD IS DERIVED, NOT PICKED. Below 1230px the wide container is narrow
   enough that the mark's column has not yet reached 560, so there is no slack
   to centre and the two tracks could not both be 560 without overflowing. That
   width is where 0.8 * viewport + 192 - the wide container's content box, given
   its 24-to-64 gutter ramp - first reaches 560 + 56 + 560. 1200 and everything
   below it is untouched, byte for byte, and so is everything up to 1229.

   v84 PUT THE LAW ON THE BOXES AND FLAGGED IT. v85 IS THE OWNER OVERRULING
   THAT ("also the right color did not move , it should move so it has the same
   padding as the left side while keeping the distence bewteen [the copy] and
   the right logo", then minutes later "ok do one thing make the distence
   bewteen them closer by 10%"). "The right color" is the right COLUMN, the
   white mark.

   WHERE THE SLACK COMES FROM, measured rather than guessed. The copy's ink is
   flush with the left of its 560. The mark is a logo and carries its own
   clearspace inside its 560, so its drawn art does not reach either edge of
   its box. Read off the fallback drawing itself, which is right there in the
   markup: viewBox="-26 -26 252 143.2", and the two paths run from x 1.7 to
   x 198.6, so of the box's 252 units the ink has 27.7 of air on its left and
   27.4 on its right. At a 560px box that is 61.56px and 60.89px, with 437.56px
   of ink between them. Centring the two BOXES therefore leaves the ink's right
   gutter exactly one right-clearspace wider than the copy's left one, at every
   width: measured at 1280, 1440 and 1920 on the shipped v84, the gap between
   the two gutters was 60.89, 60.90 and 60.91. One number, one cause.

   SO THE GRID IS GIVEN THE INK, NOT THE BOX. The second track is sized to the
   drawn art and the visual column is pulled back out over it by exactly the
   clearspace it carries on each side, so the element still renders its 560 and
   the mark's art does not move by a pixel of size, while what the grid centres
   is the ink. `justify-content: center` then means what it says: the thing you
   can see is centred, so the copy's left gutter and the ink's right gutter come
   out equal by construction rather than by a per-width nudge.

   AND THE MIDDLE IS THE OWNER'S 10%, ON WHAT HE WAS LOOKING AT. The distance he
   means is the one he can see: the copy column's right edge to the mark's ink.
   v84 rendered that as its column gap plus the mark's left clearspace, so the
   sheet states that number first, as --hero-mid-v84, and then states this
   round's factor on it. Because the second track now starts at the ink, the
   column gap IS that rendered distance, which is why one factor is all this
   takes. Measured before and after: 133.74 -> 120.38 at 1280, 194.54 -> 175.10
   at 1440, 217.36 -> 195.61 at 1920, every one of them 90.0% of what v84 drew,
   and the same three numbers again with the Bangla dictionary on, because the
   law is on the copy COLUMN and the mark's ink rather than on any string.

   v86 WIDENS THAT SAME DISTANCE BY 10% ("ok make the gap on the center more by
   10 % now"), which is one more factor on the same expression and nothing else,
   because the gap is still the rendered distance. AND THE PRODUCT IS 0.99, NOT
   1: the owner walked the middle down a tenth in v85 and back up a tenth in
   v86, and a tenth of the smaller number is smaller than a tenth of the larger,
   so .9 * 1.1 = .99 and the middle lands a hundredth under what v84 drew rather
   than back on it. That is the honest arithmetic of what he asked for twice, so
   both factors stay named after the instruction that produced them and nothing
   here is quietly rounded to 1. Measured across the change: 120.38 -> 132.41 at
   1280, 175.10 -> 192.61 at 1440, 195.61 -> 215.18 at 1920, every one of them
   110.0% of what v85 drew and 99.0% of v84's.

   THE GUTTERS LOOK AFTER THEMSELVES, which is the point of having put the law
   on the ink. The tracks are the copy's 560 and the mark's ink, the gap between
   them just grew, and justify-content splits what is left evenly, so the two
   outer gutters stay equal to each other and simply tighten: 81.03 -> 75.02 at
   1280, 133.67 -> 124.92 at 1440, 363.42 -> 353.64 at 1920. Nothing had to be
   re-solved for it.

   WHAT IT COSTS, and it is written down rather than hidden. v84's guard was
   placed so the step across it was 1.4px. This law moves the composition, so it
   cannot also be continuous there: measured across it, the copy's left gutter
   goes from 26.89 at 1229 to 59.42 at 1230, a step of 32.53px, and the ink's
   right gutter from 87.69 to 59.45, a step of 28.24 the other way. v86's wider
   middle spends slack the gutters were holding, so both halves of that step are
   smaller than the 37.70 and 23.09 v85 measured. There is no
   guard position that removes it - the lowest one the wide container allows,
   1201, only brings it to 31 - because below the guard the copy hugs the
   container's padding and above it the pair is centred on ink. Only a window
   being dragged across that one width can show the step; on either side of it,
   at rest, is a composition in its own right, and the balance the owner asked
   for holds at every width from the guard up. */
@media (min-width: 1230px) {
  .hero > .container--wide.hero__grid {
    --hero-col: 560px;
    --hero-base: 56px;      /* .hero__grid's own gap, restated so --hero-mid can be solved from it */
    --hero-tighten: .95;    /* the owner's "middle 5% smaller", v84 */
    /* the mark's own drawing, in the fallback svg's own viewBox units */
    --mark-vb: 252;         /* viewBox="-26 -26 252 143.2" */
    --mark-clear-l: 27.7;   /* -26 to the ink's first x, 1.7 */
    --mark-clear-r: 27.4;   /* the ink's last x, 198.6, to 226 */
    --mark-air-l: calc(var(--hero-col) * var(--mark-clear-l) / var(--mark-vb));
    --mark-air-r: calc(var(--hero-col) * var(--mark-clear-r) / var(--mark-vb));
    --mark-ink: calc(var(--hero-col) - var(--mark-air-l) - var(--mark-air-r));
    --hero-closer: .9;      /* the owner's "closer by 10%", v85 */
    --hero-wider: 1.1;      /* the owner's "more by 10%", v86 */
    --hero-mid-v84: calc(var(--hero-tighten) * (100% - 2 * var(--hero-col) + var(--hero-base)) / 2 + var(--mark-air-l));
    --hero-mid: calc(var(--hero-wider) * var(--hero-closer) * var(--hero-mid-v84));
    grid-template-columns: minmax(0, var(--hero-col)) minmax(0, var(--mark-ink));
    justify-content: center;
    column-gap: var(--hero-mid);
  }
  /* the pull that keeps the art the size it has always been while the track
     holds only its ink: the margin box is the track, so the border box is the
     track plus both clearspaces, which is the 560 the mark has always had */
  .hero > .container--wide.hero__grid > .hero__visual {
    margin-left: calc(-1 * var(--mark-air-l));
    margin-right: calc(-1 * var(--mark-air-r));
  }
}

/* ------------------------------------------------------------
   3. THE REVIEWS, redressed with the reference's testimonial poise
   (owner, v83: "check image 3 take design inspiration from that and we
   word our review section so the scrolling effect is still present").

   THE ENGINE IS SACRED AND IS NOT TOUCHED. Every line of the v62
   carousel - the Framer pose model, the closed form springs, the ring
   order, the arrows, the wrap, the five second auto advance, its
   reduced motion behaviour and its idle gates - comes through this
   round byte for byte, and so does the v80 per card accent system. What
   changed is the skin the engine paints and the frame it paints in.

   THE SUMMARY IS DERIVED, NOT WRITTEN. The reference's tile leads with
   a rating and a count. Ours does too, and both numbers are read off
   the deck the engine actually built - every card's own rating, every
   card there is, including the ones the backend fed in - so the tile
   cannot say anything the store does not. The markup ships the honest
   answer for the cards written into the page, which is what a reader
   with no scripting sees, and the script replaces it with the live one.

   THE HORIZONTAL CLIP IS NOW EXPLICIT. The deck lays its cards out on
   one row and the ones off screen really are off screen, three viewport
   widths to the right. Until now the only thing keeping them out of the
   document's scroll width was the paint containment that comes free
   with content-visibility on this section, which is a side effect
   rather than a rule and would be gone the moment anything about that
   section's containment changed. It is a rule now.
   ------------------------------------------------------------ */
#reviews { overflow-x: clip }

/* the reference gives the tile about a third and the deck the rest. The deck's
   own cap moves with the column rather than staying at the 668 it was cut to
   for a 1200 container, because a deck floating in the middle of a column two
   hundred pixels wider than it reads as two sections rather than one. */
.container--wide .reviews__grid { grid-template-columns: minmax(320px, .78fr) 1.22fr; gap: 26px }
.container--wide .revstack { max-width: 800px }

/* THE TILE. Stars first, then the number, then what the number is of,
   then the sentence: the reference's own order, which reads top to
   bottom as one claim instead of two halves. */
.reviews__hero { padding: 36px }
.reviews__summary .reviews__stars { margin-bottom: 18px }
/* a star the real average has not earned. The tile shows the rating the store
   holds, so if that ever falls below five the row has to be able to say so. */
.reviews__stars .is-off { opacity: .26 }
.reviews__score { align-items: baseline; gap: 6px }
.reviews__score b { font-size: clamp(56px, 4.6vw, 68px); letter-spacing: -.035em }
.reviews__count {
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: #9a9aa6;
}
.reviews__score-note { margin-top: 16px; max-width: 260px; line-height: 1.55 }
.reviews__hero-foot h3 { font-size: 21px; letter-spacing: -.02em }
.reviews__hero-foot > p { margin-bottom: 22px }

/* THE CARD. Calmer at rest, exactly as the reference's are: the ring is
   the page's own hairline rather than a shadow, and the shadow arrives
   only on the card the deck is showing. The quote gets the leading a
   quote wants. */
.revstack .review {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.revstack .review.is-active { box-shadow: var(--shadow-lg) }
.revcard__body { padding: 22px 28px 28px; gap: 15px }
.revcard__body blockquote { font-size: 16.5px; line-height: 1.68 }
.revcard__shot { margin: 20px 20px 0 }

@media (max-width: 920px) {
  .container--wide .reviews__grid { grid-template-columns: 1fr }
  .reviews__hero { padding: 30px }
}
@media (max-width: 600px) {
  .reviews__hero { padding: 26px }
  .revcard__body { padding: 18px 20px 22px }
}

/* ============================================================
   v84. ONE EDGE FADE FOR BOTH MOVING STRIPS, AND THE BOTTOM OF THE
   VIEWPORT. Appended last so these rules win ties and nothing above
   them has to be reordered. Only two of the round's five corrections
   are here. The other three are edits inside the blocks that already
   own their surfaces - the pill in the clients block, and the ticker's
   gaps and the hero's two tracks in the v83 block - because a
   correction to a rule belongs where that rule is explained, and an
   override appended down here would leave the sheet saying two things.
   The band's own width moved for the fade and moved in the clients
   block for the same reason.
   No em dashes. British spelling in comments.
   ============================================================ */

/* ------------------------------------------------------------
   1. THE EDGE FADE, DECLARED ONCE AND WORN TWICE (owner, v84: "also add
   the same fade effect on both sides exactly same like the bottom
   moving elemnet on the image2").

   RECON, on the strip the owner pointed at. The chip ticker's fade is a
   MASK, not an overlay, and it is one line in the head of this sheet:

     .marquee { mask-image: linear-gradient(90deg, transparent,
                            #000 7%, #000 93%, transparent) }

   Four stops, no theme variant, and no second recipe anywhere: one mask
   serves light and dark, because a mask carries no colour and dissolves
   whatever paper it is over. .marquee is a direct child of its section
   and its section has no container, so that 7% is 7% of the viewport at
   every width - 90px at 1280, 100 at 1440, 134 at 1920.

   ONE SOURCE OF TRUTH. The gradient is lifted into --edge-fade and both
   strips read it, so the two fades cannot drift apart by an edit: there
   is one gradient on this page and two elements wearing it. The
   .marquee half is a restatement of what the head already says, value
   for value, so the ticker renders byte for byte what it rendered
   before and the ownership of the number moves without the number
   moving.

   WHY THE BAND CAN WEAR IT AT ALL is written against .clients__band
   above: a mask is painted in its element's own coordinates and is then
   carried by the stage's scale, so it only lands on the ticker's stops
   if the band is exactly the section's width. Making it so is what
   retired v82's over-width there.
   ------------------------------------------------------------ */
:root { --edge-fade: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent) }
.marquee,
.clients__band {
  -webkit-mask-image: var(--edge-fade);
  mask-image: var(--edge-fade);
}

/* ------------------------------------------------------------
   2. THE PAGE'S TOP BLUR, MIRRORED AT THE BOTTOM AT HALF ITS REACH
   (owner, v84, on a screenshot of the page top: "also where is the blur
   like this on the bottom ?" - and, in v83, "the bottm effect should be
   only 50% of the affected area of the top side").

   RECON FIRST. What dissolves the page under the header is .topblur: a
   fixed band across the top of the VIEWPORT, 150px tall, z-index 95,
   pointer-events none, holding three empty spans. Each span carries a
   backdrop-filter and a mask that decides how far down that filter
   reaches, so the three together make a blur that is strong at the very
   top and gone by the bottom of the band rather than a single hard
   edged frost:

     span 1   blur(2px)    solid to 55%, gone by 92%
     span 2   blur(6px)    solid to 30%, gone by 60%
     span 3   blur(14px)   solid to 14%, gone by 36%

   It sits BELOW the header (95 against the nav's 100), so the nav is
   never blurred by it, and it is display:none at 640 and under, where
   three stacked backdrop filters are the most expensive thing a phone
   could be asked to composite.

   THE MIRROR IS THE SAME BAND, UPSIDE DOWN, AT HALF THE REACH. Half is
   read as half the affected area, which is the owner's own words, so
   the three blur radii and the three masks are untouched and only the
   height is halved: the same dissolve, over half the page it covers at
   the top. The masks run `to top` instead of `to bottom`, which is the
   only other difference between the two bands. --blur-reach holds the
   150 for both, restated onto .topblur so the halving is structural and
   a round that changes the top's reach cannot leave the bottom's
   behind.

   WHAT LIVES AT THE BOTTOM EDGE, and why the mirror is at 94. This page
   parks three fixed things down there: the phone action bar at z-index
   95, the copy-link toast the blog pages raise at 200, and the review
   lightbox at 220. One below the top's own 95 puts the mirror under all
   three and over every scrap of page content, which tops out at 6. So
   the phone CTA bar can never be blurred by it, whatever a future round
   does to the DOM order.

   AND THE PHONE INHERITS THE TOP'S OWN GATE. The mirror is off at 640
   and under for the reason the top is: three backdrop filters is a
   phone's whole compositing budget. It also happens to be the honest
   answer to what the owner asked for - a bottom that matches the top -
   because at those widths the top has no blur to match, and the bottom
   edge already wears the house's frosted material in the action bar.

   BUTTER, MEASURED RATHER THAN ASSERTED. Nothing here is scripted,
   nothing animates, and nothing is read per frame: two fixed bands, six
   composited layers between them, and no style write anywhere on the
   page that touches either. AT REST the cost is exactly zero - 0 style
   recalcs, 0 layouts and 0 long tasks over twelve seconds parked at the
   top and twelve more parked past the strip, at 4x CPU, which is the
   same 0/0/0 the sheet has always measured. ON A SCROLL it is what
   another 75px of backdrop filter costs, and in this headless rig -
   software rasterised, no GPU, three full passes of the page a frame at
   a time, which is the harshest case there is - that is a sixth of the
   frame rate: the same rig measures 19.9fps on the shipped v83, 20.6
   with this band hidden and 17.3 with it, at the same 50ms median. The
   whole of that difference is this band; every other change in the round
   is free. At 640 and under the band is not there and the phone holds a
   clean 60fps with nothing dropped.
   ------------------------------------------------------------ */
:root { --blur-reach: 150px }
.topblur { height: var(--blur-reach) }
.botblur {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--blur-reach) * .5);
  z-index: 94;
  pointer-events: none;
}
.botblur > span { position: absolute; inset: 0; display: block }
.botblur > span:nth-child(1) {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 92%);
  mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 92%);
}
.botblur > span:nth-child(2) {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 60%);
  mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 60%);
}
.botblur > span:nth-child(3) {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 14%, transparent 36%);
  mask-image: linear-gradient(to top, #000 0%, #000 14%, transparent 36%);
}
@media (max-width: 640px) {
  .botblur { display: none }
}

/* ------------------------------------------------------------
   2b. AND THE MIRROR STANDS DOWN WHEN THE FOOTER ARRIVES (owner,
   v85, on one dark screenshot of the page scrolled to its absolute
   end: "make sure the bottom blur stops exactly before the footer
   starts").

   WHAT WENT WRONG, AND IT IS STRUCTURAL. The band is fixed to the
   foot of the VIEWPORT, so page content dissolves as it travels
   under it and comes out crisp on the other side. That holds
   everywhere except the one place the page runs out of scroll.
   The copyright row is the last ink on the page and it is 43.4
   tall, so at the last resting position it lands in the same place
   whatever is stacked above it: measured at 1440 x 900 with the
   page settled, it runs 825.7 to 869.1 in English and 825.6 to
   869.1 in Bangla, where the footer is 42px taller, against a band
   that runs 825 to 900. The row is inside the band and there is no
   scroll left to carry it out, so it rests blurred for as long as
   the reader stays there. The masks put the frost's real reach at
   the bottom 69px of the band, y 831 upwards, so it is the row's
   ink rather than its box that is caught. The top band never has
   this problem because content can always keep travelling up past
   it; the bottom band meets a hard stop. The same holds within a
   pixel at 1280 and 1920, where the row runs 826.0 to 869.4 and
   825.3 to 868.7 in both languages alike: the band is the same 75
   at every width, and the end of the page is the end of the page.

   SO THE BAND YIELDS. One class on the band, one composited opacity
   transition here, and an IntersectionObserver that fires on a
   crossing and never per frame.

   WHY THE OPACITY IS ON THE SPANS AND NOT ON THE BAND ITSELF. An
   element with opacity below 1 is a Backdrop Root, so fading the
   PARENT of three backdrop filters hands them an empty backdrop and
   the frost is gone on the first frame instead of dissolving.
   Measured on the ink under the band at 1440, as mean neighbour
   contrast, where 0.302 is the band at full strength and 0.796 is
   the band removed outright:

     opacity on .botblur   1 -> 0.302,  0.99 -> 0.796  (already gone)
     opacity on the spans  1 -> 0.302,  0.99 -> 0.298,  0.75 -> 0.334,
                           0.5 -> 0.412,  0.25 -> 0.553,  0 -> 0.796

   The spans dissolve; the parent snaps. So the class goes on the
   band, where a reader of the markup expects to find it, and the
   opacity goes on the three layers, where it works.

   THE TRIGGER LINE IS --blur-reach ABOVE THE FOOT OF THE VIEWPORT,
   which is exactly twice the band's own height. The observer is
   handed that reach as a negative bottom rootMargin, so it crosses
   while the footer's top edge is still 75px clear of the band's top
   edge and the fade has the band's own height of travel to finish
   in. The number is read off the same custom property the height is
   derived from, so a round that changes the reach moves the trigger
   with it. The real margin is wider than that: the footer's first
   72px are its own padding, so the first footer INK is 147px of
   travel away, not 75.

   THE FADE IS THE HOUSE'S QUICKEST STANDALONE OPACITY FADE, .3s on
   --ease, and --ease is a quintic ease out: three quarters of the
   fade is spent in the first quarter of the duration, so the frost
   is 76% gone 75ms in and 96% gone by 150ms. Under reduced motion
   the sheet's own global rule already collapses every duration to
   .001ms, which turns this into the instant toggle it should be
   there, and nothing new had to be written for it.

   AND NOTHING ELSE MOVES. The three radii, the three masks, the
   height, the z-index, the pointer-events and the 640 gate are the
   v84 band byte for byte, which is why this is a second rule rather
   than an edit to the first. The only property this round adds to
   the surface is opacity, which is composited, so a crossing costs
   one class write and no layout at all.
   ------------------------------------------------------------ */
.botblur > span {
  opacity: 1;
  transition: opacity .3s var(--ease);
}
.botblur.is-off > span { opacity: 0 }

/* ------------------------------------------------------------
   v92 - THE SERVICE AND ABOUT PAGES
   ------------------------------------------------------------
   /web-development-company-dhaka, /web-design-company-dhaka and
   /about, rendered by lib/service-page.js on the SAME chrome the
   blog and the portfolio use. Everything above <main> and below
   </main> is already drawn by rules further up this sheet: the
   nav, the burger, the footer, the phone action bar, the buttons,
   the .eyebrow pill, the .wk-card grid and the .ins-rise entrance
   are all REUSED, never copied. What follows is only what the
   system did not already have.

   APPENDED, which is the v71 discipline: nothing above this line
   moves, so every measurement the suites hold over the homepage,
   the blog and the portfolio still stands where it stood.

   THE SHAPE, and it is three widths rather than one. A centred
   opener, then a CENTRED 820px column that every section sits in;
   inside it, prose runs to 720 (about 74 characters at 16.5px,
   the top of the comfortable reading band) and the blocks that
   are not prose - the price table, the inclusions ledger and the
   visible Q&A - take the whole 820. The work strip alone escapes
   both, back out to the container's own 1152, because the work is
   the one thing on the page that should be the widest thing on
   it. Left flush in a 1200 container the reading column stranded
   400px of dead space down the right of every one of these pages,
   which is a composition nobody chose.

   ONE box on the whole page, the closing panel, and it is the
   only place the page spends colour, alongside the one band down
   the price table's last column that says which prices are ours.
   ------------------------------------------------------------ */
.sv-main{
  /* the hairlines, built as a WASH exactly the way .wk-main builds --wk-rule:
     one number that reads the same weight on either ground, instead of a light
     grey stranded on the dark theme. var(--line) is drawn for panel edges and
     disappears outright under the page's own dot texture at table row height. */
  --sv-rule:rgba(14,14,20,.14);
  --sv-rule-soft:rgba(14,14,20,.09);
  padding-bottom:104px;
}
html[data-theme=dark] .sv-main{--sv-rule:rgba(255,255,255,.17);--sv-rule-soft:rgba(255,255,255,.10)}

/* ---- the opener ---- */
.sv-hero{padding:130px 0 4px;text-align:center}
.sv-hero__in{max-width:820px;margin:0 auto}
.sv-hero__eyebrow{margin-bottom:16px}
.sv-hero__h1{margin:0;font-size:clamp(31px,5vw,50px);line-height:1.07;letter-spacing:-.034em}
/* The lede is the page's ANSWER, not a subtitle, so it is set at reading size in
   --body rather than at caption size in --muted: on a page built out of
   questions the first sentence is the thing worth reading. */
.sv-hero__lede{margin:20px auto 0;max-width:660px;font-size:18px;line-height:1.62;color:var(--body);text-wrap:pretty}
.sv-hero__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
html[data-theme=dark] .sv-hero__eyebrow{color:#ff9242}

/* ---- the measure ---- */
.sv-body{padding-top:8px}
.sv-sec{max-width:820px;margin:76px auto 0}
.sv-sec__h{margin:0;font-size:clamp(23px,2.6vw,30px);line-height:1.2;letter-spacing:-.026em;color:var(--ink);text-wrap:balance}
/* the answer sits one weight and one shade above the prose beneath it */
.sv-sec__a{margin:14px 0 0;max-width:720px;font-size:18px;font-weight:500;line-height:1.58;color:var(--ink)}
.sv-p{margin:16px 0 0;max-width:720px;font-size:16.5px;line-height:1.7;color:var(--body)}
/* scoped to the prose on purpose: an unscoped .sv-body a would reach into the
   work strip and paint an orange underline through the project cards */
.sv-p a,.sv-sec__a a{color:var(--orange-700);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:rgba(250,100,31,.45);transition:text-decoration-color .16s var(--ease)}
.sv-p a:hover,.sv-sec__a a:hover{text-decoration-color:var(--orange)}
/* --orange-700 is drawn for a white ground and falls to 2.4:1 on the dark one,
   so the dark theme takes the same lighter tint the article links already take */
html[data-theme=dark] .sv-p a,html[data-theme=dark] .sv-sec__a a{color:#ff9242}

/* ---- the fact table ----
   The one block on these pages a machine should be able to quote back, so it is
   a real <table> with a real header row and a caption rather than a grid of
   divs. On a narrow phone it scrolls INSIDE its own frame; the page itself never
   moves sideways. */
.sv-tablewrap{margin-top:22px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.sv-table{width:100%;border-collapse:collapse;font-size:16px}
.sv-table caption{caption-side:top;text-align:left;padding:0 0 10px;font-size:13px;line-height:1.5;color:var(--muted)}
.sv-table th,.sv-table td{padding:15px 18px;text-align:left;vertical-align:baseline;border-bottom:1px solid var(--sv-rule-soft)}
.sv-table thead th{padding-top:0;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-bottom-color:var(--sv-rule)}
.sv-table tbody th{font-weight:600;color:var(--ink)}
.sv-table td{color:var(--body)}
.sv-table tr>:first-child{padding-left:0}
.sv-table tr>:last-child{text-align:right}
.sv-table tbody tr:last-child>*{border-bottom:0}
/* OUR COLUMN IS THE ARGUMENT the table exists to make, so it is the one thing on
   the page drawn as an object: a band in the eyebrow pill's own tint, rounded top
   and bottom, with the figures in the accent on top of it. Warm cream in light, a
   deep ember in dark, no second value invented for either, and the same material
   the closing panel is made of so the page speaks one language. */
.sv-table thead th:last-child,.sv-table tbody td:last-child{background:var(--orange-tint)}
/* THE HEADER ON THE BAND TAKES THE BAND'S OWN HUE. --muted is drawn for the page
   ground and measures 4.19:1 on the tint, which is under AA and worst of all on
   the smallest type on the page. Grey on a coloured surface is the wrong answer
   anyway: the label sits on the studio's own colour, so it wears it. 4.59:1 in
   light, 7.99:1 on the dark ember. */
.sv-table thead th:last-child{padding-top:10px;color:var(--orange-700);border-top-left-radius:14px;border-top-right-radius:14px}
html[data-theme=dark] .sv-table thead th:last-child{color:#ff9242}
.sv-table tbody tr:last-child td:last-child{border-bottom-left-radius:14px;border-bottom-right-radius:14px}
.sv-table__ours{color:var(--orange-700);font-weight:700;white-space:nowrap}
html[data-theme=dark] .sv-table__ours{color:#ff9242}

/* ---- the inclusions ledger ----
   Eight facts in two columns under a hairline each. Eight CARDS would be the
   homepage services bento drawn a second time, on a page whose job is to answer
   a question, and the answer does not need eight boxes to be read. */
.sv-incl{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
.sv-incl li{display:flex;flex-direction:column;gap:3px;padding:15px 0;border-top:1px solid var(--sv-rule-soft)}
.sv-incl b{font-size:16px;font-weight:600;letter-spacing:-.008em;color:var(--ink)}
.sv-incl span{font-size:15px;line-height:1.55;color:var(--muted)}

/* ---- the numbered steps ----
   Numbered because they genuinely ARE a sequence: the price before the work, the
   progress during it, the dashboard after it. The numeral wears the eyebrow
   pill's own tint, so the page spends no second colour on it. */
.sv-steps{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:20px;max-width:720px}
.sv-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:16px;row-gap:3px}
.sv-steps__n{grid-row:1/span 2;align-self:start;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--orange-tint);color:var(--orange-700);font-size:13.5px;font-weight:700}
.sv-steps b{font-size:16.5px;font-weight:600;letter-spacing:-.008em;color:var(--ink)}
.sv-steps li>span:not(.sv-steps__n){font-size:16px;line-height:1.6;color:var(--body)}
html[data-theme=dark] .sv-steps__n{color:#ff9242}

/* ---- the checklist ----
   The bullet is the .eyebrow pill's own dot, same size and same halo, so the
   page has one bullet vocabulary rather than two. */
.sv-check{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px;max-width:720px}
.sv-check li{position:relative;padding-left:26px;font-size:16.5px;line-height:1.6;color:var(--body)}
.sv-check li:before{content:"";position:absolute;left:5px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px #fa641f2e}

/* ---- the visible Q&A ----
   Visible, never an accordion: an answer a reader has to click for is an answer
   a reader does not read, and the FAQPage schema beside it is only honest while
   the text is on the page. */
.sv-qa{margin-top:24px;border-bottom:1px solid var(--sv-rule-soft)}
.sv-qa__i{padding:22px 0;border-top:1px solid var(--sv-rule-soft)}
/* THE QUESTION IS A HEADING, so it is sized like one. At 17px over a 16px answer
   it was a 1.06 step and read as slightly bolder body; the ladder now runs 50 for
   the page, 30 for a section and 20 for a question, which is 1.67, 1.5 and 1.25 -
   an obvious step at every level, with the weight and the ink doing their work on
   top of the size rather than instead of it. */
.sv-qa__i h3{margin:0 0 8px;font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.018em;color:var(--ink)}
.sv-qa__i p{margin:0;font-size:16px;line-height:1.65;color:var(--body)}

/* ---- the work strip ----
   .wk-main is where the --wk-* tokens are declared, so the wrapper wears it and
   this rule takes back the page padding that class also carries. Nothing else
   about the cards changes: they are the listing's own component, drawn by the
   listing's own code. */
/* THE ONE THING WIDER THAN THE COLUMN. The reading column is 820; the strip goes
   back out to the container's own width, capped at the 1152 the listing and the
   footer already line up on, by pulling its inline margins out by exactly half
   the difference. min(0px, ...) is the floor: below about 930px of viewport the
   container is already narrower than the column, and without the clamp the same
   arithmetic would turn positive and INSET the strip instead. */
.sv-recent{margin-top:26px;padding-bottom:0;margin-inline:min(0px, calc((820px - min(1152px, 100vw - 48px)) / 2))}
/* THREE EQUAL CARDS, one row. The listing promotes an odd third card to the full
   width so its grid is never left with a hole, which is right for a portfolio and
   wrong at the foot of a page that is mostly reading: there it becomes a hero
   card the reader did not ask for. These three stay equal, step to two, then
   stack. The 767 rule is written out even though the base sheet already stacks
   .wk-grid there, because THIS selector is a class more specific and would
   otherwise hold two columns onto a 390px screen. */
.sv-recent .wk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 1023px){.sv-recent .wk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 767px){.sv-recent .wk-grid{grid-template-columns:1fr}}
/* THE CAPTION TAKES TWO LINES ON THE STRIP, and it has to. The listing sets the
   name and the category on ONE row and lets the category shrink under pressure;
   at the listing's own 536px picture there is room for both, and at the strip's
   341px there is not: "NearKorea Education" beside "Consultancy" measures 303px
   into 293px of caption, so the category ellipsed. An ellipsis in a label is a
   label that failed, and shrinking the type to fit would have made the strip's
   captions a different size from the listing's for no reason a reader could see.
   So the row becomes two rows here, and only here. The NAME keeps its own size,
   its own 24px mask and its own roll: nothing about the hover changes, because
   .wk-card__name is still a block of exactly the height the roll travels. */
.sv-recent .wk-card__foot{display:block;height:auto}
.sv-recent .wk-card__cat{display:block;margin-top:3px;font-size:13.5px;line-height:18px;color:var(--muted)}
.sv-more{margin:20px 0 0}
.sv-more a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:16px;font-weight:600;color:var(--orange-700);text-decoration:none}
.sv-more a .ic{width:17px;height:17px;transition:transform .3s var(--ease)}
.sv-more a .ic svg{width:100%;height:100%;display:block}
.sv-more a:hover .ic{transform:translateX(4px)}
html[data-theme=dark] .sv-more a{color:#ff9242}

/* ---- the closing panel ----
   The page's one box and its one piece of colour. var(--orange-tint) is the
   token the .eyebrow pill already wears: warm cream on the light theme, a deep
   ember on the dark one, with no second value invented for either. Background
   only, no border and no shadow, so the elevation is declared exactly once. */
.sv-close{max-width:820px;margin:88px auto 0;padding:52px 32px;background:var(--orange-tint);border-radius:var(--radius-xl);text-align:center}
.sv-close__h{margin:0;font-size:clamp(24px,2.8vw,32px);line-height:1.16;letter-spacing:-.028em;color:var(--ink);text-wrap:balance}
.sv-close__p{margin:14px auto 0;max-width:520px;font-size:16.5px;line-height:1.6;color:var(--body)}
.sv-close__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
/* the studio's three facts, the same three the footer prints, under a rule tinted
   from the panel's own hue rather than the page's grey line */
.sv-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:0 30px;margin-top:34px;padding-top:24px;border-top:1px solid rgba(250,100,31,.22)}
/* The address is three times the length of the other two, so left to wrap on its
   own it took the phone with it and left the inbox stranded alone on a second
   line. It takes the first line outright; the line and the inbox pair up under
   it, which is a 1 over 2 the eye reads as a decision rather than a wrap. */
.sv-facts>.sv-fact:first-child{flex:0 0 100%;justify-content:center}
.sv-fact{display:inline-flex;align-items:flex-start;gap:8px;min-height:44px;margin:0;font-size:14.5px;line-height:1.45;color:var(--body);text-decoration:none;transition:color .16s var(--ease)}
.sv-fact>.ic{height:1.65em;align-items:center}
.sv-fact svg{color:var(--orange)}
a.sv-fact:hover{color:var(--ink)}

@media (max-width: 767px){
  .sv-main{padding-bottom:84px}
  .sv-hero{padding:104px 0 0}
  .sv-hero__lede{font-size:16.5px}
  .sv-hero__cta{gap:10px;margin-top:24px}
  /* full width on a phone: two pill buttons side by side at 390 leave neither of
     them room for its own label */
  .sv-hero__cta .btn,.sv-close__cta .btn{flex:1 1 100%}
  .sv-sec{margin-top:52px}
  .sv-sec__a{font-size:17px}
  .sv-p,.sv-check li{font-size:16px}
  /* THE TABLE FITS THE PHONE rather than scrolling inside it. A three column
     price table at 14.5px wraps into 335px of container with room to spare, and
     a table that fits is a table whose caption is not sliced off by the frame it
     was scrolling in. The overflow wrapper stays as the safety net for a future
     row nobody has written yet; nothing reaches for it today. */
  .sv-table{font-size:14.5px}
  .sv-table th,.sv-table td{padding:12px 10px}
  .sv-table thead th{font-size:11.5px;letter-spacing:.03em}
  .sv-table__ours{white-space:normal}
  .sv-incl{grid-template-columns:1fr;gap:0}
  .sv-steps{gap:18px}
  .sv-qa__i{padding:18px 0}
  .sv-recent{margin-top:20px}
  .sv-close{margin-top:60px;padding:36px 22px;border-radius:var(--radius-lg)}
  .sv-facts{flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;gap:0;margin-top:26px;padding-top:18px}
}