/* Platform · v7 page layer (layout and photographs only; the page's text is untouched).
   Rhythm: photo hero → the library beside a navy plate of six market themes → selection and execution
   as two photo-topped cards → EVAR on a full-bleed storm band → exchange ledger beside the vault →
   the CIO report beside the morning paper → closing call.
   Children of .poster, in order: 1 hero · 2 library · 3 selection · 4 hosting link · 5 EVAR · 6 exchanges · 7 reports · 8 call. */

body[data-page="platform"] {
  --hero: url("../img/photos/hero-platform.jpg"); --hero-pos: 50% 55%; --hero-blend: normal;
  --cta: url("../img/photos/hero-call.jpg"); --cta-pos: 50% 62%; --cta-blend: normal;
  --on-dark-red: #E8868B;
}

/* shared: ruled ledger lists inside the cards */
body[data-page="platform"] .ai-block ul { gap: 0; margin-top: .6rem; padding-top: 0; border-top: 2px solid var(--fg) }
body[data-page="platform"] .ai-block li { display: block; position: relative; padding: .78rem 0 .78rem 1.6rem; border-bottom: 1px solid var(--line); font-size: .95rem; line-height: 1.5; color: #3B4558 }
body[data-page="platform"] .ai-block li:last-child { border-bottom: 0; padding-bottom: 0 }
body[data-page="platform"] .ai-block li::before { position: absolute; left: 0; top: calc(.78rem + .72em); width: 10px; height: 2px; border-radius: 0; margin: 0 }
body[data-page="platform"] .ai-block li strong { color: var(--fg); font-weight: 600 }
body[data-page="platform"] .ai-content { padding: clamp(1.6rem, 2.6vw, 2.4rem); gap: .7rem; align-content: start }
body[data-page="platform"] .ai-content h3 { font-size: clamp(1.45rem, 2.1vw, 1.85rem); line-height: 1.08; letter-spacing: -.025em }

/* ── 01 · the strategy library: text beside a navy plate of six themes ── */
body[data-page="platform"] .poster > section:nth-child(2) {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(2.5rem, 5vw, 5rem); row-gap: 1.2rem; align-items: start;
}
body[data-page="platform"] .poster > section:nth-child(2) > .sh { grid-column: 1 / -1; grid-row: 1; margin-bottom: 1rem }
body[data-page="platform"] .poster > section:nth-child(2) > .section-lead { grid-column: 1; grid-row: 2; font-size: clamp(1.15rem, 1.5vw, 1.3rem); color: #3B4558 }
body[data-page="platform"] .poster > section:nth-child(2) > .back { grid-column: 1; grid-row: 3; justify-self: start; margin: 0; padding: .3rem 0 0; line-height: 1.6 }
body[data-page="platform"] .poster > section:nth-child(2)::after {
  content: ""; grid-column: 2; grid-row: 2 / span 3; align-self: start;
  aspect-ratio: 9 / 4; border-radius: var(--radius); overflow: hidden;
  background-color: var(--navy);
  background-image:
    url("../img/photos/theme-intl-equity-sm.jpg"), url("../img/photos/theme-gold-sm.jpg"), url("../img/photos/theme-infra-sm.jpg"),
    url("../img/photos/theme-us-equity-sm.jpg"), url("../img/photos/theme-agri-sm.jpg"), url("../img/photos/theme-space-sm.jpg");
  background-repeat: no-repeat;
  background-size: calc((100% - 12px) / 3) auto;
  background-position: 0 0, 50% 0, 100% 0, 0 100%, 50% 100%, 100% 100%;
  background-blend-mode: luminosity;
}

/* ── 02 · selection and execution: two photo-topped cards ── */
body[data-page="platform"] .poster > section:nth-child(3) { padding-bottom: 0 }
body[data-page="platform"] .poster > section:nth-child(3) .split-2 { gap: clamp(1.3rem, 2.4vw, 2.2rem) }
body[data-page="platform"] .poster > section:nth-child(3) .ai-block { background: var(--white) }
body[data-page="platform"] .poster > section:nth-child(3) .ai-block::before {
  content: ""; display: block; aspect-ratio: 16 / 7;
  background: var(--navy) var(--img, none) center / cover no-repeat; background-position: var(--img-pos, 50% 50%);
}
body[data-page="platform"] .poster > section:nth-child(3) .ai-block:nth-child(1) { --img: url("../img/photos/mac-light-sm.jpg"); --img-pos: 50% 48% }
body[data-page="platform"] .poster > section:nth-child(3) .ai-block:nth-child(2) { --img: url("../img/photos/dc-hall-white-sm.jpg"); --img-pos: 50% 62% }

/* the hosting link sits under the cards */
body[data-page="platform"] .poster > p { padding: 0; margin-bottom: 0 }

/* ── 03 · EVAR: a full-bleed storm band, three ruled columns ── */
body[data-page="platform"] .poster > section:nth-child(5) {
  position: relative; isolation: isolate; clip-path: inset(0 -100vw); color: #fff;
  margin-top: clamp(3.6rem, 7vw, 6rem); padding-block: clamp(4.5rem, 9vw, 7.5rem);
}
body[data-page="platform"] .poster > section:nth-child(5)::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw;
  background-color: var(--navy);
  background-image:
    linear-gradient(90deg, rgba(11, 19, 34, .94) 0%, rgba(11, 19, 34, .78) 42%, rgba(11, 19, 34, .2) 100%),
    linear-gradient(0deg, rgba(11, 19, 34, .97) 0%, rgba(11, 19, 34, .9) 40%, rgba(11, 19, 34, 0) 78%),
    url("../img/photos/note-evar.jpg");
  background-size: cover; background-repeat: no-repeat; background-position: center, center, 50% 70%;
  background-blend-mode: normal, normal, luminosity;
}
body[data-page="platform"] .poster > section:nth-child(5) .sh { border-top-color: rgba(255, 255, 255, .38) }
body[data-page="platform"] .poster > section:nth-child(5) .sh-num { color: var(--on-dark-red) }
body[data-page="platform"] .poster > section:nth-child(5) h2 { color: #fff }
body[data-page="platform"] .poster > section:nth-child(5) .section-lead { color: #CBD2DE; font-size: clamp(1.15rem, 1.5vw, 1.3rem); max-width: 42rem }
body[data-page="platform"] .poster > section:nth-child(5) ol.points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.6rem, 3vw, 3rem); margin-top: clamp(2.6rem, 5vw, 4.4rem) }
body[data-page="platform"] .poster > section:nth-child(5) ol.points li { grid-template-columns: minmax(0, 1fr); align-content: start; gap: .9rem; border-top: 1px solid rgba(255, 255, 255, .32); padding: 1.4rem 0 .4rem }
body[data-page="platform"] .poster > section:nth-child(5) ol.points .n { color: var(--on-dark-red); margin: 0; justify-self: start; place-items: start }
body[data-page="platform"] .poster > section:nth-child(5) ol.points li strong { color: #fff; font-size: 1.3rem; margin-bottom: .6rem }
body[data-page="platform"] .poster > section:nth-child(5) ol.points li p { color: #C3CAD6; font-family: var(--serif); font-size: 1.07rem; line-height: 1.55 }
body[data-page="platform"] .poster > section:nth-child(5) .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .6) }
body[data-page="platform"] .poster > section:nth-child(5) .btn.ghost:hover { background: #fff; color: var(--black); border-color: #fff }

/* ── 04 · exchange accounts: a ledger of venues beside the vault ── */
body[data-page="platform"] .poster > section:nth-child(6) { padding-top: clamp(4rem, 8vw, 7rem) }
body[data-page="platform"] .poster > section:nth-child(6) .split-2 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.3rem, 2.4vw, 2.2rem); margin-top: 1.4rem; align-items: stretch }
body[data-page="platform"] .poster > section:nth-child(6) .ai-block:nth-child(1) li { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 0 1rem; padding: 1rem 0; align-items: baseline }
body[data-page="platform"] .poster > section:nth-child(6) .ai-block:nth-child(1) li::before { display: none }
body[data-page="platform"] .poster > section:nth-child(6) .ai-block:nth-child(1) li strong { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.015em }
body[data-page="platform"] .poster > section:nth-child(6) .ai-block:nth-child(1) .ai-content > p { opacity: 1 !important; color: var(--muted); font-family: var(--serif); font-size: 1rem !important; line-height: 1.55; border-top: 1px solid var(--line); padding-top: 1rem }
body[data-page="platform"] .poster > section:nth-child(6) .ai-block:nth-child(2) {
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; border: 0;
  background-color: var(--navy);
  background-image: linear-gradient(0deg, rgba(11, 19, 34, .96) 0%, rgba(11, 19, 34, .88) 46%, rgba(11, 19, 34, .45) 72%, rgba(11, 19, 34, .12) 100%), url("../img/photos/hero-security-sm.jpg");
  background-size: cover; background-repeat: no-repeat; background-position: center, 50% 42%;
}
body[data-page="platform"] .poster > section:nth-child(6) .ai-block:nth-child(2) h3 { color: #fff }
body[data-page="platform"] .poster > section:nth-child(6) .ai-block:nth-child(2) p { color: rgba(255, 255, 255, .88); font-family: var(--serif); font-size: 1.12rem; line-height: 1.5 }
body[data-page="platform"] .poster > section:nth-child(6) .ai-block:nth-child(2) a { color: #fff; text-decoration-color: rgba(255, 255, 255, .55) }
body[data-page="platform"] .poster > section:nth-child(6) .ai-block:nth-child(2) a:hover { text-decoration-color: #fff }

/* ── 05 · the daily reports: the CIO report beside the morning paper ── */
body[data-page="platform"] .poster > section:nth-child(7) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(1.4rem, 2.6vw, 2.4rem); row-gap: 1.2rem }
body[data-page="platform"] .poster > section:nth-child(7) > .sh { grid-column: 1 / -1; grid-row: 1 }
body[data-page="platform"] .poster > section:nth-child(7) > .section-lead { grid-column: 1 / -1; grid-row: 2; margin-bottom: 1.4rem }
body[data-page="platform"] .poster > section:nth-child(7) > .mock-screen {
  grid-column: 1; grid-row: 3; margin: 0; max-width: none; width: 100%; align-self: start;
  box-shadow: 0 40px 80px rgba(11, 19, 34, .26), 0 0 0 1px rgba(20, 33, 58, .25);
}
body[data-page="platform"] .poster > section:nth-child(7) > .caption { grid-column: 1; grid-row: 4; text-align: left; margin: 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .03em; opacity: 1; color: var(--muted) }
body[data-page="platform"] .poster > section:nth-child(7)::after {
  content: ""; grid-column: 2; grid-row: 3 / span 2; align-self: stretch; min-height: 260px; border-radius: var(--radius);
  background: var(--navy) url("../img/photos/about-breakfast-sm.jpg") 50% 46% / cover no-repeat;
}
body[data-page="platform"] .poster > section:nth-child(7) > .split-2 { grid-column: 1 / -1; grid-row: 5; gap: clamp(1.6rem, 4vw, 4rem); margin-top: 3rem !important }
body[data-page="platform"] .poster > section:nth-child(7) .ai-block { background: none; border: 0; border-radius: 0; border-top: 2px solid var(--fg); overflow: visible }
body[data-page="platform"] .poster > section:nth-child(7) .ai-content { padding: 1.3rem 0 0 }
body[data-page="platform"] .poster > section:nth-child(7) .ai-block ul { border-top: 1px solid var(--line); margin-top: .3rem }
body[data-page="platform"] .mock-titlebar { padding: .7rem 1rem }
body[data-page="platform"] .mock-title { font-size: .72rem; letter-spacing: .04em }
body[data-page="platform"] .mock-body { padding: clamp(.8rem, 1.8vw, 1.3rem) }
body[data-page="platform"] .mock-status, body[data-page="platform"] .mock-foot { padding: .7rem .9rem; gap: .5rem 1.4rem; align-items: baseline; border-radius: 8px }
body[data-page="platform"] .mock-status { margin-bottom: 1rem }
body[data-page="platform"] .mock-foot { margin-top: .9rem }
body[data-page="platform"] .mock-label { font-size: .62rem }
body[data-page="platform"] .mock-badge { font-size: .8rem }
body[data-page="platform"] .mock-table th { font-size: .62rem; padding: .5rem .7rem }
body[data-page="platform"] .mock-table td { font-size: .8rem; padding: .62rem .7rem; vertical-align: top }

/* ── responsive ── */
body[data-page="platform"] .back { text-wrap: balance }
@media (max-width: 1000px) {
  body[data-page="platform"] .poster > section:nth-child(2) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none }
  body[data-page="platform"] .poster > section:nth-child(2) > .sh { grid-column: 1; margin-bottom: 0 }
  body[data-page="platform"] .poster > section:nth-child(2) > .section-lead { grid-column: 1; grid-row: 2 }
  body[data-page="platform"] .poster > section:nth-child(2) > .back { grid-column: 1; grid-row: 3 }
  body[data-page="platform"] .poster > section:nth-child(2)::after { grid-column: 1; grid-row: 4; margin-top: .6rem }
  body[data-page="platform"] .poster > section:nth-child(3) .ai-block::before { aspect-ratio: 3 / 1 }

  body[data-page="platform"] .poster > section:nth-child(5) ol.points { grid-template-columns: minmax(0, 1fr) }
  body[data-page="platform"] .poster > section:nth-child(5) ol.points li { grid-template-columns: 3rem minmax(0, 1fr); gap: 0; padding: 1.4rem 0 1.2rem }
  body[data-page="platform"] .poster > section:nth-child(5) ol.points .n { margin-top: .35rem }

  body[data-page="platform"] .poster > section:nth-child(7) { grid-template-columns: minmax(0, 1fr) }
  body[data-page="platform"] .poster > section:nth-child(7) > .mock-screen { grid-column: 1; grid-row: 3 }
  body[data-page="platform"] .poster > section:nth-child(7) > .caption { grid-column: 1; grid-row: 4 }
  body[data-page="platform"] .poster > section:nth-child(7)::after { grid-column: 1; grid-row: 5; aspect-ratio: 16 / 7; min-height: 0; margin-top: 1.4rem; background-position: 50% 40% }
  body[data-page="platform"] .poster > section:nth-child(7) > .split-2 { grid-column: 1; grid-row: 6 }
}
@media (max-width: 860px) {
  body[data-page="platform"] .poster > section:nth-child(6) .split-2 { grid-template-columns: minmax(0, 1fr) }
  body[data-page="platform"] .poster > section:nth-child(6) .ai-block:nth-child(2) { min-height: 360px }
}
@media (max-width: 640px) {
  body[data-page="platform"] .poster > section:nth-child(2)::after {
    aspect-ratio: 1 / 1; background-size: calc((100% - 6px) / 2) auto;
    background-position: 0 0, 100% 0, 0 50%, 100% 50%, 0 100%, 100% 100%;
  }
  body[data-page="platform"] .poster > section:nth-child(3) .ai-block::before { aspect-ratio: 16 / 9 }
  body[data-page="platform"] .ai-content { padding: 1.4rem 1.3rem 1.6rem }
  body[data-page="platform"] .poster > section:nth-child(6) .ai-block:nth-child(1) li { grid-template-columns: minmax(0, 1fr); gap: .15rem }
  body[data-page="platform"] .poster > section:nth-child(7) .ai-content { padding: 1.2rem 0 0 }
  body[data-page="platform"] .poster > section:nth-child(7)::after { aspect-ratio: 4 / 3 }
  body[data-page="platform"] .mock-table th, body[data-page="platform"] .mock-table td { padding: .5rem .3rem; font-size: .66rem }
  body[data-page="platform"] .mock-badge { font-size: .72rem }
  body[data-page="platform"] .mock-status, body[data-page="platform"] .mock-foot { padding: .6rem .7rem; gap: .35rem 1rem }
}

/* ── the close: the house band, as on Home (the call stacked on the left); the core joins it to the footer ── */
body[data-page="platform"] .cta-band {
  grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 2rem;
  min-height: clamp(440px, 60vh, 600px); align-content: center; margin-top: 0;
  background-image: linear-gradient(90deg, rgba(11, 19, 34, .94) 0%, rgba(11, 19, 34, .8) 40%, rgba(11, 19, 34, .3) 100%), var(--cta);
}
body[data-page="platform"] .cta-band h2 { font-size: clamp(2.5rem, 5.2vw, 4.4rem); margin-bottom: 1rem }
body[data-page="platform"] .cta-band p { font-size: 1.28rem; color: rgba(255, 255, 255, .86) }
@media (max-width: 640px) {
  body[data-page="platform"] .cta-band { min-height: 0; gap: 1.6rem; padding: 4.4rem 1rem; background-image: linear-gradient(180deg, rgba(11, 19, 34, .86), rgba(11, 19, 34, .74) 55%, rgba(11, 19, 34, .9)), var(--cta) }
  body[data-page="platform"] .cta-band h2 { font-size: clamp(2rem, 9vw, 2.4rem); margin-bottom: .8rem }
  body[data-page="platform"] .cta-band p { font-size: 1.12rem }
}