/* Configuration ladder — one vertical's seven configurations, on the landing
   page that sells that vertical.

   Sibling of the composition atlas in pages/products-bundles.css, deliberately
   not a copy of it. The atlas is a catalogue: twelve expertises, every brick
   itemised, read by someone comparing. This is a shelf: one expertise, seven
   rungs, read by someone who has already chosen and is asking which engagement
   to buy. So the atlas gets a grid of tall cards and this gets a horizontal
   scroller of short ones — the ladder has to stay readable inside an
   already-long landing page, where it is one section among twenty-three.

   The five --t0-* primitive tones come from tokens.css, shared with the atlas so
   a brick is the same colour in both places. */

.config-ladder{margin-top:44px}

.config-ladder [data-medium="framework"]{--tone:var(--t0-framework)}
.config-ladder [data-medium="office_hours"]{--tone:var(--t0-office_hours)}
.config-ladder [data-medium="cohort"]{--tone:var(--t0-cohort)}
.config-ladder [data-medium="programme"]{--tone:var(--t0-programme)}
.config-ladder [data-medium="capacity"]{--tone:var(--t0-capacity)}

/* ---------------------------------------------------------------- head */

.ladder-head{margin-bottom:22px;display:grid;gap:14px}

.ladder-title{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,3.2vw,2rem);
  line-height:1.15;
  margin:0;
  text-wrap:balance;
}

.ladder-lead{
  color:var(--silver);
  max-width:62ch;
  margin:0;
  line-height:1.6;
  text-wrap:pretty;
}

/* The legend, compact. Each formula below resolves against these five letters,
   so they are printed before anything uses them. */
.ladder-key{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
}

.ladder-key-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.78rem;
  color:var(--silver);
}

.ladder-key-glyph{
  display:grid;
  place-items:center;
  inline-size:20px;
  block-size:20px;
  border-radius:6px;
  font-family:var(--font-display);
  font-size:.8rem;
  font-weight:700;
  color:var(--tone,var(--cyan));
  background:color-mix(in srgb,var(--tone,var(--cyan)) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--tone,var(--cyan)) 34%,transparent);
}

/* The one number every band is built from, printed where the specialty factor
   applies. Absent on the two programme verticals, which combine several
   expertises and carry no single factor. */
.ladder-rate{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 14px;
  margin:0;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-2);
}

.ladder-rate-label{
  font-size:.72rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--silver);
}

.ladder-rate-sum{display:inline-flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.ladder-rate-term{font-size:.9rem;color:color-mix(in srgb,var(--paper) 82%,var(--silver))}
.ladder-rate-op{color:var(--silver);font-size:.8rem}
.ladder-rate-total{font-family:var(--font-display);font-size:1.16rem;color:var(--cyan)}
.ladder-rate-method{font-size:.78rem;color:var(--silver);margin-inline-start:auto}
.ladder-rate-method:hover{color:var(--cyan)}

/* --------------------------------------------------------------- rungs */

/* A wrapping bento grid rather than a horizontal scroller: seven priced
   options read as one scannable block instead of a strip that hides most of
   them off-screen. The three deepest engagements (B5-B7) span two rows, so the
   cheapest-to-deepest ramp still reads through visual weight rather than
   through scroll position. */
.ladder-rungs{
  list-style:none;
  margin:0;
  padding:0 4px 14px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  grid-auto-rows:1fr;
  gap:12px;
}

.rung{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto auto auto auto 1fr auto auto auto auto;
  gap:10px;
  padding:16px 16px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  min-inline-size:0;
}

/* The plate, the pane, and the content, in that stacking order. The two
   decorative layers are absolutely positioned, so they are out of flow and
   never consume one of the nine grid rows above. */
.rung-bg{
  position:absolute;
  inset:0;
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
  z-index:0;
  transition:transform .35s ease;
}

/* Frosted, and denser toward the bottom: the plate reads at the top, behind
   the icon and the formula, which are decorative, and thickens before the card
   starts making claims a visitor has to be able to read.

   The blur is 8px, not the 16px this started at. The pool is soft abstract
   line-work on a near-black ground; blurred any harder it stops being a
   picture of anything and the card reads as a flat violet fill — which is the
   colour background this was meant to replace. */
.rung-glass{
  position:absolute;
  inset:0;
  z-index:1;
  -webkit-backdrop-filter:blur(8px) saturate(125%);
  backdrop-filter:blur(8px) saturate(125%);
  background:linear-gradient(
    to bottom,
    color-mix(in srgb,var(--glass) 34%,transparent) 0%,
    color-mix(in srgb,var(--glass) 62%,transparent) 26%,
    color-mix(in srgb,var(--glass) 80%,transparent) 100%
  );
}

/* Light theme inverts the problem. The plates are dark art built for the dark
   UI, and --glass is white here, so the same tint that keeps a dark card
   legible leaves dark body text sitting on a mid-grey photograph. The plate
   stays as texture rather than as subject. */
html[data-theme="light"] .rung-bg{opacity:.5}
html[data-theme="light"] .rung-glass{
  background:linear-gradient(
    to bottom,
    color-mix(in srgb,var(--glass) 78%,transparent) 0%,
    color-mix(in srgb,var(--glass) 90%,transparent) 26%,
    color-mix(in srgb,var(--glass) 96%,transparent) 100%
  );
}

.rung>*:not(.rung-bg):not(.rung-glass){position:relative;z-index:2}

.rung:hover .rung-bg{transform:scale(1.04)}

/* The icon sits directly on the plate, where the pane is thinnest, so it
   carries its own small disc rather than relying on the card's tint. */
.rung-visual{
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb,var(--cyan) 26%,transparent);
}

/* One abstract identity glyph per bundle, centred in a muted circle. Neutral
   tone rather than a --tone borrowed from a delivery medium: a bundle
   combines several media, so no single medium's colour is honestly "the"
   colour of the configuration. */
.rung-visual{
  display:grid;
  place-items:center;
  inline-size:52px;
  block-size:52px;
  border-radius:50%;
  color:var(--cyan);
  background:color-mix(in srgb,var(--cyan) 12%,transparent);
}

.rung-visual svg{inline-size:26px;block-size:26px}

/* A configuration containing a format that is scoped before it is priced. The
   distinction is carried by the band label and the note as well, so the border
   is reinforcement, never the only signal. */
.rung--scoped{border-style:dashed;border-color:var(--line-strong)}

.rung-formula{
  display:flex;
  align-items:center;
  gap:3px;
  margin:0;
  min-block-size:26px;
}

.rung-formula .glyph{
  display:grid;
  place-items:center;
  inline-size:24px;
  block-size:24px;
  border-radius:7px;
  font-family:var(--font-display);
  font-size:.86rem;
  font-weight:700;
  color:var(--tone,var(--cyan));
  background:color-mix(in srgb,var(--tone,var(--cyan)) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--tone,var(--cyan)) 38%,transparent);
}

/* A brick that exists for this expertise but is not in this configuration.
   Dimmed rather than removed, so every rung prints the same five slots and the
   ladder can be read down a column. */
.rung-formula .glyph--out{
  color:var(--silver);
  background:transparent;
  border-color:var(--line);
  opacity:.42;
}

.rung-formula .glyph-join{color:var(--silver);font-size:.7rem;opacity:.5}

.rung-identity{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}

.rung-code{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  padding:2px 7px;
  border-radius:999px;
  color:var(--silver);
  border:1px solid var(--line);
}

.rung-name{
  font-family:var(--font-display);
  font-size:1.14rem;
  line-height:1.2;
  margin:0;
}

.rung-reason{
  margin:0;
  font-size:.83rem;
  line-height:1.55;
  color:var(--silver);
  text-wrap:pretty;
}

.rung-includes{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:5px;
  align-content:start;
}

.rung-includes li{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.79rem;
  line-height:1.4;
  flex-wrap:wrap;
}

.rung-includes-glyph{
  display:grid;
  place-items:center;
  inline-size:17px;
  block-size:17px;
  border-radius:5px;
  flex:none;
  font-family:var(--font-display);
  font-size:.7rem;
  font-weight:700;
  color:var(--tone,var(--cyan));
  background:color-mix(in srgb,var(--tone,var(--cyan)) 14%,transparent);
}

.rung-includes-scoped{
  font-size:.68rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--warning);
}

.rung-band{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:0;
  padding-top:10px;
  border-top:1px solid var(--line);
}

.rung-band-label{
  font-size:.68rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--silver);
}

.rung-band strong{
  font-family:var(--font-display);
  font-size:1.2rem;
  color:var(--paper);
  text-align:end;
}

.rung--scoped .rung-band strong{color:color-mix(in srgb,var(--paper) 72%,var(--silver))}

.rung-note{
  margin:0;
  font-size:.72rem;
  line-height:1.45;
  color:var(--silver);
  text-wrap:pretty;
}

.rung-actions{display:grid;gap:6px}

.rung-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:9px 12px;
  border-radius:11px;
  font-size:.82rem;
  font-weight:640;
  text-align:center;
  color:var(--ink);
  background:var(--cyan);
  border:1px solid transparent;
  transition:transform .16s ease,filter .16s ease;
}

.rung-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
.rung-cta:focus-visible{outline:2px solid var(--paper);outline-offset:2px}

.rung-detail{
  font-size:.73rem;
  text-align:center;
  color:var(--silver);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--line-strong);
}

.rung-detail:hover{color:var(--cyan)}

/* The itemised bill, collapsed by default. Same chevron technique as
   .method-panel in pages/products-bundles.css, so this reads as the same
   disclosure control rather than a second design for "click to expand". */
.rung-panel{
  border-top:1px solid var(--line);
  padding-top:10px;
  margin:0;
}

.rung-panel-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  list-style:none;
  font-size:.78rem;
  color:var(--silver);
}

.rung-panel-toggle::-webkit-details-marker{display:none}
.rung-panel-toggle::after{
  content:"";
  width:7px;height:7px;
  margin-left:auto;
  border-right:2px solid var(--silver);
  border-bottom:2px solid var(--silver);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s ease;
}

.rung-panel[open]>.rung-panel-toggle::after{transform:rotate(-135deg) translate(-2px,-2px)}
.rung-panel-toggle:hover{color:var(--cyan)}
.rung-panel-toggle:focus-visible{
  outline:3px solid color-mix(in srgb,var(--cyan) 40%,transparent);
  outline-offset:2px;
}

.rung-panel-body{padding-top:12px;display:grid;gap:12px}

/* The itemised bill, styled here rather than inherited. ``.config-parts`` and
   its children live in pages/products-bundles.css, which the expertise pages
   do not load — the panel shipped as a bare <ul> with default markers until
   this existed. Scoped to the panel so nothing leaks back to the atlas, which
   has its own, denser treatment. */
.rung-panel-body .config-parts{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:7px;
}

.rung-panel-body .part{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:.78rem;
  line-height:1.45;
}

.rung-panel-body .part--out{opacity:.5}

.rung-panel-body .part-glyph{
  display:grid;
  place-items:center;
  inline-size:17px;
  block-size:17px;
  border-radius:5px;
  flex:none;
  font-family:var(--font-display);
  font-size:.7rem;
  font-weight:700;
  color:var(--tone,var(--cyan));
  background:color-mix(in srgb,var(--tone,var(--cyan)) 14%,transparent);
}

.rung-panel-body .part-body{display:grid;gap:2px;min-inline-size:0;flex:1 1 auto}
.rung-panel-body .part-name a{text-decoration:underline;text-underline-offset:3px}
.rung-panel-body .part-name a:hover{color:var(--cyan)}

.rung-panel-body .part-reference{
  font-size:.68rem;
  line-height:1.4;
  color:var(--silver);
}

.rung-panel-body .part-state{
  margin-inline-start:auto;
  text-align:end;
  white-space:nowrap;
  flex:none;
}

.rung-panel-body .part-amount{font-variant-numeric:tabular-nums}

.rung-panel-body .part-scoped{
  display:block;
  font-size:.62rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--warning);
}

/* The visually-hidden "not included" label the atlas also uses: it is what a
   screen reader hears where a sighted reader sees an em dash. */
.rung-panel-body .atlas-sr{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* The embedded card drops its own border/background/padding here — it is a
   sub-section of the rung, not a card inside a card. It carries no plate of
   its own either (``hide_visual``): it is already sitting on the rung's. */
.rung-panel-body .config{
  border:none;
  background:none;
  padding:0;
  gap:10px;
}

.ladder-foot{
  margin:14px 0 0;
  font-size:.75rem;
  line-height:1.5;
  color:var(--silver);
  display:flex;
  flex-wrap:wrap;
  gap:4px 10px;
}

.ladder-foot a{color:var(--silver);text-decoration:underline;text-underline-offset:3px}
.ladder-foot a:hover{color:var(--cyan)}

/* ------------------------------------------------- the chosen-rung chip */

/* Shown above the lead form once a rung is clicked. Visible on purpose: the
   submission is being tagged with what the visitor chose, so the visitor is
   shown it and given a control to drop it. A hidden field that silently
   recorded the click would be the same data collected worse. */
.config-chip{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
  padding:11px 14px;
  border:1px solid color-mix(in srgb,var(--cyan) 34%,transparent);
  border-radius:13px;
  background:color-mix(in srgb,var(--cyan) 8%,transparent);
  font-size:.82rem;
}

.config-chip-label{
  font-size:.68rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--silver);
}

.config-chip-value{font-weight:640}
.config-chip-band{color:var(--cyan);font-family:var(--font-display);font-size:1rem}

.config-chip-clear{
  margin-inline-start:auto;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--silver);
  font:inherit;
  font-size:.72rem;
  cursor:pointer;
}

.config-chip-clear:hover{color:var(--paper);border-color:var(--paper)}
.config-chip-clear:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---------------------------------------------------------- responsive */

@media (max-width:720px){
  .ladder-rungs{grid-template-columns:1fr;grid-auto-rows:auto}
  .ladder-rate-method{margin-inline-start:0}
}

/* No backdrop-filter, no frosting — so the pane stops pretending to be glass
   and becomes a near-opaque tint instead. A translucent pane over an
   unblurred photograph is the one combination that fails to be readable. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .rung-glass{background:color-mix(in srgb,var(--glass) 95%,transparent)}
}

/* The visitor asked the operating system for less transparency. The plate is
   decoration; legibility is not, so the pane goes fully opaque. */
@media (prefers-reduced-transparency:reduce){
  .rung-glass{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background:var(--glass);
  }
}

@media (prefers-reduced-motion:reduce){
  .rung-cta{transition:none}
  .rung-cta:hover{transform:none}
  .rung-panel-toggle::after{transition:none}
  .rung-bg{transition:none}
  .rung:hover .rung-bg{transform:none}
}