/* ============================================================================
   Industries template page — extracted from styles.css. Loaded page-scoped via a
   <link> HtmlEmbed on the Industries template only. Every selector is page-local.
   iconify-icon -> .iconify (site ships the Iconify SVG framework, not the web
   component). Re-declares reused-class rules Webflow's rebuild dropped, plus the
   page-unique namespaces (indx / indlogo / resx / tqc) and the interior hero /
   console / story-feature shared with the use-case template.
   ============================================================================ */

/* ---------- Font corrections (the .tq-site wrapper forces Inter) ---------- */
.int-hero, .block, .block-tight, .resx-sec { font-family: var(--font-body); }
.int-hero-copy .lede, .head-split .lede { font-family: var(--font-body); }
.hero-actions .btn { font-family: var(--font-body); }

/* ---------- Section rhythm / head-split ---------- */
.head-split .section-title { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.65rem); }
.head-split .lede { margin: 0; padding-top: 5px; }

/* section-alt has no rule in styles.css — borders are per-section hairlines */
#challenges, #usecases, #standards, #questions { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#more-reading { border-top: 1px solid var(--line); }
#trusted { padding-top: clamp(26px, 3.2vw, 44px); }
#voice .story-feature { --brand: #0E253D; }

/* ---------- Interior hero (left copy, console right) ---------- */
.ucx-hero { position: relative; overflow: hidden; }
.int-hero { text-align: left; padding-top: clamp(64px, 8vw, 108px); padding-bottom: clamp(40px, 5vw, 72px); }
.int-hero-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(30px, 4.5vw, 66px); align-items: center; }
.int-hero .int-hero-copy { text-align: left; }
.int-hero .int-hero-copy .display { max-width: 20ch; margin: 16px 0 0; }
.int-hero .int-hero-copy .display-cms { max-width: 20ch; }
.int-hero .int-hero-copy .lede { max-width: 56ch; margin: 18px 0 0; }
.int-hero .int-hero-copy .hero-actions { margin-top: 30px; justify-content: flex-start; }
.int-hero .int-hero-copy .cs-crumbs { margin-bottom: 4px; }
.int-hero-media { position: relative; }
.int-hero-media .ucx-console { width: 100%; }
.display-cms { font-size: clamp(2.2rem, 4.2vw, 3.3rem); }
/* minmax(0,...) not a bare 1fr: a bare 1fr floors at the widest child's max-content
   size, and the hero console declares a fixed 210px rail, so on /industry/life-sciences
   the single column resolved to 530px inside a 375px viewport and the whole hero hung
   175px off the right edge. min-width:0 lets the children be narrower than their
   content too, which is what actually un-grids this on a phone. */
@media (max-width: 940px) {
  .int-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .int-hero-grid > * { min-width: 0; }
  .int-hero-media { margin-top: clamp(28px, 4vw, 44px); }
  .int-hero .int-hero-copy .display, .int-hero .int-hero-copy .display-cms { max-width: 40ch; }
}

/* Console reflow. The console markup and its base CSS come from a CMS field, whose
   <style> block is emitted AFTER this file, so these are scoped to .int-hero-media to
   win on specificity rather than order. Only the life-sciences console has .ucx-cbody;
   the government and media variants have no rail and are untouched. */
@media (max-width: 700px) {
  .int-hero-media .ucx-cbody { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .int-hero-media .ucx-crail { border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 10px; }
  .int-hero-media .ucx-cmain { padding: 16px 14px; }
  .int-hero-media .ucx-cmain-head { flex-wrap: wrap; }
  /* 1.6fr 1fr auto leaves the owner column at ~50px on a phone; every cell placed
     explicitly because auto-placement reorders them once the pill spans rows */
  .int-hero-media .ucx-crow { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: start; }
  .int-hero-media .ucx-crow .ucx-casset { grid-column: 1; grid-row: 1; }
  .int-hero-media .ucx-crow .ucx-cowner { grid-column: 1; grid-row: 2; font-size: 12.5px; }
  .int-hero-media .ucx-crow .ucx-pill { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* buttons row ships display:block in the Webflow bundle */
.hero-actions { display: flex; flex-wrap: wrap; gap: 20px; }
.hero-actions.center { justify-content: center; }

/* ---------- Console mock (shared shell) ---------- */
.ucx-console { border: 1px solid var(--line-strong); background: var(--card); overflow: hidden; box-shadow: 0 30px 60px -40px rgba(20,20,30,.35); text-align: left; }
.ucx-cbar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.ucx-cbar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.ucx-cbar .ucx-ctitle { margin-left: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); }

/* ---------- Industry hero — governed data-model graph ---------- */
.indx-model .indx-graph { padding: clamp(12px, 1.6vw, 20px) clamp(14px, 1.8vw, 22px) clamp(8px, 1vw, 12px); }
.indx-graph > svg { width: 100%; height: auto; display: block; }
.indx-badge .iconify { width: 16px; height: 16px; flex: none; }
.indx-edge { stroke: var(--line); stroke-width: 1.4; }
.indx-edge.is-acc { stroke: var(--accent); stroke-dasharray: 5 4; }
.indx-elabel { fill: var(--ink-mute); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em; }
.indx-elabel-bg { fill: #fff; }
.indx-node { fill: #fff; stroke: var(--line); stroke-width: 1.2; }
.indx-node-t { fill: var(--ink); font-family: var(--font-body); font-size: 15px; font-weight: 600; }
.indx-hub { fill: #fdf0ea; stroke: var(--accent); stroke-width: 1.8; }
.indx-hub-t { fill: var(--ink); font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.indx-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding: 12px 2px 4px; margin-top: 6px; }
.indx-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink); }
.indx-badge .iconify { color: var(--accent); font-size: 16px; }
.indx-std { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }

/* ---------- Trusted-across logo band ---------- */
.indlogos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(24px, 3vw, 38px); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.indlogo { display: grid; place-items: center; min-height: clamp(112px, 11vw, 140px); padding: 22px 28px; background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .2s ease; text-decoration: none; }
.indlogo img { height: 30px; width: auto; max-width: min(200px, 84%); filter: grayscale(1); opacity: .62; transition: filter .22s ease, opacity .22s ease; }
.indlogo:hover { background: var(--bg-2); }
.indlogo:hover img { filter: none; opacity: 1; }
@media (max-width: 720px) { .indlogos { grid-template-columns: 1fr; } }

/* ---------- cap-grid 2-col + card icon reset (Webflow dropped these) ---------- */
.cap-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cap .c-ic { background: transparent !important; border: 0 !important; box-shadow: none !important; width: auto !important; height: auto !important; display: flex; justify-content: flex-start; margin-bottom: 14px; }
.cap .c-ic .iconify { font-size: 27px; color: var(--ink); }
.cap .c-ic-acc .iconify { color: var(--accent); }
.cap h3 { margin-top: 4px; }
.cap-card:hover { background: var(--bg-2); }
.uc-cards .cap-card { position: relative; }
.uc-cards .cap-card:hover h3 { color: var(--accent); }
.uc-cards .cap-card > .iconify { position: absolute; top: clamp(20px,2.2vw,28px); right: clamp(20px,2.2vw,28px); font-size: 18px; color: var(--ink-mute); transition: color .2s ease, transform .2s ease; }
.uc-cards .cap-card:hover > .iconify { color: var(--accent); transform: translate(2px,-2px); }
.cap-link { display: inline-flex; align-items: center; gap: 7px; }
.cap-card:hover .cap-link .arr { transform: translateX(4px); }
.res-cat { display: inline-block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
@media (max-width: 1000px) { .cap-grid, .cap-grid.cols-2 { grid-template-columns: 1fr; } }

/* ---------- Proof stats (canvas + copy) ---------- */
.resx-sec { padding: 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.resx { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; align-items: stretch; min-height: 100vh; }
.resx-art { position: relative; min-height: clamp(420px, 42vw, 620px); height: 100%; border: 0; background: #fff radial-gradient(rgba(14,26,46,.10) 1px, transparent 1px); background-size: 22px 22px; overflow: hidden; }
.resx-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.resx-main { align-self: center; padding: clamp(44px, 6vw, 88px) clamp(24px, 6vw, 100px) clamp(44px, 6vw, 88px) clamp(28px, 5vw, 80px); }
.resx-main .section-title { max-width: 16ch; }
.resx-main .lede { max-width: 44ch; margin-top: 16px; }
.resx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3.4vw, 46px) clamp(24px, 3vw, 48px); margin-top: clamp(30px, 3.6vw, 48px); }
.resx-stat-n { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 3.6vw, 3.4rem); letter-spacing: -.03em; line-height: 1; color: var(--accent); }
.resx-stat-l { margin-top: 10px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); max-width: 22ch; }
@media (max-width: 860px) {
  .resx { grid-template-columns: 1fr; min-height: 0; }
  .resx-art { min-height: 320px; height: auto; order: 1; }
}

/* ---------- Questions the graph answers (compare) ---------- */
.tqc { margin-top: clamp(28px, 3.4vw, 44px); border: 1px solid var(--line); }
.tqc-row { display: grid; grid-template-columns: 1fr 1fr; }
.tqc-cell { display: flex; flex-direction: column; gap: 30px; padding: clamp(28px, 3.4vw, 56px); min-width: 0; background: #fff; }
.tqc-on { border-left: 1px solid var(--line); }
.tqc-label { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute); }
.tqc-label i { font-style: normal; color: var(--line-strong); }
.tqc-on .tqc-label { color: var(--accent); }
.tqc-on .tqc-label i { color: rgba(241,90,34,.45); }
.tqc-chat { display: flex; flex-direction: column; gap: 22px; padding: 0 clamp(0px, 2.4vw, 40px); font-size: 14px; line-height: 1.6; }
.tqc-off .tqc-chat { color: #7C8186; }
.tqc-on .tqc-chat { color: #24282B; }
.tqc-ask { align-self: flex-end; max-width: 88%; padding: 10px 15px; border-radius: 18px; background: var(--bg-2); color: var(--ink); }
.tqc-say { margin: 0; }
.tqc-tool { margin: 0; display: flex; align-items: center; gap: 8px; color: #A9AEB3; }
.tqc-toolic { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; color: #A9AEB3; flex: none; }
.tqc-tool b { font-weight: 500; color: #8A8F94; }
.tqc-on .tqc-tool b { color: var(--accent); }
.tqc-on .tqc-toolic { border-color: rgba(241,90,34,.4); color: var(--accent); }
.tqc-out { border: 1px solid var(--line); border-radius: 10px; padding: clamp(16px, 1.8vw, 24px); display: flex; flex-direction: column; gap: 16px; }
.tqc-outh { font-weight: 600; color: #5C6166; }
.tqc-on .tqc-outh { color: var(--accent-ink, #C7440F); }
.tqc-out table { width: 100%; border-collapse: collapse; }
.tqc-out th { text-align: left; font-weight: 500; color: #A9AEB3; padding: 0 12px 9px 0; border-bottom: 1px solid var(--line); }
.tqc-out td { padding: 10px 12px 10px 0; border-bottom: 1px solid #F4F2ED; color: inherit; }
.tqc-out tr:last-child td { border-bottom: 0; }
.tqc-note { color: #A9AEB3; }
.tqc-note code { font-family: var(--font-mono); font-size: 14px; background: var(--bg-2); color: #7C8186; padding: 1px 6px; border-radius: 4px; }
.tqc-on .tqc-note { color: #6B7075; }
.tqc-on .tqc-note code { background: var(--bg-2); color: #A83A0D; }
.tqc-take { margin-top: auto; padding-top: clamp(26px, 3vw, 44px); }
.tqc-take h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 1.35vw, 1.2rem); letter-spacing: -.015em; color: #5C6166; }
.tqc-on .tqc-take h3 { color: var(--ink); }
.tqc-take p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-mute); max-width: 40ch; }
.tqc-on .tqc-take p { color: var(--ink-soft); }
@media (max-width: 820px) {
  .tqc-row { grid-template-columns: 1fr; }
  .tqc-on { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Customer quote (story-feature, re-declared) ---------- */
.story-feature { position: relative; display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 4vw, 60px); margin-top: clamp(30px, 3.6vw, 46px); background: var(--brand, #16161b); color: #fff; text-decoration: none; padding: clamp(34px, 4vw, 60px); overflow: hidden; }
.story-feature-main { display: flex; flex-direction: column; }
.story-feature-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.story-feature-q { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.2; letter-spacing: -.02em; color: #fff; margin: clamp(16px, 1.8vw, 22px) 0 0; border: 0; padding: 0; }
.story-foot { margin-top: auto; padding-top: clamp(26px,3vw,38px); display: flex; align-items: center; gap: 16px; }
.story-foot-who { display: flex; flex-direction: column; gap: 2px; }
.story-foot b { font-weight: 600; font-size: .95rem; color: #fff; display: block; }
.story-foot b + div { font-weight: 400; font-size: .85rem; color: rgba(255,255,255,.82); margin-top: 2px; }
.story-feature-eyebrow::before { content: "What customers say \00b7 "; }
/* The base .story-foot above re-declares align-items:center for the desktop row,
   and this file loads after the compiled bundle, so it outranked the breakpoint
   rule there. The row still turned into a column on a phone but kept centring,
   which shrink-wrapped the attribution and left ~69px of dead space to its left. */
@media (max-width: 760px) {
  .story-feature { grid-template-columns: 1fr; }
  .story-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------- Breadcrumb current page (CMS name) ---------- */
.cs-crumbs [aria-current] { color: var(--ink); }

/* ---------- CMS RichText: challenges + standards as bordered cards (2-col) ----------
   The fields are single RichText blobs (flat h3/p siblings), so each item is boxed by
   pairing borders: the top element gets border on top+sides, the bottom element gets
   sides+bottom — together they read as one bordered card. break-after:avoid keeps an
   item's blocks in the same column. */
#challenges .w-richtext, #standards .w-richtext { margin-top: clamp(28px, 3.4vw, 44px); columns: 2; column-gap: clamp(16px, 1.8vw, 24px); }
#challenges .w-richtext h3, #standards .w-richtext h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.02rem, 1.35vw, 1.16rem); letter-spacing: -.01em; line-height: 1.3; color: var(--ink); }
#challenges .w-richtext p, #standards .w-richtext p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }
#standards .w-richtext strong { display: block; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
/* challenges card = h3 (top) + p (bottom) */
#challenges .w-richtext h3 { margin: 0; padding: clamp(24px,2.6vw,32px) clamp(22px,2.4vw,30px) 0; border: 1px solid var(--line); border-bottom: 0; background: var(--card, #fff); break-inside: avoid; break-after: avoid; -webkit-column-break-after: avoid; }
#challenges .w-richtext p { margin: 0 0 clamp(14px,1.6vw,20px); padding: 9px clamp(22px,2.4vw,30px) clamp(24px,2.6vw,32px); border: 1px solid var(--line); border-top: 0; background: var(--card, #fff); break-inside: avoid; }
/* standards card = p>strong (top) + h3 (middle) + p (bottom) */
#standards .w-richtext p:has(strong) { margin: 0; padding: clamp(24px,2.6vw,32px) clamp(22px,2.4vw,30px) 0; border: 1px solid var(--line); border-bottom: 0; background: var(--card, #fff); break-inside: avoid; break-after: avoid; }
#standards .w-richtext h3 { margin: 0; padding: 6px clamp(22px,2.4vw,30px) 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--card, #fff); break-inside: avoid; break-after: avoid; }
#standards .w-richtext p:not(:has(strong)) { margin: 0 0 clamp(14px,1.6vw,20px); padding: 8px clamp(22px,2.4vw,30px) clamp(24px,2.6vw,32px); border: 1px solid var(--line); border-top: 0; background: var(--card, #fff); break-inside: avoid; }
@media (max-width: 720px) { #challenges .w-richtext, #standards .w-richtext { columns: 1; } }

/* ---------- Scroll reveal (site compiles .reveal to opacity:1) ---------- */
.reveal { transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal:not(.in) { opacity: 0; transform: translateY(20px); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal:not(.in) { opacity: 1 !important; transform: none !important; } }