/* Next level: a rising staircase, then a press-and-hold commitment around the portrait */
.c-hero { max-width: 780px; padding-block: 48px 12px; }
.c-hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 600; }
.c-lede { font-size: 1.15rem; color: var(--muted); max-width: 56ch; margin-top: 18px; }

.c-plan { margin-block: 28px 64px; }
.plan-chip, .plan-empty { max-width: 640px; background: var(--surface); border-radius: 22px; padding: 22px 24px; box-shadow: inset 0 0 0 1px var(--rule); }
.plan-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; justify-content: space-between; }
.plan-empty p { margin: 0; }
.plan-label { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.plan-title { font-family: var(--display); font-size: 1.7rem; font-weight: 600; line-height: 1.15; margin-bottom: 8px; }
.plan-first { color: var(--muted); margin-bottom: 10px; }
.plan-status { margin: 0; font-weight: 600; color: var(--gold-ink); }

.c-ladder h2, .c-commit h2 { font-size: clamp(2rem, 4.4vw, 3rem); }
.stairs { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; }
.stairs li {
  position: relative; background: var(--surface); border-radius: 20px; padding: 22px 20px; box-shadow: inset 0 0 0 1px var(--rule);
  border-top: 4px solid var(--rule); transform-origin: bottom center; animation: grow .9s var(--ease) both;
}
.stairs li:nth-child(1) { min-height: 190px; animation-delay: .1s; }
.stairs li:nth-child(2) { min-height: 250px; animation-delay: .25s; }
.stairs li:nth-child(3) { min-height: 310px; animation-delay: .4s; }
.stairs li:nth-child(4) { min-height: 370px; animation-delay: .55s; }
/* four rungs, four colours: each level reads at a glance, day or night */
.stairs li[data-rung="1"] { background: var(--surface); border-top-color: #5A6275; }
.stairs li[data-rung="2"] { background: #D4A24C; color: #14213D; box-shadow: none; border-top-color: #14213D; }
.stairs li[data-rung="2"] p, .stairs li[data-rung="2"] .r-n { color: #2A2412; }
.stairs li[data-rung="3"] { background: #5A6275; color: #F7F5F0; box-shadow: none; border-top-color: #D4A24C; }
.stairs li[data-rung="3"] p, .stairs li[data-rung="3"] .r-n { color: #E4E7EE; }
.stairs li[data-rung="4"] { background: radial-gradient(120% 80% at 50% 0%, #2A3D66 0%, #14213D 60%); color: #F7F5F0; border-top-color: #D4A24C;
  box-shadow: 0 0 0 2px #D4A24C, 0 24px 50px -24px rgba(212, 162, 76, .7); }
.stairs li[data-rung="4"] h3 { color: #F2C77A; }
.stairs li[data-rung="4"] p, .stairs li[data-rung="4"] .r-n { color: #C9CEDA; }
.stairs li[data-rung="2"].here { box-shadow: inset 0 0 0 2px #14213D; }
@keyframes grow { from { transform: scaleY(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.stairs .r-n { display: block; font: 600 1rem var(--body); color: var(--muted); margin-bottom: 10px; }
.stairs h3 { font-size: 1.35rem; margin-bottom: 8px; }
.stairs p { margin: 0; color: var(--muted); font-size: .95rem; }
.stairs li.reached { border-top-color: var(--gold); }
.stairs li.here { border-top-color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.stairs li.here::after {
  content: "You are here"; position: absolute; top: -40px; left: 18px;
  font-size: .78rem; font-weight: 600; color: #14213D; background: #D4A24C; padding: 6px 12px; border-radius: 999px;
  animation: bob 2.4s ease-in-out infinite;
}

.c-commit { margin-top: 96px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.c-commit .c-lede { margin-inline: auto; }
.hold {
  position: relative; width: min(280px, 72vw); aspect-ratio: 1 / 1; margin-top: 30px; border: 0; padding: 0; background: transparent; cursor: pointer;
  border-radius: 50%; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.hold-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.h-track { fill: none; stroke: var(--rule); stroke-width: 5; }
.h-fill { fill: none; stroke: #D4A24C; stroke-width: 6; stroke-linecap: round; }
.hold-face { position: absolute; inset: 9%; border-radius: 50%; display: grid; place-items: center; transition: transform .3s var(--ease); }
.hold-face img { width: 96%; animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
.hold.pressing .hold-face { transform: scale(.94); }
.hold.complete .hold-face { transform: scale(1.04); }
.hold-help { font-size: .9rem; color: var(--muted); margin-top: 16px; }

.committed { margin-top: 24px; max-width: 560px; }
.committed-title { font-family: var(--display); font-size: clamp(2.4rem, 7vw, 3.6rem); font-weight: 600; color: var(--gold-ink); margin-bottom: 8px; outline: none; }
.send-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.send-alt { font-size: .92rem; color: var(--muted); margin-top: 16px; }
.sel { user-select: all; -webkit-user-select: all; color: var(--ink); font-weight: 600; }
.copy-msg { min-height: 1.5em; color: var(--muted); font-size: .92rem; margin: 6px 0 0; }

@media (max-width: 860px) {
  .stairs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 52px; }
}
@media (max-width: 520px) {
  .stairs { grid-template-columns: minmax(0, 1fr); }
  .stairs li:nth-child(n) { min-height: 0; }
}