/* Shared stylesheet for the product/pricing pages (finix.html, pricing.html and the
   post-purchase pages). Originally written for four per-pillar pages that were consolidated
   into finix.html#build/#verify/#enforce/#monitor and deleted on 2026-07-26.
   Previously each page duplicated this block inline -- any spacing/type fix made to one page
   silently drifted from the other three. One file now, golden-ratio (--g-*) driven rhythm
   throughout (the scale itself lives in styles.css, shared with the rest of the site). */

.nav-links a.n-btn{color:var(--on-accent)}
.nav-links a.n-btn:hover{color:var(--on-accent)}

.product-wrap{max-width:760px}

.product-hero h1{margin-top:var(--g-s)}
.product-hero .n-lead{margin-top:var(--g-m)}

.finding-block{
  background:var(--paper-3);
  border-radius:var(--radius-lg);
  padding:var(--g-m) var(--g-l);
  margin:var(--g-l) 0;
  font-size:var(--text-sm);
  line-height:1.6;
}
/* Was mono, ALL-CAPS and wide-tracked. A caps mono label on every callout is the flair the
   Nativerse brief exists to replace: it decorates rather than informs, and it reads as a
   different product from the front page. Sentence case, the display face, one weight. */
.finding-block .k{
  font:600 var(--text-sm)/1.3 var(--font-display,inherit);
  letter-spacing:-.005em;
  color:var(--ink);
  display:block;
  margin-bottom:var(--g-xs);
}

.product-prose{margin-top:var(--g-l)}

.product-card{margin-top:var(--g-xl)}
.product-card .n-title{margin-bottom:var(--g-xs)}
.product-card .includes{margin-bottom:var(--g-m)}
.product-card .already{margin-top:0}

.price-row{display:flex;align-items:baseline;gap:var(--g-xs);margin:var(--g-xs) 0 var(--g-m)}
.price-row .amount{
  font:var(--weight-medium) var(--text-xl)/1 var(--font-display,inherit);
  font-feature-settings:var(--otf-data);
}
.price-row .period{color:var(--ink-muted);font-size:var(--text-sm)}

.product-checkout{
  margin-bottom:var(--g-m);
}

/* Merchant-of-Record disclosure under the checkout CTA (LS approval + buyer trust). */
.checkout-note{margin:12px 0 0;font-size:var(--text-xs);line-height:1.55;color:var(--text-muted);max-width:38ch}
.checkout-note b{color:var(--text-body);font-weight:var(--weight-medium)}
.checkout-note a{color:var(--blue);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--blue) 35%,transparent);text-underline-offset:.14em}

/* product tables (moved from index's local style so pricing.html can use them — build sheet §3.5) */
.tblwrap{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--hairline-2,#D8D7CC) transparent}
.ft{width:100%;border-collapse:collapse;font:400 12px/1.5 var(--font-mono,ui-monospace,monospace);
  color:var(--ink,#16160F)}
.ft th{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-muted,#6B6B5E);
  font-weight:500;text-align:left;padding:8px 9px;border-bottom:1px solid var(--hairline,#E7E6DE);
  background:var(--paper-2,#FAFAF6);white-space:nowrap}
/* nowrap forced the table wider than the page, so the tier column -- the price -- was cut off
   and you had to scroll sideways to read it. On a pricing comparison that is the one cell that
   must never be off-screen. Cells wrap, the columns are proportioned, and the table fits. */
.ft{table-layout:fixed}
.ft td{padding:12px 10px;border-bottom:1px solid var(--hairline,#EFEEE6);white-space:normal;
  vertical-align:top;overflow-wrap:anywhere}
.ft th:nth-child(1),.ft td:nth-child(1){width:44%}
.ft th:nth-child(2),.ft td:nth-child(2){width:26%}
.ft th:nth-child(3),.ft td:nth-child(3){width:30%}
.ft tr:last-child td{border-bottom:0}
.ft .note{color:var(--ink-muted,#6B6B5E);white-space:normal}
@media(max-width:640px){
  .ft,.ft tbody,.ft tr,.ft td{display:block;width:auto}
  .ft thead{display:none}
  .ft tr{padding:12px 0;border-bottom:1px solid var(--hairline,#EFEEE6)}
  .ft td{border-bottom:0;padding:2px 0}
}


/* Section headings on the product pages carried a mono <code> pill as a subtitle
   ("Enforce — the gateway"). Same flair: it made the heading look like a terminal token.
   Now it is a quiet subtitle in the page's own voice. */
.product-prose h2 > code{
  font-family:inherit;
  font-size:.62em;
  font-weight:400;
  letter-spacing:0;
  background:none;
  padding:0;
  color:var(--ink-muted);
  white-space:nowrap;
}