/* Industry pages (Brand 2.0).

   Loaded after brand.css on /industries/ and each industry page, so these
   components ship without a sitewide brand.css cache-bust. Everything here
   uses brand tokens only. The page's [data-ind] sets --topic and --topic-w;
   topic colour is a marker, a hairline or a 5.5% wash, never a fill behind
   body copy and never an action. Actions are --signal. */

@layer brand.page {

  /* Owner markers, used in the question diagram and the documents table */
  .o-sec    { --o: var(--t-sec); }
  .o-clin   { --o: var(--t-life); }
  .o-legal  { --o: var(--t-strat); }
  .o-prod   { --o: var(--t-know); }
  .o-comm   { --o: var(--t-cmp); }
  .o-inv    { --o: var(--t-rfp); }

  /* Section shell ---------------------------------------------------------- */
  .isec { padding: var(--section-y) var(--pad); border-top: 1px solid var(--line); }
  .isec-wrap { max-width: var(--grid-max); margin: 0 auto; }
  .isec h2 { margin: 0 0 12px; font-size: clamp(28px, 3.5vw, 42px); line-height: 1.05; letter-spacing: -.03em; max-width: 24ch; text-wrap: balance; }
  .isec .dek { margin: 0 0 36px; font-size: clamp(17px, 1.8vw, 20px); max-width: 56ch; }
  .isec-wrap > h2 + :not(.dek) { margin-top: 36px; }

  /* Hero ------------------------------------------------------------------- */
  .ind-hero { padding: 88px var(--pad) 80px; background: var(--field); }
  .ind-hero-grid { max-width: var(--grid-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
  .ind-hero .hero-h1 { font-size: clamp(40px, 5vw, 64px); max-width: 15ch; }
  .ind-hero .dek { max-width: 40ch; }
  .hero-ctas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 30px; }
  .btn-primary {
    display: inline-flex; align-items: center;
    min-height: var(--ctl-h); padding: 0 var(--ctl-pad-x);
    background: var(--ink); color: #fff; border-radius: var(--radius);
    font-size: var(--ctl-fs); font-weight: 650; text-decoration: none;
  }
  .btn-primary:hover { background: var(--signal); }
  .text-link { font-size: 15px; font-weight: 650; color: var(--signal); text-decoration: none; }
  .text-link:hover { text-decoration: underline; }

  /* The question diagram: one industry document, five rows, each with an
     owner and where its answer came from. Explains the product at a glance. */
  .qdoc { margin: 0; padding: 20px 22px 18px; background: var(--topic-w); border-top: 3px solid var(--topic); border-radius: var(--radius); }
  .qdoc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
  .qdoc-head b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
  .qdoc-head span { font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
  .qdoc ol { list-style: none; margin: 0; padding: 0; }
  .qdoc li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .qdoc .q-id { font-size: 12px; font-weight: 650; color: var(--ink2); font-variant-numeric: tabular-nums; padding-top: 2px; }
  .qdoc .q-t { font-size: 14.5px; line-height: 1.4; font-weight: 550; color: var(--ink); }
  .qdoc .q-m { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
  .owner { display: inline-flex; align-items: center; gap: 6px; }
  .owner::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 1px; background: var(--o, var(--ink)); }
  .st { display: inline-flex; align-items: center; gap: 6px; }
  .st.reused::before { content: "\2713"; font-size: 11px; font-weight: 800; color: var(--ink); }
  .st.routed { color: var(--ink2); }
  .st.routed::before { content: "\2192"; font-size: 12px; font-weight: 800; }
  .qdoc figcaption { margin-top: 12px; font-size: 12.5px; line-height: 1.45; font-weight: 550; color: var(--ink2); }

  /* Documents table: grouped by owner -------------------------------------- */
  .dtab { width: 100%; border-collapse: collapse; }
  .dtab th, .dtab td { text-align: left; vertical-align: top; padding: 15px 20px 15px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.45; font-weight: 450; color: var(--ink); }
  .dtab thead th { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink2); padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
  .dtab tbody th { font-weight: 650; width: 28%; }
  .dtab tr.grp th { padding-top: 28px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
  .dtab tr.grp th span { display: inline-flex; align-items: center; gap: 8px; }
  .dtab tr.grp th span::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 1px; background: var(--o); }
  .dtab td a { color: var(--signal); font-weight: 650; text-decoration: none; white-space: nowrap; }
  .dtab td a:hover { text-decoration: underline; }

  /* Who you sell to -------------------------------------------------------- */
  .segs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .seg { border-top: 3px solid var(--topic); padding-top: 18px; }
  .seg h3 { margin: 0 0 10px; font-size: 21px; letter-spacing: -.02em; }
  .seg p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
  .seg dl { margin: 0; }
  .seg dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); margin-top: 12px; }
  .seg dd { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink); }

  /* Worked example: one real question through the four steps --------------- */
  .wex { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
  .wex-q { padding: 24px 24px 22px; background: var(--topic-w); border-top: 3px solid var(--topic); border-radius: var(--radius); }
  .wex-q .k { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
  .wex-q blockquote { margin: 0; font-size: clamp(20px, 2.2vw, 25px); line-height: 1.3; letter-spacing: -.015em; font-weight: 650; color: var(--ink); }
  .wex-q p.src { margin: 16px 0 0; font-size: 13px; font-weight: 600; color: var(--ink2); }
  .wex-steps { list-style: none; margin: 0; padding: 0; counter-reset: w; }
  .wex-steps li { counter-increment: w; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 16px; padding: 0 0 22px; }
  .wex-steps li::before { content: counter(w); display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--ink); border-radius: var(--radius); font-size: 13px; font-weight: 700; }
  .wex-steps h3 { margin: 4px 0 6px; font-size: 17px; letter-spacing: -.01em; }
  .wex-steps p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
  .wex-steps .cite { display: block; margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--topic); font-size: 13px; line-height: 1.45; font-weight: 550; color: var(--ink2); }

  /* Engage: a thread in Slack or Teams ------------------------------------- */
  .eng { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  .eng-copy p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.55; color: var(--ink); max-width: 46ch; }
  .thread { margin: 0; padding: 18px 20px; background: var(--field); border-top: 2px solid var(--ink); box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgba(0, 9, 26, .35); border-radius: var(--radius); }
  .thread-h { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink2); }
  .msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px 0; }
  .msg + .msg { border-top: 1px solid var(--line-soft); }
  .av { width: 30px; height: 30px; border-radius: var(--radius); display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--paper); color: var(--ink); }
  .av.tb { background: var(--ink); color: #fff; }
  .msg b { font-size: 14px; font-weight: 700; }
  .msg p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
  .msg .cite { display: block; margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--topic); font-size: 12.5px; font-weight: 550; color: var(--ink2); }

  /* Frameworks the answers map to ------------------------------------------ */
  .fw { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 24px 24px; }
  .fw li { border-top: 2px solid var(--ink); padding-top: 12px; }
  .fw b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
  .fw span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
  .fw-note { margin: 28px 0 0; font-size: 14px; font-weight: 550; color: var(--ink); }
  .fw-note a { color: var(--signal); text-decoration: none; font-weight: 650; }

  /* Comparison: stacks on phones so the Tribble column never hides ---------- */
  .isec .cmp-scroll { margin-top: 8px; }

  /* Proof ------------------------------------------------------------------ */
  .pcard { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; padding-top: 28px; border-top: 3px solid var(--topic); }
  .pcard .lbl, .scard .lbl { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
  .pcard h3 { margin: 0 0 18px; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -.02em; max-width: 26ch; }
  .pcard blockquote { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 500; color: var(--ink); max-width: 48ch; }
  .pcard cite { display: block; margin-top: 10px; font-style: normal; font-size: 13.5px; font-weight: 650; color: var(--ink2); }
  .pcard .text-link { display: inline-block; margin-top: 20px; }
  .pcard .statstrip { margin-top: 0; padding-top: 0; border-top: 0; grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .scards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .scard { display: flex; flex-direction: column; padding-top: 18px; border-top: 3px solid var(--topic); text-decoration: none; color: var(--ink); }
  .scard strong { font-size: clamp(28px, 3vw, 36px); line-height: 1; letter-spacing: -.03em; font-weight: 700; }
  .scard span { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--ink); }
  .scard em { margin-top: auto; padding-top: 16px; font-style: normal; font-size: 14px; font-weight: 650; color: var(--signal); }
  .scard:hover em { text-decoration: underline; }
  .proof-note { margin: 22px 0 0; font-size: 14px; font-weight: 550; color: var(--ink); max-width: 64ch; }

  /* Reading rail ----------------------------------------------------------- */
  .reads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .read { display: flex; flex-direction: column; padding-top: 14px; border-top: 2px solid var(--topic); text-decoration: none; color: var(--ink); }
  .read .k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
  .read b { margin-top: 8px; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; font-weight: 650; }
  .read:hover b { color: var(--signal); }

  /* The close offers what its headline says, in the action colour */
  .close a { background: var(--signal); color: #fff; font-weight: 650; }

  /* Hub -------------------------------------------------------------------- */
  .hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .hub-card { display: flex; flex-direction: column; padding: 22px 22px 20px; background: var(--topic-w); border-top: 3px solid var(--topic); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
  .hub-card h3 { margin: 0 0 10px; font-size: 24px; letter-spacing: -.02em; }
  .hub-card p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
  .hub-card ul { list-style: none; margin: 0 0 18px; padding: 0; }
  .hub-card li { padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; }
  .hub-card em { margin-top: auto; font-style: normal; font-size: 14.5px; font-weight: 650; color: var(--signal); }
  .hub-card:hover em { text-decoration: underline; }
  .hub-more { margin: 28px 0 0; font-size: 15px; font-weight: 550; color: var(--ink); }
  .hub-more a { color: var(--signal); font-weight: 650; text-decoration: none; }
  .hub-more a:hover { text-decoration: underline; }
  .bydoc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .bydoc a { display: block; padding-top: 14px; border-top: 2px solid var(--ink); text-decoration: none; color: var(--ink); }
  .bydoc b { display: block; font-size: 19px; letter-spacing: -.015em; }
  .bydoc span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.45; }
  .bydoc em { display: block; margin-top: 12px; font-style: normal; font-size: 14px; font-weight: 650; color: var(--signal); }
  .bydoc a:hover em { text-decoration: underline; }

  /* Responsive ------------------------------------------------------------- */
  @media (max-width: 980px) {
    .ind-hero-grid, .wex, .eng, .pcard { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .segs, .hub-grid, .bydoc { grid-template-columns: minmax(0, 1fr); }
    .scards, .reads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 720px) {
    .ind-hero { padding: 56px var(--pad) 56px; }
    .dtab thead { display: none; }
    .dtab, .dtab tbody, .dtab tr, .dtab th, .dtab td { display: block; width: 100%; }
    .dtab tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
    .dtab tr.grp { padding: 22px 0 6px; border-bottom: 2px solid var(--ink); }
    .dtab th, .dtab td, .dtab tbody th { border-bottom: 0; padding: 3px 0; width: auto; }
    .dtab tr.grp th { padding-top: 0; }
    .dtab td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); margin-top: 8px; }
    .cmp.cmp-ours { min-width: 0; }
    .cmp.cmp-ours thead { display: none; }
    .cmp.cmp-ours, .cmp.cmp-ours tbody, .cmp.cmp-ours tr, .cmp.cmp-ours th, .cmp.cmp-ours td { display: block; width: 100%; }
    .cmp.cmp-ours tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
    .cmp.cmp-ours th, .cmp.cmp-ours td, .cmp.cmp-ours tbody th { border-bottom: 0; padding: 4px 0; width: auto; }
    .cmp.cmp-ours td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
    .cmp.cmp-ours tbody td:last-child { padding: 8px 10px; margin-top: 6px; background: var(--signal-wash); border-left: 2px solid var(--signal); }
    .scards, .reads { grid-template-columns: minmax(0, 1fr); }
  }
}