/* Pricing page: three plan cards in the order Free, Plus, Featured. Light theme, ink and neutrals, rust only as a thin top rule and
   small markers. No rust buttons: nothing can be bought yet, so the one rust action in view stays the header's Post an RFP.
   Spacing uses the step scale from tokens.css (--space-1 4px ... --space-9 80px). */
.pricing { background: var(--color-surface, #F7F4EF); color: var(--color-text, #2B2623); font-family: var(--font-body, "Source Sans 3", system-ui, sans-serif); font-size: 16px; line-height: 1.5; }
.pricing *, .pricing *::before, .pricing *::after { box-sizing: border-box; }
.pricing__inner { max-width: 1200px; margin: 0 auto; padding: var(--space-8, 64px) var(--space-5, 24px); }
.pricing__title { margin: 0 0 var(--space-3, 12px); font-family: var(--font-display, "Rubik", system-ui, sans-serif); font-size: 40px; font-weight: 600; line-height: 1.15; }
.pricing__lede { margin: 0 0 var(--space-3, 12px); max-width: 640px; font-size: 18px; }
.pricing__notice { margin: 0 0 var(--space-6, 32px); max-width: 640px; padding: var(--space-3, 12px) var(--space-4, 16px); border: 1px dashed var(--color-border, #7A736C); border-radius: 4px; background: var(--color-surface-raised, #FFFFFF); }
.pricing__notice strong { font-weight: 700; }

/* Billing cadence: a two-option segmented radio group, 44px targets, ink on neutral (no rust) */
.pricing__cadence { margin: 0 0 var(--space-3, 12px); }
.pricing__cadence fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.pricing__cadence legend { padding: 0; margin-bottom: var(--space-1, 4px); font-size: 14px; font-weight: 600; color: var(--color-text-muted, #5E5853); }
.pricing__seg { display: inline-flex; border: 1px solid var(--color-border, #7A736C); border-radius: 4px; overflow: hidden; background: var(--color-surface-raised, #FFFFFF); }
.pricing__seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pricing__seg label { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; min-height: 44px; padding: 0 var(--space-4, 16px); font-weight: 600; cursor: pointer; color: var(--color-text, #2B2623); }
.pricing__seg label + input + label { border-left: 1px solid var(--color-border, #7A736C); }
.pricing__seg input:checked + label { background: var(--color-text, #2B2623); color: var(--color-surface-raised, #FFFFFF); }
.pricing__seg input:focus-visible + label { outline: 3px solid var(--focus-ring-color); outline-offset: 2px; position: relative; z-index: 1; }
.pricing__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pricing__annualnote { margin: 0; max-width: 640px; font-size: 14px; color: var(--color-text-muted, #5E5853); }

/* Cards: one column on phones, three equal columns from 960px. Every card is the same height, and on wide screens the name, price,
   features, limits and call-to-action rows line up across the three cards (subgrid), so plans can be compared straight across. */
.pricing__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5, 24px); align-items: stretch; }
.pricing__card {
  display: flex; flex-direction: column; gap: var(--space-5, 24px);
  min-width: 0; padding: var(--space-6, 32px) var(--space-5, 24px) var(--space-5, 24px);
  background: var(--color-surface-raised, #FFFFFF);
  border: 1px solid var(--color-border, #7A736C); border-top: 4px solid var(--color-accent, #A7410E); border-radius: 4px;
}
.pricing__name { margin: 0; font-family: var(--font-display, "Rubik", system-ui, sans-serif); font-size: 28px; font-weight: 600; line-height: 1.2; }
.pricing__tagline { margin: var(--space-1, 4px) 0 0; color: var(--color-text-muted, #5E5853); }
.pricing__pricing { padding-bottom: var(--space-5, 24px); border-bottom: 1px solid var(--color-border, #7A736C); }
.pricing__pricewrap { margin: 0; }
.pricing__price { display: block; font-family: var(--font-display, "Rubik", system-ui, sans-serif); font-size: 40px; font-weight: 600; line-height: 1.1; overflow-wrap: anywhere; }
.pricing__proposed { display: block; margin-top: var(--space-1, 4px); font-size: 14px; color: var(--color-text-muted, #5E5853); }
.pricing__annual { margin: var(--space-2, 8px) 0 0; font-size: 14px; font-weight: 600; color: var(--color-text, #2B2623); }
.pricing__label { margin: 0 0 var(--space-2, 8px); font-family: var(--font-body, "Source Sans 3", system-ui, sans-serif); font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted, #5E5853); }
.pricing__features { margin: 0; padding: 0; list-style: none; }
.pricing__features li { position: relative; margin: 0 0 var(--space-2, 8px); padding-left: var(--space-4, 16px); }
.pricing__features li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--color-accent, #A7410E); }
.pricing__dironly { margin: var(--space-3, 12px) 0 0; font-size: 14px; font-weight: 600; }

/* Limits: the same labeled rows in every plan so they can be compared line by line */
.pricing__limits { margin: 0; }
.pricing__limits > div { display: block; padding: var(--space-2, 8px) 0; border-top: 1px solid rgba(122, 115, 108, .35); }
.pricing__limits > div:first-child { border-top: 0; }
.pricing__limits dt { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text-muted, #5E5853); }
.pricing__limits dd { margin: 0; overflow-wrap: anywhere; }
.pricing__limits dd.pricing__oneline { white-space: nowrap; overflow-wrap: normal; }   /* the alerts value never wraps */

/* Call-to-action row, pinned to the bottom of every card. Neutral: an outlined link on Free, a plain note where nothing can be bought. */
.pricing__cta { margin-top: auto; padding-top: var(--space-4, 16px); }
.pricing__link, .pricing__soon { display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; margin: 0; padding: 0 var(--space-4, 16px); border-radius: 4px; font-weight: 600; text-align: center; }
.pricing__link { border: 1px solid var(--color-text, #2B2623); background: var(--color-surface-raised, #FFFFFF); color: var(--color-text, #2B2623); text-decoration: none; }
.pricing__link:hover { background: var(--color-surface, #F7F4EF); }
.pricing__link:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 2px; }
.pricing__soon { border: 1px dashed var(--color-border, #7A736C); color: var(--color-text-muted, #5E5853); font-weight: 400; }

@media (min-width: 960px) {
  .pricing__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6, 32px); }
  .pricing__card { padding: var(--space-6, 32px); }
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 960px) {
    .pricing__cards { grid-template-rows: auto auto auto auto auto; }
    .pricing__card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--space-5, 24px); }
    .pricing__cta { margin-top: 0; align-self: end; }
  }
}

/* Paid-placement policy: sits right under the plans */

.pricing__h2 { margin: 0 0 var(--space-3, 12px); font-family: var(--font-display, "Rubik", system-ui, sans-serif); font-size: 24px; font-weight: 600; line-height: 1.25; }
.pricing__boundary { margin: 0 0 var(--space-4, 16px); max-width: 640px; font-size: 18px; font-weight: 600; }
.pricing__rules { margin: 0; padding-left: 1.25em; max-width: 640px; }
.pricing__rules li { margin-bottom: var(--space-2, 8px); }

@media (max-width: 760px) {
  .pricing__inner { padding: var(--space-6, 32px) var(--space-4, 16px); }
  .pricing__title { font-size: 32px; }
  .pricing__seg { display: flex; }
  .pricing__seg label { flex: 1 1 50%; }
  .pricing__h2 { font-size: 22px; }
  .pricing__boundary { font-size: 16px; }
  .pricing, .pricing__inner { max-width: 100%; overflow-x: clip; }
}
@media print { .pricing__notice, .pricing__soon { border-style: solid; } }
@media (forced-colors: active) { .pricing__seg input:checked + label { outline: 2px solid Highlight; } .pricing__card { border-top-color: CanvasText; } }

/* Test-mode checkout buttons (shown by pricing-checkout.js). Neutral, like the other card actions: no rust, so the header's Post an RFP stays the one rust action in view. */
.pricing__buy { width: 100%; font: inherit; font-weight: 600; cursor: pointer; }
.pricing__buy[aria-disabled="true"] { cursor: default; opacity: 0.7; }
.pricing__buy[hidden], .pricing__soon[hidden] { display: none; }
.pricing__checkout { margin: 0 0 var(--space-6, 32px); max-width: 640px; padding: var(--space-3, 12px) var(--space-4, 16px); border: 2px solid var(--color-text, #2B2623); border-radius: 4px; background: var(--color-surface-raised, #FFFFFF); }
.pricing__checkout[hidden] { display: none; }
.pricing__checkout:focus { outline: none; }
.pricing__checkout:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 2px; }
.pricing__checkout p { margin: 0; }
.pricing__checkout p + p, .pricing__checkout p + a { margin-top: var(--space-2, 8px); }
.pricing__checkout a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--color-text, #2B2623); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pricing__checkout a:focus-visible { outline: 3px solid var(--focus-ring-color); outline-offset: 2px; }

/* The toggle never moves the cards: a line that changes with Monthly or Annual keeps room for the longer of its two texts, at every width.
   The live text and an invisible copy of each version share one grid cell, so the cell is as tall as the taller version. */
.pricing__annualnote, .pricing__annual, .pricing__annualfoot { display: grid; }
.pricing__annualnote::before, .pricing__annual::before, .pricing__annualfoot::before { content: attr(data-monthly); }
.pricing__annualnote::after, .pricing__annual::after, .pricing__annualfoot::after { content: attr(data-annual); }
.pricing__annualnote::before, .pricing__annualnote::after, .pricing__annual::before, .pricing__annual::after, .pricing__annualfoot::before, .pricing__annualfoot::after { grid-area: 1 / 1; visibility: hidden; pointer-events: none; }
.pricing__live { grid-area: 1 / 1; }

/* Panels: the notes under the plans use the card look (white, bordered, the thin rust top rule) instead of loose text */
.pricing__panel { margin-top: var(--space-6, 32px); padding: var(--space-5, 24px); background: var(--color-surface-raised, #FFFFFF); border: 1px solid var(--color-border, #7A736C); border-top: 4px solid var(--color-accent, #A7410E); border-radius: 4px; }
.pricing__panel--billing { margin: 0 0 var(--space-6, 32px); max-width: 640px; }
.pricing__panel--billing .pricing__cadence { margin-bottom: var(--space-3, 12px); }
.pricing__panel > .pricing__h2:first-child, .pricing__panel > .pricing__h2:first-of-type { margin-top: 0; }
.pricing__notelist { margin: 0; padding: 0; list-style: none; max-width: 640px; }
.pricing__notelist li { margin: 0 0 var(--space-2, 8px); font-size: 14px; color: var(--color-text-muted, #5E5853); }
.pricing__notelist li:last-child { margin-bottom: 0; }
@media (min-width: 960px) { .pricing__panel { padding: var(--space-6, 32px); } .pricing__panel--billing { padding: var(--space-5, 24px); } }
@media (forced-colors: active) { .pricing__panel { border-top-color: CanvasText; } }