/* Final, scoped layout rules shared by the landing and its interactive demo. */
.demo-purchase-tools {display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0;padding:12px;border:1px solid #dce7e0;border-radius:12px;background:#fff;}
.demo-purchase-tools small {width:100%;color:#667085;font-size:11px;}
.demo-purchase-tools button {min-height:40px;padding:8px;}
.demo-buy-state {display:block;background:#e7f8ef;color:#00865e;border:1px solid #b9ddcb;border-radius:20px;padding:8px 12px;margin:8px 0;font:inherit;font-size:12px;}
.demo-v2 button:disabled {opacity:.5;cursor:not-allowed;}
.download-card {display:grid;grid-template-columns:72px 1fr;gap:24px;padding:28px;background:#fff;border:1px solid #cbd9c7;border-radius:22px;margin:32px 0;}
.download-card h2,.download-note h2 {font-size:24px;letter-spacing:-.03em;}
.download-card p,.download-note p {line-height:1.8;}
.download-card .button {white-space:normal;text-align:center;line-height:1.5;padding:14px 22px;}
.download-note {padding:26px;border-radius:18px;background:#e6f4e9;margin:30px 0;}
@media(max-width:560px){.download-card {grid-template-columns:1fr;padding:22px;}.download-card .button {width:100%;}.download-card h2 {font-size:21px;}}
.hero .hero-art {height:auto; min-height:650px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; align-content:center; justify-items:center; gap:20px; padding:28px 10px; isolation:isolate;}
.hero .hero-app-preview {grid-column:1/-1; grid-row:1; width:260px; max-width:75%; max-height:520px; transform:rotate(-3deg); margin:0;}
.hero .floating-note {position:static; transform:none; z-index:3; width:auto; max-width:100%; box-sizing:border-box; padding:16px; font-size:13px;}
.hero .note-left {grid-column:1; grid-row:2;}
.hero .note-right {grid-column:2; grid-row:2;}
.hero .hero-art-caption {position:static; grid-column:1/-1; grid-row:3; width:100%; font-size:11px; display:flex; justify-content:space-between; gap:16px;}
.hero-orbit {z-index:-1; pointer-events:none;}
.hero .note-spark {display:none;}
.demo-dialog .demo-inline {gap:10px; margin:14px 0;}
.demo-dialog .demo-inline .app-text-button {border:1px solid #d6e5dc; background:#fff; border-radius:10px; min-height:44px; padding:8px 12px;}
.ai-section {background:#123c2d; color:#fff;}
.ai-section h2 {color:#fff; max-width:780px; font-size:clamp(30px,4vw,54px); line-height:1.2; margin:18px 0;}
.ai-section .section-kicker {color:#cde9a5;}
.ai-lead {max-width:760px; font-size:18px; line-height:1.8; color:#d2e5db;}
.ai-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:36px 0;}
.ai-grid article {border:1px solid #557565; border-radius:20px; padding:26px; background:#ffffff08;}
.ai-grid h3 {color:#fff; font-size:21px; margin:16px 0;}
.ai-grid p {color:#d2e5db; line-height:1.8;}
.ai-number {color:#d6efac; font-size:14px; letter-spacing:.1em;}
.ai-trust {border-top:1px solid #557565; padding-top:20px; line-height:1.8; color:#d2e5db;}
.simple-link {display:flex; justify-content:space-between; align-items:center; gap:24px; padding:30px; border:1px solid #cbd9c7; border-radius:22px; margin-top:30px; background:#f0f5e5;}
.simple-link h3 {margin:0 0 8px; font-size:24px;}
.simple-link p {margin:0; line-height:1.7;}
.demo-phone-shell.demo-v2 {height:780px; min-height:0; max-height:calc(100svh - 100px); overflow:hidden; box-sizing:border-box; padding:0; background:#f7faf8;}
.demo-v2 .demo-app {height:100%; min-height:0; display:flex; flex-direction:column; position:relative; overflow:hidden; background:#f7faf8;}
.demo-v2 .demo-topbar,.demo-v2 .demo-greeting,.demo-v2 .app-toolbar {flex-shrink:0;}
.demo-v2 .demo-content {flex:1; min-height:0; display:flex; overflow:hidden;}
.demo-v2 .tab-panel {flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:16px 16px 24px; scroll-padding:16px;}
.demo-phone-shell.demo-v2 .demo-tabs {position:static; width:100%; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); height:72px; min-height:72px; margin:0; padding:5px; box-sizing:border-box; gap:3px; border-top:1px solid #dce7e0; background:#fff;}
.demo-phone-shell.demo-v2 .demo-tabs button {height:auto; min-height:0; margin:0; padding:8px 1px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;}
.demo-phone-shell.demo-v2 .demo-tabs button span {display:block; width:100%; margin:0; padding:0; text-align:center; font-size:11px; line-height:16px; letter-spacing:0;}
.demo-phone-shell.demo-v2,.demo-v2 .demo-app,.demo-v2 .demo-content {overflow:clip;}
.demo-v2 .app-menu-card small {display:block; margin-top:6px; font-size:11px; font-weight:400; color:#536475; line-height:1.6;}
.demo-selected-dishes summary {font-size:13px; color:#253043; font-weight:700; cursor:pointer; padding:4px 0;}
.demo-v2 .app-recipe-controls label {margin:6px 0;}
.demo-v2 .app-recipe-controls > .app-text-button {align-self:end; min-height:40px; margin:6px 0; padding:8px; text-align:center;}
#panel-shopping > .app-button {display:block; width:100%; margin:10px 0;}
#panel-shopping > .app-text-button {display:block; margin:10px 0; padding:8px 0;}
#shopping-list .demo-ingredient > .app-text-button {display:block; padding:8px 0; margin:3px 0; text-align:left;}
.demo-phone-shell.demo-v2 .demo-tabs button .icon {display:block; width:22px; height:22px; margin:0; padding:0; transform:none;}
.demo-section-card {padding:14px; border:1px solid #e4e7ec; background:#fff; border-radius:16px; margin-bottom:14px;}
.demo-section-card h4,.demo-selected-dishes h4 {font-size:14px; color:#253043; margin:0 0 12px;}
.demo-v2 .app-method-grid .demo-method {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:102px; background:#f8fafb; border:1px solid #e4e7ec; border-radius:12px; color:#253043; font:inherit; padding:12px 8px;}
.demo-method .icon {width:24px; height:24px; color:#079669;}
.demo-method strong {font-size:12px;}
.demo-method small {font-size:10px; line-height:1.5; color:#667085;}
.demo-v2 .demo-method:first-child {background:#e8f7ef; border-color:#a8dec8;}
.demo-receipt-placeholder {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:28px 20px; background:#f0f8f4; border:1px solid #dcebe4; border-radius:16px; text-align:center; margin-bottom:12px; min-height:170px;}
.demo-receipt-placeholder .icon {width:38px; height:38px; color:#079669;}
.demo-receipt-placeholder strong {font-size:14px;}.demo-receipt-placeholder small {font-size:11px; line-height:1.7; color:#667085;}
.demo-receipt-placeholder + .app-button {width:100%; margin:0 0 14px;}
.demo-output-tools {display:flex; align-items:center; gap:9px; margin-bottom:20px;}
.demo-icon-tool {display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:12px; background:#e5f7ef; color:#079669;}
.demo-icon-tool:last-child {margin-left:auto; background:transparent;}
.demo-icon-tool .icon {width:23px; height:23px;}
.demo-recipe-row {background:white; border:1px solid #e4e7ec; border-radius:14px; margin-bottom:10px; overflow:hidden;}
.demo-v2 .demo-recipe-row .recipe-card {border:0; margin:0; padding:14px; border-radius:0;}
.demo-quick-shop {display:block; margin:0 14px 12px auto; min-height:36px; padding:6px 14px; border:1px solid #b5dfcd; border-radius:20px; color:#00865e; background:#eaf8f1; font:600 11px inherit;}
.demo-v2 .app-recipe-controls {display:grid; grid-template-columns:1fr 1fr; gap:0 10px;}
.demo-v2 .app-recipe-controls label:first-child {grid-column:1/-1;}
.demo-v2 .app-menu-card {font-size:14px; padding:16px; line-height:1.6;}
.demo-shopping-summary {display:flex; align-items:center; gap:12px; padding:14px; border:1px solid #e4e7ec; background:white; border-radius:12px; margin-bottom:12px; font-size:14px;}
.demo-shopping-summary .icon {color:#079669; width:24px; height:24px;}
.demo-selected-dishes {padding:14px; border-radius:14px; background:#e7f8f0; margin-bottom:14px;}
.demo-selected-dish {display:grid; gap:5px; padding:10px 0; border-top:1px solid #cde9dc; font-size:12px;}
.demo-selected-dish small {font-size:11px; line-height:1.6; color:#536475;}.demo-selected-dish .demo-ready {color:#00865e;}
.demo-v2 .app-method-grid {grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
.demo-v2 .app-method-grid button {min-width:0; min-height:88px; padding:12px; text-align:center;}
.demo-v2 .demo-inline {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
.demo-v2 .demo-inline button {margin:0; min-width:0; font-size:12px; padding:12px 5px; text-align:center;}
.demo-dialog {width:min(600px,calc(100vw - 28px)); max-height:90svh; padding:0; overflow:hidden;}
.demo-dialog[open] {display:flex; flex-direction:column;}
.demo-dialog .dialog-head {flex-shrink:0; padding:20px; border-bottom:1px solid #dce7e0; background:#fff;}
.demo-dialog .dialog-head h3 {font-size:22px; line-height:1.35; min-width:0;}
.demo-dialog .dialog-head button {flex-shrink:0; min-height:44px; margin:0; padding:8px 12px;}
.demo-dialog .demo-dialog-body {padding:20px; overflow-y:auto; min-height:0;}
.demo-dialog .app-list-button,.demo-v2 .app-list-button {display:grid; gap:7px; width:100%; min-width:0; margin:0 0 10px; padding:16px; text-align:left; box-sizing:border-box; line-height:1.5;}
.demo-dialog .app-list-button strong,.demo-dialog .app-list-button small {display:block; white-space:normal; overflow-wrap:anywhere;}
.demo-dialog .app-list-button strong {font-size:16px;}
.demo-dialog .app-list-button small {font-size:13px; color:#536475;}
.demo-dialog .app-button {display:block; width:100%; min-height:44px; white-space:normal; line-height:1.5; box-sizing:border-box;}
.demo-dialog form {display:grid; gap:8px;}
.demo-dialog label {font-size:14px; line-height:1.5;}
.demo-dialog .demo-choice {display:flex;}
.demo-dialog .app-muted {font-size:14px; line-height:1.7;}
.menu-summary {padding:16px; background:#e7f5ed; border-radius:14px; margin:18px 0; line-height:1.7;}
.demo-amounts {display:flex; flex-wrap:wrap; gap:8px;}
.demo-amounts span {padding:5px 8px; border-radius:6px; background:white;}
.simple-page {background:#f6f6ed; color:#183e30; font-family:'Be Vietnam Pro',sans-serif;}
.simple-page main {max-width:1000px; padding:60px 24px 90px; margin:auto;}
.simple-page h1 {font-size:clamp(38px,6vw,68px); line-height:1.2; max-width:850px;}
.simple-page .simple-lead {font-size:20px; line-height:1.8; max-width:780px;}
.simple-steps {display:grid; gap:18px; margin:40px 0;}
.simple-steps article {display:grid; grid-template-columns:60px 1fr; gap:20px; border:1px solid #cbd9c7; background:white; padding:26px; border-radius:18px;}
.simple-steps h2 {font-size:22px; margin:0 0 12px;}
.simple-steps p {line-height:1.8; margin:0;}
@media(max-width:780px) {.ai-grid {grid-template-columns:1fr;} .simple-link {align-items:flex-start; flex-direction:column;} .hero .hero-art {min-height:0;} .hero .hero-app-preview {max-height:440px;} }
@media(max-width:560px) {.hero .floating-note {font-size:11px; padding:12px;} .hero .hero-art {gap:14px;} .demo-phone-shell.demo-v2 {height:700px; max-height:calc(100svh - 90px);} .demo-v2 .demo-greeting {padding:12px;} .demo-v2 .app-toolbar {padding:10px 14px;} .demo-dialog .dialog-head,.demo-dialog .demo-dialog-body {padding:16px;} .simple-steps article {grid-template-columns:1fr;} }