/* Plans page only — loaded from plans.html's css_extra, not base.html, so none
   of it sits in the player's render path.

   The page is designed at 390px first and widens. Three panels on the ivory
   page, one band on the case, and one object: the shelf each tier draws its cap
   into. Nothing here is a viewport-width box and nothing overflows the document
   on a phone.

   Type steps and the display treatment are stated locally rather than imported:
   home.css is the homepage's own sheet and loading 45KB of it for a heading
   would be worse than eight declarations. */

/* ── Shared ───────────────────────────────────────────────── */
.plans-wrap {
  --bleed: 1.5rem;
  --case-band: #100d0a;      /* the black key, at the one value home.css uses */
  --case-ink: #c6b8a4;       /* prose on the case, tinted from its own hue */
  --measure: 34rem;
  --t-section: clamp(1.65rem, 3.4vw, 2.5rem);
  --t-title: 1.15rem;
  --t-body: 1rem;
  --t-label: .82rem;
/* The one walnut alpha this sheet needs: the 18% card border DESIGN.md already
   names. The tally draws in walnut at full strength, because it is ink on paper
   rather than a rule. */
  --w-hairline: rgba(132, 98, 74, .18);
  max-width: 68rem;
  margin-inline: auto;
}

/* The engraving's own prose face. This page sells reproductions of printed
   editions, so its display type comes off one. */
.plans-display {
  font-family: var(--font-prose);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.06;
  text-wrap: balance;
}

.plans-head {
  max-width: var(--measure);
  margin: 0 auto 1.75rem;
  text-align: center;
}
.plans-title {
  font-size: var(--t-section);
  margin: 0 0 .45rem;
  color: var(--gp-black);
}
/* The Title step rather than Body: this is the page's lede and it stands alone
   under one heading, where the interface's reading size is too quiet. Two
   sentences, two paragraphs — the claim and then what qualifies it, which is a
   beat the eye should get rather than have to find mid-line. */
.plans-lede {
  font-family: var(--font-prose);
  margin: 0;
  font-size: var(--t-title);
  line-height: 1.55;
  color: var(--gp-charcoal);
  text-wrap: pretty;
}
.plans-lede + .plans-lede { margin-top: .35rem; }

/* ── The three shelves ────────────────────────────────────── */
.tiers {
  display: grid;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
/* Panels, so hairlines rather than shadows. White on the ivory page, the same
   surface the catalog's cards are cut from. */
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.35rem 1.35rem;
  border: 1px solid var(--w-hairline);
  border-radius: 12px;
  background: #fff;
}
/* Brass marks what has been picked out: a ring and a small badge, never a fill.
   The 2px sits inside the panel's own hairline so the two do not double. */
.tier-marked {
  border: 2px solid var(--gp-gold);
  padding: calc(1.5rem - 1px) calc(1.35rem - 1px) calc(1.35rem - 1px);
}
.tier-flag {
  position: absolute;
  top: -.7rem;
  left: 1.35rem;
  padding: .12rem .6rem;
  border: 1px solid var(--gp-gold);
  border-radius: 999px;
  background: var(--gp-ivory);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gp-walnut);
}
/* The tier's nameplate, on the system's Label step: this panel's heading in the
   reading order is the price, and the name is what the price is for. Heading
   level and type step are independent — the h2 keeps the document structure
   whatever size it is set at. */
.tier-name {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0 0 .35rem;
  color: var(--gp-walnut);
}

.tier-price { margin: 0 0 1.1rem; }
.tier-price-figure {
  font-family: var(--font-prose);
  font-size: var(--t-title);
  font-weight: 700;
  line-height: 1.15;
  color: var(--gp-black);
}
.tier-price-unit {
  margin-left: .25rem;
  font-size: var(--t-body);
  color: var(--gp-charcoal);
}
.tier-price-year {
  display: block;
  margin-top: .3rem;
  font-size: var(--t-label);
  line-height: 1.4;
  color: #5c5c5c;
}

/* The tally. The hand's own writing, so walnut and not chrome: this is a count
   kept on paper, not a meter. Groups wrap on a narrow panel and the row keeps
   its height either way, so the three panels still line up.

   overflow: visible on the svg because a round cap on a leaning stroke sits a
   hair outside the viewBox, and clipping it flattens the end of every mark. */
.tier-tally {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .5rem .65rem;
  min-height: 26px;
  margin-bottom: .85rem;
}
.tally { overflow: visible; }
.tally line {
  stroke: var(--gp-walnut);
  stroke-width: 4;          /* 2px once the 2x viewBox is scaled down */
  stroke-linecap: round;
}
/* The fifth mark. Slightly lighter, the way the crossing stroke of a real tally
   is drawn faster than the four it closes. */
.tally-cross { opacity: .85; }

.tier-cap {
  margin: 0 0 1rem;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gp-walnut);
}
.tier-cap-used {
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  color: #5c5c5c;
}

.tier-facts {
  margin: 0 0 1.35rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
}
.tier-facts li {
  display: flex;
  gap: .55rem;
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--gp-charcoal);
}
.tier-facts i {
  flex: 0 0 auto;
  margin-top: .1rem;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--gp-walnut);
}
/* What this tier does not do. Stated rather than struck through: a line through
   a feature reads as something taken away, and nothing was. */
.tier-facts .is-off,
.tier-facts .is-off i { color: #5c5c5c; }
.tier-facts a { color: var(--gp-walnut); }

/* ── The tier's action ────────────────────────────────────────
   Bottom-aligned so the three buttons sit on one line however much copy is
   above them. 44px minimum, because this is the page's whole point. */
.tier-act { margin-top: auto; }
.tier-act form { margin: 0; }
.tier-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: .55rem 1rem;
  border: 1px solid var(--gp-walnut);
  border-radius: 999px;
  background: transparent;
  /* The catalog card's own pill, at button scale: interface face, bold, lightly
     tracked. These are controls in a comparison rather than a line of the
     argument, so they take the interface register the rest of the app's
     controls are set in. */
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gp-walnut);
  transition: background-color .15s, color .15s, border-color .15s;
}
.tier-btn:hover,
.tier-btn:focus-visible {
  background: var(--gp-walnut);
  border-color: var(--gp-walnut);
  color: var(--gp-ivory);
}
.tier-btn:focus-visible { outline: 2px solid var(--gp-gold); outline-offset: 3px; }
/* The marked tier's action is the page's primary one, so it fills. Brass ground
   with piano-black text, the way every primary control in the system reads. */
.tier-marked .tier-btn {
  border-color: var(--gp-gold);
  background: var(--gp-gold);
  color: var(--gp-black);
}
.tier-marked .tier-btn:hover,
.tier-marked .tier-btn:focus-visible {
  background: #d8bd86;
  border-color: #d8bd86;
  color: var(--gp-black);
}
.tier-marked .tier-btn:active { background: #b8965a; }
/* The two unavailable states. Text, not a disabled button: there is nothing to
   press here, and a pill that looks pressable and is not is a worse answer than
   a sentence. It keeps the buttons' height so the three panels still end on one
   line. */
.tier-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: .35rem 0;
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.35;
  color: var(--gp-walnut);
  text-align: center;
}
/* The recovery, in the DOM where a keyboard and a touch screen can both get to
   it. Regular weight and muted, because it is the explanation and not the
   state. */
.tier-state span {
  display: block;
  margin-top: .15rem;
  font-weight: 400;
  letter-spacing: 0;
  font-size: var(--t-label);
  color: #5c5c5c;
  text-transform: none;
}
.tier-state-blocked { color: #5c5c5c; }

/* ── True on every plan ───────────────────────────────────────
   On the case, like the homepage's "What it never does". These are the flat
   commitments, and stating them on the black key rather than in a tinted panel
   is what stops them reading as a footnote to the prices. */
.included {
  margin-inline: calc(-1 * var(--bleed));
  padding: 2.25rem var(--bleed);
  background: var(--case-band);
  color: var(--gp-ivory);
  border-radius: 12px;
}
.included-title {
  max-width: 52rem;
  margin: 0 auto 1.4rem;
  font-size: var(--t-section);
  color: var(--gp-ivory);
  text-align: center;
}
.included-list {
  display: grid;
  gap: .9rem;
  max-width: 52rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.included-list li {
  display: flex;
  gap: .7rem;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--case-ink);
}
.included-list strong { color: var(--gp-ivory); font-weight: 700; }
/* Brass rather than walnut: walnut is a mark on paper and disappears against
   the case. */
.included-list i {
  flex: 0 0 auto;
  margin-top: .15rem;
  font-size: var(--t-title);
  line-height: 1.35;
  color: var(--gp-gold);
}
.included-list a { color: var(--gp-gold); }
/* The page's one outbound link says so. A drawn mark rather than a unicode
   arrow, at the current colour, so it tracks the link it belongs to. */
.ext {
  display: inline-block;
  width: .62em;
  height: .62em;
  margin-left: .28em;
  background-color: currentcolor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 2h8v8h-2V5.4L5.7 11.7 4.3 10.3 10.6 4H6V2Z'/%3E%3Cpath d='M2 4h3v2H4v6h6v-1h2v3H2V4Z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 2h8v8h-2V5.4L5.7 11.7 4.3 10.3 10.6 4H6V2Z'/%3E%3Cpath d='M2 4h3v2H4v6h6v-1h2v3H2V4Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.plans-preview-note {
  max-width: 44rem;
  margin: 1.6rem auto 0;
  font-size: var(--t-label);
  line-height: 1.55;
  color: #5c5c5c;
  text-align: center;
}

/* ── Wider than a phone ───────────────────────────────────────
   The phone layout is the design; these are the cases where there is more room,
   not a different page. */
@media (min-width: 48em) {
  .plans-head { margin-block: .5rem 2.25rem; }
  .tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
  }
  .included { padding: 2.75rem 2.5rem; }
}
@media (min-width: 64em) {
  .tiers { gap: 1.5rem; }
  /* Three commitments, one row. Two columns would leave the third stranded on a
     line of its own, which reads as an afterthought rather than as the third of
     three. */
  .included-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.25rem;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tier-btn { transition: none; }
}