/* ==========================================================================
   Kizen — pricing.html (loads after styles.css + prompt-home.css)
   ========================================================================== */

/* Hero */
.pr-hero { overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 56px; padding-bottom: 36px; text-align: center; position: relative; isolation: isolate; }
.pr-hero::before { content: ""; position: absolute; inset: -40px -20% auto; height: 520px; z-index: -1; pointer-events: none; background:
  radial-gradient(40% 55% at 30% 35%, rgba(12,89,92,.13), transparent 70%),
  radial-gradient(35% 50% at 72% 30%, rgba(36,92,135,.11), transparent 70%); }
.pr-hero__title { font-size: clamp(38px, 6.4vw, 72px); line-height: 1.05; color: var(--ink); max-width: 1000px; }
.pr-hero__title em { font-style: normal; color: var(--teal); }
.pr-hero__lede { font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: var(--text-2); max-width: 740px; text-wrap: balance; }
.pr-hero__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pr-hero__trust li { padding: 7px 14px; border-radius: 999px; background: var(--teal-tint); color: var(--teal-dark); font-size: 14px; font-weight: 500; }
@media (min-width: 960px) { .pr-hero { padding-top: 80px; padding-bottom: 48px; } }

/* Plan cards */
.pr-plans { padding-bottom: 8px; }
.pr-cards { display: grid; gap: 18px; align-items: stretch; }
@media (min-width: 720px) { .pr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .pr-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.pr-card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 0 22px 26px; border: 1px solid var(--gray-200); border-radius: 22px; background: #fff; }
.pr-card__badge { margin: 0 -22px; padding: 9px 12px; border-radius: 21px 21px 0 0; background: var(--gray-50); color: var(--teal); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.pr-card__badge--empty { background: transparent; }
.pr-card__top { display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--gray-100); }
.pr-card__name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 22px; font-weight: 600; color: var(--ink); }
.pr-card__rec { padding: 3px 10px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.pr-card__price { display: flex; align-items: baseline; gap: 6px; color: var(--ink); }
.pr-card__price .display { font-size: clamp(44px, 4.4vw, 56px); line-height: 1; }
.pr-card__per { font-size: 16px; color: var(--text-3); }
.pr-card__blurb { color: var(--text-2); font-size: 15px; min-height: 3em; }
.pr-card__micro { margin-top: -4px; font-size: 13px; color: var(--text-3); text-align: center; }
.pr-card__head { font-size: 14px; font-weight: 600; color: var(--ink); }
.pr-card__list { gap: 10px; font-size: 15px; }
.pr-card__list li::before { margin-top: 2px; }
.pr-card--featured { border: 2px solid var(--teal); box-shadow: 0 30px 70px -40px rgba(12,89,92,.6); }
.pr-card--featured .pr-card__badge { margin: 0 -23px; border-radius: 20px 20px 0 0; background: var(--teal); color: #fff; }
@media (min-width: 1200px) { .pr-card--featured { transform: translateY(-8px); } }
.pr-plans__note { margin-top: 18px; text-align: center; font-size: 14px; color: var(--text-3); }

/* Comparison table */
.pr-table-wrap { overflow-x: auto; border: 1px solid var(--gray-200); border-radius: 20px; background: #fff; }
.pr-table-wrap:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.pr-table { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.pr-table th, .pr-table td { padding: 14px 18px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--gray-100); }
.pr-table tbody th { text-align: left; font-weight: 500; color: var(--ink); width: 28%; }
.pr-table td { color: var(--text-2); }
.pr-table thead th { position: sticky; top: 0; z-index: 2; background: #fff; vertical-align: bottom; padding-top: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--gray-200); }
.pr-table thead th > * { display: block; }
.pr-table__plan { font-size: 18px; font-weight: 600; color: var(--ink); }
.pr-table__price { margin: 2px 0 12px; font-size: 14px; font-weight: 400; color: var(--text-3); }
.pr-table thead .btn { display: inline-flex; width: 100%; max-width: 170px; }
.pr-table .is-featured { background: rgba(12,89,92,.04); }
.pr-table thead th.is-featured { background: #F2F7F7; }
.pr-table__group th { padding-top: 22px; padding-bottom: 10px; background: #FAFAFB; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); text-align: left; }
.pr-table tbody tr:last-child th, .pr-table tbody tr:last-child td { border-bottom: 0; }
.pr-yes { width: 20px; height: 20px; margin: 0 auto; fill: none; stroke: var(--teal); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pr-no { color: #B7BDC5; }

/* Enterprise band */
.pr-ent { display: grid; gap: 32px; padding: 40px 20px; }
@media (min-width: 640px) { .pr-ent { padding: 56px 40px; } }
@media (min-width: 1100px) { .pr-ent { grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding: 80px 64px; } }
.pr-ent__copy { display: flex; flex-direction: column; gap: 18px; }
.pr-ent .h2 { color: #fff; }
.pr-ent .lede { color: rgba(255,255,255,.85); }
.pr-ent .checklists { color: #fff; }
.pr-ent__form .book-form { box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }

/* Nav: current page */
.site-nav__links a[aria-current="page"] { color: var(--teal); font-weight: 600; }
.pr-hero__title em { display: block; }
.ph-pricing .logos__grid li:last-child:nth-child(odd) { grid-column: auto; }
@media (min-width: 640px) { .ph-pricing .logos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ph-pricing .logos__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1199px) { .pr-card__badge--empty { display: none; } .pr-card:not(:has(.pr-card__badge:not(.pr-card__badge--empty))) { padding-top: 22px; } }
.pr-hero__title em { text-wrap: balance; }

/* Enterprise band: CTA card (the form now lives in the "Schedule a call" pop-up) */
.pr-ent__cta { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 20px; background: #fff; color: var(--text-2); box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.pr-ent__cta-title { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; color: var(--ink); }
.pr-ent__cta-micro { font-size: 13px; color: var(--text-3); text-align: center; }
@media (min-width: 640px) { .pr-ent__cta { padding: 36px; } }

/* Sales pop-up */
.pr-sales__form, .pr-sales__done { display: flex; flex-direction: column; gap: 18px; }
.pr-sales__done { align-items: flex-start; gap: 14px; }
.pr-sales__done:focus { outline: none; }
.pr-sales__done .btn { margin-top: 6px; }
@media (min-width: 1200px) { .pr-card__blurb { font-size: 14px; } }

/* Cards line up: every row (badge, name, price, description, button, note, "Everything in…", list) is shared
   across the cards in a row, so if one description wraps to 3 lines they all take 3 lines. */
@media (min-width: 720px) {
  .pr-cards { row-gap: 18px; }
  .pr-card { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 12px; align-content: start; }
  .pr-card__top { display: contents; }
  .pr-card__blurb { min-height: 0; }
  .pr-card__micro { margin-top: -4px; padding-bottom: 20px; border-bottom: 1px solid var(--gray-100); }
  .pr-card__badge--empty { display: block !important; }   /* keep the empty badge row so rows stay aligned */
  .pr-card:not(:has(.pr-card__badge:not(.pr-card__badge--empty))) { padding-top: 0; }
}

/* Sign-up pop-up: "What do you want to build?" */
.ps-pick { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ps-pick legend { padding: 0; margin-bottom: 8px; font-size: 15px; font-weight: 500; color: var(--ink); }
.ps-pick__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ps-pick label { position: relative; display: block; cursor: pointer; }
.ps-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ps-pick span { display: flex; align-items: center; justify-content: center; min-height: 48px; height: 100%; padding: 8px 10px; border: 1.5px solid var(--gray-200); border-radius: 12px; background: #fff; font-size: 14px; font-weight: 500; line-height: 1.25; text-align: center; color: var(--ink); transition: border-color .15s, background .15s; }
.ps-pick label:hover span { border-color: var(--teal); }
.ps-pick input:checked + span { border-color: var(--teal); background: var(--teal-tint); color: var(--teal-dark); font-weight: 600; box-shadow: inset 0 0 0 1px var(--teal); }
.ps-pick input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.ps-pick[aria-invalid="true"] span { border-color: #B42318; }

/* Card spacing rhythm (overrides the flat 12px row gap): badge → name 22, name → price 8,
   price → description 14, description → button 22, button → note 10, rule → "Everything in…" 20 */
@media (min-width: 720px) {
  .pr-card { row-gap: 0; }
  .pr-card__badge { margin-bottom: 22px; }
  .pr-card__name { margin-bottom: 8px; }
  .pr-card__price { margin-bottom: 14px; }
  .pr-card__blurb { margin-bottom: 22px; }
  .pr-card > .btn, .pr-card__top > .btn { margin-bottom: 10px; }
  .pr-card__micro { margin-top: 0; }
  .pr-card__head { margin-top: 20px; margin-bottom: 12px; }
}

/* Featured (Team) card: rise 8px above the others by growing upward, so every card's bottom edge still lines up */
@media (min-width: 1200px) {
  .pr-card--featured { transform: none; margin-top: -8px; }
}
@media (min-width: 720px) { .pr-card__badge { align-self: start; } }
@media (min-width: 1200px) { .pr-card--featured .pr-card__badge { padding-top: 13px; padding-bottom: 13px; } }   /* +8px: the extra height it rises by */