:root {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172033;
  background: #f7faf8;
  font-synthesis: none;
  --green: #169447;
  --green-dark: #0f7437;
  --green-soft: #eaf8ef;
  --line: #dfe7e3;
  --muted: #6f7b8d;
  --panel: #ffffff;
  --shadow: 0 14px 40px rgba(31, 63, 45, .08);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #f7faf8; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }

.brand { display: flex; align-items: center; gap: 12px; min-width: 190px; }
.brand-mark { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, #20b663, #0d7437); display: grid; place-items: center; color: white; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.brand strong { display:block; font-size: 18px; }
.brand span { display:block; color: var(--muted); font-size: 12px; margin-top: 2px; }

.btn { border: 1px solid transparent; border-radius: 10px; min-height: 42px; padding: 0 16px; background: #fff; color: #172033; font-weight: 600; transition: .18s ease; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--green); color:#fff; box-shadow: 0 8px 18px rgba(22,148,71,.17); }
.btn-primary:hover { background: var(--green-dark); }
.btn-outline { border-color: #25a85a; color: #168245; background:#fff; }
.btn-light { background:#fff; border-color: var(--line); }
.btn-lg { min-height: 50px; padding: 0 22px; border-radius: 12px; }
.full-button { width:100%; }
.text-button { border:0; background:transparent; color:#168245; padding:8px 0; font-weight:600; }
.icon-button { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:#fff; }

.landing { min-height:100vh; background: radial-gradient(circle at 75% 15%, #e8fbef 0, transparent 34%), #fbfdfc; }
.landing-nav { height:88px; padding:0 clamp(24px,6vw,90px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #edf1ef; }
.nav-actions { display:flex; gap:10px; }
.hero { max-width:1350px; margin:0 auto; padding:80px 50px 60px; display:grid; grid-template-columns: .95fr 1.05fr; gap:70px; align-items:center; }
.eyebrow { display:inline-block; padding:8px 12px; background:var(--green-soft); color:#137b3d; border-radius:999px; font-size:13px; font-weight:700; }
.hero h1 { font-size: clamp(46px,5vw,72px); line-height:1.05; letter-spacing:-.045em; margin:22px 0; }
.hero h1 span { color:var(--green); }
.hero p { font-size:19px; line-height:1.65; color:#5f6d7c; max-width:650px; }
.hero-actions { display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
.hero-trust { display:flex; gap:20px; margin-top:22px; flex-wrap:wrap; color:#6b7786; font-size:13px; }
.hero-preview { position:relative; }
.preview-window { background:#fff; border:1px solid #dfe9e3; border-radius:24px; box-shadow:0 30px 80px rgba(24,78,46,.13); padding:20px; transform:rotate(-1deg); }
.preview-top { display:flex; gap:7px; margin-bottom:18px; }
.preview-top span { width:9px; height:9px; border-radius:50%; background:#d8dfdc; }
.preview-title { display:flex; justify-content:space-between; align-items:center; padding:0 4px 14px; }
.preview-title span { font-size:12px; color:#178344; background:#eaf8ef; border-radius:20px; padding:6px 9px; }
.mini-grid { display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(4,88px) repeat(2,72px); gap:7px; }
.mini-card { border:1px solid #e2e7e5; border-radius:9px; padding:9px; font-size:10px; overflow:hidden; background:#fff; }
.mini-card b { display:block; margin:4px 0 8px; font-size:9px; }
.mini-card i { display:block; height:4px; border-radius:4px; background:#e7ecea; margin:5px 0; }
.mini-8{grid-column:1;grid-row:1/5;background:#f0fbf3}.mini-7{grid-column:2;grid-row:1/3;background:#fff8ea}.mini-6{grid-column:2;grid-row:3/5;background:#f6f0ff}.mini-2{grid-column:3;grid-row:1/5;background:#edf6ff}.mini-4{grid-column:4;grid-row:1/3;background:#fbf1ff}.mini-3{grid-column:4;grid-row:3/5;background:#fff7e9}.mini-1{grid-column:5;grid-row:1/5;background:#f1fbf4}.mini-9{grid-column:1/4;grid-row:5/7;background:#fff1f2}.mini-5{grid-column:4/6;grid-row:5/7;background:#eef6ff}
.steps-strip { max-width:1100px; margin:0 auto 50px; display:grid; grid-template-columns:repeat(3,1fr); background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.steps-strip > div { display:flex; gap:14px; padding:22px 28px; align-items:center; border-right:1px solid var(--line); }
.steps-strip > div:last-child { border-right:0; }
.steps-strip b { width:34px;height:34px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center; }
.steps-strip strong,.steps-strip small { display:block; }
.steps-strip small { color:var(--muted); margin-top:4px; }

.topbar { height:82px; background:#fff; border-bottom:1px solid var(--line); display:grid; grid-template-columns:270px 1fr auto; align-items:center; padding:0 24px; position:sticky; top:0; z-index:20; }
.topbar-center { display:flex; align-items:center; justify-content:center; gap:12px; color:var(--muted); }
.demo-pill { background:var(--green-soft); color:#137e3f; padding:8px 13px; border-radius:10px; font-weight:700; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.avatar { width:42px;height:42px;border-radius:50%;background:#e7f4ff;color:#1969ba;display:grid;place-items:center;font-weight:700; }

.center-page { min-height:calc(100vh - 82px); display:grid; place-items:center; padding:40px 20px; }
.profile-card { width:min(720px,100%); background:#fff; border:1px solid var(--line); border-radius:22px; padding:36px; box-shadow:var(--shadow); }
.section-kicker { color:#148341; font-size:12px; font-weight:800; letter-spacing:.06em; }
.profile-card h2,.question-title h2 { font-size:30px; letter-spacing:-.025em; margin:10px 0; }
.profile-card > p,.question-title p { color:var(--muted); line-height:1.6; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:28px 0 18px; }
.form-grid label,.modal label { display:flex; flex-direction:column; gap:8px; font-weight:600; font-size:13px; }
.full-field { grid-column:1/-1; }
.form-grid input,.form-grid select,.modal input { height:48px; border:1px solid #d9e1dd; border-radius:10px; padding:0 13px; outline:none; background:#fff; }
.form-grid input:focus,.form-grid select:focus,.modal input:focus { border-color:#30a761; box-shadow:0 0 0 3px #e9f8ef; }
.form-grid em { color:#8d98a6;font-weight:400; }
.profile-note { background:#eff9f2; padding:13px 15px; border-radius:10px; color:#44705a; font-size:13px; margin-bottom:20px; }

.workspace { display:grid; grid-template-columns:285px 1fr 280px; min-height:calc(100vh - 82px); max-width:1680px; margin:auto; }
.sidebar,.answer-panel { background:#fff; padding:24px 20px; }
.sidebar { border-right:1px solid var(--line); }
.answer-panel { border-left:1px solid var(--line); }
.business-summary { display:flex; gap:12px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.business-icon { width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#caa35b,#2a2114);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:800; }
.business-summary strong,.business-summary small,.business-summary span { display:block; }
.business-summary small { color:var(--muted); margin:4px 0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:175px; }
.business-summary span { width:max-content; font-size:11px; color:#1a8146; background:#eaf8ef; padding:4px 7px;border-radius:6px; }
.progress-block { padding:22px 0; }
.progress-label { display:flex; justify-content:space-between; font-size:12px; }
.progress-label span { color:#5d6980; font-weight:700; }
.progress { height:7px; background:#edf1ef; border-radius:999px; overflow:hidden; margin:10px 0 7px; }
.progress i { height:100%; display:block; background:var(--green); border-radius:999px; }
.progress-block small { color:var(--muted); }
.section-nav { display:flex; flex-direction:column; gap:3px; margin-bottom:18px; }
.section-nav button { min-height:41px; border:0; background:transparent; display:grid; grid-template-columns:28px 1fr 18px; align-items:center; text-align:left; gap:8px; color:#445067; border-radius:8px; padding:4px 8px; }
.section-nav button.active { background:#eaf8ef; color:#137d3e; font-weight:700; }
.step-dot { width:24px;height:24px;border-radius:50%;border:1px solid #cfd8d4;display:grid;place-items:center;font-size:11px; }
.section-nav button.active .step-dot { background:var(--green);color:#fff;border-color:var(--green); }
.section-nav button b { color:var(--green); }
.help-card { margin-top:24px; background:#eef7ff; border-radius:10px; padding:14px; display:flex; gap:9px; font-size:12px; }
.help-card b,.help-card small{display:block}.help-card small{color:#647185;margin-top:4px;line-height:1.45}

.question-panel { padding:28px 34px 0; background:#fbfdfc; min-width:0; }
.question-head { display:flex; justify-content:space-between; }
.question-title { margin:22px 0 24px; }
.question-title h2 { font-size:32px; }
.option-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.choice-card { min-height:78px; border:1px solid #dfe6e3; background:#fff; border-radius:11px; display:grid; grid-template-columns:22px 32px 1fr; gap:10px; align-items:center; text-align:left; padding:12px; font-size:13px; font-weight:600; color:#263145; }
.choice-card:hover { border-color:#7ac79a; }
.choice-card.selected { border-color:#24a659; background:#f2fbf5; box-shadow:0 0 0 1px rgba(36,166,89,.1); }
.fake-check { width:18px;height:18px;border:1px solid #c9d4cf;border-radius:4px;display:grid;place-items:center;color:#fff;font-size:12px; }
.choice-card.selected .fake-check { background:var(--green);border-color:var(--green); }
.choice-emoji { font-size:20px; }
.custom-card { min-height:78px; border:1px dashed #58b77b; border-radius:11px; background:#f8fdfa; display:grid; grid-template-columns:28px 1fr auto; align-items:center; padding:12px; gap:8px; }
.custom-card .plus { color:#15904a;font-size:26px; }
.custom-card input { min-width:0; border:0; background:transparent; outline:0; }
.custom-card button { border:0;background:var(--green);color:#fff;border-radius:7px;padding:8px 10px;font-size:11px;font-weight:700; }
.custom-list { margin-top:20px; border:1px solid var(--line); background:#fff; border-radius:12px; padding:14px; font-size:12px; }
.custom-list > div { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.custom-list span { background:#f1f4f3; border-radius:999px; padding:8px 10px; }
.custom-list button { border:0;background:transparent;margin-left:7px;color:#738075; }
.tip-box { margin-top:18px; background:#eaf8ef; border:1px solid #c8edd6; color:#42705a; padding:13px 15px; border-radius:10px; font-size:12px; }
.wizard-footer { position:sticky; bottom:0; margin:28px -34px 0; padding:18px 34px; background:#fff; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; z-index:4; }
.wizard-footer span { color:#6c7786; font-size:13px; }
.answer-card,.info-card { border:1px solid var(--line); border-radius:13px; padding:18px; }
.answer-title { display:flex; justify-content:space-between; align-items:center; }
.answer-title span { width:26px;height:26px;border-radius:50%;background:#dff5e7;color:#168344;display:grid;place-items:center;font-weight:700;font-size:12px; }
.answer-card > small { color:var(--muted); display:block; margin:8px 0 14px; }
.answer-card ul,.bmc-card ul { list-style:none; padding:0; margin:0; }
.answer-card li { position:relative; padding:8px 0 8px 18px; font-size:13px; border-bottom:1px solid #f1f3f2; }
.answer-card li:before { content:'•'; color:var(--green); position:absolute; left:2px; font-size:20px; line-height:14px; }
.answer-card li.muted { color:#98a1ae; }
.info-card { margin-top:16px; display:flex; gap:10px; }
.icon-badge { width:38px;height:38px;border-radius:10px;background:#eaf8ef;display:grid;place-items:center;flex:none; }
.info-card p { color:var(--muted); font-size:12px; line-height:1.55; margin:7px 0 0; }

.canvas-layout { display:grid; grid-template-columns:235px 1fr; min-height:calc(100vh - 82px); }
.main-nav { background:#fff; border-right:1px solid var(--line); padding:22px 15px; display:flex; flex-direction:column; }
.nav-menu { display:flex; flex-direction:column; gap:6px; }
.nav-menu button { border:0;background:transparent;border-radius:8px;padding:12px;text-align:left;color:#3f4b61;display:flex;gap:12px; }
.nav-menu button.active { background:#eaf8ef;color:#168044;font-weight:700; }
.save-box { margin-top:auto; border:1px solid var(--line); border-radius:12px; padding:14px; background:#fff; }
.save-box p { font-size:12px;line-height:1.5;color:var(--muted); }
.save-box .btn { width:100%; }
.mini-progress { margin-top:12px; border:1px solid var(--line);border-radius:10px;padding:12px;font-size:11px; }
.mini-progress > span { margin-right:8px; }
.canvas-main { min-width:0; background:#fbfdfc; padding:0 26px 30px; }
.canvas-toolbar { min-height:86px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); gap:20px; }
.canvas-toolbar h2 { margin:0 0 5px; }
.canvas-toolbar small { color:var(--muted); }
.toolbar-actions { display:flex; gap:10px; }
.download-wrap { position:relative; }
.download-menu { position:absolute; right:0; top:49px; width:210px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:10px; padding:7px; z-index:10; }
.download-menu button { width:100%; border:0;background:#fff;border-radius:8px;padding:11px;text-align:left; }
.download-menu button:hover { background:#f2f7f4; }
.download-menu b,.download-menu span{display:block}.download-menu span{font-size:11px;color:var(--muted);margin-top:3px}
.tabs { height:58px; display:flex; gap:24px; align-items:flex-end; }
.tabs button { border:0;background:transparent;padding:16px 4px 14px;color:#687386; }
.tabs button.active { color:#188246;border-bottom:3px solid var(--green);font-weight:700; }
.canvas-heading { display:flex;align-items:end;justify-content:space-between;margin:26px 0 16px; }
.canvas-heading h3 { margin:6px 0 0;font-size:24px; }
.bmc-export { background:#fff; border:1px solid #dce5e0; border-radius:13px; padding:14px; box-shadow:0 8px 30px rgba(20,55,38,.05); }
.export-header,.export-footer { display:flex;justify-content:space-between;align-items:center;padding:8px 6px 15px; }
.export-header strong { display:block;font-size:20px; }.export-header span{display:block;color:var(--green);font-weight:700;margin-top:3px}.export-header small{display:block;color:var(--muted);text-align:right}.export-header b{display:block;margin-top:3px;text-align:right}
.bmc-grid { display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(4,minmax(105px,auto)) repeat(2,minmax(90px,auto)); gap:8px; }
.bmc-card { border:1px solid #dce4e0;border-radius:9px;padding:12px;position:relative;overflow:hidden; }
.bmc-card-head { display:flex;gap:7px;align-items:center;margin-bottom:9px;font-size:12px; }
.bmc-card li { font-size:11px;line-height:1.45;padding:3px 0 3px 13px;position:relative; }
.bmc-card li:before{content:'•';position:absolute;left:2px;color:#4b5b52}.bmc-card li.empty{color:#97a19b;font-style:italic}.edit-dot{position:absolute;right:7px;bottom:7px;width:26px;height:26px;border-radius:50%;border:1px solid #dce4e0;background:#fff;color:#415247}
.bmc-keyPartners{grid-column:1;grid-row:1/5;background:#f2fbf5}.bmc-keyActivities{grid-column:2;grid-row:1/3;background:#fff8ea}.bmc-keyResources{grid-column:2;grid-row:3/5;background:#f7f1ff}.bmc-valueProposition{grid-column:3;grid-row:1/5;background:#eef6ff}.bmc-customerRelationships{grid-column:4;grid-row:1/3;background:#fbf2ff}.bmc-channels{grid-column:4;grid-row:3/5;background:#fff8ea}.bmc-customerSegments{grid-column:5;grid-row:1/5;background:#f2fbf5}.bmc-costStructure{grid-column:1/4;grid-row:5/7;background:#fff3f3}.bmc-revenueStreams{grid-column:4/6;grid-row:5/7;background:#eef7ff}
.export-footer { padding:12px 6px 1px; color:#7c8780;font-size:10px; }
.answers-review { display:flex;flex-direction:column;gap:10px;margin-top:22px; }
.answers-review > div { background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:start; }
.answers-review p{margin:5px 0 0;color:var(--muted);font-size:12px}.answers-review button{border:0;background:#eaf8ef;color:#168144;border-radius:7px;padding:7px 10px}

.modal-backdrop { position:fixed; inset:0; background:rgba(16,28,22,.45); z-index:100; display:grid; place-items:center; padding:20px; backdrop-filter:blur(2px); }
.modal { width:min(460px,100%); background:#fff; border-radius:18px; padding:30px; box-shadow:0 30px 90px rgba(0,0,0,.2); position:relative; }
.modal-close { position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:25px;color:#68756e; }
.modal-logo { margin-bottom:15px; }
.modal h3 { font-size:23px;margin:8px 0; }.modal p{color:var(--muted);line-height:1.55;font-size:13px;margin-bottom:20px}.modal label{margin:12px 0}.modal-note{display:block;text-align:center;color:#8b949f;margin-top:13px;line-height:1.4}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#123d27;color:#fff;padding:12px 18px;border-radius:10px;z-index:200;box-shadow:var(--shadow);font-size:13px}

@media (max-width: 1180px) {
  .workspace { grid-template-columns:230px 1fr; }
  .answer-panel { display:none; }
  .option-grid { grid-template-columns:repeat(2,1fr); }
  .canvas-layout { grid-template-columns:72px 1fr; }
  .main-nav .nav-menu span,.save-box,.mini-progress { display:none; }
  .nav-menu button { justify-content:center; font-size:19px; }
}

@media (max-width: 780px) {
  .landing-nav { padding:0 18px; }.landing-nav .brand span,.nav-actions .btn-light{display:none}.landing-nav .brand{min-width:0}.hero{grid-template-columns:1fr;padding:55px 20px 35px;gap:35px}.hero h1{font-size:46px}.hero p{font-size:16px}.steps-strip{margin:0 20px 30px;grid-template-columns:1fr}.steps-strip>div{border-right:0;border-bottom:1px solid var(--line)}.steps-strip>div:last-child{border-bottom:0}.topbar{grid-template-columns:1fr auto;padding:0 14px}.topbar-center{display:none}.topbar .brand{min-width:0}.topbar .brand span{display:none}.topbar-actions .btn{display:none}.form-grid{grid-template-columns:1fr}.full-field{grid-column:auto}.profile-card{padding:25px 20px}.workspace{display:block}.sidebar{display:none}.question-panel{padding:22px 16px 0}.question-title h2{font-size:26px}.option-grid{grid-template-columns:1fr}.wizard-footer{margin:24px -16px 0;padding:14px 16px}.wizard-footer span{display:none}.canvas-layout{display:block}.main-nav{display:none}.canvas-main{padding:0 12px 24px}.canvas-toolbar{align-items:flex-start;padding:15px 0;flex-direction:column}.toolbar-actions{width:100%;}.toolbar-actions .btn{flex:1}.tabs{height:50px}.canvas-heading{align-items:flex-start;gap:8px}.canvas-heading .btn{font-size:11px;padding:0 10px}.bmc-export{overflow-x:auto}.bmc-grid{display:flex;flex-direction:column;min-width:0}.bmc-card{min-height:125px}.export-header{min-width:0}.hero-preview{overflow:hidden}.preview-window{min-width:650px;transform:scale(.78) rotate(-1deg);transform-origin:left top;margin-bottom:-100px}.modal{padding:25px 20px}}

@media print {
  body * { visibility:hidden !important; }
  .bmc-export,.bmc-export * { visibility:visible !important; }
  .bmc-export { position:absolute; left:0; top:0; width:100%; border:0; box-shadow:none; }
  .no-export { display:none !important; }
}

/* Static app additions */
.download-modal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0; }
.download-modal-grid button { border:1px solid var(--line); background:#fff; border-radius:12px; padding:18px 12px; text-align:center; }
.download-modal-grid button:hover { border-color:#25a85a; background:#f4fbf6; }
.download-modal-grid b,.download-modal-grid span{display:block}.download-modal-grid span{font-size:11px;color:var(--muted);margin-top:5px}
.modal-actions { display:flex; gap:10px; margin-top:18px; }
.modal-actions .btn { flex:1; }
.canvas-download-note { margin:14px 0 0; background:#eff9f2; border:1px solid #d1eedc; color:#48735b; border-radius:9px; padding:10px 12px; font-size:12px; }
@media (max-width:780px){.download-modal-grid{grid-template-columns:1fr}.modal-actions{flex-direction:column}}