/* ==========================================================================
   Chakam v2 — design layer for the redesigned pages (home, platform pages,
   pricing, help). Loaded only by those pages and scoped to body.v2, so the
   blog, legal pages and quizzes keep the stylesheet they were built against.

   Same brand: warm paper background, ink, one yellow. The change is scale,
   spacing and composition — larger type, real app screens as the visuals,
   fewer boxes — not a new palette.

   Every animation is decorative and switched off under prefers-reduced-motion.
   Nothing is hidden without JS: reveal states only exist once <html> has the
   `js` class, so a crawler (or a failed script) sees the full page.
   ========================================================================== */

body.v2 {
  --maxw-wide: 1160px;
  --ease: cubic-bezier(.22, .7, .2, 1);
  --yellow-soft: #FDF0C8;
  --lilac: #E9E6FB;
  --mint: #DDF1E6;
  --paper: #FBFAF6;
  --shadow-lg: 0 40px 80px -28px rgba(23, 23, 28, .28);
  --shadow-md: 0 18px 40px -20px rgba(23, 23, 28, .25);
}

/* The legacy stylesheet pads <main> by 56px/80px. On these pages that padding
   sits OUTSIDE the hero, so the hero's glow could not paint it and its top edge
   showed as a hard seam; and the closing CTA got a doubled bottom gap. The
   sections here own their spacing, so main contributes none. */
body.v2 main { padding: 0; }

.v2 .container { max-width: var(--maxw-wide); margin: 0 auto; padding: 0 24px; }
.v2 section[id] { scroll-margin-top: 76px; }

/* ---------- type ---------- */
.v2 h1, .v2 h2, .v2 h3 { letter-spacing: -0.03em; text-wrap: balance; }
.v2 .v2-h1 {
  font-size: clamp(42px, 6.6vw, 80px);
  line-height: 1.0;
  font-weight: 900;
  margin: 0 0 22px;
}
.v2 .v2-h2 {
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.04;
  font-weight: 900;
  margin: 0 0 16px;
}
.v2 .v2-lead {
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.55;
  color: #4a4a52;
  max-width: 56ch;
  margin: 0 0 28px;
}
.v2 .v2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #3a3a41;
  margin-bottom: 22px;
}
.v2 .v2-eyebrow::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 4px rgba(248, 188, 32, .25);
}
.v2 .hl {
  background: linear-gradient(transparent 62%, rgba(248, 188, 32, .55) 62%);
  padding: 0 .08em;
}
.v2-section { padding: clamp(64px, 9vw, 120px) 0; }
.v2-head { max-width: 760px; margin: 0 0 clamp(36px, 5vw, 60px); }
.v2-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.v2-head.center .v2-lead { margin-left: auto; margin-right: auto; }

/* ---------- buttons ---------- */
.v2 .v2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font-weight: 800; font-size: 16px;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
}
.v2 .v2-btn.primary { background: var(--ink); color: #fff; box-shadow: var(--shadow-md); }
.v2 .v2-btn.primary:hover { transform: translateY(-2px); }
.v2 .v2-btn.yellow { background: var(--yellow); color: var(--ink); }
.v2 .v2-btn.yellow:hover { transform: translateY(-2px); background: #ffc93a; }
.v2 .v2-btn.ghost { background: transparent; border-color: rgba(23,23,28,.2); color: var(--ink); }
.v2 .v2-btn.ghost:hover { background: #fff; }

.v2 .store-row { display: flex; flex-wrap: wrap; gap: 12px; }
.v2 .store-badge { transition: transform .18s var(--ease), box-shadow .18s var(--ease); box-shadow: var(--shadow-md); }
.v2 .store-badge:hover { transform: translateY(-2px); }

.v2 .v2-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.v2 .v2-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(255,255,255,.7); border: 1px solid var(--line);
  font-size: 13px; font-weight: 700; color: #3a3a41;
}
.v2 .v2-pill::before { content: "✓"; color: var(--green); font-weight: 900; }

/* ---------- hero ---------- */
.v2 .v2-how { display: inline-block; margin-top: 22px; font-weight: 800; font-size: 15px; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: 2px; }
.v2 .v2-how:hover { background: var(--yellow-soft); }
.v2-hero { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 80px) 0 0; }
.v2-hero { isolation: isolate; }
/* The glow lives on its own layer so it can be masked to fade out at the
   bottom. Painted straight onto the hero it ended in a hard horizontal edge
   against the page background. */
.v2-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(640px 460px at 88% 18%, rgba(251, 211, 90, .5), transparent 70%),
    radial-gradient(560px 460px at 4% 86%, rgba(217, 211, 255, .55), transparent 70%);
  -webkit-mask-image: linear-gradient(#000 62%, transparent 100%);
  mask-image: linear-gradient(#000 62%, transparent 100%);
}
.v2-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
.v2-hero-copy { padding-bottom: clamp(24px, 5vw, 72px); }
.v2-hero-visual { position: relative; height: clamp(440px, 52vw, 640px); }

/* The device cluster: three real app screens, centre one forward. */
.v2-phone {
  position: absolute; display: block; height: auto;
  filter: drop-shadow(0 34px 44px rgba(23, 23, 28, .28));
  will-change: transform;
}
.v2-phone.center { width: 60%; left: 20%; top: 0; z-index: 3; animation: v2-rise 1s var(--ease) both; }
.v2-phone.left   { width: 50%; left: -6%; top: 16%; z-index: 2; transform: rotate(-7deg);
                   animation: v2-rise-l 1.1s .12s var(--ease) both; }
.v2-phone.right  { width: 50%; right: -6%; top: 20%; z-index: 2; transform: rotate(7deg);
                   animation: v2-rise-r 1.1s .2s var(--ease) both; }

.v2-chip {
  position: absolute; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 10px 14px; box-shadow: var(--shadow-md);
  font-size: 13px; line-height: 1.25;
  animation: v2-float 7s ease-in-out infinite;
}
.v2-chip strong { display: block; font-size: 13.5px; }
.v2-chip span { color: var(--muted); font-size: 12px; }
.v2-chip .dot { width: 34px; height: 34px; border-radius: 11px; flex: none; display: grid; place-items: center; font-weight: 900; font-size: 15px; }
.v2-chip.c1 { left: -15%; top: 3%; }
.v2-chip.c2 { right: -3%; top: 44%; animation-delay: -2.4s; }
.v2-chip.c3 { left: 4%; bottom: 14%; animation-delay: -4.6s; }
.dot.red   { background: #fde3e3; color: var(--red); }
.dot.amber { background: #fdf0c8; color: #b07a00; }
.dot.ghost { background: #e9e6fb; color: #5b4fd1; }

@keyframes v2-float  { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes v2-rise   { from { opacity: 0; translate: 0 60px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes v2-rise-l { from { opacity: 0; translate: -30px 70px; } to { opacity: 1; translate: 0 0; } }
@keyframes v2-rise-r { from { opacity: 0; translate: 30px 70px; }  to { opacity: 1; translate: 0 0; } }

/* ---------- stats strip ---------- */
.v2-stats { padding: 0 0 clamp(48px, 7vw, 88px); }
.v2-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border: 1px solid var(--line); border-radius: 28px;
  box-shadow: var(--shadow-md); overflow: hidden;
}
.v2-stat { padding: 28px 26px; border-right: 1px solid var(--line); }
.v2-stat:last-child { border-right: 0; }
.v2-stat b { display: block; font-size: clamp(34px, 4.4vw, 52px); line-height: 1; font-weight: 900; letter-spacing: -.04em; }
.v2-stat span { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.35; }

/* ---------- two-column split ---------- */
.v2-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.v2-split .v2-lead { margin-bottom: 18px; }

/* ---------- bento ---------- */
.v2-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.v2-card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 30px;
  padding: clamp(24px, 3vw, 36px);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.v2-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.v2-card { display: flex; flex-direction: column; }
.v2-card.has-phone { display: block; }
.v2-card .v2-bar { margin-top: auto; }
.v2-card p + .v2-bar, .v2-card p + svg { margin-top: 22px; }
.v2-card h3 { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.12; margin: 0 0 10px; font-weight: 900; }
.v2-card p { margin: 0; color: #4a4a52; font-size: 16px; line-height: 1.55; }
.v2-card .tag {
  display: inline-block; margin-bottom: 14px; padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 800; background: rgba(23,23,28,.06);
}
.v2-card .tag.red { background: #fde3e3; color: #b3262b; }
.v2-card .tag.green { background: #dff3e6; color: #1f7a42; }
.v2-card.span-4 { grid-column: span 4; }
.v2-card.span-3 { grid-column: span 3; }
.v2-card.span-2 { grid-column: span 2; }
.v2-card.tint-yellow { background: var(--yellow-soft); border-color: #f3dc94; }
.v2-card.tint-lilac { background: var(--lilac); border-color: #d6d1f5; }
.v2-card.tint-mint { background: var(--mint); border-color: #c4e3d1; }
.v2-card.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.v2-card.dark p { color: rgba(255,255,255,.72); }
.v2-card.dark .tag { background: rgba(255,255,255,.12); color: #fff; }

/* A card with a phone sitting in its lower right, cropped by the card edge. */
.v2-card.has-phone { min-height: 440px; }
.v2-card.has-phone .copy { position: relative; z-index: 2; max-width: 50%; }
.v2-card.has-phone.span-3 .copy { max-width: 56%; }
.v2-card.has-phone .shot {
  position: absolute; right: 3%; bottom: -34%; width: min(42%, 320px); height: auto;
  filter: drop-shadow(0 30px 40px rgba(23,23,28,.28));
  transition: transform .5s var(--ease);
}
.v2-card.has-phone.span-3 .shot { width: min(50%, 290px); bottom: -40%; }
.v2-card.has-phone:hover .shot { transform: translateY(-14px) rotate(-1.5deg); }

/* The report card visual used inside a bento tile. */
.v2-report { margin-top: 22px; display: grid; gap: 10px; }
.v2-report .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(255,255,255,.7); border-radius: 14px; font-size: 14px; font-weight: 700; }
.v2-report .row strong { font-weight: 900; }
.v2-report .good { color: #1f7a42; }
.v2-bar { height: 8px; border-radius: 99px; background: rgba(23,23,28,.1); overflow: hidden; margin-top: 8px; }
.v2-bar i { display: block; height: 100%; border-radius: 99px; background: var(--ink); width: var(--w, 50%); transition: width 1.2s var(--ease); }

/* ---------- how it works ---------- */
.v2-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: s; }
.v2-step { position: relative; padding: 30px 28px; background: #fff; border: 1px solid var(--line); border-radius: 28px; }
.v2-step .n {
  width: 46px; height: 46px; border-radius: 15px; background: var(--ink); color: var(--yellow);
  display: grid; place-items: center; font-weight: 900; font-size: 20px; margin-bottom: 18px;
}
.v2-step h3 { margin: 0 0 8px; font-size: 22px; font-weight: 900; }
.v2-step p { margin: 0; color: #4a4a52; font-size: 15.5px; }

/* ---------- sources ---------- */
.v2-sources { display: flex; flex-wrap: wrap; gap: 12px; }
.v2-source {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px 11px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-weight: 800; font-size: 15.5px; text-decoration: none; color: var(--ink);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s;
}
.v2-source:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--ink); }
.v2-source img, .v2-source .glyph { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; flex: none; }
.v2-source .glyph { display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 15px; }
.v2-source.more { border-style: dashed; color: var(--muted); cursor: default; }
.v2-source.more:hover { transform: none; box-shadow: none; border-color: var(--line); }

/* ---------- privacy band ---------- */
.v2-dark { background: var(--ink); color: #fff; border-radius: clamp(28px, 4vw, 48px); padding: clamp(36px, 6vw, 80px); position: relative; overflow: hidden; }
.v2-dark::before { content: ""; position: absolute; width: 480px; height: 480px; right: -140px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(248,188,32,.35), transparent 65%); }
.v2-dark .v2-h2 { color: #fff; }
.v2-dark .v2-lead { color: rgba(255,255,255,.75); }
.v2-dark .v2-eyebrow { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: #fff; }
.v2-dark-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 72px); align-items: center; position: relative; }
.v2-points { display: grid; gap: 14px; }
.v2-point { display: flex; gap: 16px; padding: 18px 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; }
.v2-point .tick { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-items: center; font-weight: 900; font-size: 14px; }
.v2-point h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.v2-point p { margin: 0; font-size: 14.5px; color: rgba(255,255,255,.7); line-height: 1.5; }
.v2-lock { display: grid; place-items: center; }
.v2-lock .ring { width: min(100%, 340px); aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.25); display: grid; place-items: center; animation: v2-spin 40s linear infinite; }
.v2-lock .ring .inner { width: 72%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; animation: v2-spin 40s linear infinite reverse; position: relative; }
.v2-lock img { width: 38%; border-radius: 24%; box-shadow: 0 20px 40px rgba(0,0,0,.4); }
.v2-lock .badge { position: absolute; right: 14%; bottom: 14%; width: 46px; height: 46px; border-radius: 50%; background: var(--green); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(47,174,93,.5); }
@keyframes v2-spin { to { transform: rotate(360deg); } }

/* ---------- FAQ accordion ---------- */
.v2-faq { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.v2-faq details { background: #fff; border: 1px solid var(--line); border-radius: 22px; transition: box-shadow .2s, border-color .2s; }
.v2-faq details[open] { border-color: var(--ink); box-shadow: var(--shadow-md); }
.v2-faq summary {
  list-style: none; cursor: pointer; padding: 22px 26px; font-weight: 800; font-size: 17px; line-height: 1.35;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.v2-faq summary::-webkit-details-marker { display: none; }
.v2-faq summary::after {
  content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg); display: grid; place-items: center; font-size: 20px; font-weight: 700;
  transition: transform .25s var(--ease), background .2s;
}
.v2-faq details[open] summary::after { transform: rotate(45deg); background: var(--yellow); }
.v2-faq .answer { padding: 0 26px 24px; color: #4a4a52; font-size: 16px; line-height: 1.65; }
.v2-faq .answer p { margin: 0; }
.v2-faq .answer a { font-weight: 700; }

/* ---------- posts ---------- */
.v2 .home-posts { gap: 24px; }
.v2 .post-card { border-radius: 26px; }
.v2 .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.v2-more { text-align: center; margin-top: 36px; }
.v2-more a { font-weight: 800; }

/* ---------- final CTA ---------- */
.v2-cta {
  position: relative; overflow: hidden; text-align: center; color: var(--ink);
  background: var(--yellow); border-radius: clamp(28px, 4vw, 48px);
  padding: clamp(48px, 8vw, 96px) 24px;
}
.v2-cta::before, .v2-cta::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.28); }
.v2-cta::before { width: 340px; height: 340px; left: -90px; top: -120px; }
.v2-cta::after  { width: 260px; height: 260px; right: -70px; bottom: -110px; }
.v2-cta > * { position: relative; }
.v2-cta h2 { font-size: clamp(32px, 5vw, 60px); line-height: 1.02; font-weight: 900; margin: 0 0 16px; }
.v2-cta p { max-width: 58ch; margin: 0 auto 28px; font-size: 18px; color: rgba(23,23,28,.78); }
.v2-cta .store-row { justify-content: center; }

/* ---------- device frame (platform pages) ---------- */
.v2-device {
  position: relative; width: min(100%, 300px); margin: 0 auto;
  aspect-ratio: 828 / 1792; padding: 9px;
  background: linear-gradient(145deg, #2b2b31, #0f0f12);
  border-radius: 14% / 6.4%;
  box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(255,255,255,.12);
}
.v2-device::before {          /* dynamic island */
  content: ""; position: absolute; z-index: 3; top: 2.4%; left: 50%; translate: -50% 0;
  width: 28%; height: 2.6%; border-radius: 99px; background: #000;
}
.v2-device img { width: 100%; height: 100%; object-fit: cover; border-radius: 12% / 5.6%; display: block; background: var(--bg); }
.v2-device-wrap { position: relative; padding: 24px 0 0; }
.v2-device-wrap .glow { position: absolute; inset: 10% 8% 0; background: radial-gradient(closest-side, rgba(248,188,32,.5), transparent 70%); filter: blur(30px); z-index: -1; }

/* ---------- platform page blocks ---------- */
.v2-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.v2-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.v2-info { padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 26px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.v2-info:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.v2-info h3 { margin: 0 0 8px; font-size: 20px; font-weight: 900; }
.v2-info p { margin: 0; color: #4a4a52; font-size: 15.5px; line-height: 1.6; }

/* ---------- pricing ---------- */
.v2-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.v2-plan { padding: clamp(28px, 4vw, 44px); background: #fff; border: 1px solid var(--line); border-radius: 34px; display: flex; flex-direction: column; }
.v2-plan.premium { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: var(--shadow-lg); position: relative; }
.v2-plan .label { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.v2-plan.premium .label { color: var(--yellow); }
.v2-plan .price { font-size: clamp(40px, 5vw, 60px); font-weight: 900; letter-spacing: -.04em; line-height: 1; margin: 14px 0 12px; }
.v2-plan .sub { color: var(--muted); margin: 0 0 24px; font-size: 15.5px; }
.v2-plan.premium .sub { color: rgba(255,255,255,.7); }
.v2-checks { display: grid; gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; flex: 1; }
.v2-checks li { display: flex; gap: 12px; font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.v2-checks li::before { content: "✓"; flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; background: var(--green); color: #fff; margin-top: 1px; }
.v2-plan.premium .v2-checks li::before { background: var(--yellow); color: var(--ink); }

.v2-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 26px; }
.v2-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.v2-table th, .v2-table td { padding: 17px 24px; text-align: left; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.v2-table thead th { background: var(--paper); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.v2-table tr:last-child td { border-bottom: 0; }
.v2-table td:not(:first-child), .v2-table th:not(:first-child) { text-align: center; width: 120px; }
.v2-table .yes { color: var(--green); font-weight: 900; font-size: 18px; }
.v2-table .no { color: #b6b4ac; }

/* ---------- help ---------- */
.v2-search { position: relative; max-width: 560px; margin: 8px 0 0; }
.v2-search input {
  width: 100%; padding: 17px 20px 17px 50px; border-radius: 999px; border: 1.5px solid var(--line);
  background: #fff; font: inherit; font-size: 16px; font-weight: 600; box-shadow: var(--shadow-md);
}
.v2-search input:focus { outline: none; border-color: var(--ink); }
.v2-search svg { position: absolute; left: 18px; top: 50%; translate: 0 -50%; color: var(--muted); }
.v2-contact { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px 32px; background: var(--yellow-soft); border: 1px solid #f3dc94; border-radius: 28px; }
.v2-contact h2 { margin: 0 0 4px; font-size: 24px; font-weight: 900; }
.v2-contact p { margin: 0; color: #4a4a52; max-width: 52ch; }
.v2-cat { margin-top: clamp(40px, 6vw, 72px); }
.v2-cat > h2 { font-size: 26px; font-weight: 900; margin: 0 0 18px; }
.v2-cat .v2-faq { margin: 0; max-width: none; }
.v2-empty { display: none; text-align: center; padding: 40px; color: var(--muted); font-weight: 600; }

/* ---------- scroll reveal (only when JS is present) ---------- */
.js .reveal { opacity: 0; translate: 0 28px; transition: opacity .7s var(--ease), translate .7s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; translate: 0 0; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .v2-hero-grid, .v2-dark-grid, .v2-split { grid-template-columns: 1fr; }
  .v2-hero-copy { text-align: center; padding-bottom: 8px; }
  .v2 .v2-lead { margin-left: auto; margin-right: auto; }
  .v2-hero-copy .store-row, .v2-hero-copy .v2-pills { justify-content: center; }
  .v2-hero-visual { height: clamp(400px, 92vw, 560px); max-width: 560px; margin: 0 auto; width: 100%; }
  .v2-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .v2-stat:nth-child(2) { border-right: 0; }
  .v2-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .v2-card.span-4, .v2-card.span-3, .v2-card.span-2 { grid-column: span 6; }
  .v2-card.has-phone { min-height: 0; padding-bottom: 0; }
  .v2-card.has-phone .copy { max-width: none; }
  .v2-card.has-phone .shot { position: relative; right: auto; bottom: auto; width: min(78%, 320px); margin: 28px auto -42%; display: block; }
  .v2-steps, .v2-grid-3, .v2-plans, .v2-grid-2 { grid-template-columns: 1fr; }
  .v2-lock { display: none; }
  .v2 .home-posts { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .v2-chip.c1 { left: 0; top: 2%; } .v2-chip.c2 { right: 0; } .v2-chip.c3 { display: none; }
  .v2-stat { padding: 22px 18px; }
  .v2-faq summary { padding: 18px 20px; font-size: 16px; }
  .v2-faq .answer { padding: 0 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .v2 *, .v2 *::before, .v2 *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; translate: 0 0; }
}