/* =========================================================================
   PAGES — inner-page components (Work With Ben, Insider 22, Sessions, Learn,
   About, Contact, Newsletter). Tokens only; media queries are layout flips.
   ========================================================================= */

/* --- shared scaffolding ------------------------------------------------ */
.band { background: var(--bg); }   /* Alex 16 Sep: black, not the grey slab */
.section--tight { padding-block: var(--space-2xl); }
.testimonials + .section { padding-block-start: var(--space-2xl); }   /* after a slider the next section starts a step closer: the slider's own bottom air plus two 3xl paddings stacked to 440px (Chiara 17 Sep) */
.page-hero + .section { padding-block-start: var(--space-hero-gap); }   /* Chiara 16 Sep: site-wide gap under every hero */
.measure { max-width: 62ch; }
.measure--wide { max-width: 78ch; }   /* a lead-size paragraph on its own (Sessions 'Why New York'): 62ch of large serif read as a narrow column (Chiara 22 Sep) */
.eyebrow + .measure { margin-top: var(--space-lg); }
.stack + .lead { margin-top: var(--space-xl); }   /* air before a closing accent line (Newsletter 'Free. Focused.', Charlotte 28 Sep) */   /* air between an eyebrow and the paragraph it introduces (Chiara 22 Sep) */
.center { text-align: center; }
.center .measure { margin-inline: auto; }
.stack > * + * { margin-top: var(--space-sm); }
.section-head { margin-bottom: var(--space-xl); }
.section-head h2 { max-width: 22ch; }
.center .section-head h2, .section-head.center h2 { margin-inline: auto; }
.section-head .eyebrow { margin-bottom: var(--space-sm); }
.section-head p:not(.eyebrow) { margin-top: var(--space-md); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.split--top { align-items: start; }   /* heading sits level with the label opposite it (Chiara 16 Sep) */
.split--text-wide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.split--media-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
/* Staggered pair (About story / Before padel, Chiara 23 Sep): photos 5% smaller and pulled toward each other, so the first drops past its section's foot and the second rises to meet it */
.split--stagger .split__media { width: 95%; }
.split--stagger:not(.split--stagger-up) .split__media { margin-bottom: calc(-1 * var(--space-2xl)); }   /* no downward push: the first photo only extends past its section's foot, so the logos above stay close (Chiara 23 Sep) */
.split--stagger-up .split__media { margin-top: calc(-1 * var(--space-2xl)); margin-bottom: var(--space-2xl); margin-left: auto; }
.split--stagger { align-items: start; }
.split--stagger > div:not(.split__media) { align-self: center; }
@media (max-width: 1024px) { .split--stagger .split__media, .split--stagger:not(.split--stagger-up) .split__media, .split--stagger-up .split__media { width: 100%; margin: 0; } }   /* stacked: no stagger margins, so the photo-to-heading gap is the grid gap in both directions (the :not() rule outranked the plain reset and pulled the story heading up against its photo on phones, Chiara 23 Sep) */
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
/* Lede split (Alex's reference avec-paris.com; proportions re-measured from Chiara's screenshot 20 Sep). Reference at 2000 wide: statement 17% → 82% with a first-line indent ≈ 19% of its measure, set large (≈ 4vw) so it runs to several lines; image on the full left half; detail copy from ≈ 63%, opened by a title */
.lede-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--space-2xl); align-items: start; }
.lede-split__head { grid-column: 3 / 12; margin-top: calc(-1 * (var(--space-sm) + var(--space-xxs))); font-size: var(--type-display-xl); line-height: var(--lh-display); }   /* no first-line indent, and lifted 20px (Chiara 23 Sep) */
.lede-split__media { grid-column: 1 / 7; margin-left: clamp(0px, 4.43vw, 85px); }   /* left edge on the hero copy's inset, not the gutter (Chiara 23 Sep) */
.lede-split__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 25%; border-radius: var(--radius); }   /* near-square as in the reference; faces kept in frame */
.lede-split__body { grid-column: 8 / 13; align-self: center; max-width: 46ch; justify-self: end; width: 100%; }   /* copy centred on the image (Chiara 23 Sep) */
.lede-split__title { margin-bottom: var(--space-md); font-family: var(--font-display); font-weight: 400; font-size: var(--type-h3); line-height: var(--lh-heading); }   /* the serif heading face, as the other h3s (Chiara 22 Sep) */
.inset { overflow: hidden; margin-top: var(--space-2xl); aspect-ratio: 2 / 1; border-radius: var(--radius); }   /* margin-wide image under a text section, e.g. Insider 'Who it is for' (Chiara 17 Sep) */
.inset img { display: block; width: 100%; height: 100%; object-fit: cover; }   /* static: the summit crop has no headroom to spare for parallax slack */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-lg); }
.center .actions, .actions.center { justify-content: center; }   /* .actions.center: one centred button under a left-aligned section, e.g. Insider 'Join Insider 22' (Chiara 17 Sep) */
.ph { display: flex; align-items: center; justify-content: center; padding: var(--space-md); background: var(--white-10); border-radius: var(--radius); color: var(--white-50); font-size: var(--type-meta); letter-spacing: var(--track-caps); text-transform: uppercase; text-align: center; }
.ph--portrait { aspect-ratio: 4 / 5; }
.ph--wide { aspect-ratio: 21 / 9; }   /* Insider Circle screenshots placeholder, shorter (Chiara 22 Sep) */
.chip { display: inline-flex; align-items: center; min-height: var(--cta-h); padding-inline: var(--cta-pad-x); border: 1px solid var(--line-dark); border-radius: var(--radius-pill); font-size: var(--type-nav); letter-spacing: var(--track-cta); text-transform: uppercase; color: var(--white); }
.text-link { display: inline-block; padding-block: var(--space-xxs); color: var(--accent); border-bottom: 1px solid currentColor; }   /* ≥24px tap target (WCAG 2.5.8) without changing the look */

/* --- inner-page hero ----------------------------------------------------- */
.page-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(560px, 80svh, 940px); overflow: hidden; background: var(--bg); }
.page-hero--short { min-height: clamp(460px, 62svh, 720px); }
.page-hero--tall { height: 100svh; min-height: 560px; }
.page-hero--focus-top .page-hero__media img { top: 0; height: 112%; }   /* parallax slack moves below the frame so the subject's head is never clipped (Chiara 16 Sep) */
.page-hero--focus-low .page-hero__media img { top: -18%; height: 124%; }   /* focal point lower: shows more of the bottom, so the people sit higher (Chiara 16 Sep) */   /* Chiara 16 Sep: one screen on load so the button is never cut off (Alex's band is 1118 at 1920) */
.page-hero--tall .page-hero__in { padding-left: calc(var(--gutter) + clamp(0px, 4.43vw, 85px)); padding-bottom: clamp(56px, 8.1vw, 156px); }

.page-hero__media { position: absolute; inset: 0; overflow: hidden; }
.page-hero__media img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.page-hero__scrim { position: absolute; inset: 0; background: var(--scrim-bottom); }
.page-hero__scrim::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 24%; background: var(--scrim-top); }   /* keeps the nav readable on bright photos (Chiara 16 Sep) */
.page-hero__scrim::after { content: ''; position: absolute; inset: auto 0 0 0; height: 32%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--bg) 100%); }   /* Chiara 16 Sep: the hero dissolves into the section below instead of ending on a hard line */
.page-hero__in { position: relative; z-index: 2; padding-block: calc(var(--nav-top) + var(--nav-h) + var(--space-2xl)) var(--space-2xl); }
.page-hero h1 { max-width: 30ch; }   /* wider measure so the longer headlines hold two lines (Chiara 16 Sep) */
.page-hero .eyebrow { margin-bottom: var(--space-sm); color: var(--accent); }
.page-hero .lead { margin-top: var(--space-md); max-width: clamp(320px, 41.6667vw, 800px); font-size: var(--type-lead-page); }   /* a step wider than Alex's 720 (800 ÷ 19.2 = 41.6667vw), so a 16-inch lands at 720 */
.page-hero__meta { margin-top: var(--space-md); font-size: var(--type-nav); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--white-50); }
.page-hero--portrait .page-hero__media { left: auto; width: min(46%, 760px); }
.page-hero--portrait .page-hero__media img { object-position: 50% 20%; }
.page-hero--portrait .page-hero__scrim { background: linear-gradient(90deg, var(--bg) 0%, rgba(0,0,0,.7) 50%, rgba(0,0,0,0) 100%); }

/* --- forms --------------------------------------------------------------- */
.form { display: grid; gap: var(--space-md); max-width: 820px; }
.center .form { margin-inline: auto; text-align: left; }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }
.field { display: grid; gap: var(--space-xs); border: 0; min-width: 0; }
.field > label, .field > legend { font-size: var(--type-nav); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--white-50); padding: 0; }
.field input, .field select, .field textarea { width: 100%; min-height: var(--cta-h); padding-inline: var(--space-md); border: 1px solid var(--line-dark); border-radius: var(--radius-pill); background: var(--white-10); color: var(--white); font-size: max(16px, var(--type-meta)); transition: border-color var(--dur) var(--ease-out); }   /* smaller field text; 16px floor so iOS never zooms on focus (Chiara 16 Sep) */
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--white) 50%), linear-gradient(135deg, var(--white) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: var(--space-xl); }
.field select option { color: var(--ink-2); }
.field textarea { min-height: 150px; padding-block: var(--space-sm); border-radius: calc(var(--cta-h) / 2); resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--white-50); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label { display: inline-flex; align-items: center; min-height: var(--cta-h); padding-inline: var(--cta-pad-x); border: 1px solid var(--line-dark); border-radius: var(--radius-pill); font-size: var(--type-nav); letter-spacing: var(--track-cta); text-transform: uppercase; cursor: pointer; transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.chips label:hover { border-color: var(--white-50); }
.chips input:checked + label { background: var(--accent); border-color: var(--accent); color: var(--ink-2); }
.chips input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 3px; }
.form .cta { justify-self: start; }
.form__note { font-size: var(--type-meta); color: var(--white-50); max-width: 62ch; }
.form__note--center { margin-inline: auto; margin-top: var(--space-sm); text-align: center; }   /* a note under a centred button (Learn FAQ close, Chiara 23 Sep) */
.form__status { min-height: 1.4em; font-size: var(--type-meta); color: var(--accent); }

/* --- FAQ accordion (native <details name>, one open at a time) --------------- */
.faq { border-top: 1px solid var(--line-dark); text-align: left; max-width: 1020px; margin-inline: auto; }   /* centred, between the old 860 and the logo grid's 1180 (Chiara 23 Sep); one rule, so every page's FAQ matches */
.faq details { border-bottom: 1px solid var(--line-dark); }
.faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-block: var(--space-lg); list-style: none; cursor: pointer; font-family: var(--font-display); font-size: var(--type-sub); line-height: var(--lh-lead); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: 0 0 auto; font-family: var(--font-body); font-size: var(--type-sub); color: var(--accent); transition: transform var(--dur) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__a { padding-bottom: var(--space-lg); max-width: none; }
.section-head--faq { max-width: 1020px; margin-inline: auto; }   /* title sits directly above the questions (Chiara 16 Sep) */

/* --- logo marquee (auto-scroll, pauses on hover) ------------------------------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: var(--col-gap); width: max-content; animation: marquee 45s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { flex: 0 0 auto; width: clamp(130px, 9.375vw, 180px); aspect-ratio: 5 / 2; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --- Work With Ben: how we work, offers, logo grid, two ways in (Alex 3466:782, 16 Sep) ---------- */
.howwork { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 66%); gap: 0; align-items: start; }
.howwork h2 { max-width: 12ch; font-size: var(--type-display-sm); }
.howwork--wide { grid-template-columns: minmax(0, 44%) minmax(0, 56%); }   /* Learn and About (Chiara 23 Sep): wider heading column so the longer headings hold two lines; Work with Ben and Insider keep the base 34/66. Two baselines, on purpose */
.howwork--wide h2 { max-width: 21ch; }
.howwork--wide .howwork__body { max-width: 100%; }
.howwork__body { display: grid; gap: var(--space-md); max-width: 1138px; }

.offers { border-top: 1px solid var(--line-dark); }
.offer { display: grid; grid-template-columns: minmax(0, 1fr) min(750px, 44%); column-gap: var(--col-gap); border-bottom: 1px solid var(--line-dark); }
.offer__row { grid-column: 1; grid-row: 1; align-self: start; display: grid; grid-template-columns: minmax(60px, 176px) minmax(0, 1fr); align-items: baseline; padding-block: clamp(30px, 3.8vw, 73px); cursor: pointer; list-style: none; transition: color var(--dur) var(--ease-out); }   /* align-self start: the title row keeps its own height instead of stretching to the open panel's, so the script can animate the panel down to it (22 Sep) */
.offer__row:hover .offer__title, .offer__row:focus-visible .offer__title,
.offer__row:hover .offer__num, .offer__row:focus-visible .offer__num { color: var(--accent); }   /* number and title both turn accent on hover (Chiara 16 Sep) */
.offer__num, .offer__title { transition: color var(--dur) var(--ease-out); }
.offer__row:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.offer[open] .offer__title { color: var(--accent); }
.offer__row::-webkit-details-marker { display: none; }
.offer__num { font-family: var(--font-display); font-size: var(--type-h3); color: var(--accent); }
.offer__title { font-family: var(--font-display); font-size: var(--type-h3); line-height: var(--lh-heading); }   /* Chiara 16 Sep: a step up from Alex's 36 */
.offer__panel { grid-column: 2; grid-row: 1; display: block; padding-block: clamp(30px, 3.4vw, 65px) var(--space-2xl); }
.offer__panel p { max-width: 744px; margin-top: var(--space-md); }
.offer__media { width: 100%; aspect-ratio: 750 / 469; overflow: hidden; border-radius: var(--radius); }
.offer__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.offer__media > .ph { width: 100%; height: 100%; }   /* a placeholder fills the media frame like a photo would (Learn experts, 23 Sep) */
.offer__price { font-size: var(--type-nav); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); }

.logo-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--col-gap); margin-top: var(--space-lg); }   /* Alex 3466:782: nine per line */
.logo-grid__item { aspect-ratio: 1; display: grid; place-items: center; padding: var(--space-md); background: var(--white-10); border-radius: var(--radius); }
.logo-grid__item img { width: auto; max-width: 74%; max-height: 46%; opacity: .95; }
.logo-grid__item .logo-bbc { display: flex; align-items: center; justify-content: center; gap: 6%; width: 62%; max-width: 62%; }   /* the three blocks together must read the same size as the single marks (Chiara 16 Sep) */
.logo-grid__item .logo-bbc img { width: 29%; height: auto; max-width: none; max-height: none; }
.logo-grid__item .logo-ft { max-height: 62%; }
.logo-grid__item .logo-nyt { max-width: 88%; }   /* the NYT wordmark is wide and short — it needs more width to read like the others */

.band--angled { position: relative; overflow: hidden; }
.band--angled::before { content: ''; position: absolute; inset: -20% -10%; background: repeating-linear-gradient(-20deg, rgba(255,255,255,.026) 0 150px, transparent 150px 430px); pointer-events: none; }
.band--angled > * { position: relative; z-index: 1; }
.band--angled .section-head .eyebrow { color: var(--accent); }
.band--image { position: relative; overflow: hidden; }   /* a full-bleed photo under a section's content, dimmed so copy and marks read (About 'In the press', Chiara 23 Sep) */
.band--image .band__bg { position: absolute; inset: 0; pointer-events: none; }
.band--image .band__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: .28; }
.band--image .band__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--bg) 0%, rgba(0,0,0,.35) 25%, rgba(0,0,0,.35) 75%, var(--bg) 100%); }   /* fades into the page black top and bottom */
.band--image > .wrap { position: relative; z-index: 1; }
.band--stripes { position: relative; overflow: hidden; background: var(--statement-bg); }   /* same ground as the homepage statement (Chiara 16 Sep) */
.band--stripes .band__bg { position: absolute; inset: 0; pointer-events: none; }
.band--stripes .band__bg img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.band--stripes > .wrap { position: relative; z-index: 1; }
.band--stripes .section-head .eyebrow { color: var(--accent); }
@media (max-width: 640px) { .band--stripes .band__bg img { object-position: center; } }   /* phones: stripes sit back behind the copy, as on the homepage */

.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 560px)); justify-content: center; gap: var(--col-gap); }
.ways + .form__note { margin-top: var(--space-lg); margin-inline: auto; max-width: none; text-align: center; }   /* 'Have a question before you buy?' centred under the two cards (Chiara 23 Sep) */
.way { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-xl); background: var(--bg); border-radius: var(--radius); text-align: center; align-items: center; }
.way--accent { background: var(--accent); color: var(--ink-2); }
.way--accent .eyebrow, .way--accent .way__price { color: var(--ink-2); }
.way--accent .way__note { color: rgba(0, 0, 0, .55); }
.way--outline { outline: 1px solid var(--accent); outline-offset: -1px; }
.way__price { font-size: var(--type-nav); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); }
.way__cta-wrap { margin-top: auto; padding-top: var(--space-md); display: grid; gap: var(--space-sm); justify-items: center; }
.way__note { font-size: var(--type-meta); color: var(--white-50); }
.way--solo { max-width: 860px; margin-inline: auto; }
/* price line on the investment card (Chiara 22 Sep): the number is the hero, the annual option a quiet line under it */
.price { display: flex; align-items: baseline; justify-content: center; gap: var(--space-xs); margin-top: var(--space-lg); font-family: var(--font-display); line-height: 1; }
.price__n { font-size: var(--type-display-lg); color: var(--accent); }
.price__per { font-size: var(--type-sub); color: var(--white-50); }
.price__alt { margin-top: var(--space-xs); font-size: var(--type-meta); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--white-50); }
.way .measure { margin-top: var(--space-xs); max-width: 56ch; }   /* sits closer under 'Start with 7 days free.' (Chiara 22 Sep) */   /* one card on its own, on the FAQ measure: Insider 'The investment' close (Chiara 17 Sep) */
.way--solo .actions { margin-top: 0; }   /* the price chips sit on the card's own 16px rhythm, like the price line on Work With Ben */

/* --- Insider 22: board, stats, logo wall, cities, ticks, price close ------------------------ */
.board { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }   /* minmax(0): the scrolling pill row must not stretch the column past the screen */
.board__label { font-size: var(--type-nav); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--line-dark); }
.board--center { text-align: center; }   /* Insider membership: title, labels, pills and carousel share one centre axis (Chiara 20 Sep) */
.tick-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg) var(--space-2xl); margin-top: var(--space-lg); }
.tick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); }
.tick::before, .tick-list li::before { content: ''; width: 8px; height: 8px; margin-top: .6em; border-radius: 50%; background: var(--accent); }
.tick b { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--type-sub); line-height: var(--lh-lead); }
.tick span { display: block; margin-top: var(--space-xxs); color: var(--white-50); }
.tick-list { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); text-align: left; }
.tick-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); }
.stat-row { display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-3xl); margin-top: 0; margin-bottom: var(--space-xl); }   /* leads the section now (Chiara 17 Sep) */
.stat-row + .section-head { margin-top: var(--space-2xl); }   /* air between the stats and the heading that follows (Chiara 23 Sep) */
.center .stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl); max-width: 1180px; margin-inline: auto; }   /* Chiara 23 Sep: wider row and gaps so a four-digit number beside a one-digit one still reads as evenly spaced; columns stay equal */   /* Insider member proof (Chiara 22 Sep): equal thirds so each stat centres in its own column, the headline number in the middle */
.stat__n { display: block; font-family: var(--font-display); font-size: var(--type-stat); line-height: 1; color: var(--accent); }   /* bigger (Chiara 17 Sep) */
.stat__l { display: block; margin-top: var(--space-xs); font-size: var(--type-nav); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); }   /* labels in the accent with the numbers (Chiara 17 Sep) */
.logo-wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--col-gap); margin-top: var(--space-md); }
.logo-wall .ph { aspect-ratio: 5 / 2; }
.eyebrow + .cities { margin-top: var(--space-lg); }   /* air between 'We meet in person' and the cities (Chiara 17 Sep) */
.cities { font-family: var(--font-display); font-size: var(--type-display-lg); line-height: var(--lh-heading); max-width: 26ch; }   /* bigger (Chiara 17 Sep) */
.cities + .sub { margin-top: var(--space-xl); }   /* air between the cities and 'Seven cities so far' (Chiara 17 Sep) */
.price-close .chip { color: var(--white); }

/* --- Sessions: editions, speakers, programme, gallery, Ready? ---------------------------------- */
.editions { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--col-gap); transition: grid-template-columns .6s var(--ease-out); }   /* the upcoming edition takes two thirds (Chiara 23 Sep) */
@media (hover: hover) { .editions:has(.edition--past:hover) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }   /* hover the previous edition and it grows, the upcoming one gives way; hover upcoming and the default weighting already favours it */
.edition--upcoming > img { opacity: 1; }   /* upcoming pops: the colour photo at full strength under the bottom scrim (Chiara 23 Sep) */
.edition--upcoming::after { background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 75%); }   /* lighter scrim than the shared one so the colour reads; the copy sits in the dark lower third (Chiara 23 Sep) */
.edition--past > img { opacity: .22; filter: blur(3px); transform: scale(1.04); }   /* the previous edition sits back: darker and softened; the scale hides the blur's soft edge */
.edition { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(440px, 32vw, 620px); padding: var(--space-xl); overflow: hidden; border-radius: var(--radius); background: var(--ink-2); }
.edition > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.edition::after { content: ''; position: absolute; inset: 0; background: var(--scrim-bottom); }
.edition > *:not(img) { position: relative; z-index: 1; }
.edition__status { align-self: flex-start; margin-bottom: var(--space-md); }
.edition__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--space-md) var(--space-xl); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--line-dark); }
.edition__facts dt { font-size: var(--type-nav); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--white-50); }
.edition__facts dd { margin-top: var(--space-xxs); }
.edition .cta { align-self: flex-start; margin-top: var(--space-lg); }
/* .speakers sits on a .cardrow__track: arrows, snap, gap and the hidden scrollbar all come from there (20 Sep) */
.speaker { position: relative; flex: 0 0 clamp(240px, 18.4479vw, 354px); scroll-snap-align: start; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-lg); background: var(--ink-3); }   /* the membership-card shape (Alex 23 Sep): photo fills the tile, name and org over it; tiles up ≈26% on the old 14.58vw across two asks (Chiara 23 Sep) */
.speaker .ph, .speaker img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; padding: 0; }
.speaker::after { content: ''; position: absolute; inset: 0; background: var(--scrim-bottom); pointer-events: none; }
.speaker__name { position: absolute; left: var(--space-md); right: var(--space-md); bottom: calc(var(--space-md) + 1.6em); z-index: 1; font-family: var(--font-display); font-size: var(--type-sub); line-height: var(--lh-lead); }
.speaker__org { position: absolute; left: var(--space-md); right: var(--space-md); bottom: var(--space-md); z-index: 1; font-size: var(--type-meta); color: var(--white-50); }
/* Programme (Chiara 23 Sep): a sticky side block (title, date · venue · city, register) and the running order as a list, each slot one unit: time in the accent, the session in the serif, its speakers beneath */
.programme__grid { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 66%); gap: var(--space-2xl); align-items: start; }
.programme__side { position: sticky; top: calc(var(--nav-top) + var(--nav-h) + var(--space-lg)); }
.programme__side h2 { max-width: 12ch; }
.programme__facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); margin-top: var(--space-lg); padding-top: var(--space-md); }   /* the New York card's labelled facts (Date / Venue / Where), stacked in the side block (Chiara 23 Sep: three yellow caps lines had no context) */
.programme__side .actions { margin-top: var(--space-lg); }
.slots { border-bottom: 1px solid var(--line-dark); }
.slot { display: grid; grid-template-columns: minmax(72px, .16fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; padding-block: var(--space-md); border-top: 1px solid var(--line-dark); }
.slot__t { font-family: var(--font-display); font-size: var(--type-sub); line-height: var(--lh-lead); color: var(--accent); }
.slot__what { font-family: var(--font-display); font-size: var(--type-sub); line-height: var(--lh-lead); }
.slot__who { margin-top: var(--space-xxs); font-size: var(--type-meta); color: var(--white-50); }
.slot__who span { display: inline; }
.slot__who span + span::before { content: ' · '; }   /* speakers run on one line under the session */

/* --- Learn: video, modules carousel, experts, pricing ------------------------------------------- */
.video { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; }
.video__play { position: absolute; width: clamp(64px, 4.6875vw, 90px); aspect-ratio: 1; border-radius: 50%; background: var(--accent); }
.video__play::after { content: ''; position: absolute; inset: 32% 30% 32% 38%; background: var(--ink-2); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.video__label { position: absolute; bottom: var(--space-md); left: var(--space-md); right: var(--space-md); }
/* Modules band (Alex/Chiara 23 Sep): a taller full-bleed image with the heading and a short lead at its foot; the modules follow as their own section */
.modband { position: relative; height: clamp(520px, 72svh, 820px); overflow: hidden; display: flex; align-items: flex-end; background: var(--bg); }
.modband__media { position: absolute; inset: 0; overflow: hidden; }
.modband__media img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; will-change: transform; }   /* 24% slack for the parallax */
.modband__scrim { position: absolute; inset: 0; background: var(--scrim-bottom); }
.modband__copy { position: relative; z-index: 1; padding-bottom: var(--space-xl); }
.modband__copy h2 { max-width: 20ch; }
.modband__copy .lead { margin-top: var(--space-xs); max-width: clamp(320px, 52vw, 1000px); font-size: var(--type-lead-page); }
.modules__nav { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); list-style: none; padding: 0; }   /* the six groups as links: click through to any group (Chiara 23 Sep) */
.modules__link { display: inline-flex; align-items: center; min-height: var(--cta-h); padding-inline: var(--cta-pad-x); border: 1px solid var(--line-dark); border-radius: var(--radius-pill); background: none; color: var(--white); font-size: var(--type-nav); letter-spacing: var(--track-cta); text-transform: uppercase; cursor: pointer; transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.modules__link:hover { border-color: var(--white-50); }
.modules__link.is-active { background: var(--accent); border-color: var(--accent); color: var(--ink-2); }
.modules__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.section-head--wide h2 { max-width: none; }   /* 'Built with the best in the business.' on one line (Chiara 23 Sep) */
.modules__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-lg); }
.modgroup { display: none; }
.modgroup[data-active] { display: block; }
.modgroup__title { margin-bottom: var(--space-md); font-family: var(--font-display); font-size: var(--type-sub); line-height: var(--lh-lead); color: var(--accent); }
.mod { display: grid; grid-template-columns: minmax(90px, .2fr) minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-md); border-top: 1px solid var(--line-dark); }
.mod__n { font-size: var(--type-nav); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--white-50); }
.mod b { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--type-sub); line-height: var(--lh-lead); }
.mod span { display: block; margin-top: var(--space-xxs); color: var(--white-50); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.experts { border-bottom: 1px solid var(--line-dark); margin-top: var(--space-xl); }
.expert { display: grid; grid-template-columns: clamp(110px, 9.375vw, 180px) minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-xl); border-top: 1px solid var(--line-dark); }
.expert .ph { aspect-ratio: 1; }
.expert__role { margin-top: var(--space-xxs); font-size: var(--type-nav); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); }
.expert p:not(.expert__role) { margin-top: var(--space-sm); max-width: 68ch; }
.quote-card { padding: var(--space-xl); background: var(--ink-2); border-radius: var(--radius); }
.quote-card cite { display: block; margin-top: var(--space-md); font-style: normal; font-size: var(--type-meta); color: var(--white-50); }
.panel { padding: var(--space-xl); background: var(--ink-2); border-radius: var(--radius); }
.panel .expert__role { margin-bottom: var(--space-sm); }
.panel h3 + p { margin-top: var(--space-sm); }

/* --- About: credentials, media row -------------------------------------------------------------- */
.creds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); }
.cred { padding-top: var(--space-md); border-top: 1px solid var(--accent); }
.cred b { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--type-sub); line-height: var(--lh-lead); }
.cred span { display: block; margin-top: var(--space-xs); color: var(--white-50); }
.logo-row { display: flex; flex-wrap: wrap; gap: var(--col-gap); margin-top: var(--space-xl); }
.logo-row li { display: flex; align-items: center; justify-content: center; width: clamp(110px, 7.8125vw, 150px); aspect-ratio: 1; border-radius: var(--radius); background: var(--white-10); }
.logo-row img { width: 62%; max-height: 40%; object-fit: contain; }
.logo-row .ph { width: 100%; height: 100%; background: none; padding: var(--space-xs); }

/* --- Contact ------------------------------------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-3xl); align-items: start; }
.contact-aside h3 { font-size: var(--type-sub); }
.contact-aside h3 + * { margin-top: var(--space-sm); }
.contact-aside * + h3 { margin-top: var(--space-xl); }
.contact-aside a { display: block; line-height: 1.9; }
.contact-aside a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* --- responsive: layout flips only ----------------------------------------------------------------- */
@media (max-width: 1024px) {
  .split, .split--text-wide, .split--media-wide, .contact-grid, .editions, .ways { grid-template-columns: minmax(0, 1fr); }
  .programme__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .programme__side { position: static; }
  .tick-grid { grid-template-columns: minmax(0, 1fr); }
  .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-hero--portrait .page-hero__media { width: 100%; }
  .page-hero--portrait .page-hero__scrim { background: var(--scrim-bottom); }
  .split__media { order: -1; }
  .lede-split__head, .lede-split__media, .lede-split__body { grid-column: 1 / -1; }   /* one column: statement, image, copy */
  .lede-split { row-gap: var(--space-xl); }
  .lede-split__body { max-width: none; justify-self: stretch; }   /* full column, not a right-aligned 46ch block */
}
@media (max-width: 640px) {
  .page-hero .lead { max-width: 100%; }
  .inset { aspect-ratio: 4 / 3; }   /* phones: taller frame so the image is not a sliver */
  .way--solo .actions { justify-content: flex-start; }   /* phones: chips follow the card's left alignment */   /* phones: the lead fills the column rather than stopping at the clamp floor */
  .page-hero h1 br { display: none; }   /* phones: let the headline wrap naturally */
  .form__row, .grid-2, .grid-3, .creds { grid-template-columns: minmax(0, 1fr); }
  .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot, .mod { grid-template-columns: minmax(0, 1fr); gap: var(--space-xxs); }
  .expert { grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-md); }
  .edition__facts { grid-template-columns: minmax(0, 1fr); }
  .form .cta, .way .cta, .actions .cta { width: 100%; align-self: stretch; justify-self: stretch; }
  .actions .chip { width: 100%; justify-content: center; }
  .modband__copy h2, .modband__copy .lead { max-width: none; }
  .center .stat-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }   /* phones: stats stack; three 74px columns could not hold '100+' at the type floor (Chiara 23 Sep) */   /* phones: heading and lead fill the column (Chiara 23 Sep) */   /* phones: the price chip spans the column like the button above it (Chiara 23 Sep) */
  .way { padding: var(--space-lg); }
}

/* --- Work With Ben responsive (Alex 3466:782) ------------------------------------------------- */
@media (max-width: 960px) {
  .howwork { grid-template-columns: 1fr; gap: var(--space-lg); }
  .offer__panel { grid-template-columns: 1fr; }
  .offer__panel > *, .offer__media { grid-column: 1; max-width: none; }
  .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .logo-grid:not(.logo-grid--5):not(.logo-grid--6) .logo-grid__item:nth-child(n+4):nth-child(-n+9), .logo-grid:not(.logo-grid--5):not(.logo-grid--6) .logo-grid__item:nth-child(n+13) { display: none; }   /* Work with Ben's nine-up only (it repeats marks). It was also hiding tiles 4+ on the five-up grids: About lost FT/NYT/CNN/BBC and Insider seven member logos on phones (mobile audit 23 Sep) */   /* small screens: one of each mark, two rows of three */
  .ways { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .offer__row { grid-template-columns: minmax(44px, .12fr) minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-md); }
  .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* phones: three across, nine tiles */
  .way { padding: var(--space-lg); }
  .way .cta { width: 100%; }
}

/* the chips radios are visually hidden, but a bare input still claims full width and pushes the page sideways */
.chips input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }

@media (min-width: 961px) and (max-width: 1240px) {
  .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* narrow desktops only — phones and tablets stack (fixed 16 Sep) */
}

#offers { padding-top: 0; }   /* Alex: the first divider sits ~90 under the intro copy */
.section--intro { padding-block: var(--space-3xl) var(--space-2xl); }   /* more air above and below the intro (Chiara 16 Sep) */
@media (max-width: 960px) {
  .offer { grid-template-columns: minmax(0, 1fr); }
  .offer__row, .offer__panel { grid-column: 1; grid-row: auto; }
  .offer__panel { padding-block: 0 var(--space-xl); }
}

/* Work With Ben enquiry: centred, and the fields sit in a panel so the block reads as one card (Chiara 16 Sep) */
.form-block .section-head { text-align: center; }
.form-block .section-head h2 { margin-inline: auto; }
.form-block .form { margin-inline: auto; padding: 0; background: none; border: 0; max-width: 560px; gap: var(--space-sm); }   /* no box, narrower fields (Chiara 16 Sep) */
.form-block textarea { min-height: 110px; }
.form-block .section-head { margin-bottom: var(--space-xl); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xs); }
.form-block textarea { border-radius: var(--radius-pill); }   /* same corners as the Name field (Chiara 16 Sep) */
.form-block fieldset.field { margin-top: var(--space-md); }   /* air above the options label, between the original and the wider gap (Chiara 16 Sep) */
.form-block legend { margin-bottom: var(--space-md); }
.form-block textarea { padding-top: var(--space-md); }   /* the first line sits further down the box (Chiara 16 Sep) */
.form input, .form textarea { font-weight: 400; }   /* field text reads regular, not bold (Chiara 16 Sep) */
.form input::placeholder, .form textarea::placeholder { font-weight: 400; }
@media (max-width: 640px) { .form__foot { flex-direction: column; gap: var(--space-md); } .form__foot .cta { width: 100%; } }
.form-block .chips { justify-content: center; }
.form-block .form > .cta { justify-self: center; min-width: 220px; }
.form-block .form__note, .form-block .form__status, .form-block legend { text-align: center; }
.form-block .form__status:not(:empty) { margin-top: var(--space-xs); color: var(--accent); }
.form-block label .req { color: var(--accent); }
.form-block input:focus-visible, .form-block textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Work With Ben on phones: homepage rhythm — one screen hero, tighter sections, full-width actions (Chiara 16 Sep) */
@media (max-width: 640px) {
  #ways, .form-block, .testimonials { padding-block: var(--space-2xl); }
  .howwork h2, .band--angled h2, .band--stripes h2, .form-block h2 { font-size: var(--type-display); }
  .way { padding: var(--space-lg); text-align: left; align-items: stretch; }
  .way .price { justify-content: flex-start; }   /* the price line follows the card's left alignment on phones */
  .way__cta-wrap { justify-items: stretch; }
  .way .cta, .way--accent .cta { width: 100%; }
  .offer__row { padding-block: var(--space-lg); }
  .offer__panel { padding-block: 0 var(--space-lg); }
}


/* --- Work with Ben enquiry: Alex's split layout (Chiara 16 Sep, ref revelatio.studio/contact).
   Heading left, underline rows right. Scoped to .form-split so the shared .form-block
   (Sessions) keeps its centred pill treatment. --- */
.form-split .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
.form-split .section-head { text-align: left; margin: 0; }
.form-split { padding-block-start: var(--space-2xl); }   /* less air above the form (Chiara 16 Sep) */
/* contact's tighter top is now covered by .page-hero + .section, so the page-scoped override is gone (it had equal specificity and was winning) */
.form-split .section-head h2 { margin: 0; max-width: none; font-size: var(--type-display-wide); }   /* holds one line */
.form-split .form__note { font-size: var(--type-fine); max-width: none; }
.form-split .form { display: grid; gap: 0; max-width: none; margin: 0; }
.form-split .field { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); align-items: center; gap: var(--space-md); padding-block: var(--space-md); border-bottom: 1px solid var(--line-dark); transition: border-color var(--dur) var(--ease-out); }
.form-split .field > label { font-family: var(--font-display); font-size: var(--type-lead-page); letter-spacing: 0; text-transform: none; color: var(--white); }
.form-split .field input, .form-split .field textarea { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; text-align: right; font-size: max(16px, var(--type-meta)); }
.form-split .field input:focus, .form-split .field textarea:focus { outline: none; }
.form-split .field select { min-height: 0; padding: 0 var(--space-lg) 0 0; border: 0; border-radius: 0; background-color: transparent; color: var(--white); text-align: right; text-align-last: right; font-size: max(16px, var(--type-meta)); background-position: right 3px 50%, right 9px 50%; }
.form-split .field select:focus { outline: none; }
.form-split .field:focus-within { border-bottom-color: var(--accent); }
.form-split .field textarea { min-height: 96px; padding-top: var(--space-xs); resize: vertical; line-height: calc(var(--type-lead-page) * var(--lh-body)); }   /* same line box as the label so the first line sits on its line (Chiara 16 Sep) */
.form-split .field--top { align-items: start; }                                          /* multi-line rows align to the label, not the row centre */
.form-split .field--top textarea { padding-top: 0; }
.form-split .form__foot { justify-content: flex-start; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-lg); }   /* button on the field edge, note beside it (Chiara 16 Sep) */
.form-split .form__note { text-align: left; margin: 0; flex: 1 1 300px; max-width: none; }   /* 52ch was forcing a wrap regardless of the room beside the button (Chiara 16 Sep) */
.form-split .form__status { text-align: left; }
@media (min-width: 961px) { .form-split .wrap.contact-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-3xl); } }   /* contact keeps its form + details proportions on desktop; below 961 it must collapse to one column or the page overflows (Chiara 16 Sep) */
@media (max-width: 960px) { .form-split .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }
@media (max-width: 640px) {
  .form-split .field { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding-block: var(--space-sm); }
  .form-split .field input, .form-split .field textarea { text-align: left; }
  .form-split .form__foot { display: block; }                    /* flex refused to wrap here and pushed the note off-screen (366px of overflow) */
  .form-split .form__note { margin-top: var(--space-sm); }
}

/* --- Learn intro video: pins and grows to full bleed and height (Chiara 16 Sep) --- */
.videoreveal { position: relative; height: 300vh; }   /* one screen to grow, one to hold at full bleed, then release (Chiara 16 Sep) */
.videoreveal__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.videoreveal__frame { width: 100%; height: 100%; transform: scale(.62); transform-origin: 50% 50%; border-radius: var(--radius); overflow: hidden; will-change: transform; }
.videoreveal .video { width: 100%; height: 100%; margin: 0; border-radius: 0; aspect-ratio: auto; }
.videoreveal__frame img, .videoreveal__frame picture { display: block; width: 100%; height: 100%; object-fit: cover; }   /* the same reveal for a still (Insider summit photo, Chiara 22 Sep) */
@media (max-width: 640px) { .videoreveal { height: 240vh; } .videoreveal__frame { transform: scale(.82); } }
@media (prefers-reduced-motion: reduce) { .videoreveal { height: auto; } .videoreveal__pin { position: static; height: 80svh; } .videoreveal__frame { transform: none; border-radius: 0; } }

.whofor { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 56%); gap: 0 var(--col-gap); align-items: start; }   /* 44/56 matches the intro block above, and gives the display-size label room to hold two lines (Chiara 16 Sep) */
.whofor .eyebrow { grid-column: 1; font-family: var(--font-display); font-size: var(--type-display); text-transform: none; letter-spacing: 0; color: var(--white); text-align: left; max-width: 24ch; line-height: var(--lh-display); }   /* Chiara 16 Sep: the header font, left aligned, two lines in the wider column, and the display line-height so it matches the section headings */

.video--poster { overflow: hidden; }   /* placeholder still behind the play button (Chiara 16 Sep) */
.video--poster picture, .video--poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video--poster::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); pointer-events: none; }
.video--poster .video__play, .video--poster .video__label { z-index: 1; }
.video__play { border: 0; padding: 0; cursor: pointer; z-index: 1; }
.video--film { overflow: hidden; }   /* the film itself is the cover: its own first frame as poster, play button on top, no scrim (Chiara 23 Sep) */
.video--film video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; object-fit: contain; }   /* contain, not cover: the cover is artwork with type near the edges (Charlotte's 'Day One: what to expect?', 2 Oct) and must never be cropped */
.video--playing .video__play, .video--playing .video__label { display: none; }
.video--playing video { object-fit: contain; }   /* once it plays: contain, the captions are burned in and must stay in frame */

.imageband { height: 75svh; min-height: 480px; }   /* full-bleed band at three quarters of the screen, copy lower left (Chiara 16 Sep) */
.imageband .page-hero__in { padding-left: var(--gutter); padding-bottom: var(--space-sm); }   /* aligned with the carousel below (Chiara 16 Sep) */
.imageband h2 { max-width: 20ch; }
.imageband .lead { margin-top: var(--space-md); max-width: clamp(320px, 52vw, 1000px); font-size: var(--type-lead-page); }   /* Chiara 16 Sep: longer measure, was 41.6667vw/800 */

.imageband .page-hero__media img { top: -19%; height: 138%; }   /* slack must exceed the parallax travel across the band's whole time on screen, or an edge shows (Chiara 16 Sep) */

.page--learn .split--top .section-head h2 { font-size: var(--type-h2); }   /* Chiara 16 Sep: smaller than the section headings, and it now holds one line inside the even column. Scoped to Learn so Insider keeps its size */

/* --- Modules pin: holds a screen and advances a group at a time (Chiara 16 Sep) --- */
.lookinside { zoom: .9; }   /* Chiara 16 Sep: whole block down 10% */

/* --- band + modules share one pinned screen (Chiara 16 Sep) --- */

.section--tight-bottom { padding-block-end: var(--space-xl); }   /* less air before the video (Chiara 16 Sep) */
.page--learn .split--top .eyebrow { color: var(--accent); }      /* 'This course was built for you if you are' in the accent (Chiara 16 Sep) */

/* Image backs the copy only; the modules sit on black (Chiara 16 Sep) */

/* --- Member logos on Insider: five a row, real marks, no repeats (Chiara 17 Sep) --- */
.logo-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1180px; margin-inline: auto; }
.section-head + .pillcards, .center .pillcards { text-align: left; }
.eyebrow--after { margin-top: var(--space-2xl); margin-bottom: var(--space-md); }   /* a label between blocks in one section (About: 'Coverage secured in' over the logos) */
.section-head--after { margin-top: var(--space-3xl); }   /* a second head inside a section (About: 'In the press' after the awards) */
.section-head--after .measure { margin-inline: auto; }   /* Insider member logos: a narrower, centred grid (Chiara 22 Sep) */
.logo-grid--5 .logo-grid__item { aspect-ratio: auto; height: var(--logo-tile-h); }   /* the 2:1 tile height of the 1180 grid, fixed rather than a ratio */   /* a fixed height, not a ratio: the marks' percentage height caps need it, or a round mark grows its tile */   /* Insider member logos (Chiara 22 Sep): shorter tiles, smaller marks; the square nine-up on Work with Ben is unchanged */
.logo-grid--5 .logo-grid__item img { max-width: 52%; max-height: calc(var(--logo-tile-h) * .54); }   /* a px cap, not a percentage: with a % max-height Chromium sized the grid row from the mark's unclamped height and the round Padel Browser mark sat low in its tile (22 Sep) */
.logo-grid--5 .logo-grid__item .logo-wide { max-width: 64%; }
.logo-grid--5 .logo-grid__item img.logo-nyt { width: 76%; max-width: 76%; max-height: none; }   /* 72 → 76: 5% up (Chiara 28 Sep) */   /* the SVG is only 114px wide at its natural size, so it needs a width, not just a cap, to read the same weight as the other marks */   /* the NYT wordmark is wide and short: it needs the width to read the same weight as the others (Chiara 23 Sep) */
.logo-grid__item .logo-wide { max-width: 82%; }   /* the 5:1 and 6:1 wordmarks need more width to read the same size as the square marks */
.logo-grid__item > .ph { width: 100%; height: 100%; padding: var(--space-sm); text-align: center; font-size: var(--type-nav); letter-spacing: var(--track-caps); }   /* a text placeholder centres in its tile like a mark (About award logos, Chiara 23 Sep) */
.logo-grid--press { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1180px; }   /* About: nine press marks as five then four, centred (Charlotte 28 Sep: Tatler, ITV, LBC, SBJ in; the award marks moved up to their cards) */
@media (min-width: 961px) { .logo-grid--press .logo-grid__item:nth-child(n+6) { transform: translateX(calc(50% + var(--col-gap) / 2)); } }
.logo-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1180px; margin-inline: auto; }   /* Work with Ben clients (Charlotte's files, 28 Sep): eleven marks as six then five, centred; the nine-up was for the repeated stand-ins */
.logo-grid--6 .logo-grid__item { aspect-ratio: auto; height: var(--logo-tile-h); }
.logo-grid--6 .logo-grid__item img { max-width: 64%; max-height: calc(var(--logo-tile-h) * .62); }
.logo-grid--6 .logo-grid__item .logo-wide { max-width: 76%; }
@media (min-width: 961px) { .logo-grid--6 .logo-grid__item:nth-child(n+7) { transform: translateX(calc(50% + var(--col-gap) / 2)); } }   /* desktop only: the three-tile second row shifts half a tile plus half a gap to centre under the four; on the 3-column phone grid the shift broke the rows (mobile audit 23 Sep) */
.logo-grid__item--text { font-size: var(--type-nav); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--white-50); text-align: center; }
@media (max-width: 960px) { .logo-grid--5, .logo-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .logo-grid--5 .logo-grid__item, .logo-grid--6 .logo-grid__item { display: grid; } }

/* --- Membership pills (Chiara 17 Sep, ref apple.com/ipad-pro highlights): one row, active fills, content swaps in place --- */
/* Feature cards (Alex 22 Sep, ref apple.com/ipad-pro 'Why Apple is the best place to shop iPad'): off-black tile, soft corners, a
   line icon in the accent top-left, title, copy; left-aligned inside. One card for both membership rows, a third of the row wide */
.pillcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); justify-content: center; margin-top: var(--space-lg); }
.pillcards--2 { grid-template-columns: repeat(2, calc((100% - 2 * var(--space-md)) / 3)); }
.pillcards + .pillcards { margin-top: var(--space-md); }
.pillcards--flush .pillcard__body { min-height: 0; }   /* cards with one-line copy (About): no three-line reserve, so padding is equal above the icon and below the copy (Chiara 23 Sep) */
.pillcards--flush .pillcard { text-align: center; align-items: center; }   /* short claims under a centred head: centred (Chiara 23 Sep); the descriptive cards stay left-aligned per Alex's reference */
.pillcards--flush .pillcard__title { text-wrap: balance; }   /* the award names hold one line where they fit; balanced when they must wrap (narrow screens) */   /* a second row of cards keeps the grid's own gap (About: three then two centred) */   /* two cards at the three-up width, centred as a pair under the centred label */
.pillcard { display: flex; flex-direction: column; padding: var(--space-lg); background: var(--ink-3); border-radius: var(--radius-lg); text-align: left; }
.pillcard__icon { display: block; width: 40px; height: 40px; color: var(--accent); }   /* no push to the bottom: icon and title start at the same position in every card (Chiara 22 Sep) */
.pillcard__icon svg { width: 100%; height: 100%; }
.pillcard__logo { display: block; height: calc(var(--logo-tile-h) * .6); width: auto; max-width: 70%; object-fit: contain; }   /* an award mark heading its card (About): the press tiles' height family, ~66px on desktop, 46px on phones; the card carries one line of text so the mark leads (Chiara 28 Sep) */
.pillcard__title { margin-top: var(--space-md); font-family: var(--font-display); font-weight: 400; font-size: var(--type-lead-page); line-height: var(--lh-lead); }   /* lead-page, not sub: on phones --type-sub is 16px, the same as the card copy, and the hierarchy flattened (mobile audit 23 Sep) */
.pillcard__body { margin-top: var(--space-sm); min-height: calc(3 * var(--lh-body) * 1em); color: var(--white-50); }   /* the tile is sized for three copy lines, padding equal top and bottom (Chiara 22 Sep); longer copy grows the row */
/* Card row (Alex's Apple reference, 'Why Apple is the best place to shop iPad'): every card's title and copy stays visible; the row moves sideways by arrows, swipe or keyboard */
.cardrow { margin-top: var(--space-lg); }
.cardrow__track { display: flex; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cardrow__track::-webkit-scrollbar { display: none; }
.cardrow__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cardrow__track { align-items: stretch; }
.cardrow__track > .pillcard { flex: 0 0 calc((100% - 2 * var(--space-md)) / 3); scroll-snap-align: start; }   /* three up on desktop */
.cardrow__foot { display: flex; justify-content: center; margin-top: var(--space-lg); }
.cardrow__foot--split { justify-content: space-between; align-items: center; gap: var(--space-md); }   /* an action on the left, arrows on the right (Sessions 'In the room') */
@media (max-width: 960px) {
  .pillcards, .pillcards--2 { grid-template-columns: minmax(0, 1fr); }
  .cardrow__track > .pillcard { flex-basis: calc((100% - var(--space-md)) / 2); }   /* two up on tablets */
}
@media (max-width: 640px) {
  .cardrow__track > .pillcard { flex-basis: calc(100% - var(--space-lg)); }   /* phones: one card, the next one peeks */
}

/* --- mobile pass (23 Sep audit): last in the file so these layout flips win over the desktop rules above --- */
@media (max-width: 640px) {
  .page-hero--tall .page-hero__in { padding-left: var(--gutter); }   /* phones: hero copy on the page gutter like every other section; the desktop inset read as a stray margin (mobile audit 23 Sep) */
  .logo-grid--5 .logo-grid__item img { max-width: 72%; }   /* phones: marks take more of the small tile so the award logos read */
  .edition--past > img { opacity: .45; filter: none; transform: none; }   /* phones: the previous edition is a short card, and at .22 + blur it read as an empty black box */
}

/* Legal pages (Privacy Policy, Terms of Use): one text column under the nav, no hero, no newsletter band. Client-supplied copy (Charlotte, 28 Sep) */
.legal { padding-block: calc(var(--nav-top) + var(--nav-h) + var(--space-2xl)) var(--space-3xl); }   /* centred single column, close under the nav (ref revelatio.studio/privacy-note, Chiara 28 Sep) */
.legal__head { max-width: 78ch; margin-inline: auto; margin-bottom: var(--space-xl); }
.legal__head h1 { margin-top: var(--space-sm); }
.legal__body { max-width: 78ch; margin-inline: auto; }
.legal__body h2 { margin-top: var(--space-xl); margin-bottom: var(--space-sm); font-size: var(--type-h3); line-height: var(--lh-heading); }
.legal__body h3 { margin-top: var(--space-lg); margin-bottom: var(--space-xs); font-family: var(--font-body); font-size: var(--type-body); font-weight: 600; }
.legal__body p + p, .legal__body p + ul, .legal__body ul + p, .legal__body address { margin-top: var(--space-sm); }
.legal__body ul { list-style: disc; padding-left: 1.25em; }
.legal__body li + li { margin-top: var(--space-xs); }
.legal__body a:not(.cta) { color: var(--accent); border-bottom: 1px solid currentColor; }   /* :not(.cta): the 404 page puts real buttons in a legal body */
.legal__body address { font-style: normal; }
.legal__also { max-width: 78ch; margin-inline: auto; margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--line-dark); font-size: var(--type-meta); color: var(--white-50); }
.legal__also a { color: var(--white); border-bottom: 1px solid currentColor; }

/* Sessions 'Previously · London': the line that stopped the room, under the body (Charlotte's London facts, 28 Sep) */
.insider__quote { margin-top: var(--space-lg); max-width: 26ch; text-shadow: 0 1px 12px rgba(0,0,0,.7); }   /* same lift off the photos as the body */
.insider__cite { display: block; margin-top: var(--space-xs); font-family: var(--font-body); font-size: var(--type-meta); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--white-50); }

/* Insider 22 imagery (Charlotte's assets, 28 Sep) */
.slide figcaption { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-xl); }   /* portrait + name; the cite's own top margin moves up to the caption */
.slide figcaption cite { margin-top: 0; }
.slide__photo { flex: 0 0 auto; width: calc(var(--space-md) * 2); height: calc(var(--space-md) * 2); border-radius: 50%; object-fit: cover; }
/* Insider screenshots (the monthly call, the Circle hub): side by side on desktop, stacked on phones; shown whole, never cropped (Charlotte 30 Sep) */
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); margin-top: var(--space-2xl); }
.shots figure { margin: 0; }
.shots img { display: block; width: 100%; aspect-ratio: 1600 / 907; object-fit: cover; border-radius: var(--radius); }   /* Charlotte's laptop mockups (2 Oct), both the same shape */
.shots figcaption { margin-top: var(--space-sm); font-size: var(--type-meta); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--white-50); }
@media (max-width: 640px) { .shots { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } }

/* Learn pricing: founding-member offer line, hidden until launch day (Charlotte 28 Sep: code DAYONE, 22% off, 12–19 Oct) */
.way__offer { margin-top: var(--space-sm); font-size: var(--type-meta); letter-spacing: var(--track-nav); }
.way__offer strong { font-weight: 600; }

/* --- Charlotte's mobile notes, 28 Sep --- */
@media (max-width: 640px) {
  .way__note { text-align: center; }                                                   /* 'Most people start here' centred under the full-width button (WWB + Learn) */
  .actions .chip { flex-wrap: wrap; justify-content: center; text-align: center; padding-block: var(--space-xs); line-height: 1.5; }   /* the trial chip: centred, 'cancel anytime' on its own line */
  .phone-hide { display: none; }
  .logo-grid--5 .logo-grid__item img { max-width: 84%; max-height: calc(var(--logo-tile-h) * .64); }   /* member + press marks fill the small tiles (was 72% / .54) */
  .logo-grid--5 .logo-grid__item .logo-wide { max-width: 90%; }
  .logo-grid--5 .logo-grid__item--text { display: none; }                             /* 'and many more' tile off on phones */
}

/* Sessions editions (evergreen, 29 Sep): programme list inside the NYC panel */
.edition-prog { margin-top: var(--space-md); border-top: 1px solid var(--line-dark); }
.edition-prog li { padding-block: var(--space-sm); border-bottom: 1px solid var(--line-dark); }
.edition-prog__t { display: inline-block; min-width: 5ch; color: var(--accent); }
.edition-prog__who { display: block; margin-top: var(--space-xxs); font-size: var(--type-meta); color: var(--white-50); }
p.edition-prog__who { margin-top: var(--space-sm); }
.next-edition h2 { margin-top: var(--space-sm); }
.next-edition .sub { margin-top: var(--space-lg); }
.next-edition .sub + .measure { margin-top: var(--space-md); }
.next-edition .actions { margin-top: var(--space-xl); }

@media (max-width: 640px) { .insider--tall .insider__pin::after { background: var(--scrim-spot-phone-tall); } }   /* the London copy is twice the Insider strip's, so its spotlight is taller (mobile pass 29 Sep) */

/* Logo grids, Charlotte 30 Sep ("still small", Padel Browser + FT off-centre on phones): the tile's 24px padding left ~28px of
   height on a phone tile, so tall marks overflowed downward, and wordmarks filled only half the tile. Less padding, bigger caps. */
.logo-grid__item { padding: var(--space-sm); }
.logo-grid--5 .logo-grid__item img { max-width: 62%; max-height: calc(var(--logo-tile-h) * .6); }
.logo-grid--5 .logo-grid__item .logo-wide { max-width: 78%; }
.logo-grid--6 .logo-grid__item img { max-width: 72%; max-height: calc(var(--logo-tile-h) * .64); }
.logo-grid--6 .logo-grid__item .logo-wide { max-width: 84%; }
@media (max-width: 640px) {
  .logo-grid__item { padding: var(--space-xs); }
  .logo-grid--5 .logo-grid__item img, .logo-grid--6 .logo-grid__item img { max-width: 86%; max-height: calc(var(--logo-tile-h) * .66); }
  .logo-grid--5 .logo-grid__item .logo-wide, .logo-grid--6 .logo-grid__item .logo-wide { max-width: 92%; }
}

/* Learn 'A look inside': Lewis's and Charlotte's course mockups (2 Oct), 4:5 with a caption */
.lookinside__grid figure { margin: 0; }
.lookinside__grid img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.lookinside__grid figcaption { margin-top: var(--space-sm); font-size: var(--type-meta); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--white-50); }

/* Learn guestlist form (until 12 Oct): the newsletter tray on the dark pricing band, centred */
.nl-form--guestlist { max-width: 760px; margin: var(--space-2xl) auto 0; padding-top: 0; text-align: center; }
.nl-form--guestlist .eyebrow { margin-bottom: var(--space-sm); color: var(--accent); }
.nl-form--guestlist .nl-form__tray { margin-inline: auto; background: var(--white-10); box-shadow: none; }
.nl-form--guestlist input { border-color: var(--line-dark); background: var(--white-10); color: var(--white); }
.nl-form--guestlist input::placeholder { color: var(--white-50); }
.nl-form--guestlist .nl-form__trust, .nl-form--guestlist .nl-form__status { color: var(--white-50); }

/* NYC recap (Charlotte, 4 Oct): the four conversations as a ruled list, prose not times */
.edition-prog--recap li { line-height: var(--lh-body); }
.edition-prog--recap strong { color: var(--accent); font-weight: 500; }

/* Day One founding-member banner in the Learn hero (shown by the launch timer, 12–19 Oct) */
.offer-banner { display: inline-block; margin-bottom: var(--space-md); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--accent); color: var(--ink-2); font-size: var(--type-nav); letter-spacing: var(--track-cta); text-transform: uppercase; }
.offer-banner[hidden], [data-prelaunch][hidden], [data-postlaunch][hidden] { display: none; }
.offer-banner strong { font-weight: 700; }

/* Sessions UX rework (5 Oct): numbers band, open NYC recap with a gallery, two-path close */
.stat-row--center { justify-content: center; margin-bottom: 0; text-align: center; }
.recap-gallery { margin-top: 0; }
.recap-gallery .cardrow__track > .recap-gallery__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.recap-gallery__slide img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); }
.cardrow__track:has(> :only-child) + .cardrow__foot { display: none; }   /* one photo: no arrows */
.nyc-recap__story { max-width: 78ch; margin-top: var(--space-xl); }
.nyc-recap__story > p + p { margin-top: var(--space-sm); }
.next-edition__paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); max-width: 1180px; margin-top: var(--space-2xl); text-align: left; }
.next-path { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-xl); border: 1px solid var(--line-dark); border-radius: var(--radius-lg); }
.next-path .eyebrow { color: var(--accent); }
.next-path__lead { font-family: var(--font-display); font-size: var(--type-lead-page); line-height: var(--lh-lead); }
.next-path .cta { align-self: flex-start; margin-top: auto; }
.nl-form--plain { margin: auto 0 0; max-width: none; text-align: left; }
.nl-form--plain .nl-form__tray { margin-inline: 0; }
@media (max-width: 960px) { .next-edition__paths { grid-template-columns: minmax(0, 1fr); } }

.recap-gallery { max-width: 1180px; margin-inline: auto; }   /* not full-bleed: a 1180 frame keeps the photo inside one screen (5 Oct) */
.nyc-recap .section-head, .nyc-recap__story { max-width: 1180px; margin-inline: auto; }
.recap-quote { margin-top: var(--space-lg); max-width: 30ch; }
.nyc-recap + .nyc-recap { padding-top: 0; }
/* Sessions 'Attend' card: no pill tray (it wrapped into a blob in the narrow card, Chiara 5 Oct): stacked fields, then the button */
.nl-form--plain .nl-form__tray { flex-direction: column; align-items: stretch; gap: var(--space-xs); padding: 0; background: none; box-shadow: none; border-radius: 0; max-width: none; }
.nl-form--plain .nl-form__tray input { flex: 0 0 auto; width: 100%; }
.nl-form--plain .nl-form__tray .cta { align-self: flex-start; margin-top: var(--space-xs); }

/* NYC recap block sits tight under its strip with its own small heading (Chiara 5 Oct) */
#nyc-conversations { padding-top: var(--space-xl); }
.nyc-recap__title { margin: var(--space-xs) 0 var(--space-md); font-size: var(--type-h3); }

/* --- Chiara's phone notes, 5 Oct --- */
@media (max-width: 640px) {
  :root { --space-hero-gap: var(--space-xl); }                                    /* less dead air under every inner-page hero */
  .section--intro { padding-bottom: var(--space-lg); }                           /* and under the intro block before the next section */
  .howwork h2 { max-width: none; text-wrap: balance; }                           /* 'Figuring it out alone?' on one line */
  .section-head h2 { max-width: none; text-wrap: balance; }   /* section titles a size down and full width ('What your membership includes.' was three lines) */
  .way { padding: var(--space-xl) var(--space-lg); text-align: center; align-items: center; }   /* Work with Ben / Learn cards: centred, more air top and bottom */
  .way p { line-height: 1.45; }
  .way .price { justify-content: center; }
}
@media (max-width: 640px) {
  .center .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }   /* phones: the three stats side by side again, at the display size, instead of a tall stack (Chiara 5 Oct) */
  .center .stat-row .stat__n { font-size: var(--type-display); }
  .center .stat-row .stat__l { letter-spacing: var(--track-nav); }
  .section:has(> .wrap > .stat-row) { padding-top: var(--space-xl); }               /* less dead air above the stats */
}
@media (max-width: 640px) {
  :root { --space-3xl: var(--space-2xl); }                                         /* phones: the biggest section step 96 → 64, so stacked section paddings stop reading as dead air (Chiara 5 Oct) */
  .insider + .testimonials, .insider + .section { padding-top: var(--space-md); }   /* after a pinned photo strip: its own empty lower half already gives the air */
}
@media (max-width: 640px) {   /* Learn video on phones: a plain landscape 16:9 player, no tall pinned frame (the cover floated in blurred filler, Chiara 5 Oct) */
  .videoreveal { height: auto; padding-inline: var(--gutter); }
  .videoreveal__pin { position: static; height: auto; display: block; overflow: visible; }
  .videoreveal__frame { transform: none !important; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius) !important; }
}
@media (max-width: 640px) { .split--top { row-gap: var(--space-lg); } .split--top > .section-head { margin-bottom: 0; } }   /* phones: stacked heading + list sit closer ('That is exactly what this gives you', Chiara 5 Oct) */
@media (max-width: 640px) {
  .page-hero h1 { font-size: var(--type-h1); }                                                   /* H1 stays one step above every H2 (32) */
  .stat-row--center { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }   /* Sessions stats side by side, as on Insider */
  .stat-row--center .stat__n { font-size: var(--type-display); }
  .lede-split__media { margin-left: 0; }                                               /* Sessions intro photo on the page gutter like the text above it */
  .section:has(> .wrap > .stat-row--center) { padding-block: var(--space-lg); }
}