/* Resource, article and service pages (checklist, roster guide, data readiness).
   Page-specific layout on top of platform.css, ported from the retired styles.css. */
:root { --wide-shell: 1480px; --body-text: #4b5563; }

/* The fixed platform header needs room on pages without a dark hero. */
.resource-main { padding-top: 72px; }
.resource-main .service-hero { margin-top: 0; }
.text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--blue); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.text-link:hover { color: var(--deep); }
.resource-download-form .form-field { color: #3d444d; }
.resource-download-form .form-field label span { color: var(--muted); font-weight: 400; }
.section-heading.compact h2 { color: white; }
.service-process .section-heading h2 { color: white; }
.checklist-result .button, .article-cta .button, .closing .button { color: white; }

.wide-shell { width: min(calc(100% - 48px), var(--wide-shell)); margin-inline: auto; }
.text-link-light { color: white; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 28px; color: var(--muted); font: 500 .75rem/1.4 "JetBrains Mono", monospace; letter-spacing: .02em; }
.breadcrumb a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--deep); }
.breadcrumb [aria-current="page"] { color: var(--ink); }
.closing h2 { margin: 0; font-size: clamp(36px, 4vw, 58px); line-height: 1.03; letter-spacing: -.04em; text-wrap: balance; }
.section-label { margin: 0 0 18px; color: var(--blue); font-size: 14px; font-weight: 700; }
.closing { padding-block: clamp(80px, 9vw, 120px); background: var(--deep); color: white; text-align: center; }
.closing-inner { display: grid; justify-items: center; }
.closing h2 { max-width: 850px; }
.closing p { margin: 20px 0 30px; color: #dce3ff; font-size: 18px; }
.resource-back { margin-left: auto; }
.resource-page { max-width: 980px; padding-block: 72px 120px; }
.resource-hero { max-width: 850px; }
.resource-hero .eyebrow { color: var(--blue); }
.resource-hero h1 { margin: 0; font-size: clamp(46px, 7vw, 82px); line-height: .98; letter-spacing: -.04em; text-wrap: balance; }
.resource-hero > p:not(.eyebrow) { max-width: 720px; margin: 24px 0 0; color: var(--body-text); font-size: 19px; }
.print-button { margin-top: 30px; }
.checklist { margin: 76px 0 0; padding: 0; list-style: none; counter-reset: checklist; }
.checklist li { counter-increment: checklist; display: grid; grid-template-columns: 74px 1fr; gap: 28px; padding: 28px 0; border-top: 1px solid var(--line); }
.checklist li::before { content: counter(checklist, decimal-leading-zero); color: var(--blue); font: 500 22px/1.2 "JetBrains Mono", monospace; }
.checklist h2 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
.checklist p { max-width: 720px; margin: 8px 0 0; color: var(--body-text); }
.checklist-result { margin-top: 60px; padding: clamp(30px, 5vw, 54px); background: var(--deep); color: white; border-radius: 16px; }
.checklist-result h2 { margin: 0 0 22px; font-size: 32px; }
.checklist-result p { color: #dce3ff; }
.checklist-result .button { margin-top: 20px; }
.resource-download { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr); gap: clamp(28px, 5vw, 64px); align-items: end; padding: clamp(30px, 5vw, 54px); border-radius: 16px; background: var(--paper); }
.resource-download h2 { margin: 0; font-size: 32px; letter-spacing: -.025em; }
.resource-download > div > p { margin: 14px 0 0; color: var(--body-text); }
.resource-download-form { display: grid; gap: 14px; }
.resource-download-form .button { width: 100%; }
.resource-download-note { margin: -2px 0 0; color: var(--muted); font: 400 .875rem/1.5 "Archivo", Arial, sans-serif; }
.checklist-cta { margin-top: 28px; padding-block: 30px; text-align: center; }
.checklist-cta .button { margin-top: 0; }
.article-page { max-width: 880px; }
.article-hero h1 { font-size: clamp(42px, 6vw, 68px); line-height: 1.02; }
.article-meta { margin-top: 22px !important; font: 500 12px/1.5 "JetBrains Mono", monospace; }
.article-lede { font-size: 19px; }
.article-body { max-width: 760px; margin-top: 52px; }
.article-body h2 { margin: 52px 0 14px; color: var(--deep); font-size: 30px; line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.article-body p { margin: 0 0 18px; }
.article-body strong { color: var(--deep); }
.article-toc { margin-bottom: 48px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; }
.article-toc h2 { margin: 0 0 10px; font-size: 18px; }
.article-toc a { display: block; padding: 5px 0; color: var(--blue); font-weight: 600; }
.article-toc a:hover { color: var(--deep); text-decoration: underline; text-underline-offset: 3px; }
.article-callout { margin: 28px 0; padding: 24px; border-radius: 8px; background: #e9edff; }
.article-callout-warning { background: #fef0e7; }
.article-callout p { margin: 0; }
.article-callout p + p { margin-top: 6px; }
.article-callout a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.signal-list { margin: 0; padding: 0; list-style: none; }
.signal-list li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--body-text); }
.signal-list li::before { content: ""; width: 8px; height: 8px; margin-top: 8px; flex: 0 0 auto; background: var(--orange-dark); transform: rotate(45deg); }
.article-cta { margin-top: 72px; padding: clamp(42px, 7vw, 72px); border-radius: 16px; background: var(--deep); color: white; text-align: center; }
.article-cta h2 { margin: 0; color: white; font-size: 32px; }
.article-cta p { max-width: 620px; margin: 16px auto 24px; color: #dce3ff; }
.service-hero { padding-block: clamp(76px, 9vw, 132px); overflow: hidden; background: var(--deep); color: white; }
.service-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(500px, .95fr); gap: clamp(60px, 8vw, 132px); align-items: center; }
.service-hero h1 { max-width: 820px; margin: 0; font-size: clamp(48px, 6vw, 88px); line-height: .98; letter-spacing: -.04em; text-wrap: balance; }
.service-hero h1 + p { max-width: 720px; margin: 26px 0 0; color: #dce3ff; font-size: clamp(17px, 1.5vw, 20px); }
.service-hero .section-label { color: #cbd6ff; }
.readiness-score { padding: clamp(26px, 4vw, 42px); border: 1px solid rgba(255, 255, 255, .22); border-radius: 16px; background: #172d6f; box-shadow: 0 24px 60px rgba(16, 39, 102, .2); }
.score-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.score-head > span { max-width: 180px; color: #dce3ff; font-weight: 700; }
.score-head > strong { font-size: 52px; line-height: 1; letter-spacing: -.04em; }
.score-head > strong span { color: #aebeff; font-size: 17px; letter-spacing: 0; }
.readiness-score dl { display: grid; gap: 20px; margin: 28px 0 0; }
.readiness-score dt { margin-bottom: 7px; color: #dce3ff; font-size: 13px; }
.readiness-score dd { display: grid; grid-template-columns: 1fr 42px; gap: 12px; align-items: center; margin: 0; }
.readiness-score dd > span { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .15); }
.readiness-score dd > span::after { content: ""; display: block; width: var(--score); height: 100%; border-radius: inherit; background: #aebeff; }
.readiness-score dd b { font-size: 12px; }
.readiness-score > p { margin: 24px 0 0; color: #aeb6c4; font-size: 12px; }
.service-problem { background: var(--white); }
.service-problem-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(56px, 9vw, 148px); align-items: start; }
.service-problem h2 { margin: 0; font-size: clamp(36px, 4vw, 58px); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
.service-problem h2 + p { margin: 22px 0 0; color: var(--body-text); font-size: 18px; }
.service-problem ul { margin: 0; padding: 0; list-style: none; }
.service-problem li { min-height: 62px; display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
.service-problem li::before { content: ""; width: 9px; height: 9px; margin-right: 18px; flex: 0 0 auto; border-radius: 50%; background: var(--orange-dark); }
.service-deliverables { background: var(--paper); }
.service-levels { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service-levels article { min-height: 360px; display: flex; flex-direction: column; padding: 36px clamp(24px, 3vw, 46px); border-right: 1px solid var(--line); }
.service-levels article:last-child { border-right: 0; }
.service-levels article > span { color: var(--blue); font-weight: 700; }
.service-levels h3 { margin: 54px 0 0; font-size: 28px; letter-spacing: -.025em; }
.service-levels p { margin: 14px 0 0; color: var(--body-text); }
.service-levels strong { margin-top: auto; padding-top: 26px; color: var(--blue); font-size: 13px; }
.service-process { padding-block: clamp(72px, 8vw, 112px); background: #22262d; color: white; }
.process-track { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid #515966; }
.process-track li { min-height: 190px; padding: 24px 22px; border-right: 1px solid #515966; }
.process-track li:last-child { border-right: 0; }
.process-track span { color: #aebeff; font-weight: 700; }
.process-track p { margin: 34px 0 0; color: #d8dce4; }
@media (prefers-color-scheme: dark) {
  .article-body h2, .article-body strong { color: #aebeff; }
  .article-toc a, .article-callout a { color: #9fafee; }
  .article-toc a:hover { color: #cbd6ff; }
  .article-callout-warning { background: #3a2a24; }
}
@media (max-width: 1080px) {
  .service-hero-grid, .service-problem-grid { grid-template-columns: 1fr; }
  .readiness-score { max-width: 720px; }
  .process-track { grid-template-columns: repeat(3, 1fr); }
  .process-track li { border-bottom: 1px solid #515966; }
}
@media (max-width: 760px) {
  .wide-shell { width: min(calc(100% - 32px), var(--shell)); }
  .service-hero { padding-block: 68px; }
  .service-hero-grid { gap: 42px; }
  .service-levels, .process-track { grid-template-columns: 1fr; }
  .service-levels article { min-height: 280px; border-right: 0; border-bottom: 1px solid var(--line); }
  .service-levels article:last-child { border-bottom: 0; }
  .process-track li { min-height: 0; border-right: 0; }
  .process-track p { margin-top: 12px; }
  .resource-download { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 460px) {
  .checklist li { grid-template-columns: 48px 1fr; gap: 14px; }
}
@media print {
  .print-button, .resource-download, .checklist-result .button { display: none !important; }
  .resource-page { max-width: none; padding: 0; }
  .resource-hero h1 { font-size: 46px; }
  .checklist { margin-top: 34px; }
  .checklist li { break-inside: avoid; padding: 16px 0; }
  .checklist-result { break-inside: avoid; background: #fff; color: #20242b; border: 2px solid #1e3a8a; }
  .checklist-result p { color: #4b5563; }
}
@media (prefers-reduced-motion: no-preference) {
  .process-track > li { transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1), border-color .25s ease; }
  .motion-ready .process-track.reveal:not(.is-visible) .process-track > li { opacity: 0; transform: translateY(12px); }
  .motion-ready .process-track.reveal.is-visible .process-track > li:nth-child(2) { transition-delay: .09s; }
  .motion-ready .process-track.reveal.is-visible .process-track > li:nth-child(3) { transition-delay: .18s; }
  .motion-ready .process-track.reveal.is-visible .process-track > li:nth-child(4) { transition-delay: .27s; }
}

.resource-download-note a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
