/* Offensive security partnership: pinned type-led hero, a drifting corpus ticker that slides over it, real product
   screens, an engagement ledger, one quote, two plates joined by a wire. */

/* ---- Pinned hero (same mechanics as the attack surface page) ---- */
.pg-osp .osp-top { position: relative; overflow: hidden; padding: clamp(80px, 10vw, 140px) 0 clamp(80px, 10vw, 140px); min-height: calc(100vh - var(--header-h)); box-sizing: border-box; display: grid; align-items: center; background: linear-gradient(180deg, #020520 0%, #01072a 60%, #030b33 100%); text-align: left; }
.pg-osp .osp-top::before { content: ""; position: absolute; left: -12%; top: -35%; width: 70%; height: 130%; background: radial-gradient(closest-side, rgba(40, 113, 228, 0.30), rgba(40, 113, 228, 0) 70%); pointer-events: none; }
.pg-osp .osp-top::after { content: ""; position: absolute; inset: 0; opacity: 0.3; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 96px 96px; -webkit-mask: radial-gradient(ellipse 60% 60% at 70% 40%, #000 10%, transparent 75%); mask: radial-gradient(ellipse 60% 60% at 70% 40%, #000 10%, transparent 75%); pointer-events: none; }
.pg-osp .osp-top.hero--pin { position: sticky; top: 0; z-index: 0; }
.pg-osp .osp-top__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.pg-osp .osp-top__kicker { margin: 0 0 22px; font-size: 15px; color: rgba(219, 215, 219, 0.62); animation: ospUp 0.7s var(--ease) both; }
.pg-osp .osp-top__title { margin: 0; font-size: clamp(44px, 6.4vw, 90px); font-weight: 300; line-height: 0.98; letter-spacing: -0.035em; color: #fff; animation: ospUp 0.8s var(--ease) 0.08s both; }
.pg-osp .osp-top__title b { font-weight: 300; color: rgba(255, 255, 255, 0.5); }
.pg-osp .osp-top__title .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pg-osp .osp-top__lead { margin: 0 0 28px; font-size: 16px; line-height: 1.8; color: rgba(219, 215, 219, 0.82); font-weight: 300; animation: ospUp 0.8s var(--ease) 0.2s both; }
.pg-osp .osp-top__actions { display: flex; flex-wrap: wrap; gap: 12px; animation: ospUp 0.8s var(--ease) 0.3s both; }
.pg-osp .osp-top__actions .btn--ghost { border-color: rgba(219, 215, 219, 0.35); }
@keyframes ospUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---- Corpus: statement, then the headline numbers drift past in light type ---- */
.pg-osp .osp-corpus-sec { padding: clamp(64px, 8vw, 110px) 0 clamp(48px, 6vw, 80px); overflow: hidden; background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -40px 80px rgba(0, 0, 0, 0.45); }
.pg-osp .osp-corpus__head { margin-bottom: clamp(36px, 5vw, 56px); }
.pg-osp .osp-corpus__head h2, .pg-osp .osp-corpus__head p { max-width: 720px; }
.pg-osp .osp-corpus__head h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -0.03em; margin: 0 0 14px; }
.pg-osp .osp-corpus__head p { margin: 0; font-weight: 300; font-size: 1.05rem; }
.pg-osp .osp-corpus { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.pg-osp .osp-corpus__track { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.pg-osp .osp-corpus:hover .osp-corpus__track { animation-play-state: paused; }
.pg-osp .osp-corpus__set { display: flex; }
.pg-osp .osp-corpus__set .dx-stat { display: grid; gap: 6px; padding: 8px 0; margin-right: clamp(64px, 8vw, 128px); white-space: nowrap; }
.pg-osp .osp-corpus__set .dx-stat__value { font-size: clamp(3rem, 5.5vw, 5rem); font-weight: 300; color: #fff; letter-spacing: -0.04em; line-height: 1; }
.pg-osp .osp-corpus__set .dx-stat__label { font-size: 0.9rem; color: rgba(227, 229, 232, 0.65); }
.pg-osp .osp-corpus__set .dx-stat__label i { display: none; }

/* ---- Feature rows: text beside a real product screen ---- */
.pg-osp .osp-feature__row { align-items: center; gap: clamp(40px, 6vw, 88px); }
.pg-osp .osp-feature h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); letter-spacing: -0.03em; margin-bottom: 14px; }
.pg-osp .osp-feature p { font-weight: 300; }
.pg-osp .osp-list { list-style: none; margin: 22px 0 0; padding: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; border-top: 1px solid var(--line); }
.pg-osp .osp-list li { font-size: 0.95rem; color: #fff; padding-left: 14px; position: relative; }
.pg-osp .osp-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--sky); }
.pg-osp .osp-shot { margin: 0; position: relative; border-radius: 14px; overflow: hidden; background: #0d1117; border: 1px solid var(--line-strong); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5); transition: transform 0.5s var(--ease), border-color 0.3s, box-shadow 0.5s var(--ease); }
.pg-osp .osp-shot:hover { transform: translateY(-4px); border-color: rgba(39, 155, 243, 0.45); box-shadow: 0 50px 100px rgba(0, 0, 0, 0.55), 0 0 40px rgba(40, 113, 228, 0.18); }
.pg-osp .osp-shot img { width: 100%; display: block; }
.pg-osp .osp-shot--crop { --h: 330px; }
.pg-osp .osp-shot--crop .osp-shot__clip { height: var(--h); overflow: hidden; }
.pg-osp .osp-shot--crop img { width: 168%; max-width: none; margin-left: -4%; }
.pg-osp .osp-shot figcaption { padding: 14px 18px 16px; border-top: 1px solid var(--line); background: var(--bg); font-size: 0.86rem; line-height: 1.55; font-weight: 300; color: rgba(227, 229, 232, 0.7); }

/* ---- Engagement: sticky statement, numbered ledger with a timing column ---- */
.pg-osp .osp-engage { position: relative; }
.pg-osp .osp-engage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 35% 45% at 15% 40%, rgba(40, 113, 228, 0.12), rgba(40, 113, 228, 0) 70%); pointer-events: none; }
.pg-osp .osp-engage__grid { position: relative; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.pg-osp .osp-engage__intro { position: sticky; top: calc(var(--header-h) + 24px); }
.pg-osp .osp-engage__intro h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); letter-spacing: -0.03em; margin: 0 0 16px; }
.pg-osp .osp-engage__intro p { margin: 0 0 22px; font-weight: 300; line-height: 1.75; }
.pg-osp .osp-spec { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.pg-osp .osp-spec__row { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 130px; gap: 24px; align-items: start; padding: 30px 0; border-bottom: 1px solid var(--line); }
.pg-osp .osp-spec__row::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--sky); transition: width 1.1s var(--ease) 0.2s; }
.pg-osp .osp-spec__row.is-in::before { width: 56px; }
.pg-osp .osp-spec__n { font-size: 2.2rem; font-weight: 300; line-height: 1; letter-spacing: -0.04em; color: rgba(255, 255, 255, 0.4); font-variant-numeric: tabular-nums; padding-top: 2px; transition: color 0.6s; }
.pg-osp .osp-spec__row:hover .osp-spec__n { color: var(--sky); }
.pg-osp .osp-spec__row h3 { font-size: 1.25rem; font-weight: 600; margin: 2px 0 8px; letter-spacing: -0.015em; }
.pg-osp .osp-spec__row p { margin: 0; font-weight: 300; font-size: 0.98rem; line-height: 1.7; }
.pg-osp .osp-spec__meta { text-align: right; color: var(--sky); font-size: 0.88rem; padding-top: 6px; }

/* ---- One voice: quiet band, big light quote ---- */
.pg-osp .osp-voice { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(40, 113, 228, 0.06), rgba(40, 113, 228, 0)); }
.pg-osp .osp-voice::before { content: ""; position: absolute; left: 50%; top: 50%; width: 900px; height: 500px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(40, 113, 228, 0.16), rgba(40, 113, 228, 0) 70%); pointer-events: none; }
.pg-osp .osp-voice__in { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 24px; align-items: start; max-width: 1040px; }
.pg-osp .osp-voice__mark { font-size: 180px; line-height: 0.6; font-weight: 300; color: var(--sky); opacity: 0.85; margin-top: 18px; }
.pg-osp .osp-voice blockquote { margin: 0; padding: 0; border: 0; }
.pg-osp .osp-voice blockquote p { margin: 0 0 28px; font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1.35; font-weight: 300; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.92); }
.pg-osp .osp-voice blockquote b { font-weight: 600; color: #fff; }
.pg-osp .osp-voice footer { display: flex; align-items: center; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.9rem; color: rgba(227, 229, 232, 0.65); }
.pg-osp .osp-voice footer img { width: 110px; height: auto; }
.pg-osp .osp-voice footer span::before { content: ""; display: inline-block; width: 1px; height: 14px; background: rgba(255, 255, 255, 0.25); margin-right: 16px; vertical-align: -2px; }

/* ---- Access: dashboard and API plates joined by a wire ---- */
.pg-osp .osp-access { position: relative; overflow: hidden; }
.pg-osp .osp-access::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 40% 50% at 75% 60%, rgba(40, 113, 228, 0.12), rgba(40, 113, 228, 0) 70%); pointer-events: none; }
.pg-osp .osp-access .section__head { max-width: 760px; }
.pg-osp .osp-access__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); align-items: stretch; }
.pg-osp .osp-plate { border: 1px solid var(--line-strong); border-radius: 16px; padding: clamp(24px, 3vw, 36px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)); display: grid; align-content: start; gap: 14px; }
.pg-osp .osp-plate--api { border-color: rgba(39, 155, 243, 0.45); background: linear-gradient(180deg, rgba(40, 113, 228, 0.14), rgba(40, 113, 228, 0.03)); box-shadow: 0 0 0 1px rgba(39, 155, 243, 0.12), 0 30px 80px rgba(0, 0, 0, 0.35); }
.pg-osp .osp-plate header { display: flex; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pg-osp .osp-plate__n { font-size: 1.6rem; font-weight: 300; color: rgba(255, 255, 255, 0.5); letter-spacing: -0.03em; }
.pg-osp .osp-plate--api .osp-plate__n { color: var(--sky); }
.pg-osp .osp-plate__tag { font-size: 0.9rem; font-weight: 500; color: #fff; }
.pg-osp .osp-plate h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin: 4px 0 0; letter-spacing: -0.02em; }
.pg-osp .osp-plate p { margin: 0; font-weight: 300; }
.pg-osp .osp-plate__list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
.pg-osp .osp-plate__list li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.pg-osp .osp-plate__list b { color: #fff; font-weight: 600; font-size: 0.95rem; }
.pg-osp .osp-plate__list span { font-size: 0.85rem; color: rgba(227, 229, 232, 0.6); font-weight: 300; }
.pg-osp .osp-plate .link-arrow { margin-top: 6px; font-size: 0.95rem; }
.pg-osp .osp-access__link { position: relative; display: grid; place-items: center; }
.pg-osp .osp-access__wire { position: absolute; left: -1px; right: -1px; top: 50%; height: 1px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.pg-osp .osp-access__wire i { position: absolute; top: -1px; left: 0; width: 46px; height: 3px; margin-left: -46px; border-radius: 3px; background: linear-gradient(90deg, rgba(39, 155, 243, 0), rgba(39, 155, 243, 0.9) 60%, #fff); filter: drop-shadow(0 0 6px rgba(39, 155, 243, 0.9)); animation: ospWire 2.4s ease-in-out infinite; }
@keyframes ospWire { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 85% { left: calc(100% + 46px); opacity: 1; } 100% { left: calc(100% + 46px); opacity: 0; } }
.pg-osp .osp-access__mid { position: relative; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg); font-size: 0.74rem; color: rgba(227, 229, 232, 0.7); white-space: nowrap; }

/* ---- FAQ: sticky intro with an accent card ---- */
.pg-osp .osp-two { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.pg-osp .osp-two__intro { position: sticky; top: calc(var(--header-h) + 24px); }
.pg-osp .osp-two__intro p { font-weight: 300; margin: 0; }
.pg-osp .osp-faq__card { margin-top: 24px; }
.pg-osp .osp-faq__card h3 { font-size: 1.15rem; }
.pg-osp .osp-faq__card .link-arrow { font-size: 0.95rem; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.pg-osp .osp-top { padding: 64px 0; min-height: 0; }
	.pg-osp .osp-top__in { grid-template-columns: 1fr; align-items: start; }
	.pg-osp .osp-feature__row, .pg-osp .osp-two, .pg-osp .osp-engage__grid { grid-template-columns: 1fr; }
	.pg-osp .osp-feature__row--reverse > .osp-shot { order: 2; }
	.pg-osp .osp-two__intro, .pg-osp .osp-engage__intro { position: static; }
	.pg-osp .osp-access__grid { grid-template-columns: 1fr; gap: 0; }
	.pg-osp .osp-access__link { height: 90px; }
	.pg-osp .osp-access__wire { left: 50%; right: auto; top: -1px; bottom: -1px; width: 1px; height: auto; }
	.pg-osp .osp-access__wire i { display: none; }
}
@media (max-width: 760px) {
	.pg-osp .osp-top { padding: 40px 0 32px; max-height: none; }
	.pg-osp .osp-top.hero--pin { position: relative; }
	.pg-osp .osp-top__title { font-size: 42px; }
	.pg-osp .osp-list { grid-template-columns: 1fr; }
	.pg-osp .osp-voice__in { grid-template-columns: 1fr; }
	.pg-osp .osp-voice__mark { font-size: 110px; margin: 0 0 -20px; }
	.pg-osp .osp-spec__row { grid-template-columns: 40px 1fr; }
	.pg-osp .osp-spec__meta { grid-column: 2; text-align: left; padding-top: 0; }
	.pg-osp .osp-shot--crop { --h: 220px; }
}
@media (prefers-reduced-motion: reduce) {
	.pg-osp .osp-top.hero--pin { position: relative; }
	.pg-osp .osp-top__kicker, .pg-osp .osp-top__title, .pg-osp .osp-top__lead, .pg-osp .osp-top__actions { animation: none; opacity: 1; }
	.pg-osp .osp-corpus__track { animation: none; }
	.pg-osp .osp-access__wire i { animation: none; display: none; }
}