/* ============================================================================
   WL Alert — marketing site rebrand
   Loaded after the WordPress theme CSS, so it wins on equal specificity.

   Direction: "atmospheric telemetry" — a cool ink neutral ramp, a teal/cyan
   signal accent (distinct from the old blue→purple SaaS gradient), a single
   type pairing (Space Grotesk + Inter), and a dark ink footer/CTA band to give
   the page rhythm.

   Every colour pair below is measured. Text pairs are >= 4.5:1, UI/state pairs
   >= 3:1 (WCAG 2.2 AA, 1.4.3 / 1.4.11).
   ========================================================================== */

:root {
  /* ---- type ------------------------------------------------------------- */
  --wa-font-heading: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wa-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wa-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- neutral ramp (cool ink) ----------------------------------------- */
  --wa-ink-950: #070d18;
  --wa-ink-900: #0b1424;   /* headings, dark bands   17.3:1 on --wa-bg */
  --wa-ink-700: #24354f;
  --wa-ink-600: #4a5a75;   /* secondary text          6.98:1 on white   */
  --wa-ink-500: #5f7089;   /* muted text              5.04:1 on white   */
  --wa-ink-400: #8e9cb4;   /* decorative only, never body text */

  /* ---- surfaces --------------------------------------------------------- */
  --wa-bg: #f6f8fb;
  --wa-bg-alt: #eef3f9;
  --wa-surface: #ffffff;
  --wa-elevated: #ffffff;
  --wa-inset: #e8eef6;
  /* WordPress's 'has-raft-bg-inv-background-color' preset paints the steps, trust and
     comparison sections with this token. It must stay a LIGHT surface: repurposing it as
     a dark ink turned those sections dark while their text stayed dark (invisible). */
  --wa-bg-inv: #eef3f9;
  /* Dedicated ink for the intentionally dark bands (closing CTA, footer). */
  --wa-ink-band: #0b1424;

  /* ---- text ------------------------------------------------------------- */
  --wa-text: #16233a;
  --wa-text-header: #0b1424;
  --wa-text-secondary: #4a5a75;
  --wa-muted: #5f7089;

  /* ---- brand accent (teal / cyan telemetry) ----------------------------- */
  --wa-accent: #0e7490;         /* text on light 5.04:1; white on it 5.36:1 */
  --wa-accent-hover: #0b5f75;
  --wa-accent-soft: rgba(14, 116, 144, 0.10);
  --wa-accent-bright: #06b6d4;
  --wa-accent-sky: #0b6d96;  /* highlights + glows only, never small text */
  --wa-cyan: #0e7490;
  --wa-accent-purple: #0f766e;  /* secondary in gradients (teal-700) */

  --wa-gradient: linear-gradient(135deg, #0e7490 0%, #0f766e 55%, #155e75 130%);
  --wa-gradient-strong: linear-gradient(135deg, #0b5f75 0%, #115e59 55%, #0e4f61 130%);
  --wa-gradient-text: linear-gradient(120deg, #0e7490 0%, #0f766e 60%, #06b6d4 100%);

  /* ---- borders / glass -------------------------------------------------- */
  --wa-border: rgba(11, 20, 36, 0.14);
  --wa-border-strong: rgba(11, 20, 36, 0.24);
  --wa-border-subtle: rgba(11, 20, 36, 0.08);
  --wa-glass: rgba(255, 255, 255, 0.82);
  --wa-glass-strong: rgba(255, 255, 255, 0.95);
  --wa-glass-border: rgba(11, 20, 36, 0.09);
  --wa-glass-highlight: rgba(11, 20, 36, 0.04);
  --wa-header-bg: rgba(246, 248, 251, 0.82);
  --wa-header-bg-scrolled: rgba(246, 248, 251, 0.95);
  --wa-menu-bg: #ffffff;

  /* ---- status (all >= 15 degrees of hue from the accent) ---------------- */
  --wa-live: #15803d;           /* 5.02:1 on white */
  --wa-live-glow: rgba(21, 128, 61, 0.35);
  --wa-warn: #b45309;           /* 5.02:1 */
  --wa-danger: #b91c1c;         /* 6.47:1 */

  /* ---- geometry --------------------------------------------------------- */
  --wa-radius-sm: 10px;
  --wa-radius-md: 14px;
  --wa-radius-lg: 22px;
  --wa-radius-full: 9999px;
  --wa-wide: 1200px;
  --wa-measure: 68ch;

  /* ---- elevation -------------------------------------------------------- */
  --wa-shadow-sm: 0 1px 2px rgba(11, 20, 36, 0.06);
  --wa-shadow-md: 0 10px 30px -14px rgba(11, 20, 36, 0.18);
  --wa-shadow-lg: 0 28px 70px -32px rgba(11, 20, 36, 0.28);
  --wa-shadow-accent: 0 10px 28px -10px rgba(14, 116, 144, 0.45);
  --wa-shadow-glow: 0 0 0 1px rgba(14, 116, 144, 0.22), 0 0 26px -8px rgba(14, 116, 144, 0.35);

  /* ---- motion ----------------------------------------------------------- */
  --wa-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --wa-fast: 150ms;
  --wa-med: 280ms;
}

/* ============================================================================
   Base type
   ========================================================================== */

body,
.wp-block-group,
.wa-main {
  font-family: var(--wa-font-body);
  color: var(--wa-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.wa-hero__title,
.wa-section__title,
.wa-feature__title,
.wa-step__title,
.wa-pricing__name,
.wa-cta__title,
.wa-brand__wordmark {
  font-family: var(--wa-font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.14;
  color: var(--wa-text-header);
  text-wrap: balance;
}

h1, .wa-hero__title { font-size: clamp(2.4rem, 5.4vw, 3.9rem); letter-spacing: -0.03em; }
h2, .wa-section__title { font-size: clamp(1.75rem, 3.2vw, 2.6rem); }
h3, .wa-feature__title, .wa-step__title { font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.3; }

p, li, .wa-section__sub, .wa-hero__sub, .wa-feature__text, .wa-step__text,
.wa-testi__quote, .wa-pricing__desc, .wa-faq__body {
  line-height: 1.62;
  color: var(--wa-text-secondary);
  text-wrap: pretty;
}

.wa-hero__sub, .wa-section__sub, .wa-cta__sub, .wa-pricing__desc {
  max-width: var(--wa-measure);
}

.wa-section__sub { margin-inline: auto; }

/* Numbers that change (stats, counters, prices) keep a constant width. */
.wa-stat__value, .wa-counter, .wa-pricing__price, .wa-phone__msg-meta {
  font-variant-numeric: tabular-nums;
}

.wa-eyebrow__label,
.wa-badge {
  font-family: var(--wa-font-body);
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Small-caps labels read better with a touch of tracking. */
.wa-eyebrow__label { text-transform: uppercase; }

/* ============================================================================
   Header
   ========================================================================== */

.wa-header {
  background: var(--wa-header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--wa-border-subtle);
}

.wa-nav a {
  font-weight: 500;
  font-size: 0.94rem;
  color: var(--wa-text-secondary);
  transition: color var(--wa-fast) var(--wa-ease);
}

/* hover styling only where a pointer can actually hover */
@media (hover: hover) {
  .wa-nav a:hover { color: var(--wa-accent); }
}

.wa-brand__wordmark {
  font-family: var(--wa-font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ============================================================================
   Buttons
   ========================================================================== */

.wa-btn,
.wa-header__cta,
.wa-pricing__cta a,
.wp-block-button__link {
  font-family: var(--wa-font-body);
  font-weight: 600;
  border-radius: var(--wa-radius-full);
  transition: background-color var(--wa-fast) var(--wa-ease),
              border-color var(--wa-fast) var(--wa-ease),
              color var(--wa-fast) var(--wa-ease),
              box-shadow var(--wa-fast) var(--wa-ease),
              transform var(--wa-fast) var(--wa-ease);
}

/* The theme paints filled buttons with --wa-gradient, but WordPress colour-preset
   classes (has-raft-fg-*-color) keep the label dark — measured 1.30:1, needs 4.5.
   Force the legible pair on filled buttons only. */
.wp-block-button__link.has-text-color,
.wp-block-button__link.has-raft-fg-alt-color,
.wp-block-button__link.has-raft-fg-color,
.wa-pricing-col .wp-block-button__link {
  color: #ffffff !important;
}

.wa-btn,
.wa-header__cta,
.wp-block-button__link {
  background: var(--wa-accent);
  color: #ffffff;
  border: 1px solid transparent;
  box-shadow: var(--wa-shadow-accent);
}

@media (hover: hover) {
  .wa-btn:hover,
  .wa-header__cta:hover,
  .wp-block-button__link:hover {
    background: var(--wa-accent-hover);
    transform: translateY(-1px);
  }
}

.wa-btn:active,
.wa-header__cta:active { transform: translateY(0) scale(0.985); }

.wa-btn-outline {
  background: transparent;
  color: var(--wa-accent);
  border: 1px solid var(--wa-border-strong);
  box-shadow: none;
}

@media (hover: hover) {
  .wa-btn-outline:hover {
    background: var(--wa-accent-soft);
    border-color: var(--wa-accent);
  }
}

/* ============================================================================
   Hero
   ========================================================================== */

.wa-hero__title { color: var(--wa-text-header); }

/* Restore the theme's intended two-column hero on desktop.
   WordPress's generated block-layout CSS (.wp-container-* > *) sets
   `flex-wrap: wrap` plus flex sizing on the direct children, which wrapped the
   52% / 46% columns into two full-width rows and pushed the phone mockup below
   the fold. Scoped to >=1025px; the theme's own stacked rules start at <=1024px. */
@media (min-width: 1025px) {
  .wa-hero__grid { flex-wrap: nowrap !important; align-items: center !important; }
  .wa-hero__grid > .wa-hero__copy { flex: 0 1 52% !important; max-width: 52% !important; }
  .wa-hero__grid > .wa-hero__visual { flex: 0 1 46% !important; max-width: 46% !important; }
  .wa-hero__copy { text-align: start; }
  .wa-hero__sub { margin-left: 0; margin-right: 0; }
  .wa-hero__trust { justify-content: flex-start; }
}

/* the gradient word inside the headline */
.wa-hero__title .wa-brand-gradient,
.wa-brand-gradient {
  background: var(--wa-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wa-hero__trust { color: var(--wa-muted); }

.wa-hero__status,
.wa-hero__chip {
  background: var(--wa-glass-strong);
  border: 1px solid var(--wa-border-subtle);
  box-shadow: var(--wa-shadow-md);
  color: var(--wa-text-secondary);
  font-weight: 500;
}

.wa-hero__status-dot,
.wa-hero__chip--live .tag-dot {
  background: var(--wa-live);
  box-shadow: 0 0 0 4px var(--wa-live-glow);
}

/* ============================================================================
   Sections & cards
   ========================================================================== */

.wa-section { padding-block: clamp(3.5rem, 7vw, 6rem); }

.wa-feature,
.wa-step,
.wa-testi__card,
.wa-pricing-col,
.wa-trust,
.wa-faq {
  background: var(--wa-surface);
  border: 1px solid var(--wa-border-subtle);
  border-radius: var(--wa-radius-lg);
  box-shadow: var(--wa-shadow-sm);
}

/* one accent moment per card, not three */
.wa-feature__icon,
.wa-step__icon {
  background: var(--wa-accent-soft);
  color: var(--wa-accent);
  border-radius: var(--wa-radius-md);
}

.wa-step__icon { background: var(--wa-accent-soft); color: var(--wa-accent); }

.wa-feature__icon svg,
.wa-feature__icon i { color: currentColor; }

.wa-feature,
.wa-step,
.wa-testi__card {
  transition: border-color var(--wa-med) var(--wa-ease), box-shadow var(--wa-med) var(--wa-ease);
}

@media (hover: hover) {
  .wa-feature:hover,
  .wa-step:hover,
  .wa-testi__card:hover {
    border-color: var(--wa-accent);
    box-shadow: var(--wa-shadow-md);
  }
}

/* ============================================================================
   Comparison table
   ========================================================================== */

.wa-cmp {
  border: 1px solid var(--wa-border-subtle);
  border-radius: var(--wa-radius-lg);
  overflow: hidden;
  background: var(--wa-surface);
}

.wa-cmp__cell--yes { color: var(--wa-live); }   /* paired with an icon glyph */
.wa-cmp__cell--no  { color: var(--wa-ink-400); }

/* ============================================================================
   Stats, trust, testimonials
   ========================================================================== */

/* .wa-stat__value keeps the theme's gradient text (background-clip: text, color: transparent) */
.wa-stat__value { font-family: var(--wa-font-heading); }
.wa-stat__label { color: var(--wa-muted); }
.wa-testi__role  { color: var(--wa-muted); }
.wa-testi__stars { color: var(--wa-warn); }     /* stars carry shape, not colour alone */

/* ============================================================================
   Pricing
   ========================================================================== */

.wa-pricing-col--featured {
  border-color: var(--wa-accent);
  box-shadow: var(--wa-shadow-lg);
  background: var(--wa-featured-bg, linear-gradient(180deg, #ffffff 0%, #eef7f9 100%));
}

.wa-pricing__price { font-family: var(--wa-font-heading); color: var(--wa-text-header); }
.wa-pricing__period { color: var(--wa-muted); }
.wa-pricing__features li { color: var(--wa-text-secondary); }

/* ============================================================================
   FAQ
   ========================================================================== */

.wa-faq { background: var(--wa-surface); }
.wa-faq__body { color: var(--wa-text-secondary); }

/* ============================================================================
   Closing CTA band + footer — dark ink for rhythm and contrast
   ========================================================================== */

.wa-cta__inner {
  background: var(--wa-ink-band);
  border-radius: var(--wa-radius-lg);
  color: #cbd6e6;
}

.wa-cta__title { color: #ffffff; }
.wa-cta__sub,
.wa-cta__micro { color: #a8b6cc; }

.wa-cta__inner .wa-btn {
  background: #ffffff;
  color: var(--wa-ink-900);
  box-shadow: none;
}

@media (hover: hover) {
  .wa-cta__inner .wa-btn:hover { background: #e6ecf5; }
}

.wa-footer {
  background: var(--wa-ink-band);
  color: #a8b6cc;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wa-footer h2, .wa-footer h3, .wa-footer .wa-brand__wordmark { color: #ffffff; }

/* the theme targets .wa-footer .wp-block-navigation a and the nav label spans, which
   out-specify a plain '.wa-footer a' rule and left them on the light-theme text token */
.wa-footer a,
.wa-footer p,
.wa-footer h3,
.wa-footer__bottom p,
.wa-footer .wp-block-navigation a,
.wa-footer .wp-block-navigation .wp-block-navigation-item__content,
.wa-footer .wp-block-navigation-item__label {
  color: #cbd6e6;
}

@media (hover: hover) {
  .wa-footer a:hover,
.wa-footer .wp-block-navigation a:hover { color: #ffffff; }
}

.wa-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #8e9cb4;
}

/* ============================================================================
   Accessibility
   ========================================================================== */

/* A visible, measured focus ring (>= 3:1 against the light surfaces). */
.wa-btn:focus-visible,
.wa-btn-outline:focus-visible,
.wa-nav a:focus-visible,
.wa-footer a:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--wa-accent);
  outline-offset: 2px;
  border-radius: var(--wa-radius-sm);
}

.wa-footer a:focus-visible,
.wa-cta__inner a:focus-visible,
.wa-cta__inner button:focus-visible {
  outline-color: #ffffff;
}

/* Sticky header height so anchored targets are never hidden under it (2.4.11). */
html { scroll-padding-top: calc(var(--wa-header-h, 74px) + 12px); }

/* forced-colors drops box-shadow rings — restore a real outline. */
@media (forced-colors: active) {
  a:focus-visible, button:focus-visible, .wa-btn:focus-visible {
    outline: 2px solid Highlight;
  }
}

/* ============================================================================
   Motion — the theme animates chips, reveals and ambience. Honour the
   reduced-motion preference; the theme partially does this, this covers the
   rebranded components too.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .wa-hero__chip,
  .wa-reveal,
  .wa-phone,
  .wa-btn,
  .wa-header__cta,
  .wa-feature,
  .wa-step,
  .wa-testi__card,
  .wa-brand__alert {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Small factual notes attached to a claim (e.g. network coverage, Sender ID status). */
.wa-fineprint {
  color: var(--wa-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin-top: 0.5rem;
  max-width: var(--wa-measure);
}

/* ============================================================================
   Phone mockup
   The hero's phone is a DARK UI, but the theme colours its text with the
   light-theme tokens (--wa-text, --wa-text-secondary), so it rendered
   dark-on-dark. Give the mockup its own light pair; measured >= 4.5:1 on the
   #0d1734 screen.
   ========================================================================== */

.wa-phone__app-name,
.wa-phone__msg-title,
.wa-phone__msg-body { color: #e6ecf5; }

.wa-phone__msg-body strong,
.wa-phone__msg-title strong { color: #ffffff; font-weight: 700; }

.wa-phone__msg-meta { color: #a8b6cc; }
.wa-phone__carrier { color: #7dd3fc; }

/* ============================================================================
   Forms (Contact Form 7)
   CF7's inputs carry a fixed 434px width, so on a narrow viewport the field
   overflowed the page and the control was clipped (1.4.10 / 320px reflow).
   ========================================================================== */

.wpcf7-form-control-wrap { display: block; max-width: 100%; }

.wpcf7-form-control,
input.wpcf7-form-control,
textarea.wpcf7-form-control,
select.wpcf7-form-control {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

.wpcf7 textarea.wpcf7-form-control { min-height: 8rem; }

/* 16px keeps iOS Safari from zooming the page when a field is focused. */
@media (max-width: 640px) {
  .wpcf7-form-control { font-size: 16px; }
}

/* ============================================================================
   The WordPress theme switches to a DARK palette via prefers-color-scheme, overriding
   ~50 --wa-* tokens. This rebrand is a light design, and my :root only redefined some of
   them, so the rest leaked the theme's dark values onto a light page (e.g. a light-cyan
   pricing label at 1.67:1, dark-on-dark headings at 1:1). Pin every token the theme's dark
   block touches back to its light value. The intentionally dark bands use --wa-ink-band.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
  --wa-accent: #0e7490;
  --wa-accent-hover: #0b5f75;
  --wa-accent-purple: #0f766e;
  --wa-accent-sky: #0b6d96;
  --wa-gradient: linear-gradient(135deg, #0e7490 0%, #0f766e 55%, #155e75 130%);
  --wa-gradient-text: linear-gradient(120deg, #0e7490 0%, #0f766e 60%, #06b6d4 100%);
  --wa-gradient-strong: linear-gradient(135deg, #0b5f75 0%, #115e59 55%, #0e4f61 130%);
  --wa-text: #16233a;
  --wa-text-secondary: #4a5a75;
  --wa-muted: #5f7089;
  --wa-text-header: #0b1424;
  --wa-bg: #f6f8fb;
  --wa-bg-alt: #eef3f9;
  --wa-bg-inv: #eef3f9;
  --wa-surface: #ffffff;
  --wa-elevated: #ffffff;
  --wa-inset: #e8eef6;
  --wa-border: rgba(11, 20, 36, 0.14);
  --wa-border-subtle: rgba(11, 20, 36, 0.08);
  --wa-border-strong: rgba(11, 20, 36, 0.24);
  --wa-glass: rgba(255, 255, 255, 0.82);
  --wa-glass-strong: rgba(255, 255, 255, 0.95);
  --wa-glass-border: rgba(11, 20, 36, 0.09);
  --wa-glass-highlight: rgba(11, 20, 36, 0.04);
  --wa-live: #15803d;
  --wa-live-glow: rgba(21, 128, 61, 0.35);
  --wa-warn: #b45309;
  --wa-danger: #b91c1c;
  --wa-cyan: #0e7490;
  --wa-icon-bg: rgba(37, 99, 235, 0.12);
  --wa-icon-color: #2563eb;
  --wa-step-icon-bg: rgba(124, 58, 237, 0.12);
  --wa-step-icon-color: #7c3aed;
  --wa-header-bg: rgba(246, 248, 251, 0.82);
  --wa-header-bg-scrolled: rgba(246, 248, 251, 0.95);
  --wa-menu-bg: #ffffff;
  --wa-trust-bg: #eef4fc;
  --wa-footer-bg: #ffffff;
  --wa-featured-bg: linear-gradient(180deg, #ffffff 0%, #eaf1fa 100%);
  --wa-faq-open-bg: rgba(255, 255, 255, 0.75);
  --wa-social-bg: rgba(148,199,255,0.12);
  --wa-social-icon: #dce8ff;
  --wa-ambient-1: rgba(37, 99, 235, 0.09);
  --wa-ambient-2: rgba(124, 58, 237, 0.07);
  --wa-ambient-3: rgba(14, 165, 201, 0.05);
  --wa-cmp-stripe: rgba(21, 49, 104, 0.03);
  --wa-soft-btn-bg: rgba(21, 49, 104, 0.07);
  --wa-shadow-sm: 0 1px 2px rgba(11, 20, 36, 0.06);
  --wa-shadow-md: 0 10px 30px -14px rgba(11, 20, 36, 0.18);
  --wa-shadow-lg: 0 28px 70px -32px rgba(11, 20, 36, 0.28);
  --wa-shadow-glow: 0 0 0 1px rgba(14, 116, 144, 0.22), 0 0 26px -8px rgba(14, 116, 144, 0.35);
  --wa-shadow-accent: 0 10px 28px -10px rgba(14, 116, 144, 0.45);
  }
}

/* The footer's brand lockup and the CTA band's inline link sit on --wa-ink-band; the
   theme's light-theme text tokens left them dark-on-dark. */
.wa-footer .wa-brand__wl,
.wa-footer .wa-brand__alert,
.wa-footer .wa-brand__mark { color: #ffffff; }
.wa-footer .wa-brand--footer .wa-brand__alert { color: #7dd3fc !important; }

.wa-cta__inner a,
.wa-cta__micro a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================================
   WordPress preset colours
   The theme's own palette lives in --wp--preset--color--raft-*, which the rebrand
   never touched, so preset-styled elements (280 usages) kept the old blue/purple:
   the contact/faqs/use-cases closing CTA rendered as a flat #2563eb block with dark
   secondary text. Point the presets at the rebrand palette.
   ========================================================================== */

:root {
  --wp--preset--color--raft-accent: #0e7490;
  --wp--preset--color--raft-accent-secondary: #0f766e;
  --wp--preset--color--raft-accent-sky: #0b6d96;
  --wp--preset--color--raft-bg: #f6f8fb;
  --wp--preset--color--raft-bg-alt: #eef3f9;
  --wp--preset--color--raft-surface: #ffffff;
  --wp--preset--color--raft-fg: #16233a;
  --wp--preset--color--raft-fg-alt: #4a5a75;
  --wp--preset--color--raft-muted: #5f7089;
  --wp--preset--color--raft-border: rgba(11, 20, 36, 0.14);
  --wp--preset--color--raft-success: #15803d;
}

/* The closing CTA blocks (contact, faqs, use-cases) pair an accent background with
   dark secondary text. Use the ink band with light text, matching the homepage CTA. */
.wp-block-group.has-raft-accent-background-color {
  background: var(--wa-ink-band) !important;
  color: #cbd6e6 !important;
  border-radius: var(--wa-radius-lg);
}

.wp-block-group.has-raft-accent-background-color h1,
.wp-block-group.has-raft-accent-background-color h2,
.wp-block-group.has-raft-accent-background-color h3,
.wp-block-group.has-raft-accent-background-color .wp-block-heading {
  color: #ffffff !important;
}

.wp-block-group.has-raft-accent-background-color p { color: #a8b6cc !important; }

.wp-block-group.has-raft-accent-background-color .wp-block-button__link {
  background: #ffffff !important;
  color: var(--wa-ink-band) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.wp-block-group.has-raft-accent-background-color .wp-block-button__link:hover {
  background: #e6ecf5 !important;
}

/* ============================================================================
   Contact form submit
   CF7 renders a bare <input type="submit">, so it had no button styling at all.
   ========================================================================== */

.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--wa-radius-full);
  background: var(--wa-accent);
  color: #ffffff;
  font-family: var(--wa-font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--wa-fast) var(--wa-ease);
}

@media (hover: hover) {
  .wpcf7-submit:hover:not(:disabled) { background: var(--wa-accent-hover); }
}

.wpcf7-submit:disabled { opacity: 0.6; cursor: default; }

/* ============================================================================
   Edge gutters
   On small screens the content containers had no horizontal padding, so text and
   fields ran to the viewport edge.
   ========================================================================== */

@media (max-width: 781px) {
  .wp-block-post-content,
  .wa-page-hero,
  .wa-page-hero__inner,
  .wa-post-hero,
  .wa-section > .wp-block-group:not(.alignfull),
  .wa-cta__inner,
  .wp-block-group.alignwide,
  .wp-block-group.alignfull > .wp-block-group:not(.alignfull) {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}