/* Pricing page — four-tier plan grid, priced add-ons, honesty section, and
   a real FAQ accordion. Page-specific rules only; shared primitives
   (.card, .chip, .btn, .grid, .icon, .section-head …) come from
   components.css. */

/* ---- Hero ---- */
.pricing-hero__title{ margin-top: var(--space-5); }
.pricing-hero__lede{ margin: 16px auto 0; max-width: 560px; }
.pricing-hero__jump{ margin-top: var(--space-7); }

/* ---- Shared caption for gradient surfaces (hero + closing CTA) ----
   Matches home.css's .hero__note value exactly (rgba(255,255,255,0.8) on
   the same --gradient-hero background) — reusing an already-verified
   pairing rather than inventing a new one. */
.gradient-note{ margin-top: var(--space-5); font-size: var(--text-small); color: rgba(255,255,255,0.8); }

/* ---- Closing CTA button row ---- */
.pricing-cta-row{ margin-top: var(--space-7); display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; }

/* ---- The plan card (expanded from the homepage teaser) ---- */
.plan-card{ max-width: 920px; margin-inline: auto; padding: var(--space-8); }
.plan-card__grid{ display: grid; grid-template-columns: minmax(0,300px) 1fr; gap: var(--space-8); align-items: start; }
.plan-card__summary{ padding-right: var(--space-8); border-right: var(--border-hairline); }
.plan-card__desc{ margin-top: var(--space-3); }
.plan-card__price{ font-family: var(--font-display); font-size: 3.25rem; font-weight: 700; letter-spacing: var(--tracking-h); margin: var(--space-4) 0 0; }
.plan-card__price span{ font-family: var(--font-sans); font-size: var(--text-body); font-weight: 500; color: var(--text-tertiary); }
.plan-card__cta{ margin-top: var(--space-6); width: 100%; }
.plan-card__cta-note{ margin-top: var(--space-3); font-size: var(--text-micro); color: var(--text-tertiary); }

.plan-card__features-label{
  font-size: var(--text-small); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--text-tertiary); margin-bottom: var(--space-5);
}
.plan-card__list{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-4) var(--space-6); }
.plan-card__list li{ display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-small); color: var(--text-secondary); }
.plan-card__list svg{ color: var(--success-700); flex-shrink: 0; margin-top: 2px; }

/* ---- Tier grid ---- */
.tier-grid{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-5); align-items: stretch; }
/* Reserve space above the cards for the badge's 13px overhang, clear of the billing toggle. */
#plans .tier-grid{ padding-top: var(--space-5); }
@media (max-width: 1100px){ .tier-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .tier-grid{ grid-template-columns: minmax(0,1fr); } }

/* Five tiers. Doubled class so these beat the four-up rules above on specificity
   rather than on source order — the .tier-grid breakpoints still match this element.
   Five across needs the card to give back ~60px of width, so padding and list type
   step down with it; below 1240 it drops to 3 + 2 rather than squeezing further. */
.tier-grid.tier-grid--5{ grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--space-4); }
.tier-grid--5 .tier-card{ padding: var(--space-5) var(--space-4); }
.tier-grid--5 .tier-card__price{ font-size: 1.875rem; }
.tier-grid--5 .tier-card__list{ margin-top: var(--space-5); gap: 10px; }
.tier-grid--5 .tier-card__list li{ font-size: var(--text-micro); }
.tier-grid--5 .tier-card__tagline{ min-height: 44px; }
.tier-grid--5 .tier-card__badge{ left: 16px; }
@media (max-width: 1240px){ .tier-grid.tier-grid--5{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); } }
@media (max-width: 900px){  .tier-grid.tier-grid--5{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){  .tier-grid.tier-grid--5{ grid-template-columns: minmax(0,1fr); } .tier-grid--5 .tier-card__tagline{ min-height: 0; } }

/* The sentence under the grid that explains what each step buys. */
.tier-step{ max-width: 860px; margin: var(--space-6) auto 0; text-align: center;
  font-size: var(--text-small); color: var(--text-secondary); line-height: 1.7; }

.tier-card{ display: flex; flex-direction: column; padding: var(--space-6); position: relative; }
.tier-card--featured{ border-color: var(--blue-600); border-width: 2px; }
.tier-card__badge{ position: absolute; top: -13px; left: 24px; }
.tier-card__name{ font-family: var(--font-display); font-weight: 600; font-size: var(--text-h4); }
.tier-card__tagline{ font-size: var(--text-micro); color: var(--text-tertiary); margin-top: 4px; min-height: 32px; }
.tier-card__price{ font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; letter-spacing: var(--tracking-h); margin-top: var(--space-5); }
.tier-card__price span{ font-family: var(--font-sans); font-size: var(--text-small); font-weight: 500; color: var(--text-tertiary); }
.tier-card__billing-note{ margin-top: 4px; font-size: var(--text-micro); color: var(--text-tertiary); min-height: 1em; }
/* Long trial labels wrap inside narrow five-up cards and mobile cards. */
.tier-card__cta{ margin-top: var(--space-5); width: 100%; min-width: 0; max-width: 100%;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.35; text-align: center;
  padding-inline: var(--space-3); }
.tier-card__list{ margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.tier-card__list li{ display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-small); color: var(--text-secondary); }
.tier-card__list svg{ color: var(--success-700); flex-shrink: 0; margin-top: 2px; width: 16px; height: 16px; }
.tier-card__list li.is-muted{ color: var(--text-tertiary); }
.tier-card__list li.is-muted svg{ color: var(--ink-300); }

/* ---- Billing toggle ---- */
.billing-toggle{ display: inline-flex; background: var(--surface-sunken); border: var(--border-hairline); border-radius: var(--radius-full); padding: 4px; gap: 4px; margin: var(--space-6) auto 0; }
.billing-toggle button{ font-size: var(--text-small); font-weight: 600; padding: 8px 18px; border-radius: var(--radius-full); color: var(--text-secondary); }
.billing-toggle button[aria-pressed="true"]{ background: var(--blue-600); color: #fff; }

/* ---- Add-ons ---- */
.addon-grid{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-5); }
@media (max-width: 1100px){ .addon-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .addon-grid{ grid-template-columns: minmax(0,1fr); } }
.addon-card__price{ font-family: var(--font-display); font-weight: 700; font-size: var(--text-h4); margin-top: var(--space-3); }
.addon-card__price span{ font-family: var(--font-sans); font-size: var(--text-micro); font-weight: 500; color: var(--text-tertiary); }
.addon-card__desc{ margin-top: var(--space-2); }

@media (max-width: 860px){
  .plan-card__grid{ grid-template-columns: minmax(0,1fr); gap: var(--space-7); }
  .plan-card__summary{ padding-right: 0; padding-bottom: var(--space-7); border-right: none; border-bottom: var(--border-hairline); }
}
@media (max-width: 560px){
  .plan-card{ padding: var(--space-5); }
  .plan-card__list{ grid-template-columns: minmax(0,1fr); }
}

/* ---- "Why these prices" assurance tiles ---- */
.assurance-tile{ display: flex; flex-direction: column; gap: var(--space-3); }
.assurance-tile__icon{
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--blue-50); color: var(--blue-600);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.assurance-tile__desc{ margin-top: var(--space-2); }

/* ---- FAQ accordion ----
   Plain list, hairline dividers, no card wrapper or shadow — matches the
   measured DocuSign FAQ anatomy, in KuduDoc's own type/colour language. */
.faq-list{ max-width: 760px; border-top: var(--border-hairline); }
.faq-item{ border-bottom: var(--border-hairline); }
.faq-item__q{ margin: 0; font-size: inherit; font-weight: inherit; }
.faq-item__trigger{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0; text-align: left; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-h4); color: var(--ink-900);
  background: none; border: none;
  transition: color var(--dur-base) var(--ease-out);
}
.faq-item__trigger:hover{ color: var(--blue-600); }
.faq-item__trigger[aria-expanded="true"]{ color: var(--blue-600); }
.faq-item__chevron{
  width: 22px; height: 22px; flex-shrink: 0; color: var(--ink-500);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.faq-item__trigger[aria-expanded="true"] .faq-item__chevron{ transform: rotate(180deg); color: var(--blue-600); }

.faq-item__panel-wrap{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.faq-item__panel-wrap.is-open{ grid-template-rows: 1fr; }
.faq-item__panel-inner{ overflow: hidden; }
.faq-item__answer{ max-width: 640px; padding-bottom: var(--space-5); color: var(--text-secondary); }

/* ---- Current-page nav indicator (harmless addition to the shared nav markup) ---- */
.nav__link[aria-current="page"]{ color: var(--blue-600); }
.mobile-menu__links a[aria-current="page"]{ color: var(--blue-600); }

/* ---- Compare plan features (DocuSign pricing anatomy) ----
   Grouped accordions reusing .faq-item classes; inside each panel, rows are
   a 5-column grid matching the sticky-ish plan-name header above. On narrow
   screens the whole block scrolls horizontally inside its own container. */
/* Five plan columns. min-width rises with the extra column so the table scrolls
   sideways inside .compare rather than crushing the label column on a phone. */
.compare{ max-width: 1100px; margin-inline: auto; overflow-x: auto; }
.compare > *{ min-width: 880px; }
.compare__plans,
.compare__row{ display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: var(--space-3); align-items: center; }
.compare__plans{ padding-block: var(--space-4); border-bottom: 2px solid var(--ink-900); }
.compare__plan-name{ font-family: var(--font-display); font-weight: 700; font-size: var(--text-small); text-align: center; }
.compare__plan-name span{ display: block; font-family: var(--font-sans); font-weight: 500; font-size: var(--text-micro); color: var(--text-tertiary); margin-top: 2px; }
.compare__group .faq-item__trigger{ font-size: var(--text-body); }
.compare__row{ padding-block: var(--space-3); border-top: var(--border-hairline); }
.compare__row:first-child{ border-top: none; }
.compare__label{ font-size: var(--text-small); color: var(--text-secondary); }
.compare__cell{ text-align: center; font-size: var(--text-small); color: var(--ink-900); font-weight: 600; }
.compare__check{ width: 18px; height: 18px; stroke: var(--success-700); fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; display: inline-block; }
.compare__dash{ color: var(--ink-300); font-weight: 400; }
.compare .faq-item__panel-inner{ padding-bottom: var(--space-4); }

/* ---- Competitor comparison ---- */
.rival{ max-width: 1040px; overflow-x: auto; }
.rival > *{ min-width: 860px; }
.rival__row{ display: grid; grid-template-columns: 1.9fr repeat(4, 1fr); gap: var(--space-3); align-items: center; padding-block: var(--space-4); border-top: var(--border-hairline); }
.rival__row--head{ border-top: none; padding-bottom: var(--space-3); }
.rival__row--head .rival__col{ font-family: var(--font-display); font-weight: 700; font-size: var(--text-small); color: var(--ink-900); }
.rival__row--head .rival__col--us{ color: var(--blue-600); }
.rival__label{ font-size: var(--text-small); color: var(--text-secondary); line-height: 1.45; }
.rival__col{ text-align: center; font-size: var(--text-small); color: var(--text-tertiary); }
.rival__col strong{ display: block; font-size: var(--text-body); color: var(--ink-900); font-weight: 700; }
.rival__col span{ display: block; font-size: var(--text-micro); color: var(--text-tertiary); margin-top: 2px; }
.rival__col--us{ background: var(--blue-50); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-1); }
.rival__col--us strong{ color: var(--blue-700); }


/* A real, published competitor number next to the grid, so the top of our own ladder
   reads as a fraction of the alternative rather than as the ceiling. */
.tier-anchor{ max-width: 760px; margin: var(--space-5) auto 0; text-align: center;
  font-size: var(--text-small); color: var(--text-secondary); line-height: 1.7; }
.tier-anchor a{ white-space: nowrap; }

/* Every tier now shows one VAT-inclusive price, but the billing note runs to two or
   three lines depending on tier, so reserve it to keep the five CTAs on one baseline. */
.tier-grid--5 .tier-card__billing-note{ min-height: 3.9em; }

/* "Business Standard" is the only tier name that wraps to two lines at the 5-up
   width, which pushed that card's CTA 32px below the others. Reserve the second
   line on every card so the button row stays flat. */
.tier-grid--5 .tier-card__name{ min-height: 2.4em; line-height: 1.2; }