@import "https://assets.elements.dev/assets/app/shared/styles/page.3ce31e5dfaa53ede.css";

/*
 * /pricing — calm, minimal explainer. Narrow reading column, big
 * h1 with an accented second line, mono lede, framed price block,
 * FAQ list underneath.
 */

/* .pricing-shell sits in the wide marketing column (left edge aligns
   with feed / install / learn) with its content capped at the form
   width and left-aligned — same rules as /purchase, from the shared
   shell group in app/shared/styles/site.css, so pricing → purchase and
   feed → pricing both flow without a lurch. */

/* ─── Hero ─────────────────────────────────────────────────────── */

/*
 * Two-line headline ("One price." / "Per machine."). Each line renders
 * as a block so the parent's line-height fully controls the gap between
 * them — no <br>-introduced leading that inflates the line box. Keeps
 * the two phrases reading as one beat.
 */
/* Canonical top-level page h1 — 48px desktop, 40px on phones (mobile
   override below). Same scale as .page-hero-title in
   app/shared/styles/site.css. */
.pricing-h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--page-title);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 2rem 0 var(--space-4);
  color: var(--ink);
}
/* (Removed legacy .pricing-h1-line / .pricing-accent rules — the title
   is now a single "Pricing." text node, no line-spans, no accent.) */

.pricing-lede {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 var(--space-8);
  max-width: 36rem;
}

/* ─── Price block ──────────────────────────────────────────────── */

/*
 * Price block — open at the top (no rule under the h1), closed at
 * the bottom by a single hairline that separates this block from
 * the "How it works." section. Generous vertical padding so it
 * reads as a "spec sheet" entry, not a tier card. Single-price
 * model → spec-sheet grammar (a bordered card would imply "Plan A,
 * where's Plan B?").
 */
.pricing-block {
  padding: var(--space-7) 0;
  margin: var(--space-6) 0 var(--space-8);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}

.pricing-row {
  display: flex;
  /* Center-align rather than baseline-align — the price has no
     descenders so a baseline-anchored qualifier sits visually low.
     Center anchors the qualifier on the vertical midpoint of $300. */
  align-items: center;
  /* The qualifier belongs to the number, so it sits close to it. At 1rem
     it read as a separate column rather than as a unit on the price. */
  gap: 0.5rem;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

/* $300 in brand-primary dark navy — same `var(--ink)` as the
   .btn-primary "Install Elements" CTA below. Hex-equal to the h1's
   color too; the size step (40px vs 48px) + position is what keeps
   the h1 as the page anchor and the price as a subordinate spec. */
.pricing-amount {
  font-family: var(--font-sans);
  font-size: 3rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}

.pricing-unit {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--ink-dim);
}

/* Business enquiry line, directly under the CTAs. Plain flow, no negative
   margins: it is one more line in the block, not header chrome. Sized and
   dimmed like .pricing-unit so it reads as a quiet aside rather than a
   third call to action competing with the two buttons above it. */
.pricing-business {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: var(--space-12) 0 0;
}

.pricing-desc {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 var(--space-6);
  max-width: 36rem;
}

.pricing-cta-row {
  display: flex;
  gap: 0.75rem;
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

/* Page-local tweaks for the .button coercion class on this page. These
   are the page's primary conversion CTAs, so they take `is-lg` (48px) —
   the compact 36px site default (set in vars.css) reads too small for a
   pricing hero and doesn't match the `is-lg` submit on /purchase or the
   `is-hero` CTA on home. Just keep the hover lift tight here. */
.pricing-button:hover { opacity: 0.88; }

/* ─── FAQ ──────────────────────────────────────────────────────── */

/*
 * "How it works." is a section label, not a rival headline. Small,
 * medium weight, big gap above it so it reads as "new section" —
 * not "another h1 competing with the page title."
 */
/* The section head, sized like one. It was 18px semibold, which put it a
   hair above the questions under it and read as another item in the list
   rather than the start of a section. */
.pricing-faq-title {
  max-width: 20ch;
  margin: 0 0 var(--space-8);
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 3.6vw, 2.625rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}

/* No per-item rules — the only hrules on the page are above/below
   the price block. FAQ items separate via margin only. */
.pricing-faq-item {
  margin-bottom: var(--space-8);
}
.pricing-faq-item:last-child { margin-bottom: 0; }

.pricing-faq-q {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.pricing-faq-a {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

.pricing-faq-a strong {
  color: var(--ink);
  font-weight: var(--weight-semibold);
}

.pricing-faq-a code {
  font-family: var(--font-sans);
  font-size: 0.95em;
  background: var(--bg-panel);
  color: var(--ink-soft);
  padding: 2px 6px;
  border-radius: 4px;
  /* Keep shell commands like `> elements license checkout` on one
     line — wrapping them mid-command reads as broken. */
  white-space: nowrap;
}
.pricing-faq-a strong code {
  color: var(--ink);
}

.pricing-inline {
  color: var(--accent);
  text-decoration: underline;
  /* A touch more breathing room under the text so the underline
     doesn't kiss the baseline. */
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.pricing-inline:hover { color: var(--accent-deep); }

/* ─── Mobile ───────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* Page-h1 on mobile = 40px, matching the canonical page-title scale
     on /install, /feed, /learn, /purchase. */
  .pricing-h1 {
    font-size: 2.5rem;
    line-height: 1.1;
    margin-top: 1.5rem;
  }

  .pricing-amount { font-size: 2rem; }
}

/* Founder rate qualifier. Sits after .pricing-desc, not before it: what you
   are buying is primary, and this only qualifies the number. No strikethrough
   and no badge either — a struck-through list price we have never charged
   would be a fabricated anchor, and this is a research page, not a sales
   page. */
.pricing-founder {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0 0 var(--space-6);
  max-width: 36rem;
}

.pricing-founder-label {
  font-weight: var(--weight-semibold);
  color: var(--ink);
}


/* ─── The ledger ─────────────────────────────────────────────────────
   Full bleed and dark, the one band on /pricing that argues rather than
   states a rule.

   The list is a receipt. The claim is that one line replaces many lines,
   so the form carries it: a column of things you would otherwise buy, each
   answering with the same word, and the eye runs down the repetition. Mono
   on both sides because a ledger's columns have to line up, and a leader
   rule between them because that is what a bill does with the space.

   No price in here. It is stated once on this page, above. */
.ledger {
  margin-top: var(--space-14);
  padding: var(--space-14) 0;
  background: #070C13;
  color: #F2F7FB;
}

/* The same column as the rest of the page. At 940 the band's left edge
   sat sixty pixels outside every other block and the page looked like two
   documents. */
.ledger-shell {
  max-width: var(--container-marketing);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

/* Two sentences that are the same length on purpose, so the wrap has to
   land on the full stop. Left to itself it did not: at every phone width
   from 360 to 520 the first line took "One" off the second sentence and
   left "predictable bill." hanging, which kills the rhythm the repetition
   is doing all the work with. `balance` equalises the lines, and with two
   sentences of 21 characters the only balanced break is the one between
   them. Measured 320 through 1200: one sentence per line on a phone, one
   line from 700 up, and no forced break to be wrong at some width we did
   not check. */
.ledger-claim {
  max-width: 30ch;
  text-wrap: balance;
  margin: 0 0 var(--space-10);
  font-size: clamp(1.75rem, 3.6vw, 2.625rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #F2F7FB;
}

.ledger-list {
  margin: 0 0 var(--space-10);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* The leader. A dotted rule running from the item to its answer is what a
   bill looks like, and it does the work a table border would do without
   drawing a box around anything. */
.ledger-list > div {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ledger-list > div:first-child { border-top: 1px solid rgba(255, 255, 255, 0.08); }

.ledger-list dt {
  flex: 0 1 auto;
  font-weight: var(--weight-medium);
  color: #F2F7FB;
}

/* Grows to fill, which right-aligns the answer without a grid. */
.ledger-list dd {
  flex: 1 0 auto;
  margin: 0;
  text-align: right;
  /* Terminal green. The band is a ledger read in the CLI's voice, and
     this column is the same word ten times over: a status, not an
     answer. Blue made it read as ten links. */
  color: #6EE7B7;
}



@media (max-width: 860px) {
  .ledger { padding: var(--space-11) 0; }
  .ledger-shell { padding: 0 var(--space-5); }
}

/* ─── The questions ──────────────────────────────────────────────────
   Question above answer, read straight down. A two column layout was
   tried and dropped: it made the eye jump left and right for every item,
   and a page of questions is something you read rather than scan.

   The section fills the page column rather than the 640 form column that
   .pricing-shell caps its children at. That cap is right for the price
   block and wrong here, where it left the questions narrower than the
   band above them for no reason.

   A rule over each question, rather than a gap between them. The rule is
   what tells you a new question started; without it, eight bold lines and
   eight paragraphs read as one long changelog. */
.pricing-page .pricing-shell > .pricing-faq {
  max-width: none;
  margin-top: var(--space-14);
}

.pricing-faq-item {
  max-width: 68ch;
  padding-top: var(--space-5);
  margin-bottom: var(--space-6);
  border-top: 1px solid var(--rule);
}

.pricing-faq-item:last-child { margin-bottom: 0; }

.pricing-faq-q {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.pricing-faq-a {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
}

/* ─── The questions band ─────────────────────────────────────────────
   A soft ground, not a loud one. The ledger above is the page's one bold
   surface and a second dark band would turn the page into stripes; this
   is one step off white, enough to say the argument is over and the
   details begin.

   Same column as everything else, so the three bands share one left
   edge. */
.qa {
  padding: var(--space-14) 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--rule);
}

.qa-shell {
  max-width: var(--container-marketing);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

@media (max-width: 860px) {
  .qa { padding: var(--space-11) 0; }
  .qa-shell { padding: 0 var(--space-5); }
}

/* The second half of the argument, under the list. One column and one
   paragraph: the list is the figure here and a second block of columns
   beside it would compete with it. */
.ledger-after {
  max-width: 62ch;
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: #A8B6C6;
}

/* PageChrome gives its main a --space-20 bottom padding, which is right
   for a page that ends in text and wrong for one that ends in a band: the
   tint stopped and eighty pixels of white sat between it and the footer.
   The band runs to the footer instead. */
.pricing-page .page-chrome-main {
  padding-bottom: 0;
}

/* ─── Dark mode ──────────────────────────────────────────────────────
   Same two moves as the home page. The questions band drops its tint,
   since --bg-soft is a navy slab on a dark ground and a hairline says
   the same thing more quietly. The ledger lifts to #161F2A, the colour
   the site already uses for a panel on a dark page. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pricing-page .qa {
    background: transparent;
  }

  :root:not([data-theme="light"]) .pricing-page .ledger {
    background: #161F2A;
  }
}

:root[data-theme="dark"] .pricing-page .qa {
  background: transparent;
}

:root[data-theme="dark"] .pricing-page .ledger {
  background: #161F2A;
}