/* 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.

   Restraint is the point. Structure comes from ink rules, the paper field,
   hairlines and type: small uppercase labels, tabular numerals, weight.
   No colour coding, no tinted cards, no drop shadows, no icon glyphs.
   --signal is the one colour and it only ever means an action. */

@layer brand.page {

  /* Shared label: the small uppercase line Brand 2.0 uses for kickers */
  .lbl, .qdoc-head span, .dtab thead th, .dtab tr.grp th, .seg dt, .wex-q .k,
  .read .k, .thread-h, .wx-n {
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2);
  }

  /* Section shell ---------------------------------------------------------- */
  .isec { padding: clamp(72px, 8vw, 116px) 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 40px; font-size: clamp(17px, 1.8vw, 20px); max-width: 56ch; }
  .isec-wrap > h2 + :not(.dek) { margin-top: 40px; }

  /* Hero ------------------------------------------------------------------- */
  .ind-hero { padding: 88px var(--pad) 88px; 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: 22px; flex-wrap: wrap; margin-top: 32px; }
  .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 document: an industry form set in type. Paper field, ink
     rule on top, hairlines between rows. Owner and outcome are words. */
  .qdoc { margin: 0; padding: 22px 24px 20px; background: var(--paper); border-top: 2px solid var(--ink); border-radius: var(--radius); }
  .qdoc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; }
  .qdoc-head b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
  .qdoc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
  .qdoc li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 6px 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
  .qdoc .q-id { font-size: 12.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; padding-top: 1px; }
  .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; align-items: baseline; gap: 4px 16px; }
  .qdoc .q-own { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
  .qdoc .q-st { font-size: 12.5px; font-weight: 650; color: var(--ink); }
  .qdoc .q-st.routed { color: var(--ink2); font-style: italic; font-weight: 550; }
  .qdoc figcaption { margin-top: 14px; font-size: 13px; line-height: 1.5; font-weight: 500; 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 { padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
  .dtab tbody th { font-weight: 650; width: 28%; }
  .dtab tr.grp th { padding-top: 34px; padding-bottom: 10px; color: var(--ink); border-bottom: 1px solid var(--ink); }
  .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: 32px; }
  .seg { border-top: 2px solid var(--ink); padding-top: 18px; }
  .seg h3 { margin: 0 0 10px; font-size: 21px; letter-spacing: -.02em; }
  .seg p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
  .seg dl { margin: 0; }
  .seg dt { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
  .seg dd { margin: 5px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink); }

  /* Worked example: one question through the four steps -------------------- */
  .wex { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
  .wex-q { padding: 26px 26px 24px; background: var(--paper); border-top: 2px solid var(--ink); border-radius: var(--radius); }
  .wex-q .k { margin: 0 0 14px; }
  .wex-q blockquote { margin: 0; font-size: clamp(21px, 2.3vw, 27px); line-height: 1.28; letter-spacing: -.018em; font-weight: 650; color: var(--ink); }
  .wex-q p.src { margin: 18px 0 0; font-size: 13px; font-weight: 550; color: var(--ink2); }
  .wex-steps { list-style: none; margin: 0; padding: 0; }
  .wex-steps li { padding: 16px 0 20px; border-top: 1px solid var(--line); }
  .wex-steps li:first-child { border-top: 2px solid var(--ink); }
  .wx-n { display: block; margin-bottom: 8px; color: var(--ink); font-variant-numeric: tabular-nums; }
  .wex-steps h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.012em; }
  .wex-steps p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); max-width: 58ch; }
  .src-line { display: block; margin-top: 10px; font-size: 13px; line-height: 1.45; font-weight: 550; color: var(--ink2); }
  .src-line b { margin-right: 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }

  /* Product screenshots: matted on the paper field, no shadow -------------- */
  .shots { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 32px; align-items: start; }
  .shot { margin: 0; }
    .shot-mat { padding: 18px; background: var(--paper); border-top: 2px solid var(--ink); border-radius: var(--radius); }
  .shot img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--field); }
  .shot figcaption { margin-top: 12px; font-size: 14px; line-height: 1.45; font-weight: 550; color: var(--ink); max-width: 60ch; }
  .src-wrap { max-width: 1000px; }

  /* Engage: a thread in Slack or Teams, set as a transcript ---------------- */
  .eng { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; 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: 20px 24px 8px; background: var(--paper); border-top: 2px solid var(--ink); border-radius: var(--radius); }
  .thread-h { margin: 0 0 6px; }
  .msg { padding: 14px 0; }
  .msg + .msg { border-top: 1px solid var(--line); }
  .msg > b { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
  .msg p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); }

  /* Frameworks the answers map to ------------------------------------------ */
  .fw { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
  .fw li { padding: 16px 0 18px; border-top: 1px solid var(--line); }
  .fw li:nth-child(-n+3) { border-top: 2px solid var(--ink); }
  .fw b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
  .fw span { display: block; margin-top: 5px; font-size: 14px; line-height: 1.45; color: var(--ink); }
  .fw-note { margin: 28px 0 0; font-size: 14px; font-weight: 550; color: var(--ink); }

  /* Proof ------------------------------------------------------------------ */
  .pcard { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; padding-top: 26px; border-top: 2px solid var(--ink); }
  .lbl { margin: 0 0 12px; }
  .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: 19px; 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: 22px; }
  .pcard .statstrip { margin-top: 0; padding-top: 0; border-top: 0; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .scards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  .scard { display: flex; flex-direction: column; padding-top: 16px; border-top: 2px solid var(--ink); text-decoration: none; color: var(--ink); }
  .scard strong { font-size: clamp(28px, 3vw, 38px); line-height: 1; letter-spacing: -.03em; font-weight: 700; }
  .scard span { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--ink); }
  .scard em { margin-top: auto; padding-top: 18px; font-style: normal; font-size: 14px; font-weight: 650; color: var(--signal); }
  .scard:hover em { text-decoration: underline; }
  .proof-note { margin: 24px 0 0; font-size: 14.5px; line-height: 1.5; font-weight: 500; color: var(--ink); max-width: 64ch; }

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


  /* Hub -------------------------------------------------------------------- */
  .hub-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; }
  .hub-card { display: flex; flex-direction: column; padding-top: 18px; border-top: 2px solid var(--ink); text-decoration: none; color: var(--ink); }
  .hub-card h3 { margin: 0 0 10px; font-size: 21px; letter-spacing: -.02em; }
  .hub-card p { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--ink); }
  .hub-card ul { list-style: none; margin: 0 0 18px; padding: 0; }
  .hub-card li { padding: 8px 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: 32px 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: 28px; }
  .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, .bydoc { grid-template-columns: minmax(0, 1fr); }
    .fw, .hub-grid, .scards, .reads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fw li:nth-child(3) { border-top: 1px solid var(--line); }
  }
  @media (max-width: 720px) {
    .ind-hero { padding: 56px var(--pad) 56px; }
    .qdoc, .wex-q, .thread { padding-left: 18px; padding-right: 18px; }
    .shot-mat { padding: 10px; }
    .shot.wide .shot-mat { overflow-x: auto; }
    .shot.wide img { width: 760px; max-width: none; }
    .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: 26px 0 8px; border-bottom: 1px solid var(--ink); }
    .dtab th, .dtab td, .dtab tbody th { border-bottom: 0; padding: 3px 0; width: auto; }
    .dtab tr.grp th { padding: 0; border: 0; }
    .dtab td[data-label]::before { content: attr(data-label); display: block; margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
    .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: .12em; text-transform: uppercase; color: var(--ink2); }
    .cmp.cmp-ours tbody td:last-child { padding: 8px 10px; margin-top: 6px; background: var(--signal-wash); }
    .fw, .hub-grid, .scards, .reads, .shots { grid-template-columns: minmax(0, 1fr); }
    .fw li:nth-child(2), .fw li:nth-child(3) { border-top: 1px solid var(--line); }
  }

  /* Stylized layer ---------------------------------------------------------
     Three moves give these pages their own character inside Brand 2.0:
     an ink field for the hero and the worked example, an editorial rail that
     numbers each section, and one geometric line icon per industry. */

  .ind-icon { display: block; width: 100%; height: 100%; }

  /* Hero on the ink field, with the question document as a white sheet */
  .ind-hero.ink { background: var(--ink); color: #fff; padding: 96px var(--pad) 104px; }
  .ind-hero.ink .hero-icon { width: 64px; height: 64px; margin: 0 0 30px; color: #fff; }
  .ind-hero.ink .kicker { color: rgba(255, 255, 255, .72); }
  .ind-hero.ink .kicker a { color: #fff; }
  .ind-hero.ink .hero-h1 { color: #fff; }
  .ind-hero.ink .dek { color: rgba(255, 255, 255, .86); }
  .ind-hero.ink .btn-primary { background: #fff; color: var(--ink); }
  .ind-hero.ink .btn-primary:hover { background: var(--signal); color: #fff; }
  .ind-hero.ink .text-link { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .5); }
  .ind-hero.ink .text-link:hover { text-decoration: none; border-bottom-color: #fff; }
  .ind-hero.ink .qdoc { background: var(--field); border-top: 0; padding: 24px 26px 22px; }
  .ind-hero.ink .qdoc-head { padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
  .ind-hero.ink .qdoc ol { border-top: 0; }

  /* Editorial rail: a numbered label beside each section */
  .isec-wrap.rail { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 0 48px; align-items: start; }
  .rail-l { position: sticky; top: 104px; padding-top: 6px; border-top: 2px solid var(--ink); }
  .rail-n { display: block; margin-top: 12px; font-size: 56px; line-height: .9; font-weight: 300; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
  .rail-t { display: block; margin-top: 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
  .rail-c > .kicker { margin-bottom: 14px; }
  .rail-c > h2 + :not(.dek) { margin-top: 40px; }

  /* The worked example on the ink field */
  .isec.ink { background: var(--ink); color: #fff; border-top: 0; }
  .isec.ink .rail-l { border-top-color: #fff; }
  .isec.ink .rail-n { color: #fff; }
  .isec.ink .rail-t, .isec.ink .kicker { color: rgba(255, 255, 255, .7); }
  .isec.ink h2, .isec.ink h3 { color: #fff; }
  .isec.ink .dek { color: rgba(255, 255, 255, .86); }
  .isec.ink .wex { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .isec.ink .wex-q { padding: 0; background: none; border: 0; }
  .isec.ink .wex-q .k { color: rgba(255, 255, 255, .6); }
  .isec.ink .wex-q blockquote { color: #fff; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.18; letter-spacing: -.025em; max-width: 30ch; }
  .isec.ink .wex-q p.src { color: rgba(255, 255, 255, .6); }
  .isec.ink .wex-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
  .isec.ink .wex-steps li, .isec.ink .wex-steps li:first-child { padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .28); }
  .isec.ink .wx-n { font-size: 44px; line-height: 1; font-weight: 300; letter-spacing: -.03em; text-transform: none; color: rgba(255, 255, 255, .5); margin-bottom: 18px; }
  .isec.ink .wex-steps p { color: rgba(255, 255, 255, .84); font-size: 14.5px; }
  .isec.ink .src-line { color: rgba(255, 255, 255, .62); }
  .isec.ink .src-line b { color: #fff; }

  /* Bigger proof numbers */
  .pcard .stat strong { font-size: clamp(40px, 5vw, 64px); }
  .scard strong { font-size: clamp(36px, 4vw, 52px); }

  /* Hub cards carry the industry icon */
  .hub-card .hub-icon { width: 44px; height: 44px; margin: 4px 0 18px; color: var(--ink); }

  @media (max-width: 980px) {
    .isec-wrap.rail { grid-template-columns: minmax(0, 1fr); }
    .rail-l { position: static; display: flex; align-items: baseline; gap: 14px; margin-bottom: 28px; }
    .rail-n { font-size: 36px; }
    .isec.ink .wex-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  }
  @media (max-width: 720px) {
    .ind-hero.ink { padding: 56px var(--pad) 64px; }
    .isec.ink .wex-steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  }
}