@view-transition { navigation: auto; }
.route-hero { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(var(--space-section), 6vw, 80px); align-items: end; padding-block: clamp(var(--space-page-lg), 9vw, 112px); border-bottom: 1px solid var(--marketing-border); }
.route-hero > div { display: grid; gap: var(--space-2xl); }
.route-hero h1 { max-width: 13ch; }
.route-hero .lead { max-width: 580px; color: var(--marketing-muted); font-size: 18px; }
.route-main > .section { border-bottom: 1px solid var(--marketing-border); }
.route-main > .section:last-child { border-bottom: 0; }
.section-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); max-width: 760px; margin-bottom: var(--space-page); }
.section-intro p, .section-copy { max-width: 640px; color: var(--marketing-muted); }
.evidence-grid, .platform-grid, .agent-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
.evidence-card, .platform-card, .agent-step, .price-plan { display: grid; align-content: start; gap: var(--space-xl); padding: var(--space-3xl); border: 1px solid var(--marketing-border); border-radius: var(--rounded-lg); background: var(--marketing-surface); }
.evidence-card small, .platform-card small, .agent-step small, .price-plan small { color: var(--marketing-accent); font: 600 12px/1.5 var(--font-mono); }
.evidence-card p, .platform-card p, .agent-step p, .price-plan > p:not(.price) { color: var(--marketing-muted); font-size: 14px; }
.product-shot { margin: 0; min-width: 0; overflow: hidden; border: 1px solid var(--marketing-border); border-radius: var(--rounded-lg); background: var(--marketing-surface); box-shadow: var(--shadow-raised); }
.product-shot picture, .product-shot img { display: block; width: 100%; }
.product-shot img { height: auto; }
.product-shot figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-xl); padding: var(--space-xl) var(--space-2xl); border-top: 1px solid var(--marketing-border); color: var(--marketing-muted); font-size: 12px; }
.shot-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-section); align-items: start; }
.shot-section > div { display: grid; gap: var(--space-2xl); max-width: 56ch; }
.shot-section > div p { color: var(--marketing-muted); }
.shot-open { display: inline-flex; align-items: center; min-height: var(--space-touch-target); color: var(--marketing-text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--marketing-accent); text-underline-offset: var(--space-sm); }
.truth-strip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg) var(--space-3xl); align-items: start; padding: var(--space-3xl); border: 1px solid var(--marketing-border); border-radius: var(--rounded-md); background: var(--marketing-surface-2); }
.truth-strip strong { color: var(--marketing-accent); font: 600 12px/1.5 var(--font-mono); text-transform: uppercase; }
.truth-strip p { color: var(--marketing-muted); font-size: 14px; }
.truth-strip strong { padding-top: 2px; }
.truth-strip .text-link { grid-column: 2; justify-self: start; }

.install-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-page); align-items: center; }
.install-copy { display: grid; gap: var(--space-2xl); }
.install-copy p { color: var(--marketing-muted); }
.install-code { overflow: hidden; border: 1px solid var(--marketing-border); border-radius: var(--rounded-lg); background: var(--marketing-bg); }
.code-heading, .code-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); padding: var(--space-xl) var(--space-2xl); color: var(--marketing-muted); font-size: 12px; }
.code-heading { border-bottom: 1px solid var(--marketing-border); }
.code-footer { border-top: 1px solid var(--marketing-border); }
.install-code pre { margin: 0; padding: var(--space-3xl); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--marketing-text); }
.copy-button { min-height: var(--space-touch-target); padding-inline: var(--space-2xl); border: 1px solid var(--marketing-border); border-radius: var(--rounded-md); background: var(--marketing-surface); color: var(--marketing-text); font-size: 12px; }
.quick-path { margin: 0; padding: 0; list-style: none; counter-reset: path; }
.quick-path li { counter-increment: path; display: grid; grid-template-columns: var(--space-page) minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-3xl); border-bottom: 1px solid var(--marketing-border); }
.quick-path li::before { content: '0' counter(path); color: var(--marketing-accent); font: 600 12px/1.7 var(--font-mono); }
.quick-path strong { display: block; font-family: var(--font-marketing); font-size: 18px; }
.quick-path p { margin-top: var(--space-lg); color: var(--marketing-muted); font-size: 14px; }

.agent-call { margin: 0; padding: var(--space-3xl); overflow-x: auto; border: 1px solid var(--marketing-border); border-radius: var(--rounded-lg); background: var(--marketing-bg); color: var(--marketing-text); font-size: 14px; }
.agent-call strong { color: var(--marketing-accent); }
.agent-note { margin-top: var(--space-2xl); color: var(--marketing-muted); font-size: 14px; }

.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
.pricing-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Three cards share row tracks (label, name, price, summary, list, action) so the rows line up across cards. */
@supports (grid-template-rows: subgrid) { @media (min-width: 901px) { .pricing-grid-3 > .price-plan { grid-row: span 6; grid-template-rows: subgrid; row-gap: var(--space-xl); } } }
.price-plan { min-height: 100%; }
.price-plan.pro { border-color: var(--marketing-accent); background: var(--marketing-surface-2); }
.price { margin-top: var(--space-lg); font-size: 48px; line-height: 1; }
.price span { color: var(--marketing-muted); font: 400 12px var(--font-ui); letter-spacing: 0; }
.price-plan ul { margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.price-plan li { padding-block: var(--space-xl); border-bottom: 1px solid var(--marketing-border); font-size: 14px; }
.price-plan .button { align-self: end; width: 100%; margin-top: var(--space-2xl); }
.billing-definition { margin-top: var(--space-3xl); color: var(--marketing-muted); font-size: 13px; }
.faq { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1fr); gap: var(--space-page); }
.faq details { border-bottom: 1px solid var(--marketing-border); }
.faq summary { display: flex; align-items: center; min-height: var(--space-touch-target); padding-block: var(--space-2xl); cursor: pointer; font-weight: 600; }
.faq p { padding-bottom: var(--space-3xl); color: var(--marketing-muted); font-size: 14px; }
.faq a { text-decoration: underline; text-underline-offset: var(--space-sm); }
.route-final { display: grid; justify-items: center; gap: var(--space-3xl); text-align: center; }
.route-final .actions { justify-content: center; }

.redirect-card { display: grid; justify-items: start; gap: var(--space-2xl); max-width: 720px; padding: var(--space-page-lg) 0; }
.redirect-card p { color: var(--marketing-muted); }

/* Legal and definition pages keep the same shell. */
.legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3xl); padding-block: var(--space-page-lg); }
.legal pre { max-width: 100%; overflow-x: auto; }
.legal h1 { max-width: 16ch; }
.legal .lead { max-width: 70ch; color: var(--marketing-muted); }
.legal-block { display: grid; gap: var(--space-xl); padding-block: var(--space-3xl); border-top: 1px solid var(--marketing-border); }
.legal-block h2 { font-size: 24px; }
.legal-block p, .legal-block li { max-width: 76ch; color: var(--marketing-muted); font-size: 14px; }
.legal-block ul { display: grid; gap: var(--space-lg); margin: 0; padding-left: var(--space-3xl); }
.legal-block a { color: var(--marketing-text); text-decoration: underline; text-underline-offset: var(--space-sm); }
.legal-actions { display: flex; flex-wrap: wrap; gap: var(--space-xl); }

@media (max-width: 900px) {
  .route-hero, .section-intro, .shot-section, .install-layout, .faq { grid-template-columns: 1fr; }
  .evidence-grid, .platform-grid, .agent-steps, .pricing-grid-3 { grid-template-columns: 1fr; }
  .truth-strip { grid-template-columns: 1fr; }
  .shot-section > .product-shot { width: fit-content; max-width: 100%; justify-self: center; }
  .shot-section > .product-shot picture, .shot-section > .product-shot img { width: auto; max-width: 100%; margin-inline: auto; }
}
@media (max-width: 640px) {
  .route-hero { padding-block: var(--space-page-lg); }
  .route-hero .lead { font-size: 16px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-plan { padding: var(--space-2xl); }
  .route-final { justify-items: start; text-align: left; }
  .route-final .actions { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
@media (max-width: 900px) { .truth-strip .text-link { grid-column: auto; } }

/* Pricing: what a credit is and how it ticks down. */
.credit-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-page); align-items: start; }
.credit-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.credit-table th { padding: var(--space-lg) 0; border-bottom: 1px solid var(--marketing-border); color: var(--marketing-muted); font: 500 13px/1.2 var(--font-engrave); letter-spacing: .14em; text-align: left; text-transform: uppercase; }
.credit-table th:last-child, .credit-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.credit-table td { padding: var(--space-xl) 0; border-bottom: 1px solid color-mix(in srgb, var(--marketing-border) 60%, transparent); color: var(--marketing-text); }
.credit-table td:last-child { color: var(--set-brass-light); font-weight: 600; }
.credit-steps { display: grid; gap: var(--space-2xl); margin: 0; padding-left: var(--space-3xl); color: var(--marketing-muted); font-size: 16px; line-height: 1.5; }
.credit-steps strong { color: var(--marketing-text); }
@media (max-width: 900px) { .credit-layout { grid-template-columns: 1fr; gap: var(--space-3xl); } }

/* What is BugTape: four labelled facts in a 2 x 2 grid. */
.route-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.route-list li { display: grid; gap: var(--space-md); align-content: start; padding: var(--space-3xl); border: 1px solid color-mix(in srgb, var(--set-brass) 30%, transparent); border-radius: var(--rounded-xs); background: var(--marketing-surface); }
.route-list span { color: var(--set-brass-light); font: 500 14px/1.2 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; }
.route-list strong { color: var(--marketing-text); font: 600 24px/1.2 var(--font-marketing); letter-spacing: -.01em; }
.route-list p { color: var(--marketing-muted); font-size: 16px; line-height: 1.5; }
@media (max-width: 900px) { .route-list { grid-template-columns: 1fr; } }

/* How it works: each problem next to what BugTape does about it. */
.pain-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--marketing-border); }
.pain-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); padding-block: var(--space-2xl); border-bottom: 1px solid var(--marketing-border); }
.pain-list .pain-head p { color: var(--marketing-muted); font: 500 12px/1.4 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; }
.pain-list .pain { color: var(--marketing-text); font-weight: 600; }
.pain-list .fix { color: var(--marketing-muted); }
.evidence-grid.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: var(--space-section); }
.section .truth-strip, .section > .small-note { margin-top: var(--space-3xl); }
.shot-section + .evidence-grid, .evidence-grid + .shot-section { margin-top: var(--space-section); }

/* Who it's for: jump links, then one section per kind of team. */
.jump-links { display: flex; flex-wrap: wrap; gap: var(--space-md); padding-block: var(--space-3xl); }
.jump-links a { display: inline-flex; align-items: center; min-height: var(--space-touch-target); padding: 0 var(--space-2xl); border: 1px solid var(--marketing-border); border-radius: var(--rounded-md); background: var(--marketing-surface); color: var(--marketing-text); font-size: 14px; }
.jump-links a:hover { border-color: var(--marketing-accent); }
.segment { scroll-margin-top: var(--space-page-lg); }
.segment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-page); }
.segment-col h3 { margin-bottom: var(--space-xl); font-size: 18px; }
.segment-list { display: grid; gap: var(--space-lg); margin: 0; padding-left: var(--space-3xl); color: var(--marketing-muted); }
.segment-list.fixes li::marker { color: var(--marketing-accent); }
.segment-list a { color: var(--marketing-text); text-decoration: underline; text-underline-offset: var(--space-sm); }

/* Compare: BugTape's own facts in a two-column table. */
.compare-card p strong { color: var(--marketing-text); }
.compare-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.compare-table th, .compare-table td { padding: var(--space-xl) 0; border-bottom: 1px solid var(--marketing-border); text-align: left; vertical-align: top; }
.compare-table th { width: 40%; padding-right: var(--space-3xl); color: var(--marketing-text); font-weight: 600; }
.compare-table td { color: var(--marketing-muted); }

@media (max-width: 900px) {
  .pain-list li, .segment-grid, .evidence-grid.grid-2 { grid-template-columns: 1fr; gap: var(--space-lg); }
  .pain-list .pain-head { display: none; }
  .compare-table th { width: auto; }
  .compare-table tr { display: grid; }
  .compare-table th { padding-bottom: 0; border-bottom: 0; }
}

/* Text beside a portrait or small screenshot; the shot keeps a readable size. */
.split-shot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--space-page); align-items: center; }
.split-shot > div { display: grid; gap: var(--space-2xl); max-width: 56ch; }
.split-shot > div p { color: var(--marketing-muted); }
.split-shot + .evidence-grid, .evidence-grid + .split-shot { margin-top: var(--space-section); }
.wide-shot { margin-top: var(--space-section); }
@media (max-width: 900px) {
  .split-shot { grid-template-columns: 1fr; gap: var(--space-3xl); }
  .split-shot > .product-shot { justify-self: center; max-width: 440px; }
}
/* Trust page: subprocessor table; scrolls sideways on phones instead of overflowing the page. */
.table-scroll { max-width: 100%; overflow-x: auto; }
.trust-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.trust-table th { padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; border-bottom: 1px solid var(--marketing-border); color: var(--marketing-muted); font: 500 13px/1.2 var(--font-engrave); letter-spacing: .14em; text-align: left; text-transform: uppercase; }
.trust-table td { padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; border-bottom: 1px solid color-mix(in srgb, var(--marketing-border) 60%, transparent); color: var(--marketing-muted); vertical-align: top; }
.trust-table td:first-child { color: var(--marketing-text); font-weight: 600; }

/* The problem, as two loops and six pains that each turn into their fix.
   Static by default (no-JS, reduced motion); with motion the steps light in order
   once the block is on screen: the loop without BugTape crawls and stalls, the
   loop with BugTape runs straight through. */
.loops { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; margin-block: var(--space-3xl); }
@media (min-width: 901px) {
  .loops { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  /* Both lanes share one 8-step grid, so the short lane visibly ends early. */
  .loop-track { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; }
  .loop-track::before { display: none; }
  .loops .loop-track li { padding: var(--space-2xl) var(--space-md) 0 0; font-size: 14px; }
  .loop-track li::before { top: 0; }
  .loop-track li:not(:last-child) { background: linear-gradient(var(--marketing-border), var(--marketing-border)) no-repeat 14px 6px / calc(100% - 14px) 2px; }
  .loop-good .loop-track li:not(:last-child) { background-image: linear-gradient(var(--marketing-accent), var(--marketing-accent)); }
  .loop-bad .is-back::after { margin-top: var(--space-xs); }
}
.loop { position: relative; padding: var(--space-2xl); border: 1px solid var(--marketing-border); border-radius: var(--rounded-sm); background: color-mix(in srgb, var(--marketing-surface) 55%, transparent); }
.loop-bad { background: repeating-linear-gradient(-45deg, transparent 0 12px, color-mix(in srgb, var(--marketing-danger) 5%, transparent) 12px 13px), color-mix(in srgb, var(--marketing-surface) 45%, transparent); }
.loop-good { border-color: color-mix(in srgb, var(--marketing-accent) 45%, var(--marketing-border)); box-shadow: 0 0 48px color-mix(in srgb, var(--set-glow) 12%, transparent); }
.loop-title { margin: 0 0 var(--space-xl); color: var(--marketing-muted); font: 500 12px/1 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; }
.loop-good .loop-title { color: var(--marketing-accent); }
.loop-track { position: relative; display: grid; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.loop-track::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--marketing-border); }
.loop-good .loop-track::before { background: linear-gradient(var(--marketing-accent), color-mix(in srgb, var(--marketing-accent) 30%, transparent)); }
.loop-track li { position: relative; padding-left: var(--space-3xl); color: var(--marketing-text); font-size: 16px; line-height: 1.35; }
.loop-track li::before { content: ''; position: absolute; left: 0; top: .3em; box-sizing: border-box; width: 14px; height: 14px; border: 2px solid var(--marketing-border); border-radius: 50%; background: var(--marketing-bg); }
.loop-good .loop-track li::before { border-color: var(--marketing-accent); }
.loop-good .loop-track .is-end::before { background: var(--marketing-accent); box-shadow: 0 0 12px var(--marketing-accent); }
.loop-good .loop-track .is-end { font-weight: 600; }
.loop-bad .is-wait { color: var(--marketing-muted); font-style: italic; }
.loop-bad .is-wait::after { content: ' · · ·'; letter-spacing: .1em; }
.loop-bad .is-fail::before, .loop-bad .is-end::before { border-color: var(--marketing-danger); }
.loop-bad .is-back { color: var(--marketing-muted); }
.loop-bad .is-back::after { content: 'and the loop starts again'; display: block; margin-top: var(--space-xs); color: var(--marketing-danger); font: 500 11px/1.2 var(--font-engrave); letter-spacing: .12em; text-transform: uppercase; }
.loop-bad .is-end { color: var(--marketing-muted); }
.loop-head { display: none; }

html.motion .loops.rv .loop-track li { opacity: .3; transition: opacity 400ms ease; }
html.motion .loops.is-in .loop-track li { opacity: 1; transition-delay: var(--lit, 0s); }
html.motion .loops.is-in .loop-good li:nth-child(1) { --lit: .3s; }
html.motion .loops.is-in .loop-good li:nth-child(2) { --lit: .6s; }
html.motion .loops.is-in .loop-good li:nth-child(3) { --lit: .9s; }
html.motion .loops.is-in .loop-good li:nth-child(4) { --lit: 1.2s; }
html.motion .loops.is-in .loop-good li:nth-child(5) { --lit: 1.5s; }
html.motion .loops.is-in .loop-bad li:nth-child(1) { --lit: .3s; }
html.motion .loops.is-in .loop-bad li:nth-child(2) { --lit: 1s; }
html.motion .loops.is-in .loop-bad li:nth-child(3) { --lit: 1.7s; }
html.motion .loops.is-in .loop-bad li:nth-child(4) { --lit: 3.6s; }
html.motion .loops.is-in .loop-bad li:nth-child(5) { --lit: 4.3s; }
html.motion .loops.is-in .loop-bad li:nth-child(6) { --lit: 5s; }
html.motion .loops.is-in .loop-bad li:nth-child(7) { --lit: 5.7s; }
html.motion .loops.is-in .loop-bad li:nth-child(8) { --lit: 6.4s; }
html.motion .loops.is-in .loop-good .is-end::before { animation: lit-pulse 1.6s 1.8s ease-out both; }
html.motion .loops.is-in .loop-bad .is-wait::after { animation: wait-dots 1.2s 1.7s steps(4) 2 both; }
@keyframes lit-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--marketing-accent) 70%, transparent); } 100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--marketing-accent) 0%, transparent), 0 0 12px var(--marketing-accent); } }
@keyframes wait-dots { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.pain-relief { display: grid; gap: var(--space-2xl); margin: 0; padding: 0; list-style: none; }
.pr-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); grid-template-rows: auto auto; align-items: stretch; scroll-margin-top: 140px; }
.pr-side { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--space-lg); padding: var(--space-2xl); border: 1px solid var(--marketing-border); border-radius: var(--rounded-sm); }
.pr-text { display: grid; align-content: start; gap: var(--space-md); }
.pr-how { margin: 0; color: var(--marketing-muted); font-size: 16px; }
.pr-how b { color: var(--marketing-accent); }
.pr-how code { color: var(--marketing-text); font-size: 14px; }
.pr-pain { grid-column: 1; background: color-mix(in srgb, var(--marketing-surface) 40%, transparent); }
.pr-fix { grid-column: 3; border-color: color-mix(in srgb, var(--marketing-accent) 40%, var(--marketing-border)); background: linear-gradient(135deg, color-mix(in srgb, var(--set-glow) 9%, var(--marketing-surface)), var(--marketing-surface)); }
.pr-tag { display: flex; align-items: center; gap: var(--space-md); margin: 0; color: var(--marketing-muted); font: 500 11px/1 var(--font-engrave); letter-spacing: .16em; text-transform: uppercase; }
.pr-fix .pr-tag { color: var(--marketing-accent); }
.pr-n { color: var(--marketing-text); letter-spacing: .08em; }
.pr-pain h3 { margin: 0; font-size: 18px; line-height: 1.35; }
.pr-why { margin: 0; color: var(--marketing-muted); font-size: 16px; }
.pr-why b { color: var(--marketing-text); }
.pr-relief { margin: 0; color: var(--marketing-text); font-size: 18px; font-weight: 600; line-height: 1.4; }
.pr-turn { position: relative; grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: center; width: 44px; height: 44px; border: 1px solid color-mix(in srgb, var(--set-brass) 60%, transparent); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--set-glow) 22%, transparent), transparent 70%); }
.pr-turn::after { content: ''; position: absolute; left: 13px; top: 15px; width: 10px; height: 10px; border-top: 2px solid var(--marketing-accent); border-right: 2px solid var(--marketing-accent); transform: rotate(45deg); }

/* Helper visuals inside each side. */
.pv { align-self: stretch; display: grid; align-content: start; gap: var(--space-sm); min-height: 116px; margin-top: 0; padding: var(--space-lg); border-radius: var(--rounded-xs); background: color-mix(in srgb, var(--marketing-bg) 72%, transparent); font-size: 13px; }
.pv-bad { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marketing-danger) 22%, transparent); }
.pv-good { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marketing-accent) 30%, transparent); }
.pv p { margin: 0; }
.pv-note { color: var(--marketing-muted); font-style: italic; }
.pv-bubble { justify-self: start; padding: 6px 12px; border-radius: 12px 12px 12px 2px; background: var(--marketing-surface-2); color: var(--marketing-text); }
.pv-q { justify-self: end; padding: 4px 10px; border-radius: 12px 12px 2px 12px; background: color-mix(in srgb, var(--marketing-accent) 14%, transparent); color: var(--marketing-muted); }
.pv-wait { color: var(--marketing-danger); font: 500 11px/1 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; }
.pv-ev { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pv-ev li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--space-md); color: var(--marketing-text); font-family: var(--font-mono); font-size: 13px; }
.pv-ev b { color: var(--marketing-muted); font: 500 11px/1.6 var(--font-engrave); letter-spacing: .12em; text-transform: uppercase; }
.pv-ev .is-bad { color: var(--marketing-danger); }
.pv-stamp { justify-self: start; padding: 6px 12px; border: 2px solid var(--marketing-danger); border-radius: var(--rounded-xs); color: var(--marketing-danger); font: 600 13px/1 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-4deg); }
.pv-replay { grid-template-rows: 1fr auto; align-content: stretch; }
.pv-sk { display: block; width: 55%; height: 8px; margin: 12px 14px 0; border-radius: var(--rounded-xs); background: var(--marketing-border); }
.pv-sk.is-short { width: 35%; margin-top: 8px; }
.pv-sk.is-box { width: 30%; height: 24px; margin-top: 10px; opacity: .6; }
.pv-screen { position: relative; display: block; min-height: 64px; border-radius: 4px; background: var(--marketing-surface-2); overflow: hidden; }
.pv-btn { position: absolute; right: 14px; bottom: 12px; padding: 4px 10px; border-radius: 4px; background: var(--marketing-accent); color: var(--marketing-accent-ink); font: 600 11px/1.2 var(--font-ui); font-style: normal; }
.pv-cursor { position: absolute; left: 20%; top: 20%; width: 0; height: 0; border-left: 7px solid var(--marketing-text); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transform: rotate(-30deg); }
.pv-scrub { display: block; height: 4px; border-radius: 0; background: var(--marketing-border); overflow: hidden; }
.pv-scrub i { display: block; width: 100%; height: 100%; background: var(--marketing-accent); }
.pv-pile { position: relative; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; }
.pv-pile span { padding: 10px 4px; border-radius: 4px; background: var(--marketing-surface-2); color: var(--marketing-muted); font-size: 11px; text-align: center; box-shadow: 0 6px 12px var(--marketing-room); }
.pv-pile span:nth-child(odd) { transform: rotate(-4deg); }
.pv-pile span:nth-child(even) { transform: rotate(3deg) translateY(6px); }
.pv-issue { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 10px 12px; border-radius: 4px; background: var(--marketing-surface-2); color: var(--marketing-text); font-family: var(--font-mono); }
.pv-issue b { padding: 2px 8px; border-radius: 4px; background: var(--marketing-accent); color: var(--marketing-accent-ink); font-family: var(--font-ui); }
.pv-req { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 10px 12px; border-radius: 4px; background: var(--marketing-surface-2); color: var(--marketing-text); font-family: var(--font-mono); }
.pv-req b { color: var(--marketing-accent); font: 600 11px/1 var(--font-engrave); letter-spacing: .12em; text-transform: uppercase; }
.pv-spin { width: 14px; height: 14px; border: 2px solid var(--marketing-border); border-top-color: var(--marketing-muted); border-radius: 50%; }
.pv-fog, .pv-people { grid-template-columns: repeat(8, 16px); align-content: center; column-gap: var(--space-md); }
.pv-fog i, .pv-people i { width: 16px; height: 16px; border-radius: 50%; background: var(--marketing-border); }
.pv-fog i { opacity: .45; filter: blur(1px); }
.pv-people i.is-hit { background: var(--marketing-accent); box-shadow: 0 0 10px color-mix(in srgb, var(--marketing-accent) 60%, transparent); }
.pv-fog .pv-note, .pv-people .pv-note { grid-column: 1 / -1; font-style: normal; }
.pv-people .pv-note b { color: var(--marketing-text); }
.pv-paste { max-height: 64px; overflow: hidden; color: var(--marketing-muted); font: 12px/1.5 var(--font-mono); -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.pv-mcp { color: var(--marketing-text); font: 13px/1.5 var(--font-mono); }
.pv-mcp.is-done { color: var(--marketing-accent); }

html.motion .pr-row.is-in .pv-cursor { animation: pv-cursor 2.4s .4s var(--ease-out-expo) both; }
html.motion .pr-row.is-in .pv-scrub i { animation: pv-scrub 2.4s .4s linear both; }
html.motion .pr-row.is-in .pv-spin { animation: pv-spin 1s linear 6; }
html.motion .pr-row.is-in .pv-q { animation: pv-pop 500ms var(--ease-spring) both; }
html.motion .pr-row.is-in .pv-q:nth-child(3) { animation-delay: 300ms; }
html.motion .pr-row.is-in .pv-q:nth-child(4) { animation-delay: 600ms; }
html.motion .pr-row.is-in .pv-good { animation: pv-glow 1.4s .6s ease-out both; }
@keyframes pv-cursor { from { left: 20%; top: 20%; } to { left: calc(100% - 44px); top: calc(100% - 22px); } }
@keyframes pv-scrub { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes pv-spin { to { transform: rotate(360deg); } }
@keyframes pv-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } }
@keyframes pv-glow { from { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marketing-accent) 30%, transparent), 0 0 0 0 color-mix(in srgb, var(--set-glow) 40%, transparent); } 50% { box-shadow: inset 0 0 0 1px var(--marketing-accent), 0 0 24px 0 color-mix(in srgb, var(--set-glow) 30%, transparent); } }

@media (max-width: 900px) {
  .loops { grid-template-columns: minmax(0, 1fr); }
  .pr-row { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--space-md); }
  .pr-side, .pr-pain, .pr-fix { grid-column: auto; grid-row: auto; grid-template-rows: auto auto; }
  .pr-turn { grid-column: auto; grid-row: auto; }
  .pr-turn { transform: rotate(90deg); }
}

/* Developers: a side menu that follows the page, one section per SDK, and the data flow. */
.dev-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-page); align-items: start; }
.dev-main > .section { border-bottom: 1px solid var(--marketing-border); scroll-margin-top: 150px; }
.dev-main > .section:last-child { border-bottom: 0; }
.dev-nav { position: sticky; top: 150px; padding-block: var(--space-page-lg); }
.dev-nav-title { margin: 0 0 var(--space-lg); color: var(--set-brass-light); font: 500 11px/1 var(--font-engrave); letter-spacing: .16em; text-transform: uppercase; }
.dev-nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--marketing-border); }
.dev-nav-group { margin: var(--space-lg) 0 var(--space-xs); padding-left: var(--space-lg); color: var(--marketing-muted); font: 500 11px/1.2 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; }
.dev-nav-group:first-child { margin-top: 0; }
.dev-nav a { position: relative; display: block; padding: 6px 0 6px var(--space-lg); color: var(--marketing-muted); font-size: 14px; text-decoration: none; transition: color var(--motion-fast); }
.dev-nav a:hover { color: var(--marketing-text); }
.dev-nav a[aria-current="true"] { color: var(--marketing-text); }
.dev-nav a[aria-current="true"]::before { content: ''; position: absolute; left: -1px; top: 4px; bottom: 4px; width: 2px; background: var(--marketing-accent); box-shadow: 0 0 8px var(--marketing-accent); }
.dev-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-3xl); align-items: start; }
.dev-copy { display: grid; gap: var(--space-xl); }
.dev-copy h2 { margin: 0; }
.dev-main > .section { padding-block: var(--space-page-lg); }
.dev-section h2 { font-size: 32px; line-height: 1.15; }
.dev-copy .kit-list { display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.dev-copy .kit-list li { position: relative; padding-left: var(--space-3xl); color: var(--marketing-text); line-height: 1.45; }
.dev-copy .kit-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--marketing-accent); font: 700 14px/1.6 var(--font-ui); }
.dev-copy .kit-list li.no { color: var(--marketing-muted); }
.dev-copy .kit-list li.no::before { content: '–'; color: var(--marketing-muted); }
.dev-steps { display: grid; gap: var(--space-md); margin: 0; padding-left: var(--space-2xl); color: var(--marketing-muted); }
.dev-steps code { color: var(--marketing-text); }
.flow-rail { position: relative; display: grid; gap: var(--space-2xl); margin: 0; padding: 0; list-style: none; counter-reset: rail; }
.flow-rail::before { content: ''; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(var(--marketing-accent), color-mix(in srgb, var(--marketing-accent) 20%, var(--marketing-border))); }
.flow-rail li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.fr-n { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--marketing-accent); border-radius: 50%; background: var(--marketing-bg); color: var(--marketing-accent); font: 600 14px/1 var(--font-mono); box-shadow: 0 0 16px color-mix(in srgb, var(--set-glow) 25%, transparent); }
.flow-rail h3 { margin: 6px 0 var(--space-md); font-size: 18px; }
.flow-rail p { margin: 0; max-width: 68ch; color: var(--marketing-muted); }
.flow-rail .fr-where { margin-top: var(--space-md); color: var(--set-brass-light); font: 500 11px/1 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; }
.api-table { display: grid; border: 1px solid var(--marketing-border); border-radius: var(--rounded-sm); overflow: hidden; }
.api-row { display: grid; grid-template-columns: 160px minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-xl); padding: var(--space-lg) var(--space-xl); border-top: 1px solid var(--marketing-border); color: var(--marketing-muted); font-size: 14px; }
.api-row:first-child { border-top: 0; }
.api-head { color: var(--marketing-muted); font: 500 11px/1.4 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; background: color-mix(in srgb, var(--marketing-surface) 50%, transparent); }
.api-row span:first-child { color: var(--marketing-text); font-weight: 600; }
.dev-docs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .dev-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dev-nav { top: 96px; z-index: 5; margin-inline: calc(-1 * var(--space-2xl)); padding: var(--space-md) var(--space-2xl); background: color-mix(in srgb, var(--marketing-room) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--marketing-border); }
  .dev-nav-title, .dev-nav-group { display: none; }
  .dev-nav ul { display: flex; gap: var(--space-xs); overflow-x: auto; border-left: 0; scrollbar-width: none; }
  .dev-nav a { padding: 6px 12px; border: 1px solid var(--marketing-border); border-radius: var(--rounded-sm); white-space: nowrap; font-size: 13px; }
  .dev-nav a[aria-current="true"] { border-color: var(--marketing-accent); }
  .dev-nav a[aria-current="true"]::before { display: none; }
  .dev-split { grid-template-columns: minmax(0, 1fr); }
  .dev-main > .section { scroll-margin-top: 160px; }
}
@media (max-width: 760px) {
  .api-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .api-head { display: none; }
  .dev-docs { grid-template-columns: minmax(0, 1fr); }
}
/* Security page: the facts at a glance. */
.glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); margin: var(--space-3xl) 0 0; padding: 0; list-style: none; }
.glance li { display: grid; gap: var(--space-sm); padding: var(--space-xl); border: 1px solid var(--marketing-border); border-radius: var(--rounded-sm); background: color-mix(in srgb, var(--marketing-surface) 60%, transparent); }
.glance b { color: var(--marketing-accent); font: 500 12px/1.2 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; }
.glance span { color: var(--marketing-text); font-size: 14px; }
@media (max-width: 760px) { .glance { grid-template-columns: minmax(0, 1fr); } }