/* ============================================================
   ViberSpace — pricing surface: "Fold Ladder".
   Loads on top of sheet_core.css and owns only what is this
   surface's: the printed logarithmic allowance scale, the
   ladder rung, the kit grid, and the gap list.

   The thesis is that a plan buys quantity and never capability,
   so exactly one object on this page carries a varying value —
   the scale — and everything else is deliberately constant.
   ============================================================ */

/* ---------- Hero ---------- */
.hero{ padding-top:clamp(34px,5vw,68px) }
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,4vw,64px); align-items:center;
}

.sheet-stage{ position:relative; min-height:clamp(260px,36vw,440px) }
.sheet-stage svg{ display:block; width:100%; height:auto; overflow:visible }

/* the thesis, demoted from the headline to the field it describes */
.caption{
  margin:18px 0 0; font:italic 700 15px/1.3 var(--display);
  letter-spacing:.01em; text-transform:uppercase; color:var(--ink);
}

/* what the field above actually is, stated the way the gate line is stated */
.issued{
  display:flex; align-items:center; gap:10px;
  margin:14px 0 0; padding-top:13px; border-top:1px solid var(--mountain);
  font:500 11.5px/1.5 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2);
}
.issued .lamp{
  width:8px; height:8px; flex:0 0 auto; background:var(--foil);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}

.readout{ margin-top:clamp(30px,4vw,54px) }

/* ---------- The ladder ---------- */
/* One column template governs the axis and every rung, so a decade tick on the
   printed axis stands at the same x as that decade on each rung's track. The
   instrument only works if those two agree. */
.ladder .face{
  padding:clamp(22px,3vw,38px);
  --rung-label:clamp(120px,14vw,190px);
  --rung-value:clamp(70px,6vw,92px);
  --rung-facts:clamp(140px,14vw,192px);
  --rung-gap:clamp(14px,1.8vw,26px);
}
.axis,
.rung{
  display:grid;
  grid-template-columns:var(--rung-label) minmax(0,1fr) var(--rung-value) var(--rung-facts);
  gap:0 var(--rung-gap);
}

/* The axis is printed once, at the head of the ladder it rules. */
.axis-k{
  grid-column:1; align-self:end;
  font:700 10px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2);
  padding-bottom:9px;
}
.axis-rule{
  grid-column:2; position:relative; height:26px;
  border-bottom:1px solid var(--rule);
}
.axis-tick{ position:absolute; bottom:0; transform:translateX(-50%) }
.axis-tick::after{
  content:""; position:absolute; left:50%; bottom:-1px; width:1px; height:7px;
  background:var(--rule);
}
.axis-tick b{
  display:block; padding-bottom:11px;
  font:700 10px/1 var(--mono); letter-spacing:.1em; color:var(--ink-2);
}

/* --- the rungs --- */
.rungs{ list-style:none; margin:0; padding:0 }

.rung{
  align-items:center;
  padding:clamp(18px,2.2vw,26px) 0;
  border-top:1px solid var(--mountain);
}

/* the rung's identity: name and price on one printed line */
.rung-head{ grid-column:1; display:flex; align-items:baseline; gap:10px }
.rung-head h3{
  font:italic 700 clamp(21px,2.3vw,30px)/1 var(--display);
  letter-spacing:-0.01em; text-transform:uppercase; margin:0; color:var(--ink);
}
.rung-head .dots{ display:none }
.rung-price{
  margin:0; font:700 15px/1 var(--mono); color:var(--ink); white-space:nowrap;
}
.rung-price span{
  font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2); margin-left:3px;
}

/* --- the scale: the one object on this page that carries a varying value --- */
.rung-track{
  grid-column:2;
  position:relative; display:block; height:16px;
  background:var(--sheet-2);
  border-bottom:1px solid var(--rule);
}
/* the decades repeat on every rung, so a value is readable against the
   axis without carrying the eye back up to it */
.rung-decade{
  position:absolute; top:0; bottom:0; width:1px; background:var(--mountain);
}
/* The drawn quantity. Valley is the data family, so the bar and its mark read
   as a measured value rather than as a stamped state.

   The field is hatched at the world's own 60°, not filled flat: the pale tint
   alone was too close to its own track to be read as a length, and a solid bar
   reads as a progress meter borrowed from somewhere else. Hatching is how a
   quantity is filled in on a drawing, and it puts the bar on the same 60°
   system as the ground printed under the whole page. */
.rung-fill{
  position:absolute; left:0; top:0; bottom:0;
  background-color:var(--valley);
  background-image:repeating-linear-gradient(60deg,
    var(--valley-line) 0 1.5px, transparent 1.5px 6px);
  clip-path:inset(0 0 0 0);
}
.rung-mark{
  position:absolute; top:-5px; bottom:-5px; width:2px;
  background:var(--valley-ink);
  transform-origin:center bottom;
}
.rung-value{
  grid-column:3;
  font:700 14px/1 var(--mono); color:var(--valley-ink);
  text-align:right; white-space:nowrap;
}

/* --- the two facts a plan actually controls --- */
.rung-spec{ grid-column:4; font-size:11.5px; line-height:1.75 }
.rung-spec dt{ font-size:10px; letter-spacing:.1em }
.rung-spec dd{ font-size:11.5px }
/* a figure with nothing behind it is never dressed as a value */
.spec dd.is-none{ color:var(--ink-2); font-weight:500 }

.axis-note{
  margin:clamp(20px,2.4vw,30px) 0 0; padding-top:16px;
  border-top:1px solid var(--mountain);
  font-size:12.5px; line-height:1.7; color:var(--ink-2); max-width:64ch;
}
.axis-note b{ color:var(--ink); font-weight:700 }

/* ---------- The constant ---------- */
.kit .face{ padding:clamp(22px,3vw,38px) }
.kit-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
}
/* one table, ruled internally — the outer boundary belongs to the panel */
.kit-grid li{ padding:clamp(16px,1.8vw,22px); border-width:0 1px 1px 0; border-style:solid; border-color:var(--mountain) }
.kit-grid li:nth-child(3n){ border-right-width:0 }
.kit-grid li:nth-last-child(-n+3){ border-bottom-width:0 }
.kit-grid li:nth-child(-n+3){ padding-top:0 }
.kit-grid li:nth-child(3n+1){ padding-left:0 }
.kit-grid li:nth-child(3n){ padding-right:0 }
.kit-grid h3{
  font:700 12px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  margin:0 0 9px; color:var(--ink);
}
.kit-grid p{ margin:0; font-size:12.5px; line-height:1.65; color:var(--ink-2) }

.kit-foot{
  margin:clamp(20px,2.4vw,30px) 0 0; padding-top:16px;
  border-top:1px solid var(--rule);
  font-size:12.5px; line-height:1.7; color:var(--ink-2); max-width:70ch;
}

/* ---------- The mechanism ---------- */
.mech-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,4vw,56px); align-items:start;
}
/* This prose is the section's argument, not support for it, so it sits on the
   running-prose step rather than the smaller supporting one. */
.mech-grid > div:first-child p{
  margin:0 0 16px; font-size:15px; line-height:1.75; color:var(--ink-2); max-width:58ch;
}
.mech-grid > div:first-child p:last-child{ margin-bottom:0 }
.mech-spec .face{ padding:clamp(20px,2.4vw,30px) }

/* ---------- The honest gap ---------- */
/* Bare sheet throughout: nothing here is backed by something that exists, so
   nothing here takes the stamped field or the data colour. */
.gaps .face{ padding:clamp(20px,2.6vw,32px) clamp(22px,3vw,38px) }
.gaps ul{ list-style:none; margin:0; padding:0 }
.gaps li{
  display:grid; grid-template-columns:minmax(0,17rem) 1fr; gap:0 18px; align-items:baseline;
  padding:15px 0; border-top:1px solid var(--mountain);
}
.gaps li:first-child{ border-top:0; padding-top:0 }
.gaps h3{
  font:700 11.5px/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  margin:0; color:var(--ink-2);
}
.gaps .dots{ display:none }
.gaps p{ margin:0; font-size:13px; line-height:1.65; color:var(--ink-2) }
.gaps-foot{
  margin:22px 0 0; padding-top:16px; border-top:1px solid var(--rule);
  font:700 11.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
}
.gaps-foot a{ color:var(--valley-ink); text-decoration:none }
.gaps-foot a:hover{ text-decoration:underline; text-underline-offset:5px }

/* ---------- Adaptation ---------- */
@media (max-width:1080px){
  .hero-grid{ grid-template-columns:1fr; gap:36px }
  .sheet-stage{ min-height:0 }
  .mech-grid{ grid-template-columns:1fr; gap:30px }
  .kit-grid{ grid-template-columns:1fr 1fr }
  .kit-grid li:nth-child(3n){ border-right-width:1px; padding-right:clamp(16px,1.8vw,22px) }
  .kit-grid li:nth-child(3n+1){ padding-left:clamp(16px,1.8vw,22px) }
  .kit-grid li:nth-child(2n){ border-right-width:0; padding-right:0 }
  .kit-grid li:nth-child(2n+1){ padding-left:0 }
  .kit-grid li:nth-child(-n+3){ padding-top:clamp(16px,1.8vw,22px) }
  .kit-grid li:nth-child(-n+2){ padding-top:0 }
  .kit-grid li:nth-last-child(-n+3){ border-bottom-width:1px }
  .kit-grid li:nth-last-child(-n+1){ border-bottom-width:0 }
}

@media (max-width:860px){
  /* The rung re-stacks: identity over its own measurement, with the two
     controlled facts beneath. The track keeps its figure alongside it rather
     than dropping it to a line of its own, and the figure column stays a fixed
     width so every rung's track still starts and ends on the same two verticals
     — an axis whose rungs disagree is not an axis. */
  .ladder .face{ --rung-value:64px }
  .axis,
  .rung{ grid-template-columns:minmax(0,1fr) var(--rung-value); align-items:center }

  .rung{ gap:13px var(--rung-gap) }
  .rung-head{ grid-column:1 / -1; align-items:baseline }
  .rung-head .dots{
    display:block; flex:1; border-bottom:1px dotted var(--mountain); transform:translateY(-5px);
  }
  .rung-track{ grid-column:1 }
  .rung-value{ grid-column:2 }
  .rung-spec{ grid-column:1 / -1; display:flex; gap:0 clamp(18px,4vw,44px); flex-wrap:wrap }
  .rung-spec div{ flex:0 1 auto; gap:8px }
  .rung-spec .dots{ display:none }
  .rung-spec dd{ margin-left:0 }

  .axis-k{ grid-column:1 / -1; padding-bottom:7px; align-self:start }
  .axis-rule{ grid-column:1 }
}

@media (max-width:640px){
  .kit-grid{ grid-template-columns:1fr }
  .kit-grid li{ border-right-width:0; padding-left:0; padding-right:0 }
  .kit-grid li:nth-child(n){ border-right-width:0; padding-left:0; padding-right:0 }
  .kit-grid li:nth-child(-n+3){ padding-top:clamp(16px,1.8vw,22px) }
  .kit-grid li:first-child{ padding-top:0 }
  .kit-grid li:nth-last-child(-n+3){ border-bottom-width:1px }
  .kit-grid li:last-child{ border-bottom-width:0 }

  .gaps li{ grid-template-columns:1fr; gap:6px 0 }
}

@media (max-width:520px){
  .rung-value{ font-size:13px }
  .axis-tick b{ font-size:9.5px }
  /* the outermost decade labels would otherwise hang off the sheet */
  .axis-tick:first-child{ transform:translateX(-30%) }
  .axis-tick:last-child{ transform:translateX(-70%) }
}

/* ---------- Motion ---------- */
/* This surface's one authored moment: the four marks travel out along the
   scale as the ladder reaches the reader, staggered bottom rung to top, so
   the single axis the page is about draws itself once.

   Content is visible by default — the bars are painted at rest, and the
   controller arms the animation only when it can actually run. */
/* The bar is revealed by clip rather than scaled: a hatched field under
   scaleX() compresses its own stripes as it grows, so the pattern moirés
   through the whole draw. A clip keeps the hatch at true pitch and reads as
   the line being drawn across the scale. */
.rung-mark{ transform:scaleY(1) }

.ladder.is-armed .rung-fill{ clip-path:inset(0 100% 0 0) }
.ladder.is-armed .rung-mark{ transform:scaleY(0) }

.ladder.is-drawn .rung-fill{
  animation:rung-draw 760ms var(--ease) both;
  animation-delay:calc(var(--i) * 130ms);
}
.ladder.is-drawn .rung-mark{
  animation:rung-seat 320ms var(--ease) both;
  animation-delay:calc(var(--i) * 130ms + 520ms);
}

@keyframes rung-draw{ from{ clip-path:inset(0 100% 0 0) } to{ clip-path:inset(0 0 0 0) } }
@keyframes rung-seat{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }

@media (prefers-reduced-motion:reduce){
  /* the drawn scale whole, rather than a 0.001ms flicker of it */
  .ladder.is-armed .rung-fill,
  .ladder.is-drawn .rung-fill{ clip-path:inset(0 0 0 0); animation:none }
  .ladder.is-armed .rung-mark,
  .ladder.is-drawn .rung-mark{ transform:scaleY(1); animation:none }
}

@media print{
  .ladder.is-armed .rung-fill{ clip-path:inset(0 0 0 0) }
  .ladder.is-armed .rung-mark{ transform:scaleY(1) }
}