/* ==========================================================================
   Hub pages (v2): /what-we-do, /who-we-help, /resources, /lab.
   Layered on site.css. Only components site.css does not have.
   ========================================================================== */

/* Hero "on this page" index */
.hub-index { background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--ink); display: grid; align-self: end; min-width: 0; }
.hub-index > p { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 12px 18px; border-bottom: 1px solid var(--line); }
.hub-index a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 14px 18px; border-bottom: 1px solid var(--line); transition: background var(--t-fast); }
.hub-index a:last-child { border-bottom: 0; }
.hub-index a:hover { background: var(--surface-2); }
.hub-index .n { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 12px; font-weight: 600; grid-row: 1 / span 2; }
.hub-index strong { font-weight: 650; font-size: 16px; line-height: 1.3; }
.hub-index .d { grid-column: 2; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.hub-index .arr { grid-column: 3; grid-row: 1 / span 2; align-self: center; transition: transform var(--t-fast); }
.hub-index a:hover .arr { transform: translateX(3px); }

/* Section number in labels */
.label .no { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 12px; font-weight: 600; }

/* Small mono heading above a list */
.list-head { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 14px; }

/* Method cards (four ways we automate) */
.methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.methods > div { padding: 22px 22px 6px 0; display: grid; gap: 10px; align-content: start; min-width: 0; }
.methods > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.methods h3 { font-family: var(--f-display); font-stretch: 118%; font-weight: 720; font-size: 22px; line-height: 1.1; letter-spacing: -.02em; }
.methods p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 1000px) { .methods { grid-template-columns: repeat(2, minmax(0, 1fr)); } .methods > div:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 560px) { .methods { grid-template-columns: minmax(0, 1fr); } .methods > div, .methods > div + div { padding: 20px 0 4px; border-left: 0; } .methods > div + div { border-top: 1px solid var(--line); } }

/* Agent cards (same look as the homepage) */
.agents { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.agent { background: var(--surface); border: 1px solid var(--line); padding: 20px; display: grid; gap: 10px; align-content: start; transition: border-color var(--t-fast); min-width: 0; }
.agent:hover { border-color: var(--ink); }
.agent .eyebrow { display: flex; justify-content: space-between; }
.agent h3 { font-family: var(--f-display); font-stretch: 112%; font-weight: 700; font-size: 19px; line-height: 1.2; }
.agent p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.agent .metric { border-top: 1px solid var(--ink); padding-top: 10px; font-family: var(--f-display); font-stretch: 118%; font-weight: 740; font-size: 22px; letter-spacing: -.02em; line-height: 1.1; }
.agent .metric span { display: block; font-family: var(--f-body); font-stretch: 100%; font-weight: 400; font-size: 13px; color: var(--muted); letter-spacing: 0; margin-top: 4px; }
@media (max-width: 1080px) { .agents { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .agents { grid-template-columns: minmax(0, 1fr); } }

/* Framed panel with a heading row */
.panel { background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.panel-head .eyebrow { color: var(--ink); }
.panel-body { padding: 20px; display: grid; gap: 16px; }
.panel.strong { border: 1.5px solid var(--ink); }
.panel.strong .panel-head { background: var(--ink); color: var(--bg); border-bottom-color: var(--ink); }
.panel.strong .panel-head .eyebrow, .panel.strong .panel-head .meta { color: var(--bg); }

/* Numbered timeline (a real engagement, step by step) */
.timeline { list-style: none; display: grid; counter-reset: tl; }
.timeline li { counter-increment: tl; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.timeline li:last-child { border-bottom: 0; }
.timeline li::before { content: counter(tl, decimal-leading-zero); font-family: var(--f-mono); font-stretch: 87.5%; font-size: 12px; font-weight: 600; color: var(--ink); padding-top: 3px; }
.big-stat { display: grid; gap: 4px; border-top: 2px solid var(--ink); padding-top: 14px; }
.big-stat strong { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: clamp(40px, 4.4vw, 60px); line-height: .92; letter-spacing: -.05em; }
.big-stat span { font-size: 14.5px; color: var(--ink-2); }

/* Partner block */
.partner-logo { height: 46px; width: auto; display: block; }
.facts { list-style: none; display: grid; border-top: 1px solid var(--line); }
.facts li { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.facts b { font-weight: 650; font-size: 15.5px; }
.facts span { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 520px) { .facts li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* Reading list (articles as rows) */
.readlist { display: grid; border-top: 2px solid var(--ink); }
.readlist a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.readlist strong { font-family: var(--f-display); font-stretch: 106%; font-weight: 650; font-size: 17px; line-height: 1.3; }
.readlist .meta { grid-column: 1; }
.readlist .arr { grid-column: 2; grid-row: 1 / span 2; align-self: center; transition: transform var(--t-fast); }
.readlist a:hover strong { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.readlist a:hover .arr { transform: translateX(3px); }
.readlist.cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
@media (max-width: 760px) { .readlist.cols { grid-template-columns: minmax(0, 1fr); } }

/* Case cards: three-up variant and a pricing example card */
.case-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case-grid.three .cc-stat strong { font-size: clamp(36px, 3.4vw, 50px); }
@media (max-width: 1080px) { .case-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .case-grid.three { grid-template-columns: minmax(0, 1fr); } }
.case-card .cc-list { list-style: none; display: grid; gap: 4px; font-size: 14.5px; color: var(--ink-2); }
.case-card .cc-list li::before { content: "+ "; font-family: var(--f-mono); color: var(--muted); }

/* Segment pages: what-we-automate block */
.segment-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .segment-grid { grid-template-columns: minmax(0, 1fr); } }
.seg-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 22px; }
.sys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }

/* Industry cards (non-healthcare) */
.ind-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.ind-grid > a { padding: 20px 18px 20px 0; display: grid; gap: 10px; align-content: start; min-width: 0; }
.ind-grid > a + a { padding-left: 18px; border-left: 1px solid var(--line); }
.ind-grid h3 { font-family: var(--f-display); font-stretch: 112%; font-weight: 700; font-size: 18px; line-height: 1.2; }
.ind-grid p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.ind-grid .btn-text { justify-self: start; font-size: 14px; }
.ind-grid > a:hover h3 { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }
@media (max-width: 1080px) { .ind-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ind-grid > a:nth-child(4) { padding-left: 0; border-left: 0; } .ind-grid > a:nth-child(n+4) { border-top: 1px solid var(--line); } }
@media (max-width: 640px) { .ind-grid { grid-template-columns: minmax(0, 1fr); } .ind-grid > a, .ind-grid > a + a { padding: 18px 0; border-left: 0; } .ind-grid > a + a { border-top: 1px solid var(--line); } }

/* Honest note box */
.note-box { border: 1px dashed var(--line-strong); padding: 22px 24px; display: grid; gap: 10px; }
.note-box strong { font-family: var(--f-display); font-stretch: 112%; font-weight: 700; font-size: 19px; line-height: 1.25; }
.note-box p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* Pricing pointer strip */
.price-strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 24px 40px; align-items: center; background: var(--panel); color: var(--panel-ink); padding: clamp(22px, 3vw, 34px); }
.price-strip .eyebrow { color: var(--panel-muted); display: block; margin-bottom: 8px; }
.price-strip strong { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: clamp(30px, 3.4vw, 46px); line-height: .95; letter-spacing: -.045em; color: #F2C230; display: block; }
.price-strip p { font-size: 15px; line-height: 1.55; color: var(--panel-muted); }
.price-strip .row { flex-wrap: wrap; }
.price-strip .btn { background: #F2C230; color: #15181A; border-color: #F2C230; }
.price-strip .btn.ghost { background: transparent; color: #E8ECEB; border-color: #E8ECEB; }
@media (max-width: 1000px) { .price-strip { grid-template-columns: minmax(0, 1fr); } }

/* Founder note cards (same look as the homepage) */
.leads2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lead-card { display: grid; grid-template-columns: 170px minmax(0, 1fr); border: 1px solid var(--line); transition: border-color var(--t-fast); min-width: 0; }
.lead-card:hover { border-color: var(--ink); }
.lead-card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); min-height: 220px; }
.lead-card .txt { padding: 22px; display: grid; gap: 10px; align-content: start; }
.lead-card.cto { background: #0B0E0F; color: #ECEBE4; border-color: #0B0E0F; }
.lead-card.cto p { color: #C9CBC5; }
.lead-card.ceo { background: #ECEAE4; color: #1E211F; }
.lead-card.ceo .reg-note i { background: #1F5641; }
.lead-card .latest { font-family: var(--f-display); font-stretch: 118%; font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -.015em; }
.lead-card.ceo .latest { font-family: var(--f-serif); font-stretch: 100%; font-weight: 500; font-size: 23px; }
.lead-card p { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.lead-card .btn-text { justify-self: start; }
@media (max-width: 900px) { .leads2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .lead-card { grid-template-columns: minmax(0, 1fr); } .lead-card img { height: 220px; min-height: 0; object-position: center 20%; } }

/* Tool cards (resources, lab) */
.tool-card { background: var(--surface); border: 1.5px solid var(--ink); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; padding: clamp(22px, 3vw, 32px); position: relative; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); min-width: 0; }
.tool-card::before { content: ""; position: absolute; top: -1.5px; left: -1.5px; width: 14px; height: 14px; background: var(--yellow); }
.tool-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.tool-card .eyebrow { grid-column: 1 / -1; }
.tool-card h3 { font-family: var(--f-display); font-stretch: 118%; font-weight: 740; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; letter-spacing: -.025em; }
.tool-card p { grid-column: 1 / -1; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); max-width: 52ch; }
.tool-card .btn-text { grid-column: 1 / -1; justify-self: start; }
.tool-card .glyph { grid-column: 2; grid-row: 2; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 12px; font-weight: 600; border: 1.5px solid var(--ink); padding: 6px 9px; align-self: start; white-space: nowrap; }

/* Library list inside a card */
.src-list { list-style: none; display: grid; border-top: 1px solid var(--line); }
.src-list li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }

/* News cards on a hub use h3 */
.post-card h3 + p { margin-top: 0; }