/* Readable, responsive demo UI. Loaded only by the demo, after the shared styles. */
body.demo-app { --muted:#59685e; font-size:16px; line-height:1.7; }
.demo-app h1 { font-size:clamp(28px,2.7vw,38px); line-height:1.5; letter-spacing:.015em; }
.demo-app h2 { font-size:24px; line-height:1.5; }
.demo-app h3 { font-size:21px; }
.demo-app small { font-size:14px; line-height:1.7; }
.demo-app .button { font-size:16px; min-height:48px; padding:13px 20px; border-radius:10px; }
.demo-app .text-button { font-size:15px; line-height:1.7; min-height:42px; text-align:left; }
.demo-app .eyebrow { font-size:12px; letter-spacing:1.5px; color:#647464; }
.demo-app .sidebar { width:250px; padding:30px 18px; overflow-y:auto; }
.demo-app .sidebar>.brand { font-size:32px; padding-left:12px; }
.demo-app .brand i { font-size:10px; }
.demo-app .shop-switch { margin:30px 0 22px; padding:14px 10px; }
.demo-app .shop-switch strong { font-size:15px; }
.demo-app .shop-switch small { font-size:12px; }
.demo-app .nav-link { font-size:15px; gap:10px; padding:14px 12px; }
.demo-app .nav-count { font-size:13px; min-width:24px; }
.demo-app .sidebar-note { margin:25px 12px; padding-top:18px; }
.demo-app .sidebar-note strong { font-size:16px; }
.demo-app .sidebar-note p, .demo-app .sidebar-bottom small, .demo-app .sidebar-bottom>a { font-size:13px; }
.demo-app .sidebar-bottom small { margin-bottom:12px; }
.demo-app .demo-pill { font-size:13px; color:#48633e; }
.demo-app .workspace { margin-left:250px; }
.demo-app .app-header { height:76px; padding:0 36px; }
.demo-app .breadcrumb { font-size:15px; }
.demo-app .sample-tag { font-size:13px; padding:6px 10px; color:#52634c; }
.demo-app .workspace main { max-width:1500px; width:100%; margin:0 auto; padding:28px 36px 50px; }
.demo-app .demo-notice { font-size:14px; padding:14px 18px; line-height:1.8; background:#edf2e5; color:#41573d; }
.demo-app .demo-notice>a { font-size:14px; white-space:nowrap; }
.demo-app .page-intro { align-items:center; gap:25px; margin:32px 0 28px; }
.demo-app .page-intro>div>p:last-child { font-size:16px; line-height:1.9; color:var(--muted); }
.demo-app .daily-progress { width:225px; flex-shrink:0; }
.demo-app .progress-label { font-size:15px; }
.demo-app .progress-label strong { font-size:28px; }
.demo-app .daily-progress>small { font-size:14px; }
.demo-app .metrics { margin:26px 0 36px; gap:16px; }
.demo-app .metric { padding:22px; }
.demo-app .metric>div:first-child { font-size:15px; gap:8px; }
.demo-app .metric strong { font-size:32px; }
.demo-app .metric-bottom { margin-top:18px; flex-wrap:wrap; gap:8px; }
.demo-app .metric-bottom>small { font-size:13px; max-width:100%; }
.demo-app .section-heading { margin-bottom:22px; }
.demo-app .section-heading h2 { font-size:26px; }
.demo-app .section-caption { font-size:14px; }
.demo-app .count-tag { font-size:15px; }
.demo-app .task-list { gap:20px; }
.demo-app .task-card { padding:28px; gap:20px; align-items:flex-start; }
.demo-app .task-mark { width:45px; height:45px; }
.demo-app .task-content { min-width:0; }
.demo-app .task-content h3 { font-size:22px; line-height:1.6; }
.demo-app .task-meta { font-size:14px; margin-bottom:12px; line-height:1.7; }
.demo-app .task-content>p { font-size:16px; line-height:1.9; }
.demo-app .task-preview { margin:20px 0; gap:14px; }
.demo-app .task-preview strong { font-size:16px; line-height:1.7; }
.demo-app .task-preview small { font-size:15px; line-height:1.7; }
.demo-app .product-thumb { height:46px; width:46px; border-radius:11px; }
.demo-app .task-actions { padding:0; flex-shrink:0; margin-top:4px; }
.demo-app .task-actions .button { gap:8px; }
.demo-app .task-actions>.text-button { font-size:14px; }
.demo-app .completed-badge { font-size:15px; }
.task-explainer { border-top:1px solid var(--line); padding-top:17px; }
.task-explainer>strong { font-size:14px; color:#49634d; }
.task-explainer>p { font-size:15px; line-height:1.85; color:var(--muted); margin:6px 0 0; max-width:720px; }
.task-explainer>a { color:#365d43; text-decoration:underline; text-underline-offset:4px; }
.demo-app .bottom-note { padding:24px; margin-top:25px; }
.demo-app .bottom-note strong { font-size:16px; }
.demo-app .bottom-note p { font-size:15px; }
.demo-app .app-footer { font-size:13px; gap:15px; flex-wrap:wrap; padding:23px 36px; }
.demo-app .app-footer .subtle { font-size:12px; }
.demo-app .settings-card { padding:28px; }
.demo-app .settings-card h2 { font-size:23px; }
.demo-app .settings-card p, .demo-app .settings-card label { font-size:16px; }
.demo-app select, .demo-app input[type=number], .demo-app textarea { font-size:16px; padding:13px; }
.demo-app label, .demo-app .field-label { font-size:16px; }
.demo-app .field-help { font-size:14px; line-height:1.85; }
.demo-app .history-item { padding:24px; gap:18px; }
.demo-app .history-item strong { font-size:18px; }
.demo-app .history-item p { font-size:16px; }
.demo-app .history-item small { font-size:14px; }
.demo-app .empty-panel { padding:45px 25px; }
.demo-app .empty-panel h3 { font-size:23px; }
.demo-app .empty-panel p { font-size:16px; max-width:660px; margin-left:auto; margin-right:auto; }
.demo-app .deferred { font-size:16px; }
.demo-app .deferred>div { font-size:16px; }
.demo-app .deferred .text-button { font-size:15px; }
.demo-app .toast { font-size:15px; line-height:1.7; }
.experience-bar { border:1px solid #dce4d5; border-radius:16px; padding:24px; background:#fff; }
.scenario-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.scenario-heading h2 { font-size:19px; }
.scenario-heading p { font-size:14px; margin:7px 0 18px; color:var(--muted); }
.scenario-heading>.text-button { flex-shrink:0; text-decoration:underline; }
.scenario-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.scenario-option { position:relative; display:grid; grid-template-columns:26px 1fr; gap:2px 7px; text-align:left; border:1px solid var(--line); border-radius:10px; background:#fbfcf9; color:var(--ink); padding:16px 13px; }
.scenario-option>span { grid-row:span 2; font-size:13px; color:#647964; margin-top:2px; }
.scenario-option strong { font-size:15px; }
.scenario-option small { font-size:13px; color:var(--muted); }
.scenario-option.selected { border:2px solid #446c4e; padding:15px 12px; background:#edf4e7; }
.experience-steps { display:flex; justify-content:space-between; padding:17px 0 0; margin:0; gap:16px; list-style:none; flex-wrap:wrap; }
.experience-steps li { display:flex; align-items:center; gap:8px; font-size:14px; }
.experience-steps b { display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:#edf1e7; font-size:12px; }
.data-summary { display:flex; flex-wrap:wrap; gap:10px 20px; padding:18px 22px; background:#eaf0e3; border-radius:12px; }
.data-summary>span { font-size:14px; color:var(--muted); }
.data-tabs { display:flex; margin:25px 0; border-bottom:1px solid var(--line); gap:25px; overflow-x:auto; }
.data-tabs>button { color:var(--muted); background:none; border:0; border-bottom:3px solid transparent; padding:15px 5px; font-size:16px; font-weight:600; white-space:nowrap; }
.data-tabs>button[aria-selected=true] { color:var(--ink); border-bottom-color:var(--ink); }
.data-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.data-card { background:white; border:1px solid var(--line); border-radius:14px; padding:25px; min-width:0; }
.data-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; }
.data-card h3 { margin:15px 0 10px; font-size:20px; }
.data-card p { font-size:15px; color:var(--muted); margin:8px 0 15px; }
.status-label { display:inline-flex; font-size:13px; line-height:1.7; color:#5e634b; background:#f1f1e8; padding:5px 10px; border-radius:7px; }
.status-label.changed { background:#e7f2df; color:#3d6839; }
.data-facts { margin:12px 0 20px; font-size:15px; }
.data-facts>div { display:flex; justify-content:space-between; gap:15px; padding:9px 0; border-bottom:1px solid #edf0e8; }
.data-facts dt { color:var(--muted); }
.data-facts dd { margin:0; text-align:right; font-weight:600; }
.data-facts del { color:var(--muted); font-weight:400; }
.data-context { font-size:16px; }
.data-disclaimer { font-size:14px; color:var(--muted); line-height:1.9; padding:20px 0; }
.guide-hero { margin:35px 0; padding:35px; background:#eaf0e3; border-radius:16px; }
.guide-hero h1 { font-size:36px; }
.guide-hero>p:not(.eyebrow) { font-size:17px; line-height:2; margin-bottom:25px; }
.guide-hero>.button { margin:0 10px 10px 0; }
.guide-section { margin:30px 0; padding:28px; border:1px solid var(--line); border-radius:14px; background:white; }
.guide-section h2 { margin-bottom:15px; }
.guide-section p { font-size:16px; line-height:2; }
.guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.guide-card { padding:25px; background:white; border:1px solid var(--line); border-radius:14px; }
.guide-number { display:block; font-size:24px; color:#647d51; margin-bottom:14px; }
.guide-card h2 { font-size:21px; }
.guide-card p { font-size:16px; line-height:2; }
.guide-card small { display:block; padding-top:15px; border-top:1px solid var(--line); color:var(--muted); }
.guide-checklist { padding-left:24px; font-size:16px; }
.guide-checklist>li { padding:6px 0; }
.capability-section>div { display:grid; grid-template-columns:1fr 1fr; gap:25px; }
.demo-app dialog { width:720px; max-width:calc(100vw - 32px); padding:32px; border-radius:16px; max-height:calc(100dvh - 40px); }
.demo-app dialog h2 { font-size:25px; line-height:1.6; }
.demo-app .dialog-reason { font-size:16px; margin:12px 0 18px; }
.demo-app .review-product strong { font-size:18px; }
.demo-app .review-product small, .demo-app .recipient-list small { font-size:14px; line-height:1.85; }
.demo-app .review-product { margin:20px 0; }
.demo-app .profit-preview { padding:20px; }
.demo-app .profit-preview>div { font-size:15px; gap:15px; padding:8px 0; }
.demo-app .profit-preview strong { font-size:22px; }
.demo-app .profit-preview .before-profit strong { font-size:18px; color:var(--muted); }
.demo-app .profit-preview p { font-size:15px; line-height:1.8; }
.demo-app .calculation { font-size:15px; }
.demo-app .calculation p { font-size:14px; }
.demo-app .dialog-footer { flex-wrap:wrap; gap:12px; }
.demo-app .dialog-footer p { font-size:14px; width:100%; }
.demo-app .dialog-footer>.button { font-size:16px; }
.demo-app .icon-button { font-size:26px; height:44px; width:44px; }
.review-context { background:#edf2e7; padding:18px; margin:18px 0 22px; border-radius:10px; }
.review-context strong { font-size:15px; }
.review-context p { font-size:15px; line-height:1.9; margin:8px 0 0; }
.demo-app .recipient-choice { display:flex; align-items:center; gap:12px; margin:10px 0; padding:13px; background:#f8f9f5; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.recipient-choice input { height:20px; width:20px; accent-color:#365d43; flex-shrink:0; }
.demo-app .recipient-choice>div { min-width:0; }
.demo-app .recipient-choice strong { font-size:16px; }
.demo-app .recipient-choice .recipient-avatar { flex-shrink:0; }
.result-symbol { display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; background:#e7f0df; color:#3e633a; font-size:28px; margin:15px 0 22px; }
.result-diff { background:#eef3e6; border-radius:12px; padding:22px; margin:22px 0; }
.result-diff strong { font-size:25px; }
.result-diff p { font-size:18px; margin:10px 0 0; }
.result-next { display:flex; gap:12px; flex-wrap:wrap; margin:25px 0 15px; }
@media(min-width:1550px) { .data-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1200px) {
  .demo-app .sidebar { width:225px; padding-left:12px; padding-right:12px; }
  .demo-app .workspace { margin-left:225px; }
  .demo-app .workspace main { padding:24px; }
  .demo-app .app-header { padding:0 24px; }
  .demo-app .task-card { flex-wrap:wrap; gap:16px; padding:24px; }
  .demo-app .task-content { flex-basis:calc(100% - 65px); }
  .demo-app .task-actions { width:100%; flex-direction:row; justify-content:flex-end; gap:18px; border-top:1px solid var(--line); padding-top:17px; }
  .demo-app .daily-progress { width:190px; }
  .scenario-options { grid-template-columns:1fr; gap:8px; }
  .scenario-option { grid-template-columns:26px 1fr 1fr; align-items:center; padding:12px; }
  .scenario-option>span { grid-row:auto; }
  .scenario-option.selected { padding:11px; }
  .scenario-option small { justify-self:end; }
  .guide-grid { grid-template-columns:1fr; }
  .demo-app .metrics { gap:10px; }
  .demo-app .metric { padding:17px; }
  .demo-app .metric strong { font-size:28px; }
  .demo-app .sparkline { display:none; }
}
@media(max-width:800px) {
  .demo-app .sidebar { position:relative; width:100%; padding:22px 20px 0; display:grid; grid-template-columns:1fr 1fr; gap:20px; overflow:visible; }
  .demo-app .sidebar>.brand { padding:0; font-size:29px; }
  .demo-app .shop-switch { justify-self:end; margin:0; max-width:240px; }
  .demo-app .sidebar nav { grid-column:1/-1; display:flex; gap:5px; overflow-x:auto; width:100%; }
  .demo-app .nav-link { flex:0 0 auto; font-size:14px; padding:13px 11px; gap:7px; margin:0; }
  .demo-app .nav-link .icon { width:18px; height:18px; }
  .demo-app .nav-count { font-size:12px; }
  .demo-app .sidebar-note, .demo-app .sidebar-bottom { display:none; }
  .demo-app .workspace { margin-left:0; }
  .demo-app .page-intro { flex-direction:column; align-items:stretch; margin:28px 0; }
  .demo-app .daily-progress { width:100%; border:1px solid var(--line); padding:16px; background:#fff; border-radius:12px; }
  .demo-app .metric-bottom>small { display:block; }
  .demo-app .metric>div:first-child>small { display:none; }
  .experience-steps { gap:10px; }
  .data-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:560px) {
  .demo-app .sidebar { padding:20px 16px 0; grid-template-columns:1fr; gap:15px; }
  .demo-app .shop-switch { display:none; }
  .demo-app .sidebar nav { margin:0 -2px; }
  .demo-app .nav-link { font-size:14px; padding:12px 10px; }
  .demo-app .nav-link .icon { display:none; }
  .demo-app .app-header { padding:0 18px; height:56px; }
  .demo-app .breadcrumb { font-size:13px; }
  .demo-app .sample-tag { font-size:12px; padding:4px 6px; }
  .demo-app .workspace main { padding:20px 16px 32px; }
  .demo-app .demo-notice { font-size:14px; padding:12px; gap:8px; }
  .demo-app .demo-notice>a { font-size:14px; margin:0 0 0 22px; }
  .demo-app h1 { font-size:28px; }
  .demo-app .page-intro>div>p:last-child { font-size:16px; }
  .demo-app .page-intro p br { display:none; }
  .experience-bar { padding:18px; }
  .scenario-heading { flex-direction:column; gap:0; }
  .scenario-heading h2 { font-size:19px; }
  .scenario-heading p { margin-bottom:6px; font-size:14px; }
  .scenario-heading>.text-button { margin-bottom:10px; }
  .scenario-option { grid-template-columns:22px 1fr; gap:1px 8px; }
  .scenario-option>span { grid-row:span 2; align-self:start; }
  .scenario-option small { justify-self:start; font-size:13px; }
  .experience-steps { display:grid; grid-template-columns:1fr; gap:8px; }
  .demo-app .metrics { grid-template-columns:1fr; gap:10px; margin:20px 0 30px; }
  .demo-app .metric { display:flex; align-items:center; justify-content:space-between; padding:17px 20px; }
  .demo-app .metric>div:first-child { font-size:15px; min-height:0; max-width:52%; }
  .demo-app .metric-bottom { text-align:right; margin:0; display:block; }
  .demo-app .metric-bottom>small { display:none; }
  .demo-app .metric strong { font-size:29px; }
  .demo-app .metric strong small { font-size:15px; }
  .demo-app .section-heading { align-items:flex-end; }
  .demo-app .section-heading h2 { font-size:24px; }
  .demo-app .section-caption { font-size:13px; }
  .demo-app .task-card { padding:20px 18px; gap:12px; }
  .demo-app .task-mark { display:none; }
  .demo-app .task-content { flex-basis:100%; }
  .demo-app .task-content h3 { font-size:22px; }
  .demo-app .task-meta { font-size:13px; }
  .demo-app .task-preview strong, .demo-app .task-preview small { font-size:15px; }
  .demo-app .task-actions { flex-direction:column; align-items:stretch; gap:4px; }
  .demo-app .task-actions .button { width:100%; font-size:16px; }
  .demo-app .task-actions>.text-button { justify-content:center; font-size:14px; }
  .demo-app .bottom-note { padding:20px; }
  .demo-app .bottom-note strong, .demo-app .bottom-note p { font-size:15px; }
  .data-grid { grid-template-columns:1fr; }
  .data-tabs { gap:14px; }
  .data-tabs>button { font-size:15px; padding:13px 3px; }
  .data-card { padding:22px; }
  .demo-app .data-card h3 { font-size:21px; }
  .data-facts { font-size:15px; }
  .guide-hero { margin:26px 0; padding:24px; }
  .guide-hero h1 { font-size:28px; }
  .guide-hero>p:not(.eyebrow) { font-size:16px; }
  .guide-hero p br { display:none; }
  .guide-hero>.button { width:100%; }
  .guide-section, .guide-card { padding:23px; }
  .capability-section>div { grid-template-columns:1fr; gap:15px; }
  .demo-app .history-item strong { font-size:17px; }
  .demo-app .history-item p { font-size:15px; }
  .demo-app .history-item small { font-size:13px; }
  .demo-app .settings-card { padding:23px; }
  .demo-app dialog { padding:22px; max-height:calc(100dvh - 24px); max-width:calc(100vw - 20px); }
  .demo-app dialog h2 { font-size:23px; }
  .demo-app .dialog-footer>.button { flex:1 1 100%; font-size:16px; }
  .demo-app .profit-preview>div { font-size:15px; flex-wrap:wrap; gap:3px; }
  .demo-app .profit-preview strong { font-size:22px; }
  .demo-app .recipient-choice { padding:12px 9px; gap:9px; }
  .recipient-choice .recipient-avatar { display:none; }
  .demo-app .recipient-choice small { font-size:14px; }
  .result-next .button { width:100%; }
  .result-diff strong { font-size:23px; }
}
.demo-app .intro-jump { font-size:16px; text-decoration:underline; text-underline-offset:5px; margin-top:-7px; }
.demo-app .suggestions { scroll-margin-top:24px; }
.nav-label-short { display:none; }
@media(max-width:560px) {
  .demo-app .nav-label-full { display:none; }
  .demo-app .nav-label-short { display:inline; }
  .demo-app .nav-link { flex:1 1 auto; justify-content:center; padding:12px 6px; gap:5px; }
  .demo-app .nav-count { min-width:19px; font-size:12px; }
  .demo-app .demo-notice { display:grid; grid-template-columns:18px minmax(0,1fr); gap:5px 8px; }
  .demo-app .demo-notice>.icon { width:17px; align-self:start; margin-top:4px; }
  .demo-app .demo-notice>span { min-width:0; }
  .demo-app .demo-notice>a { grid-column:2; margin:0; justify-self:start; white-space:normal; }
}
.demo-app .task-card.is-done { opacity:1; background:#f3f6ee; }