.qci-widget, .qci-widget * { box-sizing: border-box; }
.qci-widget { --qci-navy:#08192f; --qci-steel:#143d63; --qci-teal:#0c6175; --qci-cyan:#06b6d4; --qci-ice:#e9f8ff; --qci-paper:#eef6fb; --qci-slate:#334155; --qci-muted:#64748b; --qci-border:#dbe6ef; --qci-card:#ffffff; --qci-emerald:#10b981; --qci-amber:#f59e0b; --qci-red:#b91c1c; color:#0f172a; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height:1.5; width:100%; }
.qci-widget p, .qci-widget h1, .qci-widget h2, .qci-widget h3 { margin:0; }
.qci-widget button { font-family: inherit; }
.qci-loading { padding: 28px; border: 1px solid var(--qci-border); border-radius: 20px; background: #fff; color: var(--qci-slate); font-weight: 800; text-align: center; }
.qci-error { margin: 14px 0; padding: 14px 16px; border-radius: 16px; background: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; font-weight: 800; }
.qci-shell { width:100%; margin:0 auto; background: var(--qci-paper); padding: 20px; border-radius: 22px; }
.qci-frame { overflow:hidden; border:1px solid var(--qci-border); border-radius:32px; background:#fff; box-shadow:0 24px 70px rgba(8,25,47,.18); }
.qci-hero { position:relative; overflow:hidden; color:#fff; background: radial-gradient(circle at 86% 12%, rgba(6,214,255,.25), transparent 28%), radial-gradient(circle at 16% 100%, rgba(16,185,129,.16), transparent 32%), linear-gradient(135deg, var(--qci-navy), var(--qci-steel) 55%, var(--qci-teal)); padding:42px 46px; }
.qci-hero-grid { display:grid; gap:32px; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); align-items:center; }
.qci-badges { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.qci-badge { display:inline-flex; align-items:center; justify-content:center; min-height:28px; border-radius:999px; padding:5px 12px; font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.12); color:#e0fbff; }
.qci-badge.dark { background:#e0f7ff; color:#075985; border-color:#bae6fd; }
.qci-badge.green { background:#d1fae5; color:#065f46; border-color:#a7f3d0; }
.qci-badge.amber { background:#fef3c7; color:#92400e; border-color:#fde68a; }
.qci-eyebrow { font-size:12px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; color:#a5f3fc; margin-bottom:6px; }
.qci-title { font-size: clamp(34px, 5vw, 62px); line-height:1.02; font-weight: 1000; letter-spacing:-.055em; max-width:980px; }
.qci-hero-text { margin-top:20px; max-width:760px; color:#e6fbff; font-size:18px; line-height:1.75; font-weight:600; }
.qci-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:30px; }
.qci-metric { min-width:0; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.1); border-radius:20px; padding:16px; backdrop-filter: blur(12px); }
.qci-metric strong { display:block; font-size:34px; line-height:1; font-weight:1000; }
.qci-metric span { display:block; margin-top:7px; color:#d9fbff; font-size:13px; font-weight:800; }
.qci-claim-card { border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); border-radius:28px; padding:20px; box-shadow:0 18px 45px rgba(0,0,0,.18); backdrop-filter: blur(12px); }
.qci-claim-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.qci-claim-title { font-size:24px; line-height:1.08; font-weight:1000; }
.qci-atom { width:46px; height:46px; flex:0 0 auto; display:grid; place-items:center; border-radius:18px; background:rgba(255,255,255,.15); font-size:27px; }
.qci-claim-stack { display:grid; gap:12px; }
.qci-mini-panel { border-radius:20px; padding:15px; background:rgba(255,255,255,.12); }
.qci-mini-panel.light { background:#fff; color:#0f172a; }
.qci-mini-label { color:#bdf4ff; font-size:13px; font-weight:900; }
.qci-mini-panel.light .qci-mini-label { color:#0e7490; }
.qci-mini-copy { margin-top:5px; font-size:19px; line-height:1.25; font-weight:1000; }
.qci-caution { display:flex; gap:12px; align-items:flex-start; border:1px solid rgba(252,211,77,.32); background:rgba(245,158,11,.13); color:#fff7dc; border-radius:20px; padding:15px; font-size:14px; line-height:1.62; font-weight:650; }
.qci-section { padding:32px 46px; }
.qci-main-grid { display:grid; gap:24px; grid-template-columns:minmax(280px,.88fr) minmax(0,1.12fr); }
.qci-panel { min-width:0; border:1px solid var(--qci-border); border-radius:24px; background:#fff; padding:22px; box-shadow:0 10px 28px rgba(15,23,42,.07); }
.qci-panel.tint { background:#f8fbfd; }
.qci-panel.dark { background:#07111f; border-color:#172033; color:#fff; }
.qci-panel-head { display:flex; gap:12px; align-items:center; margin-bottom:18px; }
.qci-iconbox { width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border-radius:16px; background:#cffafe; color:#0e7490; font-size:23px; }
.qci-panel h2 { font-size: clamp(24px, 3vw, 34px); line-height:1.05; font-weight:1000; letter-spacing:-.035em; }
.qci-panel h3 { font-size:20px; line-height:1.12; font-weight:1000; }
.qci-pathway { display:grid; gap:9px; }
.qci-path-button { width:100%; min-width:0; display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer; border-radius:18px; padding:12px; border:1px solid transparent; background:rgba(255,255,255,.74); color:#0f172a; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease; }
.qci-path-button:hover { transform:translateY(-1px); border-color:#cbd5e1; background:#fff; box-shadow:0 8px 20px rgba(15,23,42,.08); }
.qci-path-button.active { border-color:#67e8f9; background:#fff; box-shadow:0 10px 25px rgba(8,145,178,.16); }
.qci-path-icon { width:42px; height:42px; flex:0 0 auto; border-radius:15px; background:#e2e8f0; color:#475569; display:grid; place-items:center; font-size:22px; }
.qci-path-button.active .qci-path-icon { background:#0891b2; color:#fff; }
.qci-path-text { min-width:0; flex:1; }
.qci-path-label { font-size:14px; font-weight:1000; line-height:1.2; }
.qci-path-status { margin-top:3px; font-size:12px; font-weight:800; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qci-arrow { flex:0 0 auto; color:#94a3b8; font-weight:1000; }
.qci-detail-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:15px; }
.qci-status-pill { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:6px 12px; background:#e0f2fe; color:#075985; border:1px solid #bae6fd; font-size:12px; font-weight:1000; text-transform:uppercase; letter-spacing:.08em; }
.qci-status-pill.green { background:#d1fae5; color:#065f46; border-color:#a7f3d0; }
.qci-status-pill.slate { background:#f1f5f9; color:#475569; border-color:#e2e8f0; }
.qci-clickhint { color:#94a3b8; font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.qci-detail-title { font-size: clamp(26px, 3.3vw, 38px); line-height:1.04; font-weight:1000; letter-spacing:-.045em; color:#020617; }
.qci-detail-short { margin-top:13px; color:#475569; font-size:18px; line-height:1.68; font-weight:760; }
.qci-strength { margin-top:18px; }
.qci-strength-row { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; color:#64748b; font-size:12px; font-weight:1000; letter-spacing:.12em; text-transform:uppercase; }
.qci-bar { height:12px; overflow:hidden; background:#e2e8f0; border-radius:999px; }
.qci-bar-fill { height:100%; width:0; background:linear-gradient(90deg,#06b6d4,#14b8a6,#10b981); border-radius:999px; transition:width .5s ease; }
.qci-detail-box { margin-top:22px; border:1px solid #e2e8f0; background:#f8fafc; border-radius:20px; padding:20px; color:#334155; font-size:16px; line-height:1.75; }
.qci-takeaway { margin-top:18px; border:1px solid #bae6fd; background:linear-gradient(90deg,#ecfeff,#ecfdf5); border-radius:20px; padding:19px; }
.qci-takeaway-label { color:#0e7490; font-size:12px; font-weight:1000; letter-spacing:.14em; text-transform:uppercase; }
.qci-takeaway-copy { margin-top:8px; color:#020617; font-size:20px; line-height:1.25; font-weight:1000; }
.qci-flow-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.qci-flow-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.qci-flow-card { position:relative; min-width:0; border:1px solid var(--qci-border); background:#fff; border-radius:24px; padding:20px; box-shadow:0 8px 22px rgba(15,23,42,.06); }
.qci-flow-top { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
.qci-flow-icon { width:50px; height:50px; border-radius:18px; background:#0f172a; color:#fff; display:grid; place-items:center; font-size:24px; }
.qci-flow-num { color:#e2e8f0; font-size:36px; line-height:1; font-weight:1000; }
.qci-flow-title { color:#020617; font-size:19px; line-height:1.15; font-weight:1000; }
.qci-flow-text { margin-top:10px; color:#64748b; font-size:14px; line-height:1.6; font-weight:650; }
.qci-flow-card:after { content:'›'; position:absolute; right:-14px; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:999px; display:grid; place-items:center; color:#fff; background:#06b6d4; font-size:24px; font-weight:1000; box-shadow:0 8px 18px rgba(6,182,212,.25); }
.qci-flow-card:last-child:after { display:none; }
.qci-bottom-grid { display:grid; gap:24px; grid-template-columns:minmax(0,1fr) minmax(320px,.9fr); }
.qci-myth-list { display:grid; gap:12px; }
.qci-myth { border:1px solid var(--qci-border); background:#f8fafc; border-radius:18px; padding:16px; }
.qci-avoid { color:#b91c1c; font-size:14px; font-weight:1000; }
.qci-use { margin-top:8px; color:#334155; font-size:14px; line-height:1.6; font-weight:700; }
.qci-use strong { color:#047857; }
.qci-mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:18px 0; }
.qci-mode-button { min-width:0; cursor:pointer; border-radius:16px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#ecfeff; padding:12px 10px; font-size:13px; font-weight:1000; transition:background .16s ease, transform .16s ease, color .16s ease; }
.qci-mode-button:hover { transform:translateY(-1px); background:rgba(255,255,255,.12); }
.qci-mode-button.active { background:#67e8f9; border-color:#67e8f9; color:#07111f; }
.qci-caption-box { border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.08); border-radius:24px; padding:20px; }
.qci-caption-title { color:#fff; font-size:24px; line-height:1.18; font-weight:1000; letter-spacing:-.02em; }
.qci-caption-body { margin-top:14px; color:#d8fbff; font-size:15px; line-height:1.75; font-weight:650; }
.qci-credit { margin-top:18px; border-radius:18px; background:rgba(255,255,255,.1); padding:14px; color:#c9f6ff; font-size:13px; line-height:1.45; font-weight:800; }
.qci-copy { margin-top:16px; width:100%; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; border-radius:18px; background:#fff; color:#07111f; padding:14px 16px; font-size:14px; font-weight:1000; box-shadow:0 12px 26px rgba(0,0,0,.18); transition:transform .16s ease; }
.qci-copy:hover { transform:translateY(-1px); }
.qci-footer { border-top:1px solid var(--qci-border); background:#f8fafc; padding:22px 46px; color:#64748b; text-align:center; font-size:14px; line-height:1.6; font-weight:750; }
.qci-hidden { display:none !important; }
@media (max-width: 1040px) { .qci-hero-grid, .qci-main-grid, .qci-bottom-grid { grid-template-columns:1fr; } .qci-flow-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .qci-flow-card:after { display:none; } }
@media (max-width: 720px) { .qci-shell { padding:10px; border-radius:16px; } .qci-frame { border-radius:22px; } .qci-hero, .qci-section, .qci-footer { padding-left:18px; padding-right:18px; } .qci-metrics, .qci-flow-grid, .qci-mode-grid { grid-template-columns:1fr; } .qci-title { font-size:34px; } .qci-hero-text { font-size:16px; } .qci-panel { padding:18px; } }