:root{
  --bg:#0A0A0B; --paper:#F2F0EB; --paper-2:#E9E6DF; --ink:#121110; --ink-2:#57534D; --ink-3:#8B867E;
  --red:#E3341C; --orange:#F25C1F; --orange-hi:#FF8A4C; --cobalt:#2B3BDA; --cobalt-d:#1B269E; --ticket:#F7893B; --cream:#F8F1DC;
  --yellow:#F5C21B; --green:#1FA855; --green-d:#13803E; --pink:#F06EAA; --navy:#16224F;
  --sans:"IT",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"Mono",ui-monospace,Menlo,Consolas,monospace; --brush:"Brush",Georgia,serif;
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.45,.64,1); --io:cubic-bezier(.65,0,.35,1);
  --m:10px; --r:24px; --pad:clamp(20px,3.4vw,48px);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  interpolate-size:allow-keywords;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
.motion{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.45 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;font-feature-settings:"ss01","cv11"}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
svg{display:block}
button,input,select,textarea{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
::selection{background:var(--orange);color:#fff}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:8px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:12px;transform:translateY(-200%);z-index:99;background:#fff;color:#000;padding:10px 16px;border-radius:999px;font-weight:600}
.skip:focus{transform:none}
.mono{font:400 .75rem/1.3 var(--mono);letter-spacing:.03em;text-transform:uppercase}
.num{font-variant-numeric:tabular-nums}
html:not(.js) .js-only{display:none!important}
.js .no-js{display:none!important}

/* ================= frames ================= */
.fr{position:relative;margin:var(--m);border-radius:var(--r);overflow:hidden;padding:var(--pad);isolation:isolate}
.fr::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.09;mix-blend-mode:multiply;pointer-events:none;z-index:0}
.fr>*{position:relative;z-index:1}
@media (min-width:900px){.fr{min-height:calc(100svh - 2*var(--m))}}
@media (max-width:640px){:root{--m:6px;--r:18px}}
.chrome{display:flex;justify-content:space-between;gap:16px;align-items:center;z-index:6}
.chrome .mono{opacity:.72;display:flex;align-items:center;gap:10px}
.chrome .tick{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.9}
.fr-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:14px;margin-top:40px;z-index:6;box-shadow:inset 0 1px 0 currentColor}
.fr-foot .mono{opacity:.8}
.fr-foot a{text-decoration:none;display:inline-flex;gap:10px;align-items:center;min-height:44px}
.fr-foot svg{transition:transform .25s var(--ease)}
@media (hover:hover){.fr-foot a:hover svg{transform:translateY(3px)}}
.h2{font-weight:760;font-size:clamp(2.7rem,7vw,6.2rem);line-height:.88;letter-spacing:-.058em;text-wrap:balance}
.dot{color:var(--red)}
.lead{font-size:clamp(1.0625rem,1.45vw,1.25rem);line-height:1.4;letter-spacing:-.012em;max-width:36ch;text-wrap:pretty}

/* ================= buttons ================= */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:999px;font-weight:600;text-decoration:none;border:0;letter-spacing:-.012em;white-space:nowrap;transition:transform .12s var(--ease),background-color .18s,color .18s,box-shadow .18s}
.btn:active{transform:scale(.97)}
.btn svg{transition:transform .25s var(--ease)}
@media (hover:hover){.btn:hover svg.go{transform:translateX(3px)}}
.btn-ink{background:var(--ink);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 18px -8px rgba(0,0,0,.5)}
.btn-line{box-shadow:inset 0 0 0 1.5px rgba(18,17,16,.85)}
@media (hover:hover){.btn-ink:hover{background:#2A2724}.btn-line:hover{background:var(--ink);color:#fff}}
.wa-ic{width:20px;height:20px}

/* ================= dock ================= */
.dock{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:2px;padding:5px;border-radius:999px;background:rgba(18,18,20,.82);color:#fff;backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 12px 32px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.06);white-space:nowrap;max-width:calc(100vw - 20px)}
.motion .dock{animation:dockIn .7s .4s var(--ease) both}
@keyframes dockIn{from{opacity:0;transform:translate(-50%,24px)}}
.dock a{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;border-radius:999px;text-decoration:none;font-weight:500;font-size:.9375rem;transition:color .18s}
.d-brand{font-weight:700!important;letter-spacing:-.02em;padding-left:10px!important}
.d-ring{width:18px;height:18px;border-radius:50%;background:conic-gradient(var(--orange) calc(var(--prog,0)*1turn),rgba(255,255,255,.16) 0);display:grid;place-items:center}
.d-ring::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange)}
.d-link{color:rgba(255,255,255,.62);display:none!important}
.d-link[aria-current="true"]{color:#fff}
.d-pill{position:absolute;z-index:0;top:5px;height:44px;border-radius:999px;background:rgba(255,255,255,.1);transition:left .35s var(--ease),width .35s var(--ease),opacity .2s;opacity:0;pointer-events:none}
.d-go{background:#fff;color:#000!important;font-weight:600!important;padding:0 18px!important}
.d-go svg{transition:transform .25s var(--ease)}
@media (hover:hover){.d-link:hover{color:#fff}.d-go:hover svg{transform:translate(2px,-2px)}}
.d-m{color:rgba(255,255,255,.85)}
.dock{transition:transform .4s var(--ease),opacity .3s}
.dock.away{transform:translate(-50%,140%);opacity:0;pointer-events:none}
@media (min-width:1000px){.d-link{display:inline-flex!important}.d-m{display:none!important}}
@media (max-width:999px){.d-brand{display:none!important}}

/* ================= 01 HERO ================= */
.f-hero{background:var(--paper);display:flex;flex-direction:column}
.hero-stage{position:relative;flex:1;display:grid;place-items:center;min-height:min(60svh,600px);margin:20px calc(-1*var(--pad)) 0}
.hero h1{position:relative;z-index:2;font-weight:820;font-size:clamp(3.4rem,12.4vw,12.8rem);line-height:.83;letter-spacing:-.068em;text-align:center}
.hero h1>span{display:block;position:relative;width:fit-content;margin:0 auto}
.motion .hero h1>span{animation:rise 1s var(--ease) both}
.motion .hero h1>span+span{animation-delay:.08s}
@keyframes rise{from{opacity:0;transform:translateY(.25em)}}
.note{position:absolute;z-index:4;font:400 .6875rem/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);white-space:nowrap;display:flex;align-items:center;gap:8px;background:var(--paper);padding:7px 11px 7px 9px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(18,17,16,.16),0 6px 14px -8px rgba(0,0,0,.35)}
.note i{width:6px;height:6px;border-radius:50%;background:var(--red)}
.note-1{right:.35em;top:-.32em}
.note-2{left:.25em;bottom:-.3em}
.motion .note{animation:rise .8s .7s var(--ease) both}
@media (max-width:1180px){.note{display:none}}
.minis{position:absolute;inset:0;z-index:1}

/* mini sample sites around the headline */
.mini{position:absolute;width:clamp(150px,13.4vw,200px);border-radius:13px;background:#fff;overflow:hidden;color:#1A1714;will-change:transform;
  transform:translate3d(var(--tx,0px),var(--ty,0px),0) rotate(var(--rot,0deg));
  box-shadow:0 0 0 1px rgba(20,15,10,.07),0 1px 1px rgba(20,15,10,.06),0 10px 20px -8px rgba(30,20,10,.22),0 30px 50px -24px rgba(30,20,10,.3)}
.mini-bar{display:flex;align-items:center;gap:3px;padding:6px 7px;background:#F6F4F0;border-bottom:1px solid #ECE8E1}
.mini-bar i{width:5px;height:5px;border-radius:50%;background:#E0DBD2}
.mini-bar span{flex:1;margin-left:6px;height:11px;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px #ECE8E1;font:400 6px/11px var(--mono);color:#9A948A;text-align:center;overflow:hidden;letter-spacing:0}
.mini-hero{position:relative;height:clamp(78px,7.2vw,104px);margin:6px;border-radius:8px;overflow:hidden;background:var(--c1)}
.mini-hero svg{position:absolute;inset:0;width:100%;height:100%}
.mini-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.45))}
.mini-hero b{position:absolute;left:8px;bottom:7px;right:8px;z-index:1;color:#fff;font-weight:760;font-size:10.5px;line-height:1.05;letter-spacing:-.02em}
.mini-hero em{position:absolute;left:7px;top:7px;z-index:1;font:600 6.5px/1 var(--sans);font-style:normal;background:rgba(255,255,255,.92);color:#1A7A3E;padding:3px 5px 3px 4px;border-radius:99px;display:flex;align-items:center;gap:3px}
.mini-hero em::before{content:"";width:4px;height:4px;border-radius:50%;background:#22B35E}
.mini-id{display:flex;align-items:center;gap:6px;padding:2px 8px 6px}
.mini-id i{width:15px;height:15px;border-radius:50%;flex:none;background:var(--c1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.mini-id b{display:block;font-weight:700;font-size:9.5px;letter-spacing:-.015em;line-height:1.1}
.mini-id small{display:block;color:#8F897F;font-size:7px;line-height:1.2}
.mini-cta{display:grid;grid-template-columns:1.25fr 1fr;gap:4px;padding:0 7px 7px}
.mini-cta span{display:flex;align-items:center;justify-content:center;gap:3px;height:17px;border-radius:99px;font-weight:650;font-size:7px;letter-spacing:-.01em}
.mini-cta span:first-child{background:var(--green);color:#fff}
.mini-cta span:last-child{box-shadow:inset 0 0 0 1px #DDD7CD;color:#3A352F}
.mini-cta svg{width:7px;height:7px}
@media (max-width:899px){
  .hero-stage{display:block;min-height:0;margin-top:40px}
  .hero h1{text-align:left;font-size:clamp(3.4rem,17.6vw,7rem);padding:0 var(--pad)}
  .hero h1>span{margin:0}
  .minis{position:relative;inset:auto;display:flex;gap:12px;width:max-content;padding:30px 0 10px}
  .mini{position:relative;left:auto!important;top:auto!important;width:156px;--tx:0px;--ty:0px}
  .motion .minis{animation:strip 44s linear infinite}
}
@keyframes strip{to{transform:translateX(-50%)}}
.hero-low{display:grid;gap:22px;z-index:5;margin-top:24px}
@media (min-width:900px){.hero-low{grid-template-columns:1fr auto;align-items:end}}
.hero-low .lead b{font-weight:680}
.ctas{display:flex;flex-wrap:wrap;gap:10px}
.sample-note{margin-top:12px;font-size:.75rem;color:var(--ink-3);display:flex;gap:6px;align-items:center}
.sample-note::before{content:"";width:12px;height:1px;background:currentColor}

/* ================= 02 THE BUILD ================= */
.f-build{background:#E4E3DF;display:flex;flex-direction:column}
.build{flex:1;display:grid;gap:clamp(28px,4vw,56px);align-items:center;margin-top:24px}
@media (max-width:1079px){.build{display:flex;flex-direction:column;align-items:stretch}.panel{order:2}.build-log{order:3}}
@media (min-width:1080px){.build{grid-template-columns:.62fr 1.38fr;grid-template-areas:"say panel" "log panel";grid-template-rows:auto 1fr;align-items:start}.build-say{grid-area:say;align-self:end}.build-log{grid-area:log}.panel{grid-area:panel;align-self:center}}
.build-say .h2{max-width:6.5ch}
.daylog{margin-top:0;display:grid;gap:2px;max-width:30rem}
.daylog li{display:grid;grid-template-columns:4.5rem 1fr;gap:12px;padding:10px 0;box-shadow:inset 0 -1px 0 rgba(18,17,16,.12);color:var(--ink-3);transition:color .3s}
.daylog li .mono{padding-top:3px}
.daylog li.on{color:var(--ink)}
.daylog li.now .mono{color:var(--orange)}
.daylog li span:last-child{font-size:.9844rem;line-height:1.35}
.paid{margin-top:20px;display:inline-flex;gap:10px;align-items:center;padding:9px 16px 9px 12px;border-radius:999px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04),0 4px 10px -4px rgba(0,0,0,.12);font-size:.9375rem}
.paid i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(31,168,85,.16)}

/* the aluminium panel */
.panel{position:relative;border-radius:26px;padding:clamp(14px,2vw,24px);display:grid;gap:clamp(14px,2vw,22px);
  background:linear-gradient(180deg,#FBFBF9 0%,#ECECE8 48%,#DCDCD7 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 1px rgba(0,0,0,.07),inset 0 0 0 1px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.1),0 18px 30px -16px rgba(40,35,25,.35),0 60px 90px -40px rgba(40,35,25,.5)}
.panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.0) 0 2px,rgba(255,255,255,.22) 2px 3px);mix-blend-mode:soft-light;opacity:.6}
@media (min-width:640px){.panel{grid-template-columns:1fr auto}}
.screw{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#CFCFCA 55%,#A3A39D);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25),0 1px 0 #fff}
.screw::after{content:"";position:absolute;left:2px;right:2px;top:5.5px;height:1px;background:rgba(0,0,0,.4);transform:rotate(var(--s,30deg))}
.screw:nth-of-type(1){left:10px;top:10px}.screw:nth-of-type(2){right:10px;top:10px;--s:-50deg}.screw:nth-of-type(3){left:10px;bottom:10px;--s:80deg}.screw:nth-of-type(4){right:10px;bottom:10px;--s:10deg}
.etch{display:flex;justify-content:space-between;font:400 .65rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#76736C;text-shadow:0 1px 0 #fff;padding:4px 8px 0}
.scr-wrap{display:grid;gap:12px;min-width:0}
.screen{position:relative;border-radius:14px;padding:9px;background:linear-gradient(180deg,#232427,#16171A);box-shadow:inset 0 2px 6px rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.6),0 1px 0 #fff,0 -1px 0 rgba(0,0,0,.12);container-type:inline-size}
.screen::after{content:"";position:absolute;inset:9px;border-radius:8px;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.16),rgba(255,255,255,0) 32%);mix-blend-mode:screen;z-index:5}
.leds{display:flex;gap:16px;padding:0 8px;align-items:center}
.led{display:grid;justify-items:center;gap:6px;font:400 .6rem/1 var(--mono);color:#7C7973;letter-spacing:.08em}
.led i{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#D2D1CC,#A9A8A2);box-shadow:inset 0 1px 1px rgba(0,0,0,.35),0 1px 0 #fff;transition:background .2s,box-shadow .2s}
.led.on i{background:radial-gradient(circle at 40% 35%,#FFD2B8,#FF6A2B 55%,#E2470E);box-shadow:0 0 0 1px rgba(150,40,0,.35),0 0 12px 2px rgba(255,106,43,.65)}
.leds .mono{margin-left:auto;font-size:.6rem;color:#7C7973;letter-spacing:.12em}
.ctl{display:grid;justify-items:center;align-content:center;gap:14px;padding:6px 6px 0}
.well{width:clamp(128px,11vw,158px);aspect-ratio:1;border-radius:22px;padding:13px;background:linear-gradient(180deg,#2A2B2E,#131416);box-shadow:inset 0 2px 6px rgba(0,0,0,.7),0 1px 0 #fff,0 -1px 0 rgba(0,0,0,.15)}
.well-in{width:100%;height:100%;border-radius:15px;padding:9px;background:linear-gradient(180deg,#3A3B40,#1C1D20);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 10px rgba(0,0,0,.6)}
.push{width:100%;height:100%;border:0;border-radius:12px;position:relative;
  background:linear-gradient(180deg,#FF9B62 0%,#FA6A2A 38%,#E4511A 72%,#C9420F 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(120,30,0,.3),inset 0 0 0 1px rgba(160,40,0,.35),0 5px 0 #993008,0 9px 16px rgba(0,0,0,.55);transform:translateY(-4px);transition:transform .07s,box-shadow .07s}
.push::before{content:"";position:absolute;left:26%;right:26%;top:31%;bottom:31%;border-radius:3px;background:repeating-linear-gradient(180deg,rgba(130,35,0,.38) 0 1.5px,rgba(255,220,190,.45) 1.5px 2.5px,transparent 2.5px 7px)}
.push::after{content:"";position:absolute;inset:6% 8% auto;height:30%;border-radius:10px 10px 50% 50%;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);pointer-events:none}
.push:active,.push.down{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(120,30,0,.3),inset 0 0 0 1px rgba(160,40,0,.35),0 0 0 #993008,0 2px 4px rgba(0,0,0,.6)}
.push:focus-visible{outline:2px solid #fff;outline-offset:5px}
.ctl small{font:400 .625rem/1.3 var(--mono);letter-spacing:.14em;color:#76736C;text-transform:uppercase;text-shadow:0 1px 0 #fff;text-align:center}
.ctl small b{display:block;font-weight:400;color:#B2AFA8}

/* ================= THE SAMPLE SHOP SITE (Kanha Sweets) ================= */
.k{--k-red:#8E1B10;--k-red-2:#B3260F;--k-gold:#E9A82B;--k-ink:#2B1A10;--k-mute:#7A6655;--k-line:#EADFCB;--k-bg:#FFFBF3;
  position:relative;aspect-ratio:16/10.6;border-radius:8px;background:var(--k-bg);overflow:hidden;font-family:var(--sans);color:var(--k-ink);
  font-size:1.48cqi;line-height:1.25;display:grid;grid-template-rows:auto auto auto 1fr;letter-spacing:-.005em}
.k *{transition:opacity .45s var(--ease),transform .6s var(--ease),filter .45s}
.k-bar{display:flex;align-items:center;gap:1em;padding:.75em 1.1em;background:#F4EEE3;box-shadow:inset 0 -1px 0 var(--k-line)}
.k-dots{display:flex;gap:.45em}.k-dots i{width:.72em;height:.72em;border-radius:50%;background:#E6DACA}
.k-url{flex:1;max-width:28em;margin:0 auto;height:2.1em;display:flex;align-items:center;justify-content:center;gap:.5em;background:#fff;border-radius:.55em;box-shadow:inset 0 0 0 1px var(--k-line),0 1px 0 rgba(0,0,0,.02);font:400 .9em/1 var(--mono);color:#8A7A68;position:relative;overflow:hidden}
.k-url .pre,.k-url .live{display:flex;align-items:center;gap:.5em;position:absolute;inset:0;justify-content:center}
.k-url .pre i{width:.55em;height:.55em;border-radius:50%;background:#D8C9B3}
.k-url .live svg{width:.8em;height:.95em;color:var(--green-d)}
.k-url .live b{font-weight:400;color:var(--k-ink)}
.k-url .live em{font:600 .78em/1 var(--sans);font-style:normal;color:#fff;background:var(--green);padding:.3em .55em;border-radius:99px;letter-spacing:.02em}
.k:not([data-day="5"]) .k-url .live,.k[data-day="5"] .k-url .pre{opacity:0;transform:translateY(.6em)}
.k-bar .k-ref{width:1.1em;height:1.1em;color:#B5A690}
.k-nav{display:flex;align-items:center;gap:1.4em;padding:1em 1.8em .7em}
.k-logo{display:flex;align-items:center;gap:.7em}
.k-mark{width:3em;height:3em;border-radius:50%;flex:none;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#C33A22,var(--k-red) 70%);box-shadow:inset 0 0 0 .18em var(--k-red),inset 0 0 0 .3em var(--k-gold),0 .2em .5em -.15em rgba(120,20,0,.5);font:400 1.5em/1 var(--brush);color:#FFF3D6;padding-top:.1em}
.k-mark span{font-size:.92em}
.k-name{font:400 1.75em/1 var(--brush);color:var(--k-red);letter-spacing:.005em}
.k-sub{display:block;font:500 .78em/1.2 var(--sans);color:var(--k-mute);margin-top:.35em;letter-spacing:.01em}
.k-links{display:flex;gap:1.6em;margin-left:auto;font-weight:550;font-size:.95em;color:#5E4B3B}
.k-links span:first-child{color:var(--k-ink);box-shadow:inset 0 -.14em 0 var(--k-gold)}
.k-open{display:flex;align-items:center;gap:.45em;font-weight:650;font-size:.85em;color:#16753A;background:#E7F5EA;padding:.45em .8em .45em .65em;border-radius:99px;box-shadow:inset 0 0 0 1px #CDEBD5}
.k-open i{width:.55em;height:.55em;border-radius:50%;background:#22B35E;box-shadow:0 0 0 .22em rgba(34,179,94,.22)}
.k-hero{display:grid;grid-template-columns:1fr 1.08fr;gap:1.8em;padding:.5em 1.8em 1.2em;align-items:center}
.k-eye{display:flex;align-items:center;gap:.5em;font:400 .78em/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#B4471A}
.k-eye::before{content:"";width:1.6em;height:1px;background:currentColor}
.k-h{margin-top:.55em;font-weight:820;font-size:2.95em;line-height:.93;letter-spacing:-.045em;color:var(--k-ink)}
.k-h em{font-style:normal;color:var(--k-red-2)}
.k-p{margin-top:.75em;font-size:1em;line-height:1.4;color:var(--k-mute);max-width:24em}
.k-ctas{display:flex;gap:.6em;margin-top:1.1em}
.k-btn{display:inline-flex;align-items:center;gap:.5em;height:2.7em;padding:0 1.15em;border-radius:99px;font-weight:650;font-size:.95em;white-space:nowrap}
.k-btn svg{width:1.15em;height:1.15em}
.k-btn.wa{background:var(--green);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 .35em .8em -.3em rgba(19,128,62,.6)}
.k-btn.ln{color:var(--k-ink);box-shadow:inset 0 0 0 1.5px #D9CCB7;background:#fff}
.k-art{position:relative;border-radius:1em;overflow:hidden;aspect-ratio:1.32;box-shadow:0 .1em .2em rgba(80,30,0,.12),0 1em 2em -1em rgba(120,40,0,.45)}
.k-art svg{width:100%;height:100%}
.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.k-thumb{position:relative}
.k-art .ph{z-index:0}.k-tag,.k-price{z-index:1}
.k-tag{position:absolute;left:.8em;top:.8em;display:flex;align-items:center;gap:.4em;background:rgba(255,251,243,.94);color:var(--k-ink);font-weight:650;font-size:.78em;padding:.42em .7em .42em .55em;border-radius:99px;box-shadow:0 .2em .5em -.2em rgba(0,0,0,.3)}
.k-tag i{width:.5em;height:.5em;border-radius:50%;background:var(--k-gold)}
.k-price{position:absolute;right:.8em;bottom:.8em;background:var(--k-ink);color:#fff;border-radius:.6em;padding:.45em .7em;font-size:.78em;line-height:1.15;text-align:right;box-shadow:0 .4em 1em -.3em rgba(0,0,0,.5)}
.k-price b{display:block;font-size:1.45em;font-weight:780;letter-spacing:-.02em}
.k-row{display:grid;grid-template-columns:repeat(3,1fr) 1.45fr;gap:.85em;padding:0 1.8em 1.6em;align-items:stretch}
.k-card{background:#fff;border-radius:.85em;padding:.75em;display:grid;grid-template-columns:auto 1fr;gap:.2em .7em;align-items:center;box-shadow:inset 0 0 0 1px var(--k-line),0 .5em 1em -.7em rgba(90,45,0,.35);position:relative}
.k-thumb{grid-row:span 2;width:3.1em;height:3.1em;border-radius:.65em;overflow:hidden}
.k-thumb svg{width:100%;height:100%}
.k-card b{font-weight:680;font-size:.95em;letter-spacing:-.01em;line-height:1.1}
.k-card span{font-weight:800;font-size:1.05em;letter-spacing:-.02em}
.k-card span small{font-weight:500;font-size:.75em;color:var(--k-mute);margin-left:.15em}
.k-card .best{position:absolute;top:-.6em;right:.6em;font:700 .66em/1 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:#8A4B00;background:#FFE7B0;padding:.4em .55em;border-radius:99px;box-shadow:0 0 0 .2em var(--k-bg)}
.k-map{background:#fff;border-radius:.85em;overflow:hidden;display:grid;grid-template-columns:5.2em 1fr;box-shadow:inset 0 0 0 1px var(--k-line),0 .5em 1em -.7em rgba(90,45,0,.35)}
.k-map svg{width:100%;height:100%}
.k-map div{padding:.65em .8em;display:grid;gap:.15em;align-content:center}
.k-map b{font-weight:700;font-size:.92em}
.k-map small{color:var(--k-mute);font-size:.78em}
.k-map u{text-decoration:none;color:#1A63C9;font-weight:650;font-size:.78em;margin-top:.15em}
.k-fab{position:absolute;right:1.4em;bottom:1.4em;display:flex;align-items:center;gap:.6em;z-index:3}
.k-fab span{background:#fff;color:var(--k-ink);font-weight:650;font-size:.82em;padding:.5em .8em;border-radius:99px;box-shadow:0 .3em .9em -.3em rgba(0,0,0,.35),inset 0 0 0 1px var(--k-line)}
.k-fab i{width:3.6em;height:3.6em;border-radius:50%;background:var(--green);display:grid;place-items:center;color:#fff;box-shadow:0 .5em 1.1em -.3em rgba(19,128,62,.7),inset 0 1px 0 rgba(255,255,255,.3);position:relative}
.k-fab i::before{content:"";position:absolute;inset:-.35em;border-radius:50%;border:.15em solid rgba(31,168,85,.45);animation:ping 2.2s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.85);opacity:1}80%,100%{transform:scale(1.35);opacity:0}}
.k-fab svg{width:1.7em;height:1.7em}
/* build states: a part is either built or a skeleton */
.p{position:relative}
.p::before{content:"";position:absolute;inset:0;border-radius:.7em;opacity:0;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,#EFE6D7 30%,#F8F2E8 50%,#EFE6D7 70%) 0 0/300% 100%;transition:opacity .4s}
.p.off::before{opacity:1}
.motion .p.off::before{animation:shimmer 1.6s linear infinite}
@keyframes shimmer{to{background-position:-150% 0}}
.p.off>*,.p.off>div[style*="contents"]>*{opacity:0;transform:translateY(.5em) scale(.985);filter:blur(.2em)}
.k-fab.off{opacity:0;transform:scale(.6)}
.k-fab.off::before{display:none}
.p.pop{animation:pop .55s var(--spring)}
@keyframes pop{0%{transform:scale(.97)}60%{transform:scale(1.015)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.k-fab i::before{animation:none;display:none}}
.k-row{padding-right:6.4em}
@container (max-width:520px){
  .k{font-size:3.3cqi;aspect-ratio:auto;grid-template-rows:none}
  .k-bar{padding:.7em .8em}.k-dots{display:none}.k-ref{display:none}
  .k-url{font-size:.82em;height:2.2em}
  .k-nav{padding:.9em 1em .5em}.k-links{display:none}.k-open{margin-left:auto}
  .k-sub{font-size:.72em}
  .k-hero{grid-template-columns:1fr;gap:1em;padding:.4em 1em 1em}
  .k-hero>.p:last-child{order:-1}
  .k-h{font-size:2.3em}
  .k-row{grid-template-columns:1fr 1fr 1fr;padding:0 1em 1em;gap:.6em}
  .k-card{grid-template-columns:1fr;justify-items:start;padding:.6em}
  .k-thumb{grid-row:auto;width:100%;height:auto;aspect-ratio:1.4}
  .k-map{grid-column:1/-1;grid-template-columns:7em 1fr;min-height:5em}
  .k-fab{right:1em;bottom:1em}
  .k-fab span{display:none}
}

/* ================= 03 THE BILL ================= */
.f-bill{background:var(--orange);color:#1A0B04;display:flex;flex-direction:column}
.f-bill::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(60% 70% at 85% 50%,rgba(255,170,120,.55),transparent 70%),radial-gradient(50% 60% at 0% 100%,rgba(200,60,0,.35),transparent 70%)}
.bill{flex:1;display:grid;gap:36px;align-items:center;margin-top:24px}
@media (min-width:900px){.bill{grid-template-columns:1.1fr auto auto;gap:clamp(28px,4vw,64px)}}
.rcpt{width:300px;justify-self:center;background:#FBF8F1;color:#2A1A10;padding:22px 22px 30px;transform:rotate(2.2deg);font:400 .75rem/1.5 var(--mono);letter-spacing:.01em;position:relative;
  box-shadow:0 1px 1px rgba(60,20,0,.2),0 24px 40px -18px rgba(90,25,0,.6);
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 10px repeat-x;
  mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 10px repeat-x}
.rcpt::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.12;mix-blend-mode:multiply;pointer-events:none}
.rcpt h3{font:800 1.05rem/1 var(--sans);letter-spacing:-.02em;text-align:center}
.rcpt .c{text-align:center;color:#8A7A68;margin-top:4px;font-size:.6875rem}
.rcpt hr{border:0;border-top:1.5px dashed #CDBFA9;margin:14px 0}
.rcpt li{display:grid;grid-template-columns:14px 1fr auto;gap:6px;padding:5px 0;color:#B6A893;transition:color .3s}
.rcpt li::before{content:"";width:6px;height:6px;margin-top:6px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor}
.rcpt li.done{color:#5E4B3B}
.rcpt li.done::before{background:currentColor}
.rcpt li.now{color:#1A0B04;font-weight:400}
.rcpt li.now::before{background:var(--orange);box-shadow:0 0 0 3px rgba(242,92,31,.25)}
.rcpt li.now span{background:linear-gradient(transparent 55%,rgba(242,92,31,.28) 55%)}
.rcpt .tot{display:flex;justify-content:space-between;font:800 .95rem/1 var(--sans);letter-spacing:-.01em}
.rcpt .tot span:last-child{font-variant-numeric:tabular-nums}
.rcpt .foot-n{margin-top:12px;text-align:center;color:#8A7A68;font-size:.625rem;line-height:1.5}
.rcpt .bc{height:28px;margin:12px auto 0;width:70%;background:repeating-linear-gradient(90deg,#2A1A10 0 1px,transparent 1px 3px,#2A1A10 3px 5px,transparent 5px 6px,#2A1A10 6px 7px,transparent 7px 10px);opacity:.8}
@media (max-width:1180px){.rcpt{display:none}}
.amt-k{display:flex;gap:10px;align-items:center}
.amt-k i{flex:1;max-width:120px;height:1px;background:currentColor;opacity:.5}
.amt{font-weight:520;font-size:clamp(6.2rem,19.5vw,17.5rem);line-height:.8;letter-spacing:-.075em;display:flex;align-items:flex-start;white-space:nowrap;margin-top:18px}
.amt .cur{font-size:.34em;letter-spacing:0;margin:.08em .08em 0 0;font-weight:640}
.roll{display:inline-flex;height:.8em;overflow:hidden}
.roll .dg{display:block;height:.8em;overflow:hidden;letter-spacing:0;padding-right:.02em}
.roll .cm{display:block;line-height:.8;letter-spacing:0;margin-right:-.02em}
.roll .col{display:block;transition:transform .85s var(--io)}
.roll .col span{display:block;height:.8em;line-height:.8}
.roll.blur .col{animation:mblur .85s var(--io)}
@keyframes mblur{0%,100%{filter:blur(0)}30%,65%{filter:blur(.03em)}}
.bill-label{font-weight:700;font-size:clamp(1.3rem,2.1vw,1.7rem);letter-spacing:-.025em;margin-top:30px}
.bill-txt{margin-top:8px;max-width:36ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;background:rgba(26,11,4,.08);box-shadow:inset 0 0 0 1px rgba(26,11,4,.16);font-size:.875rem;font-weight:550}
.chip i{width:8px;height:8px;border-radius:50%;background:#1A0B04}
.fader{display:grid;grid-template-columns:auto auto auto;gap:18px;align-items:stretch;justify-self:center}
.scale{display:flex;flex-direction:column;justify-content:space-between;padding:31px 0;font:400 .6875rem/1 var(--mono);opacity:.7;text-align:right}
.slot{position:relative;width:96px;height:clamp(360px,54svh,480px);border-radius:18px;padding:10px;
  background:linear-gradient(90deg,#BFC0C1,#F4F4F3 42%,#DADBDB 70%,#C4C5C6);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2),inset 0 2px 6px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.45),0 20px 40px -20px rgba(90,25,0,.55)}
.slot::before{content:"";position:absolute;inset:10px;border-radius:11px;background:repeating-linear-gradient(180deg,#B5B6B7 0 1px,#E6E7E7 1px 2px,#D4D5D5 2px 12px);box-shadow:inset 0 1px 4px rgba(0,0,0,.4),inset 0 0 0 1px rgba(0,0,0,.08)}
.slot::after{content:"";position:absolute;left:50%;top:22px;bottom:22px;width:6px;margin-left:-3px;border-radius:3px;background:#2A2A2B;box-shadow:inset 0 1px 2px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.6)}
.knob{position:absolute;z-index:2;left:3px;right:3px;height:58px;top:calc(10px + var(--k,0) * (100% - 78px));border-radius:11px;transition:top .42s var(--spring);pointer-events:none;
  background:linear-gradient(180deg,#FFFFFF,#ECECEB 35%,#D3D3D2 80%,#C4C4C3);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(0,0,0,.14),0 8px 14px rgba(70,20,0,.45),0 2px 3px rgba(0,0,0,.35)}
.knob::before{content:"";position:absolute;left:16%;right:16%;top:30%;height:40%;border-radius:2px;background:repeating-linear-gradient(180deg,#9C9C9B 0 1px,#FFFFFF 1px 2px,transparent 2px 5px)}
.knob::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;margin-top:-1px;background:var(--orange);border-radius:1px;box-shadow:0 0 6px rgba(242,92,31,.6)}
.fader.drag .knob{transition:none}
.fader input{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:grab;writing-mode:vertical-lr;direction:ltr;touch-action:none}
.fader input:active{cursor:grabbing}
.fader input:focus-visible~.knob{outline:2px solid #1A0B04;outline-offset:3px}
.ticks{display:flex;flex-direction:column;justify-content:space-between;padding:22px 0}
.ticks button{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;background:none;border:0;padding:6px 0;text-align:left;color:rgba(26,11,4,.55);transition:color .2s;min-height:44px}
.ticks button::before{content:"";grid-row:span 2;width:16px;height:1.5px;background:currentColor;transition:width .3s var(--ease)}
.ticks button span{font:400 .75rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em}
.ticks button b{font-weight:600;font-size:.8125rem;opacity:.85}
.ticks button[aria-current="step"]{color:#1A0B04}
.ticks button[aria-current="step"]::before{width:28px;height:2px}
@media (hover:hover){.ticks button:hover{color:#1A0B04}}
.bill-list{display:grid;margin-top:20px;box-shadow:inset 0 1px 0 rgba(26,11,4,.3)}
.bill-list li{display:grid;grid-template-columns:8rem 1fr;gap:12px;padding:12px 0;box-shadow:inset 0 -1px 0 rgba(26,11,4,.3)}
.bill-list strong{font-weight:700}

/* ================= 04 STICKERS ================= */
.f-get{background:var(--cobalt);color:#fff;display:flex;flex-direction:column}
.f-get::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(70% 60% at 50% 60%,rgba(80,100,255,.45),transparent 70%)}
.get-top{display:grid;gap:16px;margin-top:24px;z-index:4;pointer-events:none}
@media (min-width:900px){.get-top{grid-template-columns:1fr auto;align-items:end}}
.get-top .lead{opacity:.9}
.board{position:relative;flex:1;min-height:clamp(560px,62svh,640px);margin-top:10px}
.stk{position:absolute;left:var(--x);top:var(--y);border:0;padding:0;background:none;color:inherit;touch-action:none;user-select:none;-webkit-user-select:none;z-index:2;
  transform:translate(var(--dx,0px),var(--dy,0px)) rotate(calc(var(--r) + var(--tilt,0deg))) scale(var(--sc,1));
  transition:transform .45s var(--spring),filter .3s;filter:drop-shadow(0 2px 1px rgba(5,10,60,.25)) drop-shadow(0 8px 10px rgba(5,10,60,.3));cursor:grab}
.stk.held{transition:transform .06s linear,filter .2s;cursor:grabbing;--sc:1.08;filter:drop-shadow(0 4px 2px rgba(5,10,60,.2)) drop-shadow(0 26px 24px rgba(5,10,60,.42));z-index:30}
@media (hover:hover){.stk:hover{--sc:1.045}}
.stk[aria-pressed="true"]{z-index:20}
.stk:focus-visible{outline:none}
.stk:focus-visible .face{box-shadow:0 0 0 5px #fff,0 0 0 8px var(--yellow)}
.face{display:grid;place-items:center;align-content:center;text-align:center;border-radius:50%;width:var(--w,124px);height:var(--h,var(--w,124px));font-weight:820;letter-spacing:-.035em;line-height:.88;position:relative;overflow:hidden;box-shadow:0 0 0 5px #fff}
.face::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.38),rgba(255,255,255,0) 40%,rgba(255,255,255,0) 70%,rgba(255,255,255,.14));mix-blend-mode:soft-light}
.stk[aria-pressed="true"] .face{box-shadow:0 0 0 5px #fff,0 0 0 8px var(--yellow)}
.face svg.ring{position:absolute;inset:0;width:100%;height:100%}
.face small{font:400 .56rem/1.25 var(--mono);letter-spacing:.06em;display:block;margin-top:6px;opacity:.9}
.ghost{position:absolute;left:var(--x);top:var(--y);width:var(--w,124px);height:var(--h,var(--w,124px));border-radius:var(--gr,50%);border:1.5px dashed rgba(255,255,255,.35);transform:rotate(var(--r));opacity:0;transition:opacity .3s;pointer-events:none;z-index:1}
.ghost.show{opacity:1}
.motion .stk.wait{opacity:0;--sc:1.4}
.stk.slap{animation:slap .5s var(--spring) both}
@keyframes slap{from{opacity:0;transform:translate(var(--dx,0px),var(--dy,0px)) rotate(calc(var(--r) - 16deg)) scale(1.5)}to{opacity:1}}
.cap{position:relative;z-index:6;display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.4);padding-top:14px;margin-top:8px;min-height:64px}
.cap-t b{font-weight:650;display:block}
.cap-t span{opacity:.85;font-size:.9375rem}
.cap .mono{opacity:.7}
.cap button{background:rgba(255,255,255,.12);border:0;color:#fff;display:inline-flex;gap:8px;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;font-weight:550;font-size:.9375rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);transition:background .18s}
.cap button:active{transform:scale(.97)}
.cap button svg{transition:transform .4s var(--ease)}
@media (hover:hover){.cap button:hover{background:rgba(255,255,255,.22)}.cap button:hover svg{transform:rotate(-120deg)}}
.get-list{display:grid;margin-top:28px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.get-list li{padding:12px 0;box-shadow:inset 0 -1px 0 rgba(255,255,255,.3)}
.get-list b{font-weight:650}
@media (max-width:899px){
  .board{min-height:620px}
  .stk,.ghost{left:var(--mx);top:var(--my)}
  .face,.ghost{width:calc(var(--w,124px)*.74);height:calc(var(--h,var(--w,124px))*.74)}
  .face{font-size:.74em;box-shadow:0 0 0 4px #fff}
  .cap{grid-template-columns:1fr auto}.cap .mono{display:none}
}

/* ================= 05 PLANS ================= */
.f-plans{background:radial-gradient(70% 60% at 72% 28%,rgba(60,90,255,.3),transparent 70%),radial-gradient(50% 50% at 8% 100%,rgba(242,92,31,.2),transparent 70%),#09090E;color:#fff;display:flex;flex-direction:column}
.f-plans::after{mix-blend-mode:screen;opacity:.05}
.plans-say{margin-top:24px;display:grid;gap:16px}
@media (min-width:900px){.plans-say{grid-template-columns:1fr auto;align-items:end}}
.plans-say .lead{color:rgba(255,255,255,.72)}
.calc{margin-top:40px;display:grid;gap:12px}
@media (min-width:1000px){.calc{grid-template-columns:1.2fr 1fr}}
.glass{border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.07),0 30px 60px -30px rgba(0,0,0,.8);padding:clamp(20px,2.6vw,32px)}
.calc>.glass:first-child{display:flex;flex-direction:column}
.g-row{display:flex;justify-content:space-between;align-items:center;gap:16px}
.g-row .mono{color:rgba(255,255,255,.55)}
.yrs-val{font-weight:680;font-size:1.3rem;letter-spacing:-.025em}
.ruler{position:relative;height:100px;margin-top:20px}
.ruler-ticks{position:absolute;left:0;right:0;bottom:30px;height:30px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 1px,transparent 1px calc((100% - 1px)/50)) bottom/100% 10px no-repeat,
             repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 1.5px,transparent 1.5px calc((100% - 1.5px)/5)) bottom/100% 24px no-repeat}
.ruler-glow{position:absolute;left:0;bottom:30px;height:10px;width:var(--pct);background:linear-gradient(90deg,rgba(242,92,31,0),rgba(242,92,31,.7));transition:width .4s var(--spring);-webkit-mask:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 10px);mask:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 10px)}
.ruler-knob{position:absolute;bottom:21px;left:var(--pct);width:24px;height:24px;margin-left:-12px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FFB38A,var(--orange) 60%,#D9470F);box-shadow:0 0 0 6px rgba(242,92,31,.22),0 0 22px rgba(242,92,31,.9),inset 0 1px 0 rgba(255,255,255,.5);transition:left .4s var(--spring);pointer-events:none}
.ruler-tip{position:absolute;bottom:60px;left:var(--pct);transform:translateX(-50%);background:#fff;color:#000;border-radius:7px;padding:5px 9px;font:400 .6875rem/1 var(--mono);white-space:nowrap;transition:left .4s var(--spring);pointer-events:none;box-shadow:0 6px 14px -4px rgba(0,0,0,.6)}
.ruler-tip::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;margin-left:-4px;background:#fff;transform:rotate(45deg);border-radius:1px}
.ruler-lab{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;font:400 .6875rem/1 var(--mono);color:rgba(255,255,255,.5)}
.ruler-lab span{width:0;display:flex;justify-content:center}
.ruler.drag .ruler-knob,.ruler.drag .ruler-tip,.ruler.drag .ruler-glow{transition:none}
.ruler input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;touch-action:pan-y}
.ruler input:focus-visible~.ruler-knob{outline:2px solid #fff;outline-offset:4px}
.sw{display:flex;gap:14px;align-items:center;margin-top:24px;padding-top:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);cursor:pointer}
.sw input{position:absolute;opacity:0}
.sw-t{flex:none;width:50px;height:30px;border-radius:99px;background:rgba(255,255,255,.14);position:relative;transition:background .2s;box-shadow:inset 0 1px 3px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.06)}
.sw-t::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:linear-gradient(180deg,#fff,#E9E9EC);box-shadow:0 2px 5px rgba(0,0,0,.45);transition:transform .32s var(--spring),width .15s}
.sw:active .sw-t::after{width:28px}
.sw input:checked+.sw-t{background:var(--orange)}
.sw input:checked+.sw-t::after{transform:translateX(20px)}
.sw:active input:checked+.sw-t::after{transform:translateX(16px)}
.sw input:focus-visible+.sw-t{outline:2px solid #fff;outline-offset:3px}
.sw b{display:block;font-weight:600}
.sw small{display:block;color:rgba(255,255,255,.58);font-size:.875rem}
.bars{margin-top:24px;padding-top:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);flex:1;display:flex;flex-direction:column;min-height:220px}
.bars .mono{color:rgba(255,255,255,.55)}
.bars-in{flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;align-items:end;margin-top:14px}
.bars-in span{display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:7px;text-align:center;cursor:pointer}
.bars-in i{display:block;height:calc(var(--h) - 46px);min-height:20px;border-radius:9px 9px 4px 4px;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.18);transition:background .3s,box-shadow .3s}
.bars-in em{font-style:normal;font-size:.75rem;color:rgba(255,255,255,.5);transition:color .3s}
.bars-in small{font:400 .6875rem/1 var(--mono);color:rgba(255,255,255,.42)}
.bars-in .on i{background:linear-gradient(180deg,var(--orange-hi),var(--orange));box-shadow:0 0 28px rgba(242,92,31,.5),inset 0 1px 0 rgba(255,255,255,.5)}
.bars-in .on em{color:#fff;font-weight:650}
.bars-in .on small{color:#fff}
.out{display:flex;flex-direction:column;gap:22px;background:linear-gradient(160deg,#3B56FF 0%,#2639D4 52%,#16208F 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.12),0 30px 60px -20px rgba(40,60,255,.55);position:relative;overflow:hidden}
.out::before{content:"";position:absolute;right:-20%;top:-30%;width:70%;height:70%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent);pointer-events:none}
.out-amt{font-weight:640;font-size:clamp(4.2rem,8.6vw,7.4rem);line-height:.8;letter-spacing:-.065em;display:flex;align-items:flex-start;margin-top:14px}
.out-amt .cur{font-size:.4em;letter-spacing:0;margin:.05em .05em 0 0;color:rgba(255,255,255,.85)}
.chrome-num .col span,.chrome-num .cm{background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 38%,#C9D2FF 52%,#FFFFFF 64%,#E6EAFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(10,20,120,.35))}
.out-per{color:rgba(255,255,255,.8)}
.out ul{display:grid;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.out li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;box-shadow:inset 0 -1px 0 rgba(255,255,255,.18);font-size:.9375rem}
.out li span:first-child{color:rgba(255,255,255,.72);display:flex;align-items:center;gap:10px}
.out li span:first-child svg{color:#9FB0FF}
.out li span:last-child{text-align:right;font-weight:560}
.out li.hl span:last-child{color:#FFD7C2}
.out li.hl{animation:flash .8s var(--ease)}
@keyframes flash{from{background:rgba(255,215,194,.18)}}
.btn-white{background:#fff;color:#000;margin-top:auto;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
@media (hover:hover){.btn-white:hover{background:var(--cream)}}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
@media (min-width:700px){.cards{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.cards{grid-template-columns:repeat(6,1fr)}}
.card{border-radius:16px;padding:16px;border:0;text-align:left;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#fff;display:grid;gap:6px;transition:background .2s,color .2s,transform .12s var(--ease)}
.card:active{transform:scale(.98)}
.card .mono{color:rgba(255,255,255,.55);display:flex;justify-content:space-between}
.card b{font-weight:680;font-size:1.55rem;letter-spacing:-.045em}
.card small{color:rgba(255,255,255,.58);font-size:.8125rem}
.card[aria-pressed="true"]{background:#fff;color:#000;box-shadow:0 10px 30px -10px rgba(80,110,255,.6)}
.card[aria-pressed="true"] .mono,.card[aria-pressed="true"] small{color:rgba(0,0,0,.55)}
@media (hover:hover){.card:hover{background:rgba(255,255,255,.09)}.card[aria-pressed="true"]:hover{background:#fff}}
.fine{margin-top:24px;display:grid;gap:10px;color:rgba(255,255,255,.62);font-size:.9375rem}
@media (min-width:900px){.fine{grid-template-columns:repeat(3,1fr);gap:28px}}
.fine b{color:#fff;font-weight:600}

/* ================= 06 QUESTIONS ================= */
.f-qs{background:var(--paper)}
.qs{display:grid;gap:40px;margin-top:24px}
@media (min-width:1000px){.qs{grid-template-columns:.9fr 1.1fr}}
.catch-a{font-weight:820;font-size:clamp(2.2rem,4.6vw,4.2rem);letter-spacing:-.055em;line-height:.9;color:var(--red);margin-top:14px}
.catch .lead{margin-top:22px;color:var(--ink-2)}
.catch .btn{margin-top:26px}
@media (min-width:1000px){.catch{position:sticky;top:40px;align-self:start}}
.qa{box-shadow:inset 0 1.5px 0 var(--ink)}
.qa:last-child{box-shadow:inset 0 1.5px 0 var(--ink),inset 0 -1.5px 0 var(--ink)}
.qa summary{list-style:none;display:grid;grid-template-columns:3.4rem 1fr auto;gap:12px;align-items:center;padding:22px 0;cursor:pointer;font-weight:680;font-size:clamp(1.15rem,1.8vw,1.55rem);letter-spacing:-.03em;min-height:44px}
.qa summary::-webkit-details-marker{display:none}
.qa summary .mono{color:var(--ink-3);font-size:.6875rem}
.qa summary i{width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);position:relative;transition:transform .3s var(--ease),background .2s,color .2s}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.qa summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa[open] summary i{transform:rotate(45deg);background:var(--ink);color:#fff}
@media (hover:hover){.qa summary:hover i{background:var(--ink);color:#fff}}
.qa p{padding:0 0 26px 3.4rem;max-width:56ch;color:var(--ink-2);font-size:1.0625rem}
.qa::details-content{block-size:0;overflow:clip;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
.qa[open]::details-content{block-size:auto}
@media (max-width:640px){.qa summary{grid-template-columns:2.4rem 1fr auto}.qa p{padding-left:2.4rem}}

/* ================= 07 TICKET ================= */
.f-order{background:var(--cobalt);color:#fff}
.f-order::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(60% 50% at 50% 70%,rgba(110,130,255,.5),transparent 70%)}
.order-h{margin-top:24px;display:grid;gap:14px;justify-items:center;text-align:center}
.order-h .lead{opacity:.9;max-width:40ch}
.ticket{position:relative;max-width:1000px;margin:44px auto 0;display:grid;color:var(--cobalt-d);filter:drop-shadow(0 2px 2px rgba(5,10,70,.3)) drop-shadow(0 30px 40px rgba(5,10,70,.45))}
@media (min-width:860px){.ticket{grid-template-columns:1fr 220px}}
.t-main,.t-stub{position:relative;background:var(--ticket) linear-gradient(170deg,rgba(255,255,255,.14),rgba(255,255,255,0) 40%)}
.t-main{border-radius:16px 16px 0 0;padding:clamp(22px,3vw,40px);
  -webkit-mask:radial-gradient(circle 14px at 0 100%,transparent 13.5px,#000 14px) left bottom/51% 100% no-repeat,radial-gradient(circle 14px at 100% 100%,transparent 13.5px,#000 14px) right bottom/51% 100% no-repeat;
  mask:radial-gradient(circle 14px at 0 100%,transparent 13.5px,#000 14px) left bottom/51% 100% no-repeat,radial-gradient(circle 14px at 100% 100%,transparent 13.5px,#000 14px) right bottom/51% 100% no-repeat}
.t-stub{border-radius:0 0 16px 16px;padding:22px clamp(22px,3vw,40px);display:flex;justify-content:space-between;align-items:center;gap:16px;
  background-image:radial-gradient(circle 2px at 50% 50%,rgba(27,38,158,.5) 99%,transparent),linear-gradient(170deg,rgba(255,255,255,.1),transparent 40%);background-size:12px 4px,auto;background-repeat:repeat-x,no-repeat;background-position:0 0,0 0;
  -webkit-mask:radial-gradient(circle 14px at 0 0,transparent 13.5px,#000 14px) left top/51% 100% no-repeat,radial-gradient(circle 14px at 100% 0,transparent 13.5px,#000 14px) right top/51% 100% no-repeat;
  mask:radial-gradient(circle 14px at 0 0,transparent 13.5px,#000 14px) left top/51% 100% no-repeat,radial-gradient(circle 14px at 100% 0,transparent 13.5px,#000 14px) right top/51% 100% no-repeat;transition:transform .7s var(--spring)}
@media (min-width:860px){
  .t-main{border-radius:16px 0 0 16px;-webkit-mask:radial-gradient(circle 14px at 100% 0,transparent 13.5px,#000 14px) right top/100% 51% no-repeat,radial-gradient(circle 14px at 100% 100%,transparent 13.5px,#000 14px) right bottom/100% 51% no-repeat;mask:radial-gradient(circle 14px at 100% 0,transparent 13.5px,#000 14px) right top/100% 51% no-repeat,radial-gradient(circle 14px at 100% 100%,transparent 13.5px,#000 14px) right bottom/100% 51% no-repeat}
  .t-stub{border-radius:0 16px 16px 0;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:clamp(22px,3vw,40px) 26px;background-size:4px 12px,auto;background-repeat:repeat-y,no-repeat;
    -webkit-mask:radial-gradient(circle 14px at 0 0,transparent 13.5px,#000 14px) left top/100% 51% no-repeat,radial-gradient(circle 14px at 0 100%,transparent 13.5px,#000 14px) left bottom/100% 51% no-repeat;mask:radial-gradient(circle 14px at 0 0,transparent 13.5px,#000 14px) left top/100% 51% no-repeat,radial-gradient(circle 14px at 0 100%,transparent 13.5px,#000 14px) left bottom/100% 51% no-repeat}
  .sent .t-stub{transform:translate(18px,14px) rotate(4deg)}
}
.sent .t-stub{transform:translate(6px,16px) rotate(-2deg)}
.scissor{position:absolute;color:rgba(27,38,158,.6);width:16px;height:16px}
.t-main .scissor{right:-8px;top:34px;transform:rotate(90deg)}
@media (max-width:859px){.t-main .scissor{right:auto;left:34px;top:auto;bottom:-8px;transform:none}}
.t-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:24px}
.t-head h3{font-weight:860;font-size:clamp(2.3rem,4.4vw,3.7rem);line-height:.85;letter-spacing:-.06em}
.t-head .mono{text-align:right;line-height:1.5}
.t-grid{display:grid;gap:20px 24px}
@media (min-width:600px){.t-grid{grid-template-columns:1fr 1fr}.t-wide{grid-column:1/-1}}
.fld{position:relative}
.fld label{display:block;font:400 .6875rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}
.fld label i{font-style:normal;opacity:.65}
.fld input,.fld select,.fld textarea{width:100%;min-height:48px;border:0;border-bottom:1.5px solid rgba(27,38,158,.5);background:transparent;color:var(--cobalt-d);font-weight:680;font-size:1.15rem;letter-spacing:-.015em;padding:10px 0 8px;border-radius:0;transition:border-color .2s}
.fld textarea{min-height:48px;resize:vertical;font-weight:550;font-size:1.0625rem;line-height:1.35}
.fld select{appearance:none;-webkit-appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231B269E' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 4px center;cursor:pointer}
.fld select:invalid,.fld select option[value=""]{color:rgba(27,38,158,.55)}
.fld .ln{display:block;height:2px;margin-top:-2px;background:var(--cobalt-d);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-bottom-color:transparent}
.fld input:focus~.ln,.fld select:focus~.ln,.fld textarea:focus~.ln{transform:scaleX(1)}
.fld .bad{border-bottom-color:#7A0E00}
.fld .bad~.ln{background:#7A0E00}
.fld .okk{position:absolute;right:0;top:34px;width:18px;height:18px;opacity:0;transform:scale(.6);transition:opacity .2s,transform .3s var(--spring);color:var(--cobalt-d)}
.fld .good~.okk{opacity:1;transform:none}
.err{margin-top:8px;font-size:.875rem;font-weight:620;color:#6E0C00;display:flex;gap:7px;align-items:center}
.err::before{content:"!";display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#6E0C00;color:var(--ticket);font-size:.6875rem;font-weight:800;flex:none}
.err:empty{display:none}
.shake{animation:shake .3s var(--ease)}
@keyframes shake{20%{transform:translateX(-5px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.t-go{margin-top:28px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.btn-cob{background:var(--cobalt);color:#fff;min-height:58px;padding:0 30px;font-size:1.0625rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 20px -8px rgba(20,30,160,.6)}
@media (hover:hover){.btn-cob:hover{background:var(--cobalt-d)}}
.btn-cob[aria-busy="true"]{pointer-events:none;opacity:.85}
.t-go p{font-size:.875rem;font-weight:550;max-width:28ch;line-height:1.35}
.barcode{width:100%;max-width:170px;height:62px;background:repeating-linear-gradient(90deg,var(--cobalt-d) 0 2px,transparent 2px 4px,var(--cobalt-d) 4px 5px,transparent 5px 8px,var(--cobalt-d) 8px 11px,transparent 11px 12px,var(--cobalt-d) 12px 13px,transparent 13px 16px,var(--cobalt-d) 16px 19px,transparent 19px 21px);opacity:.9}
.stub-rows{display:grid;gap:14px}
.stub-rows p{font:400 .6875rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.07em}
.stub-rows b{display:block;font:780 1.15rem/1.1 var(--sans);text-transform:none;letter-spacing:-.025em;margin-top:2px}
.stamp{position:absolute;left:50%;top:40%;z-index:10;transform:translate(-50%,-50%) rotate(-7deg);background:var(--cream);color:var(--cobalt-d);border:3px solid var(--cobalt-d);outline:1.5px solid var(--cobalt-d);outline-offset:-9px;padding:10px 30px 12px;font-weight:880;font-size:clamp(2.3rem,6vw,4.6rem);letter-spacing:-.055em;line-height:1;white-space:nowrap;display:none;box-shadow:0 12px 24px rgba(10,10,60,.3)}
.sent .stamp{display:block;animation:stamp .5s var(--spring) both}
@keyframes stamp{from{transform:translate(-50%,-50%) rotate(-18deg) scale(1.9);opacity:0}to{transform:translate(-50%,-50%) rotate(-7deg) scale(1);opacity:1}}
.done{display:none}
.sent .t-form-in{opacity:.16;pointer-events:none;filter:blur(1px);transition:opacity .4s,filter .4s}
.sent .done{display:grid;gap:14px;margin-top:22px;position:relative;z-index:11}
.done p{font-weight:720;font-size:1.3rem;letter-spacing:-.025em;max-width:30ch;line-height:1.2}
.done .btn{justify-self:start}
.alt{margin:30px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.btn-glass{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
@media (hover:hover){.btn-glass:hover{background:#fff;color:var(--cobalt)}}

/* ================= footer ================= */
.foot{position:relative;margin:var(--m);padding:40px var(--pad) 0;color:rgba(255,255,255,.6);font-size:.9375rem;overflow:hidden;border-radius:var(--r);background:#111113;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.foot-g{display:grid;gap:24px}
@media (min-width:900px){.foot-g{grid-template-columns:1.4fr 1fr 1fr}}
.foot .mono{color:rgba(255,255,255,.42);margin-bottom:12px}
.foot ul{display:grid;gap:8px}.foot a{text-decoration:none;transition:color .15s}
@media (hover:hover){.foot a:hover{color:#fff}}
.foot-w{margin:56px calc(-1*var(--pad)) 0;font-weight:840;font-size:clamp(4rem,17vw,16rem);line-height:.74;letter-spacing:-.075em;color:#1E1E21;white-space:nowrap;text-align:center;padding-bottom:84px;user-select:none}

/* reveal */
.motion .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform 1s var(--ease)}
.motion .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation:none!important}}

/* ===== the last frame now points to the order form ===== */
.ticket-cta .t-steps{display:grid;margin:6px 0 4px;counter-reset:s}
.ticket-cta .t-steps li{display:grid;grid-template-columns:2.6rem 1fr;align-items:baseline;gap:6px;padding:12px 0;border-bottom:1.5px dashed rgba(27,38,158,.38);font-weight:680;font-size:clamp(1.02rem,1.6vw,1.2rem);letter-spacing:-.015em}
.ticket-cta .t-steps li:first-child{border-top:1.5px dashed rgba(27,38,158,.38)}
.ticket-cta .t-steps .mono{opacity:.7}
.ticket-cta .btn-cob{font-size:1.125rem;min-height:62px;padding:0 34px}

/* domain years per plan */
.card .dom{display:block;margin-top:4px;font:400 .6875rem/1.3 var(--mono);letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.card .dom-plus{color:#FFB38A}
.card[aria-pressed="true"] .dom{color:rgba(0,0,0,.5)}.card[aria-pressed="true"] .dom-plus{color:#C9420F}