:root {
      --bg:      oklch(99% 0.002 260);
      --surface: oklch(94% 0.005 260);
      --fg:      oklch(22% 0.04 260);
      --muted:   oklch(35% 0.035 260);
      --border:  oklch(89% 0.008 260);
      --accent:  oklch(72% 0.14 230);
      /* Pinned to hex, not oklch, so these stay byte-identical to the shared
         values in the ipx theme (support.local) and the docs child theme.
         Round-tripping them through oklch is what let the three sites drift
         apart in the first place.
         The previous --accent-text, oklch(52% 0.16 230) / #0a86c4, measured
         3.92:1 on the #fcfcfd canvas and failed the 4.5:1 AA floor the
         AA-Cyan Rule claims for it. #0e7ba8 clears it at 4.64:1. */
      --accent-text: #0e7ba8;
      --accent-hover: #12a3da;
      --navy-dark: oklch(15% 0.045 260);

      --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
      --font-logo: 'Plus Jakarta Sans', system-ui, sans-serif;
      --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }
    body {
      font: 16px/1.6 var(--font-body);
      color: var(--fg);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    a { color: inherit; text-decoration: none; }
    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
      /* --accent-text (darker cyan) clears the 3:1 focus-indicator contrast
         floor on the light canvas; the bright --accent does not. */
      outline: 2px solid var(--accent-text);
      outline-offset: 2px;
    }
    /* On the navy bands, the darker cyan loses contrast — use the bright
       accent, which reads ~7:1 against navy. */
    nav :focus-visible,
    .hero :focus-visible,
    .cloud :focus-visible,
    .section-dark :focus-visible,
    footer :focus-visible {
      outline-color: var(--accent);
    }

    /* Skip link: visually hidden until keyboard focus (WCAG 2.4.1). */
    .skip-link {
      position: absolute;
      left: 8px;
      top: 8px;
      z-index: 200;
      padding: 10px 16px;
      background: #fff;
      color: var(--fg);
      border-radius: 4px;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 14px;
      /* Hidden above the viewport; transform (not top) keeps the reveal
         off the layout/paint path. */
      transform: translateY(-150%);
      transition: transform 0.2s cubic-bezier(0.2,0,0,1);
    }
    .skip-link:focus { transform: translateY(0); }
    img { max-width: 100%; height: auto; display: block; }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .section { padding: 96px 0; }
    .section-dark {
      background: var(--navy-dark);
      color: #fff;
    }
    .section-light { background: var(--bg); }
    .section-surface { background: var(--surface); }

    h1, h2, h3, h4 {
      font-family: var(--font-display);
      line-height: 1.15;
      font-weight: 700;
    }
    h1 { font-size: clamp(36px, 5vw, 56px); letter-spacing: -0.02em; }
    h2 { font-size: clamp(28px, 3.5vw, 40px); letter-spacing: -0.015em; }
    h3 { font-size: clamp(22px, 2.5vw, 28px); letter-spacing: -0.01em; }
    .subhead {
      font-family: var(--font-display);
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 13px;
      margin-bottom: 12px;
      color: var(--accent-text);
    }
    .subhead-light { color: var(--accent-text); }
    /* Enlarged section labels to match the cloud band */
    #mtd .subhead, #support .subhead { font-size: 16px; letter-spacing: 0.1em; }
    p { max-width: 65ch; color: var(--muted); }
    .section-dark p { color: rgba(255,255,255,0.7); }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 14px 32px;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.2s;
      border: 0;
    }
    .btn-primary {
      background: var(--accent);
      /* Navy label on cyan clears AA (~7.8:1); white-on-cyan was ~2.4:1. */
      color: var(--navy-dark);
    }
    .btn-primary:hover { background: var(--accent-hover); }
    .btn-primary:active { transform: scale(0.97); }
    .btn-outline {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255,255,255,0.3);
    }
    .btn-outline:hover { border-color: #fff; }
    .btn-outline:active { transform: scale(0.97); }

    .grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }
    @media (max-width: 768px) {
      .grid-2 { grid-template-columns: 1fr; gap: 40px; }
      .section { padding: 64px 0; }
    }

    /* ===== NAV ===== */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      padding: 16px 0;
      transition: background 0.3s, box-shadow 0.3s;
      background: var(--navy-dark);
    }
    nav.scrolled {
      background: rgba(2,19,75,0.97);
      box-shadow: 0 1px 0 rgba(255,255,255,0.06);
    }
    /* Offset the fixed nav below the WordPress admin bar (logged-in users),
       which is itself fixed at top:0 with a higher z-index and would
       otherwise overlap and clip the top of the nav. */
    .admin-bar nav { top: 32px; }
    @media screen and (max-width: 782px) {
      .admin-bar nav { top: 46px; }
    }
    nav .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-logo {
      font-family: var(--font-logo);
      font-weight: 700;
      font-size: 30px;
      letter-spacing: -0.01em;
      text-transform: lowercase;
      color: #fff;
    }
    .nav-logo span { color: var(--accent); }
    /* Wordmark size variants — reuse .nav-logo with a modifier */
    .nav-logo--sm { font-size: 18px; }
    .nav-logo--lg { font-size: 28px; }
    .nav-logo--xl { font-size: clamp(32px, 4vw, 44px); }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 32px;
      list-style: none;
    }
    .nav-links a {
      font-size: 14px;
      font-weight: 500;
      color: rgba(255,255,255,0.7);
      transition: color 0.2s;
      position: relative;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -2px; left: 0;
      width: 0; height: 1.5px;
      background: var(--accent);
      transition: width 0.25s cubic-bezier(0.2,0,0,1);
    }
    .nav-links a:hover { color: #fff; }
    .nav-links a:hover::after { width: 100%; }
    .nav-cta {
      padding: 8px 20px;
      border-radius: 4px;
      background: transparent;
      color: #fff !important;
      border: 1.5px solid rgba(255,255,255,0.35);
      font-weight: 600;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .nav-cta:hover { border-color: #fff; }
    .nav-toggle {
      display: none;
      background: none;
      border: 0;
      color: #fff;
      font-size: 28px;
      cursor: pointer;
      padding: 4px;
      /* ≥44x44 comfortable touch target (WCAG 2.5.5). */
      min-width: 44px;
      min-height: 44px;
      line-height: 1;
    }
    @media (max-width: 768px) {
      .nav-links {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        padding: 24px;
        background: var(--navy-dark);
        border-top: 1px solid rgba(255,255,255,0.06);
        gap: 16px;
        align-items: stretch;
      }
      .nav-links.open { display: flex; }
      /* Stacked mobile links get a ≥44px-tall tap target (WCAG 2.5.5). */
      .nav-links a:not(.nav-cta) { padding: 14px 0; }
      .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
      .nav-cta { text-align: center; padding: 14px 20px; }
    }

    /* ===== HERO ===== */
    .hero {
      min-height: 100dvh;
      display: flex;
      align-items: center;
      background: var(--navy-dark);
      color: #fff;
      padding-top: 80px;
      position: relative;
      overflow: hidden;
    }
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 75% 30%, rgba(33,184,244,0.08) 0%, transparent 60%);
      pointer-events: none;
    }
    .hero .container { position: relative; z-index: 1; }
    .hero h1 { margin-bottom: 20px; }
    .hero h1 em {
      font-style: normal;
      font-weight: 300;
    }
    .hero p {
      font-size: 18px;
      line-height: 1.7;
      margin-bottom: 24px;
      max-width: 54ch;
      color: rgba(255,255,255,0.65);
    }
    .hero p:last-of-type { margin-bottom: 36px; }
    .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 16px;
      border-radius: 999px;
      background: rgba(33,184,244,0.12);
      border: 1px solid rgba(33,184,244,0.2);
      color: var(--accent);
      font-size: 13px;
      font-weight: 500;
      margin-bottom: 28px;
    }

    /* ===== SHARED: tinted heading panel (light sections) ===== */
    .mtd-heading,
    .support-heading {
      position: relative;
      overflow: hidden;
      border-radius: 14px;
      padding: 48px 40px;
      border: 1px solid rgba(33,184,244,0.28);
      box-shadow: 0 20px 50px -30px rgba(3,36,92,0.35);
      background:
        /* soft light sheen, upper-left */
        radial-gradient(ellipse at 25% 15%, rgba(255,255,255,0.5) 0, transparent 45%),
        /* translucent light-blue tint over the light section */
        linear-gradient(135deg, rgba(33,184,244,0.28) 0%, rgba(33,184,244,0.10) 55%, rgba(33,184,244,0.05) 100%);
    }

    /* ===== SECTION: MTD ===== */
    .mtd-heading h2,
    .support-heading h2 { margin-bottom: 8px; }
    .mtd-heading .subhead,
    .support-heading .subhead { margin-bottom: 4px; }
    .mtd-body p + p { margin-top: 16px; }
    .mtd-link {
      color: var(--fg);
      font-weight: 600;
      text-decoration: underline;
      text-decoration-color: var(--accent-text);
      text-underline-offset: 3px;
      transition: text-decoration-color 0.2s;
    }
    .mtd-link:hover { text-decoration-color: var(--fg); }

    /* ===== SECTION: CLOUD ===== */
    .cloud {
      /* Same blue as the scrolled header (nav.scrolled), not the
         near-black --navy-dark used elsewhere. */
      background: #02134b;
      color: #fff;
      position: relative;
    }
    .cloud-heading {
      text-align: right;
      position: relative;
      overflow: hidden;
      border-radius: 14px;
      padding: 48px 40px;
      border: 1px solid rgba(33,184,244,0.28);
      box-shadow: 0 20px 50px -28px rgba(0,0,0,0.6);
      background:
        /* soft light highlight, upper-left */
        radial-gradient(ellipse at 25% 15%, rgba(255,255,255,0.12) 0, transparent 45%),
        /* translucent light-blue tint — navy band shows through */
        linear-gradient(135deg, rgba(33,184,244,0.30) 0%, rgba(33,184,244,0.10) 55%, rgba(33,184,244,0.04) 100%);
    }
    .cloud-heading .subhead { color: var(--accent); font-size: 16px; letter-spacing: 0.1em; }
    .cloud-heading h2 { color: #fff; font-weight: 300; font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.015em; }
    .cloud-heading h2 strong { font-weight: 700; }
    .cloud-body { font-size: 17px; line-height: 1.8; color: rgba(255,255,255,0.7); }
    .cloud .mtd-link { color: #fff; text-decoration-color: var(--accent); }
    .cloud .mtd-link:hover { text-decoration-color: #fff; }
    .cloud-body + .cloud-body { margin-top: 16px; }

    /* ===== SECTION: SUPPORT ===== */
    .support-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: start;
    }
    .support-heading .support-tagline {
      margin-top: 16px;
      font-size: 14px;
      line-height: 1.5;
      color: var(--muted);
    }
    .support-body p + p { margin-top: 16px; }
    .support-list { margin: 20px 0 12px; }
    .support-list li {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 15px;
      color: var(--fg);
      list-style: none;
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
    }
    .support-list li:first-child { border-top: 1px solid var(--border); }
    .support-list li::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
    }
    .support-body small { color: var(--muted); font-size: 13px; }
    @media (max-width: 768px) {
      .support-grid { grid-template-columns: 1fr; gap: 40px; }
    }

    /* ===== CONTACT ===== */
    .contact-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: start;
    }
    @media (max-width: 768px) { .contact-wrap { grid-template-columns: 1fr; gap: 40px; } }
    .form-group { margin-bottom: 20px; }
    .form-group label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 6px;
      color: var(--muted);
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      padding: 12px 16px;
      border: 1.5px solid var(--border);
      border-radius: 4px;
      font: 15px var(--font-body);
      color: var(--fg);
      background: #fff;
      transition: border-color 0.2s;
      outline: none;
    }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--accent);
    }
    /* The base rule sets outline:none (keeps mouse-focus clean); this
       higher-specificity rule restores a visible ring for keyboard users,
       which the base rule would otherwise cancel (WCAG 2.4.7). */
    .form-group input:focus-visible,
    .form-group select:focus-visible,
    .form-group textarea:focus-visible {
      outline: 2px solid var(--accent-text);
      outline-offset: 2px;
    }
    .form-group textarea { resize: vertical; min-height: 120px; }
    /* Drop the platform control and draw our own chevron, so the select sits
       on the same 1.5px border and 4px radius as the text inputs instead of
       rendering as an OS widget beside them. Extra right padding keeps the
       longest option clear of the chevron. */
    .form-group select {
      appearance: none;
      -webkit-appearance: none;
      padding-right: 44px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2303245c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
      cursor: pointer;
    }
    .form-assurance {
      margin-top: 14px;
      font-size: 13px;
      color: var(--muted);
    }
    .form-assurance a {
      color: var(--accent-text);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .form-assurance a:hover { color: var(--fg); }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    @media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }
    .form-math {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .form-math input { width: 80px; }
    .form-math span { font-size: 15px; color: var(--muted); }

    .contact-heading { margin-bottom: 48px; }
    .contact-info { display: flex; flex-direction: column; gap: 24px; }
    .contact-accordion { border-top: 1px solid var(--border); }
    .accordion-item { border-bottom: 1px solid var(--border); }
    .accordion-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 18px 0;
      background: none;
      border: 0;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 16px;
      color: var(--fg);
      cursor: pointer;
      text-align: left;
    }
    .accordion-trigger::after {
      content: '+';
      font-size: 20px;
      color: var(--muted);
      transition: transform 0.2s;
    }
    .accordion-item.open .accordion-trigger::after {
      content: '−';
    }
    .accordion-panel {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }
    .accordion-panel-inner {
      padding-bottom: 20px;
      font-size: 14px;
      color: var(--muted);
      line-height: 1.7;
    }

    /* ===== FOOTER ===== */
    footer {
      background: var(--navy-dark);
      color: rgba(255,255,255,0.6);
      padding: 64px 0 32px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1.5fr 1fr;
      gap: 48px;
      margin-bottom: 48px;
    }
    @media (max-width: 768px) {
      .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    }
    footer h2 {
      font-size: 14px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #fff;
      margin-bottom: 20px;
    }
    footer p, footer li { font-size: 14px; line-height: 1.8; color: rgba(255,255,255, 0.6); }
    footer li { list-style: none; }
    footer a { color: rgba(255,255,255,0.6); transition: color 0.2s; }
    footer a:hover { color: #fff; }
    .footer-address p + p { margin-top: 2px; }
    .footer-address .label { color: rgb(255,255,255); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 16px; }
    .footer-partners {
      display: flex;
      gap: 24px;
      align-items: flex-start;
      flex-wrap: wrap;
      margin: 0;
    }
    .footer-partner-logo {
      height: 60px;
      width: auto;
      max-width: 100%;
    }
    .footer-bottom {
      padding-top: 32px;
      border-top: 1px solid rgba(255,255,255,0.06);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      font-size: 13px;
    }
    .footer-bottom-links { display: flex; gap: 24px; flex-wrap: wrap; }
    .footer-bottom-links a { font-size: 13px; }
    /* Touch devices: enlarge footer link tap targets without changing the
       denser mouse/desktop layout (WCAG 2.5.5). */
    @media (pointer: coarse) {
      footer li a { display: inline-block; padding: 6px 0; }
      .footer-bottom-links a { padding: 6px 4px; }
    }
    .footer-social { display: flex; gap: 12px; }
    .footer-social a {
      width: 36px; height: 36px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.1);
      font-size: 14px;
      transition: border-color 0.2s, background 0.2s;
    }
    .footer-social a:hover {
      border-color: var(--accent);
      background: rgba(33,184,244,0.1);
    }

    /* ===== PLACEHOLDER IMAGES ===== */
    .ph-img {
      background: var(--border);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    /* ===== SUCCESS MESSAGE ===== */
    .form-error {
      font-size: 12px;
      color: #d32f2f;
      margin-top: 4px;
      display: none;
    }
    .form-error.show { display: block; }
    .form-group.has-error input,
    .form-group.has-error textarea { border-color: #d32f2f; }
    .form-success {
      display: none;
      padding: 16px 20px;
      background: rgba(33,184,244,0.08);
      border: 1px solid var(--accent);
      border-radius: 4px;
      color: var(--fg);
      font-size: 14px;
      margin-top: 12px;
      animation: fadeIn 0.3s ease;
    }
    .form-success.show { display: block; }
    .btn-loading {
      position: relative;
      pointer-events: none;
      opacity: 0.7;
    }
    .btn-loading::after {
      content: '';
      width: 14px; height: 14px;
      border: 2px solid rgba(255,255,255,0.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
      flex-shrink: 0;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

    .section-title { margin-bottom: 8px; }
    .section-desc { margin-bottom: 8px; }

    /* ===== HONEYPOT (spam trap — hidden from humans) ===== */
    .hp-field {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    /* ===== SERVER-SIDE FORM NOTICES ===== */
    .form-notice {
      padding: 16px 20px;
      border-radius: 4px;
      font-size: 14px;
      margin-bottom: 24px;
      animation: fadeIn 0.3s ease;
    }
    .form-notice.is-success {
      background: rgba(33,184,244,0.08);
      border: 1px solid var(--accent);
      color: var(--fg);
    }
    .form-notice.is-error {
      background: rgba(211,47,47,0.06);
      border: 1px solid #d32f2f;
      color: #b71c1c;
    }

    /* ===== INTERIOR PAGE HERO ===== */
    .page-hero {
      padding: 120px 0 72px;
    }
    .page-hero h1 { max-width: 20ch; }
    .page-hero .subhead { margin-bottom: 12px; }
    .page-hero-lede {
      margin-top: 16px;
      max-width: 56ch;
      font-size: 18px;
      line-height: 1.6;
      color: rgba(255,255,255,0.7);
    }
    @media (max-width: 768px) {
      /* Nav is ~56px; keep clearance but reclaim the heavy top space. */
      .page-hero { padding: 92px 0 48px; }
    }

    /* ===== EDITOR CONTENT (block-editable pages) ===== */
    .entry-content {
      max-width: 960px;
    }
    .entry-content > * + * { margin-top: 20px; }
    .entry-content h2 {
      font-size: clamp(24px, 3vw, 32px);
      margin-top: 56px;
      margin-bottom: 4px;
    }
    .entry-content h3 {
      font-size: clamp(19px, 2vw, 23px);
      margin-top: 40px;
      margin-bottom: 4px;
    }
    .entry-content h2:first-child,
    .entry-content h3:first-child { margin-top: 0; }
    /* Cap the running-text measure for readability (~68ch); structural blocks
       and any aside stay wider, but prose should not run edge to edge. */
    .entry-content p { color: var(--muted); max-width: 62ch; }
    .entry-content li { max-width: 62ch; }
    .entry-content a {
      color: var(--accent-text);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .entry-content a:hover { color: var(--accent-hover); }
    /* Link-buttons in editable page content keep .btn styling, not link styling. */
    .entry-content a.btn,
    .entry-content a.btn:hover { color: var(--navy-dark); text-decoration: none; }
    .entry-content ul,
    .entry-content ol { padding-left: 1.25em; color: var(--muted); }
    .entry-content li + li { margin-top: 8px; }
    .entry-content li::marker { color: var(--accent); }
    .entry-content img { border-radius: 6px; margin: 12px 0; }
    .entry-content blockquote {
      margin-left: 0;
      padding: 20px 24px;
      background: var(--surface);
      border-radius: 8px;
      font-size: 18px;
      color: var(--fg);
    }
    .entry-content hr {
      border: 0;
      border-top: 1px solid var(--border);
      margin: 48px 0;
    }
    /* Trust callout — a single set-apart reassurance panel, not a card grid. */
    .entry-callout {
      margin-top: 32px;
      padding: 24px 28px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
    }
    .entry-callout > * + * { margin-top: 12px; }
    .entry-callout-title {
      max-width: none;
      font-family: var(--font-display);
      font-weight: 600;
      color: var(--fg);
    }
    .entry-callout ul { margin: 0; }
    /* Numbered process — a real ordered sequence, so the numerals carry meaning. */
    .entry-steps {
      list-style: none;
      padding-left: 0;
      margin-top: 24px;
      counter-reset: step;
    }
    .entry-steps li {
      position: relative;
      counter-increment: step;
      padding-left: 52px;
      max-width: 62ch;
    }
    .entry-steps li + li { margin-top: 20px; }
    .entry-steps li::before {
      content: counter(step);
      position: absolute;
      left: 0;
      top: -3px;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 16px;
      color: var(--accent-text);
      border: 1.5px solid var(--accent);
      border-radius: 999px;
    }
    /* Inline CTA at the foot of editable marketing copy. */
    .entry-cta {
      margin-top: 40px;
      padding-top: 32px;
      border-top: 1px solid var(--border);
    }
    .entry-cta p { max-width: 52ch; }
    .entry-cta .btn { margin-top: 16px; }

    /* ===== EDITORIAL PAGE ASIDE (marketing pages with a CTA) ===== */
    .page-body--aside {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 56px;
      align-items: start;
    }
    .page-aside { position: sticky; top: 96px; }
    .aside-card {
      padding: 28px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--bg);
      box-shadow: 0 20px 50px -30px rgba(3,36,92,0.35);
    }
    .aside-price {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 32px;
      letter-spacing: -0.01em;
      color: var(--fg);
    }
    .aside-price-note { margin-top: 4px; font-size: 14px; color: var(--muted); }
    .aside-heading {
      margin-top: 20px;
      font-family: var(--font-display);
      font-weight: 600;
      color: var(--fg);
    }
    .aside-cta { width: 100%; justify-content: center; margin-top: 20px; }
    .aside-cta-secondary {
      display: block;
      margin-top: 12px;
      text-align: center;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 14px;
      color: var(--accent-text);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .aside-cta-secondary:hover { color: var(--fg); }
    .aside-trust {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
      font-size: 14px;
      line-height: 1.5;
      color: var(--muted);
    }
    .aside-trust svg { color: var(--accent-text); flex-shrink: 0; margin-top: 2px; }
    @media (max-width: 900px) {
      .page-body--aside { grid-template-columns: 1fr; gap: 40px; }
      .page-aside { position: static; }
      /* The aside stacks directly after the copy here and carries the same
         "Talk to us" action, so the inline foot CTA would just double it. */
      .page-body--aside .entry-cta { display: none; }
    }

    /* ===== IN-PAGE FORMS (security notification, GDPR request) ===== */
    .security-form-wrap,
    .page-form-wrap {
      max-width: 620px;
      margin-top: 48px;
      padding-top: 40px;
      border-top: 1px solid var(--border);
    }
    .security-form-wrap h2,
    .page-form-wrap h2 { margin-bottom: 24px; }