:root {
    --orange: #E8600A; --orange-lt: #F07B2E; --orange-dim: rgba(232,96,10,.08); --orange-brd: rgba(232,96,10,.18); --orange-sh: 0 4px 20px rgba(232,96,10,.3);
    --navy: #1a1a2e; --green: #16a34a; --green-bg: #dcfce7; --red: #dc2626; --red-bg: #fee2e2; --yellow: #d97706; --yellow-bg: #fef3c7;
    --txt: #1a1a1a; --txs: #4b5563; --txm: #9ca3af;
    --bg: #f5f5f5; --wh: #fff; --brd: #e5e7eb; --brl: #f3f4f6;
}
.dnbl-nav { position: fixed; top: 0; width: 100%; z-index: 1000; padding: 0 48px; height: 68px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--brd); }
.dnbl-nav .nav-logo { height: 48px; border-radius: 8px; }
.dnbl-nav .nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.dnbl-nav .nav-links a { color: var(--txs); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 8px; transition: all .2s; }
.dnbl-nav .nav-links a:hover { color: var(--txt); background: var(--brl); }
.dnbl-nav .nav-links a.dnbl-nav-active { color: var(--orange); background: var(--orange-dim); font-weight: 600; }
.btn-or { display: inline-flex; align-items: center; gap: 8px; background: var(--orange); color: #fff; font-size: 14px; font-weight: 700; padding: 10px 22px; border-radius: 8px; text-decoration: none; transition: all .25s; box-shadow: var(--orange-sh); }
.btn-or:hover { background: var(--orange-lt); transform: translateY(-1px); }

/* DNBL Hero (side by side) */
.dnbl-hero { padding: 130px 48px 60px; background: var(--wh); position: relative; overflow: hidden; }
.dnbl-hero .hero-dots { position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(232,96,10,.03) 1px, transparent 0); background-size: 40px 40px; mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black, transparent); }
.dnbl-hero .hero-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.dnbl-hero video { width: 100%; max-width: 400px; border-radius: 20px; box-shadow: var(--shl); display: block; margin: 0 auto; }
.dnbl-hero .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--orange-dim); border: 1px solid var(--orange-brd); padding: 6px 16px; border-radius: 100px; font-size: 12px; font-weight: 600; color: var(--orange); margin-bottom: 20px; }
.dnbl-hero .hero-badge .p { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: pulse 2s infinite; }
.dnbl-hero h1 { font-family: 'Bebas Neue'; font-size: clamp(52px, 6vw, 80px); line-height: .92; color: var(--navy); margin-bottom: 16px; }
.dnbl-hero h1 .o { color: var(--orange); } .dnbl-hero h1 .r { color: var(--red); }
.dnbl-hero .hero-sub { font-size: 17px; color: var(--txs); line-height: 1.7; max-width: 500px; margin-bottom: 28px; }
.dnbl-hero .hero-note { font-size: 12px; color: var(--txm); font-family: var(--mono); }

/* DNBL Episode Grid */
.ep-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ep-card { background: var(--wh); border: 1px solid var(--brd); border-radius: 14px; overflow: hidden; transition: all .3s; cursor: pointer; }
.ep-card:hover { border-color: var(--orange-brd); transform: translateY(-3px); box-shadow: var(--shm); }
.ep-thumb { height: 190px; display: flex; align-items: center; justify-content: center; position: relative; background: linear-gradient(135deg, #fff7ed, #ffedd5); }
.ep-thumb .ep-e { text-align: center; }
.ep-thumb .ep-emoji { font-size: 44px; margin-bottom: 6px; opacity: .5; }
.ep-thumb .ep-num { font-family: 'Bebas Neue'; font-size: 22px; opacity: .2; color: var(--navy); }
.ep-tag { position: absolute; top: 12px; left: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; padding: 4px 10px; border-radius: 4px; }
.ep-tag.ep { background: var(--orange-dim); color: var(--orange); }
.ep-tag.new { background: var(--green-bg); color: var(--green); }
.ep-body { padding: 18px 20px; }
.ep-body h3 { font-size: 15px; font-weight: 600; color: var(--navy); margin-bottom: 6px; line-height: 1.4; }
.ep-body p { font-size: 13px; color: var(--txs); line-height: 1.6; margin-bottom: 8px; }
.ep-meta { font-size: 11px; color: var(--txm); font-family: var(--mono); }

/* DNBL Quote Grid */
.q-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.q-card { padding: 22px; background: var(--wh); border: 1px solid var(--brd); border-radius: 12px; }
.q-card.ol { border-left: 3px solid var(--orange); } .q-card.rl { border-left: 3px solid var(--red); } .q-card.gl { border-left: 3px solid var(--green); }
.q-card p { font-size: 17px; font-style: italic; color: var(--txs); margin-bottom: 6px; }
.q-card cite { font-size: 12px; font-weight: 600; font-style: normal; }
.q-card cite.o { color: var(--orange); } .q-card cite.r { color: var(--red); } .q-card cite.g { color: var(--green); }

/* DNBL CTA */
.d-cta { max-width: 1200px; margin: 0 auto; background: var(--navy); border-radius: 20px; padding: 60px; text-align: center; color: #fff; position: relative; overflow: hidden; }
.d-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(232,96,10,.1), transparent 50%); }
.d-cta .tag { font-size: 14px; color: var(--orange); font-weight: 700; letter-spacing: 1px; margin-bottom: 10px; position: relative; }
.d-cta h2 { font-family: 'Bebas Neue'; font-size: 44px; position: relative; }
.d-cta h2 .g { color: var(--green); } .d-cta h2 .o { color: var(--orange); }
.d-cta p { font-size: 15px; opacity: .7; margin-bottom: 28px; position: relative; }
.d-cta-note { font-size: 12px; color: rgba(255,255,255,.4); margin-top: 14px; font-family: var(--mono); position: relative; }

/* DNBL Footer */
.dnbl-ft { background: var(--navy); padding: 1.5rem 2rem; display: flex; align-items: center; justify-content: center; gap: 1rem; }
.dnbl-ft .ft-text { font-size: .6875rem; color: rgba(255,255,255,.4); font-weight: 500; }
.dnbl-ft .ft-text a { color: var(--orange); text-decoration: none; }
.dnbl-ft img { height: 28px; opacity: .7; }

/* Video Wrapper */
.vid-wrap { max-width: 920px; margin: 20px auto 0; border-radius: 18px; overflow: hidden; box-shadow: var(--shl); border: 1px solid var(--brd); background: #000; }
.vid-wrap iframe { width: 100%; aspect-ratio: 16/9; display: block; border: none; }
.vid-meta { text-align: center; margin-top: 20px; }
.vid-meta h3 { font-size: 20px; color: var(--navy); margin-bottom: 6px; }
.vid-meta p { color: var(--txs); font-size: 14px; max-width: 560px; margin: 0 auto; line-height: 1.6; }

/* ==============================
   FEATURE PAGES (Scorecards, Questionnaires, Risk Tiering, Breach Alerts)
   ============================== */

/* Feature page hero */
.feat-hero { padding:140px 48px 60px; background:var(--wh,#fff); position:relative; overflow:hidden; }
.feat-hero::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle at 1px 1px,rgba(232,96,10,.03) 1px,transparent 0); background-size:40px 40px; mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,black,transparent); }
.feat-hero-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; position:relative; z-index:2; }
.feat-hero h1 { font-family:'Bebas Neue'; font-size:clamp(38px,4.5vw,58px); line-height:.95; color:#1a1a2e; margin-bottom:16px; }
.feat-hero h1 span { color:#E8600A; }
.feat-hero p { font-size:16px; color:#4b5563; line-height:1.7; margin-bottom:24px; }

/* Hero stats row */
.hero-stats { display:flex; gap:32px; }
.hero-stat-value { font-family:'Bebas Neue'; font-size:36px; color:#E8600A; line-height:1; }
.hero-stat-label { font-size:12px; color:#9ca3af; text-transform:uppercase; letter-spacing:1px; margin-top:4px; }

/* Hero metrics (QFX) */
.hero-metrics { display:flex; gap:32px; }
.metric-value { font-family:'Bebas Neue'; font-size:36px; color:#E8600A; line-height:1; }
.metric-label { font-size:12px; color:#9ca3af; text-transform:uppercase; letter-spacing:1px; margin-top:4px; }

/* Hero feature list */
.hero-features { display:flex; flex-direction:column; gap:12px; }
.hero-feature { display:flex; align-items:center; gap:10px; font-size:14px; color:#4b5563; }
.hero-feature .ico { color:#E8600A; font-size:18px; }

/* Centered hero variant */
.feat-hero-centered { text-align:center; max-width:750px; margin:0 auto; position:relative; z-index:2; }

/* Feature section */
.feat-sec { padding:96px 48px; }
.feat-sec.alt { background:#fff; }
.feat-sec .sec-hdr { text-align:center; margin-bottom:48px; }
.feat-sec .sec-hdr h2 { font-family:'Bebas Neue'; font-size:clamp(34px,3.5vw,52px); line-height:1; color:#1a1a2e; margin-bottom:10px; }
.feat-sec .sec-hdr p { font-size:15px; color:#9ca3af; }

/* Feature grid */
.feat-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feat-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.feat-grid.cols-4 { grid-template-columns:repeat(4,1fr); }
.feat-card { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:28px 24px; transition:all .3s; }
.feat-card:hover { border-color:rgba(232,96,10,.18); transform:translateY(-3px); box-shadow:0 4px 16px rgba(0,0,0,.08); }
.feat-card .fc-ico { font-size:28px; margin-bottom:14px; }
.feat-card h3 { font-size:16px; font-weight:700; color:#1a1a2e; margin-bottom:8px; }
.feat-card h4 { font-size:15px; font-weight:700; color:#1a1a2e; margin-bottom:6px; }
.feat-card p { font-size:13px; color:#4b5563; line-height:1.65; }

/* Mock scorecard widget */
.mock-sc { background:#1a1a2e; border-radius:16px; padding:24px; color:#fff; box-shadow:0 12px 40px rgba(0,0,0,.12); }
.mock-sc-hdr { border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:14px; margin-bottom:16px; }
.mock-sc-hdr h3 { font-size:14px; font-weight:700; letter-spacing:.5px; }
.mock-sc-hdr p { font-size:12px; opacity:.5; margin-top:2px; }
.score-display { display:flex; align-items:center; gap:20px; margin-bottom:16px; }
.score-circle { width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,#E8600A,#F07B2E); display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue'; font-size:32px; font-weight:700; }
.score-info h4 { font-size:16px; font-weight:700; }
.score-info p { font-size:12px; opacity:.6; }
.findings-list { display:flex; flex-direction:column; gap:8px; }
.finding-item { display:flex; align-items:center; gap:10px; font-size:13px; padding:8px 12px; background:rgba(255,255,255,.05); border-radius:8px; }
.finding-badge { font-size:10px; font-weight:800; padding:3px 8px; border-radius:4px; letter-spacing:.5px; }
.finding-badge.high { background:rgba(220,38,38,.15); color:#f87171; }
.finding-badge.medium { background:rgba(217,119,6,.15); color:#fbbf24; }
.finding-badge.low { background:rgba(22,163,74,.15); color:#4ade80; }

/* QFX demo widget */
.quest-demo { background:#1a1a2e; border-radius:16px; padding:24px; color:#fff; box-shadow:0 12px 40px rgba(0,0,0,.12); }
.quest-demo .quest-header { border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:14px; margin-bottom:16px; }
.quest-demo .quest-header h4 { font-size:14px; font-weight:700; }
.quest-progress { margin-top:10px; }
.progress-bar { height:6px; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; width:85%; background:linear-gradient(90deg,#E8600A,#F07B2E); border-radius:3px; }
.progress-text { font-size:11px; color:#E8600A; margin-top:4px; display:block; }
.quest-item { padding:12px; background:rgba(255,255,255,.05); border-radius:8px; margin-bottom:8px; }
.quest-question { font-size:13px; margin-bottom:8px; display:flex; gap:8px; }
.quest-question .num { color:#E8600A; font-weight:700; }
.quest-answer { display:flex; align-items:center; gap:8px; font-size:12px; }
.answer-badge { background:rgba(232,96,10,.15); color:#E8600A; padding:2px 8px; border-radius:4px; font-size:10px; font-weight:800; display:flex; align-items:center; gap:4px; }
.answer-text { opacity:.7; }

/* Alert demo widget */
.alert-demo { background:#1a1a2e; border-radius:16px; padding:24px; color:#fff; box-shadow:0 12px 40px rgba(0,0,0,.12); }
.alert-demo-hdr { display:flex; align-items:center; gap:10px; font-size:16px; font-weight:700; border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:14px; margin-bottom:16px; color:#f87171; }
.alert-item { padding:14px; background:rgba(255,255,255,.05); border-radius:10px; margin-bottom:10px; display:flex; gap:14px; }
.alert-ico { color:#f87171; font-size:20px; flex-shrink:0; margin-top:2px; }
.alert-content h5 { font-size:14px; font-weight:700; margin-bottom:4px; }
.alert-content p { font-size:12px; opacity:.6; line-height:1.5; }
.alert-meta { display:flex; gap:16px; margin-top:8px; font-size:11px; opacity:.4; }

/* Process / Step flow */
.proc-flow { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.proc-step { text-align:center; padding:24px 16px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; position:relative; }
.proc-step .step-ico { font-size:28px; margin-bottom:12px; }
.proc-step h4 { font-size:15px; font-weight:700; color:#1a1a2e; margin-bottom:6px; }
.proc-step p { font-size:12px; color:#4b5563; line-height:1.6; }

/* Tier cards */
.tier-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.tier-card { border-radius:14px; overflow:hidden; border:1px solid #e5e7eb; background:#fff; }
.tier-hdr { padding:20px 20px 14px; }
.tier-num { font-family:'Bebas Neue'; font-size:28px; line-height:1; }
.tier-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-top:2px; }
.tier-body { padding:0 20px 24px; }
.tier-risk { font-size:13px; font-weight:700; margin-bottom:8px; }
.tier-desc { font-size:13px; color:#4b5563; line-height:1.6; margin-bottom:12px; }
.tier-actions strong { font-size:12px; color:#1a1a2e; }
.tier-actions ul { list-style:none; padding:0; margin-top:6px; }
.tier-actions li { font-size:12px; color:#4b5563; padding:3px 0; }
.tier-actions li::before { content:'✓ '; color:#E8600A; font-weight:bold; }
.tier-1 .tier-hdr { background:rgba(22,163,74,.08); } .tier-1 .tier-num { color:#16a34a; } .tier-1 .tier-label { color:#16a34a; }
.tier-2 .tier-hdr { background:rgba(217,119,6,.08); } .tier-2 .tier-num { color:#d97706; } .tier-2 .tier-label { color:#d97706; }
.tier-3 .tier-hdr { background:rgba(220,38,38,.08); } .tier-3 .tier-num { color:#dc2626; } .tier-3 .tier-label { color:#dc2626; }
.tier-4 .tier-hdr { background:rgba(127,29,29,.08); } .tier-4 .tier-num { color:#7f1d1d; } .tier-4 .tier-label { color:#7f1d1d; }

/* Risk matrix */
.matrix-wrap { max-width:500px; margin:0 auto; }
.matrix-grid { display:grid; grid-template-columns:auto repeat(4,1fr); gap:2px; }
.matrix-lbl-x { font-size:11px; font-weight:700; color:#9ca3af; text-align:center; padding:8px 4px; }
.matrix-lbl-y { font-size:11px; font-weight:700; color:#9ca3af; text-align:right; padding:8px 10px 8px 0; display:flex; align-items:center; justify-content:flex-end; }
.matrix-cell { text-align:center; padding:14px 8px; border-radius:6px; font-size:12px; font-weight:700; color:#fff; }
.matrix-cell.low { background:#16a34a; } .matrix-cell.medium { background:#d97706; }
.matrix-cell.high { background:#dc2626; } .matrix-cell.critical { background:#7f1d1d; }
.matrix-legend { display:flex; gap:20px; justify-content:center; margin-top:16px; }
.legend-dot { width:12px; height:12px; border-radius:3px; display:inline-block; vertical-align:middle; margin-right:6px; }

/* Stat comparison blocks */
.stat-grid { max-width:800px; margin:32px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.stat-block { text-align:center; padding:28px 20px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; }
.stat-old { font-size:14px; color:#dc2626; text-decoration:line-through; margin-bottom:6px; }
.stat-new { font-family:'Bebas Neue'; font-size:42px; color:#E8600A; line-height:1; }
.stat-label { font-size:12px; color:#9ca3af; margin-top:8px; text-transform:uppercase; letter-spacing:.5px; }

/* Severity type cards */
.type-card { display:flex; gap:16px; align-items:flex-start; padding:20px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; }
.type-badge { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff; flex-shrink:0; }
.type-badge.critical { background:#7f1d1d; } .type-badge.high { background:#dc2626; }
.type-badge.medium { background:#d97706; } .type-badge.info { background:#2563eb; }
.type-content h4 { font-size:15px; font-weight:700; color:#1a1a2e; margin-bottom:4px; }
.type-content p { font-size:13px; color:#4b5563; line-height:1.6; }

/* Response stats highlight */
.resp-card { max-width:900px; margin:0 auto; background:#1a1a2e; border-radius:20px; padding:48px; text-align:center; color:#fff; }
.resp-card h2 { font-family:'Bebas Neue'; font-size:40px; margin-bottom:10px; }
.resp-card > p { font-size:15px; opacity:.7; margin-bottom:32px; }
.resp-stats { display:flex; justify-content:center; gap:48px; }
.resp-stat-value { font-family:'Bebas Neue'; font-size:48px; color:#E8600A; line-height:1; }
.resp-stat-label { font-size:12px; opacity:.5; margin-top:6px; }

/* Integration mini cards */
.intg-grid { max-width:600px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.intg-card { text-align:center; padding:20px 12px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; }
.intg-card .ico { font-size:28px; margin-bottom:8px; }
.intg-card h4 { font-size:14px; font-weight:700; color:#1a1a2e; margin-bottom:4px; }
.intg-card p { font-size:11px; color:#9ca3af; }

/* Feature benefit cards (horizontal) */
.ben-card { display:flex; gap:16px; align-items:flex-start; padding:20px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; }
.ben-ico { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.ben-card h4 { font-size:15px; font-weight:700; color:#1a1a2e; margin-bottom:4px; }
.ben-card p { font-size:13px; color:#4b5563; line-height:1.6; }

/* Feature CTA */
.feat-cta { max-width:900px; margin:0 auto; background:#1a1a2e; border-radius:20px; padding:56px; text-align:center; color:#fff; position:relative; overflow:hidden; }
.feat-cta::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 30%,rgba(232,96,10,.1),transparent 50%); }
.feat-cta h2 { font-family:'Bebas Neue'; font-size:40px; position:relative; }
.feat-cta p { font-size:15px; opacity:.7; margin-bottom:28px; position:relative; }

/* DNBL Pricing — Page Sections */
.dnbl-ph { padding: 140px 48px 60px; background: var(--wh); position: relative; overflow: hidden; text-align: center; }
.dnbl-ph::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(232,96,10,.03) 1px, transparent 0); background-size: 40px 40px; mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black, transparent); }
.dnbl-ph-inner { max-width: 700px; margin: 0 auto; position: relative; z-index: 2; }
.dnbl-ph h1 { font-family: 'Bebas Neue'; font-size: clamp(42px, 5vw, 64px); line-height: .95; color: var(--navy); margin-bottom: 16px; }
.dnbl-ph h1 .o { color: var(--orange); } .dnbl-ph h1 .g { color: var(--green); }
.dnbl-ph p { font-size: 17px; color: var(--txs); line-height: 1.7; max-width: 560px; margin: 0 auto; }
.dnbl-sec { padding: 96px 48px; }
.dnbl-sec-l { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; font-weight: 600; }
.dnbl-sec-t { font-family: 'Bebas Neue'; font-size: clamp(34px, 3.5vw, 52px); line-height: 1; color: var(--navy); margin-bottom: 16px; }

/* DNBL Pricing — Toggle */
.dnbl-btoggle { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 32px 0 48px; }
.dnbl-btoggle-lbl { font-size: 14px; font-weight: 500; color: var(--txm); transition: color .2s; }
.dnbl-btoggle-lbl.active { color: var(--navy); }
.dnbl-btoggle-sw { width: 52px; height: 28px; border-radius: 14px; border: none; cursor: pointer; background: var(--brd); position: relative; transition: background .3s; padding: 0; }
.dnbl-btoggle-sw.on { background: var(--orange); box-shadow: 0 2px 8px rgba(232,96,10,.3); }
.dnbl-btoggle-knob { width: 22px; height: 22px; border-radius: 11px; background: #fff; position: absolute; top: 3px; left: 3px; transition: left .3s; box-shadow: 0 1px 4px rgba(0,0,0,.15); display: block; }
.dnbl-btoggle-sw.on .dnbl-btoggle-knob { left: 27px; }
.dnbl-btoggle-save { font-family: var(--mono); font-size: 10px; font-weight: 800; color: #fff; background: var(--orange); padding: 3px 10px; border-radius: 100px; letter-spacing: 1px; }

/* DNBL Pricing — Cards */
.dnbl-pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 860px; margin: 0 auto; }
.dnbl-pcard { background: var(--wh); border: 1.5px solid var(--brd); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; transition: all .3s; position: relative; }
.dnbl-pcard.pop { background: var(--navy); border: 2px solid var(--orange); transform: scale(1.03); box-shadow: 0 12px 40px rgba(232,96,10,.15), 0 20px 60px rgba(0,0,0,.12); padding: 36px 28px 28px; }
.dnbl-pcard.pop::before { content: 'MOST POPULAR'; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--orange); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 800; padding: 4px 14px; border-radius: 100px; letter-spacing: 1.5px; white-space: nowrap; box-shadow: var(--orange-sh); }
.dnbl-pcard:hover:not(.pop) { border-color: var(--orange-brd); transform: translateY(-3px); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.dnbl-pcard-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--orange); margin-bottom: 10px; }
.dnbl-pcard-desc { font-size: 14px; color: var(--txs); line-height: 1.6; margin-bottom: 20px; min-height: 44px; }
.dnbl-pcard-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.dnbl-pcard-amt { font-family: 'Bebas Neue'; font-size: 48px; color: var(--navy); line-height: 1; }
.dnbl-pcard-per { font-size: 14px; color: var(--txm); }
.dnbl-pcard-note { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--txm); margin-bottom: 24px; min-height: 20px; }
.dnbl-pcard-caps { display: flex; gap: 16px; margin-bottom: 24px; padding: 14px 16px; background: var(--brl); border-radius: 10px; border: 1px solid var(--brd); }
.dnbl-pcard-cap { flex: 1; }
.dnbl-pcard-cap-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--txm); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 4px; }
.dnbl-pcard-cap-val { font-family: 'Bebas Neue'; font-size: 22px; color: var(--navy); }
.dnbl-pcard-cap-div { width: 1px; background: var(--brd); }
.dnbl-pcard-btn { display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; padding: 14px 24px; border-radius: 10px; text-decoration: none; transition: all .25s; margin-top: auto; width: 100%; background: var(--orange); color: #fff; box-shadow: var(--orange-sh); }
.dnbl-pcard-btn:hover { background: var(--orange-lt); transform: translateY(-2px); }
.dnbl-pcard-btn-order { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; padding: 10px 16px; text-decoration: none; color: var(--txs); border: 1px solid var(--brd); border-radius: 8px; transition: all .2s; width: 100%; margin-top: 8px; }
.dnbl-pcard-btn-order:hover { color: var(--orange); border-color: var(--orange); }

/* DNBL Pricing — Feature Table */
.dnbl-ftable { background: var(--wh); border-radius: 16px; border: 1px solid var(--brd); overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.dnbl-ftable-head, .dnbl-ftable-row { display: grid; grid-template-columns: 1fr 120px 120px; }
.dnbl-ftable-head { padding: 16px 24px; background: var(--brl); border-bottom: 1px solid var(--brd); }
.dnbl-ftable-head .dnbl-ftable-feat { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--txm); text-transform: uppercase; letter-spacing: 1.5px; display: flex; align-items: center; }
.dnbl-ftable-head .dnbl-ftable-val { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; text-align: center; font-weight: 700; display: flex; align-items: center; justify-content: center; color: var(--txs); }
.dnbl-ftable-head .dnbl-ftable-val.hl { color: var(--orange); }
.dnbl-ftable-row { padding: 12px 24px; border-bottom: 1px solid var(--brl); }
.dnbl-ftable-row:hover { background: var(--brl); }
.dnbl-ftable-row .dnbl-ftable-feat { font-size: 14px; color: var(--txt); display: flex; flex-direction: column; justify-content: center; }
.dnbl-ftable-sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--txm); display: block; margin-top: 2px; }
.dnbl-ftable-row .dnbl-ftable-val { display: flex; align-items: center; justify-content: center; }
.dnbl-ftable-ck { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: var(--orange-dim); border-radius: 50%; color: var(--orange); font-weight: 700; font-size: 13px; }

@media (max-width: 900px) {
    .dnbl-nav { padding: 0 20px; }
    .dnbl-hero { padding: 100px 20px 40px; }
    .dnbl-hero .hero-inner { grid-template-columns: 1fr; }
    .ep-grid, .q-grid { grid-template-columns: 1fr; }
    .feat-hero-inner, .feat-grid, .tier-grid, .proc-flow, .stat-grid, .intg-grid { grid-template-columns: 1fr; }
    .feat-hero { padding: 100px 20px 40px; }
    .feat-sec { padding: 60px 20px; }
    .hero-stats, .hero-metrics, .resp-stats { flex-direction:column; gap:16px; }
    .matrix-grid { grid-template-columns:auto repeat(4,1fr); }
    .dnbl-ph { padding: 100px 20px 40px; }
    .dnbl-sec { padding: 60px 20px; }
    .dnbl-pgrid { grid-template-columns: 1fr; }
    .dnbl-pcard.pop { transform: none; }
    .dnbl-ftable-head, .dnbl-ftable-row { grid-template-columns: 1fr 80px 80px; }
}