/* Resource and content pages (L&D reports, the three case studies, the two format articles, FAQ, Ambassador programme, Debrief sign-up):
   only what shared/product.css and shared/pages-content.css don't have. Linked from each resource page's source, after those two.
   Owned by the pages-resources tab (3 Nov); the shared files are left alone. */

/* hero with the words on the left and the live page's picture on the right */
.hero.side { min-height: 0; text-align: left; padding: calc(var(--navh) + 64px) 0 112px; }
.hero.side .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-items: start; align-items: center; gap: clamp(32px, 5vw, 80px); }
.hero.side .words { display: grid; gap: 24px; align-content: center; }
.hero.side h1 { max-width: 14ch; font-size: clamp(40px, 4.6vw, 76px); }
.hero.side .lede { max-width: 32em; }
.hero.side .btns { justify-content: flex-start; }
.hero.side .pic { width: 100%; }
.hero.side .pic img { width: 100%; height: auto; max-height: 560px; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(12, 53, 92, .18)); }

/* the report cards: cover, title, line, and the download form that opens in place */
.reports { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px); }
/* a flex column, so each row's "Download insights" sits level under one- and two-line titles (review fix 10) */
.report { display: flex; flex-direction: column; gap: 14px; }
.report .cover { border-radius: var(--r-l); overflow: hidden; background: var(--cream); aspect-ratio: 662 / 410; }
.report .cover img { width: 100%; height: 100%; object-fit: cover; }
.report h3 { font-size: var(--t-h4); margin-top: 6px; }
.report p { color: var(--ink-soft); }
.report .btns { margin-top: auto; padding-top: 4px; }
.report .get { display: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px; }
.report.open .get { display: block; }
.report .get .note-sm { margin: 0; }
/* less space between the last row of reports and the closing panel: it was about 220px (going-over point 104, Oli, 5 Nov) */
.sec:has(> .wrap > .reports) { padding-bottom: clamp(16px, 2vw, 32px); }

@media (max-width: 1100px) {
  .reports { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hero.side { padding: calc(var(--navh) + 40px) 0 88px; }
  .hero.side .wrap { grid-template-columns: minmax(0, 1fr); }
  .reports { grid-template-columns: minmax(0, 1fr); }
}

/* Klaviyo's report forms, styled to the page (Oli, 3 Nov, 10:47: as the HubSpot forms are). Only the look changes; Klaviyo still draws and sends them.
   Klaviyo writes its styles inline, so these need !important. */
.report .get { background: var(--cream); border: 0; }
.report .get form.klaviyo-form { background: transparent !important; padding: 0 !important; border-radius: 0 !important; }
.report .get form.klaviyo-form > div { min-height: 0 !important; gap: 10px; }
.report .get [data-testid="form-component"] { padding: 0 !important; }
.report .get input[type="email"] { height: 48px !important; border: 1px solid var(--line) !important; border-radius: 999px !important; padding: 0 20px !important; background: var(--paper) !important; color: var(--ink) !important; font: 400 15px/1.2 "Outfit", sans-serif !important; letter-spacing: 0 !important; }
.report .get input[type="email"]:focus { outline: 2px solid var(--teal-deep) !important; outline-offset: 2px; }
.report .get .klaviyo-form-button { height: 48px !important; border-radius: 999px !important; background: var(--teal) !important; color: var(--ink) !important; font: 500 15px/1.2 "Outfit", sans-serif !important; letter-spacing: 0 !important; text-transform: lowercase !important; }
.report .get .klaviyo-form-button::first-letter { text-transform: uppercase; }
.report .get .klaviyo-form-button:hover { background: #5ce6cb !important; }
.report .get .klaviyo-form-richtext p, .report .get .klaviyo-form-richtext span { font: 400 13px/1.45 "Outfit", sans-serif !important; color: var(--mute) !important; }
.report .get input[type="email"]::placeholder { font: 400 15px/1.2 "Outfit", sans-serif !important; letter-spacing: 0 !important; color: var(--mute) !important; }

/* ---------- case studies (AO, APM, Boden) ---------- */
/* the client's key stats: all in one row on a laptop (set --n to how many) */
.facts.many { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
.stats-lab { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-text); margin-bottom: 16px; }
/* a picture that carries its own background and corners, so no colour frame */
.split .shot img { width: 100%; height: auto; border-radius: var(--r-xl); }
/* the client's words, under a section's paragraphs */
.pull-quote { margin: 12px 0 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--teal); display: grid; gap: 12px; }
.pull-quote blockquote { margin: 0; font-size: var(--t-h4); font-weight: 400; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); }
.pull-quote figcaption { font-size: var(--t-small); color: var(--ink-soft); }
.pull-quote figcaption b { color: var(--ink); font-weight: 500; }
.prose.wide { max-width: 860px; }
.prose .stress { font-size: var(--t-h4); color: var(--ink); }

@media (max-width: 1100px) {
  /* two a row, as the shared facts go; with five or six, every odd one starts a row */
  .facts.many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts.many > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .facts.many > div:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
}

/* a client's words on their own, between sections */
.big-quote { margin: 0 auto; max-width: 980px; display: grid; gap: 20px; text-align: center; justify-items: center; }
.big-quote blockquote { margin: 0; font-size: var(--t-h3); font-weight: 300; line-height: 1.35; letter-spacing: -0.02em; color: var(--ink); }
.big-quote figcaption { color: var(--ink-soft); font-size: var(--t-small); }
.big-quote figcaption b { color: var(--ink); font-weight: 500; }
/* a tick list whose points each have a name and a line */
.ticks.pair li b { display: block; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.ticks.pair li span { color: var(--ink-soft); }
.ticks.cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
/* a small label over a list or a hero headline */
.kicker { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #0b7a66; }
/* a point's quote line, under its words */
.points .q { color: var(--ink); font-style: italic; }
/* a person: their photo beside who they are */
.split .portrait img { width: 100%; max-width: 460px; height: auto; border-radius: var(--r-xl); }
.role { font-size: var(--t-small); color: var(--ink-soft); }
@media (max-width: 767px) {
  .ticks.cols { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- format articles (podcast-style, video shorts) ---------- */
/* a sub-heading under a section's heading */
.prose .sub-h { font-size: var(--t-h3); font-weight: 400; color: var(--teal-text); margin-top: -8px; }   /* text teal: 4.5:1 at phone size (checklist 165) */
/* a research line in a band, beside a picture */
.banner { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 80px); align-items: center; background: #e3f7f2; border-radius: var(--r-xl); padding: clamp(28px, 4vw, 56px); }
.banner img { width: 100%; max-width: 320px; height: auto; justify-self: center; }
.banner p { font-size: var(--t-h3); font-weight: 300; line-height: 1.35; letter-spacing: -0.02em; }
/* figures written as one sentence: the number big, the rest of the sentence under it */
.figures.lines p { color: var(--ink); font-size: var(--t-h4); font-weight: 400; line-height: 1.4; }
.note-after { margin-top: clamp(32px, 4vw, 48px); max-width: 760px; color: var(--ink-soft); font-size: var(--t-lede); font-weight: 400; line-height: 1.5; }
.head p a { color: var(--ink); font-weight: 500; }
@media (max-width: 767px) {
  .banner { grid-template-columns: minmax(0, 1fr); }
  .banner img { max-width: 220px; }
}

/* ---------- FAQ: the questions as a jump list beside the answers ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq-nav { position: sticky; top: calc(var(--navh) + 32px); max-height: calc(100vh - var(--navh) - 64px); overflow: auto; }
.faq-nav ol { list-style: none; display: grid; gap: 2px; counter-reset: q; }
.faq-nav a { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 8px 10px; border-radius: var(--r-m); text-decoration: none; color: var(--ink-soft); font-size: var(--t-small); line-height: 1.4; counter-increment: q; }
.faq-nav a::before { content: counter(q); color: var(--teal-deep); font-weight: 500; }
.faq-nav a:hover, .faq-nav a.on { background: var(--cream); color: var(--ink); }
.answers { display: grid; gap: 0; }
.answers article { padding: clamp(28px, 3vw, 40px) 0; border-top: 1px solid var(--line); display: grid; gap: 14px; scroll-margin-top: calc(var(--navh) + 32px); }
.answers article:first-child { border-top: 0; padding-top: 0; }
.answers h2 { font-size: var(--t-h3); }
.answers p, .answers li { color: var(--ink-soft); }
@media (max-width: 1100px) {
  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq-nav { position: static; max-height: none; }
}
/* when the list is taller than the screen it scrolls inside itself, and the Mac hides that scrollbar: a fade at the bottom shows there's more,
   and room under the last question lets it scroll clear of the fade (review fix 29) */
@media (min-width: 1101px) {
  .faq-nav { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); }
  .faq-nav ol { padding-bottom: 56px; }
}

/* ---------- Ambassador programme ---------- */
/* who it's for: names as pills */
.pills { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.pills li { padding: 10px 18px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--t-small); }
.sec.cream .pills li { background: var(--paper); }
/* a testimonial: photo, quote, and a figure beside it */
.testimonial { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 16px; }
.testimonial figure { margin: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); background: var(--paper); border-radius: var(--r-l); overflow: hidden; }
.testimonial figure img { width: 100%; height: 100%; object-fit: cover; }
.testimonial figure > div { padding: clamp(24px, 3vw, 40px); display: grid; gap: 16px; align-content: center; }
.testimonial blockquote { margin: 0; font-size: var(--t-h4); font-weight: 400; line-height: 1.4; }
.testimonial figcaption span { display: block; color: var(--ink-soft); font-size: var(--t-small); }
.testimonial .fig { background: var(--paper); border-radius: var(--r-l); padding: clamp(24px, 3vw, 40px); display: grid; gap: 12px; align-content: center; }
.testimonial .fig b { font-size: clamp(48px, 5vw, 80px); font-weight: 300; letter-spacing: -0.045em; line-height: 1; }
.testimonial .fig p { color: var(--ink-soft); }
@media (max-width: 1100px) {
  .testimonial { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .testimonial figure { grid-template-columns: minmax(0, 1fr); }
  .testimonial figure img { aspect-ratio: 16 / 10; }
}

/* ---------- Debrief sign-up: The Assembly's mark over the photo ---------- */
.hero.side .pic.stack { position: relative; }
.hero.side .pic.stack img { border-radius: var(--r-xl); filter: none; }
.hero.side .pic.stack .badge { position: absolute; left: -24px; bottom: -24px; width: clamp(80px, 10vw, 130px); height: auto; border-radius: 0; filter: drop-shadow(0 16px 24px rgba(12, 53, 92, .25)); }
.hero.side .form-window { max-width: 560px; }
@media (max-width: 767px) {
  .hero.side .pic.stack .badge { left: 12px; bottom: -20px; }
}

/* numbered steps in a row on a laptop (Ambassador: how it works) */
.steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 32px); border-top: 0; }
.steps.four li { grid-template-columns: minmax(0, 1fr); border-bottom: 0; border-top: 1px solid var(--ink); padding: 24px 0 0; gap: 12px; align-content: start; }
.steps.four li::before { grid-row: auto; font-size: clamp(36px, 3.6vw, 56px); }
.rows h3 .tag { display: block; margin-top: 6px; }
@media (max-width: 1100px) { .steps.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
@media (max-width: 767px) { .steps.four { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* Case studies index (3 Nov): a short hero with no picture, and the report cards with each case study's logo picture shown whole */
.hero.side.solo .wrap { grid-template-columns: minmax(0, 1fr); }
.hero.side.solo { padding-bottom: 72px; }
.cases .cover { aspect-ratio: 6 / 5; display: grid; place-items: center; }
.cases .cover img { object-fit: contain; padding: 8%; }
.cases h3 a { text-decoration: none; }
.cases h3 a:hover { text-decoration: underline; }
/* Full sweep, 11 Nov (golive-order/full-sweep-11nov/report.md) */
/* 1: the "none booked" block keeps its hidden attribute (.prose showed it under a listed session). 24: an upcoming card shows its whole picture, name tags and all. */
.up-none[hidden] { display: none; }
#up-list .cover { aspect-ratio: 886 / 896; }
#up-list .cover img { object-fit: contain; padding: 0; }