@charset "UTF-8";
/*
  The /alternatives/{slug} pages (Views/Alternatives). Only the site's own look: the colours, Raleway and the card
  shapes of site.css (the Pricing page's cards, the home page's dark band, .button). The comparison table and the FAQ
  are the page's heaviest blocks on purpose.
*/
.alt-page {
  --qp-green: #91e248;
  --qp-green-dark: #68ae29;
  --qp-green-ink: #3a680f;
  --qp-green-wash: #ecf6df;
  --qp-green-tint: #f7fbf1;
  --qp-navy: #2b3646;
  --qp-navy-deep: #1e2836;
  --qp-text: #575f6f;
  --qp-muted: #738299;
  --qp-soft: #aab1bc;
  --qp-bg: #f7f8fa;
  --qp-border: #e0e3e9;
  --qp-line: #f0f1f5;
  --qp-red: #f7126e;
  --qp-radius: 12px;
  --qp-shadow: 0 8px 28px rgba(43, 54, 70, 0.1);
  --qp-shadow-lg: 0 16px 48px rgba(43, 54, 70, 0.14);
  color: var(--qp-text);
}

.alt-preview-note { position: fixed; z-index: 1040; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 8px 18px; border-radius: 20px; background: var(--qp-navy); color: #fff; font-size: 13px; font-weight: 700; box-shadow: var(--qp-shadow); }

/* ── shared ─────────────────────────────────────────────────────────────── */
.alt-section { padding: 80px 0; }
.alt-section--tight { padding: 10px 0 80px; }
.alt-section--soft { background: var(--qp-bg); }
.alt-title { margin: 0 auto 14px; max-width: 820px; text-align: center; font-size: 36px; font-weight: 900; line-height: 1.15; color: var(--qp-navy); }
.alt-intro { margin: 0 auto 40px; max-width: 720px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--qp-muted); }
.alt-title + .alt-cards, .alt-title + .alt-features { margin-top: 40px; }
.alt-eyebrow { display: inline-block; margin-bottom: 18px; padding: 5px 14px; border-radius: 20px; background: var(--qp-green-wash); color: var(--qp-green-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.alt-eyebrow--center { display: table; margin-left: auto; margin-right: auto; }
.alt-page a:not(.button) { color: var(--qp-green-dark); font-weight: 700; }

/* ── hero (full width) ──────────────────────────────────────────────────── */
.alt-hero { position: relative; margin-top: 55px; padding: 90px 0 80px; overflow: hidden; text-align: center; background: var(--qp-bg); }
/* the inner pages' diagonal (header.small .background-triangle), in white */
.alt-hero:after { position: absolute; content: ''; left: 0; right: 0; bottom: 0; height: 90px; background: #fff; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.alt-hero .container { position: relative; z-index: 1; }
.alt-hero h1 { margin: 0 auto; max-width: 900px; font-size: 46px; font-weight: 900; line-height: 1.12; color: var(--qp-navy); }
/* the home header's green rule under the h1 */
.alt-hero h1:after { display: block; content: ''; width: 90px; margin: 26px auto 0; border-bottom: 5px solid var(--qp-green); }
.alt-hero__subhead { margin: 26px auto 0; max-width: 760px; font-size: 19px; line-height: 1.6; color: #676e7b; }
.alt-hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }
.alt-hero__ctas .button.white { line-height: 48px; }
.alt-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 700; color: var(--qp-muted); }
.alt-trust li { display: flex; align-items: center; gap: 8px; }
.alt-trust li:before { content: ''; display: block; flex-shrink: 0; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='7' fill='%2391E248' fill-opacity='0.22'/%3E%3Cpath d='M5 8.4l2.1 2.1 3.9-4.5' stroke='%2368ae29' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }

/* ── comparison table (dominant) ────────────────────────────────────────── */
.alt-comparison { padding-top: 40px; }
.alt-compare-card { max-width: 1020px; margin: 0 auto; border: 1px solid #e8eaef; border-radius: var(--qp-radius); background: #fff; box-shadow: var(--qp-shadow-lg); overflow: hidden; }
.alt-compare { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.alt-compare th, .alt-compare td { padding: 20px 24px; vertical-align: top; text-align: left; border-bottom: 1px solid var(--qp-line); }
.alt-compare tbody tr:last-child > * { border-bottom: none; }
.alt-compare thead th { padding: 22px 24px; vertical-align: middle; border-bottom: none; font-size: 18px; font-weight: 900; color: var(--qp-navy); background: #fff; }
.alt-compare thead .alt-compare__feature { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qp-soft); }
/* the QPoint column leads: dark head (the Pricing page's featured card), a green tint down the column */
.alt-compare thead th.is-qpoint { background: var(--qp-navy); }
.alt-compare__logo { display: block; height: 22px; width: auto; }
.alt-compare thead th.is-competitor { background: var(--qp-bg); color: var(--qp-text); }
.alt-compare td.is-qpoint { background: var(--qp-green-tint); border-left: 1px solid #e6f1d8; border-right: 1px solid #e6f1d8; }
.alt-compare tbody tr:hover > * { background-color: #fbfcfd; }
.alt-compare tbody tr:hover > td.is-qpoint { background-color: #f1f8e7; }
.alt-compare__feature { width: 26%; font-weight: 800; color: var(--qp-navy); }
.alt-compare tbody th.alt-compare__feature strong { font-weight: 800; }
.alt-compare td { width: 37%; color: var(--qp-text); }
/* the winning cell: bold, in the accent colour, a green check in front */
.alt-compare td.is-win { position: relative; padding-left: 50px; font-weight: 700; color: var(--qp-green-ink); }
.alt-compare td.is-win strong { font-weight: 900; }
.alt-compare__win { position: absolute; left: 20px; top: 21px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--qp-green); color: #1c2d0f; font-size: 11px; }
.alt-compare__icon { display: inline-block; margin-right: 6px; font-size: 20px; line-height: 1; vertical-align: -3px; }
.alt-compare__icon--yes { color: var(--qp-green-dark); }
.alt-compare__icon--no { color: var(--qp-red); opacity: 0.75; }
.alt-compare__icon--partial { color: var(--qp-soft); }

/* phones: a card per feature - the feature on top, the two values below, each named by its column */
@media (max-width: 767.98px) {
  .alt-compare-card { border: none; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
  .alt-compare, .alt-compare tbody, .alt-compare tr, .alt-compare th, .alt-compare td { display: block; width: 100%; }
  .alt-compare thead { display: none; }
  .alt-compare tbody tr { margin-bottom: 16px; border: 1px solid #e8eaef; border-radius: var(--qp-radius); background: #fff; box-shadow: var(--qp-shadow); overflow: hidden; }
  .alt-compare tbody tr:hover > * { background-color: inherit; }
  .alt-compare tbody th.alt-compare__feature { padding: 14px 18px; background: var(--qp-bg); font-size: 16px; border-bottom: 1px solid var(--qp-line); }
  .alt-compare td { padding: 14px 18px; border-left: none; border-right: none; }
  .alt-compare td.is-qpoint { border-left: 4px solid var(--qp-green); }
  .alt-compare td.is-win { padding-left: 18px; }
  .alt-compare__win { position: static; display: inline-flex; margin-right: 8px; vertical-align: -3px; }
  .alt-compare tbody tr > td:last-child { border-bottom: none; }
  .alt-compare td:before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qp-soft); }
}

/* ── honest callout - deliberately not green ────────────────────────────── */
.alt-callout { max-width: 1020px; margin: 0 auto; padding: 36px 40px; border: 1px solid var(--qp-border); border-left: 6px solid var(--qp-muted); border-radius: var(--qp-radius); background: var(--qp-bg); }
.alt-callout__head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.alt-callout__head h2 { margin: 0; font-size: 26px; font-weight: 900; color: var(--qp-navy); }
.alt-callout__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--qp-border); color: var(--qp-muted); font-size: 20px; }
.alt-callout__intro { margin: 0 0 18px; font-size: 15px; font-style: italic; color: var(--qp-muted); }
.alt-callout__items { margin: 0; padding: 0; list-style: none; }
.alt-callout__items li { position: relative; margin: 0 0 14px; padding-left: 24px; font-size: 15px; line-height: 1.65; }
.alt-callout__items li:before { position: absolute; content: ''; left: 2px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--qp-muted); }
.alt-callout__items strong { color: var(--qp-navy); }
.alt-callout__outro { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--qp-border); font-size: 15px; font-weight: 700; color: var(--qp-navy); }

/* ── use case cards (3-up) and testimonials ─────────────────────────────── */
.alt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.alt-cards--2 { grid-template-columns: repeat(2, 1fr); max-width: 1020px; margin-left: auto; margin-right: auto; }
.alt-card { margin: 0; padding: 30px 28px; border: 1px solid #e8eaef; border-radius: var(--qp-radius); background: #fff; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.alt-card:hover { box-shadow: var(--qp-shadow); transform: translateY(-2px); }
.alt-card__icon { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin-bottom: 18px; border-radius: 50%; background: var(--qp-green-wash); color: #5a9e20; font-size: 22px; }
.alt-card h3 { margin: 0 0 10px; font-size: 19px; font-weight: 800; line-height: 1.3; color: var(--qp-navy); }
.alt-card__body, .alt-card__body p { margin: 0; font-size: 14px; line-height: 1.65; }
.alt-quote blockquote { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--qp-navy); }
.alt-quote blockquote:before { content: '\201C'; display: block; height: 34px; font-size: 56px; font-weight: 900; line-height: 1; color: var(--qp-green); }
.alt-quote figcaption strong { display: block; color: var(--qp-navy); }
.alt-quote figcaption span { font-size: 13px; color: var(--qp-muted); }

/* ── feature strip: 6 / 3 / 2 columns ───────────────────────────────────── */
.alt-features { display: grid; grid-template-columns: repeat(6, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--qp-border); border-bottom: 1px solid var(--qp-border); }
.alt-feature { padding: 30px 18px; text-align: center; }
.alt-feature + .alt-feature { border-left: 1px solid var(--qp-line); }
.alt-feature__icon { display: block; margin-bottom: 14px; font-size: 28px; color: var(--qp-green-dark); }
.alt-feature h3 { margin: 0 0 8px; font-size: 15px; font-weight: 800; color: var(--qp-navy); }
.alt-feature__text, .alt-feature__text p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--qp-muted); }

/* ── FAQ (dominant) ─────────────────────────────────────────────────────── */
.alt-faq { background: var(--qp-bg); }
.alt-faq__list { max-width: 860px; margin: 40px auto 0; }
.alt-faq__item { margin-bottom: 12px; border: 1px solid #e8eaef; border-radius: 10px; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; }
.alt-faq__item:hover { box-shadow: var(--qp-shadow); }
.alt-faq__item[open] { border-color: var(--qp-green); box-shadow: var(--qp-shadow); }
.alt-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 800; line-height: 1.4; color: var(--qp-navy); }
.alt-faq__item summary::-webkit-details-marker { display: none; }
.alt-faq__item summary:focus-visible { outline: 2px solid var(--qp-green-dark); outline-offset: 2px; border-radius: 10px; }
.alt-faq__toggle { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--qp-green-wash); color: var(--qp-green-dark); font-size: 13px; transition: transform 0.2s ease, background 0.2s; }
.alt-faq__item[open] .alt-faq__toggle { transform: rotate(45deg); background: var(--qp-green); color: #1c2d0f; }
.alt-faq__answer { padding: 0 26px 24px; font-size: 15px; line-height: 1.7; }
.alt-faq__answer p { margin: 0 0 10px; }
.alt-faq__answer p:last-child { margin-bottom: 0; }
.alt-faq__answer a { border-bottom: 1px solid var(--qp-green); }
.alt-faq__answer a:hover { text-decoration: none; background: var(--qp-green); color: #fff !important; }

/* ── final call to action (full width) - the home page's dark band ──────── */
.alt-final { position: relative; padding: 80px 0; text-align: center; background: var(--qp-navy); color: rgba(255, 255, 255, 0.7); }
.alt-final h2 { margin: 0 auto 18px; max-width: 860px; font-size: 36px; font-weight: 900; line-height: 1.2; color: #fff; }
.alt-final p { margin: 0 auto; max-width: 720px; font-size: 16px; line-height: 1.7; }
.alt-final__ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 30px; margin-top: 34px; }
.alt-page a.alt-final__link { color: #fff; font-weight: 700; border-bottom: 1px solid var(--qp-green); }
.alt-page a.alt-final__link:hover { color: var(--qp-green); text-decoration: none; }

/* ── internal links: one small row ──────────────────────────────────────── */
.alt-links { padding: 26px 0; border-bottom: 1px solid var(--qp-line); font-size: 13px; }
.alt-links .container { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.alt-links__title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qp-soft); }
.alt-links ul { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; }
.alt-page .alt-links a { font-weight: 600; color: var(--qp-muted); }
.alt-page .alt-links a:hover { color: var(--qp-green-dark); }

/* content of a block the template doesn't know */
.alt-prose { max-width: 860px; font-size: 15px; line-height: 1.7; }

/* ── tablets and phones ─────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .alt-cards { grid-template-columns: repeat(2, 1fr); }
  .alt-features { grid-template-columns: repeat(3, 1fr); }
  .alt-feature:nth-child(3n + 1) { border-left: none; }
  .alt-feature:nth-child(n + 4) { border-top: 1px solid var(--qp-line); }
}
@media (max-width: 767.98px) {
  .alt-section { padding: 50px 0; }
  .alt-section--tight { padding: 0 0 50px; }
  .alt-title, .alt-final h2 { font-size: 27px; }
  .alt-hero { padding: 50px 0 70px; }
  .alt-hero h1 { font-size: 31px; }
  .alt-hero__subhead { font-size: 16px; }
  .alt-hero__ctas .button { width: 100%; }
  .alt-trust { flex-direction: column; align-items: center; }
  .alt-cards, .alt-cards--2 { grid-template-columns: 1fr; }
  .alt-features { grid-template-columns: repeat(2, 1fr); }
  .alt-feature { padding: 24px 12px; }
  .alt-feature:nth-child(3n + 1) { border-left: 1px solid var(--qp-line); }
  .alt-feature:nth-child(2n + 1) { border-left: none; }
  .alt-feature:nth-child(n + 3) { border-top: 1px solid var(--qp-line); }
  .alt-callout { padding: 26px 22px; }
  .alt-callout__head h2 { font-size: 21px; }
  .alt-faq__item summary { padding: 18px 18px; font-size: 16px; }
  .alt-faq__answer { padding: 0 18px 20px; }
  .alt-final { padding: 56px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .alt-card, .alt-faq__toggle, .alt-faq__item { transition: none; }
  .alt-card:hover { transform: none; }
}