/* =====================================================================
   APS · V4 industry group (industries.html, claims, accounting, medical)
   Loaded after v4.css. Only what v4.css lacks; v4.css tokens only, no new hex.
   ===================================================================== */

/* ---------- Shared: dark-ground fixes for inner-page parts ---------- */
.g-ink .crumb, .g-brown .crumb { color: var(--on-dark-2); }
.g-ink .crumb a, .g-brown .crumb a { color: var(--on-dark); border-bottom-color: var(--rule-dark-2); }
.g-ink .crumb a:hover, .g-brown .crumb a:hover { color: var(--on-dark); border-bottom-color: var(--gold-lt); }
.g-ink .page-actions .link, .g-brown .page-actions .link { color: var(--on-dark); }
.g-ink .plain li, .g-brown .plain li { border-top-color: var(--rule-dark); color: var(--on-dark-2); }
.g-ink .plain li:last-child, .g-brown .plain li:last-child { border-bottom-color: var(--rule-dark); }
.link:active { color: var(--gold-dk); }
.g-ink .link:active, .g-brown .link:active { color: var(--gold-lt); }
.crumb a:active { color: var(--gold-dk); }

/* Two conveyors on one page: the second sits a little tighter */
.cv-intro { margin-top: var(--s2); font-size: 15px; color: var(--ink-3); }
.cv-tabs [role="tab"]:focus-visible { outline-offset: 2px; }

/* Pains: four items in a 2 × 2 (or 4-across) ruled list */
.pain-list.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Typographic Before / With AI: solid tags + plain text, no tinted boxes */
.ba-lines { margin-top: var(--s3); }
.ba-lines p { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: var(--s3); align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.ba-lines p:last-child { border-bottom: 1px solid var(--rule); }
.ba-lines .tag { justify-self: start; text-align: center; min-width: 70px; }
.tag-before { background: var(--stone-solid); color: var(--ink); }
.tag-after { background: var(--blue); color: #fff; }
.g-ink .ba-lines p, .g-brown .ba-lines p { border-color: var(--rule-dark); color: var(--on-dark-2); }

/* A grid of examples: open typography, hairlines, no cards */
.ex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s7); }
.ex-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
.ex-grid > li { padding-top: var(--s4); border-top: 2px solid var(--ink); }
.ex-grid h3 { font-size: clamp(25px, 2vw, 30px); }
.ex-grid .desc { margin-top: var(--s2); font-size: 15.5px; color: var(--ink-2); }
.ex-grid .uses { margin-top: var(--s3); }
.ex-foot { margin-top: var(--s6); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s2) var(--s5); padding-top: var(--s3); border-top: 1px solid var(--rule); font-size: 15px; color: var(--ink-2); }

/* Two-column FAQ (accounting): the questions run in two ruled columns */
.faq-two .faq-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s3) var(--s6); margin-bottom: var(--s5); }
.faq-two .faq-top p { color: var(--ink-2); }
.faq-two .faq-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s7); align-items: start; }
.faq-two .faq-cols > div { display: block; }
.faq-two details { border-top: 1px solid var(--rule-strong); }
.faq-two .faq-cols > div > details:last-child { border-bottom: 1px solid var(--rule-strong); }
.faq-two summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font: 600 clamp(21px, 1.7vw, 24px)/1.25 var(--display); transition: color .2s; }
.faq-two summary::-webkit-details-marker { display: none; }
.faq-two summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--ink), var(--ink)) center / 14px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 14px no-repeat; transition: transform .35s var(--ease); }
.faq-two details[open] summary::after { transform: rotate(45deg); }
.faq-two summary:hover { color: var(--gold-dk); }
.faq-two details p { padding: 0 32px 24px 0; color: var(--ink-2); }
.faq summary:focus-visible, .faq-two summary:focus-visible { outline-offset: 4px; }

/* =====================================================================
   CLAIMS · ink hero with the three real results as a stat ledger
   ===================================================================== */
.claims-hero { padding: clamp(48px, 6vw, 88px) 0 clamp(64px, 7vw, 104px); }
.claims-hero .grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 80px; align-items: center; }
.claims-hero h1 { font-size: clamp(46px, 5.6vw, 88px); line-height: .98; }
.claims-hero h1 em { font-weight: 500; color: var(--gold-lt); }
.claims-hero .lead { margin-top: 26px; }
.claims-hero .plate-fig .ph { aspect-ratio: 5 / 4; }
.claims-hero .plate-fig figcaption { border-top-color: var(--rule-dark); }

.ledger { margin-top: clamp(56px, 6vw, 88px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-dark-2); }
.ledger > div { padding: var(--s4) var(--s5) 0 0; }
.ledger > div + div { padding-left: var(--s5); border-left: 1px solid var(--rule-dark); }
.ledger .tag { margin-bottom: var(--s3); }
.ledger .num { display: block; font: 600 clamp(54px, 5.4vw, 88px)/.92 var(--display); letter-spacing: -.015em; color: var(--gold-lt); font-variant-numeric: lining-nums; }
.ledger .num-cap { display: block; margin-top: var(--s2); font-size: 16px; line-height: 1.4; color: var(--on-dark); }
.ledger h2 { margin-top: var(--s3); font-size: clamp(22px, 1.8vw, 27px); color: var(--on-dark); }
.ledger-note { margin-top: var(--s4); font-size: 14px; color: var(--on-dark-2); }
.ledger-note .link { color: var(--on-dark); margin-left: 4px; }

/* The real system's screen, framed like a plate */
.sys-detail { margin-top: clamp(56px, 6vw, 88px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6) var(--s8); align-items: start; }
.shot { margin: 0; }
.shot .frame { background: var(--cream); outline: 1px solid var(--rule-strong); outline-offset: 7px; box-shadow: var(--sh-hero); overflow: hidden; }
.shot .frame img { width: 100%; height: auto; }
.shot figcaption { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--rule); }
.sys-list > li { padding: var(--s4) 0; border-top: 1px solid var(--rule-strong); }
.sys-list > li:last-child { border-bottom: 1px solid var(--rule-strong); }
.sys-list .row-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.sys-list h3 { font-size: clamp(25px, 2vw, 30px); }
.sys-list .desc { margin-top: var(--s2); color: var(--ink-2); font-size: 15.5px; }

/* =====================================================================
   ACCOUNTING · split heading over a wide plate with a solid facts bar
   ===================================================================== */
.acct-hero { padding: clamp(48px, 6vw, 88px) 0 clamp(64px, 7vw, 104px); }
.acct-hero .top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s4) var(--s8); align-items: end; }
.acct-hero h1 { font-size: clamp(44px, 5.4vw, 84px); line-height: .98; }
.acct-hero .page-actions { margin-top: var(--s4); }
.acct-hero .wide { margin-top: clamp(48px, 5vw, 72px); }
.acct-hero .wide .ph { aspect-ratio: 16 / 6; }
.acct-hero .wide .ph img { object-position: center 55%; }
.facts-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--ink); color: var(--on-dark); }
.facts-bar div { padding: var(--s4) var(--s5); }
.facts-bar div + div { border-left: 1px solid var(--rule-dark); }
.facts-bar b { display: block; font: 600 clamp(23px, 1.9vw, 28px)/1.1 var(--display); color: var(--gold-lt); font-variant-numeric: lining-nums; }
.facts-bar span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.4; color: var(--on-dark-2); }

/* =====================================================================
   MEDICAL · tall plate on the left, privacy set-piece, ruled pain rows
   ===================================================================== */
.med-hero { padding: clamp(48px, 6vw, 88px) 0 clamp(64px, 7vw, 104px); }
.med-hero .grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 88px; align-items: center; }
.med-hero .plate-fig .ph { aspect-ratio: 5 / 6; }
.med-hero h1 { font-size: clamp(46px, 5.6vw, 88px); line-height: .98; }
.med-hero .lead { margin-top: 26px; }

.privacy .grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s6) var(--s8); align-items: start; }
.privacy .pull { margin-top: var(--s4); font: italic 600 clamp(30px, 3vw, 46px)/1.12 var(--display); color: var(--on-dark); max-width: 14em; }
.privacy .lead { margin-top: var(--s4); }
.privacy .plain li { font-size: 16px; color: var(--on-dark); }
.privacy .plain li b { color: var(--gold-lt); font-weight: 600; }
.privacy .after-list { margin-top: var(--s4); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); font-size: 14.5px; color: var(--on-dark-2); }
.privacy .link { color: var(--on-dark); }

.pain-rows > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s2) var(--s6); align-items: baseline; padding: var(--s4) 0; border-top: 1px solid var(--rule-strong); }
.pain-rows > li:last-child { border-bottom: 1px solid var(--rule-strong); }
.pain-rows h3 { font-size: clamp(24px, 2vw, 30px); }
.pain-rows p { color: var(--ink-2); font-size: 16px; }

/* =====================================================================
   INDEX · hero with the documents illustration, alternating field rows
   ===================================================================== */
.idx-hero { padding: clamp(48px, 6vw, 88px) 0 clamp(64px, 7vw, 104px); }
.idx-hero .grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 80px; align-items: center; }
.idx-hero h1 { font-size: clamp(46px, 5.6vw, 88px); line-height: .98; }
.idx-hero h1 em { font-weight: 500; color: var(--gold-dk); }
.idx-hero .lead { margin-top: 26px; }
.idx-art { justify-self: center; width: min(100%, 360px); --ill-plate: var(--stone); }
.idx-art svg { width: 100%; height: auto; aspect-ratio: 1; }
.idx-jump { margin-top: clamp(40px, 4vw, 56px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); }
.idx-jump a { display: block; padding: 16px 16px 0 0; text-decoration: none; color: var(--ink); font: 600 clamp(20px, 1.6vw, 24px)/1.2 var(--display); transition: color .2s; }
.idx-jump a + a { padding-left: 16px; border-left: 1px solid var(--rule); }
.idx-jump a span { display: block; margin-top: 4px; font: 400 14px/1.4 var(--text); color: var(--ink-3); }
.idx-jump a:hover { color: var(--gold-dk); }
.idx-jump a:active { color: var(--brown); }

.ind-rows > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s5) var(--s8); align-items: center; padding: clamp(40px, 4.5vw, 64px) 0; border-top: 1px solid var(--rule-strong); }
.ind-rows > li:last-child { border-bottom: 1px solid var(--rule-strong); }
.ind-rows > li:nth-child(even) .plate-fig { order: 2; }
.ind-rows .plate-fig .ph { aspect-ratio: 3 / 2; }
.ind-rows .tag { margin-bottom: var(--s3); }
.ind-rows h3 { font-size: clamp(34px, 3.2vw, 50px); line-height: 1; }
.ind-rows h3 a { text-decoration: none; color: inherit; background: linear-gradient(var(--gold-dk), var(--gold-dk)) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.ind-rows h3 a:hover { background-size: 100% 1px; }
.ind-rows .line { margin-top: var(--s3); font-size: 17px; color: var(--ink-2); max-width: 34em; }
.ind-rows .plain { margin-top: var(--s4); }
.ind-rows .plain li { font-size: 15.5px; }
.ind-rows .plain b { color: var(--ink); font-weight: 600; }
.ind-rows .go { display: inline-block; margin-top: var(--s4); }
@media (hover: hover) { .ind-rows .plate-fig .ph img { transition: transform 1.2s var(--ease); } .ind-rows li:hover .plate-fig .ph img { transform: scale(1.03); } }

.field-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s6); }
.field-list li { padding: 16px 0; border-top: 1px solid var(--rule-strong); font: 600 clamp(21px, 1.7vw, 25px)/1.25 var(--display); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .pain-list.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .claims-hero .grid, .acct-hero .top, .med-hero .grid, .idx-hero .grid, .sys-detail, .privacy .grid, .ind-rows > li { grid-template-columns: 1fr; }
  .ind-rows > li:nth-child(even) .plate-fig { order: 0; }
  .med-hero .plate-fig .ph { aspect-ratio: 16 / 11; }
  .idx-art { display: none; }
  .faq-two .faq-cols { grid-template-columns: 1fr; }
  .faq-two .faq-cols > div:first-child > details:last-child { border-bottom: 0; }
  .acct-hero .wide .ph { aspect-ratio: 16 / 9; }
  .pain-rows > li { grid-template-columns: 1fr; }
  .shot { max-width: 560px; }
}
@media (max-width: 760px) {
  .ledger, .facts-bar { grid-template-columns: 1fr; }
  .ledger > div, .ledger > div + div { padding: var(--s4) 0; border-left: 0; border-bottom: 1px solid var(--rule-dark); }
  .facts-bar div + div { border-left: 0; border-top: 1px solid var(--rule-dark); }
  .facts-bar div { padding: var(--s3) var(--s4); }
  .idx-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .idx-jump a:nth-child(3) { padding-left: 0; border-left: 0; }
  .idx-jump a:nth-child(n+3) { margin-top: var(--s3); }
  .field-list { grid-template-columns: 1fr 1fr; column-gap: var(--s4); }
}
@media (max-width: 700px) {
  .pain-list.four, .ex-grid, .ex-grid.three { grid-template-columns: 1fr; }
  .ex-grid { gap: var(--s5); }
  .ba-lines p { grid-template-columns: 1fr; gap: 6px; }
  .med-hero .plate-fig .ph { aspect-ratio: 4 / 3; }
  .claims-hero .plate-fig .ph { aspect-ratio: 4 / 3; }
  .plate-fig .ph { outline-offset: 4px; }
  .field-list { grid-template-columns: 1fr; }
}
.ledger .num small { display: block; margin-bottom: 6px; font: 500 15px/1.2 var(--text); letter-spacing: 0; color: var(--on-dark-2); }
.ledger h2 { margin: 0 0 var(--s3); }
.sys-detail .shot { position: sticky; top: 112px; }
.g-cream .cv-tabs [role="tab"]:hover { background: var(--stone-solid); }
@media (max-width: 960px) { .sys-detail .shot { position: static; } }

/* =====================================================================
   PHONES (≤760px) · round-9 mobile QA. Desktop and tablet untouched.
   This file only loads on the industry pages (index, law, claims,
   accounting, medical), so these rules can't reach any other page.
   ===================================================================== */
.swipe-hint { display: none; }
@media (max-width: 760px) {
  /* Calmer rhythm: 80px section bands → 64px. */
  :root { --section: 64px; }
  .idx-hero, .claims-hero, .acct-hero, .med-hero, .law-hero { padding: 32px 0 56px; }

  /* Inline text links get a ≥32px hit area without moving the layout (inline padding). */
  main .link, .uses a { padding-block: 8px; }
  .page-actions { gap: 8px 24px; }

  /* ---------- Index ---------- */
  /* Field rows: small square photo beside the tag + name (like the homepage cards), details below. */
  .ind-rows > li { grid-template-columns: 88px minmax(0, 1fr); gap: 0 var(--s3); align-items: center; padding: 28px 0; }
  .ind-rows > li > div { display: contents; }
  .ind-rows .plate-fig { grid-column: 1; grid-row: 1 / 3; }
  .ind-rows .plate-fig .ph { aspect-ratio: 1; outline: 0; border-radius: var(--r-s); overflow: hidden; }
  .ind-rows .tag { grid-column: 2; grid-row: 1; align-self: end; justify-self: start; margin-bottom: 8px; }
  .ind-rows h3 { grid-column: 2; grid-row: 2; align-self: start; font-size: 30px; }
  .ind-rows .line, .ind-rows .plain, .ind-rows .go { grid-column: 1 / -1; }
  .ind-rows .line { margin-top: var(--s3); font-size: 16px; }
  .ind-rows .plain { margin-top: var(--s3); }
  .ind-rows .plain li { padding: 10px 0; font-size: 15px; }
  .ind-rows .go { justify-self: start; margin-top: var(--s2); }
  .idx-jump a { padding-bottom: 8px; }
  /* "Don't see your field?": short names, two per row. */
  .field-list { grid-template-columns: 1fr 1fr; column-gap: var(--s4); }
  .field-list li { padding: 12px 0; font-size: 18px; line-height: 1.2; }

  /* ---------- Hero plates: shorter crops so the page gets to the point ---------- */
  .claims-hero .plate-fig .ph, .acct-hero .wide .ph { aspect-ratio: 16 / 9; }
  .law-hero .plate-fig { margin-top: var(--s6); }
  .law-hero .plate-fig .ph { aspect-ratio: 16 / 9; }
  .plate-fig figcaption { flex-direction: column; gap: 4px; }
  /* Medical: words first, the waiting-room photo after them. */
  .med-hero .grid > div { order: -1; }
  .med-hero .plate-fig .ph { aspect-ratio: 16 / 9; }
  .med-hero .plate-fig .ph img { object-position: center 60%; }

  /* Accounting facts bar under the plate: tighter rows. */
  .facts-bar div { padding: 12px var(--s3); }
  .facts-bar b { font-size: 22px; }

  /* Claims ledger: number beside its caption instead of three tall stacked blocks. */
  .ledger { margin-top: var(--s6); }
  .ledger > div, .ledger > div + div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 0 var(--s3); padding: 20px 0; }
  .ledger .tag { grid-column: 1 / -1; justify-self: start; margin-bottom: var(--s2); }
  .ledger h2 { grid-column: 1 / -1; margin-bottom: var(--s2); font-size: 22px; }
  .ledger .num { font-size: 46px; }
  .ledger .num-cap { margin-top: 0; padding-bottom: 4px; font-size: 15px; }
  .sys-detail { margin-top: var(--s6); }
  .shot .frame { outline-offset: 4px; }
  .shot .frame img { aspect-ratio: 16 / 9; object-fit: cover; }

  /* Before / With AI lines: tag beside the sentence, not above it. */
  .ba-lines p { grid-template-columns: 70px minmax(0, 1fr); gap: var(--s2); padding: 9px 0; }
  .ba-lines .tag { min-width: 0; width: 100%; padding-inline: 6px; }
  .ex-grid { gap: var(--s6); }
  .ex-foot { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Law examples: seven cards in a swipeable row with a peek of the next one. */
  #examples .ex-index.law { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: var(--s2); margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--s3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
  #examples .ex-index.law > li { grid-template-columns: 1fr; align-content: start; gap: var(--s3); padding: 20px; border: 1px solid var(--rule-strong); border-radius: var(--r-s); background: var(--cream); scroll-snap-align: start; }
  #examples .ex-index.law > li:last-child { border-bottom: 1px solid var(--rule-strong); }
  .js #examples .ex-index.law > li[data-v] { opacity: 1; transform: none; }
  #examples .ex-index.law h3 { font-size: 24px; }
  #examples .ex-index.law .ba > div { padding: 12px 14px; font-size: 15px; }
  #examples .ex-index.law .ba b { margin-bottom: 6px; }
  .swipe-hint { display: flex; align-items: center; gap: 6px; margin-top: var(--s2); font-size: 14px; color: var(--ink-3); }

  /* Medical privacy band and pain rows: a little tighter. */
  .privacy .pull { font-size: 28px; }
  .pain-rows > li { padding: 20px 0; }
}
@media (max-width: 400px) {
  .ind-rows > li { grid-template-columns: 76px minmax(0, 1fr); }
  .ind-rows h3 { font-size: 27px; }
  .field-list li { font-size: 17px; }
}