/* Product pages extend the primary site's marketing-base, workforce-motion and
   site-refresh styles. Brand tokens, fonts, navigation and buttons are shared. */
.brand-page { line-height: 1.75; }
.skip { position: absolute; top: -100px; left: 20px; z-index: 200; padding: 12px 20px; background: var(--panel); color: var(--text); }
.skip:focus { top: 8px; }
.brand-page .shell { width: var(--page-width); margin-inline: auto; }
.brand-page .hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(28px,5vw,80px); padding: clamp(64px,7vw,112px) 0; }
.eyebrow, .section-label { color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; line-height: 1.7; margin: 0 0 24px; }
.brand-page .hero h1 { font-size: clamp(44px,4.8vw,92px); line-height: 1.03; font-weight: 600; letter-spacing: -.055em; margin: 0 0 28px; text-wrap: balance; }
.brand-page .hero h1 em { color: var(--accent); font-style: normal; }
.brand-page .hero p { font-size: clamp(18px,1.45vw,25px); line-height: 1.5; letter-spacing: -.025em; max-width: 38ch; color: #e1e1e1; margin: 0 0 28px; }
.brand-page .hero figure { width: 100%; margin: 0; }
.brand-page .article { border-top: 1px solid var(--border); padding: clamp(54px,6vw,96px) 0; }
.brand-page .body { max-width: 900px; width: var(--page-width); margin: auto; }
.brand-page .answer { font-size: clamp(20px,1.7vw,28px); font-weight: 500; line-height: 1.6; letter-spacing: -.025em; color: var(--text); padding-bottom: 42px; margin: 0; border-bottom: 1px solid #393939; }
.brand-page .body section { margin-top: clamp(48px,5vw,80px); }
.brand-page .body h2 { font-size: clamp(30px,3.2vw,48px); line-height: 1.13; letter-spacing: -.04em; font-weight: 500; margin: 0 0 24px; text-wrap: balance; }
.brand-page .body h3 { font-size: clamp(20px,1.6vw,28px); font-weight: 500; line-height: 1.3; letter-spacing: -.025em; margin: 0 0 14px; color: var(--text); }
.brand-page .body p, .brand-page .body li { font-size: clamp(15px,1.15vw,19px); color: var(--text-dim); line-height: 1.8; }
.brand-page .body p { margin: 0 0 20px; }
.brand-page .body > .answer { color: var(--text); font-size: clamp(20px,1.7vw,28px); }
.brand-page .body ul { padding-left: 22px; }
.brand-page .steps { display: block; list-style: none; counter-reset: steps; padding: 0; }
.brand-page .steps li { position: relative; counter-increment: steps; padding: 28px 0 20px 58px; border-top: 1px solid #393939; }
.brand-page .steps li::before { content: counter(steps,decimal-leading-zero); position: absolute; left: 0; top: 30px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent); }
.brand-page .highlight { padding: clamp(24px,3vw,42px); border: 1px solid #333; border-radius: 12px; background: linear-gradient(140deg,#191919,#101010); }
.brand-page .handoff blockquote { margin: 24px 0; color: var(--text); font-size: clamp(22px,2vw,30px); letter-spacing: -.025em; line-height: 1.6; }
.brand-page .handoff-arrow { color: var(--accent); font-size: 26px; margin-bottom: 22px; }
.brand-page .record { padding: 26px 0 0; border-top: 1px solid #393939; }
.brand-page .record h3 { font-size: 18px; }
.brand-page .record dl { display: grid; grid-template-columns: 1fr 1.8fr; gap: 16px; margin-bottom: 0; font-size: 15px; }
.brand-page .record dt { color: var(--text-dim); }
.brand-page .record dd { margin: 0; }
.brand-page .body .caption { font-size: 12px; color: var(--text-dim); margin-top: 26px; }
.brand-page .closing { margin: 0 0 70px; padding: clamp(36px,5vw,72px); border: 1px solid #303030; border-radius: 12px; background: radial-gradient(ellipse at 50% 150%,#ff7a1a12,transparent 70%),#101010; }
.brand-page .closing h2 { font-size: clamp(32px,3.35vw,56px); font-weight: 500; line-height: 1.12; letter-spacing: -.045em; margin: 0 0 24px; }
.brand-page .closing h2 span { color: var(--accent); }
.brand-page .closing p { color: var(--text-dim); max-width: 54ch; font-size: clamp(15px,1.15vw,19px); margin: 0 0 28px; }
.brand-page footer { line-height: 1.7; }
@media(max-width:760px) {
 .brand-page .hero { grid-template-columns: 1fr; gap: 28px; padding: 46px 0; }
 .brand-page .hero h1 { font-size: clamp(42px,9.5vw,70px); }
 .brand-page .hero figure { max-width: 580px; justify-self: center; }
 .brand-page .body h2 { font-size: 31px; }
 .brand-page .record dl { grid-template-columns: 1fr; gap: 4px; }
 .brand-page .record dd { margin-bottom: 14px; }
 .brand-page .closing { margin-bottom: 48px; padding: 30px 24px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }