/* ═══════════════════════════════════════════════════
       INSIGHTS DESIGN SYSTEM v22 — Dashboard + Dark Mode
       Professional SaaS tool aesthetic. Shadows for depth.
       Dark mode via body.dark class toggle.
       Every element earns its space with purpose.
       ═══════════════════════════════════════════════════ */
    :root {
      --bg: #F7F6F3;
      --bg-card: #FFFFFF;
      --bg-elevated: #F0EFEB;
      --border: #E2DFD8;
      --border-hover: #C9C5BB;
      --accent: #1A7756;
      --accent-glow: #1A775510;
      --accent-bright: #1E8C65;
      --accent-light: #E8F5EE;
      --text: #1A1A18;
      --text-dim: #2E2E2C;
      --text-muted: #6B6B66;
      --green: #0E8A5F;
      --green-bg: #E8F8F0;
      --yellow: #B8860B;
      --yellow-bg: #FDF6E3;
      --red: #C53030;
      --red-bg: #FEF2F2;
      --blue: #2B6CB0;
      --blue-bg: #EBF4FF;
      --purple: #7C3AED;
      --purple-bg: #F0EBFF;
      --mono: 'IBM Plex Mono', monospace;
      --sans: 'DM Sans', -apple-system, sans-serif;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
      --shadow-md: 0 2px 8px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
      --shadow-lg: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
      --radius: 12px;
      --radius-sm: 8px;
    }

    /* ── Dark Mode — clean neutral grays, no warm/brown tint ── */
    body.dark {
      --bg: #111111;
      --bg-card: #1A1A1A;
      --bg-elevated: #242424;
      --border: #333333;
      --border-hover: #444444;
      --accent: #2DB87A;
      --accent-glow: #2DB87A18;
      --accent-bright: #38D48F;
      --accent-light: #1A2E24;
      --text: #E8E8E8;
      --text-dim: #C0C0C0;
      --text-muted: #8A8A8A;
      --green: #3FCF8E;
      --green-bg: #162E1F;
      --yellow: #EAA520;
      --yellow-bg: #2E2818;
      --red: #F07070;
      --red-bg: #2E1818;
      --blue: #6CB0E8;
      --blue-bg: #1A2433;
      --purple: #A78BFA;
      --purple-bg: #1E1538;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.18);
      --shadow-md: 0 2px 8px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.22);
      --shadow-lg: 0 4px 16px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.65; -webkit-font-smoothing: antialiased; font-size: 16px; transition: background .3s, color .3s; }

    @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes scan { 0% { top: 0; } 100% { top: 100%; } }
    @keyframes pulse { 0%,100% { opacity:.3; } 50% { opacity:1; } }
    @keyframes ringIn { from { stroke-dashoffset: var(--c); } to { stroke-dashoffset: var(--o); } }

    .fu { animation: fadeUp .45s ease both; }
    .fu1 { animation: fadeUp .45s ease .08s both; }
    .fu2 { animation: fadeUp .45s ease .16s both; }
    .fu3 { animation: fadeUp .45s ease .24s both; }
    .fu4 { animation: fadeUp .45s ease .3s both; }
    .fu5 { animation: fadeUp .45s ease .36s both; }
    .fu6 { animation: fadeUp .45s ease .42s both; }

    .app { position: relative; z-index: 1; min-height: 100vh; }

    /* ── Nav ── */
    .nav { display: flex; justify-content: space-between; align-items: center; padding: 14px 28px;
      border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 100; transition: background .3s; }
    .logo { font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: .14em; color: var(--accent); cursor: pointer;
      display: flex; align-items: center; gap: 9px; }
    .nbtn { font-family: var(--sans); font-weight: 600; font-size: 13px; padding: 8px 18px; border-radius: var(--radius-sm); cursor: pointer; border: none; transition: all .2s; }
    .nbtn-p { background: var(--accent); color: #fff; }
    .nbtn-p:hover { background: var(--accent-bright); }
    .nbtn-g { background: none; color: var(--text-dim); border: 1px solid var(--border); }
    .nbtn-g:hover { border-color: var(--border-hover); color: var(--text); }
    .nbtn-pdf { background: var(--accent); color: #fff; }
    .nbtn-pdf:hover { opacity: 0.9; }

    /* ── Dark Mode Toggle ── */
    .dark-toggle { width: 38px; height: 22px; border-radius: 11px; background: var(--bg-elevated); border: 1px solid var(--border);
      cursor: pointer; position: relative; transition: all .25s; flex-shrink: 0; }
    .dark-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
      background: var(--text-muted); transition: transform .25s, background .25s; }
    body.dark .dark-toggle { background: var(--accent); border-color: var(--accent); }
    body.dark .dark-toggle::after { transform: translateX(16px); background: #fff; }

    .page { max-width: 720px; margin: 0 auto; padding: 0 24px; }

    /* ── Hero / Landing ── */
    .hero { text-align: center; padding: 80px 0 60px; position: relative; }
    .tag { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--accent); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 20px; }
    .hero h1 { font-size: clamp(30px, 4.5vw, 48px); font-weight: 800; line-height: 1.12; margin-bottom: 20px; color: var(--text); }
    .hero-sub { font-size: 17px; color: var(--text-dim); max-width: 520px; margin: 0 auto 40px; line-height: 1.7; }
    .btn-big { display: inline-block; background: var(--accent); color: #fff; padding: 16px 44px; border-radius: var(--radius);
      font-weight: 700; font-size: 16px; cursor: pointer; border: none; font-family: var(--sans); transition: all .2s; box-shadow: var(--shadow-md); }
    .btn-big:hover { background: var(--accent-bright); transform: translateY(-1px); box-shadow: var(--shadow-lg); }

    /* ── Features ── */
    .feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 64px; }
    .fc { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; text-align: left; transition: all .2s; box-shadow: var(--shadow-sm); }
    .fc:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); }
    .fc-icon { font-size: 24px; margin-bottom: 14px; }
    .fc-t { font-weight: 700; font-size: 14px; margin-bottom: 6px; color: var(--text); }
    .fc-d { font-size: 13px; color: var(--text-dim); line-height: 1.55; }

    /* ── Audit Input ── */
    .audit-pg { padding: 56px 0 80px; }
    .audit-pg h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
    .audit-pg .sub { color: var(--text-dim); margin-bottom: 28px; font-size: 15px; }
    .url-in { width: 100%; padding: 16px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
      color: var(--text); font-size: 15px; font-family: var(--mono); outline: none; transition: border-color .2s; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
    .url-in:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
    .url-in::placeholder { color: var(--text-muted); }

    /* ── Industry / Traffic Selectors ── */
    .ind-select { margin: 20px 0 18px; }
    .ind-label { font-size: 14px; color: var(--text-dim); margin-bottom: 10px; font-weight: 600; }
    .ind-options { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
    .ind-btn { font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: var(--radius-sm); cursor: pointer;
      border: 1px solid var(--border); background: var(--bg-card); color: var(--text-dim); transition: all .2s; }
    .ind-btn:hover { border-color: var(--border-hover); color: var(--text); }
    .ind-active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); font-weight: 700; }
    .ts-btn { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 16px; text-align:center; white-space:normal; }
    .ts-label { font-weight:700; font-size:13px; }
    .ts-desc { font-size:11px; font-weight:400; color:var(--text-muted); }
    .audit-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px 32px; text-align:left; margin-top:24px; }
    .audit-grid-full { grid-column:1/-1; }
    @media(max-width:700px) { .audit-grid { grid-template-columns:1fr; } }
    .dm-toggle-nav { font-size:12px; padding:6px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card); color:var(--text-muted); cursor:pointer; transition:all .2s; }
    .dm-toggle-nav:hover { border-color:var(--accent); color:var(--accent); }

    /* Competitor toggle */
    .comp-toggle { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 10px; margin: -4px 0 14px; cursor: pointer;
      font-size: 14px; color: var(--text-dim); font-weight: 600; border-radius: var(--radius-sm); transition: all .2s; }
    .comp-toggle:hover { color: var(--accent); }
    .comp-toggle-icon { font-size: 16px; }
    .comp-toggle-hint { font-weight: 400; color: var(--text-muted); font-size: 12px; }
    .comp-section { margin: -4px 0 14px; }
    .comp-label { font-size: 14px; font-weight: 700; color: var(--text-dim); margin-bottom: 8px; }
    .comp-url-in { margin-bottom: 8px; }
    .comp-remove { font-size: 12px; color: var(--text-muted); cursor: pointer; text-align: right; margin-bottom: 8px; transition: color .2s; }
    .comp-remove:hover { color: var(--red); }
    .btn-audit { width: 100%; padding: 16px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius);
      font-weight: 700; font-size: 16px; cursor: pointer; font-family: var(--sans); transition: all .2s; box-shadow: var(--shadow-md); }
    .btn-audit:hover:not(:disabled) { background: var(--accent-bright); }
    .btn-audit:disabled { background: var(--border); color: var(--text-muted); cursor: not-allowed; box-shadow: none; }
    .priv { text-align: center; margin-top: 12px; font-size: 12px; color: var(--text-muted); }
    .err-box { background: var(--red-bg); border: 1px solid var(--red); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px; color: var(--red); font-size: 14px; }

    /* ── Loading ── */
    .load-pg { text-align: center; padding: 100px 0; }
    .scan-box { position: relative; width: 120px; height: 120px; margin: 0 auto 36px; border: 2px solid var(--border); border-radius: 20px; overflow: hidden;
      box-shadow: var(--shadow-lg); background: var(--bg-card); }
    .scan-line { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: scan 1.8s ease-in-out infinite; }
    .scan-ico { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; }
    .load-pg h2 { font-size: 26px; font-weight: 700; margin-bottom: 10px; }
    .load-pg .sub { color: var(--text-dim); font-size: 16px; margin-bottom: 10px; line-height: 1.65; max-width: 500px; margin-left: auto; margin-right: auto; padding: 0 20px; }
    .load-url { font-family: var(--mono); font-size: 13px; color: var(--text-muted); margin: 18px 0 30px; word-break: break-all; }
    .dots { display: flex; justify-content: center; gap: 8px; }
    .dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1s ease infinite; }
    .dots span:nth-child(2) { animation-delay: .2s; }
    .dots span:nth-child(3) { animation-delay: .4s; }

    .load-timer { margin-top: 20px; opacity: 0; transition: opacity .6s ease; }
    .load-timer.visible { opacity: 1; }
    .load-timer-time { font-family: var(--mono); font-size: 13px; color: var(--text-muted); font-weight: 600; margin-bottom: 6px; }
    .load-timer-msg { font-size: 15px; color: var(--text-dim); line-height: 1.55; transition: opacity .25s ease; }
    .steps { display: flex; justify-content: center; gap: 8px; margin-top: 36px; flex-wrap: wrap; max-width: 720px; margin-left: auto; margin-right: auto; }
    .step { font-size: 12px; font-weight: 600; padding: 8px 16px; border-radius: 6px; font-family: var(--mono); transition: background .3s, color .3s; letter-spacing: .02em; }
    .step-w { background: var(--bg-elevated); color: var(--text-muted); }
    .step-a { background: var(--accent); color: #fff; animation: pulse 1.2s ease infinite; }
    .step-d { background: var(--green-bg); color: var(--green); }

    /* ═══════════════════════════════════════════════════

    /* ═══════════════════════════════════════════════════
       APP SHELL — Sidebar + Workspace layout
       The results page is an APPLICATION, not a document.
       Sidebar is permanent navigation. Workspace swaps views.
       User navigates, they don't scroll through sections.
       ═══════════════════════════════════════════════════ */
    .app-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 100vh; overflow: hidden; }

    /* ── Sidebar ── */
    .sb { background: var(--bg-card); border-right: 1px solid var(--border); padding: 20px 16px;
      display: flex; flex-direction: column; overflow-y: auto; }
    .sb-logo { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 700;
      font-size: 13px; letter-spacing: .12em; color: var(--accent); margin-bottom: 4px; cursor: pointer; }
    .sb-url { font-family: var(--mono); font-size: 11px; color: var(--text-muted); margin-bottom: 20px;
      word-break: break-all; line-height: 1.4; }

    .sb-score-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
      padding: 16px; text-align: center; margin-bottom: 20px; }
    .sb-score-num { font-family: var(--mono); font-size: 36px; font-weight: 800; line-height: 1; }
    .sb-score-label { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: .1em; margin-top: 4px; }
    .sb-score-fixes { font-size: 14px; font-weight: 700; color: var(--accent); margin-top: 8px; }

    .sb-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }
    .sb-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
      font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer;
      border: none; background: none; width: 100%; text-align: left; transition: all .15s; }
    .sb-item:hover { background: var(--bg-elevated); color: var(--text-dim); }
    .sb-item.on { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
    .sb-item i { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
    .sb-item .ct { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--text-muted); font-weight: 400; }

    .sb-divider { height: 1px; background: var(--border); margin: 12px 0; }
    .sb-foot { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
    .sb-foot-row { display: flex; gap: 6px; }
    .sb-foot-btn { flex: 1; font-family: var(--sans); font-size: 12px; font-weight: 600; padding: 8px 0;
      border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--border); background: none;
      color: var(--text-dim); transition: all .15s; text-align: center; }
    .sb-foot-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
    .sb-foot-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
    .sb-foot-btn-primary:hover { background: var(--accent-bright); }

    /* ── Workspace ── */
    .ws { overflow-y: auto; padding: 32px 48px; background: var(--bg); }
    .ws-view { display: none; }
    .ws-view.on { display: block; }
    .ws-title { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 20px; }

    /* ── Overview grid — command center ── */
    .ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .ov-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
      padding: 20px 24px; box-shadow: var(--shadow-sm); }
    .ov-card:hover { box-shadow: var(--shadow-md); }
    .ov-card-full { grid-column: 1 / -1; }
    /* Status strip — progress indicator at top of workspace.
       Subtle elevated surface with accent border. Fixed height prevents jitter. */
    .status-strip { padding:10px 20px; background:var(--bg-elevated); border-left:3px solid var(--accent); border-bottom:1px solid var(--border); font-size:14px; color:var(--text-muted); display:flex; align-items:center; min-height:42px; box-sizing:border-box; transition:opacity 1.5s ease, background 0.5s ease; }
    .status-done { background:var(--green-bg); border-left-color:var(--green); color:var(--green); }
    .status-fade { opacity:0; }
    /* New content indicator — pulsing dot on sidebar items with unseen updates */
    .sb-new::after { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-left:8px; animation:newPulse 1.5s infinite; }
    @keyframes newPulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
    /* Sidebar notification feed — clickable cards, newest on top */
    .sb-activity { padding:0 12px; font-size:12px; color:var(--text-muted); max-height:200px; overflow-y:auto; }
    .sb-notif { padding:8px 10px; margin-bottom:4px; background:var(--bg-elevated); border-left:3px solid var(--accent); border-radius:0 6px 6px 0; line-height:1.45; transition:opacity 0.4s ease, transform 0.4s ease, background 0.2s ease; cursor:pointer; }
    .sb-notif:hover { background:var(--border); }
    .sb-notif-enter { opacity:0; transform:translateY(-8px); }
    .sb-notif-time { font-size:10px; color:var(--text-muted); opacity:0.7; margin-top:2px; }
    .sb-feed-line { padding:3px 0; display:flex; align-items:center; }
    .sb-feed-new { color:var(--green); font-weight:600; }
    /* Loading dots — used in progressive loading placeholders while Opus actions build */
    .loading-dots { display:flex; gap:6px; justify-content:center; }
    .loading-dots span { width:8px; height:8px; border-radius:50%; background:var(--text-muted); animation:loadPulse 1.4s infinite ease-in-out; }
    .loading-dots span:nth-child(2) { animation-delay:0.2s; }
    .loading-dots span:nth-child(3) { animation-delay:0.4s; }
    @keyframes loadPulse { 0%,80%,100%{opacity:0.3;transform:scale(0.8)} 40%{opacity:1;transform:scale(1)} }
    /* Section unavailable — last-resort message when a section failed after silent retry.
       Designed to look intentional, not broken. Subtle enough to not alarm the user. */
    .section-unavailable { text-align:center; padding:40px 20px; }
    .section-unavailable-icon { font-size:28px; margin-bottom:12px; opacity:0.6; }
    .section-unavailable-text { font-size:16px; color:var(--text-muted); line-height:1.6; max-width:380px; margin:0 auto; }
    /* Severity backgrounds for Overview cards — subtle tint, readable in both modes */
    .ov-card-fixes { background: var(--yellow-bg); border-color: var(--yellow); }
    .ov-card-elevations { background: var(--blue-bg); border-color: var(--blue); }
    .ov-card-doubt { background: var(--red-bg); border-color: var(--red); }
    .ov-label { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
    .ov-tag { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700;
      padding: 4px 12px; border-radius: 6px; background: var(--accent-light); color: var(--accent); margin-bottom: 10px; }
    .ov-awareness { font-size: 16px; color: var(--text-dim); line-height: 1.6; margin-bottom: 12px; }
    .ov-summary { font-size: 20px; color: var(--text-dim); line-height: 1.7; }
    .ov-summary br { display: block; content: ''; margin-top: 12px; }
    .ov-summary-loading { color: var(--text-muted); font-size: 16px; padding: 20px 0; }
    /* Confirm-back on loading screen — synthesizes user inputs */
    .confirm-back { background:var(--bg-card); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:8px; padding:18px 20px; margin:20px auto; max-width:520px; text-align:left; }
    .confirm-back-label { font-size:12px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
    .confirm-back-text { font-size:15px; color:var(--text-dim); line-height:1.65; }

    .ov-scores { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    .ov-sc { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px;
      background: var(--bg-elevated); border-radius: var(--radius-sm); }
    .ov-sc-name { font-size: 13px; color: var(--text-dim); font-weight: 600; }
    .ov-sc-num { font-family: var(--mono); font-size: 20px; font-weight: 800; }
    .ov-sc-bar { width: 36px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-right: 8px; }
    .ov-sc-fill { height: 100%; border-radius: 2px; }

    .ov-preview { font-size: 16px; color: var(--text-dim); line-height: 1.5; padding: 10px 0;
      border-bottom: 1px solid var(--border); }
    .ov-preview:last-of-type { border-bottom: none; }
    .ov-preview-type { font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 2px 8px;
      border-radius: 4px; margin-right: 8px; letter-spacing: .04em; }
    .ov-viewall { font-size: 14px; font-weight: 700; color: var(--accent); cursor: pointer;
      margin-top: 10px; display: inline-block; }
    .ov-viewall:hover { text-decoration: underline; }

    /* ═══════════════════════════════════════════════════
       STRENGTHS — full cards in workspace view
       ═══════════════════════════════════════════════════ */
    .strengths-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .strength-card { padding: 18px 22px; background: var(--bg-card); border-left: 3px solid var(--green);
      border-radius: 0; box-shadow: var(--shadow-sm); }
    .strength-card:hover { box-shadow: var(--shadow-md); }
    .strength-element { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.4; margin-bottom: 8px; }
    .strength-why { font-size: 20px; color: var(--text-dim); line-height: 1.7; }
    @media (max-width: 900px) { .strengths-grid { grid-template-columns: 1fr; } }

    /* ═══════════════════════════════════════════════════
       ACTION PLAN — full detail cards in workspace
       ═══════════════════════════════════════════════════ */
    .ap-section { margin-bottom: 20px; }
    .ap-section-hdr { font-family: var(--mono); font-size: 12px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .08em; padding: 10px 0; margin-bottom: 10px; }
    .ap-rewrite-hdr { color: var(--blue); }
    .ap-add-hdr { color: var(--green); }
    .ap-move-hdr { color: var(--yellow); }
    .ap-remove-hdr { color: var(--red); }

    .ap-card { background: var(--bg-card); border-radius: var(--radius); padding: 24px 28px; margin-bottom: 14px;
      box-shadow: var(--shadow-sm); transition: box-shadow .15s; }
    .ap-card:hover { box-shadow: var(--shadow-md); }
    .ap-card-rewrite { border-left: 3px solid var(--blue); border-radius: 0; }
    .ap-card-add { border-left: 3px solid var(--green); border-radius: 0; }
    .ap-card-move { border-left: 3px solid var(--yellow); border-radius: 0; }
    .ap-card-remove { border-left: 3px solid var(--red); border-radius: 0; }
    /* "New" badge — shows on action cards that arrived after the user started reading.
       Fades out on hover (dismissNew). Green accent border glows subtly to catch the eye. */
    .ap-card-new { position:relative; box-shadow:var(--shadow-sm), inset 0 0 0 1px var(--accent-light); }
    .ap-new-badge { position:absolute; top:8px; right:12px; font-size:11px; font-weight:700; color:var(--accent); background:var(--accent-light); padding:2px 8px; border-radius:8px; letter-spacing:.03em; transition:opacity 0.5s ease; }
    .ap-new-fade { opacity:0; }
    .ap-card-seen { box-shadow:var(--shadow-sm); }
    .ap-element { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
    .ap-before { font-size: 20px; color: var(--text-muted); line-height: 1.5; padding: 12px 16px;
      background: var(--bg-elevated); border-radius: 6px; }
    .ap-arrow { text-align: center; font-size: 16px; color: var(--text-muted); padding: 4px 0; }
    .ap-after { font-size: 20px; color: var(--accent); font-weight: 500; line-height: 1.55; padding: 12px 16px;
      background: var(--accent-light); border-radius: 6px; display: flex; align-items: flex-start;
      justify-content: space-between; gap: 12px; }
    .ap-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-right: 4px; }
    .ap-why { white-space: pre-line; font-size: 20px; color: var(--text-dim); line-height: 1.7; margin-top: 14px; }
    .source-badge { display: inline-block; font-size: 12px; font-style: normal; font-family: var(--mono); color: var(--accent);
      background: var(--accent-light); border: 1px solid var(--border); border-radius: 12px; padding: 3px 12px;
      margin-top: 10px; text-decoration: none; transition: all 0.15s ease; }
    .source-badge:hover { border-color: var(--accent); }
    .ap-location { font-size: 16px; font-weight: 600; color: var(--text-muted); margin-bottom: 10px; }
    .ap-add-text { font-size: 20px; color: var(--accent); line-height: 1.55; padding: 12px 16px;
      background: var(--accent-light); border-radius: 6px; display: flex;
      align-items: flex-start; justify-content: space-between; gap: 12px; }
    .ap-move-from { font-size: 20px; color: var(--text-muted); padding: 12px 16px; background: var(--bg-elevated); border-radius: 6px; }
    .ap-move-to { font-size: 20px; color: var(--accent); font-weight: 500; padding: 12px 16px; background: var(--accent-light); border-radius: 6px; }

    .copy-btn { font-size: 12px; font-family: var(--mono); background: var(--accent); color: white;
      border: none; padding: 5px 12px; border-radius: 4px; cursor: pointer; white-space: nowrap;
      flex-shrink: 0; transition: background .15s; }
    .copy-btn:hover { background: var(--accent-bright); }

    .ap-more { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
    .ap-more-btn { font-family: var(--mono); font-size: 12px; font-weight: 700; padding: 8px 16px;
      border-radius: 6px; cursor: pointer; border: 1px solid var(--border);
      background: none; color: var(--text-dim); transition: all .2s; letter-spacing: .03em; }
    .ap-more-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
    .ap-more-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .ap-more-btn .dots { display: inline-flex; gap: 3px; margin-left: 4px; }
    .ap-more-btn .dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); animation: pulse 1s ease infinite; }
    .ap-more-btn .dots span:nth-child(2) { animation-delay: .2s; }
    .ap-more-btn .dots span:nth-child(3) { animation-delay: .4s; }

    /* ═══════════════════════════════════════════════════
       VISITOR DOUBTS — urgency badges, actionable cards
       ═══════════════════════════════════════════════════ */
    .vd-grid { display: flex; flex-direction: column; gap: 12px; }
    .vd-card { padding: 20px 24px; border-radius: var(--radius); background: var(--bg-card); box-shadow: var(--shadow-sm); }
    .vd-card:hover { box-shadow: var(--shadow-md); }
    .vd-unaddressed { border-left: 3px solid var(--red); border-radius: 0; }
    .vd-partial { border-left: 3px solid var(--yellow); border-radius: 0; }
    .vd-addressed { border-left: 3px solid var(--green); border-radius: 0; }
    .vd-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
    .vd-icon { flex-shrink: 0; font-size: 16px; margin-top: 3px; }
    .vd-doubt { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.45; flex: 1; }
    .vd-urgency { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
    .vd-badge { font-size: 11px; font-weight: 700; font-family: var(--mono); padding: 3px 10px;
      border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }
    .vd-urgent { background: var(--red-bg); color: var(--red); }
    .vd-medium { background: var(--yellow-bg); color: var(--yellow); }
    .vd-minor { background: var(--blue-bg); color: var(--blue); }
    .vd-urgency-desc { font-size: 14px; color: var(--text-muted); }
    .vd-detail { white-space: pre-line; font-size: 20px; color: var(--text-dim); line-height: 1.7; margin-bottom: 6px; }
    .vd-detail-label { font-weight: 700; color: var(--text-muted); }
    .vd-fix { white-space: pre-line; font-size: 18px; color: var(--green); line-height: 1.6; margin-top: 10px; padding: 12px 16px;
      border-radius: 6px; background: var(--green-bg); }

    /* ═══════════════════════════════════════════════════
       PERSUASION MAP — 2-column working vs missing
       ═══════════════════════════════════════════════════ */
    .pi-card { background: var(--bg-card); border-radius: var(--radius); padding: 24px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
    .pi-framework { margin-bottom: 20px; padding: 16px 20px; background: var(--bg-elevated); border-radius: 6px; border-left: 3px solid var(--accent); border-radius: 0; }
    .pi-framework-label { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--accent);
      letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
    .pi-framework-name { font-size: 24px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
    .pi-framework-note { white-space: pre-line; font-size: 20px; color: var(--text-dim); line-height: 1.7; }

    .pm-techniques-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    @media (max-width: 700px) { .pm-techniques-grid { grid-template-columns: 1fr; } }

    .pi-tech-section { margin-bottom: 16px; }
    .pi-tech-label { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em;
      text-transform: uppercase; margin-bottom: 10px; }
    .pi-tech-working-label { color: var(--green); }
    .pi-tech-missing-label { color: var(--red); }
    .pi-tech-item { padding: 16px 20px; margin-bottom: 10px; border-radius: 0;
      border-left: 3px solid var(--green); background: var(--green-bg); }
    .pi-tech-missing-item { border-left-color: var(--red); background: var(--red-bg); }
    .pi-tech-name { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
    .pi-strength-strong { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--green);
      background: var(--green-bg); padding: 2px 8px; border-radius: 3px; margin-left: 8px; letter-spacing: .04em; }
    .pi-strength-present { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--blue);
      background: var(--blue-bg); padding: 2px 8px; border-radius: 3px; margin-left: 8px; letter-spacing: .04em; }
    .pi-tech-evidence { white-space: pre-line; font-size: 20px; color: var(--text-dim); line-height: 1.7; }
    .pi-tech-fix { white-space: pre-line; font-size: 18px; color: var(--green); line-height: 1.6; margin-top: 8px; padding: 10px 14px;
      background: var(--green-bg); border-radius: 6px; }
    .pi-flow { padding: 16px 20px; background: var(--bg-elevated); border-radius: 6px; margin-top: 12px; }
    .pi-flow-label { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text-muted);
      letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
    .pi-flow-text { white-space: pre-line; font-size: 20px; color: var(--text); line-height: 1.7; }

    /* ── Deep Dive Results ── */
    .deep-dive-results { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
    .deep-dive-header { font-size: 13px; font-weight: 700; color: var(--accent); text-transform: uppercase;
      letter-spacing: .12em; margin-bottom: 16px; font-family: var(--mono); }
    .deep-variant { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
      padding: 20px; margin-bottom: 12px; transition: border-color .2s; }
    .deep-variant:hover { border-color: var(--accent); }
    .deep-variant-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
      border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--mono); font-size: 13px;
      font-weight: 800; margin-right: 10px; }
    .deep-variant-label { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 6px; display: flex; align-items: center; }
    .deep-variant-angle { font-size: 18px; color: var(--text-dim); margin-bottom: 14px; line-height: 1.5; padding-left: 36px; }
    .deep-variant-copy { font-size: 20px; color: var(--text); line-height: 1.65; padding: 16px 20px;
      background: var(--accent-light); border-radius: 6px; border-left: 3px solid var(--accent); border-radius: 0; }

    .deep-tactical { margin-top: 18px; padding: 18px; background: var(--bg-elevated); border-radius: var(--radius-sm); border: 1px solid var(--border); }
    .deep-tactical-label { font-size: 12px; font-weight: 700; color: var(--yellow); text-transform: uppercase;
      letter-spacing: .1em; margin-bottom: 14px; font-family: var(--mono); }
    .deep-tactical-item { font-size: 18px; color: var(--text-dim); line-height: 1.65; margin-bottom: 12px;
      display: flex; gap: 10px; align-items: flex-start; }
    .deep-tactical-item:last-child { margin-bottom: 0; }
    .deep-tactical-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); margin-top: 10px; }

    /* ── Progress Tracking ── */
    .prog-box { background: var(--bg-card); border: 1px solid var(--green); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
    .prog-header { margin-bottom: 14px; }
    .prog-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
    .prog-date { font-size: 12px; color: var(--text-muted); font-family: var(--mono); }
    .prog-overall { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
    .prog-overall-scores { font-family: var(--mono); font-size: 24px; font-weight: 800; color: var(--text); }
    .prog-overall-diff { font-family: var(--mono); font-size: 16px; font-weight: 700; }

    /* ── Competitor ── */
    .comp-comparison { background: var(--bg-card); border: 1px solid var(--accent); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
    .comp-header { margin-bottom: 14px; }
    .comp-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
    .comp-urls { font-size: 11px; color: var(--text-muted); font-family: var(--mono); word-break: break-all; line-height: 1.5; }
    .comp-you-label { color: var(--accent); font-weight: 700; }
    .comp-them-label { color: var(--text-muted); margin: 0 4px; }
    .comp-overall { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
    .comp-overall-you, .comp-overall-them { text-align: center; }
    .comp-overall-num { font-family: var(--mono); font-size: 28px; font-weight: 800; color: var(--text); }
    .comp-overall-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-weight: 600; }
    .comp-overall-vs { font-size: 14px; font-weight: 700; text-align: center; min-width: 80px; }
    .comp-summary { text-align: center; font-size: 14px; color: var(--text-dim); margin-bottom: 10px; font-weight: 600; }
    .comp-rows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
    .comp-row { display: flex; align-items: center; padding: 6px 12px; border-radius: 6px; background: var(--bg-elevated); gap: 8px; }
    .comp-cat-name { font-size: 14px; color: var(--text-dim); font-weight: 600; flex: 1; min-width: 80px; }
    .comp-score-you { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--accent); width: 24px; text-align: center; }
    .comp-vs { font-size: 10px; color: var(--text-muted); }
    .comp-score-them { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--text-dim); width: 24px; text-align: center; }
    .comp-indicator { font-size: 12px; font-weight: 700; width: 70px; text-align: right; font-family: var(--mono); }
    .comp-steal { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
    .comp-steal-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
    .comp-steal-item { font-size: 14px; color: var(--text-dim); line-height: 1.5; margin-bottom: 4px; }
    .comp-steal-cat { font-weight: 700; color: var(--text); }
    .comp-loading { text-align: center; padding: 20px; background: var(--bg-card); border: 1px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
    .comp-loading-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
    .comp-loading-time-row { font-family: var(--mono); font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
    .comp-loading-msg { font-size: 15px; color: var(--text-dim); margin-bottom: 10px; }
    .comp-loading-dots { display: flex; justify-content: center; gap: 6px; }
    .comp-loading-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 1s ease infinite; }
    .comp-loading-dots span:nth-child(2) { animation-delay: .2s; }
    .comp-loading-dots span:nth-child(3) { animation-delay: .4s; }
    .comp-failure { text-align: center; padding: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
    .comp-failure-msg { font-size: 15px; color: var(--text); font-weight: 600; margin-bottom: 4px; }
    .comp-failure-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
    .comp-retry-btn { font-family: var(--sans); font-size: 14px; font-weight: 700; padding: 8px 20px; border-radius: 6px; cursor: pointer;
      border: 1px solid var(--accent); background: none; color: var(--accent); transition: all .2s; }
    .comp-retry-btn:hover { background: var(--accent); color: #fff; }

    .footer { padding: 18px 0; text-align: center; color: var(--text-muted); font-size: 12px; }

    /* ── Legacy compat ── */
    .grade { display: inline-block; padding: 6px 16px; border-radius: 16px; font-family: var(--mono); font-weight: 800; font-size: 14px; }
    .section-divider { display: flex; align-items: center; gap: 14px; margin: 32px 0 20px; }
    .section-divider-line { flex: 1; height: 1px; background: var(--border); }
    .section-divider-label { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; }
    .dg-visual { display: flex; align-items: stretch; gap: 0; margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
    .dg-side { flex: 1; padding: 16px; }
    .dg-copy-side { background: var(--bg-elevated); }
    .dg-cta-side { background: var(--bg); }
    .dg-side-label { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
    .dg-copy-side .dg-side-label { color: var(--blue); }
    .dg-cta-side .dg-side-label { color: var(--accent); }
    .dg-side-text { font-size: 16px; color: var(--text); line-height: 1.5; }
    .dg-arrow { display: flex; align-items: center; justify-content: center; padding: 0 10px; font-size: 18px; color: var(--text-muted); background: var(--bg); flex-shrink: 0; }
    .dg-gap { padding: 12px 16px; background: var(--red-bg); border-left: 3px solid var(--red); border-radius: 0; margin-bottom: 10px; }
    .dg-gap-label { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--red); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
    .dg-gap-text { font-size: 16px; color: var(--text); line-height: 1.5; }
    .dg-close { padding: 12px 16px; background: var(--green-bg); border-left: 3px solid var(--green); border-radius: 0; }
    .dg-close-label { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--green); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
    .dg-close-text { font-size: 16px; color: var(--text); line-height: 1.5; }
    .dg-aligned { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--green-bg); border-radius: 6px; border-left: 3px solid var(--green); border-radius: 0; font-size: 16px; color: var(--green); font-weight: 600; }
    @media (max-width: 520px) { .dg-visual { flex-direction: column; } .dg-arrow { padding: 6px 0; font-size: 16px; transform: rotate(90deg); } }

    /* ── Mobile: sidebar collapses to top bar ── */
    @media (max-width: 768px) {
      .app-shell { grid-template-columns: 1fr; height: auto; }
      .sb { flex-direction: row; overflow-x: auto; padding: 12px; gap: 8px; border-right: none; border-bottom: 1px solid var(--border); flex-wrap: wrap; align-items: center; }
      .sb-logo { margin-bottom: 0; }
      .sb-url { margin-bottom: 0; }
      .sb-score-card { margin-bottom: 0; padding: 8px 12px; display: flex; align-items: center; gap: 8px; }
      .sb-score-num { font-size: 20px; }
      .sb-score-label { display: none; }
      .sb-score-fixes { margin-top: 0; font-size: 12px; }
      .sb-nav { flex-direction: row; gap: 2px; flex: 1; }
      .sb-item { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
      .sb-item .ct { display: none; }
      .sb-divider { display: none; }
      .sb-foot { flex-direction: row; border-top: none; padding-top: 0; margin-top: 0; }
      .sb-foot-row { flex-direction: row; }
      .ws { padding: 20px 16px; }
      .ov-grid { grid-template-columns: 1fr; }
      .ov-scores { grid-template-columns: 1fr 1fr; }
      .strengths-grid { grid-template-columns: 1fr; }
    }

    /* ═══════════════════════════════════════════════════
       PAGE BLUEPRINT — carousel wireframe visual
       ═══════════════════════════════════════════════════ */
    .bp { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 24px; margin-bottom: 8px; box-shadow: var(--shadow-sm); }
    .bp-header { margin-bottom: 8px; }
    .bp-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
    .bp-subtitle { font-size: 13px; color: var(--text-dim); }
    .bp-template-name { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .06em; margin-top: 10px; }
    .bp-source { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; }
    .bp-stats { display: flex; gap: 20px; margin-bottom: 12px; padding: 10px 16px; background: var(--bg-elevated); border-radius: 6px; flex-wrap: wrap; }
    .bp-stat { text-align: center; }
    .bp-stat-num { font-family: var(--mono); font-size: 20px; font-weight: 800; }
    .bp-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

    .bp-nav-labels { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
    .bp-nav-label { font-family: var(--sans); font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 16px; border: 1px solid var(--border);
      background: var(--bg); color: var(--text-dim); cursor: pointer; transition: all .2s; white-space: nowrap; }
    .bp-nav-label:hover { border-color: var(--accent); color: var(--accent); }
    .bp-nav-active { background: var(--accent); color: #fff !important; border-color: var(--accent); }

    .bp-carousel { display: flex; align-items: stretch; gap: 6px; position: relative; }
    .bp-arrow { background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-dim); width: 40px; flex-shrink: 0; cursor: pointer;
      font-size: 24px; font-weight: 300; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: all .2s; }
    .bp-arrow:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
    @media (max-width: 600px) { .bp-arrow { width: 32px; font-size: 20px; } }
    .bp-slides-container { flex: 1; min-width: 0; overflow: hidden; }
    .bp-slide { padding: 10px 12px; }
    @media (max-width: 600px) { .bp-slide { padding: 6px 4px; } }
    .bp-counter { text-align: center; font-family: var(--mono); font-size: 11px; color: var(--text-muted); margin-top: 8px; }
    /* User page blueprint — detected sections from scan data */
    .bp-wf-user-section { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--border); }
    .bp-wf-user-section:last-child { border-bottom:none; }
    .bp-wf-user-section-num { width:28px; height:28px; border-radius:50%; background:var(--accent); color:white; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; margin-top:2px; }
    .bp-wf-user-section-body { flex:1; }
    .bp-wf-user-section-type { font-size:14px; font-weight:700; color:var(--text); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
    .bp-wf-user-headline { font-size:16px; color:var(--text-dim); line-height:1.5; margin-bottom:6px; }
    .bp-wf-user-element { font-size:13px; color:var(--text-muted); padding:2px 0; }
    /* Structural observations */
    .bp-observation { display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--border); }
    .bp-observation:last-child { border-bottom:none; }
    .bp-obs-icon { font-size:20px; flex-shrink:0; margin-top:2px; }
    .bp-obs-text { font-size:18px; color:var(--text-dim); line-height:1.7; }

    .bp-wf-block { border: 2px solid var(--border); border-radius: 4px; padding: 16px 20px; margin-bottom: 8px; background: var(--bg-card); }
    .bp-wf-found { border-color: var(--green); background: var(--green-bg); }
    .bp-wf-missing { border-color: var(--red); background: var(--red-bg); }
    .bp-wf-partial { border-color: var(--yellow); background: var(--yellow-bg); }
    .bp-wf-label { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
    .bp-wf-text { font-size: 14px; color: var(--text-dim); line-height: 1.5; }
    .bp-badge { font-size: 10px; font-weight: 700; font-family: var(--mono); padding: 2px 8px; border-radius: 3px; letter-spacing: .04em; display: inline-block; margin-bottom: 4px; }
    .bp-badge-found { background: var(--green-bg); color: var(--green); }
    .bp-badge-missing { background: var(--red-bg); color: var(--red); }
    .bp-badge-partial { background: var(--yellow-bg); color: var(--yellow); }

    .bp-wf-cta { text-align: center; padding: 12px 20px; background: var(--accent); color: #fff; border-radius: 6px; font-family: var(--mono);
      font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 10px auto; max-width: 280px; }
    .bp-wf-cta.bp-wf-missing { background: var(--bg-elevated); color: var(--text-muted); }

    .bp-wf-proof { text-align: center; padding: 10px; border: 2px solid var(--border); border-radius: 4px; margin-bottom: 8px;
      font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); background: var(--bg-card); }
    .bp-wf-proof.bp-wf-found { border-color: var(--green); background: var(--green-bg); }
    .bp-wf-proof.bp-wf-missing { border-color: var(--red); background: var(--red-bg); }
    .bp-wf-proof-items { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
    .bp-wf-proof-chip { font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--text-dim); background: var(--bg-card); border: 1px solid var(--border);
      padding: 4px 10px; border-radius: 6px; text-transform: none; letter-spacing: 0; line-height: 1.3; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .bp-wf-hero { background: var(--bg-card); border: 2px solid var(--green); border-radius: 4px; padding: 0; overflow: hidden; margin-bottom: 8px; }
    .bp-wf-nav { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
    .bp-wf-nav-logo { font-weight: 700; border: 1px solid var(--border); padding: 4px 14px; border-radius: 4px; }
    .bp-wf-nav-right { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: 12px; }
    .bp-wf-nav-btn { border: 1px solid var(--border); padding: 4px 12px; border-radius: 4px; font-size: 12px; }
    .bp-wf-hero-body { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px; }
    @media (max-width: 600px) { .bp-wf-hero-body { grid-template-columns: 1fr; } }
    .bp-wf-hero-left { display: flex; flex-direction: column; gap: 10px; }
    .bp-wf-sp1-label { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: .1em; text-transform: uppercase; margin-bottom: -4px; }
    .bp-wf-sp1-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: -4px; }
    .bp-wf-hero-headline { font-size: 20px; font-weight: 800; color: var(--text); line-height: 1.25; }
    .bp-wf-hero-sub { font-size: 14px; color: var(--text-dim); line-height: 1.5; }
    .bp-wf-fuds-label { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: .06em; margin-top: 6px; }
    .bp-wf-image { border: 2px solid var(--border); border-radius: 4px; padding: 30px 14px; text-align: center; background: var(--bg-elevated); min-height: 160px; display: flex; align-items: center; justify-content: center; }
    .bp-wf-image-text { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
    .bp-wf-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 8px 0; }
    @media (max-width: 600px) { .bp-wf-3col { grid-template-columns: 1fr; } }
    .bp-wf-3col-item { border: 2px solid var(--border); border-radius: 4px; padding: 16px 12px; text-align: center; font-size: 13px; color: var(--text-dim); background: var(--bg-card); }
    .bp-wf-3col-tall { min-height: 140px; display: flex; align-items: center; justify-content: center; }
    .bp-wf-single-proof { border: 2px solid var(--border); border-radius: 4px; padding: 16px 12px; text-align: center; font-size: 13px; color: var(--text-dim); background: var(--bg-card); min-height: 160px; display: flex; align-items: center; justify-content: center; margin: 8px 0; }
    .bp-wf-pain-title { font-size: 20px; font-weight: 700; color: var(--text); text-align: center; line-height: 1.3; margin-bottom: 10px; }
    .bp-wf-benefit-headline { font-size: 20px; font-weight: 700; color: var(--text); text-align: center; line-height: 1.3; padding: 16px; }
    .bp-wf-vp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border: 2px solid var(--border); border-radius: 4px; padding: 0; margin-bottom: 10px; overflow: hidden; background: var(--bg-card); }
    .bp-wf-vp-row.bp-wf-found { border-color: var(--green); background: var(--green-bg); }
    .bp-wf-vp-row.bp-wf-missing { border-color: var(--red); background: var(--red-bg); }
    @media (max-width: 600px) { .bp-wf-vp-row { grid-template-columns: 1fr; } }
    .bp-wf-vp-text-side { padding: 20px; display: flex; flex-direction: column; justify-content: center; }
    .bp-wf-vp-img-tall { display: flex; align-items: stretch; }
    .bp-wf-image-tall { border: 2px solid var(--border); border-radius: 0; padding: 30px 14px; text-align: center; background: var(--bg-elevated); min-height: 240px; display: flex; align-items: center; justify-content: center; width: 100%; font-size: 13px; }
    .bp-wf-grid6 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 10px 0; }
    @media (max-width: 600px) { .bp-wf-grid6 { grid-template-columns: 1fr 1fr; } }
    .bp-wf-grid6-item { border: 2px solid var(--border); border-radius: 4px; padding: 14px 10px; text-align: center; font-size: 13px; color: var(--text-dim); background: var(--bg-card); }
    .bp-wf-vp { border: 2px solid var(--border); border-radius: 4px; padding: 16px 20px; margin-bottom: 8px; background: var(--bg-card); }
    .bp-wf-vp.bp-wf-found { border-color: var(--green); background: var(--green-bg); }
    .bp-wf-vp.bp-wf-missing { border-color: var(--red); background: var(--red-bg); }
    .bp-wf-vp-label { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
    .bp-wf-vp-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 6px; line-height: 1.3; }
    .bp-wf-vp-body { font-size: 14px; color: var(--text-dim); line-height: 1.5; margin-bottom: 10px; }
    .bp-wf-vp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; }
    @media (max-width: 600px) { .bp-wf-vp-split { grid-template-columns: 1fr; } }
    .bp-wf-section-title { font-size: 16px; font-weight: 700; color: var(--text); text-align: center; margin: 12px 0 8px; }
    .bp-wf-faq { border-top: 1px solid var(--border); }
    .bp-wf-faq-item { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-dim); }
    .bp-wf-footer { text-align: center; padding: 12px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; margin-top: 8px;
      font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: .1em; text-transform: uppercase; }
    .bp-tip { margin-top: 14px; padding: 10px 14px; background: var(--accent-light); border-radius: 6px; border-left: 3px solid var(--accent); font-size: 14px; color: var(--text); line-height: 1.55; }
    .bp-wf-headline { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.3; margin: 6px 0; }
    .bp-wf-proof-strip { text-align: center; padding: 10px; border: 2px solid var(--border); border-radius: 4px; margin: 8px 0;
      font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
      color: var(--text-dim); background: var(--bg-elevated); }

    /* Section dividers — legacy compat */
    .section-divider { display: flex; align-items: center; gap: 14px; margin: 32px 0 20px; }
    .section-divider-line { flex: 1; height: 1px; background: var(--border); }
    .section-divider-label { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; }

    /* Decision gap — legacy compat */
    .dg-visual { display: flex; align-items: stretch; gap: 0; margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
    .dg-side { flex: 1; padding: 16px; }
    .dg-copy-side { background: var(--bg-elevated); }
    .dg-cta-side { background: var(--bg); }
    .dg-side-label { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
    .dg-copy-side .dg-side-label { color: var(--blue); }
    .dg-cta-side .dg-side-label { color: var(--accent); }
    .dg-side-text { font-size: 14px; color: var(--text); line-height: 1.5; }
    .dg-arrow { display: flex; align-items: center; justify-content: center; padding: 0 10px; font-size: 18px; color: var(--text-muted); background: var(--bg); flex-shrink: 0; }
    .dg-gap { padding: 12px 16px; background: var(--red-bg); border-left: 3px solid var(--red); border-radius: 6px; margin-bottom: 10px; }
    .dg-gap-label { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--red); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
    .dg-gap-text { font-size: 14px; color: var(--text); line-height: 1.5; }
    .dg-close { padding: 12px 16px; background: var(--green-bg); border-left: 3px solid var(--green); border-radius: 6px; }
    .dg-close-label { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--green); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
    .dg-close-text { font-size: 14px; color: var(--text); line-height: 1.5; }
    .dg-aligned { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--green-bg); border-radius: 6px; border-left: 3px solid var(--green); font-size: 14px; color: var(--green); font-weight: 600; }
    @media (max-width: 520px) { .dg-visual { flex-direction: column; } .dg-arrow { padding: 6px 0; font-size: 16px; transform: rotate(90deg); } }

    /* Tactical deep-dive items — legacy compat */
    .deep-tactical { margin-top: 16px; padding: 16px; background: var(--bg-elevated); border-radius: var(--radius-sm); border: 1px solid var(--border); }
    .deep-tactical-label { font-size: 11px; font-weight: 700; color: var(--yellow); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; font-family: var(--mono); }
    .deep-tactical-item { font-size: 14px; color: var(--text-dim); line-height: 1.65; margin-bottom: 10px; display: flex; gap: 10px; align-items: flex-start; }
    .deep-tactical-item:last-child { margin-bottom: 0; }
    .deep-tactical-dot { flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--yellow); margin-top: 9px; }