@import url("/design-tokens.css");

.audience-page {
  min-width: 320px;
  overflow-x: clip;
  color: var(--bryk-white);
  background:
    radial-gradient(circle at 80% 10%, rgba(0,184,179,.1), transparent 28rem),
    linear-gradient(180deg, #080a0d, #050709 70%);
}
.audience-page main { width: min(100%, 1760px); margin: 0 auto; }
.audience-page :is(h1,h2,h3,p,ol,ul,dl,figure) { margin-top: 0; }
.audience-page :is(a,button,summary,input,select,textarea) { -webkit-tap-highlight-color: transparent; }
.audience-page :is(a,button,summary,input,select,textarea):focus-visible { outline: 3px solid var(--bryk-lime); outline-offset: 4px; }

.audience-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(610px, 82vh, 900px);
  align-items: end;
  overflow: hidden;
  border-bottom: 1px solid var(--bryk-line);
}
.audience-hero picture,.audience-hero picture::after,.audience-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; }
.audience-hero__image { object-fit: cover; object-position: center; }
.audience-hero picture::after {
  content: "";
  background:
    linear-gradient(90deg, rgba(4,6,9,.98) 0, rgba(4,6,9,.88) 35%, rgba(4,6,9,.25) 68%, rgba(4,6,9,.08)),
    linear-gradient(0deg, rgba(4,6,9,.94), transparent 48%);
}
.audience-hero__copy { position: relative; z-index: 2; width: min(760px, calc(100% - 48px)); padding: clamp(70px, 9vw, 150px) clamp(20px, 5vw, 86px) clamp(52px, 7vw, 100px); }
.audience-breadcrumb,.audience-eyebrow { color: var(--bryk-orange); font: 950 11px/1.35 var(--bryk-font-ui); letter-spacing: .2em; text-transform: uppercase; }
.audience-breadcrumb { display: flex; gap: 9px; margin-bottom: clamp(28px, 5vw, 64px); }
.audience-breadcrumb a { color: #aeb6bb; text-decoration: none; }
.audience-hero h1 { max-width: 750px; margin: 10px 0 22px; font: 1000 clamp(62px, 9.5vw, 148px)/.75 var(--bryk-font-display); letter-spacing: -.07em; text-transform: uppercase; text-wrap: balance; }
.audience-hero h1 span,.audience-section h2 span,.audience-callout h2 span { color: var(--bryk-orange); text-shadow: 7px 7px 0 rgba(0,0,0,.66); }
.audience-hero__deck { max-width: 670px; color: #d3d8db; font: 650 clamp(16px, 1.35vw, 20px)/1.6 var(--bryk-font-ui); }
.audience-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.audience-button { min-height: 50px; display: inline-grid; place-items: center; padding: 0 19px; color: #080a0d; border: 1px solid var(--bryk-orange); background: var(--bryk-orange); text-decoration: none; font: 950 11px/1 var(--bryk-font-ui); letter-spacing: .1em; text-align: center; }
.audience-button--secondary { color: #fff; border-color: rgba(255,255,255,.42); background: rgba(5,8,11,.7); backdrop-filter: blur(10px); }
.audience-trust { max-width: 680px; margin: 22px 0 0; padding-left: 13px; color: #aab2b7; border-left: 3px solid var(--bryk-lime); font: 750 12px/1.5 var(--bryk-font-ui); letter-spacing: .03em; }

.audience-status-strip { display: grid; grid-template-columns: repeat(4, 1fr); width: min(1540px, calc(100% - 48px)); margin: -1px auto 0; border: 1px solid var(--bryk-line); background: #0b0f13; }
.audience-status-strip span { min-height: 84px; display: grid; align-content: center; gap: 7px; padding: 17px 20px; border-right: 1px solid var(--bryk-line); }
.audience-status-strip span:last-child { border-right: 0; }
.audience-status-strip small { color: #7f8990; font: 900 9px/1 var(--bryk-font-ui); letter-spacing: .12em; }
.audience-status-strip b { font: 950 13px/1.2 var(--bryk-font-ui); letter-spacing: .04em; }

.audience-chapters { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(34px, 6vw, 100px); width: min(1480px, calc(100% - 48px)); margin: 0 auto; padding: clamp(76px, 9vw, 140px) 0; }
.chapter-rail { position: sticky; top: 105px; align-self: start; display: grid; gap: 5px; }
.chapter-rail > span { margin-bottom: 12px; color: #737d84; font: 950 9px/1 var(--bryk-font-ui); letter-spacing: .16em; }
.chapter-rail a { min-height: 44px; display: flex; align-items: center; padding: 0 12px; color: #aab2b7; border-left: 2px solid var(--bryk-line-strong); text-decoration: none; font: 850 10px/1.2 var(--bryk-font-ui); letter-spacing: .08em; }
.chapter-rail a:hover { color: #fff; border-color: var(--bryk-orange); background: rgba(255,100,0,.08); }
.chapter-content { min-width: 0; }
.audience-section { padding: 0 0 clamp(76px, 9vw, 132px); scroll-margin-top: calc(150px + env(safe-area-inset-top)); }
.audience-section + .audience-section { padding-top: clamp(64px, 7vw, 104px); border-top: 1px solid var(--bryk-line); }
.audience-section__heading { max-width: 980px; margin-bottom: 34px; }
.audience-section h2,.audience-callout h2 { margin: 9px 0 18px; font: 1000 clamp(44px, 6vw, 92px)/.83 var(--bryk-font-display); letter-spacing: -.055em; text-transform: uppercase; text-wrap: balance; }
.audience-section__lead { max-width: 860px; color: #c0c7cb; font: 650 clamp(16px, 1.25vw, 19px)/1.72 var(--bryk-font-ui); }
.audience-section__lead + .audience-section__lead { margin-top: 16px; }

.vocabulary-grid,.route-grid,.care-grid,.partner-route-grid,.proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vocabulary-grid > div,.route-card,.care-card,.partner-route,.proof-card { padding: clamp(20px, 2.7vw, 36px); border: 1px solid var(--bryk-line); background: linear-gradient(145deg, rgba(19,24,29,.96), rgba(9,12,15,.97)); box-shadow: var(--bryk-shadow-soft); }
.vocabulary-grid dt,.route-card small,.care-card small,.partner-route small,.proof-card small { margin-bottom: 9px; color: var(--bryk-orange); font: 950 10px/1 var(--bryk-font-ui); letter-spacing: .14em; }
.vocabulary-grid dd { margin: 0; color: #b4bcc1; font: 600 14px/1.55 var(--bryk-font-ui); }
.vocabulary-grid dd strong { color: #fff; }

.step-list { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0; counter-reset: starter-step; }
.step-list li { counter-increment: starter-step; display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 22px; align-items: start; padding: clamp(22px, 3vw, 38px); border: 1px solid var(--bryk-line); background: rgba(13,17,21,.9); }
.step-list li::before { content: counter(starter-step, decimal-leading-zero); color: var(--bryk-orange); font: 1000 44px/.8 var(--bryk-font-display); }
.step-list h3,.route-card h3,.care-card h3,.partner-route h3,.proof-card h3 { margin: 0 0 9px; color: #fff; font: 950 clamp(20px, 2.2vw, 30px)/1 var(--bryk-font-display); letter-spacing: -.02em; text-transform: uppercase; }
.step-list p,.route-card p,.care-card p,.partner-route p,.proof-card p { margin: 0; color: #aeb7bc; font: 600 14px/1.65 var(--bryk-font-ui); }

.audience-callout { margin: 34px 0; padding: clamp(26px, 4vw, 54px); border: 1px solid rgba(185,242,39,.48); background: linear-gradient(125deg, rgba(185,242,39,.12), rgba(9,12,15,.96) 42%); }
.audience-callout h2 { max-width: 880px; }
.audience-callout p { max-width: 900px; color: #c8ced1; font: 650 15px/1.7 var(--bryk-font-ui); }
.audience-callout--warning { border-color: rgba(255,100,0,.6); background: linear-gradient(125deg, rgba(255,100,0,.12), rgba(9,12,15,.96) 42%); }

.media-feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: clamp(24px, 5vw, 70px); align-items: center; }
.media-feature figure { position: relative; min-height: 480px; margin: 0; overflow: hidden; border: 1px solid var(--bryk-line); background: #080b0e; }
.media-feature figure img { width: 100%; height: 100%; min-height: 480px; object-fit: cover; }
.media-feature--diagram figure { background: #23272b; }
.media-feature--diagram figure img { object-fit: contain; }
.media-feature img[src*="map-master"],.media-feature img[src*="turnaround"] { object-fit: contain; background:#23272b; }
.media-feature figcaption { position: absolute; inset: auto 0 0; padding: 58px 17px 15px; color: #fff; background: linear-gradient(transparent, rgba(3,5,7,.94)); font: 900 9px/1 var(--bryk-font-ui); letter-spacing: .13em; }
.media-feature__copy ul { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.media-feature__copy li { position: relative; padding-left: 22px; color: #bbc3c7; font: 650 14px/1.6 var(--bryk-font-ui); }
.media-feature__copy li::before { content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: 3px; background: var(--bryk-lime); box-shadow: 0 0 12px rgba(185,242,39,.55); }

.route-grid { grid-template-columns: repeat(3, 1fr); }
.route-card { min-height: 230px; }
.route-card a { display: inline-block; margin-top: 20px; color: var(--bryk-lime); font: 950 10px/1 var(--bryk-font-ui); letter-spacing: .1em; }
.partner-route-grid { grid-template-columns: repeat(2, 1fr); }
.partner-route { min-height: 285px; border-top: 4px solid var(--route-accent, var(--bryk-orange)); }
.partner-route:nth-child(2) { --route-accent: var(--bryk-cyan); }
.partner-route:nth-child(3) { --route-accent: var(--bryk-violet); }
.partner-route:nth-child(4) { --route-accent: var(--bryk-lime); }
.proof-grid { grid-template-columns: repeat(3, 1fr); }
.proof-card { padding: 0; overflow: hidden; }
.proof-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.proof-card div { padding: 23px; }

.faq-stack { border-top: 1px solid var(--bryk-line); }
.faq-stack details { border-bottom: 1px solid var(--bryk-line); }
.faq-stack summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #fff; cursor: pointer; font: 900 14px/1.4 var(--bryk-font-ui); letter-spacing: .03em; }
.faq-stack summary::after { content: "+"; color: var(--bryk-orange); font-size: 23px; }
.faq-stack details[open] summary::after { content: "−"; }
.faq-stack p { max-width: 900px; margin: 0; padding: 0 0 23px; color: #aeb7bc; font: 600 14px/1.7 var(--bryk-font-ui); }

.audience-footer { display: flex; justify-content: space-between; gap: 24px; width: min(1540px, calc(100% - 48px)); margin: 0 auto; padding: 30px 0 calc(30px + env(safe-area-inset-bottom)); color: #788188; border-top: 1px solid var(--bryk-line); font: 850 9px/1.6 var(--bryk-font-ui); letter-spacing: .1em; }
.audience-footer a { color: #fff; text-decoration: none; }

@media (max-width: 1050px) {
  .audience-status-strip { grid-template-columns: repeat(2, 1fr); }
  .audience-status-strip span:nth-child(2) { border-right: 0; }
  .audience-status-strip span:nth-child(-n+2) { border-bottom: 1px solid var(--bryk-line); }
  .audience-chapters { grid-template-columns: 1fr; }
  .chapter-rail { position: sticky; z-index: 20; top: calc(78px + env(safe-area-inset-top)); display: flex; gap: 5px; overflow-x: auto; padding: 8px 0; background: rgba(5,7,9,.96); scrollbar-width: thin; }
  .chapter-rail > span { display: none; }
  .chapter-rail a { flex: 0 0 auto; min-height: 40px; padding: 0 13px; border: 1px solid var(--bryk-line-strong); background: #0b0e12; white-space: nowrap; }
  .media-feature { grid-template-columns: 1fr; }
  .media-feature figure,.media-feature figure img { min-height: 420px; }
  .route-grid,.proof-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .audience-hero { min-height: 740px; align-items: end; }
  .audience-hero picture::after { background: linear-gradient(0deg, rgba(4,6,9,.99) 0, rgba(4,6,9,.9) 43%, rgba(4,6,9,.28) 78%, rgba(4,6,9,.12)); }
  .audience-hero__image { object-position: center top; }
  .audience-hero__copy { width: 100%; padding: 300px 18px 42px; }
  .audience-breadcrumb { margin-bottom: 22px; }
  .audience-hero h1 { font-size: clamp(57px, 18vw, 88px); }
  .audience-actions { display: grid; grid-template-columns: 1fr; }
  .audience-button { width: 100%; }
  .audience-status-strip,.audience-chapters,.audience-footer { width: calc(100% - 24px); }
  .audience-chapters { gap: 38px; padding: 52px 0; }
  .vocabulary-grid,.route-grid,.care-grid,.partner-route-grid,.proof-grid { grid-template-columns: 1fr; }
  .step-list li { grid-template-columns: 56px minmax(0,1fr); gap: 10px; padding: 20px 16px; }
  .step-list li::before { font-size: 34px; }
  .media-feature figure,.media-feature figure img { min-height: 330px; }
  .audience-footer { display: grid; }
}

@media (max-width: 420px) {
  .audience-status-strip { grid-template-columns: 1fr; }
  .audience-status-strip span { border-right: 0; border-bottom: 1px solid var(--bryk-line); }
  .audience-status-strip span:last-child { border-bottom: 0; }
  .audience-section h2,.audience-callout h2 { font-size: 42px; }
  .audience-hero__copy { padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .audience-page * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}