/* The industry pages: /industries and the six under it.

   The same page as /teams and /frontline - a lede, sections under a rule,
   the kit of tools, the terms, the answers - so the rules are theirs, word
   for word. They live in one file rather than in seven <style> blocks
   because seven more copies would put the same rule on ten pages, which is
   the point at which check.mjs asks for it to be written once. What is new
   here is at the end: the worked example, the plan, the question list and
   the row of other industries. */
:root {
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 12px;
}
.app-wrapper { max-width: 880px; }
.lede { margin: 8px 0 40px; }
.lede h1 { font-family: var(--font-serif); font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 14px; }
.lede p { font-size: 17px; line-height: 1.62; color: var(--ink-soft); margin: 0; max-width: 62ch; }
.eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 12px; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The eyebrow link is the way back up, so on a touch screen it is a control
   and gets the 44px the rest of the site's controls get. The negative margin
   gives the extra height back, so the line under it does not move. */
@media (pointer: coarse) { .eyebrow a { display: inline-flex; align-items: center; min-height: 44px; margin: -14px 0; } }
section.block { border-top: 1px solid var(--rule); padding-top: 28px; margin-top: 36px; }
section.block > h2 { font-family: var(--font-serif); font-size: 25px; font-weight: 700; margin: 0 0 12px; letter-spacing: -0.01em; }
section.block p { font-size: 15.5px; line-height: 1.65; margin: 0 0 12px; max-width: 68ch; }
ul.plain { list-style: none; padding: 0; margin: 4px 0 12px; }
ul.plain li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.6; margin-bottom: 8px; max-width: 68ch; }
ul.plain li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-strong); }
.terms { border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper-raised); padding: 22px 24px; margin: 18px 0 8px; }
.terms dl { display: grid; grid-template-columns: 190px 1fr; gap: 10px 20px; margin: 0; font-size: 15px; line-height: 1.55; }
.terms dt { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint, #7e7e8a); padding-top: 3px; }
.terms dd { margin: 0; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; font-family: inherit; background: var(--accent-strong); color: var(--on-accent, #fff); border: 1px solid var(--accent-strong); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.foot-note { font-size: 13.5px; line-height: 1.6; color: var(--ink-faint, #7e7e8a); margin-top: 30px; max-width: 68ch; }

.kit { border-top: 1px solid var(--rule); padding-top: 16px; margin-top: 18px; }
.kit:first-of-type { border-top: none; padding-top: 4px; margin-top: 4px; }
.kit h3 { font-family: var(--font-sans); font-size: 14px; font-weight: 700; margin: 0 0 3px; }
.kit > p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 10px; max-width: 68ch; }
ul.tools { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
ul.tools li { font-size: 14.5px; line-height: 1.55; }
ul.tools a { font-weight: 700; }
ul.tools span { color: var(--ink-soft); }
.kit .also { font-size: 13.5px; margin: 10px 0 0; color: var(--ink-soft); }

/* The worked example: numbered steps, the number in the site's mono face. */
ol.steps { list-style: none; counter-reset: step; padding: 0; margin: 6px 0 14px; }
ol.steps li { counter-increment: step; position: relative; padding-left: 38px; font-size: 15.5px; line-height: 1.6; margin-bottom: 12px; max-width: 68ch; }
ol.steps li::before { content: counter(step); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper-raised); font: 700 12px/22px var(--font-mono); text-align: center; color: var(--accent-strong); }

/* The Pro badge on a service that lives inside the Sovereign Suite. */
ul.tools .tag, .tag { display: inline-block; font: 700 10px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-strong); border: 1px solid var(--rule); border-radius: 4px; padding: 3px 5px; margin-left: 6px; vertical-align: 2px; }

/* The questions: the site's own accordion, under a heading that stays open. */
section.block .faq-list { max-width: none; }
section.block .faq-a p { font-size: 14.5px; line-height: 1.7; margin: 0 0 10px; }

/* The other industries, at the foot of each page. */
.ind-more { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.ind-more a { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; font-size: 13.5px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); text-decoration: none; background: var(--paper-raised); }
.ind-more a:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
.ind-more a[aria-current="page"] { border-color: var(--accent-strong); color: var(--accent-strong); }

/* The hub: the line under its grid of industries. */
section.block p.grid-after { margin-top: 16px; }

@media (max-width: 620px) {
  .lede h1 { font-size: 31px; }
  .terms dl { grid-template-columns: 1fr; gap: 3px 0; }
  .terms dt { padding-top: 12px; }
  ul.tools { grid-template-columns: 1fr; }
}