/* ============================================================================
   HINT IT — v2 design system : FOR-BUSINESS (pricing) page
   ----------------------------------------------------------------------------
   Page-specific styles for /v2/for-business. Linked per-page from the page's
   <HeadContent>. Scoped under `.hint-v2`, tokens only (no raw hex/px), no
   `!important`, no bare-element selectors. Reuses the shared .btn/.card/.center/
   .section/.eyebrow + text-role classes; only genuinely page-unique styling lives
   here. The monthly/yearly price switch is CSS-only (radio + :checked) — no JS.
   ============================================================================ */

/* ---------- Hero + pricing card ----------
   The brand band (bg/color/padding) + eyebrow color come from the shared `.hero-brand`
   (components.css); the hero <section> uses that class. Below is hero LAYOUT only. */
.hint-v2 .fb-hero-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}
.hint-v2 .fb-hero-copy {
  flex: 1 1 320px;
  max-width: 460px;
}
.hint-v2 .fb-hero-copy h1 {
  color: var(--text-on-brand);
  margin-block: var(--space-3);
}
.hint-v2 .fb-hero-sub {
  font-size: var(--text-subhead);
  color: var(--text-on-brand-muted);
  line-height: var(--leading-relaxed);
}
.hint-v2 .fb-accent {
  color: var(--text-on-brand);
  font-weight: var(--fw-bold);
}

/* Pricing card (uses shared .card for fill/padding/radius/shadow) */
.hint-v2 .fb-pricing {
  flex: 0 1 360px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
}

/* CSS-only toggle: hidden radios drive the card via :checked ~ sibling rules.
   PROMOTION CANDIDATE: this segmented pill switch is page-local for now (used on one
   page). If a second page needs a segmented control, promote it to a shared
   `.segmented` in components.css (per the ≥2-page CSS graduation rule). */
.hint-v2 .fb-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.hint-v2 .fb-toggle {
  align-self: center;
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--bg-elevated);
  border-radius: var(--radius-full);
}
.hint-v2 .fb-toggle-opt {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-out),
              color var(--dur-quick) var(--ease-out);
}
.hint-v2 #fb-monthly:checked ~ .fb-toggle .fb-toggle-opt[for="fb-monthly"],
.hint-v2 #fb-yearly:checked ~ .fb-toggle .fb-toggle-opt[for="fb-yearly"] {
  background: var(--primary);
  color: var(--text-on-primary);
}
.hint-v2 .fb-radio:focus-visible ~ .fb-toggle {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* Price line — monthly shown by default; yearly revealed when its radio is checked */
.hint-v2 .fb-price-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
  margin-block: var(--space-2);
}
.hint-v2 .fb-amount {
  font-family: var(--font-display);
  font-weight: var(--fw-display-bold);
  font-size: var(--text-metric-hero);
  color: var(--text-primary);
}
.hint-v2 .fb-unit {
  text-align: left;
  font-size: var(--text-label);
  color: var(--text-secondary);
  line-height: 1.2;
}
.hint-v2 .fb-yearly-only { display: none; }
.hint-v2 #fb-yearly:checked ~ .fb-monthly-only { display: none; }
.hint-v2 #fb-yearly:checked ~ .fb-price-line.fb-yearly-only { display: flex; }
.hint-v2 #fb-yearly:checked ~ .fb-cta.fb-yearly-only { display: block; }

/* Feature list inside the card */
.hint-v2 .fb-features-label {
  font-family: var(--font-display);
  font-weight: var(--fw-display-medium);
  font-size: var(--text-subhead);
  color: var(--text-primary);
  text-align: left;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.hint-v2 .fb-features {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.hint-v2 .fb-features li {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-body);
  color: var(--text-primary);
}
.hint-v2 .fb-emoji {
  flex: 0 0 auto;
}
.hint-v2 .fb-trial {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
/* CTAs use the shared `.btn-block` (full width); `.btn` centers its own content. */

/* ---------- "Silent majority" band ---------- */
/* Band uses the shared `.section` for vertical padding; only the tint is page-unique. */
.hint-v2 .fb-band {
  background: var(--bg-tint);
}
.hint-v2 .fb-band-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display-medium);
  font-size: var(--text-heading);
  color: var(--text-brand);
  margin-bottom: var(--space-3);
}
.hint-v2 .fb-band-intro {
  font-size: var(--text-subhead);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}
.hint-v2 .fb-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.hint-v2 .fb-points li {
  display: flex;
  gap: var(--space-3);
}
.hint-v2 .fb-points strong {
  color: var(--text-primary);
}
.hint-v2 .fb-points p {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* ---------- Features grid ---------- */
.hint-v2 .fb-features-heading {
  text-align: center;
  margin-bottom: var(--space-6);
}
/* The feature grid uses the shared `.grid` primitive (--grid-min/--grid-space set inline). */
.hint-v2 .fb-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.hint-v2 .fb-feature-emoji {
  font-size: var(--text-heading);
}
.hint-v2 .fb-feature-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display-medium);
  font-size: var(--text-subhead);
  color: var(--brand);
  margin: 0;
}
.hint-v2 .fb-feature p {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}
.hint-v2 .fb-feature p b {
  color: var(--text-primary);
}
.hint-v2 .fb-pending {
  font-size: var(--text-label);
  font-weight: var(--fw-display-medium);
  color: var(--text-muted);
}
.hint-v2 .fb-feature-img {
  width: 100%;
  border-radius: var(--radius-md);
  margin-block: var(--space-2);
}
/* PROMOTION CANDIDATE: this "text link + trailing arrow" is page-local for now; promote
   to a shared `.link-arrow` in components.css if a second page reuses it. */
.hint-v2 .fb-learn-more {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--primary);
  font-weight: var(--fw-semibold);
  font-size: var(--text-label);
  text-decoration: none;
}
.hint-v2 .fb-learn-more:hover {
  text-decoration: underline;
}
.hint-v2 .fb-learn-more .v2-icon {
  width: 16px;
  height: 16px;
}

/* ---------- Closing CTA ---------- */
/* Closing CTA uses the shared `.section` for vertical padding. */
.hint-v2 .fb-closing {
  text-align: center;
}
.hint-v2 .fb-closing p {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-block: var(--space-3) var(--space-5);
}
.hint-v2 .fb-closing p b {
  color: var(--text-primary);
}