/* Crux V5. Pricing page styles
 * Consumes body.home tokens (paper/ink/navy/yellow/rule). Blueprint-ledger
 * identity: mono labels, warm rules, yellow accents, one featured tier.
 * All layouts stack cleanly and never overflow at 320px.
 */

/* ---- Pricing hero (centered) ---- */
.home .phero { max-width: 52rem; }
.home .phero .hero__lede { max-width: 46rem; }
.home .phero__note {
  margin-top: 1rem; font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.6;
  letter-spacing: 0.01em; color: var(--ink-muted); max-width: 46rem;
}

/* ---- Billing period control ----
   Two pressed-state buttons in a bordered track. The active one is filled AND
   carries a heavier weight and a border, so the selection is not being made by
   hue alone. 44px tall, which is also the minimum target this build holds
   every control to. */
.home .pbilling {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.1rem;
  margin-top: 2rem;
}
.home .pbilling[hidden] { display: none !important; }
.home .pbilling__control {
  display: inline-flex; gap: 0.25rem; padding: 0.25rem;
  background: var(--card); border: 1px solid var(--rule-strong);
  border-radius: 999px;
}
.home .pbilling__btn {
  font-family: var(--font-mono); font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted); background: transparent;
  border: 1px solid transparent; border-radius: 999px;
  min-height: 44px; padding-inline: 1.15rem; cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard),
              background-color var(--motion-fast) var(--ease-standard);
}
.home .pbilling__btn:hover { color: var(--ink); }
.home .pbilling__btn[aria-pressed="true"] {
  color: var(--navy); background: var(--yellow);
  border-color: var(--yellow-deep); font-weight: 600;
}
.home .pbilling__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.home .pbilling__msg {
  margin: 0; font-family: var(--font-mono); font-size: 0.76rem;
  letter-spacing: 0.02em; color: var(--ink-body);
}

/* ---- Tier grid ---- */
.home .ptiers {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem; margin-top: 1.5rem; align-items: stretch;
}
.home .ptier {
  display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--rule); border-top: 3px solid var(--rule-strong);
  border-radius: var(--radius-md); padding: 1.9rem 1.6rem; position: relative;
  transition: border-color var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}
.home .ptier:hover { border-top-color: var(--yellow); }
.home .ptier--featured {
  border: 1px solid var(--blue); border-top: 3px solid var(--yellow);
  background: #fbfaff; box-shadow: var(--shadow-2);
}
.home .ptier__flag {
  position: absolute; top: -0.7rem; left: 1.6rem;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--navy); background: var(--yellow); padding: 0.28rem 0.6rem; border-radius: 3px;
}
.home .ptier__name {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.7rem;
}
.home .ptier__price {
  font-family: var(--font-display); font-size: clamp(2.8rem, 5vw, 3.6rem); line-height: 0.9;
  color: var(--ink); letter-spacing: 0.01em; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.1rem;
}
.home .ptier__cur { font-size: 0.44em; color: var(--ink-muted); transform: translateY(-0.7em); font-family: var(--font-mono); font-weight: 500; }
.home .ptier__per { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500; color: var(--ink-muted); letter-spacing: 0.02em; margin-left: 0.25rem; }
.home .ptier__unit {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-muted);
  margin-top: 0.6rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule);
}

/* ---- The two billing panes ----
   Without JS they stack, ruled apart and each labelled, so both figures are
   readable. Enhanced, both sit in one grid cell: the cell is as tall as the
   taller pane, so switching period never resizes a card and never moves the
   page. visibility rather than display, so the inactive figure is out of the
   accessibility tree and a screen reader is never read two prices at once. */
.home .ptier__pane + .ptier__pane {
  margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px dashed var(--rule-strong);
}
.home .ptier__terms {
  margin: 0.55rem 0 0; font-family: var(--font-mono); font-size: 0.7rem;
  line-height: 1.6; letter-spacing: 0.02em; color: var(--ink-muted);
}
/* The annual terms line is the only place the free month is priced out, so it
   is the benefit and is marked as one: the same tinted-strip vocabulary the
   card already uses for .ptier__inherit, in the accent rather than the blue so
   the two never read as the same kind of block. Type size is untouched, the
   strip is quiet enough not to compete with the tier name or the CTA, and the
   ink steps up to --ink because 600 weight at 0.7rem needs the contrast once
   it sits on a tint. Monthly keeps the quiet default.

   Height is safe: both panes share one grid cell, so the card is already as
   tall as the taller of the two and switching period cannot resize it. */
.home .ptier__pane[data-billing-pane="annual"] .ptier__terms {
  font-weight: 600;
  color: var(--ink);
  background: rgba(255, 218, 0, 0.20);
  border-left: 3px solid var(--yellow);
  border-radius: 0 4px 4px 0;
  padding: 0.5rem 0.65rem;
  margin-top: 0.7rem;
  /* system.css caps every main <p> at --v6-measure-body, 34em, to keep prose
     readable. This line is a UI band, not prose, and at the one-card layout
     around 768 the card is wider than that cap, so the strip stopped 56px short
     of the block beneath it. Harmless while the line had no box; visible the
     moment it gained one. */
  max-width: none;
}
.home [data-billing-enhanced] .ptier__prices { display: grid; }
.home [data-billing-enhanced] .ptier__pane {
  grid-area: 1 / 1; margin: 0; padding: 0; border-top: 0;
}
.home [data-billing-enhanced] .ptier__pane[data-billing-pane="annual"] { visibility: hidden; }
.home [data-billing-enhanced][data-billing-mode="annual"] .ptier__pane[data-billing-pane="annual"] { visibility: visible; }
.home [data-billing-enhanced][data-billing-mode="annual"] .ptier__pane[data-billing-pane="monthly"] { visibility: hidden; }
/* The only motion, and only where motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .home [data-billing-enhanced] .ptier__pane[data-billing-pane]:not([style]) {
    transition: opacity var(--motion-fast) var(--ease-standard);
  }
}

/* ---- Card body: recommendation, inheritance, what is added ---- */
.home .ptier__bestfor {
  margin-top: 0.9rem; font-size: 0.95rem; line-height: 1.5; color: var(--ink-body);
}
.home .ptier__k {
  display: block; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: 0.2rem;
}
/* Inherited capabilities read as settled: a check, a quiet tint, no arrows.
   Added capabilities keep the arrow list, so the eye can tell at a glance
   which part of a card is new. */
.home .ptier__inherit {
  display: flex; align-items: baseline; gap: 0.5rem;
  margin: 1rem 0 0; padding: 0.6rem 0.75rem;
  background: rgba(52, 70, 157, 0.06); border-left: 3px solid var(--blue);
  border-radius: 0 4px 4px 0;
  font-size: 0.88rem; font-weight: 600; color: var(--ink);
}
.home .ptier__inherit-mark { color: var(--blue); font-weight: 700; }
.home .ptier__group {
  margin: 1.1rem 0 0; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted);
}
.home .ptier__list { list-style: none; margin: 0.65rem 0 1.1rem; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.home .ptier__list li {
  font-size: 0.9rem; line-height: 1.45; color: var(--ink-body); padding-left: 1.2rem; position: relative;
}
.home .ptier__list li::before {
  content: "\2192"; position: absolute; left: 0; top: 0; color: var(--yellow-deep); font-weight: 600;
}
.home .ptier__list--added li { color: var(--ink); }
.home .ptier__fee {
  margin: 0 0 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.02em; color: var(--ink-muted);
}
.home .ptier__cta { margin-top: auto; width: 100%; justify-content: center; }

/* ---- Onboarding band ---- */
.home .ponboard {
  margin-top: 1.25rem; display: grid; grid-template-columns: auto 1fr; gap: 1.5rem 2rem; align-items: center;
  background: rgba(255,218,0,0.08); border: 1px solid rgba(255,218,0,0.35);
  border-radius: var(--radius-md); padding: 1.6rem 1.8rem;
}
.home .ponboard__label {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted);
}
.home .ponboard__price { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 2.9rem); line-height: 0.95; color: var(--ink); margin-top: 0.3rem; }
.home .ponboard__once { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; color: var(--ink-muted); letter-spacing: 0.02em; }
.home .ponboard__desc { font-size: 0.95rem; line-height: 1.55; color: var(--ink-body); margin: 0; max-width: 60ch; }
.home .ptiers__note { margin-top: 1.4rem; font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.7; color: var(--ink-muted); max-width: 74ch; }

/* ---- Which tier fits ---- */
.home .whichfit { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 1.5rem; }
.home .whichfit__row {
  display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; align-items: baseline;
  padding: 1rem 0.2rem; border-bottom: 1px solid var(--rule);
}
.home .whichfit__row:last-child { border-bottom: 0; }
.home .whichfit__tier { font-family: var(--font-mono); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.home .whichfit__desc { color: var(--ink-body); font-size: 0.98rem; line-height: 1.55; }

/* ---- Getting Crux running (implementation) ---- */
.home .getcrux { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; counter-reset: none; }
.home .getcrux__step { display: flex; gap: 1.1rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 1.4rem 1.5rem; }
.home .getcrux__no { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--yellow-deep); flex-shrink: 0; }
.home .getcrux__t { font-size: 1.08rem; color: var(--ink); margin: 0 0 0.4rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.home .getcrux__d { font-size: 0.95rem; line-height: 1.55; color: var(--ink-body); margin: 0; }
.home .getcrux__note { margin-top: 1.4rem; font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.7; color: var(--ink-muted); max-width: 74ch; }

/* ---- Common questions / fit ---- */
.home .qfit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 2rem; margin-top: 1.75rem; }
.home .qfit__item { border-left: 3px solid var(--rule-strong); padding: 0.2rem 0 0.2rem 1.2rem; }
.home .qfit__q { font-size: 1.02rem; color: var(--ink); margin: 0 0 0.5rem; font-family: var(--font-body); font-weight: 600; }
.home .qfit__a { font-size: 0.95rem; line-height: 1.6; color: var(--ink-body); margin: 0; max-width: 56ch; }

/* ---- Responsive ---- */
@media (max-width: 62rem) {
  .home .ptiers { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
  .home .getcrux { grid-template-columns: 1fr; }
  .home .qfit { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .home .ponboard { grid-template-columns: 1fr; gap: 0.8rem; text-align: left; }
  .home .whichfit__row { grid-template-columns: 1fr; gap: 0.35rem; }
}