/* Pricing. Loaded by pricing.html (with css/use-cases.css) and by index.html for the
   homepage teaser band (.pband). Strictly monochrome; the proposal's colour accents
   are rendered in ink and grey here. Tokens come from tokens.css / use-cases.css. */

/* ---------- Hero facts strip ---------- */
.phero-facts{display:flex;flex-wrap:wrap;gap:.6rem 0;margin-top:clamp(1.75rem,3.5vh,2.5rem);}
.phero-facts span{font-size:.9375rem;color:oklch(1 0 0 / .6);padding:0 1.5rem;border-left:1px solid oklch(1 0 0 / .18);}
.phero-facts span:first-child{padding-left:0;border-left:0;}
.phero-facts b{color:#fff;font-weight:600;}
@media (max-width:640px){.phero-facts span{flex:0 0 100%;padding:0;border-left:0;}}

/* ---------- The packages ---------- */
.tiers{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,1.6vw,1.5rem);
  margin-top:clamp(2.5rem,5vh,3.5rem);align-items:start;
}
.tier{
  display:flex;flex-direction:column;
  padding:clamp(1.5rem,2vw,2rem);
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-4xl);
  box-shadow:0 4px 6px -1px color-mix(in oklch,var(--foreground) 6%,transparent);
}
.tier.pop{
  background:var(--foreground);color:#fff;border-color:transparent;
  box-shadow:0 24px 44px -18px color-mix(in oklch,var(--foreground) 45%,transparent);
}
.tier-head{display:flex;align-items:center;gap:.625rem;}
.tier-name{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;}
.tier-badge{
  font-size:.5625rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  padding:.25rem .5rem;border-radius:9999px;background:var(--secondary);color:var(--muted-foreground);
}
.tier.pop .tier-badge{background:#FF6001;color:#fff;}
.tier-for{margin:.875rem 0 0;font-size:.8125rem;line-height:1.4;color:var(--muted-foreground);min-height:2.3em;}
.tier.pop .tier-for{color:oklch(1 0 0 / .62);}
/* min-height matches .tier-amt's line box so every price row is the same height —
   this keeps the CTA below it aligned across cards, incl. Enterprise's "Let's talk". */
.tier-price{display:flex;align-items:baseline;gap:.15rem;margin-top:1.5rem;min-height:clamp(2.625rem,3.5vw,3.25rem);}
.tier-cur{font-size:clamp(2.625rem,3.5vw,3.25rem);font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--muted-foreground);}
.tier.pop .tier-cur{color:oklch(1 0 0 / .6);}
.tier-amt{font-size:clamp(2.625rem,3.5vw,3.25rem);font-weight:600;letter-spacing:-.03em;line-height:1;}
.tier-per{font-size:.875rem;color:var(--muted-foreground);}
.tier.pop .tier-per{color:oklch(1 0 0 / .6);}
.tier-credits{display:flex;flex-direction:column;gap:.125rem;margin-top:1.25rem;}
.tier-cr{font-size:.875rem;font-weight:600;}
.tier-rate{font-size:.75rem;color:var(--muted-foreground);}
.tier.pop .tier-rate{color:oklch(1 0 0 / .55);}
.tier-save{
  display:flex;flex-direction:column;gap:.0625rem;margin-top:1.5rem;padding:.875rem 1rem;
  border-radius:var(--r-2xl);background:var(--secondary);
}
.tier.pop .tier-save{background:oklch(1 0 0 / .1);}
.tier-save-l{font-size:.5625rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground);}
.tier.pop .tier-save-l{color:oklch(1 0 0 / .6);}
.tier-save-v{font-size:1.375rem;font-weight:600;letter-spacing:-.02em;color:#FF6001;}
.tier-save-x{font-size:.75rem;color:var(--muted-foreground);}
.tier.pop .tier-save-x{color:oklch(1 0 0 / .62);}
/* dark "ink" CTA on both the homepage teaser and the pricing page (same look everywhere) */
.tier-cta{width:100%;justify-content:center;margin-top:1.5rem;background:var(--foreground);color:var(--background);border-color:transparent;}
.tier-cta:hover{background:#FF6001;color:#fff;}
.tier.pop .tier-cta{background:#fff;color:var(--foreground);}
.tier.pop .tier-cta:hover{background:#FF6001;color:#fff;}
.tier-list-h{margin-top:2rem;font-size:.5625rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground);}
.tier.pop .tier-list-h{color:oklch(1 0 0 / .6);}
.tier-can{list-style:none;margin:.625rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4375rem;}
.tier-can li{font-size:.8125rem;line-height:1.4;color:var(--muted-foreground);}
.tier-can li b{color:var(--foreground);font-weight:600;}
.tier.pop .tier-can li{color:oklch(1 0 0 / .6);}
.tier.pop .tier-can li b{color:#fff;}
.tier-any{margin-top:.625rem;font-size:.75rem;font-style:italic;color:var(--muted-foreground);}
.tier.pop .tier-any{color:oklch(1 0 0 / .5);}
.tier-inc{list-style:none;margin:1.75rem 0 0;padding:1.75rem 0 0;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:.625rem;}
.tier.pop .tier-inc{border-top-color:oklch(1 0 0 / .16);}
.tier-inc li{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:500;}
.tier-inc li i{display:inline-flex;flex:0 0 auto;width:1rem;height:1rem;align-items:center;justify-content:center;border-radius:9999px;background:#FF6001;color:#fff;}
.tier-inc li i svg{width:.6875rem;height:.6875rem;}
.tier-inc li.nope{color:var(--muted-foreground);}
.tier-inc li.nope i{background:var(--secondary);color:var(--muted-foreground);}
.tier.pop .tier-inc li i{background:#FF6001;color:#fff;}
.tier.pop .tier-inc li.nope i{background:oklch(1 0 0 / .16);color:oklch(1 0 0 / .6);}
@media (max-width:1080px){.tiers{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.tiers{grid-template-columns:1fr;}}

/* Pricing page carries a 5th (Enterprise) card, so it uses its own column ladder.
   Placed after the .tiers rules above so it wins by source order for .tiers-5 only;
   the home-page teaser (plain .tiers, 4 cards) keeps the 4-column ladder. */
.tiers-5{grid-template-columns:repeat(5,1fr);}
@media (max-width:1240px){.tiers-5{grid-template-columns:repeat(3,1fr);}}
@media (max-width:900px){.tiers-5{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.tiers-5{grid-template-columns:1fr;}}

/* "Let's talk" replaces the price on the Enterprise card, matched to the .tier-amt size so it
   reads at the same scale as the other cards' prices; centred within the shared price-row height. */
.tier-talk{font-size:clamp(2.625rem,3.5vw,3.25rem);font-weight:600;letter-spacing:-.03em;line-height:1;white-space:nowrap;}
.tier-ent .tier-price{align-items:center;}

.tiers-fine{margin:clamp(1.75rem,3vh,2.5rem) 0 0;max-width:74ch;font-size:.75rem;line-height:1.6;color:var(--muted-foreground);}

/* ---------- Included in every package ---------- */
.feats{list-style:none;margin:clamp(2.5rem,5vh,3.5rem) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,4vw,4rem);}
.feat{display:flex;gap:1rem;padding:1.25rem 0;border-top:1px solid var(--border);}
.feat:nth-child(1),.feat:nth-child(2){border-top:0;}
.feat-n{flex:0 0 auto;font-size:.75rem;font-weight:600;color:var(--muted-foreground);font-variant-numeric:tabular-nums;padding-top:.15rem;}
.feat-b{display:flex;flex-direction:column;gap:.3125rem;}
.feat-t{font-size:1rem;font-weight:600;letter-spacing:-.01em;}
.feat-s{font-size:.875rem;line-height:1.55;color:var(--muted-foreground);}
@media (max-width:760px){.feats{grid-template-columns:1fr;}.feat:nth-child(2){border-top:1px solid var(--border);}}

.pillars{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:clamp(2.5rem,5vh,3.5rem);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.pillar{padding:clamp(1.25rem,2.5vw,1.75rem) clamp(1rem,2vw,1.75rem);border-right:1px solid var(--border);}
.pillar:first-child{padding-left:0;}
.pillar:last-child{border-right:0;padding-right:0;}
.pillar-t{display:block;font-size:clamp(1.125rem,1.8vw,1.5rem);font-weight:600;letter-spacing:-.02em;}
.pillar-s{display:block;margin-top:.375rem;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--muted-foreground);}
@media (max-width:640px){
  .pillars{grid-template-columns:1fr;}
  .pillar{padding-left:0;padding-right:0;border-right:0;border-bottom:1px solid var(--border);}
  .pillar:last-child{border-bottom:0;}
}

.crm-line{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:clamp(1.75rem,3vh,2.5rem) 0 0;font-size:.875rem;color:var(--muted-foreground);}
.crm-chips{display:inline-flex;flex-wrap:wrap;gap:.5rem;}
.crm-chips span{padding:.3125rem .75rem;border-radius:9999px;background:var(--card);border:1px solid var(--border);font-size:.75rem;font-weight:600;color:var(--foreground);}

/* ---------- The value: rate ladder + credit strip ---------- */
.rate-ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.25rem,2.4vw,2.25rem);margin-top:clamp(2.5rem,5vh,3.5rem);}
.rung{display:flex;flex-direction:column;}
.rung-v{font-size:clamp(1.75rem,3vw,2.75rem);font-weight:600;letter-spacing:-.03em;line-height:1;margin-bottom:.875rem;}
.rung-track{display:block;height:.75rem;border-radius:9999px;background:var(--secondary);overflow:hidden;margin-bottom:.875rem;}
.rung-track i{display:block;height:100%;width:0;border-radius:9999px;background:var(--foreground);transition:width .85s cubic-bezier(.16,1,.3,1);}
.rate-ladder.in .rung-track i{width:var(--w);}   /* grow to the per-credit rate once the section scrolls in */
.rung:nth-child(1) .rung-track i{transition-delay:.1s;}
.rung:nth-child(2) .rung-track i{transition-delay:.2s;}
.rung:nth-child(3) .rung-track i{transition-delay:.3s;}
.rung:nth-child(4) .rung-track i{transition-delay:.4s;}
@media (prefers-reduced-motion:reduce){.rate-ladder .rung-track i{transition:none;}}
.rung-n{font-size:.9375rem;font-weight:600;letter-spacing:-.01em;}
.rung-s{margin-top:.25rem;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--muted-foreground);}
@media (max-width:640px){.rate-ladder{grid-template-columns:1fr 1fr;gap:clamp(1.75rem,5vw,2rem);}}

.cred-strip{margin-top:clamp(2.75rem,5.5vh,4rem);padding-top:clamp(2rem,4vh,2.75rem);border-top:1px solid var(--border);}
.cred-h{display:block;font-size:clamp(1.125rem,1.8vw,1.5rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;}
.cred-list{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 0;list-style:none;margin:1.25rem 0 0;padding:0;}
.cred-list li{display:inline-flex;align-items:center;font-size:.9375rem;color:var(--muted-foreground);}
.cred-list li b{color:var(--foreground);font-weight:600;margin-right:.375rem;}
.cred-list li:not(:last-child)::after{content:"\00B7";margin:0 .875rem;color:color-mix(in oklch,var(--foreground) 35%,transparent);}

/* ---------- FAQ: split layout (sticky heading + accordion) ---------- */
.faq-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(2rem,5vw,5rem);align-items:start;}
.faq-head{position:sticky;top:calc(var(--nav-h,5.5rem) + clamp(1rem,3vh,1.75rem));}
.faq-head h2{margin:0;}
.faq-intro{margin:1.25rem 0 0;max-width:32ch;font-size:clamp(.9375rem,1.3vw,1.0625rem);line-height:1.6;color:var(--muted-foreground);}
.pfaq{margin-top:0;border-top:1px solid var(--border);}
@media (max-width:900px){
  .faq-split{grid-template-columns:1fr;gap:clamp(1.75rem,4vh,2.5rem);}
  .faq-head{position:static;}
}
.qa{border-bottom:1px solid var(--border);}
.q-h{margin:0;}
.q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  margin:0;padding:clamp(1.25rem,2.5vw,1.75rem) 0;
  background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:var(--foreground);
  font-size:clamp(1rem,1.5vw,1.1875rem);font-weight:600;letter-spacing:-.01em;
}
.q-chev{flex:0 0 auto;width:1.125rem;height:1.125rem;color:var(--muted-foreground);transition:transform .3s cubic-bezier(.16,1,.3,1);}
.q:hover .q-chev{color:var(--foreground);}
.q:focus-visible{outline:2px solid var(--foreground);outline-offset:3px;border-radius:var(--radius);}
.qa.open .q-chev{transform:rotate(180deg);}
.qa-body{overflow:hidden;max-height:0;transition:max-height .35s cubic-bezier(.16,1,.3,1);}
.qa.open .qa-body{max-height:24rem;}   /* fallback; js/pricing.js sets the exact height so it never clips */
.a{margin:0;padding-bottom:clamp(1.25rem,2.5vw,1.75rem);font-size:.9375rem;line-height:1.6;color:var(--muted-foreground);max-width:82ch;}
@media (prefers-reduced-motion:reduce){.qa-body,.q-chev{transition:none;}}

/* ================= Homepage pricing teaser band ================= */
.pband{background:var(--background);color:var(--foreground);padding:clamp(4.5rem,10vh,8rem) var(--side, clamp(1.25rem,4vw,3.5rem));}
.pband .kicker{color:var(--muted-foreground);}    /* base.css kicker is white-55%; fix for this light field */
.pband-top{max-width:52rem;}
.pband-top h2{margin:.75rem 0 0;font-size:clamp(1.875rem,4.4vw,3.5rem);font-weight:600;letter-spacing:-.03em;line-height:1.04;text-transform:uppercase;}
.pband-top h2 .dim{color:var(--muted-foreground);}
.pband-note{margin:1rem 0 0;max-width:52ch;font-size:clamp(.9375rem,1.3vw,1.0625rem);line-height:1.6;color:var(--muted-foreground);}
/* the teaser reuses the full .tier cards from the pricing page (defined above), so it inherits
   their grid + responsive breakpoints. buttons here sit on a light field, so force the ink
   treatment (base.css .luma-btn defaults to white, for the dark hero). */
.pband .luma-btn{background:var(--foreground);color:var(--background);border-color:transparent;}
.pband .luma-btn:hover{background:#FF6001;color:#fff;opacity:1;}
.pband-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:clamp(2.5rem,5vh,3.5rem);}
.pband-fine{font-size:.8125rem;color:var(--muted-foreground);}