/* ---------- Shared page bands (assessments, resources, blog, eBook) ---------- */
.as-hero--sm .mod-hero-inner { padding-bottom: 92px; }

.band { background: var(--cream); padding: 76px 48px; }
.band--tight { padding-top: 0; }
.band-inner { max-width: 1320px; margin: 0 auto; }
.band-inner > h2 {
  font-family: var(--font-display);
  font-size: clamp(27px, 2.7vw, 38px);
  font-weight: 500; font-style: italic;
  letter-spacing: -0.015em; line-height: 1.12;
  color: var(--ink);
  margin-bottom: 22px;
}
.a-label {
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: #2C7C55;
  padding-top: 8px;
}

/* numbered mechanism grid, flush like the module nine-box */
.a-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #E4E9F2;
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
}
.a-step {
  padding: 26px 26px 30px;
  border-right: 1px solid #E4E9F2;
  border-bottom: 1px solid #E4E9F2;
}
.a-step-n {
  display: block;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--green);
  margin-bottom: 12px;
}
.a-step p { font-size: 15px; line-height: 1.58; color: #4A5578; }
.a-step p strong { color: var(--ink); font-weight: 700; }

/* deliverable, on the same navy as the pilot ribbon */
.a-deliver {
  background: linear-gradient(120deg, var(--navy-800) 0%, var(--navy-950) 100%);
  color: var(--cream);
  border-radius: 16px;
  padding: 40px 44px 44px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rcard:nth-child(3n) { border-right: 1px solid #E4E9F2; }
  .rcard:nth-child(2n) { border-right: 0; }
}
@media (max-width: 900px) {
  .band { padding: 56px 26px; }
  .a-steps, .a-steps--2 { grid-template-columns: minmax(0, 1fr); }
  .a-step { border-right: 0; }
}

.rcard[hidden], .rrow[hidden] { display: none !important; }
.asmt > .band-inner { padding-top: 72px; border-top: 1px solid #E4E9F2; }
.asmt:first-of-type > .band-inner { border-top: 0; padding-top: 0; }

/* each diagnostic closes with its own ask, inside the deliverables panel */
.a-deliver-cta {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 20px 32px;
  margin-top: 32px;
}
.a-deliver-cta .btn { flex: 0 0 auto; }

@media (max-width: 900px) {
  .asmt > .band-inner { padding-top: 52px; }
}

/* ---------- Assessment panels: a portrait letter page beside the copy ---------- */
/* No footage here. The panel is a two-column frame: copy left, the report
   page standing tall on the right, sized to the page rather than cropped. */
.doc-shot {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1fr);
  align-items: center;
  gap: 44px;
  min-height: 700px;
  padding: 72px 48px 0;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-950) 65%);
  border: 0;
}
.doc-shot::after { content: none; }

.doc-copy { padding-bottom: 72px; display: flex; flex-direction: column; align-items: flex-start; color: var(--cream); }
.doc-copy .plat-for { margin-bottom: 14px; }
.doc-copy .plat-text { max-width: 20ch; text-shadow: none; }
.doc-copy .plat-gets { max-width: 36ch; text-shadow: none; margin-bottom: 30px; }

/* the page itself: shown whole, never cropped */
.doc-page { margin: 0; display: flex; justify-content: center; align-self: end; }
.doc-page img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  aspect-ratio: 8.5 / 11;
  object-fit: contain;
  border-radius: 6px 6px 0 0;
  background: #FFFFFF;
  /* pulled back off pure white so it sits in the palette, not on top of it */
  filter: saturate(0.94) brightness(0.97);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0,0,0,0.55) 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, rgba(0,0,0,0.55) 86%, transparent 100%);
}

/* the four options sit at the top of the rail instead of stretching down it */
.plat-wrap--doc .plat-tab { flex: 0 0 auto; min-height: 0; padding: 17px 24px; }
.plat-wrap--doc .plat-tabs { justify-content: flex-start; }

@media (max-width: 900px) {
  .doc-shot {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    min-height: 0;
    padding: 36px 26px 0;
  }
  .doc-copy { padding-bottom: 0; }
  .doc-copy .plat-text, .doc-copy .plat-gets { max-width: none; }
  .doc-page { align-self: center; }
  .doc-page img { max-width: 340px; }
  .plat-wrap--doc .plat-tab { padding: 14px 18px; }
}

/* ---------- Resource index: short hero, list of what's inside ---------- */
/* This hero has no media behind it, so it does not need to clip its overflow.
   Keeping it hidden would cut off the nav dropdowns, which are taller than the hero. */
.as-hero--list { min-height: 400px; overflow: visible; }
.as-hero--list .mod-hero-inner { padding: 24px 0 56px; }
.as-hero--list h1 { font-size: clamp(34px, 4vw, 54px); }

.rlist { border-top: 1px solid #E4E9F2; }
.rrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, auto) minmax(150px, auto);
  gap: 20px 36px;
  align-items: center;
  padding: 24px 6px 26px;
  border-bottom: 1px solid #E4E9F2;
  text-decoration: none;
  color: inherit;
  transition: background 160ms ease, padding-left 160ms ease;
}
a.rrow:hover { background: #F6F8FC; padding-left: 14px; }
a.rrow:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.rrow h2,
.rrow h3 {
  font-size: 17.5px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.32;
  color: var(--ink);
  margin-bottom: 5px;
}
.rrow p { font-size: 15px; line-height: 1.55; color: #4A5578; max-width: 68ch; }
.rrow-act {
  display: inline-flex; align-items: center; gap: 8px;
  justify-self: end;
  font-size: 13.5px; font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
a.rrow:hover .rrow-act { color: #2C7C55; }
.rrow-act svg { transition: transform 160ms ease; }
a.rrow:hover .rrow-act svg { transform: translateX(3px); }

/* nothing behind it yet */
.rrow.is-soon h2,
.rrow.is-soon h3 { color: #5A6485; }
.rrow.is-soon p { color: #8A93AC; }
.rrow .rsoon { justify-self: end; border-top: 0; padding-top: 0; margin-top: 0; align-self: center; }

/* rows carrying no format tag or status need only the one column */
.rlist--plain .rrow { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 860px) {
  .rrow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rrow-act, .rrow .rsoon { justify-self: start; }
  a.rrow:hover { padding-left: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .rrow, .rrow-act svg { transition: none; }
}

/* download or request action on a resource row */
.rrow-dl,
.rrow-req {
  display: inline-flex; align-items: center; gap: 9px;
  justify-self: end;
  padding: 9px 18px;
  border: 1px solid #D5DCEA;
  border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.rrow-dl:hover,
.rrow-req:hover { border-color: var(--green); color: #2C7C55; background: rgba(89,205,144,0.08); }
.rrow-dl:focus-visible,
.rrow-req:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* a plain list still needs a column for the button */
.rlist--plain .rrow { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 860px) {
  .rlist--plain .rrow { grid-template-columns: minmax(0, 1fr); }
  .rrow-dl, .rrow-req { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .rrow-dl, .rrow-req { transition: none; } }

/* ---------- Row thumbnail ---------- */
.rrow { grid-template-columns: 96px minmax(0, 1fr) auto; }
.rlist--plain .rrow { grid-template-columns: 96px minmax(0, 1fr) auto; }
.rrow-thumb {
  display: block;
  width: 96px; height: 72px;
  border-radius: 7px;
  /* the mark is a logo, not a photo: fit it inside rather than cropping */
  object-fit: contain;
  padding: 15px;
  background: #EDF1F8;
  border: 1px solid #E4E9F2;
  align-self: start;
}
a.rrow:hover .rrow-thumb { border-color: #D5DCEA; }
@media (max-width: 860px) {
  .rrow, .rlist--plain .rrow { grid-template-columns: 96px minmax(0, 1fr); }
  .rrow-act, .rrow-dl, .rrow-req { grid-column: 2; justify-self: start; }
}
@media (max-width: 560px) {
  .rrow, .rlist--plain .rrow { grid-template-columns: minmax(0, 1fr); }
  .rrow-act, .rrow-dl, .rrow-req { grid-column: 1; }
}

/* ---------- Index Leaders ---------- */
/* Full-height hero, shield alongside the copy. */
.as-hero--split .mod-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.46fr);
  gap: 64px;
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; }
.shield {
  display: block;
  width: 100%; max-width: 330px;
  margin: 0 auto;
  aspect-ratio: 1320 / 1620;
  object-fit: contain;
}

@media (max-width: 900px) {
  .as-hero--split .mod-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .shield { max-width: 220px; margin: 0; }
}

/* four steps across, full width: the label sits above rather than beside */
.a-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.a-steps--4 .a-step { border-bottom: 0; }
.a-steps--4 .a-step:nth-child(4n) { border-right: 0; }
@media (max-width: 1000px) {
  .a-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-steps--4 .a-step:nth-child(2n) { border-right: 0; }
  .a-steps--4 .a-step:nth-child(-n+2) { border-bottom: 1px solid #E4E9F2; }
}
@media (max-width: 620px) {
  .a-steps--4 { grid-template-columns: minmax(0, 1fr); }
  .a-steps--4 .a-step { border-right: 0; border-bottom: 1px solid #E4E9F2; }
  .a-steps--4 .a-step:last-child { border-bottom: 0; }
}

/* rows with no thumbnail */
.rlist--nothumb .rrow { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 560px) { .rlist--nothumb .rrow { grid-template-columns: minmax(0, 1fr); } }


/* links inside the 404 wayfinding grid */
.a-step a { color: var(--ink); text-decoration: none; border-bottom: 2px solid rgba(89,205,144,0.9); }
.a-step a:hover { color: #2C7C55; border-color: #2C7C55; }