/* ============================================================================
   HINT IT — v2 : PRICING / FOR-BUSINESS rewrite (ForBusinessNext.razor)
   ----------------------------------------------------------------------------
   Preview at /v3/for-business; replaces for-business.css when promoted.
   Design source: the "Pick your plan" step of hint/Plan/Bus-App-V2/
   onboarding-a.html (= paywall-a2-compare-table.html), remapped onto site
   tokens (mock --bg-pro-col → --bg-tint, chip gradient → --primary/--purple-400,
   annotation coral → --accent-coral, Caveat → --font-hand). The plan table
   lives IN the hero on a white card (leads with the good news); no QR imagery
   by ruling (2026-07-18).
   Scroll reveal: js/ForBusinessNext.module.js stamps `pr-inview` on
   [data-pr-reveal] sections; every animation below is declared ONLY under
   .pr-inview, so no-JS / reduced-motion visitors see the finished state.
   Linked from V2Layout's marketing union (body link — never page <HeadContent>).
   ============================================================================ */

/* ---------- Hero (copy | plan card) ---------- */
.hint-v2 .pr-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  align-items: center;
  gap: var(--space-9);
}
.hint-v2 .pr-hero-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display-black);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-top: var(--space-3);
}
.hint-v2 .pr-hero-sub {
  margin-top: var(--space-4);
  max-width: 34ch;
  font-size: var(--text-subhead);
  line-height: var(--leading-relaxed);
  color: var(--text-on-brand-muted);
}

/* The plan card sits ON the brand band — reset to surface text colors. */
.hint-v2 .pr-plan-card {
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-6);
  max-width: 450px;
  margin-inline: auto;   /* centers inside the hero grid's 520px column */
}
.hint-v2 .pr-plan-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display-black);
  font-size: var(--text-heading);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-align: center;
}
.hint-v2 .pr-plan-lead {
  margin-top: var(--space-2);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  text-wrap: balance;
}

/* ---------- Feature rows (zigzag copy | demo) ---------- */
.hint-v2 .pr-feat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  align-items: center;
  gap: var(--space-9);
}
.hint-v2 .pr-feat--flip .pr-feat-copy { order: 2; }
.hint-v2 .pr-feat--flip .pr-demo { order: 1; }

.hint-v2 .pr-sticker {
  display: inline-block;
  background: var(--accent-coral);
  color: var(--text-on-primary);
  font-family: var(--font-display);
  font-weight: var(--fw-display-bold);
  font-size: var(--text-label);
  letter-spacing: 0.02em;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  transform: rotate(-2deg);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-quick) var(--ease-out);
}
.hint-v2 .pr-sticker:hover { transform: rotate(2deg); }
.hint-v2 .pr-feat-title {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--fw-display-black);
  font-size: var(--text-display-sm);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.hint-v2 .pr-feat-body {
  margin-top: var(--space-3);
  max-width: 46ch;
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
.hint-v2 .pr-feat-plan { margin-top: var(--space-4); }

/* ---------- Demos (shared shell) ---------- */
.hint-v2 .pr-demo {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}

/* ---- Demo A · a hint arrives ---- */
.hint-v2 .pr-notif {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
}
.hint-v2 .pr-notif-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.hint-v2 .pr-notif-time { font-size: var(--text-micro); color: var(--text-muted); }
.hint-v2 .pr-notif-quote {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-display-bold);
  font-size: var(--text-body);
  line-height: var(--leading-snug);
}
.hint-v2 .pr-notif-meta {
  margin-top: var(--space-2);
  font-size: var(--text-micro);
  color: var(--text-muted);
}

/* ---- Demo B · points gathered → answer once → tailored replies ---- */
.hint-v2 .pr-agg-hints {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.hint-v2 .pr-agg-hint {
  background: var(--bg-elevated);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-label);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
  transform: rotate(-1deg);
}
.hint-v2 .pr-agg-hint:nth-child(2) { transform: rotate(1deg); margin-left: var(--space-5); }
.hint-v2 .pr-agg-hint:nth-child(3) { transform: rotate(-0.5deg); margin-left: var(--space-2); }

/* Handwritten connectors — they carry the explanation, so they stay short */
.hint-v2 .pr-agg-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-block: var(--space-2);
  color: var(--accent-coral);
}
.hint-v2 .pr-agg-flow svg { flex: none; }
.hint-v2 .pr-agg-flow span {
  font-family: var(--font-hand);
  font-weight: var(--fw-semibold);
  font-size: var(--text-subhead);
  line-height: var(--leading-tight);
  transform: rotate(-2deg);
}

.hint-v2 .pr-agg-point {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
}
.hint-v2 .pr-agg-point-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.hint-v2 .pr-agg-point-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display-bold);
  font-size: var(--text-body);
}
.hint-v2 .pr-agg-answer {
  margin-top: var(--space-3);
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}
.hint-v2 .pr-agg-answer-label {
  display: block;
  font-size: var(--text-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.hint-v2 .pr-agg-answer-text {
  margin-top: var(--space-1);
  font-size: var(--text-label);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.hint-v2 .pr-agg-reply {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
}
.hint-v2 .pr-agg-reply-text {
  font-size: var(--text-label);
  line-height: var(--leading-normal);
}
.hint-v2 .pr-agg-reply-meta {
  margin-top: var(--space-2);
  font-size: var(--text-micro);
  color: var(--text-muted);
}
.hint-v2 .pr-agg-more {
  margin-top: var(--space-3);
  text-align: center;
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
}

/* ---- Demo C · trends ---- */
.hint-v2 .pr-demo-trend {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
.hint-v2 .pr-trend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.hint-v2 .pr-trend-title {
  font-weight: var(--fw-semibold);
  font-size: var(--text-label);
}
.hint-v2 .pr-trend-bars {
  margin-top: var(--space-4);
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: 110px;
}
.hint-v2 .pr-bar {
  flex: 1;
  height: var(--h, 50%);
  background: var(--primary);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  transform-origin: bottom;
}
.hint-v2 .pr-trend-axis {
  margin-top: var(--space-2);
  display: flex;
  justify-content: space-between;
  font-size: var(--text-micro);
  color: var(--text-muted);
}

/* ---- Demo D · win-back coupon ---- */
.hint-v2 .pr-coupon {
  position: relative;
  isolation: isolate;               /* local 2-layer stack for the stamp — no ladder rung */
  background: var(--bg-card);
  border: 2px dashed var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5) var(--space-6);
}
.hint-v2 .pr-coupon-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display-bold);
  font-size: var(--text-subhead);
  line-height: var(--leading-snug);
}
.hint-v2 .pr-coupon-sub {
  margin-top: var(--space-2);
  font-size: var(--text-micro);
  color: var(--text-muted);
}
.hint-v2 .pr-coupon-code {
  display: inline-block;
  margin-top: var(--space-4);
  background: var(--bg-elevated);
  color: var(--text-brand);
  font-weight: var(--fw-bold);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
}
.hint-v2 .pr-stamp {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  transform: rotate(-12deg);
  color: var(--safe);
  border: 3px double var(--safe);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: var(--fw-display-black);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  background: color-mix(in srgb, var(--safe-bg) 80%, transparent);
}

/* ---------- Plan table (paywall-a2 structure, site tokens) ---------- */
.hint-v2 .pr-cmp {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: 1fr 72px 96px;
  align-items: stretch;
}
.hint-v2 .pr-cmp > div {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-align: center;
}
.hint-v2 .pr-cmp > .pr-cmp-f {
  justify-content: flex-start;
  text-align: left;
  padding-left: var(--space-1);
  padding-right: var(--space-2);
  font-weight: var(--fw-semibold);
  font-size: var(--text-body);
  color: var(--text-primary);
}
.hint-v2 .pr-cmp > .pr-cmp-hd {
  min-height: 44px;
  padding-top: var(--space-2);
  font-size: var(--text-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.hint-v2 .pr-procol { background: var(--bg-tint); }
.hint-v2 .pr-cmp > .pr-cmp-hd.pr-procol {
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding-top: var(--space-2);
}
.hint-v2 .pr-procol-last { border-radius: 0 0 var(--radius-card) var(--radius-card); }

/* The skewed gradient PRO chip (mock .chip) */
.hint-v2 .pr-chip {
  display: inline-block;
  transform: skewX(-8deg);
  background: linear-gradient(100deg, var(--primary), var(--purple-400));
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
  color: var(--text-on-primary);
  font-style: italic;
  font-family: var(--font-display);
  font-weight: var(--fw-display-black);
  font-size: var(--text-label);
  letter-spacing: 0.06em;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 28%, transparent);
}
.hint-v2 .pr-chip > span { display: inline-block; transform: skewX(8deg); }
.hint-v2 .pr-chip-sm { font-size: var(--text-micro); padding: var(--space-3xs) var(--space-2); }

.hint-v2 .pr-free-yes { color: var(--text-muted); font-weight: var(--fw-bold); font-size: var(--text-body); }
.hint-v2 .pr-pro-yes  { color: var(--primary); font-weight: var(--fw-bold); font-size: var(--text-subhead); }
.hint-v2 .pr-dash {
  width: 16px;
  height: 4px;
  border-radius: var(--radius-xs);
  background: var(--border);
}
.hint-v2 .pr-cap { color: var(--text-secondary); font-size: var(--text-label); white-space: nowrap; }
.hint-v2 .pr-cap-pro { color: var(--text-brand); font-weight: var(--fw-semibold); }
.hint-v2 .pr-price { font-weight: var(--fw-bold); font-size: var(--text-label); color: var(--text-secondary); }
.hint-v2 .pr-price-pro { color: var(--text-brand); }

/* Handwritten aside arrowing up at the $29/mo cell (mock .annot) */
.hint-v2 .pr-annot {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: var(--space-1);
  padding-right: var(--space-10);
  color: var(--accent-coral);
}
.hint-v2 .pr-annot span {
  font-family: var(--font-hand);
  font-weight: var(--fw-semibold);
  font-size: var(--text-heading);
  line-height: var(--leading-tight);
  transform: rotate(-3deg);
  margin-top: var(--space-4);
}
.hint-v2 .pr-annot svg { flex: none; }

/* Action zone under the table */
.hint-v2 .pr-plan-action { margin-top: var(--space-5); text-align: center; }
.hint-v2 .pr-assure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}
.hint-v2 .pr-assure svg {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  flex: none;
  color: var(--safe);
}
.hint-v2 .pr-plan-sub {
  margin-top: var(--space-3);
  font-size: var(--text-label);
  color: var(--text-secondary);
}
/* "Continue with Free" — a real choice, brand-colored, never a grey escape hatch */
.hint-v2 .pr-freelink {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--text-brand);
  font-weight: var(--fw-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.hint-v2 .pr-freelink:hover { color: var(--primary); background: var(--bg-elevated); }

/* ---------- Closing CTA ---------- */
.hint-v2 .pr-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display-black);
  font-size: var(--text-display-sm);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-align: center;
}
.hint-v2 .pr-lead {
  margin-top: var(--space-3);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-subhead);
  line-height: var(--leading-relaxed);
  text-wrap: balance;
}
.hint-v2 .pr-close { background: var(--bg-tint); text-align: center; }
.hint-v2 .pr-close-inner { max-width: 560px; }
.hint-v2 .pr-close-ctas {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ---------- Scroll-reveal animations ----------
   Declared ONLY under `.pr-inview` (stamped by js/ForBusinessNext.module.js):
   no JS / reduced motion → the finished state above is what renders. All
   one-shot entrances; the spring bezier is literal on purpose (the --ease-*
   set has no overshoot curve — matches the onboarding-mock precedent). */
.hint-v2 .pr-inview .pr-pop {
  animation: pr-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: var(--d, 0s);
}
.hint-v2 .pr-inview .pr-arrive {
  animation: pr-arrive 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: var(--d, 0s);
}
.hint-v2 .pr-inview .pr-rise {
  animation: pr-rise 0.5s var(--ease-out) both;
  animation-delay: var(--d, 0s);
}
.hint-v2 .pr-inview .pr-bar {
  animation: pr-grow 0.55s var(--ease-out) both;
  animation-delay: var(--d, 0s);
}
.hint-v2 .pr-inview .pr-stamp-in {
  animation: pr-stamp 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: var(--d, 0s);
}

@keyframes pr-pop {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pr-arrive {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pr-rise {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pr-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes pr-stamp {
  from { opacity: 0; transform: scale(1.7) rotate(-24deg); }
  to   { opacity: 1; transform: scale(1) rotate(-12deg); }
}

/* ---------- Responsive ----------
   Mobile (≤800, THE shell breakpoint) mirrors the homepage's full-viewport
   screen treatment (HomeNextV6 mobile block): nav un-stuck, one screen per
   section, y-mandatory snap. pricing.css rides the shared marketing union, so
   the nav/html rules are scoped via :has(.pr-hero) to this page's DOM only
   (the same html:has() escape chrome.css uses for the drawer scroll lock). */
@media (max-width: 800px) {
  .hint-v2 .pr-hero {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .hint-v2 .pr-feat {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  /* stacked = copy first, demo second — undo the desktop zigzag order */
  .hint-v2 .pr-feat--flip .pr-feat-copy { order: 0; }
  .hint-v2 .pr-feat--flip .pr-demo { order: 0; }

  /* -- full-viewport screens (min-height: overtall content just grows) -- */
  .hint-v2:has(.pr-hero) .v2-nav-header { position: static; }   /* nav exits with the hero */
  .hint-v2 .pr-hero-copy {
    min-height: calc(100svh - 68px);   /* screen 1 shares the viewport with the 68px nav */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hint-v2 .pr-plan-card,
  .hint-v2 .pr-feat-band,
  .hint-v2 .pr-close {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* .center is content-box (primitives.css) — as a flex item it must size
     border-box or width:100% re-adds its gutters as overflow (430px @ 390) */
  .hint-v2 .pr-feat-band > .center,
  .hint-v2 .pr-close > .pr-close-inner {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  html:has(.hint-v2 .pr-hero) { scroll-snap-type: y mandatory; }
  /* the BAND (top edge = 68, directly under the static nav) carries the first
     snap point with scroll-margin 68 so it rests at scrollY 0 — snapping the
     inner copy block instead rests at the band's top padding (y=48, nav half
     gone on load; the homepage pins its hero the same way) */
  .hint-v2 .pr-hero-band {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: 68px;
  }
  .hint-v2 .pr-plan-card,
  .hint-v2 .pr-feat-band,
  .hint-v2 .pr-close {
    scroll-snap-align: start;
    scroll-snap-stop: always;          /* one swipe = one screen */
  }
  .hint-v2 .v2-footer { scroll-snap-align: end; }   /* the footer keeps its own resting point */

  /* -- plan table: full-bleed on the brand band, card chrome off --
     The white card disappears; everything sits directly on the purple band, so
     text flips to the theme-stable on-brand tokens (the band is purple in both
     light and dark). The PRO chip, coral annotation, and primary CTA keep their
     full-strength colors — they read fine on the band (homepage-hero precedent). */
  .hint-v2 .pr-plan-card {
    background: none;
    box-shadow: none;
    border-radius: 0;
    /* edge-to-edge up to the 450px cap, then self-centering: resolves to the
       gutter-eating -20px at phone widths, goes positive (centers the capped
       card) on wider mobile — a plain negative margin would pin it left there */
    margin-inline: calc((100% - min(100vw, 450px)) / 2);
    padding: var(--space-6) var(--space-5);
  }
  .hint-v2 .pr-plan-lead { display: none; }   /* mobile keeps the plan screen tight */
  .hint-v2 .pr-plan-title,
  .hint-v2 .pr-cmp > .pr-cmp-f,
  .hint-v2 .pr-pro-yes,
  .hint-v2 .pr-cap-pro,
  .hint-v2 .pr-price-pro { color: var(--text-on-brand); }
  .hint-v2 .pr-plan-lead,
  .hint-v2 .pr-cmp > .pr-cmp-hd,
  .hint-v2 .pr-free-yes,
  .hint-v2 .pr-cap,
  .hint-v2 .pr-price,
  .hint-v2 .pr-plan-sub,
  .hint-v2 .pr-assure { color: var(--text-on-brand-muted); }
  .hint-v2 .pr-procol { background: var(--border-on-brand); }
  .hint-v2 .pr-dash { background: var(--border-on-brand); }
  .hint-v2 .pr-freelink { color: var(--text-on-brand); }
  .hint-v2 .pr-freelink:hover {
    color: var(--text-on-brand);
    background: var(--border-on-brand);
  }
}
@media (min-width: 480px) {
  .hint-v2 .pr-cmp { grid-template-columns: 1fr 90px 90px; }
}