/* pricing.css -- plan grid for /pricing/ on tx1.synthetik.au
 *
 * Extracted from the inline <style> block in the house product-page pattern
 * (_ref-spark.html, .spark-pricing__grid / .spark-plan) so that no inline
 * <style> is needed on the pricing page. Inline <style> IS permitted by this
 * subdomain's CSP -- only inline <script> is blocked -- but a shared component
 * belongs in a stylesheet.
 *
 * Class names are `tx1-*`, not `spark-*` or `trinity-*`: BUILD-SPEC.md requires
 * bare identifiers in code and CSS classes, and reusing another product's class
 * prefix for a Trinity page makes the cascade impossible to reason about later.
 * The grid, card, badge, feature-list and note geometry are the spark pattern
 * verbatim; only the accent colour (Trinity emerald #10b981) and the third
 * column differ.
 *
 * Loaded AFTER css/style.css, so every token (--bg-primary, --border-color,
 * --shadow-md, --transition-fast) resolves in both light and dark themes.
 */

.tx1-pricing-section { background: var(--bg-secondary); }

.tx1-pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 1080px;
  margin: 2.5rem auto 0;
  align-items: stretch;
}

@media (max-width: 980px) {
  .tx1-pricing__grid { grid-template-columns: 1fr; max-width: 460px; }
}

.tx1-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.tx1-plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.tx1-plan--featured { border-color: #10b981; border-width: 2px; }

.tx1-plan__badge {
  position: absolute; top: -0.8rem; left: 50%; transform: translateX(-50%);
  background: #10b981; color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.35rem 0.9rem; border-radius: 999px; white-space: nowrap;
}

.tx1-plan__name { font-size: 1.35rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.3rem; }
.tx1-plan__for { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.1rem; min-height: 2.5em; }
.tx1-plan__price { display: flex; align-items: baseline; gap: 0.3rem; margin-bottom: 0.2rem; flex-wrap: wrap; }
.tx1-plan__from { font-size: 0.9rem; color: var(--text-muted); align-self: center; }
.tx1-plan__amount { font-size: 2.4rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.tx1-plan__period { font-size: 0.95rem; color: var(--text-muted); }
.tx1-plan__gst { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1.4rem; }

/* Unresolved price placeholders must be impossible to mistake for a price.
   Remove this rule only when the {{PRICE_TIER_n}} tokens are gone. */
.tx1-plan__amount--placeholder {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  color: #b91c1c;
  background: rgba(185, 28, 28, 0.08);
  border: 1px dashed #b91c1c;
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  letter-spacing: -0.01em;
}
[data-theme="dark"] .tx1-plan__amount--placeholder { color: #fca5a5; border-color: #fca5a5; background: rgba(252, 165, 165, 0.1); }

.tx1-plan__features { list-style: none; padding: 0; margin: 0 0 1.6rem; flex: 1; }
.tx1-plan__features li {
  position: relative; padding-left: 1.55rem; margin-bottom: 0.65rem;
  font-size: 0.9rem; color: var(--text-secondary); line-height: 1.4;
}
.tx1-plan__features li::before {
  content: ""; position: absolute; left: 0; top: 0.12rem;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: #10b981;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/0.7rem no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/0.7rem no-repeat;
}

.tx1-plan__features li.tx1-plan__feature--head { font-weight: 600; color: var(--text-primary); padding-left: 0; }
.tx1-plan__features li.tx1-plan__feature--head::before { display: none; }

/* A feature row whose tier is disputed between the marketing site, the shipped
   licence gating and the EULA. Every one of these carries an HTML comment:
   <!-- BLOCKED: verify tier gating before publishing --> */
.tx1-plan__features li.tx1-plan__feature--disputed {
  color: #b91c1c;
  background: rgba(185, 28, 28, 0.06);
  border-radius: 6px;
  padding-right: 0.5rem;
  padding-block: 0.15rem;
}
.tx1-plan__features li.tx1-plan__feature--disputed::before {
  background: #b91c1c;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center/0.85rem no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center/0.85rem no-repeat;
}
[data-theme="dark"] .tx1-plan__features li.tx1-plan__feature--disputed { color: #fca5a5; background: rgba(252, 165, 165, 0.08); }

.tx1-plan .btn { width: 100%; text-align: center; }

.tx1-pricing__note { text-align: center; color: var(--text-muted); font-size: 0.85rem; margin: 1.75rem auto 0; max-width: 720px; }

/* ---------- DRAFT BANNER ----------
   This page must not be published by accident. The banner is deliberately
   loud and deliberately un-dismissable. Delete the .tx1-draft-banner element
   and this rule block together, once pricing is resolved. */
.tx1-draft-banner {
  background: #b91c1c;
  color: #fff;
  padding: 1.1rem 0;
  border-bottom: 4px solid #7f1d1d;
}
.tx1-draft-banner .container { display: flex; gap: 1rem; align-items: flex-start; }
.tx1-draft-banner svg { flex: none; margin-top: 0.15rem; }
.tx1-draft-banner strong {
  display: block; font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.3rem;
}
.tx1-draft-banner p { font-size: 0.9rem; line-height: 1.55; margin: 0; color: rgba(255,255,255,0.94); }
.tx1-draft-banner p + p { margin-top: 0.5rem; }
.tx1-draft-banner a { color: #fff; text-decoration: underline; }

.tx1-blocker-panel {
  max-width: 1080px;
  margin: 2.5rem auto 0;
  border: 2px dashed #b91c1c;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  background: rgba(185, 28, 28, 0.05);
}
.tx1-blocker-panel h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: #b91c1c; margin-bottom: 0.6rem; }
.tx1-blocker-panel p, .tx1-blocker-panel li { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.65; }
.tx1-blocker-panel ol { margin: 0.6rem 0 0 1.2rem; }
.tx1-blocker-panel li { margin-bottom: 0.4rem; }
[data-theme="dark"] .tx1-blocker-panel h3 { color: #fca5a5; }
[data-theme="dark"] .tx1-blocker-panel { border-color: #fca5a5; }

@media (max-width: 560px) {
  .tx1-plan { padding: 1.75rem 1.35rem; }
  .tx1-draft-banner .container { flex-direction: column; gap: 0.6rem; }
}