/* Persona pages: /for and /for/<role>. Built from site.css tokens and blocks
   (page-hero, page-screen, screen-frame, page-cta, film-embed). */

.persona-hero h1 { max-width: 20ch; font-size: clamp(2.4rem, 5.6vw, 5rem); }
.persona-hero .page-lead { max-width: 52ch; }

/* What changes for you */
.persona-changes { padding-block: clamp(24px, 5vh, 56px) clamp(48px, 8vh, 96px); }
.persona-changes > h2 { font-size: clamp(1.8rem, 3.4vw, 3rem); letter-spacing: -.04em; }
.persona-change-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 28px; counter-reset: change; }
.persona-change-list li { counter-increment: change; border-top: 1px solid var(--ink); padding-top: 18px; padding-bottom: 20px; display: grid; gap: 10px; align-content: start; }
.persona-change-list li::before { content: counter(change, decimal-leading-zero); font: 500 12px var(--mono); letter-spacing: .08em; color: var(--green); }
.persona-change-list h3 { font-size: 1.2rem; letter-spacing: -.02em; line-height: 1.25; }
.persona-change-list p { color: var(--muted); font-size: 16px; }

/* Second screen beside the Live now · Coming box */
.persona-split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; padding-bottom: clamp(48px, 8vh, 96px); }
.persona-split-single { grid-template-columns: minmax(0, 720px); }
.persona-shot { margin: 0; }
.persona-shot figcaption { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.persona-screen .screen-frame img, .persona-shot .screen-frame img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.persona-shot .screen-frame img.shot-centre, .persona-screen .screen-frame img.shot-centre { object-position: center; }

.persona-status { background: var(--white); border: 1px solid var(--rule); border-radius: 16px; padding: 22px 22px 24px; display: grid; gap: 18px; }
.persona-status > h2 { font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.status-group h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; letter-spacing: -.01em; }
.status-group ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.status-group li { font-size: 15px; line-height: 1.45; color: var(--ink-2); padding-left: 16px; position: relative; }
.status-group li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 1px; background: var(--muted); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.status-live { background: var(--green); }
.status-coming { background: transparent; border: 2px solid var(--caution); }

/* Walkthrough film */
.persona-film { padding-bottom: clamp(56px, 9vh, 110px); }
.persona-film .film-embed { max-width: 980px; }

/* Closing call to action */
.persona-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.persona-cta .persona-cta-actions .button-ghost { background: transparent; color: var(--night-ink); border-color: color-mix(in srgb, var(--night-ink) 45%, transparent); }
.persona-cta .persona-cta-actions .button-ghost:hover { border-color: var(--night-ink); }

/* Chooser */
.persona-chooser { display: grid; gap: clamp(36px, 6vh, 64px); padding-bottom: clamp(60px, 10vh, 120px); }
.persona-group > h2 { font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--green); padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.persona-cards { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.persona-card { height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 22px 22px 18px; background: var(--white); border: 1px solid var(--rule); border-radius: 16px; text-decoration: none; transition: border-color .3s, transform .35s var(--ease); }
.persona-card:hover { border-color: var(--green); transform: translateY(-2px); }
.persona-card-role { font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; line-height: 1.2; }
.persona-card-line { color: var(--muted); font-size: 15.5px; line-height: 1.45; }
.persona-card-go { color: var(--green); font-weight: 600; transition: transform .3s var(--ease); }
.persona-card:hover .persona-card-go { transform: translateX(4px); }

@media (max-width: 860px) {
  .persona-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .persona-cards { gap: 10px; }
  .persona-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 6px; padding: 16px 18px; }
  .persona-card-role, .persona-card-line { grid-column: 1; }
  .persona-card-go { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}