/* Pricing page (/pricing/) and the homepage pricing section. Numbers appear on
   /pricing/ only.
   The hero is the shared .page-hero, and the highlight card, section labels,
   titles, choice chips and notices come from styles.css. */

/* Hidden text for screen readers: the volume table caption and the "was" label
   before a struck-through price. */
.pricing-table-caption,
.pricing-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* A monthly list price struck through beside the price paid, in the estimator.
   Its "was" label is for screen readers only. */
.price-was { color: var(--ink-soft); font-weight: 700; text-decoration-thickness: 1.5px; }

/* Offer cards (_includes/price-card.html) on /pricing/.
   The top band wears the product colour; the bundle carries both products. */
.price-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.price-card { position: relative; min-width: 0; padding: 30px 26px 26px; display: flex; flex-direction: column; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 5px 5px 0 var(--ink); overflow: hidden; }
.price-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 12px; border-bottom: 1.5px solid var(--ink); background: var(--price-card-band, var(--paper)); }
.price-card--supply-chain { --price-card-band: var(--product-supply-chain-colour); }
.price-card--runtime { --price-card-band: var(--product-runtime-colour); }
.price-card--bundle { --price-card-band: linear-gradient(90deg, var(--product-supply-chain-colour) 0 50%, var(--product-runtime-colour) 50% 100%); }
.price-card__name { margin: 8px 0 0; font-size: 1.3rem; line-height: 1.15; letter-spacing: -.03em; }
.price-card__summary { margin: 10px 0 0; color: var(--ink-soft); font-size: .86rem; line-height: 1.6; }
.price-card__price { margin: 26px 0 0; display: grid; gap: 8px; }
.price-card__price strong { font-size: clamp(2.8rem, 4.6vw, 3.8rem); line-height: 1; letter-spacing: -.06em; }
.price-card__price { margin-bottom: 18px; }
.price-card__price span { color: var(--ink-soft); font-size: .82rem; font-weight: 700; line-height: 1.4; }
.price-card__annual { margin: auto 0 0; padding-top: 16px; border-top: 1.5px solid var(--line-soft); color: var(--ink); font-size: .82rem; line-height: 1.55; }
/* Side by side, each card spans one row per part (name, summary, price, annual
   line) of a shared subgrid, so the prices sit at the same height in every card. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .price-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
    .price-card__price { align-self: start; }
    .price-card__annual { align-self: end; }
  }
}
.price-card__annual span { font-weight: 800; }
.price-card__annual .price-card__discount { display: block; margin-top: 6px; font-weight: 700; }

/* Section heading descriptions on pricing surfaces. */
.home-pricing-copy > p,
.pricing-section-heading > p:last-child { margin-bottom: 4px; color: var(--ink-soft); font-size: .98rem; line-height: 1.72; }

/* Homepage section: words and a link to /pricing/, no numbers. */
.home-pricing { padding-top: clamp(92px, 11vw, 140px); }
/* Same column proportions as the shared .section-intro: title left, description
   and the link to /pricing/ right. */
.home-pricing-card { padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .65fr); align-items: end; gap: 28px 45px; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 7px 7px 0 var(--ink); }
.home-pricing-heading .section-title { text-wrap: balance; }
.home-pricing-copy { display: grid; justify-items: start; gap: 22px; }
.home-pricing-copy > p { margin-top: 0; }
.home-pricing-action { min-height: 48px; padding: 11px 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: 9px; background: var(--blue); color: var(--paper); font-size: .8rem; text-decoration: none; }
.home-pricing-action:hover { color: var(--ink); }

/* Pricing page. */
.pricing-body { padding-block: clamp(56px, 7vw, 96px) clamp(84px, 10vw, 125px); }
/* The free allowance is the page's main selling point: the shared .blue-card
   across the full row, with the figure from data set large, in lime as a
   headline accent on blue, like the hero's second line. The headline sits on
   the left and the description on the right, on the headline's baseline. */
.pricing-highlight { padding: clamp(30px, 4.4vw, 56px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; column-gap: clamp(32px, 6vw, 88px); }
.pricing-highlight .blue-card-label { grid-column: 1 / -1; }
.pricing-highlight h2 { margin: 22px 0 0; color: var(--paper); font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.05; letter-spacing: -.05em; text-wrap: balance; }
/* line-height 1 plus an em-based gap keeps the figure's descenders clear of the
   headline at every size. nowrap keeps the figure on one line on phones. */
.pricing-highlight-figure { margin-bottom: .2em; display: block; color: var(--lime); font-size: clamp(3.6rem, 7.4vw, 6.6rem); line-height: 1; letter-spacing: -.065em; white-space: nowrap; }
.pricing-highlight .blue-card-description { max-width: 520px; margin-top: 18px; font-size: .95rem; }
/* Beside the headline, the description's last line lines up with the headline's. */
@media (min-width: 761px) {
  .pricing-highlight .blue-card-description { margin: 0 0 .3em; font-size: 1rem; }
}
/* The free volume tier: a canvas plaque on the paper table (lime is reserved
   for the brand). */
.pricing-free-label { width: fit-content; margin: 0; padding: 6px 10px; display: inline-block; border: 1.5px solid var(--ink); border-radius: var(--label-radius); background: var(--canvas); color: var(--ink); font: 700 max(var(--min-text), .82rem) var(--sans); letter-spacing: .04em; }

.pricing-section { padding-top: clamp(84px, 10vw, 130px); }
.pricing-section-heading { margin-bottom: 36px; }

.pricing-table-intro { margin: 0 0 16px; font-weight: 700; line-height: 1.6; }
.pricing-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 5px 5px 0 var(--ink); overflow: hidden; }
.pricing-table th,
.pricing-table td { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; font-size: .9rem; line-height: 1.5; }
.pricing-table thead th { background: var(--ink); color: var(--paper); font-size: max(var(--min-text), .72rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-bottom: 0; }
.pricing-table tbody th { font-weight: 800; white-space: nowrap; }
.pricing-table tbody tr:last-child > * { border-bottom: 0; }

/* The card paints the ink panel and the form paints paper, so the rounded
   corners clip ink against the ink border and show no seam. */
.estimator-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 2px solid var(--ink); border-radius: 16px; background: var(--ink-panel); box-shadow: 7px 7px 0 var(--ink); overflow: hidden; }
.estimator-form { padding: clamp(24px, 3.2vw, 38px); display: grid; background: var(--paper); align-content: start; gap: 20px; }
.estimator-field { display: grid; gap: 8px; min-width: 0; }
.estimator-field > span,
.estimator-billing legend { font-size: .82rem; font-weight: 800; }
.estimator-billing { margin: 0; padding: 0; min-width: 0; border: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.estimator-billing legend { margin-bottom: 8px; padding: 0; }
.estimator-billing .choice-chip span { min-height: 44px; min-width: 110px; padding: 10px 16px; font-size: .84rem; }

.estimator-result { padding: clamp(24px, 3.2vw, 38px); border-left: 2px solid var(--ink); background: var(--ink-panel); color: var(--ink-panel-copy); }
.estimator-result__label { margin: 0; color: var(--lime); font-size: max(var(--min-text), .72rem); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
/* Block, not flex, so the space between the struck and the paid price stays in
   copied text. */
.estimator-result__total { margin: 12px 0 0; color: var(--paper); font-size: clamp(2.8rem, 5vw, 4.2rem); font-weight: 800; line-height: 1; letter-spacing: -.06em; overflow-wrap: anywhere; }
.estimator-result__tax { display: inline-block; color: var(--ink-panel-copy); font-size: max(var(--min-text), .82rem); font-weight: 700; letter-spacing: 0; vertical-align: middle; white-space: nowrap; }
.estimator-result__year { margin: 10px 0 0; color: var(--paper); font-weight: 700; }
.estimator-result__total .price-was { color: var(--ink-panel-muted); font-size: .42em; letter-spacing: -.02em; text-decoration-thickness: 2px; }
.estimator-result__lines .price-was { color: var(--ink-panel-muted); }
.estimator-result__lines { margin: 20px 0 0; padding: 18px 0 0; display: grid; gap: 8px; border-top: 1px solid var(--ink-panel-line); list-style: none; font-size: .86rem; line-height: 1.5; }
.estimator-result [hidden] { display: none; }
.estimator-over,
.estimator-noscript { margin-top: 16px; }
.estimator-noscript { margin-top: 0; }

.pricing-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pricing-faq-grid article { min-width: 0; padding: 26px; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); }
.pricing-faq-grid h3 { margin: 0; font-size: 1.12rem; line-height: 1.25; letter-spacing: -.025em; }
.pricing-faq-grid p { margin: 10px 0 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.65; }
.pricing-faq-grid a { color: var(--blue-dark); font-weight: 800; text-underline-offset: 3px; }
.pricing-faq-grid a:hover { color: var(--ink); }
.pricing-faq-grid a:focus-visible { border-radius: 2px; outline: 3px solid var(--pink); outline-offset: 3px; }

@media (max-width: 900px) {
  .price-card-grid { grid-template-columns: 1fr; }
  .estimator-card { grid-template-columns: 1fr; }
  .estimator-result { border-left: 0; border-top: 2px solid var(--ink); }
}

@media (max-width: 760px) {
  .pricing-highlight,
  .pricing-faq-grid,
  .home-pricing-card { grid-template-columns: 1fr; }
  /* Phones: size the figure to the card so it fits on one line down to 320px. */
  .pricing-highlight-figure { font-size: clamp(2.5rem, 12vw, 4.6rem); }
}

@media (max-width: 620px) {
  .price-card,
  .pricing-table { box-shadow: 4px 4px 0 var(--ink); }
  .pricing-highlight,
  .estimator-card,
  .home-pricing-card { box-shadow: 5px 5px 0 var(--ink); }
  .home-pricing { padding-top: 82px; }
  /* The volume table stacks into one card per tier on phones. */
  .pricing-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pricing-table,
  .pricing-table tbody,
  .pricing-table tr,
  .pricing-table th,
  .pricing-table td { display: block; }
  .pricing-table tr { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
  .pricing-table tbody tr:last-child { border-bottom: 0; }
  .pricing-table tbody th,
  .pricing-table td { padding: 3px 0; border-bottom: 0; white-space: normal; }
  .pricing-table tbody th::before,
  .pricing-table td::before { content: attr(data-label) ": "; content: attr(data-label) ": " / ""; color: var(--ink-soft); font-weight: 700; }
  .estimator-billing .choice-chip { flex: 1 1 120px; }
  .estimator-billing .choice-chip span { min-width: 0; flex: 1 1 auto; }
}