/*
 * UNDERSTAND · Audience Insights and MATCH · Audience Fit coming-soon pages, with the
 * "Preview with demo data" view of the ready states (b2b_prototype Insights screen; Fit from the
 * owner's offer-comparison design, 2026-10-20). Builds on tn-tokens.css and tn-challenge.css (.tn-meter, .tn-grid-3, .tn-section-title).
 */

.tn-aud { display: flex; flex-direction: column; gap: 22px; }

/* Header: eyebrow / title, optional right note */
.tn-aud-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.tn-aud-head__titles { display: flex; flex-direction: column; gap: 8px; }
.tn-aud-head__title { margin: 0; font-size: var(--tn-page-title-size); font-weight: 700; line-height: 1.15; color: var(--tn-fg-1); }
.tn-aud-head__note { font-size: 13px; color: rgba(255,255,255,0.65); }
.tn-aud-head__note b { color: #fff; font-weight: 600; }

/* Coming-soon card: copy left, illustration right (same shape as Experiences) */
.tn-soon-card { padding: 48px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: stretch; }
.tn-soon-copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.tn-soon-title { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--tn-fg-1); }
.tn-soon-text { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.72); }
.tn-soon-actions { display: flex; align-items: center; gap: 18px; margin-top: 8px; flex-wrap: wrap; }
.tn-demo-link { font-family: var(--tn-font); font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.7); text-decoration: underline; text-underline-offset: 3px; }
.tn-demo-link:hover { color: #fff; }

/* Ghost card "What you'll see here" */
.tn-ghost { border: 1px dashed rgba(255,255,255,0.14); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.tn-ghost__title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); }
.tn-ghost__row { display: flex; flex-direction: column; gap: 8px; }
.tn-ghost__row > span { display: block; border-radius: 5px; }
.tn-ghost__row > span:first-child { height: 10px; background: rgba(255,255,255,0.08); }
.tn-ghost__row > span:last-child { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.05); }
.tn-ghost__note { margin-top: auto; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.55); }

/* Fit prerequisites (illustration on the coming-soon card) */
.tn-prereq { border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.tn-prereq__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tn-prereq__name { font-size: 15px; font-weight: 600; }
.tn-prereq__tag { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: rgba(255,255,255,0.45); white-space: nowrap; }
.tn-prereq__text { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.7); }

/* DEMO DATA banner */
.tn-demo-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 12px;
  border: 1px dashed rgba(237,166,66,0.5); background: rgba(237,166,66,0.06);
  font-size: 13px; color: rgba(255,255,255,0.8);
}
.tn-demo-banner__tag { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; color: var(--tn-amber); }
.tn-demo-banner__text { flex: 1; min-width: 220px; }
.tn-demo-banner__exit { color: var(--tn-sky); font-weight: 600; text-decoration: none; white-space: nowrap; }
.tn-demo-banner__exit:hover { color: var(--tn-sky-soft); }

/* Insights · top Travel DNAs */
.tn-dna { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.tn-dna.is-first { border-color: rgba(91,193,234,0.35); }
.tn-dna__rank { display: flex; align-items: center; gap: 8px; font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.tn-dna__share { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.tn-dna__pct { font-size: 36px; font-weight: 700; line-height: 1; }
.tn-dna__of { font-size: 12px; color: rgba(255,255,255,0.55); }
.tn-dna__name { font-size: 17px; font-weight: 600; }
.tn-dna__desc { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.68); }
.tn-aud-foot { font-size: 12px; color: rgba(255,255,255,0.55); }

/* Insights · bridge to Audience Fit */
.tn-bridge {
  background: linear-gradient(135deg, #12303f 0%, var(--tn-card) 70%);
  border: 1px solid rgba(91,193,234,0.3); border-radius: 20px; padding: 32px;
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: center; color: var(--tn-fg-1);
}
.tn-bridge__copy { display: flex; flex-direction: column; gap: 10px; }
.tn-bridge__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: #6fd16f; }
.tn-bridge__summary { font-size: 14px; color: rgba(255,255,255,0.75); }
.tn-bridge__lead { font-size: 15px; color: rgba(255,255,255,0.72); margin-top: 4px; }
.tn-bridge__question { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.2; }

/* Fit · offer comparison (owner design 2026-10-20). The two cards and "What we changed and why"
   reuse the wizard's offer review (orv-*, offers.css); these rules add the audience strip, the
   offer pills and the "match with your top 3" rows. */
.tn-fit-aud { padding: 22px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.tn-fit-aud__label { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; color: rgba(255,255,255,0.55); }
.tn-fit-aud__dnas { display: flex; flex-wrap: wrap; gap: 10px 32px; }
.tn-fit-aud__dna { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; }
.tn-fit-aud__dna b { font-weight: 600; }
.tn-fit-aud__rank { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.tn-fit-aud__share { color: rgba(255,255,255,0.55); }
.tn-fit-aud__link { flex-basis: 100%; font-size: 15px; font-weight: 600; color: var(--tn-sky); text-decoration: none; }
.tn-fit-aud__link:hover { color: var(--tn-sky-soft); }

.tn-fit-offers { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tn-fit-offers__label { margin-right: 6px; font-size: 14px; color: rgba(255,255,255,0.6); }
.tn-fit-pill {
  padding: 9px 20px; border-radius: 999px; border: 1px solid var(--tn-line-strong);
  font-size: 15px; font-weight: 600; color: var(--tn-fg-1); text-decoration: none; transition: background .15s, border-color .15s;
}
.tn-fit-pill:hover { background: rgba(255,255,255,0.04); color: var(--tn-fg-1); }
.tn-fit-pill.is-selected { border-color: var(--tn-sky); background: rgba(91,193,234,0.1); }

.tn-aud .orv-strength__label { white-space: nowrap; }

.tn-fit-detail { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.tn-fit-sub { margin-top: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.tn-fit-sub:first-child { margin-top: 0; }
.tn-fit-chip { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--tn-line-strong); background: rgba(255,255,255,0.04); font-size: 15px; font-weight: 600; }
.tn-fit-match { align-self: stretch; display: flex; flex-direction: column; gap: 10px; }
.tn-fit-match__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tn-fit-match__name { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.tn-fit-match__value { font-size: 14px; white-space: nowrap; }
.tn-fit-match__value b { font-weight: 600; }
.tn-fit-match__value .is-good { color: #35d05c; }
.tn-fit-match__value .is-fair { color: var(--tn-sky); }
.tn-fit-match__value .is-weak { color: var(--tn-amber-strong); }
.tn-fit-match .orv-dim__bar { display: block; }

.tn-fit-edit { min-width: 92px; background: transparent; border-color: var(--tn-line-strong); color: var(--tn-fg-1); cursor: default; }

@media (max-width: 1024px) {
  .tn-soon-card { grid-template-columns: 1fr; padding: 32px 24px; gap: 32px; }
  .tn-bridge { grid-template-columns: 1fr; }
  .tn-aud .tn-grid-3 { grid-template-columns: 1fr; }
  .tn-fit-aud { padding: 18px; }
}