/* Decisions page: maturity ladder pin, DSS inputs, human judgement, Simon's steps. */

.hero h1 { font-size: clamp(44px, 7.4vw, 120px); }
.hero .lede { max-width: 56ch; }
.hero .float.order {
  display: flex; flex-direction: column; gap: 4px; width: 230px; padding: var(--space-4);
  background: var(--color-accent-100); color: var(--color-accent-900); box-shadow: var(--shadow-lg); font-size: 14px;
}
.hero .float.order b { font-size: 30px; font-weight: 600; }
.hero .float.note {
  max-width: 190px; padding: var(--space-3) var(--space-4); font-style: italic; font-size: 17px;
  background: color-mix(in srgb, var(--color-process-yellow) 32%, var(--color-bg));
}

/* Analytics maturity ladder, pinned */
.ladder { position: relative; height: 520vh; }
.ladder .stage {
  position: sticky; top: 0; height: 100vh;
  padding-top: clamp(90px, 12vh, 120px); padding-bottom: var(--space-8);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(24px, 5vw, 80px); align-items: center;
}
.ladder .intro { display: flex; flex-direction: column; gap: var(--space-6); }
.ladder h2 { margin: 0; font-size: clamp(34px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.02em; }
.ladder .intro p { margin: 0; max-width: 44ch; font-size: 18px; line-height: 1.5; color: var(--color-neutral-800); text-wrap: pretty; }
.ladder .rungs { display: flex; flex-direction: column-reverse; gap: var(--space-2); max-width: 380px; }
.ladder .rung { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: var(--space-3); font-size: 14px; }
.ladder .rung .bar { height: 6px; background: var(--color-neutral-200); overflow: hidden; }
.ladder .rung .bar > span { display: block; height: 100%; background: var(--color-accent); transform-origin: left; }
.js .ladder .rung .bar > span { transform: scaleX(0); }

.ladder .tiers { position: relative; height: min(66vh, 580px); }
.ladder .num { position: absolute; top: 0; left: 0; font-size: clamp(140px, 20vw, 300px); font-weight: 600; }
.ladder .tiers ul { list-style: none; margin: 0; padding: 0; }
.ladder .tier { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.js .ladder .tier { opacity: 0; }
.ladder .tier h3 { margin: 0; font-size: clamp(28px, 3vw, 44px); line-height: 1.05; letter-spacing: -.015em; font-weight: 600; }
.ladder .tier .dot { color: var(--color-accent); margin-right: .3em; }
.ladder .tier .q { font-style: italic; font-weight: 400; color: var(--color-accent-700); }
.ladder .tier p { margin: 0; max-width: 46ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; text-wrap: pretty; }

/* DSS inputs converging on the hub */
.dss {
  position: relative; min-height: 100vh;
  padding-top: clamp(80px, 14vh, 160px); padding-bottom: clamp(80px, 14vh, 160px);
  display: flex; flex-direction: column; gap: var(--space-8);
}
.dss .section-head p { max-width: 64ch; }
.dss b { font-weight: 600; }
.dss b.in { color: var(--color-accent-700); }
.dss b.ex { color: var(--color-accent-2-700); }
.dss .flow {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-6); align-items: center; min-height: 420px;
}
.dss .side { display: flex; flex-direction: column; gap: var(--space-3); }
.dss .side.left { align-items: flex-end; }
.dss .side.right { align-items: flex-start; }
.dss .label { font-size: 15px; margin-bottom: var(--space-2); }
.dss .left .label { color: var(--color-accent-700); }
.dss .right .label { color: var(--color-accent-2-700); }
.dss .src { padding: var(--space-2) var(--space-3); box-shadow: var(--shadow-sm); font-size: 16px; will-change: transform; }
.dss .left .src { background: var(--color-accent-100); color: var(--color-accent-900); }
.dss .right .src { background: var(--color-accent-2-100); color: var(--color-accent-2-900); }
.dss .hub {
  width: clamp(150px, 16vw, 220px); aspect-ratio: 1; border-radius: 50%;
  background: var(--color-text); color: var(--color-bg); box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
}
.dss .hub span { font-size: clamp(28px, 3vw, 40px); font-weight: 600; }

/* Human judgement */
.human {
  padding-top: clamp(60px, 10vh, 120px); padding-bottom: clamp(60px, 10vh, 120px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
.human .section-head { max-width: 560px; }
.traits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.traits .card { display: block; background: var(--color-neutral-100); font-size: 18px; line-height: 1.5; }
.traits b { color: var(--color-accent-2-700); font-weight: 600; }

/* Simon's four steps */
.simon {
  padding-top: clamp(80px, 14vh, 160px); padding-bottom: clamp(60px, 10vh, 120px);
  display: flex; flex-direction: column; gap: var(--space-8);
}
.simon .section-head { max-width: 820px; }
.phases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); max-width: 1100px; }
.phase { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--space-6); align-items: baseline; }
.phase .n { font-size: 44px; line-height: 1; color: var(--color-accent); }
.phase > div { display: flex; flex-direction: column; gap: var(--space-2); }
.phase h3 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.25; }
.phase p { margin: 0; max-width: 62ch; font-size: 18px; line-height: 1.5; color: var(--color-neutral-800); text-wrap: pretty; }
.choices {
  list-style: none; margin: var(--space-3) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--space-4);
}
.choice {
  padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface);
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-2);
  font-size: 16px; line-height: 1.45; transition: background .5s, color .5s, transform .5s;
}
.choice .id { font-size: 14px; font-weight: 600; color: var(--color-accent-700); transition: color .5s; }
.choice.picked { background: var(--color-accent); color: var(--color-bg); transform: translateY(-4px); }
.choice.picked .id { color: var(--color-bg); }

/* Design and pedagogy */
.pedagogy { padding-top: clamp(60px, 10vh, 120px); padding-bottom: clamp(40px, 6vh, 80px); }
.pedagogy .section-head { max-width: 900px; }
.pedagogy .section-head p { max-width: 64ch; font-size: clamp(19px, 1.6vw, 23px); }

/* Phones: one column. The ladder stage keeps the bars and the tier text,
   with the numeral beside the bars so a tier fits under the nav. */
@media (max-width: 760px) {
  .hero { padding-top: 410px; }
  .hero .float.order { top: 108px; width: 190px; padding: var(--space-3); }
  .hero .float.order b { font-size: 24px; }
  .hero .float.rain { top: 286px; right: auto; left: 16px; font-size: 14px; }
  .hero .float.note { top: 120px; right: auto; left: 16px; font-size: 15px; max-width: 116px; }
  .ladder .tiers { padding-top: 36px; }
  .ladder .num { top: 30px; }
  .ladder .stage {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start;
    gap: var(--space-4); padding-top: 104px; padding-bottom: var(--space-4);
  }
  .ladder .intro { gap: var(--space-3); }
  .ladder h2 { font-size: 30px; }
  .ladder .intro p { font-size: 15px; line-height: 1.45; }
  .ladder .rungs { flex-direction: row; gap: 6px; max-width: none; }
  .ladder .rung { flex: 1; grid-template-columns: minmax(0, 1fr); }
  .ladder .rung > span:first-child { display: none; }
  .ladder .tiers { height: auto; align-self: stretch; }
  .ladder .num { font-size: 72px; right: 0; left: auto; }
  .ladder .tier { top: 36px; bottom: auto; gap: var(--space-2); padding-right: 64px; }
  .ladder .tier h3 { font-size: 22px; }
  .ladder .tier p { font-size: 15px; line-height: 1.45; }
  .dss .flow { grid-template-columns: minmax(0, 1fr); justify-items: center; min-height: 0; }
  .dss .side.left, .dss .side.right { align-items: center; }
  .dss .src { font-size: 14px; }
  .phase { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .phase .n { font-size: 32px; }
  .phase h3 { font-size: 20px; }
  .phase p { font-size: 16px; }
  .traits .card { font-size: 16px; }
}

/* Short phones: tighten the pinned ladder so the longest tier still fits. */
@media (max-width: 760px) and (max-height: 740px) {
  .ladder .stage { padding-top: 98px; gap: var(--space-3); }
  .ladder .intro { gap: var(--space-2); }
  .ladder h2 { font-size: 26px; }
  .ladder .intro p { font-size: 13.5px; line-height: 1.4; }
  .ladder .tiers { padding-top: 0; }
  .ladder .num { top: -6px; font-size: 60px; }
  .ladder .tier { top: 0; padding-right: 56px; }
  .ladder .tier h3 { font-size: 20px; }
  .ladder .tier p { font-size: 14px; line-height: 1.4; }
}

/* Scripts off: the ladder un-pins and the tiers stack under the intro. */
html:not(.js) .ladder { height: auto; }
html:not(.js) .ladder .stage { position: static; height: auto; grid-template-columns: minmax(0, 1fr); padding-top: clamp(60px, 10vh, 120px); }
html:not(.js) .ladder .tiers { height: auto; }
html:not(.js) .ladder .tiers ul { display: flex; flex-direction: column; gap: var(--space-8); }
html:not(.js) .ladder .tier { position: static; padding-right: 0; }
html:not(.js) .ladder .num, html:not(.js) .ladder .rungs { display: none; }