/**
 * Stacker 2026 (CFA charterholder LP, ticket #45840534).
 * Replaces /stacker. Page-scoped styles: everything under .stk26 /
 * #stacker-2026. Chrome (menus, footer, .next-button*, fonts) comes from the
 * shared next-is-here-assets stylesheets. Cache-busting ?v= is appended by
 * templates/static-html-page.php.
 *
 * Type, colour and layout come from the Figma comp `CAIA site updates -
 * StackerDesktop`, frame Main (4087:1484), 1728 x 6230. Every desktop value
 * below is the literal comp value, so the page is 1:1 at a 1728px viewport;
 * tablet and mobile scale down from there. Same treatment as the sibling
 * Next Is Here 2026 LP (ticket #45840533).
 *
 * Figma reports Gotham with non-standard weights (325/350/400/425) and two
 * style names ("Regular" and "Bold") that render at the same stroke weight in
 * the export. Measured against the comp, the faces in use map to the four we
 * ship in fonts.css:
 *
 *   Figma Book (325)             -> 400
 *   Figma Medium (350)           -> 500
 *   Figma Regular (400) / Bold   -> 700
 *   Figma Black (425)            -> 700 (no 900 in the licensed set)
 *
 * Two geometries run down the page: the text column is 1497px wide (the width
 * of the FAQ rules, centred) and the bleed elements -- hero card, Level II
 * media and the cards row -- sit on a 29px gutter.
 *
 * Breakpoints: desktop (default) / tablet <=1024px / mobile <=640px. Desktop
 * Each has its own comp -- `- StackerDesktop` (1728 x 6230),
 * `- StackerTablet` (1024 x 4643) and `- StackerMobile` (402 x 4829), all
 * frame Main -- and each is reproduced literally at its own frame width.
 *
 * Hero artwork: CAIA ships one crop per breakpoint (hero-wave.webp 1669x1092,
 * -tablet 980x864, -mobile 376x861), each cut to its own hero card's aspect
 * and delivered at 1x. Every crop is dark under the wordmark and the logo and
 * clears to cream under the panel, so the hero carries white display type and
 * black body copy with no scrim. The same three files run on the sibling Next
 * Is Here LP.
 */

.stk26 {
  /* Comp tokens (§1). */
  --stk26-black: #000000;
  --stk26-white: #ffffff;
  --stk26-orange: #fd7518;
  --stk26-gray: #5f5f5f;
  --stk26-indigo: #5050a7;
  --stk26-ice: #dfedf5;

  font-family: "Gotham A", "Gotham B", serif;
  color: var(--stk26-black);
}

.stk26 *,
.stk26 *::before,
.stk26 *::after {
  box-sizing: border-box;
}

/* The one rule outside .stk26. The inset hero below exposes the page canvas
   down both sides, and the shared chrome leaves html/body transparent, which
   Chrome paints dark for a visitor whose OS is in dark mode. */
body {
  background-color: #fff;
}

/* Comp text column: 1497px (the FAQ rules run x118 -> x1615), centred. */
.stk26 .stk26-inner {
  width: min(1497px, 100% - 64px);
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

/* The shared landing CSS gives main a dark background; content sections
   are light in the 2026 design. */
.stk26 section:not(.stk26-hero) {
  margin: 0;
  background-color: var(--stk26-white);
}

.stk26 .stk26-accent {
  color: var(--stk26-orange);
  font-style: italic;
}

/* ------------------------------------------------------------------ */
/* Hero                                                               */
/* ------------------------------------------------------------------ */

/* Comp: a 1669 x 1093 card on the 29px bleed gutter. It starts flush with
   the top of the frame and only its bottom corners are rounded (70px); the
   top edge runs straight off the top of the page. */
.stk26-hero {
  position: relative;
  min-height: 1093px;
  display: flex;
  align-items: stretch;
  /* Capped at the comp's 1669px bleed row rather than a fixed 29px gutter:
     past 1728 the hero would otherwise keep growing while every other row
     stays centred. */
  width: min(1670px, 100% - 58px);
  margin: 0 auto;
  border-radius: 0 0 70px 70px;
  overflow: hidden;
  background-color: var(--stk26-white);
  background-image: url("/app/themes/caia2025/templates/static/stacker-assets/img/hero-wave.webp");
  background-size: cover;
  background-position: center;
}

/* The column is 1497 inside the hero's 1670 bleed row, so the comp leaves
   86.5px of card either side of it. Written as that ratio rather than a flat
   100%: at 100% the column filled the card the moment the viewport dropped
   below 1555px and the logo, headline and panel ran onto the card's right
   edge, which is the padding loss reported on ticket #45840534. */
.stk26-hero .stk26-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: min(1497px, 89.641%);
  padding: 229px 0 48px;
}

/* image 9: 333 x 113 at x1298, y63. The comp hangs it 19px past the text
   column; it is squared up with the column here. */
.stk26-hero__logo {
  position: absolute;
  top: 53px;
  right: 0;
}

/* The comps set the lockup in white over the artwork, with the swoosh still
   in orange and blue: caia-logo-white-2026.png, built on the same canvas
   proportions as the dark lockup so the widths below are unchanged. */
.stk26-hero__logo img {
  display: block;
  width: 333px;
  height: auto;
}

.stk26-hero__logo:hover {
  opacity: 0.85;
  text-decoration: none;
}

/* display-hero: 220px / lh 90%, white. "Next" is Black, "is here." XLight. */
.stk26-hero__title {
  margin: 0;
  color: var(--stk26-white);
  font-size: 220px;
  line-height: 0.9;
  text-align: left;
}

.stk26-hero__title strong {
  font-weight: 700;
}

/* "Gotham XLight" is declared in the shared theme.css against a caia.org URL
   that 404s, so this always falls back: 300 is the lightest face we actually
   ship and is the closest to the comp's extra-light cut. */
.stk26-hero__title span {
  font-family: "Gotham XLight", "Gotham A", "Gotham B", serif;
  font-weight: 300;
}

/* Right-aligned stack ending on the comp's x1632 column edge. */
.stk26-hero__panel {
  align-self: flex-end;
  max-width: 912px;
  text-align: right;
  color: var(--stk26-black);
}

/* h3: Bold 36px / lh 119%. */
.stk26-hero__headline {
  margin: 0 0 34px;
  font-size: 36px;
  line-height: 1.19;
  font-weight: 700;
}

/* body: Book 20px on a 581px measure. */
.stk26-hero__teaser {
  margin: 0 0 39px auto;
  max-width: 581px;
  color: var(--stk26-black);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
}

.stk26-hero__cta {
  display: flex;
  justify-content: flex-end;
}

/* No arrows. The shared chrome stylesheet decorates every .next-button with
   pseudo-elements: a 24px inline chevron on ::after, and on --big-arrow a 55px
   disc (::before) plus its glyph (::after) floated 78px past the right edge.
   This page ships plain pills, so all of them are switched off here and the
   space they reserved is reclaimed. */
.stk26 .next-button::before,
.stk26 .next-button::after {
  content: none;
}

/* cta: Gotham Bold 28px, sentence case, centred in a 428 x 73 pill. The
   shared rule pushes label and chevron apart with space-between + a 20px gap
   and tracks the label out in caps; with no chevron the label centres. */
.stk26 .next-button {
  justify-content: center;
  gap: 0;
  min-width: 428px;
  padding: 21px 24px 20px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

/* --big-arrow pads the right edge for the disc (and --orange.--big-arrow
   re-declares the shorthand), so both are normalised. */
.stk26 .next-button--big-arrow {
  padding-right: 24px;
  margin-right: 0;
}

.stk26 .next-button--orange {
  background-color: var(--stk26-orange);
  border-color: var(--stk26-orange);
  color: var(--stk26-white);
}

.stk26 .next-button--orange:hover,
.stk26 .next-button--orange:focus-visible {
  background-color: var(--stk26-white);
  color: #c94f00;
  border-color: var(--stk26-orange);
}

/* ------------------------------------------------------------------ */
/* Intro: headline + copy                                             */
/* ------------------------------------------------------------------ */

.stk26-intro {
  padding: 128px 0 0;
}

/* Comp columns: headline left, a 461px justified column starting at x1155. */
.stk26-intro .stk26-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 461px);
  column-gap: 76px;
  align-items: start;
}

/* h2-alt: 48px / lh 150%. */
.stk26-intro h2 {
  margin: 0;
  font-size: 48px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--stk26-black);
}

/* body: Book 20px. The comp justifies this column, but on the live measure
   that stretched the word spacing and broke badly, so the client asked for it
   ranged left (ticket #45840534). "The CAIA Charter" carries .stk26-accent
   for the orange italic, and the rule below takes it to Bold to match the
   sibling Next Is Here LP. */
.stk26-intro__copy {
  margin: 0;
  padding-top: 10px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  color: var(--stk26-black);
}

.stk26-intro__copy strong {
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Three pillars                                                      */
/* ------------------------------------------------------------------ */

/* A size container: the stadium labels below are sized against the text
   column so they keep the comp's two-line shape as the columns narrow. Every
   cqw value in this section is written twice, so an engine without the unit
   drops the second declaration and keeps the comp's fixed value. */
.stk26-callouts {
  container-type: inline-size;
  padding: 118px 0 0;
}

/* Three rows (icon / label / copy) so the columns can share them via subgrid
   below. row-gap stays 0: the spacing inside a column comes from the margins. */
.stk26-callouts .stk26-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 102px;
  row-gap: 0;
}

.stk26-callout {
  text-align: center;
}

/* Subgrid keeps the icons, the labels and the copy of the three columns on
   shared baselines however many lines each label wraps to. */
@supports (grid-template-rows: subgrid) {
  .stk26-callout {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    justify-items: center;
  }
}

/* Double chevron, 4px round stroke, pointing down. The comp draws it 27 x 28,
   which squashes the 32 x 38 artwork and reads thinner than the same chevron
   on Next Is Here; the client asked for the two pages to match, so this is the
   sibling page's 32 x 38 (ticket #45840534).
   Block, not inline-block: next to an inline-block label the icon shares its
   line whenever the label is short enough to fit beside it. */
.stk26-callout__icon {
  display: block;
  width: 32px;
  width: clamp(20px, calc((100cqw - 64px) * 0.02138), 32px);
  height: 38px;
  height: clamp(24px, calc((100cqw - 64px) * 0.02538), 38px);
  margin: 0 auto 47px;
  margin: 0 auto clamp(30px, calc((100cqw - 64px) * 0.03139), 47px);
  background-color: var(--stk26-orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 38'%3E%3Cg fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5 16 17 29 5'/%3E%3Cpath d='M3 21 16 33 29 21'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 38'%3E%3Cg fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5 16 17 29 5'/%3E%3Cpath d='M3 21 16 33 29 21'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* pillar-label: 20px / lh 130% caps, centred. The comp leaves these bare, but
   the client asked for the stadium outline the sibling Next Is Here LP uses
   (ticket #45840534). Unlike that page the labels here run to two lines, so
   the pill wraps rather than staying on one: max-width is the comp's 300px
   measure plus this rule's own padding and border, which keeps the line breaks
   exactly where they were and grows the stadium around them. The radius is
   larger than half the two-line height, so both ends stay fully round. */
.stk26-callout h3 {
  display: inline-block;
  max-width: 18.8em;
  margin: 0 0 17px;
  padding: 0.45em 1.8em;
  border: 0.1em solid var(--stk26-black);
  border-radius: 60px;
  font-size: 20px;
  font-size: clamp(12px, calc((100cqw - 64px) * 0.01336), 20px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--stk26-black);
}

/* small body: Book 16px, centred. */
.stk26-callout p {
  margin: 0 auto;
  max-width: 360px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--stk26-black);
}

/* ------------------------------------------------------------------ */
/* Full-width divider image (tablet / mobile only)                    */
/* ------------------------------------------------------------------ */

.stk26-divider {
  display: none;
  margin: 0;
}

.stk26-divider img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* Level II                                                           */
/* ------------------------------------------------------------------ */

/* The comp opens this row 175px below the callouts; the client asked for that
   gap to come down (ticket #45840534). */
.stk26-levels {
  padding: 110px 0 0;
}

/* One list here, not two: the CFA stackable route enters at Level II. The
   media column is 838px wide and sits on the 29px bleed gutter, so this row
   is wider than the page's text column. */
.stk26-levels .stk26-inner {
  display: grid;
  width: min(1670px, 100% - 58px);
  /* 50% of the bleed row is 835px at 1728, the comp's 838. Written as a
     percentage so the media column keeps its share between this breakpoint
     and the tablet one instead of starving the list. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 50%);
  column-gap: 24px;
  align-items: start;
}

/* The comp indents the list to x223, inside the wider bleed row, and drops
   it 37px below the top of the media column. 24% of the left track is the
   comp's 194px at 1728 and scales with it below that. */
.stk26-level {
  padding: 37px 0 0 24%;
}

/* level-label: 48px caps / lh 180%. */
.stk26-level h3 {
  margin: 0 0 30px;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--stk26-black);
}

.stk26-level ul {
  margin: 0;
  padding: 0 0 0 20px;
  max-width: 581px;
}

/* list: Book 20px / lh 180%, 56px pitch. */
.stk26-level li {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--stk26-gray);
}

/* The trailing margin would otherwise deepen the row under the media. */
.stk26-level li:last-child {
  margin-bottom: 0;
}

/* Image stacked over its CTA bar: 825 x 789 radius 32, then an 838 x 80
   indigo bar 28px below it. */
.stk26-levels__media {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.stk26-levels__image {
  aspect-ratio: 825 / 789;
  margin-right: 13px;
  border-radius: 32px;
  background-image: url("/app/themes/caia2025/templates/static/stacker-assets/img/levels-bloom.webp");
  background-size: cover;
  background-position: center;
}

/* cta-bar: 838 x 80, radius 40, Gotham Bold 28px white centred. */
.stk26 .stk26-levels__cta {
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 80px;
  padding: 0 30px;
  border-radius: 40px;
  font-size: 28px;
  line-height: 1;
  text-transform: none;
}

/* Brand violet for this CTA. border-color matches the fill so the bar reads
   solid: .next-button ships a 2px #4D4646 border that would otherwise outline
   it. Hover mirrors the --blue variant's inversion. */
.stk26 .stk26-levels__cta,
.stk26 .stk26-levels__cta-tablet .next-button {
  background-color: var(--stk26-indigo);
  border-color: var(--stk26-indigo);
  color: var(--stk26-white);
}

.stk26 .stk26-levels__cta:hover,
.stk26 .stk26-levels__cta:focus-visible,
.stk26 .stk26-levels__cta-tablet .next-button:hover,
.stk26 .stk26-levels__cta-tablet .next-button:focus-visible {
  background-color: var(--stk26-white);
  color: var(--stk26-indigo);
}

.stk26-levels__cta-tablet {
  display: none;
  justify-content: flex-end;
  margin-top: 32px;
}

/* ------------------------------------------------------------------ */
/* Curriculum: Next in Practice                                       */
/* ------------------------------------------------------------------ */

.stk26-curriculum {
  padding: 135px 0 0;
}

/* eyebrow: 20px caps, orange. */
.stk26-curriculum__eyebrow {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--stk26-orange);
}

/* The right-hand block is 790px wide and set flush right in the comp. */
.stk26-curriculum__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 54.5%);
  column-gap: 0;
  align-items: start;
  margin-bottom: 0;
}

/* h2: 64px. */
.stk26-curriculum__top h2 {
  margin: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--stk26-black);
}

.stk26-curriculum__lead,
.stk26-curriculum__copy {
  text-align: right;
}

/* lead: Bold 20px, orange. */
.stk26-curriculum__lead {
  margin: 0 0 20px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--stk26-orange);
}

/* body: Book 20px; the "Next in Practice" span is Bold Italic (the comp's
   Montserrat/Arimo spans are Figma substitutions, see §7.2 of the handoff). */
.stk26-curriculum__copy {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--stk26-black);
}

.stk26-curriculum__copy strong {
  font-weight: 700;
  font-style: italic;
}

.stk26-curriculum__download {
  display: flex;
  justify-content: flex-end;
  margin: 80px 0 46px;
}

/* link-large: Bold 36px underlined grey -- a text link in the comp, not a
   button: no pill, no arrow disc. */
.stk26 .stk26-curriculum__link {
  min-width: 0;
  padding: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--stk26-gray);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.stk26 .stk26-curriculum__link:hover,
.stk26 .stk26-curriculum__link:focus-visible {
  color: var(--stk26-black);
}

/* Comp: five 312-wide cards 19px apart on the 29px bleed gutter. The card is
   312 x 467 with a 1636 x 480 image strip behind its bottom edge; drawn here
   as one 312 x 642 column so the two are a single element. */
.stk26-cards {
  display: grid;
  width: min(1636px, 100% - 58px);
  margin: 0 auto;
  grid-template-columns: repeat(5, 1fr);
  gap: 19px;
}

/* A size container as well: the card is 312px wide only on the 1636px bleed
   row and narrows with the grid below it, while the copy inside was fixed at
   24px. "Private Markets Portfolio Management" and "Infrastructure" then ran
   through the card's right padding and were clipped by the overflow, which is
   the note on ticket #45840534. Everything inside is sized against the card
   instead, so the copy keeps the comp's measure at any width. */
.stk26-card {
  position: relative;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  aspect-ratio: 312 / 642;
  border-radius: 60px;
  overflow: hidden;
  background-image: linear-gradient(180deg, var(--stk26-ice) 0%, var(--stk26-ice) 23%, rgba(255, 255, 255, 0) 62%);
}

/* 48 / 41 against the comp's 312px card. */
.stk26-card__body {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding: 48px 41px 0;
  padding: min(48px, 15.385cqw) min(41px, 13.141cqw) 0;
}

/* card-title / card-body: both 24px (7.692% of the card), both grey,
   separated by a blank line. */
.stk26-card h3 {
  margin: 0 0 29px;
  margin: 0 0 min(29px, 9.295cqw);
  font-size: 24px;
  font-size: min(24px, 7.692cqw);
  line-height: 1.2;
  font-weight: 700;
  color: var(--stk26-gray);
}

.stk26-card p {
  margin: 0;
  font-size: 24px;
  font-size: min(24px, 7.692cqw);
  font-weight: 400;
  line-height: 1.2;
  color: var(--stk26-gray);
}

/* One artwork spans the whole row and each card is a window onto its slice --
   that is what gives every card a different crest instead of five copies of
   the same wave. Sized to 5 cards plus the 4 gaps between them. It covers the
   whole card rather than a strip under the copy: the wave rises to a
   different height in each slice and must not meet a straight clip edge. */
.stk26-card__media {
  position: absolute;
  inset: 0;
  background-image: url("/app/themes/caia2025/templates/static/stacker-assets/img/curriculum-wave.webp");
  background-repeat: no-repeat;
  background-size: calc(500% + 4 * 19px) auto;
  background-position-y: bottom;
}

/* A background-position percentage resolves against (area - image), which here
   is -(4·card + 4·gap). Wanting card n offset by -n·(card + gap) works out to
   exactly 25n% for every card width, so this stays correct as the grid flexes. */
.stk26-card:nth-child(1) .stk26-card__media {
  background-position-x: 0%;
}

.stk26-card:nth-child(2) .stk26-card__media {
  background-position-x: 25%;
}

.stk26-card:nth-child(3) .stk26-card__media {
  background-position-x: 50%;
}

.stk26-card:nth-child(4) .stk26-card__media {
  background-position-x: 75%;
}

.stk26-card:nth-child(5) .stk26-card__media {
  background-position-x: 100%;
}

/* ------------------------------------------------------------------ */
/* Join                                                               */
/* ------------------------------------------------------------------ */

.stk26-join {
  padding: 127px 0 0;
}

/* h2: 64px on a 1420px measure. */
.stk26-join h2 {
  margin: 0 0 44px;
  max-width: 1420px;
  font-size: 64px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--stk26-black);
}

/* body: Book 20px, grey. */
.stk26-join p {
  margin: 0 0 70px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--stk26-gray);
}

.stk26-join__cta {
  display: flex;
  justify-content: flex-end;
}

/* ------------------------------------------------------------------ */
/* FAQ                                                                */
/* ------------------------------------------------------------------ */

.stk26-faq {
  padding: 132px 0 0;
}

/* h2: 64px. */
.stk26-faq h2 {
  margin: 0 0 15px;
  font-size: 64px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--stk26-black);
}

/* body: Book 20px. */
.stk26-faq__subhead {
  margin: 0 0 125px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--stk26-black);
}

/* Seven 3px rules across the full 1497px text column. */
.stk26 .accordion-custom {
  margin: 0;
  border-bottom: 3px solid var(--stk26-gray);
}

/* Heading wrapper around each accordion trigger (ARIA APG pattern);
   the button carries all the visual styling. */
.stk26 .stk26-faq__q {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* faq-question: Gotham Medium 30px, indented 10px inside the rule, on a
   116px row pitch. */
.stk26 .accordion-custom .accordion-custom-button {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 38px 120px 38px 10px;
  border: 0;
  border-top: 3px solid var(--stk26-gray);
  border-radius: 0;
  background: none;
  font-family: inherit;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--stk26-black);
  text-align: left;
  cursor: pointer;
}

/* Comp: a 58 x 26 chevron with a 7px orange round stroke. The markup ships a
   "⌄" glyph, which is hidden and replaced by the mask. */
.stk26 .accordion-custom .accordion-custom-button span {
  position: absolute;
  right: 0;
  top: 50%;
  width: 58px;
  height: 26px;
  margin-top: -13px;
  font-size: 0;
  color: transparent;
  background-color: var(--stk26-orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 26'%3E%3Cpath d='M4 4 29 22 54 4' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 26'%3E%3Cpath d='M4 4 29 22 54 4' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.2s ease;
}

.stk26 .accordion-custom .accordion-custom-button.open span {
  transform: rotate(180deg);
}

.stk26 .accordion-custom .accordion-custom-button:focus-visible {
  outline: 3px dotted var(--stk26-orange);
  outline-offset: 2px;
}

/* The answer is set on a 1206px measure and the comp leaves a deep gap under
   it before the next rule. */
.stk26 .accordion-custom .accordion-custom-content {
  display: none;
  padding: 0 291px 92px 9px;
  background: none;
}

/* body: Book 20px. */
.stk26 .accordion-custom .accordion-custom-content p {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--stk26-black);
}

.stk26 .accordion-custom .accordion-custom-content p + p,
.stk26 .accordion-custom .accordion-custom-content ul + p {
  margin-top: 20px;
}

/* Several answers on this page are step lists / eligibility lists. */
.stk26 .accordion-custom .accordion-custom-content ul {
  margin: 20px 0 0;
  padding-left: 26px;
}

.stk26 .accordion-custom .accordion-custom-content li {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--stk26-black);
}

/* The comp sets the link in the answer colour, underlined. */
.stk26 .accordion-custom .accordion-custom-content a {
  color: inherit;
  text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Bottom CTA                                                         */
/* ------------------------------------------------------------------ */

.stk26-bottom-cta {
  padding: 86px 0 93px;
}

.stk26-bottom-cta .stk26-inner {
  display: flex;
  justify-content: flex-end;
}

/* ------------------------------------------------------------------ */
/* Tablet (<=1024px)                                                  */
/* ------------------------------------------------------------------ */

/**
 * Figma comp `CAIA site updates - StackerTablet`, frame Main (2286:2),
 * 1024 x 4643. Same rules as the desktop frame: the values below are the
 * comp's literals, so the page is 1:1 at a 1024px viewport.
 *
 * Structural differences from the desktop frame: the Level II media column
 * narrows to 505px and its full-width indigo bar becomes the standard 249px
 * pill, the curriculum cards lose the artwork for a flat tint, and the
 * pillar labels stay plain caps.
 */
@media all and (max-width: 1024px) {
  /* Comp text column: 922px (x46 -> x968). Cards run on a 952px row and the
     hero and Level II media on a 972px one. */
  .stk26 .stk26-inner {
    width: min(922px, 100% - 52px);
  }

  /* Group 17: a 972 x 864 card, flush with the top of the frame, bottom
     corners rounded 70px. */
  .stk26-hero {
    min-height: 864px;
    width: auto;
    margin: 0 26px;
    border-radius: 0 0 70px 70px;
    background-image: url("/app/themes/caia2025/templates/static/stacker-assets/img/hero-wave-tablet.webp");
  }

  /* Explicit width: the inner sits inside the inset hero, so the desktop
     "100% - 52px" fallback would pull the copy off the comp. 922 of the
     hero's 972, kept as a ratio for the same reason as the desktop rule. */
  .stk26-hero .stk26-inner {
    width: min(922px, 94.856%);
    padding: 140px 0 38px;
  }

  .stk26-hero__logo {
    top: 52px;
    right: 44px;
  }

  .stk26-hero__logo img {
    width: 165px;
  }

  /* display: 128px / lh 90%, still white. The comp indents it 22px past the
     text column. */
  .stk26-hero__title {
    margin-left: 22px;
    font-size: 128px;
  }

  /* h3: Bold 24px / lh 119% on a 597px measure, body on 389px. */
  .stk26-hero__panel {
    max-width: 597px;
  }

  .stk26-hero__headline {
    margin-bottom: 23px;
    font-size: 24px;
  }

  .stk26-hero__teaser {
    margin-bottom: 25px;
    max-width: 389px;
    font-size: 14px;
  }

  /* Every pill is 249 x 49 with a Bold 16px label, which the label fills
     almost edge to edge. */
  .stk26 .next-button {
    min-width: 249px;
    padding: 15px 16px 14px;
    font-size: 16px;
  }

  .stk26 .next-button--big-arrow {
    padding-right: 16px;
  }

  .stk26-intro {
    padding: 79px 0 0;
  }

  /* Two columns still: a 607px lead against a 315px justified sidebar. */
  .stk26-intro .stk26-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 315px);
    column-gap: 30px;
  }

  /* lead: Regular 32px / lh 150%. */
  .stk26-intro h2 {
    font-size: 32px;
    line-height: 1.5;
  }

  .stk26-intro__copy {
    padding-top: 13px;
    font-size: 14px;
  }

  .stk26-callouts {
    padding: 98px 0 0;
  }

  /* column-gap only: a row gap here would push the label off the icon. */
  .stk26-callouts .stk26-inner {
    column-gap: 30px;
  }

  /* Comp: a 20 x 22 double chevron, 3px stroke, drawn at the artwork's own
     32 x 38 aspect so it matches the sibling page's tablet chevron. */
  .stk26-callout__icon {
    width: 20px;
    height: 24px;
    margin-bottom: 19px;
  }

  /* column-title: Regular 16px / lh 130% caps. The stadium is a desktop
     treatment on both LPs; these comps set the labels bare. */
  .stk26-callout h3 {
    display: block;
    max-width: 250px;
    margin-bottom: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 16px;
  }

  .stk26-callout p {
    max-width: 280px;
    font-size: 14px;
  }

  /* The tablet comp keeps the two-column Level II row, so the full-bleed
     divider image is a mobile-only element here. */
  .stk26-divider {
    display: none;
  }

  .stk26-levels {
    padding: 75px 0 0;
  }

  /* image 11: 505 x 554 at x493, on the 972px bleed row. */
  .stk26-levels .stk26-inner {
    width: min(972px, 100% - 52px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 52%);
    column-gap: 0;
  }

  .stk26-level {
    padding: 28px 0 0 21%;
  }

  /* list-title: Black 36px caps / lh 180%. */
  .stk26-level h3 {
    margin-bottom: 31px;
    font-size: 36px;
    line-height: 1.8;
  }

  .stk26-level ul {
    max-width: 291px;
  }

  /* list: Book 14px / lh 180% on a 45px pitch. */
  .stk26-level li {
    margin-bottom: 20px;
    font-size: 14px;
  }

  .stk26-levels__media {
    display: block;
  }

  .stk26-levels__image {
    aspect-ratio: 505 / 554;
    margin-right: 0;
  }

  /* The comp drops the full-width indigo bar for the same 249px pill as the
     rest of the page, right-aligned under both columns. */
  .stk26 .stk26-levels__cta {
    display: none;
  }

  .stk26-levels__cta-tablet {
    display: flex;
    grid-column: 1 / -1;
    margin-top: 33px;
  }

  .stk26-curriculum {
    padding: 93px 0 0;
  }

  /* eyebrow: Black 15px caps. */
  .stk26-curriculum__eyebrow {
    margin-bottom: 27px;
    font-size: 15px;
  }

  /* The right-hand block is 562px and still set flush right. */
  .stk26-curriculum__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 61%);
  }

  .stk26-curriculum__top h2 {
    font-size: 36px;
  }

  .stk26-curriculum__lead {
    margin-bottom: 13px;
    font-size: 14px;
  }

  .stk26-curriculum__copy {
    font-size: 14px;
  }

  .stk26-curriculum__download {
    margin: 33px 0 31px;
  }

  /* link-large: Bold 20px underlined. */
  .stk26 .stk26-curriculum__link {
    font-size: 20px;
  }

  /* Five full-width rows, 110px tall on a 121px pitch, on the 952px row. */
  .stk26-cards {
    width: min(952px, 100% - 72px);
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .stk26-card__media {
    display: none;
  }

  /* Text-only rows here: no portrait ratio and a flat tint instead of the
     gradient that clears for the artwork. */
  .stk26-card {
    aspect-ratio: auto;
    min-height: 110px;
    border-radius: 32px;
    background-image: none;
    background-color: var(--stk26-ice);
  }

  .stk26-card__body {
    padding: 27px 64px;
  }

  .stk26-card h3 {
    margin-bottom: 12px;
    font-size: 20px;
  }

  .stk26-card p {
    font-size: 16px;
  }

  .stk26-join {
    padding: 90px 0 0;
  }

  .stk26-join h2 {
    margin-bottom: 18px;
    max-width: 886px;
    font-size: 36px;
  }

  .stk26-join p {
    margin-bottom: 55px;
    font-size: 14px;
  }

  .stk26-faq {
    padding: 80px 0 0;
  }

  .stk26-faq h2 {
    margin-bottom: 9px;
    font-size: 36px;
  }

  .stk26-faq__subhead {
    margin-bottom: 83px;
    font-size: 14px;
    color: var(--stk26-gray);
  }

  /* Lines 9-15: 2px rules across the text column. */
  .stk26 .accordion-custom {
    border-bottom-width: 2px;
  }

  /* faq-question: Medium 24px on a 76px row pitch. */
  .stk26 .accordion-custom .accordion-custom-button {
    padding: 22px 70px 22px 6px;
    border-top-width: 2px;
    font-size: 24px;
  }

  /* Vectors 5/13-17: a 14 x 31 chevron with a 4px stroke, drawn here at the
     same aspect the comp renders it. */
  .stk26 .accordion-custom .accordion-custom-button span {
    right: 0;
    width: 32px;
    height: 16px;
    margin-top: -8px;
  }

  .stk26 .accordion-custom .accordion-custom-content {
    padding: 14px 80px 42px 6px;
  }

  .stk26 .accordion-custom .accordion-custom-content p,
  .stk26 .accordion-custom .accordion-custom-content li {
    font-size: 14px;
  }

  .stk26 .accordion-custom .accordion-custom-content p + p,
  .stk26 .accordion-custom .accordion-custom-content ul + p {
    margin-top: 14px;
  }

  .stk26 .accordion-custom .accordion-custom-content ul {
    margin-top: 14px;
    padding-left: 22px;
  }

  .stk26 .accordion-custom .accordion-custom-content li {
    margin-bottom: 8px;
  }

  .stk26-bottom-cta {
    padding: 50px 0 63px;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile (<=640px)                                                   */
/* ------------------------------------------------------------------ */

/**
 * Figma comp `CAIA site updates - StackerMobile`, frame Main (6001:285),
 * 402 x 4829. Same rules as the other two frames: the values below are the
 * comp's literals, so the page is 1:1 at a 402px viewport.
 *
 * Unlike the Next Is Here 2026 mobile frame, this one keeps the hero
 * wordmark and the CAIA logo, and it keeps the pillar chevrons. The Level II
 * media column is the one thing it drops, so the full-bleed artwork is
 * introduced here.
 */
@media all and (max-width: 640px) {
  /* Comp text column: 354px (x23 -> x377). Cards and the hero run on the
     376px one. */
  .stk26 .stk26-inner {
    width: min(1497px, 100% - 48px);
  }

  /* Group 17: a 376 x 971 card at top -112, so 859px of it are on frame. */
  .stk26-hero {
    min-height: 859px;
    width: auto;
    margin: 0 12px;
    border-radius: 0 0 29px 29px;
    background-image: url("/app/themes/caia2025/templates/static/stacker-assets/img/hero-wave-mobile.webp");
  }

  .stk26-hero .stk26-inner {
    width: min(932px, 100%);
    justify-content: space-between;
    padding: 125px 20px 24px;
  }

  /* CAIA-Logo-WHITE-small: 139 x 47 at (39, 238). */
  .stk26-hero__logo {
    display: block;
    top: 39px;
    right: 1px;
  }

  .stk26-hero__logo img {
    width: 139px;
  }

  /* display: 87px / lh 90%, white. */
  .stk26-hero__title {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    margin-left: 8px;
    font-size: 87px;
  }

  /* h3: Bold 20px / lh 119% on a 290px measure, body on 298px. */
  .stk26-hero__panel {
    max-width: 290px;
  }

  .stk26-hero__headline {
    margin-bottom: 29px;
    font-size: 20px;
  }

  .stk26-hero__teaser {
    margin-bottom: 25px;
    max-width: 298px;
    font-size: 10px;
  }

  /* Every pill is 199 x 30 with a Bold 11px label. */
  .stk26 .next-button {
    min-width: 199px;
    padding: 8px 16px;
    font-size: 11px;
  }

  .stk26 .next-button--big-arrow {
    padding-right: 16px;
  }

  /* The comp insets this block a further 16px, to x40. */
  .stk26-intro {
    padding: 52px 0 0;
  }

  .stk26-intro .stk26-inner {
    grid-template-columns: 1fr;
    gap: 29px;
    padding: 0 16px;
  }

  /* statement: Regular 24px / lh 150%. */
  .stk26-intro h2 {
    font-size: 24px;
    line-height: 1.5;
  }

  /* body-10: Medium lead-in + Book. */
  .stk26-intro__copy {
    padding-top: 0;
    font-size: 10px;
    line-height: 1.2;
    text-align: left;
  }

  /* Stacked, 35px apart. The comp keeps the chevrons on this frame. */
  .stk26-callouts {
    padding: 44px 0 0;
  }

  .stk26-callouts .stk26-inner {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 35px;
  }

  .stk26-callout {
    display: block;
    grid-row: auto;
  }

  /* Groups 20-22: a 24 x 17 double chevron, 3px stroke. */
  .stk26-callout__icon {
    display: block;
    width: 24px;
    height: 17px;
    margin: 0 auto 17px;
  }

  /* feature-title: Regular 16px / lh 130% caps on a 246px measure. */
  .stk26-callout h3 {
    max-width: 250px;
    margin: 0 auto 16px;
    font-size: 16px;
  }

  .stk26-callout p {
    max-width: 280px;
    font-size: 12px;
  }

  /* image 10: 376 x 385, radius 32. Tablet keeps the Level II media column,
     so the full-bleed artwork is introduced here, where that column is
     dropped. */
  .stk26-divider {
    display: block;
    margin: 86px 13px 0;
  }

  .stk26-divider img {
    height: 385px;
    border-radius: 32px;
  }

  .stk26-levels {
    padding: 34px 0 49px;
  }

  .stk26-levels .stk26-inner {
    width: min(1497px, 100% - 48px);
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .stk26-levels__media {
    display: none;
  }

  /* The comp indents the heading and the bullets to x58. */
  .stk26-level {
    padding: 0 0 0 34px;
  }

  /* list-title: Black 24px caps / lh 180%. */
  .stk26-level h3 {
    margin-bottom: 20px;
    font-size: 24px;
    line-height: 1.8;
  }

  .stk26-level ul {
    max-width: none;
    padding-left: 12px;
  }

  /* list: Book 12px on a 26px pitch. */
  .stk26-level li {
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1.2;
  }

  .stk26 .stk26-levels__cta-tablet {
    margin-top: 0;
  }

  .stk26-curriculum {
    padding: 0 0 56px;
  }

  .stk26-curriculum__top {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  /* eyebrow: Black 12px caps. */
  .stk26-curriculum__eyebrow {
    margin-bottom: 14px;
    font-size: 12px;
  }

  /* h2: Black 24px / lh 116%. */
  .stk26-curriculum__top h2 {
    font-size: 24px;
    line-height: 1.16;
  }

  .stk26-curriculum__lead,
  .stk26-curriculum__copy {
    text-align: left;
  }

  .stk26-curriculum__lead {
    margin-bottom: 12px;
    font-size: 12px;
  }

  .stk26-curriculum__copy {
    font-size: 12px;
    line-height: 1.2;
  }

  /* link: Bold 14px underlined. The comp's layer is a wide box with the text
     ranged right inside it, which lands the words on the text column's left
     edge, so it reads as a left-ranged link. */
  .stk26-curriculum__download {
    justify-content: flex-start;
    margin: 22px 0 41px;
  }

  .stk26 .stk26-curriculum__link {
    font-size: 14px;
  }

  /* Cards break out of the 354px text column to the comp's 376px one. */
  .stk26-cards {
    width: min(1497px, 100% - 24px);
  }

  .stk26-card {
    min-height: 110px;
    border-radius: 32px;
  }

  .stk26-card__body {
    padding: 27px 33px;
  }

  /* card-title: Black 15px, grey. */
  .stk26-card h3 {
    margin-bottom: 12px;
    font-size: 15px;
  }

  .stk26-card p {
    font-size: 12px;
  }

  .stk26-join {
    padding: 0 0 66px;
  }

  /* statement: Regular 24px. */
  .stk26-join h2 {
    margin-bottom: 11px;
    font-size: 24px;
  }

  .stk26-join p {
    margin-bottom: 32px;
    font-size: 12px;
  }

  .stk26-faq {
    padding: 0 0 31px;
  }

  .stk26-faq h2 {
    margin-bottom: 18px;
    font-size: 24px;
    line-height: 1.16;
  }

  .stk26-faq__subhead {
    margin-bottom: 32px;
    font-size: 12px;
    color: var(--stk26-black);
  }

  /* Lines 9-15: 1px rules across the 354px text column. */
  .stk26 .accordion-custom {
    border-bottom-width: 1px;
  }

  /* faq-question: Medium 12px, indented to x31, on a 45px row pitch. */
  .stk26 .accordion-custom .accordion-custom-button {
    padding: 15px 44px 15px 7px;
    border-top-width: 1px;
    font-size: 12px;
  }

  /* Vectors 5/13-17: a 24 x 10 chevron with a 2px stroke. */
  .stk26 .accordion-custom .accordion-custom-button span {
    right: 10px;
    width: 24px;
    height: 10px;
    margin-top: -5px;
  }

  /* answer: Book 10px, grey, on a 306px measure. */
  .stk26 .accordion-custom .accordion-custom-content {
    padding: 24px 34px 24px 14px;
  }

  .stk26 .accordion-custom .accordion-custom-content p,
  .stk26 .accordion-custom .accordion-custom-content li {
    font-size: 10px;
    line-height: 1.2;
    color: var(--stk26-gray);
  }

  .stk26 .accordion-custom .accordion-custom-content p + p,
  .stk26 .accordion-custom .accordion-custom-content ul + p {
    margin-top: 10px;
  }

  .stk26 .accordion-custom .accordion-custom-content ul {
    margin-top: 10px;
    padding-left: 16px;
  }

  .stk26 .accordion-custom .accordion-custom-content li {
    margin-bottom: 6px;
  }

  .stk26-bottom-cta {
    padding: 31px 0 41px;
  }
}

/* ------------------------------------------------------------------ */
/* Container-query fallback for the curriculum cards                  */
/* ------------------------------------------------------------------ */

/* Firefox <110 / Safari <16 have no cqw, so the fluid declarations above
   fall back to the fixed comp values and the copy overruns the card again.
   Three fixed steps stand in for them. Each one carries the value the fluid
   rules resolve to at the NARROW end of its range, which is the value that
   fits across the whole range: the cards row is min(1636px, 100vw - 58px)
   and each card is (row - 76px) / 5, against their 1636px and 312px comp
   widths. Above 1694px the fixed declarations already are the comp, so there
   is no fourth step.

   The card copy has to come down with the rest and not merely wrap: the card
   is on a fixed aspect-ratio with overflow hidden, so text that does not fit
   is dropped off the bottom silently rather than pushing the page wide.

   Held to min-width 1025px so it cannot reach the tablet and mobile blocks
   above, which size the cards explicitly and never needed any of this. */
@supports not (width: 1cqw) {
  /* Card 178px (0.571 of the comp). */
  @media all and (min-width: 1025px) and (max-width: 1199px) {
    .stk26-card__body {
      padding: 27px 23px 0;
    }

    .stk26-card h3 {
      margin-bottom: 17px;
      font-size: 14px;
    }

    .stk26-card p {
      font-size: 14px;
    }
  }

  /* Card 213px (0.683 of the comp). */
  @media all and (min-width: 1200px) and (max-width: 1399px) {
    .stk26-card__body {
      padding: 33px 28px 0;
    }

    .stk26-card h3 {
      margin-bottom: 20px;
      font-size: 16px;
    }

    .stk26-card p {
      font-size: 16px;
    }
  }

  /* Card 253px (0.812 of the comp). */
  @media all and (min-width: 1400px) and (max-width: 1693px) {
    .stk26-card__body {
      padding: 39px 33px 0;
    }

    .stk26-card h3 {
      margin-bottom: 24px;
      font-size: 19px;
    }

    .stk26-card p {
      font-size: 19px;
    }
  }
}

/* ------------------------------------------------------------------ */
/* Container-query fallback for the callout stadiums                  */
/* ------------------------------------------------------------------ */

/* Same reasoning as the cards block above: without cqw the fluid rules fall
   back to the comp's fixed 20px label, which at a narrow desktop pushes the
   stadium past its column. Three fixed steps stand in, each carrying the
   value the fluid rules resolve to at the NARROW end of its range, measured
   against the text column min(1497px, 100vw - 64px). The label's max-width
   and padding are in em, so they follow the font size on their own. Above
   1561px the column is at its comp width and the fixed values already are the
   comp, so there is no fourth step.

   Held to min-width 1025px: the tablet and mobile blocks drop the stadium
   altogether and size the chevron themselves. */
@supports not (width: 1cqw) {
  /* Text column 961px (0.642 of the comp). */
  @media all and (min-width: 1025px) and (max-width: 1199px) {
    .stk26-callout__icon {
      width: 20px;
      height: 24px;
      margin-bottom: 30px;
    }

    .stk26-callout h3 {
      font-size: 13px;
    }
  }

  /* Text column 1136px (0.759 of the comp). */
  @media all and (min-width: 1200px) and (max-width: 1399px) {
    .stk26-callout__icon {
      width: 24px;
      height: 29px;
      margin-bottom: 36px;
    }

    .stk26-callout h3 {
      font-size: 15px;
    }
  }

  /* Text column 1336px (0.893 of the comp). */
  @media all and (min-width: 1400px) and (max-width: 1560px) {
    .stk26-callout__icon {
      width: 29px;
      height: 34px;
      margin-bottom: 42px;
    }

    .stk26-callout h3 {
      font-size: 18px;
    }
  }
}