/* OnlyPans brand and artwork. Base retains the Zingo layout and breakpoints. */
:root { --ink:#252622; --muted:#73716c; --orange:#ff921b; --gradient:linear-gradient(110deg,#ffb631,#ff881b); }
body { overflow-x:clip; }
.floating-nav { max-width:222px; padding:8px 20px; background:#ffffffb8; border-color:#ffffffbd; }
.brand,.floating-nav:not(.expanded) .brand { width:180px; height:44px; transform:none; }
.brand img,.floating-nav.expanded .brand img { width:194px; max-width:none; left:-7px; top:-11px; mix-blend-mode:multiply; filter:none; }
.floating-nav.expanded .brand { width:180px; }
.hero { padding-top:150px; background:linear-gradient(180deg,#ffffff00 0%,#ffffff80 36%,#fff 78%),linear-gradient(110deg,#fff2db,#ffe4c2 55%,#ffcc93); }
.hero h1 { font-size:48px; font-weight:700; line-height:1.16; letter-spacing:-1.5px; color:#252622; }
.hero h1 .gradient-text { background:var(--gradient); background-clip:text; -webkit-background-clip:text; color:#f18d14; -webkit-text-fill-color:transparent; }
.hero-text p { margin-top:18px; font-size:20px; color:#6d6253; line-height:1.5; max-width:780px; white-space:normal; }
.hero-buttons { margin-top:24px; }
.subtitle-break { display:none; }
.hero-buttons .download-pill { background:#22231f; color:white; border-color:#22231f; }
.hero-buttons .download-pill img { filter:brightness(0) invert(1); }
.hero-buttons .download-pill[data-destination="android"] img { filter:none; }
.hero .cooking-scene { position:relative; width:min(1188px,100%); height:650px; aspect-ratio:auto; margin:54px auto 0; transform:none; overflow:hidden; }
.scene-halo { position:absolute; width:820px; height:480px; border-radius:50%; background:radial-gradient(ellipse,#ffd99970,transparent 70%); bottom:0; left:50%; transform:translateX(-50%); }
.phone { border:7px solid #272925; box-shadow:0 0 0 2px #979992,0 0 0 5px #30312e,0 22px 55px #37271322; background:white; border-radius:44px; overflow:hidden; text-align:left; }
.hero-phone { position:absolute; width:314px; height:617px; left:50%; top:10px; transform:translateX(-50%); z-index:3; }
.phone-island { position:absolute; width:88px; height:25px; border-radius:20px; background:#171816; top:10px; left:50%; transform:translateX(-50%); z-index:3; }
.phone-status { display:flex; justify-content:space-between; padding:10px 20px 12px; font:600 11px Arial,sans-serif; }
.phone-top { display:flex; align-items:center; justify-content:space-between; padding:0 17px; }
.hero-art .phone-top img { position:static; width:119px; height:40px; object-fit:contain; }
.avatar { width:27px; height:27px; background:#ffecd4; color:#ac5c0f; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; }
.phone-heading { padding:13px 17px 9px; }
.phone-heading small,.recipe-feature small { font-size:8px; letter-spacing:1.3px; color:#a47b49; font-weight:700; }
.phone-heading h3 { font-size:20px; letter-spacing:-.7px; }
.mock-search { margin:0 16px; background:#f6f5f1; border-radius:12px; padding:9px 12px; font-size:11px; color:#88877e; }
.mock-search span { font-size:21px; line-height:14px; margin-right:7px; }
.phone-tabs { display:flex; gap:7px; padding:15px 16px; font-size:9px; white-space:nowrap; }
.phone-tabs span { padding:6px 10px; border-radius:20px; background:#f8f6f1; }
.phone-tabs .selected { background:#ffecd6; color:#a24c0e; font-weight:700; }
.recipe-feature { margin:0 16px; border-radius:18px; overflow:hidden; position:relative; background:#fff8ee; }
.hero-art .recipe-feature > img { position:static; width:100%; height:177px; object-fit:cover; }
.recipe-feature > div { padding:12px 14px 15px; }
.recipe-feature h4 { margin:5px 0 7px; font:600 18px/1.15 var(--heading-font); letter-spacing:-.5px; }
.recipe-feature p { color:#817365; font-size:10px; }
.recipe-feature b { padding:0 6px; color:#c99e70; }
.heart { position:absolute; right:11px; top:11px; border-radius:50%; background:white; width:28px; height:28px; display:grid; place-items:center; }
.phone-bottom { display:flex; justify-content:space-around; padding:12px 20px 0; font-size:21px; text-align:center; color:#999; }
.phone-bottom span:first-child { color:#de801a; }
.phone-bottom small { display:block; font-size:8px; }
.floating-note { position:absolute; display:flex; gap:14px; align-items:center; padding:19px 23px; text-align:left; border:1px solid white; background:#ffffffed; border-radius:22px; box-shadow:0 16px 50px #8e571315; z-index:4; }
.floating-note small { display:block; font-size:10px; color:#a38869; letter-spacing:.7px; }
.floating-note strong { display:block; font-size:16px; line-height:1.4; margin-top:3px; }
.note-symbol { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:#fff0d9; font-size:27px; color:#f3931a; }
.import-note { left:5%; top:104px; transform:rotate(-7deg); }
.time-note { right:3%; top:185px; transform:rotate(7deg); }
.ingredient { position:absolute; font-size:77px; filter:drop-shadow(0 12px 7px #6b4b1620); }
.ingredient-leaf { top:10px; right:22%; transform:rotate(15deg); }
.ingredient-lemon { top:292px; left:16%; transform:rotate(-18deg); }
.dish-orbit { position:absolute; left:10%; bottom:20px; width:230px; height:230px; border-radius:50%; overflow:hidden; box-shadow:0 12px 30px #6f55231c; transform:rotate(-15deg); }
.hero-art .dish-orbit img { position:static; width:100%; height:100%; object-fit:cover; }
.saved-note { position:absolute; right:8%; bottom:75px; padding:16px 22px; border-radius:18px; background:white; text-align:left; box-shadow:0 15px 40px #6d420d15; transform:rotate(-5deg); font-size:15px; z-index:4; }
.saved-note > span { float:left; margin-right:12px; color:#468055; font-size:25px; }
.saved-note b { display:block; color:#9b968c; font-size:11px; font-weight:400; }
.features { padding-top:62px; }
.feature-grid { --card-gradient:linear-gradient(180deg,#f7f7f500 0%,#f7f7f54d 45%,#f7f7f5 100%),linear-gradient(110deg,#fff1d5,#ffe5cd); }
.feature-card h3 { font-weight:600; }
.feature-card p { color:#7a746c; }
.card-visual { position:relative; min-height:0; flex:1; overflow:hidden; }
.import-visual { height:100%; padding-top:55px; }
.share-tokens { display:flex; gap:18px; position:absolute; top:28px; left:30px; z-index:3; transform:rotate(-9deg); }
.share-tokens > span { width:47px; height:47px; border-radius:14px; background:linear-gradient(135deg,#ffb350,#ec655a); color:white; font-size:27px; display:grid; place-items:center; box-shadow:0 7px 12px #8a410d1a; }
.share-tokens > span:nth-child(2) { background:#242522; transform:rotate(12deg); }
.share-tokens > span:nth-child(3) { background:#ed5049; transform:rotate(18deg); }
.mini-phone { position:relative; width:245px; min-height:440px; background:#fff; border:6px solid #30312d; border-radius:35px; padding:62px 17px 20px; text-align:center; margin:22px auto 0; transform:rotate(-7deg); box-shadow:0 13px 25px #4e311517; }
.mini-phone .phone-island { width:70px; height:20px; }
.import-icon { width:73px; height:73px; border-radius:19px; margin:auto; }
.mini-phone h4 { font:600 17px/1.35 var(--heading-font); margin:15px 0; }
.import-success { background:#f2f8ed; color:#5b7b47; border-radius:10px; padding:10px; font-size:11px; }
.import-success span { margin-right:7px; }
.mini-recipe { display:flex; gap:8px; align-items:center; text-align:left; padding:16px 0; }
.mini-recipe img { width:44px; height:44px; border-radius:10px; }
.mini-recipe strong { font-size:10px; }
.mini-recipe small { display:block; color:#888; font-size:8px; }
.itinerary-card,.find-card,.lists-card,.map-card { display:flex; flex-direction:column; }
.paper { background:#fff; border-radius:19px; box-shadow:0 10px 30px #5a3c1110; padding:21px; text-align:left; }
.planner { width:calc(100% - 44px); margin:27px auto 0; transform:rotate(-5deg); }
.paper-title { font-size:16px; font-weight:700; margin-bottom:19px; }
.paper-title > span { display:block; font-size:9px; letter-spacing:1.2px; color:#b19a7c; margin-top:4px; }
.meal-row { display:flex; align-items:center; gap:12px; border-top:1px solid #f2ede4; padding:12px 0; font-size:12px; font-weight:600; }
.meal-row > b { color:#ad9677; font-size:9px; }
.meal-dot { font-size:27px; }
.meal-row small { display:block; color:#a29a8e; font-size:10px; font-weight:400; }
.search-visual { margin-top:22px; text-align:center; }
.search-pill { position:relative; z-index:2; background:white; padding:14px 15px; width:86%; margin:0 auto -20px; border-radius:30px; box-shadow:0 10px 22px #63421116; color:#7d756d; font-size:13px; }
.search-pill span { color:#272925; font-size:21px; vertical-align:middle; margin-right:10px; }
.search-food { width:240px; height:240px; object-fit:cover; border-radius:50%; margin:auto; box-shadow:0 10px 20px #6b4b1614; }
.food-caption { position:absolute; bottom:25px; left:10%; width:80%; background:#ffffffed; padding:14px; border-radius:15px; box-shadow:0 10px 20px #5537160d; }
.food-caption strong { font-size:12px; }
.food-caption span { display:block; color:#999; font-size:11px; }
.cookbooks-visual { margin-top:25px; }
.cookbook { position:absolute; width:166px; height:240px; border-radius:5px 15px 15px 5px; box-shadow:-5px 0 0 #fff9,0 12px 22px #5c38151a; padding:20px 15px; }
.cookbook > span:first-child { font-size:7px; letter-spacing:1px; }
.cookbook b { display:block; font:700 25px/1.08 var(--heading-font); letter-spacing:-1px; margin-top:20px; }
.book-back { background:#e6eadb; right:13%; top:0; transform:rotate(12deg); color:#52644a; }
.book-front { background:linear-gradient(130deg,#ffc15d,#ff9e26); left:14%; top:20px; transform:rotate(-10deg); color:#5d3511; }
.book-food { display:block; font-size:60px; line-height:1.2; text-align:right; }
.cookbook small { font-size:7px; letter-spacing:1.3px; }
.shopping { width:calc(100% - 44px); margin:22px auto 0; transform:rotate(4deg); }
.shopping .paper-title { margin-bottom:13px; }
.list-category { display:block; font-size:8px; letter-spacing:1px; color:#b09e83; margin-top:10px; }
.grocery { display:flex; align-items:center; gap:10px; padding:11px 0; font-size:12px; border-bottom:1px solid #f3f0e9; }
.grocery i { width:15px; height:15px; border:1px solid #dbd8d1; border-radius:5px; font-size:10px; font-style:normal; text-align:center; }
.grocery.checked i { background:#ffb347; border-color:#ffb347; color:white; }
.grocery.checked > span { text-decoration:line-through; color:#a9a49c; }
.grocery small { margin-left:auto; font-size:10px; color:#999; }
.cta-card { background:linear-gradient(115deg,#ffe0a7,#ffb331 54%,#ff8b1d); }
.cta-mascot { display:flex; align-items:center; justify-content:center; }
.cta-mascot img { position:static; width:260px; max-width:85%; height:auto; border-radius:58px; transform:rotate(-12deg); filter:drop-shadow(0 15px 15px #a958002a); margin:0; }
.cta-content p { color:#68461f; }
.cta h2 { font-weight:700; }
.cta .store-badge { width:214px; }
.store-name { font-size:25px; }
.legal .floating-nav { max-width:222px; }
.legal-page h1 { font-size:40px; }
.legal-page p + p { margin-top:18px; }
@media (min-width:601px) and (max-width:1024px) {
.hero h1 { font-size:44px; }.import-note { left:0; top:135px; padding:14px; }.floating-note strong { font-size:12px; }.time-note { right:0; top:285px; padding:14px; }.note-symbol { width:30px;height:30px;font-size:20px; }.dish-orbit { left:2%;width:175px;height:175px; }.saved-note { right:0;font-size:12px; }.ingredient-leaf { right:12%; }
.cta-mascot img { width:225px; }.cta-content { width:63%; }.cta .download-buttons { flex-wrap:wrap; }
}
@media (max-width:600px) {
.floating-nav { max-width:194px; }.brand,.floating-nav:not(.expanded) .brand,.floating-nav.expanded .brand { width:156px; height:44px; }.brand img,.floating-nav.expanded .brand img { width:170px;left:-7px;top:-6px; }
.hero { padding-top:150px; }.hero h1 { font-size:30px; letter-spacing:-1px; }.hero-text p { font-size:16px; max-width:340px; margin-top:16px; }.subtitle-break { display:none; }
.hero .cooking-scene { width:calc(100% + 32px); margin:44px -16px 0; height:540px; }
.hero-phone { transform:translateX(-50%) scale(.82); transform-origin:top center; top:10px; }.floating-note { padding:10px 12px; border-radius:14px; gap:7px; }.import-note { left:5%;top:344px;transform:rotate(-5deg); }.floating-note strong { font-size:11px; }.floating-note small { font-size:7px; }.note-symbol { width:28px; height:28px; font-size:20px; }.time-note,.saved-note { display:none; }.dish-orbit { width:105px; height:105px; left:auto;right:1%;bottom:16px;z-index:4; }.ingredient-leaf { font-size:46px;right:2%;top:63px;z-index:4; }.ingredient-lemon { font-size:44px;left:1%;top:173px;z-index:4; }
.features { padding-top:36px; }.features > h2 { font-size:25px; }.card-visual { flex:none; height:310px; }.import-visual { height:385px; padding-top:35px; margin-top:10px; }.share-tokens { left:calc(50% - 105px);top:15px; }.mini-phone { margin-top:28px; }.planner { margin-top:28px;max-width:345px; }.shopping { max-width:345px; }.search-visual { height:320px; }.search-food { width:270px;height:270px; }.food-caption { bottom:28px; }.cookbooks-visual { height:305px; }.book-front { left:calc(50% - 114px); }.book-back { right:calc(50% - 120px); }
.cta-card { padding:34px 22px 240px; min-height:620px; }.cta-mascot { position:absolute;inset:auto 0 0;height:215px;overflow:hidden; }.cta-mascot img { width:210px;max-width:210px; position:relative;left:auto;top:25px;bottom:auto;border-radius:45px;transform:rotate(-10deg); }.cta-content { width:100%; }.cta .store-badge { width:226px; }.cta .download-buttons { align-items:center; }.legal-page h1 { font-size:30px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; } }
/* Transparent wordmark and glossy social-platform tiles. */
.brand img,.floating-nav.expanded .brand img { position:static; width:100%; height:100%; object-fit:contain; mix-blend-mode:normal; }
.floating-nav { background:rgb(255 255 255 / 35%); }
.social-tile { position:absolute; display:grid; place-items:center; width:104px; height:104px; border-radius:28px; z-index:5; box-shadow:inset 2px 3px 3px #ffffffad,inset -3px -5px 6px #00000030,0 13px 22px #753d1d24; }
.hero-art .social-tile img { position:static; width:76%; height:76%; object-fit:contain; }
.instagram { left:23%; top:35px; background:radial-gradient(circle at 24% 105%,#ffe68b 5%,#ff9b43 26%,#ef147e 59%,#9522dc 95%); transform:rotate(-17deg); }
.tiktok { right:24%; top:0; background:linear-gradient(135deg,#505259,#08090b 65%); transform:rotate(15deg); }
.youtube { left:16%; top:260px; width:100px; height:79px; border-radius:23px; background:linear-gradient(135deg,#ff433d,#e8090c); transform:rotate(-12deg); }
.facebook { right:14%; top:229px; background:linear-gradient(145deg,#4496ff,#0866eb); transform:rotate(12deg); }
.import-note { top:164px; left:3%; }
.cta-card { padding-left:44%; min-height:400px; }
.cta-content { width:100%; z-index:2; }
.cta-kitchen { position:absolute; left:-22px; bottom:-4px; width:47%; pointer-events:none; }
.cta-kitchen img { width:100%; height:auto; }
@media(min-width:601px) and (max-width:1024px) {
.social-tile { width:80px;height:80px;border-radius:23px; }.instagram { left:15%;top:25px; }.tiktok { right:14%;top:10px; }.youtube { left:7%;top:279px;height:62px; }.facebook { right:6%;top:240px; }.import-note { top:151px;left:0; }
.cta-card { padding-left:43%; }.cta-kitchen { width:51%;left:-30px; }
}
@media(max-width:600px) {
.social-tile { width:59px;height:59px;border-radius:17px; }.instagram { left:3%;top:54px; }.tiktok { right:3%;top:15px; }.youtube { width:61px;height:47px;border-radius:14px;left:2%;top:229px; }.facebook { right:1%;top:256px; }.import-note { left:5%;top:362px; }
.cta-card { padding:34px 22px 280px; min-height:660px; }.cta-content { width:100%; }.cta-kitchen { width:370px;max-width:110%;left:50%;transform:translateX(-50%);bottom:-23px; }
}
/* Keep the transparent wordmark at the original visual size. */
.brand img,.floating-nav.expanded .brand img { position:absolute; width:194px; height:auto; max-width:none; left:-7px; top:-11px; }
@media(max-width:600px) { .brand img,.floating-nav.expanded .brand img { width:170px; left:-7px; top:-6px; } }

/* Supplied composition: align the phone, with clear space beneath the buttons. */
.hero .supplied-hero {
  width:min(629.8px,67%); height:auto; aspect-ratio:auto;
  margin:72px auto 0; overflow:visible; transform:translateX(-3%);
}
.hero .supplied-hero img { position:static; width:100%; height:auto; aspect-ratio:auto; filter:none; }
@media(max-width:600px) {
  .hero .supplied-hero { width:calc(67% + 16.08px); max-width:none; margin:48px auto 0; }
}

/* The supplied phone screen is centred, with the artwork resting on the card edge. */
.recipe-steps-visual { margin-top:20px; }
.recipe-steps-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom; }
@media(max-width:600px) { .recipe-steps-visual { height:auto; aspect-ratio:1546 / 1017; } }

/* Fifth card: centre the phone, independent of the pan handle. */
.breakfast-phone-visual { margin-top:18px; margin-bottom:72px; }
.breakfast-phone-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom; }
@media(max-width:600px) { .breakfast-phone-visual { height:auto; aspect-ratio:1546 / 1017; margin-bottom:72px; } }

/* Third card: full-width artwork with breathing room below. */
.kitchen-board-visual { display:flex; align-items:flex-end; margin-top:24px; padding:0 0 72px; }
.kitchen-board-visual img { display:block; width:100%; height:auto; flex-shrink:0; }
@media(max-width:600px) { .kitchen-board-visual { height:auto; } }

/* Supplied social-import composition replaces the concept phone and badges. */
.supplied-import-visual { height:100%; padding:20px 12px 0; }
.supplied-import-visual img { display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; }
@media(max-width:600px) { .supplied-import-visual { height:385px; margin-top:20px; padding-top:0; } }