/* =================== CASE LAB PAGE =================== */
/* case-lab.html is a run of full-bleed sections alternating stock, the same
   rhythm as about.html. Almost nothing here is a new component: the three
   accordion fields are .dir-cell verbatim — only the inks and the column count
   are redeclared, on .cl-acc rather than .dir-grid, because directionsModules()
   binds a single .dir-grid and this page carries three fields (see caseLab() in
   main.js). Both step chains are .ab-chain, the Hall of Fame is .ab-figures
   untouched, and the candidate form is join.html's .join-form, which joinForm()
   picks up with no page gate. Sections 2, 3, 9 and 12b therefore have no rules
   here at all — that absence is the proof of the reuse. */

/* ---- 1. hero: a scoreboard, not a course cover ---- */
.cl-hero{ padding-bottom:clamp(64px, 8vh, 92px); }
.cl-hero-main{ max-width:64ch; }
.cl-hero h1{
  margin-top:20px;
  font-size:clamp(2.6rem, 9vw, 5.6rem); line-height:.96;
  letter-spacing:-.01em; max-width:none;
}
/* Вторая строка вступления: короткая, ударная, не абзац. Золотом и моно —
   так она читается как подпись под обещанием, а не как продолжение текста. */
.cl-hero-claim{
  margin:14px 0 0;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-500);
}

.cl-hero-role{
  margin:14px 0 0;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-500);
}
.cl-cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.cl-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px;
  background:var(--gold-500); color:var(--navy-950);
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none;
  border:1px solid var(--gold-500);
  transition:background-color .25s ease, color .25s ease, transform .25s ease;
}
.cl-btn:hover{ background:var(--gold-400); transform:translateY(-2px); }
.cl-btn:focus-visible{ outline:2px solid var(--gold-300); outline-offset:3px; }
.cl-btn--ghost{ background:transparent; color:#fff; border-color:var(--line-on-dark); }
.cl-btn--ghost:hover{ background:rgba(255,255,255,.06); border-color:var(--gold-500); color:#fff; }

/* the season strip: the same hairline field as everything else, and every value
   in it is either known today or an honest dash */
.cl-season{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  margin:clamp(44px, 6vw, 68px) 0 0;
  border-top:1px solid var(--line-on-dark);
  border-left:1px solid var(--line-on-dark);
}
.cl-season-cell{
  border-right:1px solid var(--line-on-dark);
  border-bottom:1px solid var(--line-on-dark);
  padding:20px 22px 24px;
}
.cl-season dt{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:#8fa0b8;
}
.cl-season dd{
  margin:12px 0 0;
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.05rem, 2vw, 1.35rem); line-height:1.2; color:#fff;
}

/* ---- 4/5/11. the accordion fields ---- */
/* .dir-cell and everything inside it is unscoped and reads its inks from the
   --dir-* set, so a new container is all a new field needs. */
.cl-acc{
  --dir-line:var(--line-on-dark);
  --dir-cell:rgba(11,21,36,.45);
  --dir-cell-hi:rgba(21,44,73,.55);
  --dir-num:var(--gold-500);
  --dir-lead:#fff;
  --dir-cue:#8fa0b8;
  --dir-text:#c9d2e0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  border-top:1px solid var(--dir-line);
  border-left:1px solid var(--dir-line);
}
.cl-acc--paper{
  --dir-line:var(--line-on-paper);
  --dir-cell:transparent;
  --dir-cell-hi:rgba(255,255,255,.6);
  --dir-num:var(--navy-800);
  --dir-lead:var(--ink);
  --dir-cue:var(--ink-soft);
  --dir-cue-hi:var(--navy-800);
  --dir-text:var(--ink-soft);
}
/* the filler keeps the field square: seven modules in a four-up grid would
   leave the last edge without its rules */
.dir-cell--filler{ min-height:0; }

/* rows variant — roles and FAQ read as a list, not as tiles */
.cl-acc--rows{ grid-template-columns:1fr; }
.cl-acc--rows .dir-hit{
  flex-direction:row; align-items:baseline; flex-wrap:wrap;
  min-height:0; gap:10px 18px;
  padding:22px 26px;
}
.cl-acc--rows .dir-index{ min-width:7ch; }
.cl-acc--rows .dir-lead{ flex:1 1 320px; font-size:clamp(1rem,1.5vw,1.2rem); }
.cl-acc--rows .dir-cue{ margin-top:0; margin-left:auto; }
.cl-faq-q{ margin:0; font:inherit; text-transform:none; letter-spacing:0; }

/* ---- section stocks: the alternation, one line each ---- */
.cl-skills,
.cl-path,
.cl-faq{
  background:var(--paper);
  padding:clamp(80px, 10vw, 116px) 0;
  border-bottom:1px solid var(--line-on-paper);
}
.cl-skills .ab-sec-sub,
.cl-path .ab-sec-sub,
.cl-faq .ab-sec-sub{ color:var(--ink-soft); }

.cl-roles,
.cl-motto{
  position:relative; overflow:hidden;
  background:var(--navy-800); color:#fff;
  padding:clamp(80px, 10vw, 116px) 0;
}
.cl-champs{
  position:relative; overflow:hidden;
  background:var(--navy-950); color:#fff;
  padding:clamp(80px, 10vw, 116px) 0;
}
.cl-roles .grid-overlay,
.cl-champs .grid-overlay,
.cl-motto .grid-overlay{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(to right, var(--line-on-dark) 0 1px, transparent 1px calc(100%/6)),
    repeating-linear-gradient(to bottom, var(--line-on-dark) 0 1px, transparent 1px calc(100%/8));
  opacity:.42;
}
.cl-roles .wrap,
.cl-champs .wrap,
.cl-motto .wrap{ position:relative; z-index:1; }
.cl-roles .eyebrow,
.cl-champs .eyebrow,
.cl-motto .eyebrow{ color:var(--gold-400); }
.cl-roles .ab-sec-sub,
.cl-champs .ab-sec-sub{ color:#c9d2e0; }

/* every in-page CTA target has to clear the fixed tape and bar; the bar is
   taller below 1140px, so this is a calc and not the hardcoded 84px used
   elsewhere on the site */
#cl-how,
#cl-join,
#cl-form{ scroll-margin-top:calc(var(--tape-h) + var(--nav-h) + 16px); }

/* ---- 6. the candidate path: .ab-chain on paper ---- */
.ab-chain--paper{
  border-top-color:var(--line-on-paper);
  border-left-color:var(--line-on-paper);
}
.ab-chain--paper .ab-step{
  border-right-color:var(--line-on-paper);
  border-bottom-color:var(--line-on-paper);
}
.ab-chain--paper .ab-step:hover{ background-color:rgba(255,255,255,.55); }
.ab-chain--paper .ab-step h3{ color:var(--ink); }
.ab-chain--paper .ab-step p{ color:var(--ink-soft); }
.ab-chain--paper .ab-step:hover p{ color:var(--ink); }
.ab-chain--paper .ab-step-arrow{ background:var(--paper); color:var(--navy-700); }
.ab-chain--paper .ab-step-num{ color:var(--navy-700); }

/* ---- 7. championships: the empty state, stated plainly ---- */
.cl-champ-empty{
  border:1px solid var(--line-on-dark);
  border-left:2px solid var(--gold-500);
  background:rgba(21,44,73,.32);
  padding:clamp(28px, 4vw, 40px);
  max-width:72ch;
}
.cl-champ-id{
  margin:0;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-500);
}
.cl-champ-line{
  margin:18px 0 0;
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.25rem, 2.6vw, 1.8rem); line-height:1.25; color:#fff;
}
.cl-champ-note{ margin:16px 0 0; max-width:56ch; font-size:.95rem; line-height:1.7; color:#c9d2e0; }
.cl-champ-empty .ab-more{ margin-top:22px; }

/* the ladder a team walks, from registration to the final */
.cl-status{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:clamp(30px, 4vw, 44px) 0 0; padding:0;
  list-style:none; counter-reset:cl-stage;
}
.cl-status li{
  counter-increment:cl-stage;
  display:flex; align-items:center; gap:9px;
  padding:9px 14px;
  border:1px solid var(--line-on-dark);
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:#8fa0b8;
  transition:color .25s ease, border-color .25s ease;
}
.cl-status li::before{ content:counter(cl-stage,decimal-leading-zero); color:var(--gold-500); }
.cl-status li:hover{ color:#fff; border-color:var(--gold-500); }

/* ---- 8. away days ---- */
.cl-trips{ padding-bottom:0; }
.cl-route{ margin-top:clamp(38px, 5vw, 56px); }
.cl-route-head{
  margin:0 0 16px;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
}
.cl-route-line{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px;
  margin:0; padding:0 0 18px; list-style:none;
  border-bottom:1px solid var(--line-on-paper);
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.1rem, 2.4vw, 1.6rem); color:var(--ink);
}
.cl-route-line li.is-empty{ color:var(--navy-700); }
.cl-route-line li + li::before{ content:'→'; margin-right:18px; color:var(--navy-700); }
.cl-route-note{ margin:14px 0 0; font-size:.9rem; line-height:1.65; color:var(--ink-soft); }

/* ---- 10. culture: one team, one deadline ---- */
.cl-motto h2{
  margin-top:18px;
  font-size:clamp(2rem, 6vw, 4rem); line-height:1.02;
  text-transform:none; max-width:14ch;
}
.cl-motto-text{ margin:26px 0 0; max-width:58ch; font-size:1.05rem; line-height:1.75; color:#c9d2e0; }
.cl-motto-marks{
  display:flex; flex-wrap:wrap; gap:0;
  margin:clamp(34px, 4vw, 48px) 0 0; padding:0; list-style:none;
}
.cl-motto-marks li{
  padding:0 20px;
  border-left:1px solid var(--line-on-dark);
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:#8fa0b8;
}
.cl-motto-marks li:first-child{ padding-left:0; border-left:0; }

/* ---- 12. the bot callout under the CTA ---- */
.cl-bot{
  margin:26px 0 0;
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.06em;
  color:#8fa0b8;
}
.cl-bot .footer-tg{ margin-left:10px; color:var(--gold-400); }
.cl-form-block{ background:var(--paper); }

/* ---- 3a. the time budget: the page's own mechanic, nothing else uses it ---- */
.cl-budget{ margin:0 0 clamp(40px, 5vw, 60px); }
.cl-budget-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; flex-wrap:wrap; margin-bottom:18px;
}
.cl-budget-title{
  margin:0;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-400);
}
/* Формат остался один, и переключать нечего: вместо ряда кнопок — подпись
   тем же кеглем, что и заголовок блока. Стили кнопок ниже оставлены: они
   понадобятся, если форматов снова станет два. */
.cl-budget-label{
  margin:0; padding:10px 16px;
  border:1px solid var(--line-on-dark);
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:#8fa0b8;
}
.cl-budget-switch{ display:flex; border:1px solid var(--line-on-dark); }
.cl-budget-btn{
  padding:10px 16px; margin:0; border:0; background:none; cursor:pointer;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:#8fa0b8;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .25s ease, color .25s ease;
}
.cl-budget-btn + .cl-budget-btn{ border-left:1px solid var(--line-on-dark); }
.cl-budget-btn:hover{ color:#fff; }
.cl-budget-btn[aria-pressed="true"]{ background:var(--gold-500); color:var(--navy-950); }
.cl-budget-btn:focus-visible{ outline:2px solid var(--gold-300); outline-offset:-3px; }

/* one rail, five slices; flex-grow carries the change so the widths animate
   between the two formats instead of jumping */
.cl-budget-bar{
  display:flex; align-items:stretch;
  overflow-x:auto;
  border:1px solid var(--line-on-dark);
  background:rgba(11,21,36,.45);
}
.cl-budget-seg{
  /* min-width keeps the longest caption on one line, which is the whole reason
     the times sit on a single baseline across all five slices */
  flex:0 1 auto; min-width:138px;
  display:flex; flex-direction:column;
  padding:16px 14px 18px;
  border-left:1px solid var(--line-on-dark);
  transition:flex-grow .55s cubic-bezier(.22,.8,.24,1), background-color .25s ease;
}
.cl-budget-seg:first-child{ border-left:0; }
.cl-budget-seg:hover{ background-color:rgba(21,44,73,.55); }
.cl-seg-name{
  display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.08em;
  text-transform:uppercase; color:#8fa0b8; line-height:1.5;
}
.cl-seg-time{
  /* margin-top:auto pins every number to the bottom of its slice, so a caption
     that ever does wrap still cannot knock one figure off the line */
  display:block; margin-top:auto; padding-top:14px;
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(.95rem, 1.6vw, 1.25rem); line-height:1;
  font-variant-numeric:tabular-nums; color:#fff;
}
.cl-budget-bar[data-cl-mode="final"] .cl-seg-time{ color:var(--gold-400); }
/* while a figure is counting it goes gold and leans a touch — otherwise the
   roll is invisible on a number that only travels a few digits */
.cl-seg-time{ transition:color .25s ease, transform .25s ease; transform-origin:left bottom; }
.cl-seg-time.is-rolling{ color:var(--gold-400); transform:scale(1.08); }
.cl-budget-bar[data-cl-mode="final"] .cl-seg-time.is-rolling{ color:#fff; }
.cl-budget-note{ margin:16px 0 0; max-width:62ch; font-size:.92rem; line-height:1.7; color:#c9d2e0; }

/* ---- 5. the team builder ---- */
.cl-builder{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(24px, 3vw, 40px); align-items:start;
}
.cl-role-pick{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  border-top:1px solid var(--line-on-dark);
  border-left:1px solid var(--line-on-dark);
}
.cl-role{
  display:flex; flex-direction:column; gap:10px;
  padding:22px 22px 20px; margin:0;
  border:0;
  border-right:1px solid var(--line-on-dark);
  border-bottom:1px solid var(--line-on-dark);
  background:rgba(11,21,36,.45);
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .25s ease, opacity .25s ease;
}
.cl-role:hover{ background-color:rgba(21,44,73,.6); }
.cl-role:focus-visible{ outline:2px solid var(--gold-500); outline-offset:-4px; }
.cl-role-name{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1rem,1.6vw,1.2rem); line-height:1.2; color:#fff;
}
.cl-role-line{ font-size:.88rem; line-height:1.55; color:#c9d2e0; }
.cl-role-weights{
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.1em;
  text-transform:uppercase; color:#8fa0b8;
}
.cl-role-act{
  margin-top:auto; padding-top:10px;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-500);
  display:flex; align-items:center; gap:8px;
}
.cl-role-act i{ font-style:normal; transition:transform .3s ease; }
/* picked: gold edge on the left, the plus turns into a minus */
.cl-role.is-picked{ background-color:rgba(214,158,39,.14); box-shadow:inset 3px 0 0 var(--gold-500); }
.cl-role.is-picked .cl-role-act i{ transform:rotate(45deg); }
.cl-role.is-picked .cl-role-act{ color:var(--gold-500); }
/* five roles in a two-up field leave one edge ragged — same filler trick as
   the competency grid */
.cl-role--filler{ background:transparent; cursor:default; padding:0; }
.cl-role--filler:hover{ background:transparent; }
.cl-role.is-locked{ opacity:.4; cursor:not-allowed; }
.cl-role.is-locked:hover{ background-color:rgba(11,21,36,.45); }

.cl-roster{
  border:1px solid var(--line-on-dark);
  background:rgba(11,21,36,.55);
  padding:clamp(20px, 2.4vw, 28px);
}
.cl-roster-head,
.cl-cover-head{
  margin:0;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:#8fa0b8;
}
.cl-roster-head span{ color:var(--gold-500); }
.cl-roster-slots{
  list-style:none; margin:16px 0 26px; padding:0;
  counter-reset:cl-slot;
}
.cl-roster-slots li{
  counter-increment:cl-slot;
  display:flex; align-items:center; gap:12px;
  padding:11px 0;
  border-bottom:1px dashed var(--line-on-dark);
  font-family:var(--f-display); font-weight:600; font-size:.98rem; color:#fff;
  transition:color .25s ease;
}
.cl-roster-slots li::before{
  content:counter(cl-slot,decimal-leading-zero);
  font-family:var(--f-mono); font-weight:400; font-size:.68rem;
  letter-spacing:.1em; color:var(--gold-500);
}
.cl-roster-slots li.is-empty{ color:rgba(255,255,255,.68); font-weight:400; }
.cl-roster-slots li.is-empty::before{ color:rgba(255,255,255,.68); }

.cl-cover{ margin-top:14px; }
.cl-cover-row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto;
  align-items:center; gap:12px;
  padding:9px 0;
}
.cl-cover-name{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase; color:#c9d2e0;
}
.cl-cover-track{
  position:relative; height:4px; display:block;
  background:rgba(255,255,255,.12);
}
.cl-cover-track i{
  position:absolute; inset:0 auto 0 0; width:0;
  background:var(--gold-500);
  transition:width .5s cubic-bezier(.22,.8,.24,1), background-color .3s ease;
}
.cl-cover-row.is-thin .cl-cover-track i{ background:#b8402a; }
.cl-cover-val{
  font-family:var(--f-mono); font-weight:500; font-size:.7rem;
  font-variant-numeric:tabular-nums; color:#fff; min-width:4ch; text-align:right;
}
.cl-cover-row.is-thin .cl-cover-val{ color:#e08a76; }
.cl-verdict{
  margin:22px 0 0; padding-top:18px;
  border-top:1px solid var(--line-on-dark);
  font-size:.92rem; line-height:1.65; color:#c9d2e0;
}

/* ---- 12. the CTA and its blank pass ---- */
/* the stock .join-cta is a single left column, which left half the band empty
   on a page this wide — the empty seat fills it and says the same thing the
   heading does */
.cl-cta .wrap{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.52fr);
  gap:clamp(32px, 5vw, 72px); align-items:center;
}
.cl-cta-text h2{ margin-top:0; }
.cl-cta-pass{ max-width:320px; justify-self:end; width:100%; }
/* one card, so the field is a single column and keeps the paper inks the pass
   carries everywhere else on the site */
.cl-cta-pass .team-grid{
  grid-template-columns:1fr;
  --card-line:var(--line-on-paper);
  --card-name:var(--ink);
  --card-role:var(--navy-800);
  --card-dim:var(--ink-soft);
  --card-note:var(--ink-soft);
}
/* no portrait to duotone: the plate becomes the empty seat itself */
.cl-cta-pass .member .frame{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:linear-gradient(160deg, var(--navy-800), var(--navy-950));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.cl-cta-pass .member .frame::before,
.cl-cta-pass .member .frame::after{ display:none; }
.cl-pass-mark{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(2.4rem, 6vw, 3.4rem); line-height:1; letter-spacing:.08em;
  color:var(--gold-500);
}
.cl-pass-slot{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:#8fa0b8;
  padding:6px 12px; border:1px dashed rgba(255,255,255,.22);
}
/* .join-cta sets `p{ margin:18px 0 0 }` on every paragraph in the band, and it
   is one point more specific than the .badge-* rules — inside the pass that
   swallowed the space under the id rule, pushed the field rows to the top of
   their band and killed the `margin-top:auto` that pins the turn line to the
   bottom. The card gets its own spacing back, with the two gaps around the
   fields set equal so the rows sit centred between the hairlines. */
.cl-cta-pass .badge-head{ margin:0; max-width:none; }
.cl-cta-pass .badge-id{ margin:6px 0 18px; max-width:none; }
.cl-cta-pass .badge-bio{ margin:18px 0 0; max-width:none; }
.cl-cta-pass .badge-turn{ margin:auto 0 0; max-width:none; }
.cl-cta-pass .member .name,
.cl-cta-pass .member .member-meta{ margin:0; max-width:none; }

.cl-pass-hint{
  margin:18px 0 0; text-align:center;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:#6d7b90;
}

/* ---- the teaser on index.html ---- */
.cl-teaser{ padding-bottom:clamp(80px, 10vw, 116px); border-bottom:1px solid var(--line-on-paper); }
.cl-teaser .tt-head{ margin-bottom:24px; }
.cl-teaser .tt-head a.more{ color:var(--navy-800); }
.cl-teaser-sub{ margin:0 0 clamp(34px, 4vw, 48px); max-width:60ch; font-size:1rem; line-height:1.7; color:var(--ink-soft); }

/* ---- responsive ---- */
@media (max-width:1320px){
  .cl-acc{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:1040px){
  .cl-builder{ grid-template-columns:1fr; }
  .cl-cta .wrap{ grid-template-columns:1fr; }
  .cl-cta-pass{ justify-self:start; }
}
@media (max-width:820px){
  /* the rail turns on its side: flex-grow now carries height, so the same
     transition still shows the two formats trading time */
  .cl-budget-bar{ flex-direction:column; height:400px; }
  .cl-budget-seg{
    border-left:0; border-top:1px solid var(--line-on-dark);
    min-width:0; padding:12px 16px;
  }
  .cl-budget-seg:first-child{ border-top:0; }
  .cl-seg-time{ margin-top:auto; padding-top:6px; }
}
@media (max-width:600px){
  .cl-role-pick{ grid-template-columns:1fr; }
  .cl-role--filler{ display:none; }
  .cl-budget-switch{ width:100%; }
  .cl-budget-btn{ flex:1 1 0; }
}
@media (max-width:900px){
  .cl-season{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:700px){
  .cl-acc{ grid-template-columns:1fr; }
  .dir-cell--filler{ display:none; }
  .cl-acc--rows .dir-cue{ margin-left:0; }
  .cl-cta-row .cl-btn{ flex:1 1 100%; justify-content:center; }
}
@media (max-width:520px){
  .cl-season{ grid-template-columns:1fr; }
  .cl-motto-marks li{ padding:0 14px; }
}