/* =========================================================================
   PRICING (/pricing)
   Loaded after tokens.css + system.css. The chrome (.doc-topbar, .doc-back,
   .doc-links), .card, .btn and every token come from system.css; this file holds
   the page layout, the plan cards and the two prose blocks only.

   Normal document flow — no locked viewport. Like /faq and /learn this page is
   meant to be scrolled, linked into (every section has an id) and found by
   search.

   The PLAN CARDS are the shared `.plan-card*` component in system.css — the same
   one /account renders. It moved there when this page landed: two screens showing
   the same three plans in two different-looking cards is drift, not design. Only
   the tagline (which the account card has no room for) and the row's surroundings
   are here. Loading account.css instead would have dragged in the library grid and
   the usage meter for nothing.
   ========================================================================= */


/* --------------------------------------------------------------------------
   LAYOUT
   Same 1000px measure as /faq: wide enough for three cards side by side, and
   the prose below is constrained on its own rather than by the page.
   -------------------------------------------------------------------------- */

.price-main {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-xl) 4rem;   /* .doc-back is its first child */
}

.price-head { margin-bottom: 2rem; }

.price-title {
  font-family: var(--heading);
  font-size: var(--text-4xl); font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-xs);
}

.price-sub {
  font-family: var(--body);
  font-size: var(--text-md);
  color: var(--ink-soft);
  max-width: 62ch;
}


/* --------------------------------------------------------------------------
   THE PLAN ROW
   `.plan-cards` / `.plan-card*` come from system.css (see the header). Two
   additions only:
   -------------------------------------------------------------------------- */

/* The row needs less air below it than on /account, where the pending-change
   note sits under it. */
.plan-cards { margin-bottom: var(--space-md); }

/* One line under the plan name saying who the plan is for. The account card has
   no tagline — there the plan is a thing you manage, here it is a thing you are
   choosing between, which is the whole difference between the two screens. */
.price-tagline {
  font-family: var(--body);
  font-size: var(--text-sm); line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: var(--space-lg);
}

/* The cards carry no button here (see pricing.html), so the bullet list is the
   last thing in them and the account card's footer gap would hang as dead space
   under it — the card's own padding is the bottom edge. */
.plan-card-features { margin-bottom: 0; }

/* The one line saying where a plan is actually chosen, now that no card offers a
   button. Quiet on purpose — it answers a question, it does not sell. */
.price-note {
  font-family: var(--body);
  font-size: var(--text-xs); color: var(--ink-faded);
  text-align: center;
  margin-bottom: 3rem;
}


/* --------------------------------------------------------------------------
   BLOCKS BELOW THE CARDS
   One rhythm for all three (what every plan has, the prose, the questions) so
   the page reads as one column after the grid.
   -------------------------------------------------------------------------- */

.price-block { margin-bottom: 3rem; }

.price-h2 {
  font-family: var(--heading);
  font-size: var(--text-2xl); font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-lg);
}

/* Two-up, not four: each item is a sentence, and four narrow columns turn them
   into stacked word salad at this measure. */
.price-incl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}
.price-incl-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon title" ".    body";
  column-gap: var(--space-md); row-gap: var(--space-xs);
}
.price-incl-item svg {
  grid-area: icon;
  width: 18px; height: 18px;
  margin-top: 2px;
  color: var(--cocoa);
}
.price-incl-title {
  grid-area: title;
  font-family: var(--body);
  font-size: var(--text-md); font-weight: 600;
  color: var(--ink);
}
.price-incl-body {
  grid-area: body;
  font-family: var(--body);
  font-size: var(--text-sm); line-height: 1.6;
  color: var(--ink-soft);
}

/* Prose measure, as on /faq and the legal pages. */
.price-prose { scroll-margin-top: var(--space-xl); }
.price-prose p {
  font-family: var(--body);
  font-size: var(--text-md); line-height: 1.7;
  color: var(--ink-soft);
  max-width: 68ch;
  margin-bottom: var(--space-lg);
}
.price-prose p:last-child { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   QUESTIONS
   Links into /faq, styled as rows rather than a bullet list: each one is a
   destination, and the arrow says so. Borders top and bottom only, so the group
   reads as a table of contents and not as a set of buttons.
   -------------------------------------------------------------------------- */

.price-qs { list-style: none; }
.price-qs li { border-bottom: 1px solid var(--line-soft); }
.price-qs li:first-child { border-top: 1px solid var(--line-soft); }
.price-qs a {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-sm);
  font-family: var(--body);
  font-size: var(--text-md); font-weight: 500;
  color: var(--ink); text-decoration: none;
  transition: color var(--dur-fast), padding-left var(--dur-fast);
}
.price-qs a:hover { color: var(--cocoa-dk); padding-left: var(--space-md); }
.price-qs a:focus-visible {
  outline: 2px solid var(--cocoa);
  outline-offset: 2px; border-radius: var(--radius-sm);
}
.price-qs svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--ink-faded);
}

.price-all {
  display: inline-block;
  margin-top: var(--space-lg);
  font-family: var(--body);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--ink-soft); text-decoration: none;
  transition: color var(--dur-fast);
}
.price-all:hover { color: var(--ink); text-decoration: underline; }


/* --------------------------------------------------------------------------
   RESPONSIVE
   The card row collapses in one step to a single column: two-up leaves an odd
   card alone on the second line, which reads as a rendering fault.
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .price-main { padding: var(--space-md) var(--space-lg) 3rem; }
  .price-title { font-size: var(--text-3xl); }
  /* The card row collapses in system.css, with the component — including the
     ribbon going static so it cannot hang over the card above. */
  .price-incl { grid-template-columns: 1fr; gap: var(--space-lg); }
}

@media (max-width: 480px) {
  .price-main { padding: var(--space-sm) var(--space-md) 2.5rem; }
  .price-h2 { font-size: var(--text-xl); }
  .price-qs a { font-size: var(--text-base); gap: var(--space-md); }
}