@font-face{font-family:Fraunces;font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/fraunces-var.woff2) format("woff2")}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/manrope-var.woff2) format("woff2")}
@font-face{font-family:Kalam;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/kalam-400.woff2) format("woff2")}
@font-face{font-family:Kalam;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/kalam-700.woff2) format("woff2")}
@font-face{font-family:Mali;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/mali-400.woff2) format("woff2")}
@font-face{font-family:Mali;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/mali-600.woff2) format("woff2")}

:root{
  --paper:#F7EEDD;--surface:#FBF4E6;--card:#FFFAF0;
  --ink:#2B211C;--muted:#6E5C50;--hair:rgba(43,33,28,.14);--pencil:#4A3B33;
  --clay:#E0784A;--clay-btn:#D56A3B;--clay-deep:#BE5A33;--clay-text:#A84A26;
  --leaf:#6E9E62;--leaf-deep:#4F7646;--sun:#F0B33F;--marker:#FFE37A;--sky:#6E9FC2;--blush:#F4C7B2;--berry:#A63A37;
  --display:Fraunces,Georgia,"Times New Roman",serif;
  --text:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hand:Kalam,"Comic Sans MS",cursive;
  --wrap:1120px;
  --wob:22px 26px 20px 28px/26px 20px 28px 22px;
  --wob-pill:255px 18px 225px 18px/18px 225px 18px 255px;
}
.fg{--display:var(--hand);--text:Mali,system-ui,-apple-system,"Segoe UI",sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
/* paper grain */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .13 0 0 0 0 .11 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--clay-text);text-underline-offset:3px}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-.015em}
.fg h1,.fg h2,.fg h3{font-weight:700;letter-spacing:0}
p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.band :focus-visible,.band .chips input:focus-visible+span{outline-color:var(--sky)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
section{padding-block:clamp(56px,9vw,108px)}

.eyebrow{display:inline-block;margin-bottom:14px;font:700 13px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--clay-text)}
.fg .eyebrow{font:700 19px/1 var(--hand);letter-spacing:.02em;text-transform:none}
.h2{font-size:clamp(30px,4.6vw,46px)}
.lead{font-size:clamp(18px,2.1vw,21px);color:var(--muted);max-width:640px}
.mark{background:linear-gradient(transparent 60%,var(--marker) 60% 94%,transparent 94%);padding-inline:.1em;margin-inline:-.1em;border-radius:.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.clay{color:var(--clay-deep)}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(247,238,221,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:600 21px/1 Fraunces,Georgia,serif;letter-spacing:-.01em;white-space:nowrap}
.brand svg{width:28px;height:28px;flex:none}
.brand b{font-weight:600;color:var(--clay-deep)}
.crumb{display:inline-flex;align-items:center;gap:8px;padding-left:16px;border-left:1.5px solid var(--hair);color:var(--ink);text-decoration:none;font:700 22px/1 var(--hand)}
.crumb img{width:30px;height:30px;border-radius:8px}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap}
.nav-links a:hover{color:var(--clay-text)}
.nav .btn{padding:10px 18px;font-size:15px}
.fg .nav .btn{padding:9px 16px 7px;font-size:19px;box-shadow:2px 3px 0 var(--ink)}
@media(max-width:980px){.fg .nav-links{display:none}.fg .nav .btn{margin-left:auto}}
@media(max-width:820px){.nav-links{display:none}.nav .btn{margin-left:auto}}
@media(max-width:520px){.fg .brand span{display:none}.crumb{padding-left:12px}.nav .wrap{gap:12px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border:1.5px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper);font:700 16px/1.2 var(--text);text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 0 rgba(43,33,28,.2)}
.btn:active{transform:none;box-shadow:none}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-clay{background:var(--clay);color:var(--ink)}
.btn[disabled]{opacity:.65;cursor:progress;transform:none}
.fg .btn{padding:13px 24px 10px;border:2px solid var(--ink);border-radius:var(--wob-pill);background:var(--clay-btn);color:#fff;font:700 20px/1.15 var(--hand);box-shadow:3px 4px 0 var(--ink)}
.fg .btn:hover{transform:translate(-1px,-1px);box-shadow:4px 5px 0 var(--ink)}
.fg .btn:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--ink)}
.fg .btn-ghost{background:var(--card);color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.center .btn-row{justify-content:center}

/* early-access form */
.join{max-width:520px}
.join-row{display:flex;gap:10px}
.join input[type=email]{flex:1;min-width:0;height:54px;padding:0 20px;border:1.5px solid var(--ink);border-radius:999px;background:var(--card);color:var(--ink);font:500 16px var(--text)}
.join input[type=email]::placeholder{color:#7A6A5E}
.fg .join input[type=email]{border-width:2px;border-radius:var(--wob-pill);font-weight:400}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.chips>span{margin-right:4px;font-size:14px;font-weight:600;color:var(--muted)}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;inset:0;opacity:0;cursor:pointer}
.chips label span{display:block;padding:5px 14px;border:1.5px solid rgba(43,33,28,.35);border-radius:999px;font-size:14px;font-weight:600}
.chips input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chips input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.news{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer}
.news input{width:18px;height:18px;margin:0;accent-color:var(--clay-deep)}
.band .news{color:#C9B9A8}
.join-note{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.join-msg{margin-top:12px;font-size:15px;font-weight:600}
.join-msg:empty{display:none}
.join.is-error .join-msg{color:var(--berry)}
.join.is-done>:not(.join-msg){display:none}
.join.is-done .join-msg{margin:0;padding:16px 20px;border:1.5px solid var(--leaf-deep);border-radius:18px;background:#EAF1E2;color:#2F4A29;font-size:16px}
.join.is-done .join-msg button{display:block;margin-top:6px;padding:0;border:0;background:none;color:inherit;font:500 13.5px var(--text);text-decoration:underline;cursor:pointer}
@media(max-width:480px){.join-row{flex-direction:column}.join input[type=email]{flex:none;width:100%}.join .btn{width:100%}}

/* phone mock */
.phone{width:min(100%,290px);aspect-ratio:9/19.4;border:8px solid var(--ink);border-radius:38px;overflow:hidden;background:var(--paper);box-shadow:10px 14px 0 rgba(43,33,28,.13)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top}

/* home */
.hero{position:relative;padding-block:clamp(64px,11vw,132px) clamp(48px,8vw,96px);text-align:center}
.hero-ring{position:absolute;left:50%;top:54%;z-index:-1;width:min(720px,150vw);transform:translate(-50%,-50%);pointer-events:none}
.hero h1{max-width:13ch;margin-inline:auto;font-size:clamp(42px,8.2vw,84px);line-height:1;letter-spacing:-.03em}
.hero .lead{margin:26px auto 34px}
.hero .btn-row{justify-content:center}
@media(max-width:600px){.hero-ring{display:none}}
.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:40px;font-size:14.5px;font-weight:600;color:var(--muted)}
.facts li::before,.ticks li::before{content:"✓";margin-right:8px;color:var(--leaf-deep);font-weight:700}
.ticks li{position:relative;padding-left:26px}
.ticks li::before{position:absolute;left:0;margin:0}

.app-card{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,64px);align-items:center;margin-top:40px;padding:clamp(24px,4.5vw,56px);border:1.5px solid var(--ink);border-radius:32px;background:var(--card);box-shadow:8px 10px 0 rgba(43,33,28,.1)}
.app-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:22px}
.app-head img{width:52px;height:52px;border-radius:14px}
.app-head strong{font:700 30px/1 var(--hand)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:#EAF1E2;color:#2F4A29;font-size:13px;font-weight:700}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--leaf)}
.app-card h3{font-size:clamp(30px,4.4vw,44px)}
.app-card p{margin-top:16px;color:var(--muted);font-size:18px}
.ticks{display:grid;gap:8px;margin-block:22px 28px;font-weight:600}
.app-art{position:relative;display:grid;place-items:center;width:100%;max-width:420px;margin-inline:auto;padding-block:10px}
.app-art::before{content:"";position:absolute;width:min(100%,400px);aspect-ratio:1;border-radius:47% 53% 51% 49%/52% 48% 52% 48%;background:var(--blush)}
.app-art .phone{position:relative;width:min(68%,260px);transform:rotate(3deg)}
.app-art .dog{position:absolute;left:-2%;bottom:-3%;width:46%}
.next{display:flex;align-items:center;gap:16px;margin-top:20px;padding:20px 26px;border:1.5px dashed rgba(43,33,28,.4);border-radius:22px;color:var(--muted)}
.next svg{flex:none;width:26px;height:26px}
@media(max-width:820px){.app-card{grid-template-columns:1fr}.app-art{order:-1;padding-bottom:24px}}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.value{padding:28px;border:1.5px solid var(--hair);border-radius:24px;background:var(--surface)}
.value svg{width:34px;height:34px;margin-bottom:18px}
.value h3{font-size:24px}
.value p{margin-top:10px;color:var(--muted)}
@media(max-width:820px){.grid-3{grid-template-columns:1fr}}

.band{position:relative;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;padding:clamp(28px,5vw,60px);border-radius:32px;background:var(--ink);color:var(--paper)}
.band h2{font-size:clamp(32px,5vw,52px)}
.band .lead{margin-block:14px 26px;color:#D9CBBB}
.band .join input[type=email]{border-color:transparent}
.band .chips>span,.band .join-note{color:#C9B9A8}
.band .join-note a{color:#F0A07A}
.band .chips label span{border-color:rgba(247,238,221,.4)}
.band .chips input:checked+span{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.band .join.is-error .join-msg{color:#F2A6A0}
.band .dog{width:clamp(150px,22vw,250px);margin-bottom:calc(-1*clamp(28px,5vw,60px))}
@media(max-width:820px){.band{grid-template-columns:1fr}.band .dog{display:none}}

.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,80px);align-items:start}
.about p+p{margin-top:14px}
.about .lead{color:var(--ink)}
@media(max-width:820px){.about{grid-template-columns:1fr}}

.foot{padding-block:44px 56px;border-top:1px solid var(--hair);font-size:15px;color:var(--muted)}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.foot h3{margin-bottom:12px;font:700 13px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.foot li+li{margin-top:8px}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--clay-text)}
.foot .brand{margin-bottom:12px}
.foot small{display:block;margin-top:18px;font-size:13.5px}
@media(max-width:700px){.foot .wrap{grid-template-columns:1fr}}

/* fitguard page */
.sk{border:2px solid var(--pencil);border-radius:var(--wob);background:var(--card);box-shadow:4px 5px 0 rgba(43,33,28,.16)}
.fg-hero{padding-block:clamp(36px,6vw,72px) clamp(48px,8vw,96px)}
.fg-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,72px);align-items:center}
.fg-hero h1{margin-block:18px 30px;font-size:clamp(50px,8.6vw,96px);line-height:.98}
.fg .mark{background:linear-gradient(transparent 50%,var(--marker) 50% 84%,transparent 84%)}
.fg-hero .lead{margin-bottom:28px;color:var(--ink)}
.fg-hero .facts{justify-content:flex-start;margin-top:22px}
.fg-art{position:relative;display:grid;place-items:center;width:100%;max-width:460px;margin-inline:auto;padding-block:16px 28px}
.fg-art::before{content:"";position:absolute;width:min(104%,460px);aspect-ratio:1;border-radius:47% 53% 51% 49%/52% 48% 52% 48%;background:var(--blush)}
.fg-art .phone{position:relative;width:min(66%,290px);transform:rotate(3deg)}
.fg-art .dog{position:absolute;left:-4%;bottom:0;width:48%;animation:bob 4s ease-in-out infinite}
.sticker{position:absolute;padding:7px 14px 4px;border:2px solid var(--ink);border-radius:var(--wob-pill);background:var(--marker);font:700 19px/1.2 var(--hand);box-shadow:2px 3px 0 rgba(43,33,28,.5)}
.sticker.s1{top:1%;left:-1%;transform:rotate(-8deg);background:var(--clay-btn);color:#fff}
.sticker.s2{right:-3%;bottom:8%;transform:rotate(5deg)}
@keyframes bob{50%{transform:translateY(-7px)}}
@media(max-width:860px){.fg-hero .wrap{grid-template-columns:1fr}.fg-hero .join{max-width:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.fg-art .dog{animation:none}.btn{transition:none}}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px;counter-reset:step}
.steps li{position:relative;padding:38px 22px 24px;counter-increment:step}
.steps li::before{content:counter(step);position:absolute;top:-22px;left:18px;display:grid;place-items:center;width:46px;height:46px;border:2px solid var(--ink);border-radius:50% 46% 52% 48%;background:var(--marker);font:700 25px/1 var(--hand);padding-top:4px}
.steps h3{font-size:25px}
.steps p{margin-top:8px;color:var(--muted);font-size:16px}
@media(max-width:920px){.steps{grid-template-columns:1fr 1fr;row-gap:38px}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

.shots{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:44px}
.shots figure{margin:0}
.shots .phone{width:100%;border-width:6px;border-radius:28px;box-shadow:6px 8px 0 rgba(43,33,28,.13)}
.shots figcaption{margin-top:16px;font:700 20px/1.25 var(--hand);text-align:center}
.shots figcaption span{display:block;font:400 14.5px/1.4 var(--text);color:var(--muted)}
@media(max-width:920px){.shots{display:flex;gap:18px;margin-inline:-20px;padding:0 20px 14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.shots figure{flex:0 0 210px;scroll-snap-align:center}}

.feature{padding:28px 26px}
.feature h3{font-size:28px}
.feature ul{display:grid;gap:10px;margin-top:16px;font-size:16px}
.feature li{position:relative;padding-left:26px}
.feature li::before{content:"";position:absolute;left:2px;top:.55em;width:11px;height:11px;border:2px solid var(--ink);border-radius:50% 44% 52% 46%;background:var(--clay)}
.feature:nth-child(2) li::before{background:var(--sky)}
.feature:nth-child(3) li::before{background:var(--leaf)}
.tag{display:inline-block;margin-left:4px;padding:1px 8px 0;border:1.5px solid var(--ink);border-radius:var(--wob-pill);background:var(--marker);font:700 14px/1.4 var(--hand);vertical-align:1px}

.stage{background:repeating-linear-gradient(-45deg,transparent 0 9px,rgba(43,33,28,.1) 9px 10.5px),var(--card)}
.privacy{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(24px,4vw,48px)}
.privacy .dog{width:min(100%,300px);margin-inline:auto}
.privacy .lead{margin-top:14px;color:var(--ink)}
.perms{display:grid;gap:12px;margin-top:22px;font-size:16px}
.perms b{font-weight:600}
@media(max-width:820px){.privacy{grid-template-columns:1fr}.privacy .dog{width:200px}}

.plans{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.plan{padding:30px 28px}
.plan h3{font-size:32px}
.plan>p{margin-top:6px;color:var(--muted)}
.plan .ticks{margin-block:20px 0;font-weight:400}
.plan.pro{background:#FFF3D6}
@media(max-width:760px){.plans{grid-template-columns:1fr}}

.faq{max-width:780px;margin:40px auto 0;display:grid;gap:14px}
.faq details{padding:0 22px}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0 15px;font:700 22px/1.25 var(--hand);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:28px;line-height:1;color:var(--clay-deep)}
.faq details[open] summary::after{content:"–"}
.faq p{padding-bottom:20px;color:var(--muted)}

.cta{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(24px,4.5vw,56px);background:#FFF3D6}
.cta .dog{width:clamp(150px,22vw,260px)}
.cta .lead{margin-block:12px 24px;color:var(--ink)}
@media(max-width:760px){.cta{grid-template-columns:1fr}.cta .dog{width:150px}}

/* plain text pages */
.doc{max-width:760px;margin-inline:auto;padding-block:clamp(40px,7vw,80px)}
.doc h1{font-size:clamp(34px,5.5vw,50px)}
.doc h2{margin-top:34px;font-size:25px}
.doc p,.doc ul{margin-top:12px}
.doc ul{padding-left:22px;list-style:disc}
.doc .muted{color:var(--muted)}
.lost{min-height:86vh;display:grid;place-items:center;text-align:center}
.lost img{width:220px;margin:0 auto 12px}
.lost p{margin-block:12px 26px;color:var(--muted)}
.lost .btn-row{justify-content:center}
.more{margin-top:18px}

.all{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.all>div{padding:24px 20px 14px}
.all h3{margin-bottom:8px;font-size:25px}
.all li{padding:7px 0;border-bottom:1.5px dashed var(--hair);font-size:15px;line-height:1.45}
.all li:last-child{border:0}
@media(max-width:980px){.all{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.all{grid-template-columns:1fr}}

/* motion */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
@keyframes ink{from{background-size:0 100%}}
@keyframes float{50%{translate:0 -8px}}
@keyframes pop{from{opacity:0;scale:.5}}
@keyframes spin{to{rotate:360deg}}
.hero .mark,.fg-hero .mark{background-repeat:no-repeat;animation:ink .8s .35s both ease-out}
.fg-art .phone,.app-art .phone{animation:float 6s ease-in-out infinite}
.app-art .dog,.cta .dog,.band .dog,.privacy .dog{animation:bob 4s ease-in-out infinite}
.sticker{animation:pop .5s .7s both cubic-bezier(.3,1.5,.5,1)}
.hero-ring{animation:spin 120s linear infinite}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important}.reveal{opacity:1;transform:none;transition:none}}
[hidden]{display:none!important}
@media(max-width:520px){.fg .nav .btn{padding:8px 11px 6px}.crumb{font-size:20px;gap:6px}.crumb img{width:26px;height:26px}}