/* Landing-only previews. The existing Así va hoy surface stays intact. */
.ai-preview-badge{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid #d4dfc4;border-radius:20px;background:#f0f5e7;color:#4b662d;font-size:10px;font-weight:700;line-height:1.3;white-space:nowrap;letter-spacing:0}
.hero-nlp{margin:-5px 0 16px;border:1px solid #e0e8d8;border-radius:13px;padding:11px;background:#f9fbf5}
.hero-nlp-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;font-weight:650;color:#53674f}
.hero-nlp-heading .ai-preview-badge{font-size:9px;padding:4px 6px}
.hero-nlp-input{position:relative;min-height:48px;padding:12px 27px 6px 0;font-size:13px;line-height:1.55;color:#203b31}
.hero-nlp-input svg{position:absolute;right:0;top:12px;width:19px;height:19px;fill:none;stroke:#638739;stroke-width:1.5;stroke-linejoin:round}
.hero-nlp-result{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:32px;color:#507132;font-size:10px}
.demo-caret{display:inline-block;vertical-align:-2px;width:2px;height:1em;background:#608b35;margin-left:2px;opacity:0}
[data-playing=true][data-phase=typing] .demo-caret{opacity:1;animation:demo-caret .7s steps(2,end) infinite}
@keyframes demo-caret{50%{opacity:0}}
#hero-demo [data-hero-calories],#hero-demo [data-hero-protein],#hero-demo [data-hero-points]{font-variant-numeric:tabular-nums}
#hero-demo [data-hero-protein],#hero-demo [data-hero-activity]{font:inherit;color:inherit;letter-spacing:inherit}
.hero-example-choices{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.hero-example-choices button{border:1px solid #dce5d3;background:transparent;color:#53703d;border-radius:9px;min-height:44px;padding:7px 10px;font:inherit;font-size:10px;cursor:pointer}
.hero-example-choices button[aria-pressed=true]{background:#e1edce;border-color:#99b879;color:#294629;font-weight:700}
.hero-example-choices button:focus-visible{outline:2px solid #4b762a;outline-offset:3px}
#hero-demo .bars{height:75px;margin-top:22px}
#hero-demo .bars i{position:relative;font-style:normal}
#hero-demo .bars i span{position:absolute;bottom:calc(100% + 5px);left:0;right:0;text-align:center;font-size:10px;font-weight:700;color:#56753e;font-variant-numeric:tabular-nums}
#hero-demo .bar-1{--h:25%}#hero-demo .bar-2,#hero-demo .bar-3,#hero-demo .bar-5{--h:50%}#hero-demo .bar-4,#hero-demo .bar-6{--h:75%}
.live-demo{max-width:1160px;margin:50px auto 100px;scroll-margin-top:25px}
.live-demo-intro{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:20px}
.live-demo h2{font-size:clamp(34px,4vw,52px);letter-spacing:-1.8px;line-height:1.09;margin:18px 0 14px}
.live-demo h2 em{font-style:normal;color:#5d8734}
.live-demo-intro p:not(.eyebrow){font-size:14px;color:#65735c;line-height:1.65;margin:0}
.live-demo-intro>.ai-preview-badge{margin-bottom:14px;font-size:12px}
.demo-personas{display:flex;gap:8px;margin:0 0 20px;flex-wrap:wrap}
.live-demo button,.hero-nlp button{font-family:inherit;cursor:pointer}
.demo-personas button{min-height:44px;padding:11px 19px;border:1px solid #d2dcc7;background:transparent;border-radius:25px;font-size:13px;font-weight:650;color:#587047}
.demo-personas button[aria-pressed=true]{background:#1b372d;border-color:#1b372d;color:#f5ffe7}
.demo-personas button:hover{box-shadow:0 0 0 2px #a6c77555}
.live-demo button:focus-visible,.live-demo a:focus-visible,.hero-nlp button:focus-visible{outline:3px solid #739b38;outline-offset:4px}
.demo-workspace{display:grid;grid-template-columns:.85fr 1.15fr;gap:0;overflow:hidden;border:1px solid #dbe3d1;border-radius:26px;background:#fff;box-shadow:0 20px 65px #243e2510}
.demo-capture{padding:30px;display:flex;flex-direction:column;min-width:0}
.demo-person{display:flex;align-items:center;gap:10px}
.demo-person-avatar{display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid #d9e3c9;border-radius:50%;background:#edf4e2;font-weight:750;color:#607f3c}
.demo-person strong{display:block;font-size:15px}.demo-person div>span{display:block;font-size:11px;color:#78846c;margin-top:3px}
.demo-day{margin-left:auto;padding:7px 9px;border-radius:8px;background:#f4f6ef;font-size:10px;font-weight:650;white-space:nowrap;color:#536948}
.demo-step-controls{display:flex;gap:6px;margin:25px 0 24px;border-bottom:1px solid #e4e9dd;padding-bottom:12px}
.demo-step-controls button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;flex:1;padding:7px 4px;border:0;border-radius:8px;background:transparent;color:#728066;font-size:11px;font-weight:650;white-space:nowrap}
.demo-step-controls button>span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#f0f3e9;font-size:10px}
.demo-step-controls button[aria-pressed=true]{color:#32521d;background:#eff5e5}
.demo-step-controls button[aria-pressed=true]>span{background:#658f37;color:white}
.demo-input{position:relative;min-height:126px;padding:18px 42px 18px 18px;border:1px solid #b7cb9e;border-radius:14px;background:linear-gradient(120deg,#fbfdf7,#f4f8ee);font-size:18px;font-weight:500;letter-spacing:-.3px;line-height:1.55;color:#213a2d}
.demo-send{display:grid;place-items:center;position:absolute;bottom:12px;right:12px;width:27px;height:27px;border-radius:9px;background:#244634;color:#e1f4bc;font-size:18px}
.demo-understanding{display:flex;align-items:center;gap:10px;min-height:66px;margin-top:10px}
.demo-ai-icon{display:grid;place-items:center;width:31px;height:31px;flex:none;font-size:21px;color:#6c9441;background:#f0f6e9;border-radius:10px}
.demo-understanding strong{display:block;font-size:12px;color:#365928}
.demo-understanding div>span{display:block;font-size:11px;line-height:1.4;color:#758168;margin-top:4px}
.demo-extracted{display:flex;gap:7px;flex-wrap:wrap;min-height:29px}
.demo-extracted>span{display:inline-flex;align-items:center;padding:6px 8px;border:1px solid #d9e5ca;background:#f3f8eb;border-radius:8px;font-size:11px;font-weight:650;color:#4d702e;font-variant-numeric:tabular-nums}
.demo-extracted>span:last-child{background:#fff9e8;border-color:#eee3c1;color:#887026}
.demo-control-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:18px}
.demo-control-row a{display:inline-flex;align-items:center;min-height:44px;gap:12px;font-size:11px;font-weight:650;color:#57733c}
.demo-play{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;min-width:83px;border:1px solid #d9e2ce;border-radius:10px;padding:10px 13px;background:#fff;color:#4d6740;font-size:11px;font-weight:650;white-space:nowrap}
.hero-nlp .demo-play{min-width:64px;min-height:44px;padding:7px;font-size:9px;border:0;background:transparent}
.demo-dashboard{min-width:0;padding:29px;background:radial-gradient(ellipse at 100% 0,#39634a55,transparent 65%),linear-gradient(135deg,#142c26,#1b3830);color:#f7fced}
.demo-dashboard-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.demo-dashboard-kicker{font-size:9px;font-weight:600;letter-spacing:1.6px;color:#a7bfad}
.demo-dashboard h3{font-size:25px;font-weight:650;letter-spacing:-.6px;margin:5px 0 0}
.demo-points{padding:8px 10px;border:1px solid #d4edaa26;background:#d4edaa0c;color:#d6eca7;border-radius:10px;font-size:11px;white-space:nowrap}
.demo-points>span{font-size:14px;margin-right:4px}
.demo-metrics{display:grid;grid-template-columns:1.2fr 1fr .9fr;gap:15px}
.demo-metric>span:first-child{font-size:12px;color:#b1c9b8}
.demo-metric strong{display:flex;align-items:baseline;gap:5px;margin:7px 0 12px}
.demo-metric b{font-size:38px;letter-spacing:-1.8px;font-weight:650;line-height:1.2}
.demo-metric small{font-size:10px;font-weight:450;color:#a7c1b0}
.demo-metric b,.demo-points b,.demo-plot-title b,.demo-streak b{font-variant-numeric:tabular-nums}
.demo-calories b{color:#dcf3ac}.demo-protein b{color:#9ed9c5}
.demo-meter{display:block;height:4px;border-radius:4px;background:#ffffff12;overflow:hidden}
.demo-meter i{display:block;width:100%;height:100%;background:#cfec97;transform-origin:left;border-radius:4px}
.demo-protein .demo-meter i{background:#83cbb6}
.demo-activity-caption{display:block;font-size:10px;color:#aac2b0;line-height:1}
.demo-value-note{font-size:11px;line-height:1.5;color:#9eb6a4;margin:12px 0 16px}
.demo-plots{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.demo-plot{min-width:0;padding:13px 10px 10px;background:#071e191f;border:1px solid #bdd5bb20;border-radius:12px}
.demo-plot-title{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:10px;color:#c2d7c7;margin-bottom:12px}
.demo-plot-title>span{display:flex;align-items:center;gap:5px}
.demo-plot-title strong{font-size:10px;white-space:nowrap;color:#e3f4d0;font-weight:500}
.demo-plot-title b{font-size:15px;font-weight:650}
.demo-swatch{display:block;width:6px;height:6px;border-radius:50%;background:#85cdb5}.activity-swatch{background:#cce89b}
.demo-plot svg{width:100%;height:auto;display:block;overflow:visible}
.demo-grid{stroke:#aac3a519;stroke-width:1;fill:none}.demo-axis{fill:#a1b9a6;font-size:11px;font-family:inherit}
.demo-line-area{fill:#84cbb615}.demo-protein-line{fill:none;stroke:#85cdb5;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.demo-plot circle{fill:#a4e4cc;stroke:#19382f;stroke-width:2}.demo-plot circle:last-of-type{fill:#e0ffd3;r:5}
.demo-bar{fill:#b7d98b;rx:4}.demo-bar-current{fill:#dcf6aa}
.demo-data-label{font-size:13px;font-weight:600;fill:#e5f8d7;font-family:inherit;text-anchor:middle;font-variant-numeric:tabular-nums}
.demo-streak{display:flex;align-items:center;gap:10px;border-top:1px solid #bdd5bb26;padding-top:20px;margin-top:23px}
.demo-streak-icon{display:grid;place-items:center;font-size:22px;width:40px;height:40px;flex:none;border-radius:12px;background:#e6d78b0c;border:1px solid #e6d78b1f}
.demo-streak strong{display:block;font-size:15px;font-weight:600;color:#edf4d8}
.demo-streak div>span{display:block;font-size:10px;line-height:1.5;color:#a6bea9;margin-top:4px}
.demo-week{display:flex;gap:3px;margin-left:auto;flex-wrap:wrap;max-width:104px;justify-content:flex-end;flex:none}
.demo-week i{display:grid;place-items:center;width:12px;height:18px;border-radius:4px;background:#adc77525;color:#c9e595;font-size:9px;font-style:normal}
.demo-week i:last-child{background:#cae594;color:#2c4827}
.live-demo[data-committed=false] .demo-week i:last-child{background:#adc77515;color:#adc77555}
.live-demo[data-committed=false] .demo-extracted{opacity:.35}
.live-demo[data-playing=true][data-committed=true] .demo-points{animation:demo-reward .65s ease-out}
.live-demo[data-playing=true][data-committed=true]:not([data-step="1"]) .demo-streak-icon{animation:demo-reward .65s ease-out}
@keyframes demo-reward{35%{transform:scale(1.08);box-shadow:0 0 18px #c7e78930}100%{transform:scale(1)}}
.demo-disclosure{font-size:12px;line-height:1.5;text-align:center;color:#738067;margin:12px 4px 0}
.demo-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(min-width:801px) and (max-width:1100px){.demo-workspace{grid-template-columns:.9fr 1.1fr}.demo-capture,.demo-dashboard{padding:22px}.demo-plots{grid-template-columns:1fr}.demo-plot svg{max-height:115px}.demo-metric b{font-size:31px}.demo-week{display:none}}
@media(max-width:1250px){.live-demo{margin-left:40px;margin-right:40px}}
@media(max-width:800px){.live-demo{margin:40px 25px 65px}.demo-workspace{grid-template-columns:1fr}.demo-capture{padding:25px}.demo-dashboard{padding:25px}.demo-control-row{margin-top:0}.demo-input{min-height:108px}.demo-step-controls{margin:18px 0}.live-demo-intro{align-items:start}.live-demo h2{font-size:42px}}
@media(max-width:540px){.live-demo{margin-left:18px;margin-right:18px}.live-demo-intro{display:block;margin-bottom:14px}.live-demo-intro>.ai-preview-badge{margin:0}.live-demo-intro h2{margin-top:0;margin-bottom:12px}.live-demo h2{font-size:38px}.live-demo-intro p:not(.eyebrow){font-size:13px}.demo-personas{gap:6px;margin-bottom:14px}.demo-personas button{font-size:11px;padding:10px 13px}.demo-workspace{border-radius:20px}.demo-capture,.demo-dashboard{padding:21px}.demo-input{font-size:17px}.demo-metrics{gap:10px}.demo-metric b{font-size:34px}.demo-metric small{font-size:9px}.demo-metric>span:first-child{font-size:11px}.demo-plots{grid-template-columns:1fr;gap:13px}.demo-plot{padding:12px 14px 9px}.demo-plot svg{max-height:116px}.demo-plot-title{margin-bottom:5px;font-size:12px}.demo-plot-title strong{font-size:11px}.demo-streak{flex-wrap:wrap;margin-top:18px;padding-top:16px}.demo-week{margin-left:auto}.demo-streak div>span{max-width:195px}}
@media(max-width:360px){.hero-nlp-heading{flex-wrap:wrap;gap:6px}.hero-nlp-input{font-size:12px}.hero-nlp-result{align-items:center;font-size:9px}.demo-capture,.demo-dashboard{padding:17px}.demo-step-controls{gap:2px}.demo-step-controls button{font-size:10px;gap:4px}.demo-person div>span{font-size:10px}.demo-day{font-size:9px;padding:7px}.demo-metric b{font-size:29px}.demo-metric strong{gap:3px}.demo-points{font-size:10px;padding:7px}.demo-metrics{gap:7px}.demo-week{display:none}.demo-control-row{gap:7px}.demo-control-row a{font-size:10px;gap:5px}.demo-play{padding:10px;min-width:75px}}
@media(max-width:540px){.demo-input{min-height:94px}.demo-understanding{min-height:48px;margin-top:7px}.demo-understanding div>span{display:none}.demo-control-row{padding-top:8px}.demo-step-controls{margin:14px 0}.demo-person{margin-bottom:0}.demo-plot svg{max-height:102px}}
@media(prefers-reduced-motion:reduce){.demo-caret{display:none}.demo-play{display:none}}

/* 2026-09-12: input and its changing values stay in the same compact example. */
.mini-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.mini-metrics>div>span{font-size:9px;letter-spacing:.3px}.mini-metrics strong{font-size:23px}
.demo-capture,.demo-dashboard{padding:20px}.demo-input{min-height:76px}.demo-step-controls{margin:12px 0}.demo-understanding{margin-top:8px;min-height:32px}.demo-extracted{display:none}.demo-control-row{padding-top:6px}
.demo-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.demo-metric b{font-size:27px;letter-spacing:-1px}.demo-metric strong{margin:5px 0 8px}.demo-metric>span:first-child{font-size:11px}.demo-activity{grid-column:1/-1;display:flex;align-items:center;gap:10px}.demo-activity strong{margin:0}.demo-activity b{font-size:21px}.demo-activity-caption{margin-left:auto}.demo-value-note{margin:7px 0 10px}.demo-dashboard-heading{margin-bottom:12px}.demo-plots{gap:10px}.demo-plot-title{margin-bottom:6px}.demo-streak{margin-top:12px;padding-top:12px}.demo-streak div>span{display:none}
@media(max-width:800px){.demo-capture,.demo-dashboard{padding:16px}.demo-person{display:none}.demo-step-controls{margin:0 0 10px}.demo-input{min-height:68px;font-size:16px;line-height:1.4;padding:12px 34px 12px 12px}.demo-understanding{min-height:24px}.demo-understanding div>span{display:none}.demo-understanding strong{font-size:12px}.demo-control-row{margin-top:0}.demo-dashboard-heading h3{font-size:18px}.demo-dashboard-kicker{font-size:9px}.demo-workspace{gap:0}.demo-plots{grid-template-columns:1fr 1fr}.demo-plot{padding:10px 8px 5px}.demo-plot svg{max-height:96px}.demo-plot-title{font-size:10px}.demo-plot-title strong{font-size:10px}.demo-plot-title b{font-size:13px}.demo-metric b{font-size:25px}.demo-metric>span:first-child{font-size:10px}.demo-dashboard{padding-top:10px}.hero-nlp{margin-bottom:10px}.hero-nlp-input{min-height:60px}.mini-metrics>div>span{font-size:9px;letter-spacing:0}.hero-preview .sample-chart{padding-top:14px;padding-bottom:10px}.hero-preview .bars{height:58px}}
@media(max-width:360px){.demo-metrics{gap:6px}.demo-metric b{font-size:22px}.demo-metric>span:first-child{font-size:9px}.demo-plot-title{gap:3px;font-size:9px}.demo-streak strong{font-size:13px}.mini-metrics strong{font-size:20px}}