/**
 * WhatsRay website, colour and consistency layer (public pages only; loads after home-v2 / nav-footer / auth-brand).
 * Dark teal stays the brand and every main button; greens bring the pages to life in small places (headline highlight,
 * background glows, the closing section's doodles). One accent green (--wc-accent) is used wherever an element repeats
 * (section labels, step numbers, stats, checks), so repeated parts look the same across the page.
 * The "Uniform rules" block at the end sets the shared label, heading, spacing, corner, button and check styles.
 */
:root {
  --wc-teal: #006b5f;
  --wc-teal-deep: #004d44;
  --wc-jade: #12a383;
  --wc-emerald: #0f8a5f;
  --wc-forest: #2e7d32;
  --wc-leaf: #5c9e2e;
  --wc-deep: #1b7a4a;
  --wc-headline: linear-gradient(95deg, #006b5f 0%, #0f8a5f 40%, #2e9d4f 75%, #5c9e2e 100%);
  --wc-accent: #0f8a5f;            /* the one green for repeated elements */
  --wc-label-bg: #e6f3ee;
  --wc-label-line: rgba(15, 138, 95, .24);
  --wc-label-ink: #0b6b4a;
  --wc-card-radius: 20px;
  --wc-item-radius: 14px;
  --wc-section-y: 96px;
}

/* ---------- Headline highlights: teal into emerald into leaf green ---------- */
.hp-hero__title span,
.hp-features h2 span,
.hp .hpb-g,
.hp-head h2 span,
.wr-page-hero h1 span {
  background: var(--wc-headline) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* ---------- Soft colour glows behind the first screen ---------- */
.hp-hero {
  background:
    radial-gradient(circle at 90% 10%, rgba(46, 125, 50, .16), transparent 34%),
    radial-gradient(circle at 72% 92%, rgba(92, 158, 46, .18), transparent 36%),
    radial-gradient(circle at 4% 6%, rgba(18, 163, 131, .20), transparent 38%),
    radial-gradient(circle at 46% 100%, rgba(15, 138, 95, .12), transparent 34%),
    linear-gradient(120deg, #ffffff 0%, #f3f9f7 100%) !important;
}
.hp-hero__frame {
  box-shadow: 0 30px 60px rgba(15, 138, 95, .16), 0 12px 28px rgba(0, 107, 95, .12) !important;
}
.wr-page-hero {
  background:
    radial-gradient(circle at 88% 0%, rgba(46, 125, 50, .10), transparent 36%),
    radial-gradient(circle at 12% 100%, rgba(92, 158, 46, .10), transparent 38%),
    radial-gradient(circle at 50% 0%, rgba(18, 163, 131, .10), transparent 45%),
    linear-gradient(120deg, #ffffff 0%, #f3f9f7 100%) !important;
}

/* ---------- Main buttons: dark teal with a richer finish ---------- */
.hp-btn--solid,
.nf-nav__cta,
body:has(.hp) .mx-header .top-button .btn--base,
body:has(.hp) .hp-pricing .btn--base {
  background: linear-gradient(115deg, #004d44 0%, #006b5f 55%, #0a7f6f 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(0, 107, 95, .26), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}
.hp-btn--solid:hover,
.hp-btn--solid:focus-visible,
.nf-nav__cta:hover,
body:has(.hp) .mx-header .top-button .btn--base:hover,
body:has(.hp) .hp-pricing .btn--base:hover {
  background: linear-gradient(115deg, #003f38 0%, #005a50 55%, #006b5f 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 30px rgba(0, 107, 95, .32), 0 0 0 4px rgba(18, 163, 131, .16) !important;
}

/* ---------- Section labels: one pill everywhere (a dark-background version is in the uniform rules) ---------- */
html body:not(#_z) .hp-kicker,
html body:not(#_z) .hp-kicker--light {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px !important;
  border: 1px solid var(--wc-label-line) !important;
  border-radius: 999px !important;
  background: var(--wc-label-bg) !important;
  color: var(--wc-label-ink) !important;
  -webkit-text-fill-color: var(--wc-label-ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

/* ---------- Trust bar: one icon colour ---------- */
.hp-trustbar__row i { color: #7fd8c2 !important; }

/* ---------- "How it works" steps: soft mint boxes with big step numbers ---------- */
html body:not(#_z) .hp-api-explainer { background: #ffffff !important; }
.hp-api-explainer__steps li { --wc-step: var(--wc-accent); }
html body:not(#_z) .hp-api-explainer__steps li {
  background: #eef6f1 !important;
  border: 1px solid #dcebe3 !important;
  box-shadow: none !important;
}
html body:not(#_z) .hp-api-explainer__steps li span {
  display: block;
  margin-bottom: 18px;
  color: var(--wc-step) !important;
  -webkit-text-fill-color: var(--wc-step) !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  line-height: 1;
  letter-spacing: -.04em !important;
  font-variant-numeric: tabular-nums;
}

/* Sign-up to first campaign: heading beside the steps (desktop), compact solid step circles */
.hp-timeline__item { --wc-step: var(--wc-accent); }
@media (min-width: 992px) {
  html body:not(#_z) #hp-workflow .container {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
  }
  html body:not(#_z) #hp-workflow .hp-head {
    position: sticky;
    top: 110px;
    margin: 0;
    text-align: left;
  }
  html body:not(#_z) #hp-workflow .hp-timeline { margin: 0; }
}
html body:not(#_z) .hp-timeline::before { left: 19px; width: 1px; background: #dcebe3; }
html body:not(#_z) .hp-timeline__item { gap: 22px; padding-bottom: 36px; }
html body:not(#_z) .hp-timeline__item:last-child { padding-bottom: 0; }
html body:not(#_z) .hp-timeline__marker {
  width: 40px;
  height: 40px;
  background: var(--wc-step) !important;
  border: 3px solid #eef6f1 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
html body:not(#_z) .hp-timeline__content { padding-top: 7px; }
html body:not(#_z) .hp-timeline__content h3 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }

/* ---------- Feature tiles and icons ---------- */
.hpb-tile:not(.hpb-tile--ink) { position: relative; }
.hpb-tile:not(.hpb-tile--ink)::after {
  content: '';
  position: absolute;
  left: 22px;
  top: 0;
  width: 46px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--wc-tile, var(--wc-jade));
}
.hpb-tile:not(.hpb-tile--ink) {
  background: linear-gradient(165deg, color-mix(in srgb, var(--wc-tile, var(--wc-jade)) 10%, #ffffff) 0%, #ffffff 58%) !important;
  border-color: color-mix(in srgb, var(--wc-tile, var(--wc-jade)) 22%, #e3ebe8) !important;
}
.hpb .hpb-tile { --wc-tile: var(--wc-accent); }
.hpb-tile--ink {
  background: linear-gradient(150deg, #003f38 0%, #006b5f 60%, #13804f 100%) !important;
}

.hp-bento__item { --wc-ic: var(--wc-accent); }
.hp-bento__icon,
.hp-apibenefits__icon,
.hp-featlist__icon {
  background: color-mix(in srgb, var(--wc-ic, var(--wc-jade)) 13%, #ffffff) !important;
  color: var(--wc-ic, var(--wc-jade)) !important;
}
.hp-bento__item:hover { border-color: color-mix(in srgb, var(--wc-ic) 35%, transparent) !important; }

/* ---------- Stats: one colour ---------- */
.hp-stat .hp-stat__num { color: var(--wc-teal) !important; }
.hp-stat__num { -webkit-text-fill-color: currentColor !important; }

/* ---------- Pricing: plain cards; the recommended plan is the one highlight, in the brand teal ---------- */
.hpp-plan__flag,
.hp-pricing .pricing-card.popular::before {
  background: var(--wc-teal) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(0, 107, 95, .22);
}
.hpp-plan--best {
  border-color: var(--wc-teal) !important;
  box-shadow: 0 18px 40px rgba(0, 77, 68, .12), 0 0 0 4px rgba(0, 107, 95, .08) !important;
}
.hp-faq-tabs__btn.is-active {
  background: linear-gradient(115deg, #004d44, #006b5f) !important;
  color: #ffffff !important;
}

/* ---------- Closing call to action: the soft green wash, filled with chat-wallpaper doodles ---------- */
.hp-cta {
  background:
    radial-gradient(circle at 15% 20%, rgba(18, 163, 131, .16), transparent 38%),
    radial-gradient(circle at 85% 30%, rgba(46, 125, 50, .14), transparent 38%),
    radial-gradient(circle at 50% 110%, rgba(92, 158, 46, .16), transparent 42%),
    #f3f8f6 !important;
}
/* Doodles (images/chat-doodles.svg) across the whole band, fading behind the headline and buttons so they stay easy to read */
.hp-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/chat-doodles.svg') 0 0 / 360px 360px repeat;
  opacity: .16;
  -webkit-mask-image: radial-gradient(ellipse 42% 60% at 50% 50%, rgba(0, 0, 0, .25) 0%, #000 100%);
  mask-image: radial-gradient(ellipse 42% 60% at 50% 50%, rgba(0, 0, 0, .25) 0%, #000 100%);
  pointer-events: none;
}
@media (max-width: 767px) {
  .hp-cta::before {
    background-size: 280px 280px;
    -webkit-mask-image: radial-gradient(ellipse 70% 45% at 50% 50%, rgba(0, 0, 0, .25) 0%, #000 100%);
    mask-image: radial-gradient(ellipse 70% 45% at 50% 50%, rgba(0, 0, 0, .25) 0%, #000 100%);
  }
}

/* ---------- Footer: a colour stripe and brighter link hovers ---------- */
.nf-footer::before {
  background: linear-gradient(90deg, #004d44 0%, #006b5f 20%, #0f8a5f 40%, #12a383 60%, #2e9d4f 80%, #5c9e2e 100%) !important;
}
.nf-footer__lead {
  background:
    radial-gradient(circle at 92% 0%, rgba(92, 158, 46, .26), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(18, 163, 131, .30), transparent 45%),
    linear-gradient(120deg, rgba(0, 92, 80, .6), rgba(10, 40, 34, .85)) !important;
}


@media (prefers-reduced-motion: reduce) {
  .hp-btn--solid, .nf-nav__cta { transition: none !important; }
}

/* ---------- Back-to-top button (a <button> now): reset button styles, visible focus, not on phones ---------- */
html body:not(#_z) button.scroll-top { padding: 0; border: 0; font-size: 18px; line-height: 1; }
html body:not(#_z) button.scroll-top:focus-visible { outline: 3px solid #0f8a5f; outline-offset: 3px; }
/* On a phone it covered buttons near the bottom of the screen (e.g. "Choose Scale"), and the browser already has a way back to the top. */
@media (max-width: 767px) {
  html body:not(#_z) .scroll-top { display: none !important; }
}

/* ==========================================================================
   Uniform rules: the same label, heading, spacing, corner, button and check styles across the homepage
   ========================================================================== */

/* Section labels on dark backgrounds (Enterprise, the footer newsletter): same pill, light version */
html body:not(#_z) .hpp-ent__tag,
html body:not(#_z) .nf-footer .nf-footer__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 7px 16px !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .1) !important;
  color: #a7e8d4 !important;
  -webkit-text-fill-color: #a7e8d4 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
html body:not(#_z) .nf-footer .nf-footer__eyebrow { margin-bottom: 14px; }

/* Section headings: one size; one gap below the heading block */
html body:not(#_z) .hp-head h2,
html body:not(#_z) .hp-tour__copy h2,
html body:not(#_z) .hp-apibenefits h2,
html body:not(#_z) .hp-cta h2 { font-size: 40px !important; line-height: 1.18 !important; }
@media (max-width: 767px) {
  html body:not(#_z) .hp-head h2,
  html body:not(#_z) .hp-tour__copy h2,
  html body:not(#_z) .hp-apibenefits h2,
  html body:not(#_z) .hp-cta h2 { font-size: 28px !important; }
}
html body:not(#_z) .hp .hp-head { margin-bottom: 48px; }
@media (min-width: 992px) {
  html body:not(#_z) #hp-workflow .hp-head { margin-bottom: 0; }
}

/* Section spacing: one vertical rhythm. Pricing keeps a short bottom because the FAQ follows directly. */
html body:not(#_z) .hp-section,
html body:not(#_z) .hp-api-explainer,
html body:not(#_z) .hp-api-compare,
html body:not(#_z) .hp-tour,
html body:not(#_z) .hp-cta { padding-top: var(--wc-section-y); padding-bottom: var(--wc-section-y); }
html body:not(#_z) .hp-apibenefits-wrap { padding-top: 0; }
html body:not(#_z) #hp-pricing { padding-bottom: 40px; }
html body:not(#_z) #hp-faq { padding-top: 56px; }
html body:not(#_z) .hp-stats { padding-top: 72px; padding-bottom: 72px; }
@media (max-width: 767px) {
  :root { --wc-section-y: 64px; }
  html body:not(#_z) .hp-stats { padding-top: 56px; padding-bottom: 56px; }
}

/* Corners: 20px for cards, 14px for small items (FAQ rows, inner boxes) */
html body:not(#_z) .hp-api-explainer__steps li,
html body:not(#_z) .hp-api-compare__grid article,
html body:not(#_z) .hp-api-compare__keep,
html body:not(#_z) .fs__card,
html body:not(#_z) .hpb-tile,
html body:not(#_z) .hp-apibenefits,
html body:not(#_z) .hp-ready,
html body:not(#_z) .hpp-plan,
html body:not(#_z) .hpp-ent,
html body:not(#_z) .hp-hero__frame { border-radius: var(--wc-card-radius) !important; }
html body:not(#_z) .hp-faq__item { border-radius: var(--wc-item-radius) !important; }

/* Card titles: one size for cards of the same kind */
html body:not(#_z) .hp-api-explainer__steps h3,
html body:not(#_z) .hp-api-compare__grid h3,
html body:not(#_z) .hpb-tile h3 { font-size: 22px !important; font-weight: 600 !important; }
html body:not(#_z) .hpp-ent h3 { font-size: 24px !important; }

/* Buttons: one shape (12px corners) and one height everywhere, pricing included */
html body:not(#_z) .hp-btn,
html body:not(#_z) .hp-btn--lg { min-height: 54px; padding: 0 28px; border-radius: 12px !important; font-size: 15px; }
html body:not(#_z) .hpp-btn,
html body:not(#_z) .hpp-ent__btn { min-height: 54px !important; border-radius: 12px !important; font-size: 15px !important; }

/* List checks: the same small check in a tinted circle in every list */
html body:not(#_z) .hp-tour__list i,
html body:not(#_z) .hpp-has li i,
html body:not(#_z) .hp-apibenefits__item i,
html body:not(#_z) .hp-api-compare__grid li i,
html body:not(#_z) .hp-ready li i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: 50%;
  background: rgba(15, 138, 95, .12) !important;
  color: var(--wc-accent) !important;
  font-size: 12px !important;
}
html body:not(#_z) .hpp-has li,
html body:not(#_z) .hp-apibenefits__item,
html body:not(#_z) .hp-api-compare__grid li,
html body:not(#_z) .hp-ready li { display: flex; align-items: flex-start; gap: 10px; }
html body:not(#_z) .hpp-has li i,
html body:not(#_z) .hp-apibenefits__item i,
html body:not(#_z) .hp-api-compare__grid li i,
html body:not(#_z) .hp-ready li i { margin-top: 1px; }
html body:not(#_z) .hp-api-compare__grid ul { padding-left: 0 !important; list-style: none !important; }
html body:not(#_z) .hp-api-compare__grid li + li { margin-top: 6px; }
html body:not(#_z) .hp-ready li { padding-left: 0 !important; }
html body:not(#_z) .hp-ready li::before { content: none !important; }


/* ==========================================================================
   Same rules on the other public pages (Help, User Guide, Contact, sign in / sign up, Blog, News, policies)
   ========================================================================== */

/* Section labels: the site pill */
html body:not(#_z) .hc-eyebrow,
html body:not(#_z) .hc-kicker,
html body:not(#_z) .wr-guide-kicker,
html body:not(#_z) .fs__eyebrow,
html body:not(#_z) .auth-register__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 7px 16px !important;
  border: 1px solid var(--wc-label-line) !important;
  border-radius: 999px !important;
  background: var(--wc-label-bg) !important;
  color: var(--wc-label-ink) !important;
  -webkit-text-fill-color: var(--wc-label-ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
/* Help's "Since 1 October 2026" stays an alert: same pill in amber */
html body:not(#_z) .hc-kicker--alert {
  border-color: rgba(194, 124, 14, .3) !important;
  background: #fdf3e6 !important;
  color: #9a5b00 !important;
  -webkit-text-fill-color: #9a5b00 !important;
}
html body:not(#_z) .fs__eyebrow { margin-inline: auto; }

/* Page titles and section headings: 50px titles, 40px section headings (28px on phones) */
html body:not(#_z) .hc-hero h1,
html body:not(#_z) .wr-guide-hero h1 { font-size: clamp(32px, 4.4vw, 50px) !important; line-height: 1.1 !important; letter-spacing: -.02em !important; }
html body:not(#_z) .hc-head h2,
html body:not(#_z) .hc-split h2,
html body:not(#_z) .wr-guide-heading h2,
html body:not(#_z) .wr-guide-module h2,
html body:not(#_z) .wr-launch-checklist h2 { font-size: 40px !important; line-height: 1.18 !important; letter-spacing: -.02em !important; }
@media (max-width: 767px) {
  html body:not(#_z) .hc-head h2,
  html body:not(#_z) .hc-split h2,
  html body:not(#_z) .wr-guide-heading h2,
  html body:not(#_z) .wr-guide-module h2,
  html body:not(#_z) .wr-launch-checklist h2 { font-size: 28px !important; }
}

/* Cards: 20px corners, flat with a hairline border */
html body:not(#_z) .hc-card,
html body:not(#_z) .wr-setup-card,
html body:not(#_z) .wr-guide-card,
html body:not(#_z) .wr-tool-card,
html body:not(#_z) .wr-guide-module,
html body:not(#_z) .wr-template-guide-card,
html body:not(#_z) .wr-ai-panel,
html body:not(#_z) .wr-launch-checklist,
html body:not(#_z) .blog-item,
html body:not(#_z) .contact-item,
html body:not(#_z) .support-item {
  border-radius: 20px !important;
  box-shadow: none !important;
}
html body:not(#_z) .blog-item { border: 1px solid #e3ebe8 !important; overflow: hidden; }
html body:not(#_z) .blog-item:hover { border-color: #c4d6cf !important; }

/* Buttons: 54px tall, 12px corners, 15px text, solid teal for the main action */
html body:not(#_z) .hc-hero__actions .btn,
html body:not(#_z) .wr-guide-actions .btn,
html body:not(#_z) .contact-form .btn--base,
html body:not(#_z) .auth-login__submit,
html body:not(#_z) .auth-register__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px !important;
  padding: 0 28px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
html body:not(#_z) .hc-hero__actions .btn--base,
html body:not(#_z) .wr-guide-actions .btn--base,
html body:not(#_z) .contact-form .btn--base,
html body:not(#_z) .auth-login__submit,
html body:not(#_z) .auth-register__submit {
  border: 0 !important;
  background: var(--wc-teal) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html body:not(#_z) .hc-hero__actions .btn--base:hover,
html body:not(#_z) .wr-guide-actions .btn--base:hover,
html body:not(#_z) .contact-form .btn--base:hover,
html body:not(#_z) .auth-login__submit:hover,
html body:not(#_z) .auth-register__submit:hover { background: #005a50 !important; }

/* Contact: no decorative corner shapes; content as wide as the rest of the site */
html body:not(#_z) .contact-item__shape { display: none !important; }
html body:not(#_z) main.frontend .contact-section .container { max-width: 1180px; }

/* Space before the footer: the site rhythm on list and article pages */
html body:not(#_z) .blog-section,
html body:not(#_z) .blog-bottom-section,
html body:not(#_z) .policy-content,
html body:not(#_z) main.frontend > .wr-page-body { padding-bottom: var(--wc-section-y) !important; }

/* Readable contrast (4.5:1) for text the old forced grey used to hide */
html body:not(#_z) .hc { --hc-muted: #5c6e69; --hc-marketing: #c2410c; }
html body:not(#_z) .hc-free, html body:not(#_z) .hc-badge:not(.is-utility), html body:not(#_z) .hc-myth__tag { color: #006b5a !important; }
html body:not(#_z) .hc-fine { color: #5c6e69 !important; }
html body:not(#_z) .hc-bubble.is-ok small { color: #00695a !important; }
html body:not(#_z) .support-item__desc,
html body:not(#_z) .contact-hint:not(.contact-hint--error) { color: #55635f !important; -webkit-text-fill-color: #55635f !important; }
/* User Guide step numbers: the site accent green, not orange */
html body:not(#_z) .wr-setup-card span { color: var(--wc-accent) !important; -webkit-text-fill-color: var(--wc-accent) !important; }

/* ---------- Cookie banner: compact card in the site style ---------- */
html body:not(#_z) .cookies-card {
  width: 340px;
  padding: 16px 18px !important;
  border: 1px solid #e3ebe8 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 16px 40px -12px rgba(16, 40, 35, .28) !important;
  left: 20px;
  bottom: 20px;
}
html body:not(#_z) .cookies-card__header { display: none; }
/* Its text sits outside main.frontend, so it had kept a light colour meant for a dark card */
html body:not(#_z) .cookies-card__content {
  margin: 0 0 12px !important;
  color: #3d4b47 !important;
  -webkit-text-fill-color: #3d4b47 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}
html body:not(#_z) .cookies-card__footer { gap: 8px; }
html body:not(#_z) .cookies-card__footer .btn {
  min-height: 40px;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
html body:not(#_z) .cookies-card .cookies-card__btn {
  border: 1px solid var(--wc-teal) !important;
  background: var(--wc-teal) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html body:not(#_z) .cookies-card .cookies-card__btn:hover { background: #005a50 !important; }
html body:not(#_z) .cookies-card .cookies-card__btn-outline {
  border: 1px solid #cfd9d5 !important;
  background: #fff !important;
  color: #1f2933 !important;
  -webkit-text-fill-color: #1f2933 !important;
}
html body:not(#_z) .cookies-card__more {
  margin-top: 8px !important;
  color: var(--wc-teal) !important;
  -webkit-text-fill-color: var(--wc-teal) !important;
  font-size: 12.5px !important;
}
@media (max-width: 575px) {
  html body:not(#_z) .cookies-card { width: calc(100% - 20px); left: 10px; bottom: 10px; }
}

/* ---------- Pricing page ---------- */
/* Less empty space between the page header and the plans; the Meta-costs note opens the section */
html body:not(#_z) main.frontend > .hp > #hp-pricing:first-child { padding-top: 48px; }
html body:not(#_z) main.frontend > .hp > #hp-pricing:first-child .hp-pricing__cost-note { max-width: 640px; margin: 0 auto 28px; color: var(--hp-ink-dim, #5c6e69); font-size: 14px; line-height: 1.5; text-wrap: balance; }
/* Plans to FAQ: the homepage gap */
html body:not(#_z) #hp-pricing-faq { padding-top: 56px; }
/* No lone word on the last line of page-header subtitles */
html body:not(#_z) .wr-page-hero__text { text-wrap: balance; }
/* Phones: the comparison table fits the screen, so every plan's column is visible without sideways scrolling */
@media (max-width: 575px) {
  html body:not(#_z) .hpp-table { overflow-x: visible; }
  html body:not(#_z) .hpp-table table { min-width: 0; table-layout: fixed; font-size: 13px; }
  html body:not(#_z) .hpp-table th,
  html body:not(#_z) .hpp-table td { padding: 11px 6px; overflow-wrap: anywhere; }
  html body:not(#_z) .hpp-table th:first-child,
  html body:not(#_z) .hpp-table td:first-child { width: 38%; padding-left: 14px; }
  html body:not(#_z) .hpp-table thead th { font-size: 12.5px; }
}

/* ---------- Blog and News ---------- */
/* Same width as every other page */
html body:not(#_z) main.frontend .blog-section .container,
html body:not(#_z) main.frontend .blog-bottom-section .container { max-width: 1180px; }
/* Card previews: whole words, at most 3 lines */
html body:not(#_z) .blog-item__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* Card images: square inside the card (the card's own corners round them), on the list and in "More posts" */
html body:not(#_z) .blog-item__thumb,
html body:not(#_z) .blog-item__thumb img { border-radius: 0 !important; }
/* Share buttons: all the same, teal outline, filled on hover */
html body:not(#_z) .blog-details__share .social-list { display: flex; gap: 10px; }
html body:not(#_z) .blog-details__share .social-list__link {
  width: 44px;
  height: 44px;
  border: 1px solid #cfe2da !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--wc-teal) !important;
  -webkit-text-fill-color: var(--wc-teal) !important;
}
html body:not(#_z) .blog-details__share .social-list__link i { color: inherit !important; }
html body:not(#_z) .blog-details__share .social-list__link:hover {
  border-color: var(--wc-teal) !important;
  background: var(--wc-teal) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html body:not(#_z) .blog-details__share .social-share__title { font-size: 16px !important; font-weight: 700 !important; }
/* "More posts" / "More news": the site's section pattern */
html body:not(#_z) .wr-more { padding: var(--wc-section-y) 0 !important; margin: 0 !important; }
html body:not(#_z) .wr-more .wr-more__head { margin-bottom: 32px; }
html body:not(#_z) .wr-more .wr-more__head h2 { font-size: 40px !important; line-height: 1.18; margin: 14px 0 0; }
@media (max-width: 767px) { html body:not(#_z) .wr-more .wr-more__head h2 { font-size: 28px !important; } }
/* Tables inside articles: rounded like every other box */
html body:not(#_z) .blog-details__content .content-item table {
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #dcebe3 !important;
  border-radius: 14px !important;
}
html body:not(#_z) .blog-details__content .content-item table th,
html body:not(#_z) .blog-details__content .content-item table td { border-width: 0 0 1px 0 !important; }
html body:not(#_z) .blog-details__content .content-item table tr:last-child td { border-bottom: 0 !important; }

/* ---------- Password reset: the sign-in card style ---------- */
html body:not(#_z) .auth-reset { padding: 72px 0 var(--wc-section-y); }
html body:not(#_z) .auth-reset .verification-area { max-width: 460px; margin: 0 auto; }
html body:not(#_z) .auth-reset .custom--card { padding: 0 !important; }
html body:not(#_z) .auth-reset .custom--card { border: 1px solid #e3ebe8 !important; border-radius: 20px !important; box-shadow: 0 24px 60px -30px rgba(17, 58, 40, .25) !important; background: #fff !important; }
html body:not(#_z) .auth-reset .card-header { padding: 32px 32px 0 !important; border: 0 !important; background: none !important; }
html body:not(#_z) .auth-reset .card-title { margin: 0; color: #172c1c !important; font-size: 28px !important; font-weight: 800 !important; letter-spacing: -.02em; }
html body:not(#_z) .auth-reset .card-body { padding: 12px 32px 32px !important; }
html body:not(#_z) .auth-reset .card-body p { color: #55635f !important; font-size: 15px; line-height: 1.55; }
html body:not(#_z) .auth-reset__submit { min-height: 54px !important; border: 0 !important; border-radius: 12px !important; background: var(--wc-teal) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 15px !important; font-weight: 700 !important; box-shadow: none !important; }
html body:not(#_z) .auth-reset__submit:hover { background: #005a50 !important; }
html body:not(#_z) .auth-reset__back { margin: 16px 0 0; text-align: center; font-size: 14px; }
html body:not(#_z) .auth-reset__back a { color: var(--wc-teal) !important; font-weight: 600; }

html body:not(#_z) .auth-reset .auth-reset__back a { color: var(--wc-teal) !important; -webkit-text-fill-color: var(--wc-teal) !important; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 575px) {
  html body:not(#_z) .auth-reset { padding-top: 32px; }
  /* The old wrapper fixed the card at 300px and the card added its own padding on top of the body's */
  html body:not(#_z) .auth-reset .verification-code-wrapper { width: auto !important; max-width: none !important; margin: 0 !important; }
  html body:not(#_z) .auth-reset .custom--card { padding: 0 !important; }
  html body:not(#_z) .auth-reset .card-header { padding: 24px 22px 0 !important; }
  html body:not(#_z) .auth-reset .card-body { padding: 10px 22px 24px !important; }
  html body:not(#_z) .auth-reset .card-title { font-size: 24px !important; }
}