/* Pricing: three equal membership columns on paper (Daylight module).
   The page turns light here, once, and stays light through the landing.
   Desktop is one sheet: the heading spans the measure, then Basic, Pro and
   Max share every row (subgrid), divided by a single ink rule. Credits
   billing is the footnote, and the fine print is one 12 px run under it.
   Prices are machine time (Archivo 62%). The red fill is each plan's CTA
   (--red-cta, white text); every other signal goes through --signal
   (red-deep on paper). Phones stack the three columns. */
.pricing-section {
  --sheet-pad: clamp(20px, 2.2vw, 36px);
  --sheet-rule: 1px solid var(--ink);
  padding-block: clamp(48px, 4vw, 58px) clamp(32px, 2.6vw, 38px);
  background: var(--paper);
  color: var(--ink);
}

.pricing-heading { padding-block-end: clamp(28px, 3vw, 40px); }
.pricing-heading h2 { font-size: var(--h2-l); }
.pricing-heading p { max-width: 36em; margin-top: 12px; font-size: 16px; line-height: 1.7; color: var(--ink-muted); }

/* Six shared rows: kicker, name, price, grant, features, action. */
.pricing-sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block-start: var(--sheet-rule); }
.pricing-card { display: grid; grid-template-rows: subgrid; grid-row: span 6; min-width: 0; padding-inline: var(--sheet-pad); }
.pricing-card + .pricing-card { border-inline-start: var(--sheet-rule); }
.pricing-card:first-child { padding-inline-start: 0; }
.pricing-card:last-child { padding-inline-end: 0; }

.pricing-topline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-block-start: clamp(18px, 1.8vw, 24px); }
.plan-kicker { font: 600 13px/1.4 var(--font-text); letter-spacing: .01em; color: var(--ink-muted); }
.pricing-card h3 { margin-top: 6px; font: 800 clamp(24px, 2.2vw, 32px)/1.1 var(--font-display); letter-spacing: -.025em; }

/* The figure: currency and number are one left-to-right run, also in RTL. */
.pricing-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: clamp(12px, 1.4vw, 18px); }
.price-run { display: inline-flex; align-items: baseline; gap: 6px; direction: ltr; unicode-bidi: isolate; }
.pricing-price strong { font: 900 clamp(56px, 6vw, 96px)/.8 var(--font-display); font-stretch: var(--w-machine); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pricing-price .currency { align-self: flex-start; margin-top: .22em; font: 600 16px/1 var(--font-mono); }
.pricing-price > span:last-child { font-size: 16px; color: var(--ink-muted); white-space: nowrap; }

.plan-grant { margin-top: clamp(16px, 1.6vw, 20px); padding-block: 14px 16px; border-block: var(--sheet-rule); }
.plan-grant strong { display: block; font: 800 clamp(20px, 1.6vw, 26px)/1.2 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan-grant span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--ink-muted); }

.pricing-features { display: grid; align-content: start; }
.pricing-features li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding-block: 8px; border-block-end: 1px solid var(--ink-line); font-size: 15px; line-height: 1.5; }
/* A drawn check (mask), not a rotated box. */
.pricing-features li::before { content: ""; width: 15px; height: 15px; margin-top: 4px; margin-inline-start: 4px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat; }

.pricing-action { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: clamp(18px, 1.4vw, 20px); padding-block-end: 4px; }
.pricing-action .button { flex: none; }
.pricing-caption { flex: 1 1 12em; min-width: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-muted); }

/* Footnote: how Credits are spent, full width under the sheet. */
.pricing-footnotes { margin-top: clamp(28px, 2.4vw, 36px); border-block-start: var(--sheet-rule); }
.ai-billing { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; align-items: center; gap: 10px 24px; padding-block-start: clamp(18px, 1.6vw, 22px); }
.pricing-footnotes .arrow-link { justify-self: start; min-height: 32px; font-size: 14px; }
@media (min-width: 761px) {
  .ai-billing { grid-template-columns: minmax(0, 1fr) auto; }
  .ai-billing > :not(.arrow-link) { grid-column: 1 / -1; }
  .ai-billing > .ai-billing-heading { grid-column: 1; grid-row: 1; }
  .ai-billing > .arrow-link { grid-column: 2; grid-row: 1; white-space: nowrap; }
}
.ai-billing-heading { display: flex; align-items: flex-start; gap: 10px; }
.ai-billing-icon { display: grid; place-items: center; flex: none; color: var(--signal); transition: color .5s var(--ease); }
.ai-billing-icon svg { width: 18px; height: 18px; margin-top: 2px; }
.ai-billing h3 { font: 700 17px/1.4 var(--font-text); letter-spacing: -.005em; }
.ai-billing-copy p { max-width: 68em; font-size: 14px; line-height: 1.65; color: var(--ink-muted); }
.ai-billing-tags { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 12.5px; line-height: 1.5; }
.ai-billing-tags span { display: inline-flex; align-items: center; }
.ai-billing-tags span::before { content: ""; inline-size: 4px; block-size: 4px; margin-inline-end: 8px; border-radius: 50%; background: currentColor; opacity: .45; }

/* The fine print: one footnote, a single 12 px run under a hairline. */
.pricing-notes { margin-top: clamp(20px, 1.6vw, 22px); padding-block-start: 14px; border-block-start: 1px solid var(--ink-line); font-size: 12px; line-height: 1.75; color: var(--ink-muted); text-wrap: pretty; }
.pricing-notes p { display: inline; }
.pricing-notes p + p::before { content: " "; }

/* Phones: one column. Each plan lists itself, and the buttons fit their words. */
@media (max-width: 760px) {
  .pricing-section { --sheet-pad: 0px; }
  .pricing-sheet { display: flex; flex-direction: column; border-block-start: 0; }
  .pricing-heading { padding-block-end: 8px; }
  .pricing-card { display: flex; flex-direction: column; padding-inline: 0; padding-block: 28px 8px; border-block-start: var(--sheet-rule); }
  .pricing-card + .pricing-card { border-inline-start: 0; }
  .pricing-card:first-child { padding-block-start: 20px; }
  .pricing-price strong { font-size: clamp(84px, 26vw, 112px); }
  .ai-billing { margin-top: 20px; }
}

@media (max-width: 640px) {
  /* The support launcher (56 px at the physical right, see style.css) never
     sits on the small print: captions and the fine print keep out of its
     lane, and the section ends with room for it. */
  .pricing-section { padding-block-end: calc(var(--support-lane) + 16px); }
  .pricing-heading p { font-size: 15px; }
  .pricing-features li { padding-block: 9px; font-size: 14px; }
  .pricing-action { gap: 12px; }
  .pricing-action .button { flex: none; min-height: 48px; padding: 0 20px; gap: 9px; font-size: 15px; }
  .pricing-action .button svg { width: 16px; height: 16px; }
  .pricing-caption { flex-basis: 100%; padding-right: calc(var(--support-lane) - var(--gutter) + 8px); }
  .pricing-notes { padding-right: calc(var(--support-lane) - var(--gutter) + 8px); }
}