/* ==========================================================================
   09 PACKAGES — four tiers. Long Haul is lifted and accent-bordered; it is the
   only card on the page allowed to sit above its row. 0 images.
   ========================================================================== */

.packages { background: var(--surface-page); }

/* --------------------------------------------------------------------------
   THE LEDGER (M15, refs 16 and 18) — spec table as page layout. Four
   full-width hairline rows, name at display size, contents at 11px mono in two
   columns, price right-aligned hard outside the content grid. Replaces four
   near-identical dark card boxes, which was the anti-ref's exact shape and the
   one place this page repeated the services card rhythm.
   -------------------------------------------------------------------------- */
/* docs/uniqueness.md move 6: every horizontal rule on the page is a tick rule,
   the ledger's opening rule included. Each row closes itself. */
.ledger { background: var(--tick-rule); }

.ledger__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
  min-height: var(--ledger-row-min-h);
  padding-block: var(--ledger-pad-block);
  padding-inline-start: var(--space-md);
  border-inline-start: var(--border-width-slab) solid transparent;
  overflow: hidden;
  /* the row rule, graduated. background-color is left free so the hover tint
     composites over the ticks instead of erasing them. */
  background: var(--tick-rule);
  background-position: bottom;
  transition:
    background-color var(--dur-fast) var(--ease-state),
    transform var(--dur-fast) var(--ease-lift);
}
.ledger__row:hover {
  background-color: var(--ledger-hover);
  transform: translate3d(0, var(--lift-ledger), 0);
}
/* the broad calibration of the one sheen mechanism: a 540px row needs a wider,
   slower band than a 180px button */
.ledger__row::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--sheen-width-broad) * -2);
  width: var(--sheen-width-broad);
  background: var(--sheen-color);
  transform: skewX(var(--sheen-skew)) translate3d(0, 0, 0);
  transition: transform var(--dur-sheen-broad) var(--ease-state);
  pointer-events: none;
}
.ledger__row:hover::after { transform: skewX(var(--sheen-skew)) translate3d(700%, 0, 0); }

.ledger__row--feature { border-inline-start-color: var(--border-accent); }

.ledger__name {
  font-size: var(--text-ledger);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
}

.ledger__contents {
  display: grid;
  gap: var(--space-3xs) var(--ledger-col-gap);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: var(--leading-micro);
  letter-spacing: var(--tracking-mono-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ledger__item { display: flex; align-items: baseline; gap: var(--space-2xs); }
.ledger__item::before {
  content: "";
  width: var(--space-3xs);
  height: var(--space-3xs);
  border-radius: var(--radius-round);
  background: var(--surface-accent);
  flex: none;
}

.ledger__price {
  font-family: var(--font-mono);
  font-size: var(--text-price);
  font-weight: var(--weight-bold);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-mono-tight);
  color: var(--text-accent-quiet);
}
.ledger__row--feature .ledger__price { color: var(--text-accent); }

/* the whole row is the target; the label is the accessible name */
.ledger__link { position: absolute; inset: 0; }
.ledger__link:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }

@media (min-width: 768px) {
  .ledger__contents { grid-template-columns: repeat(var(--ledger-micro-cols), minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .ledger__row {
    grid-template-columns: var(--ledger-grid);
    column-gap: var(--ledger-col-gap);
  }
  .ledger__price { text-align: end; }
}

/* --------------------------------------------------------------------------
   THE TIERED LEDGER — the same rows read on three channels. docs/content.md
   §Vehicle size tiers. Three of the four service pages take it; the film page
   does not, because its rows are coverage levels and not size classes, and
   that distinction is the whole point of .filmnote.

   Track list declared here rather than in tokens.css because it is this
   variant's own composition of the same idea --ledger-grid expresses, in the
   same fr-and-min-content vocabulary: no length in it that is not a keyword.
   -------------------------------------------------------------------------- */
.ledger--tiers {
  --ledger-cols-tier: minmax(0, 24fr) minmax(0, 34fr) repeat(3, minmax(min-content, 11fr));
}

/* the channel names, once there are channels to name. Below 1024 the row is a
   single column and each figure carries its own numeral instead. */
.ledger__head { display: none; }

.ledger--tiers .tierfig__v { font-size: var(--text-price); color: var(--text-accent-quiet); }
.ledger__row--feature .tierfig__v { color: var(--text-accent); }

@media (min-width: 1024px) {
  .ledger--tiers .ledger__row { grid-template-columns: var(--ledger-cols-tier); }
  .ledger__head {
    display: grid;
    grid-template-columns: var(--ledger-cols-tier);
    column-gap: var(--ledger-col-gap);
    /* the rows carry a 4px start border plus their own inset; the head has to
       stand on the same left rule or the numerals sit off their columns */
    padding-inline-start: calc(var(--space-md) + var(--border-width-slab));
    /* .ledger draws its opening tick rule at the top of its own box, and the
       head is the first thing in it: without this the numerals sit on the rule */
    padding-block: var(--space-sm) var(--space-2xs);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  /* three channel names over three channels. The key above already carries
     the group name, so the head does not print it twice. */
  .ledger__head > span { text-align: end; }
  .ledger__head > span:nth-child(1) { grid-column: 3; }
  .ledger__head > span:nth-child(2) { grid-column: 4; }
  .ledger__head > span:nth-child(3) { grid-column: 5; }
}

.packages__warranty {
  display: grid;
  gap: var(--space-xs);
  margin-block-start: var(--space-stack);
  padding: var(--card-pad-lg);
  background: var(--chamfer-edge), var(--surface-sunken);
  border: var(--border-width-hair) solid var(--border-strong);
  border-radius: var(--radius-inset);
  clip-path: var(--chamfer-clip);
}
.packages__warranty-head {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.packages__warranty-list {
  display: grid;
  gap: var(--space-2xs);
}
.packages__warranty-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-xs);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
  padding-block-end: var(--space-2xs);
  background: var(--tick-rule-fine);
  background-position: bottom;
}
.packages__warranty-key {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .packages__warranty-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-lg); }
}