@font-face{font-family:Fraunces;src:url('/assets/fraunces-italic-700.ttf') format('truetype');font-style:italic;font-weight:700;font-display:swap}
*{box-sizing:border-box}html{background:#f7f6ed}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#214f3e;isolation:isolate;background:radial-gradient(ellipse at 4% 12%,#dde9d9 0,transparent 47%),radial-gradient(ellipse at 100% 90%,#dce7f3 0,transparent 43%),#f7f6ed}main{min-height:100svh;display:grid;place-items:center;padding:max(40px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(40px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));position:relative;z-index:1}.welcome{width:min(100%,520px);display:flex;flex-direction:column;align-items:center;gap:48px;text-align:center;padding-bottom:16px}h1{margin:0;font-weight:400;line-height:1.15}.headline-brand{display:block;font-size:clamp(92px,16vw,144px);font-weight:900;letter-spacing:-.085em;line-height:.88;padding-right:.075em}.headline-question{display:block;margin-top:27px;font-size:clamp(29px,4.5vw,40px);letter-spacing:-1.2px}.headline-question em{position:relative;display:inline-block;font-family:Fraunces,Georgia,serif;font-weight:700;font-size:1.16em;transform:rotate(-4deg);margin-left:3px}.headline-question em:after{content:"";position:absolute;left:2%;right:-4%;bottom:-6px;height:10px;border-bottom:2px solid currentColor;border-radius:50%;transform:rotate(-5deg);opacity:.55}
.diet-slider{position:relative;isolation:isolate;width:min(100%,420px);padding:7px;display:grid;grid-template-columns:1fr 1fr;border-radius:999px;background:#fffdf6;border:1px solid #fff;box-shadow:0 2px 5px #233d3206,0 14px 32px #233d3212,0 30px 60px #233d3208;touch-action:pan-y}.slider-thumb{position:absolute;z-index:-1;inset:7px auto 7px 7px;width:calc((100% - 14px)/2);border-radius:999px;background:#186347;box-shadow:inset 0 1px 0 #ffffff22,0 4px 10px #153d3220;transition:transform .24s cubic-bezier(.22,.7,.25,1),background .24s ease}.diet-slider[data-choice=lactose] .slider-thumb{transform:translateX(100%);background:#24538b}.diet-choice{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;min-height:74px;border-radius:999px;text-decoration:none;font-size:18px;font-weight:600;letter-spacing:-.35px;color:#24538b;transition:color .18s ease;-webkit-tap-highlight-color:transparent}.diet-choice.gluten{color:#186347}.diet-choice svg{width:25px;height:30px;flex:none;transition:transform .24s ease}.diet-choice .milk-bottle{transform:rotate(-8deg)}.diet-slider[data-choice=gluten] .gluten{color:#f6f5da}.diet-slider[data-choice=lactose] .lactose{color:#fff}.diet-choice:hover svg{transform:rotate(7deg)}.diet-choice:focus-visible{outline:2px solid #24538b;outline-offset:5px}
.welcome-doodles{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}.doodle{position:absolute;display:block;color:#186347;opacity:.13}.doodle svg{display:block;width:100%;height:100%}.d1{width:76px;height:92px;left:13%;top:14%;transform:rotate(-24deg)}.d2{width:64px;height:84px;right:13%;top:22%;color:#24538b;transform:rotate(20deg)}.d3{width:50px;height:65px;right:20%;bottom:13%;transform:rotate(27deg)}.d4{width:52px;height:70px;left:15%;bottom:18%;color:#24538b;transform:rotate(-18deg)}
@media(min-width:800px){.welcome{gap:54px}.d1{left:22%}.d2{right:23%}.d3{right:27%}.d4{left:25%}}
@media(max-width:420px){.welcome{gap:40px}.headline-question{font-size:30px;letter-spacing:-1px}.diet-choice{min-height:68px;font-size:16px;gap:9px}.diet-choice svg{width:23px;height:28px}.d1{left:8%;top:12%;width:54px;height:68px}.d2{right:8%;top:19%;width:42px;height:56px}.d3{right:10%;bottom:13%}.d4{left:8%;bottom:18%;width:40px;height:54px}}
@media(max-width:350px){.headline-question{font-size:26px}.diet-choice{font-size:15px;gap:7px}.headline-brand{font-size:88px}}
@media(max-height:550px){main{padding-block:32px}.welcome{gap:26px;padding-bottom:0}.headline-brand{font-size:76px}.headline-question{margin-top:15px;font-size:26px}.doodle{opacity:.07}}
@media(prefers-reduced-motion:reduce){.slider-thumb,.diet-choice,.diet-choice svg{transition:none}}

.headline-prelude{display:block;font-size:clamp(17px,3vw,22px);font-weight:600;letter-spacing:.22em;margin-bottom:20px;padding-left:.22em}.headline-question{font-size:clamp(25px,4vw,34px)}@media(max-width:350px){.headline-question{font-size:23px}}@media(max-height:550px){.headline-prelude{font-size:14px;margin-bottom:12px}}

/* A generous, softly tilted wordmark gives the shared welcome screen its own character. */
.headline-brand{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:700;font-size:clamp(132px,29vw,190px);line-height:1.05;letter-spacing:-.065em;padding:0 .14em .06em .03em;transform:rotate(-5deg);transform-origin:center;color:#186247}
.headline-prelude{margin-bottom:6px}
.headline-question{margin-top:12px}
@media(max-width:350px){.headline-brand{font-size:124px}.headline-question{margin-top:10px}}
@media(max-height:550px){.headline-brand{font-size:104px}.headline-prelude{margin-bottom:0}.headline-question{margin-top:4px}}

/* Exact word artwork from the supplied logo, not a substitute typeface. */
.headline-brand.headline-logo{width:clamp(240px,68vw,330px);height:auto;aspect-ratio:640/550;margin:2px auto 0;padding:0;transform:none;background:#186247;-webkit-mask:url('/assets/brand/word-mask.svg') center/contain no-repeat;mask:url('/assets/brand/word-mask.svg') center/contain no-repeat}
.headline-logo+.headline-question{margin-top:10px}
@media(max-height:650px){.headline-brand.headline-logo{width:210px}.welcome{gap:30px}}

/* Complete supplied welcome artwork, coloured to match the existing page. */
.welcome-brand{width:min(100%,380px);line-height:1}
.welcome-brand-art{display:block;width:100%;aspect-ratio:1120/980;background:#186247;-webkit-mask:url('/assets/brand/welcome-mask.svg') center/contain no-repeat;mask:url('/assets/brand/welcome-mask.svg') center/contain no-repeat}
.welcome{gap:36px}
@media(max-height:650px){.welcome-brand{width:min(100%,280px)}.welcome{gap:26px}}
@media(max-height:450px){.welcome-brand{width:210px}.welcome{gap:20px}}

/* Match the city chooser wordmark scale. */
.welcome-brand{width:min(292px,80%)}
@media(max-width:600px){.welcome-brand{width:min(260px,80%)}}
@media(max-height:450px){.welcome-brand{width:min(210px,80%)}}