/* ============================================================================
   THE STUDIO — the arm's own components

   Deliberately small. The Studio is the house's default register, so unlike
   the Qur'an arm it shifts no colour token at all — `data-arm="studio"` exists
   only so the arm bar's scroll-margin rule in site.css applies.

   Most of what these pages need already exists and is reused rather than
   rebuilt: the ownership arithmetic is set in `.rate`/`.rrow`, the site's own
   visual language for money; minor-vs-major is two `.facts` lists; the
   seasonal calendar is a `.timeline`; the FAQ, arm bar and download link all
   come from site.css.

   What is here is the two things that genuinely had no home.

   Depends on assets/css/site.css. Load it after.
   ========================================================================== */

/* ---------------------------------------------------------------- ladder   */
/* The care tiers. Four columns of feature lists is the conventional answer
   and it is unreadable on a phone, so this is a ladder instead: each rung
   shows only what it ADDS to the one below it. Shorter to read, honest about
   the relationship, and it collapses to a single column without losing the
   comparison. */
.ladder{border-top:1px solid var(--line)}
.rung{
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(16px,3vw,44px);align-items:start;
  padding:clamp(22px,3vw,32px) 0;border-bottom:1px solid var(--line-soft)
}
.rung .plan{display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap;margin-bottom:.5em}
.rung .plan h3{font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);margin:0}
.rung .amt{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);line-height:1;white-space:nowrap
}
.rung .amt span{
  font-family:var(--f-body);font-weight:400;font-size:.72rem;
  color:var(--ink-faint);letter-spacing:0
}
.rung .who{color:var(--ink-soft);font-size:.93rem;margin:0;max-width:38ch}
.rung .prev{
  font-family:var(--f-body);font-weight:600;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin:0 0 .9em
}
.rung ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.rung ul li{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  font-size:.955rem;color:var(--ink-soft)
}
.rung ul li::before{
  content:"";width:5px;height:5px;margin-top:.58em;flex:none;
  background:var(--gold-line);transform:rotate(45deg)
}
.rung ul li b{color:var(--ink);font-weight:700}
/* The tier we would recommend, marked once and quietly. The negative margin
   lets the tint breathe past the text on both sides while the text itself
   stays aligned with every other rung. */
.rung.pick{
  background:var(--gold-wash);
  padding-inline:clamp(14px,2vw,22px);
  margin-inline:calc(-1 * clamp(14px,2vw,22px))
}
.rung.pick .plan h3{color:var(--ink)}
@media (max-width:820px){
  .rung{grid-template-columns:1fr;gap:16px}
  .rung .who{max-width:none}
}

/* ---------------------------------------------------------------- metrics  */
/* Four numbers on the case study. Evidence, not decoration — every one of
   them is checkable against the delivered repository. */
.metrics{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)
}
.metrics div{background:var(--paper);padding:clamp(18px,2.4vw,26px)}
.band-alt .metrics div{background:var(--paper-2)}
.metrics .n{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(2.1rem,1.5rem + 2.2vw,3.2rem);line-height:1;
  letter-spacing:-.02em;color:var(--ink);display:block;margin-bottom:.35em
}
.metrics .k{
  font-family:var(--f-body);font-weight:600;font-size:.63rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.5em
}
.metrics p{font-size:.85rem;color:var(--ink-soft);margin:0;line-height:1.45}
@media (max-width:900px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.metrics{grid-template-columns:1fr}}