/* ============================================================
   Priority page polish
   Final, deliberately scoped refinements for index.html and FAQ.
   Loaded after the shared responsive layer so page rhythm remains
   predictable at desktop, tablet and mobile widths.
   ============================================================ */

/* Homepage: section rhythm ------------------------------------- */
body.home-page {
  --home-space: clamp(5.25rem, 8vw, 7.25rem);
  --home-card-inset: clamp(1.4rem, 2.6vw, 1.85rem);
}

body.home-page .home-panel-head {
  box-sizing: border-box;
  min-width: 0;
  align-items: start;
  gap: clamp(2.5rem, 7vw, 6.25rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.35rem, 2.2vw, 1.8rem);
  border-top: 1px solid var(--home-line);
}

body.home-page .home-panel-head > * {
  min-width: 0;
}

body.home-page .home-panel > .home-panel-head {
  padding-inline: clamp(1.45rem, 3vw, 2.15rem);
}

body.home-page main > section:not(.home-finale)::after {
  top: calc(var(--home-space) + 1.55rem);
}

body.home-page .home-kicker {
  margin-bottom: 0.8rem;
  line-height: 1.55;
}

body.home-page :is(.home-panel, .home-operations, .home-council) h2 {
  line-height: 1.08;
}

body.home-page .home-panel-lede {
  max-width: 36rem;
  padding-top: 0.15rem;
  line-height: 1.78;
  overflow-wrap: anywhere;
}

body.home-page .home-callout {
  margin-top: 0.85rem;
  padding: 1.05rem 1.2rem;
  border-color: rgba(var(--accent-rgb), 0.2);
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.075), rgba(11, 13, 16, 0.55) 70%);
}

/* Homepage: consistent card proportions ------------------------ */
body.home-page .tenet-grid li {
  min-height: 228px;
  padding: clamp(1.5rem, 2.6vw, 1.9rem);
}

body.home-page .tenet-grid li::before {
  margin-bottom: 2.4rem;
}

body.home-page .legacy-timeline li {
  min-height: 244px;
  padding: 1.7rem 1.45rem 1.85rem;
}

body.home-page .legacy-timeline time {
  line-height: 1.45;
}

body.home-page .legacy-timeline h3 {
  margin: 2rem 0 0.55rem;
  line-height: 1.3;
}

body.home-page .legacy-timeline p {
  margin: 0;
  line-height: 1.7;
}

body.home-page .service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

body.home-page .service-card,
body.home-page .service-card:nth-child(n) {
  grid-column: auto;
  min-height: 208px;
  justify-content: flex-start;
  gap: 1.45rem;
  padding: clamp(1.4rem, 2.6vw, 1.75rem);
  border-radius: 6px;
  background:
    linear-gradient(var(--accent-light), var(--accent-light)) 0 0 / 1.65rem 1px no-repeat,
    linear-gradient(145deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.005)),
    rgba(12, 14, 17, 0.92);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

body.home-page .service-card:hover,
body.home-page .service-card:focus-within {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.46) !important;
  background:
    linear-gradient(var(--accent-light), var(--accent-light)) 0 0 / 2.3rem 1px no-repeat,
    linear-gradient(145deg, rgba(var(--accent-rgb), 0.085), rgba(255, 255, 255, 0.006)),
    rgba(13, 15, 18, 0.94);
  box-shadow: 0 15px 34px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.035) !important;
}

body.home-page .service-card p {
  margin: 0.45rem 0 0;
  line-height: 1.7;
}

body.home-page .benefit-grid li {
  min-height: 132px;
  align-items: center;
  padding: 1.3rem;
}

body.home-page .snapshot-card {
  min-height: 180px;
  padding: 1.45rem;
}

body.home-page .snapshot-card > i {
  margin-bottom: 1.65rem;
}

body.home-page .snapshot-card span {
  display: block;
  margin-top: 0.42rem;
  line-height: 1.65;
}

body.home-page .snapshot-card:is(:hover, :focus-within) {
  border-color: transparent !important;
  background: rgba(11, 13, 16, 0.94);
  box-shadow: none !important;
  transform: none;
}

body.home-page :is(.reward-summary, .reward-policy, .table-wrapper) {
  border-radius: 6px;
}

body.home-page :is(
  .home-dossier,
  .home-fact-rail > div,
  .tenet-grid li,
  .legacy-timeline li,
  .service-card,
  .benefit-grid li,
  .snapshot-card,
  .council-list li,
  .home-callout,
  .reward-summary,
  .reward-policy
) {
  box-sizing: border-box;
  min-width: 0;
}

body.home-page :is(
  .home-dossier,
  .home-fact-rail > div,
  .tenet-grid li,
  .legacy-timeline li,
  .service-card,
  .benefit-grid li,
  .snapshot-card,
  .council-list li,
  .home-callout,
  .reward-summary,
  .reward-policy
) {
  padding-inline: var(--home-card-inset);
}

body.home-page .reward-table :is(th, td) {
  padding-inline: clamp(1rem, 2.2vw, 1.35rem);
}

body.home-page :is(
  .home-dossier,
  .home-fact-rail span,
  .tenet-grid p,
  .legacy-timeline p,
  .service-card p,
  .benefit-grid small,
  .snapshot-card span,
  .home-callout-copy,
  .reward-summary span,
  .reward-policy p,
  .council-list div
) {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.home-page :is(.home-council-link, .home-finale a, .home-callout a):focus-visible,
body.faq-page :is(a, button, summary, input):focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
}

/* FAQ: calmer hero and navigation ------------------------------- */
body.faq-page .rules-hero {
  min-height: clamp(370px, 46vh, 470px);
  padding-top: calc(var(--nav-h) + clamp(2.6rem, 5vw, 4rem));
  padding-bottom: clamp(2.4rem, 4vw, 3.25rem);
}

body.faq-page .rules-hero img {
  width: clamp(108px, 12vw, 142px);
  height: clamp(108px, 12vw, 142px);
  margin-bottom: 1.3rem;
}

body.faq-page .rules-hero h1 {
  margin: 0;
  font-size: clamp(3rem, 6vw, 4.8rem);
  line-height: 1.02;
}

body.faq-page .rules-hero .tagline {
  margin-top: 0.8rem;
  line-height: 1.68;
}

body.faq-page .faq-nav {
  gap: 0.5rem;
  margin: 1.25rem auto 0;
}

body.faq-page .faq-nav a {
  min-height: 2.3rem;
  padding: 0.45rem 0.85rem;
  border-color: rgba(var(--accent-rgb), 0.27);
  background: rgba(8, 10, 12, 0.64);
  box-shadow: none;
  font-size: 0.78rem;
  font-weight: 600;
}

body.faq-page .faq-nav a:is(:hover, :focus-visible, .active) {
  border-color: rgba(var(--accent-rgb), 0.65);
  background: rgba(var(--accent-rgb), 0.12);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.055);
  color: var(--accent-light);
}

/* FAQ: remove nested-card clutter and improve scanning ---------- */
body.faq-page .rules-block {
  padding-block: clamp(3.25rem, 6vw, 5.25rem);
}

body.faq-page .faq-wrap {
  width: min(calc(100% - 2rem), 1120px);
  max-width: 1120px;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0 0, rgba(var(--accent-rgb), 0.055), transparent 24rem),
    rgba(12, 14, 17, 0.94);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.26);
}

body.faq-page .faq-tools {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  gap: 1.25rem 2.25rem;
  align-items: center;
  margin: 0 0 1.35rem;
  padding: 0 0 1.6rem;
  border: 0;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 0;
  background: transparent;
}

body.faq-page .faq-kicker {
  margin-bottom: 0.5rem;
}

body.faq-page .faq-tools h2 {
  color: var(--text-1);
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  line-height: 1.1;
}

body.faq-page .faq-search input {
  min-height: 3.15rem;
  padding-left: 2.7rem;
  border-color: rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
  background: rgba(3, 5, 6, 0.72);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

body.faq-page .faq-tool-actions {
  justify-content: flex-start;
  gap: 0.55rem;
}

body.faq-page .faq-action {
  min-height: 2.5rem;
  padding: 0.55rem 0.82rem;
  border-radius: 7px;
  box-shadow: none;
  font-size: 0.76rem;
  font-weight: 600;
}

body.faq-page .faq-action:is(:hover, :focus-visible) {
  border-color: rgba(var(--accent-rgb), 0.6);
  background: rgba(var(--accent-rgb), 0.1);
  box-shadow: none;
  color: var(--accent-light);
}

body.faq-page .faq-count {
  margin-left: auto;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

body.faq-page .faq-note {
  max-width: 60rem;
  margin: 0 0 0.5rem;
  padding: 0.85rem 1rem;
  border-left: 2px solid rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.045);
  color: rgba(240, 236, 223, 0.64);
  font-size: 0.79rem;
  font-style: normal;
  line-height: 1.65;
}

body.faq-page .faq-cat {
  justify-content: flex-start;
  gap: 0.65rem;
  margin: 3rem 0 1rem;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
}

body.faq-page .faq-cat::before {
  display: none;
}

body.faq-page .faq-cat::after {
  max-width: none;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.32), transparent);
}

body.faq-page .faq-cat i {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.07);
  color: var(--accent-light);
  font-size: 0.78rem;
}

body.faq-page .faq-item {
  margin-bottom: 0.72rem;
  border-color: rgba(var(--accent-rgb), 0.2);
  border-radius: 6px;
  background: rgba(9, 11, 14, 0.72);
}

body.faq-page .faq-item::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  height: auto;
  opacity: 0.45;
}

body.faq-page .faq-item:is(:hover, [open]) {
  border-color: rgba(var(--accent-rgb), 0.42);
  background: rgba(13, 15, 18, 0.92);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}

body.faq-page .faq-item summary {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr) 1.25rem;
  gap: 0.85rem;
  min-height: 4.35rem;
  padding: 0.9rem 1.1rem;
  font-size: 0.92rem;
  line-height: 1.45;
}

body.faq-page .faq-icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 8px;
  font-size: 0.92rem;
}

body.faq-page .faq-item[open] .faq-icon {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.13);
  color: var(--accent-light);
}

body.faq-page .faq-body {
  padding: 1.15rem 1.35rem 1.4rem 4.3rem;
  border-top-color: rgba(var(--accent-rgb), 0.15);
  font-size: 0.9rem;
  line-height: 1.75;
}

body.faq-page .faq-body > :first-child {
  margin-top: 0;
}

body.faq-page .faq-closing {
  margin-top: 2.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-left: 2px solid var(--accent);
  border-radius: 6px;
  background: rgba(var(--accent-rgb), 0.045);
}

/* Tablet -------------------------------------------------------- */
@media (max-width: 820px) {
  body.home-page .home-panel-head {
    gap: 1.2rem;
  }

  body.home-page .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.faq-page .faq-tools {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  body.faq-page .faq-search {
    width: 100%;
  }
}

/* Mobile -------------------------------------------------------- */
@media (max-width: 680px) {
  body.home-page {
    --home-space: clamp(4.25rem, 14vw, 5.25rem);
    --home-card-inset: 1.2rem;
  }

  body.home-page .home-panel-head {
    gap: 1rem;
    margin-bottom: 1.6rem;
    padding-top: 1.15rem;
  }

  body.home-page .home-panel > .home-panel-head {
    padding-inline: 1.2rem;
  }

  body.home-page .home-kicker {
    margin-bottom: 0.6rem;
  }

  body.home-page .home-panel-lede {
    padding-top: 0;
    line-height: 1.7;
  }

  body.home-page :is(.tenet-grid li, .legacy-timeline li, .benefit-grid li, .snapshot-card) {
    padding: 1.2rem;
  }

  body.home-page .legacy-timeline h3 {
    margin-top: 1.2rem;
  }

  body.home-page .service-grid {
    grid-template-columns: 1fr;
  }

  body.home-page .service-card,
  body.home-page .service-card:nth-child(n) {
    min-height: 0;
    gap: 1rem;
    padding: 1.2rem;
  }

  body.home-page .service-card:hover,
  body.home-page .service-card:focus-within {
    transform: none;
    box-shadow: none !important;
  }

  body.home-page .benefit-grid li {
    min-height: 108px;
  }

  body.home-page .snapshot-card > i {
    margin-bottom: 1.1rem;
  }

  body.faq-page .rules-hero {
    min-height: 340px;
    padding-top: calc(var(--nav-h) + 2.25rem);
    padding-bottom: 2.25rem;
  }

  body.faq-page .rules-hero img {
    width: 96px;
    height: 96px;
    margin-bottom: 1rem;
  }

  body.faq-page .rules-hero h1 {
    font-size: clamp(2.7rem, 12vw, 3.65rem);
  }

  body.faq-page .faq-wrap {
    width: min(calc(100% - 1rem), 1120px);
    padding: 1rem;
    border-radius: 6px;
  }

  body.faq-page .rules-block {
    padding-block: 1.75rem 3.5rem;
  }

  body.faq-page .faq-tools {
    gap: 1rem;
    padding-bottom: 1.25rem;
  }

  body.faq-page .faq-tool-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.faq-page .faq-count {
    grid-column: 1 / -1;
    margin: 0.1rem 0 0;
  }

  body.faq-page .faq-note {
    padding: 0.8rem 0.85rem;
    font-size: 0.76rem;
  }

  body.faq-page .faq-cat {
    margin-top: 2.35rem;
    font-size: 1.8rem;
  }

  body.faq-page .faq-cat::after {
    display: block;
  }

  body.faq-page .faq-item summary {
    grid-template-columns: 2.25rem minmax(0, 1fr) 1.1rem;
    gap: 0.68rem;
    min-height: 4rem;
    padding: 0.8rem 0.85rem;
    font-size: 0.86rem;
  }

  body.faq-page .faq-icon {
    width: 2.25rem;
    height: 2.25rem;
  }

  body.faq-page .faq-body {
    padding: 1rem 1rem 1.2rem;
    font-size: 0.86rem;
    line-height: 1.7;
  }
}

@media (max-width: 400px) {
  body.faq-page .faq-tool-actions {
    grid-template-columns: 1fr;
  }

  body.faq-page .faq-count {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .service-card {
    transition: none;
  }
}

/* ============================================================
   Homepage cards — aligned to the recruitment card language
   The home grids previously used shallower cards with capped
   copy widths, which read as cramped next to recruitment.html.
   These rules load last so they settle the shared card shell:
   one inset, one fill, one hover, copy that fills the card.
   ============================================================ */

body.home-page {
  /* One inset drives card padding AND the panel head, so headings
     and card copy share a left edge. Matches .recruit-benefit-card. */
  --home-card-inset: clamp(1.5rem, 2.8vw, 1.95rem);
  --home-card-min: 260px;
  --home-card-fill:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),
    rgba(12, 14, 17, 0.92);
  --home-card-fill-hover:
    linear-gradient(145deg, rgba(var(--accent-rgb), 0.095), rgba(255, 255, 255, 0.012)),
    rgba(13, 15, 18, 0.94);
}

body.home-page .home-panel > .home-panel-head {
  padding-inline: var(--home-card-inset);
}

/* Shared card shell ------------------------------------------- */
body.home-page :is(
  .tenet-grid li,
  .legacy-timeline li,
  .service-card,
  .benefit-grid li,
  .snapshot-card
) {
  position: relative;
  min-height: var(--home-card-min);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding-block: var(--home-card-inset);
  background: var(--home-card-fill);
  transition:
    background 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease;
}

body.home-page :is(
  .tenet-grid li,
  .legacy-timeline li,
  .service-card,
  .benefit-grid li,
  .snapshot-card
):is(:hover, :focus-within) {
  z-index: 1;
  transform: none;
  background: var(--home-card-fill-hover);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.25) !important;
}

/* Copy fills the card instead of being capped short ------------ */
body.home-page :is(
  .tenet-grid p,
  .legacy-timeline p,
  .service-card p,
  .benefit-grid small,
  .snapshot-card span
) {
  max-width: none;
  margin-top: 0.55rem;
  color: var(--home-muted);
  font-size: 0.84rem;
  line-height: 1.72;
}

/* Card titles ------------------------------------------------- */
body.home-page :is(
  .tenet-grid strong,
  .legacy-timeline h3,
  .service-card h3,
  .benefit-grid strong,
  .snapshot-card strong
) {
  display: block;
  margin: 0;
  color: var(--text-1);
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Top row: the eyebrow/medallion sits away from the copy ------- */
body.home-page .tenet-grid li::before,
body.home-page .legacy-timeline time,
body.home-page .service-card > .service-icon,
body.home-page .benefit-grid > li > .benefit-icon,
body.home-page .snapshot-card > i {
  flex: 0 0 auto;
  margin: 0 0 2.35rem;
}

/* Circular medallions, as on .recruit-benefit-card__top -------- */
body.home-page :is(.service-icon, .benefit-icon),
body.home-page .snapshot-card > i {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.14);
  color: var(--accent-light);
  font-size: 0.9rem;
}

/* Benefits and snapshots stack like the recruitment cards ------ */
body.home-page .benefit-grid > li,
body.home-page .snapshot-card {
  display: flex;
  align-items: stretch;
}

body.home-page .benefit-grid > li > div,
body.home-page .snapshot-card > div,
body.home-page .service-card > div {
  min-width: 0;
}

body.home-page .tenet-grid li::before {
  color: rgba(var(--accent-rgb), 0.52);
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

body.home-page .legacy-timeline time {
  color: rgba(var(--accent-rgb), 0.52);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* The callout gets matching breathing room -------------------- */
body.home-page .home-callout {
  gap: 1.15rem;
  padding-block: 1.35rem;
}

/* Services: same hairline grid + card shell as the others ------ */
body.home-page .service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--home-line);
  border-radius: 4px;
  background: var(--home-line);
}

body.home-page .service-card,
body.home-page .service-card:nth-child(n) {
  grid-column: auto;
  min-height: var(--home-card-min);
  justify-content: flex-start;
  gap: 0;
  padding: var(--home-card-inset);
  border: 0;
  border-radius: 0;
  background: var(--home-card-fill);
}

body.home-page .service-card:hover,
body.home-page .service-card:focus-within {
  transform: none;
  border-color: transparent !important;
  background: var(--home-card-fill-hover);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.25) !important;
}

body.home-page .service-card p {
  margin: 0.55rem 0 0;
}

/* Tablet ------------------------------------------------------ */
@media (max-width: 820px) {
  body.home-page {
    --home-card-min: 240px;
  }
}

/* Mobile ------------------------------------------------------ */
@media (max-width: 680px) {
  body.home-page {
    --home-card-inset: 1.45rem;
    /* Phones size cards to their copy: the generous inset and the
       eyebrow gap carry the airiness, without a tall empty tail
       that would double the amount of scrolling. */
    --home-card-min: 0px;
  }

  body.home-page .home-panel > .home-panel-head {
    padding-inline: var(--home-card-inset);
  }

  body.home-page :is(
    .tenet-grid li,
    .legacy-timeline li,
    .service-card,
    .benefit-grid li,
    .snapshot-card
  ) {
    padding-block: var(--home-card-inset);
  }

  body.home-page .tenet-grid li::before,
  body.home-page .legacy-timeline time,
  body.home-page .service-card > .service-icon,
  body.home-page .benefit-grid > li > .benefit-icon,
  body.home-page .snapshot-card > i {
    margin-bottom: 1.6rem;
  }

  body.home-page .service-grid {
    grid-template-columns: 1fr;
  }

  body.home-page .service-card,
  body.home-page .service-card:nth-child(n) {
    min-height: var(--home-card-min);
    gap: 0;
    padding: var(--home-card-inset);
  }

  body.home-page .benefit-grid li {
    min-height: var(--home-card-min);
  }

  /* Touch devices get no hover ring, just the resting fill */
  body.home-page :is(
    .tenet-grid li,
    .legacy-timeline li,
    .service-card,
    .benefit-grid li,
    .snapshot-card
  ):hover {
    background: var(--home-card-fill);
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page :is(
    .tenet-grid li,
    .legacy-timeline li,
    .service-card,
    .benefit-grid li,
    .snapshot-card
  ) {
    transition: none;
  }
}

/* ============================================================
   Tenets + eras: the Private Islands treatment
   These are the homepage's feature cards, so they follow
   .recruit-islands rather than .recruit-benefit-card — a standing
   panel each, with the big Cormorant numeral, the accent border,
   the corner bracket and the corner glow.
   ============================================================ */

body.home-page :is(.tenet-grid, .legacy-timeline) {
  display: grid;
  gap: clamp(0.85rem, 1.5vw, 1.2rem);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.home-page .tenet-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.home-page .legacy-timeline {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 0;
}

body.home-page :is(.tenet-grid, .legacy-timeline) > li {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  min-height: 0;
  padding: clamp(1.7rem, 3vw, 2.5rem);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 4px;
  background:
    radial-gradient(circle at 0 0, rgba(var(--accent-rgb), 0.16), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.28);
  transition: border-color 0.24s ease, box-shadow 0.24s ease;
}

body.home-page :is(.tenet-grid, .legacy-timeline) > li:is(:hover, :focus-within) {
  border-color: rgba(var(--accent-rgb), 0.62);
  background:
    radial-gradient(circle at 0 0, rgba(var(--accent-rgb), 0.16), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.34) !important;
}

/* Corner bracket, as on .recruit-islands::after */
body.home-page :is(.tenet-grid, .legacy-timeline) > li::after {
  content: "";
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  border-top: 1px solid rgba(var(--accent-rgb), 0.35);
  border-right: 1px solid rgba(var(--accent-rgb), 0.35);
  pointer-events: none;
}

/* The big numeral, sitting over a full-width rule like the
   islands card's mark column divider. */
body.home-page .tenet-grid > li::before,
body.home-page .legacy-timeline > li > time {
  content: "0" counter(tenets);
  display: block;
  width: 100%;
  margin: 0 0 1.35rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
  color: var(--accent-light);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3rem, 5.5vw, 4.5rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.8;
  text-transform: none;
}

/* Eras keep their date as a small caption under the numeral */
body.home-page .legacy-timeline > li > time {
  content: none;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: rgba(232, 226, 206, 0.52);
}

/* The timeline dots belonged to the old flush rail */
body.home-page .legacy-timeline > li::before {
  display: none;
}

body.home-page .tenet-grid strong,
body.home-page .legacy-timeline h3 {
  display: block;
  margin: 0;
  color: var(--text-1);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.5rem, 2.1vw, 1.9rem);
  font-weight: 600;
  line-height: 1.14;
}

body.home-page .tenet-grid p,
body.home-page .legacy-timeline p {
  max-width: none;
  margin: 0.7rem 0 0;
  color: var(--home-muted);
  font-size: 0.88rem;
  line-height: 1.8;
}

/* Tablet ------------------------------------------------------ */
@media (max-width: 1040px) {
  body.home-page .legacy-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  body.home-page .tenet-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile ------------------------------------------------------ */
@media (max-width: 680px) {
  body.home-page :is(.tenet-grid, .legacy-timeline) {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  body.home-page :is(.tenet-grid, .legacy-timeline) > li {
    padding: 1.5rem;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.26);
  }

  body.home-page :is(.tenet-grid, .legacy-timeline) > li::after {
    top: 0.8rem;
    right: 0.8rem;
    width: 2.1rem;
    height: 2.1rem;
  }

  body.home-page .tenet-grid > li::before,
  body.home-page .legacy-timeline > li > time {
    margin-bottom: 1.05rem;
    padding-bottom: 1.05rem;
    font-size: 2.9rem;
  }

  body.home-page .legacy-timeline > li > time {
    font-size: 0.66rem;
  }

  body.home-page :is(.tenet-grid, .legacy-timeline) > li:hover {
    border-color: rgba(var(--accent-rgb), 0.35);
  }
}

/* Eras get the islands mark column too: big numeral over a small
   caption, the way .recruit-islands__mark pairs "02" with
   "PROPERTIES". Also clears the old absolutely-positioned rail dot. */
body.home-page .legacy-timeline {
  counter-reset: eras;
}

body.home-page .legacy-timeline > li {
  counter-increment: eras;
}

body.home-page .legacy-timeline > li::before {
  content: "0" counter(eras);
  display: block;
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--accent-light);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3rem, 5.5vw, 4.5rem);
  font-weight: 500;
  line-height: 0.8;
}

body.home-page .legacy-timeline > li > time {
  display: block;
  width: 100%;
  margin: 0.95rem 0 1.35rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
  color: rgba(232, 226, 206, 0.52);
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
}

@media (max-width: 680px) {
  body.home-page .legacy-timeline > li::before {
    font-size: 2.9rem;
  }

  body.home-page .legacy-timeline > li > time {
    margin: 0.8rem 0 1.05rem;
    padding-bottom: 1.05rem;
  }
}

/* The section counter was pinned to the shell edge, which put it
   outside the panel border and hard against the viewport side.
   Align it with the panel head's own content inset instead. */
body.home-page main > section:not(.home-finale)::after {
  right: calc(max(1.5rem, (100% - 1260px) / 2) + var(--home-card-inset));
  /* Sits on the rule above the head, clear of the lede's first line */
  top: calc(var(--home-space) - 0.85rem);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
}

@media (max-width: 680px) {
  body.home-page main > section:not(.home-finale)::after {
    top: calc(var(--home-space) + 1.4rem);
  }
}

/* ============================================================
   Outer panels — the .recruit-islands treatment
   The homepage sections were open editorial blocks: no border, no
   padding, so their heads and the section counter sat hard against
   the shell edge. Give them the same standing-card shell recruitment
   uses for its outer cards.
   ============================================================ */

body.home-page {
  --home-panel-pad: clamp(1.6rem, 3.6vw, 3rem);
}

body.home-page :is(.home-panel, .home-operations, .home-council) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--home-panel-pad);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 4px;
  background:
    radial-gradient(circle at 0 0, rgba(var(--accent-rgb), 0.14), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.01));
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.28);
}

/* Corner bracket, as on .recruit-islands::after */
body.home-page :is(.home-panel, .home-operations, .home-council)::after {
  content: "";
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  width: 5rem;
  height: 5rem;
  border-top: 1px solid rgba(var(--accent-rgb), 0.35);
  border-right: 1px solid rgba(var(--accent-rgb), 0.35);
  pointer-events: none;
}

/* The panel supplies the inset now, so the head stops adding its own
   and drops the rule the open layout needed. */
body.home-page .home-panel > .home-panel-head,
body.home-page .home-panel-head {
  padding-top: 0;
  padding-inline: 0;
  border-top: 0;
}

/* Counter moves inside the panel, level with the bracket */
body.home-page main > section:not(.home-finale)::after {
  top: calc(var(--home-space) + var(--home-panel-pad));
  right: calc(max(1.5rem, (100% - 1260px) / 2) + var(--home-panel-pad) + 5.6rem);
}

@media (max-width: 680px) {
  body.home-page :is(.home-panel, .home-operations, .home-council)::after {
    top: 0.8rem;
    right: 0.8rem;
    width: 2.6rem;
    height: 2.6rem;
  }

  body.home-page main > section:not(.home-finale)::after {
    top: calc(var(--home-space) + 0.9rem);
    right: calc(max(1.5rem, (100% - 1260px) / 2) + 3.6rem);
  }
}

/* Keep the faction summary in its own document space. The old negative
   margin placed the rail over the hero's Discover cue. */
body.home-page .home-fact-rail {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

@media (max-width: 680px) {
  body.home-page .home-fact-rail {
    margin-top: 1rem;
  }
}