/* mawnitor.io - the one stylesheet every page loads.
   Taken from the Claude Design round in docs/design-update/website-mawnitor-io/screens-new/:
   every page there carries the same style block. Changed from it on purpose, and only here:
   - light only: the .mw.dark rules are gone and nothing reads prefers-color-scheme;
   - rules no page uses are gone (.hours, .plat, .pc, .owner, .shot figcaption);
   - the /watches blocks are .wblk, since .blk is the mark's badge;
   - the hero ring is .herodeco on the page, so <main> can hold the hero;
   - .mw clips sideways rather than hiding, which keeps the sticky heading on Home working;
   - links inherit their colour only where nothing else gives one (:where), so the buttons
     and .more take the colours written for them: coral text on a filled button was 3.6:1;
   - the nav, the Connect tabs and the agency card fitted where the design ran out of room
     (861 to 1100 wide, and phones under 400): site/look.mjs finds these;
   - the skip link, the current page in the nav, the Connect tab marks' tile, and one
     reduced-motion rule for every animation, at the end;
   - /faq is not in the design: it is the For site owners accordion, grouped (.faqgroup). */
html{background:#FBF7F1}
body{margin:0}
.mw{--ground:#FBF7F1;--surface:#FFFFFF;--sunk:#F5EEE5;--ink:#36393E;--strong:#264653;--muted:#675F57;--accent:#E76F51;--accent-text:#AD4426;--accent-line:#CE5A3A;--warm:#F4A261;--border:#EDE3D7;--border-strong:#A39383;--band:#264653;--band-ink:#FBF7F1;--hello-from:#FFF6EC;--hello-to:#FCE3D4;--on-accent:#121A1D;--c1:#264653;--c2:#E76F51;--gap:#FBF7F1;--shadow:0 18px 50px rgba(38,70,83,.16);--display:'Satoshi','Plus Jakarta Sans',system-ui,sans-serif;--text:'IBM Plex Sans',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;background:var(--ground);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;position:relative;min-height:100vh;overflow-x:hidden;overflow-x:clip}
.mw *{box-sizing:border-box}
.mw :where(a){color:inherit}
.mw a:focus-visible,.mw summary:focus-visible{outline:3px solid var(--accent-line);outline-offset:3px;border-radius:6px}
.ring{fill:var(--c1);fill-rule:evenodd}
.blk{fill:var(--c2);stroke:var(--gap);stroke-width:6;paint-order:stroke;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1128px;margin:0 auto;padding:0 24px}
.lockup{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.wm{font-family:var(--display);font-weight:900;letter-spacing:-.02em;line-height:1;color:var(--strong)}
.top{position:relative}
.nav{display:flex;align-items:center;gap:16px;min-height:80px}
.nav .wm{font-size:27px}
.nav .lockup svg{width:34px;height:34px}
.links{display:flex;gap:30px;margin-left:36px;flex:1 1 auto}
.links a{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);text-decoration:none;padding:8px 0}
.links a:hover,.links a[aria-current=page]{color:var(--strong);text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--accent-line);text-decoration-thickness:2px}
.acts{display:flex;gap:10px;margin-left:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:10px;font-family:var(--display);font-weight:700;font-size:16px;line-height:1;text-decoration:none;border:1.5px solid transparent;white-space:nowrap}
.btn-fill{background:var(--accent);color:var(--on-accent)}
.btn-fill{transition:transform .15s,box-shadow .15s}
.btn-fill:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(231,111,81,.38)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.h1{animation:rise .7s ease both}
.hbody{animation:rise .8s .15s ease both}
.notch{animation:pop .5s .55s cubic-bezier(.3,1.6,.5,1) both}
.btn-plain{border-color:var(--border-strong);color:var(--strong);background:transparent}
.btn-plain:hover{background:var(--sunk)}
.btn-lg{min-height:56px;padding:0 28px;font-size:18px;border-radius:12px}
.menu{display:none}
.eyebrow{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.h1,.h2,.q,.big{text-wrap:balance}
.h1{font-family:var(--display);font-weight:900;font-size:clamp(40px,7.6vw,106px);line-height:.98;letter-spacing:-.035em;color:var(--strong);margin:22px 0 0}
.h1 .sq{display:inline-block;width:.2em;height:.2em;border-radius:.06em;background:var(--accent);margin-left:.05em}
.h2{font-family:var(--display);font-weight:900;font-size:clamp(34px,5.4vw,76px);line-height:1.02;letter-spacing:-.03em;color:var(--strong);margin:14px 0 0}
.lead{font-size:21px;line-height:1.5;max-width:30em;margin:0}
.sec{padding-top:112px;position:relative}
.herodeco{position:absolute;right:-220px;top:-40px;width:820px;height:820px;--c1:var(--hello-to);--c2:var(--warm);--gap:var(--ground);opacity:.7}
.hero{position:relative;padding-top:64px;padding-bottom:20px}
.hbody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:64px;align-items:start;margin-top:48px}
.row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.quiet{font-size:15px;color:var(--muted);margin:18px 0 0}
.shotwrap{position:relative;margin:0;padding-top:8px}
.shotwrap:before{content:"";position:absolute;left:26px;right:-20px;top:34px;bottom:30px;border-radius:20px;background:linear-gradient(135deg,var(--hello-to),var(--warm));transform:rotate(2.6deg);opacity:.85}
.shot .frame{position:relative}
.shot .frame{border-radius:16px;overflow:hidden;background:var(--ground);border:1px solid var(--border);box-shadow:var(--shadow)}
.shot img{display:block;width:100%;height:auto}
.notch{z-index:3;position:absolute;top:-22px;right:-22px;width:72px;height:72px;border-radius:22px;background:var(--accent);border:9px solid var(--ground)}
.rate{background:var(--accent);color:var(--on-accent);margin-top:88px;padding:72px 0 64px;overflow:hidden}
.rate .eyebrow{color:var(--on-accent);opacity:.8}
.rbig{font-family:var(--display);font-weight:900;font-size:clamp(34px,5vw,68px);line-height:1;letter-spacing:-.03em;margin:16px 0 0;max-width:14em}
.ruler{position:relative;margin-top:48px;display:grid;gap:22px}
.lane{display:grid;grid-template-columns:90px minmax(0,1fr) 150px;align-items:center;gap:20px}
.ll{font-family:var(--display);font-weight:800;font-size:22px}
.lr{font-size:15px;opacity:.85;text-align:right}
.lt{display:block;height:22px;border-radius:4px}
.lt-pulse{background:repeating-linear-gradient(90deg,var(--on-accent) 0 2px,transparent 2px calc(100%/96))}
.lt-walk{background:repeating-linear-gradient(90deg,var(--on-accent) 0 4px,transparent 4px calc(100%/24));height:34px}
.lt-sweep{background:linear-gradient(90deg,var(--on-accent) 0 10px,transparent 10px);height:48px}
.now{position:absolute;top:-14px;bottom:-10px;left:110px;width:3px;border-radius:2px;background:#FFFFFF;box-shadow:0 0 0 4px rgba(255,255,255,.25);animation:sweep 24s linear infinite}
@keyframes sweep{from{left:110px}to{left:calc(100% - 170px)}}
.rate .cap{margin:40px 0 0;font-size:17px;max-width:40em}
.rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
.more{display:inline-block;margin-top:52px;font-family:var(--display);font-weight:700;font-size:17px;color:var(--accent-text);text-decoration:none}
.more:hover{text-decoration:underline;text-underline-offset:5px}
.band{position:relative;overflow:hidden;background:var(--band);color:var(--band-ink);margin-top:120px;padding:120px 0}
.band .deco{position:absolute;right:-120px;bottom:-170px;width:640px;height:640px;--c1:#FBF7F1;--c2:#F08A6E;--gap:var(--band);opacity:.10}
.band .wrap{position:relative}
.q{margin:0;padding:44px 0;border-top:1px solid rgba(251,247,241,.22);font-family:var(--display);font-weight:800;font-size:clamp(30px,5vw,68px);line-height:1.05;letter-spacing:-.03em;color:#FFFFFF;max-width:19em}
.q:before{content:"";display:block;width:22px;height:22px;border-radius:7px;background:#F08A6E;margin-bottom:26px}
.q:first-child{border-top:0;padding-top:0}
.q:last-child{padding-bottom:0}
.sale{background:linear-gradient(135deg,var(--hello-from),var(--hello-to));padding:112px 0;overflow:hidden;position:relative}
.sale .deco{position:absolute;right:-100px;top:-90px;width:520px;height:520px;--c1:#F4A261;--c2:#E76F51;--gap:var(--hello-to);opacity:.22}
.sale .wrap{position:relative}
.sale .big{font-family:var(--display);font-weight:900;font-size:clamp(34px,6vw,84px);line-height:1;letter-spacing:-.035em;color:var(--strong);margin:20px 0 0;max-width:12em}
.tl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;margin-top:64px;max-width:900px;position:relative}
.tl:before{content:"";position:absolute;left:0;right:0;top:15px;height:2px;background:var(--strong);opacity:.35}
.tl .nd{position:relative;width:32px;height:32px;border-radius:10px;background:var(--accent);border:6px solid var(--hello-from);box-sizing:content-box;margin:-6px 0 0 -6px}
.tl p{margin:20px 0 0;font-size:20px;line-height:1.45}
.never{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
.never .stick{position:sticky;top:32px}
.never ul{list-style:none;margin:0;padding:0}
.never li{position:relative;padding:28px 0 28px 44px;border-top:1px solid var(--border);font-size:21px;line-height:1.45}
.never li:last-child{border-bottom:1px solid var(--border)}
.never li:before{content:"";position:absolute;left:0;top:37px;width:18px;height:18px;border-radius:6px;background:var(--accent)}
.never li b{font-family:var(--display);font-weight:800;font-size:26px;line-height:1.15;letter-spacing:-.02em;color:var(--strong)}
.never li b:after{content:" "}
.agency{position:relative;overflow:hidden;background:var(--band);color:#FBF7F1;border:1px solid rgba(251,247,241,.1);border-radius:28px;padding:80px 64px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px;align-items:center}
.agency .deco{position:absolute;right:-110px;bottom:-150px;width:480px;height:480px;--c1:#FBF7F1;--c2:#F08A6E;--gap:var(--band);opacity:.08}
.agency>div{position:relative}
.agency .eyebrow{color:rgba(251,247,241,.7)}
.agency .h2{color:#FFFFFF;font-size:clamp(32px,4.2vw,54px)}
.agency p{margin:0}
.agency .lead{margin-top:20px;font-size:20px;color:rgba(251,247,241,.88)}
.agency .mail{font-family:var(--mono);font-size:14px;color:rgba(251,247,241,.7);margin-top:18px}
.agency .quiet{color:rgba(251,247,241,.78)}
.agency a:not(.btn){color:#FFFFFF}
.agency .btn-fill{background:#F08A6E}
.agency .btn{white-space:normal;text-align:center;line-height:1.2;padding-top:10px;padding-bottom:10px}
.foot{margin-top:120px;border-top:1px solid var(--border);padding:56px 0 48px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.fgrid h4{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.fgrid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fgrid li a{font-size:16px;text-decoration:none;display:inline-block;padding:4px 0}
.fgrid li a:hover{text-decoration:underline;text-underline-offset:4px}
.legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--border);font-size:14px;color:var(--muted)}
.ph{border-bottom:1.5px dotted var(--muted)}
.tabs{position:relative;margin-top:56px;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.5fr);gap:28px;align-items:stretch}
.tr{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tablist{display:flex;flex-direction:column;gap:14px}
.tb{display:grid;grid-template-columns:54px minmax(0,1fr) 28px;align-items:center;gap:6px;padding:28px 24px;border:1.5px solid var(--border);border-radius:18px;background:var(--surface);cursor:pointer;transition:transform .15s,background .15s,border-color .15s}
.tb:hover{border-color:var(--border-strong);transform:translateX(5px)}
.tb .tn{font-family:var(--display);font-weight:900;font-size:22px;color:var(--accent-text)}
.tb .tt{font-family:var(--display);font-weight:800;font-size:24px;line-height:1.1;letter-spacing:-.02em;color:var(--strong)}
.tb .ta{font-family:var(--display);font-weight:800;font-size:22px;color:var(--accent-text);opacity:0;transition:opacity .15s}
#w1:checked ~ .tablist label[for=w1],#w2:checked ~ .tablist label[for=w2],#w3:checked ~ .tablist label[for=w3]{background:var(--band);border-color:var(--band);transform:translateX(10px)}
#w1:checked ~ .tablist label[for=w1] .tt,#w2:checked ~ .tablist label[for=w2] .tt,#w3:checked ~ .tablist label[for=w3] .tt{color:#FFFFFF}
#w1:checked ~ .tablist label[for=w1] .tn,#w2:checked ~ .tablist label[for=w2] .tn,#w3:checked ~ .tablist label[for=w3] .tn,#w1:checked ~ .tablist label[for=w1] .ta,#w2:checked ~ .tablist label[for=w2] .ta,#w3:checked ~ .tablist label[for=w3] .ta{color:#F4A261}
#w1:checked ~ .tablist label[for=w1] .ta,#w2:checked ~ .tablist label[for=w2] .ta,#w3:checked ~ .tablist label[for=w3] .ta{opacity:1}
#w1:focus-visible ~ .tablist label[for=w1],#w2:focus-visible ~ .tablist label[for=w2],#w3:focus-visible ~ .tablist label[for=w3]{outline:3px solid var(--accent-line);outline-offset:3px}
.pn{display:none;position:relative;overflow:hidden;border-radius:24px;padding:52px 52px 48px}
#w1:checked ~ .panels .p1,#w2:checked ~ .panels .p2,#w3:checked ~ .panels .p3{display:block;animation:rise .4s ease both}
.p1{background:var(--band);color:#FBF7F1;--c1:#FBF7F1;--c2:#F4A261;--gap:var(--band)}
.p2{background:linear-gradient(135deg,var(--hello-from),var(--hello-to));border:1px solid var(--border);--c1:#F4A261;--c2:#E76F51;--gap:var(--hello-to)}
.p3{background:var(--surface);border:1px solid var(--border);--c1:var(--hello-to);--c2:var(--warm);--gap:var(--surface)}
.pn>*{position:relative}
.pn>.pdeco{position:absolute;right:-110px;top:-120px;width:300px;height:300px;opacity:.12}
.p2>.pdeco{opacity:.28}
.p3>.pdeco{opacity:.8}
.pnum{font-family:var(--display);font-weight:900;font-size:96px;line-height:.85;letter-spacing:-.04em;margin:0;color:var(--accent)}
.p1 .pnum{color:var(--warm)}
.pn h3{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.6vw,48px);line-height:1.03;letter-spacing:-.03em;color:var(--strong);margin:24px 0 18px}
.p1 h3{color:#FFFFFF}
.pn .pd{margin:0;font-size:20px;line-height:1.5;max-width:30em}
.cannot{margin-top:36px;padding-top:26px;border-top:1px solid var(--border-strong)}
.p1 .cannot{border-top-color:rgba(251,247,241,.3)}
.cannot b{display:block;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);margin-bottom:10px}
.p1 .cannot b{color:var(--warm)}
.cannot p{margin:0;font-size:17px;max-width:34em}
.acc{margin-top:48px;border-top:2px solid var(--strong)}
.story{border-bottom:1px solid var(--border);transition:background .2s}
.story:not([open]):hover{background:var(--sunk)}
.story summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:72px minmax(0,1fr) 40px;align-items:center;gap:12px 24px;padding:28px 20px}
.story summary::-webkit-details-marker{display:none}
.story .sn{font-family:var(--display);font-weight:800;font-size:16px;color:var(--accent-text)}
.story .st{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.8vw,38px);line-height:1.08;letter-spacing:-.025em;color:var(--strong)}
.story .pm{position:relative;width:40px;height:40px;border-radius:12px;background:var(--accent);justify-self:end}
.story .pm:before,.story .pm:after{content:"";position:absolute;left:11px;right:11px;top:18.5px;height:3px;border-radius:2px;background:var(--on-accent);transition:transform .2s}
.story .pm:after{transform:rotate(90deg)}
.story[open]{background:var(--band)}
.story[open] .pm:after{transform:rotate(0)}
.story[open] .st{color:#FFFFFF}
.story[open] .sn{color:var(--warm)}
.sbody{padding:0 20px 34px 116px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 40px;align-items:end;animation:rise .35s ease both}
.sbody .sl{margin:0;font-size:19px;line-height:1.5;color:#FBF7F1;max-width:34em}
.sbody .sp{display:block;font-family:var(--mono);font-size:12.5px;color:rgba(251,247,241,.7);margin-top:14px;overflow-wrap:anywhere}
.sbody .go{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border-radius:10px;background:var(--accent);color:var(--on-accent);font-family:var(--display);font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap}
.sbody .go:hover{filter:brightness(.94)}
@media (max-width:1100px){
.links{gap:22px;margin-left:22px}
.nav .btn{padding:0 16px}
.agency{padding:64px 44px;gap:40px}
}
@media (max-width:860px){
.links{display:none}
.nav{flex-wrap:wrap;gap:6px 12px;padding:14px 0 6px;min-height:0}
.menu{display:block;width:100%;border-bottom:1px solid var(--border)}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;min-height:46px;font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink)}
.menu summary::-webkit-details-marker{display:none}
.menu summary:after{content:"+";margin-left:auto;color:var(--accent-text);font-size:22px;font-weight:500}
.menu[open] summary:after{content:"\2212"}
.menu .ml{display:flex;flex-direction:column;padding:2px 0 14px}
.menu .ml a{font-family:var(--display);font-weight:700;font-size:17px;text-decoration:none;padding:12px 0;color:var(--strong)}
.menu .ml a[aria-current=page]{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--accent-line);text-decoration-thickness:2px}
.herodeco{width:520px;height:520px;right:-200px;top:120px}
.hero{padding-top:36px}
.hbody{grid-template-columns:minmax(0,1fr);gap:48px;margin-top:32px}
.shotwrap{max-width:340px}
.shotwrap:before{left:16px;right:-10px}
.lane{grid-template-columns:64px minmax(0,1fr);gap:6px 12px}
.lr{grid-column:1 / -1;text-align:left;font-size:14px}
.lt-pulse{background:repeating-linear-gradient(90deg,var(--on-accent) 0 1px,transparent 1px calc(100%/48))}
.now{left:76px;bottom:28px}
@keyframes sweep{from{left:76px}to{left:calc(100% - 4px)}}
.tabs{grid-template-columns:minmax(0,1fr)}
.tb:hover{transform:none}
#w1:checked ~ .tablist label[for=w1],#w2:checked ~ .tablist label[for=w2],#w3:checked ~ .tablist label[for=w3]{transform:none}
.pn{padding:36px 28px 34px}
.story summary{grid-template-columns:44px minmax(0,1fr) 40px;gap:12px;padding:22px 8px}
.sbody{padding:0 8px 28px 8px;grid-template-columns:minmax(0,1fr)}
.never{grid-template-columns:minmax(0,1fr);gap:28px}
.never .stick{position:static}
.agency{grid-template-columns:minmax(0,1fr);padding:48px 28px;gap:32px;border-radius:22px}
.tl{grid-template-columns:minmax(0,1fr);gap:36px}
.tl:before{display:none}
.fgrid{grid-template-columns:1fr 1fr}
.fgrid .brandcol{grid-column:1 / -1}
}
@media (max-width:540px){
.mw{font-size:16px}
.wrap{padding-left:16px;padding-right:16px}
.nav .wm{font-size:20px}
.nav .lockup{gap:7px}
.nav .lockup svg{width:26px;height:26px}
.nav .btn{padding:0 10px;font-size:13px;min-height:42px}
.nav .acts{gap:6px}
.lead{font-size:18px}
.btn-lg{min-height:52px;padding:0 22px;font-size:16.5px}
.notch{width:52px;height:52px;border-radius:16px;border-width:7px;top:auto;bottom:34px;right:-8px}
.h1{font-size:44px}
.rate{margin-top:56px;padding:48px 0 44px}
.ll{font-size:18px}
.sec{padding-top:72px}
.tb{padding:20px 18px;grid-template-columns:44px minmax(0,1fr) 24px}
.tb .tt{font-size:21px}
.pn{padding:30px 22px 30px}
.pnum{font-size:68px}
.pn .pd{font-size:18px}
.story .st{font-size:22px}
.band{margin-top:72px;padding:72px 0}
.band .deco{width:340px;height:340px;right:-130px;bottom:-100px;opacity:.08}
.q{padding:32px 0}
.sale{padding:72px 0}
.sale .deco{width:300px;height:300px;right:-120px;top:-60px;opacity:.18}
.sale .big{margin-top:16px}
.tl{margin-top:40px}
.never li{padding:22px 0 22px 34px;font-size:18px}
.never li:before{top:29px;width:14px;height:14px;border-radius:5px}
.never li b{font-size:21px}
.agency{padding:40px 22px}
.agency .deco{width:300px;height:300px;right:-110px;bottom:-110px}
.foot{margin-top:72px;padding-top:40px}
}

.pagehero{padding-top:64px;padding-bottom:8px;position:relative}
.pagehero .h1{font-size:clamp(38px,6.4vw,88px)}
.pagehero .lead{margin-top:26px}
.blocks{display:grid;gap:24px;margin-top:56px}
.wblk{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start;padding:48px 0;border-top:1px solid var(--border)}
.wblk .bn{font-family:var(--display);font-weight:900;font-size:64px;line-height:.9;letter-spacing:-.04em;color:var(--accent);margin:0 0 14px}
.wblk h3{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,44px);line-height:1.04;letter-spacing:-.03em;color:var(--strong);margin:0}
.wblk .pd{margin:0;font-size:19px;line-height:1.5}
.wblk .how{margin-top:26px;padding:22px 26px;border-radius:16px;background:var(--sunk);border:1px solid var(--border)}
.wblk .how b{display:block;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);margin-bottom:8px}
.wblk .how p{margin:0;font-size:16.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--strong)}
.callout{margin-top:40px;border-radius:24px;padding:44px 48px;background:linear-gradient(135deg,var(--hello-from),var(--hello-to));border:1px solid var(--border);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center}
.callout h3{font-family:var(--display);font-weight:900;font-size:clamp(28px,3.6vw,46px);line-height:1.04;letter-spacing:-.03em;color:var(--strong);margin:0 0 16px}
.callout p{margin:0;font-size:18px}
.callout .mono{font-family:var(--mono);font-size:15px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 18px;display:inline-block;color:var(--strong)}
.doc{max-width:720px;margin:0 auto}
.doc .h1{font-size:clamp(36px,5vw,64px)}
.doc .meta{font-family:var(--mono);font-size:13.5px;color:var(--muted);margin-top:18px}
.doc h2{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.02em;color:var(--strong);margin:48px 0 12px;padding-top:28px;border-top:1px solid var(--border)}
.doc .ph2{margin:0;padding:18px 22px;border-radius:12px;background:var(--sunk);border:1.5px dashed var(--border-strong);color:var(--muted);font-size:16px}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.toc a{font-family:var(--display);font-weight:700;font-size:14px;text-decoration:none;padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--strong)}
.toc a:hover{border-color:var(--border-strong)}
.nf{min-height:70vh;display:flex;flex-direction:column;justify-content:center;padding:80px 0}
.nf .h1{font-size:clamp(40px,7vw,96px)}
.nf .row{margin-top:40px}
.list{margin:40px 0 0;padding:0;list-style:none;display:grid;gap:0;border-top:2px solid var(--strong)}
.list li{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:20px;align-items:center;padding:22px 8px;border-bottom:1px solid var(--border)}
.list .sn{font-family:var(--display);font-weight:800;font-size:15px;color:var(--accent-text)}
.list .st{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.02em;color:var(--strong);text-decoration:none}
.list .st:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--accent-line)}
.list .ar{font-family:var(--display);font-weight:800;font-size:22px;color:var(--accent-text)}

.ctabs{margin-top:56px}
.cbar{display:flex;gap:12px}
.ctb{display:inline-flex;align-items:center;gap:12px;min-height:64px;padding:0 26px 0 16px;border-radius:16px 16px 0 0;border:1.5px solid var(--border);border-bottom:0;background:var(--sunk);font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em;color:var(--muted);cursor:pointer}
.ctb .pm{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;flex:none}
#c1:checked ~ .cbar label[for=c1],#c2:checked ~ .cbar label[for=c2]{background:var(--band);color:#FFFFFF;border-color:var(--band)}
#c1:focus-visible ~ .cbar label[for=c1],#c2:focus-visible ~ .cbar label[for=c2]{outline:3px solid var(--accent-line);outline-offset:3px}
.cpanels{border-radius:0 24px 24px 24px;background:var(--band);color:#FBF7F1;padding:56px 56px 52px;position:relative;overflow:hidden}
.cp{display:none;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:56px;align-items:start}
#c1:checked ~ .cpanels .cp1,#c2:checked ~ .cpanels .cp2{display:grid;animation:rise .4s ease both}
.steps{margin:0;padding:0;list-style:none;display:grid;gap:0;position:relative}
.steps:before{content:"";position:absolute;left:19px;top:28px;bottom:28px;width:2px;background:rgba(251,247,241,.22)}
.steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:24px;padding:18px 0;position:relative}
.steps .sx{width:40px;height:40px;border-radius:12px;background:var(--accent);color:var(--on-accent);font-family:var(--display);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;position:relative}
.steps b{display:block;font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.02em;line-height:1.1;color:#FFFFFF;margin:6px 0 8px}
.steps p{margin:0;font-size:17.5px;line-height:1.5;color:rgba(251,247,241,.88)}
.perm2{padding:28px;border-radius:18px;background:rgba(251,247,241,.08);border:1px solid rgba(251,247,241,.18)}
.perm2 b{display:block;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--warm);margin-bottom:10px}
.perm2 p{margin:0;font-size:16.5px;line-height:1.5}
.sbody.one{grid-template-columns:minmax(0,1fr)}
.sbody.one .sl{margin:0 0 14px}
.sbody.one .sl:last-child{margin-bottom:0}
.sbody .sl a{color:#FFFFFF}
.sbody .sl code{font-family:var(--mono);font-size:.9em;padding:2px 8px;border-radius:6px;background:rgba(251,247,241,.12);overflow-wrap:anywhere}
.story{scroll-margin-top:24px}
.faqgroup{padding-top:48px}
.faqgroup .acc{margin-top:18px}
.faqgroup + .faqgroup{padding-top:72px}
@media (max-width:860px){
.cp{grid-template-columns:minmax(0,1fr);gap:28px}
.cpanels{padding:32px 24px 30px;border-radius:0 18px 18px 18px}
.ctb{font-size:19px;min-height:54px;padding:0 16px 0 12px}
.wblk{grid-template-columns:minmax(0,1fr);gap:20px;padding:36px 0}
.callout{grid-template-columns:minmax(0,1fr);padding:32px 26px}
.list li{grid-template-columns:44px minmax(0,1fr) auto}
}
@media (max-width:540px){
.wblk .bn{font-size:48px}
.cbar{gap:6px}
.ctb{flex:1 1 0;min-width:0;justify-content:center;gap:8px;min-height:50px;padding:0 10px 0 8px;font-size:16px}
.ctb .pm{width:28px;height:28px;border-radius:9px}
.nf{min-height:0;padding:48px 0}
}

.mw .skip{position:absolute;left:16px;top:-80px;z-index:10;display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:10px;background:var(--strong);color:#FFFFFF;font-family:var(--display);font-weight:700;font-size:15px;text-decoration:none}
.mw .skip:focus{top:12px}
@media (prefers-reduced-motion:reduce){
.mw *,.mw *:before,.mw *:after{animation:none!important;transition:none!important}
.now{left:35%}
}