/* ── Results page ─────────────────────────────────────────────
   Frame: Kristina's site (cream, Newsreader + DM Sans).
   Data instrument panel: Beamtrace's real brand — Inter, vivid
   purple #6720FF, and the magenta→blue logo gradient — on white. */
.oc {
    --bt-purple: #6720FF; --bt-violet: #8115FD; --bt-magenta: #FF1B9F;
    --bt-ink: #0E0B1A; --bt-muted: #6C6A7A; --bt-faint: #9A98A8;
    --bt-card: #ffffff; --bt-line: #ECEAF4; --bt-line-soft: #F4F3F9;
    --bt-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    max-width: 1040px; width: 100%; margin: 0 auto;
    padding: var(--space-sm) var(--space-md) var(--space-lg); flex: 1;
}
.oc-eyebrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: var(--space-md); }
.oc-tag { display: inline-flex; align-items: center; gap: 9px; font-family: var(--bt-font); font-size: 0.78rem; font-weight: 500; color: var(--bt-muted); letter-spacing: 0.01em; }
.oc-dot { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--bt-magenta), var(--bt-purple)); box-shadow: 0 0 0 4px rgba(103,32,255,0.12); }
.oc-stamp { font-family: var(--bt-font); font-size: 0.78rem; color: var(--bt-faint); }

/* Hero — editorial (her voice), with a Beamtrace-gradient second line */
.oc-hero { padding: 0 0 var(--space-lg); max-width: 900px; }
.oc-badge { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--bt-line); box-shadow: 0 1px 2px rgba(14,11,26,0.04); font-family: var(--bt-font); font-size: 0.8rem; font-weight: 600; color: var(--bt-muted); margin-bottom: 1.6rem; }
.oc-badge span.d { width: 6px; height: 6px; border-radius: 50%; background: var(--bt-magenta); }
.oc-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 1.4rem; }
.oc-grad { background: linear-gradient(96deg, var(--bt-magenta) 0%, var(--bt-violet) 52%, var(--bt-purple) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.oc-hero p { font-size: 1.15rem; line-height: 1.7; color: var(--color-text-secondary); }
.oc-hero p a { color: var(--bt-purple); text-decoration: underline; text-decoration-color: rgba(103,32,255,0.35); text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
.oc-hero p a:hover { text-decoration-color: var(--bt-purple); }
/* Brand lockup: plush Beamtrace mark + wordmark */
.oc-brandmark { display: inline-flex; align-items: center; gap: 0.9rem; margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }
.oc-hero-plush { width: clamp(60px, 8vw, 78px); height: auto; object-fit: contain; flex-shrink: 0; }
.oc-wordmark { display: flex; flex-direction: column; line-height: 1; }
.oc-wm-name { font-family: var(--bt-font); font-weight: 700; font-size: clamp(1.5rem, 3vw, 1.95rem); letter-spacing: -0.02em; color: var(--bt-ink); }
.oc-wm-sub { font-family: var(--bt-font); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bt-faint); margin-top: 0.4rem; }

/* Cards / instrument panel */
.oc-card { background: var(--bt-card); border: 1px solid var(--bt-line); border-radius: 20px; box-shadow: 0 1px 2px rgba(14,11,26,0.04), 0 24px 48px -34px rgba(14,11,26,0.22); padding: clamp(20px, 3vw, 32px); }
.oc-section { padding-top: clamp(40px, 6vw, 72px); }
.oc-kicker { font-family: var(--bt-font); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bt-purple); margin-bottom: 0.9rem; }
.oc-h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.14; letter-spacing: -0.015em; margin-bottom: 0.9rem; }
.oc-lead { font-size: 1.02rem; line-height: 1.7; color: var(--color-text-secondary); }
.oc-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(22px, 4vw, 52px); align-items: start; }

/* Big metric readout */
.oc-readout { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 1.2rem; }
.oc-metric-label { font-family: var(--bt-font); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--bt-faint); margin-bottom: 0.6rem; }
.oc-metric-value { font-family: var(--bt-font); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-size: clamp(2.4rem, 5.4vw, 3.9rem); color: var(--bt-ink); }
.oc-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: rgba(103,32,255,0.09); color: var(--bt-purple); font-family: var(--bt-font); font-size: 0.8rem; font-weight: 700; vertical-align: middle; }
.oc-note-r { font-family: var(--bt-font); font-size: 0.8rem; color: var(--bt-faint); line-height: 1.6; text-align: right; }
.oc-chart { display: block; width: 100%; height: auto; overflow: visible; }
.oc-axis { display: grid; margin-top: 12px; font-family: var(--bt-font); font-size: 0.72rem; color: var(--bt-faint); }
.oc-axis span:first-child { text-align: left; } .oc-axis span:last-child { text-align: right; } .oc-axis span { text-align: center; }
.oc-cap { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--bt-line-soft); font-family: var(--bt-font); font-size: 0.82rem; line-height: 1.6; color: var(--bt-faint); }
.oc-card-note { margin-top: 1.1rem; font-size: 0.95rem; line-height: 1.65; color: var(--color-text-secondary); }
.oc-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 1.3rem; }
.oc-card-num { font-family: var(--bt-font); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; color: var(--bt-ink); }

/* Prominent before→after stat (average position) */
.oc-bigswap { display: inline-flex; align-items: baseline; gap: 14px; font-family: var(--bt-font); font-weight: 800; letter-spacing: -0.02em; margin-top: 1.6rem; padding: 12px 22px; background: #F5F4FB; border-radius: 16px; }
.oc-bigswap .from { font-size: 1.7rem; color: var(--bt-faint); }
.oc-bigswap .arr { font-size: 1.3rem; color: var(--bt-magenta); font-weight: 600; }
.oc-bigswap .to { font-size: 2.7rem; color: var(--bt-ink); }
.oc-bigswap small { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bt-faint); align-self: center; margin-left: 4px; }

/* Referring-domain chips */
.oc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.oc-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #F5F4FB; font-family: var(--bt-font); font-size: 0.85rem; font-weight: 600; color: var(--bt-ink); }
.oc-chip b { font-weight: 500; color: var(--bt-purple); font-size: 0.78rem; }

/* Stacked share bars */
.oc-legend { display: flex; gap: 18px; margin-bottom: 1.3rem; font-family: var(--bt-font); font-size: 0.8rem; color: var(--color-text-secondary); }
.oc-legend span { display: inline-flex; align-items: center; gap: 7px; }
.oc-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.oc-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(8px, 1.6vw, 18px); align-items: end; height: 210px; }
.oc-bar-col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 6px; }
.oc-bar-pct { font-family: var(--bt-font); font-size: 0.72rem; color: var(--bt-faint); text-align: center; }
.oc-bar-pct.hi { color: var(--bt-ink); font-weight: 600; }
.oc-bar { display: flex; flex-direction: column; justify-content: flex-end; background: #E9E7F4; border-radius: 6px 6px 0 0; overflow: hidden; }
.oc-bar i { display: block; width: 100%; background: linear-gradient(180deg, var(--bt-purple), var(--bt-violet)); }

/* Timeline */
.oc-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(16px, 2.5vw, 26px); }
.oc-node .line { display: flex; align-items: center; margin-bottom: 16px; }
.oc-node .line b { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #C9C6DC; }
.oc-node .line i { flex: 1; height: 2px; background: linear-gradient(90deg, #D5D2E8, #C9C6DC); }
.oc-node.m1 .line b { border-color: var(--bt-magenta); } .oc-node.m1 .line i { background: linear-gradient(90deg, var(--bt-magenta), var(--bt-violet)); }
.oc-node.m2 .line b { background: var(--bt-violet); border-color: var(--bt-violet); } .oc-node.m2 .line i { background: linear-gradient(90deg, var(--bt-violet), var(--bt-purple)); }
.oc-node.m3 .line b { background: var(--bt-purple); border-color: var(--bt-purple); } .oc-node.m3 .line i { background: linear-gradient(90deg, var(--bt-purple), rgba(103,32,255,0)); }
.oc-node .when { font-family: var(--bt-font); font-size: 0.76rem; color: var(--bt-faint); margin-bottom: 6px; }
.oc-node .big { font-family: var(--bt-font); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--bt-ink); margin-bottom: 6px; }
.oc-node p { font-size: 0.92rem; line-height: 1.55; color: var(--color-text-secondary); }

/* Dark payoff panel — Beamtrace gradient */
.oc-dark { position: relative; overflow: hidden; border-radius: 24px; padding: clamp(28px, 5vw, 56px); color: #fff; background: linear-gradient(150deg, #140F2E 0%, #221846 46%, #3A1A55 100%); }
.oc-dark::after { content: ""; position: absolute; inset: auto -10% -60% auto; width: 60%; height: 120%; background: radial-gradient(circle at 70% 50%, rgba(103,32,255,0.45), rgba(255,27,159,0.12) 45%, rgba(0,0,0,0) 70%); }
.oc-dark > * { position: relative; }
.oc-dark .k { font-family: var(--bt-font); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #B9A9F5; margin-bottom: 0.9rem; }
.oc-dark h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.15; letter-spacing: -0.015em; max-width: 24ch; margin-bottom: 1.8rem; }
.oc-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(24px, 4vw, 48px); align-items: center; }
.oc-share-viz { display: flex; flex-direction: column; gap: 14px; }
.oc-share-row .lab { display: flex; justify-content: space-between; font-family: var(--bt-font); font-size: 0.82rem; color: #D6D2EC; margin-bottom: 7px; }
.oc-share-row .lab b { font-weight: 700; color: #fff; }
.oc-share-track { height: 12px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; }
.oc-share-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--bt-magenta), var(--bt-purple)); }
.oc-dark p.body { font-size: 1.02rem; line-height: 1.7; color: #DAD6EE; max-width: 60ch; }

/* Closing — sources as the quiet main actor */
.oc-closing { display: flex; flex-direction: column; gap: 1.1rem; }
.oc-live { display: inline-flex; align-items: center; gap: 9px; font-family: var(--bt-font); font-size: 0.82rem; color: var(--bt-purple); }
.oc-live .d { width: 8px; height: 8px; border-radius: 50%; background: var(--bt-purple); box-shadow: 0 0 0 0 rgba(103,32,255,0.5); animation: ocpulse 2.4s infinite; }
@keyframes ocpulse { 0% { box-shadow: 0 0 0 0 rgba(103,32,255,0.45); } 70% { box-shadow: 0 0 0 9px rgba(103,32,255,0); } 100% { box-shadow: 0 0 0 0 rgba(103,32,255,0); } }
.oc-closing-line { font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--color-text); max-width: 34ch; }
.oc-sources { display: flex; flex-wrap: wrap; gap: clamp(18px, 4vw, 44px); margin-top: 0.6rem; padding-top: 1.2rem; border-top: 1px solid var(--bt-line); }
.oc-sources > div { flex: 1 1 260px; font-family: var(--bt-font); font-size: 0.8rem; line-height: 1.6; color: var(--bt-faint); }
.oc-sources .s-k { display: block; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.66rem; color: var(--bt-muted); margin-bottom: 5px; }

@media (max-width: 600px) {
    .oc { padding-left: var(--space-sm); padding-right: var(--space-sm); }
    .oc-note-r { text-align: left; }
    .oc-bigswap { padding: 12px 18px; }
    .oc-bigswap .to { font-size: 2.3rem; }
}
@media (prefers-reduced-motion: reduce) {
    .oc-live .d { animation: none; }
}