
.product-page { background:#071018; min-height:70vh; }
.product-hero { padding:64px 0 42px; border-bottom:1px solid #21313a; background:linear-gradient(180deg,#0a151d,#071018); }
.product-hero-grid { display:grid; grid-template-columns:1fr .65fr; gap:52px; align-items:end; }
.product-hero h1 { margin:8px 0 12px; color:#fff; font-size:clamp(2.7rem,5vw,4.3rem); line-height:1; letter-spacing:-.045em; font-weight:790; }
.product-hero p { margin:0; color:#91a4ac; max-width:620px; font-size:.98rem; }
.product-summary { background:#0d1820; border:1px solid #263842; border-radius:11px; padding:20px; }
.product-summary-row { display:grid; grid-template-columns:1fr auto; gap:18px; padding:10px 0; border-bottom:1px solid #263842; font-size:.77rem; }
.product-summary-row:last-child { border-bottom:0; }
.product-summary-row span { color:#71868f; }
.product-summary-row strong { color:#eef3f5; font:650 .72rem/1.4 "IBM Plex Mono",monospace; }

.page-section { padding:58px 0; border-bottom:1px solid #21313a; }
.page-section.alt { background:#09141b; }
.page-heading { display:grid; grid-template-columns:1fr .7fr; gap:40px; align-items:end; margin-bottom:24px; }
.page-heading h2 { margin:8px 0 0; color:#fff; font-size:clamp(1.9rem,3.3vw,2.8rem); line-height:1.07; letter-spacing:-.035em; font-weight:780; }
.page-heading p { margin:0; color:#8da0a8; font-size:.91rem; max-width:540px; }

.explorer-shell { background:#0d1820; border:1px solid #263842; border-radius:12px; overflow:hidden; }
.explorer-toolbar { display:flex; justify-content:space-between; gap:18px; align-items:center; padding:16px 18px; border-bottom:1px solid #263842; }
.range-tabs { display:flex; gap:6px; }
.range-tabs span { padding:6px 9px; border:1px solid #30454f; border-radius:5px; color:#84969e; font:600 .64rem/1 "IBM Plex Mono",monospace; }
.range-tabs .active { color:#e9f9fd; border-color:#467083; background:#0f222b; }
.date-search { color:#72868f; font-size:.75rem; }
.chart-stage { padding:22px; background:#09151c; }
.chart-frame { position:relative; height:320px; border-left:1px solid #263842; border-bottom:1px solid #263842; background:linear-gradient(to bottom,transparent 24.8%,#1d2d35 25%,transparent 25.2%,transparent 49.8%,#1d2d35 50%,transparent 50.2%,transparent 74.8%,#1d2d35 75%,transparent 75.2%); }
.chart-frame svg { width:100%; height:100%; }
.chart-line { fill:none; stroke:#dce7ea; stroke-width:2; vector-effect:non-scaling-stroke; }
.chart-area { fill:url(#historyfill); }
.chart-dot { fill:#ff5a4a; stroke:#09151c; stroke-width:2; }
.chart-axis { display:flex; justify-content:space-between; color:#657983; font:600 .61rem/1 "IBM Plex Mono",monospace; margin-top:8px; }
.history-stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #263842; }
.history-stat { padding:16px 18px; border-right:1px solid #263842; }
.history-stat:last-child { border-right:0; }
.history-stat span { display:block; color:#70858e; font:600 .61rem/1.2 "IBM Plex Mono",monospace; text-transform:uppercase; }
.history-stat strong { display:block; color:#fff; font-size:1.25rem; margin-top:7px; }
.history-stat small { display:block; color:#8598a0; margin-top:5px; font-size:.7rem; }

.event-table { background:#0d1820; border:1px solid #263842; border-radius:12px; overflow:hidden; }
.event-row { display:grid; grid-template-columns:120px 90px 1fr 110px; gap:16px; padding:14px 18px; border-bottom:1px solid #263842; align-items:center; font-size:.78rem; }
.event-row:last-child { border-bottom:0; }
.event-row.header { background:#0a151c; color:#6f848d; font:600 .62rem/1 "IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.05em; }
.event-row strong { color:#eef3f5; }
.event-band { font:700 .65rem/1 "IBM Plex Mono",monospace; text-transform:uppercase; }
.band-severe { color:#ff6b5b; } .band-extreme { color:#ff7494; } .band-elevated { color:#dda05e; }

.monitor-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:14px; }
.monitor-card { background:#0d1820; border:1px solid #263842; border-radius:12px; padding:21px; }
.monitor-card h3 { color:#f0f5f6; font-size:1.08rem; margin:11px 0 8px; }
.monitor-card p { color:#83969f; font-size:.82rem; margin:0; }
.monitor-state { display:flex; align-items:center; gap:9px; margin-top:16px; }
.monitor-dot { width:8px; height:8px; border-radius:50%; background:#68d7ef; }
.monitor-state strong { color:#eaf2f4; font-size:.8rem; }
.evidence-list { margin-top:16px; }
.evidence-row { padding:13px 0; border-top:1px solid #263842; }
.evidence-meta { display:flex; justify-content:space-between; gap:15px; color:#70858e; font:600 .61rem/1.2 "IBM Plex Mono",monospace; text-transform:uppercase; }
.evidence-row strong { display:block; color:#eaf1f3; font-size:.84rem; margin:7px 0 5px; }
.evidence-row p { color:#81959e; font-size:.76rem; margin:0; }
.evidence-chip { display:inline-flex; padding:5px 7px; border-radius:999px; border:1px solid #4d4331; background:#211d13; color:#d6bd71; font:600 .6rem/1 "IBM Plex Mono",monospace; text-transform:uppercase; }
.source-grid { display:grid; gap:8px; margin-top:13px; }
.source-item { display:grid; grid-template-columns:1fr auto; gap:14px; padding:11px 0; border-top:1px solid #263842; font-size:.74rem; }
.source-item span { color:#738891; }
.source-item strong { color:#edf3f4; font:600 .69rem/1.3 "IBM Plex Mono",monospace; }

.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.feature-card { background:#0d1820; border:1px solid #263842; border-radius:12px; padding:20px; min-height:170px; }
.feature-card strong { display:block; color:#f0f4f5; font-size:1rem; margin:13px 0 7px; }
.feature-card p { margin:0; color:#80949d; font-size:.8rem; }

.copy-block { max-width:780px; }
.copy-block h2 { color:#fff; font-size:2rem; letter-spacing:-.03em; }
.copy-block p { color:#9aabb2; }
.form-shell { max-width:720px; padding:22px; background:#0d1820; border:1px solid #263842; border-radius:12px; }
.form-row { display:grid; grid-template-columns:1fr auto; gap:8px; }
.form-row input { padding:12px; background:#07131a; border:1px solid #334a55; color:#fff; border-radius:6px; }
.form-row button { padding:12px 16px; border:0; border-radius:6px; background:#68d7ef; color:#041016; font-weight:800; }
.form-row input[disabled],.form-row button[disabled]{opacity:.55}

.feature-card-link { display:block; position:relative; color:inherit; transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.feature-card-link:hover, .feature-card-link:focus-visible { transform:translateY(-2px); border-color:#42616e; background:#10202a; outline:none; }
.feature-card-link:after { content:"→"; position:absolute; right:18px; bottom:16px; color:#58717c; font-size:1rem; transition:transform .16s ease,color .16s ease; }
.feature-card-link:hover:after, .feature-card-link:focus-visible:after { color:#68d7ef; transform:translateX(3px); }
.feature-card-link p { padding-right:28px; }
.feature-card[id], .copy-block[id], .page-section [id] { scroll-margin-top:100px; }

.widget-showcase { display:grid; grid-template-columns:.9fr 1.1fr; gap:18px; align-items:stretch; }
.widget-preview-panel, .widget-copy-panel { background:#0d1820; border:1px solid #263842; border-radius:12px; padding:22px; }
.widget-preview-panel { display:flex; align-items:center; justify-content:center; min-height:280px; }
.widget-copy-panel h3 { color:#f0f4f5; font-size:1.25rem; margin:12px 0 8px; }
.widget-copy-panel p { color:#80949d; font-size:.82rem; }
.embed-code { width:100%; margin:12px 0 8px; padding:13px 14px; resize:vertical; background:#07131a; border:1px solid #334a55; border-radius:7px; color:#dff8ff; font:600 .72rem/1.5 "IBM Plex Mono",monospace; }
.widget-note { font-size:.72rem !important; color:#71868f !important; }
.professional-form-shell { max-width:860px; }

@media(max-width:900px){
	.product-hero-grid,.page-heading,.monitor-grid,.widget-showcase{grid-template-columns:1fr}
	.history-stats,.feature-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
	.history-stats,.feature-grid{grid-template-columns:1fr}
	.event-row{grid-template-columns:1fr 70px}
	.event-row>*:nth-child(3){grid-column:1/-1}
	.form-row{grid-template-columns:1fr}
}
