/* ===========================================================================
   wispa · Pricing detail page (/pricing/). Loaded after styles.css + tools.css
   + platform.css + integration.css, so it only holds what's specific to this
   page: a two-column hero (copy left, price card right), a recycled ASCII voice
   wave, a horizontal "how it works" flow with glyph connectors, and an editorial
   value list. Each block is deliberately its own shape (no repeated card grid).
   =========================================================================== */

/* ───────────────────────────── hero: 2 columns ─────────────────────────── */
.price-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(28px, 5vw, 72px) clamp(40px, 6vw, 88px);
}
.price-hero-grid {
  position: relative;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 44px);
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.price-hero-copy { text-align: left; min-width: 0; }
/* undo the tool-hero centering for this left-aligned column */
.price-hero-copy .breadcrumb { justify-content: flex-start; margin-bottom: 20px; }
.price-hero-copy .kicker { justify-content: flex-start; }
.price-hero-copy .tool-h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  margin: 8px 0 16px;
  text-wrap: balance;
}
.price-hero-copy .tool-sub {
  margin: 0;
  max-width: 42ch;
  font-size: 1.04rem;
}

/* mono meta chips, dot-separated (recycles the trust-label register) */
.price-chips {
  list-style: none;
  margin: clamp(18px, 2.5vw, 26px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--muted);
}
.price-chips li { display: inline-flex; align-items: center; gap: 8px; }
.price-chips li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}

/* the recycled ASCII voice wave (base dim + brand-gradient bright core),
   sitting under the copy. Box reserved so it never reflows. */
.price-wave {
  --pw-fs: 12px;
  position: relative;
  display: inline-block;
  margin-top: clamp(22px, 3.5vw, 34px);
  min-height: calc(var(--pw-fs) * 5.45); /* 5 rows x 1.09 line-height */
  min-width: calc(var(--pw-fs) * 18);    /* 30 cols x 0.6em advance */
  pointer-events: none;
}
.price-wave pre {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--pw-fs);
  line-height: 1.09;
  text-align: left;
  white-space: pre;
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}
#pwBase { color: rgba(243, 239, 230, 0.2); }
[data-theme="light"] #pwBase { color: rgba(29, 25, 35, 0.28); }
#pwBright {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #8b7dff 12%, #a89dff 48%, #ff9d73 86%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(150, 130, 255, 0.22);
}
[data-theme="light"] #pwBright {
  background: linear-gradient(135deg, #5a49f0 12%, #6c5cff 48%, #d4592e 86%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}

/* the card sits flush-right in its column (no auto-centering margin here) */
.price-hero-card { min-width: 0; }
.price-hero-card .price-card { margin: 0; max-width: 440px; margin-inline: auto; }

/* ─────────────────────── section: how it works (flow) ───────────────────── */
.price-flow-sec { position: relative; padding-block: clamp(36px, 6vw, 72px); }
.price-flow-sec .section-head { text-align: center; margin-inline: auto; }
.price-flow-sec .section-head .kicker { justify-content: center; }
.price-flow-sec .section-head .kicker::before,
.price-flow-sec .section-head .kicker::after { display: none; }
.price-flow-sec .section-head h2 { margin-inline: auto; }

.price-flow {
  list-style: none;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 20px);
}
.price-flow-step { flex: 1 1 0; max-width: 280px; text-align: left; }
.pf-n {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-text);
}
.price-flow-step h3 { font-size: 1.04rem; margin: 8px 0 6px; letter-spacing: -0.01em; }
.price-flow-step p { font-size: 0.92rem; line-height: 1.5; color: var(--muted); margin: 0; }

/* ASCII condensation connector between steps (the raw→finished motif) */
.pf-join {
  flex: 0 0 auto;
  align-self: center;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--muted-soft);
  white-space: nowrap;
}
.pf-join b { color: var(--accent-text); font-weight: 400; }

/* ───────────────────── section: what you pay for (editorial) ────────────── */
.price-value-sec { position: relative; padding-block: clamp(36px, 6vw, 72px); }
.price-value {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 44px);
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: start;
}
.pv-lead { position: sticky; top: 96px; }
.pv-lead .kicker { justify-content: flex-start; }
.pv-lead h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 6px 0 0;
  text-wrap: balance;
}
.pv-list { list-style: none; margin: 0; padding: 0; }
.pv-list li {
  padding: clamp(16px, 2.2vw, 22px) 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 18px;
  align-items: baseline;
}
.pv-list li:first-child { padding-top: 0; border-top: none; }
.pv-list li:last-child { padding-bottom: 0; }
/* a small mono index in the gutter, so rows read as a numbered ledger */
.pv-list li::before {
  content: counter(pv, decimal-leading-zero);
  counter-increment: pv;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent-text);
  grid-row: span 2;
  padding-top: 3px;
}
.pv-list { counter-reset: pv; }
.pv-list h3 { font-size: 1.06rem; margin: 0; grid-column: 2; letter-spacing: -0.01em; }
.pv-list p { font-size: 0.94rem; line-height: 1.5; color: var(--muted); margin: 0; grid-column: 2; }

/* keep the FAQ + CTA readable width (mirrors integration pages) */
body[data-pricing] .tool-body .container { max-width: 720px; }
body[data-pricing] #intFaqList { max-width: 720px; margin-inline: auto; }

/* ──────────────────────────── responsive ───────────────────────────────── */
@media (max-width: 900px) {
  .price-hero-grid { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 40px); }
  .price-hero-copy { text-align: center; }
  .price-hero-copy .breadcrumb,
  .price-hero-copy .kicker,
  .pv-lead .kicker { justify-content: center; }
  .price-hero-copy .tool-sub { margin-inline: auto; }
  .price-chips { justify-content: center; }
  .price-wave { margin-inline: auto; display: block; width: max-content; }
  .price-value { grid-template-columns: 1fr; }
  .pv-lead { position: static; text-align: center; }
  .pv-lead h2 { margin-inline: auto; }
}
@media (max-width: 620px) {
  .price-flow { flex-direction: column; align-items: stretch; gap: 4px; }
  .price-flow-step { max-width: none; }
  /* vertical connector: the glyph run rotates to a short down-tick */
  .pf-join { align-self: flex-start; margin: 2px 0 2px 2px; letter-spacing: 0.3em; }
  .price-hero-copy .tool-h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  .price-hero-card .price-card { padding-inline: 20px; }
  .pv-list li { grid-template-columns: 1fr; }
  .pv-list li::before { grid-row: auto; }
  .pv-list h3, .pv-list p { grid-column: 1; }
}