/* How it works · v7 page layer (layout and photographs only; the page's text is untouched).
   Rhythm: photo hero → the two AIs as a photographic diptych → the dashboard as a showpiece on a
   full-bleed night band → the detail as a ruled ledger beside a sticky photograph → three
   scenario portraits → closing call.
   Sections, in order inside .poster: 1 hero · 2 two AIs · 3 dashboard · 4 the detail · 5 how clients start · 6 call. */

body[data-page="how-it-works"] {
  --hero: url("../img/photos/london-bluehour.jpg"); --hero-pos: 50% 58%; --hero-blend: normal;
  --cta: url("../img/photos/brass-knobs.jpg"); --cta-pos: 50% 50%; --cta-blend: normal;
}

/* ── 01 · two AIs: a photographic diptych ── */
body[data-page="how-it-works"] .poster > section:nth-child(2) .split-2 { gap: clamp(1.3rem, 2.4vw, 2.2rem); margin-top: 1.4rem; align-items: stretch }
body[data-page="how-it-works"] .ai-block { display: flex; flex-direction: column; background: var(--white); box-shadow: 0 1px 0 rgba(20, 33, 58, .04) }
body[data-page="how-it-works"] .ai-stage.central,
body[data-page="how-it-works"] .ai-stage.yours {
  min-height: clamp(260px, 27vw, 380px); padding: 1.4rem 1.6rem; border: 0;
  background-color: var(--navy);
  background-image: linear-gradient(0deg, rgba(11, 19, 34, .62) 0%, rgba(11, 19, 34, 0) 48%), var(--img, none);
  background-size: cover; background-repeat: no-repeat;
  background-position: center, var(--img-pos, 50% 50%);
  background-blend-mode: normal, var(--img-blend, normal);
}
body[data-page="how-it-works"] .ai-stage.central { --img: url("../img/photos/dc-corridor-sm.jpg"); --img-pos: 50% 50% }
body[data-page="how-it-works"] .ai-stage.yours { --img: url("../img/photos/mac-topdown-dark-sm.jpg"); --img-pos: 42% 50% }
body[data-page="how-it-works"] .tag { font-size: .68rem; padding: .45rem .8rem; border-radius: 999px }
body[data-page="how-it-works"] .ai-content { padding: clamp(1.6rem, 2.6vw, 2.4rem); gap: .7rem; flex: 1; align-content: start }
body[data-page="how-it-works"] .ai-content h3 { font-size: clamp(1.45rem, 2.1vw, 1.85rem); line-height: 1.08; letter-spacing: -.025em; max-width: 24ch }
body[data-page="how-it-works"] .ai-content > p { font-family: var(--serif); font-size: 1.12rem; line-height: 1.5; color: var(--muted) }
body[data-page="how-it-works"] .ai-block ul { gap: 0; margin-top: .7rem; padding-top: 0; border-top: 2px solid var(--fg) }
body[data-page="how-it-works"] .ai-block li { gap: .9rem; padding: .78rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; line-height: 1.5; color: #3B4558 }
body[data-page="how-it-works"] .ai-block li:last-child { border-bottom: 0; padding-bottom: 0 }
body[data-page="how-it-works"] .ai-block li::before { width: 10px; height: 2px; border-radius: 0; margin-top: .72em }

/* ── 02 · the dashboard: a showpiece on a full-bleed night band ── */
body[data-page="how-it-works"] .poster > section:nth-child(3) {
  position: relative; isolation: isolate; color: #fff;
  padding-block: clamp(4rem, 8vw, 7rem); margin-top: clamp(1rem, 3vw, 2.5rem); clip-path: inset(0 -100vw);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 0; row-gap: 0;
}
body[data-page="how-it-works"] .poster > section:nth-child(3)::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw;
  background-color: var(--navy-deep);
  background-image: linear-gradient(180deg, rgba(11, 19, 34, .95) 0%, rgba(11, 19, 34, .86) 24%, rgba(11, 19, 34, .62) 60%, rgba(11, 19, 34, .9) 100%), url("../img/photos/dc-panels-blue.jpg");
  background-size: cover; background-repeat: no-repeat; background-position: center, 50% 50%;
}
body[data-page="how-it-works"] .poster > section:nth-child(3) > .sh { grid-column: 1; grid-row: 1; border-top-color: rgba(255, 255, 255, .38); padding-right: 2rem; margin: 0 }
body[data-page="how-it-works"] .poster > section:nth-child(3) .sh-num { color: #E8868B }
body[data-page="how-it-works"] .poster > section:nth-child(3) h2 { color: #fff; font-size: clamp(2.1rem, 4vw, 3.4rem) }
body[data-page="how-it-works"] .poster > section:nth-child(3) > .section-lead {
  grid-column: 2; grid-row: 1; align-self: stretch; max-width: none; margin: 0;
  border-top: 2px solid rgba(255, 255, 255, .38); padding: 1.1rem 0 0 2rem;
  color: #C9D0DC; font-size: clamp(1.15rem, 1.6vw, 1.3rem);
}
body[data-page="how-it-works"] .poster > section:nth-child(3) .mock-screen {
  grid-column: 1 / -1; grid-row: 2; justify-self: center; width: 100%; max-width: 1080px;
  margin: clamp(2.6rem, 5vw, 4rem) auto 0; border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 50px 120px rgba(0, 0, 0, .55), 0 20px 40px rgba(0, 0, 0, .3);
}
body[data-page="how-it-works"] .poster > section:nth-child(3) .caption { grid-column: 1 / -1; grid-row: 3; color: #A9B2C3; opacity: 1; margin-top: 1.1rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .04em }
body[data-page="how-it-works"] .mock-titlebar { padding: .75rem 1rem }
body[data-page="how-it-works"] .mock-title { font-size: .74rem; letter-spacing: .04em }
body[data-page="how-it-works"] .mock-body { padding: clamp(.8rem, 2vw, 1.5rem) }
body[data-page="how-it-works"] .mock-status, body[data-page="how-it-works"] .mock-foot { padding: .75rem 1rem; gap: .55rem 1.6rem; align-items: baseline; border-radius: 8px }
body[data-page="how-it-works"] .mock-status { margin-bottom: 1.1rem }
body[data-page="how-it-works"] .mock-foot { margin-top: 1rem }
body[data-page="how-it-works"] .mock-label { font-size: .64rem }
body[data-page="how-it-works"] .mock-badge { font-size: .84rem }
body[data-page="how-it-works"] .mock-table th { font-size: .64rem; padding: .55rem .8rem }
body[data-page="how-it-works"] .mock-table td { font-size: .86rem; padding: .72rem .8rem }

/* ── 03 · the detail: a ruled ledger beside a sticky photograph ── */
body[data-page="how-it-works"] .poster > section:nth-child(4) {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(2.5rem, 5vw, 5rem); row-gap: 1.6rem; align-items: start;
  padding-top: clamp(4rem, 8vw, 7rem);
}
body[data-page="how-it-works"] .poster > section:nth-child(4) > .sh { grid-column: 1; grid-row: 1 }
body[data-page="how-it-works"] .poster > section:nth-child(4)::before {
  content: ""; grid-column: 1; grid-row: 2 / span 2; align-self: start; position: sticky; top: 6.5rem;
  aspect-ratio: 4 / 5; border-radius: var(--radius);
  background: var(--navy) url("../img/photos/morning-laptop-dawn-sm.jpg") 50% 45% / cover no-repeat;
}
body[data-page="how-it-works"] .poster > section:nth-child(4) ol.points { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; border-bottom: 1px solid var(--line) }
body[data-page="how-it-works"] .poster > section:nth-child(4) ol.points li { grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0; padding: 1.7rem 0 1.8rem }
body[data-page="how-it-works"] .poster > section:nth-child(4) ol.points li:first-child { border-top: 2px solid var(--fg) }
body[data-page="how-it-works"] .poster > section:nth-child(4) ol.points li > div { display: grid; grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr); gap: .5rem 2.2rem; align-items: baseline }
body[data-page="how-it-works"] .poster > section:nth-child(4) ol.points .n { margin-top: .32rem }
body[data-page="how-it-works"] .poster > section:nth-child(4) ol.points li strong { margin: 0; font-size: 1.3rem; line-height: 1.15 }
body[data-page="how-it-works"] .poster > section:nth-child(4) ol.points li p { font-family: var(--serif); font-size: 1.1rem; line-height: 1.55; color: #3B4558 }
body[data-page="how-it-works"] .poster > section:nth-child(4) > .back { grid-column: 2; grid-row: 3; justify-self: start; padding: .2rem 0 0 3.4rem; line-height: 1.6 }

/* ── 04 · how clients start: three scenario portraits ── */
body[data-page="how-it-works"] .poster > section:nth-child(5) { padding-top: clamp(3.6rem, 7vw, 6rem) }
body[data-page="how-it-works"] .who-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 2.6vw, 2.6rem); margin-top: 2.2rem }
body[data-page="how-it-works"] .who-card { background: none; border: 0; border-radius: 0; padding: 0; overflow: visible }
body[data-page="how-it-works"] .who-card::before { aspect-ratio: 4 / 5; border-radius: var(--radius); margin-bottom: 1.5rem }
body[data-page="how-it-works"] .who-card:nth-child(1) { --img: url("../img/photos/aud-family-sm.jpg"); --img-pos: 50% 30% }
body[data-page="how-it-works"] .who-card:nth-child(2) { --img: url("../img/photos/aud-institutions-sm.jpg"); --img-pos: 50% 45% }
body[data-page="how-it-works"] .who-card:nth-child(3) { --img: url("../img/photos/aud-desks-sm.jpg"); --img-pos: 50% 55% }
body[data-page="how-it-works"] .who-card > * { padding-inline: 0 }
body[data-page="how-it-works"] .who-card h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.1; letter-spacing: -.025em; margin-bottom: 1rem; max-width: 20ch }
body[data-page="how-it-works"] .who-card ul { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--fg) }
body[data-page="how-it-works"] .who-card li { margin: 0; padding: .72rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; line-height: 1.5; color: #3B4558 }

/* ── responsive ── */
body[data-page="how-it-works"] .back { text-wrap: balance }
@media (max-width: 1200px) {
  body[data-page="how-it-works"] .poster > section:nth-child(4) ol.points li > div { grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); column-gap: 1.6rem }
}
@media (max-width: 1000px) {
  body[data-page="how-it-works"] .poster > section:nth-child(3) { grid-template-columns: minmax(0, 1fr) }
  body[data-page="how-it-works"] .poster > section:nth-child(3) > .sh { grid-column: 1; grid-row: 1; padding-right: 0 }
  body[data-page="how-it-works"] .poster > section:nth-child(3) > .section-lead { grid-column: 1; grid-row: 2; border-top: 0; padding: 1rem 0 0 }
  body[data-page="how-it-works"] .poster > section:nth-child(3) .mock-screen { grid-row: 3 }
  body[data-page="how-it-works"] .poster > section:nth-child(3) .caption { grid-row: 4 }

  body[data-page="how-it-works"] .poster > section:nth-child(4) { grid-template-columns: minmax(0, 1fr) }
  body[data-page="how-it-works"] .poster > section:nth-child(4) > .sh { grid-column: 1; grid-row: 1 }
  body[data-page="how-it-works"] .poster > section:nth-child(4)::before { grid-column: 1; grid-row: 2; position: static; aspect-ratio: 16 / 8; background-position: 50% 55% }
  body[data-page="how-it-works"] .poster > section:nth-child(4) ol.points { grid-column: 1; grid-row: 3 }
  body[data-page="how-it-works"] .poster > section:nth-child(4) > .back { grid-column: 1; grid-row: 4 }

  body[data-page="how-it-works"] .who-grid { grid-template-columns: minmax(0, 1fr); gap: 2.6rem }
  body[data-page="how-it-works"] .who-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 2rem; align-items: start }
  body[data-page="how-it-works"] .who-card::before { grid-column: 1; grid-row: 1 / span 2; margin: 0; aspect-ratio: 4 / 3 }
  body[data-page="how-it-works"] .who-card h3 { grid-column: 2 }
  body[data-page="how-it-works"] .who-card ul { grid-column: 2 }
}
@media (max-width: 640px) {
  body[data-page="how-it-works"] .ai-stage.central, body[data-page="how-it-works"] .ai-stage.yours { min-height: 230px; padding: 1rem 1.1rem }
  body[data-page="how-it-works"] .ai-content { padding: 1.4rem 1.3rem 1.6rem }
  body[data-page="how-it-works"] .mock-table th, body[data-page="how-it-works"] .mock-table td { padding: .5rem .3rem; font-size: .66rem }
  body[data-page="how-it-works"] .mock-badge { font-size: .74rem }
  body[data-page="how-it-works"] .mock-status, body[data-page="how-it-works"] .mock-foot { padding: .6rem .7rem; gap: .35rem 1rem }
  body[data-page="how-it-works"] .poster > section:nth-child(3) .mock-screen { border-radius: 12px }
  body[data-page="how-it-works"] .poster > section:nth-child(4)::before { aspect-ratio: 4 / 3 }
  body[data-page="how-it-works"] .poster > section:nth-child(4) ol.points li { grid-template-columns: 2.6rem minmax(0, 1fr); padding: 1.4rem 0 }
  body[data-page="how-it-works"] .poster > section:nth-child(4) ol.points li > div { grid-template-columns: minmax(0, 1fr) }
  body[data-page="how-it-works"] .poster > section:nth-child(4) > .back { padding-left: 0 }
  body[data-page="how-it-works"] .who-card { display: block }
  body[data-page="how-it-works"] .who-card::before { aspect-ratio: 3 / 2; margin-bottom: 1.3rem }
}

/* ── the close: the house band, as on Home (the call stacked on the left); the core joins it to the footer ── */
body[data-page="how-it-works"] .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="how-it-works"] .cta-band h2 { font-size: clamp(2.5rem, 5.2vw, 4.4rem); margin-bottom: 1rem }
body[data-page="how-it-works"] .cta-band p { font-size: 1.28rem; color: rgba(255, 255, 255, .86) }
@media (max-width: 640px) {
  body[data-page="how-it-works"] .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="how-it-works"] .cta-band h2 { font-size: clamp(2rem, 9vw, 2.4rem); margin-bottom: .8rem }
  body[data-page="how-it-works"] .cta-band p { font-size: 1.12rem }
}