/* OnlyPans brand overrides on top of the shared layout */
:root{--orange:#F5860C;--yellow:#FBC900;--gradient:linear-gradient(110deg,#F5860C 5%,#F99D1E 50%,#FBC900 100%)}
.story-step h1,.story-step h2{color:#111}
.story-step h1 span,.story-step h2 span{background:linear-gradient(90deg,#FBC900,#F5860C 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.scroll-story{background:#fff!important}
.scroll-story::before{content:"";position:absolute;inset:auto 0 auto 0;top:0;height:780px;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 85% 0%,rgba(251,201,0,.38),rgba(249,157,30,.12) 55%,transparent 80%);z-index:0}
.scroll-story{position:relative}.story-layout{position:relative;z-index:1}
.phone-halo{background:radial-gradient(ellipse 540px 400px at 50% 50%,rgba(249,157,30,.32) 0%,rgba(251,201,0,.14) 50%,rgba(251,201,0,0) 100%)}

.supplied-screen-art{top:0;height:100%;object-fit:cover}
.phone-scene[data-screen="3"] .supplied-screen-art{top:0;height:100%;object-fit:cover}
.nav-app-icon{border-radius:10px}
.nav-wordmark,.floating-nav .brand .nav-wordmark{width:auto!important;height:auto!important;overflow:visible;white-space:nowrap;font:800 22px/1 var(--heading-font);letter-spacing:-.5px;color:#111}
@media(max-width:600px){.floating-nav .brand .nav-wordmark{font-size:19px}}

.story-points{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px}
.story-points li{display:flex;gap:10px;align-items:center;font-size:16px;color:#3a3a3a}
.story-points li::before{content:"✓";flex:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#FBC900,#F5860C);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.op-float{position:absolute;z-index:4;pointer-events:none;background:#fff;border-radius:18px;box-shadow:0 18px 40px rgba(120,60,0,.18);padding:10px 14px;font:700 13px var(--body-font);display:flex;gap:8px;align-items:center;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s,transform .6s;transform:translateY(10px)}
.op-float b{display:inline-flex;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#FBC900,#F5860C);color:#fff;align-items:center;justify-content:center}
.phone-stage[data-active="0"] .f0,.phone-stage[data-active="1"] .f1,.phone-stage[data-active="2"] .f2,.phone-stage[data-active="3"] .f3{opacity:1;visibility:visible;transform:none}
.op-float.l{left:calc(50% - 250px)}.op-float.r{left:calc(50% + 120px)}
.cta-card{background:linear-gradient(115deg,#FFE27A,#FBC900 45%,#F5860C)}
.cta-mascot img.cta-icon{width:190px;border-radius:44px;box-shadow:0 24px 50px rgba(120,60,0,.3);filter:none}
.cta-content p{color:#3d2a08}
@media(max-width:600px){.op-float{display:none}.cta-mascot img.cta-icon{width:110px;border-radius:26px}}
@media(prefers-reduced-motion:reduce){.op-float{transition:none}}
/* v2: wordmark regular weight */
.floating-nav .brand .nav-wordmark{font-weight:400!important;letter-spacing:-.2px}
/* v2: download box image, copied from live */
.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){.cta-card{padding-left:43%}.cta-kitchen{width:51%;left:-30px}}
@media(max-width:600px){.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}}
/* v3: nav Download button text black */

/* v3: live only-pans.app feature cards 3-5 */
.op-live-cards{--card-gradient:linear-gradient(180deg,rgb(246 246 246/0%) 0%,rgb(246 246 246/35%) 40%,#f6f6f6 100%),linear-gradient(90deg,#fff3ca 0%,#fff0cf 50%,#ffedda 100%)}
.op-live-cards .feature-card{display:flex;flex-direction:column;border:0}
.op-live-cards .feature-card h3{font-weight:600}.op-live-cards .feature-card p{color:#7a746c}
.card-visual{position:relative;min-height:0;flex:1;overflow:hidden}
.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}
.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}
.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}
@media(max-width:600px){.op-live-cards .card-visual{flex:none;height:310px}.breakfast-phone-visual{height:auto!important;aspect-ratio:1546/1017;margin-bottom:72px}.kitchen-board-visual{height:auto!important}.cookbooks-visual{height:305px}.book-front{left:calc(50% - 114px)}.book-back{right:calc(50% - 120px)}}
/* v4: menu bar — frosted glass, live logotype, black Download button */
.floating-nav,.floating-nav.expanded{background:rgba(255,255,255,.55)!important;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.6)}
.floating-nav .brand{display:flex;align-items:center;overflow:visible}
.floating-nav .brand img.op-logo{display:block;height:44px;width:auto;max-width:none;object-fit:contain}
@media(max-width:600px){.floating-nav .brand img.op-logo{height:36px}}
.floating-nav .nav-download,.floating-nav.expanded .nav-download{background:#000!important;color:#fff!important;background-image:none!important}
.floating-nav .brand,.floating-nav.expanded .brand,.floating-nav:not(.expanded) .brand{width:auto!important;height:auto!important;overflow:visible!important;transform:none!important}
.floating-nav .brand img.op-logo,.floating-nav.expanded .brand img.op-logo{position:static!important;left:auto!important;top:auto!important;width:auto!important;height:46px!important}
@media(max-width:600px){.floating-nav .brand img.op-logo,.floating-nav.expanded .brand img.op-logo{height:38px!important}}
/* v5: reviews + rating in OnlyPans colours */
.review-stars,.traveler-award .award-stars{color:#F99D1E!important}
.review-card{box-shadow:0 10px 40px rgba(245,134,12,.10)}
.reviews .section-title,.traveler-award strong{color:#111}
.traveler-award strong{background:linear-gradient(90deg,#FBC900,#F5860C);-webkit-background-clip:text;background-clip:text;color:transparent!important}
/* v6: hero glow only behind the hero, fades out for features */
.phone-stage .phone-halo{opacity:0;transition:opacity .5s ease}
.phone-stage[data-active="0"] .phone-halo{opacity:1}
.mobile-feature-visual .phone-halo{display:none}
/* v7: reviews on plain white, soft card shadow, black awards */
.reviews{background:#fff!important;background-image:none!important}
.reviews::before,.reviews::after{display:none!important}
.review-card{background:#fff!important;box-shadow:0 4px 20px rgba(0,0,0,.08)!important}
.award-laurel{filter:brightness(0)}
.reviews .section-title{color:#111;font-weight:600}
.traveler-award strong{background:none!important;-webkit-background-clip:border-box;background-clip:border-box;color:#111!important;font-weight:600}
