/* ═══════════════════════════════════════════════════════════════════════════
   QNSQY pricing (pricing.html and the homepage preview)
   Every rule is scoped under .pp so the older .pricing cards on other pages
   keep their styles. Loads after styles.css and site-qnsqy.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.pp {
  --pp-rule: 1px solid var(--color-border-light);
  --pp-rule-soft: 1px solid var(--color-border);
  --pp-tint: rgba(255, 107, 0, 0.07);
  --pp-tint-strong: rgba(255, 107, 0, 0.12);
  --pp-sticky-top: 0px; /* the site menu hides while scrolling down */
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding) var(--space-4xl);
}

[data-theme="light"] .pp {
  --pp-tint: rgba(194, 64, 0, 0.06);
  --pp-tint-strong: rgba(194, 64, 0, 0.1);
}

.pp-nw {
  white-space: nowrap;
}

.pp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Billing period switch ─────────────────────────────────────────────── */

.pp-billing {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--space-2xl);
  padding: 0;
  border: 0;
}

.pp-billing__group {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: var(--pp-rule);
  border-radius: 999px;
}

.pp-billing__option {
  position: relative;
  display: inline-flex;
}

.pp-billing__option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pp-billing__option span {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  transition: background var(--duration-fast), color var(--duration-fast);
}

.pp-billing__option input:checked + span {
  background: var(--color-text);
  color: var(--color-bg);
}

.pp-billing__option input:focus-visible + span {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.pp-billing__save {
  color: var(--color-accent);
}

.pp-billing__option input:checked + span .pp-billing__save {
  color: inherit;
  opacity: 0.7;
}

/* ─── Plan cards ────────────────────────────────────────────────────────────
   Four cards share one grid. Each card spans the same 10 row tracks through
   subgrid, so every row (name, price, button, each spec line) lines up
   across all cards and the cards always end at the same height.          */

.pp-plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--pp-rule-soft);
  border-left: var(--pp-rule-soft);
}

.pp-plan {
  display: grid;
  grid-row: span 10;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
  padding: var(--space-xl) clamp(var(--space-md), 1.6vw, var(--space-xl)) var(--space-lg);
  border-right: var(--pp-rule-soft);
  border-bottom: var(--pp-rule-soft);
  background: var(--color-bg);
}

.pp-plan--featured {
  background: linear-gradient(180deg, var(--pp-tint-strong) 0%, var(--pp-tint) 18%, transparent 55%), var(--color-bg);
  box-shadow: inset 0 2px 0 var(--color-accent);
}

/* The heading comes first in the markup; column-reverse shows the optional
   tag above it and keeps every plan name on the bottom line of the row, so
   the names line up across cards whether or not a card has a tag. */
.pp-plan__head {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.6rem;
}

.pp-plan__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.7vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-text);
  text-transform: none;
}

.pp-plan__tag {
  padding: 3px 9px;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  white-space: nowrap;
}

.pp-plan__for {
  margin: 0;
  padding-top: 0.5rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* Price block */

.pp-price {
  padding: var(--space-lg) 0 var(--space-md);
}

.pp-price__from {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pp-price__line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.pp-price__amount {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.pp-price__unit {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pp-price__note {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-text-secondary);
}

/* Monthly is the default and the no-JavaScript view. */
.pp-plans[data-period="monthly"] .pp-when--yearly,
.pp-plans:not([data-period]) .pp-when--yearly,
.pp-plans[data-period="yearly"] .pp-when--monthly {
  display: none;
}

.pp-price.is-swapping .pp-price__amount {
  animation: pp-swap 260ms var(--ease-out-expo);
}

@keyframes pp-swap {
  from { opacity: 0; transform: translateY(0.25em); }
  to { opacity: 1; transform: none; }
}

/* Button */

.pp-cta {
  align-self: start;
  margin: 0 0 var(--space-lg);
  padding: 0.9rem 1.2rem;
  border-radius: 12px;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.pp-cta.btn--primary {
  color: #000;
}

[data-theme="light"] .pp-cta.btn--primary {
  color: #fff;
}

.pp-cta.btn--primary:hover {
  color: var(--color-accent);
}

/* Spec rows: one label and one short value per row */

.pp-specs {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
  margin: 0;
}

.pp-spec {
  padding: 0.8rem 0;
  border-top: var(--pp-rule-soft);
}

.pp-spec dt {
  margin-bottom: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pp-spec dd {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--color-text);
}

.pp-more {
  align-self: end;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--space-sm);
  padding: 0.6rem 0;
  border-top: var(--pp-rule-soft);
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
}

.pp-more:hover,
.pp-more:focus-visible {
  color: var(--color-text);
}

.pp-more:focus-visible,
.pp-compare__toggle:focus-visible,
.pp-faq summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.pp-more__arrow {
  transition: transform var(--duration-fast);
}

.pp-more:hover .pp-more__arrow {
  transform: translateY(2px);
}

.pp-fineprint {
  margin: var(--space-lg) 0 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* Without subgrid the cards still match heights; only the rows stop
   lining up across cards. */
@supports not (grid-template-rows: subgrid) {
  .pp-plan {
    display: flex;
    flex-direction: column;
  }
  .pp-specs {
    display: block;
  }
  .pp-more {
    margin-top: auto;
  }
}

@media (max-width: 1100px) {
  .pp-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .pp-plans {
    grid-template-columns: minmax(0, 1fr);
  }
  .pp-plan {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }
  .pp-specs {
    display: block;
  }
  .pp-billing__option span {
    padding: 0.55rem 0.9rem;
  }
}

/* ─── Section headings ──────────────────────────────────────────────────── */

.pp-section {
  margin-top: clamp(var(--space-3xl), 8vh, var(--space-4xl));
}

.pp-section--plans {
  margin-top: var(--space-2xl);
}

.pp-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-xl);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: var(--pp-rule);
}

.pp-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-transform: none;
  color: var(--color-text);
}

.pp-lede {
  margin: 0;
  max-width: 44rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.pp-note {
  margin: var(--space-md) 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.pp-note a,
.pp-lede a,
.pp-faq a,
.pp-fineprint a,
.pp-offers a:not(.btn) {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Full comparison (opens from "Learn more") ─────────────────────────── */

.pp-compare {
  margin-top: var(--space-2xl);
  border-top: var(--pp-rule);
  border-bottom: var(--pp-rule);
}

.pp-compare__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.pp-compare__toggle::-webkit-details-marker {
  display: none;
}

.pp-compare__hint {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  white-space: nowrap;
}

.pp-compare__hint::after {
  content: " +";
}

.pp-compare[open] .pp-compare__hint::after {
  content: " \2212";
}

.pp-compare__body {
  padding-bottom: var(--space-xl);
}

.pp-table-wrap {
  border: var(--pp-rule-soft);
}

.pp-swipe-hint {
  display: none;
  margin: 0 0 var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .pp-swipe-hint {
    display: block;
  }
}

.pp-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
}

.pp-table col.pp-col--feature {
  width: 32%;
}

.pp-table col.pp-col--free,
.pp-table col.pp-col--pro,
.pp-table col.pp-col--business,
.pp-table col.pp-col--enterprise {
  width: 17%;
}

.pp-table thead th {
  position: sticky;
  top: var(--pp-sticky-top);
  z-index: 2;
  padding: 0.9rem 0.75rem;
  background: var(--color-bg);
  border-bottom: var(--pp-rule);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text);
  vertical-align: bottom;
}

.pp-table thead th:first-child {
  text-align: left;
  color: var(--color-text-muted);
}

.pp-table thead th small {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-secondary);
}

.pp-table tbody th[scope="rowgroup"] {
  padding: 1.4rem 1rem 0.6rem;
  background: var(--color-bg);
  border-bottom: var(--pp-rule);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-accent);
}

.pp-table tbody th[scope="row"] {
  padding: 0.72rem 1rem;
  border-bottom: var(--pp-rule-soft);
  font-weight: 400;
  text-align: left;
  color: var(--color-text-secondary);
}

.pp-table td {
  padding: 0.72rem 0.75rem;
  border-bottom: var(--pp-rule-soft);
  text-align: center;
  color: var(--color-text);
  line-height: 1.4;
}

.pp-table tbody tr:hover th[scope="row"],
.pp-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

[data-theme="light"] .pp-table tbody tr:hover th[scope="row"],
[data-theme="light"] .pp-table tbody tr:hover td {
  background: rgba(0, 0, 0, 0.025);
}

.pp-table[data-highlight="free"] col.pp-col--free,
.pp-table[data-highlight="pro"] col.pp-col--pro,
.pp-table[data-highlight="business"] col.pp-col--business,
.pp-table[data-highlight="enterprise"] col.pp-col--enterprise {
  background: var(--pp-tint);
}

.pp-yes,
.pp-no {
  display: inline-block;
  width: 18px;
  height: 18px;
  position: relative;
  vertical-align: middle;
}

.pp-yes::before {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: translate(-50%, -50%) rotate(45deg);
}

.pp-no::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1px;
  background: var(--color-text-muted);
  opacity: 0.7;
  transform: translate(-50%, -50%);
}

@media (max-width: 900px) {
  .pp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pp-table {
    min-width: 680px;
  }
  .pp-table thead th {
    position: static;
  }
  /* Only the feature column sticks, and only sideways: top must be reset or
     the header cell keeps the desktop vertical offset and covers rows. */
  .pp-table tbody th[scope="row"],
  .pp-table thead th:first-child {
    position: sticky;
    top: auto;
    left: 0;
    z-index: 1;
    background: var(--color-bg);
  }
  .pp-table tbody th[scope="rowgroup"] > span {
    position: sticky;
    left: 1rem;
  }
}

/* ─── Offer tables: organizations, builds, developer API ────────────────── */

.pp-offers {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.pp-offers thead th {
  padding: 0 1rem 0.75rem 0;
  border-bottom: var(--pp-rule);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-text-muted);
}

.pp-offers tbody th,
.pp-offers td {
  padding: 1.1rem 1rem 1.1rem 0;
  border-bottom: var(--pp-rule-soft);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.pp-offers tbody th {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-text);
  white-space: nowrap;
}

.pp-offers td {
  color: var(--color-text-secondary);
}

.pp-offers .pp-offers__price {
  color: var(--color-text);
  font-weight: 600;
  white-space: nowrap;
}

.pp-offers .pp-offers__price small {
  display: block;
  font-weight: 400;
  color: var(--color-text-muted);
  white-space: normal;
}

.pp-offers .pp-offers__action {
  padding-right: 0;
  text-align: right;
  white-space: nowrap;
}

.pp-offers .btn {
  padding: 0.7rem 1rem;
  border-radius: 10px;
  font-size: 0.66rem;
  text-transform: uppercase;
}

.pp-status {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.pp-status--live {
  border-color: var(--color-success);
  color: var(--color-success);
}

[data-theme="light"] .pp-status--live {
  border-color: #1d7a2e;
  color: #1d7a2e;
}

@media (max-width: 760px) {
  .pp-offers thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .pp-offers,
  .pp-offers tbody,
  .pp-offers tr,
  .pp-offers th,
  .pp-offers td {
    display: block;
  }
  .pp-offers tr {
    padding: 1rem 0;
    border-bottom: var(--pp-rule-soft);
  }
  .pp-offers tbody th,
  .pp-offers td {
    padding: 0.2rem 0;
    border: 0;
    white-space: normal;
  }
  .pp-offers td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
  .pp-offers .pp-offers__action {
    padding-top: 0.75rem;
    text-align: left;
  }
}

/* ─── Questions ─────────────────────────────────────────────────────────── */

.pp-faq {
  border-top: var(--pp-rule);
}

.pp-faq details {
  border-bottom: var(--pp-rule-soft);
}

.pp-faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 1.1rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

.pp-faq summary::-webkit-details-marker {
  display: none;
}

.pp-faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--color-accent);
}

.pp-faq details[open] summary::after {
  content: "\2212";
}

.pp-faq__answer {
  max-width: 50rem;
  padding: 0 0 1.25rem;
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.pp-faq__answer p {
  margin: 0;
}

/* ─── Homepage preview ──────────────────────────────────────────────────── */

.pp--preview {
  padding: 0;
}

.pp-preview-link {
  margin-top: var(--space-xl);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .pp-price.is-swapping .pp-price__amount {
    animation: none;
  }
  .pp-more__arrow,
  .pp-billing__option span {
    transition: none;
  }
}

@media print {
  .pp-billing,
  .pp-more,
  .pp-cta {
    display: none;
  }
  .pp-compare__body {
    display: block;
  }
}

/* ─── Text price (Enterprise "Contact us") ──────────────────────────────── */

.pp-price__amount--text {
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  letter-spacing: -0.02em;
}

/* ─── Enterprise call-out on the pricing page ───────────────────────────── */

.pp-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg) var(--space-2xl);
  padding: clamp(var(--space-lg), 3vw, var(--space-2xl));
  border: var(--pp-rule);
  background: linear-gradient(135deg, var(--pp-tint) 0%, transparent 60%), var(--color-bg);
}

.pp-callout__text {
  flex: 1 1 28rem;
  min-width: 0;
}

.pp-callout__text .pp-lede {
  margin-top: var(--space-sm);
}

.pp-callout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.pp-callout__btn,
.pp-header-actions .btn {
  padding: 0.85rem 1.2rem;
  border-radius: 12px;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.pp-callout__btn.btn--primary,
.pp-header-actions .btn--primary {
  color: #000;
}

[data-theme="light"] .pp-callout__btn.btn--primary,
[data-theme="light"] .pp-header-actions .btn--primary {
  color: #fff;
}

.pp-callout__btn.btn--primary:hover,
.pp-header-actions .btn--primary:hover {
  color: var(--color-accent);
}

.pp-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

/* ─── Text-heavy comparison (builds) ────────────────────────────────────── */

.pp-table--text td {
  text-align: left;
  vertical-align: top;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.pp-table--text tbody th[scope="row"] {
  vertical-align: top;
  color: var(--color-text);
  font-weight: 600;
}

.pp-table--text thead th {
  text-align: left;
}

.pp-table--builds col.pp-col--feature {
  width: 19%;
}

@media (max-width: 900px) {
  .pp-table--builds {
    min-width: 760px;
  }
}

/* ─── How buying works ──────────────────────────────────────────────────── */

.pp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--pp-rule-soft);
  border-left: var(--pp-rule-soft);
}

.pp-step {
  padding: var(--space-lg);
  border-right: var(--pp-rule-soft);
  border-bottom: var(--pp-rule-soft);
}

.pp-step__n {
  display: inline-block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

.pp-step__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-transform: none;
}

.pp-step__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

@media (max-width: 760px) {
  .pp-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}