:root{--paper:#f4efea;--ink:#1a0f0a;--night:#100f0d;--muted:#75675d;--accent:#a68c7b;--line:#1a0f0a20;--hero:88px;--heading:54px;--body:18px;--small:14px;--title:var(--body);--gutter:max(48px,calc((100vw - 1240px)/2))}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:var(--body);-webkit-font-smoothing:antialiased;font-kerning:normal}
a{color:inherit}img{display:block;max-width:100%;height:auto}svg{display:block}
a:focus-visible,summary:focus-visible{outline:3px solid #916543;outline-offset:6px}
a,summary{-webkit-tap-highlight-color:transparent}
h1,h2,h3,p{margin-top:0}h1,h2,h3{font-weight:500;text-wrap:balance}
h1{font-size:var(--hero);line-height:1.025;letter-spacing:-.045em;margin-bottom:28px}
h2{font-size:var(--heading);line-height:1.12;letter-spacing:-.032em;margin-bottom:24px}
h3{font-size:var(--body);line-height:1.4;letter-spacing:-.015em;margin-bottom:14px;font-weight:600}
p{font-size:var(--body);line-height:1.62;letter-spacing:-.008em;color:var(--muted);margin-bottom:24px;text-wrap:pretty}
.title-line,.reveal-line{display:block}
.wrap{max-width:1336px;margin-inline:auto;padding-inline:48px}
.section-shell{margin-inline:auto}
.svg-library{position:absolute;width:0;height:0;overflow:hidden}
.icon,.feature-icon{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon{width:24px;height:24px}.link-arrow{width:1em;height:1em}.feature-icon{width:44px;height:44px}
.skip-link{position:fixed;top:12px;left:20px;z-index:100;background:white;padding:16px}
.skip-link:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
.button{display:inline-flex;justify-content:center;align-items:center;gap:20px;min-height:48px;padding:18px 26px;background:var(--ink);color:white;border-radius:100px;text-decoration:none;font-size:var(--body);font-weight:500;transition:translate .25s,box-shadow .25s}
.button:hover{translate:0 -2px;box-shadow:0 10px 25px #1a0f0a20}
.button-small{font-size:var(--small);padding:12px 20px}
.site-header{max-width:1360px;margin:auto;padding:24px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:var(--small)}
.brand img{width:42px;border-radius:11px}.site-header nav{display:flex;gap:28px}
.site-header nav a{text-decoration:none;font-size:var(--small)}
.site-header nav a:hover,.site-footer a:hover{text-decoration:underline;text-underline-offset:5px}
/* Original iPhone frame and actual screen, with no invented device geometry. */
.phone{position:relative;width:100%;min-width:0;aspect-ratio:1350/2760;filter:drop-shadow(0 18px 12px #1a0f0a30) drop-shadow(0 55px 34px #1a0f0a30);transform-origin:center 60%}
.phone-screen{position:absolute;left:5.333333%;top:2.5%;width:89.333333%;height:95%;border-radius:13.5% / 6.2%;overflow:hidden;background:#191919}
.phone-screen>img{width:100%;height:100%;object-fit:cover}
.phone-frame{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
/* Quiet explanations anchor the moving title and device planes. */
.scroll-scene{position:relative;isolation:isolate}
.scene-pin{position:relative;isolation:isolate;overflow:clip;max-width:none;padding:64px var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.hero-copy,.dial-copy,.recipe-copy{position:relative;z-index:2;min-width:0}
.scene-pin h1,.scene-pin h2{transform-origin:left bottom}
.hero-copy{max-width:550px}.hero-details{max-width:420px}
.lead{margin-bottom:28px}
.store-button{gap:15px;padding:13px 22px;border-radius:20px}
.apple{width:27px;height:31px;fill:currentColor}.store-button span{font-size:var(--body);line-height:1.1}
.store-button small{display:block;font-size:var(--small);font-weight:400;line-height:1.25;margin-bottom:4px}
.store-button .store-arrow{margin-left:22px}
.hero-stage{position:relative;width:100%;max-width:550px;justify-self:center;height:min(720px,87svh);z-index:3}
.hero-stage .phone{position:absolute;margin:0}
.hero-stage .phone-back{left:8%;top:0;width:min(300px,36svh);z-index:1}
.hero-stage .phone-front{right:0;top:9%;width:min(360px,42svh);z-index:2}
.discover-link{display:none}
.scene-space,.scene-haze{position:absolute;pointer-events:none;z-index:-1}
.scene-space{inset:4% -5% 0 44%;background:radial-gradient(ellipse at 50% 50%,#fff9,#a68c7b33 44%,#5b3b2a10 60%,transparent 73%)}
.scene-haze{inset:0;background:radial-gradient(ellipse at 65% 80%,#5b3b2a20,transparent 66%)}
.dark-act{background:linear-gradient(180deg,var(--night),#1a0f0a 50%,var(--night));color:var(--paper)}
.intro{padding-block:90px;overflow:clip}
.intro h2{max-width:950px}.intro h2 .reveal-line+span{color:#bda28f}
.intro-text{max-width:630px;margin-bottom:50px}.intro-text,.steps p{color:#bfb4ac}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.steps article{position:relative;border-top:1px solid #ffffff26;padding-top:28px}
.step-number{position:absolute;right:0;top:28px;font-size:var(--small);color:#bda28f}
.steps .feature-icon{color:#bda28f;margin-bottom:24px}.steps p{margin-bottom:0;max-width:320px}
.dial-section{color:var(--paper)}.dial-copy{max-width:455px}.dial-details{color:#bfb4ac}
.dial-visual{position:relative;display:flex;justify-content:center;z-index:3}
.phone-dial{width:min(360px,42svh);filter:drop-shadow(0 25px 18px #0008) drop-shadow(0 65px 40px #0008)}
.example-change{padding:24px 28px;margin-top:30px;border:1px solid #a68c7b24;border-radius:24px;background:#29231f;box-shadow:0 28px 48px #0004}
.example-change>span,.example-change small{font-size:var(--small);color:#bfb4ac;line-height:1.5}
.change-values{display:flex;align-items:center;gap:22px;margin:20px 0}
.change-values b{font-size:var(--heading);font-weight:400;letter-spacing:-.035em;line-height:1.15;font-variant-numeric:tabular-nums}
.change-explanation{font-size:var(--small);line-height:1.5;color:#bfb4ac}.example-change small{display:block}
.change-arrow{stroke-dasharray:48;stroke-dashoffset:var(--arrow-draw,0)}
.dial-section .scene-space{background:radial-gradient(ellipse,#a68c7b30,#5b3b2a20 45%,transparent 72%)}
.ratio-backdrop{display:none}
.beans-section{max-width:none;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:85px;padding:64px var(--gutter) 100px;background:linear-gradient(180deg,#f4efea 50%,#e8dfd5);overflow:clip}
.beans-stage{display:flex;justify-content:center}.phone-beans{max-width:285px}.beans-copy>p{max-width:440px}
.benefits{list-style:none;padding:0;margin:30px 0;display:grid;gap:18px}
.benefits li{display:flex;align-items:center;gap:12px;font-size:var(--body);line-height:1.5}.benefits .icon{width:20px;color:#826b5a}
.text-link{display:inline-flex;align-items:center;gap:14px;text-decoration:none;border-bottom:1px solid var(--ink);padding:12px 0}
.text-link .icon{width:20px;transition:translate .2s}.text-link:hover .icon{translate:4px 0}
.recipe-reel{background:linear-gradient(180deg,#e8dfd5 calc(100% - 360px),#ece4dc calc(100% - 240px),#f2ece5 calc(100% - 100px),var(--paper));padding-bottom:100px;overflow-x:clip}
.recipes-section{overflow:visible}
.recipes-section .scene-space,.recipes-section .scene-haze{mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}.recipe-copy{max-width:455px}.recipe-details{margin-bottom:24px;max-width:430px}
.recipe-demo{max-width:385px}.drink-drawing{width:140px;height:116px;margin:0 auto 18px;color:var(--ink);filter:drop-shadow(0 12px 10px #3a231615)}
.ingredient{display:flex;align-items:stretch;gap:12px}
.ingredient-base,.ingredient-milk{flex:1;background:var(--paper);border:1px solid #1a0f0a08;border-radius:22px;padding:18px 20px;box-shadow:0 15px 30px #1a0f0a0b}
.ingredient strong{font-size:var(--body);font-weight:600}.ingredient small{display:block;font-size:var(--small);color:var(--muted);margin-top:5px}
.ingredient-plus{align-self:center;color:var(--muted)}
.preparation{font-size:var(--body);margin:20px 0 0}
.espresso-fill,.cup-fill{transform:scaleY(var(--fill,1));transform-box:fill-box;transform-origin:center bottom}
.milk-pour{opacity:var(--pour,0);stroke-dasharray:10;stroke-dashoffset:calc((1 - var(--pour,0))*10)}
.phone-recipe{width:min(360px,42svh);justify-self:center;z-index:3}
.phone-focus{position:absolute;display:none;left:5%;width:90%;top:var(--focus-top);height:var(--focus-height);z-index:2;border:1px solid #a68c7bcc;border-radius:8% / 25%;box-shadow:0 0 0 300px #100f0d55;pointer-events:none}
.focus-dialin{--focus-top:33.4%;--focus-height:10.4%}.focus-recipe{--focus-top:74.7%;--focus-height:16.5%}.focus-home{--focus-top:42%;--focus-height:24.5%}
.cinema .phone-focus{display:block;opacity:0}
/* Background handoffs sit between sections instead of covering the content. */
.hero-reel:after{content:"";display:block;position:relative;height:180px;pointer-events:none;margin-bottom:-1px}
.hero-reel:after{background:linear-gradient(180deg,#f4efea,#e3d8ce 15%,#baa18b 36%,#73533d 58%,#322218 78%,#100f0d)}
.flow-bridge{height:clamp(150px,22vh,260px);margin-block:-1px;pointer-events:none}
.flow-to-light{background:linear-gradient(180deg,#100f0d,#322218 22%,#73533d 42%,#baa18b 64%,#e3d8ce 85%,#f4efea)}
.flow-to-dark{background:linear-gradient(180deg,#f4efea,#e3d8ce 15%,#baa18b 36%,#73533d 58%,#322218 78%,#100f0d)}
.details-section{padding-block:40px 100px;overflow:clip}.details-heading{margin-bottom:44px}
.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.detail-grid article{background:#ffffff90;border-radius:28px;padding:32px;box-shadow:0 18px 34px #1a0f0a08}
.detail-mark{display:block;font-size:var(--heading);font-variant-numeric:tabular-nums;font-weight:400;letter-spacing:-.035em;color:#8c715e;line-height:1.2;margin-bottom:40px}
.ratio-arrow{display:inline-block;width:1em;height:1em;font-size:var(--body);vertical-align:middle}.detail-grid p{margin-bottom:0}
.theme-mark{display:flex;height:58px;margin-bottom:40px}.theme-mark span{width:58px;height:58px;border-radius:50%;background:#efe5db;box-shadow:inset 0 0 0 1px #1a0f0a09}
.theme-mark span+span{margin-left:-15px;background:#262626;border:4px solid #faf7f4}
.faq-section{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;padding-block:20px 80px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;line-height:1.5;padding:24px 0}
.faq-list summary::-webkit-details-marker{display:none}.faq-list summary>span{line-height:1;transition:rotate .2s}.faq-list details[open] summary>span{rotate:45deg}
.faq-list p{padding-right:24px;margin-bottom:24px}
.download{position:relative;padding:40px 24px 90px;text-align:center;background:var(--night);color:var(--paper);overflow:clip}
.download:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 25%,#5b3b2a28,transparent 67%);pointer-events:none}
.download>*{position:relative}.download-icon{width:96px;margin:0 auto 32px;border-radius:24px;overflow:hidden;box-shadow:0 25px 35px #0007}
.download p,.download-caption{color:#bfb4ac}.download-button{background:var(--paper);color:var(--ink);margin-top:8px}.download-caption{display:block;font-size:var(--small);margin-top:24px}
.site-footer{padding-block:48px 32px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:26px}
.footer-brand{display:flex;align-items:center;gap:16px;text-decoration:none;font-weight:500;font-size:var(--body)}
.footer-brand span{font-size:var(--small);font-weight:400;color:var(--muted)}
.site-footer>div{display:flex;gap:26px;font-size:var(--small)}.site-footer>div a{text-decoration:none}
.site-footer>p{width:100%;margin:0;padding-top:20px;border-top:1px solid var(--line);font-size:var(--small)}
.landing .site-footer{max-width:none;padding-inline:var(--gutter);background:var(--night);color:var(--paper)}
.landing .site-footer p,.landing .footer-brand span{color:#bfb4ac}.landing .site-footer>p{border-color:#ffffff20}
.legal{max-width:780px;padding-block:70px 80px}.legal h1{font-size:var(--heading);overflow-wrap:anywhere}.legal h2{font-size:var(--body);letter-spacing:0;margin-top:36px;margin-bottom:16px}.legal p,.legal li{line-height:1.7}.legal ul{padding-left:20px}
@media(min-width:1001px) and (min-height:700px){
 .cinema .hero-reel{height:200svh}.cinema .dial-reel{height:200svh}.cinema .recipe-reel{height:210svh;padding-bottom:0}
 .cinema .scene-pin{position:sticky;top:0;height:100svh;padding-block:36px}
 .cinema .hero-reel:after{position:absolute;left:0;right:0;bottom:-1px;height:160px;z-index:-1}
 .cinema .title-line{white-space:nowrap}
 .cinema .phone{will-change:translate,scale}
}
@media(min-width:1001px) and (min-height:700px) and (max-height:799px){
 .scene-pin{gap:60px}.recipe-heading h2{margin-bottom:16px}.recipe-details{margin-bottom:14px}
 .drink-drawing{width:100px;height:78px;margin-bottom:12px}.preparation{margin-top:16px}
 .ingredient-base,.ingredient-milk{padding:16px 18px}
 .hero-stage{height:87svh}
}
@media(max-width:1200px){:root{--hero:72px;--heading:46px}.scene-pin{gap:40px}.change-values{gap:18px}.example-change{padding:22px}.detail-grid article{padding:26px}}
@media(max-width:1000px){
 :root{--hero:60px;--heading:42px;--body:17px;--gutter:36px}
 .wrap{padding-inline:36px}.scene-pin{padding-block:60px;gap:40px}
 .hero-stage{height:510px}.hero-stage .phone-back{width:175px}.hero-stage .phone-front{width:205px;top:48px}
 .phone-dial,.phone-recipe{width:250px}.phone-beans{max-width:250px}
 .brand span{display:none}.site-header{padding-inline:36px}.beans-section{gap:48px}
 .steps{gap:28px}.faq-section{gap:36px}.detail-grid{gap:16px}.detail-grid article{padding:24px}
 .hero-reel:after{height:140px}
}
@media(max-width:700px){
 :root{--hero:50px;--heading:34px;--body:17px;--gutter:24px}
 .wrap{padding-inline:24px}.site-header{padding:18px 24px;gap:16px}.site-header nav{display:none}.brand img{width:40px}.button-small{gap:12px;padding:11px 16px;min-height:44px}
 .scene-pin{grid-template-columns:minmax(0,1fr);padding:38px 24px 36px;gap:36px}
 .hero-copy,.hero-details{max-width:none}
 .hero-stage{height:auto;display:block;aspect-ratio:.6;max-width:440px;margin-top:8px;padding:0}
 .hero-stage .phone-back{position:absolute;left:2%;right:auto;top:0;width:58%;max-width:none}
 .hero-stage .phone-front{position:absolute;left:auto;right:3%;top:9%;width:70%;max-width:none;margin:0}
 .intro{padding-block:48px 64px}.intro-text{margin-bottom:32px}.steps{grid-template-columns:minmax(0,1fr);gap:28px}
 .steps article{padding:26px 0 0 60px}.step-number{top:27px}.steps .feature-icon{position:absolute;left:0;top:28px;width:36px;height:36px}.steps h3{padding-right:24px}.steps p{max-width:none}
 .dial-section{padding-top:24px;padding-bottom:40px}.dial-copy,.recipe-copy{max-width:none}.example-change{margin-top:28px;padding:24px}
 .phone-dial,.phone-recipe{width:100%;max-width:300px}
 .beans-section{display:flex;flex-direction:column-reverse;align-items:stretch;gap:38px;padding:40px 24px 64px}.phone-beans{width:100%;max-width:300px}
 .benefits{margin-block:25px}.recipe-demo{max-width:400px;margin-inline:auto}
 .drink-drawing{width:140px;height:116px}.recipe-details{margin-bottom:28px}
 .phone-recipe{margin-top:8px}
 .details-section{padding-block:35px 64px}.details-heading{margin-bottom:32px}.detail-grid{grid-template-columns:minmax(0,1fr);gap:18px}.detail-grid article{padding:28px}
 .detail-mark,.theme-mark{margin-bottom:28px}
 .faq-section{grid-template-columns:minmax(0,1fr);gap:8px;padding-block:0 40px}
 .faq-list summary{padding-block:22px}.faq-list p{padding-right:12px}
 .download{padding-block:30px 64px}.download-icon{width:88px;border-radius:23px}.download-button{padding-inline:22px}
 .site-footer{align-items:flex-start;gap:24px}.site-footer>div{flex-wrap:wrap;gap:20px}.footer-brand{gap:12px}
 .flow-bridge{height:150px}.hero-reel:after{height:120px}
 .scene-space{inset:30% -5% 0}.legal{padding-top:44px}
}
@media(max-width:360px){:root{--hero:44px;--heading:32px}.hero-stage{gap:10px}.ingredient-base,.ingredient-milk{padding:16px 12px}.ingredient{gap:8px}.example-change{padding:20px}.change-values{gap:16px}.download-button{padding-inline:18px;gap:12px}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}
 .scroll-scene{height:auto!important}.scene-pin{position:relative!important;height:auto!important}
 .hero-copy,.dial-copy,.recipe-copy,.scene-pin h1,.scene-pin h2,.title-line,.phone,.floating-note,.intro h2,.intro-text,.steps article,.beans-copy,.beans-stage,.details-heading,.detail-grid article,.download-copy,.download-icon{translate:none!important;scale:none!important;opacity:1!important}
 .phone-focus,.milk-pour{display:none!important}.espresso-fill,.cup-fill{transform:none!important}.change-arrow{stroke-dashoffset:0!important}
}