:root{
  --bg:#FBF9F6; --surface:#FFFFFF; --ink:#231810; --muted:#6B5D52; --line:#E9E2DA;
  --nose:#7A4B2A; --nose-ink:#FFFFFF; --iris:#A67C52; --amber:#D9B38C; --moss:#2F6F5E; --velvet:#1E140E; --tint:#F3E8DD;
  --display:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif; --body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Caveat","Segoe Script","Bradley Hand",cursive;
  color-scheme:light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#130D09;--surface:#1D1510;--ink:#F4EDE6;--muted:#A8998C;--line:#31251D;--nose:#C98B5B;--nose-ink:#1A0F08;--velvet:#0D0805;--tint:#3A2A1E;color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#130D09;--surface:#1D1510;--ink:#F4EDE6;--muted:#A8998C;--line:#31251D;--nose:#C98B5B;--nose-ink:#1A0F08;--velvet:#0D0805;--tint:#3A2A1E;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 90px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}p{margin:0}
:focus-visible{outline:3px solid var(--nose);outline-offset:3px;border-radius:8px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3,h4,h5{font-family:var(--display);margin:0;font-weight:600}
h2{font-size:clamp(2.1rem,4.6vw,3.7rem);line-height:1.02;letter-spacing:-.04em}
h3{font-size:1.3rem;line-height:1.2;letter-spacing:-.02em}
[hidden]{display:none!important}

.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;border-radius:999px;background:var(--nose);color:var(--nose-ink);font:600 1rem var(--body);text-decoration:none;border:0;cursor:pointer;position:relative;overflow:hidden;transition:transform .2s;box-shadow:0 10px 26px -10px color-mix(in srgb,var(--nose) 80%,transparent)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-130%);transition:transform .7s}
.btn:hover{transform:translateY(-2px)}.btn:hover::after{transform:translateX(130%)}
.btn.ghost{background:transparent;color:inherit;border:1.5px solid color-mix(in srgb,currentColor 28%,transparent);box-shadow:none}
.btn.sm{height:40px;padding:0 18px;font-size:.92rem}
.av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font:600 .85rem var(--body);font-style:normal;color:#fff;flex:none}
.a1{background:var(--nose)}.a2{background:var(--iris)}.a3{background:#B8863F}

/* nav: floating glass pill */
.nav{position:fixed;z-index:50;top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;transform:translateX(-50%);width:min(1080px,calc(100% - 24px))}
.nav .in{display:flex;align-items:center;justify-content:space-between;height:58px;padding:0 9px 0 20px;border-radius:999px;background:color-mix(in srgb,var(--surface) 72%,transparent);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border:1px solid color-mix(in srgb,var(--ink) 9%,transparent);transition:box-shadow .3s,background .3s}
.nav.sc .in{background:color-mix(in srgb,var(--surface) 88%,transparent);box-shadow:0 14px 40px -18px rgba(40,25,15,.45)}
.logo{display:flex;align-items:center;gap:10px;font:700 1.25rem var(--display);letter-spacing:-.04em;text-decoration:none}
.nav nav{display:flex;gap:6px;align-items:center}
.nav nav a:not(.btn){padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:500;font-size:.95rem;transition:background .2s,color .2s}
.nav nav a:not(.btn):hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
@media(max-width:820px){.nav nav a.hm{display:none}}

/* hero: inset dark panel */
.panel{position:relative;margin:12px;border-radius:32px;background:#1F1510;color:#fff;overflow:hidden;padding:150px 24px 72px;border:1px solid rgba(255,255,255,.08);isolation:isolate}
.aur{position:absolute;inset:0;z-index:-2;overflow:hidden}
.aur i{position:absolute;width:560px;height:560px;border-radius:50%;filter:blur(90px);opacity:.5;animation:drift 16s ease-in-out infinite alternate}
.aur i:nth-child(1){background:var(--nose);left:-8%;top:-30%}
.aur i:nth-child(2){background:var(--iris);right:-10%;top:-20%;animation-delay:-5s}
.aur i:nth-child(3){background:var(--amber);left:38%;top:-50%;opacity:.28;animation-delay:-9s}
@keyframes drift{to{transform:translate(70px,50px) scale(1.15)}}
.grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 25%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 25%,#000 20%,transparent 75%)}
.hc{max-width:900px;margin:0 auto;text-align:center}
.pill{display:inline-flex;gap:10px;align-items:center;padding:6px 16px 6px 6px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#F1E9E0;font-size:.9rem;text-decoration:none;margin-bottom:30px}
.pill b{background:var(--nose);color:#fff;border-radius:999px;padding:2px 10px;font-weight:600;font-size:.8rem}
h1{font-size:clamp(2.8rem,7.4vw,6.2rem);line-height:.98;letter-spacing:-.055em}
.l{display:block;overflow:hidden;padding-bottom:.1em}
.l>span{display:block}
.sub{margin:26px auto 34px;max-width:56ch;font-size:1.2rem;color:rgba(241,233,224,.7)}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.note{margin-top:18px;font-size:.9rem;color:rgba(241,233,224,.55)}
.js .pill,.js .sub,.js .cta,.js .note{opacity:0;animation:fadeup .9s cubic-bezier(.2,.8,.2,1) forwards}
.js .pill{animation-delay:.05s}.js .sub{animation-delay:.55s}.js .cta{animation-delay:.7s}.js .note{animation-delay:.85s}
.js .l>span{transform:translateY(108%);animation:up 1s cubic-bezier(.2,.9,.2,1) forwards;animation-delay:calc(.15s + var(--i)*.13s)}
@keyframes up{to{transform:none}}
@keyframes fadeup{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}

/* hero product window: autoplays */
.winwrap{max-width:1020px;margin:72px auto 0;perspective:1800px}
.win{--tilt:12;transform:rotateX(calc(var(--tilt)*1deg));transform-origin:50% 0;background:#2A1D15;border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 60px 120px -30px rgba(166,124,82,.35),0 0 0 1px rgba(255,255,255,.03);overflow:hidden}
.js .win{opacity:0;animation:winin 1.2s .75s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes winin{from{opacity:0;translate:0 70px}to{opacity:1;translate:0 0}}
.wbar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);font-size:.82rem;color:#B8A898}
.wbar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.wbar span{margin-left:10px}.wbar em{margin-left:auto;font-style:normal;color:#6CC4AB}
.wbody{display:grid;grid-template-columns:70px 1fr 270px;min-height:420px}
.rail{padding:16px 12px;display:grid;gap:10px;align-content:start;border-right:1px solid rgba(255,255,255,.08)}
.rail div{aspect-ratio:8.5/11;background:#fff;border-radius:4px;opacity:.35;background-image:repeating-linear-gradient(#fff 0 6px,#E8DED3 6px 8px)}
.rail div:first-child{opacity:1;outline:2px solid var(--nose);outline-offset:2px}
.stage2{display:grid;place-items:center;padding:22px;background:#1A110C}
.mp{position:relative;width:100%;max-width:520px;aspect-ratio:8.5/7.2;background:#fff;color:#2A1A10;border-radius:4px;container-type:inline-size;box-shadow:0 20px 50px -20px rgba(0,0,0,.7)}
.mp b.mt{position:absolute;left:7%;top:7%;font:700 4.6cqw var(--display);letter-spacing:-.03em}
.mp small.ms{position:absolute;left:7%;top:15%;font-size:2.4cqw;color:#7A6C60}
.rw{position:absolute;left:7%;right:7%;height:5cqw;display:flex;align-items:flex-end;font-size:2.6cqw}
.rw .lb{width:29%;color:#7A6C60;padding-bottom:.4cqw}
.rw .ln{flex:1;height:100%;border-bottom:.3cqw solid #CDBFB2;position:relative;display:flex;align-items:flex-end;padding:0 1%}
.rw .ln span{display:block;padding-bottom:.4cqw;white-space:nowrap;font-weight:500}
.r1{top:27%}.r2{top:39%}.r3{top:51%}.r4{top:63%}
.r3 .ln{animation:hl3 10s infinite}.r4 .ln{animation:hl4 10s infinite}
.r3 .ln span{animation:t3 10s infinite}.r4 .ln span{animation:t4 10s infinite}
@keyframes hl3{0%,8%{background:transparent}9%,26%{background:#F3E8DD}27%,100%{background:transparent}}
@keyframes hl4{0%,31%{background:transparent}32%,48%{background:#F3E8DD}49%,100%{background:transparent}}
@keyframes t3{0%{clip-path:inset(0 100% 0 0)}10%{clip-path:inset(0 100% 0 0);animation-timing-function:steps(12,end)}24%,100%{clip-path:inset(0 0 0 0)}}
@keyframes t4{0%{clip-path:inset(0 100% 0 0)}34%{clip-path:inset(0 100% 0 0);animation-timing-function:steps(17,end)}46%,100%{clip-path:inset(0 0 0 0)}}
.ck{position:absolute;right:1%;bottom:.2cqw;font-size:3.4cqw;color:#2F6F5E;font-weight:700;animation:ck 10s infinite;transform-origin:center}
@keyframes ck{0%,47%{transform:scale(0)}51%{transform:scale(1.3)}55%,100%{transform:scale(1)}}
.sigl{position:absolute;left:7%;right:7%;bottom:9%;border-top:.3cqw solid #2A1A10;padding-top:.5cqw;font-size:2.2cqw;color:#7A6C60;display:flex;justify-content:space-between}
.sgn{position:absolute;left:10%;bottom:14%;width:38%}
.sgn path{stroke:#2A1A10;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420;animation:draw 10s infinite}
@keyframes draw{0%,57%{stroke-dashoffset:420}74%,100%{stroke-dashoffset:0}}
.cur{position:absolute;width:max(14px,4.2cqw);height:auto;left:96%;top:100%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));animation:cur 10s infinite;z-index:3}
@keyframes cur{0%{left:96%;top:104%}8%{left:40%;top:56%}25%{left:40%;top:56%}31%{left:46%;top:68%}47%{left:46%;top:68%}54%{left:30%;top:84%}76%{left:36%;top:85%}85%{left:98%;top:108%}100%{left:98%;top:108%}}
.side{padding:18px;border-left:1px solid rgba(255,255,255,.08);display:grid;gap:12px;align-content:start}
.side h5{font-size:.9rem;color:#B8A898;font-weight:500;margin-bottom:2px}
.sg1{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:rgba(255,255,255,.05)}
.sg1 b{display:block;font-size:.93rem;font-weight:600;color:#fff;line-height:1.2}
.sg1 small{color:#A39280;font-size:.78rem}
.stt{position:relative;margin-left:auto;width:66px;height:24px}
.stt em{position:absolute;right:0;top:0;font-style:normal;font-size:.74rem;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;opacity:0;background:rgba(255,255,255,.1);color:#CDBFB0}
.stt .on2{background:rgba(108,196,171,.2);color:#7FDDBF}
.stt .am{background:rgba(255,180,94,.2);color:#FFC47F}
.stt .ir{background:rgba(217,179,140,.22);color:#E0BE96}
.j1{animation:j1 10s infinite}.j2{animation:j2 10s infinite}
.m1{animation:m1 10s infinite}.m2{animation:m2 10s infinite}.m3{animation:m3 10s infinite}.m4{animation:m4 10s infinite}
@keyframes j1{0%,73.9%{opacity:1}74%,100%{opacity:0}}
@keyframes j2{0%,73.9%{opacity:0}74%,100%{opacity:1}}
@keyframes m1{0%,79.9%{opacity:1}80%,100%{opacity:0}}
@keyframes m2{0%,79.9%{opacity:0}80%,85.9%{opacity:1}86%,100%{opacity:0}}
@keyframes m3{0%,85.9%{opacity:0}86%,91.9%{opacity:1}92%,100%{opacity:0}}
@keyframes m4{0%,91.9%{opacity:0}92%,100%{opacity:1}}
.pbar{height:4px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:6px}
.pbar s{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--nose),var(--amber));transform-origin:left;animation:pb 10s infinite}
@keyframes pb{0%{transform:scaleX(0)}74%{transform:scaleX(.6)}92%,100%{transform:scaleX(1)}}
.toast{margin-top:4px;padding:10px 12px;border-radius:10px;background:rgba(108,196,171,.16);color:#8EE6C8;font-size:.82rem;font-weight:600;opacity:0;animation:toast 10s infinite}
@keyframes toast{0%,80%{opacity:0;translate:0 8px}83%,92%{opacity:1;translate:0 0}96%,100%{opacity:0}}
@media(max-width:820px){.wbody{grid-template-columns:1fr}.rail,.side{display:none}}

/* marquee */
.mq{padding:56px 0 8px;text-align:center;color:var(--muted)}
.mq p{font-size:.95rem;margin-bottom:22px}
.mq .vp{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.tr{display:flex;gap:48px;width:max-content;animation:mq 42s linear infinite}
.tr span{font:600 1.5rem var(--display);letter-spacing:-.03em;color:color-mix(in srgb,var(--ink) 42%,transparent);white-space:nowrap}
.tr span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--nose);margin-right:48px;vertical-align:middle}
@keyframes mq{to{transform:translateX(-50%)}}
.mq:hover .tr{animation-play-state:paused}

section.s{padding:128px 0 0}
.sh{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.sh p{color:var(--muted);font-size:1.1rem;max-width:44ch}
@media(max-width:860px){.sh{grid-template-columns:1fr;gap:16px}}

/* bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.bc{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:32px;display:flex;flex-direction:column;gap:22px;transition:border-color .3s,transform .3s}
.bc:hover{border-color:color-mix(in srgb,var(--nose) 45%,var(--line));transform:translateY(-3px)}
.bc::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0),color-mix(in srgb,var(--nose) 13%,transparent),transparent 60%)}
.bc:hover::before{opacity:1}
.bc p{color:var(--muted);margin-top:8px;font-size:.99rem;max-width:42ch}
.c7{grid-column:span 7}.c5{grid-column:span 5}.c4{grid-column:span 4}
@media(max-width:900px){.c7,.c5,.c4{grid-column:span 12}}
.vis{margin-top:auto}
.sr{display:grid;grid-template-columns:34px 56px 1fr 62px;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--bg);margin-bottom:10px}
.sr b{font-weight:600;font-size:.95rem}.sr em{font-style:normal;color:var(--muted);font-size:.84rem;text-align:right}
.sr u{height:6px;border-radius:9px;background:var(--line);overflow:hidden;display:block;text-decoration:none}
.sr s{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--nose),var(--iris));animation:fill 5.5s ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes fill{0%{width:0}35%,85%{width:var(--w)}100%{width:0}}
.ev{background:var(--bg);border-radius:16px;padding:22px}
.ln1{font:500 1.15rem var(--display);letter-spacing:-.02em}
.tw{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;border-right:2px solid var(--nose);color:var(--nose);animation:tw 3.4s steps(7) infinite alternate}
@keyframes tw{0%,12%{width:0}100%{width:7.2ch}}
.chip{display:inline-block;margin-top:14px;font-size:.8rem;font-weight:600;color:var(--muted);padding:4px 12px;border-radius:999px;border:1px solid var(--line)}
.frm{position:relative;height:160px;overflow:hidden;display:grid;gap:10px;align-content:center;background:var(--bg);border-radius:16px;padding:18px}
.fld{height:34px;border-radius:9px;border:1.5px solid var(--line);background:var(--surface);padding:0 12px;font-size:.8rem;color:var(--muted);display:flex;align-items:center;animation:pulse 4s infinite;animation-delay:var(--d)}
@keyframes pulse{0%{border-color:var(--line);background:var(--surface)}6%,22%{border-color:var(--nose);background:var(--tint)}30%,100%{border-color:var(--line);background:var(--surface)}}
.scan{position:absolute;left:0;right:0;height:2px;background:var(--nose);box-shadow:0 0 18px 4px color-mix(in srgb,var(--nose) 55%,transparent);animation:scan 4s ease-in-out infinite;z-index:2}
@keyframes scan{0%{top:0;opacity:0}10%,90%{opacity:1}100%{top:100%;opacity:0}}
.mg{position:relative;height:160px;background:var(--bg);border-radius:16px;overflow:hidden}
.pg{position:absolute;left:50%;top:22px;margin-left:-42px;width:84px;height:116px;border-radius:8px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px -10px rgba(40,25,15,.35);background-image:repeating-linear-gradient(#fff 0 10px,#EDE4DA 10px 12px)}
.p1{animation:mL 5s ease-in-out infinite}.p3{animation:mR 5s ease-in-out infinite}.p2{animation:mC 5s ease-in-out infinite;z-index:2}
@keyframes mL{0%,10%{transform:translateX(-96px) rotate(-8deg)}45%,65%{transform:translateX(-5px) rotate(-3deg)}100%{transform:translateX(-96px) rotate(-8deg)}}
@keyframes mR{0%,10%{transform:translateX(96px) rotate(8deg)}45%,65%{transform:translateX(5px) rotate(3deg)}100%{transform:translateX(96px) rotate(8deg)}}
@keyframes mC{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.au{list-style:none;margin:0;padding:6px 18px;background:var(--bg);border-radius:16px}
.au li{display:flex;gap:12px;align-items:center;padding:10px 0;font-size:.93rem;border-bottom:1px solid var(--line);opacity:0;animation:evn 8s infinite;animation-delay:calc(var(--i)*.7s)}
.au li:last-child{border-bottom:0}
.au i{width:8px;height:8px;border-radius:50%;background:var(--nose);flex:none}
.au span{margin-left:auto;color:var(--muted);font-size:.82rem}
@keyframes evn{0%{opacity:0;translate:0 10px}6%,88%{opacity:1;translate:0 0}96%,100%{opacity:0}}

/* try it */
#try .head{text-align:center;max-width:680px;margin:0 auto 44px}
#try .head p{color:var(--muted);margin-top:14px;font-size:1.1rem}
#try .editor{margin-top:0;border-radius:32px;padding:20px}
/* editor demo: the memorable element */
.editor{margin-top:52px;background:var(--velvet);border-radius:22px;padding:16px;box-shadow:0 30px 60px -30px rgba(40,25,15,.55);color:#E6DBD0}
.prog{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:2px 2px 14px;list-style:none}
.prog li{display:flex;align-items:center;gap:9px;font:600 .92rem var(--body);color:#A89888;padding:6px 14px 6px 7px;border-radius:999px;background:rgba(255,255,255,.06)}
.prog i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.14);font:700 .78rem var(--body);font-style:normal;color:#F4EDE6}
.prog li.cur{color:#fff;background:rgba(255,255,255,.16)}
.prog li.cur i{background:var(--nose);color:#fff}
.prog li.done{color:#fff}
.prog li.done i{background:#6CC4AB;color:#0E1E19}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0 2px 14px}
.bar .t{font:600 .94rem var(--body);background:rgba(255,255,255,.08);color:#F4EDE6;border:1.5px solid transparent;border-radius:10px;padding:9px 14px;cursor:pointer}
.bar .t[aria-pressed="true"]{background:var(--nose);color:#fff}
.bar .sp{flex:1}
.a{font:500 .9rem var(--body);background:transparent;color:#C9BBAC;border:0;cursor:pointer;padding:8px 10px;border-radius:8px}
.a:hover{color:#fff}
.stage{background:#E4DBD1;border-radius:12px;padding:28px 14px;display:flex;justify-content:center}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .stage{background:#150E0A}}
:root[data-theme="dark"] .stage{background:#150E0A}
.sheet{position:relative;width:100%;max-width:660px;aspect-ratio:8.5/9.4;background:#fff;color:#2A1A10;border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.25);padding:6% 7%;font-size:clamp(11px,1.9vw,15px);line-height:1.5;cursor:crosshair;overflow:hidden;touch-action:manipulation}
.sheet[data-tool="none"]{cursor:text}
.sheet h4{margin:0 0 .2em;font:700 1.55em var(--display);letter-spacing:-.02em}
.sheet .meta{color:#7A6C60;margin-bottom:1.4em}
.sheet .row{display:flex;gap:1em;margin-bottom:.9em;align-items:baseline}
.sheet .lb{width:9em;color:#7A6C60;flex:none}
.sheet .ed{flex:1;border-bottom:1.5px solid #CDBFB2;min-height:1.5em;outline:0;padding:0 .2em;cursor:text}
.sheet .ed:empty::before{content:"Click to fill in";color:#B3A598}
.sheet .ed:focus{background:#F3E8DD;border-color:#7A4B2A}
.sheet p.fine{color:#7A6C60;font-size:.86em;margin-top:1.4em;max-width:46ch}
.sigline{position:absolute;left:7%;right:7%;bottom:7%;display:flex;justify-content:space-between;border-top:1.5px solid #2A1A10;padding-top:.3em;color:#7A6C60;font-size:.85em}
.ph{position:absolute;transform:translate(-4px,-60%);font-weight:600;white-space:nowrap;color:#2A1A10;touch-action:none}
.ph:not(.txt){cursor:grab}
.ph.sel{outline:2px solid #7A4B2A;outline-offset:3px;border-radius:3px}
.ph .x{display:none;position:absolute;top:-1.1em;right:-1.1em;width:1.6em;height:1.6em;border-radius:50%;border:0;background:#7A4B2A;color:#fff;font:700 1em/1 var(--body);cursor:pointer;padding:0}
.ph.sel .x,.ph:hover .x{display:block}
.ph.txt{background:#F3E8DD;border-bottom:2px solid #7A4B2A;padding:0 .35em 0 .1em;border-radius:3px 3px 0 0;display:flex;align-items:center;gap:.2em}
.ph .grip{cursor:grab;color:#B08A68;font-size:.9em;user-select:none;touch-action:none;padding:0 .2em}
.ph .tx{outline:0;min-width:4em}
.ph.chk{font-size:1.5em;color:#2F6F5E}
.ph.dt{border-bottom:2px solid #2F6F5E;padding:0 .3em}
.ph.sg img{display:block;height:3.4em;width:auto;user-select:none}
.send{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:14px 2px 2px}
.hint{color:#D9CCBF;font-size:.96rem;min-height:1.5em}
.hint b{color:#fff}
.send .btn[disabled]{opacity:.35;cursor:not-allowed;transform:none}
.track{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:12px 2px 0;padding:0}
.track li{padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.06);color:#A89888;font-weight:600;font-size:.9rem;transition:background .3s,color .3s}
.track li.on{background:#6CC4AB;color:#0E1E19}
.fin{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:14px;padding:16px 18px;border-radius:14px;background:rgba(108,196,171,.16);color:#F4EDE6}
.fin .fa{display:flex;gap:10px;align-items:center}
.tabs{display:flex;gap:6px;margin-bottom:12px}
.tabs button{font:600 .9rem var(--body);background:transparent;color:var(--muted);border:1.5px solid var(--line);border-radius:9px;padding:7px 14px;cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
#typed{width:100%;font:500 1rem var(--body);padding:12px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
#typedPrev{display:block;height:110px;margin-top:12px;background:#fff;border:1.5px dashed #CDBFB2;border-radius:12px;font:600 3rem/110px var(--hand);color:#2A1A10;padding:0 16px;overflow:hidden;white-space:nowrap}



/* compare */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:28px;background:var(--surface)}
.cmp{width:100%;border-collapse:collapse;min-width:600px}
.cmp th,.cmp td{padding:20px 28px;text-align:left;border-bottom:1px solid var(--line)}
.cmp thead th{font:600 1rem var(--display);color:var(--muted);padding-top:24px}
.cmp thead th:nth-child(2){color:var(--nose)}
.cmp td:first-child{font-weight:600}
.cmp td:nth-child(2){background:color-mix(in srgb,var(--nose) 6%,transparent);font-weight:600}
.cmp td:nth-child(2)::before{content:"\2713";color:var(--nose);margin-right:10px;font-weight:700}
.cmp td:nth-child(3){color:var(--muted)}
.cmp tr:last-child td{border-bottom:0}

/* security */
.sec{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.sec ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.sec li{display:flex;gap:18px;padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--surface);transition:transform .3s,border-color .3s}
.sec li:hover{transform:translateX(6px);border-color:var(--nose)}
.sec li i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--nose);margin-top:.5em;box-shadow:0 0 0 6px color-mix(in srgb,var(--nose) 18%,transparent)}
.sec li b{display:block;font:600 1.1rem var(--display);letter-spacing:-.02em}
.sec li span{color:var(--muted)}
@media(max-width:860px){.sec{grid-template-columns:1fr;gap:28px}}

/* pricing: paid only */
.bill{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:36px}
.bill button{font:600 .94rem var(--body);border:0;background:transparent;color:var(--muted);padding:10px 22px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.bill button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:36px;display:flex;flex-direction:column;position:relative;transition:transform .3s}
.plan:hover{transform:translateY(-6px)}
.plan.pop{border:2px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(120deg,var(--nose),var(--iris),var(--amber),var(--nose)) border-box;background-size:auto,300% 100%;animation:bshift 6s linear infinite}
@keyframes bshift{from{background-position:0 0,0 0}to{background-position:0 0,300% 0}}
.plan.pop::after{content:"Most chosen";position:absolute;top:-14px;left:32px;background:var(--nose);color:var(--nose-ink);font:600 .82rem var(--body);padding:4px 14px;border-radius:999px}
.price{font:600 4rem var(--display);letter-spacing:-.06em;margin:18px 0 2px;line-height:1}
.price small{font:500 1rem var(--body);color:var(--muted);letter-spacing:0}
.billed{color:var(--muted);font-size:.88rem;min-height:1.4em}
.plan .for{color:var(--muted);font-size:.96rem;margin-top:14px;min-height:3.3em}
.plan ul{list-style:none;padding:0;margin:22px 0 30px;display:grid;gap:12px;flex:1}
.plan li{padding-left:28px;position:relative;font-size:.97rem}
.plan li::before{content:"";position:absolute;left:1px;top:.42em;width:13px;height:7px;border-left:2.5px solid var(--nose);border-bottom:2.5px solid var(--nose);transform:rotate(-45deg)}
.plan .btn{width:100%}
.guar{margin-top:26px;color:var(--muted);font-size:.95rem}
@media(max-width:900px){.plans{grid-template-columns:1fr}}

/* faq */
.faq{max-width:820px;margin:0 auto}
details{border-bottom:1px solid var(--line);padding:24px 0}
summary{cursor:pointer;font:600 1.25rem var(--display);letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--nose);font-size:1.7rem;line-height:1;transition:transform .3s}
details[open] summary::after{transform:rotate(135deg)}
details p{color:var(--muted);margin-top:12px;max-width:62ch}
details[open] p{animation:fadeup .4s ease both}
.center{text-align:center;margin-bottom:48px}

/* final + footer */
.fp{position:relative;margin:0 12px;border-radius:32px;background:#1F1510;color:#fff;overflow:hidden;padding:120px 24px;text-align:center;isolation:isolate;border:1px solid rgba(255,255,255,.08)}
.fp h2{font-size:clamp(2.4rem,6vw,5rem);letter-spacing:-.05em;max-width:14ch;margin:0 auto}
.fp p{color:rgba(241,233,224,.7);margin:20px auto 34px;max-width:42ch;font-size:1.15rem}
footer{padding:80px 0 56px}
.fg{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;color:var(--muted);font-size:.95rem}
.fg h5{font-size:.9rem;color:var(--ink);margin-bottom:14px}
.fg a{display:block;text-decoration:none;margin-bottom:10px}.fg a:hover{color:var(--ink)}
.fg .lg p{margin-top:14px;max-width:30ch}
.copy{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
@media(max-width:760px){.fg{grid-template-columns:1fr 1fr}.fg .lg{grid-column:span 2}}

dialog{border:0;border-radius:22px;padding:24px;background:var(--surface);color:var(--ink);width:min(440px,92vw);box-shadow:0 30px 80px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(25,15,10,.65);backdrop-filter:blur(4px)}
dialog h3{margin-bottom:12px}
#pad{width:100%;height:150px;background:#fff;border:1.5px dashed #CDBFB2;border-radius:12px;touch-action:none;cursor:crosshair;display:block}
.dlg-act{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}

/* scroll reveal */
.js .rv{opacity:0;transform:translateY(34px);filter:blur(8px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),filter .9s;transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .l>span,.js .rv,.js .pill,.js .sub,.js .cta,.js .note,.js .win{opacity:1;transform:none;filter:none;translate:none}
  .win{--tilt:0}
  .r3 .ln span,.r4 .ln span{clip-path:none}.sgn path{stroke-dashoffset:0}.ck{transform:none}.stt .m4,.stt .j2{opacity:1}.au li{opacity:1}.tr{animation:none}
}
.panel .btn:not(.ghost),.fp .btn{background:#F4EAE0;color:#2A1A10;box-shadow:0 10px 26px -10px rgba(0,0,0,.5)}
.pill b{background:#D9B38C;color:#2A1A10}
.win{--nose:#C9976A}
#try .editor{--nose:#A8683A}

/* hero: tagline left, demo right */
.hgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center;max-width:1120px;margin:0 auto}
.hgrid .hc{max-width:none;margin:0;text-align:left}
.hgrid h1{font-size:clamp(2.4rem,3.9vw,3.8rem);line-height:1;letter-spacing:-.05em}
.hgrid .sub{margin:24px 0 32px;max-width:44ch;font-size:1.15rem}
.hgrid .cta{justify-content:flex-start}
.hgrid .winwrap{margin:0;max-width:none}
.hgrid .win{transform-origin:0 50%;transform:rotateY(calc(var(--tilt)*-.7deg))}
.hgrid .wbody{grid-template-columns:1fr;min-height:0}
.hgrid .rail{display:none}
.hgrid .stage2{padding:18px}
.hgrid .side{border-left:0;border-top:1px solid rgba(255,255,255,.08);grid-template-columns:1fr 1fr;gap:10px 12px;padding:16px 18px 18px}
.hgrid .side h5:first-child{grid-column:1/-1;margin:0}
.hgrid .side>div:nth-of-type(3),.hgrid .side .toast{grid-column:1/-1}
.hgrid .side .toast{margin-top:0}
.hgrid .sg1{padding:10px}
@media(max-width:980px){
  .hgrid{grid-template-columns:1fr;gap:56px}
  .hgrid .win{transform:none}
  .hgrid h1{font-size:clamp(2.6rem,10vw,3.8rem)}
}



:root{--bg:#fff;--surface:#fff;--ink:#191919;--muted:#66635f;--line:#e9e7e4;--nose:#246b5a;--nose-ink:#fff;--iris:#6c9b8c;--amber:#dcece5;--moss:#246b5a;--velvet:#191919;--tint:#edf5f1;--display:"Geist",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--body:"Geist",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#fff;--surface:#fff;--ink:#191919;--muted:#66635f;--line:#e9e7e4;--nose:#246b5a;--nose-ink:#fff;--velvet:#191919;--tint:#edf5f1;color-scheme:light}}
:root[data-theme="dark"]{--bg:#fff;--surface:#fff;--ink:#191919;--muted:#66635f;--line:#e9e7e4;--nose:#246b5a;--nose-ink:#fff;--velvet:#191919;--tint:#edf5f1;color-scheme:light}
body{font-size:16px;line-height:1.55;letter-spacing:-.012em;background:#fff;color:#191919}
.wrap{max-width:1160px;padding-left:28px;padding-right:28px}
h1,h2,h3,h4,h5{font-weight:650;letter-spacing:-.055em}
h2{font-size:clamp(2.2rem,4.3vw,3.55rem);line-height:1.03;letter-spacing:-.065em}
.btn{height:46px;border-radius:8px;background:#191919;color:#fff;box-shadow:none;font-size:.96rem;padding:0 21px;transition:transform .18s,background .18s}
.btn:hover{background:#333;transform:translateY(-1px)}.btn::after{display:none}.btn.ghost{border:1px solid #d8d6d2;color:#191919;background:#fff}.btn.ghost:hover{background:#f7f6f4}
.nav{top:12px;width:min(1160px,calc(100% - 32px))}.nav .in{height:62px;padding:0 12px 0 20px;border-radius:14px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border:1px solid #e9e7e4;box-shadow:0 5px 20px rgba(20,20,20,.035)}.nav.sc .in{background:rgba(255,255,255,.97);box-shadow:0 10px 28px rgba(20,20,20,.08)}
.logo{font-size:1.2rem;letter-spacing:-.06em}.logo::before{content:"";width:25px;height:25px;display:inline-block;border-radius:7px;background:#dcece5;border:1px solid #b8d4c8;box-shadow:inset 0 -6px 0 rgba(36,107,90,.12);margin-right:1px}
.nav nav a:not(.btn){font-size:.9rem;color:#4d4b48;border-radius:7px}.nav nav a:not(.btn):hover{background:#f4f3f1;color:#191919}
.panel{margin:0;border-radius:0;background:#fff;color:#191919;padding:156px 24px 60px;border:0;overflow:hidden}
.panel .aur,.panel .grid{display:none}.hc{max-width:900px}.pill{background:#f4f3f1;color:#373633;border:1px solid #e9e7e4;border-radius:7px;font-size:.83rem;margin-bottom:25px;padding:5px 12px 5px 5px}.pill b{background:#dcece5;color:#205f50;border-radius:5px;font-size:.76rem}
h1{font-size:clamp(3.2rem,8vw,6.4rem);line-height:.97;letter-spacing:-.078em;font-weight:650;max-width:900px;margin:auto}
h1 .l:nth-child(2)>span{color:#246b5a}.sub{color:#62615e;font-size:1.17rem;max-width:54ch;margin:26px auto 28px}.note{color:#77736e;font-size:.86rem;margin-top:14px}
.cta .btn{min-width:144px}.cta .btn.ghost{background:transparent}
.winwrap{max-width:1020px;margin:64px auto 0;perspective:none}.win{transform:none!important;background:#fbfaf9;border:1px solid #e7e5e2;border-radius:13px;box-shadow:0 32px 90px -55px rgba(30,30,30,.35);overflow:hidden}.wbar{color:#77736e;border-color:#eceae7}.wbar i{background:#dedbd7}.wbody{background:#fff}.rail,.side{border-color:#ebe9e6}.side h5{color:#77736e}.sg1{background:#f6f5f3}.sg1 b{color:#242321}.sg1 small{color:#77736e}.stage2{background:#f3f2ef}.mp{box-shadow:0 8px 28px rgba(40,35,30,.12)}
.mq{padding:46px 0 0;color:#77736e}.mq p{font-size:.85rem;letter-spacing:.01em}.tr{gap:42px}.tr span{font-size:1.25rem;color:#77736e}.tr span::before{background:#b9d6ca;width:7px;height:7px;margin-right:42px}
section.s{padding:104px 0 0}.sh{gap:48px;margin-bottom:38px}.sh p{font-size:1.05rem;color:#696763}.bc{border-radius:12px;border-color:#e9e7e4;padding:28px;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.018);gap:20px}.bc:hover{border-color:#c6d9d0;transform:translateY(-2px);box-shadow:0 12px 30px rgba(30,50,40,.06)}.bc::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,0),rgba(36,107,90,.06),transparent 60%)}.bc p{color:#66635f}.sr,.ev{border-radius:9px;background:#f7f6f4}.sr{padding:10px 12px}.sr s{background:linear-gradient(90deg,#246b5a,#86b2a2)}

/* Supporting sections follow the same quiet, paper-like system. */
.plan,.faq details,.security-card,.trust-card{border-radius:12px!important;border-color:#e8e6e2!important;box-shadow:none!important}.plan{background:#fff!important}.plan.pop{border:1.5px solid #246b5a!important}.bill{background:#f4f3f1!important;border-radius:8px!important}.bill button{border-radius:6px!important}.faq details{background:#fff!important}.fp{border-radius:16px!important;background:#191919!important;color:#fff!important;box-shadow:none!important}.fp .aur{opacity:.18}.fp .grid{opacity:.12}.fp .btn{background:#fff;color:#191919}
footer{margin-top:100px!important;border-top:1px solid #e9e7e4!important;background:#faf9f7!important}.fg{padding-top:54px!important}.copy{color:#77736e!important}
@media(max-width:820px){.panel{padding:132px 20px 40px}.winwrap{margin-top:46px}.nav{width:calc(100% - 20px)}.nav .in{height:56px}.wrap{padding-left:20px;padding-right:20px}section.s{padding-top:76px}.mq{padding-top:32px}}
@media(max-width:560px){h1{font-size:clamp(2.8rem,14vw,4.5rem)}.sub{font-size:1.03rem}.panel{padding-top:120px}.cta{gap:9px}.cta .btn{min-width:0;flex:1}.winwrap{margin-left:-6px;margin-right:-6px}.bc{padding:23px}.sh{margin-bottom:28px}.nav nav a:not(.btn){padding:7px 9px}}
@media(prefers-reduced-motion:reduce){.aur i,.tr,.win,.js .l>span,.js .pill,.js .sub,.js .cta,.js .note{animation:none!important;transform:none!important;opacity:1!important}}



/* A focused, single-column product story: promise first, product immediately after. */
.panel{padding:142px 28px 52px}
.hgrid{display:flex;flex-direction:column;align-items:stretch;gap:0;max-width:1100px}
.hgrid .hc{width:100%;max-width:850px;margin:0 auto;text-align:center}
.hgrid .pill{margin-bottom:22px}
.hgrid h1{font-size:clamp(3.25rem,7vw,5.8rem);line-height:.99;max-width:880px;letter-spacing:-.075em}
.hgrid h1 .l{display:inline;overflow:visible;padding:0}
.hgrid h1 .l>span{display:inline}
.hgrid h1 .l:nth-child(1)::after,.hgrid h1 .l:nth-child(2)::after{content:" ";white-space:pre}
.hgrid .sub{max-width:58ch;margin:20px auto 0;font-size:clamp(1.02rem,1.6vw,1.18rem);line-height:1.55}
.hgrid .winwrap{width:100%;max-width:1020px;margin:42px auto 0}
.hgrid .win{transform:none!important;transform-origin:center;will-change:transform,opacity}
.hgrid .wbody{grid-template-columns:70px minmax(0,1fr) 250px;min-height:410px}
.hgrid .rail{display:grid}
.hgrid .side{border-left:1px solid #ebe9e6;border-top:0;grid-template-columns:1fr;gap:12px;padding:18px}
.hgrid .side h5:first-child{grid-column:auto}
.hgrid .side>div:nth-of-type(3),.hgrid .side .toast{grid-column:auto}
.hgrid .side .toast{margin-top:4px}
.hero-actions{display:flex;flex-direction:column;align-items:center;margin-top:25px}
.hero-actions .note{margin-top:11px;color:#77736e}
/* Quiet arrival instead of theatrical headline motion. */
.js .hgrid .pill,.js .hgrid .sub{opacity:0;animation:soft-arrive .7s cubic-bezier(.2,.75,.25,1) forwards}
.js .hgrid .pill{animation-delay:.05s}
.js .hgrid .sub{animation-delay:.17s}
.js .hgrid .l>span{opacity:0;transform:translateY(12px);animation:soft-arrive .72s cubic-bezier(.2,.75,.25,1) forwards;animation-delay:calc(.08s + var(--i)*.08s)}
.js .hgrid .win{opacity:0;animation:demo-arrive 1s .28s cubic-bezier(.2,.75,.25,1) forwards}
.js .hero-actions{opacity:0;animation:soft-arrive .65s .48s cubic-bezier(.2,.75,.25,1) forwards}
@keyframes soft-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes demo-arrive{from{opacity:0;transform:translateY(20px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Give the in-product walkthrough time to read; keep movement subtle. */
.tr{animation-duration:60s}
.mp .r3 .ln,.mp .r4 .ln,.mp .r3 .ln span,.mp .r4 .ln span,.mp .ck,.mp .sgn path,.mp .cur,
.hgrid .j1,.hgrid .j2,.hgrid .m1,.hgrid .m2,.hgrid .m3,.hgrid .m4,.hgrid .pbar s,.hgrid .toast{animation-duration:16s}
.hgrid .cur{filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))}
.js .rv{filter:none;transform:translateY(18px);transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1);}
@media(max-width:980px){.hgrid{gap:0}.hgrid .win{transform:none!important}.hgrid .winwrap{margin-top:34px}.hgrid .wbody{grid-template-columns:1fr;min-height:0}.hgrid .rail,.hgrid .side{display:none}}
@media(max-width:680px){.panel{padding:118px 18px 40px}.hgrid h1{font-size:clamp(2.65rem,12vw,4.2rem)}.hgrid .pill{margin-bottom:18px}.hgrid .sub{margin-top:15px}.hgrid .winwrap{margin-top:26px}.hgrid .stage2{padding:12px}.hero-actions{margin-top:18px}.hero-actions .cta{width:100%;max-width:370px}.hero-actions .cta .btn{flex:1;min-width:0}.win{border-radius:10px}}
@media(prefers-reduced-motion:reduce){.js .hgrid .pill,.js .hgrid .sub,.js .hgrid .l>span,.js .hgrid .win,.js .hero-actions{opacity:1!important;animation:none!important;transform:none!important}.tr{animation:none!important}}



/* Cohesive finishing system */
:root{--paper:#fff;--paper-soft:#f7f8f6;--green:#286c5a;--green-soft:#e9f3ee;--text:#191b19;--quiet:#6b706d;--stroke:#e5e9e6}
body{background:var(--paper);color:var(--text)}
.logo::before{display:none}.logo svg{width:30px;height:30px;flex:none}.logo{gap:8px}
.nav .in{box-shadow:0 8px 24px rgba(25,35,30,.045)}
.panel{background:radial-gradient(ellipse 60% 38% at 50% 82%,rgba(227,241,234,.7),transparent 75%),#fff}
.hgrid .pill{font-weight:550;color:#3d5148;border-color:#e3ece7;background:#f6faf7}
.hgrid .pill b{background:#dceee5;color:#22624f}
.hgrid h1{color:#191b19;text-wrap:balance}
.hgrid h1 .l:nth-child(2)>span{color:#286c5a}
.hgrid .sub{color:#636a65;text-wrap:balance}
.hgrid .winwrap{position:relative;padding-top:27px}
.hgrid .winwrap::before{content:"LIVE PRODUCT PREVIEW";position:absolute;top:0;left:50%;transform:translateX(-50%);font:600 .68rem/1 var(--body);letter-spacing:.13em;color:#77817b;white-space:nowrap}
.hgrid .win{border-radius:15px;border-color:#dfe5e1;box-shadow:0 36px 90px -54px rgba(33,67,51,.35),0 7px 22px rgba(28,38,31,.07);background:#fbfcfb}
.hgrid .wbar{background:#fbfcfb;padding:13px 17px}.hgrid .wbar em{color:#337a61;font-size:.76rem;font-weight:600}
.hgrid .stage2{background:linear-gradient(145deg,#f4f7f5,#eef2ef)}
.hgrid .mp{border-radius:3px;box-shadow:0 18px 36px -22px rgba(35,44,39,.32)}
.hero-actions .cta .btn:first-child{background:#286c5a}.hero-actions .cta .btn:first-child:hover{background:#205b4b}
.hero-actions .note{font-size:.82rem;color:#7b817d}
/* Editorial section hierarchy */
section.s{padding-top:112px}
.sh h2,.head h2,.sec h2{max-width:17ch;text-wrap:balance}
.sh p,.head p{color:#646b66}
#features .sh h2::before,#try .head h2::before,#compare .sh h2::before,#security h2::before,#pricing .sh h2::before,#faq .center h2::before{display:block;margin:0 0 14px;color:#718078;font:650 .7rem/1.2 var(--body);letter-spacing:.14em}
#features .sh h2::before{content:"THE TOOLKIT"}#try .head h2::before{content:"HANDS-ON"}#compare .sh h2::before{content:"A BETTER WAY"}#security h2::before{content:"PRIVACY FIRST"}#pricing .sh h2::before{content:"STRAIGHTFORWARD PRICING"}#faq .center h2::before{content:"GOOD TO KNOW"}
.bc{position:relative;border-radius:14px;background:linear-gradient(180deg,#fff 0%,#fdfefd 100%);transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s}
.bc:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(32,65,48,.08);border-color:#c9ddd2}
.bc h3{letter-spacing:-.04em}.bc p{line-height:1.6}
.sr,.ev{border:1px solid #ecefec;background:#f7f9f7}
.plan{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease!important}.plan:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(24,55,38,.07)!important}.plan.pop{box-shadow:0 10px 28px rgba(36,107,90,.09)!important}
.faq details{transition:border-color .2s,background .2s}.faq details:hover{border-color:#cedbd3!important;background:#fcfdfc!important}
.fp{background:radial-gradient(ellipse 60% 120% at 50% 110%,rgba(54,119,91,.45),transparent 72%),#191b19!important}
/* Motion should communicate sequence, not demand attention. */
.js .rv{transition-duration:.58s;transition-delay:var(--d,0s)}
@media(max-width:820px){section.s{padding-top:86px}.sh{margin-bottom:30px}}
@media(max-width:680px){.panel{background:radial-gradient(ellipse 100% 24% at 50% 83%,rgba(227,241,234,.62),transparent 80%),#fff}.hgrid .winwrap{padding-top:24px}.hgrid .win{border-radius:11px}.hgrid .wbar{padding:10px 12px}.hgrid .wbar span{font-size:.72rem}.hgrid .mp{box-shadow:0 10px 24px -18px rgba(35,44,39,.35)}section.s{padding-top:72px}}
@media(prefers-reduced-motion:reduce){.bc,.plan{transition:none!important}.bc:hover,.plan:hover{transform:none!important}}



.hgrid h1 .l:nth-child(1)::after{content:" ";white-space:pre}
.date-stamp{display:flex;gap:.35em;align-items:center}.date-stamp b{font-weight:500;color:#3f4842}
.sigline{z-index:2;align-items:flex-start;gap:18px}
.signature-target{font:inherit;color:#286c5a;background:rgba(233,243,238,.55);border:0;border-bottom:1px dashed #7ca794;padding:2px 5px;border-radius:3px;cursor:pointer;text-align:left}
.signature-target:hover,.signature-target:focus-visible{background:#e9f3ee;border-bottom-style:solid}
.signature-target small,.date-target small{display:block;font:500 .78em/1.35 var(--body);color:#748078}
.date-target{text-align:right;min-width:86px;color:#68716b;cursor:pointer}
.date-target:hover{color:#286c5a}
.ph.sg{z-index:3}.ph.dt{z-index:4;background:#fff;border-color:#286c5a;color:#286c5a}
@media(max-width:560px){.sigline{gap:8px}.signature-target small,.date-target small{font-size:.72em}}