:root{
  --bg:#f9f9f9;--surface:#ffffff;--surface-soft:#f5f2ff;--text:#111111;--muted:#636363;
  --primary:#2563eb;--secondary:#7c3aed;--border:#d9dce6;--error:#a3233e;
  --gradient:linear-gradient(135deg,#2563eb,#7c3aed);
  --font:-apple-system,"Segoe UI",Roboto,system-ui,Arial,sans-serif;
  --h1:clamp(2rem,4.6vw,3rem);--h2:clamp(1.5rem,3vw,2.1rem);
  --wide:80rem;--reading:51.25rem;--composer:44rem;
  --gutter:clamp(1.25rem,4vw,4rem);--section-space:clamp(3rem,7vw,6rem);--gap:clamp(1rem,2.2vw,2rem);
  --radius-sm:8px;--radius:14px;--radius-lg:22px;--radius-pill:999px;
  --shadow-sm:0 2px 8px rgb(15 23 42 / 6%);--shadow:0 16px 40px rgb(15 23 42 / 8%);
  --control-min:44px;--motion:180ms;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);font-synthesis:none;line-height:1.6}
a{color:var(--primary)}
h1,h2,h3{line-height:1.2;font-weight:700;margin:0}
p{margin:0;line-height:1.7}
.eyebrow,.badge{font-size:10px;font-weight:bold;letter-spacing:2px}
.eyebrow.centered{text-align:center;display:block;color:var(--secondary)}
.badge{border:1px solid var(--border);border-radius:var(--radius-pill);padding:11px 16px;color:var(--muted);white-space:nowrap}
.muted{font-size:12px;color:var(--muted)}
button{font:inherit;cursor:pointer;border:0;border-radius:var(--radius);padding:13px 20px;background:var(--gradient);color:#fff;font-size:14px;line-height:1.4;box-shadow:var(--shadow-sm);min-height:var(--control-min);transition:filter var(--motion)}
button:hover{filter:brightness(.92)}
button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
input:focus-visible,button:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* header */
.site-header{display:flex;align-items:center;gap:24px;max-width:var(--wide);margin:0 auto;padding:22px var(--gutter)}
.brand{color:inherit;text-decoration:none;display:inline-block}
.brand img{display:block;height:32px;width:auto}
.brand span{display:block;font-size:9px;letter-spacing:2.5px;margin-top:6px;color:var(--muted);font-weight:600}
.site-nav{display:flex;align-items:center;gap:20px;margin-left:auto;flex-wrap:wrap}
.site-nav a{color:var(--text);text-decoration:none;font-size:14px;font-weight:600;min-height:var(--control-min);display:inline-flex;align-items:center}
.site-nav a:hover{color:var(--primary)}
.nav-cta{padding:11px 18px;font-size:13px;margin:0}

/* hero */
main{max-width:var(--wide);margin:0 auto}
.hero{text-align:center;padding:10px var(--gutter) var(--section-space)}
.hero h1{font-size:var(--h1);letter-spacing:-1px;max-width:var(--reading);margin:18px auto 0}
.hero h1 em{font-style:normal;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.subtitle{font-size:18px;color:var(--muted);max-width:40rem;margin:18px auto 0}
.wave{display:block;margin:22px auto 0}
.workspace{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;max-width:var(--composer);margin:26px auto 0;text-align:left;min-height:520px;display:flex;flex-direction:column}
.chat-header{display:flex;align-items:center;gap:12px;padding:22px;border-bottom:1px solid #f0eaf5}
.avatar{background:var(--gradient);width:44px;height:44px;border-radius:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.avatar img{display:block;width:24px;height:auto}
.chat-header small{display:block;color:var(--muted);font-size:11px;margin-top:4px}
#progress{margin-left:auto;font-size:10px;color:var(--secondary);background:var(--surface-soft);padding:8px 12px;border-radius:var(--radius-pill)}
.stats{display:flex;justify-content:center;gap:clamp(20px,5vw,48px);margin:28px auto 0;flex-wrap:wrap}
.stats div{text-align:center}
.stats strong{display:block;font-size:22px;letter-spacing:-1px}
.stats span{font-size:10px;color:var(--muted)}

/* chat card body */
#catalog-chat{padding:22px;min-width:0}
.chat-intro{font-size:14px;color:var(--muted);margin-top:10px}
#chat-form label{display:block;font-size:12px;color:var(--secondary);margin:14px 0 6px;font-weight:600}
.composer{display:flex;gap:8px;align-items:center}
.composer input{min-width:0;width:100%;padding:14px;border:1px solid var(--border);border-radius:var(--radius);font:inherit;font-size:14px;margin:0;min-height:var(--control-min)}
.composer input:focus-visible{border-color:var(--primary)}
.composer button{flex-shrink:0;margin:0}
#chat-results{max-height:440px;overflow-y:auto;overflow-wrap:anywhere;margin-top:14px}
.bubble{font-size:14px;line-height:1.75;background:var(--surface-soft);border-radius:4px 18px 18px 18px;padding:18px;margin:0}
.catalog-answer{white-space:pre-line}
.catalog-card{border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin:12px 0;font-size:13px}
.catalog-card h3{margin:0 0 6px;font-size:14px}
.catalog-card p{margin:6px 0}
.catalog-card a{font-size:12px}
.suggestions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.suggestions button{font-size:12px;background:var(--surface-soft);color:var(--secondary);box-shadow:none;padding:10px 16px;border-radius:var(--radius-pill);margin:0;border:1px solid transparent;min-height:var(--control-min);transition:border-color var(--motion)}
.suggestions button:hover{filter:none;background:var(--surface-soft);border-color:#c9b8e0}
#chat-status{font-size:12px;color:var(--secondary);min-height:18px;margin-top:8px}
#demo-panel{border-top:1px solid #eee}
#demo-panel>summary{cursor:pointer;padding:18px 22px;font-size:13px;color:var(--secondary);min-height:var(--control-min);display:flex;align-items:center}
.catalog-card summary{cursor:pointer}
#guide-progress{padding:0 22px}
#guide-steps{display:flex;flex-wrap:wrap;gap:6px;padding:10px 22px 18px;list-style:none;margin:0}
#guide-steps li{font-size:10px;padding:6px 8px;border-radius:var(--radius-sm);background:var(--surface-soft);color:#84768e}
#guide-steps .current{background:var(--gradient);color:#fff}
#guide-steps .completed{background:#e7f2eb;color:#326245}
.chat-footer{padding:18px 22px;border-top:1px solid #f2edf7;font-size:10px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.text-button{display:inline-flex;align-items:center;min-height:var(--control-min);font-size:11px;color:var(--secondary);padding:0;background:none;box-shadow:none;margin:0}
.text-button:hover{filter:none;background:none;text-decoration:underline}

/* features */
.features{padding:var(--section-space) var(--gutter);text-align:center}
.features h2,.steps h2,.help h2,.cta h2{font-size:var(--h2);margin-bottom:var(--gap)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);text-align:left;margin-top:8px}
.feature-grid article{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}
.feature-grid h3{font-size:16px;margin-bottom:8px}
.feature-grid p{font-size:14px;color:var(--muted)}

/* three steps */
.steps{padding:0 var(--gutter) var(--section-space);text-align:center}
.steps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);list-style:none;margin:8px 0 0;padding:0;text-align:left}
.steps-row li{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--gradient);color:#fff;font-weight:700;font-size:14px;margin-bottom:12px}
.steps-row h3{font-size:16px;margin-bottom:6px}
.steps-row p{font-size:14px;color:var(--muted)}

/* help */
.help{padding:0 var(--gutter) var(--section-space);max-width:var(--reading);margin:0 auto;text-align:center}
.help details{text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-top:12px}
.help summary{cursor:pointer;font-weight:600;font-size:14px;min-height:var(--control-min);display:flex;align-items:center}
.help details p{margin-top:10px;font-size:14px;color:var(--muted)}

/* cta */
.cta{margin:0 var(--gutter) var(--section-space);padding:clamp(32px,6vw,56px);background:var(--surface-soft);border-radius:var(--radius-lg);text-align:center}
.cta p{color:var(--muted);margin:0 auto 20px;max-width:34rem}

/* footer */
.site-footer{max-width:var(--wide);margin:0 auto;padding:28px var(--gutter) 40px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.site-footer img{display:block;height:26px;width:auto}
.site-footer p{font-size:12px;color:var(--muted);max-width:26rem;margin-top:10px}
.site-footer nav{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.site-footer nav a{font-size:12px;text-decoration:none;color:var(--muted);min-height:var(--control-min);display:inline-flex;align-items:center}
.site-footer nav a:hover{color:var(--primary)}

@media(max-width:980px){
  .feature-grid,.steps-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .site-header{flex-wrap:wrap;padding:18px var(--gutter)}
  .site-nav{width:100%;justify-content:flex-start}
  .feature-grid,.steps-row{grid-template-columns:1fr}
  .composer{flex-wrap:wrap}
  .composer button{width:100%}
  .hero h1{letter-spacing:-.5px}
  .site-footer{flex-direction:column}
}