/* IGMsg design system - marketing layer (public pages: home, pricing,
   industries, products, company, blog). Brand: pink #e11d74, Plus Jakarta Sans
   (headings 800, letter-spacing -0.04em). The app shell loads app.css instead;
   both files share the same shell block that opens this file. No build step. */
@font-face { font-family: "Plus Jakarta Sans"; src: url("/static/fonts/plus-jakarta-sans-latin.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
:root {
  --canvas: #f9fafb;          /* gray-50 */
  --surface: #ffffff;
  --ink: #111827;             /* gray-900 */
  --ink-soft: #6b7280;        /* gray-500 */
  --line: #e5e7eb;            /* gray-200 */
  --line-soft: #f3f4f6;       /* gray-100 */
  --brand: #e11d74;           /* brand-500 */
  --brand-deep: #be185d;      /* brand-600 */
  --brand-text: #be185d;      /* AA text-on-white pink: links, inline brand text (fills keep --brand) */
  --brand-text: #be185d;      /* AA text-on-white pink: links, inline brand text (fills keep --brand) */
  --brand-tint: #fdf2f8;      /* brand-50 */
  --brand-line: #f9a8d4;      /* brand-300 */
  --sent: #059669;
  --warn: #b45309;
  --danger: #dc2626;
  --radius: 10px;
  --radius-lg: 14px;
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --shadow-pop: 0 10px 30px -12px rgba(17, 24, 39, 0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--brand); color: #fff; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0; }
h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.2rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
a { color: var(--brand-aa-text, var(--brand-text)); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
/* Explicit focus rings for every interactive control (a11y sprint 2026-10).
   Inputs keep their box-shadow ring; nav/tab items use an inset ring so the
   outline is not clipped by the sticky sidebar or the fixed tab bar. */
a:focus-visible, button:focus-visible, .btn:focus-visible, .btn-primary:focus-visible,
[role="button"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible,
summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline-offset: 2px; }
.nav-link:focus-visible, .m-tab:focus-visible, details.nav-more > summary:focus-visible { outline-offset: -2px; border-radius: var(--radius); }
.nav-link.active:focus-visible { outline-color: var(--ink); }
/* Explicit focus rings for every interactive control (a11y sprint 2026-10).
   Inputs keep their box-shadow ring; nav/tab items use an inset ring so the
   outline is not clipped by the sticky sidebar or the fixed tab bar. */
a:focus-visible, button:focus-visible, .btn:focus-visible, .btn-primary:focus-visible,
[role="button"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible,
summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline-offset: 2px; }
.nav-link:focus-visible, .m-tab:focus-visible, details.nav-more > summary:focus-visible { outline-offset: -2px; border-radius: var(--radius); }
.nav-link.active:focus-visible { outline-color: var(--ink); }

/* ---------- shell: fixed white sidebar, gray canvas ---------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 256px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  background: var(--surface);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  padding: 2px 10px 16px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand .mark {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg, var(--brand), #f472b6);
  display: inline-grid; place-items: center;
  color: #fff; font-size: 0.85rem; font-weight: 800;
}

.nav-group { margin-bottom: 6px; }
.nav-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  color: #9ca3af; padding: 12px 10px 4px;
}

.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: #4b5563;
  font-weight: 500;
  font-size: 0.95rem;
}
.nav-link svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.75; }
.nav-link:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; }
.nav-link.active { background: var(--brand); color: #fff; }
.nav-link.active svg { opacity: 1; }

/* Smaller features fold away cleanly */
details.nav-more > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: var(--radius);
  color: #4b5563; font-weight: 500; font-size: 0.95rem;
}
details.nav-more > summary::-webkit-details-marker { display: none; }
details.nav-more > summary { white-space: nowrap; gap: 10px; }
details.nav-more > summary svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.75; }
details.nav-more > summary .chev { margin-left: auto; }
details.nav-more > summary:hover { background: var(--line-soft); color: var(--ink); }
details.nav-more > summary .chev { transition: transform 0.15s; font-size: 0.8rem; color: #9ca3af; }
details.nav-more[open] > summary .chev { transform: rotate(90deg); }
details.nav-more .nav-link { padding-left: 34px; font-size: 0.9rem; }

/* Sidebar usage widget (the "DMs this month" card from the original) */
.usage-card {
  margin-top: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px;
  background: var(--surface);
}
.usage-card .n {
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
}
.usage-card .l { color: var(--ink-soft); font-size: 0.82rem; }
.usage-card .upgrade { display: inline-block; margin-top: 8px; font-weight: 600; font-size: 0.85rem; }

.sidebar .me {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 10px 2px; font-size: 0.88rem;
}
.sidebar .me .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand-deep);
  display: grid; place-items: center; font-weight: 700;
}
.sidebar .me .who { line-height: 1.25; }
.sidebar .me .who a { color: var(--ink-soft); font-size: 0.8rem; }

/* ---------- main column ---------- */

.main { flex: 1; padding: 30px 40px 64px; max-width: 1120px; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.lede { font-size: 1.02rem; color: var(--ink-soft); margin: 6px 0 0; }
.lede strong { color: var(--ink); font-weight: 700; }

.section { padding: 24px 0; }

/* ---------- stat cards (original .stat-card, warmed hover) ---------- */

.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 18px; }

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  transition: border-color 0.2s;
}
.stat:hover { border-color: var(--brand-line); }
.stat .n {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stat .l { color: var(--ink-soft); font-size: 0.88rem; margin-top: 2px; }

.meter { height: 6px; border-radius: 3px; background: var(--line-soft); margin-top: 12px; }
.meter > i { display: block; height: 100%; border-radius: 3px; background: var(--brand); }
.meter.hot > i { background: var(--danger); }

/* ---------- activity thread ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}

.thread { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; max-width: 620px; }

.bubble {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
  padding: 10px 14px;
}
.bubble .who { font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
.bubble .what { color: var(--ink-soft); font-size: 0.92rem; margin-top: 2px; }
.bubble .when { font-size: 0.78rem; color: #9ca3af; margin-top: 6px; }

.bubble.sent { border-left: 3px solid var(--sent); }
.bubble.shadow { border-left: 3px solid var(--brand); }
.bubble.deferred, .bubble.queued, .bubble.requeuing { border-left: 3px solid var(--warn); }
.bubble.failed, .bubble.expired, .bubble.quota_exceeded, .bubble.rate_limited,
.bubble.window_closed { border-left: 3px solid var(--danger); }

.pulse {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); margin-right: 8px;
}
@media (prefers-reduced-motion: no-preference) {
  .pulse { animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: 0.35; } }
}

/* ---------- quick actions: small features, one clean row ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.88rem; font-weight: 500; color: #4b5563;
  transition: border-color 0.15s, color 0.15s;
}
.chip:hover { border-color: var(--brand-line); color: var(--ink); text-decoration: none; }

/* ---------- forms ---------- */

.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 0.92rem; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--brand); outline: none;
  box-shadow: 0 0 0 3px rgba(225, 29, 116, 0.12);
}
.field .hint { font-size: 0.84rem; color: var(--ink-soft); margin-top: 4px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--brand);
  color: #fff;
  font: inherit; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn:hover { background: var(--brand-deep); text-decoration: none; color: #fff; }
.btn.quiet { background: transparent; border-color: var(--line); color: var(--ink); }
.btn.quiet:hover { background: var(--line-soft); }
.btn.dark { background: var(--ink); }
.btn.dark:hover { background: #1f2937; }
.btn.danger { background: var(--danger); }

/* ---------- feedback ---------- */

.alert {
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  margin-bottom: 18px;
}
.alert.error { border-color: #fecaca; background: #fef2f2; color: var(--danger); }
.alert.ok { border-color: #a7f3d0; background: #ecfdf5; color: var(--sent); }

.badge {
  display: inline-block;
  font-size: 0.76rem; font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--surface);
}
.badge.on { border-color: #a7f3d0; color: var(--sent); background: #ecfdf5; }
.badge.off { border-color: #fecaca; color: var(--danger); background: #fef2f2; }

.empty {
  color: var(--ink-soft);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  text-align: center;
  margin-top: 14px;
}
.empty a { font-weight: 600; }

/* ---------- auth (guest) ---------- */

.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.gate-card { width: 100%; max-width: 400px; }
.gate-card .brand { padding: 0 0 4px; font-size: 1.4rem; }
.gate-card .sub { color: var(--ink-soft); margin: 0 0 22px; }
.gate-card form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-pop);
}
.gate-card .btn { width: 100%; }
.gate-card .swap { margin-top: 16px; font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- tables ---------- */

table.flat { width: 100%; border-collapse: collapse; margin-top: 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
table.flat th {
  text-align: left; font-weight: 600; font-size: 0.86rem; color: var(--ink-soft);
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--canvas);
}
table.flat td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
table.flat tr:last-child td { border-bottom: none; }

@media (max-width: 820px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row;
             align-items: center; overflow-x: auto; padding: 10px; gap: 2px; }
  .brand { padding: 0 12px 0 4px; }
  .nav-title, .usage-card, .sidebar .me, details.nav-more { display: none; }
  .nav-group { display: flex; margin: 0; }
  .main { padding: 20px 16px 44px; }
}

/* ---------- row cards (automations, accounts lists) ---------- */

.rows { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }

.row-card {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  transition: border-color 0.2s;
}
.row-card:hover { border-color: var(--brand-line); }
.row-card.paused { background: var(--canvas); }
.row-card.paused .row-title strong { color: var(--ink-soft); }

.row-title { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; }
.row-sub { color: var(--ink-soft); font-size: 0.88rem; margin-top: 2px; }
.row-side { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.row-count { color: var(--ink-soft); font-size: 0.85rem; text-align: right; }
.row-count span {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.25rem; color: var(--ink); font-variant-numeric: tabular-nums;
}
.row-actions { display: flex; gap: 8px; }
.row-actions .btn { padding: 7px 14px; font-size: 0.9rem; }

.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pill {
  font-size: 0.8rem; font-weight: 500;
  background: var(--brand-tint); color: var(--brand-deep);
  border-radius: 999px; padding: 2px 10px;
}

/* ---------- automation form: stacked cards (ported from the Laravel design) ---------- */

.form-stack { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }

.form-cols {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  gap: 20px; align-items: start;
}
.form-cols .col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.form-cols .col.side { position: sticky; top: 24px; }
@media (max-width: 980px) {
  .form-cols { grid-template-columns: 1fr; }
  .form-cols .col.side { position: static; }
}

.fcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 24px;
}
.fcard h2 { font-size: 1.02rem; }
.fcard .sub { color: var(--ink-soft); font-size: 0.8rem; margin: 3px 0 0; }
.fcard .card-head { margin-bottom: 16px; }

.klabel {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: #9ca3af; font-weight: 700; margin: 0 0 3px;
}

.matchgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.matchopt {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 12px; border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--ink-soft);
  transition: all 0.15s; text-align: center;
}
.matchopt:hover { border-color: var(--brand); }
.matchopt input { position: absolute; opacity: 0; }
.matchopt:has(input:checked) {
  border-color: var(--brand); background: var(--brand-tint); color: var(--brand-deep);
}

.switchrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.switch { position: relative; display: inline-flex; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch i {
  position: absolute; inset: 0; background: #d1d5db;
  border-radius: 999px; transition: background 0.2s;
}
.switch i::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; background: #fff; border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 0.2s;
}
.switch input:checked + i { background: var(--brand); }
.switch input:checked + i::after { transform: translateX(20px); }

.varlink {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0;
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  color: var(--brand-deep); cursor: pointer;
}
.varlink:hover { color: var(--brand-text); }
.var-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.var-remove {
  background: none; border: none; padding: 0;
  font-family: inherit; font-size: 0.78rem; color: #dc2626; cursor: pointer;
}

.inline-num { display: flex; align-items: center; gap: 14px; }
.inline-num input { width: 120px; }
.inline-num .note { font-size: 0.8rem; color: var(--ink-soft); }
.inline-num .note strong { color: var(--brand-deep); }

.warnbox {
  margin-top: 12px; padding: 12px 14px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
  font-size: 0.8rem; color: #78350f; line-height: 1.6;
}

.tipscard { background: var(--brand-tint); border-color: var(--brand-line); }
.tipscard ul {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px; font-size: 0.88rem;
}
.tipscard li { display: flex; gap: 9px; align-items: flex-start; }
.tipscard li::before { content: "\2713"; color: var(--brand-deep); font-weight: 700; }

.form-actions { display: flex; align-items: center; gap: 16px; }

@media (max-width: 820px) {
  .row-card { flex-direction: column; align-items: stretch; }
  .row-side { justify-content: space-between; }
  .matchgrid { grid-template-columns: 1fr; }
}

/* ================= premium layer =================
   Depth, glow and the dark hero band - approved from the concept canvas.
   Overrides the flat defaults above; tokens stay the same. */

:root {
  --grad: linear-gradient(135deg, #f472b6, #e11d74 55%, #be185d);
  --dark: #12151c;
  --dark-2: #1a1e28;
  --dark-txt: #e7e9ee;
  --dark-soft: #9aa1ad;
  --glow: 0 10px 30px -8px rgba(225, 29, 116, 0.55);
}

.btn {
  background: var(--grad);
  box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  border: none;
}
.btn:hover { background: var(--grad); filter: brightness(1.06); }
.btn.quiet { background: var(--surface); border: 1px solid var(--line); box-shadow: none; filter: none; }
.btn.quiet:hover { background: var(--line-soft); }
.btn.danger { background: var(--danger); box-shadow: none; }

.brand .mark { background: var(--grad); box-shadow: 0 8px 18px -6px rgba(225, 29, 116, 0.55); }
.nav-link.active { background: var(--grad); box-shadow: 0 8px 20px -8px rgba(225, 29, 116, 0.6); }

.stat, .panel, .row-card, .gate-card form {
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 18px 40px -28px rgba(17, 24, 39, 0.18);
}

/* Dark panel: sidebar usage card + dashboard hero */
.dark-panel {
  background:
    radial-gradient(120% 160% at 85% -20%, rgba(225, 29, 116, 0.32), transparent 55%),
    radial-gradient(90% 120% at -10% 110%, rgba(225, 29, 116, 0.14), transparent 50%),
    linear-gradient(160deg, var(--dark-2), var(--dark));
  border-radius: 22px;
  color: var(--dark-txt);
}
.dark-panel .soft { color: var(--dark-soft); }

.usage-card {
  background:
    radial-gradient(120% 160% at 85% -20%, rgba(225, 29, 116, 0.32), transparent 55%),
    linear-gradient(160deg, var(--dark-2), var(--dark));
  border: none;
  color: var(--dark-txt);
}
.usage-card .n { color: #fff; }
.usage-card .l { color: var(--dark-soft); }
.usage-card .meter { background: rgba(255, 255, 255, 0.14); }
.usage-card .meter > i { box-shadow: 0 0 12px var(--brand); }
.usage-card .upgrade {
  display: inline-block; margin-top: 10px;
  background: var(--grad); color: #fff;
  padding: 7px 14px; border-radius: 10px;
  font-weight: 700; font-size: 0.82rem;
  box-shadow: var(--glow);
}
.usage-card .upgrade:hover { text-decoration: none; filter: brightness(1.06); }

/* Hero band on the dashboard */
.hero {
  padding: 24px 28px;
  display: flex; align-items: center; gap: 32px;
}
.hero .k { font-size: 0.82rem; font-weight: 600; color: var(--dark-soft); }
.hero .big {
  font-family: var(--font-display); font-weight: 700;
  font-size: 3rem; line-height: 1.05; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.hero .facts { display: flex; gap: 18px; margin-top: 8px; font-size: 0.86rem; color: var(--dark-soft); }
.hero .facts b { color: #fff; }
.hero .spark { margin-left: auto; flex-shrink: 0; }

/* Avatars */
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 0.9rem;
}
.avatar.small { width: 30px; height: 30px; font-size: 0.75rem; }
.hue-0 { background: linear-gradient(135deg, #e11d74, #e11d7488); }
.hue-1 { background: linear-gradient(135deg, #8b5cf6, #8b5cf688); }
.hue-2 { background: linear-gradient(135deg, #0ea5e9, #0ea5e988); }
.hue-3 { background: linear-gradient(135deg, #10b981, #10b98188); }
.hue-4 { background: linear-gradient(135deg, #ec4899, #ec489988); }
.hue-5 { background: linear-gradient(135deg, #f59e0b, #f59e0b88); }
.hue-6 { background: linear-gradient(135deg, #6366f1, #6366f188); }

/* Ring (conic) stat */
.ringwrap { display: flex; align-items: center; gap: 14px; }
.ring {
  width: 66px; height: 66px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
}
.ring > i {
  width: 48px; height: 48px; border-radius: 50%; background: var(--surface);
  display: grid; place-items: center; font-style: normal;
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
}

/* Feed rows: avatar + status chip, replaces the plain bubble look */
.bubble {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--surface); border: none;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0; padding: 13px 2px;
}
.thread { gap: 0; }
.bubble .body { flex: 1; min-width: 0; }
.bubble .when { margin-top: 3px; }
.bubble.sent, .bubble.shadow, .bubble.deferred, .bubble.queued, .bubble.requeuing,
.bubble.failed, .bubble.expired, .bubble.quota_exceeded, .bubble.rate_limited,
.bubble.window_closed { border-left: none; }
.bubble.sent .badge { border-color: #a7f3d0; color: var(--sent); background: #ecfdf5; }
.bubble.shadow .badge { border-color: #f9a8d4; color: var(--brand-deep); background: var(--brand-tint); }
.bubble.deferred .badge, .bubble.queued .badge, .bubble.requeuing .badge {
  border-color: #fde68a; color: var(--warn); background: #fffbeb; }
.bubble.failed .badge, .bubble.expired .badge, .bubble.quota_exceeded .badge,
.bubble.rate_limited .badge, .bubble.window_closed .badge {
  border-color: #fecaca; color: var(--danger); background: #fef2f2; }

.pulse { box-shadow: 0 0 10px var(--brand); }

/* Sparkline */
.spark svg { display: block; }

/* Auth gate: glow backdrop */
.gate {
  background:
    radial-gradient(50% 40% at 50% 30%, var(--brand-tint), transparent 70%),
    var(--canvas);
}

/* ================= premium layer 2: pages ================= */

/* medallions + row icons */
.medal {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  box-shadow: 0 6px 14px -4px rgba(225, 29, 116, 0.5);
}
.row-icon {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  background: var(--brand-tint); color: var(--brand-deep);
  display: grid; place-items: center;
}
.row-icon svg { width: 20px; height: 20px; }
.row-card { padding: 18px 22px; gap: 16px; }
.row-card:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(17,24,39,0.05), 0 24px 48px -24px rgba(225, 29, 116,0.28); }
.row-main { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }

/* segmented control */
.seg { display: inline-flex; gap: 4px; background: #eef0f4; border-radius: 12px; padding: 4px; font-size: 0.86rem; font-weight: 600; }
.seg a, .seg span { padding: 7px 15px; border-radius: 9px; color: var(--ink-soft); }
.seg .on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.seg a:hover { text-decoration: none; color: var(--ink); }

/* account cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 18px; }
.acct-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px; text-align: center;
  box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 18px 40px -28px rgba(17,24,39,0.18);
}
.acct-card .avatar { width: 56px; height: 56px; font-size: 1.3rem; margin: 0 auto 12px; }
.acct-card.off { background: var(--canvas); }
.acct-card .h { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.acct-card .s { color: var(--ink-soft); font-size: 0.84rem; margin-top: 4px; }
.acct-card .foot { margin-top: 14px; }
.slotdots { display: inline-flex; gap: 5px; vertical-align: middle; margin-left: 8px; }
.slotdots i { width: 9px; height: 9px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 8px rgba(225, 29, 116,0.6); }
.slotdots i.free { background: var(--line); box-shadow: none; }
.upsell-card {
  border-radius: 18px; padding: 22px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.upsell-card .h { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff; }
.upsell-card .s { color: var(--dark-soft); font-size: 0.84rem; }
.add-card {
  border: 2px dashed var(--line); border-radius: 18px; padding: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--ink-soft); font-weight: 600;
}
.add-card:hover { border-color: var(--brand-line); color: var(--brand-deep); text-decoration: none; }
.add-card .plus { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-deep); display: grid; place-items: center; font-size: 1.3rem; font-weight: 700; }

/* leaderboard bars */
.board-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.board-row:last-child { border-bottom: none; }
.board-rank {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: var(--brand-tint); color: var(--brand-deep);
  display: grid; place-items: center; font-weight: 700; font-size: 0.9rem;
}
.board-bar { flex: 1.4; height: 9px; border-radius: 5px; background: var(--line-soft); }
.board-bar > i { display: block; height: 100%; border-radius: 5px; background: var(--grad); box-shadow: 0 2px 8px rgba(225, 29, 116,0.4); }
.board-n { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; width: 70px; text-align: right; font-variant-numeric: tabular-nums; }

/* plan cards */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 18px; align-items: stretch; }
.plan-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 26px 24px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 18px 40px -28px rgba(17,24,39,0.18);
}
.plan-card.featured { border-color: #f9a8d4; box-shadow: 0 24px 60px -20px rgba(225, 29, 116,0.4); }
.plan-card .ribbon {
  position: absolute; top: -12px; right: 18px;
  background: var(--grad); color: #fff; font-size: 0.72rem; font-weight: 700;
  padding: 3px 12px; border-radius: 999px; box-shadow: var(--glow);
}
.plan-card .name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.plan-card .price { font-family: var(--font-display); font-weight: 700; font-size: 2rem; margin-top: 4px; }
.plan-card .price small { font-size: 0.85rem; color: var(--ink-soft); font-weight: 500; font-family: var(--font-body); }
.plan-card ul { list-style: none; margin: 12px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.plan-card li { font-size: 0.88rem; color: #4b5563; display: flex; gap: 9px; }
.plan-card li::before { content: "\2713"; color: var(--sent); font-weight: 800; }
.plan-card .btn { width: 100%; }

/* meters inside the dark current-plan panel */
.plan-meter { flex: 1; }
.plan-meter .t { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--dark-soft); }
.plan-meter .t b { color: #fff; font-weight: 700; }
.plan-meter .meter { background: rgba(255,255,255,0.14); margin-top: 7px; }
.plan-meter .meter > i { box-shadow: 0 0 10px var(--brand); }

@media (max-width: 900px) {
}

/* ================= mobile app shell =================
   Under 900px the sidebar disappears and IGMsg behaves like an app:
   frosted top bar, bottom tab bar, and a slide-up "More" sheet. */

.foot {
  margin-top: 56px; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 18px;
  font-size: 0.8rem; color: #9ca3af;
}
.foot a { color: #9ca3af; font-weight: 500; }
.foot a:hover { color: var(--brand-deep); text-decoration: none; }

.m-top, .m-tabs { display: none; }
.m-sheet { display: none; }

@media (max-width: 900px) {
  .sidebar { display: none; }
  .main {
    padding: 76px 16px calc(88px + env(safe-area-inset-bottom));
    max-width: none;
  }
  h1 { font-size: 1.45rem; }
  .section { padding: 10px 0; }
  .page-head { flex-wrap: wrap; }
  .lede { font-size: 0.95rem; }
  .dark-panel.hero { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero svg, .panel svg { max-width: 100%; height: auto; }
  .foot { margin-bottom: 4px; }

  /* frosted top bar */
  .m-top {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    padding: 10px 16px;
    padding-top: calc(10px + env(safe-area-inset-top));
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .m-top .brand { padding: 0; font-size: 1.05rem; }
  .m-top .avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--grad); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: 0.9rem;
    box-shadow: 0 4px 10px -3px rgba(225, 29, 116, 0.5);
  }
  .m-top .avatar:hover { text-decoration: none; }

  /* bottom tab bar */
  .m-tabs {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .m-tab {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 0 3px; border-radius: 12px;
    color: #6b7280; font-size: 0.66rem; font-weight: 600;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .m-tab svg { width: 21px; height: 21px; }
  .m-tab:hover { text-decoration: none; }
  .m-tab.active { color: var(--brand-deep); }
  .m-tab.active::after {
    content: ""; width: 4px; height: 4px; border-radius: 50%;
    background: var(--brand); margin-top: 1px;
  }

  /* slide-up "More" sheet */
  .m-sheet { display: block; position: fixed; inset: 0; z-index: 50; pointer-events: none; }
  .m-sheet .scrim {
    position: absolute; inset: 0; background: rgba(17, 24, 39, 0.45);
    opacity: 0; transition: opacity 0.25s;
  }
  .m-sheet .tray {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--surface); border-radius: 22px 22px 0 0;
    padding: 14px 18px calc(26px + env(safe-area-inset-bottom));
    transform: translateY(105%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0.25, 1);
    box-shadow: 0 -20px 60px rgba(17, 24, 39, 0.28);
  }
  #m-more:checked ~ .m-sheet { pointer-events: auto; }
  #m-more:checked ~ .m-sheet .scrim { opacity: 1; }
  #m-more:checked ~ .m-sheet .tray { transform: none; }
  .tray .grab {
    width: 44px; height: 5px; border-radius: 3px;
    background: var(--line); margin: 0 auto 16px;
  }
  .m-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .m-tile {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 16px 6px; border: 1px solid var(--line); border-radius: 16px;
    background: var(--canvas);
    font-size: 0.78rem; font-weight: 600; color: var(--ink);
  }
  .m-tile svg { width: 22px; height: 22px; color: var(--brand-deep); }
  .m-tile:hover { text-decoration: none; border-color: var(--brand-line); }
  .m-out {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 14px; padding: 12px;
    border: 1px solid #fecaca; border-radius: 14px;
    color: var(--danger); font-weight: 600; font-size: 0.88rem;
  }
  .m-out svg { width: 18px; height: 18px; }
  .m-out:hover { text-decoration: none; background: #fef2f2; }
}

/* ================= PHP parity layer =================
   Faithful port of the Laravel app's Tailwind design: white rounded-xl cards,
   solid-orange sidebar links, gradient usage widget, sticky blurred top bar. */

.sidebar { padding: 0; }
.sb-brand {
  display: flex; align-items: center; gap: 10px;
  height: 64px; padding: 0 24px; flex-shrink: 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
}
.sb-brand .mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--brand), #f472b6);
  display: inline-grid; place-items: center;
  color: #fff; font-size: 0.9rem; font-weight: 800;
}
.sb-ws { padding: 12px 12px 8px; flex-shrink: 0; }
.ws-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
}
.ws-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #f472b6, var(--brand-deep));
  color: #fff; font-size: 0.75rem; font-weight: 600;
  display: grid; place-items: center;
}
.ws-meta { min-width: 0; line-height: 1.2; }
.ws-meta .k {
  display: block; font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: #9ca3af; font-weight: 600;
}
.ws-meta .v {
  display: block; font-size: 0.88rem; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-switch { position: relative; }
.ws-switch > summary { cursor: pointer; list-style: none; }
.ws-switch > summary::-webkit-details-marker { display: none; }
.ws-switch[open] > summary { border-color: var(--brand-line); }
.ws-caret { width: 14px; height: 14px; margin-left: auto; color: #9ca3af; flex-shrink: 0; }
.ws-menu {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 6px; box-shadow: 0 10px 24px rgba(17,24,39,0.12);
}
.ws-menu form { margin: 0; }
.ws-option {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; border: 0; border-radius: 8px; background: none;
  font-size: 0.85rem; color: var(--ink); text-align: left; cursor: pointer;
}
.ws-option:hover { background: var(--brand-tint); text-decoration: none; }
.ws-option.on { background: var(--brand-tint); color: var(--brand-deep); font-weight: 600; }
.ws-option .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ws-connect {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border: 1px dashed #d1d5db; border-radius: 10px;
  font-size: 0.88rem; color: var(--ink-soft); transition: all 0.15s;
}
.ws-connect svg { width: 16px; height: 16px; }
.ws-connect:hover { border-color: var(--brand-line); background: rgba(253,242,248,0.5); color: var(--brand-deep); text-decoration: none; }

.sb-nav { padding: 8px 12px 16px; }
.sb-nav .nav-link { padding: 10px 16px; font-size: 0.9rem; }
.sb-nav .nav-title {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.64rem; padding: 16px 12px 4px;
}
.nav-count {
  margin-left: auto; min-width: 24px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--brand-tint); color: var(--brand-deep);
  font-size: 0.72rem; font-weight: 600;
  display: inline-grid; place-items: center;
}
.nav-link.active .nav-count { background: rgba(255,255,255,0.25); color: #fff; }
.sb-spacer { flex: 1; min-height: 24px; }

/* usage widget - gradient header + metrics row */
.usage-w {
  display: block; margin: 8px 12px 12px;
  border: 1px solid var(--line); border-radius: 16px;
  background: #fff; overflow: hidden;
  box-shadow: 0 1px 2px rgba(17,24,39,0.05);
  transition: border-color 0.15s, box-shadow 0.15s;
  color: inherit;
}
.usage-w:hover { border-color: #d1d5db; box-shadow: 0 4px 10px rgba(17,24,39,0.08); text-decoration: none; }
.uw-top { padding: 16px 16px 12px; background: linear-gradient(135deg, rgba(253,242,248,0.8), rgba(252,231,243,0.4), #fff); }
.uw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.uw-head .k { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 700; }
.uw-plan { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 4px; }
.uw-plan.free { background: var(--line-soft); color: #374151; border: 1px solid var(--line); }
.uw-plan.paid { background: #111827; color: #fff; }
.uw-big b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.uw-big span { font-size: 0.72rem; color: var(--ink-soft); font-weight: 500; }
.uw-trend { font-size: 0.72rem; color: var(--ink-soft); margin-top: 2px; }
.uw-trend.up { color: #15803d; font-weight: 600; }
.uw-bar { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; margin-top: 10px; }
.uw-bar i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.uw-bar i.warm { background: #f59e0b; }
.uw-bar i.hot { background: #ef4444; }
.uw-frac { font-size: 0.64rem; color: var(--ink-soft); margin-top: 6px; font-variant-numeric: tabular-nums; }
.uw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line-soft); }
.uw-grid .k { display: block; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; font-weight: 600; }
.uw-grid .v { font-size: 0.88rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.up-btn {
  margin: 0 12px 12px; padding: 10px 12px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: #111827; color: #fff; border-radius: 12px;
  font-size: 0.78rem; font-weight: 600; transition: background 0.15s;
}
.up-btn svg { width: 14px; height: 14px; color: #fcd34d; }
.up-btn:hover { background: #000; text-decoration: none; }

/* top bar */
.mainwrap { flex: 1; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,0.9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 72px; padding: 12px 32px;
}
.tb-title { font-size: 1.35rem; }
.tb-title:empty { display: none; }
.tb-sub { margin: 2px 0 0; font-size: 0.875rem; color: var(--ink-soft); }
.tb-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tb-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 10px;
  font-size: 0.875rem; font-weight: 500; color: #4b5563; transition: all 0.15s;
}
.tb-link svg { width: 16px; height: 16px; }
.tb-link:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; }

.avatar-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #f472b6, var(--brand-deep));
  color: #fff; font-weight: 600; font-size: 0.875rem;
  display: inline-grid; place-items: center;
  border: none; cursor: pointer; font-family: inherit;
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(17,24,39,0.2);
  transition: box-shadow 0.15s;
}
.avatar-btn:hover { box-shadow: 0 0 0 2px var(--brand-tint), 0 4px 8px rgba(17,24,39,0.2); text-decoration: none; }

.dd { position: relative; }
.menu {
  display: none; position: absolute; right: 0; top: 100%; margin-top: 8px;
  width: 240px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 0; z-index: 50;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}
.menu.open { display: block; }
.menu-head { padding: 4px 16px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.menu-head .n { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.menu-head .e { margin: 0; font-size: 0.75rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; }
.menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; font-size: 0.875rem; color: #374151;
}
.menu a svg { width: 16px; height: 16px; color: #9ca3af; }
.menu a:hover { background: #f9fafb; text-decoration: none; }
.menu a.danger { color: var(--danger); }
.menu a.danger svg { color: var(--danger); }
.menu a.danger:hover { background: #fef2f2; }
.menu-sep { border-top: 1px solid var(--line-soft); margin: 4px 0; }

/* cards + buttons (Laravel component classes) */
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.card.pad { padding: 24px; }
.card-h { display: flex; align-items: center; justify-content: space-between; padding: 24px; border-bottom: 1px solid var(--line-soft); }
.card-h h2 { font-size: 1rem; }

.stat-card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 24px; transition: border-color 0.2s;
}
.stat-card:hover { border-color: var(--brand-line); }
.stat-card .k-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.stat-card .k { font-size: 0.875rem; font-weight: 500; color: var(--ink-soft); }
.stat-card .n { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; }
.stat-card .sub { font-size: 0.75rem; color: #9ca3af; margin-top: 2px; }

.icon-chip { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.icon-chip svg { width: 16px; height: 16px; }
.chip-brand { background: #fce7f3; color: var(--brand-deep); }
.chip-green { background: #dcfce7; color: #16a34a; }
.chip-blue { background: #dbeafe; color: #2563eb; }
.chip-purple { background: #f3e8ff; color: #9333ea; }

.btn-primary, .btn-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border: none; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 0.9rem; font-weight: 600; color: #fff;
  transition: background 0.2s;
}
.btn-primary { background: var(--brand); }
.btn-primary:hover { background: var(--brand-deep); text-decoration: none; }
.btn-dark { background: #111827; }
.btn-dark:hover { background: #1f2937; text-decoration: none; }
.btn-primary svg, .btn-dark svg { width: 16px; height: 16px; }
.btn-block { width: 100%; padding: 10px 16px; font-size: 0.875rem; }

.pill-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0;
  padding: 2px 8px; border-radius: 999px;
}
.ping { position: relative; display: inline-flex; width: 6px; height: 6px; }
.ping::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #22c55e; opacity: 0.75;
}
.ping::after { content: ""; position: relative; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
@media (prefers-reduced-motion: no-preference) {
  .ping::before { animation: ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite; }
  @keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
}

/* live activity rows (Laravel dashboard feed) */
.act-row { padding: 16px 24px; border-top: 1px solid var(--line-soft); display: flex; align-items: flex-start; gap: 12px; }
.act-row:first-child { border-top: none; }
.act-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #fce7f3, #fbcfe8);
  color: var(--brand-deep); font-size: 0.875rem; font-weight: 600;
  display: grid; place-items: center;
}
.act-body { flex: 1; min-width: 0; }
.act-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.act-who b { font-size: 0.875rem; }
.act-who time { font-size: 0.75rem; color: #9ca3af; }
.act-quote { display: flex; gap: 8px; margin-top: 6px; font-size: 0.875rem; color: #374151; }
.act-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.75rem; color: #9ca3af; }
.kw-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: ui-monospace, monospace; font-size: 0.7rem;
  color: var(--brand-deep); background: var(--brand-tint);
  border: 1px solid #fbcfe8; padding: 1px 6px; border-radius: 4px;
}
.st-pill {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: 0.7rem; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; border: 1px solid;
}
.st-pill.sent { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.st-pill.failed { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.st-pill.other { background: #fef9c3; color: #a16207; border-color: #fde68a; }

/* admin (dark gray-950 sidebar) */
.adm .sidebar { background: #030712; border-right: none; }
.adm .sb-brand { border-bottom: 1px solid #1f2937; color: #fff; }
.adm .sb-brand .sub { display: block; font-size: 0.7rem; color: #f472b6; font-weight: 500; margin-top: -2px; }
.adm .sb-nav .nav-link { color: #9ca3af; }
.adm .sb-nav .nav-link:hover { background: #1f2937; color: #fff; }
.adm .sb-nav .nav-link.active { background: #1f2937; color: #fff; }
.adm .sb-nav .nav-title { color: #6b7280; }
.adm table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.adm th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; font-weight: 600; padding: 10px 24px; border-bottom: 1px solid var(--line-soft); }
.adm td { padding: 12px 24px; border-bottom: 1px solid var(--line-soft); }
.adm tr:hover td { background: #f9fafb; }

@media (max-width: 900px) {
  .topbar { display: none; }
  .tb-title, .tb-sub { display: none; }
}

/* dashboard grids (PHP clone) */
.statgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 32px; }
.dash-grid { display: grid; gap: 24px; align-items: start; }
.dash-side { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1024px) {
  .statgrid { grid-template-columns: repeat(4, 1fr); }
  .dash-grid { grid-template-columns: 2fr 1fr; }
}

/* guest auth split layout (Laravel guest.blade) */
.guest { display: flex; min-height: 100vh; }
.guest-brandpanel {
  display: none; position: relative; overflow: hidden;
  width: 50%; background: #030712;
}
.gb-glow { position: absolute; border-radius: 50%; filter: blur(64px); }
.gb-glow.one { top: 80px; left: -80px; width: 384px; height: 384px; background: rgba(251,146,60,0.10); }
.gb-glow.two { bottom: 80px; right: 40px; width: 288px; height: 288px; background: rgba(251,146,60,0.05); }
.gb-in { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 64px; height: 100%; }
.gb-logo {
  display: flex; align-items: center; gap: 12px; margin-bottom: 48px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: #fff;
}
.gb-logo .mark {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), #f472b6);
  display: inline-grid; place-items: center; color: #fff; font-size: 1.1rem; font-weight: 800;
}
.gb-logo.small { color: var(--ink); font-size: 1.1rem; margin: 0 0 40px; }
.gb-logo.small .mark { width: 32px; height: 32px; border-radius: 8px; font-size: 0.9rem; }
.gb-in h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 2.25rem;
  color: #fff; line-height: 1.2; margin: 0 0 24px;
}
.gb-in h2 span { color: #f472b6; }
.gb-in p { color: #9ca3af; font-size: 1.1rem; line-height: 1.6; max-width: 28rem; margin: 0; }
.gb-in ul { list-style: none; margin: 48px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.gb-in li { display: flex; align-items: center; gap: 12px; color: #d1d5db; }
.gb-in li::before { content: "\2713"; color: #f472b6; font-weight: 700; }
.guest-form {
  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 48px 24px; background: #fff;
}
.guest-form-in { width: 100%; max-width: 24rem; }
@media (min-width: 1024px) {
  .guest-brandpanel { display: flex; }
  .guest-form .gb-logo.small { display: none; }
}

/* analytics funnel (PHP clone) */
.funnel { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: stretch; }
@media (min-width: 768px) { .funnel { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 8px; } }
.f-stage {
  border: 1px solid var(--line-soft); background: rgba(249,250,251,0.6);
  border-radius: 16px; padding: 20px; text-align: center;
}
.f-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin: 0 auto 12px; }
.f-icon svg { width: 20px; height: 20px; }
.f-n { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.8rem; }
.f-l { margin: 4px 0 0; font-size: 0.875rem; font-weight: 500; color: #374151; }
.f-s { margin: 2px 0 0; font-size: 0.75rem; color: #9ca3af; }
.f-arrow { display: flex; align-items: center; justify-content: center; gap: 4px; }
@media (min-width: 768px) { .f-arrow { flex-direction: column; } }
.f-arrow svg { width: 24px; height: 24px; color: #d1d5db; transform: rotate(90deg); }
@media (min-width: 768px) { .f-arrow svg { transform: none; } }
.f-arrow span { font-size: 0.7rem; font-weight: 700; color: var(--brand-deep); white-space: nowrap; }

/* integrations catalog chips */
.int-chip {
  display: inline-flex; align-items: center; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font-family: inherit; font-size: 0.75rem; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.int-chip:hover { border-color: #9ca3af; color: var(--ink); }
.int-chip.on { background: #111827; border-color: #111827; color: #fff; }


/* ================= marketing layer (public pages) ================= */

body.mkt { background: #fff; }


.mkt-hero { max-width: 60rem; margin: 0 auto; padding: 80px 24px 48px; text-align: center; }
.mkt-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.08; margin: 0;
}
.mkt-hero h1 span { color: var(--brand-aa-text); }
.mkt-hero > p {
  margin: 24px auto 0; max-width: 40rem;
  font-size: 1.15rem; color: var(--ink-soft); line-height: 1.65;
}
.mkt-hero-cta { margin-top: 36px; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.mkt-hero-cta .ghost { font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); }
.mkt-hero-cta .ghost:hover { color: var(--ink); text-decoration: none; }
.mkt-hero .proof { margin-top: 28px; font-size: 0.9rem; color: var(--ink-soft); }
.mkt-hero .proof strong { color: var(--ink); }

/* hero visual: dark panel + floating cards */
.mkt-visual {
  position: relative; margin: 56px auto 0; max-width: 68rem;
  min-height: 420px; border-radius: 24px; overflow: hidden;
  background: radial-gradient(1200px 500px at 20% -10%, #2a1a10, transparent),
              radial-gradient(900px 400px at 90% 110%, #24160d, transparent), #12151c;
  box-shadow: 0 40px 80px -30px rgba(17,24,39,0.5);
  text-align: left;
}
.mv-glow { position: absolute; border-radius: 50%; filter: blur(70px); }
.mv-glow.one { top: -60px; left: 8%; width: 300px; height: 300px; background: rgba(225, 29, 116,0.18); }
.mv-glow.two { bottom: -80px; right: 6%; width: 340px; height: 340px; background: rgba(225, 29, 116,0.12); }
.mv-card { position: absolute; z-index: 2; max-width: 320px; }
.mv-comment { top: 48px; left: 6%; }
.mv-dm { bottom: 48px; right: 6%; }
.mv-step { display: flex; align-items: center; gap: 8px; color: #e5e7eb; font-size: 0.85rem; font-weight: 500; margin-bottom: 10px; }
.mv-step i {
  width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--ink);
  display: inline-grid; place-items: center; font-style: normal; font-weight: 700; font-size: 0.72rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3); flex-shrink: 0;
}
.mv-bubble {
  display: flex; gap: 10px; background: rgba(255,255,255,0.96);
  border: 1px solid rgba(255,255,255,0.6); border-radius: 14px;
  padding: 14px; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.4);
}
.mv-bubble b { font-size: 0.8rem; display: block; }
.mv-bubble p { margin: 2px 0 0; font-size: 0.85rem; color: #374151; }
.mv-bubble .kw {
  display: inline-block; padding: 1px 7px; border: 1px dashed var(--brand);
  border-radius: 6px; color: var(--brand-aa-text); font-weight: 600; font-size: 0.75rem;
}
.mv-bubble.out { display: block; background: var(--grad, linear-gradient(135deg, #f472b6, #e11d74 55%, #be185d)); border: none; color: #fff; }
.mv-bubble.out p { color: #fff; font-size: 0.9rem; margin: 0; }
.mv-bubble.out .cta {
  display: block; margin-top: 10px; text-align: center;
  background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.35);
  border-radius: 9px; padding: 8px; font-weight: 700; font-size: 0.82rem;
}
.mv-flow {
  position: absolute; z-index: 1; left: 25%; right: 25%; top: 45%;
  border-top: 2px dashed rgba(255,255,255,0.35);
  transform: rotate(6deg);
}
@media (max-width: 720px) {
  .mkt-visual { min-height: 480px; }
  .mv-comment { top: 24px; left: 16px; right: 16px; }
  .mv-dm { bottom: 24px; right: 16px; left: 16px; max-width: none; }
  .mv-flow { display: none; }
}

.mkt-section { max-width: 68rem; margin: 0 auto; padding: 72px 24px; text-align: center; }
.mkt-section.alt { max-width: none; background: var(--canvas); }
.mkt-section.alt > * { max-width: 68rem; margin-left: auto; margin-right: auto; }
.mkt-kicker {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand-aa-text); margin-bottom: 10px;
}
.mkt-section h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 700; margin-bottom: 40px; }

.mkt-3grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; text-align: left; }
.mkt-step .n {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand-aa-text);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  display: grid; place-items: center; margin-bottom: 14px;
}
.mkt-step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.mkt-step p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.6; }

.mkt-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; text-align: left; }
.mkt-feat {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px;
  transition: border-color 0.2s;
}
.mkt-feat:hover { border-color: var(--brand-line); }
.mkt-feat h3 { font-size: 0.98rem; margin-bottom: 6px; }
.mkt-feat p { margin: 0; font-size: 0.875rem; color: var(--ink-soft); line-height: 1.55; }

.mkt-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: start; }
.ribbon-pop {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--brand-aa); color: #fff; white-space: nowrap;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 12px; border-radius: 999px;
}

.mkt-faq { max-width: 44rem; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.mkt-faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0 20px; }
.mkt-faq summary {
  list-style: none; cursor: pointer; padding: 16px 0;
  font-weight: 600; font-size: 0.95rem; display: flex; justify-content: space-between; gap: 12px;
}
.mkt-faq summary::-webkit-details-marker { display: none; }
.mkt-faq summary::after { content: "+"; color: var(--brand-aa-text); font-weight: 700; }
.mkt-faq details[open] summary::after { content: "-"; }
.mkt-faq details p { margin: 0 0 16px; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.65; }

.mkt-band {
  background: #12151c; color: #fff; text-align: center; padding: 72px 24px;
}
.mkt-band h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: #fff; margin-bottom: 10px; }
.mkt-band p { color: #9ca3af; margin: 0 0 28px; }


/* ---- landing: hero proof + photo stage (Laravel welcome port) ---- */
.hero-proof { margin-top: 40px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.hero-proof .avatars { display: flex; }
.hero-proof .avatars img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; margin-left: -12px;
}
.hero-proof .avatars img:first-child { margin-left: 0; }
.hero-proof .txt { text-align: left; }
.hero-proof .stars { color: #f59e0b; font-size: 0.8rem; letter-spacing: 2px; }
.hero-proof .txt p { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }
.hero-proof .txt strong { color: var(--ink); }

.hero-stage {
  position: relative; margin: 64px auto 0; max-width: 72rem;
  border-radius: 24px; overflow: hidden; background: #111827;
  box-shadow: 0 40px 80px -30px rgba(17,24,39,0.5); text-align: left;
}
.hero-photo {
  display: block; width: 100%; height: 620px; object-fit: cover; object-position: center 30%;
  animation: heroImgFadeIn 1.2s ease-out both;
}
.hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.3)); pointer-events: none; }
.hs-card { position: absolute; z-index: 3; max-width: 320px; }
.hs-1 { top: 60px; left: 6%; animation: heroFloatUpIn 0.8s ease-out 0.4s both, heroFloatBob 6s ease-in-out 1.2s infinite; }
.hs-2 { top: 150px; right: 6%; animation: heroFloatUpIn 0.8s ease-out 0.7s both, heroFloatBob 7s ease-in-out 1.5s infinite; }
.hs-step { display: flex; align-items: flex-start; gap: 8px; color: #fff; font-size: 0.85rem; font-weight: 500; margin-bottom: 8px; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.hs-step i {
  width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #111827;
  display: inline-grid; place-items: center; font-style: normal; font-weight: 700; font-size: 0.72rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3); flex-shrink: 0;
}
.hs-bubble {
  display: flex; gap: 10px; background: rgba(255,255,255,0.95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.6); border-radius: 14px;
  padding: 14px; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.4);
}
.hs-bubble img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.hs-bubble b { font-size: 0.78rem; display: block; margin-bottom: 2px; }
.hs-bubble p { margin: 0; font-size: 0.85rem; color: #374151; }
.hs-bubble .kw {
  display: inline-block; padding: 1px 7px; border: 1px dashed var(--brand);
  border-radius: 6px; color: var(--brand-aa-text); font-weight: 600; font-size: 0.72rem;
}
.hs-bubble .reply { display: block; margin-top: 6px; font-size: 0.68rem; color: #6b7280; font-weight: 500; }
.hs-bubble.solo { display: block; }
.hs-bubble.solo p { margin-bottom: 12px; font-size: 0.85rem; color: #1f2937; }
.hs-bubble.solo button {
  width: 100%; background: #111827; color: #fff; border: none; cursor: pointer;
  font-family: inherit; font-size: 0.82rem; font-weight: 600;
  padding: 10px; border-radius: 10px; transition: background 0.15s;
}
.hs-bubble.solo button:hover { background: #1f2937; }
.hs-mini {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.95); border: 1px solid rgba(255,255,255,0.6);
  border-radius: 999px; padding: 7px 14px;
  font-size: 0.72rem; font-weight: 600; color: #1f2937; white-space: nowrap;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.4);
}
.hs-mini b { color: var(--brand-aa-text); }
.hs-m1 { bottom: 44px; left: 8%; animation: heroFloatUpIn 0.8s ease-out 1.3s both, heroFloatBob 5s ease-in-out 2.1s infinite; }
.hs-m2 { bottom: 70px; right: 10%; border-radius: 16px; animation: heroFloatUpIn 0.8s ease-out 1.6s both, heroFloatBob 6s ease-in-out 2.4s infinite; }
.hs-cta {
  position: absolute; z-index: 3; left: 50%; bottom: 32px; transform: translateX(-50%);
  background: var(--brand-aa); color: #fff; font-weight: 600; font-size: 0.95rem;
  padding: 13px 32px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3), 0 0 0 4px rgba(255,255,255,0.3);
  animation: heroCtaRise 0.9s cubic-bezier(0.22,1,0.36,1) 1.9s both, heroCtaPulse 3s ease-in-out 2.9s infinite;
}
.hs-cta:hover { background: var(--brand-deep); text-decoration: none; }
.hs-glow { position: absolute; border-radius: 50%; filter: blur(48px); pointer-events: none; }
.hs-glow.a { top: 40px; left: 33%; width: 128px; height: 128px; background: rgba(255,255,255,0.2); animation: heroGlowPulse 6s ease-in-out infinite; }
.hs-glow.b { bottom: 80px; right: 25%; width: 160px; height: 160px; background: rgba(225, 29, 116,0.3); animation: heroGlowPulse 7s ease-in-out 1s infinite; }
@keyframes heroImgFadeIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
@keyframes heroFloatUpIn { 0% { opacity: 0; transform: translateY(24px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes heroFloatBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes heroGlowPulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.12); } }
@keyframes heroCtaRise { 0% { opacity: 0; transform: translate(-50%, 20px); } 100% { opacity: 1; transform: translate(-50%, 0); } }
@keyframes heroCtaPulse {
  0%, 100% { box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3), 0 0 0 4px rgba(255,255,255,0.3); }
  50% { box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3), 0 0 0 10px rgba(225, 29, 116,0.25); }
}
@media (max-width: 720px) {
  .hero-photo { height: 560px; }
  .hs-1 { left: 16px; right: auto; top: 24px; }
  .hs-2 { top: auto; bottom: 150px; right: 16px; }
  .hs-m1 { bottom: 96px; }
  .hs-m2 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo, .hs-card, .hs-mini, .hs-cta, .hs-glow { animation: none !important; }
}

/* stats bar */
.mkt-stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--canvas); }
.mkt-stats .in {
  max-width: 76rem; margin: 0 auto; padding: 40px 24px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; text-align: center;
}
@media (min-width: 768px) { .mkt-stats .in { grid-template-columns: repeat(4, 1fr); } }
.mkt-stats .n { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; }
.mkt-stats .l { margin: 4px 0 0; font-size: 0.875rem; color: var(--ink-soft); }
.mkt-sub { margin: -28px auto 40px; max-width: 36rem; color: var(--ink-soft); font-size: 0.92rem; }

/* how-it-works cards with serif numerals */
.hiw-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 32px;
  text-align: left; transition: border-color 0.2s;
}
.hiw-card:hover { border-color: var(--brand-line); }
.hiw-card .num { font-family: var(--font-display); font-size: 2.25rem; font-weight: 600; color: #f9a8d4; }
.hiw-card h3 { font-size: 1.1rem; margin: 16px 0 8px; }
.hiw-card p { margin: 0; color: var(--ink-soft); line-height: 1.65; }

/* use cases */
.uc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; text-align: left; }
.uc-card {
  border: 1px solid var(--line); border-radius: 24px; background: #fff; overflow: hidden;
  transition: all 0.3s;
}
.uc-card:hover { border-color: var(--brand-line); box-shadow: 0 20px 40px -20px rgba(225, 29, 116,0.15); transform: translateY(-4px); }
.uc-mock { background: linear-gradient(135deg, var(--canvas), #fff); border-bottom: 1px solid var(--line-soft); padding: 24px; }
.uc-comment { display: flex; align-items: center; gap: 10px; }
.uc-comment img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.uc-comment p { margin: 0; font-size: 0.82rem; line-height: 1.4; }
.uc-comment b { color: var(--ink); }
.uc-comment span { color: var(--ink-soft); }
.uc-comment .kw {
  display: inline-block; background: var(--brand-aa); color: #fff;
  font-family: ui-monospace, monospace; font-size: 0.68rem; font-weight: 600;
  padding: 1px 6px; border-radius: 4px;
}
.uc-divider {
  padding: 12px 0 12px 42px; font-size: 0.58rem; text-transform: uppercase;
  letter-spacing: 0.2em; color: #6b7280; font-weight: 600;
}
.uc-dm {
  background: var(--brand); border-radius: 16px 16px 16px 4px; padding: 14px 16px;
  box-shadow: 0 12px 24px -8px rgba(225, 29, 116,0.4);
}
.uc-dm p { margin: 0 0 10px; font-size: 0.82rem; color: #fff; line-height: 1.45; }
.uc-dm span {
  display: inline-flex; font-size: 0.72rem; color: #fff; font-weight: 600;
  background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px; padding: 4px 10px;
}
.uc-body { padding: 24px; }
.uc-body h3 { font-size: 1.1rem; margin-bottom: 8px; }
.uc-body > p { margin: 0 0 16px; font-size: 0.875rem; color: var(--ink-soft); line-height: 1.6; }
.uc-items { display: flex; flex-wrap: wrap; gap: 6px; }
.uc-items span {
  font-size: 0.75rem; color: var(--brand-aa-text); background: var(--brand-tint);
  border: 1px solid #fce7f3; border-radius: 999px; padding: 3px 10px;
}

/* testimonials */
.tst-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; text-align: left; }
.tst-card {
  position: relative; margin: 0; background: #fff; border: 1px solid var(--line);
  border-radius: 24px; padding: 28px; display: flex; flex-direction: column;
  transition: all 0.3s; overflow: hidden;
}
.tst-card:hover { border-color: var(--brand-line); box-shadow: 0 20px 40px -20px rgba(225, 29, 116,0.15); transform: translateY(-4px); }
.tst-card .wash { position: absolute; top: 0; right: 0; width: 112px; height: 112px; background: linear-gradient(135deg, rgba(225, 29, 116,0.1), transparent); pointer-events: none; }
.tst-card .stars { color: #f59e0b; letter-spacing: 2px; font-size: 0.85rem; margin-bottom: 16px; }
.tst-card blockquote { position: relative; margin: 0; flex: 1; }
.tst-card blockquote .q {
  position: absolute; left: -4px; top: -20px; font-size: 3.5rem;
  font-family: var(--font-display); color: #fce7f3; user-select: none; line-height: 1;
}
.tst-card blockquote p { position: relative; margin: 0; font-size: 0.92rem; color: #374151; line-height: 1.65; }
.tst-card .metric {
  margin-top: 24px; align-self: flex-start;
  display: inline-flex; align-items: baseline; gap: 8px;
  background: linear-gradient(135deg, var(--brand-tint), #fce7f3);
  border: 1px solid rgba(253,186,116,0.6); border-radius: 16px; padding: 10px 16px;
}
.tst-card .metric b { font-family: var(--font-display); font-size: 1.6rem; color: var(--brand-aa-text); line-height: 1; }
.tst-card .metric span { font-size: 0.75rem; color: rgba(154,52,18,0.8); font-weight: 500; }
.tst-card figcaption {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 12px;
}
.tst-card figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,0.15); }
.tst-card figcaption .n { margin: 0; font-size: 0.875rem; font-weight: 600; }
.tst-card figcaption .r { margin: 0; font-size: 0.75rem; color: var(--ink-soft); }

/* FAQ two-column numbered accordion */
.faq-wrap { display: grid; gap: 48px; text-align: left; }
@media (min-width: 1024px) { .faq-wrap { grid-template-columns: 0.9fr 1.2fr; gap: 80px; } }
.faq-left { position: sticky; top: 96px; align-self: start; }
.faq-support {
  margin-top: 32px; display: flex; gap: 16px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 20px;
  transition: all 0.3s; position: relative; overflow: hidden;
}
.faq-support:hover { border-color: var(--brand-line); box-shadow: 0 12px 30px -15px rgba(225, 29, 116,0.2); text-decoration: none; }
.faq-support .ic {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #fff; display: grid; place-items: center; font-size: 1.1rem;
  box-shadow: 0 8px 20px -6px rgba(225, 29, 116,0.5);
}
.faq-support .t { margin: 0; font-weight: 600; color: var(--ink); }
.faq-support .s { margin: 2px 0 0; font-size: 0.875rem; color: var(--ink-soft); }
.faq-item {
  border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,0.6);
  margin-bottom: 12px; transition: all 0.3s;
}
.faq-item:hover { border-color: #d1d5db; background: #fff; }
.faq-item.on { border-color: var(--brand-line); background: #fff; box-shadow: 0 14px 35px -20px rgba(225, 29, 116,0.25); }
.faq-item > button {
  display: flex; align-items: flex-start; gap: 16px; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; font-family: inherit; padding: 20px 24px;
}
.faq-item .num { font-size: 0.8rem; font-weight: 600; color: #6b7280; padding-top: 3px; font-variant-numeric: tabular-nums; transition: color 0.3s; }
.faq-item.on .num { color: var(--brand-aa-text); }
.faq-item .q { flex: 1; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); line-height: 1.4; }
.faq-item .plus {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--line-soft); color: var(--ink-soft);
  display: grid; place-items: center; font-weight: 600; transition: all 0.3s;
}
.faq-item.on .plus { background: var(--brand-aa); color: #fff; transform: rotate(45deg); }
.faq-item .a { display: none; padding: 0 24px 20px 64px; }
.faq-item.on .a { display: block; }
.faq-item .a p { margin: 0; font-size: 0.875rem; color: var(--ink-soft); line-height: 1.65; }

/* pricing page: billing toggle + plan cards v2 + trust row */
.bill-toggle {
  margin-top: 32px; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px;
}
.bill-toggle button {
  padding: 8px 20px; border-radius: 999px; border: none; cursor: pointer;
  font-family: inherit; font-size: 0.875rem; font-weight: 500;
  background: none; color: var(--ink-soft); transition: all 0.15s;
}
.bill-toggle button.on { background: #111827; color: #fff; }
.sale-strip {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--brand-tint); border: 1px solid #fbcfe8; color: var(--brand-aa-text);
  font-size: 0.875rem; font-weight: 500; padding: 6px 16px; border-radius: 999px;
}
.plan-card2 {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: 32px; display: flex; flex-direction: column; text-align: left;
}
.plan-card2.popular { border: 2px solid #f472b6; box-shadow: 0 10px 30px -12px rgba(251,146,60,0.25); }
.plan-card2 h3, .plan-card2 .plan-name { font-size: 1.1rem; margin: 0; }
.plan-card2 .price { margin: 24px 0; min-height: 84px; }
.plan-card2 .price b { font-family: var(--font-display); font-weight: 700; font-size: 2.8rem; }
.plan-card2 .price span { color: #6b7280; margin-left: 4px; }
.plan-card2 .price .note { margin: 6px 0 0; font-size: 0.75rem; color: #6b7280; }
.plan-card2 .inc {
  margin: 0 0 16px; font-size: 0.72rem; font-weight: 600; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.plan-card2 ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 0.875rem; color: #374151; flex: 1; }
.plan-card2 li { display: flex; gap: 8px; align-items: flex-start; }
.plan-card2 li span { color: var(--brand-aa-text); font-weight: 700; }
.trust-row {
  margin-top: 40px; display: flex; justify-content: center; gap: 32px; flex-wrap: wrap;
  font-size: 0.875rem; font-weight: 500; color: var(--ink);
}
.contact-grid { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 2fr 3fr !important; } }

/* ---- Policy / prose pages (Laravel x-policy-page port) ---- */
.policy-hero { background: var(--canvas); border-bottom: 1px solid var(--line); }
.policy-hero .in { max-width: 56rem; margin: 0 auto; padding: 72px 24px; }
.policy-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1.15; margin: 0; }
.policy-hero .sub { margin: 16px 0 0; max-width: 42rem; font-size: 1.1rem; color: var(--ink-soft); line-height: 1.6; }
.policy-hero .upd { margin: 20px 0 0; font-size: 0.8rem; color: #6b7280; }
.prose-wrap { max-width: 56rem; margin: 0 auto; padding: 64px 24px; }
.prose h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin: 40px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; margin: 24px 0 12px; }
.prose p { color: var(--ink-soft); line-height: 1.7; margin: 0 0 16px; }
.prose ul, .prose ol { color: var(--ink-soft); line-height: 1.7; margin: 0 0 16px; padding-left: 24px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--ink); }
.prose a { color: var(--brand-aa-text, var(--brand-text)); text-decoration: none; }
.prose a:hover { text-decoration: underline; }

/* ---- Changelog ---- */
.cl-hero { padding: 40px 24px 48px; background: linear-gradient(to bottom, #fdf2f899, #fff); border-bottom: 1px solid var(--line-soft); }
.cl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid; }
.cl-month { position: sticky; top: 72px; z-index: 10; background: rgba(255,255,255,0.95); backdrop-filter: blur(4px); padding: 8px 0; margin-bottom: 16px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cl-month h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin: 0; }
.cl-rail { position: relative; }
@media (min-width: 640px) { .cl-rail { padding-left: 40px; } .cl-rail::before { content: ""; position: absolute; left: 12px; top: 12px; bottom: 12px; width: 1px; background: linear-gradient(to bottom, #fbcfe8, var(--line), transparent); } }
.cl-entry { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 24px; margin-bottom: 16px; transition: border-color 0.15s, box-shadow 0.15s; }
.cl-entry:hover { border-color: #d1d5db; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
@media (min-width: 640px) { .cl-entry::before { content: ""; position: absolute; left: -32.8px; top: 25px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); box-shadow: 0 0 0 4px #fff; } }
.cl-entry time { font-size: 0.68rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.cl-entry h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin: 8px 0 6px; line-height: 1.35; }
.cl-entry .body { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.65; margin: 0; }
.cl-entry .links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cl-entry .links a { font-size: 0.8rem; font-weight: 500; color: var(--brand-aa-text); text-decoration: none; }
.cl-entry .links a:hover { text-decoration: underline; }

/* ---- About page ---- */
.about-hero { position: relative; overflow: hidden; background: #fff; }
.about-hero .glow { position: absolute; top: 0; right: 0; width: 500px; height: 500px; background: rgba(252,231,243,0.4); border-radius: 50%; filter: blur(120px); pointer-events: none; }
.about-kicker { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-tint); border: 1px solid #fbcfe8; border-radius: 999px; padding: 6px 16px; margin-bottom: 24px; font-size: 0.72rem; font-weight: 600; color: #be185d; text-transform: uppercase; letter-spacing: 0.08em; }
.about-kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.principle-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.principle-card .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-tint); border: 1px solid #fbcfe8; display: grid; place-items: center; margin-bottom: 16px; }
.check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; color: #374151; }
.check-list svg { width: 20px; height: 20px; color: var(--brand); flex-shrink: 0; margin-top: 2px; }

/* ---- API docs prose extras ---- */
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; color: #be185d; background: var(--brand-tint); padding: 2px 6px; border-radius: 4px; }
.prose pre { background: #111827; color: #f3f4f6; border-radius: 12px; padding: 18px 20px; overflow-x: auto; font-size: 0.82rem; line-height: 1.6; margin: 0 0 20px; }
.prose pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.prose h4 { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; margin: 20px 0 10px; }
.docs-toc { margin-bottom: 40px; padding: 16px 20px; background: var(--canvas); border: 1px solid var(--line); border-radius: 12px; }
.docs-toc p { font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 8px; }
.docs-toc ul { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; display: flex; flex-direction: column; gap: 4px; }
.docs-toc a { color: #374151; text-decoration: none; }
.docs-toc a:hover { color: var(--brand-deep); }


.sale-strip[hidden] { display: none; }


/* ---- Flash messages ---- */
.flash { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 12px; font-size: 0.875rem; font-weight: 500; margin-bottom: 20px; border: 1px solid; }
.flash-success { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.flash-error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.flash-limit { background: #fffbeb; border-color: #fde68a; color: #92400e; }

/* Real logo image (same icon-256.png as the PHP site) replaces the old CSS "ig" mark */
:is(.brand, .sb-brand, .gb-logo, .mkt-logo) img.mark {
  display: inline-block; object-fit: contain; background: none; border-radius: 0; flex-shrink: 0;
}

/* Sidebar is a fixed-height flex column: nothing may shrink, the column scrolls
   instead - otherwise the usage card gets squashed to a sliver on short screens. */
.sidebar > * { flex-shrink: 0; }

/* =====================================================================
   HOME PAGE (public/home.html) - faithful port of Laravel welcome.blade.php.
   Tailwind -> CSS: max-w-7xl px-5 sm:px-8, py-20 sm:py-28 sections,
   font-serif headings (Clash Display, regular weight -> renders 500).
   ===================================================================== */
.home-page .hm-in { max-width: 80rem; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
@media (min-width: 640px) { .home-page .hm-in { padding-left: 32px; padding-right: 32px; } }
.home-page h1, .home-page h2 { font-family: var(--font-display); font-weight: 500; color: var(--ink); }

/* ---- hero ---- */
.hm-hero { position: relative; overflow: hidden; }
.hm-hero-in { padding-top: 64px; padding-bottom: 80px; }
@media (min-width: 640px) { .hm-hero-in { padding-top: 96px; padding-bottom: 112px; } }
.hm-hero-copy { max-width: 48rem; margin: 0 auto; text-align: center; }
.hm-hero-copy h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.025em; margin: 0; }
@media (min-width: 640px) { .hm-hero-copy h1 { font-size: 56px; } }
@media (min-width: 1024px) { .hm-hero-copy h1 { font-size: 64px; } }
.hm-hero-copy h1 span { color: var(--brand-deep); }
.hm-hero-copy > p { margin: 24px auto 0; max-width: 42rem; font-size: 1.125rem; line-height: 1.625; color: var(--ink-soft); }
@media (min-width: 640px) { .hm-hero-copy > p { font-size: 1.25rem; } }
.hm-hero-cta { margin-top: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
@media (min-width: 640px) { .hm-hero-cta { flex-direction: row; } }
.hm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--brand-aa); color: #fff; font-weight: 600; font-size: 15px; line-height: 1.4;
  padding: 14px 32px; border-radius: 12px; transition: background 0.15s;
}
.hm-btn:hover { background: var(--brand-deep); color: #fff; text-decoration: none; }
.hm-btn svg { width: 16px; height: 16px; }
.hm-hero-cta .hm-btn { width: 100%; }
@media (min-width: 640px) { .hm-hero-cta .hm-btn { width: auto; } }
.hm-hero-cta .ghost { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--ink-soft); transition: color 0.15s; }
.hm-hero-cta .ghost:hover { color: var(--ink); text-decoration: none; }
.hm-hero-cta .ghost svg { width: 16px; height: 16px; }
.home-page .hero-proof { margin-top: 40px; }
.home-page .hero-proof .avatars img { box-shadow: 0 0 0 2px #fff; border: 0; }
.home-page .hero-proof .stars { display: flex; gap: 2px; margin-bottom: 2px; color: var(--brand-aa-text); letter-spacing: 0; }
.home-page .hero-proof .stars svg { width: 14px; height: 14px; }
.home-page .hero-proof .txt strong { font-weight: 600; }

.home-page .hero-stage { margin: 64px auto 0; max-width: 72rem; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
@media (min-width: 640px) { .home-page .hero-stage { margin-top: 80px; border-radius: 24px; } }
.home-page .hero-photo { height: 560px; }
@media (min-width: 640px) { .home-page .hero-photo { height: 640px; } }
@media (min-width: 1024px) { .home-page .hero-photo { height: 680px; } }
.hero-flow { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }
@media (min-width: 1024px) { .hero-flow { display: block; } }
.hero-flow-dash { animation: heroFlowDash 2s linear infinite; }
@keyframes heroFlowDash { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -28; } }

.home-page .hs-card { z-index: 20; }
.home-page .hs-1 { top: 24px; left: 16px; right: auto; max-width: 74%; }
.home-page .hs-2 { top: 160px; right: 16px; bottom: auto; max-width: 70%; }
@media (min-width: 640px) {
  .home-page .hs-1 { top: 48px; left: 32px; max-width: 20rem; }
  .home-page .hs-2 { top: 128px; right: 32px; max-width: 20rem; }
}
@media (min-width: 1024px) {
  .home-page .hs-1 { top: 64px; left: 64px; }
  .home-page .hs-2 { top: 160px; right: 64px; }
}
.home-page .hs-step { gap: 8px; margin-bottom: 8px; font-size: 0.75rem; line-height: 1.375; text-shadow: 0 4px 3px rgba(0,0,0,0.07), 0 2px 2px rgba(0,0,0,0.06); }
.home-page .hs-2 .hs-step { justify-content: flex-end; }
.home-page .hs-step i { width: 20px; height: 20px; font-size: 10px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }
.home-page .hs-step .sm-br { display: none; }
@media (min-width: 640px) {
  .home-page .hs-step { font-size: 0.875rem; }
  .home-page .hs-2 .hs-step { justify-content: flex-start; }
  .home-page .hs-step i { width: 24px; height: 24px; font-size: 12px; }
  .home-page .hs-step .sm-br { display: inline; }
}
.home-page .hs-bubble {
  align-items: flex-start; gap: 10px; padding: 12px; border-radius: 12px;
  background: rgba(255,255,255,0.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}
.home-page .hs-bubble img { width: 28px; height: 28px; }
.home-page .hs-bubble-main { flex: 1; min-width: 0; }
.home-page .hs-bubble b { font-size: 11px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.home-page .hs-bubble p { font-size: 11px; line-height: 1.375; color: #374151; }
.home-page .hs-bubble .kw { padding: 2px 6px; border-radius: 6px; font-size: 10px; }
.home-page .hs-bubble .reply { margin-top: 6px; font-size: 10px; }
.home-page .hs-bubble .heart { width: 14px; height: 14px; color: #d1d5db; flex-shrink: 0; }
.home-page .hs-bubble.solo p { font-size: 11px; line-height: 1.375; color: #1f2937; margin: 0 0 12px; }
.home-page .hs-bubble.solo button { font-size: 11px; padding: 8px; border-radius: 8px; }
@media (min-width: 640px) {
  .home-page .hs-bubble { padding: 14px; }
  .home-page .hs-bubble.solo { padding: 16px; }
  .home-page .hs-bubble img { width: 32px; height: 32px; }
  .home-page .hs-bubble b { font-size: 12px; }
  .home-page .hs-bubble p, .home-page .hs-bubble.solo p { font-size: 14px; }
  .home-page .hs-bubble .kw { font-size: 12px; }
  .home-page .hs-bubble .reply { font-size: 11px; }
  .home-page .hs-bubble .heart { width: 16px; height: 16px; }
  .home-page .hs-bubble.solo button { font-size: 14px; padding: 10px; }
}
.home-page .hs-mini {
  z-index: 20; gap: 6px; padding: 6px 12px; font-size: 10px; color: #1f2937;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}
.home-page .hs-mini em { font-style: normal; color: var(--brand-aa-text); }
.home-page .hs-mini .ping { position: relative; display: flex; width: 8px; height: 8px; }
.home-page .hs-mini .ping i { position: absolute; inset: 0; border-radius: 50%; background: #4ade80; opacity: 0.75; animation: twPing 1s cubic-bezier(0,0,0.2,1) infinite; }
.home-page .hs-mini .ping b { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.home-page .hs-mini .emo { font-size: 0.875rem; line-height: 1; }
.home-page .hs-m1 { display: flex; bottom: 96px; left: 12px; }
.home-page .hs-m2 { display: flex; gap: 4px; bottom: 96px; right: 12px; border-radius: 16px; }
@media (min-width: 640px) {
  .home-page .hs-mini { font-size: 11px; padding: 8px 16px; gap: 8px; }
  .home-page .hs-m2 { padding: 8px 14px; gap: 6px; }
  .home-page .hs-mini .emo { font-size: 1.125rem; }
  .home-page .hs-m1 { bottom: 112px; left: 40px; }
  .home-page .hs-m2 { bottom: 144px; right: 40px; }
}
@media (min-width: 1024px) {
  .home-page .hs-m1 { bottom: 40px; left: 80px; }
  .home-page .hs-m2 { bottom: 64px; right: 112px; }
}
.home-page .hs-cta {
  z-index: 20; display: inline-flex; align-items: center; gap: 8px;
  bottom: 24px; font-size: 0.875rem; padding: 12px 24px;
}
.home-page .hs-cta svg { width: 16px; height: 16px; }
@media (min-width: 640px) {
  .home-page .hs-cta { bottom: 32px; font-size: 1rem; padding: 14px 32px; }
  .home-page .hs-cta svg { width: 20px; height: 20px; }
}
.home-page .hs-glow { filter: blur(64px); }
@keyframes twPing { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes twPulse { 50% { opacity: 0.5; } }

/* ---- stats bar ---- */
.home-page .mkt-stats .in { max-width: 80rem; padding: 40px 20px; }
@media (min-width: 640px) { .home-page .mkt-stats .in { padding-left: 32px; padding-right: 32px; } }
.home-page .mkt-stats .n { font-weight: 500; font-size: 1.875rem; line-height: 2.25rem; color: var(--ink); }

/* ---- shared section chrome ---- */
.hm-sec { padding: 80px 0; }
@media (min-width: 640px) { .hm-sec { padding: 112px 0; } }
.hm-sec.alt { background: var(--canvas); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hm-head { text-align: center; margin-bottom: 64px; }
.hm-head.tight { margin-bottom: 56px; }
.hm-kicker {
  margin: 0 0 12px; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600;
  color: var(--brand-aa-text); text-transform: uppercase; letter-spacing: 0.05em;
}
.home-page .hm-sec h2, .hf-head h2 { font-size: 1.875rem; line-height: 2.25rem; margin: 0; }
@media (min-width: 640px) { .home-page .hm-sec h2, .hf-head h2 { font-size: 2.25rem; line-height: 2.5rem; } }
.hm-head .sub { margin: 16px auto 0; max-width: 36rem; color: var(--ink-soft); line-height: 1.5; }

/* ---- how it works ---- */
.hiw-grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .hiw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-page .hiw-card { border-radius: 16px; padding: 32px; }
.home-page .hiw-card .num { font-weight: 500; font-size: 2.25rem; line-height: 2.5rem; color: #f472b6; }
.home-page .hiw-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; line-height: 1.75rem; margin: 16px 0 8px; }
.home-page .hiw-card p { line-height: 1.625; }

/* ---- features: scroll-pinned showcase ---- */
.hf { position: relative; background: var(--canvas); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hf-pin { padding: 80px 0; overflow: hidden; }
@media (min-width: 640px) { .hf-pin { padding: 112px 0; } }
.hf-in { width: 100%; }
.hf-head { text-align: center; margin-bottom: 40px; }
.hf-head .hm-kicker { margin-bottom: 12px; }
.hf-head .sub { margin: 16px auto 0; max-width: 36rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--ink-soft); }
.hf-grid { display: grid; gap: 32px; }
.hf-list > * + * { margin-top: 12px; }
.hf-item {
  display: block; width: 100%; text-align: left; cursor: pointer; font-family: inherit; color: inherit;
  border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,0.6);
  padding: 20px; transition: all 0.3s;
}
@media (min-width: 640px) { .hf-item { padding: 24px; } }
.hf-item:hover { border-color: #d1d5db; background: #fff; }
.hf-item.on {
  border-color: var(--brand); background: #fff;
  box-shadow: 0 10px 15px -3px rgba(225, 29, 116,0.05), 0 4px 6px -4px rgba(225, 29, 116,0.05);
}
.hf-row { display: flex; align-items: flex-start; gap: 16px; }
.hf-ico {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border: 1px solid #fbcfe8; background: var(--brand-tint); color: var(--brand-aa-text); transition: all 0.15s;
}
.hf-ico svg { width: 20px; height: 20px; }
.hf-item.on .hf-ico { background: var(--brand-aa); border-color: var(--brand); color: #fff; }
.hf-body { display: block; flex: 1; min-width: 0; }
.hf-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.5rem; color: var(--ink); margin: 0; }
.hf-more { display: none; }
.hf-item.on .hf-more { display: block; }
.hf-desc { display: block; margin-top: 8px; font-size: 0.875rem; line-height: 1.625; color: var(--ink-soft); }
.hf-mob {
  position: relative; display: block; margin-top: 16px; min-height: 380px; overflow: hidden;
  border-radius: 16px; border: 1px solid #1f2937;
  background: linear-gradient(to bottom right, #111827, #1f2937, #111827);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}
.hf-mob-in {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; min-height: 380px; animation: fsIn 0.5s both;
}
.hf-glow { position: absolute; display: block; border-radius: 50%; filter: blur(64px); pointer-events: none; }
.hf-mob .hf-glow { width: 192px; height: 192px; }
.hf-mob .hf-glow.a { top: -64px; left: -64px; background: rgba(225, 29, 116,0.3); }
.hf-mob .hf-glow.b { bottom: -64px; right: -64px; background: rgba(59,130,246,0.2); }
.hf-prog { display: block; margin-top: 16px; height: 4px; width: 100%; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.hf-prog i { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 999px; transition: width 50ms linear; }
.hf-stage-col { display: none; }
.hf-stage {
  position: relative; height: 60vh; max-height: 600px; overflow: hidden; border-radius: 24px;
  background-color: #111827;
  background-image: linear-gradient(to bottom right, #111827, #1f2937, #111827); border: 1px solid #1f2937;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.hf-stage .hf-glow { width: 256px; height: 256px; }
.hf-stage .hf-glow.a { top: -80px; left: -80px; background: rgba(225, 29, 116,0.3); }
.hf-stage .hf-glow.b { bottom: -80px; right: -80px; background: rgba(59,130,246,0.2); }
.hf-scene { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 32px; }
/* The first scene paints instantly (it is in view at load and must not start at
   opacity 0); switches after that fade in once .hf-anim is set by the script. */
.hf-scene.on { display: flex; }
.hf-anim .hf-scene.on { animation: fsIn 0.5s both; }
@keyframes fsIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@media (min-width: 1024px) {
  .hf { height: 600vh; }
  .hf-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding: 0; }
  .hf-head { margin-bottom: 24px; }
  .hf-head .hm-kicker { margin-bottom: 8px; }
  .hf-head h2 { font-size: 1.875rem; line-height: 2.25rem; }
  .hf-head .sub { margin-top: 8px; }
  .hf-grid { grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
  .hf-list > * + * { margin-top: 8px; }
  .hf-item { padding: 16px; }
  .hf-row { gap: 12px; }
  .hf-ico { width: 36px; height: 36px; }
  .hf-ico svg { width: 18px; height: 18px; }
  .hf-body h3 { font-size: 15px; }
  .hf-desc { margin-top: 6px; font-size: 13px; }
  .hf-mob { display: none; }
  .hf-prog { margin-top: 10px; }
  .hf-stage-col { display: block; }
}
@media (min-width: 1280px) { .hf-head h2 { font-size: 2.25rem; line-height: 2.5rem; } }

/* feature scenes (Laravel partials/feature-scene) */
.fsc { width: 100%; color: #fff; text-align: left; }
.fsc p { margin: 0; }
.fsc-xs { max-width: 20rem; }
.fsc-sm { max-width: 24rem; }
.fsc-tc { text-align: center; }
.fsc-s2 > * + * { margin-top: 8px; }
.fsc-s3 > * + * { margin-top: 12px; }
.fsc-s4 > * + * { margin-top: 16px; }
.fsc-s5 > * + * { margin-top: 20px; }
.fsc-s6 > * + * { margin-top: 24px; }
.fsc-s3 > .fsc-mt6 { margin-top: 24px; }
.fsc-glass {
  display: block; background: rgba(255,255,255,0.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2); border-radius: 16px; padding: 16px;
}
.fsc-cap { font-size: 0.75rem; line-height: 1rem; color: rgba(255,255,255,0.6); margin-bottom: 4px !important; }
.fsc-dm .fsc-cap { color: rgba(255,255,255,0.8); }
.fsc-msg { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.fsc-center { display: flex; justify-content: center; }
.fsc-bolt-wrap { position: relative; }
.fsc-bolt { width: 56px; height: 56px; border-radius: 50%; background: var(--brand); display: flex; align-items: center; justify-content: center; }
.fsc-bolt svg { width: 28px; height: 28px; color: #fff; }
.fsc-bolt-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #f472b6; }
.fsc-dm { display: block; background: var(--brand-aa); color: #fff; border-radius: 16px; padding: 16px; }
.fsc-dm.tl { border-top-left-radius: 6px; }
.fsc-big { font-family: var(--font-display); font-weight: 500; font-size: 2.25rem; line-height: 2.5rem; color: #fff; }
.fsc-big span { font-size: 1.25rem; color: rgba(255,255,255,0.6); }
@media (min-width: 640px) { .fsc-big { font-size: 3rem; line-height: 1; } }
.fsc-lbl { margin-top: 4px !important; font-size: 0.75rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.05em; }
.fsc-row {
  display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 12px;
  background: rgba(255,255,255,0.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
}
.fsc-row img { width: 24px; height: 24px; border-radius: 50%; }
.fsc-row p { flex: 1; font-size: 0.875rem; line-height: 1.25rem; color: #fff; }
.fsc-row b { font-weight: 600; }
.fsc-row.dim { opacity: 0.7; }
.fsc-row.dim p { color: rgba(255,255,255,0.7); }
.fsc-row.dim b { color: rgba(255,255,255,0.9); }
.fsc-kw { background: rgba(225, 29, 116,0.3); color: #fbcfe8; padding: 0 6px; border-radius: 4px; border: 1px solid rgba(251,146,60,0.5); }
.fsc-ok { color: #4ade80; font-size: 1.125rem; }
.fsc-no { color: #6b7280; font-size: 0.875rem; }
.fsc-panel { display: block; background: rgba(31,41,55,0.8); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 16px; }
.fsc-lbl11 { font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px !important; }
.fsc-trig { display: flex; align-items: center; gap: 8px; }
.fsc-trig code {
  background: rgba(225, 29, 116,0.2); border: 1px solid rgba(251,146,60,0.4); color: #fbcfe8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875rem; padding: 6px 12px; border-radius: 8px;
}
.fsc-trig span { font-size: 0.75rem; color: rgba(255,255,255,0.4); }
.fsc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875rem; line-height: 1.625; color: rgba(255,255,255,0.9); }
.fsc-var { display: inline-block; background: rgba(225, 29, 116,0.3); color: #fbcfe8; border: 1px solid rgba(251,146,60,0.4); padding: 2px 6px; border-radius: 4px; }
.fsc-var.blue { background: rgba(59,130,246,0.3); color: #bfdbfe; border-color: rgba(96,165,250,0.4); }
.fsc-down { width: 24px; height: 24px; color: rgba(255,255,255,0.4); }
.fsc-shield-wrap { position: relative; display: inline-block; }
.fsc-shield {
  width: 112px; height: 112px; margin: 0 auto; border-radius: 50%;
  background: linear-gradient(to bottom right, #4ade80, #059669);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.fsc-shield svg { width: 56px; height: 56px; color: #fff; }
@media (min-width: 640px) { .fsc-shield { width: 128px; height: 128px; } .fsc-shield svg { width: 64px; height: 64px; } }
.fsc-shield-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(74,222,128,0.4); }
.fsc-badges { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fsc-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
}
.fsc-badge .live { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; animation: twPulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
.fsc-badge svg { width: 12px; height: 12px; color: #4ade80; }
.fsc-badge p { font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: #fff; }
.fsc-chart {
  background: rgba(31,41,55,0.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 20px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.fsc-chart-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.fsc-lbl10 { font-size: 10px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.05em; }
.fsc-num { font-family: var(--font-display); font-weight: 500; font-size: 1.875rem; line-height: 2.25rem; color: #fff; }
.fsc-up { font-size: 0.75rem; font-weight: 600; background: rgba(34,197,94,0.2); color: #86efac; border: 1px solid rgba(74,222,128,0.3); padding: 4px 8px; border-radius: 999px; }
.fsc-bars { display: flex; align-items: flex-end; gap: 6px; height: 128px; }
.fsc-bars .col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.fsc-bars .feat-bar { height: var(--h, 50%); background: linear-gradient(to top, #e11d74, #f472b6); border-radius: 6px; }
.fsc-kpis { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.fsc-kpis div { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 8px; }
.fsc-kpis p { font-size: 10px; color: rgba(255,255,255,0.5); }
.fsc-kpis b { font-size: 0.875rem; font-weight: 600; color: #fff; }
.fsc-dial { position: relative; margin: 0 auto; width: 192px; height: 192px; }
.fsc-dial .r1 { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,0.1); }
.fsc-dial .r2 { position: absolute; inset: 8px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.05); }
.fsc-dial .sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, #e11d74 0deg, rgba(225, 29, 116,0.1) 270deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 60%, black 62%); mask: radial-gradient(circle, transparent 60%, black 62%);
}
.fsc-dial .mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fsc-dial .big { font-family: var(--font-display); font-weight: 500; font-size: 3rem; line-height: 1; color: #fff; }
.fsc-dial .lbl { margin-top: 4px !important; font-size: 10px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.1em; }
.fsc-dial .dot {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%;
  background: #f472b6; box-shadow: 0 10px 15px -3px rgba(225, 29, 116,0.5), 0 4px 6px -4px rgba(225, 29, 116,0.5);
}
.fsc-tz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 0.75rem; }
.fsc-tz div { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 8px 0; }
.fsc-tz p { font-size: 10px; color: rgba(255,255,255,0.5); }
.fsc-tz b { display: block; font-weight: 600; color: #fff; }

@keyframes featSlideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes featSlideInDelay { 0%, 30% { opacity: 0; transform: translateX(12px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes featPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes featRing { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2); opacity: 0; } }
@keyframes featCount { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes featHighlight { 0%, 100% { background-color: rgba(225, 29, 116,0.3); } 50% { background-color: rgba(225, 29, 116,0.55); } }
@keyframes featCheckPop { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes featVarPop { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } }
@keyframes featArrowBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes featShield { 0% { transform: scale(0.85) rotate(-8deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes featRingSlow { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes featBadgePop { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes featBarGrow { from { height: 0; } to { height: var(--h, 50%); } }
@keyframes featClockRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes featClockDot { from { transform: translateX(-50%) rotate(0deg) translateY(0); } to { transform: translateX(-50%) rotate(360deg) translateY(0); } }
@keyframes featTz { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
.feat-slide-in { animation: featSlideIn 0.6s ease-out both; }
.feat-slide-in-delay { animation: featSlideInDelay 1.2s ease-out both; }
.feat-pulse { animation: featPulse 1.4s ease-in-out 0.5s infinite; }
.feat-ring { animation: featRing 1.8s ease-out 0.5s infinite; }
.feat-count { animation: featCount 0.6s ease-out 0.8s both; }
.feat-highlight { animation: featHighlight 2s ease-in-out 0.4s infinite; }
.feat-highlight-2 { animation-delay: 1s; }
.feat-check { display: inline-block; animation: featCheckPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both; }
.feat-check-2 { animation-delay: 1.6s; }
.feat-var { animation: featVarPop 0.5s ease-out 0.4s both; }
.feat-var-2 { animation-delay: 0.7s; }
.feat-arrow-bounce { animation: featArrowBounce 1.4s ease-in-out 0.8s infinite; }
.feat-shield { animation: featShield 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; transform-origin: center; }
.feat-ring-slow { animation: featRingSlow 2.5s ease-out 0.6s infinite; }
.feat-badge-pop { animation: featBadgePop 0.5s ease-out 0.4s both; }
.feat-badge-pop-2 { animation-delay: 0.6s; }
.feat-badge-pop-3 { animation-delay: 0.8s; }
.feat-bar { animation: featBarGrow 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.fsc-bars .col:nth-child(2) .feat-bar { animation-delay: 80ms; }
.fsc-bars .col:nth-child(3) .feat-bar { animation-delay: 160ms; }
.fsc-bars .col:nth-child(4) .feat-bar { animation-delay: 240ms; }
.fsc-bars .col:nth-child(5) .feat-bar { animation-delay: 320ms; }
.fsc-bars .col:nth-child(6) .feat-bar { animation-delay: 400ms; }
.fsc-bars .col:nth-child(7) .feat-bar { animation-delay: 480ms; }
.feat-clock-rotate { animation: featClockRotate 6s linear infinite; }
.feat-clock-dot { animation: featClockDot 6s linear infinite; transform-origin: 50% 96px; }
.feat-tz { animation: featTz 0.5s ease-out 0.3s both; }
.feat-tz-2 { animation-delay: 0.5s; }
.feat-tz-3 { animation-delay: 0.7s; }
@media (prefers-reduced-motion: reduce) {
  [class^="feat-"], [class*=" feat-"], .hero-flow-dash, .uc-bounce { animation: none !important; }
}

/* ---- use cases ---- */
.home-page .uc-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 768px) { .home-page .uc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .home-page .uc-grid, .home-page .tst-grid { gap: 24px; } }
.home-page .uc-card:hover, .home-page .tst-card:hover {
  box-shadow: 0 20px 25px -5px rgba(225, 29, 116,0.05), 0 8px 10px -6px rgba(225, 29, 116,0.05);
}
.home-page .uc-mock { background: linear-gradient(to bottom right, var(--canvas), #fff); border-bottom-color: var(--line-soft); }
.home-page .uc-comment img { box-shadow: 0 0 0 2px #fff, 0 1px 2px rgba(0,0,0,0.05); }
.home-page .uc-comment p { font-size: 13px; line-height: 1.375; }
.home-page .uc-comment b { font-weight: 600; }
.home-page .uc-comment .kw { font-size: 11px; padding: 2px 6px; border-radius: 4px; }
.home-page .uc-divider { display: flex; align-items: center; gap: 8px; padding: 12px 0 12px 42px; letter-spacing: normal; }
.home-page .uc-divider span { font-size: 9px; text-transform: uppercase; letter-spacing: 0.2em; color: #6b7280; font-weight: 600; }
.home-page .uc-divider svg { width: 12px; height: 12px; color: var(--brand-aa-text); }
.uc-bounce { animation: ucBounce 1.6s ease-in-out infinite; }
@keyframes ucBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.home-page .uc-dm {
  border-radius: 2px 16px 16px 16px; padding: 12px 16px;
  box-shadow: 0 10px 15px -3px rgba(225, 29, 116,0.25), 0 4px 6px -4px rgba(225, 29, 116,0.25);
}
.home-page .uc-dm p { font-size: 13px; line-height: 1.375; margin: 0 0 8px; }
.home-page .uc-dm .emo { margin-right: 4px; }
.home-page .uc-dm .cta {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #fff;
  background: rgba(0,0,0,0.16); border: 1px solid rgba(255,255,255,0.35); border-radius: 6px; padding: 4px 10px;
}
.home-page .uc-dm .cta svg { width: 12px; height: 12px; }
.home-page .uc-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; line-height: 1.75rem; margin: 0 0 8px; }
.home-page .uc-body > p { line-height: 1.625; }
.home-page .uc-items span {
  display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; line-height: 1rem;
  color: #be185d; background: var(--brand-tint); border: 1px solid #fce7f3; padding: 4px 10px;
}
.home-page .uc-items svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ---- testimonials ---- */
.home-page .tst-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 768px) { .home-page .tst-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-page .tst-card .wash { border-top-right-radius: 24px; }
.home-page .tst-card .stars { position: relative; display: flex; gap: 2px; margin-bottom: 16px; color: var(--brand-aa-text); letter-spacing: 0; }
.home-page .tst-card .stars svg { width: 16px; height: 16px; }
.home-page .tst-card blockquote .q { left: -4px; top: -16px; font-size: 3.75rem; line-height: 1; font-weight: 500; }
.home-page .tst-card blockquote p { font-size: 15px; line-height: 1.625; }
.home-page .tst-card .metric {
  background: linear-gradient(to bottom right, var(--brand-tint), rgba(252,231,243,0.6));
  border: 1px solid rgba(254,215,170,0.6); padding: 10px 16px;
}
.home-page .tst-card .metric b { font-size: 1.5rem; font-weight: 700; }
@media (min-width: 1024px) { .home-page .tst-card .metric b { font-size: 1.875rem; } }
.home-page .tst-card .metric span { color: rgba(194,65,12,0.8); }
.home-page .tst-card .metric svg { width: 14px; height: 14px; color: var(--brand-aa-text); margin-left: 2px; align-self: center; }
.home-page .tst-card figcaption img { box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); }
.home-page .tst-card figcaption > div { min-width: 0; }
.home-page .tst-card figcaption .n { display: flex; align-items: center; gap: 4px; color: var(--ink); }
.home-page .tst-card figcaption .n svg { width: 16px; height: 16px; color: var(--brand-aa-text); flex-shrink: 0; }

/* ---- FAQ ---- */
.hm-faq { position: relative; overflow: hidden; }
.hm-faq .amb { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 384px; height: 384px; border-radius: 50%; background: rgba(225, 29, 116,0.05); filter: blur(64px); pointer-events: none; }
.hm-faq .hm-in { position: relative; }
.home-page .faq-wrap { gap: 48px; }
@media (min-width: 1024px) { .home-page .faq-wrap { gap: 80px; } }
.home-page .faq-left { position: static; }
@media (min-width: 1024px) { .home-page .faq-left { position: sticky; top: 96px; } }
.home-page .faq-left h2 { line-height: 1.25; }
.home-page .faq-left .lead { margin: 16px 0 0; color: var(--ink-soft); line-height: 1.625; }
.home-page .faq-support { display: block; position: relative; overflow: hidden; margin-top: 32px; padding: 20px; }
.home-page .faq-support:hover { box-shadow: 0 10px 15px -3px rgba(225, 29, 116,0.05), 0 4px 6px -4px rgba(225, 29, 116,0.05); }
.home-page .faq-support .blob { position: absolute; top: -32px; right: -32px; width: 112px; height: 112px; border-radius: 50%; background: linear-gradient(to bottom right, rgba(225, 29, 116,0.1), transparent); pointer-events: none; }
.home-page .faq-support { display: flex; align-items: flex-start; gap: 16px; }
.home-page .faq-support .ic {
  position: relative; width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(to bottom right, var(--brand), var(--brand-deep)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 15px -3px rgba(225, 29, 116,0.2), 0 4px 6px -4px rgba(225, 29, 116,0.2);
}
.home-page .faq-support .ic svg { width: 20px; height: 20px; }
.home-page .faq-support .txt { position: relative; flex: 1; min-width: 0; }
.home-page .faq-support .t { display: block; font-family: var(--font-display); font-weight: 600; color: var(--ink); transition: color 0.15s; }
.home-page .faq-support:hover .t { color: var(--brand-aa-text); }
.home-page .faq-support .s { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--ink-soft); }
.home-page .faq-support .go { position: relative; width: 20px; height: 20px; margin-top: 4px; flex-shrink: 0; color: #6b7280; transition: all 0.15s; }
.home-page .faq-support:hover .go { color: var(--brand-aa-text); transform: translateX(2px); }
.home-page .faq-item.on { box-shadow: 0 20px 25px -5px rgba(225, 29, 116,0.05), 0 8px 10px -6px rgba(225, 29, 116,0.05); }
.home-page .faq-item > button { padding: 20px; gap: 16px; }
.home-page .faq-item .num { font-family: var(--font-display); font-size: 0.875rem; padding-top: 4px; flex-shrink: 0; }
.home-page .faq-item .q { font-size: 15px; line-height: 1.375; padding-right: 8px; }
.home-page .faq-item .plus { display: flex; align-items: center; justify-content: center; color: var(--ink-soft); }
.home-page .faq-item.on .plus { color: #fff; }
.home-page .faq-item .plus svg { width: 14px; height: 14px; }
.home-page .faq-item .a { padding: 0 20px 20px 60px; }
.home-page .faq-item .a p { line-height: 1.625; }
@media (min-width: 640px) {
  .home-page .faq-item > button { padding: 24px; }
  .home-page .faq-item .q { font-size: 1rem; }
  .home-page .faq-item .a { padding: 0 24px 24px 68px; }
}

/* ---- closing CTA ---- */
.hm-cta { background: #111827; padding: 80px 0; }
@media (min-width: 640px) { .hm-cta { padding: 112px 0; } }
.hm-cta .in { max-width: 42rem; margin: 0 auto; padding: 0 20px; text-align: center; }
@media (min-width: 640px) { .hm-cta .in { padding: 0 32px; } }
.home-page .hm-cta h2 { color: #fff; font-size: 1.875rem; line-height: 1.25; margin: 0; }
@media (min-width: 640px) { .home-page .hm-cta h2 { font-size: 2.25rem; } }
.hm-cta p { margin: 16px 0 0; color: #9ca3af; font-size: 1.125rem; line-height: 1.75rem; }
.hm-cta .hm-btn { margin-top: 32px; }

/* WCAG AA contrast (Lighthouse a11y). Brand-500 #e11d74 is only 2.8:1 against
   white, so filled CTAs and small orange text use --brand-aa (4.53:1); large
   display accents (>= 24px) use brand-600, which clears the 3:1 large-text bar. */
:root { --brand-aa: #c8175f; --brand-aa-hover: #9d174d; --brand-aa-text: #be185d; }
.btn, .btn-primary, .hs-cta { background: var(--brand-aa); }
.btn:hover, .btn-primary:hover { background: var(--brand-aa-hover); }
.mkt-kicker { color: var(--brand-aa-text); }
.mkt-hero h1 span, .hm-hero-copy h1 span { color: var(--brand-deep); }
.hiw-card .num, .home-page .hiw-card .num { color: var(--brand-aa-text); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Marketing text-on-orange + small orange/gray text, lifted to AA. Decorative
   orange (icons, glows, borders) keeps brand-500. */
.mkt { --brand-aa-text: #be185d; --muted-aa: #6b7280; }
.hm-btn, .fsc-dm, .uc-dm, .uc-comment .kw, .mv-bubble .kw { background: var(--brand-aa); }
.hm-btn:hover { background: var(--brand-aa-hover); }
.uc-dm, .home-page .uc-dm { box-shadow: 0 10px 15px -3px rgba(207,74,12,0.25), 0 4px 6px -4px rgba(207,74,12,0.25); }
.fsc-dm .fsc-cap { color: #fff; }
.hm-kicker, .hs-bubble .kw, .home-page .hs-mini em, .faq-item.on .num { color: var(--brand-aa-text); }
.hs-bubble .reply, .faq-item .num { color: var(--muted-aa); }
.faq-item.on .num { color: var(--brand-aa-text); }

/* First feature scene renders final-state at load (visible content, no opacity-0
   start); entrance animations run only once the visitor switches features. */
#features:not(.hf-anim) :is(.feat-slide-in, .feat-slide-in-delay, .feat-count, .feat-check,
  .feat-var, .feat-shield, .feat-badge-pop, .feat-bar, .feat-tz) { animation: none; }

/* =====================================================================
   MARKETING HEADER + FOOTER (2026-09 redesign)
   Used only by templates/public/_marketing.html. Every selector is scoped to
   .mkt-* / .mm-* (mega menu) / .dr-* (mobile drawer), so the app shell
   (templates/base.html) is untouched. Contrast: filled buttons use
   --brand-aa with white text, small orange text uses --brand-aa-text,
   --brand is decorative only.
   ===================================================================== */
.mkt-skip {
  position: fixed; left: 16px; top: -64px; z-index: 100; padding: 10px 16px; border-radius: 10px;
  background: #111827; color: #fff; font-size: 0.875rem; font-weight: 600; transition: top 0.15s;
}
.mkt-skip:focus { top: 12px; color: #fff; text-decoration: none; }
body.mkt > main:focus { outline: none; }

/* ---- header bar ---- */
.mkt-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid transparent;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.mkt-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: rgba(17, 24, 39, 0.08);
  box-shadow: 0 10px 30px -22px rgba(17, 24, 39, 0.35);
}
.mkt-nav-in {
  position: relative; max-width: 80rem; margin: 0 auto; padding: 0 24px; height: 72px;
  display: flex; align-items: center; gap: 16px;
}
.mkt-logo {
  display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em;
  color: var(--ink); justify-self: start;
}
.mkt-logo:hover { color: var(--ink); text-decoration: none; }
.mkt-logo img.mark { width: 32px; height: 32px; }

.mkt-links { display: none; }
.mkt-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.mkt-menu > li { display: flex; align-items: center; height: 72px; }
.mkt-top {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px;
  border: 0; border-radius: 10px; background: none; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 0.925rem; font-weight: 500; color: #374151;
  transition: background-color 0.15s, color 0.15s;
}
.mkt-top:hover, .mkt-drop.open > .mkt-top { background: #f3f4f6; color: var(--ink); text-decoration: none; }
.mkt-top svg { width: 14px; height: 14px; color: #6b7280; transition: transform 0.2s; }
.mkt-drop.open > .mkt-top svg { transform: rotate(180deg); }
.mkt-top.mkt-ltd { color: var(--brand-aa-text); font-weight: 600; }
.mkt-top.mkt-ltd:hover { background: #fff7ed; color: #9a3412; }
.mkt-new {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
  background: #ffedd5; color: #9a3412; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1;
}

.mkt-cta { display: flex; align-items: center; gap: 8px; margin-left: auto; justify-self: end; }
.mkt-login {
  display: none; align-items: center; height: 40px; padding: 0 14px; border-radius: 10px;
  font-size: 0.925rem; font-weight: 500; color: #374151; white-space: nowrap;
}
.mkt-login:hover { background: #f3f4f6; color: var(--ink); text-decoration: none; }
.mkt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px;
  border-radius: 10px; background: var(--brand-aa); color: #fff; white-space: nowrap;
  font-size: 0.9rem; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px -10px rgba(207, 74, 12, 0.7);
  transition: background-color 0.15s, box-shadow 0.15s;
}
.mkt-btn:hover { background: var(--brand-aa-hover); color: #fff; text-decoration: none; }
.mkt-btn.lg { height: 52px; padding: 0 28px; border-radius: 12px; font-size: 1rem; }
.mkt-burger {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; color: #1f2937;
}
.mkt-burger svg { width: 22px; height: 22px; }

/* ---- desktop mega menus (positioned against .mkt-nav-in, centered) ---- */
.mkt-panel {
  position: absolute; top: 100%; left: 50%; z-index: 60; padding-top: 4px;
  width: min(600px, calc(100vw - 32px));
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
#mm-product { width: min(780px, calc(100vw - 32px)); }
.mkt-drop.open > .mkt-panel,
html:not(.js) .mkt-drop:is(:hover, :focus-within) > .mkt-panel {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}
.mkt-card {
  background: #fff; border: 1px solid rgba(17, 24, 39, 0.08); border-radius: 18px; overflow: hidden;
  box-shadow: 0 28px 56px -24px rgba(17, 24, 39, 0.28), 0 2px 6px rgba(17, 24, 39, 0.04);
}
.mm-main { padding: 18px 14px 14px; }
.mm-label, .mm-foot-l {
  margin: 0 10px 8px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: #6b7280;
}
.mm-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mm-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 12px; color: var(--ink); }
.mm-row:hover { background: var(--canvas); text-decoration: none; }
.mm-ico {
  flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px;
  background: #fff7ed; border: 1px solid #ffedd5; color: var(--brand-deep);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.mm-ico svg { width: 19px; height: 19px; }
.mm-row:hover .mm-ico { background: var(--brand-aa); border-color: var(--brand-aa); color: #fff; }
.mm-txt { display: flex; flex-direction: column; min-width: 0; }
.mm-t { font-size: 0.9rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.mm-d { margin-top: 2px; font-size: 0.8rem; line-height: 1.4; color: #6b7280; }
.mm-badge {
  display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px; vertical-align: 1px;
  background: #ffedd5; color: #9a3412; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.mm-split { display: grid; grid-template-columns: minmax(0, 1fr) 220px; }
.mm-promo {
  margin: 14px 14px 14px 0; padding: 20px; border-radius: 14px; display: flex; flex-direction: column; gap: 8px;
  color: #fff; background: radial-gradient(120% 80% at 100% 0%, rgba(249, 115, 22, 0.45), transparent 60%), #111827;
}
.mm-promo:hover { color: #fff; text-decoration: none; }
.mm-pill {
  align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.14);
  color: #fed7aa; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.mm-promo-t { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; line-height: 1.15; }
.mm-promo-d { font-size: 0.82rem; line-height: 1.45; color: #d1d5db; }
.mm-promo-go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: #fdba74; }
.mm-promo-go svg { width: 15px; height: 15px; transition: transform 0.15s; }
.mm-promo:hover .mm-promo-go svg { transform: translateX(3px); }
.mm-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 10px 14px;
  background: var(--canvas); border-top: 1px solid var(--line-soft); font-size: 0.82rem;
}
.mm-foot .mm-foot-l { margin: 0 6px 0 10px; }
.mm-foot a { padding: 6px 10px; border-radius: 8px; font-weight: 500; color: #374151; }
.mm-foot a:hover { background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px var(--line); }
.mm-foot a.mm-all { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--brand-aa-text); }
.mm-all svg { width: 14px; height: 14px; }

/* ---- mobile drawer ---- */
.mkt-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(17, 24, 39, 0.45); }
.mkt-scrim[hidden] { display: none; }
.mkt-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: min(100%, 420px); height: 100dvh;
  display: flex; flex-direction: column; background: #fff;
  box-shadow: -24px 0 48px -24px rgba(17, 24, 39, 0.35);
  transform: translateX(100%); visibility: hidden;
  transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.26s;
}
.mkt-drawer.open { transform: none; visibility: visible; transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
html.mkt-lock, html.mkt-lock body { overflow: hidden; }
.dr-head {
  flex-shrink: 0; height: 72px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px 0 20px; border-bottom: 1px solid var(--line-soft);
}
.dr-close {
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; color: #1f2937;
}
.dr-close svg { width: 22px; height: 22px; }
.dr-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 16px; }
.dr-acc, .dr-link {
  width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 4px; border: 0; border-bottom: 1px solid var(--line-soft); background: none; cursor: pointer;
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--ink); text-align: left;
}
.dr-link:hover { color: var(--ink); text-decoration: none; }
.dr-acc svg { width: 18px; height: 18px; color: #6b7280; transition: transform 0.2s; }
.dr-acc[aria-expanded="true"] svg { transform: rotate(180deg); }
.dr-link.dr-ltd { justify-content: flex-start; color: var(--brand-aa-text); }
.dr-list { list-style: none; margin: 0; padding: 8px 0 14px; border-bottom: 1px solid var(--line-soft); }
.dr-list[hidden] { display: none; }
.dr-row {
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px; border-radius: 12px;
  font-size: 1rem; font-weight: 500; color: #1f2937;
}
.dr-row:hover { background: var(--canvas); color: var(--ink); text-decoration: none; }
.dr-row .mm-ico { width: 36px; height: 36px; }
.dr-row.dr-all { gap: 8px; font-weight: 600; color: var(--brand-aa-text); }
.dr-all svg { width: 16px; height: 16px; }
.dr-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 6px 0; }
.dr-sub-l { width: 100%; margin-bottom: 2px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7280; }
.dr-sub a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 0.9rem; font-weight: 500; color: #374151;
}
.dr-sub a:hover { border-color: #9ca3af; color: var(--ink); text-decoration: none; }
.dr-cta {
  flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; background: #fff;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft);
}
.dr-cta .mkt-btn { height: 52px; border-radius: 12px; font-size: 1rem; }
.dr-login {
  display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 12px;
  border: 1px solid var(--line); font-weight: 600; color: var(--ink);
}
.dr-login:hover { background: var(--canvas); color: var(--ink); text-decoration: none; }

@media (max-width: 1023.98px) {
  .mkt-panel { display: none; }
}
@media (max-width: 400px) {
  .mkt-nav-in { padding: 0 16px; gap: 10px; }
  .mkt-cta .mkt-btn { padding: 0 14px; }
}
@media (min-width: 1024px) {
  .mkt-nav-in { display: grid; grid-template-columns: 1fr auto 1fr; }
  .mkt-links { display: block; }
  .mkt-login { display: inline-flex; }
  .mkt-burger, .mkt-drawer, .mkt-scrim { display: none !important; }
}

/* ---- footer: dark, CTA band on top ---- */
.mkt-foot {
  position: relative; overflow: hidden; background: #0b0d12; color: #9ca3af;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.mkt-foot::before {
  content: ""; position: absolute; top: -260px; left: 50%; width: 960px; height: 520px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(249, 115, 22, 0.13), transparent); pointer-events: none;
}
.mkt-foot-wrap { position: relative; max-width: 80rem; margin: 0 auto; padding: 0 24px; }
.mkt-foot :focus-visible { outline-color: #f9a8d4; }
.mkt-nav :focus-visible, .mkt-drawer :focus-visible, .mkt-panel :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mkt-fcta {
  margin-top: 64px; padding: 40px 44px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(120deg, rgba(249, 115, 22, 0.16), rgba(255, 255, 255, 0.02) 50%), #12151c;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px;
}
/* Pages that already end in their own CTA band don't need a second one. */
body.mkt:has(main section:is(.mkt-band, .hm-cta):last-of-type) .mkt-fcta { display: none; }
.mkt-fcta-t {
  margin: 0; max-width: 34rem; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(1.55rem, 3vw, 2.15rem); line-height: 1.12; color: #fff;
}
.mkt-fcta-d { margin: 10px 0 0; font-size: 0.95rem; color: #9ca3af; }
.mkt-fcta-go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.mkt-fcta-ltd { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 0.92rem; font-weight: 600; color: #fdba74; }
.mkt-fcta-ltd:hover { color: #fed7aa; text-decoration: none; }
.mkt-fcta-ltd svg { width: 16px; height: 16px; transition: transform 0.15s; }
.mkt-fcta-ltd:hover svg { transform: translateX(3px); }

.mkt-foot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; padding: 64px 0 48px; }
.mkt-foot-brand .mkt-logo, .mkt-foot-brand .mkt-logo:hover { color: #fff; }
.mkt-foot-brand p { margin: 16px 0 0; max-width: 22rem; font-size: 0.9rem; line-height: 1.65; color: #9ca3af; }
.mkt-foot-brand .mkt-trust { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; line-height: 1.4; color: #d1d5db; }
.mkt-trust svg { width: 18px; height: 18px; flex-shrink: 0; color: #fb923c; }
.mkt-social {
  margin-top: 20px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12); color: #d1d5db; transition: background-color 0.15s, color 0.15s;
}
.mkt-social:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.mkt-social svg { width: 20px; height: 20px; }
.mkt-foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
.mkt-foot .fh { margin: 0 0 12px; font-size: 0.85rem; font-weight: 600; color: #f3f4f6; }
.mkt-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mkt-foot-col a { display: inline-flex; align-items: center; min-height: 32px; font-size: 0.9rem; line-height: 1.3; color: #9ca3af; transition: color 0.15s; }
.mkt-foot-col a:hover { color: #fff; text-decoration: none; }
.mkt-foot-bar {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 24px 0 32px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.85rem;
}
.mkt-foot-bar p { margin: 0; color: #9ca3af; }
.mkt-foot-bar a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: #d1d5db; }
.mkt-foot-bar a:hover { color: #fff; text-decoration: none; }
.mkt-foot-bar svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .mkt-foot-wrap { padding: 0 16px; }
  .mkt-fcta { margin-top: 48px; padding: 28px 22px; border-radius: 20px; }
  .mkt-fcta-go { width: 100%; }
  .mkt-fcta-go .mkt-btn { width: 100%; }
}
@media (min-width: 768px) {
  .mkt-foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mkt-foot-bar { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 1200px) {
  .mkt-foot-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 4fr); gap: 56px; }
  .mkt-foot-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .mkt-nav, .mkt-panel, .mkt-drawer, .mkt-top svg, .dr-acc svg, .mm-ico, .mkt-skip { transition: none !important; }
}
/* ================= end MARKETING HEADER + FOOTER ================= */
/* =====================================================================
   HOME PAGE v2 (2026-09 redesign, public/home.html with hv2=True).
   Every selector is scoped to body.hv2 and every class is prefixed "h-", so
   nothing here can leak into other pages or collide with .btn/.wrap etc.
   The same block re-tints the shared marketing header/footer pink on the
   home page only (other pages keep the orange brand until rolled out).
   ===================================================================== */
body.hv2 {
  background: #fff; font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand: #e11d74; --brand-deep: #be185d; --brand-tint: #fdf2f8; --brand-line: #f9a8d4;
  --brand-aa: #c8175f; --brand-aa-hover: #9d174d; --brand-aa-text: #be185d;
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; --font-body: var(--font-display);
}
.hv2 .h-page { color: var(--text); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.hv2 .h-page :where(a) { color: inherit; text-decoration: none; }
.hv2 .h-page :where(a):hover { text-decoration: none; }
.hv2 .h-page :where(button) { font: inherit; cursor: pointer; }
.hv2 .h-page :focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 6px; }
html:has(body.hv2) { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) {
  html:has(body.hv2) { scroll-behavior: auto; }
  .hv2 .h-page *, .hv2 .h-page *::before { animation: none !important; transition: none !important; }
}
/* shared header/footer, home only */
.hv2 .mkt-logo { gap: 9px; font-size: 1.35rem; letter-spacing: -0.03em; }
.hv2 .mkt-logo .hv2-mark { width: 36px; height: 36px; flex-shrink: 0; color: #14121a; transition: transform 0.25s ease; }
.hv2 .mkt-logo:hover .hv2-mark { transform: rotate(-8deg) scale(1.05); }
.hv2 .hv2-wm { font-weight: 800; white-space: nowrap; color: #14121a; }
.hv2 .hv2-wm span { color: #e11d74; }
.hv2 .mkt-top.mkt-ltd:hover, .hv2 .mkt-new, .hv2 .mm-badge { background: #fdf2f8; color: #9d174d; }
.hv2 .mm-ico { background: #fdf2f8; border-color: #fce7f3; }
.hv2 .mm-promo { background: radial-gradient(120% 80% at 100% 0%, rgba(225, 29, 116, 0.45), transparent 60%), #14121a; }
.hv2 .mm-promo-go { color: #f9a8d4; }
.hv2 .mkt-btn { box-shadow: 0 4px 0 #9d174d; }
.hv2 .mkt-fcta { display: none; }
.hv2 .mkt-foot { background: #fff; color: #4a4553; border-top: 1px solid #f0eef3; }
.hv2 .mkt-foot::before { display: none; }
.hv2 .mkt-foot :focus-visible { outline-color: #e11d74; }
.hv2 .mkt-foot-brand .mkt-logo, .hv2 .mkt-foot-brand .mkt-logo:hover { color: #14121a; }
.hv2 .mkt-foot-brand p { color: #4a4553; }
.hv2 .mkt-foot-brand .mkt-trust { color: #14121a; }
.hv2 .mkt-trust svg { color: #e11d74; }
.hv2 .mkt-social { border-color: #ece8f0; color: #4a4553; }
.hv2 .mkt-social:hover { background: #fdf2f8; color: #be185d; }
.hv2 .mkt-foot .fh { color: #14121a; font-weight: 800; }
.hv2 .mkt-foot-col a { color: #4a4553; }
.hv2 .mkt-foot-col a:hover { color: #be185d; }
.hv2 .mkt-foot-bar { border-top-color: #f0eef3; }
.hv2 .mkt-foot-bar p, .hv2 .mkt-foot-bar a { color: #6b6574; }
.hv2 .mkt-foot-bar a:hover { color: #be185d; }
.hv2{color-scheme: light;
  --pink:#e11d74; --pink-deep:#9d174d; --pink-mid:#f0529a; --pink-soft:#fdf2f8; --pink-tint:#fce7f3; --pink-ink:#be185d;
  --ink:#14121a; --ink-2:#1f1c27; --ink-line:#2d2937;
  --text:#14121a; --muted:#4a4553; --faint:#6b6574;
  --bg:#ffffff; --bg-2:#f7f5f9; --line:#ece8f0;
  --yellow:#fcd34d; --amber:#fbbf24; --marker:#fde68a;
  --green:#16a34a; --green-soft:#dcfce7; --blue:#3b82f6; --violet:#7c3aed; --orange:#f97316;
  --dm-me:#7c3aed; --link:#2563eb;
  --r-lg:28px; --r-md:18px; --r-sm:12px;
  --wrap:1240px;
  --font:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;}
.hv2 .h-page :where(h1,h2,h3){text-wrap:balance;margin:0;letter-spacing:-.04em;line-height:1.05;font-weight:800}
.hv2 .h-page :where(p){margin:0}
.hv2 .h-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:24px}
.hv2 .h-section{padding-block:104px}
.hv2 .h-center{text-align:center}
.hv2 .h-eyebrow{display:inline-block;background:var(--pink-tint);color:var(--pink-ink);font-size:14px;font-weight:700;padding:7px 15px;border-radius:999px}
.hv2 .h-h2{font-size:clamp(34px,5vw,58px)}
.hv2 .h-hl{color:var(--pink)}
.hv2 .h-mark{background:var(--marker);padding:0 .18em;border-radius:.2em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hv2 .h-lead{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:620px}
.hv2 .h-head{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;margin-bottom:52px}
.hv2 .h-head .h-lead{margin-inline:auto}
.hv2 .h-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hv2 .h-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:16px;padding:14px 22px;border-radius:14px;border:2px solid transparent;transition:transform .15s ease, box-shadow .15s ease;white-space:nowrap}
.hv2 .h-btn:active{transform:translateY(3px)}
.hv2 .h-btn-lg{font-size:18px;padding:18px 32px}
.hv2 .h-btn-pink{background:var(--pink);color:#fff;box-shadow:0 5px 0 var(--pink-deep)}
.hv2 .h-btn-pink:active{box-shadow:0 2px 0 var(--pink-deep)}
.hv2 .h-btn-ink{background:var(--ink);color:#fff;box-shadow:0 5px 0 #4a4553}
.hv2 .h-btn-white{background:#fff;color:var(--ink);box-shadow:0 5px 0 var(--pink-deep)}
.hv2 .h-btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.hv2 .h-btn-line-w{border-color:#fff;color:#fff;background:transparent}
.hv2 .h-btn-line-y{border-color:var(--amber);color:var(--amber);background:transparent}
.hv2 .h-hero{position:relative;overflow:hidden;padding-top:56px}
.hv2 .h-hero-copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.hv2 .h-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:1px solid var(--line);border-radius:999px;box-shadow:0 6px 18px rgba(20,18,26,.06);font-size:14px;font-weight:600;background:#fff}
.hv2 .h-hero h1{font-size:clamp(40px,6.4vw,80px);letter-spacing:-.045em;line-height:1.02}
.hv2 .h-hero .h-lead{font-size:clamp(17px,1.8vw,21px);max-width:640px}
.hv2 .h-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.hv2 .h-micro{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-size:14px;font-weight:600;color:var(--muted)}
.hv2 .h-micro span{display:inline-flex;gap:6px;align-items:center}
.hv2 .h-deco-sq{position:absolute;left:6%;top:90px;width:70px;height:70px;border-radius:20px;background:var(--yellow);transform:rotate(-12deg)}
.hv2 .h-deco-ci{position:absolute;right:8%;top:130px;width:48px;height:48px;border-radius:50%;background:#c4b5fd}
.hv2 .h-stage{position:relative;height:520px;margin-top:56px}
.hv2 .h-arc1{position:absolute;left:-6%;right:-6%;top:80px;height:900px;border-radius:50%;background:#f472b6}
.hv2 .h-arc2{position:absolute;left:10%;right:10%;top:170px;height:900px;border-radius:50%;background:var(--pink)}
.hv2 .h-phone{position:absolute;background:var(--ink);border-radius:42px;padding:10px;box-shadow:0 30px 60px rgba(20,18,26,.3)}
.hv2 .h-screen{width:100%;height:100%;background:#fff;border-radius:32px;overflow:hidden;display:flex;flex-direction:column;font-size:13px;line-height:1.45}
.hv2 .h-notch{height:28px;display:flex;justify-content:center;padding-top:8px}
.hv2 .h-notch i{width:90px;height:22px;background:var(--ink);border-radius:999px}
.hv2 .h-chat-head{padding:10px 16px;display:flex;gap:10px;align-items:center;border-bottom:1px solid #efefef;font-weight:700;font-size:14px}
.hv2 .h-chat-head small{display:block;font-weight:500;color:#8a8494;font-size:11px}
.hv2 .h-av{width:34px;height:34px;border-radius:50%;flex-shrink:0;object-fit:cover;display:block}
.hv2 .h-msgs{padding:14px;display:flex;flex-direction:column;gap:10px}
.hv2 .h-me{align-self:flex-end;background:var(--dm-me);color:#fff;padding:8px 12px;border-radius:16px 16px 4px 16px;max-width:85%}
.hv2 .h-them{align-self:flex-start;background:#f3f1f6;padding:10px 12px;border-radius:16px 16px 16px 4px;max-width:88%}
.hv2 .h-dm-card{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.hv2 .h-dm-card .h-img{height:110px;background:#fb7185;padding:14px;color:#fff}
.hv2 .h-dm-card .h-tag{font-size:11px;font-weight:800;background:var(--yellow);color:var(--ink);display:inline-block;padding:3px 7px;border-radius:5px}
.hv2 .h-dm-card .h-big{font-size:32px;font-weight:800;margin-top:4px}
.hv2 .h-dm-card .h-txt{padding:10px 12px}
.hv2 .h-dm-btn{border-top:1px solid var(--line);text-align:center;padding:9px;font-weight:700;color:var(--link)}
.hv2 .h-ph-center{left:50%;margin-left:-135px;top:0;width:270px;height:540px;z-index:3}
.hv2 .h-ph-left{left:50%;margin-left:-395px;top:50px;width:245px;height:470px;transform:rotate(-9deg);z-index:2}
.hv2 .h-ph-right{left:50%;margin-left:150px;top:50px;width:245px;height:470px;transform:rotate(9deg);z-index:2}
.hv2 .h-chip{position:absolute;z-index:4;background:#fff;border-radius:18px;padding:12px 18px 12px 12px;display:flex;gap:12px;align-items:center;box-shadow:0 16px 36px rgba(20,18,26,.14)}
.hv2 .h-chip b{display:block;font-size:16px}
.hv2 .h-chip small{color:var(--faint);font-size:13px}
.hv2 .h-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.hv2 .h-c1{left:calc(50% - 600px);top:10px;transform:rotate(-4deg)}
.hv2 .h-c2{left:calc(50% - 560px);top:190px;transform:rotate(3deg)}
.hv2 .h-c3{left:calc(50% + 360px);top:0;transform:rotate(3deg)}
.hv2 .h-c4{left:calc(50% + 330px);top:190px;transform:rotate(-3deg)}
@media (max-width:1180px){
  .hv2 .h-c1,.hv2 .h-c2,.hv2 .h-c3,.hv2 .h-c4{display:none}
}
@media (max-width:760px){
  .hv2 .h-ph-left,.hv2 .h-ph-right{display:none}
  .hv2 .h-stage{height:470px}
}
.hv2 .h-band{position:relative;z-index:5;background:var(--ink);color:#fff}
.hv2 .h-band .h-wrap{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding-block:24px}
.hv2 .h-band em{font-style:normal;color:#f9a8d4;font-weight:600;font-size:15px;margin-right:12px}
.hv2 .h-band span{background:#fff;color:var(--ink);border-radius:12px;padding:9px 18px;font-weight:700}
.hv2 .h-vs{display:grid;grid-template-columns:1fr 1fr;position:relative}
.hv2 .h-vs-col{padding:44px;display:flex;flex-direction:column;gap:22px}
.hv2 .h-vs-off{background:#f5f3f1;border-radius:32px 0 0 32px;padding-right:64px}
.hv2 .h-vs-on{background:var(--pink);color:#fff;border-radius:0 32px 32px 0;padding-left:64px}
.hv2 .h-vs h3{font-size:24px;letter-spacing:-.02em;display:flex;gap:12px;align-items:center}
.hv2 .h-tags{display:flex;flex-wrap:wrap;gap:10px}
.hv2 .h-tags span{padding:11px 16px;border-radius:14px;font-weight:700;font-size:15px}
.hv2 .h-vs-off .h-tags span{background:#fff;box-shadow:0 4px 12px rgba(20,18,26,.06)}
.hv2 .h-vs-off .h-tags span:nth-child(odd){transform:rotate(-1.5deg)}
.hv2 .h-vs-off .h-tags span:nth-child(even){transform:rotate(1.5deg)}
.hv2 .h-vs-on .h-tags span{background:var(--pink-mid)}
.hv2 .h-list{display:flex;flex-direction:column;gap:13px;list-style:none;margin:0;padding:0;font-size:17px}
.hv2 .h-list li{display:flex;gap:12px;align-items:flex-start}
.hv2 .h-list svg{flex-shrink:0;margin-top:4px}
.hv2 .h-vs-off .h-list{color:var(--muted)}
.hv2 .h-vs-on .h-list{font-weight:600}
.hv2 .h-vs-arrow{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--yellow);border:6px solid #fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(20,18,26,.15)}
@media (max-width:860px){
  .hv2 .h-vs{grid-template-columns:1fr}
  .hv2 .h-vs-off{border-radius:32px 32px 0 0;padding:32px 28px 56px}
  .hv2 .h-vs-on{border-radius:0 0 32px 32px;padding:56px 28px 32px}
  .hv2 .h-vs-arrow{transform:rotate(90deg)}
}
.hv2 .h-flow{background:var(--pink-soft)}
.hv2 .h-flow-panel{background:var(--pink);border-radius:36px;padding:44px;display:grid;grid-template-columns:1fr auto 1fr auto .8fr;gap:22px;align-items:center}
.hv2 .h-flow-card{background:#fff;border-radius:22px;padding:20px;box-shadow:0 24px 48px rgba(20,18,26,.16);display:flex;flex-direction:column;gap:12px}
.hv2 .h-flow-card .h-step{font-size:13px;font-weight:800;color:var(--pink-ink);letter-spacing:.08em}
.hv2 .h-flow-card.h-dark{background:var(--ink);color:#fff}
.hv2 .h-flow-card.h-dark .h-step{color:var(--yellow)}
.hv2 .h-reel{height:120px;border-radius:14px;background:var(--pink-tint);display:grid;place-items:center;font-weight:800;color:var(--pink-ink)}
.hv2 .h-row-kv{display:flex;justify-content:space-between;font-size:15px}
.hv2 .h-row-kv b{color:var(--yellow)}
.hv2 .h-flow-mid{display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff}
.hv2 .h-flow-mid span{background:var(--ink);color:var(--yellow);font-weight:800;font-size:13px;padding:7px 12px;border-radius:999px;white-space:nowrap}
.hv2 .h-btnrow{display:flex;gap:8px;flex-wrap:wrap}
.hv2 .h-btnrow span{border:1.5px solid var(--line);padding:7px 12px;border-radius:12px;font-weight:700;color:var(--link);font-size:14px}
@media (max-width:980px){
  .hv2 .h-flow-panel{grid-template-columns:1fr;padding:24px}
  .hv2 .h-flow-mid{transform:rotate(90deg);height:60px;justify-content:center}
  .hv2 .h-flow-mid span{transform:rotate(-90deg)}
}
.hv2 .h-tabs{position:relative;display:flex;gap:6px;background:#f5f3f7;padding:6px;border-radius:16px;margin:0 auto 28px;width:max-content;max-width:100%;overflow-x:auto}
.hv2 .h-tab{border:0;background:transparent;color:var(--muted);font-weight:700;font-size:16px;padding:12px 20px;border-radius:12px;white-space:nowrap}
.hv2 .h-tab[aria-selected="true"]{background:#fff;color:var(--pink);box-shadow:0 4px 12px rgba(20,18,26,.08)}
.hv2 .h-tabpanel{background:var(--pink-soft);border-radius:32px;display:grid;grid-template-columns:1.1fr 1fr;overflow:hidden;min-height:540px}
.hv2 .h-tp-copy{padding:56px;display:flex;flex-direction:column;justify-content:center;gap:20px}
.hv2 .h-tp-copy h3{font-size:clamp(28px,3vw,38px)}
.hv2 .h-tp-copy p{font-size:18px;color:var(--muted)}
.hv2 .h-tp-copy .h-list{font-weight:600}
.hv2 .h-tp-vis{position:relative;min-height:520px}
.hv2 .h-tp-vis .h-blob{position:absolute;left:50%;top:60px;width:380px;height:380px;margin-left:-190px;border-radius:50%;background:#fbcfe8}
.hv2 .h-tp-vis .h-phone{left:50%;margin-left:-140px;top:30px;width:280px;height:540px}
.hv2 .h-tp-chip{position:absolute;right:24px;top:110px;z-index:4;background:#fff;border-radius:16px;padding:12px 16px;box-shadow:0 16px 36px rgba(20,18,26,.12);font-weight:800;font-size:14px}
.hv2 .h-ctx{font-size:11px;color:#8a8494;text-align:center}
@media (max-width:900px){
  .hv2 .h-tabpanel{grid-template-columns:1fr}
  .hv2 .h-tp-copy{padding:32px 26px}
  .hv2 .h-tp-vis{min-height:480px}
  .hv2 .h-tp-chip{right:12px}
}
.hv2 .h-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.hv2 .h-bx{border-radius:28px;padding:26px;display:flex;flex-direction:column;gap:12px}
.hv2 .h-bx h3{font-size:20px;letter-spacing:-.02em}
.hv2 .h-bx-wide{grid-column:span 2}
.hv2 .h-b-pink{background:var(--pink);color:#fff}
.hv2 .h-b-pink p{color:var(--pink-tint)}
.hv2 .h-b-violet{background:#f5f3ff}
.hv2 .h-b-yellow{background:#fef9c3}
.hv2 .h-b-green{background:#ecfdf5}
.hv2 .h-b-orange{background:#fff7ed}
.hv2 .h-b-ink{background:var(--ink);color:#fff}
.hv2 .h-b-ink p{color:#cfcbd6}
.hv2 .h-mini{background:#fff;color:var(--ink);border-radius:14px;padding:10px 14px;font-size:14px}
.hv2 .h-bars{flex-grow:1;min-height:120px;display:flex;gap:10px;align-items:flex-end}
.hv2 .h-bars i{flex:1;background:#3a3444;border-radius:8px 8px 0 0}
.hv2 .h-bars i:last-child{background:#f472b6}
.hv2 .h-plan-tag{align-self:flex-start;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--ink);color:var(--yellow)}
@media (max-width:980px){
  .hv2 .h-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .hv2 .h-bento{grid-template-columns:1fr}
  .hv2 .h-bx-wide{grid-column:auto}
}
.hv2 .h-dark{background:var(--ink);color:#fff}
.hv2 .h-dark .h-eyebrow{background:#3b1530;color:#f9a8d4}
.hv2 .h-dark .h-lead{color:#cfcbd6}
.hv2 .h-agent{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.hv2 .h-agent-copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.hv2 .h-feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.hv2 .h-feat{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:16px;padding:15px;display:flex;gap:12px;align-items:center;font-weight:700}
.hv2 .h-feat .h-ic{width:38px;height:38px;border-radius:10px}
.hv2 .h-agent-vis{position:relative;height:680px;background:var(--ink-2);border:1px solid var(--ink-line);border-radius:36px;overflow:hidden}
.hv2 .h-agent-vis .h-blob{position:absolute;left:50%;top:90px;width:460px;height:460px;margin-left:-230px;border-radius:50%;background:#3b1530}
.hv2 .h-agent-vis .h-phone{left:50%;margin-left:-150px;top:50px;width:300px;height:600px;background:#000;box-shadow:none;border:2px solid #3a3444}
.hv2 .h-ai-l{font-size:10px;font-weight:800;color:var(--pink-ink);letter-spacing:.08em}
.hv2 .h-float{position:absolute;z-index:4;background:#fff;color:var(--ink);border-radius:16px;padding:12px 16px;box-shadow:0 16px 36px rgba(0,0,0,.35);font-weight:800}
.hv2 .h-float small{display:block;font-size:12px;color:var(--faint);font-weight:700}
@media (max-width:980px){
  .hv2 .h-agent{grid-template-columns:1fr}
  .hv2 .h-agent-vis{height:640px}
}
@media (max-width:520px){
  .hv2 .h-feat-grid{grid-template-columns:1fr}
}
.hv2 .h-reviews{background:var(--pink-soft)}
.hv2 .h-wall{columns:3;column-gap:20px}
.hv2 .h-rv{break-inside:avoid;background:#fff;border-radius:24px;padding:26px;margin-bottom:20px;display:flex;flex-direction:column;gap:16px;box-shadow:0 10px 30px rgba(20,18,26,.06)}
.hv2 .h-rv q{font-size:18px;font-weight:500;quotes:none}
.hv2 .h-rv.h-feature{background:var(--pink);color:#fff}
.hv2 .h-rv.h-feature q{font-size:22px;font-weight:700}
.hv2 .h-who{display:flex;gap:12px;align-items:center;border-top:1px solid #f3eef2;padding-top:16px}
.hv2 .h-rv.h-feature .h-who{border-color:var(--pink-mid)}
.hv2 .h-who i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:14px}
.hv2 .h-who b{display:block;font-size:15px}
.hv2 .h-who small{font-size:13px;color:var(--faint)}
.hv2 .h-rv.h-feature .h-who small{color:var(--pink-tint)}
.hv2 .h-stars{display:flex;gap:3px}
.hv2 .h-note{font-size:13px;color:var(--faint);text-align:center;margin-top:8px}
@media (max-width:980px){
  .hv2 .h-wall{columns:2}
}
@media (max-width:620px){
  .hv2 .h-wall{columns:1}
}
.hv2 .h-banner{position:relative;overflow:hidden;background:var(--pink);border-radius:40px;padding:64px;color:#fff;min-height:420px;display:flex;align-items:center}
.hv2 .h-banner .h-circle{position:absolute;right:-140px;top:40px;width:720px;height:720px;border-radius:50%;background:var(--pink-mid)}
.hv2 .h-banner .h-sq{position:absolute;left:48px;top:36px;width:48px;height:48px;border-radius:14px;background:var(--yellow);transform:rotate(-14deg)}
.hv2 .h-banner-copy{position:relative;z-index:2;max-width:600px;display:flex;flex-direction:column;gap:22px}
.hv2 .h-banner-copy h2{font-size:clamp(34px,4.6vw,58px)}
.hv2 .h-banner-copy p{font-size:20px;color:var(--pink-tint)}
.hv2 .h-banner .h-phone{right:150px;top:60px;width:250px;height:480px;transform:rotate(8deg);z-index:2}
.hv2 .h-banner .h-chip{right:350px;top:290px;transform:rotate(-4deg)}
@media (max-width:1100px){
  .hv2 .h-banner .h-phone,.hv2 .h-banner .h-chip{display:none}
}
@media (max-width:640px){
  .hv2 .h-banner{padding:40px 26px;border-radius:28px}
}
.hv2 .h-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hv2 .h-tbl{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;font-size:17px}
.hv2 .h-tbl th,.hv2 .h-tbl td{padding:17px 20px;text-align:center;border-top:1px solid #f1eef3}
.hv2 .h-tbl thead th{border-top:0;font-size:19px}
.hv2 .h-tbl th[scope=row]{text-align:left;font-weight:700}
.hv2 .h-tbl .h-us{background:var(--pink-soft);font-weight:800}
.hv2 .h-tbl thead .h-us{background:var(--pink);color:#fff;border-radius:22px 22px 0 0;font-size:22px}
.hv2 .h-tbl tbody tr:last-child .h-us{border-radius:0 0 22px 22px}
.hv2 .h-tbl .h-oth{color:var(--muted);font-weight:600;font-size:16px}
.hv2 .h-verify{font-size:11px;font-weight:800;color:#b45309;background:#fef3c7;padding:2px 6px;border-radius:6px;margin-right:6px;vertical-align:middle}
.hv2 .h-safe{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.hv2 .h-safe-copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.hv2 .h-shield{position:relative;height:280px;width:100%;max-width:380px}
.hv2 .h-shield .h-bg{position:absolute;left:40px;top:0;width:260px;height:260px;border-radius:50%;background:var(--pink-tint)}
.hv2 .h-shield .h-sh{position:absolute;left:100px;top:40px;width:140px;height:170px;background:var(--pink);border-radius:26px 26px 70px 70px;display:grid;place-items:center;box-shadow:0 24px 48px rgba(225,29,116,.3)}
.hv2 .h-shield .h-t{position:absolute;background:#fff;border-radius:14px;padding:9px 14px;font-weight:800;font-size:14px;box-shadow:0 12px 30px rgba(20,18,26,.12)}
.hv2 .h-safe-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hv2 .h-sc{background:var(--bg-2);border-radius:24px;padding:26px;display:flex;flex-direction:column;gap:12px}
.hv2 .h-sc h3{font-size:20px;letter-spacing:-.02em}
.hv2 .h-sc p{color:var(--muted)}
.hv2 .h-sc-dark{grid-column:span 2;background:var(--ink);color:#fff;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.hv2 .h-sc-dark p{color:#cfcbd6}
@media (max-width:980px){
  .hv2 .h-safe{grid-template-columns:1fr}
}
@media (max-width:600px){
  .hv2 .h-safe-grid{grid-template-columns:1fr}
  .hv2 .h-sc-dark{grid-column:auto}
}
.hv2 .h-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hv2 .h-st{border-radius:30px;padding:30px;display:flex;flex-direction:column;gap:16px;background:var(--pink-soft);border:2px solid var(--pink-tint)}
.hv2 .h-st.h-hot{background:var(--pink);color:#fff;border-color:var(--pink)}
.hv2 .h-st.h-hot p{color:var(--pink-tint)}
.hv2 .h-st .h-num{width:54px;height:54px;border-radius:16px;background:var(--ink);color:var(--yellow);font-size:24px;font-weight:800;display:grid;place-items:center}
.hv2 .h-st h3{font-size:26px;letter-spacing:-.03em}
.hv2 .h-st p{color:var(--muted);font-size:17px}
.hv2 .h-st-ui{margin-top:auto;background:#fff;color:var(--ink);border-radius:20px;padding:18px;box-shadow:0 14px 30px rgba(20,18,26,.08);display:flex;flex-direction:column;gap:10px}
.hv2 .h-kw{display:flex;gap:6px;flex-wrap:wrap}
.hv2 .h-kw span{background:var(--yellow);font-weight:800;font-size:14px;padding:6px 10px;border-radius:8px}
.hv2 .h-kw .h-add{background:transparent;border:1.5px dashed #d6d1dc;color:var(--faint)}
@media (max-width:900px){
  .hv2 .h-steps{grid-template-columns:1fr}
}
.hv2 .h-bill{display:flex;gap:4px;background:#f5f3f7;padding:5px;border-radius:14px;width:max-content;margin:0 auto 52px}
.hv2 .h-bill button{border:0;background:transparent;font-weight:700;padding:10px 20px;border-radius:10px;color:var(--muted);display:flex;gap:8px;align-items:center}
.hv2 .h-bill button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 3px 10px rgba(20,18,26,.08)}
.hv2 .h-save{background:var(--green-soft);color:#166534;font-size:12px;padding:3px 8px;border-radius:999px}
.hv2 .h-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;align-items:stretch}
.hv2 .h-plan{position:relative;border:1.5px solid var(--line);border-radius:28px;padding:32px;display:flex;flex-direction:column;gap:18px;background:#fff;transition:transform .2s ease, box-shadow .2s ease}
.hv2 .h-plan h3{font-size:20px;letter-spacing:-.01em}
.hv2 .h-price{display:flex;align-items:baseline;gap:6px}
.hv2 .h-price b{font-size:54px;font-weight:800;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.hv2 .h-price small{color:var(--faint);font-weight:600}
.hv2 .h-plan .h-sub{font-size:15px;color:var(--muted);min-height:24px}
.hv2 .h-plan .h-list{font-size:15px;border-top:1px solid #f0eef3;padding-top:18px}
.hv2 .h-plan .h-btn{width:100%}
.hv2 .h-plan.h-pro{background:var(--pink);color:#fff;border-color:var(--pink);box-shadow:0 30px 60px rgba(225,29,116,.3)}
.hv2 .h-plan.h-pro .h-price small,.hv2 .h-plan.h-pro .h-sub{color:var(--pink-tint)}
.hv2 .h-plan.h-pro .h-list{border-color:var(--pink-mid);font-weight:600}
.hv2 .h-badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--yellow);color:var(--ink);font-size:12px;font-weight:800;padding:6px 14px;border-radius:999px;white-space:nowrap}
.hv2 .h-plan.h-rec{transform:translateY(-10px);box-shadow:0 0 0 4px var(--ink),0 30px 60px rgba(20,18,26,.22)}
.hv2 .h-trust-row{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:34px;font-size:14px;font-weight:600;color:var(--faint)}
@media (max-width:980px){
  .hv2 .h-plans{grid-template-columns:1fr;max-width:480px;margin-inline:auto}
  .hv2 .h-plan.h-rec{transform:none}
}
.hv2 .h-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px}
.hv2 .h-faq-side{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.hv2 .h-help-card{background:var(--pink-soft);border-radius:26px;padding:26px;display:flex;flex-direction:column;gap:14px;width:100%}
.hv2 .h-help-card h3{font-size:19px;letter-spacing:-.01em}
.hv2 .h-help-card p{color:var(--muted)}
.hv2 .h-email{font-weight:700;background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;align-self:flex-start;user-select:all}
.hv2 .h-search{display:flex;gap:10px;align-items:center;border:2px solid var(--ink);border-radius:18px;padding:6px 6px 6px 18px;box-shadow:0 5px 0 var(--ink);margin-bottom:14px;background:#fff}
.hv2 .h-search input{flex-grow:1;min-width:0;border:0;font:inherit;font-size:17px;padding:10px 0;outline:none;background:transparent}
.hv2 .h-popular{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px;align-items:center}
.hv2 .h-popular span{font-size:14px;font-weight:600;color:var(--faint)}
.hv2 .h-popular button{border:0;background:var(--pink-soft);color:var(--pink-ink);font-size:14px;font-weight:700;padding:7px 13px;border-radius:999px}
.hv2 .h-qa{border:1.5px solid var(--line);border-radius:20px;margin-bottom:12px;background:#fff}
.hv2 .h-qa button{width:100%;border:0;background:transparent;padding:21px 24px;display:flex;justify-content:space-between;gap:16px;align-items:center;text-align:left;font-size:18px;font-weight:700;color:var(--ink)}
.hv2 .h-qa .h-pm{width:32px;height:32px;flex-shrink:0;border-radius:50%;background:#f5f3f7;display:grid;place-items:center;transition:transform .2s ease}
.hv2 .h-qa[data-open="true"] .h-pm{background:var(--pink);transform:rotate(45deg)}
.hv2 .h-qa[data-open="true"] .h-pm svg{stroke:#fff}
.hv2 .h-qa .h-a{padding:0 24px 22px;color:var(--muted);font-size:16px;margin-top:-4px}
.hv2 .h-empty{color:var(--faint);padding:10px 4px}
@media (max-width:980px){
  .hv2 .h-faq{grid-template-columns:1fr;gap:40px}
}
.hv2 .h-final h2{font-size:clamp(34px,5vw,64px)}
.hv2 .h-final-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;margin-top:50px}
.hv2 .h-fc{border-radius:32px;padding:40px;display:flex;flex-direction:column;gap:16px;position:relative}
.hv2 .h-fc .h-k{font-size:14px;font-weight:800;letter-spacing:.1em}
.hv2 .h-fc h3{font-size:clamp(28px,3vw,38px)}
.hv2 .h-fc p{font-size:18px;font-weight:500}
.hv2 .h-fc .h-btn{align-self:flex-start;margin-top:8px}
.hv2 .h-fc-free{background:var(--pink);color:#fff}
.hv2 .h-fc-free .h-k{color:var(--pink-tint)}
.hv2 .h-fc-free p{color:var(--pink-tint)}
.hv2 .h-fc-life{background:var(--ink);color:#fff}
.hv2 .h-fc-life .h-k{color:var(--amber)}
.hv2 .h-fc-life p{color:#d6d1dc}
.hv2 .h-fc-life .h-lim{position:absolute;top:-14px;right:30px;background:var(--amber);color:var(--ink);font-size:13px;font-weight:800;padding:7px 14px;border-radius:999px}
.hv2 .h-code{font-weight:800;color:var(--amber);background:#2a2433;padding:2px 8px;border-radius:6px}
@media (max-width:860px){
  .hv2 .h-final-grid{grid-template-columns:1fr}
  .hv2 .h-fc{padding:30px 26px}
}
.hv2 .h-screen{color:var(--ink)}
.hv2 .h-chip,.hv2 .h-float{color:var(--ink)}
.hv2 .h-rating{gap:10px}
/* Stars were removed with the placeholder rating: lead with a pink shield instead (CSS only, no markup). */
.hv2 .h-rating::before{content:"";flex:none;width:16px;height:16px;background:var(--pink);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 4 6v6c0 5 3.4 8.3 8 9 4.6-.7 8-4 8-9V6z'/><path d='m9 12 2 2 4-4'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 4 6v6c0 5 3.4 8.3 8 9 4.6-.7 8-4 8-9V6z'/><path d='m9 12 2 2 4-4'/></svg>") center/contain no-repeat}
.hv2 .h-rating:has(.h-rs svg)::before{display:none}
.hv2 .h-rating .h-rs{display:flex;gap:2px}
.hv2 .h-rating b{font-weight:800}
.hv2 .h-promo{position:relative;height:124px;background:#14121a;color:#fff;padding:12px 14px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.hv2 .h-promo .h-ptag{align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.08em;background:var(--yellow);color:var(--ink);padding:3px 8px;border-radius:999px}
.hv2 .h-promo .h-pct{font-size:38px;font-weight:800;letter-spacing:-.05em;line-height:.9;color:var(--yellow)}
.hv2 .h-promo .h-pct small{font-size:15px;color:#fff;letter-spacing:0;margin-left:4px}
.hv2 .h-promo .h-pcode{align-self:flex-start;font-size:10px;font-weight:700;border:1.5px dashed #f472b6;color:#fbcfe8;padding:2px 7px;border-radius:6px}
.hv2 .h-promo svg.h-bag{position:absolute;right:8px;bottom:6px;width:92px;height:104px}
.hv2 .h-promo i{position:absolute;border-radius:2px}
.hv2 .h-band .h-logos{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.hv2 .h-band .h-lg{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);border-radius:12px;padding:9px 16px;font-weight:700;font-size:15px}
.hv2 .h-band .h-lg svg{width:20px;height:20px;flex-shrink:0}
.hv2 .h-reelcard{position:relative;height:230px;border-radius:16px;overflow:hidden;background:#fde68a}
.hv2 .h-reelcard svg.h-food{position:absolute;inset:0;width:100%;height:100%}
.hv2 .h-reel-top{position:absolute;left:10px;top:9px;right:10px;display:flex;justify-content:space-between;align-items:center;color:#fff;font-weight:800;font-size:13px;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.hv2 .h-reel-side{position:absolute;right:9px;bottom:44px;display:flex;flex-direction:column;gap:9px;align-items:center;color:#fff;font-size:10px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.hv2 .h-reel-side svg{width:20px;height:20px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.hv2 .h-reel-cap{position:absolute;left:10px;right:40px;bottom:10px;color:#fff;font-size:12px;line-height:1.35;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hv2 .h-reel-cap b{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.hv2 .h-reel-cap b i{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #e11d74;display:inline-block}
.hv2 .h-reel-play{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(20,18,26,.45);display:grid;place-items:center}
.hv2 .h-stories{display:flex;gap:10px;margin-top:auto}
.hv2 .h-story{position:relative;width:74px;height:120px;border-radius:14px;overflow:hidden;box-shadow:0 0 0 3px #fff,0 0 0 5px #e11d74}
.hv2 .h-story .h-sbars{position:absolute;left:6px;right:6px;top:6px;display:flex;gap:3px;min-height:0}
.hv2 .h-story .h-sbars i{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.55)}
.hv2 .h-story .h-sbars i:first-child{background:#fff}
.hv2 .h-story svg{position:absolute;inset:0;width:100%;height:100%}
.hv2 .h-story .h-stk{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;background:#fff;color:var(--ink);font-size:9px;font-weight:800;padding:4px 6px;border-radius:7px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.hv2 .h-story .h-poll{display:flex;gap:3px}
.hv2 .h-story .h-poll span{background:#f3f1f6;border-radius:4px;padding:2px 5px}
.hv2 .h-story .h-reply{position:absolute;left:84px;top:36px;background:#fff;border-radius:12px 12px 12px 4px;padding:7px 10px;font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 6px 16px rgba(20,18,26,.1)}
.hv2 .h-inputbar{margin:auto 12px 14px;display:flex;align-items:center;gap:8px;background:#f3f1f6;border-radius:999px;padding:9px 12px;font-size:12px;color:#8a8494}
.hv2 .h-inputbar i{margin-left:auto;width:22px;height:22px;border-radius:50%;background:var(--dm-me);display:grid;place-items:center}
.hv2 .h-prod{display:flex;gap:10px;align-items:center;padding:10px}
.hv2 .h-prod .h-pi{width:54px;height:54px;border-radius:10px;background:#fef3c7;display:grid;place-items:center;flex-shrink:0}
.hv2 .h-prod b{display:block;font-size:13px}
.hv2 .h-prod small{color:#8a8494;font-size:12px}
.hv2 .h-trust-row span{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);padding:9px 14px;border-radius:999px;color:var(--muted)}
.hv2 .h-trust-row svg{flex-shrink:0}
.hv2 .h-tabs{scroll-behavior:smooth;scrollbar-width:none}
.hv2 .h-tabs::-webkit-scrollbar{display:none}
.hv2 .h-rating .h-rt{white-space:nowrap}
@media (max-width:640px){
  .hv2 .h-deco-sq,.hv2 .h-deco-ci{display:none}
  .hv2 .h-hero{padding-top:32px}
  .hv2 .h-hero-copy{gap:18px}
  .hv2 .h-hero h1{font-size:max(28px,7.6vw);letter-spacing:-.05em;line-height:1.04}
  .hv2 .h-hero .h-lead{font-size:16px}
  .hv2 .h-pill.h-rating{font-size:13px;padding:8px 14px;gap:8px}
  .hv2 .h-rating .h-rs svg{width:13px;height:13px}
  .hv2 .h-hero-ctas{flex-direction:column;width:100%}
  .hv2 .h-hero-ctas .h-btn{width:100%}
  .hv2 .h-micro{gap:8px 14px;font-size:13px}
  .hv2 .h-tabs{width:100%;justify-content:flex-start;margin-inline:0}
  .hv2 .h-tab{font-size:15px;padding:11px 16px}
            .hv2 .h-bill{width:100%;margin-bottom:36px}
  .hv2 .h-bill button{flex:1;justify-content:center;padding:10px 8px}
  .hv2 .h-plans{gap:18px}
  .hv2 .h-plan{padding:24px;gap:14px}
  .hv2 .h-plan.h-rec{order:-1}
  .hv2 .h-price b{font-size:44px}
  .hv2 .h-trust-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:26px}
  .hv2 .h-trust-row span{justify-content:center;padding:8px 10px;font-size:13px;gap:6px}
  .hv2 .h-trust-row svg{width:14px;height:14px}
}
.hv2 .h-band .h-track{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.hv2 .h-band .h-lg.h-dup{display:none}
@keyframes h-marq{to{transform:translateX(-50%)}}
@media (max-width:640px){
  .hv2 .h-band .h-wrap{flex-direction:column;align-items:stretch;gap:12px;padding-block:18px;padding-inline:0}
  .hv2 .h-band em{margin:0;text-align:center;font-size:14px}
  .hv2 .h-band .h-logos{display:block;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .hv2 .h-band .h-track{flex-wrap:nowrap;justify-content:flex-start;gap:0;width:max-content;animation:h-marq 24s linear infinite}
  .hv2 .h-band .h-lg,.hv2 .h-band .h-lg.h-dup{display:inline-flex;flex-shrink:0;margin-right:8px;padding:7px 12px;font-size:13px;gap:6px;border-radius:10px}
  .hv2 .h-band .h-lg svg{width:16px;height:16px}
  .hv2 .h-band .h-logos:active .h-track{animation-play-state:paused}
}
@media (max-width:640px) and (prefers-reduced-motion: reduce){
  .hv2 .h-band .h-logos{overflow-x:auto}
  .hv2 .h-band .h-track{animation:none}
  .hv2 .h-band .h-lg.h-dup{display:none}
}
.hv2 .h-mcta{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line);display:none;gap:10px;align-items:center;box-shadow:0 -10px 30px rgba(20,18,26,.08);transform:translateY(110%);transition:transform .25s ease}
.hv2 .h-mcta.h-show{transform:none}
.hv2 .h-mcta .h-btn{flex-grow:1}
.hv2 .h-mcta small{font-size:12px;color:var(--faint);font-weight:600;line-height:1.3}
@media (max-width:760px){
  .hv2 .h-mcta{display:flex}
  .hv2 .h-section{padding-block:72px}
}
.hv2 .h-final-grid.h-final-one{grid-template-columns:1fr}
.hv2 .h-email{text-decoration:none}
.hv2 .h-reelcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(180deg,rgba(20,18,26,0),rgba(20,18,26,.72));pointer-events:none}
.hv2 .h-reel-cap,.hv2 .h-reel-side{z-index:2}
/* shared sections (public/_hv2.html) */
.hv2 .h-wall3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.hv2 .h-wall3 .h-rv{margin:0}
.hv2 .h-wall3 .h-feature{transform:translateY(-12px)}
.hv2 .h-metric{align-self:flex-start;display:inline-flex;align-items:baseline;gap:8px;background:var(--pink-soft);color:var(--pink-ink);border-radius:14px;padding:8px 14px;font-size:13px;font-weight:700}
.hv2 .h-metric b{font-size:24px;font-weight:800;letter-spacing:-.03em}
.hv2 .h-feature .h-metric{background:rgba(255,255,255,.16);color:#fff}
@media (max-width:900px){.hv2 .h-wall3{grid-template-columns:1fr;max-width:560px;margin-inline:auto}.hv2 .h-wall3 .h-feature{transform:none}}
.hv2 .h-banner-solo{min-height:0}
/* pricing page */
.hv2 .h-pr-hero{padding-top:64px}
.hv2 .h-h1{font-size:clamp(38px,6vw,68px);letter-spacing:-.045em}
.hv2 .h-cur{font-size:14px;color:var(--faint)}
.hv2 .h-cur strong{color:var(--ink)}
.hv2 .h-strips{display:flex;justify-content:center;min-height:34px;margin:-30px 0 30px}
.hv2 .sale-strip{background:var(--pink-soft);color:var(--pink-ink);border-color:var(--pink-tint)}
.hv2 .sale-strip .ping{background:var(--pink)}
.hv2 .h-page [data-view][hidden]{display:none}
.hv2 .h-plans-pr{margin-top:8px}
.hv2 .h-plan-name{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0}
.hv2 .h-price-box{min-height:112px;display:flex;flex-direction:column;justify-content:flex-end}
.hv2 .h-price-box .h-price{flex-wrap:wrap}
.hv2 .h-note{font-size:14px;color:var(--faint);margin-top:4px;text-align:left}
.hv2 .h-price-box,.hv2 .h-plan{text-align:left}
.hv2 .h-pro .h-note{color:var(--pink-tint)}
.hv2 .pr-was{margin:0 0 2px;font-size:14px;color:var(--faint);text-decoration:line-through}
.hv2 .h-pro .pr-was{color:var(--pink-tint)}
.hv2 .pr-on-sale{color:var(--pink)}
.hv2 .h-pro .pr-on-sale{color:#fff}
.hv2 .pr-off{margin-left:8px;align-self:center;font-style:normal;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--yellow);color:var(--ink)}
.hv2 .h-inc{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:4px}
.hv2 .h-pro .h-inc{color:var(--pink-tint)}
.hv2 .h-badge-sale{text-transform:uppercase;letter-spacing:.06em}
.hv2 .h-tbl-card{background:#fff;border-radius:28px;padding:10px 10px 18px;box-shadow:0 20px 40px rgba(20,18,26,.06)}
.hv2 .h-tbl-plans{font-size:16px}
.hv2 .h-tbl-plans th[scope=col]:first-child{text-align:left;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.hv2 .h-pr-faq .h-a a{color:var(--pink-ink);text-decoration:underline;text-underline-offset:2px}
/* ================= end HOME PAGE v2 ================= */

/* ====== Phase 3 public pages (hv2). Each block is scoped .hv2 + its own prefix. ====== */

/* ---- product pages (hp-) ---- */
/* ================= PRODUCT PAGES v2 (group A, hp-*) =================
   /product/* landers on the hv2 design. Builds on HOME PAGE v2 (h-*);
   partial: public/_hv2_product.html. */
.hv2 .hp-hero{position:relative;overflow:hidden;padding:64px 0 40px;background:linear-gradient(180deg,#fff 0%,#fff 55%,var(--pink-soft) 100%)}
.hv2 .hp-hero .h-deco-sq{left:1.5%;top:auto;bottom:70px}
.hv2 .hp-hero .h-deco-ci{right:4%;top:70px}
.hv2 .hp-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center}
.hv2 .hp-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.hv2 .hp-hero h1{font-size:clamp(38px,5.4vw,68px);letter-spacing:-.045em;line-height:1.03}
.hv2 .hp-hero .h-lead{font-size:clamp(17px,1.6vw,20px);max-width:580px}
.hv2 .hp-ctas,.hv2 .hp-micro{justify-content:flex-start}
.hv2 .hp-beta{display:inline-block;margin-left:6px;background:var(--pink);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;vertical-align:1px}
.hv2 .hp-vis{position:relative;height:600px}
.hv2 .hp-blob{position:absolute;left:50%;top:50px;width:440px;height:440px;margin-left:-220px;border-radius:50%;background:#fbcfe8}
.hv2 .hp-vis .h-phone{left:50%;margin-left:-140px;top:10px;width:280px;height:570px;z-index:2}
.hv2 .hp-vis .h-chip{z-index:3}
.hv2 .hp-vis .hp-chip-a{left:0;top:96px;transform:rotate(-4deg)}
.hv2 .hp-vis .hp-chip-b{right:0;bottom:92px;transform:rotate(3deg)}
.hv2 .hp-vis .h-chip .h-ic{width:38px;height:38px;border-radius:11px}
.hv2 .hp-vis .h-chip b{font-size:15px}
.hv2 .hp-vis .h-chip small{font-size:12px}
/* mockup bits */
.hv2 .hp-post{height:118px;border-radius:14px;overflow:hidden;position:relative;flex-shrink:0}
.hv2 .hp-post svg{position:absolute;inset:0;width:100%;height:100%}
.hv2 .hp-post span{position:absolute;left:8px;bottom:8px;right:8px;color:#fff;font-weight:700;font-size:11px;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hv2 .hp-cmts{display:flex;flex-direction:column;gap:7px}
.hv2 .hp-cmt{display:flex;gap:8px;align-items:center;font-size:12.5px}
.hv2 .hp-cmt i{width:22px;height:22px;border-radius:50%;flex-shrink:0}
.hv2 .hp-cmt.hp-rep{margin-left:22px;color:var(--pink-ink);font-weight:600}
.hv2 .hp-sent{align-self:center;background:var(--green-soft);color:#166534;font-weight:800;font-size:11px;padding:4px 10px;border-radius:999px}
.hv2 .hp-story-row{display:flex;gap:10px;align-items:flex-end;justify-content:flex-end}
.hv2 .hp-story-row .h-story{width:64px;height:104px;flex-shrink:0}
/* facts strip */
.hv2 .hp-facts-sec{background:var(--pink-soft);padding:8px 0 40px}
.hv2 .hp-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hv2 .hp-facts li{background:#fff;border-radius:20px;padding:16px 18px;display:flex;gap:12px;align-items:center;box-shadow:0 10px 26px rgba(20,18,26,.06)}
.hv2 .hp-facts .h-ic{width:40px;height:40px;border-radius:12px}
.hv2 .hp-facts b{display:block;font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.hv2 .hp-facts small{display:block;color:var(--faint);font-size:13px;font-weight:600}
/* generic */
.hv2 .hp-soft{background:var(--pink-soft)}
.hv2 .hp-h2{font-size:clamp(30px,4.2vw,50px)}
.hv2 .hp-note{text-align:center;color:var(--muted);margin-top:22px;font-size:15px}
.hv2 .hp-note a,.hv2 .hp-def a{color:var(--pink-ink);text-decoration:underline;text-underline-offset:2px;font-weight:600}
/* definition (answer-first) */
.hv2 .hp-def{max-width:860px;margin:0 auto;background:#fff;border:2px solid var(--pink-tint);border-radius:32px;padding:44px;display:flex;flex-direction:column;gap:18px}
.hv2 .hp-def h2{font-size:clamp(28px,3.6vw,42px)}
.hv2 .hp-def .hp-answer{font-size:clamp(18px,1.7vw,21px);font-weight:600;color:var(--ink);border-left:5px solid var(--pink);padding-left:18px}
.hv2 .hp-def p{color:var(--muted);font-size:17px}
/* steps */
.hv2 .hp-steps{list-style:none;margin:0;padding:0}
.hv2 .hp-steps4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hv2 .hp-steps .h-st h3{font-size:22px}
.hv2 .hp-steps .h-st p{font-size:16px}
/* features */
.hv2 .hp-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hv2 .hp-feat{background:var(--bg-2);border-radius:24px;padding:26px;display:flex;flex-direction:column;gap:12px}
.hv2 .hp-soft .hp-feat{background:#fff}
.hv2 .hp-feat h3{font-size:19px;letter-spacing:-.02em}
.hv2 .hp-feat p{color:var(--muted);font-size:15.5px}
/* use cases */
.hv2 .hp-uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hv2 .hp-use{background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:12px;transition:transform .2s ease,box-shadow .2s ease}
.hv2 .hp-use:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(20,18,26,.08)}
.hv2 .hp-use-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.hv2 .hp-use .h-ic{width:40px;height:40px;border-radius:12px}
.hv2 .hp-kw{background:var(--marker);color:var(--ink);font-size:13px;font-weight:700;padding:5px 11px;border-radius:999px;white-space:nowrap}
.hv2 .hp-kw b{font-weight:800}
.hv2 .hp-use h3{font-size:19px;letter-spacing:-.02em}
.hv2 .hp-use p{color:var(--muted);font-size:15.5px}
/* tables */
.hv2 .hp-tbl-card{max-width:980px;margin:0 auto}
.hv2 .hp-tbl{min-width:0;font-size:16px}
.hv2 .hp-tbl-wide{min-width:640px}
.hv2 .hp-tbl td,.hv2 .hp-tbl th{text-align:left}
.hv2 .hp-tbl thead th{font-size:16px}
.hv2 .hp-tbl thead .h-us{font-size:17px}
.hv2 .hp-tbl .h-oth{font-size:15px}
/* link cards */
.hv2 .hp-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hv2 .hp-links2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;margin:0 auto}
.hv2 .hp-link{background:#fff;border:1.5px solid var(--line);border-radius:22px;padding:20px;display:flex;gap:14px;align-items:center;transition:border-color .15s ease,transform .15s ease}
.hv2 .hp-link:hover{border-color:var(--pink);transform:translateY(-2px)}
.hv2 .hp-link .h-ic{width:42px;height:42px;border-radius:12px}
.hv2 .hp-link div{flex:1;min-width:0}
.hv2 .hp-link h3{font-size:17px;letter-spacing:-.01em;margin-bottom:2px}
.hv2 .hp-link p{color:var(--muted);font-size:14.5px}
.hv2 .hp-go{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--pink-soft);display:grid;place-items:center}
/* three modes (auto reply) */
.hv2 .hp-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.hv2 .hp-mode{position:relative;background:#fff;border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:12px;box-shadow:0 14px 34px rgba(20,18,26,.06)}
.hv2 .hp-mode h3{font-size:22px;letter-spacing:-.02em}
.hv2 .hp-mode p{color:var(--muted)}
.hv2 .hp-mode .hp-more{margin-top:auto;font-weight:700;color:var(--pink-ink)}
.hv2 .hp-mode.hp-hot{background:var(--pink);color:#fff}
.hv2 .hp-mode.hp-hot p{color:var(--pink-tint)}
.hv2 .hp-mode.hp-hot .hp-more{color:#fff}
.hv2 .hp-mode .hp-tagline{position:absolute;top:-13px;left:24px;background:var(--yellow);color:var(--ink);font-size:12px;font-weight:800;padding:5px 12px;border-radius:999px}
.hv2 .hp-mode .h-mini{border:1px solid var(--line)}
@media (max-width:1100px){
  .hv2 .hp-steps4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .hv2 .hp-hero-grid{grid-template-columns:1fr;gap:12px}
  .hv2 .hp-hero-copy{align-items:center;text-align:center}
  .hv2 .hp-ctas,.hv2 .hp-micro{justify-content:center}
  .hv2 .hp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hv2 .hp-feats,.hv2 .hp-uses,.hv2 .hp-links,.hv2 .hp-modes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .hv2 .hp-hero{padding-top:32px}
  .hv2 .hp-hero h1{font-size:max(28px,7.6vw);letter-spacing:-.05em}
  .hv2 .hp-hero .h-lead{font-size:16px}
  .hv2 .hp-hero .h-hero-ctas{flex-direction:column;width:100%}
  .hv2 .hp-hero .h-hero-ctas .h-btn{width:100%}
  .hv2 .hp-micro{gap:8px 14px;font-size:13px}
  .hv2 .hp-vis{height:560px}
  .hv2 .hp-blob{width:320px;height:320px;margin-left:-160px;top:80px}
  .hv2 .hp-vis .h-phone{width:260px;height:530px;margin-left:-130px}
  .hv2 .hp-vis .hp-chip-a{left:-4px;top:40px}
  .hv2 .hp-vis .hp-chip-b{right:-4px;bottom:40px}
  .hv2 .hp-facts{gap:10px}
  .hv2 .hp-facts li{flex-direction:column;align-items:flex-start;padding:14px;gap:8px}
  .hv2 .hp-facts b{font-size:17px}
  .hv2 .hp-steps4,.hv2 .hp-feats,.hv2 .hp-uses,.hv2 .hp-links,.hv2 .hp-links2,.hv2 .hp-modes{grid-template-columns:1fr}
  .hv2 .hp-def{padding:28px 22px;border-radius:26px}
  .hv2 .hp-tbl{font-size:14px}
  .hv2 .hp-tbl th,.hv2 .hp-tbl td{padding:12px 10px}
  .hv2 .hp-tbl thead th,.hv2 .hp-tbl thead .h-us{font-size:14px}
  .hv2 .hp-tbl .h-oth{font-size:13.5px}
  .hv2 .hp-tbl-card{padding:4px 4px 10px;border-radius:22px}
}
/* ================= end PRODUCT PAGES v2 ================= */

/* ---- industries pages (hi-) ---- */
/* ================= GROUP B: industries + integrations (hv2, hi-*) =================
   Pages: public/_industry.html (+ industry_*.html), industries_index.html,
   industry_dynamic.html, integrations.html, integration_show.html.
   Every selector is scoped to .hv2 and every new class is prefixed "hi-". */

/* ---- shared bits ---- */
.hv2 .hi-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--faint)}
.hv2 .hi-crumbs a:hover{color:var(--pink-ink)}
.hv2 .hi-crumbs [aria-current]{color:var(--ink)}
.hv2 .hi-h1{font-size:clamp(36px,4.8vw,60px);letter-spacing:-.045em;line-height:1.03}
.hv2 .hi-h1 span{color:var(--pink)}
.hv2 .hi-soft{background:var(--pink-soft)}
.hv2 .hi-left{align-items:flex-start;text-align:left}
.hv2 .hi-left .h-lead{margin-inline:0}
.hv2 .hi-link{color:var(--pink-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.hv2 .hi-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--pink-ink)}
.hv2 .hi-arrow svg{transition:transform .15s ease}
.hv2 a:hover .hi-arrow svg,.hv2 .hi-arrow:hover svg{transform:translateX(3px)}

/* ---- hero (industry pages) ---- */
.hv2 .hi-hero{position:relative;overflow:hidden;padding:40px 0 96px;background:linear-gradient(180deg,var(--pink-soft) 0%,#fff 78%)}
.hv2 .hi-hero::before{content:"";position:absolute;right:-180px;top:120px;width:560px;height:560px;border-radius:50%;background:var(--pink-tint);pointer-events:none}
.hv2 .hi-hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hv2 .hi-hero-copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start;min-width:0}
.hv2 .hi-hero .h-hero-ctas,.hv2 .hi-hero .h-micro{justify-content:flex-start}
.hv2 .hi-hero .h-lead{font-size:clamp(17px,1.7vw,20px)}
.hv2 .hi-trust{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted)}
.hv2 .hi-trust strong{color:var(--ink)}
.hv2 .hi-faces{display:flex}
.hv2 .hi-faces i{width:34px;height:34px;border-radius:50%;border:2px solid #fff;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800}
.hv2 .hi-faces i+i{margin-left:-10px}
.hv2 .hi-trust .hi-stars{display:flex;gap:2px;margin-bottom:2px}
.hv2 .hi-trust .hi-stars svg{width:14px;height:14px}

/* hero stage: post card + DM phone + chips */
.hv2 .hi-stage{position:relative;height:600px}
.hv2 .hi-stage .hi-blob{position:absolute;right:-30px;top:70px;width:440px;height:440px;border-radius:50%;background:var(--pink)}
.hv2 .hi-stage .hi-sq{position:absolute;left:12%;top:18px;width:54px;height:54px;border-radius:16px;background:var(--yellow);transform:rotate(-12deg)}
.hv2 .hi-stage .h-phone{left:auto;right:30px;top:16px;width:280px;height:570px;z-index:2}
.hv2 .hi-stage .h-chip{z-index:4}
.hv2 .hi-stage .hi-ct{right:-24px;top:44px;transform:rotate(3deg)}
.hv2 .hi-stage .hi-cb{right:-18px;bottom:40px;transform:rotate(-3deg)}
.hv2 .hi-post{position:absolute;left:0;top:190px;z-index:3;width:250px;background:#fff;border-radius:22px;padding:14px;box-shadow:0 24px 50px rgba(20,18,26,.18);transform:rotate(-4deg);color:var(--ink);font-size:13px;line-height:1.45}
.hv2 .hi-post-top{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px;margin-bottom:10px}
.hv2 .hi-post-top small{display:block;font-weight:500;color:#8a8494;font-size:11px}
.hv2 .hi-post-img{height:112px;border-radius:14px;margin-bottom:10px;display:grid;place-items:center;position:relative;overflow:hidden}
.hv2 .hi-post-img svg{width:44px;height:44px;color:#fff;opacity:.95}
.hv2 .hi-post-img::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 15%,rgba(255,255,255,.35),transparent 60%)}
.hv2 .hi-post-cap{margin-bottom:10px}
.hv2 .hi-post-cap b{font-weight:800}
.hv2 .hi-cmts{border-top:1px solid var(--line);padding-top:9px;display:flex;flex-direction:column;gap:6px;font-size:12px}
.hv2 .hi-cmts div{display:flex;align-items:center;gap:7px}
.hv2 .hi-cmts i{width:20px;height:20px;border-radius:50%;flex-shrink:0}
.hv2 .hi-cmts b{font-weight:800}
.hv2 .hi-cmts span{color:var(--muted)}
.hv2 .hi-stage .h-dm-btn{font-size:13px}
.hv2 .hi-sent{margin:auto 14px 16px;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#166534;background:var(--green-soft);border-radius:999px;padding:7px 12px;align-self:flex-start}
@media (max-width:1180px){
  .hv2 .hi-stage .hi-ct,.hv2 .hi-stage .hi-cb{display:none}
}
@media (max-width:980px){
  .hv2 .hi-hero-grid{grid-template-columns:1fr;gap:40px}
  .hv2 .hi-stage{max-width:560px;width:100%;margin:0 auto}
}
@media (max-width:640px){
  .hv2 .hi-hero{padding:24px 0 64px}
  .hv2 .hi-hero::before{display:none}
  .hv2 .hi-h1{font-size:max(30px,8vw);letter-spacing:-.05em}
  .hv2 .hi-hero .h-hero-ctas{flex-direction:column;width:100%}
  .hv2 .hi-hero .h-hero-ctas .h-btn{width:100%}
  .hv2 .hi-stage{height:auto;max-width:320px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:0}
  .hv2 .hi-stage .h-phone{height:420px}
  .hv2 .hi-stage .hi-blob{top:150px;right:auto;left:50%;width:320px;height:320px;margin-left:-160px}
  .hv2 .hi-stage .hi-sq{display:none}
  .hv2 .hi-post{position:relative;left:auto;top:auto;transform:rotate(-2deg);width:min(280px,100%);margin-bottom:-24px}
  .hv2 .hi-stage .h-phone{position:relative;left:auto;right:auto;top:auto;margin:0;width:min(280px,100%);height:480px}
}

/* ---- proof band ---- */
.hv2 .hi-proof{background:var(--ink);color:#fff;border-radius:32px;padding:34px 40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.hv2 .hi-proof div{display:flex;flex-direction:column;gap:4px}
.hv2 .hi-proof b{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.04em;color:var(--yellow);line-height:1}
.hv2 .hi-proof span{color:#cfcbd6;font-size:15px;font-weight:600}
.hv2 .hi-proof-cap{text-align:center;color:var(--faint);font-size:14px;font-weight:600;margin-top:14px}
@media (max-width:760px){
  .hv2 .hi-proof{grid-template-columns:repeat(2,minmax(0,1fr));padding:26px 22px;border-radius:24px}
}

/* ---- pains -> fixes (reuses h-vs) ---- */
.hv2 .hi-vs .h-vs-col{gap:18px}
.hv2 .hi-vs .h-vs-col>small{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.hv2 .hi-vs .h-vs-off>small{color:#b91c1c}
.hv2 .hi-vs .h-vs-on>small{color:var(--yellow)}
.hv2 .hi-vs h3{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.03em;line-height:1.15;display:block}
.hv2 .hi-vs .h-vs-off p{color:var(--muted)}
.hv2 .hi-vs .h-vs-on p{color:var(--pink-tint)}

/* ---- use cases / cards ---- */
.hv2 .hi-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hv2 .hi-card{background:#fff;border:1.5px solid var(--line);border-radius:26px;padding:28px;display:flex;flex-direction:column;gap:12px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.hv2 .hi-card:hover{transform:translateY(-3px);border-color:var(--pink-tint);box-shadow:0 18px 40px rgba(20,18,26,.08)}
.hv2 .hi-card h3{font-size:20px;letter-spacing:-.02em;line-height:1.2}
.hv2 .hi-card p{color:var(--muted);font-size:16px}
.hv2 .hi-num{width:44px;height:44px;border-radius:14px;background:var(--ink);color:var(--yellow);font-weight:800;font-size:18px;display:grid;place-items:center}
.hv2 .hi-card.hi-hot{background:var(--pink);border-color:var(--pink);color:#fff}
.hv2 .hi-card.hi-hot p{color:var(--pink-tint)}
.hv2 .hi-card.hi-hot .hi-num{background:#fff;color:var(--pink)}
.hv2 .hi-kwtag{align-self:flex-start;background:var(--yellow);color:var(--ink);font-weight:800;font-size:13px;letter-spacing:.06em;padding:6px 11px;border-radius:9px}
@media (max-width:980px){.hv2 .hi-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.hv2 .hi-grid3{grid-template-columns:1fr}}

/* ---- results ---- */
.hv2 .hi-res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hv2 .hi-res>div{border-radius:26px;padding:30px;background:var(--bg-2);display:flex;flex-direction:column;gap:8px}
.hv2 .hi-res>div:nth-child(2){background:var(--pink-soft)}
.hv2 .hi-res>div:nth-child(3){background:#fef9c3}
.hv2 .hi-res b{display:block;font-size:clamp(34px,3.8vw,48px);font-weight:800;letter-spacing:-.03em;color:var(--pink);line-height:1.05;overflow-wrap:anywhere}
.hv2 .hi-res h3{font-size:19px;letter-spacing:-.02em}
.hv2 .hi-res p{color:var(--muted);font-size:15px}
@media (max-width:860px){.hv2 .hi-res{grid-template-columns:1fr}}

/* ---- testimonial ---- */
.hv2 .hi-quote{max-width:900px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px}
.hv2 .hi-quote blockquote{margin:0;font-size:clamp(22px,2.8vw,32px);font-weight:700;letter-spacing:-.025em;line-height:1.3}
.hv2 .hi-quote .h-who{border-top:0;padding-top:0;text-align:left}
.hv2 .hi-quote .h-who i{background:var(--pink);color:#fff}
.hv2 .hi-quote .h-who small{color:#cfcbd6}

/* ---- features ---- */
.hv2 .hi-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.hv2 .hi-feat{display:flex;gap:18px;align-items:flex-start;background:var(--bg-2);border-radius:24px;padding:26px}
.hv2 .hi-feat .h-ic{background:var(--pink)}
.hv2 .hi-feat h3{font-size:19px;letter-spacing:-.02em;margin-bottom:6px}
.hv2 .hi-feat p{color:var(--muted);font-size:15px}
@media (max-width:760px){.hv2 .hi-feats{grid-template-columns:1fr}}

/* ---- FAQ (details, no JS) ---- */
.hv2 .hi-faq{max-width:860px;margin:0 auto}
.hv2 .hi-qa{border:1.5px solid var(--line);border-radius:20px;margin-bottom:12px;background:#fff}
.hv2 .hi-qa summary{list-style:none;cursor:pointer;padding:21px 24px;display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:18px;font-weight:700;color:var(--ink)}
.hv2 .hi-qa summary::-webkit-details-marker{display:none}
.hv2 .hi-qa summary .h-pm{width:32px;height:32px;flex-shrink:0;border-radius:50%;background:#f5f3f7;display:grid;place-items:center;transition:transform .2s ease}
.hv2 .hi-qa[open] summary .h-pm{background:var(--pink);transform:rotate(45deg)}
.hv2 .hi-qa[open] summary .h-pm svg{stroke:#fff}
.hv2 .hi-qa .hi-a{padding:0 24px 22px;color:var(--muted);font-size:16px;margin-top:-4px}
.hv2 .hi-qa .hi-a a{color:var(--pink-ink);text-decoration:underline;text-underline-offset:2px}
@media (max-width:640px){.hv2 .hi-qa summary{font-size:16px;padding:18px}.hv2 .hi-qa .hi-a{padding:0 18px 18px}}

/* ---- related links ---- */
.hv2 .hi-rel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hv2 .hi-rel a{display:flex;flex-direction:column;gap:4px;border:1.5px solid var(--line);border-radius:20px;padding:18px 20px;background:#fff;transition:border-color .15s ease,transform .15s ease}
.hv2 .hi-rel a:hover{border-color:var(--pink);transform:translateY(-2px)}
.hv2 .hi-rel b{font-size:16px;font-weight:800}
.hv2 .hi-rel small{color:var(--muted);font-size:14px}
@media (max-width:980px){.hv2 .hi-rel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.hv2 .hi-rel{grid-template-columns:1fr}}

/* ---- safety note (dynamic industry pages) ---- */
.hv2 .hi-safe{display:flex;gap:18px;align-items:flex-start;background:var(--pink-soft);border:2px solid var(--pink-tint);border-radius:26px;padding:28px;max-width:860px;margin:0 auto}
.hv2 .hi-safe .h-ic{background:var(--pink)}
.hv2 .hi-safe h3{font-size:20px;letter-spacing:-.02em;margin-bottom:8px}
.hv2 .hi-safe p{color:var(--muted)}
.hv2 .hi-safe small{display:block;margin-top:10px;font-size:13px;font-weight:600;color:var(--faint)}
@media (max-width:560px){.hv2 .hi-safe{flex-direction:column;padding:22px}}

/* ---- industries index ---- */
.hv2 .hi-idx-hero{position:relative;overflow:hidden;padding:56px 0 72px;background:linear-gradient(180deg,var(--pink-soft),#fff)}
.hv2 .hi-idx-hero .h-head{margin-bottom:0}
.hv2 .hi-ind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hv2 .hi-ind{position:relative;display:flex;flex-direction:column;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:28px;padding:28px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.hv2 .hi-ind:hover{transform:translateY(-4px);border-color:var(--pink-tint);box-shadow:0 22px 44px rgba(20,18,26,.09)}
.hv2 .hi-ind-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.hv2 .hi-ind-ic{width:56px;height:56px;border-radius:18px;background:var(--pink-soft);display:grid;place-items:center;flex-shrink:0}
.hv2 .hi-ind-ic svg{color:var(--pink-ink) !important}
.hv2 .hi-ind-tag{font-size:12px;font-weight:800;color:var(--pink-ink);background:var(--pink-soft);padding:5px 10px;border-radius:999px;text-align:right;max-width:60%}
.hv2 .hi-ind h2{font-size:22px;letter-spacing:-.03em;line-height:1.15}
.hv2 .hi-ind .hi-tl{font-weight:700;color:var(--pink-ink);font-size:15px}
.hv2 .hi-ind p{color:var(--muted);font-size:15px;flex-grow:1}
.hv2 .hi-ind .hi-arrow{color:var(--ink);margin-top:6px}
.hv2 .hi-ind-cta{grid-column:span 2;background:var(--ink);color:#fff;border-color:var(--ink);justify-content:center}
.hv2 .hi-ind-cta p{color:#cfcbd6;flex-grow:0}
.hv2 .hi-ind-cta .hi-arrow{color:var(--yellow)}
.hv2 .hi-idx-hero .hi-h1{line-height:1.12}
@media (max-width:980px){.hv2 .hi-ind-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.hv2 .hi-ind-grid{grid-template-columns:1fr}.hv2 .hi-ind{padding:24px}.hv2 .hi-ind-cta{grid-column:auto}}
.hv2 .hi-why{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hv2 .hi-why .h-head{margin-bottom:0}
.hv2 .hi-why-list{display:grid;gap:14px}
.hv2 .hi-why-list div{display:flex;gap:14px;align-items:flex-start;background:#fff;border-radius:20px;padding:18px 20px;box-shadow:0 10px 26px rgba(20,18,26,.06);font-weight:600}
.hv2 .hi-why-list .h-ic{width:38px;height:38px;border-radius:10px}
@media (max-width:900px){.hv2 .hi-why{grid-template-columns:1fr;gap:32px}}

/* ---- integrations directory ---- */
.hv2 .hi-int-hero{position:relative;overflow:hidden;padding:48px 0 80px;background:linear-gradient(180deg,var(--pink-soft),#fff)}
.hv2 .hi-int-hero .h-head{margin-bottom:0}
.hv2 .hi-counts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hv2 .hi-counts>span{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-weight:700;font-size:14px;color:var(--muted)}
.hv2 .hi-counts b{color:var(--ink)}
.hv2 .hi-dot{width:8px;height:8px;border-radius:50%;background:#16a34a;flex-shrink:0}
.hv2 .hi-dot.hi-grey{background:#c9c3d1}
.hv2 .hi-logo{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex-shrink:0;font-weight:800;font-size:15px;color:#fff;box-shadow:0 4px 10px rgba(20,18,26,.12)}
.hv2 .hi-logo::before{content:attr(data-l)}
.hv2 .hi-int-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.hv2 .hi-int{display:flex;flex-direction:column;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:22px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.hv2 .hi-int.hi-on:hover,.hv2 a.hi-int:hover{transform:translateY(-3px);border-color:var(--pink-tint);box-shadow:0 18px 40px rgba(20,18,26,.08)}
.hv2 .hi-int.hi-off{background:#fbfafc}
.hv2 .hi-int-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.hv2 .hi-int-id{display:flex;align-items:center;gap:12px;min-width:0}
.hv2 .hi-int h3{font-size:17px;letter-spacing:-.02em;line-height:1.2}
.hv2 .hi-int-cat{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:3px}
.hv2 .hi-int p{color:var(--muted);font-size:14.5px;flex-grow:1}
.hv2 .hi-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:5px 10px;white-space:nowrap;flex-shrink:0}
.hv2 .hi-badge.hi-live{background:var(--green-soft);color:#166534}
.hv2 .hi-badge.hi-soon{background:#f1eff4;color:var(--faint)}
.hv2 .hi-act{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--pink-ink)}
.hv2 .hi-act.hi-muted{color:var(--faint);font-weight:600}
.hv2 .hi-dir-bar{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:30px}
.hv2 .hi-dir-bar .h-search{width:100%;max-width:520px;margin-bottom:0}
.hv2 .hi-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.hv2 .hi-cat{border:1.5px solid var(--line);background:#fff;color:var(--muted);font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px}
.hv2 .hi-cat.on{background:var(--ink);border-color:var(--ink);color:var(--yellow)}
.hv2 .hi-empty{text-align:center;color:var(--faint);margin-top:28px}
.hv2 .hi-store{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;background:var(--pink);color:#fff;border-radius:32px;padding:40px}
.hv2 .hi-store h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.035em}
.hv2 .hi-store p{color:var(--pink-tint);font-size:17px}
.hv2 .hi-store .h-eyebrow{background:rgba(255,255,255,.18);color:#fff}
.hv2 .hi-store-copy{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.hv2 .hi-store-card{background:#fff;color:var(--ink);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:0 20px 44px rgba(20,18,26,.2)}
.hv2 .hi-store-card small{color:var(--faint);font-weight:700;font-size:12px}
.hv2 .hi-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;background:var(--bg-2);border-radius:12px;padding:10px 12px}
.hv2 .hi-row b{font-weight:800}
@media (max-width:860px){.hv2 .hi-store{grid-template-columns:1fr;padding:28px 22px;border-radius:26px}}
.hv2 .hi-dev{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.hv2 .hi-dev-copy{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.hv2 .hi-dev .h-list{font-size:16px;color:#e7e3ec}
.hv2 .hi-dev code{background:var(--ink-line);border-radius:6px;padding:1px 7px;font-size:.9em;color:#f9a8d4}
.hv2 .hi-code{background:#0d0b12;border:1px solid var(--ink-line);border-radius:24px;padding:22px;overflow-x:auto;max-width:100%}
.hv2 .hi-code small{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#8a8494;margin-bottom:10px}
.hv2 .hi-code pre{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.7;color:#e7e3ec}
.hv2 .hi-code .k{color:#f472b6}.hv2 .hi-code .s{color:#86efac}.hv2 .hi-code .n{color:#93c5fd}
.hv2 .hi-dev>*{min-width:0}
@media (max-width:900px){.hv2 .hi-dev{grid-template-columns:1fr}}
.hv2 .hi-uc-best{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.hv2 .hi-uc-best b{color:var(--ink)}

/* ---- integration detail ---- */
.hv2 .hi-pair{display:flex;align-items:center;gap:14px}
.hv2 .hi-pair .hi-logo{width:60px;height:60px;border-radius:18px;font-size:18px}
.hv2 .hi-pair .hi-ig{background:linear-gradient(135deg,#f472b6,#e11d74 55%,#9d174d)}
.hv2 .hi-pills{display:flex;flex-wrap:wrap;gap:8px}
.hv2 .hi-pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;border-radius:999px;padding:6px 13px;border:1px solid var(--line);background:#fff;color:var(--muted)}
.hv2 .hi-pill.hi-live{background:var(--green-soft);border-color:#bbf7d0;color:#166534}
.hv2 .hi-pill.hi-road{background:var(--pink-soft);border-color:var(--pink-tint);color:var(--pink-ink)}
.hv2 .hi-pill.hi-road .hi-dot{background:var(--pink)}
.hv2 .hi-can{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hv2 .hi-can div{display:flex;gap:14px;align-items:flex-start;background:var(--bg-2);border-radius:20px;padding:20px 22px;font-size:16px}
.hv2 .hi-can .h-ic{width:34px;height:34px;border-radius:10px;background:var(--pink)}
@media (max-width:760px){.hv2 .hi-can{grid-template-columns:1fr}}
.hv2 .hi-how{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.hv2 .hi-how>div{background:#fff;border-radius:26px;padding:30px;display:flex;flex-direction:column;gap:12px;box-shadow:0 14px 30px rgba(20,18,26,.06)}
.hv2 .hi-how h3{font-size:21px;letter-spacing:-.02em}
.hv2 .hi-how p{color:var(--muted)}
.hv2 .hi-how p a{color:var(--pink-ink);text-decoration:underline;text-underline-offset:2px}
@media (max-width:760px){.hv2 .hi-how{grid-template-columns:1fr}}
.hv2 .hi-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.hv2 .hi-chips a{font-size:14px;font-weight:700;color:var(--muted);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;transition:border-color .15s ease,color .15s ease}
.hv2 .hi-chips a:hover{border-color:var(--pink);color:var(--pink-ink)}
.hv2 .hi-btns{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
@media (max-width:640px){
  .hv2 .hi-btns{flex-direction:column;align-items:stretch;width:100%}
  .hv2 .hi-btns .h-btn{width:100%}
  .hv2 .h-page .hi-wrapfix{overflow-wrap:anywhere}
}
/* ================= end GROUP B ================= */

/* ---- company pages (hc-) ---- */
/* ---- group C: company / compare / docs pages (hc-*) ----
   about, contact, affiliate, collab, changelog, compare, alternatives, docs/api.
   Shared macros: public/_hv2_company.html. */
.hv2 .hc-hero{padding-bottom:88px}
.hv2 .hc-hero h1{font-size:clamp(38px,5.4vw,66px)}
.hv2 .hc-hero .h-lead{max-width:700px}
.hv2 .hc-hero-soft{background:linear-gradient(180deg,var(--pink-soft),#fff)}
.hv2 .hc-h2-sm{font-size:clamp(30px,4vw,46px)}
.hv2 .hc-soft{background:var(--pink-soft)}
.hv2 .hc-crumbs{display:flex;gap:8px;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--faint)}
.hv2 .hc-crumbs a:hover{color:var(--pink-ink)}
.hv2 .hc-cta-row{justify-content:flex-start}
/* stat strip */
.hv2 .hc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:-40px;position:relative;z-index:4}
.hv2 .hc-stat{background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:22px 20px;display:flex;flex-direction:column;gap:4px;box-shadow:0 14px 34px rgba(20,18,26,.06)}
.hv2 .hc-stat b{font-size:clamp(28px,3vw,38px);font-weight:800;letter-spacing:-.04em;line-height:1}
.hv2 .hc-stat span{font-size:14px;font-weight:600;color:var(--muted)}
.hv2 .hc-stat:nth-child(1) b{color:var(--pink)}
/* two-column story/split */
.hv2 .hc-split{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hv2 .hc-split-top{align-items:start}
.hv2 .hc-copy{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.hv2 .hc-prose{display:flex;flex-direction:column;gap:16px;font-size:18px;color:var(--muted)}
.hv2 .hc-prose strong{color:var(--ink)}
.hv2 .hc-prose a{color:var(--pink-ink);text-decoration:underline;text-underline-offset:2px}
/* the "moment" timeline card */
.hv2 .hc-moment{background:var(--pink);border-radius:32px;padding:32px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 60px rgba(225,29,116,.25)}
.hv2 .hc-mo{background:#fff;border-radius:20px;padding:16px 18px;display:flex;gap:14px;align-items:center;box-shadow:0 12px 28px rgba(20,18,26,.12)}
.hv2 .hc-mo:nth-child(2){margin-left:28px}
.hv2 .hc-mo:nth-child(3){margin-left:56px}
.hv2 .hc-mo b{display:block;font-size:16px}
.hv2 .hc-mo small{color:var(--faint);font-size:13px;font-weight:600}
.hv2 .hc-mo .hc-t{margin-left:auto;font-size:12px;font-weight:800;background:var(--ink);color:var(--yellow);padding:5px 10px;border-radius:999px;white-space:nowrap}
.hv2 .hc-moment-foot{color:var(--pink-tint);font-weight:700;font-size:15px;text-align:center;margin-top:6px}
/* generic card grids */
.hv2 .hc-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.hv2 .hc-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hv2 .hc-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.hv2 .hc-card{background:#fff;border:1.5px solid var(--line);border-radius:26px;padding:28px;display:flex;flex-direction:column;gap:12px}
.hv2 .hc-card h3{font-size:20px;letter-spacing:-.02em;line-height:1.2}
.hv2 .hc-card p{color:var(--muted);font-size:16px}
.hv2 .hc-card-link{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.hv2 .hc-card-link:hover{transform:translateY(-3px);border-color:var(--pink-tint);box-shadow:0 18px 36px rgba(20,18,26,.08)}
.hv2 .hc-card .hc-go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--pink-ink);font-size:15px}
.hv2 .hc-tint-violet{background:#f5f3ff;border-color:#f5f3ff}
.hv2 .hc-tint-yellow{background:#fef9c3;border-color:#fef9c3}
.hv2 .hc-tint-green{background:#ecfdf5;border-color:#ecfdf5}
.hv2 .hc-tint-pink{background:var(--pink-soft);border-color:var(--pink-soft)}
.hv2 .hc-card-pink{background:var(--pink);border-color:var(--pink);color:#fff}
.hv2 .hc-card-pink p{color:var(--pink-tint)}
.hv2 .hc-card-ink{background:var(--ink);border-color:var(--ink);color:#fff}
.hv2 .hc-card-ink p{color:#cfcbd6}
/* dark trust section list */
.hv2 .hc-dark-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.hv2 .hc-dark-list .h-feat{align-items:flex-start;font-weight:600;font-size:15px;line-height:1.45}
.hv2 .hc-dark-list .h-ic{margin-top:-2px}
.hv2 .hc-dark-note{color:#cfcbd6;font-size:16px}
.hv2 .hc-dark-note a{color:#f9a8d4;text-decoration:underline;text-underline-offset:2px}
/* contact */
.hv2 .hc-contact{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
.hv2 .hc-form-card{background:#fff;border:1.5px solid var(--line);border-radius:32px;padding:40px;box-shadow:0 24px 50px rgba(20,18,26,.07);display:flex;flex-direction:column;gap:8px}
.hv2 .hc-form-card h2{font-size:clamp(26px,3vw,34px)}
.hv2 .hc-form-card>p{color:var(--muted)}
.hv2 .hc-form{display:flex;flex-direction:column;gap:18px;margin-top:18px}
.hv2 .hc-row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hv2 .hc-field{display:flex;flex-direction:column;gap:7px}
.hv2 .hc-field label{font-size:14px;font-weight:700;color:var(--ink)}
.hv2 .hc-field input,.hv2 .hc-field select,.hv2 .hc-field textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:14px;padding:13px 15px;outline:none;transition:border-color .15s ease,box-shadow .15s ease;box-sizing:border-box}
.hv2 .hc-field textarea{resize:vertical;min-height:140px}
.hv2 .hc-field input:focus,.hv2 .hc-field select:focus,.hv2 .hc-field textarea:focus{border-color:var(--pink);box-shadow:0 0 0 4px var(--pink-tint)}
.hv2 .hc-submit{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding-top:4px}
.hv2 .hc-submit small{font-size:14px;font-weight:600;color:var(--faint)}
.hv2 .hc-ok{display:flex;gap:12px;align-items:center;background:var(--green-soft);color:#166534;font-weight:700;border-radius:16px;padding:14px 16px;margin-top:10px}
.hv2 .hc-ok .h-ic{width:34px;height:34px;border-radius:10px;background:var(--green)}
.hv2 .hc-side{display:flex;flex-direction:column;gap:16px}
.hv2 .hc-help{display:flex;gap:14px;align-items:flex-start;background:var(--bg-2);border-radius:22px;padding:20px}
.hv2 .hc-help h3{font-size:17px;letter-spacing:-.01em;line-height:1.25}
.hv2 .hc-help p{font-size:15px;color:var(--muted)}
.hv2 .hc-help a{font-size:15px;font-weight:700;color:var(--pink-ink)}
.hv2 .hc-help .h-ic{width:42px;height:42px}
.hv2 .hc-topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.hv2 .hc-topics span{background:#fff;border:1px solid var(--line);font-size:13px;font-weight:700;padding:6px 11px;border-radius:999px;color:var(--muted)}
/* reward tracks (affiliate) */
.hv2 .hc-tracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:980px;margin-inline:auto}
.hv2 .hc-tracks .h-plan{gap:16px}
.hv2 .hc-tracks .h-plan h3{font-size:clamp(26px,3vw,34px);letter-spacing:-.03em}
.hv2 .hc-tracks .h-plan .h-sub{min-height:0;font-size:16px}
.hv2 .hc-tracks .h-plan .h-list{font-size:16px}
.hv2 .hc-track-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--pink-soft)}
.hv2 .h-pro .hc-track-ic{background:rgba(255,255,255,.18)}
.hv2 .hc-small{font-size:14px;color:var(--faint);text-align:center;margin-top:26px}
.hv2 .hc-plan-pills{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hv2 .hc-plan-pill{display:flex;gap:12px;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:14px 18px;text-align:left;max-width:440px}
.hv2 .hc-plan-pill .h-ic{width:40px;height:40px;background:var(--pink)}
.hv2 .hc-plan-pill b{display:block;font-size:16px}
.hv2 .hc-plan-pill small{font-size:14px;color:var(--muted)}
.hv2 .hc-steps4{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.hv2 .hc-steps4 .h-st{padding:26px}
.hv2 .hc-steps4 .h-st h3{font-size:21px}
.hv2 .hc-steps4 .h-st p{font-size:16px}
/* tables */
.hv2 .hc-tbl{min-width:640px}
.hv2 .hc-tbl td,.hv2 .hc-tbl th{vertical-align:middle}
.hv2 .hc-tbl .hc-yes,.hv2 .hc-tbl .hc-no{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%}
.hv2 .hc-tbl .hc-yes{background:var(--green-soft)}
.hv2 .hc-tbl .h-us .hc-yes{background:var(--pink)}
.hv2 .hc-tbl .hc-no{background:#f5f3f7}
.hv2 .hc-tbl .hc-val{display:inline-flex;gap:8px;align-items:center;justify-content:center}
.hv2 .hc-tbl-left th,.hv2 .hc-tbl-left td{text-align:left}
.hv2 .hc-tbl-left thead .h-us{border-radius:22px 22px 0 0}
.hv2 .hc-tbl-foot{font-size:13px;color:var(--faint);text-align:center;margin-top:14px}
/* compare / alternatives */
.hv2 .hc-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}
.hv2 .hc-fact{background:#fff;border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:6px;border:1.5px solid var(--line)}
.hv2 .hc-fact small{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.hv2 .hc-fact b{font-size:22px;letter-spacing:-.02em;line-height:1.2}
.hv2 .hc-fact span{font-size:15px;color:var(--muted)}
.hv2 .hc-fact.hc-win{background:var(--pink);border-color:var(--pink);color:#fff}
.hv2 .hc-fact.hc-win small,.hv2 .hc-fact.hc-win span{color:var(--pink-tint)}
.hv2 .hc-verdict{background:var(--ink);color:#fff;border-radius:32px;padding:44px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
.hv2 .hc-verdict .h-ic{width:64px;height:64px;border-radius:20px;background:var(--pink)}
.hv2 .hc-verdict h2{font-size:clamp(26px,3vw,36px);margin-bottom:12px}
.hv2 .hc-verdict p{color:#d6d1dc;font-size:18px}
.hv2 .hc-verdict .h-hero-ctas{justify-content:flex-start;margin-top:22px}
.hv2 .hc-answer{background:#fff;border:2px solid var(--ink);box-shadow:0 6px 0 var(--ink);border-radius:26px;padding:30px;display:flex;flex-direction:column;gap:12px;max-width:880px;margin:0 auto}
.hv2 .hc-answer .h-eyebrow{align-self:flex-start}
.hv2 .hc-answer p{font-size:18px;color:var(--muted)}
.hv2 .hc-answer strong{color:var(--ink)}
.hv2 .hc-tools{display:flex;flex-direction:column;gap:18px;max-width:980px;margin:0 auto}
.hv2 .hc-tool{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:start;background:#fff;border:1.5px solid var(--line);border-radius:28px;padding:28px}
.hv2 .hc-tool .hc-rank{width:56px;height:56px;border-radius:16px;background:var(--bg-2);display:grid;place-items:center;font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--muted)}
.hv2 .hc-tool h2,.hv2 .hc-tool h3{font-size:24px;letter-spacing:-.03em;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hv2 .hc-tool .hc-tagline{font-weight:700;color:var(--pink-ink);margin-top:4px}
.hv2 .hc-tool .hc-desc{color:var(--muted);margin-top:12px}
.hv2 .hc-tool .hc-best{font-size:15px;color:var(--faint);margin-top:10px}
.hv2 .hc-tool .hc-best b{color:var(--ink)}
.hv2 .hc-tool.hc-top{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 30px 60px rgba(225,29,116,.25)}
.hv2 .hc-tool.hc-top .hc-rank{background:var(--ink);color:var(--yellow)}
.hv2 .hc-tool.hc-top .hc-tagline{color:var(--yellow)}
.hv2 .hc-tool.hc-top .hc-desc,.hv2 .hc-tool.hc-top .hc-best{color:var(--pink-tint)}
.hv2 .hc-tool.hc-top .hc-best b{color:#fff}
.hv2 .hc-pick{font-size:12px;font-weight:800;padding:5px 11px;border-radius:999px;background:var(--yellow);color:var(--ink);letter-spacing:.04em;text-transform:uppercase}
.hv2 .hc-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.hv2 .hc-chips a{display:inline-flex;gap:8px;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:10px 16px;font-weight:700;font-size:15px}
.hv2 .hc-chips a:hover{border-color:var(--pink);color:var(--pink-ink)}
/* changelog */
.hv2 .hc-ping{display:inline-flex;align-items:center;gap:8px}
.hv2 .hc-filter{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.hv2 .hc-filter button{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:#fff;color:var(--muted);font-size:14px;font-weight:700;padding:8px 14px;border-radius:999px}
.hv2 .hc-filter button i{width:8px;height:8px;border-radius:50%}
.hv2 .hc-filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.hv2 .hc-cl{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:56px}
.hv2 .hc-cl-month{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:start}
.hv2 .hc-cl-head{position:sticky;top:96px;display:flex;flex-direction:column;gap:6px}
.hv2 .hc-cl-head h2{font-size:28px;letter-spacing:-.03em}
.hv2 .hc-cl-head span{font-size:14px;font-weight:700;color:var(--faint)}
.hv2 .hc-cl-list{display:flex;flex-direction:column;gap:16px;border-left:2px solid var(--pink-tint);padding-left:26px}
.hv2 .hc-cl-entry{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:24px 26px;display:flex;flex-direction:column;gap:10px}
.hv2 .hc-cl-entry::before{content:"";position:absolute;left:-36px;top:30px;width:16px;height:16px;border-radius:50%;background:var(--pink);border:4px solid #fff;box-shadow:0 0 0 2px var(--pink-tint)}
.hv2 .hc-cl-entry[hidden],.hv2 .hc-cl-month[hidden]{display:none}
.hv2 .hc-cl-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hv2 .hc-cl-meta time{font-size:14px;font-weight:700;color:var(--faint)}
.hv2 .hc-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;border:1px solid transparent}
.hv2 .hc-cl-entry h3{font-size:21px;letter-spacing:-.02em;line-height:1.25}
.hv2 .hc-cl-entry p{color:var(--muted)}
.hv2 .hc-cl-links{display:flex;flex-wrap:wrap;gap:14px}
.hv2 .hc-cl-links a{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:var(--pink-ink)}
.hv2 .hc-cl-empty{text-align:center;color:var(--faint);font-weight:600}
/* collab hero visual */
.hv2 .hc-vis{position:relative;height:560px}
.hv2 .hc-vis .h-blob{position:absolute;left:50%;top:50px;width:420px;height:420px;margin-left:-210px;border-radius:50%;background:#fbcfe8}
.hv2 .hc-vis .h-phone{left:50%;margin-left:-140px;top:0;width:280px;height:550px;z-index:2}
.hv2 .hc-reel{position:relative;flex-grow:1;background:linear-gradient(160deg,#f472b6,#e11d74 45%,#7c3aed);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:16px}
.hv2 .hc-reel-top{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px}
.hv2 .hc-reel-top i{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid #fde68a;flex-shrink:0}
.hv2 .hc-reel-top i+i{margin-left:-16px;background:var(--ink)}
.hv2 .hc-reel-top small{display:block;font-weight:600;font-size:11px;opacity:.85}
.hv2 .hc-reel-mid{align-self:center;width:64px;height:64px;border-radius:50%;background:rgba(20,18,26,.35);display:grid;place-items:center}
.hv2 .hc-reel-cap{font-size:13px;line-height:1.4}
.hv2 .hc-reel-cap b{display:block;font-size:15px;margin-bottom:4px}
.hv2 .hc-vis .h-chip{z-index:4}
.hv2 .hc-vc1{left:0;top:70px;transform:rotate(-4deg)}
.hv2 .hc-vc2{right:0;top:300px;transform:rotate(3deg)}
.hv2 .hc-hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hv2 .hc-hero-split .h-hero-copy{align-items:flex-start;text-align:left}
.hv2 .hc-hero-split .h-hero-ctas,.hv2 .hc-hero-split .h-micro{justify-content:flex-start}
.hv2 .hc-tiers{display:flex;gap:12px;flex-wrap:wrap}
.hv2 .hc-tier{flex:1 1 180px;background:var(--pink-soft);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:4px}
.hv2 .hc-tier b{font-size:28px;letter-spacing:-.04em;color:var(--pink)}
.hv2 .hc-tier span{font-size:15px;font-weight:600;color:var(--muted)}
.hv2 .hc-tier.hc-tier-top{background:var(--ink)}
.hv2 .hc-tier.hc-tier-top b{color:var(--yellow)}
.hv2 .hc-tier.hc-tier-top span{color:#cfcbd6}
.hv2 .hc-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:17px}
.hv2 .hc-check li{display:flex;gap:12px;align-items:flex-start}
.hv2 .hc-check li svg{flex-shrink:0;margin-top:3px}
.hv2 .hc-check strong{color:var(--ink)}
/* docs */
.hv2 .hc-docs-hero{padding-top:56px;padding-bottom:40px;background:linear-gradient(180deg,var(--pink-soft),#fff)}
.hv2 .hc-docs-hero .hc-copy{max-width:760px}
.hv2 .hc-docs-hero h1{font-size:clamp(36px,5vw,58px)}
.hv2 .hc-kv{display:flex;flex-wrap:wrap;gap:10px}
.hv2 .hc-kv span{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:700;color:var(--muted)}
.hv2 .hc-kv code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--ink)}
.hv2 .hc-docs{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start;padding-block:48px 104px}
.hv2 .hc-toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:4px;font-size:15px}
.hv2 .hc-toc p{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.hv2 .hc-toc a{display:block;padding:7px 12px;border-radius:10px;font-weight:600;color:var(--muted)}
.hv2 .hc-toc a:hover{background:var(--pink-soft);color:var(--pink-ink)}
.hv2 .hc-toc .hc-sub{padding-left:24px;font-size:14px;font-weight:500}
.hv2 .hc-toc-m{display:none}
.hv2 .hc-doc{min-width:0;font-size:17px;line-height:1.7;color:var(--muted)}
.hv2 .hc-doc :where(p,ul,pre){margin:0 0 18px}
.hv2 .hc-doc h2{font-size:clamp(28px,3vw,36px);color:var(--ink);margin:56px 0 18px;padding-top:28px;border-top:1px solid var(--line);scroll-margin-top:96px}
.hv2 .hc-doc>h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.hv2 .hc-toc-m{margin-bottom:28px}
.hv2 .hc-doc h3{font-size:20px;letter-spacing:-.02em;line-height:1.3;color:var(--ink);margin:34px 0 12px;scroll-margin-top:96px}
.hv2 .hc-doc h4{font-size:16px;font-weight:800;color:var(--ink);margin:22px 0 10px}
.hv2 .hc-doc strong{color:var(--ink)}
.hv2 .hc-doc a{color:var(--pink-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.hv2 .hc-doc ul{padding-left:22px}
.hv2 .hc-doc li{margin-bottom:6px}
.hv2 .hc-doc :not(pre)>code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;background:var(--pink-soft);color:var(--pink-ink);padding:2px 6px;border-radius:6px;overflow-wrap:anywhere}
.hv2 .hc-doc h3 code{font-size:.9em;background:var(--ink);color:#fff;padding:4px 10px;border-radius:8px}
.hv2 .hc-doc pre{background:var(--ink);color:#f3f1f6;border-radius:18px;padding:20px 22px;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:14px;line-height:1.6;box-shadow:0 14px 30px rgba(20,18,26,.12)}
.hv2 .hc-doc pre code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre}
.hv2 .hc-doc .hc-help-box{background:var(--pink-soft);border-radius:24px;padding:26px;margin-top:40px}
.hv2 .hc-doc .hc-help-box h2{border:0;padding:0;margin:0 0 8px;font-size:24px}
.hv2 .hc-doc .hc-help-box p{margin:0}
@media (max-width:1100px){
  .hv2 .hc-grid4,.hv2 .hc-steps4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .hv2 .hc-split,.hv2 .hc-contact,.hv2 .hc-hero-split{grid-template-columns:1fr;gap:40px}
  .hv2 .hc-hero-split .h-hero-copy{align-items:center;text-align:center}
  .hv2 .hc-hero-split .h-hero-ctas,.hv2 .hc-hero-split .h-micro{justify-content:center}
  .hv2 .hc-grid3{grid-template-columns:1fr 1fr}
  .hv2 .hc-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hv2 .hc-docs{grid-template-columns:1fr;gap:24px;padding-top:24px}
  .hv2 .hc-toc{display:none}
  .hv2 .hc-toc-m{display:block;border:1.5px solid var(--line);border-radius:18px;padding:4px 16px;background:#fff}
  .hv2 .hc-toc-m summary{cursor:pointer;font-weight:800;padding:12px 0}
  .hv2 .hc-toc-m .hc-toc{display:flex;position:static;padding-bottom:12px}
  .hv2 .hc-cl-month{grid-template-columns:1fr;gap:16px}
  .hv2 .hc-cl-head{position:static;flex-direction:row;align-items:baseline;gap:12px}
}
@media (max-width:860px){
  .hv2 .hc-tracks,.hv2 .hc-grid2,.hv2 .hc-facts{grid-template-columns:1fr}
  .hv2 .hc-verdict{grid-template-columns:1fr;padding:30px 26px}
  .hv2 .hc-tool{grid-template-columns:auto 1fr;padding:24px}
  .hv2 .hc-tool>.h-btn{grid-column:1/-1;justify-self:start}
}
@media (max-width:640px){
  .hv2 .hc-hero{padding-bottom:64px}
  .hv2 .hc-hero h1{font-size:max(30px,8.2vw);letter-spacing:-.045em}
  .hv2 .hc-grid3,.hv2 .hc-grid4,.hv2 .hc-steps4,.hv2 .hc-dark-list,.hv2 .hc-row2{grid-template-columns:1fr}
  .hv2 .hc-stats{margin-top:-28px;gap:10px}
  .hv2 .hc-stat{padding:16px 14px;border-radius:18px}
  .hv2 .hc-form-card{padding:26px 20px;border-radius:26px}
  .hv2 .hc-submit .h-btn{width:100%}
  .hv2 .hc-moment{padding:20px}
  .hv2 .hc-mo:nth-child(2),.hv2 .hc-mo:nth-child(3){margin-left:0}
  .hv2 .hc-mo .hc-t{display:none}
  .hv2 .hc-vis{height:500px}
  .hv2 .hc-vis .h-blob{width:320px;height:320px;margin-left:-160px}
  .hv2 .hc-vis .h-phone{width:250px;height:490px;margin-left:-125px}
  .hv2 .hc-vc1,.hv2 .hc-vc2{display:none}
  .hv2 .hc-tool{grid-template-columns:1fr;gap:14px}
  .hv2 .hc-tool .hc-rank{width:46px;height:46px;font-size:18px}
  .hv2 .hc-answer{padding:22px}
  .hv2 .hc-doc{font-size:16px}
  .hv2 .hc-doc pre{font-size:13px;padding:16px;border-radius:14px;margin-inline:-4px}
  .hv2 .hc-cta-row{flex-direction:column;width:100%}
  .hv2 .hc-cta-row .h-btn{width:100%;white-space:normal}
  .hv2 .hc-filter{justify-content:flex-start}
  .hv2 .hc-cl-list{padding-left:18px}
  .hv2 .hc-cl-entry{padding:20px}
  .hv2 .hc-cl-entry::before{left:-28px}
}
@media (max-width:860px){
  .hv2 .hc-vs .h-vs-arrow{display:none}
  .hv2 .hc-vs .h-vs-off{padding-bottom:32px}
  .hv2 .hc-vs .h-vs-on{padding-top:32px}
}
@media (max-width:640px){
  .hv2 .hc-tbl{min-width:0;font-size:14px}
  .hv2 .hc-tbl th,.hv2 .hc-tbl td{padding:12px 8px}
  .hv2 .hc-tbl thead th{font-size:15px}
  .hv2 .hc-tbl thead .h-us{font-size:16px}
  .hv2 .hc-tbl .h-oth{font-size:14px}
  .hv2 .hc-tbl.hc-tbl-left{min-width:560px}
}
/* ---- end group C ---- */

/* ---- content pages (hl-) ---- */
/* ================= CONTENT PAGES (group D, hl-*) =================
   /privacy, /terms, /refund-policy, /blog, /blog/<slug>, /help, /help/<slug>.
   Templates: public/_hv2_content.html (macros), public/{privacy,terms,refund}.html,
   blog/{index,help_index,show}.html. Builds on the HOME PAGE v2 tokens. */
.hv2 .hl-h1{font-size:clamp(34px,5.4vw,60px);letter-spacing:-.045em}
.hv2 .hl-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--faint)}
.hv2 .hl-crumbs a{color:var(--muted)}
.hv2 .hl-crumbs a:hover{color:var(--pink-ink)}
.hv2 .hl-crumbs span[aria-hidden]{color:#cfc9d6}
.hv2 a.h-eyebrow:hover{background:#fbcfe8}

/* tones for covers / icon tiles */
.hv2 .hl-t-pink{background:var(--pink);color:#fff}
.hv2 .hl-t-violet{background:#ede9fe;color:#5b21b6}
.hv2 .hl-t-yellow{background:#fef3c7;color:#92400e}
.hv2 .hl-t-green{background:#dcfce7;color:#166534}
.hv2 .hl-t-orange{background:#ffedd5;color:#9a3412}
.hv2 .hl-t-ink{background:var(--ink);color:var(--yellow)}

/* ---------- index heroes (/blog, /help) ---------- */
.hv2 .hl-ihero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--pink-soft),#fff);padding:64px 0 40px}
.hv2 .hl-ihero::before{content:"";position:absolute;left:7%;top:70px;width:58px;height:58px;border-radius:18px;background:var(--yellow);transform:rotate(-12deg)}
.hv2 .hl-ihero::after{content:"";position:absolute;right:8%;top:120px;width:42px;height:42px;border-radius:50%;background:#c4b5fd}
.hv2 .hl-ihero .h-wrap{position:relative;z-index:1}
.hv2 .hl-ihero .h-head{margin-bottom:28px;gap:16px}
.hv2 .hl-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.hv2 .hl-chip{display:inline-flex;align-items:center;padding:10px 18px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-size:15px;font-weight:700;transition:border-color .15s ease,background .15s ease}
.hv2 .hl-chip:hover{border-color:var(--pink);color:var(--pink-ink)}
.hv2 .hl-chip[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--yellow)}
.hv2 .hl-search{position:relative;max-width:620px;margin:0 auto 22px;display:flex;align-items:center;gap:10px;border:2px solid var(--ink);border-radius:18px;padding:6px 18px;background:#fff;box-shadow:0 5px 0 var(--ink)}
.hv2 .hl-search-ic{color:var(--faint);display:grid}
.hv2 .hl-search input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:inherit;font-size:17px;padding:12px 0;color:var(--ink)}
.hv2 .hl-search:focus-within{box-shadow:0 5px 0 var(--pink);border-color:var(--pink)}

/* ---------- lists ---------- */
.hv2 .hl-list{padding:40px 0 96px}
.hv2 .hl-empty{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:56px 24px;border:2px dashed var(--line);border-radius:28px;color:var(--muted);font-weight:600}
.hv2 .hl-empty-ic{width:56px;height:56px;border-radius:16px;background:var(--pink-tint);color:var(--pink-ink);display:grid;place-items:center}
.hv2 .hl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--faint)}
.hv2 .hl-cat{background:var(--pink-tint);color:var(--pink-ink);font-weight:800;padding:3px 10px;border-radius:999px;font-size:12px}
.hv2 .hl-more{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--pink-ink);font-size:15px}
.hv2 .hl-flag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:var(--yellow);color:var(--ink);font-size:12px;font-weight:800;letter-spacing:.04em;padding:5px 11px;border-radius:999px}

/* featured post */
.hv2 .hl-feat{display:grid;grid-template-columns:1.05fr 1fr;border-radius:32px;overflow:hidden;background:#fff;border:1.5px solid var(--line);box-shadow:0 24px 50px rgba(20,18,26,.08);margin-bottom:40px;transition:transform .2s ease,box-shadow .2s ease}
.hv2 .hl-feat:hover{transform:translateY(-3px);box-shadow:0 30px 60px rgba(20,18,26,.12)}
.hv2 .hl-feat-vis{position:relative;min-height:340px;background-size:cover;background-position:center}
.hv2 .hl-feat-art{position:absolute;inset:0;overflow:hidden}
.hv2 .hl-feat-art::before{content:"";position:absolute;right:-120px;bottom:-160px;width:460px;height:460px;border-radius:50%;background:var(--pink-mid)}
.hv2 .hl-feat-sq{position:absolute;left:36px;top:34px;width:50px;height:50px;border-radius:14px;background:var(--yellow);transform:rotate(-14deg)}
.hv2 .hl-feat-dm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);width:250px;background:#fff;color:var(--ink);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:8px;box-shadow:0 24px 48px rgba(20,18,26,.22)}
.hv2 .hl-feat-dm-l{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--pink-ink)}
.hv2 .hl-feat-dm b{font-size:22px;letter-spacing:-.03em;line-height:1.15}
.hv2 .hl-feat-dm-b{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;text-align:center;font-weight:700;color:var(--link);font-size:14px}
.hv2 .hl-feat-copy{padding:44px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.hv2 .hl-feat-title{font-size:clamp(26px,3vw,38px);letter-spacing:-.035em;line-height:1.1}
.hv2 .hl-feat-ex{font-size:17px;color:var(--muted)}
.hv2 .hl-feat-btn{align-self:flex-start;margin-top:6px}

/* card grid */
.hv2 .hl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.hv2 .hl-card{display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--line);border-radius:26px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.hv2 .hl-card:hover{transform:translateY(-4px);border-color:#f9a8d4;box-shadow:0 20px 40px rgba(20,18,26,.08)}
.hv2 .hl-cover{position:relative;height:150px;background-size:cover;background-position:center;display:flex;align-items:flex-end;justify-content:space-between;padding:16px 18px;overflow:hidden}
.hv2 .hl-cover::after{content:"";position:absolute;right:-40px;top:-50px;width:150px;height:150px;border-radius:50%;background:currentColor;opacity:.1}
.hv2 .hl-cover-ic{width:46px;height:46px;border-radius:14px;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 8px 20px rgba(20,18,26,.12);transform:rotate(-6deg)}
.hv2 .hl-cover-cat{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
.hv2 .hl-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.hv2 .hl-card-title{font-size:21px;letter-spacing:-.025em;line-height:1.22}
.hv2 .hl-card-ex{color:var(--muted);font-size:15px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hv2 .hl-card .hl-more{margin-top:auto;padding-top:4px}
.hv2 .hl-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:48px;flex-wrap:wrap}
.hv2 .hl-pg{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:14px;border:2px solid var(--ink);font-weight:700;background:#fff}
.hv2 .hl-pg:hover{background:var(--ink);color:#fff}
.hv2 .hl-pg-at{font-size:15px;font-weight:600;color:var(--faint)}
.hv2 .hl-crosslink{display:flex;align-items:center;gap:18px;margin-top:56px;padding:24px 28px;background:var(--pink-soft);border-radius:26px}
.hv2 .hl-crosslink>div{flex:1;min-width:0}
.hv2 .hl-crosslink b{font-size:18px;letter-spacing:-.01em}
.hv2 .hl-crosslink p{color:var(--muted);font-size:15px}
.hv2 .hl-cl-ic{width:48px;height:48px;border-radius:14px;background:#fff;color:var(--pink);display:grid;place-items:center;flex-shrink:0}

/* help center */
.hv2 .hl-start{display:flex;align-items:center;gap:24px;background:var(--pink);color:#fff;border-radius:30px;padding:32px 36px;margin-bottom:48px;position:relative;overflow:hidden;box-shadow:0 24px 50px rgba(225,29,116,.25)}
.hv2 .hl-start::before{content:"";position:absolute;right:-90px;top:-120px;width:340px;height:340px;border-radius:50%;background:var(--pink-mid)}
.hv2 .hl-start>*{position:relative}
.hv2 .hl-start-num{width:64px;height:64px;border-radius:18px;background:var(--ink);color:var(--yellow);display:grid;place-items:center;flex-shrink:0}
.hv2 .hl-start-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.hv2 .hl-start-title{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.03em;line-height:1.15}
.hv2 .hl-start-copy p{color:var(--pink-tint)}
.hv2 .hl-start-btn{flex-shrink:0}
.hv2 .hl-groups{display:flex;flex-direction:column;gap:52px}
.hv2 .hl-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px;padding-bottom:14px;border-bottom:1.5px solid var(--line)}
.hv2 .hl-group-head h2{font-size:clamp(24px,2.6vw,30px);letter-spacing:-.03em}
.hv2 .hl-group-head span{font-size:14px;font-weight:700;color:var(--faint);white-space:nowrap}
.hv2 .hl-ggrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hv2 .hl-guide{display:flex;align-items:flex-start;gap:16px;padding:22px;border:1.5px solid var(--line);border-radius:22px;background:#fff;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.hv2 .hl-guide:hover{border-color:#f9a8d4;box-shadow:0 14px 30px rgba(20,18,26,.07);transform:translateY(-2px)}
.hv2 .hl-guide-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.hv2 .hl-guide-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.hv2 .hl-guide-copy h3{font-size:18px;letter-spacing:-.02em;line-height:1.25}
.hv2 .hl-guide-copy p{font-size:15px;color:var(--muted)}
.hv2 .hl-guide-copy small{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--faint)}
.hv2 .hl-guide-go{width:34px;height:34px;border-radius:50%;background:#f5f3f7;display:grid;place-items:center;flex-shrink:0;transition:background .15s ease,color .15s ease}
.hv2 .hl-guide:hover .hl-guide-go{background:var(--pink);color:#fff}
.hv2 .hl-noresults{text-align:center;color:var(--muted);font-weight:600;padding:32px 0}
.hv2 .h-page [data-hl-item][hidden],.hv2 .h-page [data-hl-group][hidden]{display:none}

/* ---------- legal documents ---------- */
.hv2 .hl-lhero{background:linear-gradient(180deg,var(--pink-soft),#fff);padding:56px 0 44px;border-bottom:1px solid var(--line)}
.hv2 .hl-lhero .h-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.hv2 .hl-lhero .h-lead{max-width:680px}
.hv2 .hl-upd{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:700;color:var(--muted)}
.hv2 .hl-upd svg{color:var(--pink)}
.hv2 .hl-doctabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.hv2 .hl-doctabs a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font-size:15px;font-weight:700;color:var(--muted)}
.hv2 .hl-doctabs a:hover{border-color:var(--pink);color:var(--pink-ink)}
.hv2 .hl-doctabs a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
.hv2 .hl-doctabs a[aria-current="page"] svg{color:var(--yellow)}
.hv2 .hl-doc{display:grid;grid-template-columns:280px minmax(0,1fr);gap:64px;align-items:start;padding-block:56px 104px}
.hv2 .hl-legal-body{max-width:760px}

/* shared aside + table of contents (legal + posts) */
.hv2 .hl-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 116px);overflow-y:auto;scrollbar-width:thin}
.hv2 .hl-toc{background:var(--bg-2);border-radius:22px;padding:6px}
.hv2 .hl-toc summary{list-style:none;display:flex;align-items:center;gap:8px;padding:12px 14px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.hv2 .hl-toc summary::-webkit-details-marker{display:none}
.hv2 .hl-toc summary svg{color:var(--pink)}
.hv2 .hl-toc-n{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--faint)}
.hv2 .hl-toc ol{list-style:none;margin:0;padding:0 6px 8px;display:flex;flex-direction:column;gap:2px}
.hv2 .hl-toc ol a{display:flex;gap:10px;align-items:baseline;padding:8px 10px;border-radius:10px;font-size:14px;font-weight:600;line-height:1.35;color:var(--muted);transition:background .15s ease,color .15s ease}
.hv2 .hl-toc ol a:hover{background:#fff;color:var(--ink)}
.hv2 .hl-toc ol a.is-on{background:#fff;color:var(--pink-ink);box-shadow:inset 3px 0 0 var(--pink)}
.hv2 .hl-sn{flex-shrink:0;width:22px;height:22px;border-radius:7px;background:var(--ink);color:var(--yellow);font-size:12px;font-weight:800;display:grid;place-items:center;align-self:flex-start}
.hv2 .hl-help,.hv2 .hl-side-cta{border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:8px}
.hv2 .hl-help{background:var(--pink-soft)}
.hv2 .hl-help b,.hv2 .hl-side-cta b{font-size:16px;letter-spacing:-.01em}
.hv2 .hl-help p{font-size:14px;color:var(--muted)}
.hv2 .hl-mail{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:4px;background:var(--ink);color:#fff;font-size:14px;font-weight:700;padding:10px 14px;border-radius:12px}
.hv2 .hl-mail:hover{background:var(--pink-deep)}
.hv2 .hl-side-cta{background:var(--ink);color:#fff}
.hv2 .hl-side-cta p{font-size:14px;color:#cfcbd6}
.hv2 .hl-side-cta .h-btn{margin-top:6px;padding:12px 18px;font-size:15px}
.hv2 .hl-side-ic{width:40px;height:40px;border-radius:12px;background:#3b1530;color:#f9a8d4;display:grid;place-items:center}

/* ---------- long-form typography (legal text + CMS HTML) ---------- */
.hv2 .hl-prose{font-size:17px;line-height:1.75;color:#2e2a36;overflow-wrap:break-word}
.hv2 .hl-prose>:first-child{margin-top:0}
.hv2 .hl-prose h2{font-size:clamp(24px,2.6vw,30px);letter-spacing:-.03em;line-height:1.2;color:var(--ink);margin:56px 0 16px;scroll-margin-top:96px}
.hv2 .hl-prose h3{font-size:20px;letter-spacing:-.02em;line-height:1.3;color:var(--ink);margin:34px 0 12px}
.hv2 .hl-prose h4{font-size:17px;font-weight:800;color:var(--ink);margin:26px 0 10px;letter-spacing:-.01em}
.hv2 .hl-prose p{margin:0 0 18px}
.hv2 .hl-prose ul,.hv2 .hl-prose ol{margin:0 0 22px;padding-left:24px}
.hv2 .hl-prose li{margin-bottom:9px;padding-left:4px}
.hv2 .hl-prose ul>li::marker{color:var(--pink)}
.hv2 .hl-prose ol>li::marker{color:var(--pink-ink);font-weight:800}
.hv2 .hl-prose li>ul,.hv2 .hl-prose li>ol{margin:8px 0 4px}
.hv2 .hl-prose strong,.hv2 .hl-prose b{color:var(--ink);font-weight:700}
.hv2 .hl-prose a{color:var(--pink-ink);font-weight:600;text-decoration:underline;text-decoration-color:#f9a8d4;text-decoration-thickness:2px;text-underline-offset:3px}
.hv2 .hl-prose a:hover{color:var(--pink-deep);text-decoration-color:currentColor}
.hv2 .hl-prose hr{border:0;height:1.5px;background:var(--line);margin:40px 0}
.hv2 .hl-prose blockquote{margin:28px 0;padding:20px 24px;border-left:4px solid var(--pink);background:var(--pink-soft);border-radius:0 18px 18px 0;color:var(--ink);font-size:18px;font-weight:500}
.hv2 .hl-prose blockquote p:last-child{margin:0}
.hv2 .hl-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:#f5f3f7;border:1px solid var(--line);padding:2px 6px;border-radius:6px;color:var(--pink-deep)}
.hv2 .hl-prose pre{margin:0 0 24px;background:var(--ink);color:#f3f1f6;border-radius:18px;padding:20px 22px;overflow-x:auto;font-size:14px;line-height:1.6}
.hv2 .hl-prose pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
.hv2 .hl-prose img{max-width:100%;height:auto;border-radius:18px;border:1px solid var(--line);margin:8px 0}
.hv2 .hl-prose figure{margin:28px 0}
.hv2 .hl-prose figcaption{font-size:14px;color:var(--faint);text-align:center;margin-top:8px}
.hv2 .hl-prose iframe,.hv2 .hl-prose video{max-width:100%;border-radius:18px}
.hv2 .hl-prose table{display:block;width:100%;max-width:100%;overflow-x:auto;border-collapse:separate;border-spacing:0;margin:0 0 26px;font-size:15px;line-height:1.5;border:1.5px solid var(--line);border-radius:18px}
.hv2 .hl-prose th,.hv2 .hl-prose td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);min-width:120px}
.hv2 .hl-prose thead th,.hv2 .hl-prose tr:first-child>th{background:var(--pink-soft);color:var(--ink);font-weight:800}
.hv2 .hl-prose tr:last-child>td{border-bottom:0}
.hv2 .hl-prose tbody tr:nth-child(even)>td{background:#fcfbfd}
.hv2 .hl-prose details{border:1.5px solid var(--line);border-radius:16px;padding:14px 18px;margin:0 0 12px}
.hv2 .hl-prose summary{font-weight:700;color:var(--ink);cursor:pointer}
.hv2 .hl-callout{margin-top:32px!important;padding:22px 24px;background:var(--pink-soft);border:1.5px solid var(--pink-tint);border-radius:20px;font-size:16px}
.hv2 .hl-legal-body h2{padding-top:28px;border-top:1px solid var(--line);margin-top:44px}
.hv2 .hl-legal-body h2:first-child{padding-top:0;border-top:0}

/* ---------- post / guide page ---------- */
.hv2 .hl-phero{background:linear-gradient(180deg,var(--pink-soft),#fff);padding:48px 0 44px}
.hv2 .hl-phero-in{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.hv2 .hl-phero-in .hl-post-h1{max-width:940px}
.hv2 .hl-post-h1{font-size:clamp(32px,4.8vw,56px);line-height:1.06}
.hv2 .hl-phero .h-lead{max-width:760px}
.hv2 .hl-byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;font-size:14px;font-weight:600;color:var(--muted);margin-top:4px}
.hv2 .hl-byline>span{display:inline-flex;align-items:center;gap:7px}
.hv2 .hl-byline svg{color:var(--pink)}
.hv2 .hl-by{color:var(--ink);font-weight:700}
.hv2 .hl-by i{width:32px;height:32px;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.hv2 .hl-by i svg{color:var(--yellow)}
.hv2 .hl-hero-img{margin-bottom:8px}
.hv2 .hl-hero-img img{display:block;width:100%;max-width:1080px;height:auto;margin:0 auto;border-radius:28px;border:1px solid var(--line)}
.hv2 .hl-read{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"main aside";gap:64px;align-items:start;padding-block:40px 88px}
.hv2 .hl-read .hl-aside{grid-area:aside}
.hv2 .hl-main{grid-area:main;max-width:740px;min-width:0}
.hv2 .hl-faq{margin-top:56px;padding-top:40px;border-top:1.5px solid var(--line)}
.hv2 .hl-faq h2{font-size:clamp(24px,2.6vw,30px);letter-spacing:-.03em;margin-bottom:20px}
.hv2 .hl-qa{border:1.5px solid var(--line);border-radius:20px;margin-bottom:12px;background:#fff}
.hv2 .hl-qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-size:17px;font-weight:700;color:var(--ink)}
.hv2 .hl-qa summary::-webkit-details-marker{display:none}
.hv2 .hl-qa summary i{width:30px;height:30px;flex-shrink:0;border-radius:50%;background:#f5f3f7;display:grid;place-items:center;transition:transform .2s ease,background .2s ease}
.hv2 .hl-qa[open] summary i{background:var(--pink);color:#fff;transform:rotate(45deg)}
.hv2 .hl-qa p{padding:0 22px 20px;color:var(--muted);font-size:16px;line-height:1.65}
.hv2 .hl-back{display:inline-flex;align-items:center;gap:8px;margin-top:40px;font-weight:700;color:var(--muted)}
.hv2 .hl-back:hover{color:var(--pink-ink)}
.hv2 .hl-related{background:var(--pink-soft);padding:80px 0;margin-bottom:104px}
.hv2 .hl-rel-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.hv2 .hl-rel-head h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.04em}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .hv2 .hl-doc,.hv2 .hl-read{grid-template-columns:minmax(0,1fr);grid-template-areas:"aside" "main";gap:28px;padding-top:28px}
  .hv2 .hl-aside{position:static;max-height:none;overflow:visible}
  .hv2 .hl-help,.hv2 .hl-side-cta{display:none}
  .hv2 .hl-toc{border:1.5px solid var(--line);background:#fff}
  .hv2 .hl-toc summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);margin:-4px 4px 0 10px;transition:transform .2s ease}
  .hv2 .hl-toc[open] summary::after{transform:rotate(-135deg);margin-top:4px}
  .hv2 .hl-legal-body,.hv2 .hl-main{max-width:none}
  .hv2 .hl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hv2 .hl-feat{grid-template-columns:1fr}
  .hv2 .hl-feat-vis{min-height:260px}
}
@media (max-width:760px){
  .hv2 .hl-ihero{padding:40px 0 28px}
  .hv2 .hl-ihero::before,.hv2 .hl-ihero::after{display:none}
  .hv2 .hl-list{padding:28px 0 72px}
  .hv2 .hl-grid,.hv2 .hl-ggrid{grid-template-columns:1fr}
  .hv2 .hl-feat-copy{padding:26px 24px 28px}
  .hv2 .hl-feat-btn{width:100%}
  .hv2 .hl-start{flex-direction:column;align-items:flex-start;padding:26px 24px;gap:16px}
  .hv2 .hl-start-num{width:52px;height:52px}
  .hv2 .hl-start-btn{width:100%}
  .hv2 .hl-crosslink{flex-direction:column;align-items:flex-start;padding:22px}
  .hv2 .hl-crosslink .h-btn{width:100%}
  .hv2 .hl-chips{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin-inline:-24px;padding:2px 24px 6px;scrollbar-width:none}
  .hv2 .hl-chips::-webkit-scrollbar{display:none}
  .hv2 .hl-chip{white-space:nowrap;flex-shrink:0;font-size:14px;padding:9px 15px}
  .hv2 .hl-search input{font-size:16px}
  .hv2 .hl-lhero{padding:36px 0 32px}
  .hv2 .hl-doctabs{flex-wrap:nowrap;overflow-x:auto;width:calc(100% + 48px);margin-inline:-24px;padding:2px 24px 4px;scrollbar-width:none}
  .hv2 .hl-doctabs a{white-space:nowrap;flex-shrink:0;font-size:14px}
  .hv2 .hl-doc{padding-bottom:72px}
  .hv2 .hl-prose{font-size:16px;line-height:1.72}
  .hv2 .hl-prose h2{margin-top:44px}
  .hv2 .hl-phero{padding:32px 0 28px}
  .hv2 .hl-read{padding-bottom:64px}
  .hv2 .hl-related{padding:56px 0;margin-bottom:72px}
  .hv2 .hl-hero-img img{border-radius:20px}
}
/* ================= end CONTENT PAGES ================= */

/* industry mockups: real photos + avatars (2026-09-24) */
.hv2 .hi-faces img,.hv2 .hi-faces i{width:36px;height:36px;border-radius:50%;border:2px solid #fff;object-fit:cover;box-shadow:0 2px 6px rgba(20,18,26,.12)}
.hv2 .hi-faces img+img,.hv2 .hi-faces img+i{margin-left:-11px}
.hv2 .hi-faces i{background:#14121a;color:#fcd34d;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:800}
.hv2 .hi-pav{width:30px;height:30px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 4px #e11d74;flex-shrink:0}
.hv2 .hi-post-img.hi-photo{height:150px;display:block;background:#f3f1f6}
.hv2 .hi-post-img.hi-photo::after{background:linear-gradient(180deg,rgba(20,18,26,0) 55%,rgba(20,18,26,.35))}
.hv2 .hi-post-img.hi-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hv2 .hi-reel{position:absolute;top:8px;right:8px;z-index:1;display:inline-flex;align-items:center;gap:4px;background:rgba(20,18,26,.55);color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;backdrop-filter:blur(4px)}
.hv2 .hi-actions{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:11px;color:#6b6574}
.hv2 .hi-actions span{margin-left:auto}
.hv2 .hi-actions b{color:#14121a}
.hv2 .hi-cmts img{width:22px;height:22px;border-radius:50%;object-fit:cover;flex-shrink:0}

/* integrations cards: real logos + header that never collides (2026-09-24) */
.hv2 .hi-int-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hv2 .hi-int-name{margin-top:2px;min-width:0}
.hv2 .hi-int-name h3{margin:0;font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.2;overflow-wrap:anywhere}
.hv2 .hi-int-name .hi-int-cat{margin-top:3px}
.hv2 .hi-int .hi-badge{flex-shrink:0;white-space:nowrap}
.hv2 .hi-logo.hi-mark{background:#fff;border:1px solid #ece8f0;box-shadow:0 4px 12px rgba(20,18,26,.08)}
.hv2 .hi-logo.hi-mark::before{content:none}
.hv2 .hi-logo.hi-mark svg{width:26px;height:26px}
.hv2 .hi-pair .hi-logo.hi-mark svg{width:32px;height:32px}
.hv2 .hi-int.hi-off .hi-logo{filter:saturate(.85)}
.hv2 .hi-int.hi-off p{color:#5a5463}

/* app wordmark (2026-09 rebrand): IG + pink Msg */
.wm { font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }
.wm span { color: var(--brand); }


/* Logo strip under the hero on phones: pin the window to the screen width
   (it was growing to the full track width, so the fade edges sat off-screen
   and, with Reduce Motion on, the strip could neither animate nor scroll). */
@media (max-width:640px){
  .hv2 .h-band .h-logos{width:100%;max-width:100%;min-width:0}
  .hv2 .h-band .h-track{will-change:transform;-webkit-animation:h-marq 24s linear infinite}
}
@media (max-width:640px) and (prefers-reduced-motion: reduce){
  /* no auto-scroll: a swipeable row instead, with a visible edge hint */
  .hv2 .h-band .h-logos{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    scrollbar-width:none;padding-inline:16px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .hv2 .h-band .h-logos::-webkit-scrollbar{display:none}
  .hv2 .h-band .h-track{-webkit-animation:none;animation:none;transform:none}
  .hv2 .h-band .h-lg{scroll-snap-align:start}
}
/* Home showreel (A/B tested, see home.html) + /tour. Native <video>, custom play + mute only. */
.hv2 .h-tour{padding-bottom:40px}
.hv2 .h-tour-box{position:relative;width:100%;max-width:1080px;margin:0 auto;border-radius:28px;overflow:hidden;background:#14121a;box-shadow:0 40px 90px rgba(225,29,116,.18),0 0 0 1px rgba(20,18,26,.06);aspect-ratio:16/9}
.hv2 .h-tour-box video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.hv2 .h-tour-play{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border:0;border-radius:50%;background:#e11d74;display:grid;place-items:center;padding:0 0 0 6px;cursor:pointer;box-shadow:0 0 0 12px rgba(225,29,116,.2),0 18px 40px rgba(225,29,116,.45);transition:transform .25s,opacity .25s;animation:h-tour-pulse 2.4s ease-out infinite}
.hv2 .h-tour-play:hover{transform:scale(1.08)}
@keyframes h-tour-pulse{0%{box-shadow:0 0 0 0 rgba(225,29,116,.35),0 18px 40px rgba(225,29,116,.45)}70%{box-shadow:0 0 0 26px rgba(225,29,116,0),0 18px 40px rgba(225,29,116,.45)}100%{box-shadow:0 0 0 0 rgba(225,29,116,0),0 18px 40px rgba(225,29,116,.45)}}
.hv2 .h-tour-box.is-playing .h-tour-play{opacity:0;transform:scale(.6);pointer-events:none}
.hv2 .h-tour-mute{position:absolute;right:18px;bottom:18px;width:48px;height:48px;border:0;border-radius:50%;background:rgba(20,18,26,.55);backdrop-filter:blur(6px);display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s}
.hv2 .h-tour-box.is-playing .h-tour-mute{opacity:1;pointer-events:auto}
.hv2 .h-tour-mute .i-off,.hv2 .h-tour-mute[aria-pressed="true"] .i-on{display:none}
.hv2 .h-tour-mute[aria-pressed="true"] .i-off{display:block}
.hv2 .h-tour-cta{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:32px}
.hv2 .h-tour-cta small{color:var(--faint);font-weight:600}
.hv2 .h-tour-cta small a{color:var(--pink-ink);font-weight:700}
.ab-noreel #watch{display:none}
.hv2 .h-tour-chapters{max-width:1080px;margin:44px auto 0}
.hv2 .h-tour-chapters h2{font-size:24px;font-weight:800;margin:0 0 16px}
.hv2 .h-tour-chapters ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.hv2 .h-tour-chapters a{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:18px;background:#fff;border:1px solid #f3e8ee;color:inherit;text-decoration:none;transition:border-color .2s,transform .2s}
.hv2 .h-tour-chapters a:hover{border-color:#e11d74;transform:translateY(-2px)}
.hv2 .h-tour-chapters b{display:block;font-weight:800;margin-bottom:2px;color:var(--ink,#14121a)}
.hv2 .h-tour-chapters span{color:var(--faint);font-size:15px;line-height:1.45}
.hv2 .h-tour-ts{flex-shrink:0;background:var(--pink-tint);color:var(--pink-ink)!important;font-weight:800;font-size:13px!important;padding:4px 10px;border-radius:999px;font-variant-numeric:tabular-nums}
@media (max-width:640px){.hv2 .h-tour-box{border-radius:18px}.hv2 .h-tour-play{width:72px;height:72px;margin:-36px 0 0 -36px}.hv2 .h-tour-mute{right:10px;bottom:10px;width:40px;height:40px}}
@media (max-width:760px){.hv2 .h-tour-chapters ol{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.hv2 .h-tour-play{animation:none}}

/* ===== /best/* buyer's shortlist (article layout) ===== */
.hv2 .bp-col{max-width:780px;margin:0 auto;padding:0 20px}
.hv2 .bp-head{padding:56px 0 8px;background:linear-gradient(180deg,var(--pink-soft),#fff)}
.hv2 .bp-head h1{font-size:clamp(32px,5vw,50px);line-height:1.08;letter-spacing:-.04em;margin:14px 0 22px}
.hv2 .bp-byline{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.hv2 .bp-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.hv2 .bp-initials{display:grid;place-items:center;background:var(--ink);color:var(--yellow);font-weight:800;font-size:16px}
.hv2 .bp-by{font-weight:700;margin:0}
.hv2 .bp-by a{color:var(--pink-ink);text-decoration:underline;text-underline-offset:2px}
.hv2 .bp-dates{color:var(--muted);font-size:14px}
.hv2 .bp-intro{font-size:19px;line-height:1.65}
.hv2 .bp-jump{color:var(--muted);font-size:15px;margin-top:12px}
.hv2 .bp-body{padding-top:20px;padding-bottom:20px}
.hv2 .bp-body a{color:var(--pink-ink);text-decoration:underline;text-underline-offset:2px}
.hv2 .bp-body a.h-btn{color:#fff;text-decoration:none}
.hv2 .bp-body section{margin:48px 0}
.hv2 .bp-body h2{font-size:clamp(26px,3.4vw,34px);line-height:1.15;letter-spacing:-.03em;margin:0 0 16px}
.hv2 .bp-body h3{font-size:22px;line-height:1.25;letter-spacing:-.02em;margin:0 0 12px}
.hv2 .bp-body p{font-size:17px;line-height:1.7;margin:0 0 14px}
.hv2 .bp-takeaways,.hv2 .bp-criteria{padding-left:22px;display:grid;gap:12px;font-size:17px;line-height:1.65}
.hv2 .bp-takeaways{list-style:none;padding:24px 26px;background:var(--pink-soft);border:1.5px solid var(--pink-tint);border-radius:22px}
.hv2 .bp-takeaways li{position:relative;padding-left:22px}
.hv2 .bp-takeaways li:before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:50%;background:var(--pink)}
.hv2 .bp-cta-card{display:flex;align-items:center;gap:20px;justify-content:space-between;background:var(--ink);color:#fff;border-radius:22px;padding:24px 26px;margin:8px 0}
.hv2 .bp-cta-card p{color:#d6d3dc;font-size:15px;margin:0}
.hv2 .bp-cta-card .bp-cta-title{color:var(--yellow);font-weight:800;font-size:19px;margin-bottom:4px}
.hv2 .bp-cta-card .h-btn{flex:none}
.hv2 .bp-disclosure{border-left:4px solid var(--pink);background:#fff;border-radius:0 14px 14px 0;padding:14px 18px;margin:0 0 18px;font-size:15px;line-height:1.6;box-shadow:0 0 0 1.5px var(--line) inset}
.hv2 .bp-video{margin:8px 0 40px}
.hv2 .bp-video figcaption{color:var(--muted);font-size:14px;text-align:center;margin-top:10px}
.hv2 .bp-tool{border:1.5px solid var(--line);border-radius:22px;padding:26px;margin:22px 0;background:#fff}
.hv2 .bp-tool.bp-us{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-tint)}
.hv2 .bp-facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 16px}
.hv2 .bp-facts li{background:var(--pink-soft);color:var(--pink-ink);font-weight:700;font-size:13px;padding:5px 11px;border-radius:999px}
.hv2 .bp-suited{background:#faf9fb;border-radius:12px;padding:12px 14px}
.hv2 .bp-src{font-size:14px!important;color:var(--muted);margin:0!important}
.hv2 .bp-tbl-wrap{border:1.5px solid var(--line);border-radius:18px;margin:6px 0 10px}
.hv2 .bp-tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:680px}
.hv2 .bp-tbl th,.hv2 .bp-tbl td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45}
.hv2 .bp-tbl thead th{background:#faf9fb;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.hv2 .bp-tbl tbody tr:last-child>*{border-bottom:0}
.hv2 .bp-tbl tbody th{font-weight:800}
.hv2 .bp-row-us>*{background:var(--pink-soft)}
.hv2 .bp-note{font-size:14px!important;color:var(--muted)}
.hv2 .bp-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:6px 0 18px}
.hv2 .bp-stats div{border:1.5px solid var(--line);border-radius:18px;padding:18px}
.hv2 .bp-stats b{display:block;font-size:30px;letter-spacing:-.03em;color:var(--pink-ink)}
.hv2 .bp-stats span{color:var(--muted);font-size:14px}
.hv2 .bp-final{margin-bottom:8px!important}
.hv2 .bp-float{position:fixed;right:20px;bottom:20px;z-index:40;display:inline-flex;align-items:center;gap:8px;background:var(--pink);color:#fff;font-weight:800;padding:14px 20px;border-radius:999px;box-shadow:0 14px 30px rgba(225,29,116,.35)}
.hv2 .bp-float[hidden]{display:none}
@media (max-width:640px){
  .hv2 .bp-head{padding-top:32px}
  .hv2 .bp-col{padding:0 16px}
  .hv2 .bp-cta-card{flex-direction:column;align-items:flex-start}
  .hv2 .bp-tool{padding:20px}
  .hv2 .bp-float{left:16px;right:16px;bottom:16px;justify-content:center}
}
.hv2 .bp-dates{margin:0 0 18px}
.hv2 .bp-case{border:1.5px solid var(--line);border-radius:22px;padding:26px;margin:0 0 26px;background:#fff}
.hv2 .bp-case h2{font-size:clamp(22px,3vw,28px)!important}
.hv2 .bp-case-who{font-weight:800;color:var(--pink-ink);font-size:14px!important;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px!important}
.hv2 .bp-case-who span{color:var(--muted);font-weight:700}
.hv2 .bp-setup{padding-left:20px;display:grid;gap:8px;font-size:16px;line-height:1.6;margin:0 0 16px}
.hv2 .fd-grid{max-width:1060px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:start;padding-bottom:40px}
.hv2 .fd-grid h1{font-size:clamp(32px,4.4vw,48px);line-height:1.08;letter-spacing:-.04em;margin:14px 0 16px}
.hv2 .fd-h{font-size:20px;margin:18px 0 10px}
.hv2 .fd-form{background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:26px;display:grid;gap:8px;box-shadow:0 24px 50px rgba(20,18,26,.08)}
.hv2 .fd-form-title{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0}
.hv2 .fd-form-sub,.hv2 .fd-fine{color:var(--muted);font-size:14px;margin:0 0 6px}
.hv2 .fd-fine{margin:6px 0 0;font-size:13px}
.hv2 .fd-form label{font-weight:700;font-size:14px;margin-top:6px}
.hv2 .fd-form label span{color:var(--muted);font-weight:600}
.hv2 .fd-form input,.hv2 .fd-form select{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;font-size:16px;background:#fff;color:var(--ink)}
.hv2 .fd-form input:focus,.hv2 .fd-form select:focus{outline:none;border-color:var(--pink)}
.hv2 .fd-form .h-btn{margin-top:10px;width:100%;justify-content:center}
.hv2 .fd-error{background:#fee2e2;color:#991b1b;border-radius:10px;padding:10px 12px;font-size:14px;margin:0}
.hv2 .fd-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hv2 .fd-sample{background:var(--pink-soft);border:1.5px solid var(--pink-tint);border-radius:18px;padding:18px 20px;margin-bottom:14px}
.hv2 .fd-sample p{margin:0 0 8px;font-size:16px}
@media (max-width:860px){.hv2 .fd-grid{grid-template-columns:1fr;gap:24px}}
.hv2 .bp-magnet,.hv2 .bp-body a.bp-magnet{display:flex;align-items:center;gap:16px;margin:20px 0 26px;padding:18px 20px;border:1.5px solid var(--pink-tint);border-radius:20px;background:linear-gradient(135deg,#fff,var(--pink-soft));color:var(--ink);text-decoration:none;box-shadow:0 10px 24px rgba(225,29,116,.08);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.hv2 .bp-magnet:hover{transform:translateY(-2px);border-color:var(--pink);box-shadow:0 16px 32px rgba(225,29,116,.14)}
.hv2 .bp-magnet-ico{flex:none;width:52px;height:52px;border-radius:14px;background:var(--pink);display:grid;place-items:center;box-shadow:0 8px 18px rgba(225,29,116,.3)}
.hv2 .bp-magnet-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hv2 .bp-magnet-tag{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pink-ink)}
.hv2 .bp-magnet-title{font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.hv2 .bp-magnet-sub{font-size:14px;color:var(--muted);line-height:1.45}
.hv2 .bp-magnet-go{flex:none;display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;font-weight:800;font-size:14px;padding:11px 16px;border-radius:999px}
.hv2 .bp-magnet:hover .bp-magnet-go{background:var(--pink)}
@media (max-width:640px){.hv2 .bp-magnet{flex-wrap:wrap;padding:16px}.hv2 .bp-magnet-go{width:100%;justify-content:center}}

/* In-article CTA on blog posts (routes/blog.py splits the post before its 3rd h2). */
.hv2 .hl-prose .hl-incta{display:flex;align-items:center;gap:16px;margin:28px 0;padding:18px 20px;border-radius:18px;background:var(--ink);color:#fff}
.hv2 .hl-prose .hl-incta p{margin:0;color:rgba(255,255,255,.82);font-size:15px;line-height:1.55}
.hv2 .hl-prose .hl-incta b{color:#fff}
.hv2 .hl-prose .hl-incta a.h-btn{flex:none;color:#fff;text-decoration:none}
@media (max-width:640px){.hv2 .hl-prose .hl-incta{flex-direction:column;align-items:flex-start}}

/* /faq */
.hv2 .fq-jump{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.hv2 .fq-jump a{padding:7px 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:14px;font-weight:700;color:var(--ink);text-decoration:none}
.hv2 .fq-jump a:hover{border-color:var(--pink);color:var(--pink-ink)}
.hv2 .fq-sec{padding-top:28px;scroll-margin-top:90px}
.hv2 .fq-sec h2{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.03em;margin:0 0 16px}
.hv2 .fq-sec .hl-qa p a{color:var(--pink-ink);font-weight:700;text-decoration:none;white-space:nowrap}

/* ---- /tools (free tools) ---- */
.hv2 .tl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:12px 0 40px}
.hv2 .bp-body a.tl-card{display:flex;flex-direction:column;gap:8px;padding:22px;border:1.5px solid var(--line);border-radius:22px;background:#fff;color:var(--ink);text-decoration:none}
.hv2 .bp-body a.tl-card:hover{border-color:var(--pink)}
.hv2 .tl-ico{color:var(--pink)}
.hv2 .tl-name{font-weight:800;font-size:18px;letter-spacing:-.02em}
.hv2 .tl-short{color:var(--muted);font-size:15px;line-height:1.5}
.hv2 .tl-form{display:grid;gap:14px;padding:24px;border:1.5px solid var(--line);border-radius:22px;background:#faf9fb;margin:8px 0 32px}
.hv2 .tl-form label{display:grid;gap:6px;font-weight:700;font-size:15px}
.hv2 .tl-form input,.hv2 .tl-form select{font:inherit;font-weight:500;padding:11px 13px;border:1.5px solid var(--line);border-radius:12px;background:#fff;width:100%;box-sizing:border-box}
.hv2 .tl-form .h-btn{justify-self:start}
.hv2 .tl-out{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:10px}
.hv2 .tl-out li,.hv2 .tl-out-one{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;background:#fff;font-size:16px;line-height:1.55}
.hv2 .tl-pre{white-space:pre-line}
.hv2 .tl-copy{flex:none;border:1.5px solid var(--ink);background:#fff;border-radius:999px;padding:5px 12px;font-weight:700;font-size:13px}
.hv2 .tl-tpl{margin:0 0 18px}
.hv2 .tl-tpl-h{margin:0 0 8px!important}
.hv2 .tl-kw{background:var(--pink-soft);color:var(--pink-ink);font-weight:700;font-size:13px;padding:3px 10px;border-radius:999px;margin-left:6px}
.hv2 .tl-result{margin-top:8px}
.hv2 .tl-auto{background:var(--pink-soft);border:1.5px solid var(--pink-tint);border-radius:22px;padding:24px 26px}
.hv2 .tl-more{padding-left:20px;display:grid;gap:8px;font-size:17px}
@media (max-width:560px){.hv2 .tl-out li,.hv2 .tl-out-one{flex-direction:column}.hv2 .tl-copy{align-self:flex-start}}