/**
 * audiences.css · the eight doors and the audience page template
 * (client direction 2026-10-31; design.md §1.1, §6, §7.3a).
 *
 * Consumes tokens only. Reuses from app.css/content.css, unchanged:
 * .section, .shell, .section-head, .eyebrow, .lede, .claim, .cta,
 * .band-deep, .market-stat*, .content-head, .btn, .reveal, .bio-bg-N.
 *
 * Register: the doors are UI (body grotesk labels, mono group names,
 * hairline rows); the audience pages turn the register dial per audience
 * by WHICH sections they use, never by new colours (design.md §1.1).
 */

/* ====================================================================== */
/*  THE DOORS                                                             */
/* ====================================================================== */

.audience-bar { padding-block: var(--section-pad); }

.audience-bar__head { max-width: 40rem; }

/* With media (review round 3, 2026-10-31): the heading block takes columns
   1-7 and the promo film columns 8-12 of the 12-column grid (design.md §4),
   roughly 58/42, the film centred on the heading block's height. The doors
   stay full width below. Under 900px the film follows the intro, capped
   at the width the hero aside used to give it. */
.audience-bar__top--media {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: center;
}

.audience-bar__top--media .audience-bar__head { grid-column: 1 / 8; }
.audience-bar__media { grid-column: 8 / 13; min-width: 0; }

@media (max-width: 900px) {
  .audience-bar__top--media .audience-bar__head,
  .audience-bar__media { grid-column: 1 / -1; }
  .audience-bar__media { max-width: 34rem; margin-block-start: var(--sp-3); }
}

.audience-bar__read,
.aud-read {
  color: var(--ink-1);
  max-width: 60ch;
}

.doors {
  margin-block-start: var(--sp-5);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}

.doors__group-label {
  color: var(--ink-2);
  margin: 0 0 var(--sp-2);
  padding-block-end: var(--sp-2);
  border-block-end: 1px solid var(--line);
}

.doors__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.door {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  min-height: 3.5rem;
  padding: var(--sp-3) var(--sp-2);
  border-block-end: 1px solid var(--line);
  color: var(--ink-0);
  text-decoration: none;
  border-radius: var(--r-1);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.door:hover { background-color: var(--surface-1); }

.door:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.door__icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--accent);
  background: var(--surface-0);
}

.door__text { display: grid; gap: 2px; min-width: 0; }

.door__label {
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
}

.door__blurb {
  color: var(--ink-1);
  font-size: var(--text-small);
  line-height: 1.45;
}

.door__mark {
  color: var(--accent);
  transition: transform var(--dur-fast) var(--ease-out);
}

.door:hover .door__mark { transform: translateX(4px); }

.door[aria-current="page"] {
  background-color: var(--surface-1);
}

.door[aria-current="page"] .door__label::after {
  content: " · you are here";
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink-2);
}

.doors--compact .door { min-height: 3rem; padding-block: var(--sp-2); }
.doors--compact .door__icon { width: 2rem; height: 2rem; }
.doors--compact .door__icon svg { width: 18px; height: 18px; }
.doors--compact .door { grid-template-columns: 2rem minmax(0, 1fr) auto; }

.other-doors {
  padding-block: var(--sp-6);
  border-block-start: 1px solid var(--line);
}

@media (max-width: 900px) {
  .doors { grid-template-columns: 1fr; gap: var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
  .door, .door__mark { transition: none; }
  .door:hover .door__mark { transform: none; }
}

/* ====================================================================== */
/*  AUDIENCE PAGE TEMPLATE                                                */
/* ====================================================================== */

.aud-soft { background-color: var(--surface-1); border-block: 1px solid var(--line); }

.aud-head { max-width: 40rem; }
.aud-head--wide { max-width: 46rem; }

.aud-body {
  color: var(--ink-1);
  max-width: 66ch;
  margin-block-start: var(--sp-4);
  line-height: var(--leading-body);
}

.aud-body b { color: var(--ink-0); }

.aud-cards {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--gutter);
}

.aud-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aud-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.aud-card {
  background-color: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--sp-4);
  display: grid;
  align-content: start;
  gap: var(--sp-2);
}

.aud-soft .aud-card { background-color: var(--surface-0); }

.aud-card__title {
  font-size: 1.1875rem;
  line-height: 1.3;
  margin: 0;
}

.aud-card__body { color: var(--ink-1); line-height: 1.55; max-width: 60ch; }

.aud-card__link {
  color: var(--accent);
  text-decoration: none;
  margin-block-start: var(--sp-2);
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

.aud-card__link:hover { text-decoration: underline; }

/* Status chips: a plan is never mistaken for a product. Words carry the
   meaning; the border tone is secondary (design.md §2.2). */
.aud-chip {
  display: inline-block;
  justify-self: start;
  font-size: 0.6875rem;
  padding: 1px 7px;
  border-radius: var(--r-1);
  border: 1px solid var(--line);
  color: var(--ink-1);
  margin: 0;
  white-space: nowrap;
}

.aud-chip--now,
.aud-chip--in-force,
.aud-chip--live { border-color: color-mix(in oklab, var(--accent) 60%, var(--line)); color: color-mix(in oklab, var(--accent) 70%, var(--ink-0)); }
.aud-chip--prototype,
.aud-chip--beta,
.aud-chip--collecting { border-color: color-mix(in oklab, var(--risk-watch) 55%, var(--line)); }

.aud-figure__grid { margin-block-start: var(--sp-5); }

.aud-figure__grid--aside {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-5);
  align-items: start;
}

/* The film on /for-specialists/: the promo frame (app.css .promo__frame) at a
   readable width, with one mono line beneath. min-width 0 keeps the frame
   inside its grid track at phone width, so the page never scrolls sideways. */
.pro-film { margin: 0; width: 100%; max-width: 62rem; min-width: 0; }
.pro-film__cap { margin-block-start: var(--sp-3); color: var(--ink-2); overflow-wrap: anywhere; }

.aud-table__wrap {
  margin-block-start: var(--sp-5);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}

.aud-table__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
  /* No tabular-nums here: Schibsted's tnum also widens , ; . to figure
     width, which reads as stray spaces in running prose cells. */
}

.aud-table__table th,
.aud-table__table td {
  text-align: start;
  vertical-align: top;
  padding: var(--sp-3);
  border-block-end: 1px solid var(--line);
  line-height: 1.5;
}

.aud-table__table thead th {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-2);
  background-color: var(--surface-1);
}

.aud-table__table tbody th { font-weight: 700; color: var(--ink-0); min-width: 9rem; }
.aud-table__table td { color: var(--ink-1); }
.aud-table__table tr:last-child > * { border-block-end: 0; }

.aud-source {
  color: var(--ink-2);
  margin-block-start: var(--sp-3);
  font-size: 0.75rem;
}

.aud-code__figure { margin: var(--sp-5) 0 0; max-width: 52rem; }

.aud-code__label { color: var(--ink-2); margin-block-end: var(--sp-2); }

.aud-code__pre {
  margin: 0;
  padding: var(--sp-4);
  background-color: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-0);
  white-space: pre;
}

.aud-code__pre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.aud-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-block-start: var(--sp-4);
}

.aud-links a {
  color: var(--accent);
  text-decoration: none;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

.aud-links a:hover { text-decoration: underline; }

.aud-media__grid {
  margin-block-start: var(--sp-5);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}

.aud-media__item { margin: 0; display: grid; gap: var(--sp-2); align-content: start; }

.aud-media__item img,
.aud-media__item video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: var(--r-3);
  border: 1px solid var(--line);
  background-color: var(--surface-1);
}

.aud-media__item figcaption { display: grid; gap: var(--sp-1); color: var(--ink-1); font-size: var(--text-small); line-height: 1.5; }

.loop-clip { margin: 0; display: grid; gap: var(--sp-2); }

.loop-clip__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-3);
  border: 1px solid var(--line);
  background-color: var(--surface-1);
}

.loop-clip__caption { color: var(--ink-2); font-size: 0.75rem; }

.aud-sources { padding-block: var(--sp-6); }

.aud-sources__list {
  margin: 0;
  padding-inline-start: 1.25rem;
  display: grid;
  gap: var(--sp-2);
  color: var(--ink-1);
  font-size: var(--text-small);
  max-width: 72ch;
}

.aud-sources__list a { color: var(--accent); overflow-wrap: anywhere; }
.aud-sources__note { color: var(--ink-2); }

.aud-close__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

.aud-close__note { color: var(--ink-2); }

/* /investors/ market band with three or five figures instead of four. */
.market-stats--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .aud-cards--2,
  .aud-cards--3,
  .aud-media__grid,
  .aud-figure__grid--aside { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .market-stats--3 { grid-template-columns: 1fr; row-gap: 0; }
  .market-stats--3 .market-stat { padding-inline: 0; border-inline-start: 0; }
  .market-stats--3 .market-stat + .market-stat {
    border-block-start: 1px solid var(--band-line);
    padding-block-start: var(--sp-4);
    margin-block-start: var(--sp-4);
  }
}

/* Stat numerals line up (director checklist 2026-10-31: tabular figures). */
.market-stat__figure,
.proof__figure { font-variant-numeric: tabular-nums lining-nums; }

/* ====================================================================== */
/*  PARTNER ROSTER · deck slide 38 (review round 2, 2026-10-31)            */
/* ====================================================================== */
/* Logos sit on the paper tile the hero's award cards use, in both themes,
   because the deck's files are drawn for a light ground. */
.partners {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: var(--sp-4);
}

.partner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface-0);
}

.partner__logo {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 7;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-1);
  background: #f6f4ec;
  border: 1px solid var(--line);
}

.partner__logo picture,
.partner__logo img {
  display: block;
  max-width: 100%;
  max-height: 3.25rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

.partner__wordmark {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  color: #152018;
}

.partner__text { display: grid; gap: var(--sp-2); align-content: start; }
.partner__name { margin: 0; font-size: 1.0625rem; }
.partner__role { margin: 0; color: var(--ink-1); font-size: 0.9375rem; line-height: 1.5; }

/* ====================================================================== */
/*  APP ENVIRONMENT · weather and environmental data in the app            */
/*  (review round 2, 2026-10-31; /partners/ and /for-specialists/)          */
/* ====================================================================== */
.app-env {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-5);
  align-items: start;
}

.app-env--solo { grid-template-columns: minmax(0, 1fr); }

.app-env__panel { display: grid; gap: var(--sp-4); min-width: 0; }

.app-env__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}

.app-env__card {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: var(--sp-3) var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface-0);
  text-align: center;
}

.app-env__icon { width: 2.25rem; height: 2.25rem; color: var(--accent); }
.app-env__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-env__label { font-weight: 700; color: var(--ink-0); font-size: 0.9375rem; }
.app-env__value {
  font-family: var(--font-display);
  color: var(--ink-1);
  font-size: 0.9375rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.app-env__value--watch { color: color-mix(in oklab, var(--risk-watch) 60%, var(--ink-0)); }

.app-env__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
}

.app-env__attr { margin: 0; color: var(--ink-2); font-size: 0.8125rem; max-width: 42ch; }

.app-env__chart {
  margin: 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface-0);
}

.app-env__chart-title { margin: 0 0 var(--sp-2); color: var(--ink-1); font-size: 0.75rem; }
.app-env__svg svg { display: block; width: 100%; height: auto; overflow: visible; }

.app-env__axis { stroke: var(--line); stroke-width: 1.25; }
.app-env__tick { font-family: var(--font-mono); font-size: 12px; fill: var(--ink-2); }
.app-env__damp { stroke: var(--risk-watch); stroke-width: 1.75; stroke-dasharray: 7 6; }
.app-env__damp-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  fill: color-mix(in oklab, var(--risk-watch) 65%, var(--ink-0));
}
.app-env__line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.app-env__cross { fill: var(--surface-0); stroke: var(--risk-watch); stroke-width: 3; }
.app-env__note { font-family: var(--font-display); font-style: italic; font-size: 17px; fill: var(--ink-0); }

.app-env__caption { margin: var(--sp-2) 0 0; color: var(--ink-2); font-size: 0.8125rem; }

/* The line draws once on entering view; reduced motion sees it drawn. */
@media (prefers-reduced-motion: no-preference) {
  .app-env__chart.is-armed .app-env__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .app-env__chart.is-armed .app-env__cross,
  .app-env__chart.is-armed .app-env__note { opacity: 0; }
  .app-env__chart.is-playing .app-env__line { animation: app-env-draw 1.6s var(--ease-out) 200ms both; }
  .app-env__chart.is-playing .app-env__cross,
  .app-env__chart.is-playing .app-env__note { animation: app-env-in var(--dur-base) var(--ease-out) 1.2s both; }
}

@keyframes app-env-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes app-env-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- "Why it helps your business" over the clip's empty right half -------
   The clip is fixed pale green (#bee1cf) in both site themes and its right
   side is empty at the start and carries the film's own reading cards and
   chart later. .app-env__veil paints the same pale green over that side (the
   page already shows the cards and chart as real HTML), with a notch that
   leaves the clip's blue blob and the phone untouched. Measured from the
   clip (640x360): phone and title end at x=241, the blob at x=294, the first
   card starts at x=282. The panel depends on the frame's width through a
   container query, never the viewport.
   Narrow frame: the clip crops to a square from the left (title and phone
   fill it; video and poster crop alike), the veil follows the crop, and the
   panel is an ordinary block under it on the page's own tokens.
   Wide frame (>= 32rem): the panel sits over the right half in fixed dark ink
   on the clip's pale green (ink 11.5:1, forest 7.4:1). */
.app-env__clip { position: relative; min-width: 0; }
.app-env__clip--why { container: app-env-clip / inline-size; }

.app-env__clip--why .loop-clip__video { aspect-ratio: 1 / 1; object-position: left center; }

.app-env__veil {
  --veil-x1: 77.3%;
  --veil-x2: 83.2%;
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(100cqw - 2px);
  height: calc(100cqw - 2px);
  border-radius: calc(var(--r-3) - 1px);
  background: #bee1cf;
  pointer-events: none;
  clip-path: polygon(
    var(--veil-x1) 0, 100% 0, 100% 100%, var(--veil-x1) 100%,
    var(--veil-x1) 57%, var(--veil-x2) 57%, var(--veil-x2) 46%, var(--veil-x1) 46%
  );
}

.app-env__why { margin-top: var(--sp-3); display: grid; gap: var(--sp-3); }

.app-env__why-eyebrow { margin: 0; color: var(--ink-1); font-size: 0.75rem; }

.app-env__why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }

.app-env__why-item {
  display: grid;
  grid-template-columns: 1.375rem minmax(0, 1fr);
  gap: var(--sp-2);
  align-items: start;
}

.app-env__why-icon { width: 1.375rem; height: 1.375rem; color: var(--accent); margin-top: 0.1em; }
.app-env__why-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-env__why-text { margin: 0; color: var(--ink-1); font-size: 0.9375rem; line-height: 1.45; }
.app-env__why-text strong { display: block; color: var(--ink-0); }

@container app-env-clip (min-width: 32rem) {
  .app-env__clip--why .loop-clip__video { aspect-ratio: 16 / 9; }
  .app-env__veil {
    --veil-x1: 43.5%;
    --veil-x2: 46.8%;
    height: calc(56.25cqw - 2px);
  }
  .app-env__why {
    position: absolute;
    top: 1px;
    left: 51cqw;
    right: 3cqw;
    height: calc(56.25cqw - 2px);
    margin: 0;
    align-content: center;
    gap: 2.2cqw;
    --why-ink: #152018;
    --why-accent: #1e4d33;
  }
  .app-env__why-list { gap: 2.2cqw; }
  .app-env__why-eyebrow { color: var(--why-accent); font-size: clamp(0.6875rem, 1.7cqw, 0.8125rem); }
  .app-env__why-item { grid-template-columns: 2.6cqw minmax(0, 1fr); gap: 1.4cqw; }
  .app-env__why-icon { width: 2.6cqw; height: 2.6cqw; min-width: 1rem; min-height: 1rem; color: var(--why-accent); }
  .app-env__why-text { color: var(--why-ink); font-size: clamp(0.75rem, 2cqw, 0.96rem); line-height: 1.35; }
  .app-env__why-text strong { color: var(--why-ink); }
}

@media (max-width: 900px) {
  .app-env { grid-template-columns: minmax(0, 1fr); }
  .app-env__clip { max-width: 44rem; }
}

@media (max-width: 560px) {
  .app-env__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The chart scales to about half size on a phone, so its SVG text
     doubles to stay at roughly 11px on screen. */
  .app-env__chart { padding-inline: var(--sp-3); }
  .app-env__tick { font-size: 22px; }
  .app-env__damp-label { font-size: 20px; }
  .app-env__note { font-size: 26px; }
}