html,body{background:#fafbf8!important;color:#304d48;font-family:system-ui,sans-serif}
#feature-demo{max-width:860px;padding:20px;margin:0 auto}
#feature-demo *{box-sizing:border-box}
#feature-demo header{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:24px;font-size:12px}
#feature-demo .eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#637c74}
#feature-demo a{color:#236c68;text-decoration:none}
#feature-demo .feature-layout{display:grid;grid-template-columns:minmax(180px,1fr) minmax(300px,406px);gap:28px;align-items:start}
#feature-demo .explanation{padding-top:18px}
#feature-demo h1{font-weight:500;font-size:25px;letter-spacing:-.6px;line-height:1.2;margin:15px 0}
#feature-demo p{font-size:14px;line-height:1.6;color:#567069}
#feature-demo select{max-width:100%;padding:8px;border:1px solid #d8e1da;border-radius:6px;background:transparent;color:#304d48}
#feature-demo .demo-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
#feature-demo button{min-height:44px;padding:9px 16px;border:1px solid #d5e0d9;border-radius:24px;color:#246963;background:transparent;font:inherit;font-size:13px}
#feature-demo #show-demo{background:#246963;color:white;border-color:#246963}
#feature-demo button:disabled{opacity:.65;cursor:default}
#feature-demo #demo-step{min-height:66px;color:#246963}
#feature-demo .demo-note{font-size:11px;color:#73867f;border-top:1px solid #e0e6df;padding-top:14px;margin-top:18px}
#feature-demo iframe{width:100%;height:766px;border:0;border-radius:20px;background:#f4f5f1}
#feature-demo[data-feature=topics] iframe,#feature-demo[data-feature=search] iframe,#feature-demo[data-feature=curated] iframe{height:710px}
@media(max-width:620px){#feature-demo{padding:14px}#feature-demo .feature-layout{grid-template-columns:1fr;gap:12px}#feature-demo .explanation{padding:0}#feature-demo h1{font-size:22px;margin:10px 0}#feature-demo .demo-actions{margin-top:12px}#feature-demo #demo-step{min-height:0;margin:12px 0}#feature-demo .demo-note{margin:12px 0;padding-top:10px}#feature-demo iframe{max-width:406px;justify-self:center}}
/* Embedding crops a real portrait viewport. Never rearrange the app to fit. */
#feature-demo .phone-window{min-width:0;width:100%;max-width:406px;justify-self:center}
#feature-demo iframe,#feature-demo[data-feature] iframe{display:block;height:794px}
#feature-demo .window-hint{display:none}
#feature-demo[data-windowed=true]{padding:8px 12px;max-width:none}
#feature-demo[data-windowed=true] header,#feature-demo[data-windowed=true] .explanation>p,#feature-demo[data-windowed=true] #feature-picker{display:none}
#feature-demo[data-windowed=true] .feature-layout{display:block}
#feature-demo[data-windowed=true] .explanation{max-width:406px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 8px;min-height:40px}
#feature-demo[data-windowed=true] h1{font-size:15px;margin:0;line-height:1.3}
#feature-demo[data-windowed=true] .demo-actions{margin:0;flex-wrap:nowrap;gap:5px}
#feature-demo[data-windowed=true] button{min-height:32px;padding:5px 12px;font-size:12px}
#feature-demo[data-windowed=true] .phone-window{margin:0 auto}
#feature-demo[data-windowed=true] iframe{height:calc(100dvh - 86px);min-height:160px;max-height:794px;border-radius:12px}
#feature-demo[data-windowed=true] .window-hint{display:block;margin:6px 0 0;font-size:11px;text-align:center;line-height:1.4}
@media(max-width:450px){#feature-demo[data-windowed=true] h1{font-size:13px}#feature-demo[data-windowed=true] button{padding:5px 9px}#feature-demo[data-windowed=true]{padding:6px}}