/* ==========================================================================
   Shot landing: tokens from Figma (file 4oxPUUUvGEZzdXi14F69mq, frame 173:2187)
   Mobile-first. Layout is authored in rem; root size grows on large screens.
   ========================================================================== */
:root{
  --bg:#000;
  --sand:#D3CEBE;
  --white:#fff;
  --body:rgba(255,255,255,.8);
  --line:#2a2a2a;
  --card:#101010;
  --input:#2f2f2f;
  --font:"LINE Seed JP","Helvetica Neue",Arial,system-ui,sans-serif;
  --dots:"Doto","Courier New",ui-monospace,monospace;
  --pad:clamp(1.25rem,4vw,3rem);          /* page side padding (48px on desktop) */
  --gap-s:clamp(2rem,5vw,3.5rem);         /* 56px rhythm between blocks */
  --sec:clamp(3rem,2rem + 4vw,5rem);      /* 80px section padding */
  --r-panel:clamp(1.5rem,4vw,2.5rem);     /* 40px panel radius */
  color-scheme:dark;
}

/* Large screens: 16px up to 1600px wide, then grows to 30px at 3840px (2K and 4K).
   Percent + length keeps the user's own browser font-size setting in play. */
html{
  font-size:clamp(100%,calc(112.5% + (100vw - 1920px) * .00625),187.5%);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* Lenis smooth scroll (main.js) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--body);
  font:400 1rem/1.4 var(--font);letter-spacing:-.04em;
  -webkit-font-smoothing:antialiased;font-synthesis:none;
}
img,svg{display:block;max-width:100%}
img{height:auto}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--sand);outline-offset:3px}

.wrap{width:100%;max-width:90rem;margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px;top:.5rem;z-index:20;background:var(--sand);color:#000;padding:.75rem 1rem;border-radius:.5rem}
.skip:focus{left:.5rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type */
.eyebrow{margin:0;font:700 1.125rem/1 var(--dots);letter-spacing:0;color:var(--sand);text-align:center}
h1,h2,h3{margin:0;font-weight:400;letter-spacing:-.04em;text-wrap:balance}
h1,h2{color:var(--white);line-height:1;font-size:clamp(2rem,1.2rem + 2.2vw,3rem)}
.copy{display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:35rem;margin-inline:auto;text-align:center}
.copy p{max-width:25rem;line-height:1.4}
.head{display:flex;flex-direction:column;align-items:center;gap:var(--gap-s);text-align:center}

/* buttons and forms */
.btn{display:inline-flex;align-items:center;justify-content:center;height:3.5rem;min-width:10.1875rem;padding:0 1.5rem;border:0;border-radius:100px;background:var(--sand);color:#000;font:inherit;letter-spacing:-.04em;cursor:pointer;text-decoration:none;white-space:nowrap;transition:filter .15s ease}
.btn:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.6;cursor:progress}
.signup{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:31.875rem}
.signup input[type=email]{flex:none;width:100%;min-width:0;height:3.5rem;padding:0 1.25rem;border:1px solid transparent;border-radius:.5rem;background:var(--input);color:var(--white);font:inherit;letter-spacing:-.04em}
.signup input[type=email]::placeholder{color:var(--body);opacity:1}
.signup input[type=email]:focus{border-color:var(--sand);outline:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fine{font-size:.875rem;line-height:1.4}
.status{min-height:0;font-size:.9375rem;color:var(--sand)}
.status:empty{display:none}
@media (min-width:30rem){.signup{flex-direction:row}.signup input[type=email]{flex:1;width:auto}}

/* header + hero */
.site-header{display:flex;justify-content:center;padding-block:1.5rem}
.site-header img{width:8.875rem}
.hero{padding-block:1.5rem 2.5rem}
.hero .eyebrow{margin-bottom:2rem}
.hero .copy{gap:1rem}
.hero .signup{margin-top:.5rem}
.hero .fine{margin-top:.5rem}

/* hero gallery: three rows of screens + a hand holding the phone */
.gallery{padding-inline:var(--pad);max-width:90rem;margin-inline:auto}
.stage{display:flex;flex-direction:column;gap:1.5rem}
.stage .hand-track{order:-1;position:relative;z-index:2;margin-bottom:-.75rem}  /* hand touches the white panel below */
.stage .hand-wrap{position:relative;width:min(22rem,86%);margin-inline:auto;container-type:inline-size}
.stage .hand{width:100%}
.rows{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:.5rem;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scrollbar-width:none}
.rows::-webkit-scrollbar{display:none}
.rows img{flex:none;height:15rem;width:auto;scroll-snap-align:center}
@media (max-width:43.99rem){.rows{display:none}}  /* phones: only the hand for now */
@media (min-width:44rem){
  .gallery{padding-bottom:2.25rem}  /* + .75rem panel padding = 48px to the white panel */
  .stage{display:block;position:relative;aspect-ratio:1344/1603;container-type:inline-size}
  .rows{display:block;position:absolute;inset:0;margin:0;padding:0;overflow:visible}
  .rows img{position:absolute;left:0;width:100%;height:auto;aspect-ratio:1344/508}
  .rows img:nth-child(1){top:0}
  .rows img:nth-child(2){top:calc(548 / 1603 * 100%)}
  .rows img:nth-child(3){top:calc(1095 / 1603 * 100%)}
  /* The track spans the whole gallery; the hand sticks to the bottom of the viewport inside it,
     so it follows the scroll and stops at the bottom of the gallery. Hand height = 760/1344 of the stage width. */
  /* track runs past the 48px gap, so the hand ends at the top of the white panel */
  .stage .hand-track{position:absolute;top:0;bottom:-3rem;margin:0;left:calc(354 / 1344 * 100%);width:calc(501 / 1344 * 100%);order:0;z-index:2}
  .stage .hand-wrap{position:sticky;top:calc(100vh - 760 / 1344 * 100cqi);width:100%;margin:0}
}

/* panels (how it works + photo) */
.panels{padding:.75rem}
.panel{border-radius:var(--r-panel);overflow:hidden}
.panel-white{--pp:clamp(1rem,4vw,5rem);background:#fff;color:#000;padding:var(--sec) var(--pp);text-align:center}
.panel-white .eyebrow{color:#000}
.panel-white h1,.panel-white h2{color:#000}
.panel-white .copy p{color:rgba(0,0,0,.8)}
.loop-title{max-width:35rem;margin-inline:auto}
.loop-title .w{display:inline-flex;align-items:center;gap:.3em;margin-inline:.08em;white-space:nowrap}
.loop-title .w img{width:.78em;height:.78em;flex:none}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;grid-template-columns:1fr;text-align:left;width:100%}
.step{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;border-radius:.75rem;background:#000;color:var(--body)}
.step .ico{width:2.5rem;height:2.5rem}
.step-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.step h3{font-size:1.5rem;line-height:1;color:var(--sand)}
.step .arrow{width:4rem;flex:none}
.step .arrow.loop{width:3rem}
/* phones: steps become a swipeable carousel (controls added by main.js) */
@media (max-width:39.99rem){
  .steps{display:flex;gap:.5rem;width:calc(100% + 2 * var(--pp));margin-inline:calc(var(--pp) * -1);padding-inline:var(--pp);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pp);scrollbar-width:none}
  .steps::-webkit-scrollbar{display:none}
  .step{flex:0 0 min(82vw,20rem);scroll-snap-align:start}
}
@media (min-width:40rem){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.steps{grid-template-columns:repeat(4,1fr);gap:2px}}
.panel-photo{margin:0}
.panel-photo{position:relative;aspect-ratio:16/10;background:url(assets/panel-bg.png) 0 0/100% 100%;container-type:inline-size}
/* the stage is the full 1416×461 photo; on phones it is cropped like object-position:75% */
.pp-stage{position:absolute;top:0;left:-68.98cqi;width:191.975cqi;height:100%;container-type:inline-size}
.pp-hand,.pp-bean{position:absolute;top:0;height:100%;max-width:none}
.pp-hand{left:0;width:60.734%}
.pp-bean{left:66.384%;width:23.305%}
.pp-spark{position:absolute;left:58.4%;top:38.9%;width:9cqi;aspect-ratio:1;margin:-4.5cqi 0 0 -4.5cqi;border-radius:50%;background:radial-gradient(rgba(255,255,255,.95),rgba(255,236,200,.5) 35%,transparent 70%);opacity:0;pointer-events:none}
@media (min-width:48rem){.panel-photo{aspect-ratio:1416/461}.pp-stage{left:0;width:100cqi}}
/* scroll-driven: --p goes 0 → 1 as the panel comes into view; the bean drifts in to meet the finger */
.panel-photo.anim .pp-hand{transform:translateX(calc((1 - var(--p,0)) * -12cqi))}
.panel-photo.anim .pp-bean{transform:translateX(calc(4cqi - var(--p,0) * 15.5cqi))}
.panel-photo.touch .pp-spark{animation:pp-spark 1s ease-out}
.panel-photo.touch .pp-bean{animation:pp-wobble .9s cubic-bezier(.3,.7,.3,1)}
@keyframes pp-spark{0%{opacity:0;transform:scale(.2)}25%{opacity:1}100%{opacity:0;transform:scale(2.4)}}
@keyframes pp-wobble{0%{rotate:0deg}30%{rotate:-7deg}60%{rotate:4deg}100%{rotate:0deg}}

/* sections */
.section{padding-block:var(--sec)}

/* methods: swipeable on phones, 2 columns on tablets, 4 on desktop */
.methods{list-style:none;margin:var(--gap-s) 0 0;padding:0 var(--pad) .5rem;margin-inline:calc(var(--pad) * -1);display:flex;gap:.5rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none}
.methods::-webkit-scrollbar{display:none}
.methods>li{flex:0 0 min(80vw,20.625rem);scroll-snap-align:start;perspective:75rem}
.method{position:relative;display:flex;flex-direction:column;gap:1rem;height:100%;min-height:30rem;padding:2rem;background:var(--card);border:1px solid var(--line);border-radius:.75rem}
.method-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.method h3{font-size:1.5rem;line-height:1;color:var(--sand)}
.method p{margin-top:1rem;max-width:12.5rem;color:var(--body)}
.method .mi{width:2.75rem;height:2.75rem;flex:none;border:1px solid var(--line);border-radius:50%}
.method .render{width:min(100%,16rem);aspect-ratio:257/353;object-fit:contain;margin:auto auto 0}
@media (min-width:48rem){
  .methods{display:grid;grid-template-columns:repeat(2,1fr);overflow:visible;padding:0;margin-inline:0}
  .methods>li{flex:none}
}
@media (min-width:70rem){
  .methods{grid-template-columns:repeat(4,1fr)}
  .method{min-height:32.3125rem}
}

/* features */
.features{display:grid;gap:2rem;width:100%;max-width:67.5rem;margin-inline:auto;text-align:left}
.features figure{margin:0;border-radius:1.9rem;overflow:hidden;aspect-ratio:500/640;background:#111}
.features figure img{width:100%;height:100%;object-fit:cover}
.feat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between;gap:.5rem}
.feat{padding:.75rem 0;border-bottom:1px solid var(--line)}
.feat h3{font-size:1.5rem;line-height:1.1;color:var(--sand);margin-bottom:.5rem}
.feat p{max-width:26.25rem}
@media (min-width:56rem){.features{grid-template-columns:1fr 1fr;gap:5rem}}
@media (max-width:55.99rem){.features figure{max-width:32rem;margin-inline:auto;width:100%}}

/* privacy panel */
.panel-sand{background:var(--sand);color:#000;padding:var(--sec) clamp(1rem,4vw,5rem);text-align:center}
.panel-sand .copy{gap:1rem}
.panel-sand h2{color:#000}
.panel-sand p{color:rgba(0,0,0,.8)}
.panel-sand a{color:#000}
.panel-sand :focus-visible{outline-color:#000}
.panel-sand .lock{width:4.5rem;height:4.5rem;margin-inline:auto;margin-bottom:1rem}

/* FAQ */
.faq{width:100%;max-width:35rem;margin-inline:auto;text-align:left}
.faq details{padding:.75rem;border-bottom:1px solid var(--line)}
.faq summary{position:relative;display:flex;align-items:center;gap:1rem;min-height:2.75rem;font-size:clamp(1.125rem,1rem + .6vw,1.5rem);line-height:1.2;color:var(--sand);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
/* plus icon: horizontal bar (::before) + vertical bar (::after) that folds away when open */
.faq summary::before{content:"";flex:none;width:1.25rem;height:1.25rem;background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)) center/.875rem 2px no-repeat}
.faq summary::after{content:"";position:absolute;left:calc(.625rem - 1px);top:50%;width:2px;height:.875rem;margin-top:-.4375rem;background:rgba(255,255,255,.6);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.faq details[open]:not(.closing) summary::after{transform:scaleY(0)}
.faq details p{margin:.25rem 0 .5rem 2.25rem}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* call to action */
.cta{position:relative;background:var(--sand);color:#000;overflow:hidden}
.cta-inner{position:relative;display:grid;gap:2rem;max-width:90rem;margin-inline:auto;padding:var(--sec) var(--pad) 0}
.cta-copy{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.cta .signup{margin-top:.5rem}
.cta .fine{margin-top:.5rem}
.cta h2{color:#000}
.cta .lead{color:rgba(0,0,0,.8)}
.cta .btn{background:#000;color:var(--sand)}
.cta .fine{color:rgba(0,0,0,.8)}
.cta .status{color:#000}
.cta :focus-visible{outline-color:#000}
.cta-hand{width:min(31.3rem,100%);margin:0 auto}
@media (min-width:64rem){
  /* let the hand peek out above the section, but cut it at the bottom and sides */
  .cta{overflow:visible;clip-path:inset(-20rem 0 0 0)}
  .cta-inner{min-height:35.5rem;padding:var(--sec) 12%;align-content:center}
  .cta-hand{position:absolute;left:53.2%;top:-5.4rem;width:31.3rem;max-width:none;margin:0}
  .cta-copy{max-width:35rem}
}
@media (min-width:64rem) and (max-width:80rem){
  .cta-hand{width:38%;left:56%}
}

/* footer */
.site-footer{position:relative;display:flex;flex-direction:column;align-items:center;gap:2.5rem;padding:2.5rem var(--pad);text-align:center}
.site-footer img{width:3.75rem}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem 2.5rem}
.footer-links a{text-decoration:underline;text-underline-offset:.2em}
.site-footer .fine{margin:0}

/* privacy page */
.doc{max-width:45rem;margin-inline:auto;padding:1rem var(--pad) clamp(4rem,10vw,8rem)}
.doc h1{margin-bottom:.75rem}
.crumbs{margin:0 0 1.5rem}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;font-size:.875rem;line-height:1.4}
.crumbs li+li::before{content:"";display:inline-block;width:.375rem;height:.375rem;margin:0 .625rem .1rem .5rem;border-top:1.5px solid rgba(255,255,255,.4);border-right:1.5px solid rgba(255,255,255,.4);transform:rotate(45deg)}
.doc .crumbs li+li{margin-top:0}
.doc .crumbs a{color:var(--body);text-decoration:none;transition:color .2s ease}
.doc .crumbs a:hover{color:var(--white)}
.crumbs [aria-current]{color:var(--sand)}
.doc .updated{margin-bottom:2.5rem;font-size:.9375rem}
.doc h2{font-size:1.5rem;line-height:1.1;color:var(--sand);margin:3rem 0 .75rem}
.doc p,.doc li{line-height:1.55;letter-spacing:-.02em}
.doc p+p,.doc ul+p,.doc p+ul{margin-top:.875rem}
.doc ul{margin:0;padding-left:1.25rem}
.doc li+li{margin-top:.5rem}
.doc strong{color:var(--white);font-weight:400}
.doc a{color:var(--white)}
.doc .short{padding:1.5rem 1.75rem;border:1px solid var(--line);border-radius:.75rem;background:var(--card);margin-bottom:.5rem}
.doc .short h2{margin-top:0}
.ph{padding:0 .3em;border-radius:.25rem;background:rgba(211,206,190,.18);color:var(--white)}
.back{display:inline-flex;margin:0 auto}

/* privacy page: floating table of contents on the left */
.doc-layout{max-width:72rem;margin-inline:auto;padding-inline:var(--pad)}
.doc-layout .doc{padding-inline:0}
.doc h2{scroll-margin-top:1.5rem}
.toc{margin:1rem 0 2rem}
.toc details{border:1px solid var(--line);border-radius:.75rem;background:var(--card)}
.toc summary{padding:1rem 1.25rem;color:var(--white);cursor:pointer}
.toc ol{list-style:none;margin:0;padding:0 .5rem .75rem}
.toc a{display:block;padding:.4rem .75rem;border-left:2px solid transparent;color:var(--body);font-size:.9375rem;line-height:1.3;text-decoration:none;transition:color .2s ease,border-color .2s ease}
.toc a:hover{color:var(--white)}
.toc a[aria-current]{color:var(--sand);border-left-color:var(--sand)}
@media (min-width:64rem){
  .doc-layout{display:grid;grid-template-columns:13rem minmax(0,45rem);gap:4rem;justify-content:center}
  .toc{margin:0}
  .toc details{position:sticky;top:1.5rem;max-height:calc(100vh - 3rem);overflow:auto;border:0;background:none}
  .toc summary{padding:1rem 0 .75rem .75rem;font:700 1rem/1 var(--dots);letter-spacing:0;color:var(--sand);pointer-events:none;list-style:none}
  .toc summary::-webkit-details-marker{display:none}
  .toc ol{padding:0}
}

/* how it works: icons spin on card hover (driven by main.js) */
.step .ico{will-change:transform}

/* top blur: iOS-style progressive blur that fades in once the page scrolls */
.top-blur{position:fixed;inset:0 0 auto;z-index:50;height:calc(3.25rem + env(safe-area-inset-top,0px));pointer-events:none;opacity:0;transition:opacity .35s ease;background:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.35) 55%,transparent)}
.scrolled .top-blur{opacity:1}
.top-blur i{position:absolute;inset:0}
.top-blur i:nth-child(1){-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);-webkit-mask:linear-gradient(to top,transparent,#000 40%);mask:linear-gradient(to top,transparent,#000 40%)}
.top-blur i:nth-child(2){-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);-webkit-mask:linear-gradient(to top,transparent 25%,#000 60%);mask:linear-gradient(to top,transparent 25%,#000 60%)}
.top-blur i:nth-child(3){-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-mask:linear-gradient(to top,transparent 50%,#000 80%);mask:linear-gradient(to top,transparent 50%,#000 80%)}
.top-blur i:nth-child(4){-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);-webkit-mask:linear-gradient(to top,transparent 70%,#000);mask:linear-gradient(to top,transparent 70%,#000)}

/* preloader: logo draws itself, then the black curtain moves up */
.preloader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#000;animation:pl-failsafe 0s 6s forwards;transition:transform .9s cubic-bezier(.76,0,.24,1)}
.pl-logo{width:clamp(7rem,14vw,10rem);height:auto;overflow:visible;transition:transform .9s cubic-bezier(.76,0,.24,1),opacity .6s ease}
.pl-logo path{stroke-dasharray:1 1;stroke-dashoffset:1;animation:pl-draw .7s cubic-bezier(.65,0,.35,1) var(--t,0s) forwards}
.pl-logo .pl-s{fill:#D3CEBE;fill-opacity:0;animation:pl-draw .8s cubic-bezier(.65,0,.35,1) forwards,pl-fill .4s ease .55s forwards}
.preloader.done{transform:translateY(-100%)}
.preloader.done .pl-logo{transform:translateY(-3rem);opacity:0}
@keyframes pl-draw{to{stroke-dashoffset:0}}
@keyframes pl-fill{to{fill-opacity:1}}
@keyframes pl-failsafe{to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){.preloader{display:none}}

/* entrance animations (added by main.js): blocks blur in and up, headings by character */
.split .wd{display:inline-block;white-space:nowrap}
.split .ch{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .js .rv,.js .split .ch{opacity:0;filter:blur(10px);transform:translateY(1.5rem)}
  .js .split .ch{transform:translateY(.35em)}
  .js .rv.in,.js .split.in .ch{opacity:1;filter:blur(0);transform:none}
  .js .rv.in{transition:opacity 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0ms),filter 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
  .js .split.in .ch{--cd:calc(var(--d,0ms) + var(--i) * 32ms);transition:opacity .8s ease-out var(--cd),filter .8s ease-out var(--cd),transform .8s cubic-bezier(.2,.7,.2,1) var(--cd)}
}

/* carousel controls: arrows + Apple-style dots pill; shown only while the list is a carousel */
.cnav{display:none;align-items:center;justify-content:center;gap:.5rem;margin-top:1.5rem;--c-bg:rgba(255,255,255,.12);--c-dot:rgba(255,255,255,.35);--c-on:var(--sand);--c-ico:var(--white)}
.panel-white .cnav{--c-bg:rgba(0,0,0,.06);--c-dot:rgba(0,0,0,.25);--c-on:#000;--c-ico:#000}
.steps+.cnav{margin-top:calc(1.5rem - var(--gap-s))}
@media (max-width:39.99rem){.steps+.cnav{display:flex}}
@media (max-width:47.99rem){.methods+.cnav{display:flex}}
.cnav-btn{display:grid;place-items:center;width:2.25rem;height:2.25rem;padding:0;border:0;border-radius:50%;background:var(--c-bg);color:var(--c-ico);cursor:pointer;transition:opacity .2s ease,transform .2s ease}
.cnav-btn svg{width:1rem;height:1rem}
.cnav-btn:active{transform:scale(.92)}
.cnav-btn[disabled]{opacity:.35;cursor:default}
.cnav-dots{display:flex;align-items:center;gap:.5rem;height:2.25rem;padding:0 1rem;border-radius:100px;background:var(--c-bg)}
.cnav-dot{width:.5rem;height:.5rem;padding:0;border:0;border-radius:100px;background:var(--c-dot);cursor:pointer;transition:width .35s cubic-bezier(.2,.7,.2,1),background-color .35s ease}
.cnav-dot[aria-current]{width:1.5rem;background:var(--c-on)}
.panel-white .cnav :focus-visible{outline-color:#000}

/* method cards: flip to a ratio calculator (main.js) */
.method{transform-style:preserve-3d;transform:rotateY(calc(var(--flip,0) * 180deg));transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.method.flipped{--flip:1}
.method>:not(.method-back){backface-visibility:hidden;-webkit-backface-visibility:hidden}
.calc-open{display:inline-flex;align-items:center;align-self:center;gap:.4rem;padding:.45rem .8rem;border:1px solid var(--line);border-radius:100px;background:transparent;color:var(--sand);font:inherit;font-size:.875rem;letter-spacing:-.02em;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
.calc-open:hover{background:rgba(211,206,190,.08);border-color:rgba(211,206,190,.35)}
.method-back{position:absolute;inset:-1px;display:flex;flex-direction:column;gap:1rem;padding:2rem;background:var(--card);border:1px solid var(--line);border-radius:.75rem;transform:rotateY(180deg) translateZ(1px);backface-visibility:hidden;-webkit-backface-visibility:hidden;text-align:left}
.calc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.calc-head h4{margin:0;font-weight:400;font-size:1.5rem;line-height:1;color:var(--sand)}
.calc-head p{margin-top:.5rem;font-size:.875rem;color:var(--body)}
.calc-x{display:grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;padding:0;border:1px solid var(--line);border-radius:50%;background:none;color:var(--white);cursor:pointer}
.calc-x svg{width:1rem;height:1rem}
.calc-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line)}
.stepper{display:flex;align-items:center;gap:.5rem}
.stepper button{display:grid;place-items:center;width:2.25rem;height:2.25rem;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:var(--white);font:inherit;font-size:1.25rem;line-height:1;cursor:pointer}
.stepper button[disabled]{opacity:.3;cursor:default}
.stepper output{min-width:4.2rem;text-align:center;font:700 1.125rem/1 var(--dots);letter-spacing:0;color:var(--white)}
.calc-result{margin-top:auto}
.calc-result span{display:block;font-size:.875rem}
.calc-result output{display:block;margin-top:.25rem;font:700 clamp(3rem,2.4rem + 2vw,4rem)/1 var(--dots);letter-spacing:0;color:var(--sand)}
.calc-meta{font-size:.875rem;color:var(--body)}
@media (prefers-reduced-motion:reduce){.method{transition:none}}

/* demo shot on the phone in the hero. 1u = one pixel of the 501px-wide hand image */
.demo-start{position:absolute;left:43.67%;top:24.76%;width:39.8%;height:16.51%;padding:0;border:0;border-radius:999px;background:none;cursor:pointer;z-index:1}
.demo-start::after{content:"";position:absolute;inset:0;border:2px solid var(--sand);border-radius:inherit;opacity:0;animation:demo-ping 2.6s ease-out 1.5s infinite}
.demo-start:hover::after{animation-duration:1.3s}
.demo-start.seen::after{animation:none}
@keyframes demo-ping{0%{opacity:.8;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.1,1.16)}}
.demo{--u:calc(100cqi / 501);position:absolute;left:40.12%;top:1.316%;width:46.9%;height:67.24%;z-index:2;display:flex;flex-direction:column;padding:calc(46 * var(--u)) calc(12 * var(--u)) calc(22 * var(--u));border-radius:calc(33 * var(--u));background:radial-gradient(120% 60% at 50% 100%,rgba(223,104,0,.22),transparent 70%),#050505;color:var(--white);font-size:calc(9 * var(--u));line-height:1.3;letter-spacing:-.02em;overflow:hidden;opacity:0;transform:scale(.96);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.demo.open{opacity:1;transform:none}
.demo[hidden]{display:none}
.demo button{font:inherit;letter-spacing:inherit;color:inherit;cursor:pointer}
.demo-head{display:flex;align-items:center;gap:calc(8 * var(--u));margin-bottom:calc(10 * var(--u))}
.demo-head p{font-size:calc(11 * var(--u))}
.demo-back{display:grid;place-items:center;width:calc(22 * var(--u));height:calc(22 * var(--u));padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.1)}
.demo-back svg{width:50%;height:50%}
.demo-view{display:flex;flex-direction:column;gap:calc(7 * var(--u));flex:1;min-height:0}
.demo-view[hidden]{display:none}
.demo-dial{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(8 * var(--u));border:1px dashed rgba(255,255,255,.22);border-radius:calc(26 * var(--u))}
.demo-time{font:700 calc(36 * var(--u))/1 var(--dots);letter-spacing:0;font-variant-numeric:tabular-nums}
.demo-weight{font:700 calc(28 * var(--u))/1 var(--dots);letter-spacing:0;color:var(--sand)}
.demo-chip{padding:calc(3 * var(--u)) calc(8 * var(--u));border:1px solid rgba(255,255,255,.2);border-radius:100px;font-size:calc(8 * var(--u));color:var(--body)}
.demo-btn{display:flex;align-items:center;justify-content:center;gap:calc(5 * var(--u));height:calc(30 * var(--u));margin-top:auto;border:0;border-radius:100px;background:var(--sand);color:#000!important;font-size:calc(9.5 * var(--u))!important}
.demo-btn[disabled]{opacity:.4;cursor:default}
.demo-sq{width:calc(7 * var(--u));height:calc(7 * var(--u));background:#000}
.demo-results{display:grid;grid-template-columns:1fr 1fr;gap:calc(4 * var(--u))}
.demo-results div{padding:calc(7 * var(--u));border-radius:calc(8 * var(--u));background:rgba(255,255,255,.07)}
.demo-results span{display:block;font-size:calc(8 * var(--u));color:var(--body)}
.demo-results b{display:block;margin-top:calc(3 * var(--u));font:700 calc(16 * var(--u))/1 var(--dots);letter-spacing:0}
.demo-label{margin-top:calc(4 * var(--u));font-size:calc(10 * var(--u))}
.demo-chips{display:flex;flex-wrap:wrap;gap:calc(4 * var(--u))}
.demo-chips button{padding:calc(5 * var(--u)) calc(8 * var(--u));border:1px solid rgba(255,255,255,.14);border-radius:100px;background:rgba(255,255,255,.06);font-size:calc(8.5 * var(--u));transition:background-color .2s ease,color .2s ease}
.demo-chips button[aria-pressed="true"]{background:var(--sand);border-color:var(--sand);color:#000}
.demo-tip-title{margin-top:calc(6 * var(--u));font-size:calc(18 * var(--u));line-height:1.1;color:var(--sand)}
.demo-tip-text{color:var(--body)}
.demo-link{margin:calc(2 * var(--u)) auto 0;padding:calc(4 * var(--u));border:0;background:none;color:var(--body)!important}
@media (prefers-reduced-motion:reduce){.demo-start::after{animation:none}.demo{transition:none}}

/* Konami code and perfect-shot easter egg: coffee beans fall from the top */
.bean-rain{position:fixed;inset:0;z-index:90;overflow:hidden;pointer-events:none}
.bean-rain img{position:absolute;top:0;max-width:none}
.toast{position:fixed;left:50%;bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));z-index:91;padding:.75rem 1.25rem;border-radius:100px;background:var(--sand);color:#000;font-size:.9375rem;transform:translate(-50%,150%);opacity:0;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .3s ease;pointer-events:none}
.toast.show{transform:translate(-50%,0);opacity:1}