/* ---------------------------------------------------------------------------
   service-pages.css  -  styles for the /services/ hub and the industry pages.

   Loaded ONLY by pages under /services/. The home page carries its own inline
   styles and does not load this file or site.css, so nothing here can reach it.

   Every rule is scoped under .svc-page, which is set on <main> of the new pages.
   Do not remove that scope: it is what keeps these rules off every other page.
   Variables come from site.css (--line, --bg-card, --text-60, --g3 and so on).
--------------------------------------------------------------------------- */

/* Tables -------------------------------------------------------------------
   Four of the page's unique sections are tables (buyer roles, triggers,
   angles, the hub's cross-industry table). They must stay readable on a phone,
   so the wrapper scrolls rather than letting the table squash. */
.svc-page .svc-table{margin:26px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:14px}
.svc-page .svc-table table{width:100%;min-width:34rem;border-collapse:collapse;
  font-size:14.5px;line-height:1.6}
.svc-page .svc-table th,.svc-page .svc-table td{padding:12px 16px;text-align:left;
  vertical-align:top;border-bottom:1px solid var(--line)}
.svc-page .svc-table th{color:var(--text);font-weight:600;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;background:var(--bg-2);
  position:sticky;top:0}
.svc-page .svc-table td{color:var(--text-60)}
.svc-page .svc-table td:first-child{color:var(--text);font-weight:500}
.svc-page .svc-table tbody tr:last-child td{border-bottom:0}

/* Angle cards --------------------------------------------------------------
   The "angles we would test" block. These are hypotheses, never results, and
   the label row says so. Each card is pain, proof needed, ask. */
.svc-page .angle-grid{display:grid;gap:14px;margin:24px 0;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.svc-page .angle{background:var(--bg-card);border:1px solid var(--line);
  border-radius:14px;padding:20px 22px}
.svc-page .angle .angle-t{font-size:15px;font-weight:600;line-height:1.4;margin:0 0 12px;
  color:var(--text)}
.svc-page .angle dl{margin:0;font-size:13.5px;line-height:1.6}
.svc-page .angle dt{color:var(--text-40);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;margin-top:10px}
.svc-page .angle dd{margin:3px 0 0;color:var(--text-60)}

/* Constraint blocks --------------------------------------------------------
   Each constraint names the real problem, then the decision it forces. The
   decision line is what stops this reading like a list of industry trivia. */
.svc-page .constraint{border-left:2px solid var(--line);padding:2px 0 2px 20px;margin:22px 0}
.svc-page .constraint h3{font-size:17px;font-weight:600;margin:0 0 8px;line-height:1.35}
.svc-page .constraint p{color:var(--text-60);font-size:15px;line-height:1.7;margin:0 0 8px}
.svc-page .constraint .decides{display:block;color:var(--g3);font-size:13px;
  border-top:1px solid var(--line);padding-top:8px;margin-top:10px}

/* Answer-first block -------------------------------------------------------
   The 40 to 80 word direct answer under the H1. Kept visually distinct because
   it is the block an AI answer engine is most likely to quote. */
.svc-page .answer-first{max-width:760px;font-size:17px;line-height:1.75;
  color:var(--text);border-left:2px solid var(--g3);padding-left:22px;margin:0 0 8px}

/* Source and proof notes --------------------------------------------------- */
.svc-page .note{font-size:13px;line-height:1.65;color:var(--text-40);max-width:760px}
.svc-page .sources{font-size:13px;line-height:1.8;color:var(--text-40);
  max-width:760px;padding-left:18px}
.svc-page .sources a{color:var(--text-60)}
.svc-page .reviewed{font-size:12px;color:var(--text-40);letter-spacing:.04em}

/* Not-for list -------------------------------------------------------------
   The honest disqualifiers. Deliberately plain, not styled as a warning. */
.svc-page .not-for{max-width:760px;padding-left:18px;font-size:15px;line-height:1.8;
  color:var(--text-60)}
.svc-page .not-for li{margin-bottom:8px}
.svc-page .not-for li strong{color:var(--text);font-weight:600}

/* Related pages grid ------------------------------------------------------- */
.svc-page .related-grid{display:grid;gap:12px;margin:22px 0;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.svc-page .col-t{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-40);margin:0 0 10px;font-weight:600}
.svc-page .related-col ul{list-style:none;padding:0;margin:0;font-size:14px;line-height:1.9}
.svc-page .related-col a{color:var(--text-60);border-bottom:1px solid transparent}
.svc-page .related-col a:hover{color:var(--text);border-bottom-color:var(--line-2)}

/* Industry grid on the hub ------------------------------------------------- */
.svc-page .ind-cluster{margin:36px 0}
.svc-page .ind-cluster > .col-t{margin:0 0 14px}
.svc-page .ind-grid{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.svc-page .ind-card{background:var(--bg-card);border:1px solid var(--line);
  border-radius:14px;padding:18px 20px;display:block;transition:border-color .18s ease}
.svc-page .ind-card:hover{border-color:var(--line-2)}
.svc-page .ind-card strong{display:block;font-size:15px;font-weight:600;
  color:var(--text);margin-bottom:5px}
.svc-page .ind-card span{font-size:13.5px;line-height:1.6;color:var(--text-60)}

@media (max-width:640px){
  .svc-page .answer-first{font-size:16px;padding-left:16px}
  .svc-page .constraint{padding-left:16px}
  .svc-page .svc-table th{position:static}
}