/* HubDB comparison pages — from design prototype */
:root {
    --primary:   #0E6EA6;
    --primary-dk:#0B5483;
    --secondary: #4FB6EC;
    --green:     #25D366;
    --green-dk:  #128C7E;
    --hubspot:   #FF7A59;

    /* Per-competitor brand color (override at page top for HubDB) */
    --cmp-color: #19DE7C;
    --cmp-color-dk: #0FA85C;

    --ink-900: #0F172A;
    --ink-800: #1F2937;
    --ink-700: #334155;
    --ink-600: #475569;
    --ink-500: #64748B;
    --ink-400: #94A3B8;
    --ink-300: #CBD5E1;
    --ink-200: #E2E8F0;
    --ink-100: #F1F5F9;
    --ink-050: #F8FAFC;

    --sky-tint:  #F1F9FD;
    --mint-tint: #EEFBF3;
    --paper:     #FFFFFF;

    --display:  "Poppins", system-ui, sans-serif;
    --serif:    "Fraunces", "Times New Roman", Georgia, serif;
    --body:     "Inter", system-ui, sans-serif;
    --mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    background: var(--paper);
    color: var(--ink-900);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; height: auto; display: block; }
  a { color: inherit; text-decoration: none; }

  .wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
  .wrap-narrow { max-width: 1080px; margin: 0 auto; padding: 0 40px; }

  /* ─── BRAND LOGOS ─── */
  .logo-flo { width: 28px; height: 28px; flex: 0 0 28px; }
  /* Full Wati logo image — used on light backgrounds */
  .logo-cmp-full {
    height: 28px; width: auto; display: inline-block;
  }
  .logo-cmp-full.sm { height: 20px; }
  .logo-cmp-full.md { height: 24px; }
  .logo-cmp-full.lg { height: 36px; }
  /* Mark only — for dark backgrounds */
  .logo-cmp-mark {
    width: 28px; height: 28px; flex: 0 0 28px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .logo-cmp-mark svg { width: 100%; height: 100%; }
  /* On dark backgrounds we wrap the colour logo in a white chip */
  .logo-cmp-chip {
    display: inline-flex; align-items: center;
    background: #fff;
    padding: 6px 10px;
    border-radius: 10px;
    height: 36px;
  }
  .logo-cmp-chip img { height: 22px; width: auto; }

  /* ─── NAV ─────
   * Nav rules live in the site-nav module (`hubl-modules/site-nav.module/module.hubl.css`).
   * The module owns position (fixed), the transparent → blurred-white scroll
   * transition, and the dark-hero text-colour switch. The previous local
   * overrides forced sticky white-blur even on dark-hero comparison detail
   * pages, defeating the transparent header used on Home and other dark-hero
   * surfaces. Removed deliberately — see
   * src/theme/flowella/hubl-modules/site-nav.module/module.hubl.css. */

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--body);
    font-weight: 600;
    font-size: 14.5px;
    padding: 12px 22px;
    border-radius: 12px;
    border: 1px solid transparent;
    letter-spacing: -.005em;
    cursor: pointer;
    transition: transform .08s, background .15s, border-color .15s, box-shadow .15s;
    line-height: 1;
    white-space: nowrap;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 14px -6px rgba(14,110,166,.5); }
  .btn-primary:hover { background: var(--primary-dk); }
  .btn-secondary { background: #fff; color: var(--primary); border-color: var(--primary); }
  .btn-secondary:hover { background: var(--sky-tint); }
  .btn-wa { background: var(--green); color: #fff; }
  .btn-wa:hover { background: var(--green-dk); }
  .btn-ghost { background: transparent; color: var(--ink-800); border-color: var(--ink-300); }
  .btn-ghost:hover { background: var(--ink-100); }
  .btn-lg { padding: 16px 28px; font-size: 15.5px; border-radius: 14px; }

  /* ─── HERO (cmp-hero) ───
   * The fixed nav (72px) is transparent over dark heroes and the site-nav
   * module already sets `body.flowella-has-dark-hero #content { padding-top: 0 }`
   * so the gradient hero underlaps the nav from the top of the viewport.
   * The 120px top padding here = 72px nav + 48px breathing room so the H1
   * doesn't collide with the menu. Do NOT add a negative margin-top to
   * #content — it pulls the H1 back into the nav.                       */
  .cmp-hero {
    position: relative;
    background:
      radial-gradient(1100px 600px at 88% 8%, rgba(79,182,236,.22), transparent 70%),
      radial-gradient(900px 700px at 5% 95%, rgba(37,211,102,.10), transparent 70%),
      linear-gradient(160deg, #0A1024 0%, #0E2A4A 45%, #0E6EA6 100%);
    color: #fff;
    overflow: hidden;
    padding: 120px 0 72px;
  }
  .hero-vs-lockup {
    display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
    margin: 0 0 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .hero-vs-lockup .brand-flo {
    display: inline-flex; align-items: center; gap: 14px;
    font-family: var(--display); font-weight: 800;
    font-size: clamp(36px, 4vw, 56px); letter-spacing: -.035em;
    color: #fff;
  }
  .hero-vs-lockup .brand-flo svg { height: clamp(40px, 4.4vw, 60px); width: auto; }
  .hero-vs-lockup .brand-cmp {
    display: inline-flex; align-items: center;
    background: #fff;
    border-radius: 16px;
    padding: 14px 22px;
    box-shadow: 0 12px 28px -16px rgba(0,0,0,.5);
  }
  .hero-vs-lockup .brand-cmp img { height: clamp(36px, 4vw, 50px); width: auto; }
  .hero-vs-lockup .vs {
    font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: clamp(38px, 4.2vw, 60px);
    color: var(--secondary);
    letter-spacing: -.04em;
    line-height: 1;
  }
  .cmp-h2h.in-hero {
    margin-top: 48px;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 24px;
    padding: 32px 36px;
    box-shadow: 0 30px 60px -28px rgba(0,0,0,.5);
  }
  .cmp-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 3px 3px;
    pointer-events: none;
  }
  .cmp-hero-bg-word {
    position: absolute;
    bottom: -120px; left: -40px;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 600;
    font-size: 420px;
    line-height: .8;
    letter-spacing: -.06em;
    color: rgba(255,255,255,.04);
    pointer-events: none;
    user-select: none;
  }
  .cmp-hero-inner { position: relative; }

  .cmp-hero-top {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-bottom: 32px;
  }
  .crumbs {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.55);
  }
  .crumbs a { color: rgba(255,255,255,.85); }
  .crumbs a:hover { color: var(--secondary); }
  .crumbs span.div { opacity: .35; }
  .crumbs span.cur { color: rgba(255,255,255,.95); }
  .cmp-hero-pill {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 11.5px;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--secondary);
    background: rgba(79,182,236,.10);
    border: 1px solid rgba(79,182,236,.28);
    padding: 7px 14px;
    border-radius: 99px;
  }
  .cmp-hero-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }

  .cmp-hero h1 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(40px, 5.4vw, 78px);
    line-height: 1.0;
    letter-spacing: -.035em;
    margin: 0 0 26px;
    color: #fff;
    max-width: 22ch;
  }
  .cmp-hero h1 .it {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    color: var(--secondary);
    letter-spacing: -.04em;
  }
  .cmp-hero h1 .acc { color: var(--green); font-style: italic; font-family: var(--serif); font-weight: 500; }

  .cmp-hero-lede {
    font-size: 19px;
    line-height: 1.55;
    color: rgba(255,255,255,.78);
    margin: 0 0 36px;
    max-width: 720px;
  }
  .cmp-hero-lede b { color: #fff; font-weight: 600; }
  .cmp-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

  /* ─── HEAD-TO-HEAD CARD (cmp-h2h) — embedded inside hero ─── */
  .cmp-h2h {
    background: #fff;
    color: var(--ink-900);
    border: 1px solid var(--ink-200);
    border-radius: 24px;
    padding: 36px 40px;
    box-shadow: 0 24px 48px -28px rgba(15,23,42,.18);
  }
  .cmp-h2h-head {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--ink-200);
    margin-bottom: 26px;
  }
  .cmp-h2h-head .label {
    font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ink-500);
  }
  .cmp-h2h-head .label.bold { color: var(--ink-800); }
  .cmp-h2h-head .badge {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-500);
    background: var(--ink-050); border: 1px solid var(--ink-200);
    padding: 5px 10px; border-radius: 99px;
  }
  .cmp-h2h-grid {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    gap: 16px;
    align-items: stretch;
  }
  .cmp-h2h-side {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 16px;
    padding: 4px 0 0;
    border: 0;
    background: transparent;
    position: relative;
    height: 100%;
  }
  .cmp-h2h-side .cmp-h2h-tag { align-self: start; }
  .cmp-h2h-side .cmp-h2h-stats { align-self: end; margin-top: 0; }
  .cmp-h2h-side.flo { background: transparent; border-color: transparent; }
  .cmp-h2h-name {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    font-family: var(--display); font-weight: 700; font-size: 22px;
    letter-spacing: -.02em;
    min-height: 32px;
  }
  .cmp-h2h-name .role {
    margin-left: auto;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--ink-500);
    font-weight: 500;
  }
  .cmp-h2h-side.flo .cmp-h2h-name .role { color: var(--primary); }
  .cmp-h2h-tag {
    font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: 17px; line-height: 1.35; color: var(--ink-800);
    margin: 0;
  }
  .cmp-h2h-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 4px;
  }
  .cmp-h2h-stat {
    background: #fff; border: 1px solid var(--ink-200);
    border-radius: 10px; padding: 12px;
    display: flex; flex-direction: column; gap: 2px;
  }
  .cmp-h2h-stat b {
    font-family: var(--display); font-weight: 700; font-size: 18px;
    letter-spacing: -.01em; color: var(--ink-900); line-height: 1.1;
  }
  .cmp-h2h-stat span {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-500);
    line-height: 1.3;
  }
  .cmp-h2h-vs {
    align-self: center;
    font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: 28px;
    color: var(--ink-400);
    text-align: center;
  }

  /* ─── SECTIONS ─── */
  section.s { padding: 120px 0; position: relative; }
  section.s.tight { padding: 90px 0; }
  section.s.tint { background: var(--ink-050); }
  section.s.sky { background: var(--sky-tint); }

  .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 22px;
  }
  .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--primary); }

  .h-display {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--ink-900);
    margin: 0 0 24px;
    max-width: 22ch;
  }
  .h-display i {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    color: var(--primary);
    letter-spacing: -.035em;
  }
  /* Green accent inside h-display section H2s — mirrors `.h-display i`
     (sky-blue) so editor-authored headings can mix the two tones with
     consistent typographic rhythm. Base colour/family/weight comes from
     the global `.acc` rule in design-system.css; we only tweak the
     letter-spacing here to match the surrounding display type. */
  .h-display .acc { letter-spacing: -.035em; }
  .lede {
    font-size: 19px;
    line-height: 1.6;
    color: var(--ink-700);
    max-width: 680px;
    margin: 0;
  }
  .lede b { color: var(--ink-900); font-weight: 600; }

  /* ─── SETTING THE SCENE ─── */
  .scene-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
  .scene-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 22px;
    padding: 32px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 16px;
    height: 100%;
  }
  .scene-card > p { margin: 0; }
  .scene-card .cmp-h2h-stats { margin-top: 0; align-self: end; }
  .scene-card-h {
    display: flex; align-items: center; gap: 14px;
    font-family: var(--display); font-weight: 700; font-size: 22px;
    letter-spacing: -.02em; margin: 0;
  }
  .scene-card p { font-size: 14.5px; color: var(--ink-700); line-height: 1.65; margin: 0; }

  /* Listing-page card (flowella vs <competitor>) */
  .cmp-list-card {
    display: flex; flex-direction: column; gap: 18px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .cmp-list-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -22px rgba(15, 23, 42, .22);
    border-color: var(--ink-300);
  }
  .cmp-list-head {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ink-200);
  }
  .cmp-list-brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--display); font-weight: 700;
    font-size: 22px; letter-spacing: -.02em;
    color: var(--ink-900);
    min-height: 34px;
  }
  .cmp-list-brand.flo .logo-flo { width: 30px; height: 30px; flex: 0 0 30px; }
  .cmp-list-brand.cmp { min-height: 34px; }
  .cmp-list-brand.cmp .logo-cmp-full { max-height: 30px; max-width: 170px; width: auto; }
  .cmp-list-vs {
    font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: 24px; color: var(--ink-500); line-height: 1;
  }
  .cmp-list-desc {
    font-size: 15px; line-height: 1.6; color: var(--ink-700); margin: 0;
  }
  .cmp-list-cta {
    margin-top: auto; align-self: flex-start;
  }
  @media (max-width: 640px) {
    .cmp-list-head { gap: 12px; }
    .cmp-list-brand { font-size: 18px; }
    .cmp-list-brand.cmp .logo-cmp-full { max-height: 26px; max-width: 140px; }
    .cmp-list-vs { font-size: 20px; }
  }

  /* ─── COMPARISON TABLE (cmp-table) ─── */
  .cmp-table-wrap {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 20px 40px -28px rgba(15,23,42,.18);
  }
  .cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
  }
  .cmp-table thead th {
    background: var(--ink-900);
    color: #fff;
    text-align: left;
    padding: 26px 24px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -.005em;
    border-bottom: 1px solid rgba(255,255,255,.08);
    vertical-align: middle;
  }
  .cmp-table thead th .h-sub {
    display: block;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    font-weight: 500;
    margin-bottom: 10px;
  }
  .cmp-table thead th.flo .h-sub { color: var(--secondary); }
  .cmp-table thead th.cmp .h-sub { color: rgba(255,255,255,.7); }
  .cmp-table thead th.flo, .cmp-table thead th.cmp { text-align: center; }
  .cmp-table thead th.flo {
    background: linear-gradient(180deg, #0E6EA6, #0B5483);
  }
  .cmp-table thead th.cmp {
    background: linear-gradient(180deg, #1F2937, #0F172A);
  }
  .th-brand-flo {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--display); font-weight: 700; font-size: 18px;
    letter-spacing: -.015em; color: #fff;
  }
  .th-brand-cmp { display: inline-flex; }

  .cmp-table tbody td {
    padding: 18px 24px;
    border-bottom: 1px solid var(--ink-200);
    vertical-align: top;
  }
  .cmp-table tbody tr:last-child td { border-bottom: 0; }
  .cmp-table tbody td:first-child {
    color: var(--ink-900);
    font-family: var(--display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -.005em;
    width: 32%;
  }
  .cmp-table tbody td:first-child small {
    display: block;
    font-family: var(--body); font-weight: 400; font-size: 13px;
    color: var(--ink-500);
    margin-top: 4px;
    line-height: 1.4;
  }
  .cmp-table tbody td.cell { text-align: center; width: 34%; font-size: 14px; color: var(--ink-700); line-height: 1.5; }
  .cmp-table tbody tr { background: #fff; }
  .cmp-table tbody td { background: #fff; }
  .cmp-table tbody td.flo { background: rgba(14,110,166,.06); border-left: 1px solid rgba(14,110,166,.16); border-right: 1px solid rgba(14,110,166,.16); }
  .cmp-table tbody tr:hover td { background: var(--ink-050); }
  .cmp-table tbody tr:hover td.flo { background: rgba(14,110,166,.10); }

  .check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--green); color: #fff;
    font-weight: 700; font-size: 14px;
    margin-bottom: 4px;
  }
  .check.no { background: #FFE9E5; color: #B42318; }
  .check.partial { background: #FFF4D6; color: #92660B; }
  .cell-line {
    display: block; font-size: 13px; color: var(--ink-700); margin-top: 4px;
    text-wrap: balance;
  }
  .cell-line.muted { color: var(--ink-500); }

  /* Punchier table extras */
  .cmp-table tbody tr.row-key td { background: linear-gradient(90deg, #fff 0%, rgba(14,110,166,.04) 100%); }
  .cmp-table tbody tr.row-key td:first-child::before {
    content: "Key difference"; display: inline-block;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--primary);
    background: rgba(14,110,166,.1); padding: 3px 8px; border-radius: 99px;
    margin-bottom: 8px;
  }
  .cmp-table tbody td.cell.flo .check { background: var(--green); color: #fff; }
  .cmp-table tbody td.cell.flo b { color: var(--primary-700); }
  .cmp-tally {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 14px; margin: 0 0 24px;
  }
  .cmp-tally-card {
    border: 1px solid var(--ink-200); border-radius: 14px;
    padding: 18px 22px; background: #fff;
    display: flex; align-items: center; gap: 16px;
  }
  .cmp-tally-card.flo { background: linear-gradient(135deg, rgba(14,110,166,.06), #fff); border-color: rgba(14,110,166,.25); }
  .cmp-tally-score {
    font-family: var(--display); font-weight: 800; font-size: 38px;
    line-height: 1; color: var(--ink-900);
  }
  .cmp-tally-card.flo .cmp-tally-score { color: var(--primary); }
  .cmp-tally-label {
    font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-500); margin-bottom: 2px;
  }
  .cmp-tally-verdict {
    font-family: var(--display); font-weight: 700; font-size: 15px;
    color: var(--ink-900); line-height: 1.3;
  }

  /* ─── WHO IS THIS FOR ─── */
  .who-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
    margin-top: 56px;
  }
  .who-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 22px;
    padding: 36px 32px;
    display: flex; flex-direction: column; gap: 16px;
    position: relative;
  }
  .who-card.flo { border-color: rgba(14,110,166,.3); box-shadow: 0 12px 28px -18px rgba(14,110,166,.5); }
  .who-card.flo::before {
    content: "";
    position: absolute; top: 0; left: 28px; right: 28px;
    height: 4px; background: var(--primary); border-radius: 0 0 4px 4px;
  }
  .who-tag {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-500);
    flex-wrap: wrap;
  }
  .who-logo {
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 8px;
    padding: 6px 10px;
    height: 32px;
    margin-right: 4px;
  }
  .who-logo svg { height: 18px; width: auto; }
  .who-logo img { height: 16px; width: auto; }
  .who-logo.hub { background: #FF7A59; border-color: #FF7A59; color: #fff; gap: 4px; padding: 4px 10px; }
  .who-logo.hub svg { height: 18px; }
  .who-card.flo .who-tag { color: var(--primary); }
  .who-card.cmp .who-tag { color: var(--cmp-color-dk); }
  .who-card.native .who-tag { color: var(--hubspot); }
  .who-card h3 {
    font-family: var(--display); font-weight: 700; font-size: 24px;
    line-height: 1.2; letter-spacing: -.02em; margin: 0;
  }
  .who-card p { font-size: 15px; line-height: 1.6; color: var(--ink-700); margin: 0; }
  .who-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .who-list li {
    position: relative; padding-left: 24px;
    font-size: 14px; color: var(--ink-700); line-height: 1.5;
  }
  .who-list li::before {
    content: "→"; position: absolute; left: 0; top: 0;
    font-family: var(--display); font-weight: 700;
    color: var(--ink-400);
  }
  .who-card.flo .who-list li::before { color: var(--primary); }
  .who-card.cmp .who-list li::before { color: var(--cmp-color-dk); }
  .who-card.native .who-list li::before { color: var(--hubspot); }

  /* ─── DEEP DIVE ─── */
  .deep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
  .deep-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 22px;
    padding: 36px;
    display: flex; flex-direction: column; gap: 16px;
    height: 100%;
  }
  .deep-card .deep-q { min-height: 88px; }
  .deep-card .deep-rows { flex: 1; align-items: stretch; }
  .deep-row { height: 100%; }
  .deep-card.q { background: linear-gradient(160deg, var(--sky-tint), #fff); border-color: #BAE2F4; }
  .deep-q {
    display: grid; grid-template-columns: 36px 1fr; gap: 16px; align-items: start;
    margin-bottom: 4px;
  }
  .deep-q-mark {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--display); font-weight: 700; font-size: 18px;
  }
  .deep-q h3 {
    font-family: var(--display); font-weight: 700;
    font-size: 22px; line-height: 1.25; letter-spacing: -.015em;
    margin: 4px 0 0;
  }
  .deep-rows {
    display: grid; gap: 16px;
    grid-template-columns: 1fr 1fr;
    margin-top: 12px;
  }
  .deep-row {
    background: #fff; border: 1px solid var(--ink-200);
    border-radius: 14px; padding: 20px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .deep-row.flo { border-color: rgba(14,110,166,.3); background: rgba(14,110,166,.04); }
  .deep-row .who {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-500);
  }
  .deep-row.flo .who { color: var(--primary); }
  .deep-row.flo .who::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
  .deep-row.cmp .who::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--cmp-color); }
  .deep-row p { font-size: 14px; line-height: 1.55; color: var(--ink-700); margin: 0; }
  .deep-row p b { color: var(--ink-900); font-weight: 600; }

  /* ─── PRICING ─── */
  .pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
  .price-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 22px;
    padding: 40px;
    display: flex; flex-direction: column; gap: 18px;
    height: 100%;
  }
  .price-card h3 { min-height: 92px; }
  .price-card .price-tier-row { min-height: 168px; }
  .price-card .price-points { flex: 1; margin-top: 8px; }
  .price-card.flo {
    background: linear-gradient(160deg, #fff 0%, var(--sky-tint) 100%);
    border-color: #BAE2F4;
  }
  .price-tag {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ink-500);
  }
  .price-card.flo .price-tag { color: var(--primary); }
  .price-card h3 {
    font-family: var(--display); font-weight: 700; font-size: 24px;
    letter-spacing: -.015em; margin: 0;
  }
  .price-tier-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--ink-200);
    border-radius: 12px;
    overflow: hidden;
    min-height: 132px;
  }
  .pt {
    padding: 16px 14px;
    background: #fff;
    border-right: 1px solid var(--ink-200);
    display: flex; flex-direction: column; gap: 4px;
    min-height: 132px;
  }
  .pt:last-child { border-right: 0; }
  .pt-name {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-500);
    display: flex; align-items: center; gap: 6px;
    min-height: 16px;
  }
  .pt-name .star {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 4px;
    background: var(--hubspot); color: #fff; font-size: 9px;
    font-weight: 800;
  }
  .pt-amt { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -.02em; color: var(--ink-900); line-height: 1.1; }
  .pt-amt span { font-size: 12px; color: var(--ink-500); margin-left: 2px; font-weight: 500; }
  .pt-note { font-size: 11.5px; color: var(--ink-600); line-height: 1.45; margin-top: auto; }
  .pt.hubspot { background: var(--mint-tint); }
  .price-card.flo .pt.hubspot { background: rgba(14,110,166,.06); }
  .price-points { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .price-points li {
    position: relative;
    padding-left: 30px;
    font-size: 14px; line-height: 1.55; color: var(--ink-700);
  }
  .price-points li::before {
    position: absolute; left: 0; top: 1px;
    width: 18px; text-align: left;
    font-weight: 800; line-height: 1.55;
  }
  .price-points li.bad::before { content: "–"; color: #B42318; font-size: 18px; }
  .price-points li.good::before { content: "✓"; color: var(--green); font-size: 14px; }
  .price-points li b { color: var(--ink-900); font-weight: 600; }

  .scenario {
    margin-top: 56px;
    background: var(--ink-900);
    color: #fff;
    border-radius: 22px;
    padding: 40px 44px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    align-items: stretch;
  }
  .scen-head {
    display: flex; flex-direction: column; justify-content: center;
    border-right: 1px solid rgba(255,255,255,.14);
    padding-right: 28px;
  }
  .scen-head .eyebrow { color: var(--secondary); margin-bottom: 14px; }
  .scen-head .eyebrow::before { background: var(--secondary); }
  .scen-head h3 {
    font-family: var(--display); font-weight: 700;
    font-size: 24px; line-height: 1.2;
    margin: 0 0 8px;
  }
  .scen-head p { font-size: 13.5px; color: rgba(255,255,255,.7); margin: 0; }
  .scen-card {
    display: flex; flex-direction: column; justify-content: center; gap: 8px;
    padding: 18px 22px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    height: 100%;
  }
  .scen-card.flo { border-color: rgba(79,182,236,.4); background: rgba(79,182,236,.08); }
  .scen-card .who {
    font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
    text-transform: uppercase; color: rgba(255,255,255,.6);
  }
  .scen-card.flo .who { color: var(--secondary); }
  .scen-card .total {
    font-family: var(--display); font-weight: 700;
    font-size: 30px; letter-spacing: -.025em; color: #fff;
    line-height: 1;
  }
  .scen-card .total span { font-size: 13px; color: rgba(255,255,255,.55); font-weight: 500; margin-left: 4px; }
  .scen-card .breakdown {
    font-family: var(--mono); font-size: 11.5px;
    color: rgba(255,255,255,.7);
    line-height: 1.55;
  }

  /* ─── REVIEWS ─── */
  .review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
  .review-card {
    background: #fff; border: 1px solid var(--ink-200);
    border-radius: 22px; padding: 36px;
    display: flex; flex-direction: column; gap: 14px;
    height: 100%;
  }
  .review-card h3 { min-height: 32px; }
  .review-card.flo { background: linear-gradient(160deg, #fff 0%, var(--mint-tint) 100%); border-color: #BFEFD0; }
  .review-tag {
    display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-500);
  }
  .review-tag.flo-tag { color: var(--green-dk); }
  .stars5 {
    display: inline-flex; gap: 1px;
    color: #F2C94C; font-size: 13px;
  }
  .stars5 .s { color: #F2C94C; }
  .stars5 .e { color: var(--ink-300); }
  .review-card h3 {
    font-family: var(--display); font-weight: 700;
    font-size: 22px; letter-spacing: -.015em;
    margin: 0;
  }
  .quote {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: var(--ink-800);
    margin: 0;
    padding-left: 16px;
    border-left: 3px solid var(--ink-300);
  }
  .review-card.flo .quote { border-left-color: var(--green); }
  .review-meta {
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
    color: var(--ink-500);
  }
  .review-meta b { color: var(--ink-700); }
  .review-foot {
    margin-top: auto; padding-top: 14px;
    border-top: 1px solid var(--ink-200);
    font-size: 13px; color: var(--ink-600); line-height: 1.5;
  }

  /* ─── FAQ ─── */
  .faq-list { display: flex; flex-direction: column; gap: 14px; max-width: 980px; margin: 0 auto; }
  details.faq {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
  }
  details.faq[open] { border-color: var(--primary); }
  details.faq summary {
    list-style: none;
    cursor: pointer;
    padding: 24px 28px;
    display: flex; align-items: center; gap: 16px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -.015em;
    color: var(--ink-900);
  }
  details.faq summary::-webkit-details-marker { display: none; }
  details.faq summary::before {
    content: "+";
    width: 28px; height: 28px;
    background: var(--ink-100);
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--primary);
    font-weight: 700; font-size: 18px;
    flex: 0 0 28px;
    transition: transform .15s, background .15s;
  }
  details.faq[open] summary::before { content: "–"; background: var(--primary); color: #fff; }
  details.faq .ans {
    padding: 0 28px 26px 72px;
    font-size: 15px; line-height: 1.65; color: var(--ink-700);
  }
  details.faq .ans b { color: var(--ink-900); font-weight: 600; }
  details.faq .ans p { margin: 0 0 10px; }

  /* ─── CTA STRIP ─── */
  .cta-strip {
    background:
      radial-gradient(900px 500px at 100% 0%, rgba(79,182,236,.25), transparent 60%),
      radial-gradient(700px 400px at 0% 100%, rgba(37,211,102,.18), transparent 60%),
      linear-gradient(135deg, #0A1024 0%, #0E2A4A 50%, #0E6EA6 100%);
    color: #fff;
    border-radius: 28px;
    padding: 72px 80px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 56px;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  .cta-strip::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 3px 3px;
  }
  .cta-strip h2 {
    position: relative;
    font-family: var(--display); font-weight: 700;
    font-size: clamp(32px, 3.4vw, 48px);
    line-height: 1.05; letter-spacing: -.03em;
    margin: 0 0 18px; max-width: 18ch;
  }
  .cta-strip h2 i { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--secondary); }
  /* Green accent inside the CTA strip H2 (`<span class="acc">`).
     Mirrors `.cta-strip h2 i` (sky-blue) so dual-tone treatments read
     consistently against the dark gradient. */
  .cta-strip h2 .acc { letter-spacing: -.03em; }
  .cta-strip p {
    position: relative;
    font-size: 17px; line-height: 1.55;
    color: rgba(255,255,255,.78); margin: 0 0 28px;
    max-width: 52ch;
  }
  .cta-strip .ctas { position: relative; display: flex; gap: 12px; flex-wrap: wrap; }
  .cta-strip .btn-primary { background: #fff; color: var(--primary); }
  .cta-strip .btn-primary:hover { background: var(--sky-tint); }
  .cta-mascot {
    position: relative;
    display: flex; align-items: end; justify-content: center;
  }
  .cta-mascot img {
    max-height: 260px; width: auto;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,.4));
  }

  /* ─── FOOTNOTES + REF TOOLTIPS ─── */
  .ref {
    display: inline-block;
    font-family: var(--mono);
    font-size: .68em;
    font-weight: 600;
    line-height: 1;
    vertical-align: super;
    color: var(--primary);
    background: rgba(14,110,166,.10);
    border: 1px solid rgba(14,110,166,.25);
    padding: 1px 5px 2px;
    border-radius: 5px;
    margin-left: 2px;
    cursor: pointer;
    user-select: none;
    transition: background .12s, color .12s;
    text-decoration: none;
  }
  .ref:hover, .ref.is-active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
  }
  .cmp-hero .ref, .cta-strip .ref, .scenario .ref, .cmp-table thead .ref {
    color: var(--secondary);
    background: rgba(79,182,236,.14);
    border-color: rgba(79,182,236,.4);
  }
  .cmp-hero .ref:hover, .scenario .ref:hover, .cmp-table thead .ref:hover, .cta-strip .ref:hover {
    background: var(--secondary); color: #0A1024;
  }
  #ref-tooltip {
    position: absolute;
    z-index: 100;
    max-width: 360px;
    background: var(--ink-900);
    color: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.55;
    box-shadow: 0 18px 40px -12px rgba(0,0,0,.45);
    opacity: 0; transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .14s, transform .14s;
    border: 1px solid rgba(255,255,255,.12);
  }
  #ref-tooltip.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  #ref-tooltip .num {
    display: inline-block;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--secondary);
    margin-bottom: 6px;
  }
  #ref-tooltip a {
    display: inline-block; margin-top: 8px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
    color: var(--secondary); text-transform: uppercase;
  }
  #ref-tooltip::after {
    content: ""; position: absolute;
    bottom: -7px; left: 24px;
    width: 12px; height: 12px;
    background: var(--ink-900);
    border-right: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
    transform: rotate(45deg);
  }
  #ref-tooltip[data-placement="bottom"]::after {
    bottom: auto; top: -7px;
    border-right: 0; border-bottom: 0;
    border-top: 1px solid rgba(255,255,255,.12);
    border-left: 1px solid rgba(255,255,255,.12);
  }

  .footnotes {
    background: var(--ink-050);
    padding: 64px 0;
    border-top: 1px solid var(--ink-200);
  }
  .footnotes h4 {
    font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ink-500);
    margin: 0 0 20px;
  }
  .footnotes ol {
    margin: 0; padding-left: 28px;
    font-size: 13px; color: var(--ink-600); line-height: 1.7;
    counter-reset: fn;
  }
  .footnotes ol li {
    margin-bottom: 10px; max-width: 90ch;
    scroll-margin-top: 100px;
  }
  .footnotes ol li:target {
    background: rgba(14,110,166,.06); padding: 8px 12px; margin-left: -12px;
    border-radius: 8px; border-left: 3px solid var(--primary);
  }
  .footnotes ol li b { color: var(--ink-800); }
  .footnotes ol li .fn-links {
    display: inline-flex; flex-wrap: wrap; gap: 4px 10px;
    margin-top: 6px; padding-top: 6px;
    border-top: 1px dashed var(--ink-200);
    width: 100%;
  }
  .footnotes ol li .fn-links a {
    color: var(--primary); text-decoration: none;
    font-family: var(--mono); font-size: 11px;
    letter-spacing: .04em;
    border-bottom: 1px solid rgba(14,110,166,.25);
    padding-bottom: 1px;
  }
  .footnotes ol li .fn-links a:hover { color: var(--primary-700); border-bottom-color: var(--primary); }

  /* ─── FOOTER ─── */
  footer.foot {
    background: var(--ink-900);
    color: rgba(255,255,255,.72);
    padding: 80px 0 40px;
  }
  .foot-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 56px;
  }
  .foot-brand { display: flex; flex-direction: column; gap: 18px; }
  .foot-brand .lockup {
    display: flex; align-items: center; gap: 10px;
    color: #fff;
    font-family: var(--display); font-weight: 700; font-size: 24px;
    letter-spacing: -.025em;
  }
  .foot-brand .lockup svg { height: 30px; }
  .foot-brand p { font-size: 14.5px; line-height: 1.6; margin: 0; max-width: 38ch; }
  .foot-brand p i { font-family: var(--serif); font-style: italic; color: var(--secondary); }
  .foot-col h4 {
    font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
    text-transform: uppercase; color: rgba(255,255,255,.55);
    margin: 0 0 14px;
  }
  .foot-col a { display: block; font-size: 14px; padding: 4px 0; color: rgba(255,255,255,.78); }
  .foot-col a:hover { color: var(--secondary); }
  .foot-bar {
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 24px;
    display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between;
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
    color: rgba(255,255,255,.5);
  }
  .foot-bar .legal { display: flex; gap: 18px; flex-wrap: wrap; }

  @media (max-width: 1180px) {
    .scene-grid, .pricing-grid, .deep-grid, .review-grid { grid-template-columns: 1fr; gap: 24px; }
    .who-grid { grid-template-columns: 1fr; }
    .nav-links { display: none; }
    .scenario { grid-template-columns: 1fr; }
    .scen-head { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); padding-right: 0; padding-bottom: 24px; }
    .cta-strip { grid-template-columns: 1fr; padding: 48px; }
    .cta-mascot { display: none; }
    .cmp-table thead th { padding: 16px; font-size: 13px; }
    .cmp-table tbody td { padding: 14px 16px; font-size: 13px; }
    .deep-rows { grid-template-columns: 1fr; }
    .cmp-h2h-grid { grid-template-columns: 1fr; }
    .cmp-h2h-vs { padding: 4px 0; }
  }
  /* Wrapper around .cmp-table-wrap that hosts the absolutely-positioned
     fade and chevron on mobile. `position: relative` always; the chevrons
     default to `display: none` and are promoted to `inline-flex` inside
     the @media (max-width: 720px) block below. These resets MUST live
     above the media-query block so the cascade lets the mobile rules
     win — when they sat below, `display: none` here always overrode the
     mobile `display: inline-flex` because both rules have the same
     specificity. */
  .cmp-table-rail { position: relative; }
  .cmp-table-next,
  .cmp-table-prev { display: none; }
  @keyframes cmpTableNudge {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(4px); }
  }
  @keyframes cmpTableNudgeLeft {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(-4px); }
  }
  @media (max-width: 720px) {
    .wrap, .wrap-narrow { padding: 0 24px; }
    section.s { padding: 80px 0; }
    body.flowella-hubdb-comparison.flowella-has-dark-hero .cmp-hero { padding-top: 112px; padding-bottom: 64px; }
    .cmp-h2h-section { padding: 64px 0; }
    .cmp-hero-bg-word { font-size: 220px; }
    .cmp-table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
    }
    .cmp-table { min-width: 640px; }
    /* Stack the "Flowella wins / Gallabox wins" tally cards on phones —
       at <=720px the right card otherwise overflows the viewport because
       the verdict copy is too long to fit in a 50/50 grid cell. */
    .cmp-tally { grid-template-columns: 1fr; gap: 12px; }
    .cmp-tally-card { padding: 16px 18px; gap: 14px; }
    .cmp-tally-score { font-size: 32px; }
    .cmp-tally-verdict { font-size: 14.5px; }
    .foot-grid { grid-template-columns: 1fr; gap: 32px; }
    .cta-strip { padding: 40px 28px; border-radius: 22px; }
    .cmp-h2h { padding: 24px; }

    /* Mobile-only swipe affordance on the comparison table — soft fade
       gradients on each scrollable edge plus small circular chevron
       buttons. Mirrors the use-case filter chips rail pattern so the cue
       is consistent across horizontally scrolling content on phones.
       JS toggles `is-start` (no left scroll possible) and `is-end` (no
       right scroll possible) — the corresponding side fades out. When
       the table fits without overflow both sides are hidden. The
       gradients deliberately stop short of full white so the cue
       blends into the rounded card rather than masking the cell text
       under it. */
    .cmp-table-rail::before,
    .cmp-table-rail::after {
      display: block;
      content: "";
      position: absolute;
      top: 1px;
      bottom: 1px;
      width: 56px;
      pointer-events: none;
      transition: opacity .25s ease;
      z-index: 2;
    }
    .cmp-table-rail::before {
      left: 0;
      border-radius: 22px 0 0 22px;
      background: linear-gradient(
        to left,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .55) 65%,
        rgba(255, 255, 255, .85) 100%
      );
    }
    .cmp-table-rail::after {
      right: 0;
      border-radius: 0 22px 22px 0;
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .55) 65%,
        rgba(255, 255, 255, .85) 100%
      );
    }
    .cmp-table-prev,
    .cmp-table-next {
      display: inline-flex;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .92);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border: 1px solid var(--ink-200);
      border-radius: 99px;
      color: var(--ink-700);
      cursor: pointer;
      padding: 0;
      box-shadow: 0 4px 10px -2px rgba(15, 23, 42, .14);
      transition: opacity .25s ease, transform .15s ease, background .15s ease;
      z-index: 3;
    }
    .cmp-table-prev { left: 12px; animation: cmpTableNudgeLeft 1.8s ease-in-out 1.2s 4; }
    .cmp-table-next { right: 12px; animation: cmpTableNudge 1.8s ease-in-out 1.2s 4; }
    .cmp-table-prev:hover,
    .cmp-table-next:hover {
      background: var(--ink-050);
    }
    .cmp-table-prev:focus-visible,
    .cmp-table-next:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px var(--primary);
    }
    .cmp-table-rail.is-start::before,
    .cmp-table-rail.is-start .cmp-table-prev,
    .cmp-table-rail.is-end::after,
    .cmp-table-rail.is-end .cmp-table-next {
      opacity: 0;
      pointer-events: none;
      animation: none;
    }
  }
  /* Stack CTA-strip buttons full-width on phones — "Install free from
     HubSpot Marketplace →" is a long label that overflows the viewport
     while `.btn`'s base `white-space: nowrap` is in effect. */
  @media (max-width: 560px) {
    .cta-strip .ctas {
      flex-direction: column;
      align-items: stretch;
    }
    .cta-strip .ctas .btn {
      width: 100%;
      white-space: normal;
      text-align: center;
      word-break: break-word;
    }
  }

/* HubDB template — hero richtext slot + logo fallback */
.cmp-hero-h1-slot h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 78px);
  line-height: 1.0;
  letter-spacing: -.035em;
  margin: 0 0 26px;
  color: #fff;
  max-width: 22ch;
}
.brand-cmp-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 36px);
  color: var(--ink-900);
}