.cs-page {
  --cs-bg: #090910;
  --cs-surface: #12121f;
  --cs-surface-2: #181827;
  --cs-border: rgba(148, 163, 184, 0.15);
  --cs-muted: #9ca7ba;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  background: radial-gradient(circle at 50% -8%, rgba(99,102,241,.18), transparent 34rem), linear-gradient(180deg, #0b0b15, var(--cs-bg) 45%, #0b0b15);
  color: #f8fafc;
  font-family: "Inter", sans-serif;
}
.cs-page *, .cs-page *::before, .cs-page *::after { box-sizing: border-box; }
.cs-page h1, .cs-page h2, .cs-page h3 { font-family: "Outfit", sans-serif; }
.cs-page a { text-decoration: none; }
.cs-container { position: relative; z-index: 2; width: min(100% - 3rem, 1160px); margin-inline: auto; }
.cs-glow { position: absolute; z-index: 0; width: 32rem; height: 32rem; border-radius: 50%; filter: blur(110px); opacity: .12; pointer-events: none; }
.cs-glow-one { top: 62rem; left: -20rem; background: #8b5cf6; }
.cs-glow-two { top: 150rem; right: -21rem; background: #0ea5e9; }
.cs-breadcrumb { display: flex; gap: .55rem; align-items: center; padding-top: 1.2rem; color: #6f7b8f; font-size: .77rem; }
.cs-breadcrumb a { color: #9aa5b8; }
.cs-breadcrumb a:hover { color: #ddd6fe; }
.cs-hero { padding: clamp(4.5rem, 8vw, 7.2rem) 0 clamp(4.5rem, 7vw, 6.5rem); }
.cs-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: clamp(3rem, 8vw, 7rem); align-items: end; }
.cs-eyebrow, .cs-kicker { color: #b9a9ff; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.cs-eyebrow { display: inline-flex; align-items: center; gap: .7rem; margin: 0 0 1.25rem; }
.cs-eyebrow span { width: 2rem; height: 1px; background: linear-gradient(90deg, #a78bfa, transparent); }
.cs-hero h1 { max-width: 850px; margin: 0; font-size: clamp(3.2rem, 6.2vw, 6rem); line-height: .96; letter-spacing: -.052em; font-weight: 900; }
.cs-lede { max-width: 690px; margin: 1.6rem 0 0; color: #adb8ca; font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.75; }
.cs-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.8rem; }
.cs-button { display: inline-flex; min-height: 3.2rem; align-items: center; justify-content: center; gap: .65rem; border: 1px solid transparent; border-radius: .85rem; padding: .85rem 1.25rem; color: #f8fafc; font-size: .9rem; font-weight: 800; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.cs-button:hover { color: #fff; transform: translateY(-2px); }
.cs-button-primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 16px 38px rgba(99,102,241,.25); }
.cs-button-secondary { border-color: rgba(148,163,184,.22); background: rgba(255,255,255,.035); color: #cbd5e1; }
.cs-button-secondary:hover { border-color: rgba(167,139,250,.45); background: rgba(139,92,246,.08); }
.cs-trust { display: flex; flex-wrap: wrap; gap: .75rem 1.15rem; margin: 1.5rem 0 0; padding: 0; list-style: none; color: #7f8a9c; font-size: .76rem; }
.cs-trust li { display: inline-flex; align-items: center; gap: .4rem; }
.cs-trust i { color: #6ee7b7; }
.cs-hero-note { border: 1px solid var(--cs-border); border-radius: 1.25rem; padding: 1.35rem; background: linear-gradient(145deg, rgba(25,25,43,.92), rgba(13,13,23,.95)); box-shadow: 0 28px 60px rgba(0,0,0,.28); }
.cs-note-label { color: #79869a; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.cs-hero-note > p { margin: .65rem 0 1.2rem; color: #e2e8f0; line-height: 1.55; }
.cs-hero-note > div { display: flex; gap: .8rem; align-items: center; border-top: 1px solid var(--cs-border); padding-top: 1rem; color: #9ca7ba; font-size: .78rem; line-height: 1.55; }
.cs-hero-note i { color: #c4b5fd; font-size: 1.25rem; }
.cs-hero-note strong { color: #f1f5f9; }
.cs-proof-section, .cs-story-section, .cs-workflow-section, .cs-outcomes-section, .cs-guardrail-section, .cs-faq-section, .cs-related-section { padding: clamp(4.5rem, 8vw, 7rem) 0; }
.cs-proof-section { border-block: 1px solid rgba(148,163,184,.09); background: rgba(255,255,255,.015); }
.cs-section-head { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 2rem; }
.cs-section-head h2, .cs-sticky-heading h2, .cs-faq-grid h2, .cs-guardrail h2 { margin: .5rem 0 0; font-size: clamp(2rem, 4vw, 3.45rem); line-height: 1.05; letter-spacing: -.035em; }
.cs-section-head > p { max-width: 520px; margin: 0; color: var(--cs-muted); line-height: 1.7; }
.cs-presentation-intro { max-width: 860px; margin: -.55rem 0 1.55rem; border-left: 2px solid rgba(167,139,250,.72); padding: .15rem 0 .15rem .9rem; color: #9faabd; font-size: .84rem; line-height: 1.65; }
.cs-artifact-card { display: grid; grid-template-columns: minmax(280px, .76fr) minmax(360px, 1.24fr); align-items: center; overflow: hidden; border: 1px solid rgba(148,163,184,.18); border-radius: 1.4rem; background: linear-gradient(145deg, rgba(24,24,40,.97), rgba(12,12,21,.98)); box-shadow: 0 36px 80px rgba(0,0,0,.32); }
.cs-video-shell { position: relative; display: grid; min-height: 0; place-items: center; align-self: stretch; padding: 1rem; background: radial-gradient(circle at 50% 45%, rgba(99,102,241,.1), transparent 60%), #050508; }
.cs-video-shell video { width: auto; max-width: 100%; height: clamp(20rem, 34vw, 27rem); max-height: 68vh; display: block; border-radius: .75rem; object-fit: contain; background: #050508; box-shadow: 0 18px 48px rgba(0,0,0,.34); }
.cs-output-badge { position: absolute; top: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: .45rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: .45rem .7rem; background: rgba(8,8,15,.76); color: #ede9fe; font-size: .68rem; font-weight: 800; backdrop-filter: blur(10px); }
.cs-output-badge i { color: #a78bfa; }
.cs-artifact-copy { padding: clamp(1.6rem, 4vw, 3rem); }
.cs-style-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: .75rem 0 .2rem; }
.cs-style-chip { display: inline-flex; min-height: 1.75rem; align-items: center; border: 1px solid rgba(148,163,184,.2); border-radius: 999px; padding: .27rem .62rem; background: rgba(255,255,255,.035); color: #bac4d4; font-size: .68rem; font-weight: 750; letter-spacing: .015em; line-height: 1.2; text-transform: none; }
.cs-style-chip-theme::before { width: .48rem; height: .48rem; flex: none; margin-right: .38rem; border-radius: 50%; background: var(--cs-style-color, #94a3b8); box-shadow: 0 0 0 3px var(--cs-style-glow, rgba(148,163,184,.12)); content: ""; }
.cs-style-chip-theme[data-style-theme="none"] { --cs-style-color: #94a3b8; --cs-style-glow: rgba(148,163,184,.12); }
.cs-style-chip-theme[data-style-theme="cyan"] { --cs-style-color: #22d3ee; --cs-style-glow: rgba(34,211,238,.14); border-color: rgba(34,211,238,.25); color: #a5f3fc; }
.cs-style-chip-theme[data-style-theme="coral"] { --cs-style-color: #fb7185; --cs-style-glow: rgba(251,113,133,.14); border-color: rgba(251,113,133,.25); color: #fecdd3; }
.cs-style-chip-theme[data-style-theme="gold"] { --cs-style-color: #fbbf24; --cs-style-glow: rgba(251,191,36,.14); border-color: rgba(251,191,36,.25); color: #fde68a; }
.cs-artifact-copy h3 { margin: .65rem 0 .8rem; font-size: clamp(1.65rem, 3vw, 2.5rem); line-height: 1.08; }
.cs-artifact-copy > p { color: #aeb8ca; line-height: 1.7; }
.cs-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin: 1.5rem 0; }
.cs-metrics div { border: 1px solid var(--cs-border); border-radius: .75rem; padding: .75rem; background: rgba(255,255,255,.025); }
.cs-metrics dt { color: #718096; font-size: .63rem; font-weight: 700; text-transform: uppercase; }
.cs-metrics dd { margin: .35rem 0 0; color: #f8fafc; font-weight: 800; }
.cs-why { border-left: 2px solid #8b5cf6; padding: .2rem 0 .2rem 1rem; }
.cs-why strong { color: #ddd6fe; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.cs-why p { margin: .35rem 0 0; color: #9ca7ba; font-size: .83rem; line-height: 1.6; }
.cs-attribution { margin-top: 1.35rem !important; color: #68758a !important; font-size: .68rem !important; line-height: 1.6 !important; }
.cs-attribution a { color: #9ca3d8; text-decoration: underline; text-underline-offset: 2px; }
.cs-proof-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.25rem; }
.cs-proof-gallery article { overflow: hidden; border: 1px solid var(--cs-border); border-radius: 1rem; background: rgba(18,18,31,.92); }
.cs-proof-gallery video { width: 100%; aspect-ratio: 9/16; max-height: 16rem; display: block; object-fit: contain; background: #050508; }
.cs-proof-gallery article > div { padding: 1rem; }
.cs-proof-gallery span { color: #a78bfa; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.cs-proof-gallery .cs-style-chips { margin: .65rem 0 .15rem; gap: .35rem; }
.cs-proof-gallery .cs-style-chip { min-height: 1.55rem; padding: .2rem .48rem; color: #bac4d4; font-size: .61rem; font-weight: 750; letter-spacing: .01em; text-transform: none; }
.cs-proof-gallery .cs-style-chip-theme[data-style-theme="cyan"] { color: #a5f3fc; }
.cs-proof-gallery .cs-style-chip-theme[data-style-theme="coral"] { color: #fecdd3; }
.cs-proof-gallery .cs-style-chip-theme[data-style-theme="gold"] { color: #fde68a; }
.cs-proof-gallery h3 { margin: .45rem 0; font-size: 1.05rem; }
.cs-proof-gallery p { margin: 0 0 .7rem; color: #748096; font-size: .73rem; }
.cs-proof-gallery a, .cs-text-link { color: #c4b5fd; font-size: .78rem; font-weight: 800; }
.cs-story-grid { display: grid; grid-template-columns: minmax(280px,.78fr) minmax(0,1.22fr); gap: clamp(3rem, 9vw, 8rem); align-items: start; }
.cs-sticky-heading { position: sticky; top: 6rem; }
.cs-prose { color: #aeb8ca; font-size: 1.02rem; line-height: 1.9; }
.cs-prose p { margin: 0 0 1.35rem; }
.cs-workflow-section { border-block: 1px solid rgba(148,163,184,.09); background: rgba(255,255,255,.015); }
.cs-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.cs-steps li { position: relative; border-top: 1px solid rgba(148,163,184,.18); padding: 1.2rem 1.4rem 0 0; }
.cs-steps li::before { content: ""; position: absolute; top: -.32rem; left: 0; width: .65rem; height: .65rem; border-radius: 50%; background: #8b5cf6; box-shadow: 0 0 0 5px rgba(139,92,246,.12); }
.cs-steps > li > span { color: #5d687a; font-size: .69rem; font-weight: 800; }
.cs-steps h3 { margin: .7rem 0 .45rem; font-size: 1.08rem; }
.cs-steps p { margin: 0; color: #8f9bae; font-size: .82rem; line-height: 1.65; }
.cs-outcomes { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
.cs-outcomes article { position: relative; overflow: hidden; border: 1px solid var(--cs-border); border-radius: 1rem; padding: 1.4rem; background: linear-gradient(145deg, rgba(24,24,40,.82), rgba(13,13,23,.9)); }
.cs-outcomes article > span { color: rgba(167,139,250,.32); font-size: 2.5rem; font-weight: 900; position: absolute; top: .5rem; right: .8rem; }
.cs-outcomes h3 { margin: 0 0 .55rem; font-size: 1.15rem; }
.cs-outcomes p { max-width: 85%; margin: 0; color: #8f9bae; font-size: .84rem; line-height: 1.65; }
.cs-guardrail { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: center; border: 1px solid rgba(110,231,183,.18); border-radius: 1.25rem; padding: clamp(1.5rem,4vw,2.6rem); background: linear-gradient(135deg, rgba(16,185,129,.07), rgba(99,102,241,.05)); }
.cs-guardrail-icon { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 1rem; background: rgba(52,211,153,.1); color: #6ee7b7; font-size: 1.5rem; }
.cs-guardrail h2 { font-size: clamp(1.7rem,3vw,2.6rem); }
.cs-guardrail p { max-width: 820px; margin: .85rem 0 0; color: #9eabba; line-height: 1.75; }
.cs-faq-section { border-block: 1px solid rgba(148,163,184,.09); background: rgba(255,255,255,.015); }
.cs-faq-grid { display: grid; grid-template-columns: minmax(250px,.7fr) minmax(0,1.3fr); gap: clamp(3rem,8vw,7rem); }
.cs-faq-grid > div:first-child > p { color: #8591a4; }
.cs-faq-list details { border-bottom: 1px solid rgba(148,163,184,.14); }
.cs-faq-list summary { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.15rem 0; color: #e2e8f0; font-weight: 750; cursor: pointer; list-style: none; }
.cs-faq-list summary::-webkit-details-marker { display: none; }
.cs-faq-list summary i { color: #8b5cf6; transition: transform 160ms ease; }
.cs-faq-list details[open] summary i { transform: rotate(45deg); }
.cs-faq-list details p { margin: -.25rem 0 1.2rem; color: #8f9bae; line-height: 1.7; }
.cs-related-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; }
.cs-related-grid a { display: flex; flex-direction: column; min-height: 10rem; border: 1px solid var(--cs-border); border-radius: .9rem; padding: 1rem; background: rgba(18,18,31,.82); color: #f8fafc; transition: transform 160ms ease, border-color 160ms ease; }
.cs-related-grid a:hover { transform: translateY(-3px); border-color: rgba(167,139,250,.4); }
.cs-related-grid span { color: #778397; font-size: .65rem; text-transform: uppercase; }
.cs-related-grid strong { margin-top: .5rem; font-family: "Outfit",sans-serif; font-size: 1.08rem; }
.cs-related-grid small { margin-top: auto; color: #b9a9ff; font-weight: 750; }
.cs-cta { padding: 0 0 clamp(5rem,9vw,8rem); }
.cs-cta-card { display: flex; justify-content: space-between; gap: 2rem; align-items: center; border: 1px solid rgba(167,139,250,.22); border-radius: 1.35rem; padding: clamp(1.6rem,5vw,3.4rem); background: radial-gradient(circle at 10% 10%, rgba(139,92,246,.14), transparent 26rem), #12121f; }
.cs-cta-card h2 { margin: .55rem 0 0; max-width: 650px; font-size: clamp(2rem,4vw,3.4rem); line-height: 1.02; letter-spacing: -.04em; }
.cs-cta-card p { margin: .85rem 0 0; color: #929eb0; }
.cs-cta-card .cs-actions { flex-shrink: 0; margin-top: 0; }
.cs-page a:focus-visible, .cs-page button:focus-visible, .cs-page summary:focus-visible, .cs-page video:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 4px; border-radius: .35rem; }
@media (max-width: 960px) {
  .cs-hero-grid, .cs-artifact-card, .cs-story-grid, .cs-faq-grid { grid-template-columns: 1fr; }
  .cs-hero-note { max-width: 520px; }
  .cs-video-shell { min-height: 0; padding: 1rem; }
  .cs-video-shell video { height: min(28rem, 68vh); min-height: 0; }
  .cs-sticky-heading { position: static; }
  .cs-steps, .cs-related-grid { grid-template-columns: repeat(2,1fr); gap: 1.5rem 1rem; }
  .cs-cta-card { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 700px) {
  .cs-container { width: min(100% - 2rem, 1160px); }
  .cs-hero { padding-top: 3.7rem; }
  .cs-hero h1 { font-size: clamp(2.75rem,14vw,4.25rem); }
  .cs-section-head { align-items: flex-start; flex-direction: column; }
  .cs-presentation-intro { margin-top: -1rem; }
  .cs-video-shell { min-height: 0; }
  .cs-video-shell video { width: auto; max-width: 100%; height: min(27rem, 72vh); min-height: 0; }
  .cs-metrics, .cs-proof-gallery, .cs-outcomes, .cs-steps, .cs-related-grid { grid-template-columns: 1fr; }
  .cs-proof-gallery video { max-height: 20rem; }
  .cs-steps { gap: 1.5rem; }
  .cs-guardrail { grid-template-columns: 1fr; }
  .cs-actions, .cs-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-page *, .cs-page *::before, .cs-page *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}