/* Storixa — type layer.
   Loaded last. Owns the things a type system is responsible for that are not
   font-size: measure, wrapping, numeric alignment, the size floor, and tracking
   on all-caps labels. The weight scale (400/500/600/700/800) is applied at the
   source in each stylesheet, not overridden here. */

/* ─────────────────────────────────────────────────────────────────────────────
   1 · Measure. The readable band is roughly 60-75 characters. Two disclaimers
   were running at 183ch and 99ch, which asks the reader to do the layout's job.
   ───────────────────────────────────────────────────────────────────────────── */
.v5-disclosure{max-width:68ch}
.pricing-disclaimer{max-width:72ch}
/* Prose that sits inside a spacious wrapper gets the same cap. */
.merchant-evidence-note{max-width:68ch;margin-inline:auto}
.stage-caption{max-width:72ch}
.v5-estimator-footnote{max-width:64ch}

/* ─────────────────────────────────────────────────────────────────────────────
   2 · Wrapping. Headings balance so they break with intention; descriptions use
   pretty so a line never ends on a lone word.
   ───────────────────────────────────────────────────────────────────────────── */
h1,h2,h3,h4,
.v5-section-head h2,
.section-intro h2,
.capabilities-heading h2,
.story-heading h2,
.next-heading h2,
.why-copy h2,
.faq-layout h2,
.tour-body h2,
.grow-proposal h3{
  text-wrap:balance;
}
p,
li,
.v5-section-head p,
.section-intro p,
.detail-lead,
.hero-description,
.v5-disclosure,
.pricing-disclaimer{
  text-wrap:pretty;
}
/* Long unbroken strings (a URL, a SKU, an ID) must never escape their box. */
.capability-page,.story-page,.v5-play-shell,.v5-conversion-grid{overflow-wrap:break-word}

/* ─────────────────────────────────────────────────────────────────────────────
   3 · Numeric alignment. Every figure a reader compares against another figure
   gets tabular numerals, so values stop shifting as they change.
   ───────────────────────────────────────────────────────────────────────────── */
.metric strong,
.growth-stat strong,
.mobile-growth-stats b,
.mobile-growth-stats span,
.dash-row-value,
.dash-row-name,
.v5-estimator-results strong,
.v5-estimator-inputs input,
#v5-out-orders,
#v5-out-revenue,
.plan-price,
.plan-price span,
.launch-step-index,
.step-number,
.proof-index,
.feature-index,
.v5-plan-preview b,
.capability-number,
.mobile-chart-head span{
  font-variant-numeric:tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4 · Size floor for prose. All-caps micro-labels may run at 10-11px because
   they carry tracking and no reading load. Sentences may not; below 12px they
   stop being readable.
   ───────────────────────────────────────────────────────────────────────────── */
.merchant-evidence-note,
.pricing-disclaimer,
.v5-estimator-footnote,
.stage-caption,
.draft-label{font-size:12px}
/* Captions that carry a sentence rather than a badge. A 9px or 11px line of
   prose is a label pretending to be readable copy. */
.launch-ready small,
.story-page .closing-copy>small,
.v5-estimator-results small{font-size:12px}
/* These three were 11px at every width, not only on a phone: the hero story
   line, the journey step notes and the wizard step names. */
.journey-step small,
.v5-steps span{font-size:12px}
/* Page copy that reads as a sentence: nav helper text, the vision note and the
   experience footnote. The miniature product dashboards keep their density;
   they are depictions of a UI, not body copy. */
.nav-dropdown a span,
.site-header .nav-dropdown a span,
.detail-disclaimer,
.experience-footnote{font-size:12px}

/* On a phone the compact layouts were buying space by shrinking real copy and
   real controls to 10-11px. That is the layout asking the reader to pay for it.
   These are page chrome, so they hold a 12px floor.
   `!important` is deliberate: this is a floor guarantee that has to beat
   accumulated specificity across nine legacy stylesheets, and a floor that
   loses to an old rule is not a floor. The miniature dashboards inside the
   demos are exempt; they depict a product, not this page. */
@media(max-width:700px){
  .eyebrow,
  .hero-actions .btn,
  .v5-quick-nav a,
  .capabilities-meta,
  .capabilities-meta strong,
  .capability-mobile-summary,
  .capability-points li,
  .small-disclosure,
  .merchant-grid p,
  .v5-play-tabs button,
  .v5-estimator-inputs label,
  .v5-estimator-results small,
  .v5-choice-grid button,
  .v5-selectors button,
  .v5-config-row,
  .v5-steps span,
  .closing-btn-primary,
  .closing-btn-secondary,
  .omni-handnote,
  .personal-ai-note b,
  .launch-grid p,
  .trust-list span,
  .split-copy .story-bullet small,
  .detail-breadcrumb strong,
  .experience-step-nav button small,
  .journey-step small,
  .nav-dropdown a span,
  .detail-disclaimer,
  .experience-footnote{font-size:12px!important;line-height:1.5}
}

/* ─────────────────────────────────────────────────────────────────────────────
   5 · Tracking on all-caps labels. The set is wider than it is tall, so without
   it the letters crowd. Two labels were missing it.
   ───────────────────────────────────────────────────────────────────────────── */
.story-eyebrow{letter-spacing:.14em}
.draft-label{letter-spacing:.08em}
/* All-caps has no descenders, so it needs a touch more leading than mixed case. */
.story-eyebrow,
.v5-mini-label,
.capability-kicker,
.draft-label,
.micro-eyebrow,
.section-eyebrow,
.closing-eyebrow{line-height:1.45}
