/*
 * resources.css — page-specific styles for resources.html.
 *
 * Extracted from an inline <style> block in resources.html for caching and
 * HTML-payload reduction. Loaded after css/style.css so these rules can
 * override shared component styling where the resources page needs to.
 *
 * Scope:
 *   - Split-Hero page overrides (.home-hero__grid, credential pills)
 *   - Service-card link variant (.service-card--link)
 *   - CTA banner narrow override + image variant (.cta-banner, ::after, __title)
 *   - Client Resources panel header overrides (#resource-categories)
 *   - Common Audit Issues section bg + card hover (#common-issues)
 *   - Onboarding Process "Dark Redesign" (.ob-dark, .ob-rail, .ob-detail, .ob-nav)
 *   - Audit Readiness "White Redesign" (.ar-light, .ar-rail, .ar-detail, .ar-nav)
 */

/* ═══════════════════════════════════════
   CLIENTS PAGE — SPLIT HERO (shared core in css/style.css)
   Per the "Hero Section Standard" in CLAUDE.md, the home page hero
   (index.html) is the canonical reference for spacing, font color,
   and other styling details. Page-specific content (title, copy,
   button labels, credential labels, photo) stays unique to this page.
   ═══════════════════════════════════════ */
.home-hero__grid {
  display: grid;
  /* Single column, matching the home hero — the photo is no longer a
     grid column; it pins to the section's right half (see
     .home-hero__bleed below). */
  grid-template-columns: 1fr;
}
/* ── Hero photo — full-bleed feathered, mirroring the home hero
   (design handoff "Hero — Image Treatments", Option 2). The photo
   pins to the section's right half and dissolves into the navy via
   mask gradients (fade-in from the left over 24%, fade-out at the
   bottom past 78%), with a navy wash over the dissolve so the
   headline stays legible. ── */
.home-hero__content { position: relative; max-width: 690px; }
.home-hero__bleed {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  /* Above the section's grid overlay (z 0); .container (z 1) comes
     later in the DOM so text still paints on top. */
  z-index: 1;
  pointer-events: none;
}
.home-hero__bleed-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
  display: block;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 24%),
    linear-gradient(to bottom, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 24%),
    linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-composite: intersect;
}
.home-hero__bleed-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(11,29,69,0.55) 0%, rgba(11,29,69,0) 34%);
  pointer-events: none;
}
.home-hero__credentials {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  padding-top: 18px;
  /* flex-wrap kept (not in home hero) as a safety net so credentials
     wrap to a second line on narrow viewports instead of overflowing. */
  flex-wrap: wrap;
}
.home-hero__cred {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  /* Muted slate at rest, brand teal on hover — trust-strip styling
     from the design handoff (Hero — Image Treatments); the hover
     tint is decorative since the row isn't interactive. Mirrors the
     home page hero. */
  color: rgba(160, 178, 206, 0.82);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  white-space: nowrap;
  cursor: default;
  transition: color 0.2s ease;
}
.home-hero__cred:hover {
  color: var(--teal);
}
/* Clients-page divider override matching home (global rule in
   css/style.css is 2px x 20px at rgba(255,255,255,0.15)). Design
   handoff trust-strip hairline, thickened to 2px wide. */
.home-hero__cred-divider {
  width: 2px;
  height: 13px;
  background: rgba(255, 255, 255, 0.22);
}
/* Hero glow customizations — mirror the home page hero per CLAUDE.md.
   - Top-right circle glow removed; ::before repurposed as the
     grid-line layer, radially masked (per the design handoff's
     bg-grid) so the grid fades out toward the lower-right and never
     shows behind the full-bleed photo's feathered edges.
   - All glows removed: ::after (which carried the bottom-edge teal
     ellipse glow) is disabled entirely. */
.home-hero::before {
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%);
  mask-image: radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%);
}
/* When the full-bleed photo is showing (>1100px), also clamp the grid
   horizontally so it ends just past the CTA row's last button and
   never reaches the photo's feathered edge — same values as the home
   hero. */
@media (min-width: 1101px) {
  .home-hero::before {
    -webkit-mask-image:
      radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%),
      linear-gradient(to right, #000 45%, transparent 53%);
    -webkit-mask-composite: source-in;
    mask-image:
      radial-gradient(120% 120% at 30% 30%, #000 35%, transparent 90%),
      linear-gradient(to right, #000 45%, transparent 53%);
    mask-composite: intersect;
  }
}
.home-hero::after {
  display: none;
}
/* Below ~1100px the text column would run into the photo's opaque
   zone, so the bleed hides and the hero goes text-only — same
   breakpoint as the home hero. */
@media (max-width: 1100px) {
  .home-hero__bleed { display: none; }
}
@media (max-width: 900px) {
  .home-hero__title { font-size: 38px; }
}

.service-card--link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

/* .cta-banner narrow width + bottom-edge teal glow now live in css/style.css
   on .cta-banner.cta-banner--with-image and its ::after — shared site-wide. */

.cta-banner__title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 700;
  font-size: 34px;
  color: var(--teal);
}

/* ── Client Resources panel headers — match the section's main header font ── */
#resource-categories .service-card__name {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  text-align: center;
}
#resource-categories .service-card__desc {
  font-size: 13px;
}

/* ── Common Audit Issues section — solid soft-turquoise background ── */
#common-issues.cfi-section {
  background: #d6ece9;
  position: relative;
  overflow: hidden;
}
/* Header & footer line dividers stay removed; default text colors apply on the light bg */
#common-issues.cfi-section .cfi-header { border-bottom: none; }
#common-issues.cfi-section .cfi-footer { border-top: none; }

/* ═══════════════════════════════════════
   ONBOARDING PROCESS — Dark Redesign
   ═══════════════════════════════════════ */
.ob-dark {
  --ob-navy:        #0B1B3D;
  --ob-navy-deep:   #081634;
  --ob-mint:        #2DCFA6;
  --ob-mint-ink:    #0F8C6B;
  --ob-mint-line:        rgba(45,207,166,0.55);
  --ob-mint-line-soft:   rgba(45,207,166,0.30);
  --ob-mint-glow:        rgba(45,207,166,0.10);
  --ob-panel:       #FFFFFF;
  --ob-panel-tile:  #F4F6F9;
  --ob-ink:         #0B1B3D;
  --ob-ink-body:    #3D4A66;
  --ob-ink-dim:     #5A6B85;
  --ob-rule-light:      rgba(11,27,61,0.10);
  --ob-rule-light-soft: rgba(11,27,61,0.06);
  --ob-body-on-dark:     rgba(231,237,247,0.86);
  --ob-body-on-dark-dim: rgba(180,194,219,0.70);
  --ob-rule-on-dark:     rgba(255,255,255,0.10);

  background: linear-gradient(145deg, var(--navy) 0%, var(--navy-dark) 100%);
  padding: 64px 64px 32px;
  position: relative;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}
/* Match the hero section's background layers exactly:
   1) circular teal blob in the upper-right
   2) bottom-edge teal radial glow + 60px white grid lines */
.ob-dark::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(43,191,154,0.07) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.ob-dark__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 95% 200px at 50% 100%, rgba(43, 191, 154, 0.16) 0%, transparent 75%),
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: auto, 60px 60px, 60px 60px;
  pointer-events: none;
  z-index: 0;
}
.ob-dark__inner {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
}
.ob-dark__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}
.ob-dark__icon { flex-shrink: 0; }
.ob-dark__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ob-mint);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ob-dark__title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1;
  letter-spacing: -0.025em;
}
.ob-dark__header-text { flex: 1; }
.ob-dark__lead {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 15px;
  font-style: italic;
  color: var(--ob-body-on-dark);
  margin-top: 8px;
}
.ob-dark__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  align-items: start;
}

/* Step rail */
.ob-rail {
  background: var(--ob-panel);
  border: 1px solid var(--ob-rule-light);
  border-radius: 14px;
  padding: 14px 8px;
  position: relative;
  box-shadow: 0 24px 60px -28px rgba(8,22,52,0.55);
}
.ob-rail__item {
  all: unset;
  cursor: pointer;
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: start;
  gap: 14px;
  padding: 14px 16px 14px 14px;
  position: relative;
  border-radius: 10px;
  background: transparent;
  transition: background 160ms ease;
  width: 100%;
  box-sizing: border-box;
}
.ob-rail__item:hover { background: var(--ob-mint-glow); }
.ob-rail__item.is-active { background: var(--ob-mint-glow); }
.ob-rail__badge {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--ob-mint-line-soft);
  background: var(--ob-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ob-mint-ink);
  letter-spacing: 0.04em;
  transition: all 180ms ease;
  z-index: 2;
  box-sizing: border-box;
}
.ob-rail__item.is-active .ob-rail__badge {
  background: var(--ob-mint);
  border-color: var(--ob-mint);
  color: #fff;
}
.ob-rail__track {
  position: absolute;
  left: 35px;          /* 14px padding + 22px badge half-width - 1px (half of 2px width) */
  top: 58px;           /* 14px padding + 44px badge */
  bottom: -8px;
  width: 2px;
  background: var(--ob-mint-line-soft);
  z-index: 1;
}
.ob-rail__label { padding-top: 4px; }
.ob-rail__name {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ob-ink-body);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin-bottom: 3px;
  transition: color 160ms ease;
}
.ob-rail__item.is-active .ob-rail__name { color: var(--ob-ink); }
.ob-rail__summary {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 12.5px;
  font-style: italic;
  color: var(--ob-ink-dim);
  line-height: 1.4;
}
.ob-rail__item.is-active .ob-rail__summary { color: var(--ob-ink-body); }

/* Detail panel */
.ob-detail {
  background: var(--ob-panel);
  border: 1px solid var(--ob-rule-light);
  border-radius: 14px;
  padding: 32px 36px;
  position: relative;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px -28px rgba(8,22,52,0.55);
}
.ob-detail__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.ob-detail__step {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ob-mint-ink);
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.ob-detail__step-total {
  color: var(--ob-ink-dim);
  font-weight: 500;
}
.ob-detail__hairline {
  flex: 1;
  height: 1px;
  background: var(--ob-rule-light);
}
.ob-detail__phase {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--ob-ink-dim);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.ob-detail__title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--ob-ink);
  margin: 0 0 14px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.ob-detail__body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ob-ink-body);
  margin: 0 0 26px;
  max-width: 620px;
}
.ob-detail__rule {
  height: 1px;
  background: var(--ob-rule-light-soft);
  margin-bottom: 22px;
}
.ob-detail__includes-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ob-mint-ink);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.ob-detail__chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ob-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--ob-panel-tile);
  border: 1px solid var(--ob-rule-light);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ob-ink-body);
  line-height: 1.3;
}

/* Footer row */
.ob-dark__footer {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ob-dark__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition);
}
.ob-dark__back:hover { color: var(--teal-hover); }
.ob-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ob-nav__btn {
  all: unset;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 8px;
  box-sizing: border-box;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.ob-nav__btn--prev {
  /* Soft teal "← Prev" nav link, matching the site-wide pattern set by
     .svc-card__link and .btn--primary: default soft, hover deepens to brand. */
  color: #5fc7a8;
  border: 1px solid var(--ob-mint-line);
}
.ob-nav__btn--prev:hover { color: var(--teal); }
.ob-nav__btn--prev:disabled,
.ob-nav__btn--prev[disabled] {
  cursor: default;
  opacity: 0.4;
  border-color: var(--ob-rule-on-dark);
  color: var(--ob-body-on-dark-dim);
}
.ob-nav__btn--next {
  color: var(--ob-navy);
  background: var(--teal);
}
.ob-nav__btn--next:hover { background: var(--teal-hover); }
.ob-nav__btn--next:disabled,
.ob-nav__btn--next[disabled] {
  cursor: default;
  opacity: 0.5;
  background: var(--ob-mint-line-soft);
}
.ob-nav__counter {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--ob-body-on-dark);
  letter-spacing: 0.18em;
}
@media (max-width: 900px) {
  .ob-dark { padding: 40px 24px 56px; }
  .ob-dark__header { flex-wrap: wrap; }
  .ob-dark__lead { max-width: 100%; text-align: left; }
  .ob-dark__grid { grid-template-columns: 1fr; }
  .ob-detail { min-height: 0; padding: 28px 24px; }
  .ob-detail__chips { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   AUDIT READINESS — White Redesign
   ═══════════════════════════════════════ */
.ar-light {
  --ar-mint:        #2DCFA6;
  --ar-mint-ink:    #0F8C6B;
  --ar-mint-line:        rgba(45,207,166,0.45);
  --ar-mint-line-soft:   rgba(45,207,166,0.28);
  --ar-mint-glow:        rgba(45,207,166,0.10);
  --ar-ink:         #0B1B3D;
  --ar-ink-body:    #3D4A66;
  --ar-ink-dim:     #5A6B85;
  --ar-rule:        rgba(11,27,61,0.10);
  --ar-rule-soft:   rgba(11,27,61,0.06);
  --ar-panel-tile:       #F4F6F9;
  --ar-panel-tile-warm:  #F8FAFB;

  background: #fff;
  padding: 64px 64px 32px;
  font-family: 'Inter', sans-serif;
  position: relative;
}
.ar-light__inner {
  max-width: 1240px;
  margin: 0 auto;
}
.ar-light__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}
.ar-light__icon { flex-shrink: 0; }
.ar-light__header-text { flex: 1; }
.ar-light__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ar-mint-ink);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ar-light__title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--ar-ink);
  margin: 0;
  line-height: 1;
  letter-spacing: -0.025em;
}
.ar-light__lead {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 15px;
  font-style: italic;
  color: var(--ar-ink-body);
  margin-top: 8px;
}
.ar-light__grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 28px;
  align-items: start;
}

/* Tip rail */
.ar-rail {
  background: var(--ar-panel-tile-warm);
  border: 1px solid var(--ar-rule);
  border-radius: 14px;
  padding: 14px 8px;
  position: relative;
  box-shadow:
    0 -6px 18px rgba(11, 27, 61, 0.08),
    0 12px 32px rgba(11, 27, 61, 0.08),
    0 2px 8px rgba(11, 27, 61, 0.08);
}
.ar-rail__item {
  all: unset;
  cursor: pointer;
  display: grid;
  grid-template-columns: 52px 1fr 16px;
  align-items: start;
  gap: 14px;
  padding: 14px;
  position: relative;
  border-radius: 10px;
  background: transparent;
  transition: background 160ms ease;
  width: 100%;
  box-sizing: border-box;
}
.ar-rail__item:hover { background: var(--ar-mint-glow); }
.ar-rail__item.is-active { background: var(--ar-mint-glow); }
.ar-rail__badge {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--ar-mint-line-soft);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ar-mint-ink);
  letter-spacing: 0.04em;
  transition: all 180ms ease;
  z-index: 2;
  box-sizing: border-box;
}
.ar-rail__item.is-active .ar-rail__badge {
  background: var(--ar-mint);
  border-color: var(--ar-mint);
  color: #fff;
}
.ar-rail__track {
  position: absolute;
  left: 35px;          /* 14px padding + 22px badge half-width - 1px */
  top: 58px;
  bottom: -8px;
  width: 2px;
  background: var(--ar-mint-line-soft);
  z-index: 1;
}
.ar-rail__label { padding-top: 4px; }
.ar-rail__name {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ar-ink-body);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin-bottom: 3px;
  transition: color 160ms ease;
}
.ar-rail__item.is-active .ar-rail__name { color: var(--ar-ink); }
.ar-rail__summary {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 12.5px;
  font-style: italic;
  color: var(--ar-ink-dim);
  line-height: 1.4;
}
.ar-rail__item.is-active .ar-rail__summary { color: var(--ar-ink-body); }
.ar-rail__chev {
  align-self: center;
  opacity: 0;
  transition: opacity 160ms ease;
}
.ar-rail__item.is-active .ar-rail__chev { opacity: 1; }

/* Detail panel */
.ar-detail {
  background: #fff;
  border: 1px solid var(--ar-rule);
  border-radius: 14px;
  padding: 32px 36px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 -6px 18px rgba(11, 27, 61, 0.08),
    0 12px 32px rgba(11, 27, 61, 0.08),
    0 2px 8px rgba(11, 27, 61, 0.08);
}
.ar-detail__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.ar-detail__step {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ar-mint-ink);
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.ar-detail__step-total {
  color: var(--ar-ink-dim);
  font-weight: 500;
}
.ar-detail__hairline {
  flex: 1;
  height: 1px;
  background: var(--ar-rule);
}
.ar-detail__title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--ar-ink);
  margin: 0 0 14px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.ar-detail__body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ar-ink-body);
  margin: 0 0 26px;
  max-width: 640px;
}
.ar-detail__rule {
  height: 1px;
  background: var(--ar-rule-soft);
  margin-bottom: 22px;
}
.ar-checklist {
  column-count: 2;
  column-gap: 32px;
}
.ar-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  break-inside: avoid;
}
.ar-checklist__item svg {
  flex: 0 0 14px;
  margin-top: 4px;
}
.ar-checklist__name {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ar-ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
}

/* Footer row */
.ar-light__footer {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ar-light__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition);
}
.ar-light__back:hover { color: var(--teal-hover); }
.ar-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ar-nav__btn {
  all: unset;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 8px;
  box-sizing: border-box;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.ar-nav__btn--prev {
  /* Same soft-teal nav-link pattern as .ob-nav__btn--prev above. */
  color: #5fc7a8;
  border: 1px solid var(--ar-mint-line);
}
.ar-nav__btn--prev:hover { color: var(--teal); }
.ar-nav__btn--prev:disabled,
.ar-nav__btn--prev[disabled] {
  cursor: default;
  opacity: 0.4;
  border-color: var(--ar-rule);
  color: var(--ar-ink-dim);
}
.ar-nav__btn--next {
  color: #fff;
  background: var(--teal);
}
.ar-nav__btn--next:hover { background: var(--teal-hover); }
.ar-nav__btn--next:disabled,
.ar-nav__btn--next[disabled] {
  cursor: default;
  opacity: 0.5;
  background: var(--ar-mint-line-soft);
}
.ar-nav__counter {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--ar-ink-body);
  letter-spacing: 0.18em;
}
@media (max-width: 900px) {
  .ar-light { padding: 40px 24px 32px; }
  .ar-light__header { flex-wrap: wrap; }
  .ar-light__grid { grid-template-columns: 1fr; }
  .ar-detail { min-height: 0; padding: 28px 24px; }
  .ar-checklist { column-count: 1; column-gap: 0; }
}

/* Common Audit Issues — Section header matches Audit Readiness above (navy ink) */
#common-issues.cfi-section .cfi-header__title { color: #0B1B3D; font-size: 31px; }
#common-issues.cfi-section { padding-bottom: 32px; }
#common-issues .cfi-footer { margin-top: 24px; padding-top: 14px; }

/* Body text on each panel — match the panel header font */
#common-issues .cfi-card__body {
  font-family: 'Source Serif 4', 'DM Serif Display', Georgia, serif;
}

/* Hide the ASC badge in the top-right corner of each panel */
#common-issues .cfi-card__meta { display: none; }

/* ── Common Audit Issues panels — remove teal border, add 0.12 shadow ── */
#common-issues .cfi-card {
  border: none;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 -6px 18px rgba(11, 27, 61, 0.12),
    0 12px 32px rgba(11, 27, 61, 0.12),
    0 2px 8px rgba(11, 27, 61, 0.12);
}
#common-issues .cfi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: 1;
}
#common-issues .cfi-card:hover::before { transform: scaleX(1); }
#common-issues .cfi-card:hover {
  box-shadow: 0 18px 44px rgba(43, 191, 154, 0.35), 0 4px 12px rgba(43, 191, 154, 0.18);
  transform: translateY(-3px);
}

/* ── Client Resources panels — match the services-page "What We Do" style ── */
#resource-categories .service-card {
  border: none;
  padding: 41px 16px;
  box-shadow:
    0 -6px 18px rgba(11, 27, 61, 0.07),
    0 12px 32px rgba(11, 27, 61, 0.07),
    0 2px 8px rgba(11, 27, 61, 0.07);
}
#resource-categories .service-card { overflow: hidden; }
#resource-categories .service-card::before {
  display: block;
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
#resource-categories .service-card:hover::before { transform: scaleX(1); }
#resource-categories .service-card:hover {
  border: none;
  box-shadow: 0 18px 44px rgba(43, 191, 154, 0.28), 0 4px 12px rgba(43, 191, 154, 0.14);
  transform: translateY(-3px);
}