/* Concept 2 visual owner: open editorial canvas, restrained type, unified devices. */
:root{--canvas:#fff;--ink:#171715;--muted:#73736d;--surface:#f6f5f8;--line:#ddddd6;--content:960px;--section:130px;--gutter:32px;--radius:42px;--phone-width:252px;--phone-bezel:6px;--phone-radius:37px;--ease:cubic-bezier(.22,1,.36,1);--shadow:0 25px 50px -25px #35302455;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink);background:var(--canvas);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #68774a;outline-offset:6px}button:active,.cta:active{transform:scale(.97)}.skip{position:absolute;top:-100px}.skip:focus{top:10px;z-index:20}.navigation{max-width:1120px;margin:auto;padding:30px var(--gutter);display:flex;align-items:center;justify-content:space-between}.brand{font-size:35px;font-weight:600;letter-spacing:-2px;display:flex;gap:10px;align-items:center}.brand img{border-radius:11px;box-shadow:0 4px 10px #0002}.cta{background:var(--ink);color:white;padding:15px 21px;border-radius:16px;font-size:14px;display:flex;gap:22px;align-items:center;box-shadow:0 5px 10px #0001}.eyebrow{font-size:13px;color:var(--muted);letter-spacing:.025em;margin:0 0 22px}h1,h2,p{margin-top:0}.phone{width:var(--phone-width);padding:var(--phone-bezel);background:#f8f8f8;border-radius:var(--phone-radius);box-shadow:0 0 0 1px #d2d2d2,0 0 0 3px #f4f4f4,var(--shadow);overflow:hidden;position:relative}.phone>img,.phone>video{display:block;width:100%;height:auto;aspect-ratio:604/1310;object-fit:contain;border-radius:calc(var(--phone-radius) - var(--phone-bezel))}.editorial{max-width:650px;margin:80px auto var(--section);padding:0 var(--gutter);font-size:clamp(32px,3.8vw,46px);line-height:1.13;letter-spacing:-.04em}.editorial p{margin-bottom:38px}.basil{display:inline-block;width:64px;height:64px;object-fit:contain;vertical-align:middle;margin:-16px 0;animation:leaf-breathe 9s ease-in-out infinite}.product{overflow:clip;max-width:var(--content);margin:auto;text-align:center;padding:0 var(--gutter)}h2{font-size:clamp(34px,4vw,49px);line-height:1.05;font-weight:400;letter-spacing:-.045em}.choices,.cook-options{display:flex;justify-content:center;gap:8px;margin:28px 0 20px}.choices button,.cook-options button{background:none;border:1px solid transparent;border-radius:30px;padding:12px 24px;font-size:15px;transition:background .25s,color .25s}.choices button[aria-pressed=true]{background:var(--ink);color:#fff}.choices button[aria-pressed=false]{color:var(--muted)}.demo-description{font-size:17px;color:var(--muted);line-height:1.5;max-width:540px;margin:0 auto 42px;min-height:51px}.device-stage{position:relative;height:590px;max-width:900px;margin:auto}.demo-card{position:absolute;top:27px;left:calc(50% - var(--phone-width)/2);transition:transform .65s var(--ease),opacity .5s;transform:translateX(245px) rotate(8deg);opacity:.6;z-index:1}.demo-card[data-demo="0"]{transform:translateX(-245px) rotate(-8deg)}.demo-card[data-demo="1"]{transform:translateX(245px) rotate(8deg)}.demo-card[data-demo="2"],.demo-card[data-demo="3"]{transform:translateX(0);opacity:0;visibility:hidden}.demo-card[data-active]{transform:translateX(0) translateY(-22px);opacity:1;z-index:3;visibility:visible}.phone>video{position:absolute;inset:var(--phone-bezel);width:calc(100% - 2*var(--phone-bezel));height:calc(100% - 2*var(--phone-bezel))}.replay{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);background:#ffffffdf;border:1px solid white;border-radius:30px;padding:13px 21px;opacity:0;pointer-events:none;box-shadow:0 4px 25px #0002;display:flex;gap:15px;align-items:center}.demo-card[data-active]:hover .replay,.demo-card[data-active]:focus-within .replay,.demo-card[data-active].blocked .replay{opacity:1;pointer-events:auto}.cook-options{margin:5px 0}.cook-options[hidden]{display:none}.cook-options button[aria-pressed=true]{background:var(--surface)}.motion-setting{background:none;border:0;color:var(--muted);font-size:12px;padding:14px;margin-top:12px;text-decoration:underline;text-underline-offset:4px}.tap-cue{position:absolute;width:25px;height:25px;background:#fff6;border:2px solid white;box-shadow:0 1px 7px #0004;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);z-index:5}.loop-first-frame{position:absolute;inset:var(--phone-bezel);width:calc(100% - 2*var(--phone-bezel))!important;height:calc(100% - 2*var(--phone-bezel))!important;pointer-events:none;opacity:0}.faq{max-width:var(--content);margin:var(--section) auto 0;border-radius:var(--radius);background:var(--surface);padding:60px;display:grid;grid-template-columns:1fr 2fr;gap:45px}.faq h2{font-size:35px}.questions details{border-bottom:1px solid var(--line)}.questions details:last-child{border-bottom:0}.questions summary{cursor:pointer;list-style:none;font-size:21px;letter-spacing:-.035em;padding:23px 0;display:flex;justify-content:space-between;gap:20px}.questions summary::-webkit-details-marker{display:none}.questions summary span{font-size:27px;font-weight:300;transition:transform .25s}.questions details[open] summary span{transform:rotate(45deg)}.questions p{font-size:16px;line-height:1.65;color:#64645d;padding-right:25px}.questions a{text-decoration:underline}footer{max-width:var(--content);margin:60px auto 0;padding:0 var(--gutter) 35px}.footer-signature{display:flex;align-items:center;gap:18px;margin-bottom:60px}.footer-signature p{font-size:29px;letter-spacing:-.05em;margin:0}.footer-bottom{display:flex;gap:28px;font-size:13px;color:var(--muted)}.footer-bottom span{margin-right:auto}[data-paused] .steam path,[data-paused] .basil{animation-play-state:paused}@keyframes steam-rise{0%{opacity:0;transform:translateY(24px) scaleX(.7)}25%{opacity:.28}70%{opacity:.12}100%{opacity:0;transform:translateY(-65px) scaleX(1.2)}}@keyframes leaf-breathe{50%{transform:translateY(-4px) rotate(4deg)}}@keyframes arrive{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@media(max-width:700px){:root{--gutter:22px;--section:80px;--phone-width:244px}.navigation{padding-top:22px}.brand{font-size:29px}.cta{font-size:12px;padding:13px 15px;gap:14px}.eyebrow{font-size:11px}.editorial{margin-top:55px}.desktop{display:none}.basil{width:51px;height:51px}.product{overflow:hidden}.device-stage{height:555px}.demo-card:not([data-active]){opacity:0!important;visibility:hidden!important;pointer-events:none}.demo-card[data-active]{transform:translateY(0)}.choices button{padding:12px 20px}.demo-description{font-size:15px;min-height:68px}.faq{margin-left:14px;margin-right:14px;padding:30px 26px;border-radius:30px;grid-template-columns:1fr;gap:8px}.faq h2{font-size:31px}.questions summary{font-size:19px}.footer-bottom{flex-wrap:wrap;gap:20px;font-size:12px}.footer-bottom span{width:100%}.footer-signature{margin-bottom:35px}.replay{opacity:1;pointer-events:auto;font-size:12px;padding:10px 17px;background:#ffffffb8}.demo-card:not([data-active]) .replay{pointer-events:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Concept 2 narrative hierarchy: visual first, concise supporting captions. */
.product>h2{font-size:23px;line-height:1.12;letter-spacing:-.04em;margin:38px auto 24px;font-weight:400}
.product>.choices{margin:0 0 14px;gap:4px}
.product>.choices button{font-size:13px;padding:9px 19px}
.product>.demo-description{font-size:14px;line-height:1.45;max-width:380px;min-height:41px;margin:0 auto 12px}
.product>.motion-setting{margin-top:6px}
@media(max-width:700px){.product>h2{font-size:22px;margin-top:30px}.product>.demo-description{max-width:285px}}

/* A gradual canvas shift gives the lower white panels their contrast. */
:root{--lower-canvas:#f2f2f5}
body{background:linear-gradient(to bottom,#fff 0,#fff 1100px,var(--lower-canvas) 2050px)}
.navigation{background:#fff}
main{background:linear-gradient(to bottom,#fff 0,#fff 1100px,var(--lower-canvas) 2050px)}
.product{width:calc(100% - 64px);background:#fff;border-radius:var(--radius);padding:60px var(--gutter) 38px}
.faq{width:calc(100% - 64px);background:#fff;margin-top:24px}
@media(max-width:700px){main{background:linear-gradient(to bottom,#fff 0,#fff 900px,var(--lower-canvas) 1800px)}.product{width:calc(100% - 28px);border-radius:30px;padding:32px 12px 25px}.faq{width:calc(100% - 28px);margin:18px auto 0}}

/* Original Figma lockup and compact iPhone access badge. */
.navigation .brand{width:90px;height:24px;display:block;padding-left:2px;letter-spacing:normal}
.navigation .brand .roux-wordmark{display:block;width:85.57px;height:24px;max-width:none;border-radius:0;box-shadow:none}
.navigation .cta,.footer-invitation .cta{gap:6px;border:1px solid #ffffff24;border-radius:10px;padding:8px 15px;background:linear-gradient(155deg,#ffffff18,transparent 48%),rgba(12,12,15,.94);color:white;backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25);box-shadow:inset 0 1px 1px #ffffff36,inset 0 -1px 1px #00000030,0 5px 14px #00000018;min-height:40px;transition:background .2s,box-shadow .2s,transform .2s}
.navigation .cta>img,.footer-invitation .cta>img{display:block;width:15px;height:19px;object-fit:contain;filter:invert(1)}
.cta-copy{display:flex;flex-direction:column;gap:1px;text-align:left;line-height:1}
.cta-copy small{font-size:8px;font-weight:400;letter-spacing:0}
.cta-copy strong{font-size:14px;font-weight:500;letter-spacing:-.025em}
.navigation .cta{gap:5px;padding:6px 11px;min-height:34px;border-radius:9px}
.navigation .cta>img{width:13px;height:16px}
.navigation .cta-copy small{font-size:7px}
.navigation .cta-copy strong{font-size:12px}

/* A compact trio and one caption own the product panel composition. */
.product{container-type:inline-size;max-width:960px;padding:56px 32px 48px;--phone-width:clamp(104px,27cqw,240px);--phone-bezel:clamp(3px,.6cqw,6px);--phone-radius:calc(var(--phone-width)*.147);--spread:calc(var(--phone-width)*.83)}
.product .device-stage{height:calc(var(--phone-width)*2.24 + 28px);max-width:780px}
.product .demo-card{top:8px;opacity:1!important;visibility:visible!important;pointer-events:auto;transform:translateX(0);z-index:3}
.product .demo-card[data-demo="1"]{transform:translateX(var(--spread)) translateY(8px) rotate(3deg);z-index:1}
.product .demo-card[data-demo="2"],.product .demo-card[data-demo="3"]{transform:translateX(calc(-1*var(--spread))) translateY(8px) rotate(-3deg);z-index:1}
.product .demo-card[data-demo="3"]{visibility:hidden!important;pointer-events:none;opacity:0!important}
.product .device-stage:has([data-demo="3"][data-active]) [data-demo="2"]{visibility:hidden!important;opacity:0!important}
.product .demo-card[data-demo="3"][data-active]{visibility:visible!important;opacity:1!important;pointer-events:auto}
.product>h2{margin:44px auto 0;font-size:23px;line-height:1.12}
.product .demo-card:hover .replay,.product .demo-card:focus-within .replay,.product .demo-card.blocked .replay{opacity:1;pointer-events:auto}
@media(max-width:700px){.product{padding:32px 16px 34px;--phone-width:clamp(100px,29cqw,190px)}.product>h2{margin-top:28px;font-size:22px}.product .replay{opacity:0;pointer-events:none;padding:8px 12px;font-size:11px}}

.email-toast{position:fixed;z-index:100;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;width:max-content;max-width:calc(100vw - 32px);padding:14px 20px;border-radius:18px;background:#242422;color:#fff;font-size:14px;line-height:1.4;text-align:center;box-shadow:0 8px 30px #0002;opacity:0;transform:translate(-50%,24px);pointer-events:none;transition:opacity .25s ease,transform .4s var(--ease)}
.email-toast[data-visible]{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.email-toast{transition:none}}

/* FAQ icons use centered strokes, independent of font baselines. */
.questions summary{align-items:center;line-height:1.25}
.questions summary span{position:relative;display:block;flex:0 0 18px;width:18px;height:18px;font-size:0;line-height:0}
.questions summary span:before,.questions summary span:after{content:"";position:absolute;left:50%;top:50%;width:15px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);border-radius:1px}
.questions summary span:after{transform:translate(-50%,-50%) rotate(90deg)}
.questions details[open] summary{padding-bottom:9px}
.questions p{margin-top:0;margin-bottom:23px}

/* FixedNavigation owns viewport chrome and its progressive top blur. */
:root{--nav-reserved-height:107px;--nav-haze-height:140px;--nav-layer:60;--nav-top-space:30px}
body{padding-top:var(--nav-reserved-height)}
.navigation{position:fixed;z-index:calc(var(--nav-layer) + 1);inset:0 0 auto;width:100%;padding-top:calc(var(--nav-top-space) + env(safe-area-inset-top));padding-bottom:12px;background:transparent;pointer-events:none}
.navigation>a,.navigation>button{pointer-events:auto}
.nav-haze{position:fixed;z-index:var(--nav-layer);inset:0 0 auto;height:calc(var(--nav-haze-height) + env(safe-area-inset-top));pointer-events:none}
.nav-haze:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#ffffff75,transparent 85%)}
.nav-haze>span{position:absolute;inset:0;backdrop-filter:blur(var(--nav-blur));-webkit-backdrop-filter:blur(var(--nav-blur));mask-image:linear-gradient(to top,transparent var(--fade-start),#000 var(--fade-solid),#000 var(--fade-end),transparent var(--fade-out));-webkit-mask-image:linear-gradient(to top,transparent var(--fade-start),#000 var(--fade-solid),#000 var(--fade-end),transparent var(--fade-out))}
.nav-haze>span:nth-child(1){--nav-blur:.0625px;--fade-start:0%;--fade-solid:12.5%;--fade-end:25%;--fade-out:37.5%}
.nav-haze>span:nth-child(2){--nav-blur:.125px;--fade-start:12.5%;--fade-solid:25%;--fade-end:37.5%;--fade-out:50%}
.nav-haze>span:nth-child(3){--nav-blur:.25px;--fade-start:25%;--fade-solid:37.5%;--fade-end:50%;--fade-out:62.5%}
.nav-haze>span:nth-child(4){--nav-blur:.5px;--fade-start:37.5%;--fade-solid:50%;--fade-end:62.5%;--fade-out:75%}
.nav-haze>span:nth-child(5){--nav-blur:1px;--fade-start:50%;--fade-solid:62.5%;--fade-end:75%;--fade-out:87.5%}
.nav-haze>span:nth-child(6){--nav-blur:2px;--fade-start:62.5%;--fade-solid:75%;--fade-end:87.5%;--fade-out:100%}
.nav-haze>span:nth-child(7){--nav-blur:4px;--fade-start:75%;--fade-solid:87.5%;--fade-end:100%;--fade-out:112.5%}
.nav-haze>span:nth-child(8){--nav-blur:8px;--fade-start:87.5%;--fade-solid:100%;--fade-end:112.5%;--fade-out:125%}
.footer-access{padding:0;border:0;background:none;font:inherit;color:inherit}
html{scroll-padding-top:var(--nav-reserved-height)}
.skip:focus{position:fixed;z-index:calc(var(--nav-layer) + 2)}
@media(max-width:700px){:root{--nav-reserved-height:76px;--nav-haze-height:92px;--nav-top-space:20px}.navigation{justify-content:space-between;padding-left:22px;padding-right:22px}.navigation .cta{display:flex;min-height:34px;padding:6px 9px;flex-shrink:0}.navigation .brand{width:78px;height:22px;padding-left:0}.navigation .brand .roux-wordmark{width:78.44px;height:22px}}
@media(prefers-reduced-transparency:reduce){.nav-haze>span{backdrop-filter:none;-webkit-backdrop-filter:none}.nav-haze:before{background:linear-gradient(#fff 40%,#fffffff2 65%,transparent)}}

/* Footer: editorial invitation and quiet legal row, following the reference rhythm. */
.site-footer{--footer-heading:clamp(34px,4vw,44px);max-width:var(--content);margin:56px auto 0;padding:0 var(--gutter) 32px}
.footer-main{display:flex;align-items:center;justify-content:space-between;gap:48px}
.footer-invitation p{font-size:var(--footer-heading);font-weight:400;line-height:1.1;letter-spacing:-.045em;margin:0 0 28px}
.footer-invitation p span{color:#85858b}
.footer-invitation .cta{width:max-content}
.footer-stirring{width:180px;height:180px;object-fit:contain;margin-right:32px}
.site-footer .footer-bottom{margin-top:144px;align-items:center;gap:24px;font-size:12px;color:#939399;line-height:1.5}
.site-footer .footer-bottom>span{margin-right:0;width:auto}
.site-footer .footer-bottom .footer-note{margin-left:auto;color:#77777f}
.site-footer .footer-bottom a{transition:color .2s}
.site-footer .footer-bottom a:hover{color:var(--ink)}
@media(max-width:700px){.site-footer{margin-top:42px;padding-bottom:26px}.footer-main{gap:16px}.footer-stirring{width:116px;height:116px;margin-right:0}.site-footer .footer-bottom{margin-top:88px;gap:14px 20px}.site-footer .footer-bottom .footer-note{flex-basis:100%;margin-left:0;margin-top:6px}}
@media(max-width:420px){.footer-main{position:relative;align-items:flex-start}.footer-stirring{position:absolute;right:0;bottom:0;width:88px;height:88px}.footer-invitation p{font-size:34px}}

/* AccessDialog owns the signup surface and its compact responsive geometry. */
.access-dialog{--access-radius:28px;--access-space:28px;width:min(420px,calc(100vw - 32px));padding:var(--access-space);border:1px solid #fff;border-radius:var(--access-radius);background:#fffffff5;color:var(--ink);box-shadow:0 24px 100px #0002;overflow:visible}
.access-dialog::backdrop{background:#16161935;backdrop-filter:blur(8px)}
.access-dialog[open]{animation:faq-answer-in .24s ease-out both}
.access-dialog h2{font-size:28px;letter-spacing:-.04em;line-height:1.1;margin:12px 28px 14px 0;font-weight:500}
.access-dialog>p{font-size:15px;line-height:1.45;color:#777;margin-bottom:24px}
.access-close{position:absolute;right:14px;top:12px;border:0;background:transparent;font:24px/1 sans-serif;width:32px;height:32px;color:#666;cursor:pointer}
.access-form label{display:block;font-size:13px;margin-bottom:8px}.access-form input{width:100%;font:inherit;padding:14px;border:1px solid #ddd;border-radius:12px;background:#fff;box-sizing:border-box}
.access-submit{width:100%;border:0;border-radius:12px;padding:14px;margin-top:12px;background:#202022;color:#fff;font:inherit;cursor:pointer}.access-submit:disabled{opacity:.65;cursor:default}
.access-result{font-size:14px;line-height:1.4}.access-form small{display:block;color:#888;font-size:11px;line-height:1.5}.access-form a{color:inherit}.access-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.access-inline{border:0;padding:0;background:none;font:inherit;text-decoration:underline;cursor:pointer}
@media(prefers-reduced-motion:reduce){.access-dialog[open]{animation:none}}
/* Three overlapping blur bands retain the progressive edge with fewer samples. */
.nav-haze>span{display:none}
.nav-haze>span:nth-child(6){display:block;--nav-blur:2px;mask-image:linear-gradient(#000 30%,transparent);-webkit-mask-image:linear-gradient(#000 30%,transparent)}
.nav-haze>span:nth-child(7){display:block;--nav-blur:4px;mask-image:linear-gradient(#000 0%,transparent 75%);-webkit-mask-image:linear-gradient(#000 0%,transparent 75%)}
.nav-haze>span:nth-child(8){display:block;--nav-blur:8px;mask-image:linear-gradient(#000 0%,transparent 38%);-webkit-mask-image:linear-gradient(#000 0%,transparent 38%)}