/* =====================================================================
   Axify — Pricing Page 2026 (port of Claude Design "Pricing Page v14")
   Scoped under .pricing-2026 so the design tokens + generic class names
   (.amount, .period, .eyebrow, .check ...) never collide with the site's
   theme / floating-menu / footer-2026 styles. The design's own header,
   footer and preview chrome are intentionally NOT ported — the page
   renders the live site's floating menu + footer-2026 (via base.html).
   Background images use url("assets/...") here but HubSpot rehosts this
   file and breaks relative paths, so the 4 background rules are RE-POINTED
   in the template's inline <style> with get_asset_url(). Keep both in sync.
   ===================================================================== */

.pricing-2026 {
  /* Brand blue — aligned to Axify landing (anchor brand-500 #3B82F6) */
  --brand: #3B82F6;        /* brand-500 */
  --brand-solid: #2563EB;  /* brand-600 — primary buttons */
  --brand-dark: #1D4ED8;   /* brand-700 — hover / eyebrow */
  --brand-50: #EFF6FF;
  --brand-100: #DBEAFE;

  /* Pro tier — warm coral (landing --color-pro-*) */
  --pro-50: #FCEEE8;
  --pro-100: #FAD9CD;
  --pro-200: #F4B5A0;
  --pro-400: #EA7E5D;
  --pro-500: #E76F51;
  --pro-600: #D85B3D;
  --pro-700: #B14528;

  /* Neutrals — PRO warm-neutral scale */
  --ink: #171717;          /* neutral-900 */
  --muted: #525252;        /* neutral-600 */
  --line: #E5E5E5;         /* neutral-200 */
  --line-strong: #D4D4D4;  /* neutral-300 */
  --bg: #ffffff;
  --bg-soft: #FAFAFA;       /* neutral-50 */
  --success: #079455;
  --warn: #b54708;

  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;

  --shadow-xs: 0px 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0px 1px 3px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1);
  --shadow-md: 0px 4px 6px -1px rgba(0,0,0,0.1), 0px 2px 4px -2px rgba(0,0,0,0.06);
  --shadow-lg: 0px 12px 16px -4px rgba(0,0,0,0.08), 0px 4px 6px -2px rgba(0,0,0,0.03), 0px 2px 2px -1px rgba(0,0,0,0.04);
  --shadow-2xl: 0px 24px 48px -12px rgba(0,0,0,0.18), 0px 4px 4px -2px rgba(0,0,0,0.04);
  --shadow-skeuomorphic: 0px 0px 0px 1px rgba(0,0,0,0.18) inset, 0px -2px 0px 0px rgba(0,0,0,0.05) inset;
  --shadow-xs-skeuomorphic: var(--shadow-skeuomorphic), var(--shadow-xs);
  --ring-brand: 0px 0px 0px 4px rgba(59,130,246,0.24);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.pricing-2026 *,
.pricing-2026 *::before,
.pricing-2026 *::after { box-sizing: border-box; }

.pricing-2026 .section-wrap { position: relative; }

.pricing-2026 .content_wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Header / hero copy ── */
.pricing-2026 .pricing_card_section { padding: 120px 0 88px; }
.pricing-2026 .pricing_card_section .heading_section { margin: 0 0 40px; text-align: center; }
.pricing-2026 .pricing_card_section .heading_section .eyebrow {
  font-size: 12px; font-weight: 600; color: var(--brand-dark);
  text-transform: uppercase; letter-spacing: 0.16em;
  display: block; margin: 0 0 18px;
}
.pricing-2026 .pricing_card_section .heading_section h1 {
  font-size: clamp(46px, 5.4vw, 68px); line-height: 1.02; font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ink); margin: 0 auto; max-width: 900px;
  text-wrap: balance;
}

/* ── Billing toggle ── */
.pricing-2026 .billing-toggle {
  display: inline-flex;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 4px;
  border-radius: 999px;
}
.pricing-2026 .toggle-display { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 44px; }
.pricing-2026 .toggle-caption { font-size: 14px; color: var(--muted); margin: 0; }
.pricing-2026 .toggle-caption .dot { color: var(--line-strong); margin: 0 4px; }
.pricing-2026 .billing-toggle button {
  background: transparent;
  border: none;
  padding: 10px 20px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pricing-2026 .billing-toggle button:focus-visible { outline: none; box-shadow: var(--ring-brand); }
.pricing-2026 .billing-toggle button.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.pricing-2026 .save-pill {
  background: #ecfdf3;
  color: #027a48;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Plan stack (vertical hierarchy) ── */
.pricing-2026 .plan-stack { display: flex; flex-direction: column; gap: 24px; max-width: 1040px; margin: 0 auto; }

/* Hero — featured $100 plan (blue atmosphere) */
.pricing-2026 .plan-hero {
  position: relative;
  border: 1px solid rgba(59,130,246,0.20);
  border-radius: var(--radius-3xl);
  background:
    linear-gradient(0deg, rgba(255,255,255,0.45), rgba(255,255,255,0.45)),
    url("assets/starter-bg.jpg") center / cover no-repeat,
    var(--brand-50);
  box-shadow: var(--shadow-2xl);
  padding: 48px;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 0;
  align-items: center;
  overflow: hidden;
}
.pricing-2026 .plan-hero-main { padding-right: 48px; }
.pricing-2026 .plan-hero-tier {
  font-size: 22px; line-height: 28px; font-weight: 600; color: var(--ink);
  margin: 0 0 6px;
}
.pricing-2026 .plan-hero-sub { font-size: 17px; line-height: 26px; color: var(--muted); margin: 0 0 24px; max-width: 360px; }
.pricing-2026 .plan-hero-price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; flex-wrap: wrap; }
.pricing-2026 .plan-hero-price .amount {
  font-size: 68px; line-height: 1; font-weight: 700; letter-spacing: -0.03em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.pricing-2026 .plan-hero-price .period { font-size: 16px; color: var(--muted); font-weight: 500; }
.pricing-2026 .plan-hero-note { font-size: 14px; color: var(--muted); margin: 0 0 20px; }
.pricing-2026 .plan-hero-cta { width: auto; display: inline-flex; padding: 13px 32px; }

.pricing-2026 .hero-toggle { margin: 0 0 24px; }
.pricing-2026 .plan-hero-includes { border-left: 1px solid rgba(0,0,0,0.08); padding-left: 48px; }

/* Lower row — Pro + Enterprise, reduced hierarchy */
.pricing-2026 .plan-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pricing-2026 .plan-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  padding: 30px 30px 32px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 12px 28px -14px rgba(16,24,40,0.14), inset 0 1px 0 rgba(255,255,255,0.6);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.pricing-2026 .plan-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(16,24,40,0.05), 0 24px 48px -16px rgba(16,24,40,0.20), inset 0 1px 0 rgba(255,255,255,0.7); border-color: var(--line-strong); }
/* Enterprise — quiet neutral texture (same family, no color) */
.pricing-2026 .plan-row .plan-card:not(.is-pro) {
  background:
    linear-gradient(0deg, rgba(255,255,255,0.62), rgba(255,255,255,0.62)),
    url("assets/enterprise-bg.jpg") center / cover no-repeat,
    var(--bg-soft);
}
.pricing-2026 .plan-card.is-pro {
  border: 1px solid rgba(231,111,81,0.24);
  background:
    linear-gradient(0deg, rgba(255,255,255,0.48), rgba(255,255,255,0.48)),
    url("assets/beyond-ai-bg.jpg") center / cover no-repeat,
    var(--pro-50);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.pricing-2026 .plan-card.is-pro:hover { box-shadow: var(--shadow-2xl); border-color: rgba(231,111,81,0.38); }
.pricing-2026 .card_tier-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
}
.pricing-2026 .card_tier-lockup .card_tier { margin: 0; }
.pricing-2026 .pro-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px 4px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--pro-400) 0%, var(--pro-600) 50%, var(--pro-700) 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 4px 14px -6px color-mix(in srgb, var(--pro-600) 55%, transparent);
}
.pricing-2026 .card_tier { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.pricing-2026 .card_subtitle { font-size: 15px; line-height: 22px; color: var(--muted); margin: 0 0 20px; }
.pricing-2026 .card_price { display: flex; align-items: baseline; gap: 6px; margin: 0 0 4px; flex-wrap: wrap; }
.pricing-2026 .card_price .amount {
  font-size: 40px; line-height: 1; font-weight: 700; color: var(--ink);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.pricing-2026 .card_price .period { font-size: 14px; color: var(--muted); font-weight: 500; }
.pricing-2026 .card_price_note { font-size: 13px; color: var(--muted); margin: 0 0 22px; min-height: 18px; }
.pricing-2026 .card_button { margin: 0 0 24px; }

.pricing-2026 .btn-primary,
.pricing-2026 .btn-secondary {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s var(--ease-out), color 0.15s linear, transform 0.15s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.pricing-2026 .btn-primary {
  background: var(--brand-solid);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 20px -8px color-mix(in srgb, var(--brand-solid) 55%, transparent);
}
.pricing-2026 .btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 14px 28px -10px color-mix(in srgb, var(--brand-solid) 65%, transparent); }
.pricing-2026 .btn-secondary {
  background: #fff;
  color: #344054;
  border-color: var(--line-strong);
  box-shadow: var(--shadow-xs-skeuomorphic);
}
.pricing-2026 .btn-secondary:hover { background: var(--bg-soft); color: var(--ink); }
.pricing-2026 .btn-primary:focus-visible,
.pricing-2026 .btn-secondary:focus-visible { outline: none; box-shadow: var(--ring-brand); }

.pricing-2026 .card_features_label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pricing-2026 .card_list {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--muted);
}
.pricing-2026 .card_list svg { flex-shrink: 0; margin-top: 2px; }
.pricing-2026 .card_list .list-text { text-align: left; }

/* ── Comparison table ── */
.pricing-2026 .feature-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}
.pricing-2026 .feature-tag.tag-limited { background: #fff7e6; color: var(--warn); }
.pricing-2026 .feature-tag.tag-full { background: #ecfdf3; color: var(--success); }
.pricing-2026 .feature-tag.tag-standard { background: #f2f4f7; color: var(--muted); }
.pricing-2026 .feature-tag.tag-unlimited { background: #eff8ff; color: var(--brand-dark); }

.pricing-2026 .compare-section { background: var(--bg); padding: 116px 0; }
.pricing-2026 .compare-heading { text-align: center; margin: 0 0 44px; }
.pricing-2026 .compare-heading .eyebrow {
  font-size: 12px; font-weight: 600; color: var(--brand-dark);
  text-transform: uppercase; letter-spacing: 0.16em;
  display: block; margin: 0 0 14px;
}
.pricing-2026 .compare-heading h2 {
  font-size: clamp(30px, 3vw, 40px); line-height: 1.1; font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink); margin: 0 0 16px;
}
.pricing-2026 .compare-heading p {
  color: var(--muted); font-size: 18px; line-height: 28px; max-width: 620px; margin: 0 auto;
  text-wrap: pretty;
}
.pricing-2026 .compare-accent-note {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; font-size: 14px; color: var(--muted);
}
.pricing-2026 .compare-accent-note .swatch {
  width: 3px; height: 16px; border-radius: 2px; background: var(--brand);
}

.pricing-2026 .compare-table {
  width: 100%;
  table-layout: fixed;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
/* Reset the theme's global `td, th { border }` (theme-overrides.css) so only the
   design's intended horizontal separators show — the specific thead/tbody/group
   rules below re-add the borders they want (higher specificity wins). */
.pricing-2026 .compare-table th,
.pricing-2026 .compare-table td { border: 0; }
.pricing-2026 .compare-table thead th:first-child { width: 34%; }
.pricing-2026 .compare-table thead th:not(:first-child) { width: 22%; }
.pricing-2026 .compare-table thead th {
  text-align: center;
  padding: 46px 16px 24px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  color: var(--ink);
  font-size: 16px;
  vertical-align: top;
  position: sticky;
  top: 0;
  z-index: 2;
}
.pricing-2026 .compare-table thead th:first-child { text-align: left; }
.pricing-2026 .compare-table thead th .tier-price {
  display: block;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  margin-top: 4px;
}
.pricing-2026 .compare-table thead th.th-popular {
  background: linear-gradient(180deg, var(--pro-50), #fff);
}
.pricing-2026 .popular-tag {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pro-400) 0%, var(--pro-600) 60%, var(--pro-700) 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}
.pricing-2026 .compare-table tbody td:nth-child(3) { background: color-mix(in srgb, var(--pro-50) 45%, #fff); }
.pricing-2026 .compare-table tbody tr.group-row td:nth-child(3) { background: var(--pro-50); }
.pricing-2026 .compare-table tbody td {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
  vertical-align: middle;
}
.pricing-2026 .compare-table tbody td:first-child {
  font-weight: 500;
  color: var(--ink);
}
.pricing-2026 .compare-table tbody td:not(:first-child) { text-align: center; }
.pricing-2026 .compare-table .group-row td {
  background: #f2f4f7;
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #344054;
  padding: 14px 16px;
  border-top: 1px solid var(--line-strong);
}
.pricing-2026 .compare-table tbody tr:last-child td { border-bottom: none; }
.pricing-2026 .compare-table tbody tr:not(.group-row):hover td { background: #fcfcfd; }
.pricing-2026 .check { color: var(--success); font-weight: 600; font-size: 15px; opacity: 0.9; }
.pricing-2026 .dash { color: #dde1e7; font-weight: 500; font-size: 16px; }
.pricing-2026 .limited { color: var(--warn); font-style: italic; font-size: 13px; font-weight: 600; }

/* ── Optimization services (dark box) ── */
.pricing-2026 .services-section { background: var(--bg); padding: 116px 0; }
.pricing-2026 .services-box {
  position: relative;
  max-width: none;
  margin: 0 auto;
  background:
    url("assets/services-bg.jpg") center / cover no-repeat,
    #0A0A0C;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-3xl);
  padding: 72px 76px;
  overflow: hidden;
  box-shadow:
    0 40px 90px -24px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.07);
}
.pricing-2026 .services-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.pricing-2026 .services-lead .eyebrow {
  font-size: 12px; font-weight: 600; color: var(--pro-200);
  text-transform: uppercase; letter-spacing: 0.16em;
  display: block; margin: 0 0 18px;
}
.pricing-2026 .services-lead h2 {
  font-size: clamp(30px, 3.4vw, 42px); line-height: 1.08; font-weight: 700;
  letter-spacing: -0.025em; color: #fff; margin: 0 0 20px; text-wrap: balance;
}
.pricing-2026 .services-lead p {
  font-size: 17px; line-height: 28px; color: rgba(255,255,255,0.64); margin: 0 0 32px;
  max-width: 400px; text-wrap: pretty; font-weight: 400;
}
/* ── Expert avatars (v15) ── */
.pricing-2026 .experts-row { display: flex; align-items: center; gap: 16px; margin: 0 0 30px; }
.pricing-2026 .experts-avatars { display: flex; align-items: center; }
.pricing-2026 .expert-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.22), 0 4px 12px -4px rgba(0,0,0,0.65);
  background: rgba(255,255,255,0.06);
}
.pricing-2026 .expert-avatar:not(:first-child) { margin-left: -18px; }
.pricing-2026 .experts-caption {
  font-size: 13.5px; line-height: 1.35; font-weight: 500;
  color: rgba(255,255,255,0.66); letter-spacing: -0.005em;
}
.pricing-2026 .services-cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--pro-400), var(--pro-600));
  color: #fff;
  font-size: 16px; font-weight: 600; text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 10px 24px -8px color-mix(in srgb, var(--pro-600) 60%, transparent);
  transition: transform 0.15s var(--ease-out), box-shadow 0.2s var(--ease-out), filter 0.15s linear;
}
.pricing-2026 .services-cta:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 16px 30px -10px color-mix(in srgb, var(--pro-600) 70%, transparent); }
.pricing-2026 .services-cta:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(231,111,81,0.32); }
.pricing-2026 .services-cta svg { flex-shrink: 0; transition: transform 0.18s var(--ease-out); }
.pricing-2026 .services-cta:hover svg { transform: translateX(3px); }
.pricing-2026 .services-list { display: flex; flex-direction: column; gap: 14px; }
.pricing-2026 .service-item {
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(180deg, rgba(28,24,26,0.66), rgba(20,18,20,0.55));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-xl); padding: 20px 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.pricing-2026 .service-item:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.04));
  border-color: rgba(231,111,81,0.40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 30px -12px rgba(0,0,0,0.55);
}
.pricing-2026 .service-icon {
  flex-shrink: 0;
  width: 50px; height: 50px;
  border-radius: 13px;
  background: linear-gradient(150deg, var(--pro-400) 0%, var(--pro-600) 70%, var(--pro-700) 100%);
  border: 1px solid rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 6px 16px -6px color-mix(in srgb, var(--pro-600) 65%, transparent);
}
.pricing-2026 .service-text { font-size: 16.5px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }

@media (max-width: 860px) {
  .pricing-2026 .services-box { padding: 40px 28px; }
  .pricing-2026 .services-grid { grid-template-columns: 1fr; gap: 32px; }
  .pricing-2026 .services-lead p { max-width: none; }
}

/* ── FAQ ── */
.pricing-2026 .faq-section { padding: 116px 0; }
.pricing-2026 .faq-heading { text-align: center; margin: 0 0 52px; }
.pricing-2026 .faq-heading h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 12px; }
.pricing-2026 .faq-heading p { color: var(--muted); font-size: 18px; max-width: 600px; margin: 0 auto; }
.pricing-2026 .faq-list { max-width: 768px; margin: 0 auto; }
.pricing-2026 .faq-item { border-bottom: 1px solid var(--line); padding: 24px 0; }
.pricing-2026 .faq-item summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.pricing-2026 .faq-item summary:focus-visible { outline: none; box-shadow: var(--ring-brand); border-radius: 6px; }
.pricing-2026 .faq-item summary::-webkit-details-marker { display: none; }
.pricing-2026 .faq-item summary::after {
  content: '+';
  font-size: 24px;
  font-weight: 400;
  color: var(--muted);
  transition: transform 0.2s var(--ease-out);
}
.pricing-2026 .faq-item[open] summary::after { content: '\2212'; }
.pricing-2026 .faq-item .faq-body { margin-top: 12px; color: var(--muted); font-size: 16px; line-height: 26px; }

/* ── Testimonial ── */
.pricing-2026 .testimonial-section { background: var(--bg); padding: 116px 0; }
.pricing-2026 .testimonial-card {
  max-width: 920px;
  margin: 0 auto;
  background: var(--bg-soft);
  border-radius: 24px;
  padding: 56px 64px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pricing-2026 .testimonial-eyebrow {
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-dark);
  margin: 0 0 20px;
}
.pricing-2026 .testimonial-quote {
  /* Kill HubSpot's default blockquote border-left + indent (the theme colors it
     blue via theme-overrides.css `blockquote { border-left-color }`). */
  border: 0;
  padding: 0;
  margin: 0 0 40px;
  font-size: 30px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.pricing-2026 .testimonial-person { display: flex; flex-direction: column; align-items: center; }
.pricing-2026 .author-avatar {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  overflow: hidden;
  margin: 0 0 16px;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}
.pricing-2026 .author-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pricing-2026 .author-name { font-size: 18px; font-weight: 600; color: var(--ink); }
.pricing-2026 .author-role { margin-top: 4px; font-size: 16px; color: var(--muted); }

@media (max-width: 900px) {
  .pricing-2026 .plan-hero { grid-template-columns: 1fr; padding: 32px; }
  .pricing-2026 .plan-hero-main { padding-right: 0; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
  .pricing-2026 .plan-hero-includes { border-left: none; padding-left: 0; }
  .pricing-2026 .plan-hero-sub { max-width: none; }
}
@media (max-width: 760px) {
  .pricing-2026 .plan-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pricing-2026 .pricing_card_section { padding: 56px 0 48px; }
  .pricing-2026 .pricing_card_section .heading_section h1 { font-size: 34px; line-height: 42px; }
  .pricing-2026 .plan-hero-price .amount { font-size: 56px; }
  .pricing-2026 .compare-section, .pricing-2026 .faq-section, .pricing-2026 .testimonial-section, .pricing-2026 .services-section { padding: 56px 0; }
  .pricing-2026 .compare-heading h2, .pricing-2026 .faq-heading h2 { font-size: 28px; line-height: 36px; }
  .pricing-2026 .testimonial-quote { font-size: 22px; line-height: 32px; }

  /* ── Comparison table on mobile ──
     Narrow viewport + table-layout:fixed makes long words (plan names, the
     price sublines) break mid-word, and the absolute "Most popular" tag
     overflows its column. Rebalance the columns, shrink the header, hide the
     price sublines (already shown in the cards above), and size the tag to fit. */
  .pricing-2026 .compare-table thead th:first-child { width: 30%; }
  .pricing-2026 .compare-table thead th:not(:first-child) { width: 23.3%; }
  .pricing-2026 .compare-table thead th {
    font-size: 12px;
    padding: 30px 6px 12px;   /* keep top room for the popular tag */
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .pricing-2026 .compare-table thead th .tier-price { display: none; }
  .pricing-2026 .compare-table tbody td { font-size: 12px; padding: 11px 7px; }
  .pricing-2026 .compare-table .group-row td { font-size: 11px; padding: 12px 7px; }
  .pricing-2026 .compare-table .popular-tag {
    top: 8px;
    font-size: 8px;
    padding: 2px 6px;
    letter-spacing: 0.02em;
    max-width: calc(100% - 8px);
  }
  .pricing-2026 .feature-tag { font-size: 10px; padding: 1px 5px; }
}
</content>
</invoke>