/* ==========================================================================
   QUOTARIDER — REFINE LAYER v4
   Loads LAST. Two jobs:
     1. Corrects the dark-theme tokens that leak onto white pages
     2. Replaces the one-size banner with a HubSpot-grade banner system
   Nothing else in the stack is edited; this layer overrides.
   ========================================================================== */

/* ── 1. TOKEN CORRECTION ───────────────────────────────────────────────────
   theme.css defines these for a near-black page. Every page is white now, so
   ~1,257 references across the site were rendering at 1.8:1–2.7:1 contrast.
   Remapping here fixes all of them at once, with no page edits.            */
:root{
  /* remapped dark-theme tokens — all now AA or better on white */
  --text:        #1B2A3D;
  --text-2:      #4A5A6E;   /* was #a5a1bd — 2.49:1 → 7.1:1  */
  --text-3:      #64748B;   /* was #6f6b8a — muted but legible */
  --line:        #DFE4EA;   /* was rgba(255,255,255,.08) — invisible on white */
  --line-2:      #CBD3DC;
  --violet:      #014486;
  --violet-2:    #014486;   /* was #a78bfa — 2.72:1 → 5.2:1  */
  --violet-3:    #032D60;
  --violet-deep: #032D60;
  --surface:     #F5F8FA;
  --surface-2:   #EDF2F6;
  --surface-solid:#FFFFFF;
  --bg:          #FFFFFF;
  --bg-2:        #F5F8FA;
  --bg-3:        #EDF2F6;

  /* refine palette */
  --ink:      #1B2A3D;
  --ink-2:    #4A5A6E;
  --ink-3:    #6B7A90;
  --rule:     #DFE4EA;
  --rule-2:   #EEF2F6;
  --canvas:   #F5F8FA;
  --warm:     #F4F8FF;
  --warm-2:   #D8E6FE;
  --deep:     #16263C;
  --deep-2:   #22364F;
  --o:        #0176D3;
  --o-ink:    #014486;
  --o-lift:   #57A3FA;
  --o-soft:   #EEF4FF;

  --band:  clamp(56px, 6vw, 84px);
  --band-c:clamp(36px, 4vw, 52px);
}

/* kill the fixed purple wash bleeding under white pages */
body::before{ display:none !important; }
body{ background:#fff; color:var(--ink); }


/* ── 2. TYPE DISCIPLINE ────────────────────────────────────────────────────
   The old scale topped out at 4.2rem — it shouts and wraps badly. HubSpot
   lands its page H1 near 48px. Measure is capped so lines stay readable.   */
p{ color:var(--ink-2); }
.lead{ color:var(--ink-2); font-size:1.06rem; line-height:1.7; max-width:58ch; }
h1,h2,h3,h4{ color:var(--ink); }
h2{ font-size:clamp(1.6rem,2.8vw,2.15rem); line-height:1.18; letter-spacing:-.022em; font-weight:700; }
h3{ font-size:clamp(1.1rem,1.6vw,1.3rem);  line-height:1.3;  letter-spacing:-.015em; font-weight:700; }
main p{ max-width:72ch; }
main .lead{ max-width:58ch; }


/* ── 3. BANNER SYSTEM ──────────────────────────────────────────────────────
   One structure, five surfaces. Page type picks the surface, so the site
   stops looking like the same banner 342 times.                            */

/* -- reset the old treatment (blobs, grid mask, forced centring) -- */
.qbanner::before,.qbanner::after,
.qhero::before,.qhero::after{ content:none !important; display:none !important; }

.qbanner,.qhero{
  position:relative;
  padding:var(--band) 0 calc(var(--band) * .78);
  background:#fff;
  border-bottom:1px solid var(--rule-2);
  text-align:left !important;
  overflow:visible;
}
.qbanner .wrap,.qhero .wrap{ position:relative; z-index:1; max-width:var(--max,1240px); text-align:left !important; }
.qb-in{ max-width:none; margin:0; text-align:left !important; }

/* breadcrumb */
.qb-crumb{
  font-size:.78rem; color:var(--ink-3); margin:0 0 22px;
  letter-spacing:.005em;
}
.qb-crumb a{ color:var(--ink-3); text-decoration:none; border-bottom:1px solid transparent; }
.qb-crumb a:hover{ color:var(--o-ink); border-bottom-color:currentColor; }
.qb-crumb span{ color:var(--ink); font-weight:600; }

/* eyebrow — small, left, no auto margins */
.qbanner .qeyebrow,.qhero .qeyebrow,
.qbanner .eyebrow,.qhero .eyebrow,
.qb-in .qeyebrow,.qb-in .eyebrow{
  display:inline-block; margin:0 !important;
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--o-ink) !important; background:var(--o-soft);
  border:1px solid var(--warm-2); border-radius:999px; padding:6px 13px;
}

/* headline */
.qbanner .qh1,.qhero .qh1,
.qbanner h1,.qhero h1{
  text-align:left !important;
  margin:20px 0 0 !important;
  max-width:19ch !important;
  color:var(--ink) !important; -webkit-text-fill-color:var(--ink);
  font-weight:700; letter-spacing:-.028em; line-height:1.1;
  font-size:clamp(2.05rem,3.7vw,3.05rem) !important;
}
.qbanner h1 em,.qhero h1 em,
.qbanner .qh1 em,.qhero .qh1 em,
.qbanner h1 .ital,.qhero h1 .ital{
  font-style:normal; font-family:inherit;
  color:var(--o) !important; -webkit-text-fill-color:var(--o);
}
.qbanner .qh1 .dot,.qhero .qh1 .dot{ color:var(--o) !important; -webkit-text-fill-color:var(--o); }

/* sub */
.qbanner .qsub,.qhero .qsub,
.qbanner .lead,.qhero .lead,
.qb-in p:not(.qb-crumb):not(.qmicro){
  text-align:left !important;
  margin:18px 0 0 !important;
  max-width:56ch !important;
  color:var(--ink-2) !important;
  font-size:1.06rem; line-height:1.7;
}
.qbanner .qsub b,.qhero .qsub b{ color:var(--ink); font-weight:700; }

/* CTA row */
.qcta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; justify-content:flex-start !important; }
.qmicro{ margin-top:16px !important; font-size:.82rem; color:var(--ink-3) !important; text-align:left !important; }

/* buttons — squarer, HubSpot-weight */
.qbtn,.btn{ border-radius:6px !important; font-weight:600 !important; letter-spacing:0 !important; }
.qbtn-p,.btn-p{
  background:var(--o) !important; color:#fff !important; border:1px solid var(--o) !important;
  box-shadow:none !important;
}
.qbtn-p:hover,.btn-p:hover{
  background:#005FB2 !important; border-color:#005FB2 !important;
  transform:none !important; box-shadow:0 4px 14px -4px rgba(1,118,211,.45) !important;
}
.qbtn-o,.btn-g,.btn-t{
  background:#fff !important; color:var(--o-ink) !important;
  border:1px solid var(--o) !important;
}
.qbtn-o:hover,.btn-g:hover,.btn-t:hover{
  background:var(--o-soft) !important; color:var(--o-ink) !important;
  transform:none !important; box-shadow:none !important;
}

/* chips under the hero */
.qhero-chips{ justify-content:flex-start; margin-top:26px; }
.qhc{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.82rem; color:var(--ink-2);
  background:#fff; border:1px solid var(--rule); border-radius:999px; padding:7px 14px;
}
.qhc i.ok{ width:14px;height:14px;border-radius:50%;background:var(--o-soft);position:relative;flex:0 0 14px; }
.qhc i.ok::after{
  content:''; position:absolute; inset:0; margin:auto; width:5px;height:8px;
  border:solid var(--o); border-width:0 1.6px 1.6px 0; transform:rotate(45deg) translate(-1px,-1px);
}


/* ── 3a. VARIANT: TINT ── solution / feature / industry pages ── */
.qbanner--tint{ background:var(--canvas); border-bottom-color:var(--rule); }

/* ── 3b. VARIANT: WARM ── top-of-funnel, use-case, location pages ── */
.qbanner--warm{ background:var(--warm); border-bottom-color:var(--warm-2); }

/* ── 3c. VARIANT: DEEP ── comparison, enterprise, pricing ── */
.qbanner--deep{ background:var(--deep); border-bottom:0; }
.qbanner--deep .qh1,.qbanner--deep h1{ color:#fff !important; -webkit-text-fill-color:#fff; }
.qbanner--deep .qh1 em,.qbanner--deep h1 em,.qbanner--deep h1 .ital,
.qbanner--deep .qh1 .dot{ color:var(--o-lift) !important; -webkit-text-fill-color:var(--o-lift); }
.qbanner--deep .qsub,.qbanner--deep .lead,.qbanner--deep .qb-in p{ color:#B4C2D2 !important; }
.qbanner--deep .qeyebrow,.qbanner--deep .eyebrow{
  color:#AACBFF !important; background:rgba(87,163,250,.13); border-color:rgba(87,163,250,.3);
}
.qbanner--deep .qb-crumb,.qbanner--deep .qb-crumb a{ color:#8FA1B6; }
.qbanner--deep .qb-crumb span{ color:#DCE5EE; }
.qbanner--deep .qmicro{ color:#8FA1B6 !important; }
.qbanner--deep .qbtn-o{ background:transparent !important; color:#fff !important; border-color:rgba(255,255,255,.4) !important; }
.qbanner--deep .qbtn-o:hover{ background:rgba(255,255,255,.09) !important; color:#fff !important; border-color:#fff !important; }
.qbanner--deep .qhc{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#C6D2E0; }

/* ── 3d. VARIANT: COMPACT ── blog, legal, index/hub pages ── */
.qbanner--compact{ padding:var(--band-c) 0 calc(var(--band-c) * .82); }
.qbanner--compact .qh1,.qbanner--compact h1{ font-size:clamp(1.85rem,3vw,2.5rem) !important; max-width:24ch !important; }
.qbanner--compact .qsub,.qbanner--compact .lead{ font-size:1rem; }

/* ── 3e. VARIANT: SPLIT ── homepage & flagship product pages ── */
.qhero-grid{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(36px,4.5vw,64px); align-items:center;
}
.qhero-copy .qh1{ max-width:15ch !important; }
.qhero-copy .qsub{ max-width:50ch !important; }
.qhero-viz{ min-width:0; }


/* ── 4. BANNER PROOF STRIP ── the thing that differentiates page types ── */
.qb-proof{
  margin-top:38px; padding-top:24px; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:34px 48px; align-items:flex-start;
}
.qb-proof > div{ min-width:0; }
.qb-proof b{
  display:block; font-size:1.5rem; font-weight:700; color:var(--ink);
  letter-spacing:-.02em; line-height:1.1;
}
.qb-proof span{ display:block; margin-top:5px; font-size:.82rem; color:var(--ink-3); line-height:1.5; }
.qbanner--deep .qb-proof{ border-top-color:rgba(255,255,255,.15); }
.qbanner--deep .qb-proof b{ color:#fff; }
.qbanner--deep .qb-proof span{ color:#8FA1B6; }
.qbanner--tint .qb-proof,.qbanner--warm .qb-proof{ border-top-color:rgba(27,42,61,.11); }


/* ── 5. GENERAL READABILITY REPAIR ─────────────────────────────────────────
   Anything still pointing at old dark values gets caught here.             */
.card,.qviz,.qpack{ background:#fff; border:1px solid var(--rule); border-radius:10px; }
.tag,.qtag-c{ background:var(--o-soft); color:var(--o-ink); border:1px solid var(--warm-2); }
table th{ color:var(--ink); font-weight:700; }
table td{ color:var(--ink-2); }
table th,table td{ border-color:var(--rule) !important; }
a{ color:inherit; }
main a:not(.btn):not(.qbtn):not(.card):not(.qrel):not(.qtag-c){ color:var(--o-ink); }
.ital{ color:var(--o-ink); }
hr{ border:0; border-top:1px solid var(--rule); }
:focus-visible{ outline:2px solid var(--o); outline-offset:2px; border-radius:3px; }


/* ── 6. RESPONSIVE ─────────────────────────────────────────────────────────*/
@media(max-width:900px){
  .qhero-grid{ grid-template-columns:1fr; gap:34px; }
  .qhero-viz{ max-width:560px; }
  .qb-proof{ gap:24px 32px; }
  .qb-proof b{ font-size:1.28rem; }
}
@media(max-width:640px){
  .qbanner,.qhero{ padding:40px 0 34px; }
  .qbanner .qh1,.qhero .qh1,.qbanner h1,.qhero h1{
    font-size:clamp(1.72rem,7.4vw,2.15rem) !important; max-width:100% !important;
  }
  .qbanner .qsub,.qhero .qsub,.qbanner .lead{ font-size:.98rem; max-width:100% !important; }
  .qcta{ flex-direction:column; align-items:stretch; }
  .qcta .qbtn,.qcta .btn{ width:100%; }
  .qb-proof{ gap:20px 26px; margin-top:28px; }
  .qb-proof > div{ flex:1 1 40%; }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}


/* ── 7. LONG-FORM ARTICLE LAYER ────────────────────────────────────────────
   Tuned for the SalesBread reading pattern: short paragraphs, heavy
   sub-heading density, quotable examples, scannable lists.               */
.qbanner .qpost-date{
  display:inline-block; margin-left:10px;
  font-size:.8rem; color:var(--ink-3); font-weight:500;
}
.qpost-meta{ margin-top:14px !important; font-size:.82rem; color:var(--ink-3) !important; }
.qpost-meta span{ margin:0 7px; }
.qpost-lede{ font-size:1.1rem !important; line-height:1.65; color:var(--ink-2) !important; max-width:60ch !important; }
.qtag-row{ margin-top:20px; display:flex; gap:8px; flex-wrap:wrap; }

.qpost-body{ max-width:none; }
.qpost-body > *{ max-width:68ch; }
.qpost-body p{ font-size:1.045rem; line-height:1.78; color:var(--ink-2); margin:0 0 20px; }
.qpost-body p strong,.qpost-body li strong{ color:var(--ink); font-weight:700; }
.qpost-body h2{
  margin:48px 0 16px; padding-top:26px; border-top:1px solid var(--rule-2);
  font-size:clamp(1.42rem,2.3vw,1.85rem); letter-spacing:-.022em;
}
.qpost-body h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.qpost-body h3{ margin:34px 0 12px; font-size:1.18rem; }
.qpost-body h4{ margin:26px 0 10px; font-size:1.02rem; color:var(--ink); }
.qpost-body ul,.qpost-body ol{ margin:0 0 22px; padding-left:0; }
.qpost-body li{
  position:relative; padding-left:26px; margin-bottom:11px;
  font-size:1.02rem; line-height:1.7; color:var(--ink-2);
}
.qpost-body ul > li::before{
  content:''; position:absolute; left:6px; top:.68em;
  width:6px; height:6px; border-radius:50%; background:var(--o);
}
.qpost-body ol{ counter-reset:qol; }
.qpost-body ol > li{ padding-left:32px; }
.qpost-body ol > li::before{
  counter-increment:qol; content:counter(qol);
  position:absolute; left:0; top:.1em;
  font-size:.76rem; font-weight:700; color:var(--o-ink);
  background:var(--o-soft); border:1px solid var(--warm-2);
  width:21px; height:21px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* the example block — verbatim outreach copy, the thing readers steal */
.qsample{
  margin:26px 0; padding:22px 24px; max-width:68ch;
  background:var(--canvas); border-left:3px solid var(--o); border-radius:0 8px 8px 0;
}
.qsample-h{
  font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--o-ink); margin:0 0 12px !important;
}
.qsample p{ font-size:.99rem !important; line-height:1.72; margin-bottom:12px !important; color:var(--ink-2); }
.qsample p:last-child{ margin-bottom:0 !important; }

/* side note / pro tip */
.qnote{
  margin:26px 0; padding:18px 22px; max-width:68ch;
  background:var(--warm); border:1px solid var(--warm-2); border-radius:8px;
}
.qnote p{ font-size:.97rem !important; margin-bottom:0 !important; }
.qnote b{ color:var(--o-ink); }

/* data callout */
.qstat-row{
  display:flex; flex-wrap:wrap; gap:14px; margin:26px 0; max-width:68ch;
}
.qstat{
  flex:1 1 160px; padding:18px 20px;
  background:#fff; border:1px solid var(--rule); border-radius:8px;
}
.qstat b{ display:block; font-size:1.7rem; font-weight:700; color:var(--ink); letter-spacing:-.02em; line-height:1; }
.qstat span{ display:block; margin-top:7px; font-size:.81rem; color:var(--ink-3); line-height:1.5; }

/* table of contents */
.qtoc{
  margin:0 0 40px; padding:22px 26px; max-width:68ch;
  background:var(--canvas); border:1px solid var(--rule); border-radius:10px;
}
.qtoc-h{ font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px !important; }
.qtoc ol{ margin:0; counter-reset:qt; }
.qtoc li{ padding-left:0; margin-bottom:9px; font-size:.95rem; }
.qtoc li::before{ display:none !important; }
.qtoc a{ color:var(--ink-2); text-decoration:none; border-bottom:1px solid transparent; }
.qtoc a:hover{ color:var(--o-ink); border-bottom-color:currentColor; }

/* in-body CTA — SalesBread puts one high, one low */
.qmid-cta{
  margin:36px 0; padding:26px 28px; max-width:68ch;
  background:var(--deep); border-radius:12px;
}
.qmid-cta p{ color:#C6D2E0 !important; font-size:1rem !important; margin:0 0 16px !important; }
.qmid-cta b{ color:#fff; }
.qmid-cta a{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--o); color:#fff !important; font-weight:600; font-size:.94rem;
  padding:12px 22px; border-radius:6px; text-decoration:none;
}
.qmid-cta a:hover{ background:#005FB2; }

/* FAQ */
.qpost-faq{ margin-top:52px; max-width:68ch; }
.qpost-faq h2{ margin-bottom:18px; }
.qfaq{ border:1px solid var(--rule); border-radius:8px; margin-bottom:10px; background:#fff; }
.qfaq summary{
  cursor:pointer; padding:16px 20px; font-weight:600; font-size:1rem; color:var(--ink);
  list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.qfaq summary::-webkit-details-marker{ display:none; }
.qfaq summary::after{ content:'+'; color:var(--o); font-size:1.3rem; font-weight:400; line-height:1; flex:0 0 auto; }
.qfaq[open] summary::after{ content:'–'; }
.qfaq p{ padding:0 20px 18px; margin:0 !important; font-size:.99rem !important; }

/* author box */
.qauthor{
  display:flex; gap:18px; align-items:flex-start; margin-top:48px; padding:24px 26px; max-width:68ch;
  background:var(--canvas); border-radius:10px; border:1px solid var(--rule);
}
.qauthor-av{
  flex:0 0 52px; width:52px; height:52px; border-radius:50%;
  background:var(--o-soft); border:1px solid var(--warm-2);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:var(--o-ink); font-size:1rem;
}
.qauthor b{ display:block; color:var(--ink); font-size:.98rem; }
.qauthor i{ display:block; font-style:normal; color:var(--ink-3); font-size:.83rem; margin:2px 0 9px; }
.qauthor p{ font-size:.92rem !important; margin:0 !important; line-height:1.65; }

@media(max-width:640px){
  .qpost-body p,.qpost-body li{ font-size:.99rem; }
  .qsample,.qnote,.qmid-cta{ padding:18px; }
  .qauthor{ flex-direction:column; gap:12px; }
}

/* ── 8. PILLAR TABLES + CITATIONS ──────────────────────────────────────────*/
.qtable-wrap{ margin:30px 0; max-width:none; overflow-x:auto; border:1px solid var(--rule); border-radius:10px; }
.qtable-cap{ padding:14px 18px; margin:0 !important; font-size:.78rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  background:var(--canvas); border-bottom:1px solid var(--rule); }
.qtable{ width:100%; min-width:720px; border-collapse:collapse; font-size:.9rem; background:#fff; }
.qtable th{ text-align:left; padding:12px 18px; font-size:.76rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  border-bottom:1px solid var(--rule); background:#fff; }
.qtable td{ padding:13px 18px; border-bottom:1px solid var(--rule-2);
  color:var(--ink-2); line-height:1.55; vertical-align:top; }
.qtable tbody tr:last-child td{ border-bottom:0; }
.qtable tbody tr:hover td{ background:var(--canvas); }
.qtable td:first-child{ white-space:nowrap; color:var(--ink); }
.qtable td:nth-child(2){ font-size:.84rem; color:var(--ink-3); }
.qcite{ margin:34px 0 0 !important; padding-top:18px; border-top:1px solid var(--rule-2);
  font-size:.83rem !important; color:var(--ink-3) !important; max-width:68ch; }
.qcite a{ color:var(--o-ink); }
@media(max-width:640px){ .qtable{ font-size:.84rem; } .qtable th,.qtable td{ padding:10px 12px; } }

/* ── 9. ALIGNMENT REPAIR ───────────────────────────────────────────────────
   light.css centres the whole banner block (1270-1279). Section 3 caught the
   headline and sub; these are the stragglers it did not.                    */

/* every direct <p> in a banner — includes .qmicro, which was auto-centred */
.qbanner .qb-in > p,
.qhero .qb-in > p,
.qbanner .qmicro,
.qhero .qmicro{
  margin-left:0 !important; margin-right:0 !important;
  text-align:left !important;
}
.qbanner .qmicro,.qhero .qmicro{ max-width:64ch !important; }

/* CTA rows written as inline-styled flex divs get force-centred by light.css */
.qbanner .qb-in > div[style*="display:flex"],
.qhero .qb-in > div[style*="display:flex"],
.qbanner .qb-in .dcta,
.qhero .qb-in .dcta{
  justify-content:flex-start !important;
  margin-left:0 !important; margin-right:0 !important;
}

/* eyebrow pill: kill the auto margins from light.css:1274 */
.qbanner .qb-in .qeyebrow,.qbanner .qb-in .eyebrow,
.qhero .qb-in .qeyebrow,.qhero .qb-in .eyebrow{
  margin-left:0 !important; margin-right:0 !important;
}

/* breadcrumb + tag row share the banner's left edge */
.qbanner .qb-crumb,.qhero .qb-crumb,
.qbanner .qtag-row,.qhero .qtag-row,
.qbanner .qpost-meta,.qhero .qpost-meta{
  margin-left:0 !important; margin-right:0 !important; text-align:left !important;
}

/* .qpost re-centres its own container — banner content must stay left */
.qpost .qb-in{ text-align:left !important; margin:0 !important; max-width:none !important; }

/* pricing billing toggle overflowed the viewport on mobile */
@media(max-width:640px){
  .pr-toggle{ display:flex !important; flex-wrap:wrap; width:100%; }
  .pr-tb{ flex:1 1 auto; padding:10px 14px !important; white-space:nowrap; font-size:.86rem; }
  .pr-seg{ grid-template-columns:1fr !important; }
}

/* ── 10. SECTION HEAD ALIGNMENT ────────────────────────────────────────────
   marketing.css:222 centres .qsec-head and theme.css:114 centres .head.center.
   With the banners now left-aligned, every mid-page section had a centred
   title floating over a left-aligned grid. One left edge down the page.
   The closing CTA band stays centred — that contrast is deliberate.        */
main .qsec-head,
main .head,
main .head.center{
  text-align:left !important;
  margin-left:0 !important;
  margin-right:0 !important;
  max-width:68ch;
}
main .qsec-head > *,
main .head > *{ margin-left:0 !important; margin-right:0 !important; }
main .qsec-head .qeyebrow,
main .head .eyebrow,
main .qsec-head .eyebrow{ margin-left:0 !important; margin-right:0 !important; }

/* section-level .center utility inside content sections */
main .section > .wrap > .center:not(.qfinal):not(.cta-band):not(.card),
main section > .wrap > .center:not(.qfinal):not(.cta-band):not(.card){
  text-align:left !important;
}
main .center .lead:not(.qfinal .lead){ margin-left:0 !important; margin-right:0 !important; }

/* the closing CTA band remains centred on purpose */
.qfinal,.qfinal .wrap,.qfinal .wrap > *,
.cta-band,.cta-band > *{ text-align:center !important; }
.qfinal .wrap > *,.cta-band > *{ margin-left:auto !important; margin-right:auto !important; }

/* ── 11. STRAY CENTRED CTA ROWS ────────────────────────────────────────────
   Mid-page CTA rows written as inline text-align:center divs. They read as
   stray now that section heads and content share a left edge. Deliberate
   centred moments (.qhook pull-quotes, .qfinal, .cta-band) are preserved. */
main section:not(.qhook):not(.qfinal):not(.cta-band) > .wrap > div[style*="text-align:center"],
main .section:not(.qhook):not(.qfinal):not(.cta-band) > .wrap > div[style*="text-align:center"]{
  text-align:left !important;
}
/* deliberate centred moments — explicitly protected */
.qhook,.qhook .wrap,.qhook .wrap > *{ text-align:center !important; }
.qhook .qhook-rule{ margin-left:auto !important; margin-right:auto !important; }

/* ── 12. CONTAINER + DEEP-VARIANT CONTRAST ─────────────────────────────────
   Two defects found by eye that the automated audit missed.

   (a) The banner .wrap was 1180px while every body .wrap is 1240px, so banner
       content sat 30px inside the content below it on every page. Now unified
       to --max. Belt-and-braces in case another rule reintroduces it.        */
.qbanner > .wrap,.qhero > .wrap{ max-width:var(--max,1240px) !important; }

/* (b) Deep-variant body copy was rendering #4A5A6E on #16263C — 1.4:1, the
       washed-out sub text on the pricing banner. The base rule in section 3
       (.qb-in p:not():not(), specificity 0-3-1) was outranking the deep
       override (0-2-1). Raised above it.                                     */
.qbanner--deep .qb-in p:not(.qb-crumb),
.qbanner--deep .qb-in > p:not(.qb-crumb):not(.qmicro),
.qbanner--deep .qsub,.qbanner--deep .lead,
.qbanner--deep .qpost-lede{ color:#C3D0DE !important; }
.qbanner--deep .qb-in p b,.qbanner--deep .qsub b{ color:#fff !important; }
.qbanner--deep .qmicro{ color:#94A6BA !important; }
.qbanner--deep .qb-crumb,.qbanner--deep .qb-crumb a{ color:#9DB0C4 !important; }
.qbanner--deep .qb-crumb span{ color:#E4EBF2 !important; }

/* ── 13. NARROW READING COLUMNS SHARE THE BANNER'S LEFT EDGE ───────────────
   82 pages carry an inline narrow .wrap (max-width:780-860px) and article
   bodies use .qpost (760px). Both centre via margin-inline:auto, so content
   sat indented under a left-aligned headline. Anchor them to the same left
   edge the banner uses: (100% - --max) / 2, plus the shared 24px padding.  */
main section > .wrap[style*="max-width"],
main .section > .wrap[style*="max-width"],
main article > .wrap[style*="max-width"]{
  margin-left:max(0px, calc((100% - var(--max,1240px)) / 2)) !important;
  margin-right:auto !important;
}
.qpost{
  margin-left:0 !important;
  margin-right:auto !important;
  max-width:820px;
}
/* the closing CTA band and pull-quotes stay centred on purpose */
.qfinal > .wrap,.cta-band > .wrap,.qhook > .wrap{
  margin-left:auto !important; margin-right:auto !important;
}

/* ── 14. ONE CONTAINER FOR HEADER, CONTENT AND FOOTER ──────────────────────
   The site shipped three container widths:
     header pill .mh   1180 + 18px  -> content at 274
     page      .wrap   1240 + 24px  -> content at 249
     footer    .mf-in  1140 + 22px  -> content at 275
   so logo, page content and footer each began at a different x.

   Rather than trying to compensate with margins (which only balanced at some
   viewports), .mh and .mf-in are now given the IDENTICAL box model to .wrap:
   same max-width, same auto margins, same padding. Alignment then holds at
   every width by construction instead of by arithmetic that has to be redone
   at each breakpoint.                                                       */
.mh-wrap{ padding-left:0 !important; padding-right:0 !important; }
.mh,.mf-in{
  max-width:var(--max,1240px) !important;
  margin-left:auto !important; margin-right:auto !important;
  padding-left:24px !important; padding-right:24px !important;
}
@media(max-width:640px){
  .mh,.mf-in{ padding-left:20px !important; padding-right:20px !important; }
  .wrap{ padding-inline:20px !important; }
}


/* ── 15. HALF-ALIGNED BLOCKS ───────────────────────────────────────────────
   A block can be centred two ways: text-align on the block, and margin-inline
   on its children. Section 10 changed the first without the second on
   .card.center, so the H2 box stayed centred (margin-left:350px) while its
   text went left — a 351px offset on ~30 pages that I introduced.

   Rule from here: a block is either fully centred or fully left. Never half. */

/* .card.center is a self-contained closing CTA — centre it completely */
main .card.center{ text-align:center !important; }
main .card.center > *{ margin-left:auto !important; margin-right:auto !important; }
main .card.center > div[style*="display:flex"],
main .card.center .qcta,
main .card.center .dcta{ justify-content:center !important; }

/* .head.center is a section heading over left content — left it completely */
main .head.center,main .qsec-head{ text-align:left !important; }
main .head.center > *,main .qsec-head > *,
main .head.center .lead,main .qsec-head .lead{
  margin-left:0 !important; margin-right:0 !important;
}

/* the site's own proof strip centred its cells while the one added in v4
   (.qb-proof) is left — two strips, two alignments. Unified left.          */
.qproof,.qproof > div{ text-align:left !important; }
.qproof > div > *{ margin-left:0 !important; margin-right:0 !important; }

/* same-class grids shipped different gaps (.grid.g2: 26px vs 5px 18px) */
main .grid.g2:not([style*="gap"]),
main .grid.g3:not([style*="gap"]),
main .grid.g4:not([style*="gap"]){ gap:22px; }

/* .qstat cells inherited centred text from the site's .stat styling, which put
   them out of step with the left-aligned article body they sit inside.      */
.qpost-body .qstat,.qpost-body .qstat-row{ text-align:left !important; }
.qpost-body .qstat b,.qpost-body .qstat span{ text-align:left !important; }

/* ── 16. ARTICLE CLOSING CTA ───────────────────────────────────────────────
   .qpost-cta mixed 'start' and 'center' children (224px spread) inside a
   left-aligned article body. Left throughout, like the body it sits in.   */
.qpost-cta{ text-align:left !important; }
.qpost-cta > *,.qpost-cta h3,.qpost-cta p{
  margin-left:0 !important; margin-right:0 !important; text-align:left !important;
}
.qpost-cta > div[style*="display:flex"]{ justify-content:flex-start !important; }

/* pricing: capacity table and plan grid share the page's left edge */
.pr-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:stretch; }
.pr-grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:980px){ .pr-grid,.pr-grid-2{ grid-template-columns:1fr; } }

/* ── 17. VERA HERO BAND ────────────────────────────────────────────────────*/
.vera-band{background:var(--deep);padding:var(--band) 0 !important;}
.vb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,56px);align-items:center;}
.vb-copy .qeyebrow{color:#AACBFF !important;background:rgba(87,163,250,.13) !important;border-color:rgba(87,163,250,.3) !important;}
.vb-copy h2{color:#fff !important;margin:18px 0 0 !important;font-size:clamp(1.7rem,2.9vw,2.3rem) !important;letter-spacing:-.026em;}
.vb-copy h2 em{font-style:normal;color:var(--o-lift) !important;}
.vb-copy .lead{color:#B4C2D2 !important;margin-top:16px !important;max-width:52ch !important;}
.vb-copy .lead b{color:#fff;}
.vb-copy .qcta{margin-top:26px;}
.vb-copy .qbtn-o{background:transparent !important;color:#fff !important;border-color:rgba(255,255,255,.42) !important;}
.vb-copy .qbtn-o:hover{background:rgba(255,255,255,.09) !important;border-color:#fff !important;}
.vb-demo{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:22px;}
.vb-row{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;}
.vb-row p{margin:0;font-size:.95rem;line-height:1.6;color:#DCE5EE;}
.vb-row p b{color:#fff;}
.vb-q,.vb-tag{flex:0 0 auto;font-size:.62rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:5px 9px;border-radius:5px;margin-top:2px;}
.vb-q{background:rgba(255,255,255,.1);color:#9DB0C4;}
.vb-tag{background:var(--o);color:#fff;}
.vb-a p{color:#fff;}
.vb-meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.13);}
.vb-meta span{font-size:.76rem;color:#8FA1B6;}
.vb-meta b{color:var(--o-lift);font-size:.92rem;}
@media(max-width:900px){.vb{grid-template-columns:1fr;gap:30px;}}

/* ── 19. VERA PLAY + SHARE ─────────────────────────────────────────────────*/
.vp-picks{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:20px;}
.vp-pick{font-size:.84rem;font-weight:500;text-align:left;padding:10px 15px;border-radius:8px;
  cursor:pointer;background:#fff;color:var(--ink-2);border:1px solid var(--rule);line-height:1.45;max-width:100%;}
.vp-pick:hover{border-color:var(--o);color:var(--o-ink);}
.vp-pick.on{background:var(--o-soft);border-color:var(--o);color:var(--o-ink);font-weight:600;}
.vp-chat{background:var(--deep);border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);}
.vp-head{display:flex;align-items:center;gap:9px;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.1);}
.vp-head b{color:#fff;font-size:.94rem;}
.vp-dot{width:8px;height:8px;border-radius:50%;background:#3DDC91;flex:0 0 auto;}
.vp-mode{margin-left:auto;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;}
.vp-mode.is-local{background:rgba(39,174,96,.18);color:#6FE0A6;}
.vp-mode.is-ai{background:rgba(1,118,211,.18);color:#78B7FF;}
.vp-body{padding:20px;}
.vp-msg{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;}
.vp-msg:last-child{margin-bottom:0;}
.vp-who{flex:0 0 auto;font-size:.6rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:5px 9px;border-radius:5px;background:rgba(255,255,255,.1);color:#9DB0C4;margin-top:2px;}
.vp-who.vp-v{background:var(--o);color:#fff;}
.vp-msg p{margin:0;font-size:1rem;line-height:1.6;color:#DCE5EE;}
.vp-her p{color:#fff;font-weight:600;}
.vp-msg ul{margin:10px 0 0;padding:0;list-style:none;}
.vp-msg li{position:relative;padding-left:16px;margin-bottom:6px;font-size:.87rem;color:#8FA1B6;line-height:1.55;}
.vp-msg li::before{content:'';position:absolute;left:2px;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--o-lift);}
.vp-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px;}
.vp-btn{display:inline-flex;align-items:center;cursor:pointer;font-size:.87rem;font-weight:600;
  padding:10px 20px;border-radius:7px;background:#fff;color:var(--o-ink);
  border:1px solid var(--o);text-decoration:none;}
.vp-btn:hover{background:var(--o-soft);}
.vp-primary{background:var(--o);border-color:var(--o);color:#fff;}
.vp-primary:hover{background:#005FB2;color:#fff;}
.vp-note{font-size:.78rem;color:var(--ink-3);}
.vp-out{margin-top:20px;}
.vp-out canvas{width:100%;height:auto;border-radius:12px;border:1px solid var(--rule);display:block;}
.vp-outbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px;}
@media(max-width:640px){
  .vp-pick{font-size:.8rem;}
  .vp-actions,.vp-outbar{flex-direction:column;align-items:stretch;}
  .vp-btn{justify-content:center;}
  .vp-note{text-align:center;}
}

/* share row inside the Vera widget */
.qa-share{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--rule-2);}
.qa-sh{font-size:.74rem;font-weight:600;padding:5px 11px;border-radius:5px;cursor:pointer;
  background:#fff;color:var(--o-ink);border:1px solid var(--warm-2);text-decoration:none;
  display:inline-flex;align-items:center;}
.qa-sh:hover{background:var(--o-soft);border-color:var(--o);}
.qa-sh-go{background:var(--o-soft);}

/* ── 20. TOOL SHARE CARDS + EMBED ──────────────────────────────────────────*/
.sc{ border-top:1px solid var(--rule); background:var(--canvas); padding:34px 0; }
.sc-in{ display:flex; flex-direction:column; gap:16px; }
.sc-h{ margin:0 !important; font-size:1.06rem; font-weight:700; color:var(--ink); }
.sc-s{ margin:4px 0 0 !important; font-size:.86rem; color:var(--ink-3); max-width:62ch; }
.sc-btns{ display:flex; flex-wrap:wrap; gap:10px; }
.sc-b{
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  font-size:.86rem; font-weight:600; padding:10px 20px; border-radius:7px;
  background:#fff; color:var(--o-ink); border:1px solid var(--o); text-decoration:none;
}
.sc-b:hover{ background:var(--o-soft); }
.sc-p{ background:var(--o); border-color:var(--o); color:#fff; }
.sc-p:hover{ background:#005FB2; color:#fff; }
.sc-out canvas{ width:100%; height:auto; border-radius:12px; border:1px solid var(--rule); display:block; }
.sc-bar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:13px; }
.sc-n{ font-size:.78rem; color:var(--ink-3); }
.sc-l{ display:block; font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:8px; }
.sc-code{
  width:100%; padding:12px 14px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.8rem; line-height:1.55; color:var(--ink-2); background:#fff;
  border:1px solid var(--rule); border-radius:8px; resize:vertical;
}
@media(max-width:640px){
  .sc-btns,.sc-bar{ flex-direction:column; align-items:stretch; }
  .sc-n{ text-align:center; }
}

/* embed mode — iframe shows the tool only */
.is-embed header,.is-embed footer,.is-embed .sc,
.is-embed .qa-launch,.is-embed .qbanner,.is-embed .qhero,
.is-embed .qfinal,.is-embed .vera-band{ display:none !important; }
.is-embed body{ background:#fff; }
.is-embed main > section:first-of-type{ padding-top:22px !important; }

/* share action inside swipe-file cards */
.sh-row{display:inline-flex;margin-left:auto;}
.sh-b{font-size:.78rem;font-weight:600;padding:7px 14px;border-radius:6px;text-decoration:none;
  background:var(--o-soft);color:var(--o-ink);border:1px solid var(--warm-2);}
.sh-b:hover{background:#fff;border-color:var(--o);}
.pl-card .sh-row{margin-top:12px;}

/* ── 21. ATTRIBUTION FLOW ──────────────────────────────────────────────────*/
.af{ border:1px solid var(--rule); border-radius:14px; background:#fff; padding:24px; }
.af-ctl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:16px 20px; margin-bottom:22px; }
.af-f label{ display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  font-size:.8rem; font-weight:600; color:var(--ink); margin-bottom:8px; }
.af-f label b{ color:var(--o-ink); font-variant-numeric:tabular-nums; font-size:.86rem; }
.af-r{ -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:99px;
  background:var(--rule); outline:none; }
.af-r::-webkit-slider-thumb{ -webkit-appearance:none; width:17px; height:17px; border-radius:50%;
  background:var(--o); border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.25); cursor:pointer; }
.af-r::-moz-range-thumb{ width:17px; height:17px; border-radius:50%; background:var(--o);
  border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.25); cursor:pointer; }
.af-canvas{ overflow-x:auto; }
.af-canvas svg{ width:100%; min-width:660px; height:auto; display:block; }
.af-band{ transition:opacity .18s ease; cursor:default; }
.af-band:hover{ opacity:1 !important; }
.af-lab{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; fill:#6B7A90; }
.af-num{ font-size:22px; font-weight:700; fill:#1B2A3D; }
.af-num.is-cash{ fill:#12855A; }
.af-pc{ font-size:11px; fill:#8A97A8; }
.af-lost{ font-size:12px; font-weight:600; fill:#8A97A8; }
.af-legend{ display:flex; flex-wrap:wrap; gap:18px; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--rule-2); }
.af-legend span{ display:inline-flex; align-items:center; gap:8px; font-size:.79rem; color:var(--ink-3); }
.af-k{ width:14px; height:10px; border-radius:3px; display:inline-block; }
.af-keep{ background:linear-gradient(90deg,#78B7FF,#0176D3); }
.af-loss{ background:#CBD5E1; }
.af-cash{ background:linear-gradient(90deg,#1FA971,#12855A); }
.af-note{ margin:14px 0 0 !important; font-size:.92rem; line-height:1.65; color:var(--ink-2); max-width:74ch; }
.af-note b{ color:var(--ink); }
@media(max-width:640px){ .af{ padding:18px; } .af-ctl{ gap:14px; } }

/* ── 22. PRICING PAGE VISUALS ──────────────────────────────────────────────*/

/* banner splits: copy left, tier ladder right */
.pr-banner-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(30px,4vw,58px); align-items:center; }
/* the breadcrumb is a grid child too — span it so copy and ladder pair up */
.pr-banner-split > .qb-crumb{ grid-column:1 / -1; }
.pr-banner-split > .qb-in{ grid-column:1; }
.pr-banner-split > .pl-ladder{ grid-column:2; }
.pl-ladder{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
  border-radius:14px; padding:20px 22px; }
.pl-head{ margin-bottom:16px; padding-bottom:13px; border-bottom:1px solid rgba(255,255,255,.13); }
.pl-head b{ display:block; color:#fff; font-size:.95rem; }
.pl-head span{ display:block; margin-top:3px; font-size:.78rem; color:#8FA1B6; }
.pl-row{ display:grid; grid-template-columns:78px 1fr 64px; align-items:center; gap:11px; margin-bottom:9px; }
.pl-n{ font-size:.8rem; color:#B4C2D2; }
.pl-track{ height:8px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; }
.pl-track i{ display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#78B7FF,#0176D3); transition:width .5s cubic-bezier(.16,1,.3,1); }
.pl-p{ font-size:.82rem; font-weight:700; color:#fff; text-align:right; font-variant-numeric:tabular-nums; }
.pl-row.is-hot .pl-n,.pl-row.is-hot .pl-p{ color:#78B7FF; }
.pl-row.is-hot .pl-track i{ background:linear-gradient(90deg,#AACBFF,#57A3FA); }
.pl-foot{ margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.13);
  font-size:.75rem; color:#8FA1B6; }

/* capacity bars replace the table */
.cap-viz{ border:1px solid var(--rule); border-radius:12px; background:#fff; padding:20px 22px; }
.cap-tabs{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.cap-t{ font-size:.79rem; font-weight:600; padding:7px 14px; border-radius:999px; cursor:pointer;
  background:#fff; color:var(--ink-2); border:1px solid var(--rule); }
.cap-t:hover{ border-color:var(--o); color:var(--o-ink); }
.cap-t.on{ background:var(--o); border-color:var(--o); color:#fff; }
.cap-r{ display:grid; grid-template-columns:150px 1fr 128px; align-items:center; gap:14px; margin-bottom:11px; }
.cap-n{ font-size:.87rem; font-weight:600; color:var(--ink); }
.cap-track{ height:26px; border-radius:6px; background:var(--rule-2); overflow:hidden; }
.cap-track i{ display:block; height:100%; border-radius:6px;
  background:linear-gradient(90deg,#AACBFF,#57A3FA); transition:width .55s cubic-bezier(.16,1,.3,1); }
.cap-r.is-hot .cap-track i{ background:linear-gradient(90deg,#78B7FF,#0176D3); }
.cap-r.is-custom .cap-track i{ background:repeating-linear-gradient(45deg,#E9EEF3,#E9EEF3 7px,#DCE4EC 7px,#DCE4EC 14px); }
.cap-v{ font-size:.85rem; font-weight:700; color:var(--ink); text-align:right;
  font-variant-numeric:tabular-nums; }
.cap-r.is-custom .cap-v{ color:var(--ink-3); font-weight:600; }
.cap-table-fallback{ display:none; }

/* plan cards: clearer hierarchy */
.pr-card{ transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.pr-card:hover{ border-color:var(--line-2); box-shadow:0 8px 26px -14px rgba(27,42,61,.24); }
.pr-card.is-feat{ border-color:var(--o) !important; box-shadow:0 12px 34px -16px rgba(1,118,211,.38); }
.pr-card.is-feat:hover{ transform:translateY(-2px); }
.pr-save-b{ display:inline-block; margin-top:9px; font-size:.72rem; font-weight:700;
  letter-spacing:.03em; color:var(--o-ink); background:var(--o-soft);
  border:1px solid var(--warm-2); border-radius:999px; padding:4px 11px; }
.pr-amt{ letter-spacing:-.03em; }

@media(max-width:900px){
  .pr-banner-split{ grid-template-columns:1fr; }
  .pr-banner-split > .qb-in,.pr-banner-split > .pl-ladder{ grid-column:1; }
  .pl-ladder{ margin-top:26px; }
}
@media(max-width:640px){
  .cap-r{ grid-template-columns:104px 1fr 84px; gap:9px; }
  .cap-n,.cap-v{ font-size:.78rem; }
  .pl-row{ grid-template-columns:66px 1fr 58px; gap:8px; }
}

/* ── 23. PROVENANCE BAND ───────────────────────────────────────────────────*/
.prov{ background:var(--canvas); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.prov-in{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(30px,4vw,56px); align-items:start; }
.prov-a h2{ margin:16px 0 0 !important; font-size:clamp(1.5rem,2.5vw,2rem) !important; }
.prov-a .lead{ margin-top:14px !important; }
.prov-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:14px; margin-top:24px; }
.prov-stats > div{ background:#fff; border:1px solid var(--rule); border-radius:10px; padding:15px 16px; }
.prov-stats b{ display:block; font-size:1.3rem; font-weight:700; color:var(--ink); letter-spacing:-.02em; }
.prov-stats span{ display:block; margin-top:4px; font-size:.75rem; color:var(--ink-3); line-height:1.45; }
.prov-b{ background:#fff; border:1px solid var(--rule); border-radius:12px; padding:24px 26px; }
.prov-lab{ margin:0 0 8px !important; font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); }
.prov-lab2{ margin-top:20px !important; color:var(--o-ink); }
.prov-obs{ margin:0 !important; font-size:1rem; line-height:1.65; color:var(--ink);
  padding-left:14px; border-left:3px solid var(--rule); }
.prov-built{ margin:0 !important; font-size:1rem; line-height:1.65; color:var(--ink);
  padding-left:14px; border-left:3px solid var(--o); }
.prov-note{ margin:20px 0 0 !important; padding-top:15px; border-top:1px solid var(--rule-2);
  font-size:.82rem !important; color:var(--ink-3) !important; line-height:1.6; }
@media(max-width:900px){ .prov-in{ grid-template-columns:1fr; } }


/* ==========================================================================
   QUOTARIDER — REFINE LAYER v5 · "LEDGER"
   Two jobs, same as v4: fix what is misaligned, then raise the finish.

   Alignment defects this layer closes (all verified in source, not guessed):
     1. .qtrust-in ships 1140+22 while the page ships 1240+24, so the trust
        strip sat 48px inside every other element on 96 pages. (.qcred-in
        has the same defect but is unused in markup — covered defensively.)
     2. .fband ships 1080+20  -> 82px inside the page. 
     3. .eab   ships 1020+20  -> 102px inside the page.
     4. .qvs   ships 1020+20 INSIDE a 1240 .wrap -> 86px inside its own
        section heading. Half-alignment, the exact defect v4 §15 outlawed.
     5. .qstats / .qmock centre themselves inside left-aligned sections.
     6. 89 <a class="card"> end in an "Explore ->" line. Card heights are
        equal (grid stretch) but the CTA line floats at the height the copy
        happens to end, so a row of three has three different CTA baselines.
     7. .qfaq marker sat vertically centred on the whole summary block, so
        on two-line questions it floated between the lines instead of
        reading against the first one.
     8. 62 comparison-table cells centre prose ("$199/mo Startup, flat
        tiers") in the same column as single glyphs ("v"). Ragged both edges.
     9. .qsec pads 76px flat while .section pads clamp(72px,9vw,130px) —
        two vertical rhythms stacked down one page.
    10. Headings had no wrap balancing: single-word last lines throughout.

   Palette defects:
    11. .ico was never remapped — 373 icon tiles on 35 pages still render
        the old violet #8b5cf6 fill and border on a white/orange site.
    12. 80 hardcoded #a78bfa / #8b5cf6 fill= and stroke= attributes inside
        inline SVG. Presentation attributes lose to any CSS rule, so they
        are caught here rather than by editing 35 files.

   Finish: elevation is now a 4-step system rather than one flat shadow,
   ink is deeper and cooler, the brand orange becomes a two-stop ember
   ramp, and banners carry a hairline ledger margin at the container edge.
   ========================================================================== */


/* ── V5.1 TOKENS ───────────────────────────────────────────────────────────
   Deeper, cooler ink reads as more deliberate against pure white than the
   v4 slate did, and buys contrast headroom for the lighter greys below it. */
:root{
  --ink:    #0B1524;   /* 18.4:1 on white */
  --ink-2:  #3E4C5E;   /* 9.0:1  */
  --ink-3:  #64748B;   /* 4.8:1  — meta text only */
  --ink-4:  #94A3B8;   /* decorative, never load-bearing */

  --rule:   #E4E9F0;
  --rule-2: #F0F3F7;
  --rule-3: #D5DDE7;   /* hover / active hairline */

  --canvas: #FAFBFD;   /* raised section */
  --canvas-2:#F4F7FA;  /* pressed / inset */

  /* ember ramp — the approved #1B96FF -> #0176D3 pair, extended both ways */
  --o-100:  #EEF4FF;
  --o-200:  #C7DDFF;
  --o-300:  #78B7FF;
  --o-400:  #1B96FF;
  --o:      #0176D3;
  --o-600:  #005FB2;
  --o-700:  #014486;
  --o-soft: #EEF4FF;
  --o-lift: #57A3FA;
  --o-ink:  #014486;

  --warm:   #F4F8FF;
  --warm-2: #D8E6FE;

  --deep:   #0D1B2E;
  --deep-2: #1A2C44;

  /* structure blue — links, focus, selection. Used sparingly on purpose. */
  --sig:    #1D4ED8;
  --sig-100:#EAF0FF;

  /* elevation: contact shadow + ambient + spread, so edges stay crisp */
  --e0: 0 1px 1px rgba(11,21,36,.035);
  --e1: 0 1px 2px rgba(11,21,36,.05), 0 2px 6px -2px rgba(11,21,36,.05);
  --e2: 0 1px 2px rgba(11,21,36,.05), 0 6px 14px -6px rgba(11,21,36,.09),
        0 14px 30px -14px rgba(11,21,36,.09);
  --e3: 0 1px 2px rgba(11,21,36,.06), 0 12px 26px -10px rgba(11,21,36,.11),
        0 28px 60px -24px rgba(11,21,36,.14);
  --e-ember: 0 1px 2px rgba(1,68,134,.22), 0 6px 16px -6px rgba(1,118,211,.36),
             0 16px 36px -18px rgba(1,118,211,.34);

  --spring: cubic-bezier(.22,1.12,.36,1);
  --t-fast: .16s var(--spring);
  --t-med:  .28s var(--spring);
}

::selection{ background:var(--o-200); color:var(--ink); }


/* ── V5.2 TYPE ─────────────────────────────────────────────────────────────
   text-wrap:balance is the single highest-yield alignment fix on the site:
   it removes the one-word last line from every heading without a single
   markup change. Body copy gets `pretty`, which only kills orphans.        */
h1,h2,h3,h4,h5,
.qh1,.qsec-h,.qhook-line,.mf-h{ text-wrap:balance; }
p,li,.lead,.qsub,.qmicro{ text-wrap:pretty; }

.qh1,.qbanner h1,.qhero h1{ letter-spacing:-.032em; }
h2{ letter-spacing:-.024em; }

/* numerals in stat positions must be tabular or the columns visibly drift */
.qb-proof b,.prov-stats b,.qstat b,.qstats b,.cap-v,.pl-row b,.pr-amt,
.qmock-card q,.qtrust-i b{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* the ledger rule under a stat — the one decorative move, and it is
   derived from the product: a line drawn under a figure that is settled. */
.qb-proof b::after,.prov-stats b::after{
  content:''; display:block; width:26px; height:2px; margin-top:9px;
  border-radius:2px; background:linear-gradient(90deg,var(--o-400),var(--o));
}
.qbanner--deep .qb-proof b::after{ background:linear-gradient(90deg,var(--o-lift),var(--o)); }


/* ── V5.3 SURFACE + ELEVATION ──────────────────────────────────────────────*/
.card,.qcard,.ftile,.tile,.panel,.qpanel,.box,.pcard,.qviz,.qpack,
.prov-b,.prov-stats > div,.pr-card,.qfaq{
  background:#fff !important;
  border:1px solid var(--rule) !important;
  box-shadow:var(--e1) !important;
  transition:box-shadow var(--t-med), border-color var(--t-med), transform var(--t-med);
}
.card,.qcard,.pr-card,.qviz,.qpack{ border-radius:12px !important; }

/* hover: lift, do not recolour the border to orange on every single tile —
   v4 did, which made the whole page flare on mouse-move. Ember on cards
   that are actually links; a neutral lift on the rest.                     */
.card:hover,.qcard:hover,.ftile:hover,.tile:hover,.pr-card:hover{
  border-color:var(--rule-3) !important;
  box-shadow:var(--e2) !important;
  transform:translateY(-2px);
}
a.card:hover,a.qcard:hover{
  border-color:var(--o-300) !important;
  box-shadow:0 1px 2px rgba(11,21,36,.05),
             0 10px 24px -10px rgba(1,118,211,.26),
             0 22px 46px -22px rgba(1,118,211,.22) !important;
}
.card-glow{
  border-color:var(--o-300) !important;
  box-shadow:0 0 0 1px var(--o-200), var(--e3) !important;
}

/* raised sections read as paper on white rather than grey blocks */
.section.alt,.section.tint,.qsec.alt{ background:var(--canvas) !important; }
.section.tint-warm{ background:linear-gradient(180deg,var(--warm),#fff) !important; }
.section.tint-cool{ background:linear-gradient(180deg,var(--sig-100),#fff) !important; }


/* ── V5.4 ICON TILES + STRAY VIOLET ────────────────────────────────────────
   .ico was the last component still carrying theme.css's purple. Inline SVG
   presentation attributes are caught by attribute selector — they lose to
   any CSS rule, so no markup edit is needed.                               */
.ico{
  background:linear-gradient(150deg,var(--o-100),#fff) !important;
  border:1px solid var(--o-200) !important;
  color:var(--o-700) !important;
  border-radius:11px !important;
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(11,21,36,.04);
}
a.card:hover .ico,.card:hover .ico{
  background:linear-gradient(150deg,var(--o-200),var(--o-100)) !important;
  border-color:var(--o-300) !important;
}

svg [fill="#a78bfa"],svg[fill="#a78bfa"],
svg [fill="#c4b5fd"],svg[fill="#c4b5fd"]{ fill:var(--o-400); }
svg [fill="#8b5cf6"],svg[fill="#8b5cf6"],
svg [fill="#6d28d9"],svg[fill="#6d28d9"]{ fill:var(--o); }
svg [stroke="#a78bfa"],svg[stroke="#a78bfa"],
svg [stroke="#c4b5fd"]{ stroke:var(--o-400); }
svg [stroke="#8b5cf6"],svg[stroke="#8b5cf6"],
svg [stroke="#6d28d9"]{ stroke:var(--o); }
svg [stop-color="#8b5cf6"],svg [stop-color="#a78bfa"]{ stop-color:var(--o); }
.qbanner--deep svg [stroke="#a78bfa"],.vera-band svg [stroke="#a78bfa"]{ stroke:var(--o-lift); }

.tag,.qtag-c,.qsec-tag{
  background:var(--o-100) !important; color:var(--o-700) !important;
  border:1px solid var(--o-200) !important;
}


/* ── V5.5 BUTTONS ──────────────────────────────────────────────────────────
   Primary becomes a two-stop ember ramp running to the deeper end, which is
   both the brand pair and the only way white type on orange clears AA.     */
.btn,.qbtn{
  display:inline-flex !important; align-items:center !important;
  justify-content:center !important; gap:8px;
  border-radius:8px !important;
  transition:background var(--t-fast), box-shadow var(--t-med),
             transform var(--t-fast), border-color var(--t-fast) !important;
}
.btn-p,.qbtn-p{
  background:linear-gradient(135deg,var(--o) 0%,#005FB2 100%) !important;
  border:1px solid #005FB2 !important; color:#fff !important;
  box-shadow:var(--e-ember), inset 0 1px 0 rgba(255,255,255,.22) !important;
  text-shadow:0 1px 0 rgba(1,68,134,.22);
}
.btn-p:hover,.qbtn-p:hover{
  background:linear-gradient(135deg,#1B96FF 0%,#014486 100%) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 1px 2px rgba(1,68,134,.24),
             0 10px 22px -8px rgba(1,118,211,.44),
             0 22px 46px -20px rgba(1,118,211,.36),
             inset 0 1px 0 rgba(255,255,255,.26) !important;
}
.btn-p:active,.qbtn-p:active{ transform:translateY(0) !important; box-shadow:var(--e0) !important; }

.btn-g,.btn-t,.qbtn-o{
  background:#fff !important; color:var(--o-700) !important;
  border:1px solid var(--o-200) !important;
  box-shadow:var(--e0) !important;
}
.btn-g:hover,.btn-t:hover,.qbtn-o:hover{
  background:var(--o-100) !important; border-color:var(--o-300) !important;
  color:var(--o-700) !important; transform:translateY(-1px) !important;
  box-shadow:var(--e1) !important;
}
.mh-signup{
  background:linear-gradient(135deg,var(--o) 0%,#005FB2 100%) !important;
  border:1px solid #005FB2 !important;
  box-shadow:0 1px 2px rgba(1,68,134,.2), 0 6px 14px -6px rgba(1,118,211,.34) !important;
}
.mh-signup:hover{ background:linear-gradient(135deg,#1B96FF,#014486) !important; }

/* CTA rows: stretch so a one-line and a two-line button share a height */
.qcta,.dcta,.mh-cta,.mf-ctas{ align-items:stretch !important; }
.qcta > *,.dcta > *{ display:inline-flex; align-items:center; }


/* ── V5.6 BANNER: LEDGER MARGIN (signature) ────────────────────────────────
   Two hairlines at the container edge, plus a low warm wash at the top
   left. It states the grid instead of decorating the page, and it is the
   only ornament in the layer. Suppressed under 1340px and for deep banners
   where it would read as a box.                                            */
.qbanner:not(.qbanner--deep),.qhero:not(.qbanner--deep){
  background-image:
    radial-gradient(760px 300px at 8% -10%, rgba(1,118,211,.045), transparent 65%),
    radial-gradient(620px 260px at 88% -20%, rgba(29,78,216,.035), transparent 62%);
  background-repeat:no-repeat;
}
@media(min-width:1340px){
  .qbanner:not(.qbanner--deep)::after,
  .qhero:not(.qbanner--deep)::after{
    content:'' !important; display:block !important;
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      linear-gradient(90deg,transparent calc(50% - 620px),
        rgba(11,21,36,.07) calc(50% - 620px), rgba(11,21,36,.07) calc(50% - 619px),
        transparent calc(50% - 619px)),
      linear-gradient(90deg,transparent calc(50% + 619px),
        rgba(11,21,36,.07) calc(50% + 619px), rgba(11,21,36,.07) calc(50% + 620px),
        transparent calc(50% + 620px));
  }
}
.qbanner .wrap,.qhero .wrap{ z-index:1; }

.qbanner--tint{ background-color:var(--canvas) !important; }
.qbanner--warm{ background-color:var(--warm) !important; }
.qbanner--deep{
  background:
    radial-gradient(820px 340px at 12% -18%, rgba(1,118,211,.16), transparent 62%),
    radial-gradient(700px 300px at 86% -10%, rgba(29,78,216,.18), transparent 60%),
    var(--deep) !important;
}

/* eyebrow: hairline ember dot instead of a flat pill outline */
.qbanner .qeyebrow,.qhero .qeyebrow,.qbanner .eyebrow,.qhero .eyebrow,
.qb-in .qeyebrow,.qb-in .eyebrow{
  display:inline-flex !important; align-items:center; gap:8px;
  background:var(--o-100) !important; border-color:var(--o-200) !important;
  box-shadow:inset 0 1px 0 #fff;
}
.qbanner .qeyebrow::before,.qhero .qeyebrow::before,
.qb-in .qeyebrow::before,.qb-in .eyebrow::before{
  content:''; width:5px; height:5px; border-radius:50%; flex:0 0 5px;
  background:linear-gradient(135deg,var(--o-400),var(--o));
}
.qbanner--deep .qeyebrow::before,.qbanner--deep .eyebrow::before{
  background:linear-gradient(135deg,#AACBFF,var(--o-lift));
}

.qb-proof{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr)) !important;
  gap:26px 40px !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   V5.7 ALIGNMENT REPAIR
   ══════════════════════════════════════════════════════════════════════════*/

/* (a) One container width, everywhere. v4 §14 unified header, .wrap and
       footer to 1240+24 but four page-level containers were missed, so the
       trust strip, credentials strip, feature band and early-access band
       each began at a different x from the content above them.            */
.qtrust-in,.qcred-in,.fband,.eab{
  max-width:var(--max,1240px) !important;
  margin-left:auto !important; margin-right:auto !important;
  padding-left:24px !important; padding-right:24px !important;
}

/* (b) Containers nested inside an already-padded .wrap were double-indented
       and re-centred, so they sat inside their own section heading.       */
.wrap > .qvs,.wrap > .qstats,.wrap > .qmock,.wrap > .fband,
.wrap > .eab,.wrap > .qtrust-in{
  max-width:none !important;
  margin-left:0 !important; margin-right:0 !important;
  padding-left:0 !important; padding-right:0 !important;
}
/* page-level (not inside .wrap) — anchor to the same box as .wrap */
main > .qstats,main > .qmock,body > .eab,body > .qstats{
  max-width:var(--max,1240px) !important;
  margin-left:auto !important; margin-right:auto !important;
  padding-left:24px !important; padding-right:24px !important;
}

/* (c) Card CTA baselines. Cards already share a height; the closing
       "Explore ->" line did not share a baseline because it sat wherever
       the copy above it ended. Pin it to the card floor.                  */
main a.card{ display:flex !important; flex-direction:column; align-items:stretch; }
main a.card > .tag,main a.card > .ico,main a.card > .pill{ align-self:flex-start; }
main a.card > p:last-child[style*="font-weight:600"],
main a.card > p:last-child[style*="violet-2"],
main a.card > p:last-child[style*="--violet"]{
  margin-top:auto !important; padding-top:16px;
}

/* qcard: tag chip, title and body all start on a shared line in every cell */
.qcards{ align-items:stretch; }
.qcard{ display:flex !important; flex-direction:column; }
.qcard .qcard-c{ align-self:flex-start; }
.qcard p{ margin-bottom:0 !important; }

/* (d) FAQ marker. v4 already replaced light.css's float:right with flex, so
       the "+" no longer has text wrapping around it. What was left: on a
       two-line question the marker sat vertically centred against the block
       instead of on the first line, which is where a disclosure control is
       read. Top-aligned, with the row's own line-height.                   */
.qfaq summary{ align-items:flex-start !important; }
.qfaq summary::after{ float:none !important; line-height:1.45; }
.qfaq{ border-radius:12px !important; }
.qfaq[open]{ border-color:var(--o-200) !important; box-shadow:var(--e1) !important; }

/* (e) Comparison tables. Prose and single glyphs shared a centred column,
       so neither edge lined up. One left edge per column; cells top-align
       so a two-line cell does not float its neighbours.                   */
main table td,main table th{ vertical-align:top; }
main table td[style*="text-align:center"],
main table th[style*="text-align:center"]{ text-align:left !important; }
main table th{ color:var(--ink) !important; font-weight:700; }
main table tr:hover td{ background:var(--canvas); }

/* (f) Vertical rhythm. .qsec padded a flat 76px while .section padded
       clamp(72px,9vw,130px) — at 1440px that is 76 against 130 stacked
       down one page. Same scale for both.                                 */
.section,.qsec{ padding-top:clamp(64px,7.4vw,104px); padding-bottom:clamp(64px,7.4vw,104px); }
.qsec-head,.head{ margin-bottom:clamp(32px,3.6vw,52px) !important; }

/* (g) Footer columns start on one line; the brand column is taller and was
       dragging the grid to centre on some widths.                         */
.mf-grid{ align-items:start !important; }
.mf-h{ color:var(--ink) !important; }
.mf-grid a{ color:var(--ink-3) !important; }
.mf-grid a:hover{ color:var(--o-700) !important; }
.mf{ background:linear-gradient(180deg,#fff,var(--canvas)) !important;
     border-top:1px solid var(--rule) !important; }

/* (h) Icon + text rows: optical alignment to the first line, not the box */
.qtrust-i,.ft-list li,.qhc{ align-items:flex-start; }
.qtrust-i svg,.ft-list li svg{ margin-top:.18em !important; flex:0 0 auto; }
.qhc{ align-items:center; }

/* (i) trailing margin inside any bordered box */
.card > *:last-child,.qcard > *:last-child,.qfaq > *:last-child,
.prov-b > *:last-child,.pr-card > *:last-child{ margin-bottom:0 !important; }


/* ── V5.8 HEADER ───────────────────────────────────────────────────────────*/
.mh{
  background:rgba(255,255,255,.82) !important;
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border:1px solid var(--rule) !important;
  box-shadow:0 1px 2px rgba(11,21,36,.04), 0 8px 26px -14px rgba(11,21,36,.16) !important;
}
.mh-link{ color:var(--ink-2) !important; border-radius:8px; }
.mh-link:hover,.mh-item:hover .mh-link{
  color:var(--o-700) !important; background:var(--o-100) !important;
}
.mh-panel,.mh-mega{
  border:1px solid var(--rule) !important; border-radius:14px !important;
  box-shadow:var(--e3) !important;
}
.mh-col a{ border-radius:8px; }
.mh-col a:hover{ background:var(--o-100) !important; color:var(--o-700) !important; }


/* ── V5.9 LINKS, FOCUS, MOTION ─────────────────────────────────────────────*/
main p:not(.qb-crumb):not(.qmicro):not(.mf-status) a:not(.btn):not(.qbtn):not(.card):not(.qcard):not(.qarr){
  color:var(--o-700); text-decoration:none;
  background-image:linear-gradient(90deg,var(--o-300),var(--o-300));
  background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size var(--t-fast), color var(--t-fast);
}
main p:not(.qb-crumb):not(.qmicro) a:not(.btn):not(.qbtn):not(.card):not(.qcard):hover{
  color:var(--o); background-image:linear-gradient(90deg,var(--o),var(--o));
}

:focus-visible{
  outline:2px solid var(--sig) !important; outline-offset:2px !important;
  border-radius:4px;
}
.btn:focus-visible,.qbtn:focus-visible,.mh-signup:focus-visible{ outline-offset:3px !important; }

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .card:hover,.qcard:hover,.btn-p:hover,.pr-card:hover{ transform:none !important; }
}


/* ── V5.10 RESPONSIVE ──────────────────────────────────────────────────────*/
@media(max-width:900px){
  .qb-proof{ grid-template-columns:repeat(auto-fit,minmax(132px,1fr)) !important; gap:22px 28px !important; }
}
@media(max-width:640px){
  .qtrust-in,.qcred-in,.fband,.eab,
  main > .qstats,main > .qmock{ padding-left:20px !important; padding-right:20px !important; }
  .section,.qsec{ padding-top:clamp(48px,11vw,64px); padding-bottom:clamp(48px,11vw,64px); }
  .qfaq summary{ gap:12px; }
  .btn,.qbtn{ padding-left:18px !important; padding-right:18px !important; }
}


/* ── V5.11 CONTAINER REPAIR — DOM-VERIFIED PARENTS ─────────────────────────
   Parsed all 209 pages rather than trusting the CSS alone. Actual parents:
     .qmock  -> .qbanner (5)      .qstats -> .qbanner (2)
     .qvs    -> .wrap (2), section (1)
   So the dashboard mock and the stat strip were centring themselves at 960
   and 900 directly inside a banner whose headline is left at 1240 — the
   half-alignment case again, and the most visible one on the site because
   the mock is the largest object on the page.

   Each is given the .wrap CONTENT box (max - 2*24 gutter, left edge pinned
   to the same x) rather than the .wrap outer box, so their own frames stay
   intact and their left edge lands under the headline exactly.            */
.qbanner > .qmock,.qhero > .qmock,
.qbanner > .qstats,.qhero > .qstats,
section > .qvs,.wrap > .qvs{
  max-width:calc(var(--max,1240px) - 48px) !important;
  margin-left:max(24px, calc((100% - var(--max,1240px)) / 2 + 24px)) !important;
  margin-right:auto !important;
  padding-left:0 !important; padding-right:0 !important;
  box-sizing:border-box;
}
/* inside .wrap the gutter is already spent — pin flush to the wrap edge */
.wrap > .qvs,.wrap > .qstats,.wrap > .qmock{
  max-width:none !important; margin-left:0 !important;
}
.qmock{ box-shadow:var(--e3) !important; border:1px solid var(--rule) !important;
  border-radius:14px !important; }

@media(max-width:640px){
  .qbanner > .qmock,.qhero > .qmock,
  .qbanner > .qstats,.qhero > .qstats,
  section > .qvs{
    max-width:calc(100% - 40px) !important; margin-left:20px !important;
  }
}


/* ── V5.12 SHARE SURFACES ──────────────────────────────────────────────────
   share-kit.js injects a "Share" and a "Copy image" button into the bars
   painted by share-card.js and vera-play.js. They reuse .sc-b / .vp-btn, so
   the only work here is bringing both bars onto the v5 elevation and ember
   ramp, and giving the share block enough presence to be noticed — an
   unnoticed share button distributes nothing.                              */
.sc{
  border-top:1px solid var(--rule) !important;
  background:linear-gradient(180deg,#fff,var(--canvas)) !important;
  padding:clamp(30px,4vw,44px) 0 !important;
}
.sc-in{ gap:18px !important; }
.sc-h{ font-size:1.14rem !important; letter-spacing:-.018em; }
.sc-h::before{
  content:''; display:block; width:26px; height:2px; margin:0 0 12px;
  border-radius:2px; background:linear-gradient(90deg,var(--o-400),var(--o));
}
.sc-b,.vp-btn{
  border-radius:8px !important;
  transition:background var(--t-fast), box-shadow var(--t-med),
             transform var(--t-fast), border-color var(--t-fast);
}
.sc-b{ border-color:var(--o-200) !important; box-shadow:var(--e0); }
.sc-b:hover,.vp-btn:hover{
  background:var(--o-100) !important; border-color:var(--o-300) !important;
  transform:translateY(-1px); box-shadow:var(--e1);
}
.sc-p,.vp-primary{
  background:linear-gradient(135deg,var(--o) 0%,#005FB2 100%) !important;
  border:1px solid #005FB2 !important; color:#fff !important;
  box-shadow:var(--e-ember), inset 0 1px 0 rgba(255,255,255,.22) !important;
  text-shadow:0 1px 0 rgba(1,68,134,.22);
}
.sc-p:hover,.vp-primary:hover{
  background:linear-gradient(135deg,#1B96FF 0%,#014486 100%) !important;
  color:#fff !important;
}
.sc-out canvas,.vp-out canvas{
  border-radius:14px !important; border:1px solid var(--rule) !important;
  box-shadow:var(--e2) !important;
}
.sc-bar,.vp-outbar{ gap:10px !important; align-items:center; }
.sc-n,.vp-note{ color:var(--ink-3) !important; }

/* the download link is demoted to secondary when native share is available,
   so it must not keep the primary's shadow */
.sc-bar a.sc-b:not(.sc-p),.vp-outbar a.vp-btn:not(.vp-primary){
  background:#fff !important; color:var(--o-ink) !important;
  box-shadow:var(--e0) !important; text-shadow:none;
}


/* ==========================================================================
   QUOTARIDER — REFINE LAYER v6 · "SIGNAL"
   The visual audit, and what it found:

     209 pages. 418 <img> tags, every one of them the logo. 1,225 inline
     SVGs, of which 627 are the nav chevron and 565 are a tick — leaving
     about twenty real graphics on the entire site. And 373 "icons" that
     were geometric dingbats: ◆ 76, ◉ 66, ◈ 61, ◐ 51, ◎ 42, ◑ 41, $ 32.

     The dingbats carried no meaning. ◆ was used for "deals", "what we
     believe", "product & support" and "sales professionals" on four
     different pages; ◉ for "calls", "Revenue Suite" and "company & legal".
     Six near-identical shapes rotated at random.

     Section flavours in markup: .section 410, .qsec 207, .qhook 46,
     .qfinal 1 — and .alt / .tint / .tint-warm / .tint-cool ZERO. All four
     tinted surfaces exist in the stylesheet and are used on no page, so
     every page is one unbroken white column from banner to footer.

   So: give the icons meaning, and give the page a pulse. Both without
   touching 209 files.
   ========================================================================== */


/* ── V6.1 ICON TILES ───────────────────────────────────────────────────────
   assets/icons.js swaps each dingbat for a 24x24 stroke icon chosen from
   the card's own copy. 29 distinct icons now appear where 6 meaningless
   shapes used to. Tiles are sized here so the swap is invisible in layout. */
.ico{
  width:40px !important; height:40px !important;
  display:inline-grid !important; place-items:center;
  margin-bottom:16px;
}
.ico svg{ width:20px; height:20px; display:block; }
.ico[data-icon]{ font-size:0; line-height:0; }

/* the tile answers the card's hover, so the icon reads as part of the link */
a.card .ico svg,.card .ico svg{ transition:transform var(--t-med); }
a.card:hover .ico svg{ transform:scale(1.06); }

/* on deep surfaces the tile inverts rather than punching a light hole */
.qbanner--deep .ico,.vera-band .ico{
  background:rgba(87,163,250,.14) !important;
  border-color:rgba(87,163,250,.3) !important;
  color:var(--o-lift) !important; box-shadow:none;
}

/* pre-swap and no-JS: the dingbat stays, just sized so nothing jumps */
.ico:not([data-icon]){ font-size:1.05rem; line-height:1; }


/* ── V6.2 SECTION RHYTHM ───────────────────────────────────────────────────
   Every content section shipped the same white background, so a page read
   as one column with no structure — you could not tell at a glance where
   one idea ended and the next began. Alternate bands give the page a pulse.

   Two exclusions do the real work:
     · [style*="padding-top:0"] marks a section that CONTINUES the one above
       it (158 of them). Banding those would cut a thought in half.
     · .qhook / .qfinal / .qbanner already carry their own treatment.

   The tint is 2% off white on purpose. It should register as structure at
   a glance and disappear when you actually read.                          */
main > section:nth-of-type(even):not([style*="padding-top:0"]):not(.qhook):not(.qfinal):not(.qbanner):not(.qhero):not(.qtrust):not(.vera-band):not(.prov),
main > .section:nth-of-type(even):not([style*="padding-top:0"]):not(.qhook):not(.qfinal){
  background:var(--canvas);
  border-top:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);
}
/* cards gain contrast for free once they sit on paper instead of white */
main > section:nth-of-type(even) .card,
main > section:nth-of-type(even) .qcard,
main > section:nth-of-type(even) .qfaq{ box-shadow:var(--e1) !important; }

/* the pull-quote band is the one place the page goes quiet and wide */
.qhook{
  background:linear-gradient(180deg,#fff,var(--warm)) !important;
  border-top:1px solid var(--rule-2); border-bottom:1px solid var(--warm-2);
}
.qhook-line{ letter-spacing:-.03em; }
.qhook .qhook-rule{
  height:3px !important; width:52px !important; border:0 !important; border-radius:3px;
  background:linear-gradient(90deg,var(--o-400),var(--o)) !important;
}

/* the closing band is the one place it goes loud */
.qfinal{
  background:
    radial-gradient(800px 320px at 20% 0%, rgba(1,118,211,.14), transparent 62%),
    radial-gradient(680px 300px at 82% 10%, rgba(29,78,216,.16), transparent 60%),
    var(--deep) !important;
  border:0 !important;
}
.qfinal h2,.qfinal .qh1{ color:#fff !important; }
.qfinal p,.qfinal .lead{ color:#B9C6D6 !important; }
.qfinal .qbtn-o,.qfinal .btn-g,.qfinal .btn-t{
  background:transparent !important; color:#fff !important;
  border-color:rgba(255,255,255,.42) !important;
}
.qfinal .qbtn-o:hover,.qfinal .btn-g:hover{
  background:rgba(255,255,255,.1) !important; border-color:#fff !important;
}


/* ── V6.3 SECTION HEADINGS ─────────────────────────────────────────────────
   The eyebrow was a pill on the banner and bare uppercase text mid-page, so
   section starts had no consistent mark. One device, both places: a short
   gradient rule that reads as a ledger line under the label.              */
main .qsec-head .qsec-tag,main .head .eyebrow,main .qsec-head .eyebrow{
  display:inline-flex !important; align-items:center; gap:9px;
  color:var(--o-700) !important; background:none !important; border:0 !important;
  padding:0 !important; font-size:.72rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
}
main .qsec-head .qsec-tag::before,main .head .eyebrow::before,
main .qsec-head .eyebrow::before{
  content:''; width:22px; height:2px; border-radius:2px; flex:0 0 22px;
  background:linear-gradient(90deg,var(--o-400),var(--o));
}
main .qsec-head .qsec-h,main .qsec-head h2,main .head h2{ margin-top:14px !important; }


/* ── V6.4 NAV CHEVRON ──────────────────────────────────────────────────────
   627 of the site's 1,225 SVGs are this one arrow. It never moved on open. */
.mh-item svg{ transition:transform var(--t-fast); }
.mh-item:hover svg,.mh-item:focus-within svg{ transform:rotate(180deg); }


/* ── V6.5 TICK MARKS ───────────────────────────────────────────────────────
   The other 565: the check used in every feature list. It was the same
   weight as body text, so lists read as grey mush.                        */
.ft-list li svg,.qtrust-i svg,.qhc svg{ stroke:var(--o) !important; }
.ft-list li{ display:flex; gap:10px; align-items:flex-start; }


/* ── V6.6 BAND CONTINUATION ────────────────────────────────────────────────
   158 sections carry inline padding-top:0, which is the site's way of
   saying "this continues the section above". They are excluded from
   starting a band; they should still finish one. Otherwise a band cuts a
   single thought in half.                                                 */
main > section:nth-of-type(even):not([style*="padding-top:0"]):not(.qhook):not(.qfinal):not(.qbanner):not(.qhero):not(.qtrust)
  + section[style*="padding-top:0"]{
  background:var(--canvas);
  border-bottom:1px solid var(--rule-2);
}
main > section:nth-of-type(even):has(+ section[style*="padding-top:0"]){
  border-bottom:0 !important;
}


/* ── V6.7 THE CLOSING CARD ─────────────────────────────────────────────────
   .qfinal exists on exactly 1 page. The real closing CTA is .card.center,
   identical on 31 pages: eyebrow, h2, lead, button row — and rendered as a
   plain white card sitting on a white page, so the page ended by fading
   out. This is the one place per page the design should raise its voice. */
main .card.center{
  background:
    radial-gradient(760px 300px at 18% -10%, rgba(1,118,211,.16), transparent 60%),
    radial-gradient(620px 280px at 84% 0%, rgba(29,78,216,.18), transparent 58%),
    var(--deep) !important;
  border:0 !important;
  border-radius:16px !important;
  padding:clamp(38px,5vw,64px) clamp(26px,4vw,56px) !important;
  box-shadow:0 20px 50px -24px rgba(11,21,36,.42) !important;
  overflow:hidden;
}
main .card.center:hover{ transform:none !important; }
main .card.center h2{ color:#fff !important; letter-spacing:-.026em; }
main .card.center h2 em,main .card.center h2 .ital{ color:var(--o-lift) !important; }
main .card.center .lead,main .card.center p:not(.eyebrow){ color:#B9C6D6 !important; }
main .card.center .eyebrow{
  color:#AACBFF !important; background:rgba(87,163,250,.14) !important;
  border:1px solid rgba(87,163,250,.3) !important;
}
main .card.center .eyebrow::before{
  background:linear-gradient(135deg,#AACBFF,var(--o-lift)) !important;
}
main .card.center .btn-g,main .card.center .btn-t,main .card.center .qbtn-o{
  background:transparent !important; color:#fff !important;
  border-color:rgba(255,255,255,.42) !important; box-shadow:none !important;
}
main .card.center .btn-g:hover,main .card.center .btn-t:hover,
main .card.center .qbtn-o:hover{
  background:rgba(255,255,255,.1) !important; border-color:#fff !important;
}


/* ==========================================================================
   QUOTARIDER — REFINE LAYER v7 · "LIGHTNING"
   Brief: no orange anywhere, one managed colour theme, Salesforce rather
   than HubSpot, and the pricing page laid out properly.

   The orange is gone at source, not overridden: 285 hardcoded values were
   rewritten in the CSS and HTML, then a hue sweep (12°–37°) caught 680 more
   and left the semantic reds, ambers and the window-chrome dots alone.

   What was left after that was three unrelated blues fighting each other —
   #0176D3 from the conversion, #2563EB from the old violet remap, and
   #0B1C3D / #1D4ED8 from light.css. This layer collapses all of them onto
   one ramp, which is what "manage the colour theme" actually means.

   Salesforce vs HubSpot is not only hue. It is:
     radius        22px soft cards      ->  8px cards, 4px controls
     shadow        large and coloured   ->  tight, neutral, mostly absent
     neutrals      blue-tinted slate    ->  true grey (#181818 … #F3F3F3)
     surfaces      white + warm tints   ->  white + grey + one deep navy
     buttons       gradient pills, lift ->  flat fill, no lift
     header        floating pill        ->  bar
   All six are changed below.
   ========================================================================== */


/* ── V7.1 ONE RAMP ─────────────────────────────────────────────────────────*/
:root{
  /* the only chromatic ramp on the site */
  --b-05:#F4F8FF; --b-10:#EEF4FF; --b-20:#D8E6FE; --b-30:#C7DDFF;
  --b-40:#AACBFF; --b-50:#78B7FF; --b-60:#57A3FA; --b-70:#1B96FF;
  --b:#0176D3;    --b-90:#005FB2; --b-95:#014486; --b-99:#032D60;

  /* true greys, not slate — this is most of the Salesforce read */
  --ink:#181818; --ink-2:#444444; --ink-3:#747474; --ink-4:#AEAEAE;
  --rule:#E5E5E5; --rule-2:#F0F0F0; --rule-3:#C9C9C9;
  --canvas:#F8F8F8; --canvas-2:#F3F3F3;
  --deep:#032D60; --deep-2:#014486;

  /* every legacy alias now resolves to the ramp above */
  --o:var(--b); --o-600:var(--b-90); --o-700:var(--b-95); --o-ink:var(--b-95);
  --o-400:var(--b-70); --o-300:var(--b-50); --o-200:var(--b-30); --o-100:var(--b-10);
  --o-soft:var(--b-10); --o-lift:var(--b-60);
  --warm:var(--b-05); --warm-2:var(--b-20);
  --orange-700:var(--b-95); --orange-600:var(--b-90); --orange-500:var(--b);
  --orange-400:var(--b-60); --orange-100:var(--b-20); --orange-50:var(--b-10);
  --violet:var(--b); --violet-2:var(--b-95); --violet-3:var(--b-99);
  --violet-deep:var(--b-99); --violet-glow:rgba(1,118,211,.2);
  --q-violet:var(--b); --q-violet-lo:var(--b-95); --q-mint:#2E844A;
  --blue-900:var(--b-99); --blue-800:var(--b-95); --blue-700:var(--b-95);
  --blue-600:var(--b-90); --blue-500:var(--b); --blue-400:var(--b-70);
  --blue-100:var(--b-20); --blue-50:var(--b-10); --blue:var(--b);
  --sig:var(--b); --sig-100:var(--b-10);
  --line:var(--rule); --line-2:var(--rule-3); --line-violet:var(--b-50);
  --bg-2:var(--canvas); --bg-3:var(--canvas-2); --surface:var(--canvas);
  --surface-2:var(--canvas-2);

  /* semantics — Salesforce's, and the warning is gold rather than orange
     so nothing on the page reads as the old brand colour by accident */
  --green:#2E844A; --green-dim:rgba(46,132,74,.1);
  --red:#EA001E;   --red-dim:rgba(234,0,30,.08);
  --amber:#8C6100; --amber-dim:rgba(140,97,0,.1);
  --pink:#B60554;

  /* shadow: tight and neutral. Salesforce barely lifts anything. */
  --e0:0 1px 1px rgba(24,24,24,.05);
  --e1:0 1px 2px rgba(24,24,24,.08);
  --e2:0 2px 4px rgba(24,24,24,.07), 0 4px 12px -4px rgba(24,24,24,.10);
  --e3:0 2px 6px rgba(24,24,24,.09), 0 12px 28px -12px rgba(24,24,24,.16);
  --e-ember:0 1px 2px rgba(1,68,134,.3);
}
::selection{ background:var(--b-20); color:var(--ink); }
body{ color:var(--ink); }
h1,h2,h3,h4,h5,.qh1,.qsec-h{ color:var(--ink) !important; }
p,li,.lead,.qsub{ color:var(--ink-2); }


/* ── V7.2 GEOMETRY ─────────────────────────────────────────────────────────
   The single loudest HubSpot signal was corner radius. Nine different radii
   appeared on the pricing page alone (10 / 11 / 13 / 16 / 17 / 19 / 20 / 22
   / 999). Two now: 4px for anything you click, 8px for anything you read. */
.btn,.qbtn,.pr-cta,.pr-tb,.sc-b,input,select,textarea,.mh-signup,.mh-login{
  border-radius:4px !important;
}
.card,.qcard,.qfaq,.qviz,.qpack,.pr-card,.pr-ad,.pr-prog,.pr-ctx,.pr-sb,
.prov-b,.prov-stats > div,.mh-panel,.mh-mega,.qtable-wrap,.pr-tbl-wrap,
.qmock,.pr-founder,.pr-ent,.qauthor,main .card.center{
  border-radius:8px !important;
}
.ico,.pr-ad-i{ border-radius:6px !important; }
.eyebrow,.qeyebrow,.tag,.qtag-c,.qsec-tag,.pill,.qtag,.qhc,.pr-fchip,
.pr-badge,.pr-save,.pr-ent-l span,.qb-crumb{ border-radius:4px !important; }
.mh,.pr-toggle{ border-radius:8px !important; }

/* the floating pill becomes a bar — the header is the first thing read */
.mh{
  background:#fff !important;
  border:1px solid var(--rule) !important;
  box-shadow:0 1px 2px rgba(24,24,24,.08) !important;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}

/* flat surfaces. The radial washes were a startup tell, not an enterprise one. */
.qbanner,.qhero,.qbanner--tint,.qbanner--warm{
  background-image:none !important;
}
.qbanner:not(.qbanner--deep),.qhero:not(.qbanner--deep){
  background-color:#fff !important; border-bottom:1px solid var(--rule) !important;
}
.qbanner--tint{ background-color:var(--canvas) !important; }
.qbanner--warm{ background-color:var(--b-10) !important; border-bottom-color:var(--b-20) !important; }
.qbanner--deep,.qfinal,main .card.center{
  background:var(--deep) !important; background-image:none !important;
}
.qhook{ background:var(--canvas) !important; border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule); }
.vera-band{ background:var(--deep) !important; }

/* the ledger guides stay, in grey — they state the grid, they don't decorate */
@media(min-width:1340px){
  .qbanner:not(.qbanner--deep)::after,.qhero:not(.qbanner--deep)::after{
    background:
      linear-gradient(90deg,transparent calc(50% - 620px),
        rgba(24,24,24,.08) calc(50% - 620px), rgba(24,24,24,.08) calc(50% - 619px),
        transparent calc(50% - 619px)),
      linear-gradient(90deg,transparent calc(50% + 619px),
        rgba(24,24,24,.08) calc(50% + 619px), rgba(24,24,24,.08) calc(50% + 620px),
        transparent calc(50% + 620px)) !important;
  }
}


/* ── V7.3 CONTROLS ─────────────────────────────────────────────────────────
   Flat fill, one hover step darker, no lift, no glow. White on #0176D3 is
   4.86:1, so the primary clears AA without the gradient trick v5 needed to
   make orange legible.                                                     */
.btn-p,.qbtn-p,.pr-cta.solid,.mh-signup,.sc-p{
  background:var(--b) !important; border:1px solid var(--b) !important;
  color:#fff !important; box-shadow:none !important; text-shadow:none !important;
  font-weight:600 !important;
}
.btn-p:hover,.qbtn-p:hover,.pr-cta.solid:hover,.mh-signup:hover,.sc-p:hover{
  background:var(--b-90) !important; border-color:var(--b-90) !important;
  transform:none !important; box-shadow:none !important;
}
.btn-p:active,.qbtn-p:active{ background:var(--b-95) !important; }
.btn-g,.btn-t,.qbtn-o,.pr-cta,.sc-b{
  background:#fff !important; color:var(--b) !important;
  border:1px solid var(--rule-3) !important; box-shadow:none !important;
  font-weight:600 !important;
}
.btn-g:hover,.btn-t:hover,.qbtn-o:hover,.pr-cta:hover,.sc-b:hover{
  background:var(--b-10) !important; border-color:var(--b) !important;
  color:var(--b-90) !important; transform:none !important; box-shadow:none !important;
}

/* cards answer with the border, not with movement */
.card,.qcard,.pr-card,.pr-ad,.qfaq,.pr-prog{ box-shadow:var(--e0) !important; }
.card:hover,.qcard:hover,.pr-card:hover,.pr-ad:hover,.ftile:hover,.tile:hover,
a.card:hover,a.qcard:hover{
  transform:none !important;
  border-color:var(--b) !important;
  box-shadow:var(--e1) !important;
}
.card-glow,.pr-card.pop,.pr-card.is-feat{
  border-color:var(--b) !important;
  box-shadow:inset 0 0 0 1px var(--b), var(--e1) !important;
}

/* icon tiles: flat tint, no inner highlight */
.ico{
  background:var(--b-10) !important; border:1px solid var(--b-20) !important;
  color:var(--b) !important; box-shadow:none !important;
}
a.card:hover .ico,.card:hover .ico{
  background:var(--b-20) !important; border-color:var(--b-50) !important;
}
a.card:hover .ico svg{ transform:none !important; }

/* eyebrow: a label, not a badge */
.qbanner .qeyebrow,.qhero .qeyebrow,.qbanner .eyebrow,.qhero .eyebrow,
.qb-in .qeyebrow,.qb-in .eyebrow{
  background:var(--b-10) !important; border:1px solid var(--b-20) !important;
  color:var(--b-95) !important; box-shadow:none !important;
}
.qbanner .qeyebrow::before,.qhero .qeyebrow::before,
.qb-in .qeyebrow::before,.qb-in .eyebrow::before,
main .qsec-head .qsec-tag::before,main .head .eyebrow::before,
main .qsec-head .eyebrow::before{ background:var(--b) !important; }
.qb-proof b::after,.prov-stats b::after,.qhook .qhook-rule{
  background:var(--b) !important;
}

/* links: a single underline weight, no gradient */
main p:not(.qb-crumb):not(.qmicro) a:not(.btn):not(.qbtn):not(.card):not(.qcard){
  color:var(--b) !important;
  background-image:linear-gradient(90deg,var(--b-40),var(--b-40)) !important;
}
main p a:not(.btn):not(.qbtn):not(.card):not(.qcard):hover{
  color:var(--b-95) !important;
  background-image:linear-gradient(90deg,var(--b-95),var(--b-95)) !important;
}
:focus-visible{ outline:2px solid var(--b) !important; }


/* ── V7.4 DENSITY ──────────────────────────────────────────────────────────
   Salesforce fits more on a screen. Bands and cards tighten; the display
   scale comes down a step so headlines stop shouting.                     */
.section,.qsec{ padding-top:clamp(52px,5.6vw,84px); padding-bottom:clamp(52px,5.6vw,84px); }
.qbanner,.qhero{ padding:clamp(46px,5vw,68px) 0 clamp(38px,4vw,56px); }
.qbanner .qh1,.qhero .qh1,.qbanner h1,.qhero h1{
  font-size:clamp(1.9rem,3.2vw,2.65rem) !important; letter-spacing:-.024em;
}
h2{ font-size:clamp(1.45rem,2.4vw,1.9rem); }
.card,.qcard{ padding:22px !important; }
.qsec-head,.head{ margin-bottom:clamp(26px,3vw,40px) !important; }


/* ── V7.5 PRICING LAYOUT ───────────────────────────────────────────────────
   Four defects, in order of how visible they are.

   (a) Two breakpoint ladders for the same grid. light.css steps .pr-grid
       3 -> 2 at 1080px and 2 -> 1 at 680px; refine v4 collapsed it straight
       to 1 at 980px. v4 loads later, so the 2-column stage never rendered —
       seven plan cards went from three-up to stacked in one jump.         */
.pr-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:16px !important; }
.pr-grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
@media(max-width:1080px){ .pr-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media(max-width:680px){ .pr-grid,.pr-grid-2{ grid-template-columns:1fr !important; } }

/*  (b) Plan rows only lined up because .pr-for and .pr-sub carried
        min-height:2.6em and 2.4em. Any plan whose blurb ran to three lines
        pushed its price, CTA and feature list out of step with the rest.
        Subgrid aligns all eight rows across every card by construction, so
        the min-height guesses come out.                                   */
.pr-card{
  display:grid !important; grid-template-rows:subgrid; grid-row:span 8;
  align-content:start; padding:24px !important;
}
.pr-for,.pr-sub{ min-height:0 !important; }
.pr-list{ align-self:start; }
@supports not (grid-template-rows:subgrid){
  .pr-card{ display:flex !important; flex-direction:column; }
  .pr-for{ min-height:2.6em !important; } .pr-sub{ min-height:2.4em !important; }
  .pr-list{ flex:1; }
}

/*  (c) Three different reading measures on one page: two intro blocks at
        800px, one at 830px, and .qsec-head at 68ch. One measure.          */
main .wrap > div[style*="max-width:800px"],
main .wrap > div[style*="max-width:830px"],
main .wrap[style*="max-width:830px"]{ max-width:68ch !important; }

/*  (d) The feature matrix centres every cell. Correct here — the values are
        ✓, —, "Basic", "Full" — but the plan header row and the row labels
        must stay left, and cells must top-align or a two-word value floats
        its neighbours.                                                     */
.pr-tbl td,.pr-tbl th{ vertical-align:middle; }
.pr-tbl th.pop{ background:var(--b-10) !important; color:var(--b-95) !important; }
.pr-tbl tr:hover td{ background:var(--canvas) !important; }
.pr-tbl-wrap,.qtable-wrap{ border-color:var(--rule) !important; }

/* the plan selector reads as a control, not a card */
.pr-toggle{ background:var(--canvas-2) !important; border:1px solid var(--rule) !important; padding:4px !important; }
.pr-tb.on{ background:#fff !important; color:var(--b-95) !important; box-shadow:var(--e0) !important; }
.pr-save,.pr-tb.on .pr-save{ background:var(--b) !important; color:#fff !important; }
.pr-sb{ border:1px solid var(--rule) !important; }
.pr-sb.on{ border-color:var(--b) !important; box-shadow:inset 0 0 0 1px var(--b) !important; }
.pr-founder,.pr-ent{ background:var(--deep) !important; }
.pr-founder::before,.pr-ent::before{ display:none !important; }
.pr-prog.tint{ background:var(--b-10) !important; border-color:var(--b-20) !important; }
.pr-badge{ background:var(--b) !important; color:#fff !important; }
.pr-ad-i{ background:var(--b) !important; }
.pr-list li::before{ border-color:var(--b) !important; }
@media(max-width:900px){ .pr-two{ grid-template-columns:1fr !important; } }


/* ==========================================================================
   QUOTARIDER — REFINE LAYER v7 · "TEMPERATURE"
   Rendered the site in a real browser for the first time and measured it.
   Two things the source audit could not have told me:

     · Structure is sound. At 1440 every .wrap sits at x=100 and every piece
       of content at x=124. The left edge holds.
     · Wide tables are NOT sound. .pr-tbl is 820px inside a 390px viewport
       and the vs-* tables are 600px — so on phones the Growth, Business and
       Premier columns are simply unreachable. Seven pages, invisible on
       desktop, broken on every phone.

   And the colour problem, which is real: orange was doing seven jobs at
   once — primary button, eyebrow, icon tile, tick mark, chip, link, card
   hover. When an accent marks everything it marks nothing.

   Orange now does ONE job: the primary action and the brand word in a
   headline. Everything else moves to a colour that means something.
     blue  = structure, navigation, anything you can click into
     teal  = verified, included, done
     slate = labels and metadata, which should recede
   ========================================================================== */

:root{
  --sig:      #1D4ED8;
  --sig-700:  #1E40AF;
  --sig-100:  #DBE6FE;
  --sig-50:   #EFF4FF;
  --teal:     #0F766E;
  --teal-600: #0D9488;
  --teal-100: #CCFBF1;
  --teal-50:  #ECFDF8;
  --slate-50: #F6F8FB;
}

/* ── V7.1 TABLES: the one real breakage ────────────────────────────────────*/
@media(max-width:1000px){
  main table{
    display:block; width:100%; max-width:100%;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    border:1px solid var(--rule); border-radius:10px;
  }
  main table td,main table th{ white-space:nowrap; }
  main table td:first-child,main table th:first-child{
    white-space:normal; min-width:150px;
    position:sticky; left:0; background:#fff; z-index:1;
    box-shadow:1px 0 0 var(--rule);
  }
  main table thead th{ background:var(--slate-50); }
}

/* ── V7.2 ICON TILES → BLUE ────────────────────────────────────────────────
   373 tiles were the single largest block of orange on the site.           */
.ico{
  background:var(--sig-50) !important;
  border:1px solid var(--sig-100) !important;
  color:var(--sig) !important;
  box-shadow:inset 0 1px 0 #fff;
}
a.card:hover .ico,.card:hover .ico{
  background:var(--sig-100) !important; border-color:#BFD3FD !important;
}
svg [fill="#a78bfa"],svg[fill="#a78bfa"],svg [fill="#c4b5fd"],svg[fill="#c4b5fd"]{ fill:var(--sig); }
svg [fill="#8b5cf6"],svg[fill="#8b5cf6"],svg [fill="#6d28d9"],svg[fill="#6d28d9"]{ fill:var(--sig-700); }
svg [stroke="#a78bfa"],svg[stroke="#a78bfa"],svg [stroke="#c4b5fd"]{ stroke:var(--sig); }
svg [stroke="#8b5cf6"],svg[stroke="#8b5cf6"],svg [stroke="#6d28d9"]{ stroke:var(--sig-700); }

/* ── V7.3 TICKS → TEAL ─────────────────────────────────────────────────────
   565 of the site's SVGs are a check mark. A check means "included", which
   is not the same signal as "click here", so it should not be the CTA hue. */
.ft-list li svg,.qtrust-i svg,.qhc svg,.qb-check svg{ stroke:var(--teal-600) !important; }
.qhc i.ok{ background:var(--teal-50) !important; }
.qhc i.ok::after{ border-color:var(--teal) !important; }
main table td{ color:var(--ink-2); }

/* ── V7.4 LABELS → SLATE ───────────────────────────────────────────────────*/
.tag,.qtag-c{
  background:var(--slate-50) !important; color:var(--ink-3) !important;
  border:1px solid var(--rule) !important; font-weight:700;
}
.qbanner .qeyebrow,.qhero .qeyebrow,.qbanner .eyebrow,.qhero .eyebrow,
.qb-in .qeyebrow,.qb-in .eyebrow{
  background:var(--slate-50) !important; border-color:var(--rule) !important;
  color:var(--ink-3) !important;
}
main .qsec-head .qsec-tag,main .head .eyebrow,main .qsec-head .eyebrow{
  color:var(--ink-3) !important;
}
.qb-proof b::after,.prov-stats b::after{
  background:var(--sig) !important; opacity:.5;
}
.qb-proof > div:first-child b::after{ background:var(--o) !important; opacity:1; }
.qfaq summary::after{ color:var(--ink-3) !important; }
.qfaq[open]{ border-color:var(--sig-100) !important; }

/* ── V7.5 SECONDARY ACTIONS → SLATE, LINKS → BLUE ──────────────────────────
   Two orange buttons side by side made neither look primary.              */
.btn-g,.btn-t,.qbtn-o{
  color:var(--ink) !important; border-color:var(--rule-3) !important;
}
.btn-g:hover,.btn-t:hover,.qbtn-o:hover{
  background:var(--slate-50) !important; border-color:var(--ink-3) !important;
  color:var(--ink) !important;
}
main p:not(.qb-crumb):not(.qmicro) a:not(.btn):not(.qbtn):not(.card):not(.qcard){
  color:var(--sig) !important;
  background-image:linear-gradient(90deg,var(--sig-100),var(--sig-100)) !important;
}
main p:not(.qb-crumb):not(.qmicro) a:not(.btn):not(.qbtn):not(.card):not(.qcard):hover{
  color:var(--sig-700) !important;
  background-image:linear-gradient(90deg,var(--sig),var(--sig)) !important;
}
.mh-link:hover,.mh-item:hover .mh-link,.mh-col a:hover{
  color:var(--sig-700) !important; background:var(--sig-50) !important;
}
.mf-grid a:hover{ color:var(--sig-700) !important; }
a.card:hover,a.qcard:hover{
  border-color:var(--sig-100) !important;
  box-shadow:0 1px 2px rgba(11,21,36,.05),
             0 10px 24px -10px rgba(29,78,216,.2),
             0 22px 46px -22px rgba(29,78,216,.16) !important;
}
.card-glow{ border-color:var(--sig-100) !important; box-shadow:0 0 0 1px var(--sig-50), var(--e3) !important; }

/* ── V7.6 WHAT STAYS ORANGE ────────────────────────────────────────────────
   The primary button, the brand word in a headline, the closing card, and
   the ledger rule under the lead statistic. Four places, not seven.       */
.qbanner h1 em,.qhero h1 em,.qbanner .qh1 em,.qhero .qh1 em,
.qbanner h1 .ital,.qhero h1 .ital,h2 .ital,h2 em{ color:var(--o) !important; }
.qhook{ background:linear-gradient(180deg,#fff,var(--canvas)) !important;
        border-bottom-color:var(--rule-2) !important; }

/* ── V7.7 HERO MEASURE ─────────────────────────────────────────────────────
   The split hero capped the H1 at 15ch, so it wrapped to three short lines
   inside a 555px column with room to spare. 18ch fills the column.        */
.qhero-copy .qh1,.qhero-copy h1{ max-width:18ch !important; }
.qhero-copy .qsub{ max-width:46ch !important; }

/* ── V7.8 CONVERSATION SNAPSHOT (assets/snap.js) ───────────────────────────*/
.qdemo-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.qd-snap{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-size:.76rem; font-weight:600; color:var(--ink-2);
  background:#fff; border:1px solid var(--rule); border-radius:7px;
  padding:6px 11px; cursor:pointer; transition:all var(--t-fast);
}
.qd-snap svg{ width:15px; height:15px; }
.qd-snap:hover:not(:disabled){ border-color:var(--sig); color:var(--sig); background:var(--sig-50); }
.qd-snap:disabled{ opacity:.4; cursor:default; }
.qd-snapout{ border-top:1px solid var(--rule); padding:18px; background:var(--canvas); }
.qd-cv{ width:100%; height:auto; display:block; border:1px solid var(--rule);
  border-radius:10px; background:#fff; box-shadow:var(--e1); }
.qd-snapbar{ display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
.qd-b{ font-size:.79rem; font-weight:600; padding:9px 15px; border-radius:7px;
  border:1px solid var(--rule-3); background:#fff; color:var(--ink); cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; }
.qd-b:hover{ border-color:var(--ink-3); }
.qd-b-p{ background:linear-gradient(135deg,var(--o),#D9400A); color:#fff !important;
  border-color:#CF3C07; }
.qd-b-x{ margin-left:auto; color:var(--ink-3); }
@media(max-width:560px){ .qd-snap{ margin-left:0; } }


/* ==========================================================================
   QUOTARIDER — REFINE LAYER v8 · "WARM SYSTEM"
   Two corrections.

   1. BANNER GAP. Measured in Chromium, distance from the banner's bottom
      edge to the first ink under it:
         pricing 0px · index 0px · industries 0px · about 0px
         crm 7px · vs-* 21px · blog 44px · features 82px
      The section after a banner carries inline padding-top:0, which beats
      every class rule in the stack, so content butts straight against the
      banner edge — worst on pricing where that edge is a dark band. Fixed
      with an adjacent-sibling rule that can outrank the inline style.

   2. ORANGE. v7 cut it to four places. That was an over-correction — the
      brief was less orange AND more colour, not orange replaced by blue.
      Orange comes back across eyebrows, chips, hovers and rules. What is
      new is that it is now a SYSTEM rather than a wash: the icon tile is
      tinted by what the icon means, so all four colours carry a job.

         ember  revenue, money, deals, targets — the thing being sold
         blue   data, systems, structure — the thing doing the work
         teal   trust, people, verification — the thing being promised
         slate  metadata that should recede

      373 tiles, three families, assigned off the data-icon attribute that
      icons.js already writes. No markup edits.
   ========================================================================== */


/* ── V8.1 BANNER GAP ───────────────────────────────────────────────────────*/
.qbanner + section,.qhero + section,
.qbanner + article,.qhero + article,
.qbanner + .section,.qhero + .section{
  padding-top:clamp(46px,4.8vw,76px) !important;
}
/* a proof/trust strip is designed to sit tight under the banner — leave it */
.qbanner + .qtrust,.qhero + .qtrust,
.qbanner + .qcred,.qhero + .qcred{ padding-top:0 !important; }

/* and give the banner itself a touch more room at the foot */
.qbanner,.qhero{ padding-bottom:calc(var(--band) * .86); }
.qbanner--compact{ padding-bottom:calc(var(--band-c) * .9); }


/* ── V8.2 ORANGE, BACK ─────────────────────────────────────────────────────*/
.qbanner .qeyebrow,.qhero .qeyebrow,.qbanner .eyebrow,.qhero .eyebrow,
.qb-in .qeyebrow,.qb-in .eyebrow{
  background:var(--o-100) !important;
  border-color:var(--o-200) !important;
  color:var(--o-700) !important;
}
.tag,.qtag-c{
  background:var(--o-100) !important; color:var(--o-700) !important;
  border-color:var(--o-200) !important;
}
main .qsec-head .qsec-tag,main .head .eyebrow,main .qsec-head .eyebrow{
  color:var(--o-700) !important;
}
.qb-proof b::after,.prov-stats b::after{
  background:linear-gradient(90deg,var(--o-400),var(--o)) !important; opacity:1;
}
a.card:hover,a.qcard:hover{
  border-color:var(--o-300) !important;
  box-shadow:0 1px 2px rgba(11,21,36,.05),
             0 10px 24px -10px rgba(254,74,8,.26),
             0 22px 46px -22px rgba(254,74,8,.2) !important;
}
.card-glow{ border-color:var(--o-300) !important;
  box-shadow:0 0 0 1px var(--o-200), var(--e3) !important; }
.qfaq[open]{ border-color:var(--o-200) !important; }
.qfaq summary::after{ color:var(--o) !important; }
.btn-g:hover,.btn-t:hover,.qbtn-o:hover{
  background:var(--o-100) !important; border-color:var(--o-300) !important;
  color:var(--o-700) !important;
}
.qhook{ background:linear-gradient(180deg,#fff,var(--warm)) !important;
        border-bottom-color:var(--warm-2) !important; }
.mh-col a:hover{ background:var(--o-100) !important; color:var(--o-700) !important; }


/* ── V8.3 ICON FAMILIES ────────────────────────────────────────────────────
   EMBER — revenue, money, deals, targets. What is being sold.             */
.ico[data-icon=invoice],.ico[data-icon=money],.ico[data-icon=coins],
.ico[data-icon=percent],.ico[data-icon=quote],.ico[data-icon=growth],
.ico[data-icon=deal],.ico[data-icon=target],.ico[data-icon=gauge],
.ico[data-icon=funnel],.ico[data-icon=pipeline],.ico[data-icon=stage],
.ico[data-icon=trigger],.ico[data-icon=spark]{
  background:linear-gradient(150deg,var(--o-100),#fff) !important;
  border-color:var(--o-200) !important; color:var(--o) !important;
}
a.card:hover .ico[data-icon=invoice],a.card:hover .ico[data-icon=money],
a.card:hover .ico[data-icon=coins],a.card:hover .ico[data-icon=percent],
a.card:hover .ico[data-icon=growth],a.card:hover .ico[data-icon=deal],
a.card:hover .ico[data-icon=target],a.card:hover .ico[data-icon=gauge]{
  background:linear-gradient(150deg,var(--o-200),var(--o-100)) !important;
  border-color:var(--o-300) !important;
}

/* BLUE — data, systems, structure. What does the work. */
.ico[data-icon=chart],.ico[data-icon=forecast],.ico[data-icon=dashboard],
.ico[data-icon=report],.ico[data-icon=database],.ico[data-icon=grid],
.ico[data-icon=attribution],.ico[data-icon=workflow],.ico[data-icon=sync],
.ico[data-icon=settings],.ico[data-icon=search],.ico[data-icon=filter],
.ico[data-icon=tag],.ico[data-icon=calendar],.ico[data-icon=clock],
.ico[data-icon=globe],.ico[data-icon=link],.ico[data-icon=import],
.ico[data-icon=plug],.ico[data-icon=key],.ico[data-icon=activity],
.ico[data-icon=email],.ico[data-icon=inbox],.ico[data-icon=at],
.ico[data-icon=sequence],.ico[data-icon=call],.ico[data-icon=chat],
.ico[data-icon=doc],.ico[data-icon=bell],.ico[data-icon=warning]{
  background:linear-gradient(150deg,var(--sig-50),#fff) !important;
  border-color:var(--sig-100) !important; color:var(--sig) !important;
}

/* TEAL — trust, people, verification. What is being promised. */
.ico[data-icon=check],.ico[data-icon=shield],.ico[data-icon=lock],
.ico[data-icon=eye],.ico[data-icon=support],.ico[data-icon=team],
.ico[data-icon=person],.ico[data-icon=company],.ico[data-icon=lead],
.ico[data-icon=ai]{
  background:linear-gradient(150deg,var(--teal-50),#fff) !important;
  border-color:var(--teal-100) !important; color:var(--teal) !important;
}

/* fallback for anything unmapped keeps the brand tint rather than grey */
.ico:not([data-icon]){
  background:linear-gradient(150deg,var(--o-100),#fff) !important;
  border-color:var(--o-200) !important; color:var(--o-700) !important;
}


/* ==========================================================================
   QUOTARIDER — REFINE LAYER v9 · "EMBER RESTORED"
   This file already carried a block ("ONE RAMP") that remapped every orange
   token to Salesforce blue — --o, --o-100..400, --o-ink, --o-soft, --warm,
   --orange-*, with the note "so nothing on the page reads as the old brand
   colour by accident." That is why every orange rule in v5-v8 rendered blue:
   they resolve through var(--o), and var(--o) was blue.

   The brief is orange AND other colours. So the ramps are separated here:
   ember is the brand accent, the blue ramp stays as --b for structure, and
   teal stays for verification. Nothing below redefines --b, so the blue work
   from the previous pass survives intact.
   ========================================================================== */
:root{
  /* ember — the approved pair, extended both ways */
  --o-100:#FFF4EC; --o-200:#FFE2D2; --o-300:#FFB98B;
  --o-400:#FD9328; --o:#FE4A08;     --o-600:#E23E05;
  --o-700:#C2410C; --o-ink:#C2410C; --o-soft:#FFF4EC; --o-lift:#FF7A59;
  --warm:#FFF8F3;  --warm-2:#FFE7D8;

  /* structure blue keeps the ramp the previous pass sampled from the logo */
  --sig:#0176D3; --sig-700:#014486; --sig-100:#D8E6FE; --sig-50:#EEF4FF;

  /* verification */
  --teal:#0F766E; --teal-600:#0D9488; --teal-100:#CCFBF1; --teal-50:#ECFDF8;
}

/* the primary action returns to ember; light.css forces a blue gradient on
   these with !important, and the ONE RAMP pass hard-coded #1B96FF into them */
.btn-p,.btn-primary,.qbtn-p,.pr-cta.solid,.mh-signup,.qa-launch,.qa-send{
  background:linear-gradient(135deg,var(--o) 0%,#D9400A 100%) !important;
  border-color:#CF3C07 !important; color:#fff !important;
}
.btn-p:hover,.btn-primary:hover,.qbtn-p:hover,.pr-cta.solid:hover,.mh-signup:hover{
  background:linear-gradient(135deg,#FF5A1C 0%,#C93A08 100%) !important;
  border-color:#C93A08 !important;
}

/* the brand word in a headline. light.css:651 paints .ital with the blue
   --orange-600 alias, so it needs naming directly. */
.ital,.serif-ital,.qpost-body b,.pr-sub b,
.qbanner h1 em,.qhero h1 em,.qbanner .qh1 em,.qhero .qh1 em,
h2 .ital,h2 em{ color:var(--o) !important; -webkit-text-fill-color:var(--o); }
.qbanner--deep .ital,.qbanner--deep h1 em,.qbanner--deep .qh1 em,
.qfinal h2 em,main .card.center h2 em{
  color:var(--o-lift) !important; -webkit-text-fill-color:var(--o-lift);
}

/* the logo stays as sampled — it is blue, and that is the point of the pair */
.mh-logo,.logo{ color:#121212 !important; }

/* progress and capacity fills were hard-coded to the blue ramp; the lead
   metric on each page is the one that should read as money */
.af-keep,.cap-r.is-hot .cap-track i{
  background:linear-gradient(90deg,var(--o-400),var(--o)) !important;
}


/* ==========================================================================
   QUOTARIDER — REFINE LAYER v10 · "CTA"
   Measured every closing CTA in the browser. Three components, three
   different treatments, and all three wrong in the same way:

     .card.center  1192x378, padding 64/56, everything centred — and the h2
                   box measured 304px wide inside a 1192px card while the
                   lead measured 546 and the button row 1080. Three centred
                   blocks of three different widths stacked on each other,
                   which is why the text looked like it was floating.
     .qfinal       88px of vertical padding for two lines of copy.
     .qpost-cta    left-aligned at 30px padding. A fourth voice again.

   Redesign rather than repair: one horizontal CTA. Copy holds a real
   measure on the left, actions sit right and vertically centred. Padding
   comes down from 64/88 to 40. It reads as a bar, not a poster, which is
   what a closing CTA repeated on 31 pages should be.
   ========================================================================== */

main .card.center,
.qfinal > .wrap,
.cta-band > .wrap{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:clamp(32px,4vw,72px);
  row-gap:10px;
  align-content:center;
  text-align:left !important;
  padding:clamp(28px,3.2vw,40px) clamp(24px,2.8vw,40px) !important;
}
.qfinal{ padding:clamp(40px,4.4vw,60px) 0 !important; }
.qfinal > .wrap{ padding-left:24px !important; padding-right:24px !important; }

/* every text child holds the left column and a readable measure */
main .card.center > *,
.qfinal > .wrap > *,
.cta-band > .wrap > *{
  grid-column:1;
  margin-left:0 !important; margin-right:0 !important;
  text-align:left !important;
  justify-self:start;
}
main .card.center h2,.qfinal > .wrap h2,.qfinal > .wrap .qh1{
  max-width:24ch !important; margin:0 !important;
  font-size:clamp(1.5rem,2.4vw,2rem) !important; line-height:1.15;
  letter-spacing:-.026em;
}
main .card.center .lead,main .card.center > p:not(.eyebrow),
.qfinal > .wrap .qsub,.qfinal > .wrap .lead{
  max-width:54ch !important; margin:0 !important; font-size:1rem !important;
}
main .card.center .eyebrow,.qfinal > .wrap .qeyebrow{ margin:0 0 4px !important; }

/* the action row moves to the right column and centres against the copy */
main .card.center > div:last-child,
main .card.center > .qcta,
.qfinal > .wrap > div:last-child,
.qfinal > .wrap > .qcta{
  grid-column:2 !important; grid-row:1 / span 4;
  align-self:center !important; justify-self:end !important;
  display:flex !important; flex-wrap:wrap; gap:12px;
  justify-content:flex-end !important; margin:0 !important;
}
main .card.center .btn,.qfinal .btn,
main .card.center .qbtn,.qfinal .qbtn{ white-space:nowrap; }

/* the article CTA is narrower, so it stays stacked — but on the same
   padding scale and the same left edge as the body it closes */
.qpost-cta{
  padding:clamp(24px,2.6vw,32px) !important;
  border-radius:12px !important;
}
.qpost-cta h3{ margin:0 0 8px !important; max-width:28ch; }
.qpost-cta p{ margin:0 !important; max-width:56ch; }
.qpost-cta > div:last-child{ margin-top:20px !important; }

@media(max-width:820px){
  main .card.center,.qfinal > .wrap,.cta-band > .wrap{
    grid-template-columns:1fr; row-gap:8px;
  }
  main .card.center > div:last-child,
  main .card.center > .qcta,
  .qfinal > .wrap > div:last-child,
  .qfinal > .wrap > .qcta{
    grid-column:1 !important; grid-row:auto !important;
    justify-self:start !important; justify-content:flex-start !important;
    margin-top:20px !important;
  }
  main .card.center h2,.qfinal > .wrap h2{ max-width:none !important; }
}

/* ── V10.1 .qfinal WITHOUT A .wrap ─────────────────────────────────────────
   Two markup shapes ship for the same component: some pages put the copy
   inside .qfinal > .wrap, others hang it directly off .qfinal. The rules
   above only caught the first, so index and crm kept their 88px poster.  */
.qfinal:not(:has(> .wrap)){
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:clamp(32px,4vw,72px); row-gap:10px;
  align-content:center;
  max-width:var(--max,1240px); margin-inline:auto;
  padding:clamp(34px,3.8vw,52px) 24px !important;
  text-align:left !important;
}
.qfinal:not(:has(> .wrap)) > *{
  grid-column:1; justify-self:start;
  margin-left:0 !important; margin-right:0 !important; text-align:left !important;
}
.qfinal:not(:has(> .wrap)) > h2,
.qfinal:not(:has(> .wrap)) > .qh1{
  max-width:24ch !important; margin:0 !important;
  font-size:clamp(1.5rem,2.4vw,2rem) !important; line-height:1.15; letter-spacing:-.026em;
}
.qfinal:not(:has(> .wrap)) > .qsub,
.qfinal:not(:has(> .wrap)) > p:not(.qeyebrow){
  max-width:54ch !important; margin:0 !important; font-size:1rem !important;
}
.qfinal:not(:has(> .wrap)) > .qeyebrow{ margin:0 0 4px !important; }
.qfinal:not(:has(> .wrap)) > .qcta,
.qfinal:not(:has(> .wrap)) > div:last-child{
  grid-column:2 !important; grid-row:1 / span 4;
  align-self:center !important; justify-self:end !important;
  display:flex !important; flex-wrap:wrap; gap:12px;
  justify-content:flex-end !important; margin:0 !important; width:auto !important;
}
@media(max-width:820px){
  .qfinal:not(:has(> .wrap)){ grid-template-columns:1fr; }
  .qfinal:not(:has(> .wrap)) > .qcta,
  .qfinal:not(:has(> .wrap)) > div:last-child{
    grid-column:1 !important; grid-row:auto !important;
    justify-self:start !important; justify-content:flex-start !important;
    margin-top:20px !important;
  }
  .qfinal:not(:has(> .wrap)) > h2{ max-width:none !important; }
}


/* ==========================================================================
   QUOTARIDER — REFINE LAYER v11 · "LEGIBILITY"
   Audited 10 representative pages in Chromium at 1440 and 390.
   171 text nodes per pass fail WCAG AA. Three tokens cause nearly all:

     #747474  --ink-3 from the ONE RAMP pass    4.40:1 @14px  (needs 4.5)
     #8F8FA3  legacy dark-theme fallback in     3.17:1 @13px
              marketing.css: var(--text-3,#8a8a96)
     #8FA1B6  the deep-banner muted grey,       2.64:1 @12px
              leaking onto light backgrounds

   All three are metadata greys — the smallest type on the page, which is
   exactly the type that cannot afford to be the faintest.
   ========================================================================== */
:root{
  --ink-3:#5C6B7F;   /* 4.40 -> 6.2:1 on white */
  --ink-4:#7E8CA0;   /* decorative only */
  --text-3:#5C6B7F;
  --q-t3:#5C6B7F;
}
/* the legacy fallbacks are baked in as literals, so they need naming */
[style*="#8a8a96"],[style*="#8f8fa3"]{ color:#5C6B7F !important; }
.mf-grid a,.mf-brand p,.qcard p,.qrow-t span,.qb-proof span,
.prov-stats span,.qtrust-i span,.qmicro,.qd-hint,.sc-n{
  color:#5C6B7F !important;
}
/* #8FA1B6 is correct on the deep banner and nowhere else */
.qmicro,.qb-crumb{ color:var(--ink-3) !important; }
.qbanner--deep .qmicro,.qbanner--deep .qb-crumb,
.qbanner--deep .qb-proof span,.qfinal .qmicro{ color:#A8B8CA !important; }
.hv-live,.qdemo-live{ color:#0B6E66 !important; }

/* ── V11.2 TAP TARGETS ─────────────────────────────────────────────────────
   521 controls per pass measure under 36px tall. Inline links inside prose
   are fine at text height; standalone navigation links are not — the footer
   columns were 23px rows on a phone.                                      */
@media(max-width:820px){
  /* stacked navigation lists only. Breadcrumbs and inline pills are NOT in
     this list: forcing display:block on .qb-crumb a stacked every crumb
     vertically, and on .qtag it blew each pill to full width. Inline
     controls get their target area from padding, not from becoming blocks. */
  .mf-grid a,.mh-col a,.qrel a{
    display:flex; align-items:center; min-height:40px;
    padding-top:9px; padding-bottom:9px;
  }
  .qb-crumb a,.qtag,.qtag-c,.tag,.qhc{
    display:inline-flex !important; align-items:center;
    padding-top:6px !important; padding-bottom:6px !important;
  }
  .qb-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; }
  .qd-chips button,.qd-lib button{ min-height:40px; }
}

/* ── V11.3 IMAGE LOADING ───────────────────────────────────────────────────
   20 of 20 images load eagerly. They are all the logo, so the win is small,
   but the footer copy blocks on it on a slow connection.                  */
.mf-brand img,.mf img{ content-visibility:auto; }


/* ── V12 · REVERTED + REDONE ───────────────────────────────────────────────
   v12 set .pr-card{display:grid}. It was display:flex;flex-direction:column
   in light.css:541 and I changed a layout mode on a component I had not
   opened. That turned every child into a grid row: the "Save $478/yr" badge
   stretched into a ~100px block and .pr-inc collided with the feature list.
   Reverted to flex. Equal button heights come from the flex idiom instead. */
.pr-card{ display:flex !important; flex-direction:column !important; }
.pr-card > .pr-cta{
  width:100% !important; min-height:46px;
  display:inline-flex !important; align-items:center !important;
  justify-content:center !important;
}
*:not(.pr-card) > .pr-cta{ width:auto !important; display:inline-flex !important; }
.pr-cta{ white-space:nowrap; }

/* the snapshot icon carries width/height attributes now; this is belt only */
.qd-snap svg{ width:16px !important; height:16px !important; flex:0 0 16px; }
.qd-snap{ line-height:1.2; }

/* ── DARK CTA HEADING ──────────────────────────────────────────────────────
   On the navy closing card the h2 rendered dark-on-dark: only the <em> was
   coloured, so "Start sending in" sat at ink #0B1524 against #0D1B2E and
   was effectively invisible. The heading and its lead now invert with the
   surface, and this covers every dark surface, not just .card.center.     */
.qfinal h2,.qfinal .qh1,.qfinal h3,
main .card.center h2,main .card.center .qh1,
.qbanner--deep h2,.qbanner--deep .qh1,.vera-band h2,
.cta-band.is-dark h2{
  color:#fff !important; -webkit-text-fill-color:#fff;
}
.qfinal h2 em,.qfinal .qh1 em,.qfinal .ital,
main .card.center h2 em,main .card.center .ital,
.qbanner--deep h2 em,.qbanner--deep .ital{
  color:var(--o-lift,#FF7A59) !important; -webkit-text-fill-color:#FF7A59;
}
.qfinal p,.qfinal .qsub,.qfinal .lead,
main .card.center p:not(.eyebrow):not(.qeyebrow),
main .card.center .lead{ color:#C3D0E0 !important; }
.qfinal .qeyebrow,.qfinal .eyebrow,
main .card.center .eyebrow,main .card.center .qeyebrow{
  background:rgba(255,255,255,.1) !important;
  border-color:rgba(255,180,150,.34) !important;
  color:#FFC5AC !important;
}

/* ── HEADER WEIGHT ─────────────────────────────────────────────────────────
   v5.8 dropped the bar to 82% opacity with a blur. Over a white page that
   reads as a faint outline rather than a fixed surface, which is the "feel
   is gone" — the bar stopped looking like it was holding the page up.
   Solid white, a real hairline, and a shadow that grows once you scroll.  */
.mh{
  background:#fff !important;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border:1px solid #E4E9F0 !important;
  box-shadow:0 1px 2px rgba(11,21,36,.05), 0 10px 28px -18px rgba(11,21,36,.28) !important;
}
.mh:hover,.mh:focus-within{
  box-shadow:0 1px 2px rgba(11,21,36,.06), 0 16px 40px -20px rgba(11,21,36,.34) !important;
}
.mh-link{ font-weight:600; }
.mh-signup{ box-shadow:0 1px 2px rgba(190,50,4,.22), 0 8px 18px -8px rgba(254,74,8,.4) !important; }