* { box-sizing: border-box; }
:root { color-scheme: light; --paper:#f2eee5; --ink:#213429; --gold:#be9c66; --food:#956047; --ease:cubic-bezier(.2,.7,.2,1); }
body { margin:0; background:var(--paper); color:var(--ink); font:400 14px/1.5 'DM Sans',sans-serif; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid #af824c; outline-offset:5px; }
svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
a { color:inherit; text-decoration:none; } .symbols { position:absolute; width:0; height:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.lab-header { max-width:1480px; margin:auto; min-height:70px; padding:16px 4.5%; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid #2335291b; }
.brand { display:flex; align-items:center; gap:9px; font-size:20px; }.brand img { width:28px; height:32px; object-fit:contain; }
.lab-label { display:flex; align-items:center; gap:9px; font-size:8px; letter-spacing:1.8px; color:#72786d; }.lab-label>span,.note-dot { width:5px; height:5px; display:inline-block; border-radius:50%; background:#9c8259; }
.back { font-size:11px; color:#586557; }.back span { margin-left:14px; }
main { max-width:1480px; padding:0 4.5% 24px; margin:auto; }
.intro { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:30px 0; }.intro h1 { margin:0; font:400 clamp(32px,3.5vw,54px)/1.08 Newsreader,Georgia,serif; letter-spacing:-1.25px; }.intro em { color:#748169; }.intro p { flex-shrink:0; margin:0; color:#6a7266; font-size:11px; line-height:1.7; }
.cinema { border:1px solid #20332921; border-radius:20px; overflow:hidden; box-shadow:0 22px 50px -36px #12251b66; }
.film { --device-scale:1; height:656px; position:relative; overflow:hidden; isolation:isolate; background:#101e17; color:#f4ecdc; }
.ambient { position:absolute; inset:-10%; z-index:-1; background:radial-gradient(ellipse at 75% 27%,#7e865d30,transparent 40%),radial-gradient(ellipse at 80% 95%,#38574245,transparent 52%),linear-gradient(130deg,#101b16,#21382a 70%,#15241b); transform:translateX(calc(var(--progress,0)*-3%)); }
.film:after { content:''; position:absolute; inset:0; pointer-events:none; z-index:15; box-shadow:inset 0 0 65px #04100822; }
.film-top,.film-bottom { position:absolute; left:33px; right:33px; display:flex; align-items:center; justify-content:space-between; z-index:16; font-size:7px; letter-spacing:1.5px; color:#9ea990; }
.film-top { top:22px; }.film-format { font-size:6px; opacity:.65; }.film-bottom { bottom:21px; font-size:6px; letter-spacing:1px; }.film-bottom>span:last-child { opacity:.55; font-size:5px; }.film-bottom [data-caption] { color:#bdc5af; letter-spacing:0; font:italic 13px Newsreader,serif; }.source-name { display:flex; align-items:center; gap:8px; }.source-name b { font-weight:500; }.source-name svg { width:16px; height:16px; color:#a4936f; }
.story { position:absolute; left:5.4%; top:0; bottom:0; width:43%; z-index:5; pointer-events:none; }
.scene-copy { position:absolute; left:0; top:48%; width:100%; transform:translateY(-50%); opacity:0; will-change:opacity,transform; }.scene-copy:first-child { opacity:1; }
.scene-number { display:block; color:#b7ae8f; font:500 7px/1.4 Manrope,sans-serif; letter-spacing:1.8px; margin-bottom:23px; }
.scene-copy h2 { font:400 clamp(43px,4.6vw,68px)/1.04 Newsreader,Georgia,serif; letter-spacing:-1.7px; margin:0 0 19px; }.scene-copy h2 em { color:#c2caaa; font-weight:400; }.scene-copy p { font-size:12px; color:#b8c2af; line-height:1.8; margin:0; }
.discovery-note { display:flex; align-items:center; gap:8px; margin-top:35px; color:#8fa489; font-size:9px; }.discovery-note svg { width:15px; height:15px; }
.handoff-proof { display:flex; align-items:center; gap:16px; margin-top:35px; font-size:13px; color:#e9e8d7; }.handoff-proof>span { display:flex; align-items:center; gap:9px; }.handoff-proof b { font-weight:500; }.proof-social svg { width:20px; height:20px; }.proof-bucket img { width:25px; height:29px; object-fit:contain; }.handoff-proof>svg { width:26px; height:26px; color:#b4a274; }.handoff-proof>i { display:none; }
.extraction-proof { width:min(310px,90%); margin-top:26px; border-top:1px solid #d0d7b421; }.extraction-proof>div { display:grid; grid-template-columns:95px 1fr 17px; align-items:center; padding:11px 0; border-bottom:1px solid #d0d7b416; }.extraction-proof small { color:#8ea584; font:500 6px Manrope,sans-serif; letter-spacing:1.1px; }.extraction-proof strong { font-size:12px; font-weight:500; }.extraction-proof svg { width:15px; height:15px; color:#abbf96; }
.plan-question { display:flex; align-items:center; gap:10px; margin-top:28px; padding:14px 17px 14px 12px; width:max-content; max-width:95%; border:1px solid #d0d7b420; border-radius:13px 13px 13px 3px; background:linear-gradient(125deg,#ffffff07,#ffffff02); color:#e1e5d5; box-shadow:0 10px 30px #0001; font-size:11px; }.friend-dot { flex-shrink:0; width:27px; height:27px; display:grid; place-items:center; background:linear-gradient(145deg,#b57686,#96566b); border:1px solid #edbac142; border-radius:50%; color:#f9e7e7; font-size:10px; }.plan-question small { display:block; color:#859b7a; font:500 5px Manrope,sans-serif; letter-spacing:1px; margin-bottom:5px; }
.device-zone { position:absolute; left:44%; right:0; top:0; bottom:0; perspective:1500px; }
.device-shadow { position:absolute; left:20%; right:12%; height:22px; bottom:34px; background:#0006; filter:blur(22px); }
.phone { position:absolute; width:286px; height:596px; top:29px; left:50%; margin-left:-143px; padding:9px 10px; border:1px solid #f3eddf45; border-radius:50.7px; background:linear-gradient(145deg,#8b8b83 0%,#30342f 8%,#070908 45%,#242824 90%,#85867f 100%); box-shadow:0 30px 60px #02070470,0 8px 20px #02070452,inset 0 0 0 1px #fff3,3px 2px 0 #455142; transform:scale(var(--device-scale)) rotateY(-10deg) rotateZ(3deg); transform-origin:top center; transform-style:preserve-3d; will-change:transform; }
.phone-edge { position:absolute; left:-3px; top:130px; width:2px; height:37px; background:#9ba48f88; border-radius:3px; box-shadow:0 45px 0 #9ba48f88; }.phone-edge:after { content:''; position:absolute; left:288px; top:7px; width:2px; height:57px; background:#9ba48f88; border-radius:3px; }
.screen { width:100%; height:100%; position:relative; overflow:hidden; isolation:isolate; border-radius:40px; background:#13271c; border:1px solid #020906; }
.status { position:absolute; top:13px; left:19px; right:15px; height:18px; display:flex; align-items:center; justify-content:space-between; color:#fff; z-index:20; font:600 8px/1 'DM Sans',sans-serif; }.island { position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:78px; height:23px; border-radius:20px; background:#050807; box-shadow:inset 0 1px 1px #ffffff13; }.island:after { content:''; position:absolute; right:8px; top:8px; width:5px; height:5px; border-radius:50%; background:radial-gradient(#213249,#10171d 70%); }.signals { display:flex; align-items:center; gap:4px; }.signals svg { width:13px; height:10px; stroke-width:1; }.signals .cellular,.signals .wifi { fill:currentColor; stroke:none; }.signals .battery { width:18px; height:9px; }.signals .battery-level,.signals .battery path { fill:currentColor; stroke:none; }
.home-indicator { position:absolute; bottom:5px; left:50%; transform:translateX(-50%); width:78px; height:2.5px; border-radius:5px; background:#e5ead566; z-index:22; }
.social-view,.capture-view,.saved-view { position:absolute; inset:0; }.social-view { background:#34291e; }.dish-photo { width:100%; height:100%; object-fit:cover; filter:brightness(.91); transform:scale(1.12); }.social-shade { position:absolute; inset:0; background:linear-gradient(#0009,transparent 22%,transparent 51%,#0009 75%,#0a0a0af5); }
.social-top { position:absolute; left:17px; right:17px; top:51px; display:flex; align-items:center; justify-content:space-between; font-size:19px; font-weight:600; }.social-top svg { width:19px; height:19px; }
.reel-note { position:absolute; left:19px; right:19px; top:126px; font:500 30px/1.02 Newsreader,serif; letter-spacing:-.5px; text-shadow:0 2px 10px #2a110dcc; }.reel-note em { font-weight:400; }.reel-note>span { display:block; font:600 6px/1.4 'DM Sans',sans-serif; letter-spacing:1.35px; margin-top:13px; }
.social-actions { position:absolute; right:14px; top:306px; display:grid; gap:14px; text-align:center; }.social-actions>div { position:relative; display:grid; justify-items:center; gap:3px; }.social-actions svg { width:22px; height:22px; stroke-width:1.6; }.social-actions small { font-size:7px; }
.social-caption { position:absolute; left:15px; right:48px; bottom:30px; font-size:8px; line-height:1.5; }.social-caption>div { display:flex; align-items:center; gap:7px; }.creator-avatar { width:25px; height:25px; border-radius:50%; background:#b69c76; color:#272b20; display:grid; place-items:center; font:italic 13px Newsreader,serif; }.social-caption b { font-size:8px; }.follow { border:1px solid #ffffff7a; border-radius:4px; padding:2px 5px; font-size:7px; }.social-caption p { margin:9px 0; }.social-caption>small { font-size:6px; color:#dbddd0; }
.tap { position:absolute; border:1px solid #f1ddb1; border-radius:50%; background:#e4d1a835; opacity:0; pointer-events:none; box-shadow:0 0 0 7px #f5dfab17; }.share-tap { width:38px; height:38px; top:-8px; left:-8px; }.bucket-tap { width:51px; height:51px; left:-4px; top:-4px; border-radius:14px; }.search-tap { width:30px; height:30px; left:-7px; top:-6px; }
.share-hand { position:absolute; left:-25px; top:7px; width:56px; height:64px; z-index:3; opacity:0; pointer-events:none; transform-origin:36px 4px; filter:drop-shadow(0 3px 4px #0008); }
.share-hand svg { display:block; width:100%; height:100%; overflow:visible; }
.hand-shape { fill:#f3eddf; stroke:#826b4d; stroke-width:1.25; stroke-linejoin:round; }
.hand-detail { fill:none; stroke:#b7a68d; stroke-width:.9; stroke-linecap:round; }
.share-dimmer { position:absolute; inset:0; background:#02060470; opacity:0; }.share-sheet { position:absolute; bottom:0; left:0; right:0; padding:9px 15px 29px; border-radius:23px 23px 0 0; background:linear-gradient(135deg,#faf8f2,#ecebe5); color:#243228; box-shadow:0 -5px 40px #0004; transform:translateY(102%); z-index:4; }
.handle { display:block; width:26px; height:3px; border-radius:5px; background:#c7c9c2; margin:0 auto 12px; }.sheet-title { font-weight:600; font-size:14px; display:flex; align-items:center; justify-content:space-between; }.sheet-title>span { font-size:19px; font-weight:400; color:#888; }
.share-preview { display:flex; align-items:center; gap:8px; border-bottom:1px solid #1c2b2220; margin-top:14px; padding-bottom:14px; }.share-preview>img { width:35px; height:39px; object-fit:cover; border-radius:6px; }.share-preview>span { display:grid; gap:4px; }.share-preview b { font-size:8px; }.share-preview small { font-size:7px; color:#798076; }.share-preview svg { width:13px; height:13px; margin-left:auto; }
.share-apps { display:flex; justify-content:space-between; gap:8px; margin:19px 0; }.share-apps>div { display:grid; justify-items:center; gap:6px; position:relative; }.share-apps b { font-size:7px; font-weight:500; }.app-icon { width:43px; height:43px; border-radius:11px; display:grid; place-items:center; box-shadow:inset 0 1px 1px #fff4; }.bucket-app { background:linear-gradient(135deg,#38513c,#16291e); box-shadow:0 3px 8px #182b2333,inset 0 1px 1px #ffffff40; }.bucket-app img { width:32px; height:35px; object-fit:contain; }.message-app { background:#63a974; color:white; font-size:24px; letter-spacing:-1px; }.notes-app { background:linear-gradient(#e5c569 27%,#fff5ce 27%); padding:18px 8px 8px; gap:3px; }.notes-app i { width:24px; height:1px; background:#a39a7f77; }.more-app { background:#e1e3df; color:#72796b; font-size:20px; }.share-copy { display:flex; justify-content:space-between; align-items:center; background:#fff9; padding:10px; border-radius:8px; font-size:9px; }.share-copy svg { width:15px; height:15px; }
/* Product language lifted from the existing phone + Create Item mockups. */
.capture-view,.saved-view { background:radial-gradient(circle at 88% 9%,#d1ad6721,transparent 25%),radial-gradient(circle at 12% 82%,#44694e2b,transparent 36%),linear-gradient(165deg,#213a2b 0%,#13271c 48%,#0c1912 100%); color:#f4ecdc; z-index:6; opacity:0; }
.app-brand { height:30px; display:flex; align-items:center; gap:6px; font:650 12px/1 'DM Sans',sans-serif; letter-spacing:-.15px; }.app-brand>img { width:25px; height:25px; object-fit:contain; filter:drop-shadow(0 4px 7px #0004); }.app-brand>svg { width:16px; height:16px; margin-left:auto; color:#c3cdb7; }.app-add { display:grid; place-items:center; width:26px; height:26px; margin-left:7px; border:1px solid #ddac6b55; border-radius:50%; background:linear-gradient(145deg,#b77656,#784331); color:#fff8e9; box-shadow:inset 0 1px 0 #fff3; }.app-add svg { width:13px; height:13px; }
.capture-view>.app-brand { position:absolute; left:12px; right:12px; top:45px; }
.composer { position:absolute; top:104px; left:10px; right:10px; display:flex; flex-direction:column; overflow:hidden; border:1px solid #ece4d438; border-radius:15px; color:#293b2d; background:linear-gradient(145deg,#304434,#203427); box-shadow:0 17px 28px #02080645; }
.composer-body { display:flex; flex-direction:column; padding:8px 12px 11px; background:linear-gradient(145deg,#f6f2e9,#eee9df); }
.capture-heading { display:flex; align-items:center; gap:8px; min-height:45px; padding:10px 12px; color:#f4ecdc; }.capture-heading>i { flex-shrink:0; width:23px; height:23px; display:grid; place-items:center; border:1px solid #e6b57d45; border-radius:7px; background:linear-gradient(145deg,#a36346,#7e452f); box-shadow:inset 0 1px 0 #fff2; color:#fff4db; }.capture-heading svg { width:12px; height:12px; }.capture-heading h3 { margin:0; font:500 17px/1.1 Newsreader,Georgia,serif; letter-spacing:-.35px; }.capture-heading>span { margin-left:auto; color:#c7cebc; font-size:17px; }
.recognition { display:flex; align-items:center; gap:5px; height:22px; flex-shrink:0; color:#7c8972; font-size:6.5px; }.recognition-orbit { width:7px; height:7px; border:1px solid #bdc3ad; border-top-color:#7a8f63; border-radius:50%; }.recognition-check { width:12px; height:12px; margin-left:auto; }
.field { position:relative; min-height:48px; display:flex; flex-direction:column; justify-content:center; padding:8px 19px 8px 0; border-bottom:1px solid #293c241c; }.field>small { color:#788371; font:600 6px Manrope,sans-serif; letter-spacing:1.2px; margin-bottom:6px; }.field>strong { display:flex; align-items:center; gap:4px; font:500 12px/1.4 'DM Sans',sans-serif; }.field-place>strong { font:400 20px/1.05 Newsreader,serif; }.field-city>strong { font-size:10px; }.field>strong svg { width:12px; height:12px; color:#808f73; }.field-check { position:absolute; right:0; bottom:10px; color:#7c9269; }.field-check svg { width:12px; height:12px; }
.source-card { display:flex; align-items:center; gap:8px; margin:12px 0 10px; padding:7px; background:#ffffff73; border:1px solid #293b2110; border-radius:8px; min-height:46px; }.source-card>img { width:30px; height:33px; object-fit:cover; border-radius:5px; }.source-card b { font-size:8px; font-weight:500; }.source-card small { display:flex; align-items:center; gap:3px; font-size:6px; color:#88917e; margin-top:3px; }.source-card svg { width:10px; height:10px; }.source-card>svg { margin-left:auto; color:#939b86; }
.composer-tags>small { color:#7b8773; font:600 6px Manrope,sans-serif; letter-spacing:1px; }.composer-tags>div { display:flex; gap:5px; margin-top:5px; }.composer-tags>div>span { display:flex; align-items:center; justify-content:center; gap:3px; padding:5px 9px; border:1px solid #344e2c19; border-radius:6px; color:#76816c; background:#45663805; font:600 7px Manrope,sans-serif; }.composer-tags svg { width:11px; height:11px; }.composer-tags .food-selected { border-color:#95604755; background:#9560471f; color:#6f4233; }.composer-tags .shared-tag { color:#a38240; border-color:#c79a4733; background:#c79a4709; }
.composer-options { display:flex; align-items:center; gap:9px; padding:12px 0; margin-top:4px; }.composer-options>span:first-child { display:flex; align-items:center; gap:4px; border:1px solid #425a351c; border-radius:6px; padding:5px 8px; color:#60794f; font-size:7px; }.composer-options svg { width:13px; height:13px; }.composer-options>span:last-child { color:#87947b; font-size:7px; margin-left:auto; }
.capture-bottom { margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid #344c2414; padding-top:10px; }.capture-bottom>span { display:flex; align-items:center; gap:4px; color:#919b86; font-size:6px; }.capture-bottom>span svg { width:10px; height:10px; }
.save-button { flex:0 0 80px; height:33px; padding:0 12px; display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid #f4daaa40; border-radius:8px; background:radial-gradient(circle at 18% 0%,#ecca9129,transparent 42%),linear-gradient(145deg,#a36346,#7e452f); color:#fff7e8; font:700 8px/1 Manrope,sans-serif; box-shadow:0 5px 11px #4e2a1e22,inset 0 1px 0 #ffffff21; position:relative; transform-origin:center; }
.save-button>span { display:block; min-width:25px; text-align:center; }
.save-button svg { width:12px; height:12px; stroke-width:1.35; }
.save-confirm { opacity:0; }
/* Content-sized draft: preserve legibility and Save, trim empty vertical space. */
.composer .recognition { height:17px; }
.composer .field { min-height:43px; padding-block:6px; }
.composer .field>small { margin-bottom:5px; }
.composer .source-card { min-height:38px; padding:6px; margin:9px 0 8px; }
.composer .source-card>img { width:26px; height:28px; }
.composer .composer-options { padding-block:8px; margin-top:3px; }
.composer .capture-bottom { margin-top:0; padding-top:8px; }
.saved-view { z-index:7; display:flex; flex-direction:column; padding:45px 4px 62px; }.saved-view>.app-brand { flex-shrink:0; margin:0 8px 7px; }
.product-rail { height:34px; min-height:34px; border:1px solid #d1ad671c; padding:3px; border-radius:10px; display:flex; gap:3px; overflow:hidden; background:radial-gradient(circle at 12% 8%,#d1ad6711,transparent 31%),#050e0952; box-shadow:inset 0 1px 0 #ffffff07; }.product-rail>span { display:flex; align-items:center; justify-content:center; gap:5px; padding:0 10px; border-radius:6px; font-size:7px; flex-shrink:0; color:#dce4d5a8; }.product-rail .selected { background:linear-gradient(145deg,#567055a6,#39503d80); color:#f1f1db; box-shadow:inset 0 1px 0 #fff1; }.product-rail .trips { color:#dac5a2; background:linear-gradient(145deg,#55463022,#1f35260d); }.product-rail b { font-size:6px; font-weight:500; color:#b89966; }.product-rail .watch { background:linear-gradient(145deg,#3e3d391f,#14161719); }.product-rail svg { width:13px; height:13px; }
.saved-heading { display:flex; justify-content:space-between; align-items:center; height:47px; flex-shrink:0; padding:0 7px; margin-top:7px; }.food-lockup { display:flex; gap:7px; align-items:center; }.food-lockup>i { display:grid; place-items:center; width:27px; height:27px; border-radius:8px; border:1px solid #ecc58e3d; color:#f2d49e; background:radial-gradient(circle at 76% 16%,#ffdea92e,transparent 36%),linear-gradient(145deg,#7f4b3a,#4f2c25); box-shadow:0 5px 10px #000a0522; }.food-lockup svg { width:18px; height:18px; }.food-lockup b { font:400 26px/1 Newsreader,Georgia,serif; color:#fff6e7; }.food-count { display:flex; gap:5px; align-items:baseline; font-size:6px; color:#adba9b; }.food-count strong { font:400 24px/1 Newsreader,serif; color:#c9a968; }
.food-tabs { display:flex; align-items:center; gap:4px; margin:0 6px 8px; min-height:25px; flex-shrink:0; }.food-tabs>span:not(.quiet-search) { padding:5px 12px; border:1px solid transparent; border-radius:6px; font:600 7px Manrope,sans-serif; color:#a2ad95; }.food-tabs .active { background:#95604729; border-color:#bc86593b!important; color:#dfb89a!important; }.quiet-search { position:relative; margin-left:auto; margin-right:4px; color:#becbab; height:18px; }.quiet-search svg { width:16px; height:16px; }
.city-search { display:flex; align-items:center; gap:6px; min-height:0; height:0; opacity:0; margin:0 7px; padding:0 8px; overflow:hidden; border:1px solid #a9bd8d33; background:#06140b40; border-radius:7px; color:#e2ead1; flex-shrink:0; font-size:9px; }.city-search svg { width:12px; height:12px; color:#9db185; }.city-search i { width:1px; height:11px; background:#c2cfae; }.clear-search { margin-left:auto; color:#7d9574; font-size:12px; }
.city-result { height:0; overflow:hidden; opacity:0; min-height:0; display:flex; align-items:center; gap:4px; margin:0 8px; color:#becfaa; font-size:7px; flex-shrink:0; }.city-result svg { width:10px; height:10px; }.city-result b { font-weight:500; }.city-result>span { margin-left:auto; color:#8ea580; font-size:6px; }
.food-list { flex:1; min-height:0; display:flex; flex-direction:column; gap:4px; overflow:hidden; margin-top:2px; mask-image:linear-gradient(#000 calc(100% - 10px),transparent); }
.food-row { flex:0 0 auto; min-height:57px; padding:7px 7px; display:flex; align-items:center; gap:8px; border:1px solid #dfd0ae12; background:linear-gradient(110deg,#ffffff04,#ffffff02); border-radius:8px; }.food-thumb { flex-shrink:0; width:30px; height:30px; border-radius:7px; object-fit:cover; display:grid; place-items:center; color:#d4ac85; background:linear-gradient(130deg,#794a312e,#b8775314); }.food-thumb svg { width:19px; height:19px; }.food-row>div { flex:1; min-width:0; }.food-row strong { display:block; color:#efeada; font:550 10px/1.3 'DM Sans',sans-serif; }.food-row small { display:block; color:#9aa98e; font-size:6px; line-height:1.5; margin-top:2px; }.food-row p { color:#cfb291; font-size:7px; line-height:1.4; margin:3px 0 0; }.food-row p>span { color:#839879; font-size:5px; margin-right:6px; }.food-source { display:flex!important; gap:3px; align-items:center; color:#7f9775!important; }.food-source svg { width:8px; height:8px; }.pending-circle { flex-shrink:0; display:grid; place-items:center; width:13px; height:13px; border-radius:50%; border:1px solid #a6b79a40; color:#b6c6a92b; margin-left:auto; }.pending-circle svg { width:10px; height:10px; }.food-row.featured { border-color:#bba07838; min-height:74px; background:linear-gradient(110deg,#a3794020,#d2caad09); }
.food-row[hidden] { display:none; }
.food-row { min-height:54px; }
.food-row.featured { min-height:70px; }
.food-list.is-filtered { mask-image:none; }
.saved-toast { position:absolute; left:50%; bottom:68px; transform:translateX(-50%); display:flex; align-items:center; gap:5px; white-space:nowrap; padding:8px 12px; border-radius:8px; border:1px solid #c2d4a433; background:#e0e5cc; color:#324b2c; box-shadow:0 4px 15px #0003; font-size:8px; opacity:0; }.saved-toast svg { width:12px; height:12px; }
.saved-bottom { position:absolute; bottom:10px; left:10px; right:10px; height:42px; padding:3px 9px 4px; display:flex; align-items:center; justify-content:space-around; border:1px solid #f1f5ef21; border-radius:999px; background:linear-gradient(180deg,#394f4199,#0e2117ba); box-shadow:0 7px 18px #00070338,0 0 0 .5px #05110a29,inset 0 1px 0 #ffffff14; backdrop-filter:blur(24px) saturate(1.22); }.saved-bottom>span { display:flex; flex-direction:column; align-items:center; gap:3px; color:#f4f7f4ae; font-size:6px; font-weight:600; line-height:1; }.saved-bottom>span.active { color:#fff; }.saved-bottom svg { width:17px; height:17px; stroke-width:1.4; }.saved-bottom .active svg { stroke-width:1.45; }
.saved-seal { position:absolute; bottom:134px; right:1%; display:flex; align-items:center; gap:11px; padding:10px 13px 10px 10px; border:1px solid #eed9b74a; background:linear-gradient(125deg,#e9e5d8,#d7d7c4); color:#263c2c; border-radius:13px; box-shadow:0 15px 38px #0207054d; z-index:12; opacity:0; }.saved-seal>img { width:48px; height:51px; object-fit:cover; border-radius:7px; }.saved-seal small { display:block; font:500 5px Manrope,sans-serif; letter-spacing:1px; color:#748168; margin-bottom:5px; }.saved-seal b { font:400 23px/1 Newsreader,serif; display:block; }.saved-seal span { display:block; font-size:7px; color:#73816a; margin-top:5px; }.saved-seal>svg { width:15px; height:15px; margin-left:7px; color:#8e805b; }
.transport { padding:13px 25px 10px; display:flex; align-items:center; gap:11px; background:#e8e5da; border-bottom:1px solid #25362514; }.transport button { border:0; background:none; color:#374a38; display:grid; place-items:center; min-width:32px; min-height:32px; border-radius:50%; }.transport button:hover { background:#32472c0c; }.play-control svg { width:19px; height:19px; }.replay-control svg { width:15px; height:15px; }.timeline { flex:1; min-width:50px; margin:0 12px 0 2px; }.timeline input { appearance:none; display:block; width:100%; height:3px; border-radius:10px; background:linear-gradient(to right,#8c784d var(--pct,0%),#25362526 var(--pct,0%)); cursor:pointer; margin:8px 0; }.timeline input::-webkit-slider-thumb { appearance:none; width:9px; height:9px; background:#9e895f; border:2px solid #f2efde; border-radius:50%; box-shadow:0 0 0 1px #a38c6055; }.timeline input::-moz-range-thumb { width:6px; height:6px; border:2px solid #f2efde; border-radius:50%; background:#9e895f; }.time { font-size:8px; color:#84907d; display:flex; justify-content:space-between; font-variant-numeric:tabular-nums; margin-top:4px; }.transport .loop-control { font-size:9px; border-radius:7px; min-width:40px; }.loop-control[aria-pressed="true"] { background:#2b423318; color:#2b4b31; }.control-divider { width:1px; height:22px; background:#213c271c; margin:0 6px; }.source-switch { display:flex; gap:3px; }.source-switch button { border-radius:6px; font-size:9px; padding:7px 10px; }.source-switch button[aria-pressed="true"] { background:#fff7; box-shadow:0 2px 5px #20312607; }
.chapters { display:grid; grid-template-columns:repeat(4,1fr); background:#edeae1; }.chapters button { position:relative; border:0; border-right:1px solid #25362514; background:transparent; padding:16px 24px; text-align:left; color:#4d5b47; font-size:12px; font-weight:500; line-height:1.3; }.chapters button:last-child { border:0; }.chapters button:before { position:absolute; content:''; left:0; right:0; top:0; height:2px; background:#ac925d; transform:scaleX(0); transform-origin:left; transition:transform .3s; }.chapters button[aria-current="step"] { background:#fff5; color:#263f2b; }.chapters button[aria-current="step"]:before { transform:scaleX(1); }.chapters button>span { font:italic 14px Newsreader,serif; color:#a19475; margin-right:10px; }.chapters small { font-size:9px; color:#8c9581; font-weight:400; display:block; margin-top:6px; margin-left:26px; }
.study-note { display:flex; justify-content:space-between; gap:30px; color:#89907f; padding-top:16px; font-size:9px; line-height:1.6; }.study-note p { margin:0; }.study-note p:last-child { max-width:440px; text-align:right; font-size:8px; opacity:.8; }.note-dot { margin-right:6px; background:#879c71; }
.film[data-source="tiktok"] .social-top { font-size:15px; justify-content:center; }.film[data-source="tiktok"] .social-top>svg { display:none; }.film[data-source="tiktok"] .social-top>span:after { content:''; height:2px; width:22px; background:#fff; display:block; margin:7px auto 0; }
@media(min-width:1400px) { .film { height:716px; --device-scale:1.08; }.phone { top:35px; }.story { width:42%; }.saved-seal { bottom:151px; right:5%; } }
@media(max-width:1050px) { .film { height:615px; --device-scale:.92; }.phone { top:33px; }.scene-copy h2 { font-size:45px; }.scene-copy p { font-size:11px; }.intro { display:block; }.intro h1 { font-size:43px; }.intro p { margin-top:10px; }.intro p br { display:none; }.extraction-proof { width:280px; }.plan-question { font-size:9px; gap:8px; padding:11px; }.device-zone { left:43%; }.saved-seal { right:2%; bottom:121px; }.saved-seal>img { width:38px; height:42px; }.saved-seal b { font-size:20px; }.saved-seal small { font-size:4px; }.saved-seal span { font-size:6px; }.chapters button { padding:15px 17px; }.chapters small { margin-left:0; font-size:8px; } }
@media(max-width:760px) { .lab-header { min-height:65px; padding:14px 5%; gap:12px; }.lab-label { font-size:6px; letter-spacing:1px; }.brand { font-size:18px; }.brand img { width:24px; height:28px; }.back { font-size:9px; }.back span { margin-left:5px; }main { padding:0 4% 20px; }.intro { padding:24px 0; }.intro h1 { font-size:36px; letter-spacing:-.7px; }.intro em { display:block; }.intro p { font-size:10px; line-height:1.5; max-width:300px; }.cinema { border-radius:15px; }.film { height:802px; --device-scale:.8; }.film-top { left:18px; right:18px; top:17px; font-size:5px; letter-spacing:.8px; }.film-format { font-size:4px; }.story { left:7%; width:86%; top:57px; bottom:auto; height:218px; }.scene-copy { top:0; text-align:center; transform:none!important; }.scene-number { font-size:5px; letter-spacing:1.5px; margin-bottom:14px; }.scene-copy h2 { font-size:35px; line-height:1.02; letter-spacing:-.75px; margin-bottom:10px; }.scene-copy h2 br { display:none; }.scene-copy h2 em { display:block; }.scene-copy p { font-size:10px; line-height:1.6; }.scene-copy p br { display:none; }.discovery-note,.handoff-proof { margin-top:20px; justify-content:center; }.discovery-note { font-size:8px; }.handoff-proof { font-size:11px; gap:13px; }.handoff-proof svg { width:18px; height:18px; }.proof-bucket img { width:21px; height:25px; }.extraction-proof { width:94%; max-width:290px; display:flex; gap:8px; border-top:1px solid #d0d7b41c; padding-top:11px; margin:17px auto 0; }.extraction-proof>div { display:flex; flex:1; min-width:0; flex-direction:column; gap:5px; padding:0; border:0; }.extraction-proof small { font-size:4px; letter-spacing:.5px; }.extraction-proof strong { font-size:9px; }.extraction-proof svg { width:11px; height:11px; }.plan-question { text-align:left; margin:18px auto 0; font-size:9px; padding:9px 11px; max-width:100%; }.friend-dot { width:24px; height:24px; font-size:8px; }.plan-question small { font-size:4px; }.device-zone { left:0; top:279px; bottom:31px; }.phone { top:0; }.device-shadow { bottom:4px; left:21%; right:17%; }.saved-seal { bottom:75px; right:2%; padding:8px 10px; gap:8px; }.saved-seal>img { width:36px; height:38px; }.saved-seal b { font-size:18px; }.saved-seal>svg { width:12px; height:12px; margin-left:2px; }.film-bottom { bottom:15px; left:18px; right:18px; font-size:5px; letter-spacing:.6px; }.film-bottom [data-caption] { display:none; }.film-bottom>span:last-child { font-size:4px; }.transport { flex-wrap:wrap; padding:12px 15px; gap:8px; }.timeline { margin-right:0; }.control-divider { display:none; }.source-switch { justify-content:center; width:100%; border-top:1px solid #26392713; padding-top:8px; margin-top:3px; }.source-switch button { font-size:10px; padding:5px 14px; min-height:28px; }.chapters { grid-template-columns:1fr 1fr; }.chapters button { padding:14px 17px; border-bottom:1px solid #24332414; }.chapters small { font-size:8px; margin-top:5px; }.chapters button:nth-child(2) { border-right:0; }.chapters button:nth-child(3) { border-bottom:0; }.study-note { display:block; font-size:8px; }.study-note p:last-child { margin-top:8px; max-width:100%; text-align:left; font-size:7px; } }
@media(max-width:350px) { .scene-copy h2 { font-size:31px; }.scene-copy p { font-size:9px; }.extraction-proof strong { font-size:8px; }.plan-question { font-size:8px; }.lab-label { letter-spacing:.5px; } }
/* The enlarged result belongs to the film caption, never over the product UI. */
.story .saved-seal { position:relative; bottom:auto; right:auto; width:fit-content; min-width:280px; margin-top:14px; }
.story .saved-seal>svg { margin-left:auto; }
@media(max-width:760px) { .story .saved-seal { display:none; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { transition:none!important; scroll-behavior:auto!important; }.phone,.scene-copy { will-change:auto; }.ambient { transform:none; } }
/* Food Passport identity in the illustrative final scene; the animation remains scripted. */
.saved-view {background:radial-gradient(ellipse at 100% 0%,#b9764938,transparent 56%),linear-gradient(135deg,#49362b,#302720 64%,#272321);}
.food-lockup b {font-size:21px;white-space:nowrap;}
.food-lockup svg {stroke-width:1.15;}
.food-count,.food-tabs>span:not(.quiet-search) {color:#d5b89b;}
.food-tabs .active {color:#f1d2b1!important;border-color:#d7b18855!important;background:#c8966329;}
.saved-view .food-row,.saved-view .food-row.featured {background:linear-gradient(135deg,#f3ece0,#e9ddcc);border-color:#b18b6640;}
.saved-view .food-row strong {color:#3d2c23;}
.saved-view .food-row small,.saved-view .food-row p>span {color:#786453;}
.saved-view .food-row p {color:#805333;}
.saved-view .food-source {color:#8c715a!important;}
.saved-view .food-thumb {color:#845a42;background:#e9d9c8;}
.saved-view .pending-circle {border-color:#a48b736b;color:#866e5b66;}